:root { --brand: #00a8f8;
--brand-dark: #0076dd;
--navy: #063b5c;
--navy-2: #0b4f75;
--sky: #eaf8ff;
--sky-2: #f5fbff;
--ink: #11283a;
--muted: #2c2c2c;
--line: #d9e8f1;
--white: #ffffff;
--success: #118a61;
--success-bg: #eaf8f3;
--gold: #f4c64e;
--black: #0b0b0b;
--black-soft: #171717;
--yellow: #ffc928;
--yellow-soft: #fff7d6;
--yellow-dark: #b98300;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.11);
--radius: 20px; --max: 1320px;
--newmax: 1320px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
.new-theme-design a {
color: inherit;
text-decoration: none !important;
}
.new-theme-design .wrap {
width: min(var(--newmax), calc(100% - 40px));
margin: 0 auto;
}
.new-theme-design .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62ccff);
box-shadow: 0 8px 20px rgba(0, 168, 248, 0.23);
}
.new-theme-design .button {
text-decoration: none !important;
}
.new-theme-design .brand span {
color: var(--brand);
}
.new-theme-design .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.new-theme-design .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: 0.2s ease;
font-size: 14px;
}
.new-theme-design .button svg {
display: none;
}
.new-theme-design .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: 0 10px 25px rgba(0, 168, 248, 0.25);
}
.new-theme-design .button.primary:hover {
background: var(--brand-dark);
}
.new-theme-design .button.secondary {
background: var(--white);
color: var(--navy);
border-color: #7c7c7c;
text-decoration: none !important;
}
.new-theme-design .button.secondary:hover {
background: #000;
border-color: #000;
color: #fff;
}
.new-theme-design .button.secondary:hover {
background: #323232 !important;
}
.new-theme-design .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%,
rgba(0, 168, 248, 0.18),
transparent 30%),
radial-gradient(circle at 15% 30%,
rgba(0, 168, 248, 0.08),
transparent 30%),
linear-gradient(180deg, #ffffff 0%, #f3fbff 100%);
}
.new-theme-design .heroGrid {
display: grid;
grid-template-columns: 1.03fr 0.97fr;
gap: 58px;
align-items: center;
}
.new-theme-design .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 15px;
font-weight: 850;
margin-bottom: 20px;
}
.new-theme-design h1,
.new-theme-design h2,
.new-theme-design h3 {
margin: 0;
line-height: 1.4; font-weight: 700;
} .new-theme-design h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
font-weight: 700;
margin-bottom: 15px;
}
.new-theme-design h3 {
font-size: 23px;
color: var(--black);
font-weight: 700;
}
.new-theme-design .lead {
color: #585858;
font-size: 19px;
margin: 24px 0 0;
max-width: 720px;
font-weight: 500;
}
.new-theme-design .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.new-theme-design .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.new-theme-design .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: 0 10px 25px rgba(11, 11, 11, 0.18);
text-decoration: none !important;
}
.new-theme-design .hero .button.primary:hover {
background: var(--black-soft);
text-decoration: none !important;
}
.new-theme-design .hero .button.secondary,
.new-theme-design .dfm-header__inner .button.secondary {
border-color: var(--yellow);
box-shadow: inset 0 -3px 0 var(--yellow);
text-decoration: none !important;
}
.new-theme-design .hero__title-accent {
color: #0076dd !important;
}
.new-theme-design .hero .button.primary,
.new-theme-design .button.black {
position: relative;
overflow: hidden;
cursor: pointer;
isolation: isolate;
}
.new-theme-design .hero .button.primary:hover,
.new-theme-design .ctaPanel .button.primary:hover {
background: #1679dc;
}
.new-theme-design .ctaPanel .button.primary {
text-decoration: none !important;
}
.new-theme-design .hero .button.primary::before,
.new-theme-design .button.black::before {
content: "";
position: absolute;
top: -50%;
left: -80%;
width: 60%;
height: 200%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.1),
#c9c9c9,
rgba(255, 255, 255, 0.1),
transparent);
filter: blur(5px);
transform: skewX(-20deg);
animation: lightSweep 2s ease-in-out infinite;
}
@keyframes lightSweep {
0% {
left: -80%;
}
100% {
left: 140%;
}
}
.new-theme-design .hero .button.secondary,
.new-theme-design .dfm-header__inner .button.secondary {
position: relative;
border: none;
isolation: isolate;
overflow: hidden;
background: #ad750a;
}
.new-theme-design .hero .button.secondary:hover,
.new-theme-design .dfm-header__inner .button.secondary:hover {
color: #000;
}
.new-theme-design .hero .button.secondary:hover::after,
.new-theme-design .dfm-header__inner .button.secondary:hover::after {
background: #ffedb7;
}
.new-theme-design .hero .button.secondary::before,
.new-theme-design .dfm-header__inner .button.secondary::before {
content: "";
position: absolute;
inset: -2px;
background: conic-gradient(from 0deg,
transparent,
transparent 25%,
#ffc928 40%,
#fff 50%,
#ffc928 60%,
transparent 75%);
animation: rotateBorder 2s linear infinite;
z-index: -2;
}
.new-theme-design .hero .button.secondary::after,
.new-theme-design .dfm-header__inner .button.secondary::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 10px;
background: #fff;
z-index: -1;
}
@keyframes rotateBorder {
to {
transform: rotate(360deg);
}
}
.new-theme-design .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9edcf8;
background: linear-gradient(145deg, #ffffff 0%, #eaf8ff 100%);
box-shadow: var(--shadow);
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.new-theme-design .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
} .new-theme-design .clientBand {
background: var(--white);
padding: 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.new-theme-design .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.new-theme-design .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #b8d7e7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7b8e9e;
font-size: 12px;
font-weight: 750;
} .new-theme-design .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.new-theme-design .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.new-theme-design .ratingGrid img {
max-height: 64px;
width: fit-content;
height: auto;
}
.new-theme-design .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.new-theme-design .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.new-theme-design .ratingLead strong {
display: block;
font-size: 20px;
}
.new-theme-design .ratingLead span {
color: #d6d6d6;
font-size: 15px;
}
.new-theme-design .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.new-theme-design .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.new-theme-design .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.new-theme-design .ratingItem span {
color: #cfcfcf;
font-size: 11px;
} .new-theme-design .awardBand {
background: #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 30px 0;
border-top: 3px solid var(--yellow);
}
.new-theme-design .awardBand h2 {
color: #fff;
}
.new-theme-design .awardBand .sectionHead {
margin-bottom: 10px;
}
.new-theme-design .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.new-theme-design .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.new-theme-design .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.new-theme-design .awardLead span {
color: var(--muted);
font-size: 13px;
}
.new-theme-design .awardItem {
background: #fff;
border: 1px solid #e8d487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: 0 8px 22px rgba(11, 11, 11, 0.05);
}
.new-theme-design section {
padding: 100px 0;
}
.new-theme-design .awardBand .sectionHead { max-width: 38%; }
.new-theme-design .sectionHead p {
color: var(--muted);
margin: 16px 0 15px;
font-size: 18px;
}
.new-theme-design .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.new-theme-design .aiJourney h2 {
color: #fff;
}
.new-theme-design .aiJourney .sectionHead p {
color: #d7d7d7;
}
.new-theme-design .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.new-theme-design .aiStep {
position: relative;
background: #151515;
border: 1px solid #2a2a2a;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.new-theme-design .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.new-theme-design .aiStep:last-child::after {
display: none;
}
.new-theme-design .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.new-theme-design .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.new-theme-design .aiStep span {
color: #cfcfcf;
font-size: 15px;
line-height: 1.5;
display: block;
}
.new-theme-design .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #f2d55c;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.new-theme-design .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.new-theme-design .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.new-theme-design .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
line-height: 28px;
}
.new-theme-design .outcome span {
color: var(--muted);
font-size: 16px;
}
.new-theme-design .awardBand .sectionHead p {
color: #fff;
}
.new-theme-design .aiStep.last-child::after {
display: none;
}
.new-theme-design .capability {
background: #fff;
}
.new-theme-design .capability.alt {
background: var(--sky-2);
}
.new-theme-design .capability.alt .key-feature-sec-head {
display: none;
}
.new-theme-design .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.new-theme-design .twoCol.reverse .visual {
order: 2;
}
.new-theme-design .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.new-theme-design .visual .placeholder {
min-height: 355px;
}
.new-theme-design .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.new-theme-design .featureList.primaryOnly .featureItem:nth-child(n + 5) {
display: none;
}
.new-theme-design details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.new-theme-design details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.new-theme-design details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.new-theme-design details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.new-theme-design details.capabilityMore[open] summary::after {
content: "−";
}
.new-theme-design details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.new-theme-design .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.new-theme-design .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.new-theme-design .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design .darkSection h2,
.darkSection h3 {
color: #fff;
}
.new-theme-design .darkSection .sectionHead p,
.darkSection .copy p {
color: #d7d7d7;
}
.new-theme-design .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.new-theme-design .darkSection .featureItem {
color: #f7f7f7;
}
.new-theme-design .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.new-theme-design .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.new-theme-design .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.new-theme-design .darkSection .placeholder small {
color: #d0d0d0;
}
.new-theme-design .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.new-theme-design .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, 0.05);
}
.new-theme-design .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: 0 6px 14px rgba(255, 201, 40, 0.22);
}
.new-theme-design .card p {
color: var(--muted);
margin: 12px 0 0;
font-size: 16px;
}
.new-theme-design .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.new-theme-design .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.new-theme-design .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
font-size: 18px;
line-height: 1.5;
}
.new-theme-design .challenge p {
color: var(--muted);
font-size: 16px;
margin: 0;
}
.new-theme-design .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design .benefitBand h2 {
color: #fff;
}
.new-theme-design .benefitBand .sectionHead p {
color: #d5d5d5;
}
.new-theme-design .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.new-theme-design .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design .benefit {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, 0.06);
}
.new-theme-design .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.new-theme-design .benefit span {
color: #e1e1e1;
font-size: 14px;
}
.new-theme-design .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.new-theme-design .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.new-theme-design .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.new-theme-design .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.new-theme-design .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.new-theme-design .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.new-theme-design .faq {
max-width: 900px;
}
.new-theme-design details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.new-theme-design summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
font-size: 19px;
}
.new-theme-design details p {
color: var(--muted);
margin: 12px 0 0;
font-size: 16px;
}
.new-theme-design .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: var(--shadow);
border-top: 5px solid var(--yellow);
}
.new-theme-design .ctaPanel h2 {
color: #fff;
}
.new-theme-design .ctaPanel p {
color: #e6e6e6;
font-size: 18px;
margin: 14px 0 30px;
}
.new-theme-design .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
text-decoration: none;
}
.new-theme-design .ctaPanel .button.primary:hover {
background: #ffd84d;
}
.new-theme-design .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
}
.new-theme-design .awardBand h2 {
font-size: clamp(32px, 4.3vw, 40px);
} .new-theme-design .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-top: 5px solid var(--yellow);
border-radius: 0;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 10px 28px rgba(6, 59, 92, 0.06);
border-radius: 16px;
}
.new-theme-design .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.new-theme-design .inlineCta h3 {
font-size: 28px;
line-height: 1.2;
margin-bottom: 6px;
}
.new-theme-design .inlineCta.dark h3 {
color: #fff;
}
.new-theme-design .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 16px;
max-width: 680px;
margin-bottom: 24px;
}
.new-theme-design .inlineCta.dark p {
color: #d8d8d8;
}
.new-theme-design .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
margin-top: 15px;
margin-bottom: 15px;
}
.new-theme-design .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
text-decoration: none !important;
}
.new-theme-design .button.yellow:hover {
background: #ffd84d;
text-decoration: none !important;
}
.new-theme-design .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
text-decoration: none !important;
}
.new-theme-design .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.new-theme-design .inlineCta.dark .button.secondary:hover,
.new-theme-design .ctaPanel .button.secondary:hover {
background: #323232 !important;
}
.button {
transition: all 0.3s;
}
.new-theme-design .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.new-theme-design .button.black:hover {
background: #0076dd;
border-color: #0076dd;
}
.new-theme-design .auditNote {
margin-top: 20px;
background: #ecf9ff;
border: 1px solid #bde9fd;
color: #315d76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.new-theme-design footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
.new-theme-design ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.new-theme-design .awards__label { color: #222;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.new-theme-design.ai-powered-facility-management .awards__label,
.new-theme-design.fm-simplify-work-order-management .awards__label {
color: #fff;
}
.new-theme-design.fm-page .awards__label {
color: #fff;
}
.new-theme-design .awards__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 18px;
padding-left: 0px;
margin-bottom: 0px;
}
.new-theme-design .awards__list img {
height: 80px;
width: auto;
}
.new-theme-design .trusted-brand {
background: #fff;
}
.new-theme-design .trusted-brand .dzcmms-marquee {
padding-top: 0 !important;
background: #fff !important;
padding-bottom: 20px;
}
.new-theme-design .top-rated-logos {
display: flex;
gap: 10px;
justify-content: space-between;
flex-wrap: wrap;
}
.new-theme-design .key-feature-sec-tab .nav.nav-tabs {
display: flex;
flex-direction: column;
border: none;
}
.new-theme-design .key-feature-sec-tab .nav.nav-tabs .nav-item {
border: none;
background: none;
margin-bottom: 10px;
width: 100%;
}
.new-theme-design .key-feature-sec-tab .nav.nav-tabs .nav-item .nav-link {
background: #fff;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
width: 100%;
text-align: left;
color: #222;
}
.new-theme-design .key-feature-sec-tab .nav.nav-tabs .nav-item .nav-link.active {
color: var(--brand-dark);
background: #00a8f8;
color: #fff;
}
.new-theme-design .logo-grid {
display: grid;
grid-template-columns: repeat(4, 185px);
}
.new-theme-design .maintenance-cta {
padding: 0;
}
.new-theme-design .maintenance-cta {
background: #f0f7fb !important;
padding-top: 30px;
padding-bottom: 30px;
}
.new-theme-design .maintenance-cta .inlineCta {
margin-top: 0;
background: #fff !important;
box-shadow: none;
}
.new-theme-design .awards__list img.h-45 {
height: 65px;
}
.new-theme-design .vedaSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #272727;
}
.new-theme-design .vedaSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #272727;
}
.new-theme-design .vedaSection h2,
.new-theme-design .vedaSection h3 {
color: #fff;
}
.new-theme-design .vedaSection .copy p {
color: #d7d7d7;
}
.new-theme-design .vedaSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.new-theme-design .vedaGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
}
.new-theme-design .vedaPromptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 22px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}
.new-theme-design .vedaPromptTitle {
display: flex;
align-items: center;
gap: 10px;
font-weight: 900;
margin-bottom: 16px;
font-size: 22px;
}
.new-theme-design .vedaDot {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow);
color: var(--black);
display: grid;
place-items: center;
font-size: 12px;
}
.new-theme-design .prompt {
background: #1c1c1c;
border: 1px solid #303030;
border-radius: 12px;
padding: 13px 15px;
margin-top: 10px;
color: #f2f2f2;
font-size: 13px;
}
.new-theme-design .vedaActions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 24px;
}
.new-theme-design .vedaAction {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 17px;
}
.new-theme-design .vedaAction strong {
display: block;
color: var(--yellow);
font-size: 18px;
margin-bottom: 5px;
}
.new-theme-design .vedaAction span {
color: #cfcfcf;
font-size: 16px;
}
.new-theme-design .vedaPromptBox .prompt {
font-size: 16px;
}
.new-theme-design .vedaGrid .featureList .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: #fff;
font-size: 15px;
line-height: 20px;
}
.new-theme-design .coreGrid,
.new-theme-design .cards,
.new-theme-design .proofCards,
.new-theme-design .seoGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.coreCard,
.card,
.proofCard,
.seoCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, 0.05);
}
.new-theme-design .coreIcon,
.new-theme-design .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
font-size: 12px;
}
.new-theme-design .coreCard a {
display: inline-flex;
margin-top: 16px;
color: var(--brand-dark);
font-size: 13px;
font-weight: 850;
border-bottom: 2px solid var(--yellow);
}
.new-theme-design .metricBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design .metricGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.new-theme-design .metric strong {
display: block;
color: var(--yellow);
font-size: 36px;
margin-bottom: 6px;
}
.metricBand h2 {
color: #fff;
}
.metric {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 28px;
background: rgba(255, 255, 255, 0.06);
}
.metric span {
color: #e1e1e1;
font-size: 14px;
}
.new-theme-design .metricBand .sectionHead p {
color: #d5d5d5;
}
.new-theme-design .visual .section-img img {
width: 100%;
max-height: 600px;
height: auto;
object-fit: cover;
border-radius: 20px;
overflow: hidden;
}
.new-theme-design .hero-banner {
position: relative;
}
.new-theme-design .hero-banner .svg-anima {
position: absolute;
top: -25px;
left: 0;
width: 73%;
}
.new-theme-design .hero-banner>img {
margin-top: 60px;
border-radius: 15px;
}
.manage-work-hero-banner-svg-1 {
position: absolute;
left: -50px;
top: 25px;
}
.manage-work-hero-banner-svg-1 img {
max-width: 320px;
}
.hero-banner-rounded .hero-pic {
border-radius: 15px;
}
.manage-work-hero-banner-svg-2 {
position: absolute;
right: -50px;
bottom: 25px;
}
.manage-work-hero-banner-svg-2 img {
max-width: 280px;
}
.hero-video-overlay-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
outline: none;
}
.hero-video-overlay-btn a {
outline: none;
border: none;
}
.hero-video-overlay-btn img {
max-width: 120px;
}
@media (max-width: 980px) {
.new-theme-design .ratingSectionGrid {
grid-template-columns: 1fr;
}
.new-theme-design .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design .heroGrid,
.twoCol,
.ctaPanel {
grid-template-columns: 1fr;
}
.new-theme-design .twoCol.reverse .visual {
order: initial;
}
.new-theme-design .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design .ratingGrid,
.awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design .ratingLead,
.awardLead {
grid-column: 1/-1;
text-align: center;
}
.new-theme-design .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design .aiStep:nth-child(3)::after,
.aiStep:last-child::after {
display: none;
}
.new-theme-design .outcomeGrid,
.challengeGrid,
.benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design .cards,
.proofCards {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design .navlinks {
display: none;
}
.awardBand .d-flex {
flex-direction: column;
}
.new-theme-design .top-rated-logos {
flex-wrap: wrap;
justify-content: center;
}
.new-theme-design .twoCol {
grid-template-columns: 1fr;
}
.inlineCta .d-flex {
flex-direction: column;
}
.new-theme-design .proofCards {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
}
.new-theme-design .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design .challengeGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design .cards,
.proofCards {
grid-template-columns: repeat(1, 1fr);
}
.new-theme-design .twoCol {
grid-template-columns: 1fr;
}
.new-theme-design .copy {
order: 2;
}
.new-theme-design .visual {
order: 1;
}
.new-theme-design .visual img {
height: auto;
}
.new-theme-design .inlineCtaActions {
flex-direction: column;
}
.new-theme-design .inlineCtaActions br {
display: none;
}
.hero-banner {
display: none;
}
.new-theme-design .awards__list {
gap: 8px;
}
.new-theme-design .metricGrid,
.new-theme-design .coreGrid,
.new-theme-design .cards,
.new-theme-design .proofCards,
.new-theme-design .seoGrid,
.new-theme-design .vedaActions {
grid-template-columns: repeat(1, 1fr);
}
.new-theme-design .metricGrid,
.new-theme-design .coreGrid,
.new-theme-design .cards,
.new-theme-design .proofCards,
.new-theme-design .seoGrid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
}
.new-theme-design .vedaGrid {
grid-template-columns: 1fr;
}
.new-theme-design .ratingGrid {
grid-template-columns: repeat(2, 1fr) !important;
}
.new-theme-design .ctaPanel .button.secondary,
.new-theme-design .ctaPanel .button.primary {
width: 100%;
}
.cmms-integration-design .d-none {
display: block !important;
}
.new-theme-design .logo-grid {
display: grid;
grid-template-columns: repeat(2, 185px);
margin-top: 12px !important;
}
.new-theme-design .key-feature-sec-tab .nav.nav-tabs .nav-item {
padding-left: 0;
padding-right: 0;
margin-bottom: 2px;
}
.new-theme-design section {
padding: 30px 0;
}
.new-theme-design h1,
.new-theme-design h2,
.new-theme-design h3 {
line-height: 1.4;
}
.new-theme-design .ratingItem {
border: none;
}
.new-theme-design .aiFlow {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.new-theme-design .awards__list img.h-45 {
height: 45px;
}
.new-theme-design .awards__list img {
height: 49px;
}
}
@media (max-width: 640px) {
.new-theme-design .awardProofGrid {
grid-template-columns: 1fr;
}
.new-theme-design .wrap {
width: min(var(--max), calc(100% - 24px));
}
.new-theme-design .hero {
padding: 58px 0 52px;
}
.new-theme-design section {
padding: 64px 0;
}
.new-theme-design h1 {
font-size: 44px;
}
.new-theme-design .aiFlow {
grid-template-columns: 1fr 1fr;
}
.new-theme-design .aiStep::after {
display: none;
}
.new-theme-design .logoRow,
.ratingGrid,
.awardGrid,
.outcomeGrid,
.challengeGrid,
.benefitGrid,
.cards,
.proofCards,
.integrationGrid,
.featureList {
grid-template-columns: 1fr;
}
.new-theme-design .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.new-theme-design .ctaPanel {
padding: 34px 24px;
}
.new-theme-design .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design .inlineCtaActions {
width: 100%;
}
.new-theme-design .inlineCtaActions .button {
flex: 1;
}
} .new-theme-design .section.soft {
background: var(--sky-2);
}
.new-theme-design .center {
text-align: center;
}
.new-theme-design .eyebrow {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
text-transform: none;
letter-spacing: 0;
}
.new-theme-design h1,
.new-theme-design h2,
.new-theme-design h3 {
margin-top: 0;
line-height: 1.4;
letter-spacing: -0.035em;
}
.new-theme-design h1 {
font-size: clamp(43px, 6vw, 53px);
color: var(--black);
margin-bottom: 22px;
line-height: 1.09;
}
.new-theme-design h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
margin-bottom: 18px;
}
.new-theme-design h3 {
font-size: 23px;
color: var(--black);
margin-bottom: 10px;
}
.new-theme-design p {
margin-top: 0;
}
.new-theme-design .lead {
color: var(--muted);
font-size: 20px;
max-width: 780px;
}
.new-theme-design .center .lead {
margin-left: auto;
margin-right: auto;
} .new-theme-design .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%,
rgba(0, 168, 248, 0.18),
transparent 30%),
radial-gradient(circle at 15% 30%,
rgba(0, 168, 248, 0.08),
transparent 30%),
linear-gradient(180deg, #fff 0%, #f3fbff 100%);
}
.new-theme-design .hero-grid {
display: grid;
grid-template-columns: 1.03fr 0.97fr;
gap: 58px;
align-items: center;
}
.new-theme-design .hero p {
max-width: 720px;
}
.new-theme-design .hero-points {
list-style: none;
padding: 0;
margin: 28px 0;
display: grid;
gap: 12px;
}
.new-theme-design .hero-points li {
display: flex;
gap: 10px;
align-items: flex-start;
font-weight: 700;
color: var(--ink);
}
.new-theme-design .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.new-theme-design .actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 28px;
}
.new-theme-design .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: 0.2s ease;
}
.new-theme-design .btn.primary {
background: var(--black);
color: #fff;
}
.new-theme-design .btn.secondary {
background: #fff;
color: var(--navy);
border-color: var(--yellow);
box-shadow: inset 0 -3px 0 var(--yellow);
}
.new-theme-design .btn:hover {
transform: translateY(-1px);
}
.new-theme-design .hero-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
}
.new-theme-design .mock {
min-height: 430px;
border-radius: 16px;
background: linear-gradient(145deg, #fff 0%, var(--sky) 100%);
border: 1px solid #cbeaf9;
padding: 24px;
}
.new-theme-design .mock h3 {
font-size: 18px;
}
.new-theme-design .mock-row {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
margin: 11px 0;
box-shadow: 0 5px 15px rgba(6, 59, 92, 0.06);
}
.new-theme-design .mock-row strong {
display: block;
margin-bottom: 4px;
}
.new-theme-design .mock-row:nth-of-type(1) {
border-left: 4px solid var(--brand);
}
.new-theme-design .mock-row:nth-of-type(2) {
border-left: 4px solid var(--success);
}
.new-theme-design .mock-row:nth-of-type(3) {
border-left: 4px solid var(--yellow);
}
.new-theme-design .mock-row:nth-of-type(4) {
border-left: 4px solid var(--navy);
}
.new-theme-design .tag {
display: inline-block;
font-size: 11px;
font-weight: 800;
padding: 4px 8px;
border-radius: 999px;
background: var(--success-bg);
color: var(--success);
} .new-theme-design .trust {
background: #fff;
padding: 30px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.new-theme-design .trust-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
text-align: center;
}
.new-theme-design .logo-box {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #b8d7e7;
background: #fff;
display: grid;
place-items: center;
padding: 10px;
color: #7b8e9e;
font-size: 12px;
font-weight: 750;
} .new-theme-design .stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 36px;
}
.new-theme-design .stat {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.new-theme-design .stat strong {
display: block;
color: var(--black);
font-size: 28px;
margin-bottom: 8px;
}
.new-theme-design .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 34px;
}
.new-theme-design .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, 0.05);
transition: 0.2s ease;
}
.new-theme-design .card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(6, 59, 92, 0.1);
}
.new-theme-design .card p {
color: var(--muted);
}
.new-theme-design .icon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
font-size: 12px;
} .new-theme-design .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
margin-top: 74px;
}
.new-theme-design .feature:first-of-type { margin-top: 5px;
}
.new-theme-design .feature:nth-child(even) .feature-visual {
order: -1;
}
.new-theme-design .feature p {
color: var(--muted);
font-size: 17px;
}
.new-theme-design .feature ul {
padding-left: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 24px;
}
.new-theme-design .feature li {
font-size: 14px;
display: flex;
gap: 10px;
}
.new-theme-design .feature li::before {
content: "✓";
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
}
.new-theme-design .feature-visual {
min-height: 390px;
border-radius: var(--radius);
} .new-theme-design .visual-shell {
position: relative;
min-height: 390px;
border-radius: var(--radius);
padding: 18px;
overflow: hidden;
background:
radial-gradient(circle at 85% 15%,
rgba(0, 168, 248, 0.17),
transparent 27%),
linear-gradient(145deg, #fff 0%, var(--sky) 100%);
border: 1px solid #bfe7fa;
box-shadow: var(--shadow);
}
.new-theme-design .visual-shell::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.new-theme-design .window {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.97);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 14px 38px rgba(6, 59, 92, 0.12);
overflow: hidden;
}
.new-theme-design .window-bar {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: #f8fcff;
color: var(--navy);
}
.new-theme-design .dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
.new-theme-design .dot.red {
background: #ff6b6b;
}
.dot.yellow {
background: var(--yellow);
}
.dot.green {
background: #36c98f;
}
.new-theme-design .floating-badge {
position: absolute;
z-index: 3;
padding: 9px 12px;
border-radius: 10px;
font-size: 11px;
font-weight: 850;
box-shadow: 0 10px 24px rgba(6, 59, 92, 0.16);
}
.new-theme-design .floating-badge.top-right {
top: 22px;
right: 22px;
background: var(--yellow);
color: var(--black);
}
.new-theme-design .floating-badge.bottom-left {
bottom: 22px;
left: 22px;
background: var(--black);
color: #fff;
} .new-theme-design .pm-calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 7px;
padding: 14px;
}
.new-theme-design .pm-day {
height: 44px;
border-radius: 9px;
border: 1px solid var(--line);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 11px;
background: #fff;
}
.new-theme-design .pm-day.event-blue {
background: var(--sky);
border-color: #a8dff9;
color: var(--brand-dark);
font-weight: 800;
}
.new-theme-design .pm-day.event-green {
background: var(--success-bg);
border-color: #b9e8d6;
color: var(--success);
font-weight: 800;
}
.new-theme-design .pm-day.event-orange {
background: var(--yellow-soft);
border-color: #f1d96c;
color: #9a6a00;
font-weight: 800;
}
.new-theme-design .pm-day.event-purple {
background: #eef1f6;
border-color: #d6dfe7;
color: var(--navy);
font-weight: 800;
} .new-theme-design .pill-row {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 10px;
}
.new-theme-design .pill {
font-size: 11px;
font-weight: 800;
padding: 5px 9px;
border-radius: 999px;
background: var(--sky);
color: var(--brand-dark);
}
.new-theme-design .pill.cyan {
background: #e8faff;
color: #087a9c;
}
.pill.green {
background: var(--success-bg);
color: var(--success);
}
.new-theme-design .pill.orange {
background: var(--yellow-soft);
color: #8a6500;
}
.pill.pink {
background: #f2f2f2;
color: var(--black);
}
.new-theme-design .workorder-card {
margin: 16px;
padding: 16px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 7px 20px rgba(6, 59, 92, 0.07);
}
.new-theme-design .wo-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
margin-bottom: 12px;
}
.new-theme-design .wo-title {
font-size: 15px;
font-weight: 850;
color: var(--black);
}
.new-theme-design .wo-meta {
color: var(--muted);
font-size: 11px;
}
.new-theme-design .progress {
height: 8px;
border-radius: 999px;
background: #e8eff4;
overflow: hidden;
margin: 10px 0;
}
.new-theme-design .progress span {
display: block;
height: 100%;
width: 72%;
background: linear-gradient(90deg, var(--brand), #62ccff);
border-radius: inherit;
}
.new-theme-design .check-list {
display: grid;
gap: 8px;
padding: 14px;
}
.new-theme-design .check-row {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: #fff;
font-size: 12px;
}
.new-theme-design .status {
font-size: 10px;
font-weight: 850;
padding: 4px 7px;
border-radius: 999px;
}
.new-theme-design .status.done {
color: var(--success);
background: var(--success-bg);
}
.new-theme-design .status.warn {
color: #8a6500;
background: var(--yellow-soft);
}
.new-theme-design .status.info {
color: var(--brand-dark);
background: var(--sky);
} .new-theme-design .phone {
width: 220px;
margin: 8px auto 0;
padding: 10px;
border-radius: 30px;
background: var(--black);
box-shadow: 0 22px 50px rgba(6, 59, 92, 0.24);
}
.new-theme-design .phone-screen {
border-radius: 23px;
background: linear-gradient(180deg, #f7fcff, #fff);
min-height: 350px;
padding: 14px;
overflow: hidden;
}
.new-theme-design .phone-notch {
width: 70px;
height: 7px;
border-radius: 999px;
background: #222;
margin: 0 auto 12px;
}
.new-theme-design .task-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
margin: 9px 0;
background: #fff;
box-shadow: 0 4px 10px rgba(6, 59, 92, 0.04);
}
.new-theme-design .task-card strong {
display: block;
font-size: 12px;
}
.task-card small {
color: var(--muted);
font-size: 10px;
} .new-theme-design .sensor {
position: relative;
padding: 18px;
}
.new-theme-design .gauge-wrap {
display: flex;
justify-content: center;
padding: 16px 0 8px;
}
.new-theme-design .gauge {
width: 190px;
height: 95px;
overflow: hidden;
position: relative;
}
.new-theme-design .gauge::before {
content: "";
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
background: conic-gradient(from 270deg,
var(--success) 0 34%,
var(--yellow) 34% 57%,
#e44b4b 57% 75%,
#e7eef2 75% 100%);
inset: 0;
}
.new-theme-design .gauge::after {
content: "86°C";
position: absolute;
width: 125px;
height: 125px;
border-radius: 50%;
background: #fff;
left: 32px;
top: 32px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 28px;
font-weight: 900;
font-size: 24px;
color: var(--black);
}
.new-theme-design .sensor-line {
height: 110px;
position: relative;
border-radius: 12px;
overflow: hidden;
background:
linear-gradient(rgba(0, 168, 248, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.1) 1px, transparent 1px), #fff;
background-size: 26px 26px;
border: 1px solid var(--line);
}
.new-theme-design .sensor-line svg {
width: 100%;
height: 100%;
display: block;
} .new-theme-design .dash-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 14px;
padding: 16px;
}
.new-theme-design .mini-kpis {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.new-theme-design .mini-kpi {
padding: 12px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 4px 14px rgba(6, 59, 92, 0.05);
}
.new-theme-design .mini-kpi strong {
display: block;
font-size: 23px;
line-height: 1;
margin-bottom: 6px;
}
.new-theme-design .mini-kpi small {
color: var(--muted);
}
.new-theme-design .bar-chart {
height: 130px;
display: flex;
align-items: flex-end;
gap: 10px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: linear-gradient(180deg, #fff, #f6fcff);
}
.new-theme-design .bar {
flex: 1;
border-radius: 8px 8px 3px 3px;
min-width: 14px;
box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.04);
}
.new-theme-design .bar.b1 {
height: 42%;
background: linear-gradient(180deg, #62ccff, var(--brand));
}
.new-theme-design .bar.b2 {
height: 70%;
background: linear-gradient(180deg, #7bdaff, var(--brand-dark));
}
.new-theme-design .bar.b3 {
height: 58%;
background: linear-gradient(180deg, #ffe77a, var(--yellow));
}
.new-theme-design .bar.b4 {
height: 88%;
background: linear-gradient(180deg, #55d9a6, var(--success));
}
.new-theme-design .bar.b5 {
height: 64%;
background: linear-gradient(180deg, #9adfff, var(--brand));
}
.new-theme-design .bar.b6 {
height: 78%;
background: linear-gradient(180deg, #ffd95a, var(--yellow));
}
.new-theme-design .donut {
width: 138px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(var(--brand) 0 78%, #e8eff4 78% 100%);
margin: 14px auto;
position: relative;
box-shadow: 0 10px 24px rgba(0, 168, 248, 0.18);
}
.new-theme-design .donut::after {
content: "78%";
position: absolute;
inset: 22px;
background: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 900;
font-size: 24px;
color: var(--black);
} .new-theme-design .workflow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 34px;
}
.new-theme-design .step {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 22px;
box-shadow: 0 7px 20px rgba(6, 59, 92, 0.04);
}
.new-theme-design .step .num {
width: 34px;
height: 34px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 12px;
} .new-theme-design .compare {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 30px;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
background: #fff;
}
.new-theme-design .compare th,
.compare td {
padding: 16px 18px;
border-bottom: 1px solid var(--line);
text-align: left;
}
.new-theme-design .compare th {
background: #0668bd;
color: #fff;
}
.new-theme-design .compare tr:last-child td {
border-bottom: none;
} .new-theme-design .industries {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 30px;
}
.new-theme-design .industry {
padding: 20px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
background: #fff;
font-weight: 800;
color: var(--black);
} .new-theme-design .faq {
max-width: 900px;
margin: 32px auto 0;
}
.new-theme-design details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.new-theme-design summary {
cursor: pointer;
font-size: 18px;
font-weight: 800;
color: var(--navy);
}
.new-theme-design details p {
color: var(--muted);
padding-top: 12px;
margin-bottom: 0;
} .new-theme-design .cta {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 30px;
align-items: center;
border-top: 5px solid var(--yellow);
}
.new-theme-design .cta h2 {
color: #fff;
}
.cta p {
color: #e6e6e6;
}
.cta .actions {
justify-content: flex-end;
margin-top: 0;
}
.new-theme-design .cta .btn.primary {
background: var(--yellow);
color: var(--black);
}
.new-theme-design .cta .btn.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
box-shadow: none;
}
.new-theme-design .seo-note {
background: var(--yellow-soft);
border: 1px solid #f1d96c;
border-radius: 12px;
padding: 18px;
margin-top: 26px;
color: #6e5700;
font-size: 14px;
}
@media (max-width: 980px) {
.new-theme-design .hero-grid,
.feature,
.cta {
grid-template-columns: 1fr;
}
.new-theme-design .feature:nth-child(even) .feature-visual {
order: initial;
}
.new-theme-design .stats {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design .cards {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design .workflow {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design .industries {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design .trust-grid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design .cta .actions {
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.new-theme-design .container {
width: min(var(--container), calc(100% - 24px));
}
.new-theme-design .hero {
padding: 58px 0 52px;
}
.new-theme-design .section {
padding: 64px 0;
}
.new-theme-design h1 {
font-size: 44px;
}
.new-theme-design .stats,
.cards,
.workflow,
.industries,
.trust-grid,
.feature ul {
grid-template-columns: 1fr;
}
.new-theme-design .cta {
padding: 34px 24px;
}
.new-theme-design .dash-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.new-theme-design .cards {
grid-template-columns: repeat(1, 1fr);
}
.new-theme-design .feature {
grid-template-columns: 1fr;
}
.new-theme-design .feature-visual,
.new-theme-design .hero-card {
order: 0;
}
.new-theme-design .feature-content,
.new-theme-design .hero-cont {
order: 1;
}
.new-theme-design .workflow {
grid-template-columns: repeat(1, 1fr);
}
}   .new-theme-design.parts-inventory-manage .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%,
rgba(0, 168, 248, 0.18),
transparent 30%),
radial-gradient(circle at 15% 30%,
rgba(0, 168, 248, 0.08),
transparent 30%),
linear-gradient(180deg, #fff 0%, #f3fbff 100%);
}
.new-theme-design.parts-inventory-manage .hero-grid {
display: grid;
grid-template-columns: 1.03fr 0.97fr;
gap: 58px;
align-items: center;
}
.new-theme-design.parts-inventory-manage .hero p {
max-width: 720px;
}
.new-theme-design.parts-inventory-manage .hero-points {
list-style: none;
padding: 0;
margin: 28px 0;
display: grid;
gap: 12px;
}
.new-theme-design.parts-inventory-manage .hero-points li {
display: flex;
gap: 10px;
align-items: flex-start;
font-weight: 700;
color: var(--ink);
}
.new-theme-design.parts-inventory-manage .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.new-theme-design.parts-inventory-manage .actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 28px;
}
.new-theme-design.parts-inventory-manage .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: 0.2s ease;
}
.new-theme-design.parts-inventory-manage .btn.primary {
background: var(--black);
color: #fff;
}
.new-theme-design.parts-inventory-manage .btn.secondary {
background: #fff;
color: var(--navy);
border-color: var(--yellow);
box-shadow: inset 0 -3px 0 var(--yellow);
}
.new-theme-design.parts-inventory-manage .btn:hover {
transform: translateY(-1px);
}
.new-theme-design.parts-inventory-manage .hero-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
}
.new-theme-design.parts-inventory-manage .mock {
min-height: 430px;
border-radius: 16px;
background: linear-gradient(145deg, #fff 0%, var(--sky) 100%);
border: 1px solid #cbeaf9;
padding: 24px;
}
.new-theme-design.parts-inventory-manage.mock h3 {
font-size: 18px;
}
.new-theme-design.parts-inventory-manage .mock-row {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
margin: 11px 0;
box-shadow: 0 5px 15px rgba(6, 59, 92, 0.06);
}
.new-theme-design.parts-inventory-manage .mock-row strong {
display: block;
margin-bottom: 4px;
}
.new-theme-design.parts-inventory-manage .mock-row:nth-of-type(1) {
border-left: 4px solid var(--brand);
}
.new-theme-design.parts-inventory-manage .mock-row:nth-of-type(2) {
border-left: 4px solid var(--success);
}
.new-theme-design.parts-inventory-manage .mock-row:nth-of-type(3) {
border-left: 4px solid var(--yellow);
}
.new-theme-design.parts-inventory-manage .mock-row:nth-of-type(4) {
border-left: 4px solid var(--navy);
}
.new-theme-design.parts-inventory-manage .tag {
display: inline-block;
font-size: 13px;
font-weight: 800;
padding: 4px 8px;
border-radius: 999px;
background: var(--success-bg);
color: var(--success);
} .new-theme-design.parts-inventory-manage .trust {
background: #fff;
padding: 30px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.new-theme-design.parts-inventory-manage .trust-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
text-align: center;
}
.new-theme-design.parts-inventory-manage .logo-box {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #b8d7e7;
background: #fff;
display: grid;
place-items: center;
padding: 10px;
color: #7b8e9e;
font-size: 12px;
font-weight: 750;
} .new-theme-design.parts-inventory-manage .stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 36px;
}
.new-theme-design.parts-inventory-manage .stat {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.new-theme-design.parts-inventory-manage .stat strong {
display: block;
color: var(--black);
font-size: 28px;
margin-bottom: 8px;
}
.new-theme-design.parts-inventory-manage .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 34px;
}
.new-theme-design.parts-inventory-manage .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, 0.05);
transition: 0.2s ease;
}
.new-theme-design.parts-inventory-manage .card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(6, 59, 92, 0.1);
}
.new-theme-design.parts-inventory-manage .card p {
color: var(--muted);
}
.new-theme-design.parts-inventory-manage .icon2 {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
font-size: 12px;
} .new-theme-design.parts-inventory-manage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
margin-top: 74px;
}
.new-theme-design.parts-inventory-manage .feature:first-of-type {
margin-top: 42px;
}
.new-theme-design.parts-inventory-manage .feature:nth-child(even) .feature-visual {
order: -1;
}
.new-theme-design.parts-inventory-manage .feature p {
color: var(--muted);
font-size: 17px;
}
.new-theme-design.parts-inventory-manage .feature ul {
padding-left: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 24px;
}
.new-theme-design.parts-inventory-manage .feature li {
font-size: 14px;
display: flex;
gap: 10px;
}
.new-theme-design.parts-inventory-manage .feature li::before {
content: "✓";
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
}
.new-theme-design.parts-inventory-manage .feature-visual {
min-height: 390px;
border-radius: var(--radius);
} .new-theme-design.parts-inventory-manage .visual-shell {
position: relative;
min-height: 390px;
border-radius: var(--radius);
padding: 18px;
overflow: hidden;
background:
radial-gradient(circle at 85% 15%,
rgba(0, 168, 248, 0.17),
transparent 27%),
linear-gradient(145deg, #fff 0%, var(--sky) 100%);
border: 1px solid #bfe7fa;
box-shadow: var(--shadow);
}
.new-theme-design.parts-inventory-manage .visual-shell::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.new-theme-design.parts-inventory-manage .window {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.97);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 14px 38px rgba(6, 59, 92, 0.12);
overflow: hidden;
}
.new-theme-design.parts-inventory-manage .window-bar {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: #f8fcff;
color: var(--navy);
}
.new-theme-design.parts-inventory-manage .dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
.new-theme-design.parts-inventory-manage .dot.red {
background: #ff6b6b;
}
.new-theme-design.parts-inventory-manage .dot.yellow {
background: var(--yellow);
}
.new-theme-design.parts-inventory-manage .dot.green {
background: #36c98f;
}
.new-theme-design.parts-inventory-manage .floating-badge {
position: absolute;
z-index: 3;
padding: 9px 12px;
border-radius: 10px;
font-size: 11px;
font-weight: 850;
box-shadow: 0 10px 24px rgba(6, 59, 92, 0.16);
}
.new-theme-design.parts-inventory-manage .floating-badge.top-right {
top: 22px;
right: 22px;
background: var(--yellow);
color: var(--black);
}
.new-theme-design.parts-inventory-manage .floating-badge.bottom-left {
bottom: 22px;
left: 22px;
background: var(--black);
color: #fff;
} .new-theme-design.parts-inventory-manage .pm-calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 7px;
padding: 14px;
}
.new-theme-design.parts-inventory-manage .pm-day {
height: 44px;
border-radius: 9px;
border: 1px solid var(--line);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 11px;
background: #fff;
}
.new-theme-design.parts-inventory-manage .pm-day.event-blue {
background: var(--sky);
border-color: #a8dff9;
color: var(--brand-dark);
font-weight: 800;
}
.new-theme-design.parts-inventory-manage .pm-day.event-green {
background: var(--success-bg);
border-color: #b9e8d6;
color: var(--success);
font-weight: 800;
}
.new-theme-design.parts-inventory-manage .pm-day.event-orange {
background: var(--yellow-soft);
border-color: #f1d96c;
color: #9a6a00;
font-weight: 800;
}
.new-theme-design.parts-inventory-manage .pm-day.event-purple {
background: #eef1f6;
border-color: #d6dfe7;
color: var(--navy);
font-weight: 800;
} .new-theme-design.parts-inventory-manage .pill-row {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 10px;
}
.new-theme-design.parts-inventory-manage .pill {
font-size: 11px;
font-weight: 800;
padding: 5px 9px;
border-radius: 999px;
background: var(--sky);
color: var(--brand-dark);
}
.new-theme-design.parts-inventory-manage .pill.cyan {
background: #e8faff;
color: #087a9c;
}
.new-theme-design.parts-inventory-manage .pill.green {
background: var(--success-bg);
color: var(--success);
}
.new-theme-design.parts-inventory-manage .pill.orange {
background: var(--yellow-soft);
color: #8a6500;
}
.new-theme-design.parts-inventory-manage .pill.pink {
background: #f2f2f2;
color: var(--black);
}
.new-theme-design.parts-inventory-manage .workorder-card {
margin: 16px;
padding: 16px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 7px 20px rgba(6, 59, 92, 0.07);
}
.new-theme-design.parts-inventory-manage .wo-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
margin-bottom: 12px;
}
.new-theme-design.parts-inventory-manage .wo-title {
font-size: 15px;
font-weight: 850;
color: var(--black);
}
.new-theme-design.parts-inventory-manage .wo-meta {
color: var(--muted);
font-size: 11px;
}
.new-theme-design.parts-inventory-manage .progress {
height: 8px;
border-radius: 999px;
background: #e8eff4;
overflow: hidden;
margin: 10px 0;
}
.new-theme-design.parts-inventory-manage .progress span {
display: block;
height: 100%;
width: 72%;
background: linear-gradient(90deg, var(--brand), #62ccff);
border-radius: inherit;
}
.new-theme-design.parts-inventory-manage .check-list {
display: grid;
gap: 8px;
padding: 14px;
}
.new-theme-design.parts-inventory-manage .check-row {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: #fff;
font-size: 12px;
}
.new-theme-design.parts-inventory-manage .status {
font-size: 10px;
font-weight: 850;
padding: 4px 7px;
border-radius: 999px;
}
.new-theme-design.parts-inventory-manage .status.done {
color: var(--success);
background: var(--success-bg);
}
.new-theme-design.parts-inventory-manage .status.warn {
color: #8a6500;
background: var(--yellow-soft);
}
.new-theme-design.parts-inventory-manage .status.info {
color: var(--brand-dark);
background: var(--sky);
} .new-theme-design.parts-inventory-manage .phone {
width: 220px;
margin: 8px auto 0;
padding: 10px;
border-radius: 30px;
background: var(--black);
box-shadow: 0 22px 50px rgba(6, 59, 92, 0.24);
}
.new-theme-design.parts-inventory-manage .phone-screen {
border-radius: 23px;
background: linear-gradient(180deg, #f7fcff, #fff);
min-height: 350px;
padding: 14px;
overflow: hidden;
}
.new-theme-design.parts-inventory-manage.phone-notch {
width: 70px;
height: 7px;
border-radius: 999px;
background: #222;
margin: 0 auto 12px;
}
.new-theme-design.parts-inventory-manage .task-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
margin: 9px 0;
background: #fff;
box-shadow: 0 4px 10px rgba(6, 59, 92, 0.04);
}
.new-theme-design.parts-inventory-manage .task-card strong {
display: block;
font-size: 12px;
}
.new-theme-design.parts-inventory-manage .task-card small {
color: var(--muted);
font-size: 10px;
} .new-theme-design.parts-inventory-manage .sensor {
position: relative;
padding: 18px;
}
.new-theme-design.parts-inventory-manage .gauge-wrap {
display: flex;
justify-content: center;
padding: 16px 0 8px;
}
.new-theme-design.parts-inventory-manage .gauge {
width: 190px;
height: 95px;
overflow: hidden;
position: relative;
}
.new-theme-design.parts-inventory-manage .gauge::before {
content: "";
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
background: conic-gradient(from 270deg,
var(--success) 0 34%,
var(--yellow) 34% 57%,
#e44b4b 57% 75%,
#e7eef2 75% 100%);
inset: 0;
}
.new-theme-design.parts-inventory-manage .gauge::after {
content: "86°C";
position: absolute;
width: 125px;
height: 125px;
border-radius: 50%;
background: #fff;
left: 32px;
top: 32px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 28px;
font-weight: 900;
font-size: 24px;
color: var(--black);
}
.new-theme-design.parts-inventory-manage .sensor-line {
height: 110px;
position: relative;
border-radius: 12px;
overflow: hidden;
background:
linear-gradient(rgba(0, 168, 248, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.1) 1px, transparent 1px), #fff;
background-size: 26px 26px;
border: 1px solid var(--line);
}
.new-theme-design.parts-inventory-manage .sensor-line svg {
width: 100%;
height: 100%;
display: block;
} .new-theme-design.parts-inventory-manage .dash-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 14px;
padding: 16px;
}
.new-theme-design.parts-inventory-manage .mini-kpis {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.new-theme-design.parts-inventory-manage .mini-kpi {
padding: 12px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 4px 14px rgba(6, 59, 92, 0.05);
}
.new-theme-design.parts-inventory-manage .mini-kpi strong {
display: block;
font-size: 23px;
line-height: 1;
margin-bottom: 6px;
}
.new-theme-design.parts-inventory-manage .mini-kpi small {
color: var(--muted);
}
.new-theme-design.parts-inventory-manage .bar-chart {
height: 130px;
display: flex;
align-items: flex-end;
gap: 10px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: linear-gradient(180deg, #fff, #f6fcff);
}
.new-theme-design.parts-inventory-manage .bar {
flex: 1;
border-radius: 8px 8px 3px 3px;
min-width: 14px;
box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.04);
}
.new-theme-design.parts-inventory-manage .bar.b1 {
height: 42%;
background: linear-gradient(180deg, #62ccff, var(--brand));
}
.new-theme-design.parts-inventory-manage .bar.b2 {
height: 70%;
background: linear-gradient(180deg, #7bdaff, var(--brand-dark));
}
.new-theme-design.parts-inventory-manage .bar.b3 {
height: 58%;
background: linear-gradient(180deg, #ffe77a, var(--yellow));
}
.new-theme-design.parts-inventory-manage.bar.b4 {
height: 88%;
background: linear-gradient(180deg, #55d9a6, var(--success));
}
.new-theme-design.parts-inventory-manage .bar.b5 {
height: 64%;
background: linear-gradient(180deg, #9adfff, var(--brand));
}
.new-theme-design.parts-inventory-manage .bar.b6 {
height: 78%;
background: linear-gradient(180deg, #ffd95a, var(--yellow));
}
.new-theme-design.parts-inventory-manage .donut {
width: 138px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(var(--brand) 0 78%, #e8eff4 78% 100%);
margin: 14px auto;
position: relative;
box-shadow: 0 10px 24px rgba(0, 168, 248, 0.18);
}
.new-theme-design.parts-inventory-manage .donut::after {
content: "78%";
position: absolute;
inset: 22px;
background: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 900;
font-size: 24px;
color: var(--black);
} .new-theme-design.parts-inventory-manage .workflow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 34px;
}
.new-theme-design.parts-inventory-manage .step {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 22px;
box-shadow: 0 7px 20px rgba(6, 59, 92, 0.04);
}
.new-theme-design.parts-inventory-manage .step .num {
width: 34px;
height: 34px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 12px;
} .new-theme-design.parts-inventory-manage .compare {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 30px;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
background: #fff;
}
.new-theme-design.parts-inventory-manage .compare th,
.new-theme-design.parts-inventory-manage .compare td {
padding: 16px 18px;
border-bottom: 1px solid var(--line);
text-align: left;
}
.new-theme-design.parts-inventory-manage .compare th {
background: var(--navy);
color: #fff;
}
.new-theme-design.parts-inventory-manage .compare tr:last-child td {
border-bottom: none;
} .new-theme-design.parts-inventory-manage .industries {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 30px;
}
.new-theme-design.parts-inventory-manage .industry {
padding: 20px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
background: #fff;
font-weight: 800;
color: var(--black);
} .new-theme-design.parts-inventory-manage .faq {
max-width: 900px;
margin: 32px auto 0;
}
.new-theme-design.parts-inventory-manage details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.new-theme-design.parts-inventory-manage summary {
cursor: pointer;
font-size: 18px;
font-weight: 800;
color: var(--navy);
}
.new-theme-design.parts-inventory-manage details p {
color: var(--muted);
padding-top: 12px;
margin-bottom: 0;
} .new-theme-design.parts-inventory-manage .cta {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 0;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 30px;
align-items: center;
border-top: 5px solid var(--yellow);
}
.new-theme-design.parts-inventory-manage .new-theme-design .cta h2 {
color: #fff;
}
.new-theme-design.parts-inventory-manage .cta p {
color: #e6e6e6;
}
.new-theme-design.parts-inventory-manage .cta .actions {
justify-content: flex-end;
margin-top: 0;
}
.new-theme-design.parts-inventory-manage .cta .btn.primary {
background: var(--yellow);
color: var(--black);
}
.new-theme-design.parts-inventory-manage .cta .btn.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .seo-note {
background: var(--yellow-soft);
border: 1px solid #f1d96c;
border-radius: 12px;
padding: 18px;
margin-top: 26px;
color: #6e5700;
font-size: 14px;
}
@media (max-width: 980px) {
.new-theme-design.parts-inventory-manage .hero-grid,
.new-theme-design.parts-inventory-manage .feature,
.new-theme-design.parts-inventory-manage .cta {
grid-template-columns: 1fr;
}
.new-theme-design.parts-inventory-manage .feature:nth-child(even) .feature-visual {
order: initial;
}
.new-theme-design.parts-inventory-manage .stats {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.parts-inventory-manage .cards {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.parts-inventory-manage .workflow {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.parts-inventory-manage .industries {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.parts-inventory-manage .trust-grid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.parts-inventory-manage .cta .actions {
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.new-theme-design.parts-inventory-manage .hero {
padding: 58px 0 52px;
}
.new-theme-design.parts-inventory-manage .section {
padding: 64px 0;
}
.new-theme-design.parts-inventory-manage .stats,
.new-theme-design.parts-inventory-manage .cards,
.new-theme-design.parts-inventory-manage .workflow,
.new-theme-design.parts-inventory-manage .industries,
.new-theme-design.parts-inventory-manage .trust-grid,
.new-theme-design.parts-inventory-manage .feature ul {
grid-template-columns: 1fr;
}
.new-theme-design.parts-inventory-manage .cta {
padding: 34px 24px;
}
.new-theme-design.parts-inventory-manage.dash-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: no-preference) {  .new-theme-design.parts-inventory-manage .reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.new-theme-design.parts-inventory-manage .reveal-delay-1 {
transition-delay: 0.08s;
}
.new-theme-design.parts-inventory-manage .reveal-delay-2 {
transition-delay: 0.16s;
}
.new-theme-design.parts-inventory-manage .reveal-delay-3 {
transition-delay: 0.24s;
} .new-theme-design.parts-inventory-manage .hero-card {
animation: heroFloatIn 0.9s cubic-bezier(0.18, 0.82, 0.2, 1) both;
}
@keyframes heroFloatIn {
from {
opacity: 0;
transform: translateY(24px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
} .new-theme-design.parts-inventory-manage .floating-badge {
animation: badgeFloat 3.6s ease-in-out infinite;
}
.new-theme-design.parts-inventory-manage .floating-badge.bottom-left {
animation-delay: 0.8s;
}
@keyframes badgeFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
} .new-theme-design.parts-inventory-manage .hero .mock-row {
opacity: 0;
transform: translateX(16px);
animation: rowSlideIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.new-theme-design.parts-inventory-manage .hero .mock-row:nth-of-type(1) {
animation-delay: 0.25s;
}
.new-theme-design.parts-inventory-manage .hero .mock-row:nth-of-type(2) {
animation-delay: 0.4s;
}
.new-theme-design.parts-inventory-manage.hero .mock-row:nth-of-type(3) {
animation-delay: 0.55s;
}
.new-theme-design.parts-inventory-manage .hero .mock-row:nth-of-type(4) {
animation-delay: 0.7s;
}
@keyframes rowSlideIn {
to {
opacity: 1;
transform: translateX(0);
}
} .new-theme-design.parts-inventory-manage .pm-day[class*="event-"] {
position: relative;
overflow: hidden;
animation: calendarPulse 3.8s ease-in-out infinite;
}
.new-theme-design.parts-inventory-manage .pm-day.event-green {
animation-delay: 0.5s;
}
.new-theme-design.parts-inventory-manage .pm-day.event-orange {
animation-delay: 1s;
}
.new-theme-design.parts-inventory-manage .pm-day.event-purple {
animation-delay: 1.5s;
}
.new-theme-design.parts-inventory-manage .pm-day[class*="event-"]::after {
content: "";
position: absolute;
inset: -30%;
background: linear-gradient(115deg,
transparent 35%,
rgba(255, 255, 255, 0.75) 50%,
transparent 65%);
transform: translateX(-120%);
animation: calendarShine 4.8s ease-in-out infinite;
}
@keyframes calendarPulse {
0%,
100% {
transform: translateY(0);
box-shadow: 0 0 0 rgba(0, 168, 248, 0);
}
50% {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0, 168, 248, 0.12);
}
}
@keyframes calendarShine {
0%,
65% {
transform: translateX(-120%);
}
85%,
100% {
transform: translateX(120%);
}
} .new-theme-design.parts-inventory-manage .workorder-card .progress span,
.new-theme-design.parts-inventory-manage .phone .progress span {
transform-origin: left center;
animation: fillProgress 2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes fillProgress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
} .new-theme-design.parts-inventory-manage .check-list .check-row {
opacity: 0;
transform: translateY(8px);
animation: checklistIn 0.45s ease forwards;
}
.new-theme-design.parts-inventory-manage .check-list .check-row:nth-child(1) {
animation-delay: 0.15s;
}
.new-theme-design.parts-inventory-manage .check-list .check-row:nth-child(2) {
animation-delay: 0.3s;
}
.new-theme-design.parts-inventory-manage .check-list .check-row:nth-child(3) {
animation-delay: 0.45s;
}
.new-theme-design.parts-inventory-manage .check-list .check-row:nth-child(4) {
animation-delay: 0.6s;
}
.new-theme-design.parts-inventory-manage .check-list .check-row:nth-child(5) {
animation-delay: 0.75s;
}
@keyframes checklistIn {
to {
opacity: 1;
transform: translateY(0);
}
} .new-theme-design.parts-inventory-manage .status.done {
animation: statusBreathe 2.8s ease-in-out infinite;
}
@keyframes statusBreathe {
0%,
100% {
box-shadow: 0 0 0 0 rgba(17, 138, 97, 0);
}
50% {
box-shadow: 0 0 0 5px rgba(17, 138, 97, 0.08);
}
} .new-theme-design.parts-inventory-manage .phone {
animation: phoneFloat 4.2s ease-in-out infinite;
transform-origin: center center;
}
@keyframes phoneFloat {
0%,
100% {
transform: translateY(0) rotate(-0.4deg);
}
50% {
transform: translateY(-8px) rotate(0.6deg);
}
}
.new-theme-design.parts-inventory-manage .task-card {
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.new-theme-design.parts-inventory-manage .task-card:hover {
transform: translateX(5px);
border-color: #9edcf8;
box-shadow: 0 8px 20px rgba(0, 168, 248, 0.12);
} .new-theme-design.parts-inventory-manage .gauge {
animation: gaugeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes gaugeIn {
from {
opacity: 0;
transform: scale(0.88);
}
to {
opacity: 1;
transform: scale(1);
}
}
.new-theme-design.parts-inventory-manage .gauge::before {
animation: gaugeGlow 2.8s ease-in-out infinite;
}
@keyframes gaugeGlow {
0%,
100% {
filter: saturate(1) brightness(1);
}
50% {
filter: saturate(1.18) brightness(1.04);
}
} .new-theme-design.parts-inventory-manage .sensor-line polyline {
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: drawSensorLine 2.4s ease forwards;
}
.new-theme-design.parts-inventory-manage .sensor-line line {
opacity: 0.3;
animation: thresholdBlink 2.2s ease-in-out infinite;
}
@keyframes drawSensorLine {
to {
stroke-dashoffset: 0;
}
}
@keyframes thresholdBlink {
0%,
100% {
opacity: 0.25;
}
50% {
opacity: 0.85;
}
} .new-theme-design.parts-inventory-manage .mini-kpi {
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.new-theme-design.parts-inventory-manage .mini-kpi:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(6, 59, 92, 0.11);
} .new-theme-design.parts-inventory-manage .bar {
transform-origin: bottom center;
animation: riseBar 1.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.new-theme-design.parts-inventory-manage .bar.b1 {
animation-delay: 0.05s;
}
.new-theme-design.parts-inventory-manage .bar.b2 {
animation-delay: 0.12s;
}
.new-theme-design.parts-inventory-manage .bar.b3 {
animation-delay: 0.19s;
}
.new-theme-design.parts-inventory-manage .bar.b4 {
animation-delay: 0.26s;
}
.new-theme-design.parts-inventory-manage .bar.b5 {
animation-delay: 0.33s;
}
.new-theme-design.parts-inventory-manage .bar.b6 {
animation-delay: 0.4s;
}
@keyframes riseBar {
from {
transform: scaleY(0);
opacity: 0.2;
}
to {
transform: scaleY(1);
opacity: 1;
}
} .new-theme-design.parts-inventory-manage .donut {
animation: donutSpinIn 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes donutSpinIn {
from {
opacity: 0;
transform: rotate(-80deg) scale(0.86);
}
to {
opacity: 1;
transform: rotate(0) scale(1);
}
} .new-theme-design.parts-inventory-manage .workflow .step { transform: translateY(14px);
}
.new-theme-design.parts-inventory-manage .workflow.animate-steps .step {
animation: stepIn 0.55s ease forwards;
}
.new-theme-design.parts-inventory-manage .workflow.animate-steps .step:nth-child(1) {
animation-delay: 0.05s;
}
.new-theme-design.parts-inventory-manage .workflow.animate-steps .step:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.parts-inventory-manage .workflow.animate-steps .step:nth-child(3) {
animation-delay: 0.25s;
}
.new-theme-design.parts-inventory-manage .workflow.animate-steps .step:nth-child(4) {
animation-delay: 0.35s;
}
.new-theme-design.parts-inventory-manage .workflow.animate-steps .step:nth-child(5) {
animation-delay: 0.45s;
}
@keyframes stepIn {
to {
opacity: 1;
transform: translateY(0);
}
} .new-theme-design.parts-inventory-manage .card,
.new-theme-design.parts-inventory-manage .stat,
.new-theme-design.parts-inventory-manage .industry {
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.new-theme-design.parts-inventory-manage .card:hover,
.new-theme-design.parts-inventory-manage .stat:hover,
.new-theme-design.parts-inventory-manage .industry:hover {
transform: translateY(-5px);
box-shadow: 0 16px 34px rgba(6, 59, 92, 0.1);
} .new-theme-design.parts-inventory-manage .cta {
position: relative;
overflow: hidden;
}
.new-theme-design.parts-inventory-manage .cta::before {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 30%;
height: 5px;
background: linear-gradient(90deg,
transparent,
#fff7b8,
var(--yellow),
#fff7b8,
transparent);
animation: ctaSweep 4.8s ease-in-out infinite;
}
@keyframes ctaSweep {
0%,
45% {
left: -40%;
}
70%,
100% {
left: 110%;
}
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
.new-theme-design.parts-inventory-manage .stock-table {
padding: 14px;
display: grid;
gap: 8px;
}
.new-theme-design.parts-inventory-manage .stock-row {
display: grid;
grid-template-columns: 1.5fr 0.7fr 0.7fr 0.75fr;
gap: 10px;
align-items: center;
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
font-size: 11px;
}
.new-theme-design.parts-inventory-manage .stock-row.head {
background: var(--sky);
color: var(--navy);
font-weight: 850;
}
.new-theme-design.parts-inventory-manage .stock-name strong {
display: block;
font-size: 12px;
color: var(--black);
}
.new-theme-design.parts-inventory-manage .stock-name small {
color: var(--muted);
}
.new-theme-design.parts-inventory-manage .qty {
font-weight: 900;
font-size: 15px;
color: var(--navy);
}
.new-theme-design.parts-inventory-manage .stock-low {
background: var(--yellow-soft) !important;
border-color: #f1d96c !important;
}
.new-theme-design.parts-inventory-manage .stock-critical {
background: #fff0f0 !important;
border-color: #ffc6c6 !important;
}
.new-theme-design.parts-inventory-manage .po-flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 9px;
padding: 18px;
}
.new-theme-design.parts-inventory-manage .po-step {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
padding: 13px 10px;
text-align: center;
position: relative;
}
.new-theme-design.parts-inventory-manage .po-step:not(:last-child)::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--brand);
font-weight: 900;
}
.new-theme-design.parts-inventory-manage .po-step strong {
display: block;
font-size: 11px;
color: var(--black);
}
.new-theme-design.parts-inventory-manage .po-step small {
font-size: 9px;
color: var(--muted);
}
.new-theme-design.parts-inventory-manage .scan-box {
padding: 18px;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 18px;
align-items: center;
}
.new-theme-design.parts-inventory-manage .qr {
width: 150px;
height: 150px;
margin: auto;
border: 10px solid #fff;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.13);
background:
linear-gradient(90deg, #0b0b0b 12px, transparent 12px) 0 0/30px 30px,
linear-gradient(#0b0b0b 12px, transparent 12px) 0 0/30px 30px,
linear-gradient(90deg,
transparent 18px,
#0b0b0b 18px,
#0b0b0b 25px,
transparent 25px) 0 0/30px 30px,
linear-gradient(transparent 18px,
#0b0b0b 18px,
#0b0b0b 25px,
transparent 25px) 0 0/30px 30px,
#fff;
}
.new-theme-design.parts-inventory-manage .scan-line {
position: absolute;
left: 8%;
right: 8%;
height: 3px;
background: var(--yellow);
box-shadow: 0 0 12px rgba(255, 201, 40, 0.9);
animation: scanMove 2.4s ease-in-out infinite;
}
@keyframes scanMove {
0%,
100% {
top: 22%;
}
50% {
top: 74%;
}
}
.new-theme-design.parts-inventory-manage .route-sites {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: center;
padding: 20px;
}
.new-theme-design.parts-inventory-manage .site-card {
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
padding: 18px;
text-align: center;
}
.new-theme-design.parts-inventory-manage .site-card strong {
font-size: 26px;
color: var(--brand-dark);
display: block;
}
.new-theme-design.parts-inventory-manage .transfer-arrow {
width: 55px;
height: 55px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-size: 24px;
font-weight: 900;
animation: badgeFloat 3s ease-in-out infinite;
}
.new-theme-design.parts-inventory-manage .inventory-bars {
height: 125px;
display: flex;
align-items: flex-end;
gap: 9px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
}
.new-theme-design.parts-inventory-manage .inventory-bars span {
flex: 1;
border-radius: 7px 7px 2px 2px;
transform-origin: bottom;
animation: riseBar 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.new-theme-design.parts-inventory-manage .inventory-bars span:nth-child(1) {
height: 72%;
background: var(--brand);
}
.new-theme-design.parts-inventory-manage .inventory-bars span:nth-child(2) {
height: 48%;
background: var(--yellow);
}
.new-theme-design.parts-inventory-manage .inventory-bars span:nth-child(3) {
height: 84%;
background: var(--success);
}
.new-theme-design.parts-inventory-manage .inventory-bars span:nth-child(4) {
height: 36%;
background: var(--brand-dark);
}
.new-theme-design.parts-inventory-manage .inventory-bars span:nth-child(5) {
height: 61%;
background: #62ccff;
}
.new-theme-design.parts-inventory-manage .inventory-bars span:nth-child(6) {
height: 27%;
background: #e55b5b;
}
.new-theme-design.parts-inventory-manage .role-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 34px;
}
.new-theme-design.parts-inventory-manage .role-card {
background: #fff;
border: 1px solid var(--line);
border-top: 4px solid var(--yellow);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, 0.05);
}
.new-theme-design.parts-inventory-manage .role-card p {
color: var(--muted);
}
@media (max-width: 900px) {
.new-theme-design.parts-inventory-manage .stock-row {
grid-template-columns: 1.4fr 0.6fr 0.6fr;
}
.new-theme-design.parts-inventory-manage .stock-row>*:last-child {
display: none;
}
.new-theme-design.parts-inventory-manage .po-flow {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.parts-inventory-manage .po-step:nth-child(2)::after {
display: none;
}
.new-theme-design.parts-inventory-manage .scan-box {
grid-template-columns: 1fr;
}
.new-theme-design.parts-inventory-manage .role-grid {
grid-template-columns: 1fr;
}
} .new-theme-design.parts-inventory-manage .hero-card .mock {
position: relative;
overflow: hidden;
padding-bottom: 82px;
}
.new-theme-design.parts-inventory-manage .parts-scene {
position: absolute;
left: 18px;
right: 18px;
bottom: 15px;
height: 58px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
pointer-events: none;
}
.new-theme-design.parts-inventory-manage .part-object {
position: relative;
flex: 0 0 auto;
filter: drop-shadow(0 8px 10px rgba(6, 59, 92, 0.14));
}
.new-theme-design.parts-inventory-manage .part-label {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% + 5px);
font-size: 8px;
line-height: 1;
font-weight: 850;
color: var(--navy);
white-space: nowrap;
opacity: 0.75;
} .new-theme-design.parts-inventory-manage .css-bearing {
width: 48px;
height: 48px;
border-radius: 50%;
background: radial-gradient(circle at center,
#fff 0 21%,
#b8c7d1 22% 31%,
#f8fbfd 32% 42%,
#8498a6 43% 48%,
#dce6ec 49% 62%,
#8295a3 63% 68%,
#f7fafc 69% 100%);
border: 2px solid #78909c;
animation: bearingSpin 9s linear infinite;
}
.new-theme-design.parts-inventory-manage .css-bearing::before,
.new-theme-design.parts-inventory-manage .css-bearing::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #5f7482;
top: 6px;
left: 20px;
box-shadow:
13px 5px 0 #5f7482,
18px 17px 0 #5f7482,
12px 29px 0 #5f7482,
-1px 34px 0 #5f7482,
-13px 28px 0 #5f7482,
-18px 16px 0 #5f7482,
-12px 5px 0 #5f7482;
}
@keyframes bearingSpin {
to {
transform: rotate(360deg);
}
} .new-theme-design.parts-inventory-manage .css-gear {
width: 50px;
height: 50px;
border-radius: 50%;
background:
radial-gradient(circle at center,
#f8fbfd 0 20%,
#678191 21% 30%,
transparent 31%),
repeating-conic-gradient(#7e95a4 0 10deg, #a9bbc5 10deg 20deg);
border: 5px solid #728a99;
clip-path: polygon(45% 0,
55% 0,
59% 12%,
69% 16%,
79% 8%,
87% 15%,
82% 26%,
90% 35%,
100% 38%,
100% 49%,
88% 54%,
85% 65%,
94% 74%,
87% 83%,
75% 79%,
66% 87%,
62% 100%,
50% 100%,
46% 88%,
35% 84%,
25% 93%,
16% 85%,
21% 73%,
13% 63%,
0 60%,
0 48%,
12% 44%,
16% 33%,
7% 24%,
14% 15%,
26% 20%,
36% 12%);
animation: gearTurn 7s linear infinite reverse;
}
@keyframes gearTurn {
to {
transform: rotate(360deg);
}
} .new-theme-design.parts-inventory-manage .css-filter {
width: 53px;
height: 38px;
border: 4px solid #6f8796;
border-radius: 5px;
background: repeating-linear-gradient(90deg, #edf4f7 0 5px, #b5c8d2 5px 7px);
transform: skewY(-5deg);
}
.new-theme-design.parts-inventory-manage .css-filter::after {
content: "";
position: absolute;
inset: 4px;
border: 1px solid rgba(6, 59, 92, 0.18);
} .new-theme-design.parts-inventory-manage .css-belt {
width: 55px;
height: 37px;
border: 8px solid #252525;
border-radius: 50%;
transform: rotate(-12deg);
box-shadow: inset 0 0 0 2px #555;
animation: beltFloat 3.8s ease-in-out infinite;
}
@keyframes beltFloat {
50% {
transform: rotate(-7deg) translateY(-4px);
}
} .new-theme-design.parts-inventory-manage .css-nut {
width: 42px;
height: 42px;
background: #a6b7c1;
clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.new-theme-design.parts-inventory-manage .css-nut::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #f5fbff;
left: 13px;
top: 13px;
box-shadow: inset 0 0 0 3px #6c8290;
} .new-theme-design.parts-inventory-manage .css-bolt {
width: 18px;
height: 50px;
border-radius: 4px;
background: linear-gradient(90deg, #879ca8, #dde7ec 48%, #778d9a);
transform: rotate(18deg);
}
.new-theme-design.parts-inventory-manage .css-bolt::before {
content: "";
position: absolute;
width: 31px;
height: 14px;
background: #9aadb8;
top: -5px;
left: -7px;
clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
}
.new-theme-design.parts-inventory-manage .css-bolt::after {
content: "";
position: absolute;
left: 2px;
right: 2px;
bottom: 3px;
height: 24px;
background: repeating-linear-gradient(0deg,
transparent 0 4px,
#637a88 4px 5px);
} .new-theme-design.parts-inventory-manage .css-box {
width: 52px;
height: 42px;
border-radius: 4px;
background: linear-gradient(135deg, #d8a45c, #f1c67c);
border: 2px solid #ba8541;
}
.new-theme-design.parts-inventory-manage .css-box::before {
content: "";
position: absolute;
width: 22px;
height: 14px;
background: var(--yellow);
left: 13px;
top: 11px;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.new-theme-design.parts-inventory-manage .css-box::after {
content: "PARTS";
position: absolute;
left: 17px;
top: 14px;
font-size: 6px;
font-weight: 900;
color: #5a4300;
} .new-theme-design.parts-inventory-manage .parts-shelf {
position: absolute;
left: 15px;
right: 15px;
bottom: 8px;
height: 3px;
background: linear-gradient(90deg, #a9bbc5, #d8e4ea, #a9bbc5);
border-radius: 999px;
box-shadow: 0 5px 0 rgba(6, 59, 92, 0.06);
} .new-theme-design.parts-inventory-manage .part-chip {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 10px;
font-size: 9px;
font-weight: 850;
color: var(--navy);
box-shadow: 0 8px 20px rgba(6, 59, 92, 0.1);
animation: badgeFloat 4s ease-in-out infinite;
}
.new-theme-design.parts-inventory-manage .part-chip::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
}
.new-theme-design.parts-inventory-manage .part-chip.one {
right: 15px;
top: 14px;
}
.new-theme-design.parts-inventory-manage .part-chip.two {
left: 14px;
top: 58px;
animation-delay: 0.8s;
}
.new-theme-design.parts-inventory-manage .part-chip.two::before {
background: var(--yellow);
}
@media (max-width: 640px) {
.new-theme-design.parts-inventory-manage .parts-scene {
gap: 8px;
left: 10px;
right: 10px;
}
.new-theme-design.parts-inventory-manage .part-object {
transform: scale(0.82);
}
.new-theme-design.parts-inventory-manage .css-bearing {
animation: none;
}
.new-theme-design.parts-inventory-manage .css-gear {
animation: none;
}
.new-theme-design.parts-inventory-manage .part-chip {
display: none;
}
}
.new-theme-design.parts-inventory-manage .awardBandNew {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #2a2a2a;
}
.new-theme-design.parts-inventory-manage .awardBandNew h2,
.new-theme-design.parts-inventory-manage .awardBandNew h3 {
color: #fff;
}
.new-theme-design.parts-inventory-manage .awardBandNew p {
color: #d5d5d5;
}
.new-theme-design.parts-inventory-manage .awardBandNew .eyebrow {
background: var(--yellow);
color: #000;
}
.new-theme-design.parts-inventory-manage .awardGridNew {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 28px;
}
.new-theme-design.parts-inventory-manage .awardItemNew {
min-height: 92px;
background: #151515;
border: 1px solid #2d2d2d;
border-top: 4px solid var(--yellow);
border-radius: 14px;
display: grid;
place-items: center;
text-align: center;
padding: 14px;
color: #fff;
font-size: 12px;
font-weight: 850;
}
.new-theme-design.parts-inventory-manage .vedaSectionNew {
background: linear-gradient(135deg, #0b0b0b, #171717);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #2a2a2a;
}
.new-theme-design.parts-inventory-manage .vedaSectionNew h2,
.new-theme-design.parts-inventory-manage .vedaSectionNew h3 {
color: #fff;
}
.new-theme-design.parts-inventory-manage .vedaSectionNew p {
color: #d5d5d5;
}
.new-theme-design.parts-inventory-manage .vedaSectionNew .eyebrow {
background: var(--yellow);
color: #000;
}
.new-theme-design.parts-inventory-manage .vedaGridNew {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
}
.new-theme-design.parts-inventory-manage .vedaPromptBoxNew {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 22px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}
.new-theme-design.parts-inventory-manage .vedaPromptTitleNew {
display: flex;
align-items: center;
gap: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.parts-inventory-manage .vedaDotNew {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow);
color: #000;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 900;
}
.new-theme-design.parts-inventory-manage .promptNew {
background: #1c1c1c;
border: 1px solid #303030;
border-radius: 12px;
padding: 13px 15px;
margin-top: 10px;
color: #f2f2f2;
font-size: 13px;
}
.new-theme-design.parts-inventory-manage .vedaActionsNew {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 24px;
}
.new-theme-design.parts-inventory-manage .vedaActionNew {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 17px;
}
.new-theme-design.parts-inventory-manage .vedaActionNew strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.new-theme-design.parts-inventory-manage .vedaActionNew span {
color: #cfcfcf;
font-size: 12px;
}
.new-theme-design.parts-inventory-manage .integrationSectionNew {
background: var(--sky-2);
}
.new-theme-design.parts-inventory-manage .integrationGridNew {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
margin-top: 28px;
}
.new-theme-design.parts-inventory-manage .integrationNew {
min-height: 76px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
box-shadow: 0 7px 20px rgba(6, 59, 92, 0.04);
}
.new-theme-design.parts-inventory-manage .ratingBandNew {
background: #0b0b0b;
color: #fff;
padding: 34px 0;
border-top: 4px solid var(--yellow);
}
.new-theme-design.parts-inventory-manage .ratingGridNew {
display: grid;
grid-template-columns: 1.2fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.new-theme-design.parts-inventory-manage .ratingLeadNew strong {
display: block;
font-size: 20px;
}
.new-theme-design.parts-inventory-manage .ratingLeadNew span {
color: #d0d0d0;
font-size: 12px;
}
.new-theme-design.parts-inventory-manage .ratingItemNew {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.new-theme-design.parts-inventory-manage .ratingItemNew .starsNew {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.new-theme-design.parts-inventory-manage .ratingItemNew strong {
display: block;
font-size: 12px;
margin-top: 3px;
}
.new-theme-design.parts-inventory-manage .ratingItemNew span {
color: #cfcfcf;
font-size: 10px;
}
.new-theme-design.parts-inventory-manage .testimonialSectionNew {
background: #f3fafe;
}
.new-theme-design.parts-inventory-manage .testimonialGridNew {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 30px;
}
.new-theme-design.parts-inventory-manage .testimonialNew {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.new-theme-design.parts-inventory-manage .testimonialAvatarNew {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #bbdded, #6baac7);
margin-bottom: 12px;
overflow: hidden;
}
.new-theme-design.parts-inventory-manage .testimonialNew strong {
display: block;
}
.new-theme-design.parts-inventory-manage .testimonialNew small {
color: var(--muted);
}
.new-theme-design.parts-inventory-manage .testimonialNew p {
color: var(--muted);
font-size: 13px;
margin-top: 12px;
}
.new-theme-design.parts-inventory-manage .starsNew {
color: var(--yellow);
letter-spacing: 2px;
font-size: 13px;
margin: 6px 0 0;
}
.new-theme-design.parts-inventory-manage .conversionStripNew {
margin: 34px 0 0;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 8px 26px rgba(6, 59, 92, 0.05);
}
.new-theme-design.parts-inventory-manage .conversionStripNew.dark {
background: #111;
border-color: #2b2b2b;
border-left-color: var(--yellow);
color: #fff;
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .conversionStripNew h3 {
margin: 0 0 6px;
font-size: 20px;
}
.new-theme-design.parts-inventory-manage .conversionStripNew.dark h3 {
color: #fff;
}
.new-theme-design.parts-inventory-manage .conversionStripNew p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.new-theme-design.parts-inventory-manage .conversionStripNew.dark p {
color: #d2d2d2;
}
.new-theme-design.parts-inventory-manage .conversionActionsNew {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.parts-inventory-manage .conversionStripNew.dark .btn.primary {
background: var(--yellow);
color: #000;
}
.new-theme-design.parts-inventory-manage .conversionStripNew.dark .btn.secondary {
background: transparent;
color: #fff;
border-color: #555;
box-shadow: none;
}
@media (max-width: 980px) {
.new-theme-design.parts-inventory-manage .awardGridNew {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.parts-inventory-manage .vedaGridNew {
grid-template-columns: 1fr;
}
.new-theme-design.parts-inventory-manage .integrationGridNew {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.parts-inventory-manage .ratingGridNew {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.parts-inventory-manage .testimonialGridNew {
grid-template-columns: repeat(2, 1fr);
}
}
.new-theme-design.parts-inventory-manage .vedaDemoBanner {
margin-top: 24px;
background: linear-gradient(135deg, #151515, #202020);
border: 1px solid #333;
border-left: 5px solid var(--yellow);
border-radius: 18px;
padding: 22px 24px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.new-theme-design.parts-inventory-manage .vedaDemoBanner h3 {
color: #fff;
font-size: 20px;
margin: 0 0 6px;
}
.new-theme-design.parts-inventory-manage .vedaDemoBanner p {
color: #d4d4d4;
font-size: 13px;
margin: 0;
max-width: 680px;
}
.new-theme-design.parts-inventory-manage .vedaDemoActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.new-theme-design.parts-inventory-manage .vedaDemoBanner .btn.primary {
background: var(--yellow);
color: #000;
border-color: var(--yellow);
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .vedaDemoBanner .btn.secondary {
background: transparent;
color: #fff;
border-color: #555;
box-shadow: none;
}
@media (max-width: 760px) {
.new-theme-design.parts-inventory-manage .vedaDemoBanner {
grid-template-columns: 1fr;
}
.new-theme-design.parts-inventory-manage .vedaDemoActions {
justify-content: flex-start;
}
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark {
background: linear-gradient(135deg, #0b0b0b 0%, #171717 100%) !important;
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #292929;
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark h2,
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark h3 {
color: #fff;
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark p,
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark .lead {
color: #d3d3d3;
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark .eyebrow {
background: var(--yellow);
color: #000;
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark .card {
background: #151515;
border-color: #2c2c2c;
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark .card:hover {
border-color: #4a4a4a;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark .card h3 a {
color: #fff;
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark .card p {
color: #cfcfcf;
}
.new-theme-design.parts-inventory-manage .connectedWorkflowsDark .seo-note {
background: #161616;
border-color: #4a4120;
color: #e4d58a;
}
@media (max-width: 640px) {
.new-theme-design.parts-inventory-manage .awardGridNew,
.new-theme-design.parts-inventory-manage .integrationGridNew,
.new-theme-design.parts-inventory-manage .ratingGridNew,
.new-theme-design.parts-inventory-manage .testimonialGridNew {
grid-template-columns: 1fr;
}
.new-theme-design.parts-inventory-manage .conversionStripNew {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.parts-inventory-manage .ratingItemNew {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
} .new-theme-design.parts-inventory-manage.hero-card .mock {
padding-bottom: 24px !important;
}
.new-theme-design.parts-inventory-manage.parts-scene,
.new-theme-design.parts-inventory-manage.parts-shelf {
display: none !important;
}
.new-theme-design.parts-inventory-manage .inventory-part-row {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 14px;
align-items: center;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-visual {
width: 54px;
height: 54px;
border-radius: 14px;
background: linear-gradient(145deg, #f8fcff, #eaf8ff);
border: 1px solid #cbeaf9;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-copy {
min-width: 0;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-copy strong {
display: block;
margin: 0 0 4px;
font-size: 14px;
color: var(--black);
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-copy div {
font-size: 11px;
color: var(--muted);
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-status {
text-align: right;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-status .tag {
margin-bottom: 4px;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-status small {
display: block;
font-size: 9px;
color: var(--muted);
white-space: nowrap;
} .new-theme-design.parts-inventory-manage .hero {
padding: 68px 0 60px;
}
.new-theme-design.parts-inventory-manage .hero-grid {
grid-template-columns: 0.92fr 1.08fr;
gap: 44px;
} .new-theme-design.parts-inventory-manage .hero .lead {
font-size: 18px;
line-height: 1.55;
max-width: 650px;
}
.new-theme-design.parts-inventory-manage .hero-points {
gap: 9px;
margin: 22px 0;
}
.new-theme-design.parts-inventory-manage .hero-points li {
font-size: 14px;
line-height: 1.45;
}
.new-theme-design.parts-inventory-manage .hero .actions {
margin-top: 22px;
}
.new-theme-design.parts-inventory-manage .hero-card {
min-height: 500px;
padding: 16px;
}
.new-theme-design.parts-inventory-manage .hero-card .mock {
min-height: 466px;
padding: 20px;
}
.new-theme-design.parts-inventory-manage .hero-card .mock h3 {
font-size: 17px;
margin-bottom: 12px;
}
.new-theme-design.parts-inventory-manage .hero-card .mock-row {
padding: 12px 13px;
margin: 9px 0;
}
.new-theme-design.parts-inventory-manage .inventory-part-row {
grid-template-columns: 64px 1fr auto;
gap: 13px;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-visual {
width: 60px;
height: 60px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-bearing {
width: 43px;
height: 43px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-gear {
width: 44px;
height: 44px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-filter {
width: 45px;
height: 32px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-belt {
width: 47px;
height: 31px;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-copy strong {
font-size: 13px;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-copy div {
font-size: 10.5px;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-status .tag {
font-size: 10px;
padding: 4px 7px;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-status small {
font-size: 8.5px;
}
@media (max-width: 980px) {
.new-theme-design.parts-inventory-manage .hero-grid {
grid-template-columns: 1fr;
}
.new-theme-design.parts-inventory-manage .hero-card {
min-height: auto;
}
.new-theme-design.parts-inventory-manage .hero-card .mock {
min-height: auto;
}
}
.new-theme-design.parts-inventory-manage .blackSection {
background: linear-gradient(135deg, #0b0b0b 0%, #171717 100%) !important;
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #292929;
}
.new-theme-design.parts-inventory-manage .blackSection h2,
.new-theme-design.parts-inventory-manage .blackSection h3,
.new-theme-design.parts-inventory-manage .blackSection strong {
color: #fff;
}
.new-theme-design.parts-inventory-manage .blackSection p,
.new-theme-design.parts-inventory-manage .blackSection .lead {
color: #d5d5d5;
}
.new-theme-design.parts-inventory-manage .blackSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.new-theme-design.parts-inventory-manage .blackSection .card,
.new-theme-design.parts-inventory-manage .blackSection .role-card {
background: #151515;
border-color: #2c2c2c;
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .blackSection .card p,
.new-theme-design.parts-inventory-manage .blackSection .role-card p {
color: #cbcbcb;
}
.new-theme-design.parts-inventory-manage .blackSection .icon2 {
background: var(--yellow);
color: var(--black);
}
.new-theme-design.parts-inventory-manage .blackSection .compare {
background: #151515;
border-color: #2d2d2d;
}
.new-theme-design.parts-inventory-manage .blackSection .compare th {
background: #111;
color: var(--yellow);
border-color: #2d2d2d;
}
.new-theme-design.parts-inventory-manage .blackSection .compare td {
background: #171717;
color: #e1e1e1;
border-color: #2d2d2d;
}
.new-theme-design.parts-inventory-manage .blackSection .compare td strong {
color: #fff;
}
.new-theme-design.parts-inventory-manage .blackSection .workflow .step {
background: #151515;
border-color: #2b2b2b;
border-top-color: var(--yellow);
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .blackSection .workflow .step p {
color: #cfcfcf;
}
.new-theme-design.parts-inventory-manage .blackSection .workflow .num {
background: var(--yellow);
color: #000;
}
.new-theme-design.parts-inventory-manage .blackSection .industry {
background: #151515;
border-color: #2d2d2d;
border-bottom-color: var(--yellow);
color: #fff;
}
.new-theme-design.parts-inventory-manage .blackSection details {
background: #151515;
border-color: #2d2d2d;
}
.new-theme-design.parts-inventory-manage .blackSection summary {
color: #fff;
}
.new-theme-design.parts-inventory-manage .blackSection details p {
color: #cfcfcf;
} .new-theme-design.parts-inventory-manage .blackFeatureStory {
background: linear-gradient(135deg, #0b0b0b, #1b1b1b);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #2a2a2a;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .feature {
margin-top: 0;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .feature h2,
.new-theme-design.parts-inventory-manage .blackFeatureStory .feature h3 {
color: #fff;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .feature p {
color: #d5d5d5;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .feature .eyebrow {
background: var(--yellow);
color: #000;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .feature li {
color: #f4f4f4;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .feature li::before {
background: var(--yellow);
color: #000;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .visual-shell {
background:
radial-gradient(circle at 82% 15%,
rgba(0, 168, 248, 0.14),
transparent 28%),
linear-gradient(145deg, #101010, #202020);
border-color: #333;
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .window {
background: #121212;
border-color: #303030;
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .window-bar {
background: #181818;
color: #fff;
border-bottom-color: #303030;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .mini-kpi,
.new-theme-design.parts-inventory-manage .blackFeatureStory .workorder-card,
.new-theme-design.parts-inventory-manage .blackFeatureStory .check-row,
.new-theme-design.parts-inventory-manage .blackFeatureStory .stock-row {
background: #181818;
border-color: #303030;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .mini-kpi small,
.new-theme-design.parts-inventory-manage .blackFeatureStory .wo-meta,
.new-theme-design.parts-inventory-manage .blackFeatureStory .stock-name small {
color: #bebebe;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .wo-title,
.new-theme-design.parts-inventory-manage .blackFeatureStory .stock-name strong {
color: #fff;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .bar-chart {
background: #151515;
border-color: #303030;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .donut::after {
background: #151515;
color: #fff;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .pill {
background: #222;
color: #eee;
border: 1px solid #333;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .pill.green {
background: #14372a;
color: #87e5be;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .pill.orange {
background: #3b3217;
color: #ffe064;
}
.new-theme-design.parts-inventory-manage .blackFeatureStory .floating-badge.top-right,
.new-theme-design.parts-inventory-manage .blackFeatureStory .floating-badge.bottom-left {
background: var(--yellow);
color: #000;
} .new-theme-design.parts-inventory-manage .inventoryMetricBand {
background: linear-gradient(135deg, #0b0b0b, #202020);
color: #fff;
border-top: 4px solid var(--yellow);
padding: 58px 0;
}
.new-theme-design.parts-inventory-manage .inventoryMetricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.new-theme-design.parts-inventory-manage .inventoryMetric {
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 16px;
padding: 25px;
background: rgba(255, 255, 255, 0.055);
}
.new-theme-design.parts-inventory-manage .inventoryMetric strong {
display: block;
color: var(--yellow);
font-size: 28px;
margin-bottom: 7px;
}
.new-theme-design.parts-inventory-manage .inventoryMetric span {
color: #d5d5d5;
font-size: 13px;
}
@media (max-width: 980px) {
.new-theme-design.parts-inventory-manage .inventoryMetricGrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.new-theme-design.parts-inventory-manage .inventoryMetricGrid {
grid-template-columns: 1fr;
}
}
.new-theme-design.parts-inventory-manage .criticalRiskGrid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 42px;
align-items: center;
}
.new-theme-design.parts-inventory-manage .riskCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 28px;
}
.new-theme-design.parts-inventory-manage .riskCard {
background: #151515;
border: 1px solid #2e2e2e;
border-radius: 16px;
padding: 19px;
}
.new-theme-design.parts-inventory-manage .riskCard strong {
display: block;
color: var(--yellow);
font-size: 15px;
margin-bottom: 7px;
}
.new-theme-design.parts-inventory-manage .riskCard span {
color: #cfcfcf;
font-size: 12px;
line-height: 1.55;
}
.new-theme-design.parts-inventory-manage .riskBoard {
background: #121212;
border: 1px solid #303030;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}
.new-theme-design.parts-inventory-manage .riskHead {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
padding: 15px 17px;
background: #191919;
border-bottom: 1px solid #2e2e2e;
}
.new-theme-design.parts-inventory-manage .riskHead strong {
color: #fff;
font-size: 13px;
}
.new-theme-design.parts-inventory-manage .riskBadge {
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 900;
border-radius: 999px;
padding: 5px 8px;
}
.new-theme-design.parts-inventory-manage .riskList {
display: grid;
gap: 9px;
padding: 15px;
}
.new-theme-design.parts-inventory-manage .riskRow {
display: grid;
grid-template-columns: 1.3fr 0.65fr 0.7fr 0.7fr;
gap: 10px;
align-items: center;
padding: 12px;
border-radius: 12px;
border: 1px solid #2b2b2b;
background: #171717;
font-size: 10px;
color: #dadada;
}
.new-theme-design.parts-inventory-manage .riskRow strong {
color: #fff;
font-size: 11px;
}
.new-theme-design.parts-inventory-manage .riskLevel {
display: inline-flex;
justify-content: center;
padding: 4px 7px;
border-radius: 999px;
font-weight: 900;
font-size: 9px;
}
.new-theme-design.parts-inventory-manage .riskLevel.high {
background: #412020;
color: #ff9a9a;
}
.new-theme-design.parts-inventory-manage .riskLevel.med {
background: #3d3518;
color: #ffe16a;
}
.new-theme-design.parts-inventory-manage .riskLevel.low {
background: #17362a;
color: #8fe0b9;
}
.new-theme-design.parts-inventory-manage .riskScore {
font-weight: 900;
color: var(--yellow);
}
.new-theme-design.parts-inventory-manage .riskMeter {
height: 9px;
background: #292929;
border-radius: 999px;
overflow: hidden;
margin-top: 13px;
}
.new-theme-design.parts-inventory-manage .riskMeter span {
display: block;
height: 100%;
width: 84%;
border-radius: inherit;
background: linear-gradient(90deg, var(--success), var(--yellow), #e55b5b);
animation: fillProgress 2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (max-width: 980px) {
.new-theme-design.parts-inventory-manage .criticalRiskGrid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.new-theme-design.parts-inventory-manage .riskCards {
grid-template-columns: 1fr;
}
.new-theme-design.parts-inventory-manage .riskRow {
grid-template-columns: 1.2fr 0.7fr 0.7fr;
}
.new-theme-design.parts-inventory-manage .riskRow>*:nth-child(4) {
display: none;
}
}
.new-theme-design.parts-inventory-manage .midCta {
margin: 38px 0 0;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 8px 26px rgba(6, 59, 92, 0.05);
}
.new-theme-design.parts-inventory-manage .midCta.dark {
background: #111;
border-color: #2b2b2b;
border-left-color: var(--yellow);
color: #fff;
box-shadow: none;
}
.new-theme-design.parts-inventory-manage .midCta h3 {
margin: 0 0 6px;
font-size: 20px;
}
.new-theme-design.parts-inventory-manage .midCta.dark h3 {
color: #fff;
}
.new-theme-design.parts-inventory-manage .midCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.new-theme-design.parts-inventory-manage .midCta.dark p {
color: #d2d2d2;
}
.new-theme-design.parts-inventory-manage .midCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.parts-inventory-manage .midCta .btn.primary {
background: var(--black);
color: #fff;
}
.new-theme-design.parts-inventory-manage .midCta.dark .btn.primary {
background: var(--yellow);
color: var(--black);
}
.new-theme-design.parts-inventory-manage .midCta.dark .btn.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
box-shadow: none;
}
@media (max-width: 760px) {
.new-theme-design.parts-inventory-manage .midCta {
flex-direction: column;
align-items: flex-start;
}
} .new-theme-design.parts-inventory-manage .part-visual .css-bearing {
width: 38px;
height: 38px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-gear {
width: 39px;
height: 39px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-filter {
width: 40px;
height: 29px;
border-width: 3px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-belt {
width: 42px;
height: 28px;
border-width: 6px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-nut {
width: 34px;
height: 34px;
}
.new-theme-design.parts-inventory-manage .part-visual .css-bolt {
width: 14px;
height: 40px;
}
.new-theme-design.parts-inventory-manage .inventory-part-row {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.new-theme-design.parts-inventory-manage .inventory-part-row:hover {
transform: translateX(4px);
border-color: #9edcf8;
box-shadow: 0 10px 24px rgba(0, 168, 248, 0.11);
}
@media (max-width: 640px) {
.new-theme-design.parts-inventory-manage .inventory-part-row {
grid-template-columns: 50px 1fr;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-status {
grid-column: 2;
text-align: left;
margin-top: -3px;
}
.new-theme-design.parts-inventory-manage .inventory-part-row .part-status small {
display: inline;
margin-left: 6px;
}
}
.new-theme-design .vedaDemoBanner .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.new-theme-design .vedaDemoBanner .button.secondary:hover {
background: #323232;
}
@media (max-width: 767px) {
.feature-cont {
order: 1;
}
.feature-visual {
order: 0;
}
.new-theme-design.parts-inventory-manage .vedaActionsNew {
grid-template-columns: repeat(1, 1fr);
}
}  .new-theme-design.asset-manage-operations-teams .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.new-theme-design.asset-manage-operations-teams .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -0.03em;
}
.new-theme-design.asset-manage-operations-teams .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62ccff);
box-shadow: 0 8px 20px rgba(0, 168, 248, 0.23);
}
.new-theme-design.asset-manage-operations-teams .brand span {
color: var(--brand);
}
.new-theme-design.asset-manage-operations-teams .navlinks {
display: flex;
gap: 22px;
color: var(--muted);
font-size: 13px;
}
.new-theme-design.asset-manage-operations-teams .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: 0.2s ease;
} .new-theme-design.asset-manage-operations-teams .hero {
position: relative;
overflow: hidden;
padding: 80px 0 72px;
background:
radial-gradient(circle at 84% 14%,
rgba(0, 168, 248, 0.18),
transparent 30%),
radial-gradient(circle at 14% 30%,
rgba(0, 168, 248, 0.08),
transparent 30%),
linear-gradient(180deg, #fff 0%, #f3fbff 100%);
}
.new-theme-design.asset-manage-operations-teams .heroGrid {
display: grid;
grid-template-columns: 0.94fr 1.06fr;
gap: 52px;
align-items: center;
}
.new-theme-design.asset-manage-operations-teams .eyebrow {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.new-theme-design.asset-manage-operations-teams .lead {
color: var(--muted);
font-size: 19px;
margin: 24px 0 0;
max-width: 720px;
}
.new-theme-design.asset-manage-operations-teams .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.new-theme-design.asset-manage-operations-teams .microcopy {
color: var(--muted);
font-size: 13px;
margin-top: 14px;
}
.new-theme-design.asset-manage-operations-teams .heroVisual {
position: relative;
min-height: 510px;
}
.new-theme-design.asset-manage-operations-teams .assetPanel {
position: absolute;
right: 0;
top: 18px;
width: 80%;
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: var(--shadow);
overflow: hidden;
}
.new-theme-design.asset-manage-operations-teams .windowBar {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 14px;
background: #f8fcff;
border-bottom: 1px solid var(--line);
}
.new-theme-design.asset-manage-operations-teams .dot {
width: 9px;
height: 9px;
border-radius: 50%;
}
.new-theme-design.asset-manage-operations-teams .red {
background: #ff6b6b;
}
.new-theme-design.asset-manage-operations-teams .yellow {
background: var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .green {
background: #36c98f;
}
.new-theme-design.asset-manage-operations-teams .assetPanelBody {
padding: 16px;
}
.new-theme-design.asset-manage-operations-teams .assetHeroHeader {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 13px;
align-items: center;
padding: 14px;
border-radius: 14px;
background: linear-gradient(145deg, #f8fcff, #eaf8ff);
border: 1px solid #cbeaf9;
}
.new-theme-design.asset-manage-operations-teams .machineIcon {
width: 58px;
height: 58px;
border-radius: 14px;
background: #fff;
border: 1px solid var(--line);
display: grid;
place-items: center;
position: relative;
}
.new-theme-design.asset-manage-operations-teams .machineIcon:before {
content: "";
width: 31px;
height: 28px;
border-radius: 6px;
background: linear-gradient(145deg, #85a3b5, #d6e3e9);
box-shadow: inset 0 0 0 2px #6c8797;
}
.new-theme-design.asset-manage-operations-teams .machineIcon:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
right: 10px;
top: 9px;
box-shadow: 0 0 0 4px var(--success-bg);
}
.new-theme-design.asset-manage-operations-teams .assetHeroHeader strong {
display: block;
font-size: 14px;
color: var(--black);
}
.new-theme-design.asset-manage-operations-teams .assetHeroHeader small {
color: var(--muted);
font-size: 10px;
}
.new-theme-design.asset-manage-operations-teams .healthChip {
padding: 6px 9px;
border-radius: 999px;
background: var(--success-bg);
color: var(--success);
font-size: 9px;
font-weight: 900;
}
.new-theme-design.asset-manage-operations-teams .kpiGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
}
.new-theme-design.asset-manage-operations-teams .kpi {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 10px;
}
.new-theme-design.asset-manage-operations-teams .kpi strong {
display: block;
font-size: 17px;
color: var(--navy);
}
.new-theme-design.asset-manage-operations-teams .kpi small {
font-size: 8px;
color: var(--muted);
}
.new-theme-design.asset-manage-operations-teams .timeline {
margin-top: 12px;
border: 1px solid var(--line);
border-radius: 13px;
padding: 13px;
background: #fff;
}
.new-theme-design.asset-manage-operations-teams .timelineRow {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 8px;
align-items: start;
margin: 10px 0;
font-size: 9px;
}
.new-theme-design.asset-manage-operations-teams .timelineDot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--brand);
margin-top: 3px;
box-shadow: 0 0 0 4px var(--sky);
}
.new-theme-design.asset-manage-operations-teams .timelineRow strong {
display: block;
font-size: 10px;
}
.new-theme-design.asset-manage-operations-teams .timelineRow small {
color: var(--muted);
}
.new-theme-design.asset-manage-operations-teams .mobileAsset {
position: absolute;
left: 0;
bottom: 0;
width: 34%;
background: #111;
border-radius: 28px;
padding: 10px;
box-shadow: 0 18px 45px rgba(6, 59, 92, 0.22);
}
.new-theme-design.asset-manage-operations-teams .mobileScreen {
background: #fff;
border-radius: 20px;
padding: 14px;
min-height: 265px;
}
.new-theme-design.asset-manage-operations-teams .phoneNotch {
width: 60px;
height: 6px;
border-radius: 999px;
background: #222;
margin: 0 auto 12px;
}
.new-theme-design.asset-manage-operations-teams .qrMini {
width: 76px;
height: 76px;
margin: 10px auto;
background:
linear-gradient(90deg, #0b0b0b 8px, transparent 8px) 0 0/20px 20px,
linear-gradient(#0b0b0b 8px, transparent 8px) 0 0/20px 20px,
linear-gradient(90deg,
transparent 12px,
#0b0b0b 12px,
#0b0b0b 17px,
transparent 17px) 0 0/20px 20px,
linear-gradient(transparent 12px,
#0b0b0b 12px,
#0b0b0b 17px,
transparent 17px) 0 0/20px 20px,
#fff;
border: 6px solid #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
}
.new-theme-design.asset-manage-operations-teams .mobileLine {
font-size: 9px;
padding: 7px;
border: 1px solid var(--line);
border-radius: 9px;
margin-top: 7px;
}
.new-theme-design.asset-manage-operations-teams .floatBadge {
position: absolute;
right: 14px;
bottom: 18px;
background: var(--yellow);
color: #000;
font-weight: 900;
font-size: 10px;
padding: 8px 10px;
border-radius: 10px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
animation: float 3.5s ease-in-out infinite;
}
@keyframes float {
50% {
transform: translateY(-6px);
}
}
.new-theme-design.asset-manage-operations-teams .clientBand {
background: #fff; border-bottom: 1px solid var(--line);
}
.new-theme-design.asset-manage-operations-teams .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.new-theme-design.asset-manage-operations-teams .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.new-theme-design.asset-manage-operations-teams .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #b8d7e7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7b8e9e;
font-size: 12px;
font-weight: 750;
}
.new-theme-design.asset-manage-operations-teams .sectionHead {
max-width: 860px;
}
.new-theme-design.asset-manage-operations-teams .sectionHead.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.new-theme-design.asset-manage-operations-teams .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.new-theme-design.asset-manage-operations-teams .vedaSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #272727;
}
.new-theme-design.asset-manage-operations-teams .vedaSection h2,
.new-theme-design.asset-manage-operations-teams .vedaSection h3 {
color: #fff;
}
.new-theme-design.asset-manage-operations-teams .vedaSection p {
color: #d7d7d7;
}
.new-theme-design.asset-manage-operations-teams .vedaSection .eyebrow {
background: var(--yellow);
color: #000;
}
.new-theme-design.asset-manage-operations-teams .vedaGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
}
.new-theme-design.asset-manage-operations-teams .vedaBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 22px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}
.new-theme-design.asset-manage-operations-teams .prompt {
background: #1c1c1c;
border: 1px solid #303030;
border-radius: 12px;
padding: 13px 15px;
margin-top: 10px;
color: #f2f2f2;
font-size: 13px;
}
.new-theme-design.asset-manage-operations-teams .vedaActions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 24px;
}
.new-theme-design.asset-manage-operations-teams .vedaAction {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 17px;
}
.new-theme-design.asset-manage-operations-teams .vedaAction strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.new-theme-design.asset-manage-operations-teams .vedaAction span {
color: #cfcfcf;
font-size: 12px;
}
.new-theme-design.asset-manage-operations-teams .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.new-theme-design.asset-manage-operations-teams .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.new-theme-design.asset-manage-operations-teams .outcome strong {
display: block;
color: var(--black);
font-size: 22px;
margin-bottom: 8px;
}
.new-theme-design.asset-manage-operations-teams .outcome span {
color: var(--muted);
font-size: 14px;
}
.new-theme-design.asset-manage-operations-teams .awardBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .awardBand h2 {
color: #fff;
}
.new-theme-design.asset-manage-operations-teams .awardBand p {
color: #d3d3d3;
}
.new-theme-design.asset-manage-operations-teams .awardBand .eyebrow {
background: var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .awardGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.new-theme-design.asset-manage-operations-teams .awardItem {
background: #151515;
border: 1px solid #2d2d2d;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 16px;
text-align: center;
min-height: 86px;
color: #fff;
font-size: 12px;
font-weight: 850;
}
.new-theme-design.asset-manage-operations-teams .coreGrid,
.new-theme-design.asset-manage-operations-teams .cards,
.new-theme-design.asset-manage-operations-teams .seoGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.new-theme-design.asset-manage-operations-teams .coreCard,
.new-theme-design.asset-manage-operations-teams .card,
.new-theme-design.asset-manage-operations-teams .seoCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, 0.05);
}
.new-theme-design.asset-manage-operations-teams .coreIcon,
.new-theme-design.asset-manage-operations-teams .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
font-size: 12px;
}
.new-theme-design.asset-manage-operations-teams .coreCard p,
.new-theme-design.asset-manage-operations-teams .card p,
.new-theme-design.asset-manage-operations-teams .seoCard p {
color: var(--muted);
margin: 12px 0 0;
}
.new-theme-design.asset-manage-operations-teams .coreCard a {
display: inline-flex;
margin-top: 16px;
color: var(--brand-dark);
font-size: 13px;
font-weight: 850;
border-bottom: 2px solid var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .capability {
background: #fff;
}
.new-theme-design.asset-manage-operations-teams .capability.alt {
background: var(--sky-2);
}
.new-theme-design.asset-manage-operations-teams .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.new-theme-design.asset-manage-operations-teams .twoCol.reverse .visual {
order: 2;
}
.new-theme-design.asset-manage-operations-teams .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.new-theme-design.asset-manage-operations-teams .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.new-theme-design.asset-manage-operations-teams .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.new-theme-design.asset-manage-operations-teams .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.new-theme-design.asset-manage-operations-teams .visualMock {
min-height: 355px;
border-radius: 20px;
border: 1px solid #cbeaf9;
background: linear-gradient(145deg, #fff, #eaf8ff);
box-shadow: var(--shadow);
padding: 20px;
position: relative;
overflow: hidden;
}
.new-theme-design.asset-manage-operations-teams .listWindow {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 26px rgba(6, 59, 92, 0.08);
}
.new-theme-design.asset-manage-operations-teams .listWindow .windowBar {
font-size: 11px;
font-weight: 800;
color: var(--navy);
}
.new-theme-design.asset-manage-operations-teams .assetRow {
display: grid;
grid-template-columns: 44px 1.3fr 0.8fr 0.7fr;
gap: 10px;
padding: 11px 12px;
border-bottom: 1px solid var(--line);
font-size: 10px;
align-items: center;
}
.new-theme-design.asset-manage-operations-teams .assetRow.head {
background: var(--sky);
font-weight: 900;
color: var(--navy);
}
.new-theme-design.asset-manage-operations-teams .assetRow:last-child {
border-bottom: 0;
}
.new-theme-design.asset-manage-operations-teams .assetRow strong {
font-size: 11px;
}
.new-theme-design.asset-manage-operations-teams .assetThumb {
width: 34px;
height: 34px;
border-radius: 8px;
background: linear-gradient(145deg, #dce7ec, #8fa7b4);
position: relative;
}
.new-theme-design.asset-manage-operations-teams .assetThumb:after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
right: 4px;
top: 4px;
background: var(--success);
}
.new-theme-design.asset-manage-operations-teams .asset-progress {
height: 8px;
border-radius: 999px;
background: #e8eff4;
overflow: hidden;
margin: 10px 0;
width: 100%;
}
.new-theme-design.asset-manage-operations-teams .asset-progress span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand), #62ccff);
border-radius: 999px;
transform-origin: left;
animation: fill 1.8s ease both;
}
@keyframes fill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.new-theme-design.asset-manage-operations-teams .miniKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 14px;
}
.new-theme-design.asset-manage-operations-teams .miniKpi {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
}
.new-theme-design.asset-manage-operations-teams .miniKpi strong {
display: block;
font-size: 24px;
}
.new-theme-design.asset-manage-operations-teams .miniKpi small {
color: var(--muted);
}
.new-theme-design.asset-manage-operations-teams .hierarchy {
padding: 18px;
}
.new-theme-design.asset-manage-operations-teams .treeRoot,
.new-theme-design.asset-manage-operations-teams .treeChild {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 11px 12px;
font-size: 11px;
}
.new-theme-design.asset-manage-operations-teams .treeRoot {
border-left: 4px solid var(--yellow);
font-weight: 900;
}
.new-theme-design.asset-manage-operations-teams .treeChildren {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 13px 0 0 28px;
position: relative;
}
.new-theme-design.asset-manage-operations-teams .treeChildren:before {
content: "";
position: absolute;
left: -15px;
top: -14px;
bottom: 50%;
width: 1px;
background: #a9c5d6;
}
.new-theme-design.asset-manage-operations-teams .treeChild {
position: relative;
}
.new-theme-design.asset-manage-operations-teams .treeChild:before {
content: "";
position: absolute;
left: -15px;
top: 50%;
width: 14px;
height: 1px;
background: #a9c5d6;
}
.new-theme-design.asset-manage-operations-teams .qr {
width: 130px;
height: 130px;
margin: 12px auto;
border: 9px solid #fff;
box-shadow: 0 8px 22px rgba(6, 59, 92, 0.12);
background:
linear-gradient(90deg, #0b0b0b 11px, transparent 11px) 0 0/28px 28px,
linear-gradient(#0b0b0b 11px, transparent 11px) 0 0/28px 28px,
linear-gradient(90deg,
transparent 17px,
#0b0b0b 17px,
#0b0b0b 23px,
transparent 23px) 0 0/28px 28px,
linear-gradient(transparent 17px,
#0b0b0b 17px,
#0b0b0b 23px,
transparent 23px) 0 0/28px 28px,
#fff;
}
.new-theme-design.asset-manage-operations-teams .scanLine {
position: absolute;
left: 16%;
right: 16%;
height: 3px;
background: var(--yellow);
box-shadow: 0 0 12px rgba(255, 201, 40, 0.9);
animation: scan 2.3s ease-in-out infinite;
}
@keyframes scan {
0%,
100% {
top: 24%;
}
50% {
top: 72%;
}
}
.new-theme-design.asset-manage-operations-teams .gaugeWrap {
display: flex;
justify-content: center;
padding: 18px;
}
.new-theme-design.asset-manage-operations-teams .gauge {
width: 190px;
height: 95px;
overflow: hidden;
position: relative;
}
.new-theme-design.asset-manage-operations-teams .gauge:before {
content: "";
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
}
.new-theme-design.asset-manage-operations-teams .gauge:after {
content: "82";
position: absolute;
width: 126px;
height: 126px;
border-radius: 50%;
background: #fff;
left: 32px;
top: 32px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 27px;
font-size: 27px;
font-weight: 900;
}
.new-theme-design.asset-manage-operations-teams .chart {
height: 135px;
display: flex;
align-items: flex-end;
gap: 9px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
margin-top: 12px;
}
.new-theme-design.asset-manage-operations-teams .bar {
flex: 1;
border-radius: 7px 7px 2px 2px;
transform-origin: bottom;
animation: barRise 1.3s ease both;
}
@keyframes barRise {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(1) {
height: 48%;
background: var(--brand);
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(2) {
height: 70%;
background: var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(3) {
height: 86%;
background: var(--success);
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(4) {
height: 60%;
background: var(--brand-dark);
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(5) {
height: 74%;
background: #62ccff;
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(6) {
height: 42%;
background: #94aab6;
}
.new-theme-design.asset-manage-operations-teams .darkSection {
background: linear-gradient(135deg, var(--black), var(--black-soft));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .darkSection h2,
.new-theme-design.asset-manage-operations-teams .darkSection h3 {
color: #fff;
}
.new-theme-design.asset-manage-operations-teams .darkSection p {
color: #d7d7d7;
}
.new-theme-design.asset-manage-operations-teams .darkSection .eyebrow {
background: var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .darkSection .featureItem {
color: #f7f7f7;
}
.new-theme-design.asset-manage-operations-teams .darkSection .check {
background: var(--yellow);
color: #000;
}
.new-theme-design.asset-manage-operations-teams .aiGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 28px;
}
.new-theme-design.asset-manage-operations-teams .aiCard {
background: #151515;
border: 1px solid #303030;
border-radius: 16px;
padding: 20px;
}
.new-theme-design.asset-manage-operations-teams .aiCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 7px;
}
.new-theme-design.asset-manage-operations-teams .aiCard span {
color: #cfcfcf;
font-size: 12px;
}
.new-theme-design.asset-manage-operations-teams .aiBoard {
margin-top: 38px;
background: #111;
border: 1px solid #303030;
border-radius: 18px;
padding: 18px;
}
.new-theme-design.asset-manage-operations-teams .aiBoardGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.new-theme-design.asset-manage-operations-teams .darkKpi {
background: #171717;
border: 1px solid #2e2e2e;
border-radius: 13px;
padding: 14px;
}
.new-theme-design.asset-manage-operations-teams .darkKpi strong {
display: block;
color: var(--yellow);
font-size: 24px;
}
.new-theme-design.asset-manage-operations-teams .darkKpi small {
color: #cfcfcf;
}
.new-theme-design.asset-manage-operations-teams .metricBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .metricBand h2 {
color: #fff;
}
.new-theme-design.asset-manage-operations-teams .metricBand p {
color: #d5d5d5;
}
.new-theme-design.asset-manage-operations-teams .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.new-theme-design.asset-manage-operations-teams .metric {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 28px;
background: rgba(255, 255, 255, 0.06);
}
.new-theme-design.asset-manage-operations-teams .metric strong {
display: block;
color: var(--yellow);
font-size: 28px;
margin-bottom: 6px;
}
.new-theme-design.asset-manage-operations-teams .metric span {
color: #e1e1e1;
font-size: 15px;
}
.new-theme-design.asset-manage-operations-teams .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.new-theme-design.asset-manage-operations-teams .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.new-theme-design.asset-manage-operations-teams .ratingBand {
background: var(--black);
color: #fff;
padding: 34px 0;
border-top: 4px solid var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.asset-manage-operations-teams .ratingLead strong {
display: block;
font-size: 18px;
}
.new-theme-design.asset-manage-operations-teams .ratingLead span {
color: #cfcfcf;
font-size: 12px;
}
.new-theme-design.asset-manage-operations-teams .ratingItem {
text-align: center;
padding: 8px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.new-theme-design.asset-manage-operations-teams .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 14px;
}
.new-theme-design.asset-manage-operations-teams .ratingItem strong {
display: block;
font-size: 12px;
}
.new-theme-design.asset-manage-operations-teams .ratingItem span {
font-size: 10px;
color: #cfcfcf;
}
.new-theme-design.asset-manage-operations-teams .industryGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.new-theme-design.asset-manage-operations-teams .industryCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 24px;
}
.new-theme-design.asset-manage-operations-teams .industryCard p {
color: var(--muted);
margin: 10px 0 0;
}
.new-theme-design.asset-manage-operations-teams .workflowDark {
background: linear-gradient(135deg, #0b0b0b, #171717);
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .workflowDark h2,
.new-theme-design.asset-manage-operations-teams .workflowDark h3 {
color: #fff;
}
.new-theme-design.asset-manage-operations-teams .workflowDark p {
color: #d2d2d2;
}
.new-theme-design.asset-manage-operations-teams .workflowDark .eyebrow {
background: var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .workflowCards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 30px;
}
.new-theme-design.asset-manage-operations-teams .workflowCard {
background: #151515;
border: 1px solid #2c2c2c;
border-radius: 16px;
padding: 20px;
}
.new-theme-design.asset-manage-operations-teams .workflowCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 7px;
}
.new-theme-design.asset-manage-operations-teams .workflowCard span {
font-size: 12px;
color: #cbcbcb;
}
.new-theme-design.asset-manage-operations-teams .faq {
max-width: 900px;
}
.new-theme-design.asset-manage-operations-teams details.faqItem {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.new-theme-design.asset-manage-operations-teams details.faqItem summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
.new-theme-design.asset-manage-operations-teams details.faqItem p {
color: var(--muted);
margin: 12px 0 0;
}
.new-theme-design.asset-manage-operations-teams .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020); padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
border-top: 5px solid var(--yellow);
}
.new-theme-design.asset-manage-operations-teams .ctaPanel h2 {
color: #fff;
}
.new-theme-design.asset-manage-operations-teams .ctaPanel p {
color: #e6e6e6;
font-size: 18px;
margin: 14px 0 0;
}
.new-theme-design.asset-manage-operations-teams .ctaPanel .button.primary {
background: var(--yellow);
color: #000;
box-shadow: none;
}
.new-theme-design.asset-manage-operations-teams .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
}
.new-theme-design.asset-manage-operations-teams .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.new-theme-design.asset-manage-operations-teams .inlineCta.dark {
background: #111;
border-color: #2b2b2b;
color: #fff;
}
.new-theme-design.asset-manage-operations-teams .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.new-theme-design.asset-manage-operations-teams .inlineCta.dark h3 {
color: #fff;
}
.new-theme-design.asset-manage-operations-teams .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.new-theme-design.asset-manage-operations-teams .inlineCta.dark p {
color: #d8d8d8;
}
.new-theme-design.asset-manage-operations-teams .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.new-theme-design.asset-manage-operations-teams .reviewSection {
background: #f3fafe;
}
.new-theme-design.asset-manage-operations-teams .reviewGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.new-theme-design.asset-manage-operations-teams .reviewCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.new-theme-design.asset-manage-operations-teams .avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #b9dff0, #6cafcb);
margin-bottom: 12px;
}
.new-theme-design.asset-manage-operations-teams .reviewCard strong {
display: block;
}
.new-theme-design.asset-manage-operations-teams .reviewCard p {
color: var(--muted);
font-size: 13px;
}
.new-theme-design.asset-manage-operations-teams .reviewCard .stars {
font-size: 12px;
}
.new-theme-design.asset-manage-operations-teams footer {
background: #050505;
color: #d5d5d5;
padding: 60px 0 30px;
}
.new-theme-design.asset-manage-operations-teams .footerGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 34px;
}
.new-theme-design.asset-manage-operations-teams .footerCol h3 {
font-size: 14px;
color: var(--yellow);
margin-bottom: 14px;
}
.new-theme-design.asset-manage-operations-teams .footerCol a {
display: block;
color: #cfcfcf;
font-size: 12px;
margin: 9px 0;
}
.new-theme-design.asset-manage-operations-teams .footerBottom {
margin-top: 42px;
border-top: 1px solid #222;
padding-top: 22px;
font-size: 11px;
color: #999;
}
.new-theme-design.asset-manage-operations-teams .reveal {
opacity: 0;
transform: translateY(22px);
transition: 0.7s ease;
}
.new-theme-design.asset-manage-operations-teams .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 980px) {
.new-theme-design.asset-manage-operations-teams .heroGrid,
.new-theme-design.asset-manage-operations-teams .vedaGrid,
.new-theme-design.asset-manage-operations-teams .twoCol,
.new-theme-design.asset-manage-operations-teams .ctaPanel {
grid-template-columns: 1fr;
}
.new-theme-design.asset-manage-operations-teams .heroVisual {
min-height: 480px;
}
.new-theme-design.asset-manage-operations-teams .assetPanel {
width: 84%;
}
.new-theme-design.asset-manage-operations-teams .mobileAsset {
width: 32%;
}
.new-theme-design.asset-manage-operations-teams .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.asset-manage-operations-teams .outcomeGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.asset-manage-operations-teams .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.asset-manage-operations-teams .coreGrid,
.new-theme-design.asset-manage-operations-teams .cards,
.new-theme-design.asset-manage-operations-teams .seoGrid,
.new-theme-design.asset-manage-operations-teams .industryGrid,
.new-theme-design.asset-manage-operations-teams .reviewGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.asset-manage-operations-teams .aiGrid,
.new-theme-design.asset-manage-operations-teams .metricGrid,
.new-theme-design.asset-manage-operations-teams .workflowCards {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.asset-manage-operations-teams .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.asset-manage-operations-teams .ratingGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.asset-manage-operations-teams .footerGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.asset-manage-operations-teams .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.new-theme-design.asset-manage-operations-teams .wrap {
width: min(var(--max), calc(100% - 24px));
}
.new-theme-design.asset-manage-operations-teams .hero {
padding: 58px 0 52px;
}
.new-theme-design.asset-manage-operations-teams section {
padding: 64px 0;
}
.new-theme-design.asset-manage-operations-teams .heroVisual {
min-height: 430px;
}
.new-theme-design.asset-manage-operations-teams .assetPanel {
position: relative;
width: 100%;
top: 0;
}
.new-theme-design.asset-manage-operations-teams .mobileAsset {
display: none;
}
.new-theme-design.asset-manage-operations-teams .logoRow,
.new-theme-design.asset-manage-operations-teams .outcomeGrid,
.new-theme-design.asset-manage-operations-teams .awardGrid,
.new-theme-design.asset-manage-operations-teams .coreGrid,
.new-theme-design.asset-manage-operations-teams .cards,
.new-theme-design.asset-manage-operations-teams .seoGrid,
.new-theme-design.asset-manage-operations-teams .industryGrid,
.new-theme-design.asset-manage-operations-teams .reviewGrid,
.new-theme-design.asset-manage-operations-teams .aiGrid,
.new-theme-design.asset-manage-operations-teams .metricGrid,
.new-theme-design.asset-manage-operations-teams .workflowCards,
.new-theme-design.asset-manage-operations-teams .integrationGrid,
.new-theme-design.asset-manage-operations-teams .featureList,
.new-theme-design.asset-manage-operations-teams .ratingGrid,
.new-theme-design.asset-manage-operations-teams .footerGrid {
grid-template-columns: 1fr;
}
.new-theme-design.asset-manage-operations-teams .assetRow {
grid-template-columns: 44px 1fr 0.7fr;
}
.new-theme-design.asset-manage-operations-teams .assetRow>*:last-child {
display: none;
}
.new-theme-design.asset-manage-operations-teams .aiBoardGrid {
grid-template-columns: 1fr;
}
.new-theme-design.asset-manage-operations-teams .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.asset-manage-operations-teams .ctaPanel {
padding: 34px 24px;
}
}
@media (prefers-reduced-motion: no-preference) { .new-theme-design.asset-manage-operations-teams .assetPanel {
animation: assetPanelIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes assetPanelIn {
from {
opacity: 0;
transform: translateY(24px) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.asset-manage-operations-teams .mobileAsset {
animation: mobileFloat 4.2s ease-in-out infinite;
}
@keyframes mobileFloat {
0%,
100% {
transform: translateY(0) rotate(-0.5deg);
}
50% {
transform: translateY(-8px) rotate(0.6deg);
}
}
.new-theme-design.asset-manage-operations-teams .machineIcon {
animation: machinePulse 3.3s ease-in-out infinite;
}
@keyframes machinePulse {
0%,
100% {
box-shadow: 0 0 0 rgba(0, 168, 248, 0);
}
50% {
box-shadow: 0 0 0 7px rgba(0, 168, 248, 0.08);
}
}
.new-theme-design.asset-manage-operations-teams .healthChip {
animation: healthGlow 2.7s ease-in-out infinite;
}
@keyframes healthGlow {
0%,
100% {
box-shadow: 0 0 0 0 rgba(17, 138, 97, 0);
}
50% {
box-shadow: 0 0 0 6px rgba(17, 138, 97, 0.08);
}
}
.new-theme-design.asset-manage-operations-teams .kpi {
opacity: 0;
transform: translateY(8px);
animation: kpiIn 0.45s ease forwards;
}
.new-theme-design.asset-manage-operations-teams .kpi:nth-child(1) {
animation-delay: 0.2s;
}
.new-theme-design.asset-manage-operations-teams .kpi:nth-child(2) {
animation-delay: 0.32s;
}
.new-theme-design.asset-manage-operations-teams .kpi:nth-child(3) {
animation-delay: 0.44s;
}
.new-theme-design.asset-manage-operations-teams .kpi:nth-child(4) {
animation-delay: 0.56s;
}
@keyframes kpiIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.asset-manage-operations-teams .timelineRow {
opacity: 0;
transform: translateX(10px);
animation: timelineIn 0.48s ease forwards;
}
.new-theme-design.asset-manage-operations-teams .timelineRow:nth-of-type(2) {
animation-delay: 0.35s;
}
.new-theme-design.asset-manage-operations-teams .timelineRow:nth-of-type(3) {
animation-delay: 0.5s;
}
.new-theme-design.asset-manage-operations-teams .timelineRow:nth-of-type(4) {
animation-delay: 0.65s;
}
@keyframes timelineIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.asset-manage-operations-teams .timelineDot {
animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
}
.new-theme-design.asset-manage-operations-teams .floatBadge {
animation: float 3.5s ease-in-out infinite;
} .new-theme-design.asset-manage-operations-teams .qr,
.new-theme-design.asset-manage-operations-teams .qrMini {
position: relative;
overflow: hidden;
}
.new-theme-design.asset-manage-operations-teams .qr::after,
.new-theme-design.asset-manage-operations-teams .qrMini::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 3px;
background: var(--yellow);
box-shadow: 0 0 12px rgba(255, 201, 40, 0.85);
animation: qrSweep 2.4s ease-in-out infinite;
}
@keyframes qrSweep {
0%,
100% {
top: 10%;
}
50% {
top: 85%;
}
} .new-theme-design.asset-manage-operations-teams .treeRoot {
animation: rootPulse 3s ease-in-out infinite;
}
@keyframes rootPulse {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
.new-theme-design.asset-manage-operations-teams .treeChild {
opacity: 0;
transform: translateY(8px);
animation: treeIn 0.45s ease forwards;
}
.new-theme-design.asset-manage-operations-teams .treeChild:nth-child(1) {
animation-delay: 0.2s;
}
.new-theme-design.asset-manage-operations-teams .treeChild:nth-child(2) {
animation-delay: 0.35s;
}
.new-theme-design.asset-manage-operations-teams .treeChild:nth-child(3) {
animation-delay: 0.5s;
}
.new-theme-design.asset-manage-operations-teams .treeChild:nth-child(4) {
animation-delay: 0.65s;
}
@keyframes treeIn {
to {
opacity: 1;
transform: none;
}
} .new-theme-design.asset-manage-operations-teams .gauge {
animation: gaugePop 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes gaugePop {
from {
opacity: 0;
transform: scale(0.88);
}
to {
opacity: 1;
transform: scale(1);
}
}
.new-theme-design.asset-manage-operations-teams .gauge::before {
animation: gaugeGlow 2.8s ease-in-out infinite;
}
@keyframes gaugeGlow {
0%,
100% {
filter: saturate(1) brightness(1);
}
50% {
filter: saturate(1.15) brightness(1.04);
}
} .new-theme-design.asset-manage-operations-teams .bar {
transform-origin: bottom center;
animation: barRise 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(1) {
animation-delay: 0.05s;
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(2) {
animation-delay: 0.12s;
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(3) {
animation-delay: 0.19s;
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(4) {
animation-delay: 0.26s;
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(5) {
animation-delay: 0.33s;
}
.new-theme-design.asset-manage-operations-teams .bar:nth-child(6) {
animation-delay: 0.4s;
} .new-theme-design.asset-manage-operations-teams .assetRow:not(.head) {
opacity: 0;
transform: translateX(10px);
animation: assetRowIn 0.45s ease forwards;
}
.new-theme-design.asset-manage-operations-teams .assetRow:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.asset-manage-operations-teams .assetRow:nth-child(3) {
animation-delay: 0.3s;
}
.new-theme-design.asset-manage-operations-teams .assetRow:nth-child(4) {
animation-delay: 0.45s;
}
.new-theme-design.asset-manage-operations-teams .assetRow:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes assetRowIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.asset-manage-operations-teams .assetThumb::after {
animation: onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(17, 138, 97, 0);
}
50% {
box-shadow: 0 0 0 5px rgba(17, 138, 97, 0.12);
}
} .new-theme-design.asset-manage-operations-teams .prompt {
opacity: 0;
transform: translateX(10px);
animation: promptIn 0.45s ease forwards;
}
.new-theme-design.asset-manage-operations-teams .prompt:nth-of-type(1) {
animation-delay: 0.15s;
}
.new-theme-design.asset-manage-operations-teams .prompt:nth-of-type(2) {
animation-delay: 0.3s;
}
.new-theme-design.asset-manage-operations-teams .prompt:nth-of-type(3) {
animation-delay: 0.45s;
}
.new-theme-design.asset-manage-operations-teams .prompt:nth-of-type(4) {
animation-delay: 0.6s;
}
.new-theme-design.asset-manage-operations-teams .prompt:nth-of-type(5) {
animation-delay: 0.75s;
}
@keyframes promptIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.asset-manage-operations-teams .vedaAction {
transition:
transform 0.22s ease,
border-color 0.22s ease,
box-shadow 0.22s ease;
}
.new-theme-design.asset-manage-operations-teams .vedaAction:hover {
transform: translateY(-4px);
border-color: #4a4a4a;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
} .new-theme-design.asset-manage-operations-teams .coreCard,
.new-theme-design.asset-manage-operations-teams .industryCard,
.new-theme-design.asset-manage-operations-teams .reviewCard,
.new-theme-design.asset-manage-operations-teams .seoCard,
.new-theme-design.asset-manage-operations-teams .metric,
.new-theme-design.asset-manage-operations-teams .aiCard,
.new-theme-design.asset-manage-operations-teams .workflowCard,
.new-theme-design.asset-manage-operations-teams .outcome {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.new-theme-design.asset-manage-operations-teams .coreCard:hover,
.new-theme-design.asset-manage-operations-teams .industryCard:hover,
.new-theme-design.asset-manage-operations-teams .reviewCard:hover,
.new-theme-design.asset-manage-operations-teams .seoCard:hover,
.new-theme-design.asset-manage-operations-teams .outcome:hover {
transform: translateY(-5px);
box-shadow: 0 16px 34px rgba(6, 59, 92, 0.1);
}
.new-theme-design.asset-manage-operations-teams .metric:hover,
.new-theme-design.asset-manage-operations-teams .aiCard:hover,
.new-theme-design.asset-manage-operations-teams .workflowCard:hover {
transform: translateY(-4px);
border-color: #454545;
} .new-theme-design.asset-manage-operations-teams .darkKpi {
transition:
transform 0.22s ease,
border-color 0.22s ease;
}
.new-theme-design.asset-manage-operations-teams .darkKpi:hover {
transform: translateX(4px);
border-color: #484848;
} .new-theme-design.asset-manage-operations-teams .ctaPanel {
position: relative;
overflow: hidden;
} @keyframes ctaSweep {
0%,
45% {
left: -35%;
}
70%,
100% {
left: 110%;
}
} .new-theme-design.asset-manage-operations-teams .motionReveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.72s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.new-theme-design.asset-manage-operations-teams .motionReveal.motionShow {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
.new-theme-design p:empty {
display: none;
}
@media (max-width: 767px) {
.new-theme-design.asset-manage-operations-teams .vedaActions {
grid-template-columns: repeat(1, 1fr);
}
.industry-sec-mob {
display: none !important;
}
#carousal-two .owl-stage {
margin-bottom: 10px;
}
}  :root {
--b: #00a8f8;
--bd: #0076dd;
--n: #063b5c;
--sky: #eaf8ff;
--sky2: #f5fbff;
--ink: #11283a;
--m: #607487;
--line: #d9e8f1;
--g: #118a61;
--gb: #eaf8f3;
--black: #0b0b0b;
--black2: #171717;
--y: #ffc928;
--ys: #fff7d6;
--red: #de5151;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.11);
}
.new-theme-design.ai-powered-checklist-inspection .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--ys);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.ai-powered-checklist-inspection .lead {
font-size: 18px;
color: var(--m);
margin-top: 20px;
max-width: 760px;
}
.new-theme-design.ai-powered-checklist-inspection .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.new-theme-design.ai-powered-checklist-inspection .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.ai-powered-checklist-inspection .blackBtn {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.ai-powered-checklist-inspection .yellowBtn {
background: var(--y);
color: #000;
}
.new-theme-design.ai-powered-checklist-inspection .outlineBtn {
background: #fff;
border-color: var(--line);
color: var(--n);
}
.new-theme-design.ai-powered-checklist-inspection .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.ai-powered-checklist-inspection .hero {
padding: 72px 0 66px;
background:
radial-gradient(circle at 84% 15%,
rgba(0, 168, 248, 0.18),
transparent 30%),
linear-gradient(180deg, #fff, #f3fbff);
overflow: hidden;
}
.new-theme-design.ai-powered-checklist-inspection .heroGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
}
.new-theme-design.ai-powered-checklist-inspection .micro {
font-size: 14px;
color: var(--m);
margin-top: 14px;
}
.new-theme-design.ai-powered-checklist-inspection .heroVisual {
min-height: 455px;
position: relative;
}
.new-theme-design.ai-powered-checklist-inspection .panel {
position: absolute;
right: 0;
top: 8px;
width: 82%;
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: var(--shadow);
overflow: hidden;
animation: panelIn 0.8s ease both;
}
.new-theme-design.ai-powered-checklist-inspection .bar {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 14px;
background: #f8fcff;
border-bottom: 1px solid var(--line);
}
.new-theme-design.ai-powered-checklist-inspection .dot {
width: 9px;
height: 9px;
border-radius: 50%;
}
.new-theme-design.ai-powered-checklist-inspection .r {
background: #ff6b6b;
}
.new-theme-design.ai-powered-checklist-inspection .yy {
background: var(--y);
}
.new-theme-design.ai-powered-checklist-inspection .gg {
background: #36c98f;
}
.new-theme-design.ai-powered-checklist-inspection .body {
padding: 16px;
}
.new-theme-design.ai-powered-checklist-inspection .head {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
padding: 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: linear-gradient(145deg, #fff, #eaf8ff);
}
.new-theme-design.ai-powered-checklist-inspection .head strong {
display: block;
font-size: 13px;
}
.new-theme-design.ai-powered-checklist-inspection .head small {
color: var(--m);
font-size: 9px;
}
.new-theme-design.ai-powered-checklist-inspection .score {
width: 54px;
height: 54px;
border-radius: 50%;
display: grid;
place-items: center;
background: conic-gradient(var(--g) 0 82%, #e8eef2 82% 100%);
}
.new-theme-design.ai-powered-checklist-inspection .score:after {
content: "82%";
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
display: grid;
place-items: center;
font-size: 9px;
font-weight: 900;
}
.new-theme-design.ai-powered-checklist-inspection .custom-row {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 11px;
border: 1px solid var(--line);
border-radius: 11px;
margin-top: 8px;
background: #fff;
opacity: 0;
transform: translateY(8px);
animation: rowIn 0.4s ease forwards;
}
.new-theme-design.ai-powered-checklist-inspection .custom-row:nth-child(2) {
animation-delay: 0.2s;
}
.new-theme-design.ai-powered-checklist-inspection .custom-row:nth-child(3) {
animation-delay: 0.35s;
}
.new-theme-design.ai-powered-checklist-inspection .custom-row:nth-child(4) {
animation-delay: 0.5s;
}
.new-theme-design.ai-powered-checklist-inspection .custom-row:nth-child(5) {
animation-delay: 0.65s;
}
.new-theme-design.ai-powered-checklist-inspection .ic {
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--gb);
color: var(--g);
font-size: 10px;
font-weight: 900;
}
.new-theme-design.ai-powered-checklist-inspection .ic.fail {
background: #fff0f0;
color: var(--red);
}
.new-theme-design.ai-powered-checklist-inspection .row strong {
font-size: 10px;
}
.new-theme-design.ai-powered-checklist-inspection .row small {
display: block;
color: var(--m);
font-size: 8px;
}
.new-theme-design.ai-powered-checklist-inspection .st {
padding: 4px 7px;
border-radius: 999px;
font-size: 8px;
font-weight: 900;
}
.new-theme-design.ai-powered-checklist-inspection .pass {
background: var(--gb);
color: var(--g);
}
.new-theme-design.ai-powered-checklist-inspection .failst {
background: #fff0f0;
color: var(--red);
}
.new-theme-design.ai-powered-checklist-inspection .req {
background: var(--ys);
color: #7b5b00;
}
.new-theme-design.ai-powered-checklist-inspection .proof {
position: absolute;
left: 0;
bottom: 2px;
width: 36%;
background: #101010;
color: #fff;
border-radius: 22px;
padding: 14px;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.19);
animation: floatPhone 4s ease-in-out infinite;
}
.new-theme-design.ai-powered-checklist-inspection .proof h4 {
font-size: 11px;
margin: 0 0 10px;
}
.new-theme-design.ai-powered-checklist-inspection .photo {
height: 82px;
border-radius: 12px;
background: linear-gradient(145deg, #6a8797, #c4d6de);
position: relative;
}
.new-theme-design.ai-powered-checklist-inspection .photo:after {
content: "PHOTO PROOF";
position: absolute;
left: 8px;
bottom: 7px;
font-size: 7px;
font-weight: 900;
background: var(--y);
color: #000;
padding: 3px 5px;
border-radius: 5px;
}
.new-theme-design.ai-powered-checklist-inspection .sig {
height: 35px;
margin-top: 9px;
border-radius: 10px;
background: #fff;
position: relative;
}
.new-theme-design.ai-powered-checklist-inspection .sig:after {
content: "✓ Signed by Alex M.";
position: absolute;
left: 9px;
top: 9px;
color: var(--n);
font-size: 8px;
font-weight: 800;
}
.new-theme-design.ai-powered-checklist-inspection .aib {
position: absolute;
right: 14px;
bottom: 16px;
background: var(--y);
color: #000;
border-radius: 10px;
padding: 8px 10px;
font-size: 9px;
font-weight: 900;
animation: float 3.3s ease-in-out infinite;
}
@keyframes panelIn {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes rowIn {
to {
opacity: 1;
transform: none;
}
}
@keyframes floatPhone {
50% {
transform: translateY(-7px) rotate(0.5deg);
}
}
@keyframes float {
50% {
transform: translateY(-6px);
}
}
.new-theme-design.ai-powered-checklist-inspection .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.ai-powered-checklist-inspection .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.ai-powered-checklist-inspection .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.new-theme-design.ai-powered-checklist-inspection .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.new-theme-design.ai-powered-checklist-inspection .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--y);
}
.new-theme-design.ai-powered-checklist-inspection .dark h2,
.new-theme-design.ai-powered-checklist-inspection .dark h3 {
color: #fff;
}
.new-theme-design.ai-powered-checklist-inspection .dark p {
color: #d6d6d6;
}
.new-theme-design.ai-powered-checklist-inspection .dark .ey {
background: var(--y);
color: #000;
}
.new-theme-design.ai-powered-checklist-inspection .aiGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.ai-powered-checklist-inspection .prompts {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 20px;
}
.new-theme-design.ai-powered-checklist-inspection .prompt {
background: #1b1b1b;
border: 1px solid #303030;
border-radius: 11px;
padding: 12px 13px;
margin-top: 9px;
font-size: 12px;
opacity: 0;
transform: translateX(8px);
animation: promptIn 0.4s ease forwards;
}
.new-theme-design.ai-powered-checklist-inspection .prompt:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.ai-powered-checklist-inspection .prompt:nth-child(3) {
animation-delay: 0.3s;
}
.new-theme-design.ai-powered-checklist-inspection .prompt:nth-child(4) {
animation-delay: 0.45s;
}
.new-theme-design.ai-powered-checklist-inspection .prompt:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes promptIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.ai-powered-checklist-inspection .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 20px;
}
.new-theme-design.ai-powered-checklist-inspection .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px;
}
.new-theme-design.ai-powered-checklist-inspection .aiMini strong {
display: block;
color: var(--y);
font-size: 16px;
}
.new-theme-design.ai-powered-checklist-inspection .aiMini span {
font-size: 15px;
color: #cfcfcf;
}
.new-theme-design.ai-powered-checklist-inspection .soft {
background: var(--sky2);
}
.new-theme-design.ai-powered-checklist-inspection .sectionHead {
max-width: 820px;
margin-bottom: 36px;
}
.new-theme-design.ai-powered-checklist-inspection .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.ai-powered-checklist-inspection .sectionHead p {
color: var(--m);
font-size: 17px;
margin-top: 15px;
}
.new-theme-design.ai-powered-checklist-inspection .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.ai-powered-checklist-inspection .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--y);
border-radius: 16px;
padding: 22px;
}
.new-theme-design.ai-powered-checklist-inspection .outcome strong {
display: block;
font-size: 19px;
margin-bottom: 7px;
}
.new-theme-design.ai-powered-checklist-inspection .outcome span {
font-size: 13px;
color: var(--m);
}
.new-theme-design.ai-powered-checklist-inspection .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.new-theme-design.ai-powered-checklist-inspection .feature.reverse .visual {
order: -1;
}
.new-theme-design.ai-powered-checklist-inspection .feature p {
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.ai-powered-checklist-inspection .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.ai-powered-checklist-inspection .fi {
display: flex;
gap: 9px;
font-size: 15px;
}
.new-theme-design.ai-powered-checklist-inspection .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--gb);
color: var(--g);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.ai-powered-checklist-inspection .visual {
min-height: 330px;
border-radius: 20px;
background: linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #cbeaf9;
box-shadow: var(--shadow);
padding: 18px;
position: relative;
overflow: hidden;
}
.new-theme-design.ai-powered-checklist-inspection .builder {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
overflow: hidden;
}
.new-theme-design.ai-powered-checklist-inspection .field {
padding: 11px 13px;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 10px;
}
.new-theme-design.ai-powered-checklist-inspection .field:last-child {
border-bottom: 0;
}
.new-theme-design.ai-powered-checklist-inspection .required {
color: var(--red);
font-weight: 900;
}
.new-theme-design.ai-powered-checklist-inspection .builder-progress {
height: 8px;
background: #e7eef2;
border-radius: 999px;
overflow: hidden;
margin: 12px 0;
}
.new-theme-design.ai-powered-checklist-inspection .builder-progress span {
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg, var(--b), #62ccff);
transform-origin: left;
animation: fill 1.7s ease both;
}
@keyframes fill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.new-theme-design.ai-powered-checklist-inspection .egrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.new-theme-design.ai-powered-checklist-inspection .evidence {
height: 98px;
border-radius: 12px;
background: linear-gradient(145deg, #728c9b, #c4d6de);
position: relative;
}
.new-theme-design.ai-powered-checklist-inspection .evidence:nth-child(2) {
background: linear-gradient(145deg, #d7a75f, #f2d49a);
}
.new-theme-design.ai-powered-checklist-inspection .evidence:nth-child(3) {
background: linear-gradient(145deg, #7d9c7b, #cde0c8);
}
.new-theme-design.ai-powered-checklist-inspection .evidence:nth-child(4) {
background: linear-gradient(145deg, #8d7a9d, #d8cde0);
}
.new-theme-design.ai-powered-checklist-inspection .evidence span {
position: absolute;
left: 7px;
bottom: 6px;
background: #fff;
padding: 3px 5px;
border-radius: 5px;
font-size: 7px;
font-weight: 900;
}
.new-theme-design.ai-powered-checklist-inspection .alert {
padding: 13px;
border-radius: 12px;
background: #fff3f3;
border: 1px solid #ffc9c9;
margin-top: 10px;
font-size: 10px;
}
.new-theme-design.ai-powered-checklist-inspection .flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 8px;
align-items: center;
margin-top: 20px;
}
.new-theme-design.ai-powered-checklist-inspection .step {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
text-align: center;
font-size: 10px;
font-weight: 800;
}
.new-theme-design.ai-powered-checklist-inspection .arrow {
font-weight: 900;
color: var(--b);
}
.new-theme-design.ai-powered-checklist-inspection .auditRows {
display: grid;
gap: 9px;
}
.new-theme-design.ai-powered-checklist-inspection .auditRow {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 11px;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
font-size: 10px;
}
.new-theme-design.ai-powered-checklist-inspection .auditRow small {
color: var(--m);
}
.new-theme-design.ai-powered-checklist-inspection .bars {
display: grid;
gap: 10px;
margin-top: 14px;
}
.new-theme-design.ai-powered-checklist-inspection .scoreBar label {
font-size: 9px;
font-weight: 800;
}
.new-theme-design.ai-powered-checklist-inspection .scoreBar div {
height: 8px;
background: #e9eff3;
border-radius: 999px;
overflow: hidden;
}
.new-theme-design.ai-powered-checklist-inspection .scoreBar span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--b), var(--g));
border-radius: 999px;
animation: fill 1.8s ease both;
}
.new-theme-design.ai-powered-checklist-inspection .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--y);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.ai-powered-checklist-inspection .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.ai-powered-checklist-inspection .cta h3 {
font-size: 19px;
}
.new-theme-design.ai-powered-checklist-inspection .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.ai-powered-checklist-inspection .cta p {
color: var(--m);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.new-theme-design.ai-powered-checklist-inspection .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.ai-powered-checklist-inspection .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.ai-powered-checklist-inspection .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.ai-powered-checklist-inspection .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.ai-powered-checklist-inspection .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--y);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.ai-powered-checklist-inspection .useCase p {
color: var(--m);
font-size: 15px;
margin-top: 7px;
}
.new-theme-design.ai-powered-checklist-inspection .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 25px;
}
.new-theme-design.ai-powered-checklist-inspection .integration {
height: 70px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--b);
border-radius: 12px;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
}
.new-theme-design.ai-powered-checklist-inspection .rating {
padding: 30px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--y);
}
.new-theme-design.ai-powered-checklist-inspection .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.ai-powered-checklist-inspection .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.new-theme-design.ai-powered-checklist-inspection .stars {
color: var(--y);
letter-spacing: 2px;
}
.new-theme-design.ai-powered-checklist-inspection .faq {
max-width: 900px;
}
.new-theme-design.ai-powered-checklist-inspection .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.ai-powered-checklist-inspection .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--n);
}
.new-theme-design.ai-powered-checklist-inspection .faq details p {
color: var(--m);
font-size: 16px;
margin-top: 10px;
}
.new-theme-design.ai-powered-checklist-inspection .final,
.new-theme-design .final {
background: linear-gradient(135deg, var(--black), #202020);
border-top: 5px solid var(--y);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.ai-powered-checklist-inspection .final h2,
.new-theme-design .final h2 {
color: #fff;
}
.new-theme-design.ai-powered-checklist-inspection .final p,
.new-theme-design .final p {
color: #ddd;
margin-top: 12px;
max-width: 700px;
}
.new-theme-design.ai-powered-checklist-inspection .reveal {
opacity: 0;
transform: translateY(20px);
transition: 0.65s ease;
}
.new-theme-design.ai-powered-checklist-inspection .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.new-theme-design.ai-powered-checklist-inspection .heroGrid,
.new-theme-design.ai-powered-checklist-inspection .aiGrid,
.new-theme-design.ai-powered-checklist-inspection .feature,
.new-theme-design.ai-powered-checklist-inspection .final,
.new-theme-design#demo .final {
grid-template-columns: 1fr;
}
.new-theme-design.ai-powered-checklist-inspection .feature.reverse .visual {
order: 0;
}
.new-theme-design.ai-powered-checklist-inspection .heroVisual {
min-height: 450px;
}
.new-theme-design.ai-powered-checklist-inspection .outcomes,
.new-theme-design.ai-powered-checklist-inspection .useCases {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.ai-powered-checklist-inspection .logos {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.ai-powered-checklist-inspection .integrations {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.ai-powered-checklist-inspection .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.new-theme-design.ai-powered-checklist-inspection .wrap {
width: calc(100% - 24px);
}
.new-theme-design.ai-powered-checklist-inspection .hero {
padding: 54px 0;
}
.new-theme-design.ai-powered-checklist-inspection .heroVisual {
min-height: 420px;
}
.new-theme-design.ai-powered-checklist-inspection .panel {
position: relative;
width: 100%;
top: 0;
}
.new-theme-design.ai-powered-checklist-inspection .proof {
display: none;
}
.new-theme-design.ai-powered-checklist-inspection .fl,
.new-theme-design.ai-powered-checklist-inspection .outcomes,
.new-theme-design.ai-powered-checklist-inspection .useCases,
.new-theme-design.ai-powered-checklist-inspection .logos,
.new-theme-design.ai-powered-checklist-inspection .integrations,
.new-theme-design.ai-powered-checklist-inspection .aiMini,
.new-theme-design.ai-powered-checklist-inspection .ratingGrid {
grid-template-columns: 1fr;
}
.new-theme-design.ai-powered-checklist-inspection .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.new-theme-design.ai-powered-checklist-inspection .complianceStandards {
background: #fff;
}
.new-theme-design.ai-powered-checklist-inspection .complianceWrap {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 46px;
align-items: center;
}
.new-theme-design.ai-powered-checklist-inspection .complianceIntro p {
color: var(--m);
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.ai-powered-checklist-inspection .complianceBadges {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.new-theme-design.ai-powered-checklist-inspection .complianceBadge {
min-height: 132px;
border: 1px solid var(--line);
border-top: 4px solid var(--y);
border-radius: 16px;
padding: 18px 14px;
background: linear-gradient(145deg, #fff, #f8fcff);
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.new-theme-design.ai-powered-checklist-inspection .complianceBadge:hover {
transform: translateY(-4px);
border-color: #b7dcec;
box-shadow: 0 16px 30px rgba(6, 59, 92, 0.09);
}
.new-theme-design.ai-powered-checklist-inspection .complianceMark {
width: 64px;
height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff;
border: 3px double var(--n);
color: var(--n);
font-size: 13px;
font-weight: 900;
letter-spacing: 0.03em;
margin-bottom: 10px;
position: relative;
}
.new-theme-design.ai-powered-checklist-inspection .complianceMark::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px solid rgba(6, 59, 92, 0.25);
}
.new-theme-design.ai-powered-checklist-inspection .complianceBadge strong {
display: block;
font-size: 13px;
color: #111;
}
.new-theme-design.ai-powered-checklist-inspection .complianceBadge span {
color: var(--m);
font-size: 10.5px;
line-height: 1.45;
margin-top: 4px;
}
.new-theme-design.ai-powered-checklist-inspection .complianceFlow {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
align-items: center;
}
.new-theme-design.ai-powered-checklist-inspection .complianceFlowStep {
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 11px;
padding: 10px 8px;
text-align: center;
font-size: 9px;
font-weight: 800;
}
.new-theme-design.ai-powered-checklist-inspection .complianceFlowArrow {
text-align: center;
color: var(--b);
font-weight: 900;
}
.new-theme-design.ai-powered-checklist-inspection .complianceNote {
margin-top: 18px;
padding: 13px 14px;
border-radius: 12px;
background: #fff9e6;
border: 1px solid #f0df9b;
color: #6b5a18;
font-size: 11px;
}
@media (max-width: 960px) {
.new-theme-design.ai-powered-checklist-inspection .complianceWrap {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.new-theme-design.ai-powered-checklist-inspection .complianceBadges {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.ai-powered-checklist-inspection .complianceFlow {
grid-template-columns: 1fr;
}
.new-theme-design.ai-powered-checklist-inspection .complianceFlowArrow {
transform: rotate(90deg);
}
}
.new-theme-design.asset-manage-operations-teams .capability.alt .key-feature-sec-head {
display: block;
}
.new-theme-design .darkCta .button.secondary {
background: #111;
border-color: #2b2b2b;
color: #fff;
}
.new-theme-design .darkCta .button.secondary:hover {
background: #323232 !important;
}
@media (max-width: 767px) {
.new-theme-design.ai-powered-checklist-inspection .heroVisual {
display: none;
}
.new-theme-design.ai-powered-checklist-inspection .visual {
order: 0;
}
.new-theme-design.ai-powered-checklist-inspection .visual-cont {
order: 0;
}
}  .new-theme-design.ai-predictive-maintenance-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
font-size: 15px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.ai-predictive-maintenance-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.new-theme-design.ai-predictive-maintenance-software .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.new-theme-design.ai-predictive-maintenance-software .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.ai-predictive-maintenance-software .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.ai-predictive-maintenance-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.ai-predictive-maintenance-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.ai-predictive-maintenance-software .micro {
font-size: 14px;
color: var(--muted);
margin-top: 14px;
} .new-theme-design.ai-predictive-maintenance-software .hero {
padding: 76px 0 68px;
background:
radial-gradient(circle at 84% 15%,
rgba(0, 168, 248, 0.18),
transparent 30%),
linear-gradient(180deg, #fff, #f3fbff);
overflow: hidden;
}
.new-theme-design.ai-predictive-maintenance-software .heroGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 50px;
align-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .heroVisual {
min-height: 490px;
position: relative;
}
.new-theme-design.ai-predictive-maintenance-software .predictPanel {
position: absolute;
right: 0;
top: 10px;
width: 82%;
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: var(--shadow);
overflow: hidden;
animation: panelIn 0.8s ease both;
}
.new-theme-design.ai-predictive-maintenance-software .windowBar {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 14px;
background: #f8fcff;
border-bottom: 1px solid var(--line);
}
.new-theme-design.ai-predictive-maintenance-software .dot {
width: 9px;
height: 9px;
border-radius: 50%;
}
.new-theme-design.ai-predictive-maintenance-software .red {
background: #ff6b6b;
}
.new-theme-design.ai-predictive-maintenance-software .yellowDot {
background: var(--yellow);
}
.new-theme-design.ai-predictive-maintenance-software .green {
background: #36c98f;
}
.new-theme-design.ai-predictive-maintenance-software .panelBody {
padding: 16px;
}
.new-theme-design.ai-predictive-maintenance-software .assetHead {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 12px;
align-items: center;
padding: 13px;
background: linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #cbeaf9;
border-radius: 13px;
}
.new-theme-design.ai-predictive-maintenance-software .machine {
width: 54px;
height: 54px;
border-radius: 14px;
background: #fff;
border: 1px solid var(--line);
position: relative;
display: grid;
place-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .machine:before {
content: "";
width: 30px;
height: 28px;
border-radius: 6px;
background: linear-gradient(145deg, #819ba9, #d3e0e6);
box-shadow: inset 0 0 0 2px #687f8c;
}
.new-theme-design.ai-predictive-maintenance-software .machine:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--danger);
right: 7px;
top: 7px;
box-shadow: 0 0 0 4px #fff0f0;
animation: pulse 2s infinite;
}
.new-theme-design.ai-predictive-maintenance-software .assetHead strong {
display: block;
font-size: 13px;
}
.new-theme-design.ai-predictive-maintenance-software .assetHead small {
color: var(--muted);
font-size: 9px;
}
.new-theme-design.ai-predictive-maintenance-software .riskChip {
padding: 6px 8px;
border-radius: 999px;
background: #fff0f0;
color: var(--danger);
font-size: 9px;
font-weight: 900;
}
.new-theme-design.ai-predictive-maintenance-software .sensorGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 11px;
}
.new-theme-design.ai-predictive-maintenance-software .sensor {
border: 1px solid var(--line);
border-radius: 11px;
padding: 10px;
background: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .sensor strong {
display: block;
font-size: 15px;
}
.new-theme-design.ai-predictive-maintenance-software .sensor small {
font-size: 8px;
color: var(--muted);
}
.new-theme-design.ai-predictive-maintenance-software .chartBox {
height: 145px;
margin-top: 12px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
padding: 14px;
position: relative;
overflow: hidden;
}
.new-theme-design.ai-predictive-maintenance-software .gridline {
position: absolute;
left: 0;
right: 0;
height: 1px;
background: #eef3f6;
}
.new-theme-design.ai-predictive-maintenance-software .g1 {
top: 30%;
}
.new-theme-design.ai-predictive-maintenance-software .g2 {
top: 55%;
}
.new-theme-design.ai-predictive-maintenance-software .g3 {
top: 80%;
}
.new-theme-design.ai-predictive-maintenance-software .wave {
position: absolute;
left: 16px;
right: 16px;
bottom: 24px;
height: 82px;
}
.new-theme-design.ai-predictive-maintenance-software .wave svg {
width: 100%;
height: 100%;
}
.new-theme-design.ai-predictive-maintenance-software .wavePath {
stroke: var(--brand);
stroke-width: 3;
fill: none;
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: draw 2.5s ease forwards;
}
.new-theme-design.ai-predictive-maintenance-software .threshold {
position: absolute;
left: 16px;
right: 16px;
top: 38px;
border-top: 2px dashed var(--danger);
font-size: 8px;
color: var(--danger);
padding-top: 2px;
}
.new-theme-design.ai-predictive-maintenance-software .predictionCard {
position: absolute;
left: 0;
bottom: 0;
width: 36%;
background: #111;
color: #fff;
border-radius: 22px;
padding: 15px;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
animation: floatPhone 4s ease-in-out infinite;
}
.new-theme-design.ai-predictive-maintenance-software .predictionCard h4 {
font-size: 11px;
margin: 0 0 10px;
}
.new-theme-design.ai-predictive-maintenance-software .predItem {
padding: 9px;
border: 1px solid #303030;
border-radius: 10px;
background: #191919;
margin-top: 8px;
font-size: 9px;
}
.new-theme-design.ai-predictive-maintenance-software .predItem strong {
display: block;
color: var(--yellow);
font-size: 10px;
}
.new-theme-design.ai-predictive-maintenance-software .aiBadge {
position: absolute;
right: 14px;
bottom: 17px;
background: var(--yellow);
padding: 8px 10px;
border-radius: 10px;
font-size: 9px;
font-weight: 900;
animation: float 3.2s ease-in-out infinite;
}
@keyframes panelIn {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 8px rgba(226, 87, 87, 0.08);
}
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes floatPhone {
50% {
transform: translateY(-7px) rotate(0.5deg);
}
}
@keyframes float {
50% {
transform: translateY(-6px);
}
} .new-theme-design.ai-predictive-maintenance-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.ai-predictive-maintenance-software .trustLabel {
text-align: center;
font-size: 15px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.ai-predictive-maintenance-software .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.new-theme-design.ai-predictive-maintenance-software .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
} .new-theme-design.ai-predictive-maintenance-software .sectionHead {
max-width: 860px;
margin-bottom: 38px;
}
.new-theme-design.ai-predictive-maintenance-software .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.ai-predictive-maintenance-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.new-theme-design.ai-predictive-maintenance-software .soft {
background: var(--sky2);
}
.new-theme-design.ai-predictive-maintenance-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.ai-predictive-maintenance-software .dark h2,
.new-theme-design.ai-predictive-maintenance-software .dark h3 {
color: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .dark p {
color: #d6d6d6;
}
.new-theme-design.ai-predictive-maintenance-software .dark .ey {
background: var(--yellow);
color: #000;
}
.new-theme-design.ai-predictive-maintenance-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.ai-predictive-maintenance-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 22px;
}
.new-theme-design.ai-predictive-maintenance-software .outcome strong {
display: block;
font-size: 19px;
margin-bottom: 7px;
}
.new-theme-design.ai-predictive-maintenance-software .outcome span {
font-size: 15px;
color: var(--muted);
}
.new-theme-design.ai-predictive-maintenance-software .aiGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 20px;
}
.new-theme-design.ai-predictive-maintenance-software .prompt {
background: #1b1b1b;
border: 1px solid #303030;
border-radius: 11px;
padding: 12px 13px;
margin-top: 9px;
font-size: 12px;
opacity: 0;
transform: translateX(8px);
animation: promptIn 0.4s ease forwards;
}
.new-theme-design.ai-predictive-maintenance-software .prompt:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.ai-predictive-maintenance-software .prompt:nth-child(3) {
animation-delay: 0.3s;
}
.new-theme-design.ai-predictive-maintenance-software .prompt:nth-child(4) {
animation-delay: 0.45s;
}
.new-theme-design.ai-predictive-maintenance-software .prompt:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes promptIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.ai-predictive-maintenance-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 20px;
}
.new-theme-design.ai-predictive-maintenance-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px;
}
.new-theme-design.ai-predictive-maintenance-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 16px;
}
.new-theme-design.ai-predictive-maintenance-software .aiMini span {
font-size: 15px;
color: #cfcfcf;
}
.new-theme-design.ai-predictive-maintenance-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .feature.reverse .visual {
order: -1;
}
.new-theme-design.ai-predictive-maintenance-software .feature p {
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.ai-predictive-maintenance-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.ai-predictive-maintenance-software .fi {
display: flex;
gap: 9px;
font-size: 15px;
}
.new-theme-design.ai-predictive-maintenance-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--success-bg);
color: var(--success);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.ai-predictive-maintenance-software .visual {
min-height: 335px;
border-radius: 20px;
background: linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #cbeaf9;
box-shadow: var(--shadow);
padding: 18px;
position: relative;
overflow: hidden;
}
.new-theme-design.ai-predictive-maintenance-software .sensorCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 14px;
}
.new-theme-design.ai-predictive-maintenance-software .sensorRow {
display: grid;
grid-template-columns: 1fr 0.7fr 0.8fr;
gap: 10px;
padding: 11px;
border-bottom: 1px solid var(--line);
font-size: 10px;
}
.new-theme-design.ai-predictive-maintenance-software .sensorRow:last-child {
border-bottom: 0;
}
.new-theme-design.ai-predictive-maintenance-software .sensorRow strong {
font-size: 11px;
}
.new-theme-design.ai-predictive-maintenance-software .ok {
color: var(--success);
font-weight: 900;
}
.new-theme-design.ai-predictive-maintenance-software .warn {
color: #9a6a00;
font-weight: 900;
}
.new-theme-design.ai-predictive-maintenance-software .critical {
color: var(--danger);
font-weight: 900;
}
.new-theme-design.ai-predictive-maintenance-software .custom-progress {
height: 8px;
background: #e7eef2;
border-radius: 999px;
overflow: hidden;
margin: 10px 0;
width: 100%;
}
.new-theme-design.ai-predictive-maintenance-software .custom-progress span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--brand), var(--success));
transform-origin: left;
animation: fill 1.7s ease both;
}
@keyframes fill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.new-theme-design.ai-predictive-maintenance-software .flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 8px;
align-items: center;
margin-top: 18px;
}
.new-theme-design.ai-predictive-maintenance-software .step {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
text-align: center;
font-size: 10px;
font-weight: 800;
}
.new-theme-design.ai-predictive-maintenance-software .arrow {
font-weight: 900;
color: var(--brand);
}
.new-theme-design.ai-predictive-maintenance-software .pmCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 13px;
margin-top: 10px;
}
.new-theme-design.ai-predictive-maintenance-software .pmCard strong {
font-size: 11px;
color: #000;
}
.new-theme-design.ai-predictive-maintenance-software .pmCard small {
display: block;
color: var(--muted);
font-size: 9px;
}
.new-theme-design.ai-predictive-maintenance-software .tree {
padding: 12px;
color: #000;
}
.new-theme-design.ai-predictive-maintenance-software .root {
padding: 11px 12px;
background: #fff;
border: 1px solid var(--line);
border-left: 4px solid var(--yellow);
border-radius: 11px;
font-size: 11px;
font-weight: 900;
}
.new-theme-design.ai-predictive-maintenance-software .children {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 12px 0 0 25px;
}
.new-theme-design.ai-predictive-maintenance-software .child {
padding: 10px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 10px;
}
.new-theme-design.ai-predictive-maintenance-software .bars {
height: 140px;
display: flex;
align-items: flex-end;
gap: 9px;
padding: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
}
.new-theme-design.ai-predictive-maintenance-software .barCol {
flex: 1;
border-radius: 7px 7px 2px 2px;
transform-origin: bottom;
animation: barRise 1.3s ease both;
}
@keyframes barRise {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.new-theme-design.ai-predictive-maintenance-software .barCol:nth-child(1) {
height: 42%;
background: var(--brand);
}
.new-theme-design.ai-predictive-maintenance-software .barCol:nth-child(2) {
height: 62%;
background: var(--yellow);
}
.new-theme-design.ai-predictive-maintenance-software .barCol:nth-child(3) {
height: 82%;
background: var(--success);
}
.new-theme-design.ai-predictive-maintenance-software .barCol:nth-child(4) {
height: 55%;
background: var(--brand-dark);
}
.new-theme-design.ai-predictive-maintenance-software .barCol:nth-child(5) {
height: 72%;
background: #62ccff;
}
.new-theme-design.ai-predictive-maintenance-software .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .cta h3 {
font-size: 19px;
}
.new-theme-design.ai-predictive-maintenance-software .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .cta p {
color: var(--muted);
font-size: 15px;
margin-top: 5px;
max-width: 650px;
}
.new-theme-design.ai-predictive-maintenance-software .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.ai-predictive-maintenance-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.ai-predictive-maintenance-software .metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.ai-predictive-maintenance-software .metric {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 22px;
}
.new-theme-design.ai-predictive-maintenance-software .metric strong {
display: block;
color: var(--yellow);
font-size: 22px;
}
.new-theme-design.ai-predictive-maintenance-software .metric span {
font-size: 15px;
color: #d2d2d2;
}
.new-theme-design.ai-predictive-maintenance-software .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 25px;
}
.new-theme-design.ai-predictive-maintenance-software .integration {
height: 70px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
}
.new-theme-design.ai-predictive-maintenance-software .rating {
padding: 30px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.ai-predictive-maintenance-software .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.new-theme-design.ai-predictive-maintenance-software .stars {
color: var(--yellow);
letter-spacing: 2px;
}
.new-theme-design.ai-predictive-maintenance-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.ai-predictive-maintenance-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.ai-predictive-maintenance-software .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.ai-predictive-maintenance-software .useCase p {
color: var(--muted);
font-size: 15px;
margin-top: 7px;
}
.new-theme-design.ai-predictive-maintenance-software .faq {
max-width: 900px;
}
.new-theme-design.ai-predictive-maintenance-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.ai-predictive-maintenance-software .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
}
.new-theme-design.ai-predictive-maintenance-software .final {
background: linear-gradient(135deg, var(--black), #202020);
border-top: 5px solid var(--yellow);
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .final h2 {
color: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .final p {
color: #ddd;
margin-top: 12px;
max-width: 700px;
}
.new-theme-design.ai-predictive-maintenance-software .reveal {
opacity: 0;
transform: translateY(20px);
transition: 0.65s ease;
}
.new-theme-design.ai-predictive-maintenance-software .reveal.show {
opacity: 1;
transform: none;
}
.new-theme-design.ai-predictive-maintenance-software .final .secondary:hover {
background: #323232 !important;
}
@media (max-width: 960px) {
.new-theme-design.ai-predictive-maintenance-software .heroGrid,
.new-theme-design.ai-predictive-maintenance-software .aiGrid,
.new-theme-design.ai-predictive-maintenance-software .feature,
.new-theme-design.ai-predictive-maintenance-software .final {
grid-template-columns: 1fr;
}
.new-theme-design.ai-predictive-maintenance-software .feature.reverse .visual {
order: 0;
}
.new-theme-design.ai-predictive-maintenance-software .heroVisual {
min-height: 460px;
}
.new-theme-design.ai-predictive-maintenance-software .outcomes,
.new-theme-design.ai-predictive-maintenance-software .metrics,
.new-theme-design.ai-predictive-maintenance-software .useCases {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.ai-predictive-maintenance-software .logos {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.ai-predictive-maintenance-software .integrations {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.ai-predictive-maintenance-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.new-theme-design.ai-predictive-maintenance-software .wrap {
width: calc(100% - 24px);
}
.new-theme-design.ai-predictive-maintenance-software .hero {
padding: 54px 0;
}
.new-theme-design.ai-predictive-maintenance-software .heroVisual {
min-height: 430px;
}
.new-theme-design.ai-predictive-maintenance-software .predictPanel {
position: relative;
width: 100%;
top: 0;
}
.new-theme-design.ai-predictive-maintenance-software .predictionCard {
display: none;
}
.new-theme-design.ai-predictive-maintenance-software .fl,
.new-theme-design.ai-predictive-maintenance-software .outcomes,
.new-theme-design.ai-predictive-maintenance-software .metrics,
.new-theme-design.ai-predictive-maintenance-software .useCases,
.new-theme-design.ai-predictive-maintenance-software .logos,
.new-theme-design.ai-predictive-maintenance-software .integrations,
.new-theme-design.ai-predictive-maintenance-software .aiMini,
.new-theme-design.ai-predictive-maintenance-software .ratingGrid {
grid-template-columns: 1fr;
}
.new-theme-design.ai-predictive-maintenance-software .cta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.ai-predictive-maintenance-software .flow {
grid-template-columns: 1fr;
}
.new-theme-design.ai-predictive-maintenance-software .arrow {
transform: rotate(90deg);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
} .new-theme-design.ai-predictive-maintenance-software .heroVisual {
min-height: 515px;
position: relative;
}
.new-theme-design.ai-predictive-maintenance-software .predictPanel,
.new-theme-design.ai-predictive-maintenance-software .predictionCard,
.new-theme-design.ai-predictive-maintenance-software .aiBadge {
display: none !important;
}
.new-theme-design.ai-predictive-maintenance-software .heroDeviceStage {
position: relative;
min-height: 510px;
width: 100%;
max-width: 620px;
margin-left: auto;
} .new-theme-design.ai-predictive-maintenance-software .techPerson {
position: absolute;
left: 43%;
top: 48px;
width: 300px;
height: 440px;
transform: translateX(-50%);
z-index: 4;
pointer-events: none;
filter: drop-shadow(0 20px 24px rgba(6, 59, 92, 0.18));
animation: techFloat 4.5s ease-in-out infinite;
}
.new-theme-design.ai-predictive-maintenance-software .techPerson img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
} .new-theme-design.ai-predictive-maintenance-software .heroHalo {
position: absolute;
left: 44%;
top: 64px;
width: 330px;
height: 330px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(0, 168, 248, 0.18) 0,
rgba(0, 168, 248, 0.07) 48%,
transparent 72%);
z-index: 1;
animation: haloPulse 3.5s ease-in-out infinite;
} .new-theme-design.ai-predictive-maintenance-software .assetPhone {
position: absolute;
right: 0;
top: 20px;
width: 225px;
z-index: 5;
background: #0d1117;
border: 1px solid #2b3340;
border-radius: 32px;
padding: 9px;
box-shadow: 0 24px 52px rgba(6, 59, 92, 0.24);
transform: rotate(1.5deg);
animation: assetPhoneFloat 4.8s ease-in-out infinite;
}
.new-theme-design.ai-predictive-maintenance-software .assetPhoneScreen {
background: #fff;
border-radius: 24px;
min-height: 438px;
overflow: hidden;
position: relative;
}
.new-theme-design.ai-predictive-maintenance-software .assetPhoneTop {
height: 24px;
background: #0c0c0c;
display: flex;
justify-content: center;
align-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .assetPhoneNotch {
width: 72px;
height: 7px;
border-radius: 99px;
background: #333;
}
.new-theme-design.ai-predictive-maintenance-software .assetHeader {
padding: 10px 11px;
background: linear-gradient(145deg, #f7fcff, #eaf8ff);
border-bottom: 1px solid var(--line);
}
.new-theme-design.ai-predictive-maintenance-software .assetHeader strong {
display: block;
font-size: 10px;
}
.new-theme-design.ai-predictive-maintenance-software .assetHeader small {
display: block;
color: var(--muted);
font-size: 7px;
margin-top: 2px;
}
.new-theme-design.ai-predictive-maintenance-software .assetSummary {
margin: 9px;
padding: 9px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .assetSummaryTop {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 7px;
align-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .assetMachine {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(145deg, #d8e4e9, #7c96a4);
position: relative;
}
.new-theme-design.ai-predictive-maintenance-software .assetMachine:after {
content: "";
position: absolute;
right: 4px;
top: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 4px var(--success-bg);
animation: healthPulse 2s ease-in-out infinite;
}
.new-theme-design.ai-predictive-maintenance-software .assetSummaryTop strong {
font-size: 8px;
}
.new-theme-design.ai-predictive-maintenance-software .assetSummaryTop small {
display: block;
color: var(--muted);
font-size: 6.5px;
}
.new-theme-design.ai-predictive-maintenance-software .assetHealthChip {
font-size: 6px;
font-weight: 900;
color: var(--success);
background: var(--success-bg);
padding: 4px 5px;
border-radius: 999px;
}
.new-theme-design.ai-predictive-maintenance-software .healthGaugeWrap {
display: grid;
grid-template-columns: 82px 1fr;
gap: 8px;
align-items: center;
margin-top: 9px;
}
.new-theme-design.ai-predictive-maintenance-software .healthGauge {
width: 78px;
height: 78px;
border-radius: 50%;
background: conic-gradient(var(--success) 0 82%, #e8eef2 82% 100%);
position: relative;
display: grid;
place-items: center;
}
.new-theme-design.ai-predictive-maintenance-software .healthGauge:after {
content: "";
position: absolute;
inset: 13px;
border-radius: 50%;
background: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .healthGaugeValue {
position: relative;
z-index: 2;
text-align: center;
font-size: 15px;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.ai-predictive-maintenance-software .healthGaugeValue span {
display: block;
font-size: 5.5px;
font-weight: 700;
color: var(--muted);
}
.new-theme-design.ai-predictive-maintenance-software .healthMetrics {
display: grid;
gap: 5px;
}
.new-theme-design.ai-predictive-maintenance-software .healthMetric {
padding: 5px 6px;
border-radius: 7px;
background: var(--sky2);
border: 1px solid var(--line);
}
.new-theme-design.ai-predictive-maintenance-software .healthMetric strong {
display: block;
font-size: 7.5px;
}
.new-theme-design.ai-predictive-maintenance-software .healthMetric span {
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.ai-predictive-maintenance-software .assetChart {
margin: 8px 9px 0;
height: 100px;
border: 1px solid var(--line);
border-radius: 9px;
overflow: hidden;
position: relative;
background: linear-gradient(180deg, #fff, #f8fcff);
}
.new-theme-design.ai-predictive-maintenance-software .assetChartLabel {
position: absolute;
left: 7px;
top: 6px;
font-size: 6px;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.ai-predictive-maintenance-software .assetThreshold {
position: absolute;
left: 7px;
right: 7px;
top: 30px;
border-top: 1.5px dashed var(--danger);
color: var(--danger);
font-size: 5px;
padding-top: 2px;
}
.new-theme-design.ai-predictive-maintenance-software .assetWave {
position: absolute;
left: 8px;
right: 8px;
bottom: 9px;
height: 58px;
}
.new-theme-design.ai-predictive-maintenance-software .assetWave svg {
width: 100%;
height: 100%;
}
.new-theme-design.ai-predictive-maintenance-software .assetWave path {
stroke: var(--brand);
stroke-width: 3;
fill: none;
stroke-dasharray: 430;
stroke-dashoffset: 430;
animation: assetWaveDraw 2.5s ease forwards;
}
.new-theme-design.ai-predictive-maintenance-software .assetBars {
margin: 8px 9px 0;
height: 50px;
display: flex;
align-items: flex-end;
gap: 3px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px;
background: #fff;
}
.new-theme-design.ai-predictive-maintenance-software .assetBars span {
flex: 1;
border-radius: 3px 3px 1px 1px;
transform-origin: bottom;
animation: miniBar 1.3s ease both;
}
.new-theme-design.ai-predictive-maintenance-software .assetBars span:nth-child(1) {
height: 35%;
background: #62ccff;
}
.new-theme-design.ai-predictive-maintenance-software .assetBars span:nth-child(2) {
height: 55%;
background: var(--brand);
}
.new-theme-design.ai-predictive-maintenance-software .assetBars span:nth-child(3) {
height: 70%;
background: var(--yellow);
}
.new-theme-design.ai-predictive-maintenance-software .assetBars span:nth-child(4) {
height: 48%;
background: var(--brand-dark);
}
.new-theme-design.ai-predictive-maintenance-software .assetBars span:nth-child(5) {
height: 80%;
background: var(--success);
}
.new-theme-design.ai-predictive-maintenance-software .assetBars span:nth-child(6) {
height: 62%;
background: #7c67e8;
}
.new-theme-design.ai-predictive-maintenance-software .assetInsight {
margin: 8px 9px 10px;
background: #111;
color: #fff;
border-radius: 9px;
padding: 8px;
}
.new-theme-design.ai-predictive-maintenance-software .assetInsight strong {
display: block;
color: var(--yellow);
font-size: 7.5px;
}
.new-theme-design.ai-predictive-maintenance-software .assetInsight span {
display: block;
color: #d7d7d7;
font-size: 6px;
margin-top: 2px;
} .new-theme-design.ai-predictive-maintenance-software .predictiveSquare {
position: absolute;
left: 0;
bottom: 14px;
width: 190px;
min-height: 190px;
z-index: 6;
border-radius: 18px;
background: #10151d;
color: #fff;
border: 1px solid #2f3946;
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
overflow: hidden;
animation: workCardFloat 5s ease-in-out infinite;
}
.new-theme-design.ai-predictive-maintenance-software .predictiveSquareHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 12px;
background: linear-gradient(135deg, #111, #1d2733);
border-bottom: 1px solid #303a46;
}
.new-theme-design.ai-predictive-maintenance-software .predictiveSquareHeader strong {
font-size: 9px;
}
.new-theme-design.ai-predictive-maintenance-software .autoChip {
font-size: 5.5px;
font-weight: 900;
color: #000;
background: var(--yellow);
padding: 4px 5px;
border-radius: 999px;
}
.new-theme-design.ai-predictive-maintenance-software .predictiveSquareBody {
padding: 11px 12px;
}
.new-theme-design.ai-predictive-maintenance-software .woLine {
display: flex;
justify-content: space-between;
gap: 7px;
padding: 5px 0;
border-bottom: 1px solid #27313c;
font-size: 6.5px;
}
.new-theme-design.ai-predictive-maintenance-software .woLine:last-of-type {
border-bottom: 0;
}
.new-theme-design.ai-predictive-maintenance-software .woLine strong {
font-size: 6.5px;
}
.new-theme-design.ai-predictive-maintenance-software .woRisk {
color: #ff9292;
font-weight: 900;
}
.new-theme-design.ai-predictive-maintenance-software .woProgressLabel {
display: flex;
justify-content: space-between;
margin-top: 9px;
font-size: 6px;
color: #d6d6d6;
}
.new-theme-design.ai-predictive-maintenance-software .woProgressTrack {
height: 7px;
border-radius: 999px;
background: #29333e;
overflow: hidden;
margin-top: 5px;
}
.new-theme-design.ai-predictive-maintenance-software .woProgressFill {
height: 100%;
width: 87%;
border-radius: inherit;
background: linear-gradient(90deg,
var(--brand),
var(--yellow),
var(--danger));
transform-origin: left;
animation: woFill 2s ease both;
}
.new-theme-design.ai-predictive-maintenance-software .woStatus {
margin-top: 9px;
padding: 8px;
border-radius: 9px;
background: #191f28;
border: 1px solid #2d3742;
font-size: 6.5px;
position: relative;
overflow: hidden;
}
.new-theme-design.ai-predictive-maintenance-software .woStatus:after {
content: "";
position: absolute;
left: -40%;
top: 0;
bottom: 0;
width: 28%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.17),
transparent);
animation: statusSweep 3.5s ease-in-out infinite;
}
.new-theme-design.ai-predictive-maintenance-software .woStatus strong {
display: block;
color: var(--yellow);
font-size: 7px;
}
.new-theme-design.ai-predictive-maintenance-software .heroAiTag {
position: absolute;
right: 8px;
bottom: 18px;
z-index: 7;
background: var(--yellow);
color: #000;
font-size: 8px;
font-weight: 900;
padding: 7px 9px;
border-radius: 10px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
animation: float 3.2s ease-in-out infinite;
}
@keyframes assetPhoneFloat {
0%,
100% {
transform: translateY(0) rotate(1.5deg);
}
50% {
transform: translateY(-7px) rotate(0.5deg);
}
}
@keyframes workCardFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(6px);
}
}
@keyframes techFloat {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-5px);
}
}
@keyframes haloPulse {
0%,
100% {
transform: translateX(-50%) scale(1);
opacity: 0.8;
}
50% {
transform: translateX(-50%) scale(1.05);
opacity: 1;
}
}
@keyframes healthPulse {
50% {
box-shadow: 0 0 0 8px rgba(17, 138, 97, 0.08);
}
}
@keyframes assetWaveDraw {
to {
stroke-dashoffset: 0;
}
}
@keyframes miniBar {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
@keyframes woFill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes statusSweep {
0%,
45% {
left: -40%;
}
70%,
100% {
left: 115%;
}
}
@media (max-width: 960px) {
.new-theme-design.ai-predictive-maintenance-software .heroDeviceStage {
margin: 0 auto;
min-height: 510px;
}
}
@media (max-width: 640px) {
.new-theme-design.ai-predictive-maintenance-software .heroDeviceStage {
min-height: 430px;
max-width: 360px;
}
.new-theme-design.ai-predictive-maintenance-software .assetPhone {
width: 165px;
right: 0;
top: 22px;
}
.new-theme-design.ai-predictive-maintenance-software .assetPhoneScreen {
min-height: 330px;
}
.new-theme-design.ai-predictive-maintenance-software .techPerson {
width: 205px;
height: 320px;
top: 70px;
left: 45%;
}
.new-theme-design.ai-predictive-maintenance-software .heroHalo {
width: 235px;
height: 235px;
top: 78px;
}
.new-theme-design.ai-predictive-maintenance-software .predictiveSquare {
width: 150px;
min-height: 150px;
left: 0;
bottom: 8px;
}
.new-theme-design.ai-predictive-maintenance-software .assetChart {
height: 70px;
}
.new-theme-design.ai-predictive-maintenance-software .assetBars {
height: 38px;
}
.new-theme-design.ai-predictive-maintenance-software .heroAiTag {
right: 0;
bottom: 0;
}
} .new-theme-design.ai-predictive-maintenance-software .heroDeviceStage {
max-width: 650px !important;
min-height: 535px !important;
}
.new-theme-design.ai-predictive-maintenance-software .techPerson {
left: 41% !important;
top: 38px !important;
width: 315px !important;
height: 470px !important;
z-index: 4 !important;
}
.new-theme-design.ai-predictive-maintenance-software .techPerson img {
object-position: center !important;
} .new-theme-design.ai-predictive-maintenance-software .assetPhone {
right: -4px !important;
top: 8px !important;
width: 246px !important;
padding: 8px !important;
border-radius: 31px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetPhoneScreen {
min-height: 470px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetHeader {
padding: 12px 12px 10px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetHeader strong {
font-size: 12px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetHeader small {
font-size: 8px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetSummary {
margin: 10px !important;
padding: 11px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetSummaryTop strong {
font-size: 10px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetSummaryTop small,
.new-theme-design.ai-predictive-maintenance-software .assetHealthChip {
font-size: 7px !important;
}
.new-theme-design.ai-predictive-maintenance-software .healthGaugeWrap {
grid-template-columns: 92px 1fr !important;
gap: 9px !important;
}
.new-theme-design.ai-predictive-maintenance-software .healthGauge {
width: 88px !important;
height: 88px !important;
}
.new-theme-design.ai-predictive-maintenance-software .healthGaugeValue {
font-size: 18px !important;
}
.new-theme-design.ai-predictive-maintenance-software .healthGaugeValue span {
font-size: 7px !important;
}
.new-theme-design.ai-predictive-maintenance-software .healthMetric {
padding: 6px 7px !important;
}
.new-theme-design.ai-predictive-maintenance-software .healthMetric strong {
font-size: 9px !important;
}
.new-theme-design.ai-predictive-maintenance-software .healthMetric span {
font-size: 6.5px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetChart {
height: 118px !important;
margin: 9px 10px 0 !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetChartLabel {
font-size: 7.5px !important;
top: 7px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetThreshold {
top: 34px !important;
font-size: 6px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetWave {
height: 66px !important;
bottom: 10px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetBars {
height: 54px !important;
margin: 9px 10px 0 !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetInsight {
margin: 9px 10px 11px !important;
padding: 9px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetInsight strong {
font-size: 8.5px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetInsight span {
font-size: 7px !important;
line-height: 1.35 !important;
} .new-theme-design.ai-predictive-maintenance-software .liveChartGrid {
position: absolute;
left: 8px;
right: 8px;
top: 26px;
bottom: 8px;
pointer-events: none;
}
.new-theme-design.ai-predictive-maintenance-software .liveChartGrid span {
position: absolute;
left: 0;
right: 0;
height: 1px;
background: #edf2f5;
}
.new-theme-design.ai-predictive-maintenance-software .liveChartGrid span:nth-child(1) {
top: 20%;
}
.new-theme-design.ai-predictive-maintenance-software .liveChartGrid span:nth-child(2) {
top: 50%;
}
.new-theme-design.ai-predictive-maintenance-software .liveChartGrid span:nth-child(3) {
top: 80%;
}
.new-theme-design.ai-predictive-maintenance-software #liveVibrationSvg {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
width: calc(100% - 16px);
height: 72px;
overflow: visible;
}
.new-theme-design.ai-predictive-maintenance-software #liveVibrationArea {
fill: rgba(0, 168, 248, 0.1);
}
.new-theme-design.ai-predictive-maintenance-software #liveVibrationLine {
fill: none;
stroke: var(--brand);
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 2px 2px rgba(0, 168, 248, 0.18));
}
.new-theme-design.ai-predictive-maintenance-software #liveVibrationDot {
fill: #fff;
stroke: var(--brand);
stroke-width: 3;
filter: drop-shadow(0 0 5px rgba(0, 168, 248, 0.65));
}
.new-theme-design.ai-predictive-maintenance-software #liveVibrationPulse {
fill: rgba(0, 168, 248, 0.16);
stroke: rgba(0, 168, 248, 0.25);
stroke-width: 1;
transform-origin: center;
animation: livePointPulse 1.4s ease-out infinite;
}
.new-theme-design.ai-predictive-maintenance-software .liveReading {
position: absolute;
right: 7px;
top: 8px;
z-index: 3;
font-size: 6.5px;
font-weight: 900;
color: var(--navy);
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 4px 6px;
box-shadow: 0 4px 10px rgba(6, 59, 92, 0.07);
}
@keyframes livePointPulse {
0% {
transform: scale(0.55);
opacity: 0.9;
}
100% {
transform: scale(2.4);
opacity: 0;
}
} .new-theme-design.ai-predictive-maintenance-software .predictiveSquare {
left: -6px !important;
bottom: 8px !important;
width: 212px !important;
min-height: 205px !important;
border-radius: 18px !important;
}
.new-theme-design.ai-predictive-maintenance-software .predictiveSquareHeader {
padding: 12px 13px !important;
}
.new-theme-design.ai-predictive-maintenance-software .predictiveSquareHeader strong {
font-size: 10.5px !important;
}
.new-theme-design.ai-predictive-maintenance-software .autoChip {
font-size: 6px !important;
}
.new-theme-design.ai-predictive-maintenance-software .predictiveSquareBody {
padding: 12px 13px !important;
}
.new-theme-design.ai-predictive-maintenance-software .woLine,
.new-theme-design.ai-predictive-maintenance-software .woLine strong {
font-size: 7.5px !important;
}
.new-theme-design.ai-predictive-maintenance-software .woProgressLabel {
font-size: 7px !important;
}
.new-theme-design.ai-predictive-maintenance-software .woProgressTrack {
height: 8px !important;
}
.new-theme-design.ai-predictive-maintenance-software .woStatus {
font-size: 7px !important;
line-height: 1.4 !important;
}
.new-theme-design.ai-predictive-maintenance-software .woStatus strong {
font-size: 8px !important;
} @media (max-width: 640px) {
.new-theme-design.ai-predictive-maintenance-software .techPerson {
width: 220px !important;
height: 330px !important;
top: 62px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetPhone {
width: 174px !important;
right: 0 !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetPhoneScreen {
min-height: 355px !important;
}
.new-theme-design.ai-predictive-maintenance-software .predictiveSquare {
width: 155px !important;
min-height: 155px !important;
}
.new-theme-design.ai-predictive-maintenance-software .assetChart {
height: 78px !important;
}
}
@media (max-width: 767px) {
.new-theme-design.ai-predictive-maintenance-software .heroVisual {
display: none;
}
.new-theme-design.ai-predictive-maintenance-software .final {
padding-left: 24px;
padding-right: 24px;
}
.new-theme-design section {
padding-top: 34px;
padding-bottom: 34px;
}
.new-theme-design.ai-predictive-maintenance-software .key-feature-sec-head,
.ai-predictive-maintenance-software .key-feature-sec-head,
.integrations-panel .key-feature-sec-head {
display: none !important;
}
.new-theme-design.ai-predictive-maintenance-software .visual {
order: 0;
}
.new-theme-design.ai-predictive-maintenance-software .visual-cont {
order: 1;
}
.new-theme-design.ai-predictive-maintenance-software .heroVisual,
.new-theme-design.asset-manage-operations-teams .heroVisual {
display: none !important;
}
.new-theme-design.ai-predictive-maintenance-software .step+p {
display: none;
}
.new-theme-design.ai-predictive-maintenance-software .sectionHead {
margin-bottom: 0;
}
}  :root {
--brand: #00a8f8;
--brand-dark: #0076dd;
--navy: #063b5c;
--sky: #eaf8ff;
--sky2: #f5fbff;
--ink: #11283a;
--line: #d9e8f1;
--green: #118a61;
--greenbg: #eaf8f3;
--yellow: #ffc928;
--yellowsoft: #fff7d6;
--black: #0b0b0b;
--black2: #171717;
--danger: #e25757;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.12);
}
.new-theme-design.iot-condition-monitoring-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.iot-condition-monitoring-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.new-theme-design.iot-condition-monitoring-software .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.new-theme-design.iot-condition-monitoring-software .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.iot-condition-monitoring-software .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.iot-condition-monitoring-software .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.iot-condition-monitoring-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.iot-condition-monitoring-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.iot-condition-monitoring-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.new-theme-design.iot-condition-monitoring-software .hero {
padding: 74px 0 66px;
background:
radial-gradient(circle at 83% 16%,
rgba(0, 168, 248, 0.18),
transparent 31%),
linear-gradient(180deg, #fff, #f3fbff);
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .heroGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
}
.new-theme-design.iot-condition-monitoring-software .heroVisual {
position: relative;
min-height: 520px;
}
.new-theme-design.iot-condition-monitoring-software .iotStage {
position: relative;
min-height: 520px;
max-width: 625px;
margin-left: auto;
}
.new-theme-design.iot-condition-monitoring-software .halo {
position: absolute;
left: 44%;
top: 55px;
width: 335px;
height: 335px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(0, 168, 248, 0.18),
rgba(0, 168, 248, 0.07) 48%,
transparent 72%);
animation: haloPulse 3.6s ease-in-out infinite;
}
.new-theme-design.iot-condition-monitoring-software .tech {
position: absolute;
left: 42%;
top: 36px;
width: 310px;
height: 470px;
transform: translateX(-50%);
z-index: 4;
filter: drop-shadow(0 20px 24px rgba(6, 59, 92, 0.18));
animation: techFloat 4.5s ease-in-out infinite;
}
.new-theme-design.iot-condition-monitoring-software .tech img {
width: 100%;
height: 100%;
object-fit: contain;
}
.new-theme-design.iot-condition-monitoring-software .sensorPhone {
position: absolute;
right: 0;
top: 5px;
width: 245px;
z-index: 6;
background: #0d1117;
border: 1px solid #28333d;
border-radius: 32px;
padding: 8px;
box-shadow: 0 24px 52px rgba(6, 59, 92, 0.25);
transform: rotate(1deg);
animation: phoneFloat 4.8s ease-in-out infinite;
}
.new-theme-design.iot-condition-monitoring-software .phoneScreen {
background: #fff;
border-radius: 24px;
min-height: 470px;
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .phoneTop {
height: 24px;
background: #0c0c0c;
display: flex;
align-items: center;
justify-content: center;
}
.new-theme-design.iot-condition-monitoring-software .notch {
width: 70px;
height: 7px;
border-radius: 99px;
background: #333;
}
.new-theme-design.iot-condition-monitoring-software .phoneHead {
padding: 11px 12px;
background: linear-gradient(145deg, #f7fcff, #eaf8ff);
border-bottom: 1px solid var(--line);
}
.new-theme-design.iot-condition-monitoring-software .phoneHead strong {
display: block;
font-size: 12px;
}
.new-theme-design.iot-condition-monitoring-software .phoneHead small {
font-size: 7.5px;
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .assetBox {
margin: 10px;
padding: 10px;
border: 1px solid var(--line);
border-radius: 11px;
}
.new-theme-design.iot-condition-monitoring-software .assetTop {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 7px;
align-items: center;
}
.new-theme-design.iot-condition-monitoring-software .machine {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(145deg, #d7e4ea, #7892a1);
position: relative;
}
.new-theme-design.iot-condition-monitoring-software .machine:after {
content: "";
position: absolute;
right: 4px;
top: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px var(--greenbg);
animation: pulse 2s infinite;
}
.new-theme-design.iot-condition-monitoring-software .assetTop strong {
font-size: 9px;
}
.new-theme-design.iot-condition-monitoring-software .assetTop small {
display: block;
font-size: 6px;
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .liveChip {
font-size: 6px;
font-weight: 900;
color: var(--green);
background: var(--greenbg);
padding: 4px 5px;
border-radius: 999px;
}
.new-theme-design.iot-condition-monitoring-software .metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 9px 10px 0;
}
.new-theme-design.iot-condition-monitoring-software .metric {
padding: 7px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
}
.new-theme-design.iot-condition-monitoring-software .metric strong {
display: block;
font-size: 8.5px;
}
.new-theme-design.iot-condition-monitoring-software .metric span {
font-size: 5.7px;
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .iotChart {
margin: 9px 10px 0;
height: 118px;
border: 1px solid var(--line);
border-radius: 9px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fff, #f8fcff);
}
.new-theme-design.iot-condition-monitoring-software .chartTitle {
position: absolute;
left: 7px;
top: 6px;
font-size: 7px;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.iot-condition-monitoring-software .threshold {
position: absolute;
left: 7px;
right: 7px;
top: 34px;
border-top: 1.5px dashed var(--danger);
color: var(--danger);
font-size: 5.5px;
padding-top: 2px;
}
.new-theme-design.iot-condition-monitoring-software .reading {
position: absolute;
right: 7px;
top: 7px;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
padding: 3px 5px;
font-size: 6px;
font-weight: 900;
color: var(--navy);
z-index: 3;
}
#iotSvg {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
width: calc(100% - 16px);
height: 72px;
}
.new-theme-design.iot-condition-monitoring-software .area {
fill: rgba(0, 168, 248, 0.1);
}
.new-theme-design.iot-condition-monitoring-software .line {
fill: none;
stroke: var(--brand);
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-theme-design.iot-condition-monitoring-software .dotLive {
fill: #fff;
stroke: var(--brand);
stroke-width: 3;
}
.new-theme-design.iot-condition-monitoring-software .pulseLive {
fill: rgba(0, 168, 248, 0.17);
stroke: rgba(0, 168, 248, 0.25);
animation: pointPulse 1.4s ease-out infinite;
}
.new-theme-design.iot-condition-monitoring-software .alertBox {
margin: 9px 10px 11px;
padding: 9px;
border-radius: 9px;
background: #111;
color: #fff;
}
.new-theme-design.iot-condition-monitoring-software .alertBox strong {
display: block;
color: var(--yellow);
font-size: 8px;
}
.new-theme-design.iot-condition-monitoring-software .alertBox span {
display: block;
color: #d7d7d7;
font-size: 6.5px;
line-height: 1.35;
}
.new-theme-design.iot-condition-monitoring-software .gatewayCard {
position: absolute;
left: -5px;
bottom: 15px;
width: 205px;
z-index: 7;
border-radius: 18px;
background: #10151d;
color: #fff;
border: 1px solid #303b47;
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
overflow: hidden;
animation: cardFloat 5s ease-in-out infinite;
}
.new-theme-design.iot-condition-monitoring-software .gatewayHead {
display: flex;
justify-content: space-between;
padding: 11px 12px;
border-bottom: 1px solid #303a46;
}
.new-theme-design.iot-condition-monitoring-software .gatewayHead strong {
font-size: 9px;
}
.new-theme-design.iot-condition-monitoring-software .gatewayHead span {
font-size: 5.5px;
background: var(--yellow);
color: #000;
font-weight: 900;
padding: 4px 5px;
border-radius: 999px;
}
.new-theme-design.iot-condition-monitoring-software .gatewayBody {
padding: 11px 12px;
}
.new-theme-design.iot-condition-monitoring-software .sensorNode {
display: grid;
grid-template-columns: 9px 1fr auto;
gap: 7px;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #27313c;
font-size: 6.5px;
}
.new-theme-design.iot-condition-monitoring-software .sensorNode:last-child {
border-bottom: 0;
}
.new-theme-design.iot-condition-monitoring-software .sensorDot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(17, 138, 97, 0.12);
}
.new-theme-design.iot-condition-monitoring-software .sensorNode strong {
font-size: 6.5px;
}
.new-theme-design.iot-condition-monitoring-software .sensorVal {
color: var(--yellow);
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .gatewayProgress {
height: 7px;
border-radius: 999px;
background: #29333e;
overflow: hidden;
margin-top: 10px;
}
.new-theme-design.iot-condition-monitoring-software .gatewayProgress span {
display: block;
height: 100%;
width: 84%;
background: linear-gradient(90deg, var(--brand), var(--green));
animation: fill 2s ease both;
}
.new-theme-design.iot-condition-monitoring-software .iotTag {
position: absolute;
right: 6px;
bottom: 18px;
z-index: 8;
background: var(--yellow);
color: #000;
font-size: 8px;
font-weight: 900;
padding: 7px 9px;
border-radius: 10px;
animation: float 3.3s ease-in-out infinite;
}
@keyframes haloPulse {
50% {
transform: translateX(-50%) scale(1.05);
}
}
@keyframes techFloat {
50% {
transform: translateX(-50%) translateY(-5px);
}
}
@keyframes phoneFloat {
50% {
transform: translateY(-7px) rotate(0.3deg);
}
}
@keyframes cardFloat {
50% {
transform: translateY(6px);
}
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 8px rgba(17, 138, 97, 0.08);
}
}
@keyframes pointPulse {
0% {
r: 4;
opacity: 0.9;
}
100% {
r: 12;
opacity: 0;
}
}
@keyframes fill {
from {
transform: scaleX(0);
transform-origin: left;
}
to {
transform: scaleX(1);
}
}
@keyframes float {
50% {
transform: translateY(-6px);
}
}
.new-theme-design.iot-condition-monitoring-software .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.iot-condition-monitoring-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.iot-condition-monitoring-software .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.new-theme-design.iot-condition-monitoring-software .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.new-theme-design.iot-condition-monitoring-software .soft {
background: var(--sky2);
}
.new-theme-design.iot-condition-monitoring-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.iot-condition-monitoring-software .dark h2,
.new-theme-design.iot-condition-monitoring-software .dark h3 {
color: #fff;
}
.new-theme-design.iot-condition-monitoring-software .dark p {
color: #d6d6d6;
}
.new-theme-design.iot-condition-monitoring-software .dark .ey {
background: var(--yellow);
color: #000;
}
.new-theme-design.iot-condition-monitoring-software .sectionHead {
max-width: 920px;
margin-bottom: 36px;
}
.new-theme-design.iot-condition-monitoring-software .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.iot-condition-monitoring-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.new-theme-design.iot-condition-monitoring-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.iot-condition-monitoring-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 21px;
}
.new-theme-design.iot-condition-monitoring-software .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.new-theme-design.iot-condition-monitoring-software .outcome span {
font-size: 12.5px;
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .flowGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 11px;
}
.new-theme-design.iot-condition-monitoring-software .flowCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 18px;
min-height: 190px;
position: relative;
}
.new-theme-design.iot-condition-monitoring-software .flowNum {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--brand);
color: #fff;
display: grid;
place-items: center;
font-weight: 900;
font-size: 11px;
margin-bottom: 13px;
}
.new-theme-design.iot-condition-monitoring-software .flowIcon {
width: 48px;
height: 48px;
border-radius: 13px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
color: #111;
margin-bottom: 12px;
}
.new-theme-design.iot-condition-monitoring-software .flowCard p {
color: var(--muted);
font-size: 11.5px;
margin-top: 7px;
}
.new-theme-design.iot-condition-monitoring-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.new-theme-design.iot-condition-monitoring-software .feature.reverse .visual {
order: -1;
}
.new-theme-design.iot-condition-monitoring-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.iot-condition-monitoring-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.iot-condition-monitoring-software .fi {
display: flex;
gap: 9px;
font-size: 15px;
}
.new-theme-design.iot-condition-monitoring-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .visual {
min-height: 330px;
border-radius: 20px;
background: linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #cbeaf9;
box-shadow: var(--shadow);
padding: 18px;
position: relative;
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .monitorBoard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard strong {
display: block;
font-size: 14px;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard span {
font-size: 9px;
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .statusLine {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 8px;
border-bottom: 1px solid var(--line);
font-size: 9px;
}
.new-theme-design.iot-condition-monitoring-software .statusLine:last-child {
border-bottom: 0;
}
.new-theme-design.iot-condition-monitoring-software .statusGood {
color: var(--green);
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .statusWarn {
color: #9a6a00;
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .statusBad {
color: var(--danger);
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .triggerFlow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 8px;
align-items: center;
margin-top: 22px;
}
.new-theme-design.iot-condition-monitoring-software .step {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
text-align: center;
font-size: 10px;
font-weight: 800;
}
.new-theme-design.iot-condition-monitoring-software .arrow {
font-weight: 900;
color: var(--brand);
}
.new-theme-design.iot-condition-monitoring-software .workBox {
margin-top: 14px;
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
font-size: 10px;
}
.new-theme-design.iot-condition-monitoring-software .workBox strong {
display: block;
}
.new-theme-design.iot-condition-monitoring-software .workBox small {
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .aiGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.iot-condition-monitoring-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 20px;
}
.new-theme-design.iot-condition-monitoring-software .prompt {
background: #1b1b1b;
border: 1px solid #303030;
border-radius: 11px;
padding: 12px 13px;
margin-top: 9px;
font-size: 12px;
}
.new-theme-design.iot-condition-monitoring-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 20px;
}
.new-theme-design.iot-condition-monitoring-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px;
}
.new-theme-design.iot-condition-monitoring-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
}
.new-theme-design.iot-condition-monitoring-software .aiMini span {
font-size: 11px;
color: #cfcfcf;
}
.new-theme-design.iot-condition-monitoring-software .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.iot-condition-monitoring-software .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.iot-condition-monitoring-software .cta h3 {
font-size: 19px;
}
.new-theme-design.iot-condition-monitoring-software .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.iot-condition-monitoring-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.new-theme-design.iot-condition-monitoring-software .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.iot-condition-monitoring-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.iot-condition-monitoring-software .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.new-theme-design.iot-condition-monitoring-software .integration {
height: 70px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
}
.new-theme-design.iot-condition-monitoring-software .rating {
padding: 29px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.iot-condition-monitoring-software .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.iot-condition-monitoring-software .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.new-theme-design.iot-condition-monitoring-software .stars {
color: var(--yellow);
letter-spacing: 2px;
}
.new-theme-design.iot-condition-monitoring-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.iot-condition-monitoring-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.iot-condition-monitoring-software .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.iot-condition-monitoring-software .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.new-theme-design.iot-condition-monitoring-software .faq {
max-width: 900px;
}
.new-theme-design.iot-condition-monitoring-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.iot-condition-monitoring-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.iot-condition-monitoring-software .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
}
.new-theme-design.iot-condition-monitoring-software .final {
background: linear-gradient(135deg, var(--black), #202020);
border-top: 5px solid var(--yellow);
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.iot-condition-monitoring-software .final h2 {
color: #fff;
}
.new-theme-design.iot-condition-monitoring-software .final p {
color: #ddd;
margin-top: 12px;
max-width: 700px;
}
.new-theme-design.iot-condition-monitoring-software .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.new-theme-design.iot-condition-monitoring-software .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.new-theme-design.iot-condition-monitoring-software .heroGrid,
.new-theme-design.iot-condition-monitoring-software .feature,
.new-theme-design.iot-condition-monitoring-software .aiGrid,
.new-theme-design.iot-condition-monitoring-software .final {
grid-template-columns: 1fr;
}
.new-theme-design.iot-condition-monitoring-software .feature.reverse .visual {
order: 0;
}
.new-theme-design.iot-condition-monitoring-software .iotStage {
margin: auto;
}
.new-theme-design.iot-condition-monitoring-software .outcomes,
.new-theme-design.iot-condition-monitoring-software .useCases {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.iot-condition-monitoring-software .flowGrid {
grid-template-columns: 1fr 1fr;
}
.new-theme-design.iot-condition-monitoring-software .logos {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.iot-condition-monitoring-software .integrations {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.iot-condition-monitoring-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.new-theme-design.iot-condition-monitoring-software .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.new-theme-design.iot-condition-monitoring-software .hero {
padding: 54px 0;
}
.new-theme-design.iot-condition-monitoring-software .iotStage {
min-height: 430px;
max-width: 360px;
}
.new-theme-design.iot-condition-monitoring-software .tech {
width: 215px;
height: 330px;
top: 65px;
}
.new-theme-design.iot-condition-monitoring-software .sensorPhone {
width: 174px;
right: 0;
}
.new-theme-design.iot-condition-monitoring-software .phoneScreen {
min-height: 355px;
}
.new-theme-design.iot-condition-monitoring-software .gatewayCard {
width: 150px;
left: 0;
bottom: 8px;
}
.new-theme-design.iot-condition-monitoring-software .fl,
.new-theme-design.iot-condition-monitoring-software .outcomes,
.new-theme-design.iot-condition-monitoring-software .useCases,
.new-theme-design.iot-condition-monitoring-software .flowGrid,
.new-theme-design.iot-condition-monitoring-software .logos,
.new-theme-design.iot-condition-monitoring-software .integrations,
.new-theme-design.iot-condition-monitoring-software .aiMini,
.new-theme-design.iot-condition-monitoring-software .ratingGrid {
grid-template-columns: 1fr;
}
.new-theme-design.iot-condition-monitoring-software .cta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.iot-condition-monitoring-software .triggerFlow {
grid-template-columns: 1fr;
}
.new-theme-design.iot-condition-monitoring-software .arrow {
transform: rotate(90deg);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.new-theme-design.iot-condition-monitoring-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 13px;
}
.new-theme-design.iot-condition-monitoring-software .heroPills span {
display: inline-flex;
padding: 6px 9px;
border-radius: 999px;
border: 1px solid #c8e8f7;
background: rgba(255, 255, 255, 0.78);
color: var(--navy);
font-size: 10px;
font-weight: 800;
box-shadow: 0 5px 14px rgba(6, 59, 92, 0.05);
}
.new-theme-design.iot-condition-monitoring-software .hero {
background:
radial-gradient(circle at 72% 20%,
rgba(0, 168, 248, 0.24),
transparent 23%),
radial-gradient(circle at 92% 58%,
rgba(255, 201, 40, 0.18),
transparent 22%),
radial-gradient(circle at 62% 72%,
rgba(17, 138, 97, 0.11),
transparent 23%),
linear-gradient(180deg, #fff, #ecf8ff) !important;
}
.new-theme-design.iot-condition-monitoring-software .iotStage:before {
content: "";
position: absolute;
inset: 40px 0 30px 60px;
border-radius: 34px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(to bottom,
transparent,
#000 16%,
#000 82%,
transparent);
z-index: 0;
}
.new-theme-design.iot-condition-monitoring-software .iotStage:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
left: 45%;
top: 35%;
background: var(--brand);
box-shadow:
72px -65px 0 rgba(0, 168, 248, 0.55),
126px 28px 0 rgba(255, 201, 40, 0.8),
-76px 60px 0 rgba(17, 138, 97, 0.5),
98px 142px 0 rgba(0, 168, 248, 0.4);
animation: networkPulse 2.8s ease-in-out infinite;
z-index: 2;
}
@keyframes networkPulse {
50% {
filter: drop-shadow(0 0 9px rgba(0, 168, 248, 0.6));
transform: scale(1.12);
}
}
.new-theme-design.iot-condition-monitoring-software .tech {
width: 325px !important;
height: 478px !important;
left: 41% !important;
top: 32px !important;
filter: drop-shadow(0 24px 28px rgba(0, 48, 79, 0.22)) !important;
}
.new-theme-design.iot-condition-monitoring-software .halo {
background:
radial-gradient(circle at 50% 45%,
rgba(255, 255, 255, 0.8) 0 16%,
transparent 17%),
radial-gradient(circle,
rgba(0, 168, 248, 0.24),
rgba(0, 168, 248, 0.09) 47%,
transparent 71%) !important;
}
.new-theme-design.iot-condition-monitoring-software .sensorPhone {
background: linear-gradient(145deg, #07111d, #172a3a) !important;
border: 1px solid #344b5f !important;
box-shadow:
0 26px 58px rgba(0, 62, 103, 0.28),
0 0 0 5px rgba(0, 168, 248, 0.04) !important;
}
.new-theme-design.iot-condition-monitoring-software .phoneHead {
background: linear-gradient(135deg, #e7f8ff, #eef4ff 55%, #fff6d2) !important;
}
.new-theme-design.iot-condition-monitoring-software .assetBox {
box-shadow: 0 8px 22px rgba(6, 59, 92, 0.07);
}
.new-theme-design.iot-condition-monitoring-software .metric:nth-child(1) {
background: linear-gradient(145deg, #fff, #eaf8ff);
}
.new-theme-design.iot-condition-monitoring-software .metric:nth-child(2) {
background: linear-gradient(145deg, #fff, #fff7d6);
}
.new-theme-design.iot-condition-monitoring-software .metric:nth-child(3) {
background: linear-gradient(145deg, #fff, #eaf8f3);
}
.new-theme-design.iot-condition-monitoring-software .iotChart {
background:
linear-gradient(rgba(0, 168, 248, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.05) 1px, transparent 1px),
linear-gradient(180deg, #fff, #f4fbff) !important;
background-size: 20px 20px !important;
}
.new-theme-design.iot-condition-monitoring-software .alertBox {
background: linear-gradient(135deg, #0b1a27, #142c3d) !important;
border: 1px solid #24445a;
}
.new-theme-design.iot-condition-monitoring-software .gatewayCard {
background: linear-gradient(145deg, #08131d, #12293a) !important;
border-color: #25475d !important;
}
.new-theme-design.iot-condition-monitoring-software .sensorNode:nth-child(1) .sensorDot {
background: #04d596;
}
.new-theme-design.iot-condition-monitoring-software .sensorNode:nth-child(2) .sensorDot {
background: #ffc928;
}
.new-theme-design.iot-condition-monitoring-software .sensorNode:nth-child(3) .sensorDot {
background: #30b8ff;
}
.new-theme-design.iot-condition-monitoring-software .sensorNode:nth-child(4) .sensorDot {
background: #9a7bff;
}
.new-theme-design.iot-condition-monitoring-software .iotWireless {
position: absolute;
z-index: 3;
color: var(--brand);
font-weight: 900;
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff;
border: 1px solid #bde4f7;
box-shadow: 0 10px 22px rgba(6, 59, 92, 0.1);
animation: wirelessFloat 3.5s ease-in-out infinite;
}
@keyframes wirelessFloat {
50% {
transform: translateY(-7px) scale(1.05);
}
}
.new-theme-design.iot-condition-monitoring-software .outcome:nth-child(1) {
border-top-color: #00a8f8;
}
.new-theme-design.iot-condition-monitoring-software .outcome:nth-child(2) {
border-top-color: #ffc928;
}
.new-theme-design.iot-condition-monitoring-software .outcome:nth-child(3) {
border-top-color: #118a61;
}
.new-theme-design.iot-condition-monitoring-software .outcome:nth-child(4) {
border-top-color: #8a6ce8;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(1) .flowNum {
background: #00a8f8;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(2) .flowNum {
background: #118a61;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(3) .flowNum {
background: #8a6ce8;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(4) .flowNum {
background: #ff9828;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(5) .flowNum {
background: #00bfa5;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(1) .flowIcon {
background: #eaf8ff;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(2) .flowIcon {
background: #eaf8f3;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(3) .flowIcon {
background: #f0ecff;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(4) .flowIcon {
background: #fff0dd;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(5) .flowIcon {
background: #e4fbf7;
}
.new-theme-design.iot-condition-monitoring-software .iotCommercial {
background: linear-gradient(180deg, #fff, #f7fcff);
}
.new-theme-design.iot-condition-monitoring-software .conditionVisual {
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.18),
transparent 25%),
linear-gradient(145deg, #f4fbff, #fff) !important;
}
.new-theme-design.iot-condition-monitoring-software .conditionHeader {
display: flex;
justify-content: space-between;
align-items: center;
background: #0c2232;
color: #fff;
border-radius: 13px;
padding: 12px 14px;
}
.new-theme-design.iot-condition-monitoring-software .conditionHeader strong {
font-size: 12px;
}
.new-theme-design.iot-condition-monitoring-software .conditionHeader span {
background: #04d596;
color: #062a20;
border-radius: 999px;
padding: 4px 7px;
font-size: 7px;
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .conditionTimeline {
margin-top: 13px;
display: grid;
gap: 9px;
}
.new-theme-design.iot-condition-monitoring-software .timelineRow {
display: grid;
grid-template-columns: 13px 1fr auto;
gap: 10px;
align-items: center;
padding: 11px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 6px 16px rgba(6, 59, 92, 0.04);
}
.new-theme-design.iot-condition-monitoring-software .timelineDot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.new-theme-design.iot-condition-monitoring-software .timelineDot.good {
background: #16c98d;
box-shadow: 0 0 0 5px rgba(22, 201, 141, 0.1);
}
.new-theme-design.iot-condition-monitoring-software .timelineDot.warn {
background: #ffc928;
box-shadow: 0 0 0 5px rgba(255, 201, 40, 0.12);
}
.new-theme-design.iot-condition-monitoring-software .timelineDot.bad {
background: #e25757;
box-shadow: 0 0 0 5px rgba(226, 87, 87, 0.1);
}
.new-theme-design.iot-condition-monitoring-software .timelineRow strong {
display: block;
font-size: 10px;
}
.new-theme-design.iot-condition-monitoring-software .timelineRow small {
display: block;
font-size: 8px;
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .timelineState {
font-size: 7px;
font-weight: 900;
border-radius: 999px;
padding: 5px 7px;
}
.new-theme-design.iot-condition-monitoring-software .timelineState.normal {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.iot-condition-monitoring-software .timelineState.review {
background: var(--yellowsoft);
color: #7b5b00;
}
.new-theme-design.iot-condition-monitoring-software .timelineState.work {
background: #fff0f0;
color: var(--danger);
}
.new-theme-design.iot-condition-monitoring-software .conditionFooter {
margin-top: 13px;
padding: 12px 13px;
border-radius: 12px;
background: linear-gradient(135deg, #0b1b29, #123a51);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.new-theme-design.iot-condition-monitoring-software .conditionFooter strong {
display: block;
font-size: 9px;
}
.new-theme-design.iot-condition-monitoring-software .conditionFooter span {
display: block;
font-size: 7px;
color: #d2e2eb;
}
.new-theme-design.iot-condition-monitoring-software .conditionPulse {
background: var(--yellow);
color: #000;
border-radius: 999px;
padding: 6px 8px;
font-size: 7px;
font-weight: 900;
animation: woPulse 1.8s ease-in-out infinite;
}
@keyframes woPulse {
50% {
box-shadow: 0 0 0 7px rgba(255, 201, 40, 0.12);
}
}
.new-theme-design.iot-condition-monitoring-software .flowCard,
.new-theme-design.iot-condition-monitoring-software .outcome,
.new-theme-design.iot-condition-monitoring-software .integration,
.new-theme-design.iot-condition-monitoring-software .useCase,
.new-theme-design.iot-condition-monitoring-software .monitorCard {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:hover,
.new-theme-design.iot-condition-monitoring-software .outcome:hover,
.new-theme-design.iot-condition-monitoring-software .integration:hover,
.new-theme-design.iot-condition-monitoring-software .useCase:hover,
.new-theme-design.iot-condition-monitoring-software .monitorCard:hover {
transform: translateY(-4px);
box-shadow: 0 15px 28px rgba(6, 59, 92, 0.09);
}
.new-theme-design.iot-condition-monitoring-software .feature {
gap: 54px !important;
}
.new-theme-design.iot-condition-monitoring-software .visual {
min-height: 390px !important;
padding: 22px !important;
border-radius: 24px !important;
border: 1px solid #bfe4f5 !important;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.14),
transparent 24%),
radial-gradient(circle at 15% 85%,
rgba(0, 168, 248, 0.11),
transparent 24%),
linear-gradient(145deg, #ffffff, #eaf8ff) !important;
box-shadow: 0 22px 54px rgba(6, 59, 92, 0.13) !important;
}
.new-theme-design.iot-condition-monitoring-software .visual:before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.new-theme-design.iot-condition-monitoring-software .visual>* {
position: relative;
z-index: 2;
}
.new-theme-design.iot-condition-monitoring-software .flowCard {
min-height: 220px !important;
overflow: hidden;
box-shadow: 0 10px 26px rgba(6, 59, 92, 0.06);
}
.new-theme-design.iot-condition-monitoring-software .flowCard .flowIcon {
width: 58px !important;
height: 58px !important;
border-radius: 16px !important;
position: relative;
}
.new-theme-design.iot-condition-monitoring-software .flowCard .flowIcon:after {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
border: 2px dashed rgba(6, 59, 92, 0.2);
animation: flowSpin 8s linear infinite;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(1):before {
content: "";
position: absolute;
right: 14px;
top: 18px;
width: 42px;
height: 42px;
border-radius: 50%;
background:
radial-gradient(circle, #00a8f8 0 12%, transparent 13%),
radial-gradient(circle at 70% 20%, #00a8f8 0 8%, transparent 9%),
radial-gradient(circle at 25% 75%, #00a8f8 0 8%, transparent 9%);
opacity: 0.18;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(2):before {
content: "";
position: absolute;
right: 15px;
top: 22px;
width: 56px;
height: 36px;
background: linear-gradient(145deg,
transparent 46%,
#118a61 47% 52%,
transparent 53%);
opacity: 0.25;
transform: skewX(-16deg);
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(3):before {
content: "";
position: absolute;
right: 18px;
top: 22px;
width: 46px;
height: 46px;
border-radius: 50%;
border: 6px solid rgba(138, 108, 232, 0.18);
box-shadow: 0 0 0 7px rgba(138, 108, 232, 0.07);
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(4):before {
content: "!";
position: absolute;
right: 18px;
top: 20px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff1df;
color: #ff9828;
display: grid;
place-items: center;
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .flowCard:nth-child(5):before {
content: "✓";
position: absolute;
right: 18px;
top: 20px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #e4fbf7;
color: #00a98f;
display: grid;
place-items: center;
font-weight: 900;
}
@keyframes flowSpin {
to {
transform: rotate(360deg);
}
}
.new-theme-design.iot-condition-monitoring-software .monitorBoard {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard {
padding: 16px !important;
border-radius: 14px !important;
overflow: hidden;
position: relative;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard strong {
font-size: 21px !important;
color: var(--navy);
}
.new-theme-design.iot-condition-monitoring-software .monitorCard span {
font-size: 10px !important;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 65%;
background: linear-gradient(90deg, var(--brand), #69d0ff);
animation: metricFlow 3.4s ease-in-out infinite alternate;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard:nth-child(2):after {
background: linear-gradient(90deg, var(--yellow), #ff9e32);
width: 74%;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard:nth-child(3):after {
background: linear-gradient(90deg, var(--green), #51d7a6);
width: 52%;
}
.new-theme-design.iot-condition-monitoring-software .monitorCard:nth-child(4):after {
background: linear-gradient(90deg, #8a6ce8, #b79bff);
width: 84%;
}
@keyframes metricFlow {
from {
transform: scaleX(0.45);
transform-origin: left;
}
to {
transform: scaleX(1);
transform-origin: left;
}
}
.new-theme-design.iot-condition-monitoring-software .assetHealthGraphic {
margin-top: 15px;
background: #0c2333;
color: #fff;
border-radius: 17px;
padding: 15px;
display: grid;
grid-template-columns: 122px 1fr;
gap: 15px;
align-items: center;
border: 1px solid #19455e;
box-shadow: 0 16px 28px rgba(0, 45, 73, 0.18);
}
.new-theme-design.iot-condition-monitoring-software .healthRingLarge {
width: 112px;
height: 112px;
border-radius: 50%;
background: conic-gradient(#12cb88 0 84%, #183a4d 84% 100%);
display: grid;
place-items: center;
position: relative;
}
.new-theme-design.iot-condition-monitoring-software .healthRingLarge:after {
content: "";
position: absolute;
inset: 15px;
border-radius: 50%;
background: #0c2333;
}
.new-theme-design.iot-condition-monitoring-software .healthRingLarge div {
position: relative;
z-index: 2;
text-align: center;
}
.new-theme-design.iot-condition-monitoring-software .healthRingLarge strong {
display: block;
font-size: 26px;
color: #fff;
}
.new-theme-design.iot-condition-monitoring-software .healthRingLarge span {
display: block;
font-size: 8px;
color: #bfd8e5;
}
.new-theme-design.iot-condition-monitoring-software .assetSpark {
height: 104px;
position: relative;
}
.new-theme-design.iot-condition-monitoring-software .assetSpark svg {
width: 100%;
height: 100%;
}
.new-theme-design.iot-condition-monitoring-software .assetSpark .sparkLine {
fill: none;
stroke: #38c4ff;
stroke-width: 3;
stroke-linejoin: round;
stroke-linecap: round;
}
.new-theme-design.iot-condition-monitoring-software .assetSpark .sparkArea {
fill: rgba(56, 196, 255, 0.1);
}
.new-theme-design.iot-condition-monitoring-software .assetSpark .sparkThreshold {
stroke: #ff6767;
stroke-width: 1.5;
stroke-dasharray: 6 5;
}
.new-theme-design.iot-condition-monitoring-software .assetSpark .sparkDot {
fill: #fff;
stroke: #38c4ff;
stroke-width: 3;
}
.new-theme-design.iot-condition-monitoring-software .assetSparkLabel {
position: absolute;
left: 0;
top: 0;
font-size: 8px;
color: #bfd8e5;
}
.new-theme-design.iot-condition-monitoring-software .assetSparkValue {
position: absolute;
right: 0;
top: 0;
font-size: 9px;
color: #fff;
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .triggerFlow {
gap: 12px !important;
margin-top: 16px !important;
}
.new-theme-design.iot-condition-monitoring-software .step {
min-height: 82px;
display: grid;
place-items: center;
padding: 14px 10px !important;
border-radius: 15px !important;
box-shadow: 0 8px 20px rgba(6, 59, 92, 0.06);
}
.new-theme-design.iot-condition-monitoring-software .triggerFlow .step:nth-child(1) {
border-top: 4px solid #00a8f8;
}
.new-theme-design.iot-condition-monitoring-software .triggerFlow .step:nth-child(3) {
border-top: 4px solid #ffc928;
}
.new-theme-design.iot-condition-monitoring-software .triggerFlow .step:nth-child(5) {
border-top: 4px solid #118a61;
}
.new-theme-design.iot-condition-monitoring-software .triggerFlow .arrow {
font-size: 22px;
}
.new-theme-design.iot-condition-monitoring-software .workBox {
padding: 15px !important;
border-radius: 14px !important;
box-shadow: 0 8px 18px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .workBox:after {
content: "";
position: absolute;
left: -35%;
top: 0;
bottom: 0;
width: 25%;
background: linear-gradient(90deg,
transparent,
rgba(0, 168, 248, 0.08),
transparent);
animation: workSweep 4s ease-in-out infinite;
}
@keyframes workSweep {
0%,
45% {
left: -35%;
}
70%,
100% {
left: 115%;
}
}
.new-theme-design.iot-condition-monitoring-software .autoWorkProgress {
margin-top: 15px;
background: #0c2333;
border-radius: 14px;
color: #fff;
padding: 13px 14px;
}
.new-theme-design.iot-condition-monitoring-software .autoWorkProgressTop {
display: flex;
justify-content: space-between;
font-size: 9px;
font-weight: 800;
}
.new-theme-design.iot-condition-monitoring-software .autoWorkTrack {
height: 9px;
background: #17394d;
border-radius: 999px;
overflow: hidden;
margin-top: 8px;
}
.new-theme-design.iot-condition-monitoring-software .autoWorkFill {
height: 100%;
width: 78%;
border-radius: inherit;
background: linear-gradient(90deg, #00a8f8, #12cb88, #ffc928);
animation: autoWorkGrow 3s ease-in-out infinite alternate;
}
@keyframes autoWorkGrow {
from {
width: 43%;
}
to {
width: 92%;
}
}
.new-theme-design.iot-condition-monitoring-software .conditionVisual {
min-height: 410px !important;
}
.new-theme-design.iot-condition-monitoring-software .conditionTimeline {
gap: 12px !important;
}
.new-theme-design.iot-condition-monitoring-software .timelineRow {
padding: 14px !important;
}
.new-theme-design.iot-condition-monitoring-software .timelineRow strong {
font-size: 12px !important;
}
.new-theme-design.iot-condition-monitoring-software .timelineRow small {
font-size: 9px !important;
}
.new-theme-design.iot-condition-monitoring-software .conditionFooter {
padding: 15px !important;
}
.new-theme-design.iot-condition-monitoring-software .conditionPulse {
padding: 8px 10px !important;
}
.new-theme-design.iot-condition-monitoring-software .conditionMiniChart {
height: 95px;
margin-top: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 9px;
position: relative;
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .conditionMiniChart svg {
width: 100%;
height: 100%;
}
.new-theme-design.iot-condition-monitoring-software .conditionMiniChart .condLine {
fill: none;
stroke: #8a6ce8;
stroke-width: 3;
stroke-dasharray: 480;
stroke-dashoffset: 480;
animation: condDraw 3.4s ease forwards infinite;
}
.new-theme-design.iot-condition-monitoring-software .conditionMiniChart .condArea {
fill: rgba(138, 108, 232, 0.09);
}
.new-theme-design.iot-condition-monitoring-software .conditionMiniChart .condThreshold {
stroke: #e25757;
stroke-width: 1.5;
stroke-dasharray: 6 5;
}
@keyframes condDraw {
0% {
stroke-dashoffset: 480;
}
65%,
100% {
stroke-dashoffset: 0;
}
}
.new-theme-design.iot-condition-monitoring-software .integration {
min-height: 82px !important;
position: relative;
overflow: hidden;
transition: 0.22s ease;
}
.new-theme-design.iot-condition-monitoring-software .integration:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: var(--brand);
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(2):before {
background: #ffc928;
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(3):before {
background: #8a6ce8;
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(4):before {
background: #00bfa5;
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(5):before {
background: #ff8c42;
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(6):before {
background: #64b5f6;
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(7):before {
background: #7c67e8;
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(8):before {
background: #118a61;
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(9):before {
background: #e25757;
}
.new-theme-design.iot-condition-monitoring-software .integration:nth-child(10):before {
background: #00a8f8;
}
.new-theme-design.iot-condition-monitoring-software .integrationPulseRow {
margin-top: 22px;
background: #0d2535;
color: #fff;
border-radius: 16px;
padding: 13px 15px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.new-theme-design.iot-condition-monitoring-software .integrationPulseDot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: intPulse 1.7s ease-in-out infinite;
}
.new-theme-design.iot-condition-monitoring-software .integrationStream {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .integrationStream span {
display: block;
height: 100%;
width: 32%;
border-radius: inherit;
background: linear-gradient(90deg, #00a8f8, #12cb88, #ffc928);
animation: streamMove 2.6s linear infinite;
}
.new-theme-design.iot-condition-monitoring-software .integrationPulseRow strong {
font-size: 10px;
}
@keyframes intPulse {
50% {
box-shadow: 0 0 0 11px rgba(18, 203, 136, 0.03);
}
}
@keyframes streamMove {
from {
transform: translateX(-120%);
}
to {
transform: translateX(330%);
}
} @media (prefers-reduced-motion: reduce) {
.new-theme-design.iot-condition-monitoring-software .flowIcon:after,
.new-theme-design.iot-condition-monitoring-software .monitorCard:after,
.new-theme-design.iot-condition-monitoring-software .workBox:after,
.new-theme-design.iot-condition-monitoring-software .autoWorkFill,
.new-theme-design.iot-condition-monitoring-software .conditionMiniChart .condLine,
.new-theme-design.iot-condition-monitoring-software .integrationPulseDot,
.new-theme-design.iot-condition-monitoring-software .integrationStream span {
animation: none !important;
}
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-top: 28px;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard {
min-height: 145px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
padding: 16px;
text-align: center;
box-shadow: 0 8px 22px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
transition: 0.22s ease;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard:hover {
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(6, 59, 92, 0.1);
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeIcon {
width: 52px;
height: 52px;
border-radius: 15px;
margin: 0 auto 12px;
display: grid;
place-items: center;
font-weight: 900;
font-size: 10px;
color: #0b2232;
position: relative;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard:nth-child(1) .sensorTypeIcon {
background: #eaf8ff;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard:nth-child(2) .sensorTypeIcon {
background: #fff4d5;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard:nth-child(3) .sensorTypeIcon {
background: #eaf8f3;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard:nth-child(4) .sensorTypeIcon {
background: #f0ecff;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard:nth-child(5) .sensorTypeIcon {
background: #fff0ea;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard:nth-child(6) .sensorTypeIcon {
background: #eaf4ff;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeIcon:after {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
border: 2px dashed rgba(6, 59, 92, 0.22);
animation: sensorIconSpin 9s linear infinite;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard strong {
display: block;
font-size: 16px;
line-height: 20px;
}
.new-theme-design.iot-condition-monitoring-software .sensorTypeCard span {
display: block;
color: var(--muted);
font-size: 15px;
line-height: 1.45;
margin-top: 5px;
}
@keyframes sensorIconSpin {
to {
transform: rotate(360deg);
}
}
.new-theme-design.iot-condition-monitoring-software .connectivitySection {
background: linear-gradient(180deg, #f7fcff, #fff);
}
.new-theme-design.iot-condition-monitoring-software .connectivityMap {
position: relative;
min-height: 420px;
border-radius: 24px;
border: 1px solid #bfe4f5;
background:
radial-gradient(circle at 50% 50%,
rgba(0, 168, 248, 0.12),
transparent 28%),
linear-gradient(145deg, #f8fdff, #eaf8ff);
box-shadow: 0 20px 48px rgba(6, 59, 92, 0.1);
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .connectivityMap:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.04) 1px, transparent 1px);
background-size: 28px 28px;
}
.new-theme-design.iot-condition-monitoring-software .connectCenter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
background: #0c2333;
color: #fff;
border: 8px solid rgba(0, 168, 248, 0.1);
box-shadow: 0 18px 36px rgba(0, 45, 73, 0.22);
z-index: 3;
}
.new-theme-design.iot-condition-monitoring-software .connectCenter strong {
font-size: 15px;
}
.new-theme-design.iot-condition-monitoring-software .connectCenter span {
font-size: 9px;
color: #c9dfe9;
margin-top: 4px;
display: block;
}
.new-theme-design.iot-condition-monitoring-software .connectNode {
position: absolute;
width: 112px;
min-height: 72px;
border-radius: 14px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 10px 24px rgba(6, 59, 92, 0.08);
padding: 12px;
text-align: center;
z-index: 3;
animation: connectFloat 4s ease-in-out infinite;
}
.new-theme-design.iot-condition-monitoring-software .connectNode strong {
display: block;
font-size: 11px;
}
.new-theme-design.iot-condition-monitoring-software .connectNode span {
font-size: 8px;
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .node1 {
left: 7%;
top: 10%;
}
.new-theme-design.iot-condition-monitoring-software .node2 {
right: 7%;
top: 10%;
animation-delay: 0.5s;
}
.new-theme-design.iot-condition-monitoring-software .node3 {
left: 4%;
bottom: 11%;
animation-delay: 1s;
}
.new-theme-design.iot-condition-monitoring-software .node4 {
right: 5%;
bottom: 10%;
animation-delay: 1.4s;
}
.new-theme-design.iot-condition-monitoring-software .node5 {
left: 50%;
top: 4%;
transform: translateX(-50%);
animation-delay: 0.8s;
}
.new-theme-design.iot-condition-monitoring-software .node6 {
left: 50%;
bottom: 3%;
transform: translateX(-50%);
animation-delay: 1.7s;
}
.new-theme-design.iot-condition-monitoring-software .connectLine {
position: absolute;
left: 50%;
top: 50%;
width: 1px;
height: 1px;
z-index: 2;
}
.new-theme-design.iot-condition-monitoring-software .connectivityPulse {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 8px rgba(0, 168, 248, 0.08);
z-index: 4;
animation: pulseTravel 4s linear infinite;
}
@keyframes connectFloat {
50% {
transform: translateY(-5px);
}
}
@keyframes pulseTravel {
0% {
left: 50%;
top: 50%;
opacity: 0;
}
10% {
opacity: 1;
}
35% {
left: 13%;
top: 18%;
}
50% {
left: 50%;
top: 50%;
}
70% {
left: 84%;
top: 78%;
}
100% {
left: 50%;
top: 50%;
opacity: 0;
}
}
.new-theme-design.iot-condition-monitoring-software .compareGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 28px;
}
.new-theme-design.iot-condition-monitoring-software .compareCard {
border-radius: 18px;
border: 1px solid var(--line);
padding: 24px;
background: #fff;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.new-theme-design.iot-condition-monitoring-software .compareCard.condition {
background: linear-gradient(145deg, #f4fcff, #fff);
border-top: 4px solid var(--brand);
}
.new-theme-design.iot-condition-monitoring-software .compareCard.preventive {
border-top: 4px solid var(--yellow);
}
.new-theme-design.iot-condition-monitoring-software .compareCard h3 {
font-size: 21px;
margin-bottom: 14px;
}
.new-theme-design.iot-condition-monitoring-software .compareRow {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 12px;
}
.new-theme-design.iot-condition-monitoring-software .compareRow:last-child {
border-bottom: 0;
}
.new-theme-design.iot-condition-monitoring-software .compareIcon {
width: 24px;
height: 24px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .condition .compareIcon {
background: #eaf8ff;
color: var(--brand-dark);
}
.new-theme-design.iot-condition-monitoring-software .preventive .compareIcon {
background: var(--yellowsoft);
color: #7b5b00;
}
.new-theme-design.iot-condition-monitoring-software .hybridStrip {
margin-top: 18px;
border-radius: 16px;
padding: 16px 18px;
background: #0c2333;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.new-theme-design.iot-condition-monitoring-software .hybridStrip strong {
font-size: 14px;
}
.new-theme-design.iot-condition-monitoring-software .hybridStrip span {
font-size: 11px;
color: #cfe2ec;
}
.new-theme-design.iot-condition-monitoring-software .analyticsGraphic {
min-height: 410px;
border-radius: 24px;
background: #0b2333;
padding: 18px;
color: #fff;
border: 1px solid #21485d;
box-shadow: 0 22px 48px rgba(0, 45, 73, 0.2);
}
.new-theme-design.iot-condition-monitoring-software .analyticsHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.new-theme-design.iot-condition-monitoring-software .analyticsHeader strong {
font-size: 13px;
}
.new-theme-design.iot-condition-monitoring-software .analyticsHeader span {
background: #143d52;
color: #a9e9ff;
padding: 5px 7px;
border-radius: 999px;
font-size: 7px;
font-weight: 900;
}
.new-theme-design.iot-condition-monitoring-software .analyticsKpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.new-theme-design.iot-condition-monitoring-software .analyticsKpi {
background: #102f41;
border: 1px solid #1b4b62;
border-radius: 12px;
padding: 11px;
}
.new-theme-design.iot-condition-monitoring-software .analyticsKpi strong {
display: block;
font-size: 18px;
color: #fff;
}
.new-theme-design.iot-condition-monitoring-software .analyticsKpi span {
font-size: 7.5px;
color: #bfd9e5;
}
.new-theme-design.iot-condition-monitoring-software .analyticsChart {
height: 180px;
margin-top: 13px;
border-radius: 14px;
background:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
position: relative;
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .analyticsChart svg {
width: 100%;
height: 100%;
}
.new-theme-design.iot-condition-monitoring-software .analyticsArea {
fill: rgba(56, 196, 255, 0.1);
}
.new-theme-design.iot-condition-monitoring-software .analyticsLine {
fill: none;
stroke: #38c4ff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 620;
stroke-dashoffset: 620;
animation: analyticsDraw 4.2s ease infinite;
}
.new-theme-design.iot-condition-monitoring-software .analyticsSecond {
fill: none;
stroke: #ffc928;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 620;
stroke-dashoffset: 620;
animation: analyticsDraw 4.2s 0.8s ease infinite;
}
.new-theme-design.iot-condition-monitoring-software .analyticsLegend {
display: flex;
gap: 14px;
margin-top: 10px;
font-size: 8px;
color: #c9dee8;
}
.new-theme-design.iot-condition-monitoring-software .legendDot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
@keyframes analyticsDraw {
0% {
stroke-dashoffset: 620;
}
65%,
100% {
stroke-dashoffset: 0;
}
}
.new-theme-design.iot-condition-monitoring-software .proofSection {
background: linear-gradient(180deg, #fff, #f7fcff);
}
.new-theme-design.iot-condition-monitoring-software .proofGrid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 26px;
align-items: stretch;
}
.new-theme-design.iot-condition-monitoring-software .proofQuote {
border-radius: 22px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 16px 36px rgba(6, 59, 92, 0.08);
padding: 28px;
position: relative;
overflow: hidden;
}
.new-theme-design.iot-condition-monitoring-software .proofQuote:before {
content: "“";
position: absolute;
right: 18px;
top: -20px;
font-size: 120px;
line-height: 1;
color: rgba(0, 168, 248, 0.08);
font-family: Georgia, serif;
}
.new-theme-design.iot-condition-monitoring-software .proofQuote p {
font-size: 18px;
line-height: 1.6;
color: #223b4e;
}
.new-theme-design.iot-condition-monitoring-software .proofPerson {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.new-theme-design.iot-condition-monitoring-software .proofAvatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(145deg, #b8d9e8, #6a9db5);
}
.new-theme-design.iot-condition-monitoring-software .proofPerson strong {
display: block;
font-size: 12px;
}
.new-theme-design.iot-condition-monitoring-software .proofPerson span {
font-size: 10px;
color: var(--muted);
}
.new-theme-design.iot-condition-monitoring-software .proofStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.new-theme-design.iot-condition-monitoring-software .proofStat {
border-radius: 18px;
background: #0c2333;
color: #fff;
padding: 20px;
border: 1px solid #21495e;
}
.new-theme-design.iot-condition-monitoring-software .proofStat strong {
display: block;
font-size: 28px;
color: var(--yellow);
}
.new-theme-design.iot-condition-monitoring-software .proofStat span {
font-size: 10px;
color: #c9dee8;
}
.new-theme-design.iot-condition-monitoring-software .proofStat:nth-child(2) {
background: #11364a;
}
.new-theme-design.iot-condition-monitoring-software .proofStat:nth-child(3) {
background: #0e3142;
}
.new-theme-design.iot-condition-monitoring-software .proofStat:nth-child(4) {
background: #133c50;
}
.new-theme-design.iot-condition-monitoring-software .button.secondary:hover {
background: #323232 !important;
}
@media (max-width: 960px) {
.new-theme-design.iot-condition-monitoring-software .sensorTypeGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.iot-condition-monitoring-software .compareGrid,
.new-theme-design.iot-condition-monitoring-software .proofGrid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.new-theme-design.iot-condition-monitoring-software .sensorTypeGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.iot-condition-monitoring-software .connectivityMap {
min-height: 520px;
}
.new-theme-design.iot-condition-monitoring-software .connectNode {
width: 96px;
}
.new-theme-design.iot-condition-monitoring-software .node1 {
left: 2%;
}
.new-theme-design.iot-condition-monitoring-software .node2 {
right: 2%;
}
.new-theme-design.iot-condition-monitoring-software .node3 {
left: 2%;
}
.new-theme-design.iot-condition-monitoring-software .node4 {
right: 2%;
}
.new-theme-design.iot-condition-monitoring-software .hybridStrip {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.iot-condition-monitoring-software .analyticsKpis {
grid-template-columns: 1fr;
}
.new-theme-design.iot-condition-monitoring-software .proofStats {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.new-theme-design.iot-condition-monitoring-software .heroVisual {
display: none;
}
.new-theme-design.iot-condition-monitoring-software .visual {
order: 0;
}
.new-theme-design.iot-condition-monitoring-software .visual-content {
order: 1;
}
.new-theme-design.iot-condition-monitoring-software .step+p {
display: none;
}
.new-theme-design.iot-condition-monitoring-software .final {
padding-left: 24px;
padding-right: 24px;
}
.new-theme-design.iot-condition-monitoring-software .final .button {
width: 100%;
}
}  :root {
--brand: #00a8f8;
--brand2: #0076dd;
--navy: #063b5c;
--navy2: #0a4e75;
--sky: #eaf8ff;
--sky2: #f5fbff;
--ink: #11283a;
--line: #d9e8f1;
--green: #118a61;
--greenbg: #eaf8f3;
--yellow: #ffc928;
--yellowsoft: #fff7d6;
--black: #0b0b0b;
--black2: #171717;
--red: #e25757;
--purple: #7c67e8;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.12);
}
.new-theme-design.asset-management-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.asset-management-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.new-theme-design.asset-management-software .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.new-theme-design.asset-management-software .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.asset-management-software .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.asset-management-software .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.asset-management-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.asset-management-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.asset-management-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.new-theme-design.asset-management-software .soft {
background: var(--sky2);
}
.new-theme-design.asset-management-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.asset-management-software .dark h2,
.new-theme-design.asset-management-software .dark h3 {
color: #fff;
}
.new-theme-design.asset-management-software .dark p {
color: #d6d6d6;
}
.new-theme-design.asset-management-software .dark .ey {
background: var(--yellow);
color: #000;
} .new-theme-design.asset-management-software .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.asset-management-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
} .new-theme-design.asset-management-software .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.asset-management-software .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.new-theme-design.asset-management-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.new-theme-design.asset-management-software .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.new-theme-design.asset-management-software .heroVisual {
min-height: 525px;
position: relative;
}
.new-theme-design.asset-management-software .assetStage {
min-height: 525px;
position: relative;
max-width: 620px;
margin-left: auto;
}
.new-theme-design.asset-management-software .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 30px 50px;
border-radius: 34px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0;
}
.new-theme-design.asset-management-software .halo {
position: absolute;
left: 44%;
top: 64px;
width: 325px;
height: 325px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(0, 168, 248, 0.23),
rgba(0, 168, 248, 0.08) 48%,
transparent 72%);
z-index: 1;
animation: haloPulse 4s ease-in-out infinite;
}
.new-theme-design.asset-management-software .tech {
position: absolute;
left: 41%;
top: 42px;
width: 355px;
height: 455px;
transform: translateX(-50%);
z-index: 4;
filter: drop-shadow(0 20px 24px rgba(6, 59, 92, 0.2));
animation: techFloat 4.5s ease-in-out infinite;
}
.new-theme-design.asset-management-software .tech img {
width: 100%;
height: 100%;
object-fit: contain;
} .new-theme-design.asset-management-software .assetPhone {
position: absolute;
right: 0;
top: 6px;
width: 238px;
z-index: 6;
background: linear-gradient(145deg, #08131d, #162b3a);
border: 1px solid #304858;
border-radius: 32px;
padding: 8px;
box-shadow: 0 24px 52px rgba(6, 59, 92, 0.26);
animation: phoneFloat 4.8s ease-in-out infinite;
}
.new-theme-design.asset-management-software .phoneScreen {
background: #fff;
border-radius: 24px;
min-height: 467px;
overflow: hidden;
}
.new-theme-design.asset-management-software .phoneTop {
height: 24px;
background: #0c0c0c;
display: flex;
align-items: center;
justify-content: center;
}
.new-theme-design.asset-management-software .notch {
width: 68px;
height: 7px;
border-radius: 99px;
background: #333;
}
.new-theme-design.asset-management-software .phoneHead {
padding: 11px 12px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.new-theme-design.asset-management-software .phoneHead strong {
display: block;
font-size: 12px;
}
.new-theme-design.asset-management-software .phoneHead small {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.asset-management-software .assetMini {
margin: 10px;
padding: 10px;
border: 1px solid var(--line);
border-radius: 11px;
}
.new-theme-design.asset-management-software .assetMiniTop {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 7px;
align-items: center;
}
.new-theme-design.asset-management-software .machine {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(145deg, #d8e5eb, #7893a1);
position: relative;
}
.new-theme-design.asset-management-software .machine:after {
content: "";
position: absolute;
right: 4px;
top: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px var(--greenbg);
animation: pulse 2s infinite;
}
.new-theme-design.asset-management-software .assetMiniTop strong {
font-size: 9px;
}
.new-theme-design.asset-management-software .assetMiniTop small {
display: block;
font-size: 6px;
color: var(--muted);
}
.new-theme-design.asset-management-software .healthChip {
font-size: 6px;
font-weight: 900;
background: var(--greenbg);
color: var(--green);
padding: 4px 5px;
border-radius: 999px;
}
.new-theme-design.asset-management-software .healthSplit {
display: grid;
grid-template-columns: 86px 1fr;
gap: 8px;
align-items: center;
margin-top: 10px;
}
.new-theme-design.asset-management-software .healthRing {
width: 82px;
height: 82px;
border-radius: 50%;
background: conic-gradient(var(--green) 0 86%, #e8eef2 86%);
display: grid;
place-items: center;
position: relative;
}
.new-theme-design.asset-management-software .healthRing:after {
content: "";
position: absolute;
inset: 13px;
background: #fff;
border-radius: 50%;
}
.new-theme-design.asset-management-software .healthValue {
position: relative;
z-index: 2;
font-size: 18px;
font-weight: 900;
color: var(--navy);
text-align: center;
}
.new-theme-design.asset-management-software .healthValue span {
display: block;
font-size: 6px;
color: var(--muted);
}
.new-theme-design.asset-management-software .healthStats {
display: grid;
gap: 5px;
}
.new-theme-design.asset-management-software .healthStat {
padding: 6px;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--sky2);
}
.new-theme-design.asset-management-software .healthStat strong {
display: block;
font-size: 8.5px;
}
.new-theme-design.asset-management-software .healthStat span {
font-size: 5.7px;
color: var(--muted);
}
.new-theme-design.asset-management-software .assetTrend {
margin: 9px 10px 0;
height: 105px;
border: 1px solid var(--line);
border-radius: 9px;
background: linear-gradient(180deg, #fff, #f7fcff);
position: relative;
overflow: hidden;
}
.new-theme-design.asset-management-software .assetTrendTitle {
position: absolute;
left: 7px;
top: 6px;
font-size: 7px;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.asset-management-software .assetTrend svg {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
width: calc(100% - 16px);
height: 70px;
}
.new-theme-design.asset-management-software .assetTrendArea {
fill: rgba(0, 168, 248, 0.1);
}
.new-theme-design.asset-management-software .assetTrendLine {
fill: none;
stroke: var(--brand);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-theme-design.asset-management-software .assetTrendDot {
fill: #fff;
stroke: var(--brand);
stroke-width: 3;
}
.new-theme-design.asset-management-software .aiInsight {
margin: 9px 10px 11px;
padding: 9px;
background: #0d2231;
color: #fff;
border-radius: 9px;
}
.new-theme-design.asset-management-software .aiInsight strong {
display: block;
color: var(--yellow);
font-size: 8px;
}
.new-theme-design.asset-management-software .aiInsight span {
font-size: 6.5px;
color: #d3e2ea;
} .new-theme-design.asset-management-software .lifecycleCard {
position: absolute;
left: -6px;
bottom: 8px;
width: 205px;
z-index: 7;
border-radius: 18px;
background: #10151d;
color: #fff;
border: 1px solid #303b47;
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
overflow: hidden;
animation: cardFloat 5s ease-in-out infinite;
}
.new-theme-design.asset-management-software .lifecycleHead {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 12px;
border-bottom: 1px solid #303a46;
}
.new-theme-design.asset-management-software .lifecycleHead strong {
font-size: 9px;
}
.new-theme-design.asset-management-software .lifecycleHead span {
font-size: 5.5px;
background: var(--yellow);
color: #000;
font-weight: 900;
padding: 4px 5px;
border-radius: 999px;
}
.new-theme-design.asset-management-software .lifecycleBody {
padding: 11px;
}
.new-theme-design.asset-management-software .lifeRow {
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 7px;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #28313a;
font-size: 6.5px;
}
.new-theme-design.asset-management-software .lifeRow:last-child {
border-bottom: 0;
}
.new-theme-design.asset-management-software .lifeDot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.new-theme-design.asset-management-software .lifeRow:nth-child(1) .lifeDot {
background: #00a8f8;
}
.new-theme-design.asset-management-software .lifeRow:nth-child(2) .lifeDot {
background: #118a61;
}
.new-theme-design.asset-management-software .lifeRow:nth-child(3) .lifeDot {
background: #ffc928;
}
.new-theme-design.asset-management-software .lifeRow:nth-child(4) .lifeDot {
background: #7c67e8;
}
.new-theme-design.asset-management-software .lifeRow strong {
font-size: 6.5px;
}
.new-theme-design.asset-management-software .lifeVal {
color: #d5e6ef;
}
.new-theme-design.asset-management-software .assetTag {
position: absolute;
right: 5px;
bottom: 18px;
z-index: 8;
background: var(--yellow);
color: #000;
font-size: 8px;
font-weight: 900;
padding: 7px 9px;
border-radius: 10px;
animation: float 3.3s ease-in-out infinite;
}
@keyframes haloPulse {
50% {
transform: translateX(-50%) scale(1.05);
}
}
@keyframes techFloat {
50% {
transform: translateX(-50%) translateY(-5px);
}
}
@keyframes phoneFloat {
50% {
transform: translateY(-7px);
}
}
@keyframes cardFloat {
50% {
transform: translateY(6px);
}
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 8px rgba(17, 138, 97, 0.08);
}
}
@keyframes float {
50% {
transform: translateY(-6px);
}
} .new-theme-design.asset-management-software .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.asset-management-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.asset-management-software .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.new-theme-design.asset-management-software .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
} .new-theme-design.asset-management-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.asset-management-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.new-theme-design.asset-management-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.asset-management-software .outcome:nth-child(2):before {
background: var(--yellow);
}
.new-theme-design.asset-management-software .outcome:nth-child(3):before {
background: var(--green);
}
.new-theme-design.asset-management-software .outcome:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.asset-management-software .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.new-theme-design.asset-management-software .outcome span {
font-size: 15px;
color: var(--muted);
} .new-theme-design.asset-management-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.new-theme-design.asset-management-software .feature.reverse .visual {
order: -1;
}
.new-theme-design.asset-management-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.asset-management-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.asset-management-software .fi {
display: flex;
gap: 9px;
font-size: 15px;
}
.new-theme-design.asset-management-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.asset-management-software .visual {
min-height: 365px;
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.14),
transparent 24%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 20px;
position: relative;
overflow: hidden;
}
.new-theme-design.asset-management-software .visual:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.new-theme-design.asset-management-software .visual>* {
position: relative;
z-index: 2;
} .new-theme-design.asset-management-software .treeRoot {
padding: 12px 14px;
background: #0c2333;
color: #fff;
border-radius: 12px;
border-left: 5px solid var(--yellow);
font-size: 14px;
font-weight: 900;
}
.new-theme-design.asset-management-software .treeLevel {
margin-left: 26px;
margin-top: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.new-theme-design.asset-management-software .treeNode {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 11px;
font-size: 9px;
position: relative;
}
.new-theme-design.asset-management-software .treeNode strong {
display: block;
font-size: 10px;
}
.new-theme-design.asset-management-software .treeNode:before {
content: "";
position: absolute;
width: 15px;
height: 1px;
background: #bfd9e7;
left: -16px;
top: 50%;
}
.new-theme-design.asset-management-software .treeNode:nth-child(1) {
border-top: 3px solid var(--brand);
}
.new-theme-design.asset-management-software .treeNode:nth-child(2) {
border-top: 3px solid var(--green);
}
.new-theme-design.asset-management-software .treeNode:nth-child(3) {
border-top: 3px solid var(--yellow);
}
.new-theme-design.asset-management-software .treeNode:nth-child(4) {
border-top: 3px solid var(--purple);
} .new-theme-design.asset-management-software .mobileLookup {
display: grid;
grid-template-columns: 190px 1fr;
gap: 18px;
align-items: center;
}
.new-theme-design.asset-management-software .phoneMock {
background: #101010;
border-radius: 28px;
padding: 8px;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.16);
}
.new-theme-design.asset-management-software .phoneMockInner {
background: #fff;
border-radius: 21px;
min-height: 300px;
padding: 12px;
}
.new-theme-design.asset-management-software .qr {
width: 76px;
height: 76px;
margin: 10px auto;
background:
repeating-linear-gradient(0deg, #111 0 5px, #fff 5px 9px),
repeating-linear-gradient(90deg, transparent 0 6px, #111 6px 9px);
border: 8px solid #fff;
box-shadow: 0 0 0 1px var(--line);
position: relative;
overflow: hidden;
}
.new-theme-design.asset-management-software .qr:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 3px;
background: var(--yellow);
box-shadow: 0 0 10px var(--yellow);
animation: scan 2.2s ease-in-out infinite;
}
@keyframes scan {
0%,
100% {
top: 8%;
}
50% {
top: 88%;
}
}
.new-theme-design.asset-management-software .lookupRows {
display: grid;
gap: 7px;
margin-top: 10px;
}
.new-theme-design.asset-management-software .lookupRow {
padding: 7px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 7px;
}
.new-theme-design.asset-management-software .lookupSide {
display: grid;
gap: 9px;
}
.new-theme-design.asset-management-software .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
}
.new-theme-design.asset-management-software .lookupCard strong {
display: block;
font-size: 11px;
}
.new-theme-design.asset-management-software .lookupCard span {
font-size: 8px;
color: var(--muted);
} .new-theme-design.asset-management-software .lifecycleChart {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.new-theme-design.asset-management-software .costCard {
padding: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
}
.new-theme-design.asset-management-software .costCard strong {
display: block;
font-size: 20px;
color: var(--navy);
}
.new-theme-design.asset-management-software .costCard span {
font-size: 8px;
color: var(--muted);
}
.new-theme-design.asset-management-software .depreciation {
height: 155px;
margin-top: 12px;
background: #0d2535;
border-radius: 14px;
padding: 12px;
position: relative;
}
.new-theme-design.asset-management-software .depreciation svg {
width: 100%;
height: 100%;
}
.new-theme-design.asset-management-software .depLine {
fill: none;
stroke: var(--yellow);
stroke-width: 3;
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 3.5s ease infinite;
}
.new-theme-design.asset-management-software .depArea {
fill: rgba(255, 201, 40, 0.08);
}
@keyframes draw {
0% {
stroke-dashoffset: 500;
}
65%,
100% {
stroke-dashoffset: 0;
}
} .new-theme-design.asset-management-software .workCards {
display: grid;
gap: 10px;
}
.new-theme-design.asset-management-software .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.new-theme-design.asset-management-software .workCard strong {
display: block;
font-size: 10px;
}
.new-theme-design.asset-management-software .workCard small {
font-size: 8px;
color: var(--muted);
}
.new-theme-design.asset-management-software .status {
padding: 5px 7px;
border-radius: 999px;
font-size: 7px;
font-weight: 900;
}
.new-theme-design.asset-management-software .done {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.asset-management-software .due {
background: var(--yellowsoft);
color: #7b5b00;
}
.new-theme-design.asset-management-software .urgent {
background: #fff0f0;
color: var(--red);
}
.new-theme-design.asset-management-software .downtimeChart {
height: 95px;
margin-top: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 8px;
display: flex;
align-items: flex-end;
gap: 6px;
}
.new-theme-design.asset-management-software .downtimeChart span {
flex: 1;
border-radius: 5px 5px 2px 2px;
transform-origin: bottom;
animation: bars 1.4s ease both;
}
.new-theme-design.asset-management-software .downtimeChart span:nth-child(1) {
height: 82%;
background: #e25757;
}
.new-theme-design.asset-management-software .downtimeChart span:nth-child(2) {
height: 66%;
background: #ff9b55;
}
.new-theme-design.asset-management-software .downtimeChart span:nth-child(3) {
height: 52%;
background: #ffc928;
}
.new-theme-design.asset-management-software .downtimeChart span:nth-child(4) {
height: 42%;
background: #62ccff;
}
.new-theme-design.asset-management-software .downtimeChart span:nth-child(5) {
height: 28%;
background: #118a61;
}
@keyframes bars {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
} .new-theme-design.asset-management-software .aiGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.asset-management-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 20px;
}
.new-theme-design.asset-management-software .prompt {
background: #1b1b1b;
border: 1px solid #303030;
border-radius: 11px;
padding: 12px 13px;
margin-top: 9px;
font-size: 12px;
opacity: 0;
transform: translateX(8px);
animation: promptIn 0.4s ease forwards;
}
.new-theme-design.asset-management-software .prompt:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.asset-management-software .prompt:nth-child(3) {
animation-delay: 0.3s;
}
.new-theme-design.asset-management-software .prompt:nth-child(4) {
animation-delay: 0.45s;
}
.new-theme-design.asset-management-software .prompt:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes promptIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.asset-management-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 20px;
}
.new-theme-design.asset-management-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px;
}
.new-theme-design.asset-management-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 15px;
}
.new-theme-design.asset-management-software .aiMini span {
font-size: 14px;
color: #cfcfcf;
}
.new-theme-design .connectedGrid,
.new-theme-design .useCases {
margin-top: 15px
} .new-theme-design.asset-management-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.asset-management-software .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.new-theme-design.asset-management-software .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 16px;
margin-bottom: 5px;
}
.new-theme-design.asset-management-software .connectedCard span {
font-size: 15px;
color: #d0d0d0;
} .new-theme-design.asset-management-software .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.new-theme-design.asset-management-software .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 14px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.new-theme-design.asset-management-software .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.new-theme-design.asset-management-software .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.new-theme-design.asset-management-software .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.new-theme-design.asset-management-software .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.new-theme-design.asset-management-software .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.new-theme-design.asset-management-software .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
@keyframes stream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
} .new-theme-design.asset-management-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.asset-management-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.new-theme-design.asset-management-software .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.new-theme-design.asset-management-software .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.new-theme-design.asset-management-software .featureCard p {
font-size: 15px;
color: var(--muted);
margin: 7px 0 0;
} .new-theme-design.asset-management-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.new-theme-design.asset-management-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.new-theme-design.asset-management-software .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.new-theme-design.asset-management-software .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.new-theme-design.asset-management-software .review strong {
font-size: 12px;
}
.new-theme-design.asset-management-software .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.new-theme-design.asset-management-software .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.asset-management-software .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.asset-management-software .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
} .new-theme-design.asset-management-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.asset-management-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.asset-management-software .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.asset-management-software .useCase p {
color: var(--muted);
font-size: 15px;
margin-top: 7px;
} .new-theme-design.asset-management-software .faq {
max-width: 900px;
}
.new-theme-design.asset-management-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.asset-management-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.asset-management-software .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
} .new-theme-design.asset-management-software .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.asset-management-software .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.asset-management-software .cta h3 {
font-size: 19px;
}
.new-theme-design.asset-management-software .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.asset-management-software .cta p {
color: var(--muted);
font-size: 15px;
margin-top: 5px;
max-width: 650px;
}
.new-theme-design.asset-management-software .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.asset-management-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.asset-management-software .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.asset-management-software .final h2 {
color: #fff;
}
.new-theme-design.asset-management-software .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.new-theme-design.asset-management-software .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.new-theme-design.asset-management-software .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.new-theme-design.asset-management-software .heroGrid,
.new-theme-design.asset-management-software .feature,
.new-theme-design.asset-management-software .aiGrid,
.new-theme-design.asset-management-software .final {
grid-template-columns: 1fr;
}
.new-theme-design.asset-management-software .feature.reverse .visual {
order: 0;
}
.new-theme-design.asset-management-software .assetStage {
margin: auto;
}
.new-theme-design.asset-management-software .outcomes,
.new-theme-design.asset-management-software .featureGrid,
.new-theme-design.asset-management-software .connectedGrid,
.new-theme-design.asset-management-software .useCases {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.asset-management-software .logos {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.asset-management-software .integrations {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.asset-management-software .reviews {
grid-template-columns: 1fr;
}
.new-theme-design.asset-management-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.new-theme-design.asset-management-software .wrap {
width: calc(100% - 24px);
}
.new-theme-design.asset-management-software .hero {
padding: 54px 0;
}
.new-theme-design.asset-management-software .assetStage {
min-height: 430px;
max-width: 360px;
}
.new-theme-design.asset-management-software .tech {
width: 210px;
height: 330px;
top: 62px;
}
.new-theme-design.asset-management-software .assetPhone {
width: 172px;
}
.new-theme-design.asset-management-software .phoneScreen {
min-height: 350px;
}
.new-theme-design.asset-management-software .lifecycleCard {
width: 150px;
}
.new-theme-design.asset-management-software .fl,
.new-theme-design.asset-management-software .outcomes,
.new-theme-design.asset-management-software .featureGrid,
.new-theme-design.asset-management-software .connectedGrid,
.new-theme-design.asset-management-software .useCases,
.new-theme-design.asset-management-software .logos,
.new-theme-design.asset-management-software .integrations,
.new-theme-design.asset-management-software .aiMini,
.new-theme-design.asset-management-software .ratingGrid {
grid-template-columns: 1fr;
}
.new-theme-design.asset-management-software .mobileLookup {
grid-template-columns: 1fr;
}
.new-theme-design.asset-management-software .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
@media (max-width: 767px) {
.new-theme-design.asset-management-software .heroVisual {
display: none;
}
.new-theme-design.asset-management-software .visual {
order: 0;
}
.new-theme-design.asset-management-software .visual-content {
order: 1;
}
.new-theme-design.asset-management-software .final {
padding-left: 24px;
padding-right: 24px;
}
.new-theme-design.asset-management-software .ctaBtns .button {
width: 100%;
}
}  .new-theme-design.enterprise-cmms-reporting-power-bi .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .btn:focus-visible,
a:focus-visible,
summary:focus-visible {
outline: 3px solid rgba(0, 168, 248, 0.35);
outline-offset: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .soft {
background: var(--sky2);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dark h2,
.new-theme-design.enterprise-cmms-reporting-power-bi .dark h3 {
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dark p {
color: #d6d6d6;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dark .ey {
background: var(--yellow);
color: #000;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sectionHead {
max-width: 860px;
margin-bottom: 38px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .visuallyHidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .skipLink {
position: fixed;
left: 14px;
top: 12px;
z-index: 9999;
background: #fff;
color: #000;
padding: 10px 14px;
border-radius: 8px;
box-shadow: var(--shadow);
transform: translateY(-150%);
transition: 0.2s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .skipLink:focus {
transform: none;
} .new-theme-design.enterprise-cmms-reporting-power-bi .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 42px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroVisual {
min-height: 540px;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportStage {
min-height: 540px;
position: relative;
max-width: 650px;
margin-left: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportStage:before {
content: "";
position: absolute;
inset: 34px 0 20px 34px;
border-radius: 36px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportHalo {
position: absolute;
left: 53%;
top: 34px;
width: 420px;
height: 420px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(0, 168, 248, 0.22),
rgba(0, 168, 248, 0.08) 47%,
transparent 72%);
z-index: 1;
animation: haloPulse 4s ease-in-out infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mainDash {
position: absolute;
left: 14px;
right: 0;
top: 42px;
z-index: 3;
background: #fff;
border: 1px solid #bedfee;
border-radius: 24px;
box-shadow: 0 30px 70px rgba(6, 59, 92, 0.2);
overflow: hidden;
animation: dashFloat 5s ease-in-out infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashNav {
height: 45px;
background: #0c2333;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 9px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBrand i {
display: block;
width: 24px;
height: 24px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand), var(--brand2));
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBrand i:before,
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBrand i:after {
content: "";
position: absolute;
background: #fff;
border-radius: 99px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBrand i:before {
width: 12px;
height: 3px;
left: 6px;
top: 7px;
box-shadow:
0 5px 0 #fff,
0 10px 0 #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBrand i:after {
width: 3px;
height: 16px;
right: 5px;
top: 4px;
opacity: 0.55;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashControls {
display: flex;
gap: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashControl {
font-size: 6px;
padding: 5px 7px;
border: 1px solid #2c4b5f;
border-radius: 7px;
color: #d4e6f0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBody {
padding: 14px;
background: linear-gradient(180deg, #f8fcff, #eef8fd);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashTitleRow {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashTitleRow strong {
font-size: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashTitleRow span {
font-size: 6px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashKpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 9px;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: var(--brand);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi:nth-child(2):before {
background: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi:nth-child(3):before {
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi label {
display: block;
font-size: 5.8px;
color: var(--muted);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi strong {
display: block;
font-size: 16px;
color: var(--navy);
line-height: 1.2;
margin-top: 4px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi small {
font-size: 5.5px;
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroChartGrid {
display: grid;
grid-template-columns: 1.45fr 0.75fr;
gap: 8px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .panel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .panelTitle {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .panelTitle strong {
font-size: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .panelTitle span {
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .trendSvg {
width: 100%;
height: 115px;
margin-top: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .gridLine {
stroke: #e7f0f5;
stroke-width: 1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .trendArea {
fill: rgba(0, 168, 248, 0.11);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .trendLine {
fill: none;
stroke: var(--brand);
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 700;
stroke-dashoffset: 700;
animation: drawLine 3.2s ease forwards;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .trendPoint {
fill: #fff;
stroke: var(--brand);
stroke-width: 3;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .donutWrap {
display: grid;
place-items: center;
padding-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .donut {
width: 102px;
height: 102px;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .donut svg {
transform: rotate(-90deg);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .donutTrack {
fill: none;
stroke: #e6eef2;
stroke-width: 12;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .donutValue {
fill: none;
stroke: var(--green);
stroke-width: 12;
stroke-linecap: round;
stroke-dasharray: 251;
stroke-dashoffset: 28;
animation: donutIn 1.6s ease both;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .donutText {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
font-size: 18px;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .donutText span {
display: block;
font-size: 6px;
color: var(--muted);
font-weight: 700;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bottomGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .barPanel {
height: 107px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bars {
height: 70px;
display: flex;
align-items: flex-end;
gap: 6px;
padding-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bars span {
flex: 1;
border-radius: 4px 4px 2px 2px;
background: linear-gradient(180deg, var(--brand), var(--brand2));
transform-origin: bottom;
animation: barsIn 1.3s ease both;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bars span:nth-child(1) {
height: 56%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bars span:nth-child(2) {
height: 78%;
animation-delay: 0.08s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bars span:nth-child(3) {
height: 47%;
animation-delay: 0.16s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bars span:nth-child(4) {
height: 88%;
animation-delay: 0.24s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bars span:nth-child(5) {
height: 61%;
animation-delay: 0.32s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bars span:nth-child(6) {
height: 38%;
animation-delay: 0.4s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badActors {
display: grid;
gap: 6px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badRow strong {
font-size: 6.2px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badRow em {
font-style: normal;
font-size: 5.5px;
color: var(--red);
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badTrack {
grid-column: 1/-1;
height: 4px;
background: #eef2f4;
border-radius: 99px;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badTrack i {
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--red), var(--orange));
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badRow:nth-child(2) .badTrack i {
width: 68%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badRow:nth-child(3) .badTrack i {
width: 47%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badRow:nth-child(4) .badTrack i {
width: 31%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .liveChip {
position: absolute;
right: -4px;
top: 18px;
z-index: 5;
background: #0b0b0b;
color: #fff;
border: 1px solid #2d2d2d;
border-radius: 12px;
padding: 9px 11px;
font-size: 8px;
font-weight: 900;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
animation: chipFloat 3.6s ease-in-out infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .liveChip:before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #12cb88;
margin-right: 6px;
box-shadow: 0 0 0 5px rgba(18, 203, 136, 0.12);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .vedaFloat {
position: absolute;
left: -2px;
bottom: 7px;
z-index: 6;
width: 225px;
border-radius: 16px;
background: #10151d;
color: #fff;
border: 1px solid #303b47;
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
padding: 13px;
animation: cardFloat 5s ease-in-out infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .vedaFloat strong {
display: block;
color: var(--yellow);
font-size: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .vedaFloat p {
font-size: 6.8px;
color: #d5e6ef;
margin-top: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .vedaFloat span {
display: inline-flex;
margin-top: 8px;
background: #202a34;
border: 1px solid #34414d;
border-radius: 999px;
padding: 4px 6px;
font-size: 5.5px;
color: #d5e6ef;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sampleTag {
position: absolute;
right: 10px;
bottom: 12px;
z-index: 7;
background: var(--yellow);
color: #000;
font-size: 7px;
font-weight: 900;
padding: 6px 8px;
border-radius: 9px;
}
@keyframes haloPulse {
50% {
transform: translateX(-50%) scale(1.05);
}
}
@keyframes dashFloat {
50% {
transform: translateY(-6px);
}
}
@keyframes cardFloat {
50% {
transform: translateY(6px);
}
}
@keyframes chipFloat {
50% {
transform: translateY(-5px);
}
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
@keyframes donutIn {
from {
stroke-dashoffset: 251;
}
to {
stroke-dashoffset: 28;
}
}
@keyframes barsIn {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
} .new-theme-design.enterprise-cmms-reporting-power-bi .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
text-align: center;
padding: 6px;
} .new-theme-design.enterprise-cmms-reporting-power-bi .answerBox {
max-width: 950px;
margin: 0 auto 26px;
padding: 20px 22px;
border: 1px solid #bfe1f2;
border-left: 5px solid var(--brand);
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 28px rgba(6, 59, 92, 0.06);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .answerBox strong {
display: block;
color: var(--navy);
font-size: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .answerBox p {
color: var(--muted);
font-size: 15px;
margin-top: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcome:nth-child(2):before {
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcome:nth-child(3):before {
background: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcome:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcome span {
font-size: 15px;
color: var(--muted);
} .new-theme-design.enterprise-cmms-reporting-power-bi .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .feature.reverse .visual {
order: -1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .fi {
display: flex;
gap: 9px;
font-size: 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .visual {
min-height: 365px;
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.14),
transparent 24%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 20px;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .visual:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .visual>* {
position: relative;
z-index: 2;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .visualLabel {
font-size: 8px;
font-weight: 900;
color: var(--navy);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
} .new-theme-design.enterprise-cmms-reporting-power-bi .opsKpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsKpi {
padding: 11px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsKpi span {
display: block;
font-size: 6.5px;
color: var(--muted);
text-transform: uppercase;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsKpi strong {
font-size: 16px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsKpi em {
display: block;
font-style: normal;
font-size: 6px;
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsGrid {
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 10px;
margin-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 11px;
min-height: 218px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsPanelTitle {
display: flex;
justify-content: space-between;
font-size: 7px;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsPanelTitle span {
color: var(--muted);
font-weight: 700;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsLine {
height: 145px;
margin-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsLine svg {
width: 100%;
height: 100%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsArea {
fill: rgba(0, 168, 248, 0.09);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsPath {
fill: none;
stroke: var(--brand);
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 700;
stroke-dashoffset: 700;
animation: drawLine 3.4s ease forwards;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsDot {
fill: #fff;
stroke: var(--brand);
stroke-width: 3;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteRows {
display: grid;
gap: 10px;
margin-top: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteRow {
font-size: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteMeta {
display: flex;
justify-content: space-between;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteMeta span {
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteTrack {
height: 8px;
background: #eef3f6;
border-radius: 99px;
overflow: hidden;
margin-top: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteTrack i {
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--brand), var(--green));
transform-origin: left;
animation: growWide 1.4s ease both;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteRow:nth-child(1) i {
width: 92%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteRow:nth-child(2) i {
width: 84%;
animation-delay: 0.12s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteRow:nth-child(3) i {
width: 76%;
animation-delay: 0.24s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .siteRow:nth-child(4) i {
width: 69%;
animation-delay: 0.36s;
}
@keyframes growWide {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
} .new-theme-design.enterprise-cmms-reporting-power-bi .builder {
display: grid;
grid-template-columns: 132px 1fr;
gap: 10px;
min-height: 322px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .widgetShelf {
background: #0c2333;
color: #fff;
border-radius: 14px;
padding: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .widgetShelf strong {
display: block;
font-size: 8px;
color: var(--yellow);
margin-bottom: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .widget {
display: flex;
align-items: center;
gap: 7px;
padding: 8px;
border: 1px solid #28495d;
border-radius: 9px;
margin-bottom: 7px;
background: #123246;
font-size: 6.5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .widget i {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 6px;
background: #1c4a64;
color: #8ed9ff;
font-style: normal;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .widget.active {
border-color: var(--yellow);
box-shadow: 0 0 0 3px rgba(255, 201, 40, 0.08);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .builderCanvas {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 11px;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .builderTop {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .builderTop strong {
font-size: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .saveBtn {
font-size: 6px;
background: var(--yellow);
padding: 5px 7px;
border-radius: 7px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .filterRow {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .filterChip {
font-size: 5.7px;
padding: 5px 7px;
border: 1px solid var(--line);
border-radius: 7px;
color: var(--navy);
background: var(--sky2);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .canvasGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .canvasCard {
border: 1px dashed #afcedd;
border-radius: 10px;
padding: 9px;
min-height: 85px;
background: #fbfeff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .canvasCard.wide {
grid-column: 1/-1;
min-height: 112px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .canvasCard strong {
display: block;
font-size: 6.5px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tinyBars {
height: 50px;
display: flex;
align-items: flex-end;
gap: 5px;
margin-top: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tinyBars i {
flex: 1;
border-radius: 3px 3px 1px 1px;
background: var(--brand);
height: 40%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tinyBars i:nth-child(2) {
height: 70%;
background: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tinyBars i:nth-child(3) {
height: 55%;
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tinyBars i:nth-child(4) {
height: 82%;
background: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tinyBars i:nth-child(5) {
height: 64%;
background: var(--orange);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tinyDonut {
width: 55px;
height: 55px;
margin: 8px auto 0;
border-radius: 50%;
background: conic-gradient(var(--green) 0 73%,
var(--yellow) 73% 88%,
#e5eef3 88%);
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .tinyDonut:after {
content: "73%";
position: absolute;
inset: 9px;
border-radius: 50%;
background: #fff;
display: grid;
place-items: center;
font-size: 8px;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniTable {
margin-top: 8px;
display: grid;
gap: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniTable div {
display: grid;
grid-template-columns: 1fr auto;
gap: 7px;
padding-bottom: 4px;
border-bottom: 1px solid #edf2f5;
font-size: 5.8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniTable div:last-child {
border-bottom: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dragHint {
position: absolute;
right: 18px;
top: 84px;
background: #0b0b0b;
color: #fff;
border-radius: 9px;
padding: 7px 8px;
font-size: 5.8px;
font-weight: 800;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
animation: dragMove 3.6s ease-in-out infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dragHint:before {
content: "↕";
color: var(--yellow);
font-size: 10px;
margin-right: 5px;
}
@keyframes dragMove {
50% {
transform: translate(-18px, 22px);
}
} .new-theme-design.enterprise-cmms-reporting-power-bi .scheduleGrid {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .calendarCard,
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 13px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .calendarHead {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .calendarHead strong {
font-size: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .calendarHead span {
font-size: 6px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-top: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .day {
aspect-ratio: 1;
border-radius: 7px;
background: var(--sky2);
display: grid;
place-items: center;
font-size: 6px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .day.head {
background: transparent;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .day.active {
background: var(--yellow);
color: #000;
font-weight: 900;
box-shadow: 0 0 0 3px rgba(255, 201, 40, 0.16);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .day.mark {
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .day.mark:after {
content: "";
position: absolute;
bottom: 3px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--brand);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleList {
margin-top: 13px;
display: grid;
gap: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleItem {
display: grid;
grid-template-columns: 8px 1fr auto;
gap: 7px;
align-items: center;
padding: 7px;
border: 1px solid var(--line);
border-radius: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleItem i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 4px rgba(0, 168, 248, 0.08);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleItem:nth-child(2) i {
background: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleItem:nth-child(3) i {
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleItem strong {
display: block;
font-size: 6.5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleItem span {
font-size: 5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleItem em {
font-style: normal;
font-size: 5px;
color: var(--navy);
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryCard {
background: #0c2333;
color: #fff;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryCard:before {
content: "";
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(0, 168, 248, 0.13);
right: -70px;
top: -70px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryCard>* {
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryHead {
display: flex;
justify-content: space-between;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryHead strong {
font-size: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryHead span {
font-size: 5.5px;
color: #bbd1de;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mailPreview {
margin-top: 12px;
background: #fff;
color: var(--ink);
border-radius: 12px;
padding: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mailTop {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mailTop strong {
font-size: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mailTop span {
font-size: 5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mailLine {
height: 5px;
border-radius: 99px;
background: #e7eef2;
margin-top: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mailLine:nth-child(2) {
width: 86%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mailLine:nth-child(3) {
width: 62%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .attachment {
display: flex;
align-items: center;
gap: 8px;
margin-top: 11px;
padding: 8px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky2);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .attachment i {
display: grid;
place-items: center;
width: 29px;
height: 29px;
border-radius: 8px;
background: #fff0f0;
color: var(--red);
font-style: normal;
font-size: 7px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .attachment strong {
display: block;
font-size: 6.5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .attachment span {
font-size: 5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .formatChips {
display: flex;
gap: 6px;
margin-top: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .formatChips span {
font-size: 5.5px;
padding: 5px 7px;
border: 1px solid #315064;
border-radius: 7px;
color: #d4e6f0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryPulse {
margin-top: 13px;
display: flex;
align-items: center;
gap: 8px;
font-size: 6px;
color: #d4e6f0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .deliveryPulse i {
width: 9px;
height: 9px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 0 rgba(18, 203, 136, 0.35);
animation: pulseOut 2s infinite;
}
@keyframes pulseOut {
70% {
box-shadow: 0 0 0 9px rgba(18, 203, 136, 0);
}
} .new-theme-design.enterprise-cmms-reporting-power-bi .reliabilityTop {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relCard span {
display: block;
font-size: 6px;
color: var(--muted);
text-transform: uppercase;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relCard strong {
display: block;
font-size: 18px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relCard em {
font-style: normal;
font-size: 5.5px;
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoPanel {
margin-top: 10px;
background: #0c2333;
border-radius: 14px;
padding: 12px;
color: #fff;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoHead {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoHead strong {
font-size: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoHead span {
font-size: 5.5px;
color: #bbd1de;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoChart {
height: 125px;
display: flex;
align-items: flex-end;
gap: 10px;
padding: 16px 8px 0;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoChart:before,
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoChart:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: #24485e;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoChart:before {
top: 46px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoChart:after {
top: 84px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoBar {
flex: 1;
border-radius: 5px 5px 2px 2px;
background: linear-gradient(180deg, var(--yellow), var(--orange));
position: relative;
z-index: 2;
transform-origin: bottom;
animation: barsIn 1.3s ease both;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoBar:nth-child(1) {
height: 91%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoBar:nth-child(2) {
height: 71%;
animation-delay: 0.08s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoBar:nth-child(3) {
height: 53%;
animation-delay: 0.16s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoBar:nth-child(4) {
height: 38%;
animation-delay: 0.24s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoBar:nth-child(5) {
height: 27%;
animation-delay: 0.32s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoBar span {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
font-size: 5px;
color: #bbd1de;
white-space: nowrap;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoLine {
position: absolute;
left: 8px;
right: 8px;
top: 17px;
height: 88px;
z-index: 3;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoLine svg {
width: 100%;
height: 100%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .paretoPath {
fill: none;
stroke: #62ccff;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: drawLine 3s ease forwards;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetRows {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetRow {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetRow strong {
display: block;
font-size: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetRow span {
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetRow em {
display: inline-flex;
margin-top: 6px;
font-style: normal;
font-size: 5px;
background: #fff0f0;
color: var(--red);
padding: 4px 5px;
border-radius: 999px;
font-weight: 900;
} .new-theme-design.enterprise-cmms-reporting-power-bi .aiGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 20px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .promptBox>strong {
display: flex;
align-items: center;
gap: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .promptBox>strong:before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--yellow);
box-shadow: 0 0 0 6px rgba(255, 201, 40, 0.08);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .prompt {
background: #1b1b1b;
border: 1px solid #303030;
border-radius: 11px;
padding: 12px 13px;
margin-top: 9px;
font-size: 15px;
opacity: 0;
transform: translateX(8px);
animation: promptIn 0.4s ease forwards;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .prompt:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .prompt:nth-child(3) {
animation-delay: 0.3s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .prompt:nth-child(4) {
animation-delay: 0.45s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .prompt:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes promptIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiAnswer {
margin-top: 12px;
padding: 14px;
border-radius: 13px;
background: linear-gradient(135deg, #102735, #153f56);
border: 1px solid #2d566c;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiAnswer small {
display: block;
color: var(--yellow);
font-weight: 900;
font-size: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiAnswer strong {
display: block;
font-size: 16px;
margin-top: 4px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiAnswer p {
font-size: 15px !important;
margin-top: 5px !important;
color: #d6e6ef !important;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiAnswer span {
display: inline-flex;
margin-top: 9px;
padding: 8px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
font-size: 15px;
color: #d6e6ef;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 20px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiMini strong {
display: block;
color: var(--yellow);
font-size: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .aiMini span {
font-size: 14px;
color: #cfcfcf;
} .new-theme-design.enterprise-cmms-reporting-power-bi .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .connectedCard span {
font-size: 11px;
color: #d0d0d0;
} .new-theme-design.enterprise-cmms-reporting-power-bi .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 9px;
font-weight: 900;
margin-bottom: 13px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .featureCard p {
font-size: 15px;
color: var(--muted);
margin: 7px 0 0;
} .new-theme-design.enterprise-cmms-reporting-power-bi .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
text-align: center;
padding: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulseOut 2s infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: streamMove 2.6s linear infinite;
}
@keyframes streamMove {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
} .new-theme-design.enterprise-cmms-reporting-power-bi .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 9px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .useCase p {
color: var(--muted);
font-size: 15px;
margin-top: 7px;
} .new-theme-design.enterprise-cmms-reporting-power-bi .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .review strong {
font-size: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
} .new-theme-design.enterprise-cmms-reporting-power-bi .faq {
max-width: 900px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
} .new-theme-design.enterprise-cmms-reporting-power-bi .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .cta h3 {
font-size: 19px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .cta p {
color: var(--muted);
font-size: 15px;
margin-top: 5px;
max-width: 650px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .final h2 {
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reveal {
opacity: 1;
transform: none;
transition: 0.6s ease;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reveal.show {
animation: revealIn 0.6s ease both;
}
@keyframes revealIn {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: none;
}
}
@media (max-width: 960px) {
.new-theme-design.enterprise-cmms-reporting-power-bi .heroGrid,
.new-theme-design.enterprise-cmms-reporting-power-bi .feature,
.new-theme-design.enterprise-cmms-reporting-power-bi .aiGrid,
.new-theme-design.enterprise-cmms-reporting-power-bi .final {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .feature.reverse .visual {
order: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportStage {
margin: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .outcomes,
.new-theme-design.enterprise-cmms-reporting-power-bi .featureGrid,
.new-theme-design.enterprise-cmms-reporting-power-bi .connectedGrid,
.new-theme-design.enterprise-cmms-reporting-power-bi .useCases {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .logos {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .integrations {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reviews {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.new-theme-design.enterprise-cmms-reporting-power-bi .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hero {
padding: 54px 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroVisual,
.new-theme-design.enterprise-cmms-reporting-power-bi .reportStage {
min-height: 455px;
max-width: 360px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mainDash {
left: 0;
top: 42px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBody {
padding: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashNav {
height: 36px;
padding: 0 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashControl:nth-child(2) {
display: none;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashKpis {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroChartGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroChartGrid .panel:last-child {
display: none;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bottomGrid {
display: none;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .vedaFloat {
width: 175px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sampleTag {
display: none;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .fl,
.new-theme-design.enterprise-cmms-reporting-power-bi .outcomes,
.new-theme-design.enterprise-cmms-reporting-power-bi .featureGrid,
.new-theme-design.enterprise-cmms-reporting-power-bi .connectedGrid,
.new-theme-design.enterprise-cmms-reporting-power-bi .useCases,
.new-theme-design.enterprise-cmms-reporting-power-bi .logos,
.new-theme-design.enterprise-cmms-reporting-power-bi .integrations,
.new-theme-design.enterprise-cmms-reporting-power-bi .aiMini,
.new-theme-design.enterprise-cmms-reporting-power-bi .ratingGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsKpis {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .opsGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .builder {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .widgetShelf {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .widgetShelf strong {
grid-column: 1/-1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .widget {
margin: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .scheduleGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reliabilityTop {
grid-template-columns: 1fr 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relCard:nth-child(3) {
grid-column: 1/-1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetRows {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .cta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .stream {
grid-template-columns: auto 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .stream strong {
grid-column: 1/-1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .final {
padding: 32px 24px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
} .new-theme-design.enterprise-cmms-reporting-power-bi .reportFloat {
background: #111820;
border-color: #31424d;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportFloat strong {
font-size: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportFloat p {
font-size: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportFloat span {
background: rgba(255, 201, 40, 0.1);
color: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .countBadge {
position: absolute;
left: -4px;
bottom: 10px;
z-index: 8;
background: #101820;
color: #fff;
border: 1px solid #30424d;
border-radius: 17px;
padding: 14px 16px;
width: 180px;
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
animation: cardFloat 5s ease-in-out infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .countBadge small {
display: block;
font-size: 6px;
color: #bbd0dd;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .countBadge strong {
display: block;
font-size: 31px;
line-height: 1;
color: var(--yellow);
margin: 5px 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .countBadge span {
display: block;
font-size: 7px;
color: #d4e2e9;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiBadge {
position: absolute;
right: -8px;
top: 15px;
z-index: 8;
display: flex;
align-items: center;
gap: 7px;
background: #fff;
border: 1px solid #e5d17e;
border-radius: 12px;
padding: 8px 11px;
box-shadow: 0 12px 28px rgba(6, 59, 92, 0.15);
font-size: 8px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiIcon {
width: 17px;
height: 18px;
display: flex;
align-items: flex-end;
gap: 2px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiIcon i {
display: block;
width: 4px;
background: #f2c811;
border-radius: 2px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiIcon i:nth-child(1) {
height: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiIcon i:nth-child(2) {
height: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiIcon i:nth-child(3) {
height: 18px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportExplorer {
display: grid;
grid-template-columns: 190px 1fr;
border: 1px solid #c8e1ed;
border-radius: 21px;
background: #fff;
box-shadow: var(--shadow);
overflow: hidden;
min-height: 390px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportNav {
background: #f4f8fb;
border-right: 1px solid #dce8ee;
padding: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportNav strong {
display: block;
font-size: 10px;
color: var(--navy);
margin-bottom: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTabs {
display: grid;
gap: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTab {
width: 100%;
border: 1px solid #d8e4ea;
background: #fff;
border-radius: 9px;
padding: 8px 9px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: inherit;
font-size: 8px;
font-weight: 800;
color: #344b5b;
cursor: pointer;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTab span {
font-size: 7px;
padding: 2px 5px;
border-radius: 999px;
background: #eaf4fa;
color: #0f5ab7;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTab.active,
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTab:hover {
background: #0f5ab7;
color: #fff;
border-color: #0f5ab7;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTab.active span {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportMain {
padding: 16px;
background: linear-gradient(180deg, #fff, #f8fcfe);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTop {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
padding-bottom: 12px;
border-bottom: 1px solid #e0ebf0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTop strong {
display: block;
font-size: 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTop p {
font-size: 8px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTotal {
text-align: right;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTotal b {
display: block;
font-size: 27px;
color: #0f5ab7;
line-height: 1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTotal span {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTile {
min-height: 82px;
border: 1px solid #d8e2e8;
border-radius: 9px;
background: #fff;
padding: 9px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0 4px 10px rgba(20, 65, 92, 0.04);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTile i {
width: 25px;
height: 25px;
border-radius: 7px;
background: #e8f2ff;
color: #0f5ab7;
display: grid;
place-items: center;
font-style: normal;
font-size: 7px;
font-weight: 900;
margin-bottom: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTile strong {
font-size: 7px;
line-height: 1.3;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportNote {
margin-top: 10px;
padding: 8px 9px;
border-radius: 9px;
background: #eaf8ff;
color: #0a4e75;
font-size: 7px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biPortal {
border: 1px solid #c5d0d8;
border-radius: 20px;
background: #fff;
box-shadow: 0 20px 48px rgba(6, 59, 92, 0.16);
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTop {
padding: 9px 11px;
background: #f8fafb;
border-bottom: 1px solid #e0e6ea;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 8px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTitle {
background: #4169e1;
color: #fff;
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTitle strong {
font-size: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTitle span {
font-size: 6px;
background: #17319b;
border: 1px solid #fff;
border-radius: 7px;
padding: 5px 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTabs {
display: flex;
gap: 2px;
padding: 12px 11px 0;
overflow-x: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTab {
min-width: 100px;
border: 1px solid #2e4278;
border-bottom: 0;
border-radius: 8px 8px 0 0;
background: #4169e1;
color: #fff;
padding: 8px 7px;
font-family: inherit;
font-size: 7px;
font-weight: 800;
cursor: pointer;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTab.active {
background: #262321;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biBody {
background: #e9e9eb;
padding: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biKpis {
display: grid;
grid-template-columns: repeat(5, 1fr);
background: #fff;
border: 1px solid #c9cdd0;
border-radius: 9px;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biMetric {
padding: 8px;
border-right: 1px solid #e5e5e5;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biMetric:last-child {
border-right: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biMetric strong {
display: block;
font-size: 12px;
line-height: 1.1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biMetric span {
display: block;
font-size: 5.5px;
margin-top: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biGrid {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: 8px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biPanel {
background: #fff;
border: 1px solid #c9cdd0;
border-radius: 9px;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biPanelHead {
background: #707176;
color: #fff;
text-align: center;
padding: 5px;
font-size: 7px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biPanelBody {
padding: 8px;
min-height: 154px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biBars {
display: grid;
gap: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biBar {
display: grid;
grid-template-columns: 68px 1fr 34px;
gap: 6px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biBar label {
font-size: 5.5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTrack {
height: 8px;
background: #edf0f2;
border-radius: 3px;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biTrack i {
display: block;
height: 100%;
background: #a4da97;
border-radius: 3px;
transform-origin: left;
animation: barGrow 0.8s ease both;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biBar b {
font-size: 6.5px;
text-align: right;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biRows {
display: grid;
gap: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
padding: 6px;
border-radius: 6px;
background: #f1f1f1;
font-size: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biRow:nth-child(even) {
background: #e8e8e8;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biFoot {
font-size: 5.5px;
color: #6a7074;
margin-top: 7px;
padding-top: 7px;
border-top: 1px dashed #d7d7d7;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiUSP {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 20px;
padding: 9px 11px;
border-radius: 11px;
background: #fff7d6;
border: 1px solid #f3d765;
color: #5c4b00;
font-size: 10px;
font-weight: 850;
}
@keyframes barGrow {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalMock {
min-height: 370px;
border-radius: 22px;
background: #f7f8fa;
border: 1px solid #c7d5dd;
box-shadow: var(--shadow);
padding: 16px;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalBlue {
background: #4169e1;
color: #fff;
padding: 10px 12px;
border-radius: 9px 9px 0 0;
font-size: 11px;
font-weight: 800;
display: flex;
justify-content: space-between;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalBlue span {
font-size: 6px;
background: #17319b;
border: 1px solid #fff;
border-radius: 6px;
padding: 4px 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalTabRow {
display: flex;
gap: 2px;
padding: 11px 7px 0;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalTabRow span {
flex: 1;
background: #4169e1;
color: #fff;
border: 1px solid #273d7a;
border-radius: 7px 7px 0 0;
padding: 7px 4px;
text-align: center;
font-size: 5.8px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalTabRow span.active {
background: #262321;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalSummary {
display: grid;
grid-template-columns: repeat(5, 1fr);
background: #fff;
border: 1px solid #c9cdd0;
border-radius: 9px;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalSummary div {
padding: 8px;
border-right: 1px solid #e4e4e4;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalSummary div:last-child {
border-right: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalSummary strong {
display: block;
font-size: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalSummary span {
display: block;
font-size: 5.5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalPanels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalPanel {
background: #fff;
border: 1px solid #c8cdd1;
border-radius: 9px;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalPanelHead {
background: #707176;
color: #fff;
text-align: center;
padding: 5px;
font-size: 6.5px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalPanelBody {
padding: 8px;
min-height: 105px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniDonuts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniDonut {
text-align: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniDonut b {
display: block;
width: 52px;
height: 52px;
margin: auto;
border-radius: 50%;
background: conic-gradient(#1593f5 0 82%,
#263ab1 82% 91%,
#f4841e 91% 96%,
#d54191 96%);
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniDonut b:after {
content: "";
position: absolute;
inset: 12px;
background: #fff;
border-radius: 50%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniDonut span {
display: block;
font-size: 5.5px;
margin-top: 4px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .costBars {
height: 80px;
display: flex;
align-items: flex-end;
gap: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .costBars i {
flex: 1;
border-radius: 3px 3px 0 0;
background: #a4da97;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .costBars i:nth-child(1) {
height: 30%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .costBars i:nth-child(2) {
height: 48%;
background: #f4841e;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .costBars i:nth-child(3) {
height: 77%;
background: #242424;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .costBars i:nth-child(4) {
height: 43%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .costBars i:nth-child(5) {
height: 92%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .costLegend {
text-align: center;
font-size: 5px;
color: #666;
margin-top: 4px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetAvailability {
background: #fff;
border: 1px solid #c9cdd0;
border-radius: 9px;
overflow: hidden;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityHead {
background: #707176;
color: #fff;
text-align: center;
padding: 5px;
font-size: 6.5px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars {
height: 110px;
padding: 9px;
display: flex;
align-items: flex-end;
gap: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i {
flex: 1;
background: #a4da97;
border-radius: 2px 2px 0 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i:nth-child(1) {
height: 8%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i:nth-child(2) {
height: 12%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i:nth-child(3) {
height: 25%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i:nth-child(4) {
height: 55%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i:nth-child(5) {
height: 79%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i:nth-child(6) {
height: 90%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i:nth-child(7) {
height: 98%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityBars i:nth-child(8) {
height: 95%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard {
background: #151515;
border: 1px solid #333;
border-radius: 16px;
padding: 19px;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard:nth-child(2):before {
background: var(--brand);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard:nth-child(3):before {
background: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard:nth-child(5):before {
background: var(--orange);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard:nth-child(6):before {
background: #d54191;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCount {
display: inline-flex;
padding: 4px 7px;
border-radius: 999px;
background: #242424;
color: var(--yellow);
font-size: 14px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard h3 {
margin-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard p {
font-size: 15px !important;
color: #cfcfcf !important;
margin-top: 7px !important;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainTags {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainTags span {
font-size: 14px;
padding: 6px 14px;
border: 1px solid #3a3a3a;
border-radius: 999px;
color: #dadada;
background: #1d1d1d;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hubGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 24px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hubCard {
background: #0f55af;
color: #fff;
border: 2px solid #747474;
border-radius: 7px;
min-height: 130px;
padding: 18px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow:
7px 8px 0 #eaf5fd,
12px 13px 16px rgba(0, 0, 0, 0.15);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hubCard strong {
font-size: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hubCard span {
font-size: 8px;
color: #d9e9ff;
margin-top: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hubCard:nth-child(3) {
transform: translateY(20px);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .integration.powerbi {
background: #fff9db;
border-color: #e7ca37;
border-bottom-color: #f2c811;
color: #111;
font-size: 13px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .integration.powerbi small {
display: block;
font-size: 7px;
color: #6b5d15;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relatedLinks {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-top: 24px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relatedLinks a {
padding: 9px 18px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 15px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relatedLinks a:hover {
background: #00a8f8;
color: #fff;
border-color: #00a8f8;
}
@media (max-width: 960px) {
.new-theme-design.enterprise-cmms-reporting-power-bi .reportExplorer {
grid-template-columns: 170px 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTiles {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hubGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hubCard:nth-child(3) {
transform: none;
}
}
@media (max-width: 640px) {
.new-theme-design.enterprise-cmms-reporting-power-bi .countBadge {
width: 145px;
left: 0;
padding: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .countBadge strong {
font-size: 24px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiBadge {
right: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportExplorer {
display: block;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportNav {
border-right: 0;
border-bottom: 1px solid #dce8ee;
padding: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTabs {
display: flex;
overflow-x: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTab {
min-width: 112px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportMain {
padding: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTiles {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportTile {
min-height: 78px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biKpis {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biMetric:nth-child(5) {
grid-column: 1/-1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .biGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalTabRow {
overflow-x: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalTabRow span {
min-width: 82px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalSummary {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalSummary div:nth-child(5) {
grid-column: 1/-1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .portalPanels {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainGrid,
.new-theme-design.enterprise-cmms-reporting-power-bi .hubGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hubCard {
min-height: 100px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .relatedLinks {
justify-content: flex-start;
}
} .new-theme-design.enterprise-cmms-reporting-power-bi .reportLibraryFeature {
grid-template-columns: 0.9fr 1.1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportAtlas {
min-height: 430px;
border: 1px solid #bfe3f3;
border-radius: 0;
background:
radial-gradient(circle at 82% 12%,
rgba(255, 201, 40, 0.18),
transparent 22%),
linear-gradient(145deg, #fff, #f0faff);
box-shadow: 0 22px 56px rgba(6, 59, 92, 0.13);
padding: 17px;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportAtlas:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 78%);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportAtlas>* {
position: relative;
z-index: 2;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 3px 2px 12px;
border-bottom: 1px solid #dceaf1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasBrand {
display: flex;
align-items: center;
gap: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasBrandIcon {
width: 39px;
height: 39px;
border-radius: 12px;
background: var(--navy);
color: #fff;
display: grid;
place-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasBrandIcon svg {
width: 21px;
height: 21px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasBrand strong {
display: block;
font-size: 13px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasBrand small {
display: block;
font-size: 7px;
color: var(--muted);
margin-top: 1px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasTotal {
text-align: right;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasTotal b {
display: block;
font-size: 27px;
line-height: 0.9;
color: var(--brand2);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasTotal span {
font-size: 6px;
color: var(--muted);
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategories {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
padding: 12px 0 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategory {
border: 1px solid #d4e6ee;
border-radius: 11px;
background: #fff;
color: var(--navy);
padding: 7px 4px 5px;
display: grid;
place-items: center;
gap: 3px;
cursor: pointer;
transition: 0.2s;
font-family: inherit;
min-width: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategory:hover,
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategory.active {
transform: translateY(-2px);
border-color: var(--brand);
box-shadow: 0 8px 18px rgba(0, 168, 248, 0.14);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategory.active {
background: var(--navy);
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCatIcon {
width: 24px;
height: 24px;
border-radius: 8px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategory.active .atlasCatIcon {
background: rgba(255, 255, 255, 0.14);
color: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCatIcon svg {
width: 15px;
height: 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategory b {
font-size: 7px;
line-height: 1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategory.active b {
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasStage {
min-height: 290px;
position: relative;
margin-top: 2px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasOrbitRing {
position: absolute;
left: 50%;
top: 52%;
width: 68%;
height: 67%;
transform: translate(-50%, -50%);
border: 1px dashed rgba(0, 127, 197, 0.25);
border-radius: 50%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasOrbitRing:before,
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasOrbitRing:after {
content: "";
position: absolute;
border: 1px solid rgba(0, 168, 248, 0.08);
border-radius: 50%;
inset: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasOrbitRing:after {
inset: 37px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCore {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: 118px;
height: 118px;
border-radius: 50%;
display: grid;
place-items: center;
align-content: center;
text-align: center;
background: linear-gradient(145deg, var(--navy), var(--navy2));
color: #fff;
border: 7px solid #e5f6fd;
box-shadow: 0 18px 40px rgba(6, 59, 92, 0.22);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCore:after {
content: "";
position: absolute;
inset: -14px;
border: 1px solid rgba(0, 168, 248, 0.23);
border-radius: 50%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCore b {
font-size: 34px;
line-height: 1;
color: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCore span {
font-size: 7px;
font-weight: 850;
margin-top: 4px;
max-width: 85px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReports {
position: absolute;
inset: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport {
position: absolute;
width: 76px;
height: 76px;
border-radius: 19px;
background: #fff;
border: 1px solid #d4e6ee;
box-shadow: 0 9px 22px rgba(6, 59, 92, 0.09);
display: grid;
place-items: center;
align-content: center;
gap: 4px;
text-align: center;
transition: 0.25s;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(1) {
left: 10%;
top: 5%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(2) {
right: 11%;
top: 4%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(3) {
left: 1%;
top: 40%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(4) {
right: 1%;
top: 41%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(5) {
left: 13%;
bottom: 2%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(6) {
right: 13%;
bottom: 2%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReportIcon {
width: 35px;
height: 35px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--sky);
color: var(--brand2);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(2n) .atlasReportIcon {
background: var(--yellowsoft);
color: #8c6900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(3n) .atlasReportIcon {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReportIcon svg {
width: 20px;
height: 20px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport span {
font-size: 6.5px;
font-weight: 850;
color: #263d4d;
line-height: 1.1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasFooter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 9px;
border-top: 1px solid #dceaf1;
font-size: 6.5px;
color: var(--muted);
font-weight: 700;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasLive {
display: flex;
align-items: center;
gap: 5px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasLive i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 5px rgba(17, 138, 97, 0.09);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBI {
border: 1px solid #bfe3f3;
border-radius: 25px;
background: linear-gradient(145deg, #fff, #ecf9ff);
box-shadow: 0 22px 56px rgba(6, 59, 92, 0.14);
padding: 13px;
overflow: hidden;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBI:before {
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
right: -70px;
top: -90px;
background: rgba(255, 201, 40, 0.14);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBI>* {
position: relative;
z-index: 2;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIHeader {
min-height: 58px;
border-radius: 16px;
background: linear-gradient(135deg, var(--navy), #0a5278);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 13px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBILogo {
display: flex;
align-items: center;
gap: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBILogo strong {
display: block;
font-size: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBILogo small {
display: block;
font-size: 6px;
color: #cdeaf7;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark {
display: flex;
align-items: flex-end;
gap: 2px;
width: 23px;
height: 25px;
padding: 3px;
border-radius: 7px;
background: #fff7d6;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark i {
display: block;
width: 4px;
background: #f2c811;
border-radius: 2px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark i:nth-child(1) {
height: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark i:nth-child(2) {
height: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark i:nth-child(3) {
height: 18px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark.tiny {
width: 16px;
height: 17px;
padding: 2px;
border-radius: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark.tiny i {
width: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark.tiny i:nth-child(1) {
height: 4px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark.tiny i:nth-child(2) {
height: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiMark.tiny i:nth-child(3) {
height: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIFilters {
display: flex;
gap: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIFilters span {
display: flex;
align-items: center;
gap: 4px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 8px;
padding: 5px 7px;
background: rgba(255, 255, 255, 0.07);
font-size: 5.5px;
color: #e7f6fc;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIFilters svg {
width: 9px;
height: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBITabs {
display: flex;
gap: 6px;
padding: 11px 3px 8px;
overflow-x: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBITab {
border: 1px solid #cde5f0;
background: #fff;
color: var(--navy);
border-radius: 999px;
padding: 7px 10px;
white-space: nowrap;
font-family: inherit;
font-size: 6.5px;
font-weight: 850;
cursor: pointer;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBITab:hover,
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBITab.active {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBITab.active {
box-shadow: 0 6px 14px rgba(6, 59, 92, 0.16);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIBody {
background: rgba(255, 255, 255, 0.75);
border: 1px solid #d6eaf3;
border-radius: 17px;
padding: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIKpis {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric {
background: #fff;
border: 1px solid #d9eaf1;
border-radius: 11px;
padding: 9px 7px;
min-height: 65px;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric:after {
content: "";
position: absolute;
right: -10px;
bottom: -12px;
width: 35px;
height: 35px;
border-radius: 50%;
background: rgba(0, 168, 248, 0.07);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetricIcon {
width: 22px;
height: 22px;
border-radius: 7px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
margin-bottom: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric:nth-child(2) .brandMetricIcon {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric:nth-child(3) .brandMetricIcon {
background: var(--yellowsoft);
color: #816000;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric:nth-child(4) .brandMetricIcon {
background: #f0edff;
color: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric:nth-child(5) .brandMetricIcon {
background: #fff0ea;
color: var(--orange);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetricIcon svg {
width: 12px;
height: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric strong {
display: block;
font-size: 12px;
line-height: 1;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric span {
display: block;
font-size: 5.5px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIGrid {
display: grid;
grid-template-columns: 1.28fr 0.72fr;
gap: 8px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIPanel {
background: #fff;
border: 1px solid #d7e9f1;
border-radius: 12px;
padding: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIPanelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 7px;
border-bottom: 1px solid #e7f0f4;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIPanelHead strong {
font-size: 7px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIPanelHead span {
font-size: 5px;
color: var(--green);
background: var(--greenbg);
padding: 3px 5px;
border-radius: 99px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIChart {
display: grid;
gap: 7px;
padding-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBar {
display: grid;
grid-template-columns: 56px 1fr 29px;
gap: 5px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBar label {
font-size: 5.5px;
color: #455f70;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandTrack {
height: 8px;
background: #edf6fa;
border-radius: 99px;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandTrack i {
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--brand2), var(--brand));
transform-origin: left;
animation: barGrow 0.8s ease both;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBar:nth-child(2) .brandTrack i {
background: linear-gradient(90deg, var(--green), #35c08c);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBar:nth-child(3) .brandTrack i {
background: linear-gradient(90deg, #e6b500, var(--yellow));
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBar:nth-child(4) .brandTrack i {
background: linear-gradient(90deg, var(--purple), #a597f2);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBar b {
font-size: 5.5px;
text-align: right;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIRows {
display: grid;
gap: 5px;
padding-top: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIRow {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 6px;
align-items: center;
padding: 6px;
border: 1px solid #e3eef3;
border-radius: 8px;
background: #fafdff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandRowIcon {
width: 19px;
height: 19px;
border-radius: 6px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandRowIcon svg {
width: 10px;
height: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIRow span {
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIRow b {
font-size: 6px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIFoot {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding-top: 7px;
border-top: 1px dashed #d9e8ef;
font-size: 5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneHeader {
min-height: 58px;
border-radius: 15px;
background: linear-gradient(135deg, var(--navy), #0b5277);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 13px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTitle {
display: flex;
align-items: center;
gap: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneIcon {
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
color: var(--yellow);
display: grid;
place-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneIcon svg {
width: 18px;
height: 18px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTitle strong {
display: block;
font-size: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTitle small {
display: block;
font-size: 6px;
color: #cde8f4;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneFilter {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 8px;
padding: 5px 7px;
background: rgba(255, 255, 255, 0.07);
color: #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneFilter svg {
width: 9px;
height: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTabs {
display: flex;
gap: 6px;
margin: 10px 0 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTabs span {
font-size: 6px;
font-weight: 850;
color: var(--navy);
background: #fff;
border: 1px solid #d4e7ef;
border-radius: 999px;
padding: 5px 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTabs span.active {
background: var(--yellow);
border-color: var(--yellow);
color: #1f1b00;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woScene,
.new-theme-design.enterprise-cmms-reporting-power-bi .assetScene {
min-height: 390px;
border-radius: 24px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.16),
transparent 25%),
linear-gradient(145deg, #fff, #edf9ff);
border: 1px solid #bfe2f1;
box-shadow: var(--shadow);
padding: 14px;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woScene:before,
.new-theme-design.enterprise-cmms-reporting-power-bi .assetScene:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.03) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: linear-gradient(135deg, #000, transparent 78%);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woScene>*,
.new-theme-design.enterprise-cmms-reporting-power-bi .assetScene>* {
position: relative;
z-index: 2;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woMetrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woMetrics>div {
background: #fff;
border: 1px solid #d7e8f0;
border-radius: 11px;
padding: 8px;
min-height: 65px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .metricIcon {
width: 22px;
height: 22px;
border-radius: 7px;
display: grid;
place-items: center;
margin-bottom: 4px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .metricIcon svg {
width: 12px;
height: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .metricIcon.blue {
background: var(--sky);
color: var(--brand2);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .metricIcon.green {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .metricIcon.yellow {
background: var(--yellowsoft);
color: #876600;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .metricIcon.purple {
background: #f0edff;
color: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woMetrics strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woMetrics small {
display: block;
font-size: 5.5px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCharts {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 8px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woPanel {
background: #fff;
border: 1px solid #d7e8f0;
border-radius: 12px;
padding: 9px;
min-height: 139px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniHead {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
padding-bottom: 7px;
border-bottom: 1px solid #e5f0f5;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniHead strong {
font-size: 7px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .miniHead span {
font-size: 5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars {
display: grid;
gap: 7px;
padding-top: 9px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars>div {
display: grid;
grid-template-columns: 53px 1fr 28px;
gap: 5px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars label {
font-size: 5.5px;
color: #506877;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars span {
height: 8px;
background: #edf6fa;
border-radius: 99px;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars i {
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--brand2), var(--brand));
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars>div:nth-child(2) i {
background: linear-gradient(90deg, var(--green), #38c58f);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars>div:nth-child(3) i {
background: linear-gradient(90deg, #ddae00, var(--yellow));
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars>div:nth-child(4) i {
background: linear-gradient(90deg, var(--purple), #a89af5);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woStatusBars b {
font-size: 5.5px;
text-align: right;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woDonut {
display: grid;
grid-template-columns: 72px 1fr;
gap: 8px;
align-items: center;
padding-top: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woDonutRing {
width: 70px;
height: 70px;
border-radius: 50%;
background: conic-gradient(var(--brand) 0 82%,
var(--yellow) 82% 93%,
var(--orange) 93%);
display: grid;
place-items: center;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woDonutRing:after {
content: "";
position: absolute;
inset: 13px;
background: #fff;
border-radius: 50%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woDonutRing span {
position: relative;
z-index: 2;
font-size: 13px;
font-weight: 900;
color: var(--navy);
text-align: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woDonutRing small {
display: block;
font-size: 4.5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woLegend {
display: grid;
gap: 6px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woLegend span {
display: flex;
align-items: center;
gap: 5px;
font-size: 5.5px;
color: #506877;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woLegend i {
width: 7px;
height: 7px;
border-radius: 50%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .lgPlanned {
background: var(--brand);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .lgReactive {
background: var(--orange);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .lgRecurring {
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip div {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 9px;
padding: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip div.total {
background: var(--navy);
border-color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip strong {
display: block;
font-size: 8px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip span {
display: block;
font-size: 4.8px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip .total strong {
color: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip .total span {
color: #cde8f4;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetTabs span {
padding-left: 10px;
padding-right: 10px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetTop {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityGauge {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 13px;
padding: 10px;
display: grid;
place-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .gaugeRing {
width: 106px;
height: 106px;
border-radius: 50%;
background: conic-gradient(var(--brand) 0 88.43%, #e8f2f6 88.43%);
display: grid;
place-items: center;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .gaugeRing:after {
content: "";
position: absolute;
inset: 17px;
background: #fff;
border-radius: 50%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .gaugeRing>div {
position: relative;
z-index: 2;
text-align: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .gaugeRing strong {
display: block;
font-size: 18px;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .gaugeRing span {
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .availabilityGauge>small {
font-size: 5px;
color: var(--muted);
margin-top: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack>div {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 11px;
padding: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack span {
width: 22px;
height: 22px;
border-radius: 7px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
margin-bottom: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack>div:nth-child(2) span {
background: var(--yellowsoft);
color: #876600;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack>div:nth-child(3) span {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack>div:nth-child(4) span {
background: #f0edff;
color: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack svg {
width: 12px;
height: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack small {
display: block;
font-size: 5px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetChart {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 12px;
padding: 9px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetBars {
height: 91px;
display: flex;
align-items: flex-end;
gap: 7px;
padding: 10px 7px 0;
background: linear-gradient(180deg, transparent, rgba(0, 168, 248, 0.025));
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetBars i {
flex: 1;
border-radius: 5px 5px 2px 2px;
background: linear-gradient(180deg, var(--brand), var(--brand2));
animation: bars 1.2s ease both;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetBars i:nth-child(2n) {
background: linear-gradient(180deg, #42c998, var(--green));
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetAxis {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 7px;
padding: 4px 7px 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetAxis span {
text-align: center;
font-size: 4.5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 19px;
box-shadow: 0 8px 22px rgba(6, 59, 92, 0.05);
transition: 0.22s;
position: relative;
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(2):before,
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(6):before {
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(3):before,
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(7):before {
background: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(4):before,
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(8):before {
background: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:hover {
transform: translateY(-4px);
box-shadow: 0 15px 32px rgba(6, 59, 92, 0.1);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitIcon {
width: 44px;
height: 44px;
border-radius: 13px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
margin-bottom: 13px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(2) .toolkitIcon,
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(6) .toolkitIcon {
background: var(--yellowsoft);
color: #806000;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(3) .toolkitIcon,
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(7) .toolkitIcon {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(4) .toolkitIcon,
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard:nth-child(8) .toolkitIcon {
background: #f0edff;
color: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitIcon svg {
width: 23px;
height: 23px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard h3 {
font-size: 17px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitCard p {
font-size: 15px;
color: var(--muted);
margin-top: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspBand {
margin-top: 22px;
border-radius: 20px;
padding: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.16),
transparent 24%),
linear-gradient(135deg, var(--navy), #082e46);
color: #fff;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 22px;
align-items: center;
border-bottom: 4px solid var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspLead {
display: flex;
align-items: flex-start;
gap: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspSpark {
width: 42px;
height: 42px;
border-radius: 13px;
background: var(--yellow);
color: #000;
display: grid;
place-items: center;
font-size: 20px;
flex: 0 0 42px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspLead strong {
display: block;
font-size: 17px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspLead p {
font-size: 14px;
color: #d5e9f3;
margin-top: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
justify-content: flex-end;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspPills span {
font-size: 13px;
font-weight: 800;
padding: 7px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #eaf7fc;
}
@media (max-width: 960px) {
.new-theme-design.enterprise-cmms-reporting-power-bi .reportLibraryFeature {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportAtlas {
max-width: 680px;
margin: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIGrid,
.new-theme-design.enterprise-cmms-reporting-power-bi .woCharts {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspBand {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspPills {
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCategories {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportAtlas {
padding: 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasStage {
min-height: 315px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCore {
width: 92px;
height: 92px;
border-width: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasCore b {
font-size: 27px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport {
width: 68px;
height: 68px;
border-radius: 16px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReportIcon {
width: 30px;
height: 30px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(1) {
left: 3%;
top: 5%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(2) {
right: 3%;
top: 5%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(3) {
left: 0;
top: 41%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(4) {
right: 0;
top: 41%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(5) {
left: 5%;
bottom: 1%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasReport:nth-child(6) {
right: 5%;
bottom: 1%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .atlasFooter {
align-items: flex-start;
flex-direction: column;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIFilters {
display: none;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIKpis {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandMetric:nth-child(5) {
grid-column: 1/-1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBIGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .brandBITab {
min-width: 82px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woMetrics,
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCharts {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetTop {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpiStack {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .toolkitGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .uspBand {
padding: 18px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTabs {
overflow-x: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTabs span {
white-space: nowrap;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woScene,
.new-theme-design.enterprise-cmms-reporting-power-bi .assetScene {
padding: 11px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .feature {
gap: 34px;
}
}
@media (max-width: 767px) {
.new-theme-design.enterprise-cmms-reporting-power-bi .heroVisual {
display: none;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .visual {
order: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .visual-content {
order: 1;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .hero {
padding: 34px 0;
}
}  .new-theme-design.enterprise-cmms-reporting-power-bi .ico {
display: inline-block;
width: 26px;
height: 26px;
position: relative;
color: currentColor;
flex: 0 0 26px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.report:before {
content: "";
position: absolute;
inset: 3px 5px;
border: 2px solid currentColor;
border-radius: 4px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.report:after {
content: "";
position: absolute;
left: 9px;
top: 8px;
width: 9px;
height: 2px;
border-radius: 9px;
background: currentColor;
box-shadow:
0 5px 0 currentColor,
0 10px 0 currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.bars:before {
content: "";
position: absolute;
left: 4px;
bottom: 4px;
width: 4px;
height: 8px;
border-radius: 2px 2px 1px 1px;
background: currentColor;
box-shadow:
7px -5px 0 currentColor,
14px -11px 0 currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.asset:before {
content: "";
position: absolute;
left: 5px;
top: 4px;
width: 14px;
height: 7px;
border: 2px solid currentColor;
border-radius: 3px;
box-shadow: 0 8px 0 -2px transparent;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.asset:after {
content: "";
position: absolute;
left: 5px;
top: 15px;
width: 14px;
height: 7px;
border: 2px solid currentColor;
border-radius: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.building:before {
content: "";
position: absolute;
left: 5px;
top: 4px;
width: 16px;
height: 19px;
border: 2px solid currentColor;
border-radius: 3px 3px 1px 1px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.building:after {
content: "";
position: absolute;
left: 9px;
top: 8px;
width: 3px;
height: 3px;
background: currentColor;
box-shadow:
6px 0 0 currentColor,
0 6px 0 currentColor,
6px 6px 0 currentColor,
3px 11px 0 1px currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.rfid:before {
content: "";
position: absolute;
inset: 3px;
border: 2px solid currentColor;
border-color: currentColor transparent currentColor transparent;
border-radius: 50%;
transform: rotate(45deg);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.rfid:after {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow:
0 0 0 4px rgba(0, 0, 0, 0),
0 0 0 7px currentColor;
clip-path: circle(34% at 50% 50%);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.cart:before {
content: "";
position: absolute;
left: 5px;
top: 7px;
width: 15px;
height: 10px;
border: 2px solid currentColor;
border-top: 0;
transform: skewX(-10deg);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.cart:after {
content: "";
position: absolute;
left: 7px;
bottom: 3px;
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
box-shadow: 10px 0 0 currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.alert:before {
content: "";
position: absolute;
left: 3px;
top: 3px;
width: 20px;
height: 20px;
background: currentColor;
clip-path: polygon(50% 0, 100% 92%, 0 92%);
border-radius: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.alert:after {
content: "!";
position: absolute;
left: 0;
right: 0;
top: 4px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.box:before {
content: "";
position: absolute;
left: 4px;
top: 7px;
width: 18px;
height: 15px;
border: 2px solid currentColor;
border-radius: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.box:after {
content: "";
position: absolute;
left: 4px;
top: 7px;
width: 18px;
height: 6px;
border-bottom: 2px solid currentColor;
box-shadow: 8px -3px 0 -7px currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.clock:before {
content: "";
position: absolute;
inset: 3px;
border: 2px solid currentColor;
border-radius: 50%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.clock:after {
content: "";
position: absolute;
left: 12px;
top: 7px;
width: 2px;
height: 7px;
background: currentColor;
transform-origin: bottom;
border-radius: 2px;
box-shadow: 3px 6px 0 -0.5px currentColor;
transform: rotate(-10deg);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.filter:before {
content: "";
position: absolute;
left: 3px;
top: 4px;
width: 20px;
height: 19px;
background: currentColor;
clip-path: polygon(0 0, 100% 0, 62% 43%, 62% 79%, 39% 100%, 39% 43%);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.mail:before {
content: "";
position: absolute;
left: 3px;
top: 6px;
width: 20px;
height: 15px;
border: 2px solid currentColor;
border-radius: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.mail:after {
content: "";
position: absolute;
left: 6px;
top: 7px;
width: 12px;
height: 12px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.download:before {
content: "";
position: absolute;
left: 11px;
top: 3px;
width: 4px;
height: 12px;
background: currentColor;
border-radius: 2px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.download:after {
content: "";
position: absolute;
left: 5px;
top: 10px;
width: 16px;
height: 12px;
border-bottom: 2px solid currentColor;
clip-path: polygon(0 0,
38% 0,
38% 33%,
50% 54%,
62% 33%,
62% 0,
100% 0,
50% 72%);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.bell:before {
content: "";
position: absolute;
left: 6px;
top: 5px;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-radius: 10px 10px 5px 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.bell:after {
content: "";
position: absolute;
left: 10px;
top: 20px;
width: 6px;
height: 3px;
border-radius: 0 0 6px 6px;
background: currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.users:before {
content: "";
position: absolute;
left: 4px;
top: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
box-shadow: 10px 2px 0 -1px currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.users:after {
content: "";
position: absolute;
left: 2px;
bottom: 3px;
width: 14px;
height: 8px;
border: 2px solid currentColor;
border-bottom: 0;
border-radius: 12px 12px 0 0;
box-shadow: 8px 1px 0 -1px transparent;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.compare:before {
content: "";
position: absolute;
left: 3px;
top: 6px;
width: 18px;
height: 3px;
background: currentColor;
box-shadow: 0 10px 0 currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.compare:after {
content: "";
position: absolute;
left: 2px;
top: 3px;
width: 22px;
height: 18px;
background: currentColor;
clip-path: polygon(0 17%,
24% 0,
24% 12%,
100% 12%,
100% 25%,
24% 25%,
24% 37%,
0 20%,
100% 80%,
76% 63%,
76% 75%,
0 75%,
0 88%,
76% 88%,
76% 100%);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.ai:before {
content: "";
position: absolute;
left: 11px;
top: 2px;
width: 4px;
height: 22px;
border-radius: 4px;
background: currentColor;
box-shadow: 0 0 0 0 currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.ai:after {
content: "";
position: absolute;
left: 2px;
top: 11px;
width: 22px;
height: 4px;
border-radius: 4px;
background: currentColor;
transform: rotate(45deg);
box-shadow: 0 0 0 0 currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.calendar:before {
content: "";
position: absolute;
left: 3px;
top: 5px;
width: 20px;
height: 18px;
border: 2px solid currentColor;
border-radius: 4px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.calendar:after {
content: "";
position: absolute;
left: 6px;
top: 10px;
width: 4px;
height: 4px;
background: currentColor;
box-shadow:
6px 0 0 currentColor,
12px 0 0 currentColor,
0 6px 0 currentColor,
6px 6px 0 currentColor,
12px 6px 0 currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.cost:before {
content: "$";
position: absolute;
inset: 2px;
border: 2px solid currentColor;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 14px;
font-weight: 900;
line-height: 20px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.wrench:before {
content: "";
position: absolute;
left: 5px;
top: 11px;
width: 18px;
height: 5px;
border-radius: 5px;
background: currentColor;
transform: rotate(-42deg);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.wrench:after {
content: "";
position: absolute;
left: 3px;
top: 3px;
width: 9px;
height: 9px;
border: 3px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
transform: rotate(-42deg);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.spark:before {
content: "";
position: absolute;
left: 11px;
top: 1px;
width: 4px;
height: 24px;
border-radius: 4px;
background: currentColor;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .ico.spark:after {
content: "";
position: absolute;
left: 1px;
top: 11px;
width: 24px;
height: 4px;
border-radius: 4px;
background: currentColor;
transform: rotate(45deg);
} .new-theme-design.enterprise-cmms-reporting-power-bi .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroVisual {
min-height: 545px;
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportStage {
min-height: 545px;
position: relative;
max-width: 650px;
margin-left: auto;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportStage:before {
content: "";
position: absolute;
inset: 35px 0 20px 35px;
border-radius: 36px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportHalo {
position: absolute;
left: 53%;
top: 38px;
width: 420px;
height: 420px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(0, 168, 248, 0.22),
rgba(0, 168, 248, 0.08) 47%,
transparent 72%);
z-index: 1;
animation: haloPulse 4s ease-in-out infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .mainDash {
position: absolute;
left: 12px;
right: 0;
top: 44px;
z-index: 3;
background: #fff;
border: 1px solid #bedfee;
border-radius: 24px;
box-shadow: var(--shadow2);
overflow: hidden;
animation: dashFloat 5s ease-in-out infinite;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashNav {
height: 46px;
background: #0c2333;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 9px;
font-weight: 900;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashLogo {
width: 26px;
height: 26px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand), var(--brand2));
position: relative;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashLogo:before {
content: "";
position: absolute;
left: 6px;
top: 7px;
width: 4px;
height: 12px;
background: #fff;
border-radius: 2px;
box-shadow:
6px -3px 0 #fff,
12px -7px 0 #fff;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashControls {
display: flex;
gap: 6px;
}
.dashControl {
font-size: 6px;
padding: 5px 7px;
border: 1px solid #2c4b5f;
border-radius: 7px;
color: #d4e6f0;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashBody {
padding: 14px;
background: linear-gradient(180deg, #f8fcff, #eef8fd);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashTitleRow {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.dashTitleRow strong {
font-size: 10px;
}
.dashTitleRow span {
font-size: 6px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dashKpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 9px;
position: relative;
overflow: hidden;
}
.kpi:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: var(--brand);
}
.kpi:nth-child(2):before {
background: var(--green);
}
.kpi:nth-child(3):before {
background: var(--yellow);
}
.kpi:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .kpi label {
display: block;
font-size: 5.8px;
color: var(--muted);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.kpi strong {
display: block;
font-size: 16px;
color: var(--navy);
line-height: 1.2;
margin-top: 4px;
}
.kpi small {
font-size: 5.5px;
color: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .heroChartGrid {
display: grid;
grid-template-columns: 1.45fr 0.75fr;
gap: 8px;
margin-top: 8px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .panel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
position: relative;
overflow: hidden;
}
.panelTitle {
display: flex;
justify-content: space-between;
align-items: center;
}
.panelTitle strong {
font-size: 7px;
}
.panelTitle span {
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .trendPlot {
height: 116px;
margin-top: 7px;
position: relative;
background: repeating-linear-gradient(to bottom,
#fff 0,
#fff 27px,
#eaf1f5 28px);
overflow: hidden;
border-radius: 7px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .trendBars {
position: absolute;
inset: 11px 8px 9px;
display: flex;
align-items: flex-end;
gap: 7px;
}
.trendBars i {
flex: 1;
background: linear-gradient(180deg,
rgba(0, 168, 248, 0.42),
rgba(0, 127, 197, 0.12));
border-radius: 4px 4px 1px 1px;
transform-origin: bottom;
animation: barRise 1.4s ease both;
}
.trendBars i:nth-child(1) {
height: 32%;
}
.trendBars i:nth-child(2) {
height: 40%;
}
.trendBars i:nth-child(3) {
height: 48%;
}
.trendBars i:nth-child(4) {
height: 44%;
}
.trendBars i:nth-child(5) {
height: 58%;
}
.trendBars i:nth-child(6) {
height: 66%;
}
.trendBars i:nth-child(7) {
height: 62%;
}
.trendBars i:nth-child(8) {
height: 78%;
}
.trendBars i:nth-child(9) {
height: 84%;
}
.trendBars i:nth-child(10) {
height: 90%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .trendPath span {
position: absolute;
height: 3px;
background: var(--brand);
border-radius: 99px;
transform-origin: left;
animation: lineGrow 2s ease both;
}
.trendPath .s1 {
left: 5%;
bottom: 36%;
width: 10%;
transform: rotate(-14deg);
}
.trendPath .s2 {
left: 14%;
bottom: 43%;
width: 11%;
transform: rotate(-13deg);
}
.trendPath .s3 {
left: 24%;
bottom: 51%;
width: 10%;
transform: rotate(6deg);
}
.trendPath .s4 {
left: 33%;
bottom: 48%;
width: 11%;
transform: rotate(-18deg);
}
.trendPath .s5 {
left: 43%;
bottom: 61%;
width: 11%;
transform: rotate(-13deg);
}
.trendPath .s6 {
left: 53%;
bottom: 70%;
width: 11%;
transform: rotate(5deg);
}
.trendPath .s7 {
left: 63%;
bottom: 67%;
width: 11%;
transform: rotate(-18deg);
}
.trendPath .s8 {
left: 73%;
bottom: 80%;
width: 11%;
transform: rotate(-8deg);
}
.trendPath .s9 {
left: 83%;
bottom: 86%;
width: 10%;
transform: rotate(-4deg);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .donutWrap {
display: grid;
place-items: center;
padding-top: 11px;
}
.donut {
width: 104px;
height: 104px;
border-radius: 50%;
background: conic-gradient(var(--green) 0 92%, #e6eef2 92%);
display: grid;
place-items: center;
position: relative;
animation: donutPulse 3s ease-in-out infinite;
}
.donut:after {
content: "";
position: absolute;
inset: 14px;
background: #fff;
border-radius: 50%;
}
.donutText {
position: relative;
z-index: 2;
text-align: center;
font-size: 19px;
font-weight: 900;
color: var(--navy);
}
.donutText span {
display: block;
font-size: 6px;
color: var(--muted);
font-weight: 700;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .bottomGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 8px;
}
.miniPanel {
height: 106px;
}
.miniBars {
height: 70px;
display: flex;
align-items: flex-end;
gap: 6px;
padding-top: 10px;
}
.miniBars span {
flex: 1;
border-radius: 4px 4px 2px 2px;
background: linear-gradient(180deg, var(--brand), var(--brand2));
transform-origin: bottom;
animation: barRise 1.3s ease both;
}
.miniBars span:nth-child(1) {
height: 56%;
}
.miniBars span:nth-child(2) {
height: 78%;
}
.miniBars span:nth-child(3) {
height: 47%;
}
.miniBars span:nth-child(4) {
height: 88%;
}
.miniBars span:nth-child(5) {
height: 61%;
}
.miniBars span:nth-child(6) {
height: 38%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .badRows {
display: grid;
gap: 6px;
margin-top: 8px;
}
.badRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.badRow strong {
font-size: 6.2px;
}
.badRow em {
font-style: normal;
font-size: 5.5px;
color: var(--red);
font-weight: 900;
}
.badTrack {
grid-column: 1/-1;
height: 4px;
background: #eef2f4;
border-radius: 99px;
overflow: hidden;
}
.badTrack i {
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--orange), var(--red));
}
.badRow:nth-child(1) .badTrack i {
width: 82%;
}
.badRow:nth-child(2) .badTrack i {
width: 61%;
}
.badRow:nth-child(3) .badTrack i {
width: 44%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportFloat {
position: absolute;
left: -8px;
bottom: 5px;
z-index: 5;
width: 200px;
background: #101820;
color: #fff;
border: 1px solid #2d3a46;
border-radius: 18px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
overflow: hidden;
animation: floatCard 5.4s ease-in-out infinite;
}
.floatHead {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 12px;
border-bottom: 1px solid #2b3741;
}
.floatHead strong {
font-size: 9px;
}
.floatHead span {
font-size: 6px;
padding: 4px 6px;
border-radius: 999px;
background: var(--yellow);
color: #000;
font-weight: 900;
}
.floatRows {
padding: 8px 11px;
}
.floatRow {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 7px;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #29343e;
}
.floatRow:last-child {
border-bottom: 0;
}
.floatIcon {
width: 21px;
height: 21px;
border-radius: 7px;
background: #16384c;
color: #62ccff;
display: grid;
place-items: center;
}
.floatIcon .ico {
width: 14px;
height: 14px;
transform: scale(0.65);
}
.floatRow strong {
font-size: 6.5px;
}
.floatRow b {
font-size: 6px;
color: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .pbiBadge {
position: absolute;
right: 3px;
bottom: 11px;
z-index: 6;
background: var(--yellow);
color: #151515;
border-radius: 12px;
padding: 9px 11px;
font-size: 8px;
font-weight: 900;
box-shadow: 0 12px 28px rgba(255, 201, 40, 0.28);
display: flex;
align-items: center;
gap: 8px;
animation: badgeFloat 3.3s ease-in-out infinite;
}
.pbiMark {
display: flex;
align-items: flex-end;
gap: 2px;
height: 18px;
}
.pbiMark i {
display: block;
width: 5px;
border-radius: 2px;
background: #1a1a1a;
}
.pbiMark i:nth-child(1) {
height: 9px;
}
.pbiMark i:nth-child(2) {
height: 14px;
}
.pbiMark i:nth-child(3) {
height: 18px;
} .new-theme-design.enterprise-cmms-reporting-power-bi .libraryVisual {
min-height: 440px;
padding: 18px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .libraryShell {
background: rgba(255, 255, 255, 0.85);
border: 1px solid #c9e4f0;
border-radius: 20px;
box-shadow: 0 16px 40px rgba(6, 59, 92, 0.1);
padding: 15px;
height: 100%;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .libraryHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .libraryTitle {
display: flex;
align-items: center;
gap: 10px;
}
.libraryTitle .iconTile {
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--navy);
color: var(--yellow);
display: grid;
place-items: center;
}
.libraryTitle strong {
display: block;
font-size: 12px;
}
.libraryTitle small {
display: block;
font-size: 7px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .libraryTotal {
text-align: right;
}
.libraryTotal b {
display: block;
font-size: 26px;
line-height: 1;
color: var(--brand2);
}
.libraryTotal span {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 9px;
margin-top: 13px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard {
min-height: 93px;
background: #fff;
border: 1px solid #d8e8f0;
border-radius: 13px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
transition: 0.2s;
}
.domainCard:hover {
transform: translateY(-2px);
border-color: #a8ddf3;
box-shadow: 0 10px 22px rgba(6, 59, 92, 0.08);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--brand);
}
.domainCard:nth-child(2):after {
background: var(--green);
}
.domainCard:nth-child(3):after {
background: var(--yellow);
}
.domainCard:nth-child(4):after {
background: var(--purple);
}
.domainCard:nth-child(5):after {
background: var(--orange);
}
.domainCard:nth-child(6):after {
background: var(--red);
}
.domainCard:nth-child(7):after {
background: var(--brand2);
}
.domainCard:nth-child(8):after {
background: var(--green);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainIcon {
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
margin-bottom: 5px;
}
.domainCard:nth-child(2) .domainIcon {
background: var(--greenbg);
color: var(--green);
}
.domainCard:nth-child(3) .domainIcon {
background: var(--yellowsoft);
color: #806000;
}
.domainCard:nth-child(4) .domainIcon {
background: var(--purplebg);
color: var(--purple);
}
.domainCard:nth-child(5) .domainIcon {
background: var(--orangebg);
color: var(--orange);
}
.domainCard:nth-child(6) .domainIcon {
background: var(--redbg);
color: var(--red);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard strong {
font-size: 15px;
line-height: 1;
color: var(--navy);
}
.domainCard span {
font-size: 7px;
color: var(--muted);
margin-top: 4px;
font-weight: 750;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reportSamples {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 7px;
margin-top: 12px;
}
.sampleChip {
background: #0d2535;
color: #fff;
border-radius: 9px;
padding: 8px 4px;
text-align: center;
font-size: 6.5px;
font-weight: 800;
}
.sampleChip b {
display: block;
color: var(--yellow);
font-size: 8px;
} .new-theme-design.enterprise-cmms-reporting-power-bi .pbiUSP {
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
padding: 12px 14px;
border-radius: 12px;
background: var(--yellowsoft);
color: #5f4800;
font-size: 12px;
font-weight: 850;
}
.pbiUSP .pbiMark i {
background: #5f4800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerBoard {
min-height: 420px;
padding: 14px;
background:
radial-gradient(circle at 90% 12%,
rgba(255, 201, 40, 0.2),
transparent 24%),
linear-gradient(145deg, #f9fdff, #e7f7ff);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerShell {
border: 1px solid #c9e4f0;
border-radius: 18px;
background: rgba(255, 255, 255, 0.78);
padding: 11px;
box-shadow: 0 16px 38px rgba(6, 59, 92, 0.1);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerHeader {
min-height: 50px;
border-radius: 13px;
background: linear-gradient(135deg, var(--navy), #0b5277);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerBrand {
display: flex;
align-items: center;
gap: 9px;
}
.powerMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow);
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
padding: 7px;
}
.powerMark i {
width: 5px;
background: #1b1b1b;
border-radius: 2px;
}
.powerMark i:nth-child(1) {
height: 9px;
}
.powerMark i:nth-child(2) {
height: 14px;
}
.powerMark i:nth-child(3) {
height: 19px;
}
.powerBrand strong {
display: block;
font-size: 10px;
}
.powerBrand small {
display: block;
font-size: 6px;
color: #cde8f4;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .filterChips {
display: flex;
gap: 5px;
}
.filterChips span {
font-size: 5.5px;
padding: 5px 7px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
background: rgba(255, 255, 255, 0.07);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerTabs {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin: 9px 0;
}
.powerTabs span {
font-size: 5.5px;
font-weight: 850;
color: var(--navy);
background: #fff;
border: 1px solid #d4e7ef;
border-radius: 999px;
padding: 5px 7px;
}
.powerTabs span.active {
background: var(--yellow);
border-color: var(--yellow);
color: #1f1b00;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerMetrics {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 7px;
}
.powerMetric {
background: #fff;
border: 1px solid #d9eaf1;
border-radius: 10px;
padding: 8px;
position: relative;
overflow: hidden;
}
.powerMetric:after {
content: "";
position: absolute;
right: -9px;
bottom: -11px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(0, 168, 248, 0.07);
}
.powerMetric strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.1;
}
.powerMetric span {
display: block;
font-size: 5px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerGrid {
display: grid;
grid-template-columns: 1.28fr 0.72fr;
gap: 8px;
margin-top: 8px;
}
.powerPanel {
background: #fff;
border: 1px solid #d7e9f1;
border-radius: 11px;
padding: 9px;
}
.miniHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding-bottom: 7px;
border-bottom: 1px solid #e7f0f4;
}
.miniHead strong {
font-size: 7px;
color: var(--navy);
}
.miniHead span {
font-size: 5px;
color: var(--green);
background: var(--greenbg);
padding: 3px 5px;
border-radius: 99px;
font-weight: 800;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .horizontalBars {
display: grid;
gap: 7px;
padding-top: 10px;
}
.hBar {
display: grid;
grid-template-columns: 52px 1fr 28px;
gap: 5px;
align-items: center;
}
.hBar label {
font-size: 5.2px;
color: #455f70;
}
.hTrack {
height: 8px;
background: #edf6fa;
border-radius: 99px;
overflow: hidden;
}
.hTrack i {
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--brand2), var(--brand));
transform-origin: left;
animation: trackGrow 1.5s ease both;
}
.hBar:nth-child(2) .hTrack i {
background: linear-gradient(90deg, var(--green), #35c08c);
}
.hBar:nth-child(3) .hTrack i {
background: linear-gradient(90deg, #e6b500, var(--yellow));
}
.hBar:nth-child(4) .hTrack i {
background: linear-gradient(90deg, var(--purple), #a597f2);
}
.hBar b {
font-size: 5.2px;
text-align: right;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerDonutWrap {
display: grid;
place-items: center;
padding-top: 9px;
}
.powerDonut {
width: 84px;
height: 84px;
border-radius: 50%;
background: conic-gradient(var(--brand) 0 67%,
var(--green) 67% 87%,
var(--yellow) 87%);
display: grid;
place-items: center;
position: relative;
}
.powerDonut:after {
content: "";
position: absolute;
inset: 13px;
background: #fff;
border-radius: 50%;
}
.powerDonut b {
position: relative;
z-index: 2;
font-size: 15px;
color: var(--navy);
}
.powerLegend {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 7px;
}
.powerLegend span {
font-size: 4.8px;
color: var(--muted);
display: flex;
align-items: center;
gap: 3px;
}
.powerLegend i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--brand);
}
.powerLegend span:nth-child(2) i {
background: var(--green);
}
.powerLegend span:nth-child(3) i {
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .powerTable {
margin-top: 8px;
background: #fff;
border: 1px solid #d7e9f1;
border-radius: 11px;
padding: 8px;
}
.tableHead,
.tableRow {
display: grid;
grid-template-columns: 1.2fr 0.55fr 0.55fr 0.55fr;
gap: 5px;
align-items: center;
}
.tableHead {
padding-bottom: 5px;
border-bottom: 1px solid #e4eef3;
}
.tableHead span {
font-size: 4.8px;
color: var(--muted);
font-weight: 850;
}
.tableRow {
padding: 5px 0;
border-bottom: 1px solid #edf3f6;
}
.tableRow:last-child {
border-bottom: 0;
}
.tableRow strong,
.tableRow span {
font-size: 5.2px;
}
.tableRow span {
text-align: right;
color: #4d6676;
} .new-theme-design.enterprise-cmms-reporting-power-bi .woBoard {
min-height: 405px;
padding: 14px;
}
.sceneHeader {
min-height: 55px;
border-radius: 14px;
background: linear-gradient(135deg, var(--navy), #0b5277);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 13px;
}
.sceneTitle {
display: flex;
align-items: center;
gap: 9px;
}
.sceneIcon {
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
color: var(--yellow);
display: grid;
place-items: center;
}
.sceneTitle strong {
display: block;
font-size: 10px;
}
.sceneTitle small {
display: block;
font-size: 6px;
color: #cde8f4;
}
.sceneFilter {
font-size: 5.5px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 8px;
padding: 5px 7px;
background: rgba(255, 255, 255, 0.07);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .sceneTabs {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin: 10px 0 8px;
}
.sceneTabs span {
font-size: 5.5px;
font-weight: 850;
color: var(--navy);
background: #fff;
border: 1px solid #d4e7ef;
border-radius: 999px;
padding: 5px 8px;
}
.sceneTabs span.active {
background: var(--yellow);
border-color: var(--yellow);
color: #1f1b00;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woMetrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.woMetrics>div {
background: #fff;
border: 1px solid #d7e8f0;
border-radius: 11px;
padding: 8px;
min-height: 63px;
}
.metricIcon {
width: 22px;
height: 22px;
border-radius: 7px;
display: grid;
place-items: center;
margin-bottom: 4px;
}
.metricIcon.blue {
background: var(--sky);
color: var(--brand2);
}
.metricIcon.green {
background: var(--greenbg);
color: var(--green);
}
.metricIcon.yellow {
background: var(--yellowsoft);
color: #876600;
}
.metricIcon.purple {
background: var(--purplebg);
color: var(--purple);
}
.metricIcon .ico {
transform: scale(0.62);
}
.woMetrics strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1;
}
.woMetrics small {
display: block;
font-size: 5.3px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCharts {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 8px;
margin-top: 8px;
}
.woPanel {
background: #fff;
border: 1px solid #d7e8f0;
border-radius: 12px;
padding: 9px;
min-height: 139px;
}
.statusBars {
display: grid;
gap: 7px;
padding-top: 9px;
}
.statusBars>div {
display: grid;
grid-template-columns: 52px 1fr 27px;
gap: 5px;
align-items: center;
}
.statusBars label {
font-size: 5.3px;
color: #506877;
}
.statusBars span {
height: 8px;
background: #edf6fa;
border-radius: 99px;
overflow: hidden;
}
.statusBars i {
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--brand2), var(--brand));
}
.statusBars>div:nth-child(2) i {
background: linear-gradient(90deg, var(--green), #38c58f);
}
.statusBars>div:nth-child(3) i {
background: linear-gradient(90deg, #ddae00, var(--yellow));
}
.statusBars>div:nth-child(4) i {
background: linear-gradient(90deg, var(--purple), #a89af5);
}
.statusBars b {
font-size: 5.3px;
text-align: right;
color: var(--navy);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woDonut {
display: grid;
grid-template-columns: 72px 1fr;
gap: 8px;
align-items: center;
padding-top: 10px;
}
.woDonutRing {
width: 70px;
height: 70px;
border-radius: 50%;
background: conic-gradient(var(--brand) 0 82%,
var(--yellow) 82% 93%,
var(--orange) 93%);
display: grid;
place-items: center;
position: relative;
}
.woDonutRing:after {
content: "";
position: absolute;
inset: 13px;
background: #fff;
border-radius: 50%;
}
.woDonutRing span {
position: relative;
z-index: 2;
font-size: 13px;
font-weight: 900;
color: var(--navy);
text-align: center;
}
.woDonutRing small {
display: block;
font-size: 4.5px;
color: var(--muted);
}
.woLegend {
display: grid;
gap: 6px;
}
.woLegend span {
display: flex;
align-items: center;
gap: 5px;
font-size: 5.3px;
color: #506877;
}
.woLegend i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand);
}
.woLegend span:nth-child(2) i {
background: var(--orange);
}
.woLegend span:nth-child(3) i {
background: var(--yellow);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .woCostStrip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 8px;
}
.woCostStrip div {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 9px;
padding: 7px;
}
.woCostStrip div.total {
background: var(--navy);
border-color: var(--navy);
}
.woCostStrip strong {
display: block;
font-size: 8px;
color: var(--navy);
}
.woCostStrip span {
display: block;
font-size: 4.8px;
color: var(--muted);
}
.woCostStrip .total strong {
color: var(--yellow);
}
.woCostStrip .total span {
color: #cde8f4;
} .new-theme-design.enterprise-cmms-reporting-power-bi .assetBoard {
min-height: 405px;
padding: 14px;
}
.assetTop {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 8px;
}
.availabilityGauge {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 13px;
padding: 10px;
display: grid;
place-items: center;
}
.gaugeRing {
width: 106px;
height: 106px;
border-radius: 50%;
background: conic-gradient(var(--brand) 0 88.43%, #e8f2f6 88.43%);
display: grid;
place-items: center;
position: relative;
animation: gaugePulse 3.4s ease-in-out infinite;
}
.gaugeRing:after {
content: "";
position: absolute;
inset: 17px;
background: #fff;
border-radius: 50%;
}
.gaugeRing>div {
position: relative;
z-index: 2;
text-align: center;
}
.gaugeRing strong {
display: block;
font-size: 18px;
color: var(--navy);
}
.gaugeRing span {
font-size: 5.5px;
color: var(--muted);
}
.availabilityGauge>small {
font-size: 5px;
color: var(--muted);
margin-top: 5px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetKpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.assetKpis>div {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 11px;
padding: 8px;
}
.assetKpis .metricIcon {
margin-bottom: 5px;
}
.assetKpis strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1;
}
.assetKpis small {
display: block;
font-size: 5px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .assetChart {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 12px;
padding: 9px;
margin-top: 8px;
}
.assetBars {
height: 91px;
display: flex;
align-items: flex-end;
gap: 7px;
padding: 10px 7px 0;
background: linear-gradient(180deg, transparent, rgba(0, 168, 248, 0.025));
}
.assetBars i {
flex: 1;
border-radius: 5px 5px 2px 2px;
background: linear-gradient(180deg, var(--brand), var(--brand2));
animation: barRise 1.2s ease both;
}
.assetBars i:nth-child(2n) {
background: linear-gradient(180deg, #42c998, var(--green));
}
.assetBars i:nth-child(1) {
height: 70%;
}
.assetBars i:nth-child(2) {
height: 42%;
}
.assetBars i:nth-child(3) {
height: 84%;
}
.assetBars i:nth-child(4) {
height: 32%;
}
.assetBars i:nth-child(5) {
height: 61%;
}
.assetBars i:nth-child(6) {
height: 48%;
}
.assetBars i:nth-child(7) {
height: 76%;
}
.assetBars i:nth-child(8) {
height: 39%;
}
.assetAxis {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 7px;
padding: 4px 7px 0;
}
.assetAxis span {
text-align: center;
font-size: 4.5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .reliabilityStrip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-top: 8px;
}
.reliabilityStrip>div {
background: #fff;
border: 1px solid #d8e9f1;
border-radius: 10px;
padding: 8px;
}
.reliabilityStrip strong {
display: block;
font-size: 10px;
color: var(--navy);
}
.reliabilityStrip span {
display: block;
font-size: 5px;
color: var(--muted);
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dark .domainCard {
background: #151515;
border: 1px solid #333;
}
@media (max-width: 767px) {
.new-theme-design.enterprise-cmms-reporting-power-bi .heroGrid {
grid-template-columns: 1fr;
}
.new-theme-design.enterprise-cmms-reporting-power-bi .dark .domainGrid {
grid-template-columns: repeat(1, 1fr);
}
} .new-theme-design.mobile-cmms-app .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.mobile-cmms-app .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.new-theme-design.mobile-cmms-app .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.new-theme-design.mobile-cmms-app .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.mobile-cmms-app .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.mobile-cmms-app .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.mobile-cmms-app .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.mobile-cmms-app .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.mobile-cmms-app .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.new-theme-design.mobile-cmms-app .soft {
background: var(--sky2);
}
.new-theme-design.mobile-cmms-app .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.mobile-cmms-app .dark h2,
.new-theme-design.mobile-cmms-app .dark h3 {
color: #fff;
}
.new-theme-design.mobile-cmms-app .dark p {
color: #d6d6d6;
}
.new-theme-design.mobile-cmms-app .dark .ey {
background: var(--yellow);
color: #111;
}
.new-theme-design.mobile-cmms-app .sectionHead {
max-width: 860px;
margin-bottom: 38px;
}
.new-theme-design.mobile-cmms-app .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.mobile-cmms-app .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.new-theme-design.mobile-cmms-app .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.new-theme-design.mobile-cmms-app .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.new-theme-design.mobile-cmms-app .heroVisual {
min-height: 525px;
position: relative;
}
.new-theme-design.mobile-cmms-app .mobileStage {
min-height: 525px;
position: relative;
max-width: 620px;
margin-left: auto;
}
.new-theme-design.mobile-cmms-app .mobileStage:before {
content: "";
position: absolute;
inset: 50px 0 30px 50px;
border-radius: 34px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0;
}
.new-theme-design.mobile-cmms-app .halo {
position: absolute;
left: 45%;
top: 70px;
width: 330px;
height: 330px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(0, 168, 248, 0.23),
rgba(0, 168, 248, 0.08) 48%,
transparent 72%);
z-index: 1;
animation: haloPulse 4s ease-in-out infinite;
}
.new-theme-design.mobile-cmms-app .heroArt {
position: absolute;
left: 3%;
top: 45px;
width: 440px;
z-index: 3;
filter: drop-shadow(0 20px 24px rgba(6, 59, 92, 0.14));
animation: techFloat 4.5s ease-in-out infinite;
}
.new-theme-design.mobile-cmms-app .heroArt img {
width: 100%;
height: auto !important;
object-fit: contain !important;
aspect-ratio: auto !important;
}
.new-theme-design.mobile-cmms-app .heroPhone {
position: absolute;
right: 0;
top: 30px;
width: 210px;
z-index: 6;
background: linear-gradient(145deg, #08131d, #162b3a);
border: 1px solid #304858;
border-radius: 32px;
padding: 8px;
box-shadow: 0 24px 52px rgba(6, 59, 92, 0.26);
animation: phoneFloat 4.8s ease-in-out infinite;
}
.new-theme-design.mobile-cmms-app .phoneScreen {
background: #fff;
border-radius: 24px;
min-height: 410px;
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .phoneTop {
height: 24px;
background: #0c0c0c;
display: flex;
align-items: center;
justify-content: center;
}
.new-theme-design.mobile-cmms-app .notch {
width: 68px;
height: 7px;
border-radius: 99px;
background: #333;
}
.new-theme-design.mobile-cmms-app .phoneHead {
padding: 11px 12px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.new-theme-design.mobile-cmms-app .phoneHead strong {
display: block;
font-size: 12px;
}
.new-theme-design.mobile-cmms-app .phoneHead small {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.mobile-cmms-app .todayJobs {
padding: 9px;
display: grid;
gap: 7px;
}
.new-theme-design.mobile-cmms-app .todayJob {
padding: 9px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
}
.new-theme-design.mobile-cmms-app .todayJobTop {
display: flex;
justify-content: space-between;
gap: 8px;
}
.new-theme-design.mobile-cmms-app .todayJob b {
font-size: 8px;
}
.new-theme-design.mobile-cmms-app .todayJob small {
display: block;
color: var(--muted);
font-size: 6px;
margin-top: 2px;
}
.new-theme-design.mobile-cmms-app .pchip {
font-size: 5.5px;
font-weight: 900;
padding: 3px 5px;
border-radius: 999px;
background: #fff0f0;
color: var(--red);
}
.new-theme-design.mobile-cmms-app .pchip.med {
background: var(--yellowsoft);
color: #7b5b00;
}
.new-theme-design.mobile-cmms-app .offlineBar {
margin: 9px;
padding: 8px 9px;
border-radius: 9px;
background: #0d2231;
color: #fff;
display: flex;
align-items: center;
gap: 7px;
}
.new-theme-design.mobile-cmms-app .offlineDot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(17, 138, 97, 0.12);
}
.new-theme-design.mobile-cmms-app .offlineBar strong {
font-size: 7px;
}
.new-theme-design.mobile-cmms-app .offlineBar span {
font-size: 5.8px;
color: #d3e2ea;
display: block;
}
.new-theme-design.mobile-cmms-app .mobileCard {
position: absolute;
left: -5px;
bottom: 10px;
width: 220px;
z-index: 7;
border-radius: 18px;
background: #10151d;
color: #fff;
border: 1px solid #303b47;
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
overflow: hidden;
animation: cardFloat 5s ease-in-out infinite;
}
.new-theme-design.mobile-cmms-app .mobileCardHead {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 12px;
border-bottom: 1px solid #303a46;
}
.new-theme-design.mobile-cmms-app .mobileCardHead strong {
font-size: 9px;
}
.new-theme-design.mobile-cmms-app .mobileCardHead span {
font-size: 5.5px;
background: var(--yellow);
color: #000;
font-weight: 900;
padding: 4px 5px;
border-radius: 999px;
}
.new-theme-design.mobile-cmms-app .mobileCardBody {
padding: 11px;
}
.new-theme-design.mobile-cmms-app .mobRow {
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 7px;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #28313a;
font-size: 6.5px;
}
.new-theme-design.mobile-cmms-app .mobRow:last-child {
border-bottom: 0;
}
.new-theme-design.mobile-cmms-app .mobDot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
}
.new-theme-design.mobile-cmms-app .mobRow:nth-child(2) .mobDot {
background: var(--green);
}
.new-theme-design.mobile-cmms-app .mobRow:nth-child(3) .mobDot {
background: var(--yellow);
}
.new-theme-design.mobile-cmms-app .mobRow:nth-child(4) .mobDot {
background: var(--purple);
}
.new-theme-design.mobile-cmms-app .mobRow strong {
font-size: 6.5px;
}
.new-theme-design.mobile-cmms-app .mobVal {
color: #d5e6ef;
}
.new-theme-design.mobile-cmms-app .mobileTag {
position: absolute;
right: 5px;
bottom: 18px;
z-index: 8;
background: var(--yellow);
color: #000;
font-size: 8px;
font-weight: 900;
padding: 7px 9px;
border-radius: 10px;
animation: float 3.3s ease-in-out infinite;
}
@keyframes haloPulse {
50% {
transform: translateX(-50%) scale(1.05);
}
}
@keyframes techFloat {
50% {
transform: translateY(-5px);
}
}
@keyframes phoneFloat {
50% {
transform: translateY(-7px);
}
}
@keyframes cardFloat {
50% {
transform: translateY(6px);
}
}
@keyframes float {
50% {
transform: translateY(-6px);
}
}
.new-theme-design.mobile-cmms-app .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.mobile-cmms-app .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.mobile-cmms-app .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.new-theme-design.mobile-cmms-app .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.new-theme-design.mobile-cmms-app .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.mobile-cmms-app .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.mobile-cmms-app .outcome:nth-child(2):before {
background: var(--yellow);
}
.new-theme-design.mobile-cmms-app .outcome:nth-child(3):before {
background: var(--green);
}
.new-theme-design.mobile-cmms-app .outcome:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.mobile-cmms-app .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.new-theme-design.mobile-cmms-app .outcome span {
font-size: 15px;
color: var(--muted);
}
.new-theme-design.mobile-cmms-app .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .feature.reverse .visual {
order: -1;
}
.new-theme-design.mobile-cmms-app .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.mobile-cmms-app .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.mobile-cmms-app .fi {
display: flex;
gap: 9px;
font-size: 15px;
}
.new-theme-design.mobile-cmms-app .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .visual {
min-height: 365px;
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.14),
transparent 24%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 20px;
position: relative;
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .visual:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.new-theme-design.mobile-cmms-app .visual>* {
position: relative;
z-index: 2;
}
.new-theme-design.mobile-cmms-app .safeImage {
display: flex;
align-items: center;
justify-content: center;
min-height: 365px;
}
.new-theme-design.mobile-cmms-app .safeImage img {
display: block;
width: 100%;
height: auto !important;
max-height: 440px;
object-fit: contain !important;
object-position: center;
aspect-ratio: auto !important;
}
.new-theme-design.mobile-cmms-app .portraitSafe img {
width: auto !important;
max-width: 72%;
max-height: 500px;
}
.new-theme-design.mobile-cmms-app .techHub {
display: grid;
grid-template-columns: 190px 1fr;
gap: 18px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .phoneMock {
background: #101010;
border-radius: 28px;
padding: 8px;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.16);
}
.new-theme-design.mobile-cmms-app .phoneMockInner {
background: #fff;
border-radius: 21px;
min-height: 315px;
padding: 12px;
}
.new-theme-design.mobile-cmms-app .hubTitle {
font-size: 11px;
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .hubRows {
display: grid;
gap: 7px;
margin-top: 10px;
}
.new-theme-design.mobile-cmms-app .hubRow {
padding: 8px;
border: 1px solid var(--line);
border-radius: 9px;
font-size: 7px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
}
.new-theme-design.mobile-cmms-app .hubRow b {
font-size: 7.5px;
}
.new-theme-design.mobile-cmms-app .hubStatus {
font-size: 5.5px;
padding: 3px 5px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .hubSide {
display: grid;
gap: 9px;
}
.new-theme-design.mobile-cmms-app .hubCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
}
.new-theme-design.mobile-cmms-app .hubCard strong {
display: block;
font-size: 11px;
}
.new-theme-design.mobile-cmms-app .hubCard span {
font-size: 8px;
color: var(--muted);
}
.new-theme-design.mobile-cmms-app .offlineVisual img {
width: 100%;
height: auto !important;
object-fit: contain !important;
aspect-ratio: 3/2;
max-height: 410px;
}
.new-theme-design.mobile-cmms-app .proofGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.new-theme-design.mobile-cmms-app .proofCard {
padding: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
}
.new-theme-design.mobile-cmms-app .proofCard strong {
display: block;
font-size: 18px;
color: var(--navy);
}
.new-theme-design.mobile-cmms-app .proofCard span {
font-size: 8px;
color: var(--muted);
}
.new-theme-design.mobile-cmms-app .proofStream {
height: 155px;
margin-top: 12px;
background: #0d2535;
border-radius: 14px;
padding: 12px;
display: grid;
gap: 8px;
}
.new-theme-design.mobile-cmms-app .proofItem {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: center;
color: #fff;
border-bottom: 1px solid #1e4054;
padding-bottom: 8px;
}
.new-theme-design.mobile-cmms-app .proofItem:last-child {
border-bottom: 0;
}
.new-theme-design.mobile-cmms-app .proofIcon {
width: 28px;
height: 28px;
border-radius: 8px;
background: #173b50;
display: grid;
place-items: center;
font-size: 7px;
font-weight: 900;
color: var(--yellow);
}
.new-theme-design.mobile-cmms-app .proofItem strong {
font-size: 9px;
}
.new-theme-design.mobile-cmms-app .proofItem span {
font-size: 7px;
color: #bfd3df;
}
.new-theme-design.mobile-cmms-app .proofCheck {
font-size: 8px;
color: #76e6bc;
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .scanWrap {
display: grid;
grid-template-columns: 190px 1fr;
gap: 18px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .qr {
width: 76px;
height: 76px;
margin: 10px auto;
background:
repeating-linear-gradient(0deg, #111 0 5px, #fff 5px 9px),
repeating-linear-gradient(90deg, transparent 0 6px, #111 6px 9px);
border: 8px solid #fff;
box-shadow: 0 0 0 1px var(--line);
position: relative;
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .qr:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 3px;
background: var(--yellow);
box-shadow: 0 0 10px var(--yellow);
animation: scan 2.2s ease-in-out infinite;
}
@keyframes scan {
0%,
100% {
top: 8%;
}
50% {
top: 88%;
}
}
.new-theme-design.mobile-cmms-app .lookupRows {
display: grid;
gap: 7px;
margin-top: 10px;
}
.new-theme-design.mobile-cmms-app .lookupRow {
padding: 7px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 7px;
}
.new-theme-design.mobile-cmms-app .lookupSide {
display: grid;
gap: 9px;
}
.new-theme-design.mobile-cmms-app .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
}
.new-theme-design.mobile-cmms-app .lookupCard strong {
display: block;
font-size: 11px;
}
.new-theme-design.mobile-cmms-app .lookupCard span {
font-size: 8px;
color: var(--muted);
}
.new-theme-design.mobile-cmms-app .aiGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 20px;
}
.new-theme-design.mobile-cmms-app .prompt {
background: #1b1b1b;
border: 1px solid #303030;
border-radius: 11px;
padding: 12px 13px;
margin-top: 9px;
font-size: 12px;
transform: translateX(8px);
animation: promptIn 0.4s ease forwards;
}
.new-theme-design.mobile-cmms-app .prompt:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.mobile-cmms-app .prompt:nth-child(3) {
animation-delay: 0.3s;
}
.new-theme-design.mobile-cmms-app .prompt:nth-child(4) {
animation-delay: 0.45s;
}
.new-theme-design.mobile-cmms-app .prompt:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes promptIn {
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.mobile-cmms-app .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 20px;
}
.new-theme-design.mobile-cmms-app .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px;
}
.new-theme-design.mobile-cmms-app .aiMini strong {
display: block;
color: var(--yellow);
font-size: 15px;
}
.new-theme-design.mobile-cmms-app .aiMini span {
font-size: 14px;
color: #cfcfcf;
}
.new-theme-design.mobile-cmms-app .vedaScreen {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16px;
}
.new-theme-design.mobile-cmms-app .vedaScreen img {
width: auto !important;
max-width: 54%;
height: auto !important;
max-height: 430px;
object-fit: contain !important;
border-radius: 18px;
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}
.new-theme-design.mobile-cmms-app .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.mobile-cmms-app .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.new-theme-design.mobile-cmms-app .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 16px;
margin-bottom: 5px;
}
.new-theme-design.mobile-cmms-app .connectedCard span {
font-size: 14px;
color: #d0d0d0;
}
.new-theme-design.mobile-cmms-app .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.new-theme-design.mobile-cmms-app .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.new-theme-design.mobile-cmms-app .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.new-theme-design.mobile-cmms-app .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
}
.new-theme-design.mobile-cmms-app .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
@keyframes stream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
}
.new-theme-design.mobile-cmms-app .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.mobile-cmms-app .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.new-theme-design.mobile-cmms-app .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.new-theme-design.mobile-cmms-app .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.new-theme-design.mobile-cmms-app .featureCard p {
font-size: 15px;
color: var(--muted);
margin: 7px 0 0;
}
.new-theme-design.mobile-cmms-app .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.new-theme-design.mobile-cmms-app .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.new-theme-design.mobile-cmms-app .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.new-theme-design.mobile-cmms-app .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.new-theme-design.mobile-cmms-app .review strong {
font-size: 12px;
}
.new-theme-design.mobile-cmms-app .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.new-theme-design.mobile-cmms-app .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.mobile-cmms-app .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.new-theme-design.mobile-cmms-app .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.mobile-cmms-app .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.mobile-cmms-app .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.mobile-cmms-app .useCase p {
color: var(--muted);
font-size: 15px;
margin-top: 7px;
}
.new-theme-design.mobile-cmms-app .faq {
max-width: 900px;
}
.new-theme-design.mobile-cmms-app .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.mobile-cmms-app .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.mobile-cmms-app .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
}
.new-theme-design.mobile-cmms-app .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.mobile-cmms-app .cta h3 {
font-size: 19px;
}
.new-theme-design.mobile-cmms-app .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.mobile-cmms-app .cta p {
color: var(--muted);
font-size: 15px;
margin-top: 5px;
max-width: 650px;
}
.new-theme-design.mobile-cmms-app .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.mobile-cmms-app .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.mobile-cmms-app .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .final h2 {
color: #fff;
line-height: 1.5;
}
.new-theme-design.mobile-cmms-app .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.new-theme-design.mobile-cmms-app .reveal {
transform: translateY(18px);
transition: 0.6s ease;
}
.new-theme-design.mobile-cmms-app .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.new-theme-design.mobile-cmms-app .heroGrid,
.new-theme-design.mobile-cmms-app .feature,
.new-theme-design.mobile-cmms-app .aiGrid,
.new-theme-design.mobile-cmms-app .final {
grid-template-columns: 1fr;
}
.new-theme-design.mobile-cmms-app .feature.reverse .visual {
order: 0;
}
.new-theme-design.mobile-cmms-app .mobileStage {
margin: auto;
}
.new-theme-design.mobile-cmms-app .outcomes,
.new-theme-design.mobile-cmms-app .featureGrid,
.new-theme-design.mobile-cmms-app .connectedGrid,
.new-theme-design.mobile-cmms-app .useCases {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.mobile-cmms-app .logos {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.mobile-cmms-app .integrations {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.mobile-cmms-app .reviews {
grid-template-columns: 1fr;
}
.new-theme-design.mobile-cmms-app .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.new-theme-design.mobile-cmms-app .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.new-theme-design.mobile-cmms-app .hero {
padding: 54px 0;
}
.new-theme-design.mobile-cmms-app .mobileStage {
min-height: 430px;
max-width: 360px;
}
.new-theme-design.mobile-cmms-app .heroArt {
width: 285px;
left: 0;
top: 75px;
}
.new-theme-design.mobile-cmms-app .heroPhone {
width: 165px;
top: 35px;
}
.new-theme-design.mobile-cmms-app .phoneScreen {
min-height: 330px;
}
.new-theme-design.mobile-cmms-app .mobileCard {
width: 155px;
}
.new-theme-design.mobile-cmms-app .fl,
.new-theme-design.mobile-cmms-app .outcomes,
.new-theme-design.mobile-cmms-app .featureGrid,
.new-theme-design.mobile-cmms-app .connectedGrid,
.new-theme-design.mobile-cmms-app .useCases,
.new-theme-design.mobile-cmms-app .logos,
.new-theme-design.mobile-cmms-app .integrations,
.new-theme-design.mobile-cmms-app .aiMini,
.new-theme-design.mobile-cmms-app .ratingGrid {
grid-template-columns: 1fr;
}
.new-theme-design.mobile-cmms-app .techHub,
.new-theme-design.mobile-cmms-app .scanWrap {
grid-template-columns: 1fr;
}
.new-theme-design.mobile-cmms-app .cta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.mobile-cmms-app .portraitSafe img {
max-width: 88%;
}
.new-theme-design.mobile-cmms-app .vedaScreen img {
max-width: 80%;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.new-theme-design.mobile-cmms-app .uiCanvas {
min-height: 430px;
border-radius: 24px;
position: relative;
overflow: hidden;
border: 1px solid #c9e5f2;
background:
radial-gradient(circle at 78% 30%,
rgba(255, 201, 40, 0.16),
transparent 23%),
radial-gradient(circle at 36% 44%,
rgba(0, 168, 248, 0.18),
transparent 34%),
linear-gradient(145deg, #fff, #edf9ff);
box-shadow: var(--shadow);
isolation: isolate;
}
.new-theme-design.mobile-cmms-app .uiCanvas:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.038) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.038) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: linear-gradient(145deg, #000, transparent 78%);
z-index: -1;
}
.new-theme-design.mobile-cmms-app .uiCanvas:after {
content: "";
position: absolute;
width: 310px;
height: 310px;
border: 1px solid rgba(0, 168, 248, 0.16);
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow:
0 0 0 42px rgba(0, 168, 248, 0.035),
0 0 0 86px rgba(255, 201, 40, 0.025);
z-index: -1;
}
.new-theme-design.mobile-cmms-app .cssPhone {
width: 236px;
background: linear-gradient(145deg, #050a0f, #223643);
border-radius: 34px;
padding: 8px;
box-shadow:
0 28px 60px rgba(6, 59, 92, 0.26),
inset 0 0 0 1px #405563;
position: relative;
}
.new-theme-design.mobile-cmms-app .cssPhone:before {
content: "";
position: absolute;
right: -3px;
top: 112px;
width: 3px;
height: 70px;
border-radius: 0 3px 3px 0;
background: #546875;
}
.new-theme-design.mobile-cmms-app .cssScreen {
background: #f8fbfd;
border-radius: 27px;
overflow: hidden;
min-height: 456px;
border: 1px solid #dde8ee;
position: relative;
}
.new-theme-design.mobile-cmms-app .mobileStatus {
height: 29px;
background: #087bd2;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
font-size: 7px;
font-weight: 800;
}
.new-theme-design.mobile-cmms-app .mobileStatus.darkTop {
background: #071d36;
}
.new-theme-design.mobile-cmms-app .mobileStatus .statusDots {
letter-spacing: 2px;
}
.new-theme-design.mobile-cmms-app .mobileBrand {
height: 44px;
background: linear-gradient(135deg, #008cea, #006cc4);
color: #fff;
padding: 0 13px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
font-weight: 850;
}
.new-theme-design.mobile-cmms-app .mobileBrand .cloudMark {
display: inline-flex;
align-items: center;
gap: 5px;
}
.new-theme-design.mobile-cmms-app .cloudDot {
width: 16px;
height: 11px;
border: 1.5px solid currentColor;
border-radius: 10px;
position: relative;
display: inline-block;
}
.new-theme-design.mobile-cmms-app .cloudDot:before {
content: "";
position: absolute;
width: 7px;
height: 7px;
border: 1.5px solid currentColor;
border-bottom: 0;
border-radius: 8px 8px 0 0;
left: 3px;
top: -5px;
background: inherit;
}
.new-theme-design.mobile-cmms-app .mobileBody {
padding: 12px;
}
.new-theme-design.mobile-cmms-app .mobileTitle {
font-size: 17px;
line-height: 1.1;
font-weight: 900;
color: #0b2136;
letter-spacing: -0.025em;
}
.new-theme-design.mobile-cmms-app .mobileSub {
font-size: 7px;
color: #6a7d8c;
margin-top: 3px;
}
.new-theme-design.mobile-cmms-app .mobileTabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-top: 10px;
}
.new-theme-design.mobile-cmms-app .mobileTab {
font-size: 7px;
text-align: center;
padding: 6px 3px;
border: 1px solid #dae8f0;
border-radius: 8px;
background: #fff;
color: #536d80;
font-weight: 750;
}
.new-theme-design.mobile-cmms-app .mobileTab.active {
background: #087fe0;
color: #fff;
border-color: #087fe0;
}
.new-theme-design.mobile-cmms-app .jobList {
display: grid;
gap: 7px;
margin-top: 10px;
}
.new-theme-design.mobile-cmms-app .jobItem {
padding: 9px;
border: 1px solid #dce8ef;
border-radius: 11px;
background: #fff;
box-shadow: 0 5px 13px rgba(6, 59, 92, 0.05);
display: grid;
grid-template-columns: 30px 1fr auto;
gap: 8px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .jobGlyph {
width: 30px;
height: 30px;
border-radius: 50%;
background: #eff8ff;
border: 1px solid #d4ecf8;
position: relative;
}
.new-theme-design.mobile-cmms-app .jobGlyph:before,
.new-theme-design.mobile-cmms-app .jobGlyph:after {
content: "";
position: absolute;
background: #0783e4;
}
.new-theme-design.mobile-cmms-app .jobGlyph:before {
width: 14px;
height: 9px;
border: 2px solid #0783e4;
background: transparent;
border-radius: 3px;
left: 6px;
top: 9px;
}
.new-theme-design.mobile-cmms-app .jobGlyph:after {
width: 4px;
height: 4px;
border-radius: 50%;
left: 13px;
top: 5px;
}
.new-theme-design.mobile-cmms-app .jobItem b {
display: block;
font-size: 8px;
color: #12293a;
}
.new-theme-design.mobile-cmms-app .jobItem small {
display: block;
font-size: 5.8px;
color: #748695;
margin-top: 2px;
}
.new-theme-design.mobile-cmms-app .tag {
display: inline-flex;
padding: 3px 5px;
border-radius: 999px;
font-size: 5.5px;
font-weight: 900;
white-space: nowrap;
}
.new-theme-design.mobile-cmms-app .tag.blue {
background: #e7f4ff;
color: #0577cf;
}
.new-theme-design.mobile-cmms-app .tag.orange {
background: #fff2d6;
color: #9a6500;
}
.new-theme-design.mobile-cmms-app .tag.green {
background: #eaf8f3;
color: #118a61;
}
.new-theme-design.mobile-cmms-app .tag.red {
background: #fff0f0;
color: #d94d4d;
}
.new-theme-design.mobile-cmms-app .offlineMini {
margin-top: 9px;
padding: 8px 9px;
border: 1px solid #bfe6d7;
background: #f4fcf8;
border-radius: 9px;
display: flex;
gap: 7px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .wifiGlyph {
width: 20px;
height: 16px;
position: relative;
}
.new-theme-design.mobile-cmms-app .wifiGlyph:before {
content: "";
position: absolute;
left: 2px;
right: 2px;
top: 2px;
height: 9px;
border: 2px solid #12a56d;
border-color: #12a56d transparent transparent transparent;
border-radius: 50%;
}
.new-theme-design.mobile-cmms-app .wifiGlyph:after {
content: "";
position: absolute;
width: 5px;
height: 5px;
background: #12a56d;
border-radius: 50%;
left: 8px;
bottom: 0;
}
.new-theme-design.mobile-cmms-app .offlineMini b {
font-size: 7px;
color: #134f3b;
}
.new-theme-design.mobile-cmms-app .offlineMini small {
display: block;
font-size: 5.5px;
color: #607b70;
}
.new-theme-design.mobile-cmms-app .mobileNav {
height: 35px;
border-top: 1px solid #dee8ee;
background: #fff;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
text-align: center;
font-size: 5px;
color: #688093;
}
.new-theme-design.mobile-cmms-app .mobileNav span:first-child {
color: #087cd8;
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .floatUi {
position: absolute;
background: rgba(255, 255, 255, 0.96);
border: 1px solid #d8e8f0;
border-radius: 16px;
box-shadow: 0 18px 38px rgba(6, 59, 92, 0.12);
padding: 13px;
backdrop-filter: blur(7px);
}
.new-theme-design.mobile-cmms-app .floatUi:after {
content: "";
position: absolute;
border-top: 1.5px dashed #118fe6;
width: 48px;
top: 50%;
}
.new-theme-design.mobile-cmms-app .floatUi.leftLink:after {
right: -49px;
}
.new-theme-design.mobile-cmms-app .floatUi.rightLink:after {
left: -49px;
}
.new-theme-design.mobile-cmms-app .floatUi h4 {
font-size: 10px;
margin: 0 0 8px;
color: #12293a;
}
.new-theme-design.mobile-cmms-app .miniFeature {
display: grid;
grid-template-columns: 25px 1fr;
gap: 8px;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #e7eff3;
}
.new-theme-design.mobile-cmms-app .miniFeature:last-child {
border-bottom: 0;
}
.new-theme-design.mobile-cmms-app .miniIcon {
width: 25px;
height: 25px;
border-radius: 8px;
background: #eef8ff;
border: 1px solid #d5edf9;
position: relative;
}
.new-theme-design.mobile-cmms-app .miniIcon:before {
content: "";
position: absolute;
inset: 7px;
border: 2px solid #087fe0;
border-radius: 3px;
}
.new-theme-design.mobile-cmms-app .miniFeature b {
display: block;
font-size: 7px;
}
.new-theme-design.mobile-cmms-app .miniFeature span {
font-size: 5.5px;
color: #718595;
display: block;
}
.new-theme-design.mobile-cmms-app .heroPoint {
position: absolute;
right: 1px;
top: 90px;
padding: 10px 13px;
border-radius: 999px;
background: #fff;
border: 1px solid #d7e8ef;
box-shadow: 0 12px 28px rgba(6, 59, 92, 0.1);
font-size: 9px;
font-weight: 900;
color: #0b2940;
}
.new-theme-design.mobile-cmms-app .heroPoint em {
font-style: normal;
color: #087fe0;
}
.new-theme-design.mobile-cmms-app .scanMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}
.new-theme-design.mobile-cmms-app .scanKey {
border: 1px solid #ddebf2;
border-radius: 9px;
background: #fff;
padding: 7px 5px;
text-align: center;
font-size: 5.6px;
font-weight: 800;
color: #405c70;
}
.new-theme-design.mobile-cmms-app .scanKey i {
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
border: 2px solid #087fe0;
border-radius: 5px;
position: relative;
}
.new-theme-design.mobile-cmms-app .scanKey.qrKey i {
background:
repeating-linear-gradient(0deg, #087fe0 0 2px, transparent 2px 4px),
repeating-linear-gradient(90deg, transparent 0 3px, #087fe0 3px 5px);
}
.new-theme-design.mobile-cmms-app .scanKey.barKey i {
background: repeating-linear-gradient(90deg,
#087fe0 0 2px,
transparent 2px 4px);
border: 0;
border-radius: 0;
}
.new-theme-design.mobile-cmms-app .scanKey.rfidKey i {
border: 0;
}
.new-theme-design.mobile-cmms-app .scanKey.rfidKey i:before,
.new-theme-design.mobile-cmms-app .scanKey.rfidKey i:after {
content: "";
position: absolute;
border: 2px solid #087fe0;
border-left-color: transparent;
border-bottom-color: transparent;
border-radius: 50%;
transform: rotate(-45deg);
left: 4px;
top: 4px;
}
.new-theme-design.mobile-cmms-app .scanKey.rfidKey i:before {
width: 15px;
height: 15px;
}
.new-theme-design.mobile-cmms-app .scanKey.rfidKey i:after {
width: 9px;
height: 9px;
left: 7px;
top: 7px;
}
.new-theme-design.mobile-cmms-app .cssHeroStage {
min-height: 525px;
position: relative;
max-width: 620px;
margin-left: auto;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .heroPhoneMain {
position: absolute;
left: 48%;
top: 20px;
transform: translateX(-50%);
z-index: 4;
animation: phoneFloat 4.8s ease-in-out infinite;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .heroTools {
left: 0;
top: 160px;
width: 184px;
z-index: 5;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .heroScan {
right: 0;
bottom: 42px;
width: 180px;
z-index: 5;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .heroPoint {
z-index: 6;
}
.new-theme-design.mobile-cmms-app .cssHeroStage:before {
content: "";
position: absolute;
left: 52%;
top: 74px;
width: 350px;
height: 350px;
border-radius: 50%;
transform: translateX(-50%);
background: radial-gradient(circle,
rgba(0, 168, 248, 0.21),
rgba(0, 168, 248, 0.07) 50%,
transparent 72%);
animation: haloPulse 4s ease-in-out infinite;
}
.new-theme-design.mobile-cmms-app .heroPulse {
position: absolute;
left: 51%;
top: 91px;
width: 320px;
height: 320px;
border: 1px solid rgba(0, 168, 248, 0.18);
border-radius: 50%;
transform: translateX(-50%);
box-shadow:
0 0 0 42px rgba(0, 168, 248, 0.035),
0 0 0 82px rgba(255, 201, 40, 0.025);
}
.new-theme-design.mobile-cmms-app .techCanvas {
display: grid;
grid-template-columns: 1fr 245px 1fr;
gap: 14px;
align-items: center;
padding: 26px 20px;
}
.new-theme-design.mobile-cmms-app .techCanvas .cssPhone {
width: 245px;
margin: auto;
}
.new-theme-design.mobile-cmms-app .sideCallouts {
display: grid;
gap: 13px;
}
.new-theme-design.mobile-cmms-app .callout {
padding: 14px;
background: #fff;
border: 1px solid #d7e8ef;
border-radius: 15px;
box-shadow: 0 13px 28px rgba(6, 59, 92, 0.08);
position: relative;
}
.new-theme-design.mobile-cmms-app .callout strong {
display: block;
font-size: 11px;
color: #132c40;
}
.new-theme-design.mobile-cmms-app .callout span {
display: block;
font-size: 8px;
color: #6b8090;
margin-top: 4px;
}
.new-theme-design.mobile-cmms-app .callout.left:after,
.new-theme-design.mobile-cmms-app .callout.right:before {
content: "";
position: absolute;
top: 50%;
width: 26px;
border-top: 1.5px dashed #0788e4;
}
.new-theme-design.mobile-cmms-app .callout.left:after {
right: -27px;
}
.new-theme-design.mobile-cmms-app .callout.right:before {
left: -27px;
}
.new-theme-design.mobile-cmms-app .calloutIcon {
width: 34px;
height: 34px;
border-radius: 10px;
background: #edf8ff;
border: 1px solid #d5edf9;
margin-bottom: 9px;
position: relative;
}
.new-theme-design.mobile-cmms-app .calloutIcon:before {
content: "";
position: absolute;
inset: 9px;
border: 2px solid #087fe0;
border-radius: 3px;
}
.new-theme-design.mobile-cmms-app .calloutIcon.camera:before {
inset: 10px 7px;
border-radius: 4px;
}
.new-theme-design.mobile-cmms-app .calloutIcon.camera:after {
content: "";
position: absolute;
width: 6px;
height: 6px;
border: 2px solid #087fe0;
border-radius: 50%;
left: 13px;
top: 12px;
}
.new-theme-design.mobile-cmms-app .calloutIcon.cube:after {
content: "";
position: absolute;
width: 9px;
height: 9px;
border: 2px solid #087fe0;
transform: rotate(30deg);
left: 11px;
top: 10px;
}
.new-theme-design.mobile-cmms-app .calloutIcon.cube:before {
display: none;
}
.new-theme-design.mobile-cmms-app .offlineCanvas {
padding: 24px 18px;
display: grid;
grid-template-columns: 150px 245px 1fr;
gap: 16px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .offlineCanvas .cssPhone {
width: 245px;
}
.new-theme-design.mobile-cmms-app .offlineLeft {
display: grid;
gap: 18px;
}
.new-theme-design.mobile-cmms-app .signalBadge {
padding: 10px 12px;
border: 1px solid #f2d684;
border-radius: 11px;
background: #fff8e2;
color: #9b6b00;
font-size: 8px;
font-weight: 900;
text-align: center;
}
.new-theme-design.mobile-cmms-app .localSave {
text-align: center;
font-size: 9px;
font-weight: 900;
color: #17344a;
}
.new-theme-design.mobile-cmms-app .databaseGlyph {
width: 62px;
height: 62px;
margin: 0 auto 8px;
border-radius: 50%;
background: #fff;
border: 1px solid #d8e9f0;
box-shadow: 0 8px 20px rgba(6, 59, 92, 0.08);
position: relative;
}
.new-theme-design.mobile-cmms-app .databaseGlyph:before {
content: "";
position: absolute;
width: 28px;
height: 13px;
border: 3px solid #087fe0;
border-radius: 50%;
left: 14px;
top: 14px;
box-shadow:
0 8px 0 -3px #fff,
0 8px 0 0 #087fe0,
0 16px 0 -3px #fff,
0 16px 0 0 #087fe0;
}
.new-theme-design.mobile-cmms-app .syncStack {
display: grid;
gap: 11px;
}
.new-theme-design.mobile-cmms-app .syncCard {
padding: 14px;
background: #fff;
border: 1px solid #d8e8f0;
border-radius: 15px;
box-shadow: 0 12px 28px rgba(6, 59, 92, 0.08);
}
.new-theme-design.mobile-cmms-app .syncCard strong {
font-size: 11px;
display: block;
}
.new-theme-design.mobile-cmms-app .syncCard p {
font-size: 7px !important;
margin: 4px 0 8px !important;
}
.new-theme-design.mobile-cmms-app .syncRow {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-top: 1px solid #edf2f5;
font-size: 6.5px;
}
.new-theme-design.mobile-cmms-app .syncCloud {
width: 55px;
height: 55px;
border-radius: 50%;
background: #fff;
border: 1px solid #dcebf2;
margin: auto;
position: relative;
}
.new-theme-design.mobile-cmms-app .syncCloud:before {
content: "";
position: absolute;
width: 25px;
height: 14px;
border: 2px solid #087fe0;
border-radius: 14px;
left: 14px;
top: 22px;
}
.new-theme-design.mobile-cmms-app .syncCloud:after {
content: "↻";
position: absolute;
left: 22px;
top: 17px;
color: #087fe0;
font-size: 17px;
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .offlineWorkCard {
margin: 10px 0;
padding: 10px;
background: #fff;
border: 1px solid #dde8ee;
border-radius: 10px;
}
.new-theme-design.mobile-cmms-app .offlineWorkCard b {
font-size: 9px;
}
.new-theme-design.mobile-cmms-app .offlineWorkCard small {
display: block;
font-size: 6px;
color: #708493;
}
.new-theme-design.mobile-cmms-app .checkRows {
display: grid;
gap: 6px;
margin-top: 9px;
}
.new-theme-design.mobile-cmms-app .checkRow {
display: flex;
gap: 7px;
align-items: center;
font-size: 6.4px;
color: #324d60;
}
.new-theme-design.mobile-cmms-app .checkDot {
width: 12px;
height: 12px;
border: 1.5px solid #10a56d;
border-radius: 50%;
position: relative;
}
.new-theme-design.mobile-cmms-app .checkDot:after {
content: "";
position: absolute;
width: 5px;
height: 2px;
border-left: 1.5px solid #10a56d;
border-bottom: 1.5px solid #10a56d;
transform: rotate(-45deg);
left: 3px;
top: 3px;
}
.new-theme-design.mobile-cmms-app .savedStrip {
margin-top: 9px;
padding: 8px;
border: 1px solid #cdebdf;
background: #f3fcf8;
border-radius: 9px;
font-size: 6.2px;
color: #3d6d5d;
}
.new-theme-design.mobile-cmms-app .workorderCanvas {
display: grid;
grid-template-columns: 150px 260px 1fr;
gap: 15px;
align-items: center;
padding: 24px 18px;
}
.new-theme-design.mobile-cmms-app .workorderCanvas .cssPhone {
width: 260px;
}
.new-theme-design.mobile-cmms-app .woHead {
padding: 11px 12px 6px;
}
.new-theme-design.mobile-cmms-app .woHead .mobileTitle {
font-size: 13px;
}
.new-theme-design.mobile-cmms-app .woStatusRow {
display: flex;
gap: 4px;
margin-top: 7px;
}
.new-theme-design.mobile-cmms-app .woStatus {
font-size: 5.4px;
padding: 4px 6px;
border: 1px solid #dce7ed;
border-radius: 6px;
background: #fff;
}
.new-theme-design.mobile-cmms-app .woStatus.active {
background: #087fe0;
color: #fff;
border-color: #087fe0;
}
.new-theme-design.mobile-cmms-app .woInfo {
margin: 6px 12px 0;
border: 1px solid #dfe9ee;
border-radius: 9px;
background: #fff;
}
.new-theme-design.mobile-cmms-app .woInfoRow {
display: flex;
justify-content: space-between;
padding: 7px 9px;
border-bottom: 1px solid #edf2f5;
font-size: 6.2px;
}
.new-theme-design.mobile-cmms-app .woInfoRow:last-child {
border-bottom: 0;
}
.new-theme-design.mobile-cmms-app .woChecklist {
margin: 8px 12px 0;
padding: 9px;
border: 1px solid #dfe9ee;
border-radius: 9px;
background: #fff;
}
.new-theme-design.mobile-cmms-app .woChecklistTitle {
display: flex;
justify-content: space-between;
font-size: 7.2px;
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .progressTrack {
height: 5px;
background: #e5edf1;
border-radius: 999px;
margin: 6px 0 8px;
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .progressTrack span {
display: block;
width: 67%;
height: 100%;
background: #087fe0;
border-radius: 999px;
}
.new-theme-design.mobile-cmms-app .woStep {
display: grid;
grid-template-columns: 13px 1fr auto;
gap: 6px;
align-items: center;
padding: 4px 0;
border-top: 1px solid #f0f3f5;
font-size: 5.7px;
}
.new-theme-design.mobile-cmms-app .woStep .stepCircle {
width: 10px;
height: 10px;
border: 1.5px solid #10a56d;
border-radius: 50%;
}
.new-theme-design.mobile-cmms-app .woStep.current {
color: #087fe0;
font-weight: 850;
}
.new-theme-design.mobile-cmms-app .woStep.current .stepCircle {
border-color: #087fe0;
}
.new-theme-design.mobile-cmms-app .proofRows {
margin: 7px 12px 11px;
}
.new-theme-design.mobile-cmms-app .proofRows b {
font-size: 7px;
}
.new-theme-design.mobile-cmms-app .proofMiniRow {
display: flex;
justify-content: space-between;
font-size: 5.8px;
padding: 5px 0;
border-bottom: 1px solid #ecf2f5;
}
.new-theme-design.mobile-cmms-app .verifiedCard {
padding: 15px;
background: #fff;
border: 1px solid #d8e8f0;
border-radius: 15px;
box-shadow: 0 12px 28px rgba(6, 59, 92, 0.08);
}
.new-theme-design.mobile-cmms-app .verifiedShield {
width: 42px;
height: 42px;
border-radius: 50%;
background: #eaf8f3;
position: relative;
margin-bottom: 10px;
}
.new-theme-design.mobile-cmms-app .verifiedShield:before {
content: "✓";
position: absolute;
inset: 8px;
border: 2px solid #10a56d;
border-radius: 12px 12px 16px 16px;
display: grid;
place-items: center;
color: #10a56d;
font-size: 13px;
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .verifiedCard strong {
font-size: 12px;
}
.new-theme-design.mobile-cmms-app .verifiedRow {
font-size: 7px;
padding: 6px 0;
border-top: 1px solid #edf2f5;
color: #506a7c;
}
.new-theme-design.mobile-cmms-app .checkProgress {
padding: 15px;
background: #fff;
border: 1px solid #d8e8f0;
border-radius: 15px;
box-shadow: 0 12px 28px rgba(6, 59, 92, 0.08);
}
.new-theme-design.mobile-cmms-app .checkProgress strong {
font-size: 11px;
}
.new-theme-design.mobile-cmms-app .progressBig {
height: 5px;
margin: 9px 0;
background: #e3ecf0;
border-radius: 999px;
}
.new-theme-design.mobile-cmms-app .progressBig span {
display: block;
width: 67%;
height: 100%;
background: #087fe0;
border-radius: 999px;
}
.new-theme-design.mobile-cmms-app .scanCanvas {
padding: 25px 18px;
display: grid;
grid-template-columns: 1fr 235px 1fr;
gap: 15px;
align-items: center;
}
.new-theme-design.mobile-cmms-app .scanCanvas .cssPhone {
width: 235px;
}
.new-theme-design.mobile-cmms-app .machinePanel {
min-height: 300px;
border-radius: 18px;
background: linear-gradient(145deg, #1b6da1, #11486e);
border: 1px solid #0a3d60;
position: relative;
overflow: hidden;
box-shadow: inset -18px 0 30px rgba(0, 0, 0, 0.14);
}
.new-theme-design.mobile-cmms-app .machinePanel:before {
content: "";
position: absolute;
width: 110px;
height: 110px;
border: 18px solid #2d82b3;
border-radius: 50%;
right: -35px;
top: 64px;
box-shadow: inset 0 0 0 10px #0e3e5b;
}
.new-theme-design.mobile-cmms-app .machinePanel:after {
content: "";
position: absolute;
width: 18px;
height: 260px;
background: #8f9aa0;
right: 26px;
top: -20px;
border-radius: 9px;
box-shadow: inset 0 0 0 3px #5b666b;
}
.new-theme-design.mobile-cmms-app .assetPlate {
position: absolute;
left: 24px;
top: 74px;
width: 125px;
padding: 13px 10px;
border-radius: 7px;
background: #f3f5f5;
border: 1px solid #aeb8bd;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
text-align: center;
color: #152b3a;
}
.new-theme-design.mobile-cmms-app .assetPlate b {
font-size: 10px;
}
.new-theme-design.mobile-cmms-app .assetPlate small {
font-size: 6px;
display: block;
}
.new-theme-design.mobile-cmms-app .qrCss {
width: 52px;
height: 52px;
margin: 8px auto 2px;
border: 5px solid #fff;
background:
repeating-linear-gradient(0deg, #0a1014 0 4px, #fff 4px 7px),
repeating-linear-gradient(90deg, transparent 0 5px, #0a1014 5px 8px);
box-shadow: 0 0 0 1px #222;
position: relative;
}
.new-theme-design.mobile-cmms-app .qrCss:before,
.new-theme-design.mobile-cmms-app .qrCss:after {
content: "";
position: absolute;
width: 12px;
height: 12px;
border: 4px solid #0a1014;
background: #fff;
}
.new-theme-design.mobile-cmms-app .qrCss:before {
left: 1px;
top: 1px;
}
.new-theme-design.mobile-cmms-app .qrCss:after {
right: 1px;
bottom: 1px;
}
.new-theme-design.mobile-cmms-app .scanPhoneArea {
height: 260px;
background: #143a55;
position: relative;
overflow: hidden;
}
.new-theme-design.mobile-cmms-app .scanFrame {
position: absolute;
left: 38px;
right: 38px;
top: 55px;
height: 132px;
border: 3px solid #fff;
border-radius: 14px;
box-shadow: 0 0 18px rgba(0, 168, 248, 0.25);
}
.new-theme-design.mobile-cmms-app .scanFrame:after {
content: "";
position: absolute;
left: 8px;
right: 8px;
height: 2px;
background: #ffc928;
box-shadow: 0 0 10px #ffc928;
animation: scanline 2.3s ease-in-out infinite;
}
@keyframes scanline {
0%,
100% {
top: 10px;
}
50% {
top: 116px;
}
}
.new-theme-design.mobile-cmms-app .scanPhoneArea .assetPlate {
transform: scale(0.68);
transform-origin: center;
left: 54px;
top: 60px;
}
.new-theme-design.mobile-cmms-app .scanResult {
margin: 9px;
padding: 9px;
border: 1px solid #dde8ee;
border-radius: 9px;
background: #fff;
font-size: 6px;
}
.new-theme-design.mobile-cmms-app .scanResult b {
font-size: 8px;
display: block;
}
.new-theme-design.mobile-cmms-app .scanModes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 0 9px 10px;
}
.new-theme-design.mobile-cmms-app .scanMode {
font-size: 5.2px;
text-align: center;
padding: 6px 2px;
background: #fff;
border: 1px solid #dce8ef;
border-radius: 7px;
color: #527083;
}
.new-theme-design.mobile-cmms-app .assetOverview {
padding: 14px;
background: #fff;
border: 1px solid #d8e8f0;
border-radius: 15px;
box-shadow: 0 12px 28px rgba(6, 59, 92, 0.08);
margin-bottom: 12px;
}
.new-theme-design.mobile-cmms-app .assetOverview strong {
font-size: 12px;
display: block;
}
.new-theme-design.mobile-cmms-app .assetOverview span {
font-size: 7px;
color: #637c8d;
}
.new-theme-design.mobile-cmms-app .assetInfoCards {
display: grid;
gap: 9px;
}
.new-theme-design.mobile-cmms-app .assetInfoCard {
padding: 12px;
background: #fff;
border: 1px solid #d8e8f0;
border-radius: 13px;
}
.new-theme-design.mobile-cmms-app .assetInfoCard strong {
font-size: 9px;
display: block;
}
.new-theme-design.mobile-cmms-app .assetInfoCard span {
font-size: 6.5px;
color: #6b8292;
}
.new-theme-design.mobile-cmms-app .vedaVisual {
min-height: 500px;
border: 1px solid #17365a;
border-radius: 22px;
background:
radial-gradient(circle at 50% 48%,
rgba(0, 118, 255, 0.18),
transparent 35%),
linear-gradient(145deg, #07101f, #031226);
position: relative;
overflow: hidden;
padding: 24px;
}
.new-theme-design.mobile-cmms-app .vedaVisual:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(125deg,
transparent 0 45%,
rgba(0, 133, 255, 0.05) 46%,
transparent 47% 100%),
repeating-linear-gradient(0deg,
transparent 0 28px,
rgba(46, 134, 255, 0.03) 29px);
pointer-events: none;
}
.new-theme-design.mobile-cmms-app .vedaGrid {
display: grid;
grid-template-columns: 150px 245px 1fr;
gap: 16px;
align-items: center;
position: relative;
z-index: 2;
}
.new-theme-design.mobile-cmms-app .vedaVisual .cssPhone {
width: 245px;
box-shadow: 0 20px 55px rgba(0, 105, 255, 0.22);
}
.new-theme-design.mobile-cmms-app .vedaPhoneBody {
padding: 12px;
}
.new-theme-design.mobile-cmms-app .spark {
width: 27px;
height: 27px;
margin: 2px auto 6px;
position: relative;
}
.new-theme-design.mobile-cmms-app .spark:before,
.new-theme-design.mobile-cmms-app .spark:after {
content: "";
position: absolute;
background: #087fe0;
left: 12px;
top: 1px;
width: 3px;
height: 25px;
border-radius: 50%;
transform: rotate(45deg);
}
.new-theme-design.mobile-cmms-app .spark:after {
transform: rotate(-45deg);
}
.new-theme-design.mobile-cmms-app .listenTitle {
text-align: center;
font-size: 18px;
font-weight: 900;
color: #0e2034;
}
.new-theme-design.mobile-cmms-app .listenSub {
text-align: center;
font-size: 6.6px;
color: #667a88;
}
.new-theme-design.mobile-cmms-app .waveform {
height: 42px;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
margin: 10px 0;
}
.new-theme-design.mobile-cmms-app .waveform span {
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, #147fff, #7c67e8, #f4841e);
animation: wave 1.1s ease-in-out infinite;
}
.new-theme-design.mobile-cmms-app .waveform span:nth-child(3n) {
height: 30px;
}
.new-theme-design.mobile-cmms-app .waveform span:nth-child(3n + 1) {
height: 15px;
animation-delay: 0.12s;
}
.new-theme-design.mobile-cmms-app .waveform span:nth-child(3n + 2) {
height: 23px;
animation-delay: 0.25s;
}
@keyframes wave {
50% {
transform: scaleY(0.55);
opacity: 0.72;
}
}
.new-theme-design.mobile-cmms-app .voiceQuote {
padding: 10px;
background: #f0f4f7;
border-radius: 9px;
font-size: 6.5px;
color: #314b5d;
}
.new-theme-design.mobile-cmms-app .aiRequest {
margin-top: 9px;
padding: 9px;
background: #fff;
border: 1px solid #dee8ee;
border-radius: 9px;
}
.new-theme-design.mobile-cmms-app .aiRequestHead {
display: flex;
justify-content: space-between;
font-size: 6.5px;
font-weight: 900;
}
.new-theme-design.mobile-cmms-app .aiField {
display: grid;
grid-template-columns: 46px 1fr;
gap: 6px;
padding: 3px 0;
border-top: 1px solid #edf2f4;
font-size: 5.3px;
}
.new-theme-design.mobile-cmms-app .aiField:first-of-type {
margin-top: 5px;
}
.new-theme-design.mobile-cmms-app .vedaButtons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 9px;
text-align: center;
font-size: 5px;
color: #536c7d;
}
.new-theme-design.mobile-cmms-app .roundBtn {
width: 32px;
height: 32px;
margin: auto;
border-radius: 50%;
border: 1px solid #dae6ed;
background: #fff;
display: grid;
place-items: center;
font-size: 12px;
color: #087fe0;
}
.new-theme-design.mobile-cmms-app .roundBtn.primary {
background: #087fe0;
color: #fff;
border-color: #087fe0;
box-shadow: 0 0 0 5px rgba(8, 127, 224, 0.1);
}
.new-theme-design.mobile-cmms-app .vedaLeft {
display: grid;
gap: 12px;
}
.new-theme-design.mobile-cmms-app .vedaFeature {
padding: 11px;
border: 1px solid #183c65;
background: rgba(10, 31, 56, 0.84);
border-radius: 13px;
}
.new-theme-design.mobile-cmms-app .vedaFeature strong {
display: block;
color: #2da4ff;
font-size: 9px;
}
.new-theme-design.mobile-cmms-app .vedaFeature span {
font-size: 6.5px;
color: #afc2d6;
}
.new-theme-design.mobile-cmms-app .vedaRight {
display: grid;
gap: 10px;
}
.new-theme-design.mobile-cmms-app .vedaNode {
padding: 13px;
background: rgba(11, 27, 50, 0.88);
border: 1px solid #22456b;
border-radius: 14px;
position: relative;
}
.new-theme-design.mobile-cmms-app .vedaNode:before {
content: "";
position: absolute;
left: -23px;
top: 50%;
width: 22px;
border-top: 1.5px dashed #1b8bea;
}
.new-theme-design.mobile-cmms-app .vedaNode strong {
display: block;
color: #fff;
font-size: 9px;
}
.new-theme-design.mobile-cmms-app .vedaNode span {
display: block;
color: #afc1d1;
font-size: 6.2px;
margin-top: 3px;
}
.new-theme-design.mobile-cmms-app .connectedCard {
position: relative;
overflow: hidden;
padding-top: 62px;
}
.new-theme-design.mobile-cmms-app .connectedCard:before {
content: "";
position: absolute;
left: 20px;
top: 18px;
width: 32px;
height: 32px;
border-radius: 10px;
background: #0e2940;
border: 1px solid #294b62;
box-shadow: inset 0 0 0 8px #112231;
}
.new-theme-design.mobile-cmms-app .connectedCard:after {
content: "";
position: absolute;
left: 29px;
top: 27px;
width: 12px;
height: 12px;
border: 2px solid var(--yellow);
border-radius: 4px;
}
.new-theme-design.mobile-cmms-app .featureIcon {
position: relative;
color: transparent;
}
.new-theme-design.mobile-cmms-app .featureIcon:before {
content: "";
position: absolute;
inset: 10px;
border: 2px solid #101820;
border-radius: 4px;
}
.new-theme-design.mobile-cmms-app .featureIcon:after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background: #101820;
left: 16px;
top: 20px;
box-shadow: 0 5px 0 #101820;
}
.new-theme-design.mobile-cmms-app .useIcon {
color: #0d2030;
font-weight: 950;
}
.new-theme-design.mobile-cmms-app .integration {
box-shadow: 0 8px 20px rgba(6, 59, 92, 0.045);
}
@media (max-width: 1050px) {
.new-theme-design.mobile-cmms-app .techCanvas,
.new-theme-design.mobile-cmms-app .offlineCanvas,
.new-theme-design.mobile-cmms-app .workorderCanvas,
.new-theme-design.mobile-cmms-app .scanCanvas,
.new-theme-design.mobile-cmms-app .vedaGrid {
grid-template-columns: 1fr 230px 1fr;
}
.new-theme-design.mobile-cmms-app .techCanvas .cssPhone,
.new-theme-design.mobile-cmms-app .offlineCanvas .cssPhone,
.new-theme-design.mobile-cmms-app .vedaVisual .cssPhone {
width: 230px;
}
.new-theme-design.mobile-cmms-app .workorderCanvas .cssPhone {
width: 245px;
}
.new-theme-design.mobile-cmms-app .scanCanvas .cssPhone {
width: 225px;
}
}
@media (max-width: 960px) {
.new-theme-design.mobile-cmms-app .cssHeroStage {
margin: auto;
}
.new-theme-design.mobile-cmms-app .techCanvas,
.new-theme-design.mobile-cmms-app .offlineCanvas,
.new-theme-design.mobile-cmms-app .workorderCanvas,
.new-theme-design.mobile-cmms-app .scanCanvas,
.new-theme-design.mobile-cmms-app .vedaGrid {
grid-template-columns: 1fr;
}
.new-theme-design.mobile-cmms-app .sideCallouts,
.new-theme-design.mobile-cmms-app .offlineLeft,
.new-theme-design.mobile-cmms-app .syncStack,
.new-theme-design.mobile-cmms-app .vedaLeft,
.new-theme-design.mobile-cmms-app .vedaRight {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.mobile-cmms-app .techCanvas .cssPhone,
.new-theme-design.mobile-cmms-app .offlineCanvas .cssPhone,
.new-theme-design.mobile-cmms-app .workorderCanvas .cssPhone,
.new-theme-design.mobile-cmms-app .scanCanvas .cssPhone,
.new-theme-design.mobile-cmms-app .vedaVisual .cssPhone {
width: min(265px, 78vw);
margin: auto;
}
.new-theme-design.mobile-cmms-app .callout.left:after,
.new-theme-design.mobile-cmms-app .callout.right:before,
.new-theme-design.mobile-cmms-app .vedaNode:before {
display: none;
}
.new-theme-design.mobile-cmms-app .machinePanel {
max-width: 360px;
margin: auto;
width: 100%;
}
}
@media (max-width: 640px) {
.new-theme-design.mobile-cmms-app .cssHeroStage {
min-height: 505px;
max-width: 350px;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .heroPhoneMain {
left: 50%;
top: 25px;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .cssPhone {
width: 205px;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .heroTools {
left: 0;
top: 300px;
width: 150px;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .heroScan {
right: 0;
bottom: 10px;
width: 150px;
}
.new-theme-design.mobile-cmms-app .cssHeroStage .heroPoint {
right: 2px;
top: 82px;
font-size: 7px;
}
.new-theme-design.mobile-cmms-app .floatUi {
padding: 10px;
}
.new-theme-design.mobile-cmms-app .heroPulse {
width: 270px;
height: 270px;
}
.new-theme-design.mobile-cmms-app .sideCallouts,
.new-theme-design.mobile-cmms-app .offlineLeft,
.new-theme-design.mobile-cmms-app .syncStack,
.new-theme-design.mobile-cmms-app .vedaLeft,
.new-theme-design.mobile-cmms-app .vedaRight {
grid-template-columns: 1fr;
}
.new-theme-design.mobile-cmms-app .uiCanvas {
min-height: 0;
}
.new-theme-design.mobile-cmms-app .techCanvas,
.new-theme-design.mobile-cmms-app .offlineCanvas,
.new-theme-design.mobile-cmms-app .workorderCanvas,
.new-theme-design.mobile-cmms-app .scanCanvas {
padding: 22px 12px;
}
.new-theme-design.mobile-cmms-app .vedaVisual {
padding: 18px 12px;
}
.new-theme-design.mobile-cmms-app .vedaGrid {
gap: 12px;
}
}
@media (max-width: 767px) {
.new-theme-design.mobile-cmms-app .heroVisual {
display: none;
}
.new-theme-design.mobile-cmms-app .final .button.yellow,
.new-theme-design.mobile-cmms-app .final .button.secondary {
width: 100%;
}
.new-theme-design.mobile-cmms-app .final {
padding-left: 24px;
padding-right: 24px;
}
.new-theme-design.mobile-cmms-app .hero {
padding-top: 34px;
}
.awardBand .gap-5 {
gap: 1rem !important;
}
.new-theme-design.mobile-cmms-app .visual-content {
order: 1;
}
.new-theme-design.mobile-cmms-app .visual {
order: 0;
}
}  .new-theme-design.work-request-sla-management *,
.new-theme-design.work-request-sla-management *::before,
.new-theme-design.work-request-sla-management *::after {
box-sizing: border-box;
}
.new-theme-design.work-request-sla-management a {
text-decoration: none;
color: inherit;
}
.new-theme-design.work-request-sla-management button,
.new-theme-design.work-request-sla-management input,
.new-theme-design.work-request-sla-management select,
.new-theme-design.work-request-sla-management textarea {
font: inherit;
}
.new-theme-design.work-request-sla-management .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto;
}
.new-theme-design.work-request-sla-management .skipLink {
position: absolute;
left: -9999px;
top: auto;
}
.new-theme-design.work-request-sla-management .skipLink:focus {
left: 16px;
top: 16px;
z-index: 1000;
background: #fff;
color: #000;
padding: 10px 14px;
border-radius: 8px;
box-shadow: var(--shadow);
}
.new-theme-design.work-request-sla-management .ey {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.work-request-sla-management .ey svg {
width: 15px;
height: 15px;
}
.new-theme-design.work-request-sla-management .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 780px;
}
.new-theme-design.work-request-sla-management .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
white-space: nowrap;
}
.new-theme-design.work-request-sla-management .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.work-request-sla-management .btn:focus-visible {
outline: 3px solid rgba(0, 168, 248, 0.3);
outline-offset: 3px;
}
.new-theme-design.work-request-sla-management .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.work-request-sla-management .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.work-request-sla-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.work-request-sla-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.work-request-sla-management .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.new-theme-design.work-request-sla-management .soft {
background: var(--sky2);
}
.new-theme-design.work-request-sla-management .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.work-request-sla-management .dark h2,
.new-theme-design.work-request-sla-management .dark h3 {
color: #fff;
}
.new-theme-design.work-request-sla-management .dark p {
color: #d6d6d6;
}
.new-theme-design.work-request-sla-management .dark .ey {
background: var(--yellow);
color: #000;
}
.new-theme-design.work-request-sla-management .sectionHead {
max-width: 850px;
margin-bottom: 38px;
text-align: center;
}
.new-theme-design.work-request-sla-management .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.work-request-sla-management .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.new-theme-design.work-request-sla-management .icon2 {
width: 20px;
height: 20px;
display: inline-block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-theme-design.work-request-sla-management .srOnly {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
} .new-theme-design.work-request-sla-management .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.work-request-sla-management .heroGrid {
display: grid;
grid-template-columns: 0.94fr 1.06fr;
gap: 42px;
align-items: center;
}
.new-theme-design.work-request-sla-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.new-theme-design.work-request-sla-management .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.new-theme-design.work-request-sla-management .heroVisual {
min-height: 555px;
position: relative;
}
.new-theme-design.work-request-sla-management .serviceStage {
min-height: 555px;
position: relative;
max-width: 640px;
margin-left: auto;
}
.new-theme-design.work-request-sla-management .serviceStage:before {
content: "";
position: absolute;
inset: 45px 0 20px 38px;
border-radius: 34px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0;
}
.new-theme-design.work-request-sla-management .serviceHalo {
position: absolute;
left: 48%;
top: 68px;
width: 420px;
height: 420px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(0, 168, 248, 0.18),
rgba(0, 168, 248, 0.06) 48%,
transparent 72%);
z-index: 1;
animation: newThemeHaloPulse 4s ease-in-out infinite;
}
.new-theme-design.work-request-sla-management .workspace {
position: absolute;
left: 0;
top: 42px;
width: 540px;
z-index: 3;
background: #fff;
border: 1px solid #c8e0eb;
border-radius: 22px;
box-shadow: 0 26px 58px rgba(6, 59, 92, 0.19);
overflow: hidden;
transform: rotate(-0.7deg);
animation: newThemeWorkspaceFloat 5.2s ease-in-out infinite;
}
.new-theme-design.work-request-sla-management .workspaceTop {
height: 40px;
padding: 0 12px;
background: #f7fafc;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 8px;
}
.new-theme-design.work-request-sla-management .wsDots {
display: flex;
gap: 4px;
}
.new-theme-design.work-request-sla-management .wsDots i {
width: 7px;
height: 7px;
border-radius: 50%;
display: block;
background: #c9d4db;
}
.new-theme-design.work-request-sla-management .wsDots i:first-child {
background: #ff7a72;
}
.new-theme-design.work-request-sla-management .wsDots i:nth-child(2) {
background: #ffc928;
}
.new-theme-design.work-request-sla-management .wsDots i:nth-child(3) {
background: #22bf7a;
}
.new-theme-design.work-request-sla-management .wsTitle {
font-size: 8px;
font-weight: 900;
color: var(--navy);
margin-left: 5px;
}
.new-theme-design.work-request-sla-management .wsTag {
margin-left: auto;
font-size: 6px;
font-weight: 900;
background: var(--greenbg);
color: var(--green);
padding: 4px 6px;
border-radius: 999px;
}
.new-theme-design.work-request-sla-management .moduleStrip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
padding: 10px 10px 8px;
}
.new-theme-design.work-request-sla-management .moduleCard {
border: 1px solid var(--line);
border-radius: 10px;
padding: 9px 7px;
background: #fff;
box-shadow: 0 4px 12px rgba(6, 59, 92, 0.04);
display: flex;
align-items: center;
gap: 6px;
}
.new-theme-design.work-request-sla-management .moduleCard svg {
width: 14px;
height: 14px;
color: #0a56c5;
}
.new-theme-design.work-request-sla-management .moduleCard strong {
font-size: 6.5px;
line-height: 1.1;
}
.new-theme-design.work-request-sla-management .moduleCard:nth-child(1) {
border-top: 3px solid var(--brand);
}
.new-theme-design.work-request-sla-management .moduleCard:nth-child(2) {
border-top: 3px solid var(--red);
}
.new-theme-design.work-request-sla-management .moduleCard:nth-child(3) {
border-top: 3px solid var(--purple);
}
.new-theme-design.work-request-sla-management .moduleCard:nth-child(4) {
border-top: 3px solid var(--yellow);
}
.new-theme-design.work-request-sla-management .wsMetrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
padding: 0 10px 9px;
}
.new-theme-design.work-request-sla-management .wsMetric {
border: 1px solid var(--line);
border-radius: 9px;
padding: 8px;
background: linear-gradient(180deg, #fff, #f8fcfe);
}
.new-theme-design.work-request-sla-management .wsMetric strong {
font-size: 13px;
display: block;
line-height: 1;
}
.new-theme-design.work-request-sla-management .wsMetric span {
font-size: 5.7px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .wsMetric:nth-child(2) strong {
color: var(--red);
}
.new-theme-design.work-request-sla-management .wsMetric:nth-child(3) strong {
color: var(--green);
}
.new-theme-design.work-request-sla-management .wsPanels {
display: grid;
grid-template-columns: 1.18fr 0.82fr;
gap: 8px;
padding: 0 10px 10px;
}
.new-theme-design.work-request-sla-management .wsPanel {
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
min-height: 118px;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .wsPanelHead {
padding: 7px 8px;
border-bottom: 1px solid var(--line);
font-size: 6.2px;
font-weight: 900;
color: var(--navy);
display: flex;
justify-content: space-between;
}
.new-theme-design.work-request-sla-management .wsPanelHead span {
font-size: 5px;
color: var(--brand);
}
.new-theme-design.work-request-sla-management .requestRows {
padding: 5px 7px;
}
.new-theme-design.work-request-sla-management .requestRow {
display: grid;
grid-template-columns: 1fr 44px 38px;
gap: 4px;
align-items: center;
padding: 5px 0;
border-bottom: 1px solid #edf3f6;
font-size: 5.5px;
}
.new-theme-design.work-request-sla-management .requestRow:last-child {
border-bottom: 0;
}
.new-theme-design.work-request-sla-management .requestRow strong {
font-size: 6px;
}
.new-theme-design.work-request-sla-management .miniPriority {
padding: 3px 4px;
border-radius: 999px;
text-align: center;
font-size: 4.8px;
font-weight: 900;
}
.new-theme-design.work-request-sla-management .pCritical {
background: var(--redbg);
color: var(--red);
}
.new-theme-design.work-request-sla-management .pHigh {
background: #fff0df;
color: #c75b00;
}
.new-theme-design.work-request-sla-management .pMedium {
background: var(--yellowsoft);
color: #7b5b00;
}
.new-theme-design.work-request-sla-management .miniState {
font-size: 4.8px;
color: var(--muted);
text-align: right;
}
.new-theme-design.work-request-sla-management .modeChart {
display: grid;
place-items: center;
padding-top: 9px;
}
.new-theme-design.work-request-sla-management .pie {
width: 76px;
height: 76px;
border-radius: 50%;
background: conic-gradient(#41c5e7 0 52%, #ffe34e 52% 90%, #22ce41 90% 100%);
position: relative;
}
.new-theme-design.work-request-sla-management .pie:after {
content: "";
position: absolute;
inset: 21px;
background: #fff;
border-radius: 50%;
}
.new-theme-design.work-request-sla-management .pieLabel {
position: absolute;
z-index: 2;
text-align: center;
font-weight: 900;
font-size: 8px;
color: var(--navy);
}
.new-theme-design.work-request-sla-management .pieLabel span {
display: block;
font-size: 4.8px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .trendPanel {
margin: 0 10px 10px;
border: 1px solid var(--line);
border-radius: 10px;
padding: 7px;
background: linear-gradient(180deg, #fff, #f7fcff);
}
.new-theme-design.work-request-sla-management .trendHead {
font-size: 6.2px;
font-weight: 900;
color: var(--navy);
display: flex;
justify-content: space-between;
}
.new-theme-design.work-request-sla-management .trendHead span {
font-size: 5px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .trendPanel svg {
display: block;
width: 100%;
height: 80px;
margin-top: 2px;
}
.new-theme-design.work-request-sla-management .trendGrid {
stroke: #e7eff4;
stroke-width: 1;
}
.new-theme-design.work-request-sla-management .trendInbound {
fill: none;
stroke: #46bedf;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-theme-design.work-request-sla-management .trendComplete {
fill: none;
stroke: #29b86f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-theme-design.work-request-sla-management .trendArea {
fill: rgba(70, 190, 223, 0.08);
}
.new-theme-design.work-request-sla-management .slaFloat {
position: absolute;
right: -2px;
top: 4px;
width: 218px;
z-index: 7;
background: #111b24;
color: #fff;
border: 1px solid #344854;
border-radius: 18px;
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.25);
overflow: hidden;
animation: newThemeSlaFloat 4.6s ease-in-out infinite;
}
.new-theme-design.work-request-sla-management .slaFloatHead {
padding: 11px 12px;
border-bottom: 1px solid #2b3a45;
display: flex;
align-items: center;
gap: 7px;
}
.new-theme-design.work-request-sla-management .slaFloatHead svg {
color: var(--yellow);
}
.new-theme-design.work-request-sla-management .slaFloatHead strong {
font-size: 9px;
}
.new-theme-design.work-request-sla-management .slaFloatHead span {
margin-left: auto;
background: var(--red);
font-size: 5px;
font-weight: 900;
padding: 4px 5px;
border-radius: 999px;
}
.new-theme-design.work-request-sla-management .slaFloatBody {
padding: 12px;
}
.new-theme-design.work-request-sla-management .slaCase {
font-size: 7px;
color: #bfd1da;
}
.new-theme-design.work-request-sla-management .slaCase strong {
display: block;
color: #fff;
font-size: 10px;
margin-bottom: 2px;
}
.new-theme-design.work-request-sla-management .slaClock {
margin-top: 10px;
background: #0b1218;
border: 1px solid #2c3b46;
border-radius: 11px;
padding: 10px;
}
.new-theme-design.work-request-sla-management .clockLine {
display: flex;
justify-content: space-between;
align-items: end;
}
.new-theme-design.work-request-sla-management .clockLine span {
font-size: 6px;
color: #9cb0ba;
}
.new-theme-design.work-request-sla-management .clockLine strong {
font-size: 17px;
color: var(--yellow);
}
.new-theme-design.work-request-sla-management .slaTrack {
height: 7px;
background: #273743;
border-radius: 999px;
margin-top: 8px;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .slaTrack i {
display: block;
width: 68%;
height: 100%;
background: linear-gradient(90deg, var(--green), var(--yellow));
border-radius: 999px;
animation: newThemeSlaProgress 5s ease-in-out infinite;
}
.new-theme-design.work-request-sla-management .slaMeta {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 5.5px;
color: #b5c6cf;
}
.new-theme-design.work-request-sla-management .onTrack {
color: #4ee0a2 !important;
font-weight: 900;
}
.new-theme-design.work-request-sla-management .mobileRequest {
position: absolute;
right: 18px;
bottom: 0;
width: 185px;
z-index: 8;
background: linear-gradient(145deg, #08131d, #162b3a);
border: 1px solid #304858;
border-radius: 26px;
padding: 7px;
box-shadow: 0 22px 45px rgba(6, 59, 92, 0.25);
animation: newThemePhoneFloat 4.8s ease-in-out infinite;
}
.new-theme-design.work-request-sla-management .mobileScreen {
background: #fff;
border-radius: 20px;
min-height: 306px;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .mobileTop {
height: 20px;
background: #0d0d0d;
display: grid;
place-items: center;
}
.new-theme-design.work-request-sla-management .mobileTop i {
width: 52px;
height: 6px;
background: #333;
border-radius: 99px;
}
.new-theme-design.work-request-sla-management .mobileHead {
padding: 9px 10px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.new-theme-design.work-request-sla-management .mobileHead strong {
font-size: 9px;
display: block;
}
.new-theme-design.work-request-sla-management .mobileHead span {
font-size: 5px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .formBody {
padding: 9px;
}
.new-theme-design.work-request-sla-management .formField {
border: 1px solid var(--line);
border-radius: 7px;
padding: 6px 7px;
margin-bottom: 6px;
}
.new-theme-design.work-request-sla-management .formField label {
display: block;
font-size: 4.7px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .formField b {
font-size: 6.4px;
}
.new-theme-design.work-request-sla-management .formActions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.new-theme-design.work-request-sla-management .formAction {
border: 1px solid var(--line);
border-radius: 7px;
padding: 7px;
text-align: center;
font-size: 5px;
color: var(--navy);
}
.new-theme-design.work-request-sla-management .formAction svg {
display: block;
margin: 0 auto 3px;
width: 13px;
height: 13px;
color: var(--brand);
}
.new-theme-design.work-request-sla-management .submitDemo {
margin-top: 7px;
background: var(--brand);
color: #fff;
border-radius: 7px;
text-align: center;
padding: 7px;
font-size: 6px;
font-weight: 900;
} @keyframes newThemeHaloPulse {
50% {
transform: translateX(-50%) scale(1.05);
}
}
@keyframes newThemeWorkspaceFloat {
50% {
transform: rotate(-0.7deg) translateY(-5px);
}
}
@keyframes newThemeSlaFloat {
50% {
transform: translateY(6px);
}
}
@keyframes newThemePhoneFloat {
50% {
transform: translateY(-6px);
}
}
@keyframes newThemeSlaProgress {
0%,
100% {
width: 58%;
}
50% {
width: 82%;
}
} .new-theme-design.work-request-sla-management .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.work-request-sla-management .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.work-request-sla-management .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.new-theme-design.work-request-sla-management .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
text-align: center;
padding: 5px;
} .new-theme-design.work-request-sla-management .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.work-request-sla-management .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.work-request-sla-management .outcome:nth-child(2):before {
background: var(--yellow);
}
.new-theme-design.work-request-sla-management .outcome:nth-child(3):before {
background: var(--green);
}
.new-theme-design.work-request-sla-management .outcome:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.work-request-sla-management .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.new-theme-design.work-request-sla-management .outcome span {
font-size: 15px;
color: var(--muted);
} .new-theme-design.work-request-sla-management .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.new-theme-design.work-request-sla-management .feature.reverse .visual {
order: -1;
}
.new-theme-design.work-request-sla-management .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.work-request-sla-management .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.work-request-sla-management .fi {
display: flex;
gap: 9px;
font-size: 14px;
}
.new-theme-design.work-request-sla-management .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.work-request-sla-management .visual {
min-height: 385px;
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.14),
transparent 24%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 20px;
position: relative;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .visual:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.new-theme-design.work-request-sla-management .visual>* {
position: relative;
z-index: 2;
} .new-theme-design.work-request-sla-management .intakeVisual {
display: grid;
grid-template-columns: 190px 1fr;
gap: 16px;
align-items: center;
}
.new-theme-design.work-request-sla-management .requestPhone {
background: #101010;
border-radius: 27px;
padding: 7px;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.16);
}
.new-theme-design.work-request-sla-management .requestPhoneInner {
background: #fff;
border-radius: 20px;
min-height: 332px;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .rpHead {
padding: 12px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.new-theme-design.work-request-sla-management .rpHead strong {
display: block;
font-size: 11px;
}
.new-theme-design.work-request-sla-management .rpHead span {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .rpBody {
padding: 10px;
}
.new-theme-design.work-request-sla-management .rpField {
padding: 8px;
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 7px;
}
.new-theme-design.work-request-sla-management .rpField small {
display: block;
color: var(--muted);
font-size: 6px;
}
.new-theme-design.work-request-sla-management .rpField strong {
font-size: 8px;
}
.new-theme-design.work-request-sla-management .rpTools {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.new-theme-design.work-request-sla-management .rpTool {
padding: 7px 3px;
border: 1px solid var(--line);
border-radius: 8px;
text-align: center;
font-size: 5.5px;
}
.new-theme-design.work-request-sla-management .rpTool svg {
width: 15px;
height: 15px;
color: var(--brand);
display: block;
margin: 0 auto 3px;
}
.new-theme-design.work-request-sla-management .rpSubmit {
margin-top: 8px;
padding: 8px;
background: var(--brand);
border-radius: 8px;
color: #fff;
text-align: center;
font-size: 7px;
font-weight: 900;
}
.new-theme-design.work-request-sla-management .channelSide {
display: grid;
gap: 9px;
}
.new-theme-design.work-request-sla-management .channelCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: 34px 1fr;
gap: 9px;
align-items: center;
}
.new-theme-design.work-request-sla-management .channelIcon {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow);
display: grid;
place-items: center;
color: #000;
}
.new-theme-design.work-request-sla-management .channelIcon svg {
width: 17px;
height: 17px;
}
.new-theme-design.work-request-sla-management .channelCard strong {
display: block;
font-size: 10px;
}
.new-theme-design.work-request-sla-management .channelCard span {
font-size: 7px;
color: var(--muted);
} .new-theme-design.work-request-sla-management .routingTop {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.new-theme-design.work-request-sla-management .routingTop strong {
font-size: 11px;
}
.new-theme-design.work-request-sla-management .routingTop span {
font-size: 7px;
color: var(--green);
background: var(--greenbg);
padding: 5px 7px;
border-radius: 999px;
font-weight: 900;
}
.new-theme-design.work-request-sla-management .routingTable {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .routingHeader,
.new-theme-design.work-request-sla-management .routingRow {
display: grid;
grid-template-columns: 1.45fr 0.75fr 0.78fr 0.65fr;
gap: 7px;
align-items: center;
}
.new-theme-design.work-request-sla-management .routingHeader {
padding: 8px 10px;
background: #f4f9fc;
font-size: 6px;
font-weight: 900;
color: var(--navy);
}
.new-theme-design.work-request-sla-management .routingRow {
padding: 9px 10px;
border-top: 1px solid #edf3f6;
font-size: 6.5px;
}
.new-theme-design.work-request-sla-management .routingRow strong {
font-size: 7.2px;
}
.new-theme-design.work-request-sla-management .routeChip {
font-size: 5.4px;
font-weight: 900;
padding: 4px 5px;
border-radius: 999px;
text-align: center;
}
.new-theme-design.work-request-sla-management .routeBlue {
background: #e7f7ff;
color: #0076dd;
}
.new-theme-design.work-request-sla-management .routeOrange {
background: #fff0df;
color: #c75b00;
}
.new-theme-design.work-request-sla-management .routePurple {
background: #f1edff;
color: #6b50d4;
}
.new-theme-design.work-request-sla-management .routeStatus {
font-size: 5.5px;
color: var(--muted);
text-align: right;
}
.new-theme-design.work-request-sla-management .routeFlow {
display: grid;
grid-template-columns: 1fr 28px 1fr 28px 1fr;
align-items: center;
margin-top: 14px;
}
.new-theme-design.work-request-sla-management .flowNode {
background: #0c2333;
color: #fff;
border-radius: 11px;
padding: 10px;
text-align: center;
}
.new-theme-design.work-request-sla-management .flowNode strong {
display: block;
font-size: 8px;
}
.new-theme-design.work-request-sla-management .flowNode span {
font-size: 5.5px;
color: #c9dce6;
}
.new-theme-design.work-request-sla-management .flowArrow {
height: 2px;
background: var(--brand);
position: relative;
}
.new-theme-design.work-request-sla-management .flowArrow:after {
content: "";
position: absolute;
right: -1px;
top: -3px;
border-left: 6px solid var(--brand);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
} .new-theme-design.work-request-sla-management .slaBuilderTop {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
margin-bottom: 10px;
}
.new-theme-design.work-request-sla-management .slaBuilderTop strong {
font-size: 11px;
}
.new-theme-design.work-request-sla-management .slaBuilderTop span {
font-size: 6px;
background: var(--greenbg);
color: var(--green);
font-weight: 900;
padding: 5px 7px;
border-radius: 999px;
}
.new-theme-design.work-request-sla-management .slaTierGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 9px;
}
.new-theme-design.work-request-sla-management .slaTier {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 12px;
position: relative;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .slaTier:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--brand);
}
.new-theme-design.work-request-sla-management .slaTier.critical:before {
background: var(--red);
}
.new-theme-design.work-request-sla-management .slaTier.high:before {
background: var(--orange);
}
.new-theme-design.work-request-sla-management .slaTier.medium:before {
background: var(--yellow);
}
.new-theme-design.work-request-sla-management .slaTier.low:before {
background: var(--green);
}
.new-theme-design.work-request-sla-management .slaTierHead {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.work-request-sla-management .slaTierHead strong {
font-size: 9px;
}
.new-theme-design.work-request-sla-management .slaTierHead span {
font-size: 5px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .targetGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-top: 9px;
}
.new-theme-design.work-request-sla-management .target {
background: #f6fafc;
border-radius: 8px;
padding: 7px 4px;
text-align: center;
}
.new-theme-design.work-request-sla-management .target b {
display: block;
font-size: 9px;
color: var(--navy);
}
.new-theme-design.work-request-sla-management .target small {
font-size: 4.7px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .policyMap {
margin-top: 10px;
background: #0d2535;
color: #fff;
border-radius: 13px;
padding: 11px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.new-theme-design.work-request-sla-management .policyMap div {
border-right: 1px solid #274557;
}
.new-theme-design.work-request-sla-management .policyMap div:last-child {
border-right: 0;
}
.new-theme-design.work-request-sla-management .policyMap strong {
display: block;
color: var(--yellow);
font-size: 8px;
}
.new-theme-design.work-request-sla-management .policyMap span {
font-size: 5.5px;
color: #c7d9e3;
} .new-theme-design.work-request-sla-management .escalationHead {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.work-request-sla-management .escalationHead strong {
font-size: 11px;
}
.new-theme-design.work-request-sla-management .escalationHead span {
font-size: 6px;
background: var(--redbg);
color: var(--red);
font-weight: 900;
padding: 5px 7px;
border-radius: 999px;
}
.new-theme-design.work-request-sla-management .timeline {
margin-top: 15px;
position: relative;
padding-left: 31px;
}
.new-theme-design.work-request-sla-management .timeline:before {
content: "";
position: absolute;
left: 12px;
top: 10px;
bottom: 10px;
width: 2px;
background: #bfd9e7;
}
.new-theme-design.work-request-sla-management .timelineItem {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px 11px;
margin-bottom: 9px;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.new-theme-design.work-request-sla-management .timelineItem:before {
content: "";
position: absolute;
left: -26px;
top: 14px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 5px #eaf8ff;
}
.new-theme-design.work-request-sla-management .timelineItem.warning:before {
background: var(--yellow);
}
.new-theme-design.work-request-sla-management .timelineItem.breach:before {
background: var(--red);
}
.new-theme-design.work-request-sla-management .timelineItem.resolved:before {
background: var(--green);
}
.new-theme-design.work-request-sla-management .timelineItem strong {
font-size: 8px;
display: block;
}
.new-theme-design.work-request-sla-management .timelineItem span {
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .timeBadge {
font-size: 5.5px !important;
font-weight: 900;
color: var(--navy) !important;
background: #f2f8fb;
padding: 5px 6px;
border-radius: 999px;
align-self: start;
}
.new-theme-design.work-request-sla-management .escalationFooter {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.new-theme-design.work-request-sla-management .escalationStat {
background: #0d2535;
color: #fff;
border-radius: 11px;
padding: 10px;
}
.new-theme-design.work-request-sla-management .escalationStat strong {
font-size: 15px;
color: var(--yellow);
display: block;
}
.new-theme-design.work-request-sla-management .escalationStat span {
font-size: 5.8px;
color: #c9dce6;
} .new-theme-design.work-request-sla-management .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.work-request-sla-management .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.work-request-sla-management .cta h3 {
font-size: 19px;
}
.new-theme-design.work-request-sla-management .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.work-request-sla-management .cta p {
color: var(--muted);
font-size: 15px;
margin-top: 5px;
max-width: 660px;
}
.new-theme-design.work-request-sla-management .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.work-request-sla-management .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
} .new-theme-design.work-request-sla-management .aiGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.work-request-sla-management .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 20px;
}
.new-theme-design.work-request-sla-management .prompt {
background: #1b1b1b;
border: 1px solid #303030;
border-radius: 14px;
padding: 12px 13px;
margin-top: 9px;
font-size: 12px;
opacity: 1;
transform: none;
animation: newThemePromptIn 0.4s ease both;
}
.new-theme-design.work-request-sla-management .prompt:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.work-request-sla-management .prompt:nth-child(3) {
animation-delay: 0.3s;
}
.new-theme-design.work-request-sla-management .prompt:nth-child(4) {
animation-delay: 0.45s;
}
.new-theme-design.work-request-sla-management .prompt:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes newThemePromptIn {
from {
opacity: 0;
transform: translateX(8px);
}
to {
opacity: 1;
transform: none;
}
}
.new-theme-design.work-request-sla-management .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 20px;
}
.new-theme-design.work-request-sla-management .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px;
}
.new-theme-design.work-request-sla-management .aiMini strong {
display: block;
color: var(--yellow);
font-size: 15px;
}
.new-theme-design.work-request-sla-management .aiMini span {
font-size: 14px;
color: #cfcfcf;
} .new-theme-design.work-request-sla-management .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.work-request-sla-management .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.new-theme-design.work-request-sla-management .connectedIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: #222;
display: grid;
place-items: center;
color: var(--yellow);
margin-bottom: 13px;
}
.new-theme-design.work-request-sla-management .connectedIcon svg {
width: 21px;
height: 21px;
}
.new-theme-design.work-request-sla-management .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 16px;
margin-bottom: 5px;
}
.new-theme-design.work-request-sla-management .connectedCard span {
font-size: 15px;
color: #d0d0d0;
} .new-theme-design.work-request-sla-management .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.work-request-sla-management .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.new-theme-design.work-request-sla-management .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.new-theme-design.work-request-sla-management .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 13px;
color: #000;
}
.new-theme-design.work-request-sla-management .featureIcon svg {
width: 20px;
height: 20px;
margin-bottom: 0;
}
.new-theme-design.work-request-sla-management .featureCard h3 {
font-size: 17px;
}
.new-theme-design.work-request-sla-management .featureCard p {
font-size: 15px;
color: var(--muted);
margin: 7px 0 0;
} .new-theme-design.work-request-sla-management .reportShowcase {
display: grid;
grid-template-columns: 0.78fr 1.22fr;
gap: 24px;
align-items: stretch;
margin-bottom: 22px;
}
.new-theme-design.work-request-sla-management .reportSummary {
background: #0d2535;
color: #fff;
border-radius: 20px;
padding: 22px;
position: relative;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .reportSummary:before {
content: "";
position: absolute;
right: -50px;
top: -70px;
width: 190px;
height: 190px;
border-radius: 50%;
background: rgba(0, 168, 248, 0.16);
}
.new-theme-design.work-request-sla-management .reportSummary h3 {
color: #fff;
font-size: 20px;
}
.new-theme-design.work-request-sla-management .reportSummary p {
font-size: 12px;
color: #c9dce6;
margin-top: 7px;
}
.new-theme-design.work-request-sla-management .complianceRing {
width: 138px;
height: 138px;
border-radius: 50%;
margin: 22px auto 15px;
background: conic-gradient(var(--green) 0 87%, #294654 87%);
display: grid;
place-items: center;
position: relative;
}
.new-theme-design.work-request-sla-management .complianceRing:after {
content: "";
position: absolute;
inset: 20px;
background: #0d2535;
border-radius: 50%;
}
.new-theme-design.work-request-sla-management .ringVal {
position: relative;
z-index: 2;
text-align: center;
font-size: 28px;
font-weight: 900;
color: #fff;
}
.new-theme-design.work-request-sla-management .ringVal span {
display: block;
font-size: 7px;
color: #bfd1da;
}
.new-theme-design.work-request-sla-management .reportSummaryStats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}
.new-theme-design.work-request-sla-management .reportSummaryStats div {
background: #173747;
border: 1px solid #2c5264;
border-radius: 10px;
padding: 9px;
text-align: center;
}
.new-theme-design.work-request-sla-management .reportSummaryStats strong {
display: block;
color: var(--yellow);
font-size: 13px;
}
.new-theme-design.work-request-sla-management .reportSummaryStats span {
font-size: 5.5px;
color: #c9dce6;
}
.new-theme-design.work-request-sla-management .reportConsole {
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
box-shadow: var(--shadow);
overflow: hidden;
}
.new-theme-design.work-request-sla-management .reportConsoleHead {
padding: 13px 15px;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.work-request-sla-management .reportConsoleHead strong {
font-size: 11px;
}
.new-theme-design.work-request-sla-management .reportConsoleHead span {
font-size: 6px;
color: var(--green);
background: var(--greenbg);
padding: 5px 7px;
border-radius: 999px;
font-weight: 900;
}
.new-theme-design.work-request-sla-management .reportTabs {
display: flex;
gap: 5px;
padding: 10px 13px 0;
}
.new-theme-design.work-request-sla-management .reportTab {
font-size: 6px;
padding: 6px 8px;
border-radius: 7px;
background: #f2f7fa;
color: var(--muted);
font-weight: 900;
}
.new-theme-design.work-request-sla-management .reportTab.active {
background: var(--navy);
color: #fff;
}
.new-theme-design.work-request-sla-management .reportBars {
padding: 16px 18px;
}
.new-theme-design.work-request-sla-management .barRow {
display: grid;
grid-template-columns: 72px 1fr 35px;
gap: 9px;
align-items: center;
margin-bottom: 11px;
}
.new-theme-design.work-request-sla-management .barRow span {
font-size: 6.2px;
}
.new-theme-design.work-request-sla-management .barTrack {
height: 10px;
background: #edf3f6;
border-radius: 999px;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .barTrack i {
display: block;
height: 100%;
border-radius: 999px;
background: var(--brand);
}
.new-theme-design.work-request-sla-management .barRow:nth-child(2) .barTrack i {
background: var(--green);
}
.new-theme-design.work-request-sla-management .barRow:nth-child(3) .barTrack i {
background: var(--yellow);
}
.new-theme-design.work-request-sla-management .barRow:nth-child(4) .barTrack i {
background: var(--purple);
}
.new-theme-design.work-request-sla-management .barRow b {
font-size: 7px;
text-align: right;
}
.new-theme-design.work-request-sla-management .reportFilters {
margin: 0 13px 13px;
border-top: 1px solid var(--line);
padding-top: 11px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.new-theme-design.work-request-sla-management .reportFilters span {
font-size: 5.5px;
padding: 5px 7px;
border: 1px solid var(--line);
border-radius: 7px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .reportGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.new-theme-design.work-request-sla-management .reportCard {
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 14px;
padding: 16px;
min-height: 145px;
transition: 0.2s;
}
.new-theme-design.work-request-sla-management .reportCard:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.new-theme-design.work-request-sla-management .reportCard:nth-child(3n) {
border-bottom-color: var(--green);
}
.new-theme-design.work-request-sla-management .reportCard:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(6, 59, 92, 0.08);
}
.new-theme-design.work-request-sla-management .reportIcon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--sky);
display: grid;
place-items: center;
color: var(--navy);
margin-bottom: 10px;
}
.new-theme-design.work-request-sla-management .reportIcon svg {
width: 18px;
height: 18px;
margin-bottom: 0;
background: transparent;
}
.new-theme-design.work-request-sla-management .reportCard strong {
display: block;
font-size: 18px;
line-height: 1.25;
}
.new-theme-design.work-request-sla-management .reportCard span {
display: block;
font-size: 15px;
color: var(--muted);
margin-top: 6px;
}
.new-theme-design.work-request-sla-management .reportStream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.new-theme-design.work-request-sla-management .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: newThemePulse 2s infinite;
}
.new-theme-design.work-request-sla-management .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.new-theme-design.work-request-sla-management .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: newThemeStream 2.6s linear infinite;
}
@keyframes newThemeStream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
}
@keyframes newThemePulse {
50% {
box-shadow: 0 0 0 9px rgba(18, 203, 136, 0.05);
}
} .new-theme-design.work-request-sla-management .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.work-request-sla-management .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.work-request-sla-management .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
color: #000;
margin-bottom: 14px;
}
.new-theme-design.work-request-sla-management .useIcon svg {
width: 20px;
height: 20px;
margin-bottom: 0;
}
.new-theme-design.work-request-sla-management .useCase h3 {
font-size: 17px;
}
.new-theme-design.work-request-sla-management .useCase p {
color: var(--muted);
font-size: 15px;
margin-top: 7px;
} .new-theme-design.work-request-sla-management .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.new-theme-design.work-request-sla-management .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.new-theme-design.work-request-sla-management .stars {
color: #e1a900;
letter-spacing: 2px;
font-size: 15px;
}
.new-theme-design.work-request-sla-management .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.new-theme-design.work-request-sla-management .review strong {
font-size: 12px;
}
.new-theme-design.work-request-sla-management .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.new-theme-design.work-request-sla-management .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.work-request-sla-management .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.work-request-sla-management .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
} .new-theme-design.work-request-sla-management .faq {
max-width: 900px;
}
.new-theme-design.work-request-sla-management .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.work-request-sla-management .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.work-request-sla-management .faq summary:focus-visible {
outline: 3px solid rgba(0, 168, 248, 0.2);
outline-offset: 5px;
}
.new-theme-design.work-request-sla-management .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
} .new-theme-design.work-request-sla-management .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.work-request-sla-management .final h2 {
color: #fff;
}
.new-theme-design.work-request-sla-management .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.new-theme-design.work-request-sla-management .reveal {
opacity: 1;
transform: none;
transition: 0.6s ease;
}
.js .new-theme-design.work-request-sla-management .reveal {
opacity: 0;
transform: translateY(18px);
}
.js .new-theme-design.work-request-sla-management .reveal.show {
opacity: 1;
transform: none;
} @media (max-width: 1060px) {
.new-theme-design.work-request-sla-management .workspace {
width: 500px;
}
.new-theme-design.work-request-sla-management .slaFloat {
right: -8px;
}
.new-theme-design.work-request-sla-management .mobileRequest {
right: 5px;
}
.new-theme-design.work-request-sla-management .reportGrid {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 960px) {
.new-theme-design.work-request-sla-management .heroGrid,
.new-theme-design.work-request-sla-management .feature,
.new-theme-design.work-request-sla-management .aiGrid,
.new-theme-design.work-request-sla-management .final,
.new-theme-design.work-request-sla-management .reportShowcase {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .feature.reverse .visual {
order: 0;
}
.new-theme-design.work-request-sla-management .serviceStage {
margin: auto;
}
.new-theme-design.work-request-sla-management .outcomes,
.new-theme-design.work-request-sla-management .featureGrid,
.new-theme-design.work-request-sla-management .connectedGrid,
.new-theme-design.work-request-sla-management .useCases {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.work-request-sla-management .logos {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.work-request-sla-management .reviews {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.work-request-sla-management .heroVisual {
margin-top: 15px;
}
.new-theme-design.work-request-sla-management .reportShowcase {
max-width: 760px;
margin: 0 auto 22px;
}
.new-theme-design.work-request-sla-management .final .ctaBtns {
justify-content: flex-start;
}
} @media (max-width: 640px) {
.new-theme-design.work-request-sla-management .wrap {
width: calc(100% - 24px);
}
.new-theme-design.work-request-sla-management section {
padding: 56px 0;
}
.new-theme-design.work-request-sla-management .hero {
padding: 54px 0;
} .new-theme-design.work-request-sla-management .heroVisual,
.new-theme-design.work-request-sla-management .serviceStage {
min-height: 660px;
}
.new-theme-design.work-request-sla-management .workspace {
left: 0;
top: 0;
width: 100%;
transform: none;
animation: none;
}
.new-theme-design.work-request-sla-management .workspaceTop {
height: 34px;
}
.new-theme-design.work-request-sla-management .moduleStrip {
gap: 4px;
}
.new-theme-design.work-request-sla-management .moduleCard {
padding: 7px 4px;
}
.new-theme-design.work-request-sla-management .moduleCard strong {
font-size: 5.5px;
}
.new-theme-design.work-request-sla-management .wsPanels {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .wsPanel:nth-child(2) {
display: none;
}
.new-theme-design.work-request-sla-management .trendPanel svg {
height: 65px;
}
.new-theme-design.work-request-sla-management .slaFloat {
top: 390px;
right: 0;
width: 198px;
}
.new-theme-design.work-request-sla-management .mobileRequest {
left: 0;
right: auto;
bottom: 0;
width: 165px;
}
.new-theme-design.work-request-sla-management .mobileScreen {
min-height: 260px;
}
.new-theme-design.work-request-sla-management .formField {
padding: 5px;
}
.new-theme-design.work-request-sla-management .outcomes,
.new-theme-design.work-request-sla-management .featureGrid,
.new-theme-design.work-request-sla-management .connectedGrid,
.new-theme-design.work-request-sla-management .useCases,
.new-theme-design.work-request-sla-management .logos,
.new-theme-design.work-request-sla-management .aiMini,
.new-theme-design.work-request-sla-management .ratingGrid,
.new-theme-design.work-request-sla-management .reportGrid {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .fl {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .intakeVisual {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .requestPhone {
max-width: 210px;
margin: auto;
}
.new-theme-design.work-request-sla-management .channelSide {
grid-template-columns: 1fr 1fr;
}
.new-theme-design.work-request-sla-management .routingHeader,
.new-theme-design.work-request-sla-management .routingRow {
grid-template-columns: 1.5fr 0.8fr 0.7fr;
}
.new-theme-design.work-request-sla-management .routingHeader span:nth-child(4),
.new-theme-design.work-request-sla-management .routingRow .routeStatus {
display: none;
}
.new-theme-design.work-request-sla-management .routeFlow {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .flowArrow {
height: 24px;
width: 2px;
margin: auto;
}
.new-theme-design.work-request-sla-management .flowArrow:after {
right: -3px;
top: auto;
bottom: -1px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid var(--brand);
border-bottom: 0;
}
.new-theme-design.work-request-sla-management .slaTierGrid {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .targetGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.work-request-sla-management .policyMap {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .policyMap div {
border-right: 0;
border-bottom: 1px solid #274557;
padding-bottom: 7px;
}
.new-theme-design.work-request-sla-management .policyMap div:last-child {
border-bottom: 0;
}
.new-theme-design.work-request-sla-management .cta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.work-request-sla-management .reportSummaryStats {
grid-template-columns: 1fr 1fr;
}
.new-theme-design.work-request-sla-management .reportSummaryStats div:last-child {
grid-column: 1 / -1;
}
.new-theme-design.work-request-sla-management .channelSide {
grid-template-columns: 1fr;
}
.new-theme-design.work-request-sla-management .final {
padding: 30px;
}
.new-theme-design.work-request-sla-management .ratingItem {
border-left: 0;
border-top: 1px solid #2d2d2d;
padding-top: 10px;
}
} @media (prefers-reduced-motion: reduce) {
.new-theme-design.work-request-sla-management *,
.new-theme-design.work-request-sla-management *::before,
.new-theme-design.work-request-sla-management *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
.new-theme-design.work-request-sla-management .ey svg {
display: none;
}
@media (max-width: 767px) {
.new-theme-design.work-request-sla-management .visual {
order: 0;
}
.new-theme-design.work-request-sla-management .visual-content {
order: 1;
}
.new-theme-design.work-request-sla-management .heroVisual {
display: none;
}
.new-theme-design .ctaBtns {
flex-direction: column;
}
.new-theme-design .ctaBtns br {
display: none;
}
.new-theme-design .ctaBtns {
width: 100%;
}
.new-theme-design .ctaBtns button {
width: 100%;
}
.new-theme-design.mobile-cmms-app .sectionHead {
text-align: center;
}
.new-theme-design#demo {
padding-bottom: 0 !important;
}
.new-footer .footer .foter-left {
padding-bottom: 20px !important;
}
}
.new-theme-design.enterprise-cmms-reporting-power-bi .domainCard {
justify-content: flex-start;
}  .new-theme-design.erp-business-integrations .ey {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.erp-business-integrations .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 780px;
}
.new-theme-design.erp-business-integrations .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
cursor: pointer;
}
.new-theme-design.erp-business-integrations .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.erp-business-integrations .btn:focus-visible,
.new-theme-design.erp-business-integrations .filterLabel:focus-visible,
.new-theme-design.erp-business-integrations a:focus-visible,
.new-theme-design.erp-business-integrations summary:focus-visible {
outline: 3px solid rgba(0, 168, 248, 0.35);
outline-offset: 3px;
}
.new-theme-design.erp-business-integrations .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.erp-business-integrations .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.erp-business-integrations .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.erp-business-integrations .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.erp-business-integrations .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.new-theme-design.erp-business-integrations .soft {
background: var(--sky2);
}
.new-theme-design.erp-business-integrations .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.erp-business-integrations .dark h2,
.new-theme-design.erp-business-integrations .dark h3 {
color: #fff;
}
.new-theme-design.erp-business-integrations .dark p {
color: #d6d6d6;
}
.new-theme-design.erp-business-integrations .dark .ey {
background: var(--yellow);
color: #111;
}
.new-theme-design.erp-business-integrations .dark .ey:before {
background: #111;
box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.11);
}
.new-theme-design.erp-business-integrations .sectionHead {
max-width: 950px;
margin-bottom: 38px;
}
.new-theme-design.erp-business-integrations .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.erp-business-integrations .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.new-theme-design.erp-business-integrations .srOnly {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
} .new-theme-design.erp-business-integrations .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.erp-business-integrations .heroGrid {
display: grid;
grid-template-columns: 0.94fr 1.06fr;
gap: 44px;
align-items: center;
}
.new-theme-design.erp-business-integrations .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.new-theme-design.erp-business-integrations .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.new-theme-design.erp-business-integrations .heroVisual {
min-height: 540px;
position: relative;
}
.new-theme-design.erp-business-integrations .integrationStage {
min-height: 540px;
position: relative;
max-width: 640px;
margin-left: auto;
}
.new-theme-design.erp-business-integrations .integrationStage:before {
content: "";
position: absolute;
inset: 34px 0 18px 20px;
border-radius: 34px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0;
}
.new-theme-design.erp-business-integrations .orbit {
position: absolute;
left: 51%;
top: 48%;
border: 1px dashed rgba(0, 127, 197, 0.28);
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.new-theme-design.erp-business-integrations .orbit.one {
width: 390px;
height: 390px;
animation: erpBusinessIntegrationsSpin 34s linear infinite;
}
.new-theme-design.erp-business-integrations .orbit.two {
width: 510px;
height: 510px;
animation: erpBusinessIntegrationsSpinReverse 46s linear infinite;
}
.new-theme-design.erp-business-integrations .flowSvg {
position: absolute;
inset: 18px 0 0 8px;
width: 100%;
height: 500px;
z-index: 2;
overflow: visible;
}
.new-theme-design.erp-business-integrations .flowSvg path {
fill: none;
stroke: rgba(0, 127, 197, 0.34);
stroke-width: 2;
stroke-dasharray: 8 9;
animation: erpBusinessIntegrationsDash 9s linear infinite;
}
.new-theme-design.erp-business-integrations .flowSvg path:nth-child(2) {
stroke: rgba(17, 138, 97, 0.35);
animation-duration: 11s;
}
.new-theme-design.erp-business-integrations .flowSvg path:nth-child(3) {
stroke: rgba(124, 103, 232, 0.37);
animation-duration: 10s;
}
.new-theme-design.erp-business-integrations .flowSvg path:nth-child(4) {
stroke: rgba(244, 132, 30, 0.38);
animation-duration: 8s;
}
.new-theme-design.erp-business-integrations .flowSvg path:nth-child(5) {
stroke: rgba(255, 201, 40, 0.75);
animation-duration: 12s;
}
.new-theme-design.erp-business-integrations .hub {
position: absolute;
left: 51%;
top: 48%;
width: 276px;
transform: translate(-50%, -50%);
z-index: 5;
background: #0c2333;
color: #fff;
border: 1px solid #23465a;
border-radius: 24px;
padding: 20px;
box-shadow: 0 28px 58px rgba(6, 59, 92, 0.25);
animation: erpBusinessIntegrationsHubFloat 4.5s ease-in-out infinite;
}
.new-theme-design.erp-business-integrations .hubTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
border-bottom: 1px solid #284657;
padding-bottom: 13px;
}
.new-theme-design.erp-business-integrations .hubMark {
display: flex;
align-items: center;
gap: 10px;
}
.new-theme-design.erp-business-integrations .hubIcon {
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--yellow);
color: #000;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 950;
box-shadow: 0 0 0 6px rgba(255, 201, 40, 0.09);
}
.new-theme-design.erp-business-integrations .hubTop strong {
display: block;
font-size: 14px;
}
.new-theme-design.erp-business-integrations .hubTop small {
display: block;
color: #afc8d7;
font-size: 8px;
margin-top: 2px;
}
.new-theme-design.erp-business-integrations .live {
font-size: 7px;
font-weight: 900;
color: #7ef2be;
border: 1px solid rgba(126, 242, 190, 0.28);
background: rgba(17, 138, 97, 0.16);
padding: 5px 7px;
border-radius: 999px;
}
.new-theme-design.erp-business-integrations .syncRows {
display: grid;
gap: 8px;
margin-top: 14px;
}
.new-theme-design.erp-business-integrations .syncRow {
display: grid;
grid-template-columns: 8px 1fr auto;
gap: 8px;
align-items: center;
font-size: 8px;
color: #d9e7ee;
}
.new-theme-design.erp-business-integrations .syncDot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(17, 138, 97, 0.13);
}
.new-theme-design.erp-business-integrations .syncRow:nth-child(2) .syncDot {
background: var(--brand);
}
.new-theme-design.erp-business-integrations .syncRow:nth-child(3) .syncDot {
background: var(--yellow);
}
.new-theme-design.erp-business-integrations .syncRow:nth-child(4) .syncDot {
background: var(--purple);
}
.new-theme-design.erp-business-integrations .syncVal {
font-weight: 900;
color: #fff;
}
.new-theme-design.erp-business-integrations .hubFoot {
margin-top: 13px;
height: 7px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .hubFoot span {
display: block;
width: 34%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: erpBusinessIntegrationsStream 2.7s linear infinite;
}
.new-theme-design.erp-business-integrations .integrationNode {
position: absolute;
z-index: 6;
width: 148px;
min-height: 82px;
border-radius: 16px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.12);
display: grid;
place-items: center;
padding: 13px;
animation: erpBusinessIntegrationsNodeFloat 5s ease-in-out infinite;
}
.new-theme-design.erp-business-integrations .integrationNode img {
max-height: 38px;
max-width: 112px;
object-fit: contain;
}
.new-theme-design.erp-business-integrations .integrationNode span {
font-size: 7px;
color: var(--muted);
font-weight: 850;
margin-top: 5px;
}
.new-theme-design.erp-business-integrations .integrationNode.n1 {
left: 0;
top: 54px;
}
.new-theme-design.erp-business-integrations .integrationNode.n2 {
right: 0;
top: 64px;
animation-delay: 0.6s;
}
.new-theme-design.erp-business-integrations .integrationNode.n3 {
left: -5px;
bottom: 62px;
animation-delay: 1.1s;
}
.new-theme-design.erp-business-integrations .integrationNode.n4 {
right: 2px;
bottom: 46px;
animation-delay: 1.6s;
}
.new-theme-design.erp-business-integrations .integrationNode.n5 {
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 170px;
animation: erpBusinessIntegrationsNodeCenter 5s ease-in-out infinite 2s;
}
.new-theme-design.erp-business-integrations .integrationNode.n5 img {
max-width: 145px;
max-height: 42px;
}
.new-theme-design.erp-business-integrations .eventCard {
position: absolute;
right: 18px;
top: 218px;
z-index: 7;
width: 166px;
background: #fff;
border: 1px solid var(--line);
border-left: 4px solid var(--yellow);
border-radius: 14px;
padding: 11px 12px;
box-shadow: 0 15px 35px rgba(6, 59, 92, 0.13);
}
.new-theme-design.erp-business-integrations .eventCard strong {
display: block;
font-size: 9px;
}
.new-theme-design.erp-business-integrations .eventCard span {
display: block;
font-size: 7px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.erp-business-integrations .eventBadge {
display: inline-flex !important;
width: auto !important;
margin-top: 7px !important;
padding: 4px 6px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green) !important;
font-size: 6px !important;
font-weight: 900;
} @keyframes erpBusinessIntegrationsSpin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes erpBusinessIntegrationsSpinReverse {
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes erpBusinessIntegrationsDash {
to {
stroke-dashoffset: -180;
}
}
@keyframes erpBusinessIntegrationsHubFloat {
50% {
transform: translate(-50%, -53%);
}
}
@keyframes erpBusinessIntegrationsNodeFloat {
50% {
transform: translateY(-7px);
}
}
@keyframes erpBusinessIntegrationsNodeCenter {
50% {
transform: translateX(-50%) translateY(-7px);
}
}
@keyframes erpBusinessIntegrationsStream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
} .new-theme-design.erp-business-integrations .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.erp-business-integrations .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.erp-business-integrations .categoryLogos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}
.new-theme-design.erp-business-integrations .categoryLogo {
height: 64px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
text-align: center;
color: #627a8a;
background: #fff;
font-size: 10px;
font-weight: 850;
padding: 8px;
}
.new-theme-design.erp-business-integrations .categoryLogo svg {
width: 22px;
height: 22px;
margin-bottom: 3px;
color: var(--brand);
} .new-theme-design.erp-business-integrations .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.erp-business-integrations .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.erp-business-integrations .outcome:nth-child(2):before {
background: var(--yellow);
}
.new-theme-design.erp-business-integrations .outcome:nth-child(3):before {
background: var(--green);
}
.new-theme-design.erp-business-integrations .outcome:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.erp-business-integrations .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.new-theme-design.erp-business-integrations .outcome span {
font-size: 15px;
color: var(--muted);
} .new-theme-design.erp-business-integrations .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.new-theme-design.erp-business-integrations .feature.reverse .visual {
order: -1;
}
.new-theme-design.erp-business-integrations .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.erp-business-integrations .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.erp-business-integrations .fi {
display: flex;
gap: 9px;
font-size: 15px;
}
.new-theme-design.erp-business-integrations .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .visual {
min-height: 380px;
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.14),
transparent 24%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 20px;
position: relative;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .visual:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.new-theme-design.erp-business-integrations .visual>* {
position: relative;
z-index: 2;
} .new-theme-design.erp-business-integrations .dataMap {
display: grid;
grid-template-columns: 1fr 95px 1fr;
gap: 10px;
align-items: center;
height: 335px;
}
.new-theme-design.erp-business-integrations .systemBox {
height: 290px;
border-radius: 17px;
background: #fff;
border: 1px solid var(--line);
padding: 14px;
box-shadow: 0 10px 24px rgba(6, 59, 92, 0.07);
}
.new-theme-design.erp-business-integrations .systemHead {
display: flex;
align-items: center;
gap: 9px;
padding-bottom: 11px;
border-bottom: 1px solid var(--line);
}
.new-theme-design.erp-business-integrations .systemIcon {
width: 34px;
height: 34px;
border-radius: 10px;
background: #e8f8ff;
color: var(--brand2);
display: grid;
place-items: center;
font-size: 8px;
font-weight: 950;
}
.new-theme-design.erp-business-integrations .systemHead strong {
font-size: 11px;
}
.new-theme-design.erp-business-integrations .systemHead span {
display: block;
font-size: 7px;
color: var(--muted);
}
.new-theme-design.erp-business-integrations .dataRows {
display: grid;
gap: 8px;
margin-top: 13px;
}
.new-theme-design.erp-business-integrations .dataRow {
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 8px;
background: #fcfeff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.new-theme-design.erp-business-integrations .dataRow b {
font-size: 8px;
}
.new-theme-design.erp-business-integrations .dataState {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px var(--greenbg);
}
.new-theme-design.erp-business-integrations .mapping {
display: grid;
gap: 9px;
}
.new-theme-design.erp-business-integrations .mapArrow {
height: 28px;
border-radius: 999px;
background: #0c2333;
position: relative;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .mapArrow:before {
content: "";
position: absolute;
inset: 10px 8px;
background: repeating-linear-gradient(90deg,
var(--brand) 0 10px,
transparent 10px 18px);
animation: erpBusinessIntegrationsMapMove 2.2s linear infinite;
}
.new-theme-design.erp-business-integrations .mapArrow:after {
content: "↔";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #fff;
font-size: 13px;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .mapping small {
text-align: center;
color: var(--muted);
font-size: 7px;
font-weight: 850;
}
@keyframes erpBusinessIntegrationsMapMove {
to {
transform: translateX(18px);
}
} .new-theme-design.erp-business-integrations .financeTop {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.new-theme-design.erp-business-integrations .metric {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 13px;
}
.new-theme-design.erp-business-integrations .metric strong {
display: block;
font-size: 18px;
color: var(--navy);
}
.new-theme-design.erp-business-integrations .metric span {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.erp-business-integrations .ledger {
margin-top: 12px;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .ledgerHead {
display: flex;
justify-content: space-between;
padding: 11px 13px;
background: #0d2535;
color: #fff;
font-size: 9px;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .ledgerRows {
padding: 4px 12px;
}
.new-theme-design.erp-business-integrations .ledgerRow {
display: grid;
grid-template-columns: 1.25fr 0.7fr 0.7fr;
gap: 10px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 8px;
}
.new-theme-design.erp-business-integrations .ledgerRow:last-child {
border-bottom: 0;
}
.new-theme-design.erp-business-integrations .ledgerRow span {
color: var(--muted);
}
.new-theme-design.erp-business-integrations .paid {
display: inline-flex;
justify-self: end;
padding: 4px 6px;
background: var(--greenbg);
color: var(--green) !important;
border-radius: 999px;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .pending {
display: inline-flex;
justify-self: end;
padding: 4px 6px;
background: var(--yellowsoft);
color: #715500 !important;
border-radius: 999px;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .financeLogos {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 14px;
}
.new-theme-design.erp-business-integrations .financeLogos img {
max-height: 28px;
max-width: 90px;
object-fit: contain;
} .new-theme-design.erp-business-integrations .sensorHeader {
display: flex;
justify-content: space-between;
align-items: center;
background: #0d2535;
color: #fff;
border-radius: 14px;
padding: 12px 14px;
}
.new-theme-design.erp-business-integrations .sensorHeader strong {
font-size: 10px;
}
.new-theme-design.erp-business-integrations .sensorHeader span {
font-size: 7px;
color: #afc8d7;
}
.new-theme-design.erp-business-integrations .sensorLive {
font-size: 7px !important;
color: #8bf1c2 !important;
background: rgba(17, 138, 97, 0.15);
padding: 5px 7px;
border-radius: 999px;
}
.new-theme-design.erp-business-integrations .sensorGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 11px;
}
.new-theme-design.erp-business-integrations .sensor {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 12px;
}
.new-theme-design.erp-business-integrations .sensor strong {
display: block;
font-size: 17px;
color: var(--navy);
}
.new-theme-design.erp-business-integrations .sensor span {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.erp-business-integrations .sensorBar {
height: 5px;
background: #e8eef2;
border-radius: 99px;
margin-top: 9px;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .sensorBar i {
display: block;
height: 100%;
border-radius: 99px;
background: var(--brand);
transform-origin: left;
animation: erpBusinessIntegrationsSensorPulse 2.4s ease-in-out infinite;
}
.new-theme-design.erp-business-integrations .sensor:nth-child(2) i {
background: var(--yellow);
animation-delay: 0.4s;
}
.new-theme-design.erp-business-integrations .sensor:nth-child(3) i {
background: var(--purple);
animation-delay: 0.8s;
}
@keyframes erpBusinessIntegrationsSensorPulse {
50% {
transform: scaleX(0.78);
}
}
.new-theme-design.erp-business-integrations .ruleFlow {
margin-top: 12px;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 9px;
align-items: center;
}
.new-theme-design.erp-business-integrations .ruleCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
}
.new-theme-design.erp-business-integrations .ruleCard strong {
display: block;
font-size: 9px;
}
.new-theme-design.erp-business-integrations .ruleCard span {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.erp-business-integrations .ruleArrow {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--yellow);
display: grid;
place-items: center;
font-weight: 950;
animation: erpBusinessIntegrationsRulePulse 2s ease-in-out infinite;
}
@keyframes erpBusinessIntegrationsRulePulse {
50% {
box-shadow: 0 0 0 10px rgba(255, 201, 40, 0.11);
}
}
.new-theme-design.erp-business-integrations .workAlert {
margin-top: 12px;
background: #121a22;
color: #fff;
border-radius: 13px;
padding: 12px;
border-left: 4px solid var(--green);
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.new-theme-design.erp-business-integrations .workAlert strong {
display: block;
font-size: 9px;
}
.new-theme-design.erp-business-integrations .workAlert span {
font-size: 7px;
color: #c8d6de;
}
.new-theme-design.erp-business-integrations .workAlert b {
font-size: 7px;
padding: 5px 7px;
border-radius: 999px;
background: var(--green);
align-self: center;
} .new-theme-design.erp-business-integrations .rfidLayout {
display: grid;
grid-template-columns: 180px 1fr;
gap: 16px;
align-items: center;
}
.new-theme-design.erp-business-integrations .scanner {
height: 310px;
background: #101820;
border: 1px solid #2b3d4a;
border-radius: 26px;
padding: 9px;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
position: relative;
}
.new-theme-design.erp-business-integrations .scannerScreen {
height: 100%;
border-radius: 19px;
background: #fff;
overflow: hidden;
padding: 12px;
}
.new-theme-design.erp-business-integrations .scanTop {
display: flex;
justify-content: space-between;
font-size: 8px;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .rfidTag {
height: 102px;
margin: 17px 0;
border: 1px solid var(--line);
border-radius: 13px;
position: relative;
background: linear-gradient(145deg, #f8fcff, #eaf8ff);
display: grid;
place-items: center;
}
.new-theme-design.erp-business-integrations .rfidTag:before {
content: "RFID";
font-size: 25px;
font-weight: 950;
color: var(--navy);
letter-spacing: 0.12em;
}
.new-theme-design.erp-business-integrations .rfidTag:after {
content: "";
position: absolute;
left: 12px;
right: 12px;
height: 3px;
background: var(--yellow);
box-shadow: 0 0 13px var(--yellow);
animation: erpBusinessIntegrationsScan 2.2s ease-in-out infinite;
}
@keyframes erpBusinessIntegrationsScan {
0%,
100% {
top: 12%;
}
50% {
top: 86%;
}
}
.new-theme-design.erp-business-integrations .scanResult {
padding: 9px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 7px;
margin-bottom: 8px;
}
.new-theme-design.erp-business-integrations .scanResult strong {
display: block;
font-size: 9px;
}
.new-theme-design.erp-business-integrations .scanSuccess {
text-align: center;
color: var(--green);
font-size: 8px;
font-weight: 900;
margin-top: 12px;
}
.new-theme-design.erp-business-integrations .stockSide {
display: grid;
gap: 10px;
}
.new-theme-design.erp-business-integrations .stockCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.new-theme-design.erp-business-integrations .stockCard strong {
display: block;
font-size: 10px;
}
.new-theme-design.erp-business-integrations .stockCard span {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.erp-business-integrations .stockVal {
font-size: 15px !important;
color: var(--navy) !important;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .movement {
height: 105px;
background: #0d2535;
border-radius: 14px;
padding: 12px;
color: #fff;
}
.new-theme-design.erp-business-integrations .movement strong {
font-size: 9px;
}
.new-theme-design.erp-business-integrations .movementPath {
display: flex;
align-items: center;
gap: 7px;
margin-top: 17px;
}
.new-theme-design.erp-business-integrations .moveNode {
width: 35px;
height: 35px;
border-radius: 10px;
background: #173b50;
display: grid;
place-items: center;
font-size: 6px;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .moveLine {
flex: 1;
height: 4px;
border-radius: 99px;
background: #24495c;
position: relative;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .moveLine:after {
content: "";
display: block;
width: 34%;
height: 100%;
background: var(--yellow);
animation: erpBusinessIntegrationsMoveStock 2s linear infinite;
}
@keyframes erpBusinessIntegrationsMoveStock {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
} .new-theme-design.erp-business-integrations .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.erp-business-integrations .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.erp-business-integrations .cta h3 {
font-size: 19px;
}
.new-theme-design.erp-business-integrations .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.erp-business-integrations .cta p {
color: var(--muted);
font-size: 15px;
margin-top: 5px;
max-width: 650px;
}
.new-theme-design.erp-business-integrations .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.erp-business-integrations .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
} .new-theme-design.erp-business-integrations .aiGrid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 44px;
align-items: center;
}
.new-theme-design.erp-business-integrations .aiBrand {
display: flex;
align-items: center;
gap: 14px;
margin-top: 18px;
flex-wrap: wrap;
}
.new-theme-design.erp-business-integrations .aiBrand img {
width: 210px;
max-height: 58px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.new-theme-design.erp-business-integrations .aiPlus {
font-weight: 950;
color: var(--yellow);
font-size: 24px;
}
.new-theme-design.erp-business-integrations .aiDreamz {
font-size: 18px;
font-weight: 900;
}
.new-theme-design.erp-business-integrations .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 20px;
}
.new-theme-design.erp-business-integrations .promptHead {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-theme-design.erp-business-integrations .promptHead strong {
font-size: 13px;
}
.new-theme-design.erp-business-integrations .promptHead span {
font-size: 7px;
color: #8bf1c2;
background: rgba(17, 138, 97, 0.14);
padding: 5px 7px;
border-radius: 999px;
}
.new-theme-design.erp-business-integrations .prompt {
background: #1b1b1b;
border: 1px solid #303030;
border-radius: 11px;
padding: 12px 13px;
margin-top: 9px;
font-size: 14px;
animation: erpBusinessIntegrationsPromptGlow 4s ease-in-out infinite;
}
.new-theme-design.erp-business-integrations .prompt:nth-child(3) {
animation-delay: 0.6s;
}
.new-theme-design.erp-business-integrations .prompt:nth-child(4) {
animation-delay: 1.2s;
}
.new-theme-design.erp-business-integrations .prompt:nth-child(5) {
animation-delay: 1.8s;
}
@keyframes erpBusinessIntegrationsPromptGlow {
50% {
border-color: #555;
transform: translateX(3px);
}
}
.new-theme-design.erp-business-integrations .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 20px;
}
.new-theme-design.erp-business-integrations .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px;
}
.new-theme-design.erp-business-integrations .aiMini strong {
display: block;
color: var(--yellow);
font-size: 15px;
}
.new-theme-design.erp-business-integrations .aiMini span {
font-size: 14px;
color: #cfcfcf;
} .new-theme-design.erp-business-integrations .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.erp-business-integrations .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.new-theme-design.erp-business-integrations .connectedIcon {
width: 38px;
height: 38px;
border-radius: 11px;
background: #252525;
border: 1px solid #393939;
color: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 950;
margin-bottom: 13px;
}
.new-theme-design.erp-business-integrations .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 16px;
margin-bottom: 5px;
}
.new-theme-design.erp-business-integrations .connectedCard span {
font-size: 15px;
color: #d0d0d0;
} .new-theme-design.erp-business-integrations .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.erp-business-integrations .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.new-theme-design.erp-business-integrations .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.new-theme-design.erp-business-integrations .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.new-theme-design.erp-business-integrations .featureCard p {
font-size: 15px;
color: var(--muted);
margin: 7px 0 0;
} .new-theme-design.erp-business-integrations .catalogControl>input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.new-theme-design.erp-business-integrations .catalogShell {
display: grid;
grid-template-columns: 260px 1fr;
gap: 26px;
align-items: start;
border: 1px solid var(--line);
border-radius: 24px;
padding: 26px;
background: #fff;
box-shadow: 0 15px 40px rgba(6, 59, 92, 0.07);
}
.new-theme-design.erp-business-integrations .filterPanel {
display: grid;
gap: 8px;
position: sticky;
top: 18px;
}
.new-theme-design.erp-business-integrations .filterLabel {
min-height: 50px;
border: 1px solid var(--line);
border-radius: 12px;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: #fff;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: 0.18s;
}
.new-theme-design.erp-business-integrations .filterLabel:after {
content: "›";
font-size: 18px;
color: #a0b2bd;
}
.new-theme-design.erp-business-integrations .filterLabel:hover {
border-color: #9fd8f2;
transform: translateX(2px);
}
.new-theme-design.erp-business-integrations #filter-all:checked~.catalogShell label[for="filter-all"],
.new-theme-design.erp-business-integrations #filter-erp:checked~.catalogShell label[for="filter-erp"],
.new-theme-design.erp-business-integrations #filter-accounting:checked~.catalogShell label[for="filter-accounting"],
.new-theme-design.erp-business-integrations #filter-payments:checked~.catalogShell label[for="filter-payments"],
.new-theme-design.erp-business-integrations #filter-rfid:checked~.catalogShell label[for="filter-rfid"],
.new-theme-design.erp-business-integrations #filter-iot:checked~.catalogShell label[for="filter-iot"],
.new-theme-design.erp-business-integrations #filter-inventory:checked~.catalogShell label[for="filter-inventory"],
.new-theme-design.erp-business-integrations #filter-commerce:checked~.catalogShell label[for="filter-commerce"],
.new-theme-design.erp-business-integrations #filter-reviews:checked~.catalogShell label[for="filter-reviews"],
.new-theme-design.erp-business-integrations #filter-ai:checked~.catalogShell label[for="filter-ai"] {
border-color: #79cff7;
box-shadow: 0 0 0 2px rgba(0, 168, 248, 0.1);
color: #0073cf;
background: #f8fdff;
}
.new-theme-design.erp-business-integrations .marketGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 13px;
}
.new-theme-design.erp-business-integrations .integrationCard {
min-height: 172px;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 15px;
display: flex;
flex-direction: column;
transition: 0.2s;
position: relative;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .integrationCard:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: var(--brand);
}
.new-theme-design.erp-business-integrations .integrationCard:nth-child(2n):before {
background: var(--yellow);
}
.new-theme-design.erp-business-integrations .integrationCard:nth-child(3n):before {
background: var(--green);
}
.new-theme-design.erp-business-integrations .integrationCard:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(6, 59, 92, 0.09);
}
.new-theme-design.erp-business-integrations .logoFrame {
height: 62px;
display: grid;
place-items: center;
border-bottom: 1px solid #edf3f6;
margin-bottom: 10px;
}
.new-theme-design.erp-business-integrations .logoFrame img {
max-height: 42px;
max-width: 150px;
object-fit: contain;
}
.new-theme-design.erp-business-integrations .integrationMeta {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: flex-start;
}
.new-theme-design.erp-business-integrations .integrationMeta strong {
font-size: 12px;
}
.new-theme-design.erp-business-integrations .integrationType {
font-size: 6.5px;
font-weight: 900;
padding: 4px 6px;
border-radius: 999px;
background: var(--sky);
color: var(--navy);
}
.new-theme-design.erp-business-integrations .integrationCard p {
font-size: 8.5px;
color: var(--muted);
line-height: 1.45;
margin-top: 6px;
}
.new-theme-design.erp-business-integrations #filter-erp:checked~.catalogShell .integrationCard:not(.erp),
.new-theme-design.erp-business-integrations #filter-accounting:checked~.catalogShell .integrationCard:not(.accounting),
.new-theme-design.erp-business-integrations #filter-payments:checked~.catalogShell .integrationCard:not(.payments),
.new-theme-design.erp-business-integrations #filter-rfid:checked~.catalogShell .integrationCard:not(.rfid),
.new-theme-design.erp-business-integrations #filter-iot:checked~.catalogShell .integrationCard:not(.iot),
.new-theme-design.erp-business-integrations #filter-inventory:checked~.catalogShell .integrationCard:not(.inventory),
.new-theme-design.erp-business-integrations #filter-commerce:checked~.catalogShell .integrationCard:not(.commerce),
.new-theme-design.erp-business-integrations #filter-reviews:checked~.catalogShell .integrationCard:not(.reviews),
.new-theme-design.erp-business-integrations #filter-ai:checked~.catalogShell .integrationCard:not(.ai) {
display: none;
}
.new-theme-design.erp-business-integrations .catalogNote {
margin-top: 16px;
padding: 12px 14px;
border-radius: 12px;
background: var(--sky2);
border: 1px solid var(--line);
font-size: 10px;
color: var(--muted);
} .new-theme-design.erp-business-integrations .steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
counter-reset: step;
}
.new-theme-design.erp-business-integrations .step {
counter-increment: step;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
position: relative;
}
.new-theme-design.erp-business-integrations .step:before {
content: "0" counter(step);
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: #0c2333;
color: var(--yellow);
font-weight: 950;
font-size: 11px;
margin-bottom: 13px;
}
.new-theme-design.erp-business-integrations .step:not(:last-child):after {
content: "";
position: absolute;
top: 40px;
right: -14px;
width: 14px;
height: 2px;
background: #bbd8e7;
}
.new-theme-design.erp-business-integrations .step h3 {
font-size: 17px;
}
.new-theme-design.erp-business-integrations .step p {
font-size: 15px;
color: var(--muted);
margin-top: 7px;
} .new-theme-design.erp-business-integrations .caseGrid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 32px;
align-items: stretch;
}
.new-theme-design.erp-business-integrations .caseSummary {
background: #0d2535;
color: #fff;
border-radius: 22px;
padding: 28px;
position: relative;
overflow: hidden;
}
.new-theme-design.erp-business-integrations .caseSummary:before {
content: "";
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
right: -80px;
top: -80px;
background: rgba(0, 168, 248, 0.12);
}
.new-theme-design.erp-business-integrations .caseSummary h3 {
color: #fff;
font-size: 28px;
position: relative;
}
.new-theme-design.erp-business-integrations .caseSummary p {
color: #c9dae3;
margin-top: 13px;
font-size: 14px;
position: relative;
}
.new-theme-design.erp-business-integrations .caseTags {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 18px;
position: relative;
}
.new-theme-design.erp-business-integrations .caseTags span {
padding: 6px 8px;
border-radius: 999px;
background: #173b50;
border: 1px solid #28526a;
font-size: 8px;
font-weight: 850;
}
.new-theme-design.erp-business-integrations .caseFlow {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: 24px;
}
.new-theme-design.erp-business-integrations .flowStep {
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.erp-business-integrations .flowStep:last-child {
border-bottom: 0;
}
.new-theme-design.erp-business-integrations .flowNum {
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 950;
}
.new-theme-design.erp-business-integrations .flowStep strong {
display: block;
font-size: 13px;
}
.new-theme-design.erp-business-integrations .flowStep span {
font-size: 10px;
color: var(--muted);
} .new-theme-design.erp-business-integrations .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.erp-business-integrations .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.erp-business-integrations .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.erp-business-integrations .useCase p {
color: var(--muted);
font-size: 15px;
margin-top: 7px;
} .new-theme-design.erp-business-integrations .proofBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.erp-business-integrations .proofGrid {
display: grid;
grid-template-columns: 1.35fr repeat(6, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.erp-business-integrations .proofItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.new-theme-design.erp-business-integrations .proofItem strong {
display: block;
color: var(--yellow);
font-size: 12px;
}
.new-theme-design.erp-business-integrations .proofItem span {
font-size: 8px;
color: #bfbfbf;
} .new-theme-design.erp-business-integrations .faq {
max-width: 920px;
}
.new-theme-design.erp-business-integrations .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.erp-business-integrations .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.erp-business-integrations .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
} .new-theme-design.erp-business-integrations .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.erp-business-integrations .final h2 {
color: #fff;
}
.new-theme-design.erp-business-integrations .final p {
color: #ddd;
margin-top: 12px;
max-width: 740px;
} @media (max-width: 1050px) {
.new-theme-design.erp-business-integrations .categoryLogos {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.erp-business-integrations .marketGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.erp-business-integrations .proofGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.erp-business-integrations .proofGrid>div:first-child {
grid-column: 1/-1;
text-align: center;
}
.new-theme-design.erp-business-integrations .proofItem {
border-left: 0;
}
}
@media (max-width: 960px) {
.new-theme-design.erp-business-integrations .heroGrid,
.new-theme-design.erp-business-integrations .feature,
.new-theme-design.erp-business-integrations .aiGrid,
.new-theme-design.erp-business-integrations .final,
.new-theme-design.erp-business-integrations .caseGrid {
grid-template-columns: 1fr;
}
.new-theme-design.erp-business-integrations .feature.reverse .visual {
order: 0;
}
.new-theme-design.erp-business-integrations .integrationStage {
margin: auto;
}
.new-theme-design.erp-business-integrations .outcomes,
.new-theme-design.erp-business-integrations .featureGrid,
.new-theme-design.erp-business-integrations .connectedGrid,
.new-theme-design.erp-business-integrations .useCases,
.new-theme-design.erp-business-integrations .steps {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.erp-business-integrations .catalogShell {
grid-template-columns: 1fr;
}
.new-theme-design.erp-business-integrations .filterPanel {
position: static;
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.erp-business-integrations .filterLabel {
min-height: 44px;
font-size: 11px;
}
.new-theme-design.erp-business-integrations .step:after {
display: none;
}
}
@media (max-width: 720px) {
.new-theme-design.erp-business-integrations .marketGrid {
grid-template-columns: 1fr;
}
.new-theme-design.erp-business-integrations .filterPanel {
display: flex;
overflow-x: auto;
padding-bottom: 5px;
scroll-snap-type: x proximity;
}
.new-theme-design.erp-business-integrations .filterLabel {
flex: 0 0 160px;
scroll-snap-align: start;
}
.new-theme-design.erp-business-integrations .dataMap {
grid-template-columns: 1fr;
height: auto;
}
.new-theme-design.erp-business-integrations .mapping {
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
.new-theme-design.erp-business-integrations .mapArrow {
transform: rotate(90deg);
}
.new-theme-design.erp-business-integrations .systemBox {
height: auto;
}
.new-theme-design.erp-business-integrations .rfidLayout {
grid-template-columns: 1fr;
}
.new-theme-design.erp-business-integrations .scanner {
max-width: 230px;
margin: auto;
width: 100%;
}
.new-theme-design.erp-business-integrations .heroVisual {
min-height: 480px;
}
.new-theme-design.erp-business-integrations .integrationStage {
min-height: 480px;
transform: scale(0.88);
transform-origin: center top;
}
.new-theme-design.erp-business-integrations .integrationNode.n1 {
left: 7px;
}
.new-theme-design.erp-business-integrations .integrationNode.n2 {
right: 7px;
}
.new-theme-design.erp-business-integrations .integrationNode.n3 {
left: 7px;
}
.new-theme-design.erp-business-integrations .integrationNode.n4 {
right: 7px;
}
.new-theme-design.erp-business-integrations .eventCard {
display: none;
}
}
@media (max-width: 640px) {
.new-theme-design.erp-business-integrations .wrap {
width: calc(100% - 24px);
}
.new-theme-design.erp-business-integrations section {
padding: 56px 0;
}
.new-theme-design.erp-business-integrations .hero {
padding: 54px 0;
} .new-theme-design.erp-business-integrations .aiBrand {
gap: 9px;
}
.new-theme-design.erp-business-integrations .aiBrand img {
width: 180px;
}
.new-theme-design.erp-business-integrations .aiPlus {
font-size: 20px;
}
.new-theme-design.erp-business-integrations .aiDreamz {
font-size: 15px;
}
.new-theme-design.erp-business-integrations .fl,
.new-theme-design.erp-business-integrations .outcomes,
.new-theme-design.erp-business-integrations .featureGrid,
.new-theme-design.erp-business-integrations .connectedGrid,
.new-theme-design.erp-business-integrations .useCases,
.new-theme-design.erp-business-integrations .steps,
.new-theme-design.erp-business-integrations .aiMini,
.new-theme-design.erp-business-integrations .sensorGrid,
.new-theme-design.erp-business-integrations .financeTop,
.new-theme-design.erp-business-integrations .categoryLogos,
.new-theme-design.erp-business-integrations .proofGrid {
grid-template-columns: 1fr;
}
.new-theme-design.erp-business-integrations .cta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.erp-business-integrations .catalogShell {
padding: 15px;
}
.new-theme-design.erp-business-integrations .visual {
min-height: auto;
}
.new-theme-design.erp-business-integrations .integrationStage {
width: 430px;
left: 50%;
margin-left: -215px;
}
.new-theme-design.erp-business-integrations .orbit.two {
width: 440px;
height: 440px;
}
.new-theme-design.erp-business-integrations .orbit.one {
width: 330px;
height: 330px;
}
.new-theme-design.erp-business-integrations .hub {
width: 230px;
padding: 16px;
}
.new-theme-design.erp-business-integrations .integrationNode {
width: 125px;
}
.new-theme-design.erp-business-integrations .integrationNode.n5 {
width: 150px;
}
.new-theme-design.erp-business-integrations .flowSvg {
inset: 0;
}
.new-theme-design.erp-business-integrations .proofItem {
padding: 9px 0;
border-top: 1px solid #2d2d2d;
}
.new-theme-design.erp-business-integrations .proofGrid>div:first-child {
grid-column: auto;
}
.new-theme-design.erp-business-integrations .caseSummary,
.new-theme-design.erp-business-integrations .caseFlow {
padding: 20px;
}
.new-theme-design.erp-business-integrations .final {
padding: 30px;
}
.new-theme-design.erp-business-integrations .final h2 {
font-size: 34px;
}
}
@media (max-width: 470px) {
.new-theme-design.erp-business-integrations .integrationStage {
transform: scale(0.72);
min-height: 390px;
}
.new-theme-design.erp-business-integrations .heroVisual {
min-height: 390px;
}
.new-theme-design.erp-business-integrations .categoryLogos {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.erp-business-integrations .marketGrid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.new-theme-design.erp-business-integrations {
scroll-behavior: auto;
}
.new-theme-design.erp-business-integrations *,
.new-theme-design.erp-business-integrations *:before,
.new-theme-design.erp-business-integrations *:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
@media (max-width: 767px) {
.new-theme-design.erp-business-integrations .heroVisual {
display: none;
}
.new-theme-design.erp-business-integrations .sectionHead {
text-align: center;
}
.new-theme-design.erp-business-integrations .wrap.feature {
margin-top: 0;
}
.new-theme-design.erp-business-integrations .visual {
order: 0;
}
.new-theme-design.erp-business-integrations .visual-content {
order: 1;
}
.new-theme-design.erp-business-integrations section {
padding-bottom: 34px;
}
}  .new-theme-design.helpdesk-management-sla-software .ey {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
color: #000;
}
.new-theme-design.helpdesk-management-sla-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 790px;
}
.new-theme-design.helpdesk-management-sla-software .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
cursor: pointer;
}
.new-theme-design.helpdesk-management-sla-software .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.helpdesk-management-sla-software .btn:focus-visible,
a:focus-visible,
summary:focus-visible,
.new-theme-design.helpdesk-management-sla-software .reportLabel:focus-visible {
outline: 3px solid rgba(0, 168, 248, 0.35);
outline-offset: 3px;
}
.new-theme-design.helpdesk-management-sla-software .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.helpdesk-management-sla-software .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.helpdesk-management-sla-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.helpdesk-management-sla-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.helpdesk-management-sla-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.new-theme-design.helpdesk-management-sla-software .soft {
background: var(--sky2);
}
.new-theme-design.helpdesk-management-sla-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .dark h2,
.new-theme-design.helpdesk-management-sla-software .dark h3 {
color: #fff;
}
.new-theme-design.helpdesk-management-sla-software .dark p {
color: #d6d6d6;
}
.new-theme-design.helpdesk-management-sla-software .dark .new-theme-design.helpdesk-management-sla-software .ey {
background: var(--yellow);
color: #111;
}
.new-theme-design.helpdesk-management-sla-software .dark .new-theme-design.helpdesk-management-sla-software .ey:before {
background: #111;
box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.11);
}
.new-theme-design.helpdesk-management-sla-software .sectionHead {
max-width: 860px;
margin-bottom: 38px;
}
.new-theme-design.helpdesk-management-sla-software .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.helpdesk-management-sla-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.new-theme-design.helpdesk-management-sla-software .srOnly {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
} .new-theme-design.helpdesk-management-sla-software .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 72%,
rgba(255, 201, 40, 0.17),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .heroGrid {
display: grid;
grid-template-columns: 0.94fr 1.06fr;
gap: 44px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.new-theme-design.helpdesk-management-sla-software .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.new-theme-design.helpdesk-management-sla-software .heroVisual {
min-height: 550px;
position: relative;
}
.new-theme-design.helpdesk-management-sla-software .helpdeskStage {
min-height: 550px;
position: relative;
max-width: 650px;
margin-left: auto;
}
.new-theme-design.helpdesk-management-sla-software .helpdeskStage:before {
content: "";
position: absolute;
inset: 28px 0 18px 20px;
border-radius: 34px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
}
.new-theme-design.helpdesk-management-sla-software .deskBoard {
position: absolute;
left: 8px;
top: 72px;
width: 470px;
z-index: 4;
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 26px 58px rgba(6, 59, 92, 0.2);
overflow: hidden;
animation: boardFloat 5s ease-in-out infinite;
}
.new-theme-design.helpdesk-management-sla-software .boardHead {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: #0d2535;
color: #fff;
}
.new-theme-design.helpdesk-management-sla-software .boardBrand {
display: flex;
align-items: center;
gap: 10px;
}
.new-theme-design.helpdesk-management-sla-software .boardMark {
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--yellow);
color: #000;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 950;
}
.new-theme-design.helpdesk-management-sla-software .boardHead strong {
display: block;
font-size: 12px;
}
.new-theme-design.helpdesk-management-sla-software .boardHead small {
display: block;
color: #afc8d7;
font-size: 7px;
}
.new-theme-design.helpdesk-management-sla-software .live {
font-size: 7px;
font-weight: 900;
color: #7ef2be;
border: 1px solid rgba(126, 242, 190, 0.28);
background: rgba(17, 138, 97, 0.16);
padding: 5px 7px;
border-radius: 999px;
}
.new-theme-design.helpdesk-management-sla-software .boardBody {
padding: 14px;
}
.new-theme-design.helpdesk-management-sla-software .queueMetrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.new-theme-design.helpdesk-management-sla-software .queueMetric {
padding: 10px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fafdff;
}
.new-theme-design.helpdesk-management-sla-software .queueMetric strong {
display: block;
color: var(--navy);
font-size: 17px;
}
.new-theme-design.helpdesk-management-sla-software .queueMetric span {
font-size: 6.5px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .queueTitle {
display: flex;
justify-content: space-between;
align-items: center;
margin: 13px 1px 7px;
font-size: 8px;
font-weight: 900;
}
.new-theme-design.helpdesk-management-sla-software .queueTitle span {
font-size: 6px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .ticketRows {
display: grid;
gap: 7px;
}
.new-theme-design.helpdesk-management-sla-software .ticketRow {
display: grid;
grid-template-columns: 7px 1fr auto;
gap: 9px;
align-items: center;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
}
.new-theme-design.helpdesk-management-sla-software .priorityDot {
width: 7px;
height: 35px;
border-radius: 99px;
background: var(--red);
}
.new-theme-design.helpdesk-management-sla-software .ticketRow:nth-child(2) .new-theme-design.helpdesk-management-sla-software .priorityDot {
background: var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .ticketRow:nth-child(3) .new-theme-design.helpdesk-management-sla-software .priorityDot {
background: var(--brand);
}
.new-theme-design.helpdesk-management-sla-software .ticketRow:nth-child(4) .new-theme-design.helpdesk-management-sla-software .priorityDot {
background: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .ticketRow strong {
display: block;
font-size: 8px;
}
.new-theme-design.helpdesk-management-sla-software .ticketRow small {
display: block;
font-size: 6px;
color: var(--muted);
margin-top: 2px;
}
.new-theme-design.helpdesk-management-sla-software .timer {
font-size: 7px;
font-weight: 950;
padding: 5px 7px;
border-radius: 999px;
background: var(--redbg);
color: var(--red);
}
.new-theme-design.helpdesk-management-sla-software .ticketRow:nth-child(2) .new-theme-design.helpdesk-management-sla-software .timer {
background: var(--yellowsoft);
color: #765900;
}
.new-theme-design.helpdesk-management-sla-software .ticketRow:nth-child(3) .new-theme-design.helpdesk-management-sla-software .timer,
.new-theme-design.helpdesk-management-sla-software .ticketRow:nth-child(4) .new-theme-design.helpdesk-management-sla-software .timer {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .boardFoot {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
margin-top: 11px;
padding: 10px 11px;
border-radius: 10px;
background: #f2fafe;
}
.new-theme-design.helpdesk-management-sla-software .boardFoot span {
font-size: 7px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .boardFoot strong {
font-size: 8px;
color: var(--navy);
}
.new-theme-design.helpdesk-management-sla-software .requestPhone {
position: absolute;
right: 0;
top: 18px;
width: 215px;
z-index: 7;
background: #111c24;
border: 1px solid #304858;
border-radius: 30px;
padding: 8px;
box-shadow: 0 24px 52px rgba(6, 59, 92, 0.26);
animation: phoneFloat 4.7s ease-in-out infinite;
}
.new-theme-design.helpdesk-management-sla-software .phoneScreen {
background: #fff;
border-radius: 22px;
min-height: 414px;
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .phoneTop {
height: 23px;
background: #0c0c0c;
display: flex;
align-items: center;
justify-content: center;
}
.new-theme-design.helpdesk-management-sla-software .notch {
width: 65px;
height: 7px;
border-radius: 99px;
background: #333;
}
.new-theme-design.helpdesk-management-sla-software .phoneHead {
padding: 12px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.new-theme-design.helpdesk-management-sla-software .phoneHead strong {
display: block;
font-size: 10px;
}
.new-theme-design.helpdesk-management-sla-software .phoneHead small {
font-size: 6px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .requestForm {
padding: 11px;
}
.new-theme-design.helpdesk-management-sla-software .formField {
padding: 8px 9px;
border: 1px solid var(--line);
border-radius: 9px;
margin-bottom: 7px;
}
.new-theme-design.helpdesk-management-sla-software .formField span {
display: block;
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .formField strong {
display: block;
font-size: 7.5px;
margin-top: 2px;
}
.new-theme-design.helpdesk-management-sla-software .formSplit {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.new-theme-design.helpdesk-management-sla-software .voiceBar {
margin-top: 8px;
height: 38px;
border-radius: 10px;
background: #0d2535;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 7px;
font-weight: 850;
}
.new-theme-design.helpdesk-management-sla-software .voicePulse {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--yellow);
color: #000;
display: grid;
place-items: center;
font-size: 7px;
animation: voicePulse 2s ease-in-out infinite;
}
.new-theme-design.helpdesk-management-sla-software .submitMock {
height: 31px;
border-radius: 9px;
background: var(--brand2);
color: #fff;
display: grid;
place-items: center;
font-size: 7px;
font-weight: 900;
margin-top: 8px;
}
.new-theme-design.helpdesk-management-sla-software .slaFloat {
position: absolute;
right: 15px;
bottom: 21px;
width: 176px;
z-index: 8;
background: #0d2535;
color: #fff;
border: 1px solid #284657;
border-radius: 16px;
padding: 13px;
box-shadow: 0 18px 38px rgba(6, 59, 92, 0.2);
animation: cardFloat 5s ease-in-out infinite;
}
.new-theme-design.helpdesk-management-sla-software .slaFloatTop {
display: grid;
grid-template-columns: 58px 1fr;
gap: 11px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .slaRing {
width: 58px;
height: 58px;
border-radius: 50%;
background: conic-gradient(var(--yellow) 0 68%, #23475a 68%);
display: grid;
place-items: center;
position: relative;
}
.new-theme-design.helpdesk-management-sla-software .slaRing:after {
content: "";
position: absolute;
inset: 9px;
border-radius: 50%;
background: #0d2535;
}
.new-theme-design.helpdesk-management-sla-software .slaRing strong {
position: relative;
z-index: 1;
color: var(--yellow);
font-size: 11px;
}
.new-theme-design.helpdesk-management-sla-software .slaFloatTop b {
display: block;
font-size: 9px;
}
.new-theme-design.helpdesk-management-sla-software .slaFloatTop span {
display: block;
font-size: 6px;
color: #bfd2dc;
margin-top: 2px;
}
.new-theme-design.helpdesk-management-sla-software .slaAlert {
margin-top: 10px;
padding: 7px 8px;
border-radius: 9px;
background: rgba(226, 87, 87, 0.14);
border-left: 3px solid var(--red);
font-size: 6.5px;
color: #ffdada;
}
.new-theme-design.helpdesk-management-sla-software .escalationCard {
position: absolute;
left: -2px;
bottom: 14px;
z-index: 8;
width: 190px;
background: #fff;
border: 1px solid var(--line);
border-left: 4px solid var(--red);
border-radius: 14px;
padding: 11px 12px;
box-shadow: 0 15px 35px rgba(6, 59, 92, 0.13);
}
.new-theme-design.helpdesk-management-sla-software .escalationCard strong {
display: block;
font-size: 9px;
}
.new-theme-design.helpdesk-management-sla-software .escalationCard span {
display: block;
font-size: 6.5px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.helpdesk-management-sla-software .escalationCard b {
display: inline-flex;
margin-top: 7px;
padding: 4px 6px;
border-radius: 999px;
background: var(--redbg);
color: var(--red);
font-size: 6px;
}
@keyframes boardFloat {
50% {
transform: translateY(-5px);
}
}
@keyframes phoneFloat {
50% {
transform: translateY(-8px);
}
}
@keyframes cardFloat {
50% {
transform: translateY(6px);
}
}
@keyframes voicePulse {
50% {
box-shadow: 0 0 0 9px rgba(255, 201, 40, 0.11);
}
} .new-theme-design.helpdesk-management-sla-software .channelStrip {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.new-theme-design.helpdesk-management-sla-software .channelLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.new-theme-design.helpdesk-management-sla-software .channels {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}
.new-theme-design.helpdesk-management-sla-software .channel {
height: 70px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
text-align: center;
color: #627a8a;
background: #fff;
font-size: 9px;
font-weight: 850;
padding: 8px;
}
.new-theme-design.helpdesk-management-sla-software .channelIcon {
width: 28px;
height: 28px;
border-radius: 9px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
font-size: 7px;
font-weight: 950;
margin-bottom: 3px;
}
.new-theme-design.helpdesk-management-sla-software .channel:nth-child(2n) .new-theme-design.helpdesk-management-sla-software .channelIcon {
background: var(--yellowsoft);
color: #775900;
}
.new-theme-design.helpdesk-management-sla-software .channel:nth-child(3n) .new-theme-design.helpdesk-management-sla-software .channelIcon {
background: var(--greenbg);
color: var(--green);
} .new-theme-design.helpdesk-management-sla-software .answerBox {
max-width: 940px;
margin: 0 auto 28px;
padding: 18px 20px;
border: 1px solid #bfe4f5;
border-left: 5px solid var(--brand);
border-radius: 15px;
background: #fff;
}
.new-theme-design.helpdesk-management-sla-software .answerBox strong {
display: block;
font-size: 16px;
color: var(--navy);
margin-bottom: 5px;
}
.new-theme-design.helpdesk-management-sla-software .answerBox p {
font-size: 15px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.new-theme-design.helpdesk-management-sla-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.helpdesk-management-sla-software .outcome:nth-child(2):before {
background: var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .outcome:nth-child(3):before {
background: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .outcome:nth-child(4):before {
background: var(--purple);
}
.new-theme-design.helpdesk-management-sla-software .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.new-theme-design.helpdesk-management-sla-software .outcome span {
font-size: 15px;
color: var(--muted);
} .new-theme-design.helpdesk-management-sla-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .feature.reverse .new-theme-design.helpdesk-management-sla-software .visual {
order: -1;
}
.new-theme-design.helpdesk-management-sla-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px;
}
.new-theme-design.helpdesk-management-sla-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
margin-top: 22px;
}
.new-theme-design.helpdesk-management-sla-software .fi {
display: flex;
gap: 9px;
font-size: 14px;
}
.new-theme-design.helpdesk-management-sla-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
}
.new-theme-design.helpdesk-management-sla-software .visual {
min-height: 390px;
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.14),
transparent 24%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 20px;
position: relative;
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .visual:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 168, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.new-theme-design.helpdesk-management-sla-software .visual>* {
position: relative;
z-index: 2;
} .new-theme-design.helpdesk-management-sla-software .intakeLayout {
display: grid;
grid-template-columns: 1fr 80px 1.15fr;
gap: 12px;
align-items: center;
min-height: 345px;
}
.new-theme-design.helpdesk-management-sla-software .intakeChannels {
display: grid;
gap: 8px;
}
.new-theme-design.helpdesk-management-sla-software .intakeChannel {
display: grid;
grid-template-columns: 31px 1fr;
gap: 9px;
align-items: center;
padding: 10px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
}
.new-theme-design.helpdesk-management-sla-software .intakeChannel i {
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
font-style: normal;
font-size: 6px;
font-weight: 950;
}
.new-theme-design.helpdesk-management-sla-software .intakeChannel:nth-child(2) i {
background: var(--yellowsoft);
color: #765900;
}
.new-theme-design.helpdesk-management-sla-software .intakeChannel:nth-child(3) i {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .intakeChannel:nth-child(4) i {
background: #f1eeff;
color: var(--purple);
}
.new-theme-design.helpdesk-management-sla-software .intakeChannel strong {
display: block;
font-size: 9px;
}
.new-theme-design.helpdesk-management-sla-software .intakeChannel span {
display: block;
font-size: 6.5px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .intakeArrows {
display: grid;
gap: 10px;
}
.new-theme-design.helpdesk-management-sla-software .flowArrow {
height: 24px;
border-radius: 999px;
background: #0d2535;
position: relative;
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .flowArrow:before {
content: "";
position: absolute;
inset: 9px 7px;
background: repeating-linear-gradient(90deg,
var(--yellow) 0 8px,
transparent 8px 15px);
animation: arrowMove 2s linear infinite;
}
.new-theme-design.helpdesk-management-sla-software .flowArrow:after {
content: "›";
position: absolute;
right: 7px;
top: 0;
color: #fff;
font-size: 15px;
font-weight: 900;
}
@keyframes arrowMove {
to {
transform: translateX(15px);
}
}
.new-theme-design.helpdesk-management-sla-software .intakeTicket {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(6, 59, 92, 0.08);
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .intakeTicketHead {
padding: 12px 13px;
background: #0d2535;
color: #fff;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .intakeTicketHead strong {
font-size: 10px;
}
.new-theme-design.helpdesk-management-sla-software .intakeTicketHead span {
font-size: 6px;
color: #8cf2c4;
background: rgba(17, 138, 97, 0.15);
padding: 4px 6px;
border-radius: 999px;
}
.new-theme-design.helpdesk-management-sla-software .ticketDetail {
padding: 13px;
}
.new-theme-design.helpdesk-management-sla-software .ticketDetail h4 {
margin: 0;
font-size: 13px;
}
.new-theme-design.helpdesk-management-sla-software .ticketDetail p {
font-size: 8px;
color: var(--muted);
margin-top: 4px;
}
.new-theme-design.helpdesk-management-sla-software .detailTags {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 9px;
}
.new-theme-design.helpdesk-management-sla-software .detailTags span {
padding: 4px 6px;
border-radius: 999px;
background: var(--sky);
color: var(--navy);
font-size: 6px;
font-weight: 850;
}
.new-theme-design.helpdesk-management-sla-software .detailGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 10px;
}
.new-theme-design.helpdesk-management-sla-software .detailCell {
padding: 8px;
border: 1px solid var(--line);
border-radius: 9px;
}
.new-theme-design.helpdesk-management-sla-software .detailCell span {
display: block;
font-size: 5.5px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .detailCell strong {
font-size: 8px;
}
.new-theme-design.helpdesk-management-sla-software .acknowledge {
margin-top: 9px;
padding: 8px;
border-radius: 9px;
background: var(--greenbg);
color: var(--green);
font-size: 7px;
font-weight: 850;
text-align: center;
} .new-theme-design.helpdesk-management-sla-software .slaVisualTop {
display: grid;
grid-template-columns: 145px 1fr;
gap: 13px;
}
.new-theme-design.helpdesk-management-sla-software .slaClockCard {
background: #0d2535;
color: #fff;
border-radius: 16px;
padding: 15px;
text-align: center;
}
.new-theme-design.helpdesk-management-sla-software .bigSlaRing {
width: 105px;
height: 105px;
margin: auto;
border-radius: 50%;
background: conic-gradient(var(--yellow) 0 72%, #23475a 72%);
display: grid;
place-items: center;
position: relative;
}
.new-theme-design.helpdesk-management-sla-software .bigSlaRing:after {
content: "";
position: absolute;
inset: 15px;
border-radius: 50%;
background: #0d2535;
}
.new-theme-design.helpdesk-management-sla-software .bigSlaRing strong {
position: relative;
z-index: 1;
font-size: 19px;
color: var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .bigSlaRing span {
position: absolute;
z-index: 1;
margin-top: 31px;
font-size: 6px;
color: #bfd2dc;
}
.new-theme-design.helpdesk-management-sla-software .slaClockCard b {
display: block;
font-size: 9px;
margin-top: 12px;
}
.new-theme-design.helpdesk-management-sla-software .slaClockCard small {
font-size: 6px;
color: #bfd2dc;
}
.new-theme-design.helpdesk-management-sla-software .slaPolicy {
display: grid;
gap: 8px;
}
.new-theme-design.helpdesk-management-sla-software .policyCard {
padding: 11px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .policyCard strong {
display: block;
font-size: 9px;
}
.new-theme-design.helpdesk-management-sla-software .policyCard span {
display: block;
font-size: 6.5px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .policyTarget {
font-size: 7px;
font-weight: 950;
padding: 5px 7px;
border-radius: 999px;
background: var(--sky);
color: var(--navy);
}
.new-theme-design.helpdesk-management-sla-software .policyCard:nth-child(2) .new-theme-design.helpdesk-management-sla-software .policyTarget {
background: var(--yellowsoft);
color: #765900;
}
.new-theme-design.helpdesk-management-sla-software .policyCard:nth-child(3) .new-theme-design.helpdesk-management-sla-software .policyTarget {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .slaTable {
margin-top: 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .slaTableHead,
.new-theme-design.helpdesk-management-sla-software .slaTableRow {
display: grid;
grid-template-columns: 1.3fr 0.65fr 0.65fr 0.7fr;
gap: 8px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .slaTableHead {
padding: 9px 11px;
background: #eaf8ff;
color: var(--navy);
font-size: 6.5px;
font-weight: 950;
}
.new-theme-design.helpdesk-management-sla-software .slaTableRow {
padding: 9px 11px;
border-top: 1px solid var(--line);
font-size: 7px;
}
.new-theme-design.helpdesk-management-sla-software .slaTableRow strong {
font-size: 7.5px;
}
.new-theme-design.helpdesk-management-sla-software .slaState {
justify-self: end;
padding: 4px 6px;
border-radius: 999px;
font-size: 6px;
font-weight: 900;
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .slaTableRow:nth-child(2) .new-theme-design.helpdesk-management-sla-software .slaState {
background: var(--yellowsoft);
color: #765900;
}
.new-theme-design.helpdesk-management-sla-software .slaTableRow:nth-child(3) .new-theme-design.helpdesk-management-sla-software .slaState {
background: var(--redbg);
color: var(--red);
} .new-theme-design.helpdesk-management-sla-software .triageLayout {
display: grid;
grid-template-columns: 1fr 105px 1fr;
gap: 12px;
align-items: center;
min-height: 345px;
}
.new-theme-design.helpdesk-management-sla-software .triageQueue {
display: grid;
gap: 8px;
}
.new-theme-design.helpdesk-management-sla-software .triageTicket {
padding: 11px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 7px 18px rgba(6, 59, 92, 0.05);
}
.new-theme-design.helpdesk-management-sla-software .triageTicket strong {
display: block;
font-size: 9px;
}
.new-theme-design.helpdesk-management-sla-software .triageTicket span {
display: block;
font-size: 6.5px;
color: var(--muted);
margin-top: 2px;
}
.new-theme-design.helpdesk-management-sla-software .triageMeta {
display: flex;
gap: 5px;
margin-top: 7px;
}
.new-theme-design.helpdesk-management-sla-software .triageMeta b {
font-size: 5.5px;
padding: 4px 5px;
border-radius: 999px;
background: var(--redbg);
color: var(--red);
}
.new-theme-design.helpdesk-management-sla-software .triageTicket:nth-child(2) b {
background: var(--yellowsoft);
color: #765900;
}
.new-theme-design.helpdesk-management-sla-software .triageTicket:nth-child(3) b {
background: var(--sky);
color: var(--brand2);
}
.new-theme-design.helpdesk-management-sla-software .ruleEngine {
height: 165px;
border-radius: 18px;
background: #0d2535;
color: #fff;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .ruleEngine:before {
content: "";
position: absolute;
width: 86px;
height: 86px;
border-radius: 50%;
background: rgba(0, 168, 248, 0.13);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: enginePulse 2.6s ease-in-out infinite;
}
.new-theme-design.helpdesk-management-sla-software .ruleEngine strong,
.new-theme-design.helpdesk-management-sla-software .ruleEngine span {
position: relative;
}
.new-theme-design.helpdesk-management-sla-software .ruleEngine strong {
font-size: 10px;
color: var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .ruleEngine span {
font-size: 6px;
color: #bfd2dc;
margin-top: 5px;
}
.new-theme-design.helpdesk-management-sla-software .ruleEngine b {
position: relative;
display: inline-flex;
align-self: center;
margin-top: 9px;
padding: 5px 7px;
border-radius: 999px;
background: var(--green);
font-size: 6px;
}
@keyframes enginePulse {
50% {
transform: translate(-50%, -50%) scale(1.18);
}
}
.new-theme-design.helpdesk-management-sla-software .teamLanes {
display: grid;
gap: 9px;
}
.new-theme-design.helpdesk-management-sla-software .teamLane {
padding: 11px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 9px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .teamAvatar {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
font-size: 7px;
font-weight: 950;
}
.new-theme-design.helpdesk-management-sla-software .teamLane:nth-child(2) .new-theme-design.helpdesk-management-sla-software .teamAvatar {
background: var(--yellowsoft);
color: #765900;
}
.new-theme-design.helpdesk-management-sla-software .teamLane:nth-child(3) .new-theme-design.helpdesk-management-sla-software .teamAvatar {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .teamLane strong {
display: block;
font-size: 9px;
}
.new-theme-design.helpdesk-management-sla-software .teamLane span {
display: block;
font-size: 6px;
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .teamLane b {
font-size: 6px;
padding: 4px 6px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .escalationFlow {
margin-top: 12px;
padding: 10px;
border-radius: 12px;
background: var(--redbg);
border-left: 4px solid var(--red);
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 7px;
color: #8c3737;
}
.new-theme-design.helpdesk-management-sla-software .escalationFlow strong {
font-size: 7px;
} .new-theme-design.helpdesk-management-sla-software .woFlow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
align-items: center;
margin-top: 8px;
}
.new-theme-design.helpdesk-management-sla-software .woStep {
min-height: 92px;
padding: 12px 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
text-align: center;
position: relative;
}
.new-theme-design.helpdesk-management-sla-software .woStep:not(:last-child):after {
content: "›";
position: absolute;
right: -9px;
top: 32px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #0d2535;
color: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 900;
z-index: 3;
}
.new-theme-design.helpdesk-management-sla-software .woIcon {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--sky);
color: var(--brand2);
display: grid;
place-items: center;
margin: 0 auto 8px;
font-size: 7px;
font-weight: 950;
}
.new-theme-design.helpdesk-management-sla-software .woStep:nth-child(2) .new-theme-design.helpdesk-management-sla-software .woIcon {
background: var(--yellowsoft);
color: #765900;
}
.new-theme-design.helpdesk-management-sla-software .woStep:nth-child(3) .new-theme-design.helpdesk-management-sla-software .woIcon {
background: #f1eeff;
color: var(--purple);
}
.new-theme-design.helpdesk-management-sla-software .woStep:nth-child(4) .new-theme-design.helpdesk-management-sla-software .woIcon {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.helpdesk-management-sla-software .woStep:nth-child(5) .new-theme-design.helpdesk-management-sla-software .woIcon {
background: #0d2535;
color: var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .woStep strong {
display: block;
font-size: 8px;
}
.new-theme-design.helpdesk-management-sla-software .woStep span {
display: block;
font-size: 5.8px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.helpdesk-management-sla-software .executionSplit {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px;
margin-top: 13px;
}
.new-theme-design.helpdesk-management-sla-software .executionCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 12px;
}
.new-theme-design.helpdesk-management-sla-software .executionCardHead {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.new-theme-design.helpdesk-management-sla-software .executionCardHead strong {
font-size: 9px;
}
.new-theme-design.helpdesk-management-sla-software .executionCardHead span {
font-size: 6px;
padding: 4px 6px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
font-weight: 900;
}
.new-theme-design.helpdesk-management-sla-software .executionRows {
display: grid;
gap: 7px;
margin-top: 9px;
}
.new-theme-design.helpdesk-management-sla-software .executionRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 7px;
}
.new-theme-design.helpdesk-management-sla-software .executionRow span {
color: var(--muted);
}
.new-theme-design.helpdesk-management-sla-software .requesterUpdate {
margin-top: 9px;
padding: 8px 9px;
border-radius: 9px;
background: var(--sky);
font-size: 7px;
color: var(--navy);
} .new-theme-design.helpdesk-management-sla-software .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.new-theme-design.helpdesk-management-sla-software .cta h3 {
font-size: 19px;
}
.new-theme-design.helpdesk-management-sla-software .cta.darkCta h3 {
color: #fff;
}
.new-theme-design.helpdesk-management-sla-software .cta p {
color: var(--muted);
font-size: 15px;
margin-top: 5px;
max-width: 650px;
}
.new-theme-design.helpdesk-management-sla-software .cta.darkCta p {
color: #d1d1d1;
}
.new-theme-design.helpdesk-management-sla-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
} .new-theme-design.helpdesk-management-sla-software .aiSection {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 78% 20%,
rgba(0, 168, 248, 0.16),
transparent 30%),
radial-gradient(circle at 8% 92%,
rgba(255, 201, 40, 0.08),
transparent 24%),
linear-gradient(135deg, #070a0d 0%, #101820 58%, #091118 100%);
}
.new-theme-design.helpdesk-management-sla-software .aiSection:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: linear-gradient(120deg,
transparent 5%,
#000 42%,
transparent 94%);
pointer-events: none;
}
.new-theme-design.helpdesk-management-sla-software .aiSection .new-theme-design.helpdesk-management-sla-software .wrap {
position: relative;
z-index: 2;
}
.new-theme-design.helpdesk-management-sla-software .aiIntro {
display: grid;
grid-template-columns: 0.86fr 1.14fr;
gap: 46px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .aiCopy .new-theme-design.helpdesk-management-sla-software .lead {
color: #c5d2da !important;
font-size: 16px;
line-height: 1.75;
}
.new-theme-design.helpdesk-management-sla-software .aiProductRow {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 19px;
}
.new-theme-design.helpdesk-management-sla-software .aiProduct {
min-height: 58px;
display: grid;
grid-template-columns: 39px 1fr;
gap: 10px;
align-items: center;
padding: 10px 13px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.11);
}
.new-theme-design.helpdesk-management-sla-software .aiProduct:first-child {
box-shadow: inset 3px 0 0 var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .aiProduct:last-child {
box-shadow: inset 3px 0 0 var(--brand);
}
.new-theme-design.helpdesk-management-sla-software .aiProductIcon {
width: 38px;
height: 38px;
border-radius: 11px;
display: grid;
place-items: center;
}
.new-theme-design.helpdesk-management-sla-software .aiProductIcon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-theme-design.helpdesk-management-sla-software .aiProductIcon.veda {
background: var(--yellow);
color: #111;
}
.new-theme-design.helpdesk-management-sla-software .aiProductIcon.brain {
background: linear-gradient(145deg, #ddf5ff, #58c8ff);
color: #063b5c;
}
.new-theme-design.helpdesk-management-sla-software .aiProduct strong {
display: block;
color: #fff;
font-size: 15px;
}
.new-theme-design.helpdesk-management-sla-software .aiProduct span {
display: block;
color: #9fb1bc;
font-size: 15px;
line-height: 1.45;
margin-top: 2px;
}
.new-theme-design.helpdesk-management-sla-software .aiFeatureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 18px;
}
.new-theme-design.helpdesk-management-sla-software .aiFeature {
display: grid;
grid-template-columns: 31px 1fr;
gap: 9px;
align-items: start;
padding: 11px;
border: 1px solid rgba(255, 255, 255, 0.085);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
}
.new-theme-design.helpdesk-management-sla-software .aiFeatureIcon {
width: 30px;
height: 30px;
border-radius: 9px;
background: #17242d;
color: var(--yellow);
display: grid;
place-items: center;
}
.new-theme-design.helpdesk-management-sla-software .aiFeatureIcon svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-theme-design.helpdesk-management-sla-software .aiFeature strong {
display: block;
color: #fff;
font-size: 14px;
}
.new-theme-design.helpdesk-management-sla-software .aiFeature span {
display: block;
color: #afc0c9;
font-size: 14px;
line-height: 1.5;
margin-top: 2px;
}
.new-theme-design.helpdesk-management-sla-software .aiWorkspace {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #0a1117;
border: 1px solid #34434e;
box-shadow:
0 28px 70px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(0, 168, 248, 0.05);
}
.new-theme-design.helpdesk-management-sla-software .aiWorkspace:after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
right: -120px;
bottom: -150px;
background: radial-gradient(circle, rgba(0, 168, 248, 0.18), transparent 68%);
pointer-events: none;
}
.new-theme-design.helpdesk-management-sla-software .aiWindowBar {
height: 47px;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #111b22;
border-bottom: 1px solid #2b3943;
}
.new-theme-design.helpdesk-management-sla-software .windowTitle {
display: flex;
align-items: center;
gap: 9px;
}
.new-theme-design.helpdesk-management-sla-software .windowDots {
display: flex;
gap: 5px;
}
.new-theme-design.helpdesk-management-sla-software .windowDots i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4b5a64;
}
.new-theme-design.helpdesk-management-sla-software .windowDots i:first-child {
background: #ff6d65;
}
.new-theme-design.helpdesk-management-sla-software .windowDots i:nth-child(2) {
background: #ffc928;
}
.new-theme-design.helpdesk-management-sla-software .windowDots i:nth-child(3) {
background: #20c985;
}
.new-theme-design.helpdesk-management-sla-software .windowTitle strong {
font-size: 9px;
color: #dce7ed;
}
.new-theme-design.helpdesk-management-sla-software .aiConnected {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
border-radius: 999px;
background: rgba(17, 138, 97, 0.12);
color: #8cf2c4;
font-size: 6px;
font-weight: 900;
}
.new-theme-design.helpdesk-management-sla-software .aiConnected:before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #20c985;
box-shadow: 0 0 0 4px rgba(32, 201, 133, 0.1);
animation: aiPulse 2s ease-in-out infinite;
}
@keyframes aiPulse {
50% {
box-shadow: 0 0 0 8px rgba(32, 201, 133, 0.03);
}
}
.new-theme-design.helpdesk-management-sla-software .aiWorkspaceBody {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 1px;
background: #2a3740;
}
.new-theme-design.helpdesk-management-sla-software .aiConversation,
.new-theme-design.helpdesk-management-sla-software .aiDecision {
padding: 17px;
background: #0e171d;
min-height: 420px;
}
.new-theme-design.helpdesk-management-sla-software .aiDecision {
background: #111b22;
}
.new-theme-design.helpdesk-management-sla-software .workspaceLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: #8298a6;
font-size: 6.5px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.new-theme-design.helpdesk-management-sla-software .workspaceLabel b {
padding: 4px 6px;
border-radius: 999px;
background: #182730;
color: #a9c0cd;
font-size: 5.5px;
}
.new-theme-design.helpdesk-management-sla-software .userMessage {
margin-top: 13px;
padding: 13px 14px 13px 39px;
border-radius: 14px 14px 14px 4px;
background: #17242d;
border: 1px solid #2e3e48;
color: #eef5f8;
font-size: 9px;
line-height: 1.55;
position: relative;
}
.new-theme-design.helpdesk-management-sla-software .userMessage:before {
content: "";
position: absolute;
left: 12px;
top: 13px;
width: 18px;
height: 18px;
border-radius: 6px;
background: var(--yellow);
box-shadow: inset 0 0 0 5px #111;
}
.new-theme-design.helpdesk-management-sla-software .aiProcessing {
margin-top: 10px;
display: flex;
align-items: center;
gap: 8px;
color: #93a8b4;
font-size: 7px;
}
.new-theme-design.helpdesk-management-sla-software .processingDots {
display: flex;
gap: 3px;
}
.new-theme-design.helpdesk-management-sla-software .processingDots i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--brand);
animation: dotWave 1.3s ease-in-out infinite;
}
.new-theme-design.helpdesk-management-sla-software .processingDots i:nth-child(2) {
animation-delay: 0.15s;
}
.new-theme-design.helpdesk-management-sla-software .processingDots i:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes dotWave {
50% {
transform: translateY(-3px);
background: var(--yellow);
}
}
.new-theme-design.helpdesk-management-sla-software .structuredTicket {
margin-top: 12px;
border-radius: 14px;
background: #f8fcfe;
color: var(--ink);
overflow: hidden;
border: 1px solid #bddceb;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
}
.new-theme-design.helpdesk-management-sla-software .structuredTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 11px;
background: #eaf8ff;
border-bottom: 1px solid #d3e8f2;
}
.new-theme-design.helpdesk-management-sla-software .structuredTop strong {
font-size: 8.5px;
}
.new-theme-design.helpdesk-management-sla-software .confidence {
padding: 4px 6px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
font-size: 5.5px;
font-weight: 950;
}
.new-theme-design.helpdesk-management-sla-software .ticketFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
padding: 10px;
}
.new-theme-design.helpdesk-management-sla-software .ticketField {
padding: 8px;
border: 1px solid #ddebf2;
border-radius: 9px;
background: #fff;
}
.new-theme-design.helpdesk-management-sla-software .ticketField span {
display: block;
color: #78909e;
font-size: 5.5px;
}
.new-theme-design.helpdesk-management-sla-software .ticketField strong {
display: block;
font-size: 7.5px;
margin-top: 2px;
}
.new-theme-design.helpdesk-management-sla-software .ticketField.priority strong {
color: #c33e3e;
}
.new-theme-design.helpdesk-management-sla-software .ticketAction {
margin: 0 10px 10px;
padding: 8px;
border-radius: 9px;
background: #0d2535;
color: #fff;
font-size: 6.5px;
font-weight: 850;
display: flex;
justify-content: space-between;
gap: 10px;
}
.new-theme-design.helpdesk-management-sla-software .ticketAction b {
color: var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .decisionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .decisionHead strong {
font-size: 10px;
color: #fff;
}
.new-theme-design.helpdesk-management-sla-software .decisionHead span {
font-size: 5.7px;
color: #7be0b0;
border: 1px solid rgba(123, 224, 176, 0.22);
padding: 4px 6px;
border-radius: 999px;
}
.new-theme-design.helpdesk-management-sla-software .decisionFlow {
display: grid;
gap: 7px;
margin-top: 13px;
}
.new-theme-design.helpdesk-management-sla-software .decisionStep {
display: grid;
grid-template-columns: 30px 1fr auto;
gap: 9px;
align-items: center;
padding: 9px 10px;
border: 1px solid #2d3d47;
border-radius: 11px;
background: #152129;
position: relative;
}
.new-theme-design.helpdesk-management-sla-software .decisionStep:not(:last-child):after {
content: "";
position: absolute;
left: 24px;
bottom: -8px;
width: 1px;
height: 8px;
background: #3a4d58;
}
.new-theme-design.helpdesk-management-sla-software .decisionNode {
width: 29px;
height: 29px;
border-radius: 9px;
display: grid;
place-items: center;
background: #21323d;
color: var(--brand);
}
.new-theme-design.helpdesk-management-sla-software .decisionNode svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-theme-design.helpdesk-management-sla-software .decisionStep:nth-child(2) .new-theme-design.helpdesk-management-sla-software .decisionNode {
color: var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .decisionStep:nth-child(3) .new-theme-design.helpdesk-management-sla-software .decisionNode {
color: #8d7cff;
}
.new-theme-design.helpdesk-management-sla-software .decisionStep:nth-child(4) .new-theme-design.helpdesk-management-sla-software .decisionNode {
color: #35d391;
}
.new-theme-design.helpdesk-management-sla-software .decisionStep strong {
display: block;
color: #fff;
font-size: 7.8px;
}
.new-theme-design.helpdesk-management-sla-software .decisionStep span {
display: block;
color: #91a6b2;
font-size: 5.8px;
margin-top: 1px;
}
.new-theme-design.helpdesk-management-sla-software .decisionStep b {
font-size: 5.5px;
color: #c7d5dc;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeResult {
margin-top: 11px;
border-radius: 13px;
background: linear-gradient(145deg, #f9fcfe, #eaf8ff);
border: 1px solid #b9dff1;
color: var(--ink);
overflow: hidden;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 10px;
border-bottom: 1px solid #d5eaf3;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeBrand {
display: flex;
align-items: center;
gap: 7px;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeBrand i {
width: 24px;
height: 24px;
border-radius: 8px;
background: #0d2535;
color: #6dd2ff;
display: grid;
place-items: center;
font-style: normal;
font-size: 6px;
font-weight: 950;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeBrand strong {
font-size: 7.5px;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeScore {
font-size: 5.5px;
font-weight: 950;
color: var(--green);
background: var(--greenbg);
padding: 4px 6px;
border-radius: 999px;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeItems {
padding: 8px 10px;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeItem {
display: grid;
grid-template-columns: 14px 1fr;
gap: 7px;
padding: 5px 0;
border-bottom: 1px solid #e2edf2;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeItem:last-child {
border-bottom: 0;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeItem:before {
content: "✓";
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 6px;
font-weight: 950;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeItem strong {
display: block;
font-size: 6.7px;
}
.new-theme-design.helpdesk-management-sla-software .knowledgeItem span {
display: block;
font-size: 5.5px;
color: #718895;
margin-top: 1px;
}
.new-theme-design.helpdesk-management-sla-software .aiWorkspaceFooter {
height: 41px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: #0a1117;
border-top: 1px solid #26343d;
position: relative;
z-index: 2;
}
.new-theme-design.helpdesk-management-sla-software .aiStatusSet {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.new-theme-design.helpdesk-management-sla-software .aiStatusChip {
font-size: 5.5px;
font-weight: 900;
color: #9cb0bb;
padding: 4px 6px;
border-radius: 999px;
background: #152129;
border: 1px solid #263842;
}
.new-theme-design.helpdesk-management-sla-software .aiStatusChip.live {
color: #7be0b0;
}
.new-theme-design.helpdesk-management-sla-software .aiWorkspaceFooter strong {
font-size: 6px;
color: var(--yellow);
} .new-theme-design.helpdesk-management-sla-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.helpdesk-management-sla-software .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.new-theme-design.helpdesk-management-sla-software .connectedIcon {
width: 38px;
height: 38px;
border-radius: 11px;
background: #252525;
border: 1px solid #393939;
color: var(--yellow);
display: grid;
place-items: center;
font-size: 8px;
font-weight: 950;
margin-bottom: 13px;
}
.new-theme-design.helpdesk-management-sla-software .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 16px;
margin-bottom: 5px;
}
.new-theme-design.helpdesk-management-sla-software .connectedCard span {
font-size: 15px;
color: #d0d0d0;
} .new-theme-design.helpdesk-management-sla-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.helpdesk-management-sla-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.new-theme-design.helpdesk-management-sla-software .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.new-theme-design.helpdesk-management-sla-software .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 8px;
font-weight: 900;
margin-bottom: 13px;
}
.new-theme-design.helpdesk-management-sla-software .featureCard p {
font-size: 15px;
color: var(--muted);
margin: 7px 0 0;
} .new-theme-design.helpdesk-management-sla-software .steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
counter-reset: step;
}
.new-theme-design.helpdesk-management-sla-software .step {
counter-increment: step;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
position: relative;
}
.new-theme-design.helpdesk-management-sla-software .step:before {
content: "0" counter(step);
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: #0c2333;
color: var(--yellow);
font-weight: 950;
font-size: 11px;
margin-bottom: 13px;
}
.new-theme-design.helpdesk-management-sla-software .step:not(:last-child):after {
content: "";
position: absolute;
top: 40px;
right: -14px;
width: 14px;
height: 2px;
background: #bbd8e7;
}
.new-theme-design.helpdesk-management-sla-software .step h3 {
font-size: 17px;
}
.new-theme-design.helpdesk-management-sla-software .step p {
font-size: 15px;
color: var(--muted);
margin-top: 7px;
} .new-theme-design.helpdesk-management-sla-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.helpdesk-management-sla-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.new-theme-design.helpdesk-management-sla-software .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 8px;
font-weight: 900;
margin-bottom: 14px;
}
.new-theme-design.helpdesk-management-sla-software .useCase p {
color: var(--muted);
font-size: 15px !important;
margin-top: 7px;
}
.new-theme-design.helpdesk-management-sla-software .proofBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.helpdesk-management-sla-software .proofGrid {
display: grid;
grid-template-columns: 1.35fr repeat(6, 1fr);
gap: 12px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .proofItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.new-theme-design.helpdesk-management-sla-software .proofItem strong {
display: block;
color: var(--yellow);
font-size: 12px;
}
.new-theme-design.helpdesk-management-sla-software .proofItem span {
font-size: 8px;
color: #bfbfbf;
} .new-theme-design.helpdesk-management-sla-software .faq {
max-width: 920px;
}
.new-theme-design.helpdesk-management-sla-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.helpdesk-management-sla-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.helpdesk-management-sla-software .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
}
.new-theme-design.helpdesk-management-sla-software .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .final h2 {
color: #fff;
}
.new-theme-design.helpdesk-management-sla-software .final p {
color: #ddd;
margin-top: 12px;
max-width: 740px;
}
@media (max-width: 1050px) {
.new-theme-design.helpdesk-management-sla-software .channels {
grid-template-columns: repeat(4, 1fr);
}
.new-theme-design.helpdesk-management-sla-software .proofGrid {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.helpdesk-management-sla-software .proofGrid>div:first-child {
grid-column: 1/-1;
text-align: center;
}
.new-theme-design.helpdesk-management-sla-software .proofItem {
border-left: 0;
}
}
@media (max-width: 960px) {
.new-theme-design.helpdesk-management-sla-software .heroGrid,
.new-theme-design.helpdesk-management-sla-software .feature,
.new-theme-design.helpdesk-management-sla-software .aiGrid,
.new-theme-design.helpdesk-management-sla-software .final {
grid-template-columns: 1fr;
}
.new-theme-design.helpdesk-management-sla-software .feature.reverse .new-theme-design.helpdesk-management-sla-software .visual {
order: 0;
}
.new-theme-design.helpdesk-management-sla-software .helpdeskStage {
margin: auto;
}
.new-theme-design.helpdesk-management-sla-software .outcomes,
.new-theme-design.helpdesk-management-sla-software .featureGrid,
.new-theme-design.helpdesk-management-sla-software .connectedGrid,
.new-theme-design.helpdesk-management-sla-software .useCases,
.new-theme-design.helpdesk-management-sla-software .steps {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.helpdesk-management-sla-software .step:after {
display: none;
}
}
@media (max-width: 760px) {
.new-theme-design.helpdesk-management-sla-software .intakeLayout,
.new-theme-design.helpdesk-management-sla-software .triageLayout {
grid-template-columns: 1fr;
}
.new-theme-design.helpdesk-management-sla-software .intakeArrows {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.helpdesk-management-sla-software .flowArrow {
transform: rotate(90deg);
}
.new-theme-design.helpdesk-management-sla-software .woFlow {
grid-template-columns: 1fr;
}
.new-theme-design.helpdesk-management-sla-software .woStep:not(:last-child):after {
content: "↓";
right: auto;
left: 50%;
top: auto;
bottom: -13px;
transform: translateX(-50%);
}
.new-theme-design.helpdesk-management-sla-software .heroVisual {
min-height: 500px;
}
.new-theme-design.helpdesk-management-sla-software .helpdeskStage {
min-height: 500px;
transform: scale(0.87);
transform-origin: center top;
}
.new-theme-design.helpdesk-management-sla-software .requestPhone {
right: 8px;
}
.new-theme-design.helpdesk-management-sla-software .deskBoard {
left: 8px;
}
.new-theme-design.helpdesk-management-sla-software .slaFloat {
right: 12px;
}
.new-theme-design.helpdesk-management-sla-software .escalationCard {
left: 10px;
}
}
@media (max-width: 640px) {
.new-theme-design.helpdesk-management-sla-software .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.new-theme-design.helpdesk-management-sla-software .hero {
padding: 54px 0;
}
.new-theme-design h1 {
font-size: 42px;
}
.new-theme-design.helpdesk-management-sla-software .fl,
.new-theme-design.helpdesk-management-sla-software .outcomes,
.new-theme-design.helpdesk-management-sla-software .featureGrid,
.new-theme-design.helpdesk-management-sla-software .connectedGrid,
.new-theme-design.helpdesk-management-sla-software .useCases,
.new-theme-design.helpdesk-management-sla-software .steps,
.new-theme-design.helpdesk-management-sla-software .aiMini,
.new-theme-design.helpdesk-management-sla-software .channels,
.new-theme-design.helpdesk-management-sla-software .proofGrid,
.new-theme-design.helpdesk-management-sla-software .slaVisualTop,
.new-theme-design.helpdesk-management-sla-software .executionSplit {
grid-template-columns: 1fr;
}
.new-theme-design.helpdesk-management-sla-software .cta {
flex-direction: column;
align-items: flex-start;
}
.new-theme-design.helpdesk-management-sla-software .visual {
min-height: auto;
}
.new-theme-design.helpdesk-management-sla-software .helpdeskStage {
width: 520px;
left: 50%;
margin-left: -260px;
}
.new-theme-design.helpdesk-management-sla-software .deskBoard {
width: 410px;
}
.new-theme-design.helpdesk-management-sla-software .requestPhone {
width: 190px;
}
.new-theme-design.helpdesk-management-sla-software .proofItem {
padding: 9px 0;
border-top: 1px solid #2d2d2d;
}
.new-theme-design.helpdesk-management-sla-software .proofGrid>div:first-child {
grid-column: auto;
}
.new-theme-design.helpdesk-management-sla-software .final {
padding: 30px;
}
.new-theme-design.helpdesk-management-sla-software .final h2 {
font-size: 34px;
}
.new-theme-design.helpdesk-management-sla-software .bigSlaRing {
width: 100px;
height: 100px;
}
.new-theme-design.helpdesk-management-sla-software .slaClockCard {
display: grid;
grid-template-columns: 120px 1fr;
text-align: left;
align-items: center;
}
.new-theme-design.helpdesk-management-sla-software .slaClockCard b {
margin-top: 0;
}
.new-theme-design.helpdesk-management-sla-software .slaTableHead,
.new-theme-design.helpdesk-management-sla-software .slaTableRow {
grid-template-columns: 1.3fr 0.7fr 0.7fr;
}
.new-theme-design.helpdesk-management-sla-software .slaTableHead span:nth-child(4),
.new-theme-design.helpdesk-management-sla-software .slaTableRow .new-theme-design.helpdesk-management-sla-software .slaState {
display: none;
}
}
@media (max-width: 470px) {
.new-theme-design.helpdesk-management-sla-software .helpdeskStage {
transform: scale(0.68);
min-height: 390px;
}
.new-theme-design.helpdesk-management-sla-software .heroVisual {
min-height: 390px;
}
.new-theme-design.helpdesk-management-sla-software .channels {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.helpdesk-management-sla-software .feature {
gap: 34px;
}
.new-theme-design.helpdesk-management-sla-software .queueMetrics {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 960px) {
.new-theme-design.helpdesk-management-sla-software .aiIntro {
grid-template-columns: 1fr;
}
.new-theme-design.helpdesk-management-sla-software .aiCopy {
max-width: 780px;
}
.new-theme-design.helpdesk-management-sla-software .aiWorkspace {
max-width: 820px;
}
}
@media (max-width: 700px) {
.new-theme-design.helpdesk-management-sla-software .aiWorkspaceBody {
grid-template-columns: 1fr;
}
.new-theme-design.helpdesk-management-sla-software .aiConversation,
.new-theme-design.helpdesk-management-sla-software .aiDecision {
min-height: auto;
}
.new-theme-design.helpdesk-management-sla-software .aiFeatureList {
grid-template-columns: 1fr;
}
.new-theme-design.helpdesk-management-sla-software .aiProductRow {
display: grid;
}
.new-theme-design.helpdesk-management-sla-software .aiProduct {
width: 100%;
}
}
@media (max-width: 520px) {
.new-theme-design.helpdesk-management-sla-software .ticketFields {
grid-template-columns: 1fr;
}
.new-theme-design.helpdesk-management-sla-software .aiConversation,
.new-theme-design.helpdesk-management-sla-software .aiDecision {
padding: 13px;
}
.new-theme-design.helpdesk-management-sla-software .aiWorkspaceFooter {
height: auto;
min-height: 48px;
padding: 9px;
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 767px) {
.new-theme-design.helpdesk-management-sla-software .visual {
order: 0;
}
.new-theme-design.helpdesk-management-sla-software .visual-content {
order: 1;
}
.new-theme-design.helpdesk-management-sla-software .heroVisual {
display: none;
}
.new-theme-design.helpdesk-management-sla-software .hero .button.black,
.new-theme-design.helpdesk-management-sla-software .hero .button.secondary {
width: 100% !important;
}
.new-theme-design.helpdesk-management-sla-software .hero .actions br,
.new-theme-design.helpdesk-management-sla-software .flowArrow,
.new-theme-design.helpdesk-management-sla-software .woFlow {
display: none;
}
}  .new-theme-design.free-personalized-demo .ey {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.free-personalized-demo .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 740px;
}
.new-theme-design.free-personalized-demo .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.new-theme-design.free-personalized-demo .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.free-personalized-demo .btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 3px solid rgba(0, 168, 248, 0.34);
outline-offset: 3px;
}
.new-theme-design.free-personalized-demo .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.free-personalized-demo .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.free-personalized-demo .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.free-personalized-demo .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 26px;
}
.new-theme-design.free-personalized-demo .soft {
background: var(--sky2);
}
.new-theme-design.free-personalized-demo .sectionHead {
max-width: 820px;
margin-bottom: 36px;
}
.new-theme-design.free-personalized-demo .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.free-personalized-demo .sectionHead p {
color: var(--muted);
font-size: 16px;
margin-top: 14px;
}
.new-theme-design.free-personalized-demo .hero {
padding: 68px 0 64px;
background:
radial-gradient(circle at 78% 12%,
rgba(0, 168, 248, 0.18),
transparent 29%),
radial-gradient(circle at 93% 83%,
rgba(255, 201, 40, 0.15),
transparent 19%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.free-personalized-demo .heroGrid {
display: grid;
grid-template-columns: 1fr 0.94fr;
gap: 54px;
align-items: center;
}
.new-theme-design.free-personalized-demo .heroCopy {
position: relative;
z-index: 2;
}
.new-theme-design.free-personalized-demo .heroChecks {
display: grid;
gap: 11px;
margin-top: 25px;
max-width: 610px;
}
.new-theme-design.free-personalized-demo .heroCheck {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #29495e;
}
.new-theme-design.free-personalized-demo .heroCheck i {
width: 24px;
height: 24px;
flex: 0 0 24px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-style: normal;
font-size: 11px;
font-weight: 950;
}
.new-theme-design.free-personalized-demo .heroMeta {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: var(--navy);
font-weight: 800;
}
.new-theme-design.free-personalized-demo .heroMeta a,
.new-theme-design.free-personalized-demo .heroMeta span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.new-theme-design.free-personalized-demo .heroMeta b {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--yellow);
box-shadow: 0 0 0 4px rgba(255, 201, 40, 0.16);
}
.new-theme-design.free-personalized-demo .formStage {
position: relative;
}
.new-theme-design.free-personalized-demo .formStage:before {
content: "";
position: absolute;
inset: -22px -22px -24px 35px;
border-radius: 34px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 27px 27px;
mask-image: linear-gradient(135deg, #000, transparent 88%);
}
.new-theme-design.free-personalized-demo .demoFormCard {
position: relative;
z-index: 2;
background: #fff;
border: 1px solid #cfe6f2;
border-radius: 24px;
box-shadow: 0 28px 70px rgba(6, 59, 92, 0.18);
overflow: hidden;
}
.new-theme-design.free-personalized-demo .formTop {
padding: 22px 24px 18px;
background: linear-gradient(135deg, #0d2535, #0a4e75);
color: #fff;
border-bottom: 4px solid var(--yellow);
}
.new-theme-design.free-personalized-demo .formTopRow {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;
}
.new-theme-design.free-personalized-demo .formTop h2 {
color: #fff;
font-size: 27px;
}
.new-theme-design.free-personalized-demo .formTop p {
font-size: 12px;
color: #cfe2ed;
margin-top: 6px;
margin-bottom: 0;
}
.new-theme-design.free-personalized-demo .freeChip {
font-size: 9px;
font-weight: 950;
letter-spacing: 0.06em;
background: var(--yellow);
color: #111;
padding: 7px 9px;
border-radius: 999px;
white-space: nowrap;
}
.new-theme-design.free-personalized-demo .demoForm {
padding: 20px 24px 22px;
}
.new-theme-design.free-personalized-demo .fieldGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.new-theme-design.free-personalized-demo .field {
display: grid;
gap: 5px;
margin-bottom: 0;
}
.new-theme-design.free-personalized-demo .field.full {
grid-column: 1/-1;
}
.new-theme-design.free-personalized-demo .field label {
font-size: 15px;
font-weight: 600;
color: #25465b;
}
.new-theme-design.free-personalized-demo .field label span {
color: #e25757;
}
.new-theme-design.free-personalized-demo .field input,
.new-theme-design.free-personalized-demo .field select,
.new-theme-design.free-personalized-demo .field textarea {
width: 100%;
border: 1px solid #cfe0ea;
background: #fbfdff;
color: var(--ink);
border-radius: 10px;
padding: 11px 12px;
font-size: 12px;
transition: 0.18s;
}
.new-theme-design.free-personalized-demo .field input,
.new-theme-design.free-personalized-demo .field select {
height: 44px;
}
.new-theme-design.free-personalized-demo .field textarea {
min-height: 82px;
resize: vertical;
}
.new-theme-design.free-personalized-demo .field input:focus,
.new-theme-design.free-personalized-demo .field select:focus,
.new-theme-design.free-personalized-demo .field textarea:focus {
border-color: var(--brand);
background: #fff;
}
.new-theme-design.free-personalized-demo .consent {
display: flex;
gap: 9px;
align-items: flex-start;
margin: 1px 0 13px;
}
.new-theme-design.free-personalized-demo .consent input {
margin-top: 3px;
accent-color: var(--brand2);
}
.new-theme-design.free-personalized-demo .consent label {
font-size: 13px;
color: var(--muted);
}
.new-theme-design.free-personalized-demo .consent a {
color: var(--brand2);
font-weight: 800;
}
.new-theme-design.free-personalized-demo .formSubmit {
width: 100%;
min-height: 50px;
border: 0;
border-radius: 11px;
background: var(--yellow);
color: #111;
font-weight: 950;
box-shadow: 0 10px 24px rgba(255, 201, 40, 0.22);
}
.new-theme-design.free-personalized-demo .formSubmit:hover {
transform: translateY(-1px);
}
.new-theme-design.free-personalized-demo .formNote {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 11px;
font-size: 15px;
color: var(--muted);
text-align: center;
}
.new-theme-design.free-personalized-demo .formNote span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px var(--greenbg);
}
.new-theme-design.free-personalized-demo .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
background: #fff;
}
.new-theme-design.free-personalized-demo .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 850;
margin-bottom: 15px;
}
.new-theme-design.free-personalized-demo .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px;
}
.new-theme-design.free-personalized-demo .logo {
height: 58px;
border: 1px solid #d8e7ef;
border-radius: 12px;
display: grid;
place-items: center;
color: #647f90;
font-size: 11px;
font-weight: 900;
background: linear-gradient(180deg, #fff, #fbfdff);
}
.new-theme-design.free-personalized-demo .outcomes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.new-theme-design.free-personalized-demo .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 23px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.new-theme-design.free-personalized-demo .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.free-personalized-demo .outcome:nth-child(2):before {
background: var(--yellow);
}
.new-theme-design.free-personalized-demo .outcome:nth-child(3):before {
background: var(--green);
}
.new-theme-design.free-personalized-demo .outcomeIcon {
width: 43px;
height: 43px;
border-radius: 12px;
background: var(--sky);
display: grid;
place-items: center;
margin-bottom: 14px;
color: var(--navy);
}
.new-theme-design.free-personalized-demo .outcome:nth-child(2) .outcomeIcon {
background: var(--yellowsoft);
}
.new-theme-design.free-personalized-demo .outcome:nth-child(3) .outcomeIcon {
background: var(--greenbg);
}
.new-theme-design.free-personalized-demo .outcomeIcon svg {
width: 22px;
height: 22px;
}
.new-theme-design.free-personalized-demo .outcome strong {
display: block;
font-size: 18px;
}
.new-theme-design.free-personalized-demo .outcome span {
display: block;
font-size: 15px;
color: var(--muted);
margin-top: 7px;
}
.new-theme-design.free-personalized-demo .exploreGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.new-theme-design.free-personalized-demo .exploreCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 18px;
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
align-items: start;
transition: 0.2s;
}
.new-theme-design.free-personalized-demo .exploreCard:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.08);
}
.new-theme-design.free-personalized-demo .exploreIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
color: #111;
font-size: 9px;
font-weight: 950;
}
.new-theme-design.free-personalized-demo .exploreCard:nth-child(2n) .exploreIcon {
background: var(--sky);
color: var(--navy);
}
.new-theme-design.free-personalized-demo .exploreCard:nth-child(3n) .exploreIcon {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.free-personalized-demo .exploreCard h3 {
font-size: 16px;
}
.new-theme-design.free-personalized-demo .exploreCard p {
font-size: 15px;
color: var(--muted);
margin-top: 5px;
}
.new-theme-design.free-personalized-demo .aiSection {
background: linear-gradient(135deg, #0b0b0b, #171717);
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.free-personalized-demo .aiSection h2,
.new-theme-design.free-personalized-demo .aiSection h3 {
color: #fff;
}
.new-theme-design.free-personalized-demo .aiSection .ey {
background: var(--yellow);
color: #111;
}
.new-theme-design.free-personalized-demo .aiSection .ey:before {
background: #111;
box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.12);
}
.new-theme-design.free-personalized-demo .aiSimple {
display: grid;
grid-template-columns: 1.8fr 1.12fr;
gap: 46px;
align-items: center;
}
.new-theme-design.free-personalized-demo .aiCopy p {
font-size: 16px;
color: #d0d0d0;
margin-top: 16px;
}
.new-theme-design.free-personalized-demo .aiBenefits {
display: grid;
gap: 10px;
margin-top: 22px;
}
.new-theme-design.free-personalized-demo .aiBenefit {
display: flex;
gap: 10px;
align-items: flex-start;
color: #e2e2e2;
font-size: 12px;
}
.new-theme-design.free-personalized-demo .aiBenefit i {
width: 23px;
height: 23px;
flex: 0 0 23px;
border-radius: 8px;
background: var(--yellow);
color: #111;
font-style: normal;
display: grid;
place-items: center;
font-size: 8px;
font-weight: 950;
}
.new-theme-design.free-personalized-demo .aiFlowCard {
background: #101820;
border: 1px solid #33424e;
border-radius: 22px;
padding: 18px;
box-shadow: 0 26px 58px rgba(0, 0, 0, 0.28);
}
.new-theme-design.free-personalized-demo .aiQuery {
background: #19242d;
border: 1px solid #354550;
border-radius: 13px;
padding: 13px 15px;
}
.new-theme-design.free-personalized-demo .aiQuery small {
display: block;
color: #8fa8b8;
font-size: 7px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
}
.new-theme-design.free-personalized-demo .aiQuery strong {
display: block;
font-size: 12px;
margin-top: 5px;
}
.new-theme-design.free-personalized-demo .aiFlow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 9px;
align-items: stretch;
margin-top: 13px;
}
.new-theme-design.free-personalized-demo .aiNode {
border: 1px solid #30404c;
background: #151f27;
border-radius: 13px;
padding: 13px;
}
.new-theme-design.free-personalized-demo .aiNodeHead {
display: flex;
align-items: center;
gap: 8px;
}
.new-theme-design.free-personalized-demo .aiNodeMark {
width: 31px;
height: 31px;
border-radius: 10px;
background: var(--yellow);
color: #111;
display: grid;
place-items: center;
font-size: 8px;
font-weight: 950;
}
.new-theme-design.free-personalized-demo .aiNode:nth-of-type(3) .aiNodeMark {
background: var(--brand);
color: #fff;
}
.new-theme-design.free-personalized-demo .aiNode:nth-of-type(5) .aiNodeMark {
background: var(--green);
color: #fff;
}
.new-theme-design.free-personalized-demo .aiNode strong {
font-size: 16px;
}
.new-theme-design.free-personalized-demo .aiNode span {
display: block;
font-size: 16px;
color: #afc0cb;
margin-top: 7px;
}
.new-theme-design.free-personalized-demo .aiNode p {
margin-bottom: 0;
}
.new-theme-design.free-personalized-demo .aiArrow {
display: grid;
place-items: center;
color: var(--yellow);
font-size: 16px;
font-weight: 950;
}
.new-theme-design.free-personalized-demo .aiResult {
margin-top: 13px;
background: linear-gradient(90deg,
rgba(255, 201, 40, 0.15),
rgba(17, 138, 97, 0.11));
border: 1px solid rgba(255, 201, 40, 0.35);
border-radius: 12px;
padding: 12px 13px;
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
}
.new-theme-design.free-personalized-demo .aiResult strong {
display: block;
font-size: 9px;
}
.new-theme-design.free-personalized-demo .aiResult span {
display: block;
font-size: 7px;
color: #c8d4db;
margin-top: 3px;
}
.new-theme-design.free-personalized-demo .aiResult b {
padding: 6px 8px;
border-radius: 999px;
background: var(--yellow);
color: #111;
font-size: 7px;
white-space: nowrap;
}
.new-theme-design.free-personalized-demo .agendaGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.new-theme-design.free-personalized-demo .agendaStep {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
position: relative;
}
.new-theme-design.free-personalized-demo .agendaTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 15px;
}
.new-theme-design.free-personalized-demo .stepNum {
width: 39px;
height: 39px;
border-radius: 12px;
background: var(--brand);
color: #fff;
display: grid;
place-items: center;
font-size: 14px;
font-weight: 950;
}
.new-theme-design.free-personalized-demo .agendaStep:nth-child(2) .stepNum {
background: var(--yellow);
color: #111;
}
.new-theme-design.free-personalized-demo .agendaStep:nth-child(3) .stepNum {
background: var(--green);
}
.new-theme-design.free-personalized-demo .stepTime {
font-size: 14px;
font-weight: 900;
color: var(--navy);
background: #f3f8fb;
border: 1px solid var(--line);
padding: 5px 7px;
border-radius: 999px;
}
.new-theme-design.free-personalized-demo .agendaStep h3 {
font-size: 18px;
}
.new-theme-design.free-personalized-demo .agendaStep p {
font-size: 15px;
color: var(--muted);
margin-top: 8px;
}
.new-theme-design.free-personalized-demo .supportShell {
background: #fff;
border: 1px solid #cae4f1;
border-radius: 24px;
box-shadow: var(--shadow);
overflow: hidden;
}
.new-theme-design.free-personalized-demo .supportHead {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 30px;
align-items: end;
padding: 30px 32px;
background:
radial-gradient(circle at 88% 20%,
rgba(255, 201, 40, 0.18),
transparent 24%),
linear-gradient(135deg, #eaf8ff, #f8fcff);
}
.new-theme-design.free-personalized-demo .supportHead p {
color: var(--muted);
font-size: 16px;
max-width: 520px;
}
.new-theme-design.free-personalized-demo .supportRail {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0 20px 22px;
gap: 12px;
margin-top: -2px;
}
.new-theme-design.free-personalized-demo .supportCard {
border: 1px solid var(--line);
border-radius: 15px;
padding: 18px;
background: #fff;
}
.new-theme-design.free-personalized-demo .supportIcon {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center;
font-size: 9px;
font-weight: 950;
margin-bottom: 12px;
}
.new-theme-design.free-personalized-demo .supportCard:nth-child(2) .supportIcon {
background: var(--yellowsoft);
color: #6b5200;
}
.new-theme-design.free-personalized-demo .supportCard:nth-child(3) .supportIcon {
background: var(--greenbg);
color: var(--green);
}
.new-theme-design.free-personalized-demo .supportCard:nth-child(4) .supportIcon {
background: #f0edff;
color: var(--purple);
}
.new-theme-design.free-personalized-demo .supportCard h3 {
font-size: 16px;
}
.new-theme-design.free-personalized-demo .supportCard p {
font-size: 15px;
color: var(--muted);
margin-top: 6px;
}
.new-theme-design.free-personalized-demo .supportNote {
margin: 0 20px 20px;
padding: 13px 15px;
border-radius: 12px;
background: #0d2535;
color: #fff;
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
}
.new-theme-design.free-personalized-demo .supportNote span {
font-size: 10px;
color: #cee0e9;
}
.new-theme-design.free-personalized-demo .supportNote b {
font-size: 9px;
color: #111;
background: var(--yellow);
padding: 6px 8px;
border-radius: 999px;
white-space: nowrap;
}
.new-theme-design.free-personalized-demo .promiseBand {
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
padding: 28px 0;
}
.new-theme-design.free-personalized-demo .promiseGrid {
display: grid;
grid-template-columns: 1.2fr repeat(3, 1fr);
gap: 14px;
align-items: center;
}
.new-theme-design.free-personalized-demo .promiseIntro strong {
display: block;
font-size: 18px;
}
.new-theme-design.free-personalized-demo .promiseIntro span {
display: block;
font-size: 10px;
color: #bfbfbf;
margin-top: 4px;
}
.new-theme-design.free-personalized-demo .promiseItem {
min-height: 70px;
border-left: 1px solid #2d2d2d;
padding-left: 17px;
display: flex;
flex-direction: column;
justify-content: center;
}
.new-theme-design.free-personalized-demo .promiseItem b {
font-size: 13px;
color: var(--yellow);
}
.new-theme-design.free-personalized-demo .promiseItem span {
font-size: 9px;
color: #cfcfcf;
margin-top: 4px;
}
.new-theme-design.free-personalized-demo .faq {
max-width: 900px;
}
.new-theme-design.free-personalized-demo .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.free-personalized-demo .faq summary {
font-weight: 850;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.free-personalized-demo .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
}
.new-theme-design.free-personalized-demo .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 39px 42px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.free-personalized-demo .final h2 {
color: #fff;
font-size: clamp(29px, 3.3vw, 42px);
}
.new-theme-design.free-personalized-demo .final p {
color: #d7d7d7;
margin-top: 10px;
max-width: 700px;
font-size: 14px;
}
.new-theme-design.free-personalized-demo .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.free-personalized-demo .contactLine {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 10px;
color: #c8c8c8;
font-size: 15px;
text-align: center;
justify-content: center;
}
.new-theme-design.free-personalized-demo .contactLine a {
color: #fff;
font-weight: 800;
}
@media (max-width: 980px) {
.new-theme-design.free-personalized-demo .heroGrid,
.new-theme-design.free-personalized-demo .aiSimple,
.new-theme-design.free-personalized-demo .supportHead,
.new-theme-design.free-personalized-demo .final {
grid-template-columns: 1fr;
}
.new-theme-design.free-personalized-demo .heroCopy {
max-width: 800px;
}
.new-theme-design.free-personalized-demo .formStage {
max-width: 720px;
width: 100%;
margin: 0 auto;
}
.new-theme-design.free-personalized-demo .outcomes,
.new-theme-design.free-personalized-demo .exploreGrid,
.new-theme-design.free-personalized-demo .agendaGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.free-personalized-demo .logos {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.free-personalized-demo .supportRail {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.free-personalized-demo .promiseGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.free-personalized-demo .promiseIntro {
grid-column: 1/-1;
}
}
@media (max-width: 680px) {
.new-theme-design.free-personalized-demo .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.new-theme-design.free-personalized-demo .hero {
padding: 50px 0 46px;
}
.new-theme-design.free-personalized-demo .heroGrid {
gap: 36px;
}
.new-theme-design.free-personalized-demo .formStage:before {
display: none;
}
.new-theme-design.free-personalized-demo .fieldGrid {
grid-template-columns: 1fr;
}
.new-theme-design.free-personalized-demo .field.full {
grid-column: auto;
}
.new-theme-design.free-personalized-demo .formTopRow {
display: grid;
}
.new-theme-design.free-personalized-demo .freeChip {
justify-self: start;
}
.new-theme-design.free-personalized-demo .outcomes,
.new-theme-design.free-personalized-demo .exploreGrid,
.new-theme-design.free-personalized-demo .agendaGrid,
.new-theme-design.free-personalized-demo .logos,
.new-theme-design.free-personalized-demo .supportRail,
.new-theme-design.free-personalized-demo .promiseGrid {
grid-template-columns: 1fr;
}
.new-theme-design.free-personalized-demo .supportHead {
padding: 26px 22px;
}
.new-theme-design.free-personalized-demo .supportRail {
padding: 0 14px 14px;
}
.new-theme-design.free-personalized-demo .supportNote {
margin: 0 14px 14px;
align-items: flex-start;
flex-direction: column;
}
.new-theme-design.free-personalized-demo .promiseIntro {
grid-column: auto;
}
.new-theme-design.free-personalized-demo .promiseItem {
border-left: 0;
border-top: 1px solid #2d2d2d;
padding: 13px 0 0;
}
.new-theme-design.free-personalized-demo .aiFlow {
grid-template-columns: 1fr;
}
.new-theme-design.free-personalized-demo .aiArrow {
transform: rotate(90deg);
}
.new-theme-design.free-personalized-demo .aiResult {
align-items: flex-start;
flex-direction: column;
}
.new-theme-design.free-personalized-demo .final {
padding: 31px 23px;
}
.new-theme-design.free-personalized-demo .final .ctaBtns {
width: 100%;
}
.new-theme-design.free-personalized-demo .final .btn {
width: 100%;
}
}
@media (max-width: 460px) {
.new-theme-design.free-personalized-demo .heroMeta {
display: grid;
gap: 9px;
}
.new-theme-design.free-personalized-demo .heroMeta br {
display: none;
}
.new-theme-design.free-personalized-demo .demoForm {
padding: 18px;
}
.new-theme-design.free-personalized-demo .formTop {
padding: 20px;
}
.new-theme-design.free-personalized-demo .exploreCard {
grid-template-columns: 38px 1fr;
}
.new-theme-design.free-personalized-demo .exploreIcon {
width: 38px;
height: 38px;
}
} .new-theme-design.free-personalized-demo .solutionGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.free-personalized-demo .solutionCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 20px;
transition: 0.22s;
position: relative;
overflow: hidden;
}
.new-theme-design.free-personalized-demo .solutionCard:before {
content: "";
position: absolute;
right: -25px;
top: -25px;
width: 90px;
height: 90px;
border-radius: 50%;
background: rgba(0, 168, 248, 0.06);
}
.new-theme-design.free-personalized-demo .solutionCard:nth-child(2n):before {
background: rgba(255, 201, 40, 0.11);
}
.new-theme-design.free-personalized-demo .solutionCard:hover {
transform: translateY(-4px);
box-shadow: 0 15px 32px rgba(6, 59, 92, 0.09);
}
.new-theme-design.free-personalized-demo .solutionIcon {
width: 45px;
height: 45px;
border-radius: 13px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 14px;
position: relative;
}
.new-theme-design.free-personalized-demo .solutionIcon svg {
width: 23px;
height: 23px;
stroke: #111;
}
.new-theme-design.free-personalized-demo .solutionCard:nth-child(3n) .solutionIcon {
background: var(--yellow);
}
.new-theme-design.free-personalized-demo .solutionCard:nth-child(4n) .solutionIcon {
background: var(--yellow);
}
.new-theme-design.free-personalized-demo .solutionCard h3 {
font-size: 18px;
}
.new-theme-design.free-personalized-demo .solutionCard p {
font-size: 15px;
color: var(--muted);
margin-top: 8px;
}
.new-theme-design.free-personalized-demo .solutionTag {
display: inline-flex;
margin-top: 13px;
padding: 5px 15px;
border-radius: 999px;
background: #f4f9fc;
color: var(--navy);
font-size: 13px;
font-weight: 900;
border: 1px solid #dbeaf2;
} .new-theme-design.free-personalized-demo .aiGrid {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: 48px;
align-items: center;
}
.new-theme-design.free-personalized-demo .aiCopy .lead {
color: #d5d5d5;
}
.new-theme-design.free-personalized-demo .aiPoints {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
margin-top: 23px;
}
.new-theme-design.free-personalized-demo .aiPoint {
display: flex;
gap: 9px;
font-size: 12px;
color: #d8d8d8;
}
.new-theme-design.free-personalized-demo .aiPoint span:first-child {
width: 22px;
height: 22px;
flex: 0 0 22px;
border-radius: 8px;
background: var(--yellow);
color: #111;
display: grid;
place-items: center;
font-size: 8px;
font-weight: 950;
}
.new-theme-design.free-personalized-demo .aiWorkspace {
background: #101820;
border: 1px solid #30404d;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 28px 64px rgba(0, 0, 0, 0.28);
}
.new-theme-design.free-personalized-demo .aiHead {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid #2c3945;
background: #0b1117;
}
.new-theme-design.free-personalized-demo .aiBrand {
display: flex;
align-items: center;
gap: 10px;
}
.new-theme-design.free-personalized-demo .aiMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow);
color: #111;
display: grid;
place-items: center;
font-size: 9px;
font-weight: 950;
}
.new-theme-design.free-personalized-demo .aiBrand strong {
display: block;
font-size: 10px;
}
.new-theme-design.free-personalized-demo .aiBrand span {
display: block;
font-size: 6px;
color: #93a8b8;
}
.new-theme-design.free-personalized-demo .aiStatus {
font-size: 7px;
font-weight: 900;
color: #79e7b6;
background: rgba(17, 138, 97, 0.15);
border: 1px solid rgba(121, 231, 182, 0.25);
padding: 5px 7px;
border-radius: 999px;
}
.new-theme-design.free-personalized-demo .aiBody {
display: grid;
grid-template-columns: 1.18fr 0.82fr;
min-height: 380px;
}
.new-theme-design.free-personalized-demo .aiConversation {
padding: 15px;
border-right: 1px solid #293744;
}
.new-theme-design.free-personalized-demo .queryLabel {
font-size: 7px;
color: #93a8b8;
font-weight: 850;
}
.new-theme-design.free-personalized-demo .queryBox {
margin-top: 7px;
padding: 12px 13px;
border-radius: 12px;
background: #1b2630;
border: 1px solid #314451;
font-size: 9px;
color: #f2f6f8;
}
.new-theme-design.free-personalized-demo .queryTags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 9px;
}
.new-theme-design.free-personalized-demo .queryTags span {
font-size: 6px;
padding: 4px 6px;
border-radius: 999px;
background: #182d3b;
color: #a9dff8;
border: 1px solid #28495d;
}
.new-theme-design.free-personalized-demo .answerBox {
margin-top: 12px;
border-radius: 13px;
background: #f8fbfc;
color: var(--ink);
padding: 13px;
}
.new-theme-design.free-personalized-demo .answerTop {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.new-theme-design.free-personalized-demo .answerTop strong {
font-size: 9px;
}
.new-theme-design.free-personalized-demo .answerTop span {
font-size: 6px;
color: var(--green);
background: var(--greenbg);
padding: 4px 6px;
border-radius: 999px;
font-weight: 900;
}
.new-theme-design.free-personalized-demo .insightGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-top: 10px;
}
.new-theme-design.free-personalized-demo .insight {
padding: 8px;
border-radius: 9px;
border: 1px solid var(--line);
background: #fff;
}
.new-theme-design.free-personalized-demo .insight b {
display: block;
font-size: 10px;
color: var(--navy);
}
.new-theme-design.free-personalized-demo .insight small {
display: block;
font-size: 5.7px;
color: var(--muted);
margin-top: 2px;
}
.new-theme-design.free-personalized-demo .aiAction {
margin-top: 9px;
padding: 9px;
border-radius: 9px;
background: #0d2535;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.new-theme-design.free-personalized-demo .aiAction span {
font-size: 6.5px;
}
.new-theme-design.free-personalized-demo .aiAction b {
font-size: 6.5px;
color: var(--yellow);
}
.new-theme-design.free-personalized-demo .knowledgePanel {
padding: 15px;
background: #0d151c;
}
.new-theme-design.free-personalized-demo .knowledgeTitle {
font-size: 8px;
font-weight: 900;
}
.new-theme-design.free-personalized-demo .knowledgeTitle span {
display: block;
color: #8198a8;
font-size: 6px;
margin-top: 2px;
font-weight: 500;
}
.new-theme-design.free-personalized-demo .knowledgeCards {
display: grid;
gap: 8px;
margin-top: 11px;
}
.new-theme-design.free-personalized-demo .knowledgeCard {
padding: 10px;
border: 1px solid #2c3e4b;
background: #151f27;
border-radius: 10px;
}
.new-theme-design.free-personalized-demo .knowledgeCard strong {
display: block;
color: #fff;
font-size: 7px;
}
.new-theme-design.free-personalized-demo .knowledgeCard span {
display: block;
color: #91a7b6;
font-size: 5.7px;
margin-top: 3px;
}
.new-theme-design.free-personalized-demo .match {
margin-top: 6px;
height: 4px;
background: #24343f;
border-radius: 99px;
overflow: hidden;
}
.new-theme-design.free-personalized-demo .match i {
display: block;
height: 100%;
background: var(--yellow);
width: 92%;
}
.new-theme-design.free-personalized-demo .knowledgeCard:nth-child(2) .match i {
width: 84%;
}
.new-theme-design.free-personalized-demo .knowledgeCard:nth-child(3) .match i {
width: 77%;
}
.new-theme-design.free-personalized-demo .kbFooter {
margin-top: 11px;
padding: 10px;
border-radius: 10px;
background: rgba(255, 201, 40, 0.09);
border: 1px solid rgba(255, 201, 40, 0.18);
font-size: 6px;
color: #f4d875;
}
.new-theme-design.free-personalized-demo .aiFoot {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 10px 14px;
border-top: 1px solid #2b3944;
background: #0b1117;
}
.new-theme-design.free-personalized-demo .aiFoot span {
font-size: 6.5px;
color: #8fa6b5;
}
.new-theme-design.free-personalized-demo .aiFoot b {
font-size: 7px;
color: var(--yellow);
}
.new-theme-design.free-personalized-demo .intl-tel-input {
width: 100%;
}
.new-theme-design.free-personalized-demo .field textarea {
height: 80px;
}
.new-theme-design.free-personalized-demo .form-container br {
display: none;
}
@media (max-width: 767px) {
.new-theme-design.free-personalized-demo .solutionGrid {
grid-template-columns: repeat(1, 1fr);
}
}  .top-right-header-new .toplft-btn {
padding: 8px 15px;
}
.top-right-header-new .btn-dark {
color: #fff !important;
padding: 8px 15px;
margin-right: 4px;
border-radius: 4px;
font-weight: 600;
}
.top-right-header-new .btn-dark:hover {
box-shadow: none;
}
.top-right-header-new .phone-contact {
border: 2px solid #ffc107;
border-radius: 5px;
padding: 6px 15px;
margin-right: 4px;
box-shadow: 0 0 10px #ffe4a1;
margin-right: 9px;
transition: all 0.3s;
color: #000;
font-weight: 700;
font-size: 16px;
}
.top-right-header-new .phone-contact:hover {
background: #fff7d6;
}
.new-theme-design .footer-cont-info .phone-contact {
color: #ffc928;
font-size: 18px;
font-weight: 700;
}
.new-theme-design .footer-cont-info .phone-contact:hover {
color: #fff;
}
.new-theme-design .footer-cont-info .email-us {
color: #fff;
font-size: 18px;
font-weight: 700;
}
.new-theme-design .footer-cont-info .email-us:hover {
color: #ccc;
}
@media (min-width: 768px) and (max-width: 1194px) {
.navbar-expand-lg .navbar-collapse {
flex-direction: column;
}
}
@media (max-width: 900px) {
.bottom-sty .top-left-contact .phone-contact {
border: 2px solid #ffc107;
border-radius: 5px;
padding: 6px 15px;
margin-right: 4px;
box-shadow: 0 0 10px #ffe4a1;
margin-right: 9px;
transition: all 0.3s;
color: #000;
font-weight: 700;
font-size: 20px;
}
.footer-cont-info {
flex-direction: column;
}
}  .new-theme-design.start-free-trial .ey {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.new-theme-design.start-free-trial .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 720px;
}
.new-theme-design.start-free-trial .btn {
display: inline-flex;
min-height: 49px;
padding: 0 23px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.new-theme-design.start-free-trial .btn:hover {
transform: translateY(-2px);
}
.new-theme-design.start-free-trial .btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 3px solid rgba(0, 168, 248, 0.34);
outline-offset: 3px;
}
.new-theme-design.start-free-trial .btn.black {
background: #0b0b0b;
color: #fff;
}
.new-theme-design.start-free-trial .btn.yellow {
background: var(--yellow);
color: #000;
}
.new-theme-design.start-free-trial .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.new-theme-design.start-free-trial .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.new-theme-design.start-free-trial .soft {
background: var(--sky2);
}
.new-theme-design.start-free-trial .sectionHead {
max-width: 860px;
margin-bottom: 38px;
}
.new-theme-design.start-free-trial .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.new-theme-design.start-free-trial .sectionHead p {
color: var(--muted);
font-size: 16px;
margin-top: 14px;
}
.new-theme-design.start-free-trial .contactBar {
padding: 15px 0;
background: #071e2d;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.new-theme-design.start-free-trial .contactGrid {
display: grid;
grid-template-columns: 1.1fr 1fr 1.25fr;
gap: 10px;
}
.new-theme-design.start-free-trial .contactItem {
min-height: 66px;
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
align-items: center;
padding: 8px 14px;
border-right: 1px solid rgba(255, 255, 255, 0.13);
}
.new-theme-design.start-free-trial .contactItem:last-child {
border-right: 0;
}
.new-theme-design.start-free-trial .contactIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
color: #111;
display: grid;
place-items: center;
}
.new-theme-design.start-free-trial .contactIcon svg {
width: 20px;
height: 20px;
}
.new-theme-design.start-free-trial .contactItem small {
display: block;
color: #9fc0d1;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.new-theme-design.start-free-trial .contactItem strong {
display: block;
font-size: 14px;
color: #fff;
margin-top: 2px;
line-height: 1.45;
}
.new-theme-design.start-free-trial .contactItem .dual {
display: flex;
gap: 7px 13px;
flex-wrap: wrap;
}
.new-theme-design.start-free-trial .hero {
padding: 66px 0 38px;
background:
radial-gradient(circle at 78% 10%,
rgba(0, 168, 248, 0.18),
transparent 28%),
radial-gradient(circle at 93% 72%,
rgba(255, 201, 40, 0.15),
transparent 18%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.new-theme-design.start-free-trial .heroGrid {
display: grid;
grid-template-columns: 1fr 0.92fr;
gap: 55px;
align-items: center;
}
.new-theme-design.start-free-trial .heroCopy {
position: relative;
z-index: 2;
}
.new-theme-design.start-free-trial .heroChecks {
display: grid;
gap: 11px;
margin-top: 24px;
max-width: 620px;
}
.new-theme-design.start-free-trial .heroCheck {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #29495e;
}
.new-theme-design.start-free-trial .heroCheck i {
width: 24px;
height: 24px;
flex: 0 0 24px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-style: normal;
font-size: 11px;
font-weight: 950;
}
.new-theme-design.start-free-trial .heroMicro {
margin-top: 19px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
color: var(--navy);
font-size: 11px;
font-weight: 800;
}
.new-theme-design.start-free-trial .heroMicro span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.new-theme-design.start-free-trial .heroMicro b {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--yellow);
box-shadow: 0 0 0 4px rgba(255, 201, 40, 0.16);
}
.new-theme-design.start-free-trial .formStage {
position: relative;
}
.new-theme-design.start-free-trial .formStage:before {
content: "";
position: absolute;
inset: -22px -22px -24px 35px;
border-radius: 34px;
background:
linear-gradient(rgba(0, 168, 248, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 168, 248, 0.045) 1px, transparent 1px);
background-size: 27px 27px;
mask-image: linear-gradient(135deg, #000, transparent 88%);
}
.new-theme-design.start-free-trial .trialFormCard {
position: relative;
z-index: 2;
background: #fff;
border: 1px solid #cfe6f2;
border-radius: 24px;
box-shadow: 0 28px 70px rgba(6, 59, 92, 0.18);
overflow: hidden;
}
.new-theme-design.start-free-trial .formTop {
padding: 22px 24px 18px;
background: linear-gradient(135deg, #0d2535, #0a4e75);
color: #fff;
border-bottom: 4px solid var(--yellow);
}
.new-theme-design.start-free-trial .formTopRow {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;
}
.new-theme-design.start-free-trial .formTop h2 {
color: #fff;
font-size: 27px;
}
.new-theme-design.start-free-trial .formTop p {
font-size: 15px;
color: #cfe2ed;
margin-top: 6px;
margin-bottom: 0;
}
.new-theme-design.start-free-trial .freeChip {
font-size: 9px;
font-weight: 950;
letter-spacing: 0.06em;
background: var(--yellow);
color: #111;
padding: 7px 9px;
border-radius: 999px;
white-space: nowrap;
}
.new-theme-design.start-free-trial .trialForm {
padding: 20px 24px 22px;
}
.new-theme-design.start-free-trial .fieldGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.new-theme-design.start-free-trial .field {
display: grid;
gap: 5px;
margin-bottom: 12px;
}
.new-theme-design.start-free-trial .field.full {
grid-column: 1/-1;
}
.new-theme-design.start-free-trial .field label {
font-size: 15px;
font-weight: 600;
color: #25465b;
}
.new-theme-design.start-free-trial .field label span {
color: var(--red);
}
.new-theme-design.start-free-trial .field input,
.new-theme-design.start-free-trial .field select,
.new-theme-design.start-free-trial .field textarea {
width: 100%;
border: 1px solid #cfe0ea;
background: #fbfdff;
color: var(--ink);
border-radius: 10px;
padding: 11px 12px;
font-size: 12px;
transition: 0.18s;
}
.new-theme-design.start-free-trial .field input,
.new-theme-design.start-free-trial .field select {
height: 44px;
}
.new-theme-design.start-free-trial .field textarea {
min-height: 82px;
resize: vertical;
height: 80px;
}
.new-theme-design.start-free-trial .field p {
margin-bottom: 0;
}
.new-theme-design.start-free-trial .field input:focus,
.new-theme-design.start-free-trial .field select:focus,
.new-theme-design.start-free-trial .field textarea:focus {
border-color: var(--brand);
background: #fff;
}
.new-theme-design.start-free-trial .consent {
display: flex;
gap: 9px;
align-items: flex-start;
margin: 1px 0 13px;
}
.new-theme-design.start-free-trial .consent input {
margin-top: 3px;
accent-color: var(--brand2);
}
.new-theme-design.start-free-trial .consent label {
font-size: 13px;
color: var(--muted);
}
.new-theme-design.start-free-trial .consent a {
color: var(--brand2);
font-weight: 800;
}
.new-theme-design.start-free-trial .formSubmit {
width: 100%;
min-height: 50px;
border: 0;
border-radius: 11px;
background: var(--yellow);
color: #111;
font-weight: 950;
box-shadow: 0 10px 24px rgba(255, 201, 40, 0.22);
}
.new-theme-design.start-free-trial .formSubmit:hover {
transform: translateY(-1px);
}
.new-theme-design.start-free-trial .formNote {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 15px;
font-size: 15px;
color: var(--muted);
text-align: center;
}
.new-theme-design.start-free-trial .formNote span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px var(--greenbg);
}
.new-theme-design.start-free-trial .heroTrust {
margin-top: 40px;
border: 1px solid #cee4ef;
border-radius: 24px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 14px 40px rgba(6, 59, 92, 0.08);
overflow: hidden;
}
.new-theme-design.start-free-trial .proofRow {
display: grid;
grid-template-columns: 185px 1fr;
align-items: stretch;
}
.new-theme-design.start-free-trial .proofLabel {
padding: 19px 18px;
background: #f7fcff;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
justify-content: center;
}
.new-theme-design.start-free-trial .proofLabel small {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand2);
font-weight: 950;
}
.new-theme-design.start-free-trial .proofLabel strong {
font-size: 15px;
color: var(--navy);
margin-top: 2px;
}
.new-theme-design.start-free-trial .proofLabel span {
font-size: 14px;
color: var(--muted);
margin-top: 3px;
}
.new-theme-design.start-free-trial .proofTrack {
display: grid;
gap: 8px;
padding: 12px;
align-items: stretch;
}
.new-theme-design.start-free-trial .awardTrack {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.new-theme-design.start-free-trial .awardTile {
min-width: 0;
border: 1px solid #dfeaf0;
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px;
transition: 0.18s;
}
.new-theme-design.start-free-trial .awardTile:hover {
border-color: #b6dff2;
transform: translateY(-2px);
}
.new-theme-design.start-free-trial .awardTile object {
display: block;
width: 100%;
height: 54px;
object-fit: contain;
pointer-events: none;
}
.new-theme-design.start-free-trial .awardFallback {
height: 54px;
display: grid;
place-items: center;
font-size: 9px;
line-height: 1.15;
font-weight: 950;
color: var(--navy);
text-align: center;
}
.new-theme-design.start-free-trial .awardTile em {
font-style: normal;
font-size: 7.5px;
line-height: 1.2;
color: var(--muted);
margin-top: 5px;
font-weight: 800;
}
.new-theme-design.start-free-trial .clientBand {
padding: 25px 0;
background: #fff;
border-bottom: 1px solid var(--line);
}
.new-theme-design.start-free-trial .clientLabel {
text-align: center;
font-size: 13px;
font-weight: 850;
margin-bottom: 15px;
}
.new-theme-design.start-free-trial .clientLogos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px;
}
.new-theme-design.start-free-trial .clientLogo {
height: 60px;
border: 1px solid #d8e7ef;
border-radius: 12px;
background: linear-gradient(180deg, #fff, #fbfdff);
display: grid;
place-items: center;
padding: 10px;
color: #6a8291;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.01em;
}
.new-theme-design.start-free-trial .clientLogo object {
width: 100%;
height: 36px;
object-fit: contain;
pointer-events: none;
}
.new-theme-design.start-free-trial .clientFallback {
height: 36px;
display: grid;
place-items: center;
}
.new-theme-design.start-free-trial .ratingsSection {
padding: 64px 0;
background: linear-gradient(180deg, #f5fbff 0%, #ffffff 100%);
border-bottom: 1px solid var(--line);
}
.new-theme-design.start-free-trial .ratingsLayout {
display: grid;
grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.7fr);
gap: 38px;
align-items: center;
}
.new-theme-design.start-free-trial .ratingsIntro {
max-width: 390px;
}
.new-theme-design.start-free-trial .ratingsIntro .ey {
margin-bottom: 15px;
}
.new-theme-design.start-free-trial .ratingsIntro h2 {
font-size: clamp(31px, 3.4vw, 45px);
}
.new-theme-design.start-free-trial .ratingsIntro p {
font-size: 16px;
color: var(--muted);
margin-top: 15px;
}
.new-theme-design.start-free-trial .ratingsNote {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 20px;
font-size: 16px;
font-weight: 700;
color: var(--navy);
}
.new-theme-design.start-free-trial .ratingsNote span {
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--yellow);
color: #111;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 950;
}
.new-theme-design.start-free-trial .ratingsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 11px;
}
.new-theme-design.start-free-trial .ratingTile {
min-width: 0;
min-height: 122px;
border: 1px solid #d8e7ef;
border-radius: 15px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 14px 9px;
transition: 0.18s;
}
.new-theme-design.start-free-trial .ratingTile:hover {
border-color: #a9d8ec;
transform: translateY(-2px);
} .new-theme-design.start-free-trial .ratingName {
font-size: 10px;
font-weight: 950;
color: #243d4e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.new-theme-design.start-free-trial .ratingStars {
font-size: 11px;
letter-spacing: 1px;
color: #f6b800;
line-height: 1;
margin-top: 5px;
}
.new-theme-design.start-free-trial .ratingScore {
font-size: 14px;
color: var(--muted);
font-weight: 600;
margin-top: 5px;
}
.new-theme-design.start-free-trial .suiteGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.new-theme-design.start-free-trial .suiteCard {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 21px;
min-height: 245px;
display: flex;
flex-direction: column;
transition: 0.22s;
overflow: hidden;
}
.new-theme-design.start-free-trial .suiteCard:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.new-theme-design.start-free-trial .suiteCard:nth-child(3):before,
.new-theme-design.start-free-trial .suiteCard:nth-child(6):before {
background: var(--yellow);
}
.new-theme-design.start-free-trial .suiteCard:nth-child(4):before,
.new-theme-design.start-free-trial .suiteCard:nth-child(7):before {
background: var(--green);
}
.new-theme-design.start-free-trial .suiteCard:nth-child(5):before {
background: var(--purple);
}
.new-theme-design.start-free-trial .suiteCard.featured {
grid-column: span 2;
background: linear-gradient(145deg, #0a2c40, #0a4e75);
border-color: #0a4e75;
color: #fff;
}
.new-theme-design.start-free-trial .suiteCard.featured:before {
background: var(--yellow);
}
.new-theme-design.start-free-trial .suiteCard.featured h3 {
color: #fff;
}
.new-theme-design.start-free-trial .suiteCard.featured p {
color: #cfe2ed;
}
.new-theme-design.start-free-trial .suiteCard.featured .suiteLink {
color: var(--yellow);
}
.new-theme-design.start-free-trial .suiteTop {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.new-theme-design.start-free-trial .suiteIcon {
width: 46px;
height: 46px;
border-radius: 13px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center;
}
.new-theme-design.start-free-trial .suiteIcon svg {
width: 23px;
height: 23px;
}
.new-theme-design.start-free-trial .featured .suiteIcon {
background: var(--yellow);
color: #111;
}
.new-theme-design.start-free-trial .suiteNo {
font-size: 11px;
font-weight: 950;
letter-spacing: 0.08em;
color: #8da4b2;
text-transform: uppercase;
}
.new-theme-design.start-free-trial .featured .suiteNo {
color: #9fc6d9;
}
.new-theme-design.start-free-trial .suiteCard h3 {
font-size: 18px;
margin-top: 15px;
}
.new-theme-design.start-free-trial .suiteCard p {
font-size: 15px;
color: var(--muted);
margin-top: 8px;
line-height: 1.65;
}
.new-theme-design.start-free-trial .suiteTags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 15px;
}
.new-theme-design.start-free-trial .suiteTags span {
font-size: 14px;
font-weight: 850;
padding: 5px 12px;
border-radius: 999px;
background: #f2f8fb;
color: #466273;
}
.new-theme-design.start-free-trial .featured .suiteTags span {
background: rgba(255, 255, 255, 0.1);
color: #d9ecf5;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.new-theme-design.start-free-trial .suiteLink {
margin-top: auto;
padding-top: 15px;
color: var(--brand2);
font-size: 10px;
font-weight: 950;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 15px;
}
.new-theme-design.start-free-trial .suiteLink:after {
content: "→";
font-size: 14px;
}
.new-theme-design.start-free-trial .steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
position: relative;
}
.new-theme-design.start-free-trial .steps:before {
content: "";
position: absolute;
left: 16.5%;
right: 16.5%;
top: 30px;
height: 1px;
background: #c7dee9;
}
.new-theme-design.start-free-trial .step {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 24px;
text-align: center;
z-index: 2;
}
.new-theme-design.start-free-trial .stepNo {
width: 60px;
height: 60px;
border-radius: 50%;
display: grid;
place-items: center;
margin: -4px auto 17px;
background: #0a2c40;
color: #fff;
border: 7px solid #eaf8ff;
font-size: 14px;
font-weight: 950;
}
.new-theme-design.start-free-trial .step:nth-child(2) .stepNo {
background: var(--yellow);
color: #111;
border-color: #fff7d6;
}
.new-theme-design.start-free-trial .step:nth-child(3) .stepNo {
background: var(--green);
border-color: var(--greenbg);
}
.new-theme-design.start-free-trial .step h3 {
font-size: 18px;
}
.new-theme-design.start-free-trial .step p {
font-size: 15px;
color: var(--muted);
margin-top: 8px;
}
.new-theme-design.start-free-trial .enterprise {
background: linear-gradient(135deg, #0b0b0b, #171717);
color: #fff;
border-top: 4px solid var(--yellow);
}
.new-theme-design.start-free-trial .enterprise h2,
.new-theme-design.start-free-trial .enterprise h3 {
color: #fff;
}
.new-theme-design.start-free-trial .enterprise .ey {
background: var(--yellow);
color: #111;
}
.new-theme-design.start-free-trial .enterprise .ey:before {
background: #111;
box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.12);
}
.new-theme-design.start-free-trial .enterprise .sectionHead p {
color: #cfcfcf;
}
.new-theme-design.start-free-trial .enterpriseGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.new-theme-design.start-free-trial .enterpriseCard {
border: 1px solid #303a43;
border-radius: 17px;
background: #141a1f;
padding: 20px;
min-height: 182px;
}
.new-theme-design.start-free-trial .enterpriseMark {
height: 44px;
display: flex;
align-items: center;
color: var(--yellow);
font-size: 18px;
font-weight: 950;
letter-spacing: -0.02em;
}
.new-theme-design.start-free-trial .enterpriseCard h3 {
font-size: 16px;
margin-top: 12px;
}
.new-theme-design.start-free-trial .enterpriseCard p {
font-size: 15px;
color: #c8d0d5;
margin-top: 8px;
}
.new-theme-design.start-free-trial .partnerRow {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 12px;
}
.new-theme-design.start-free-trial .partnerRow span {
padding: 5px 7px;
border-radius: 7px;
background: #202a31;
border: 1px solid #34424d;
font-size: 14px;
font-weight: 900;
color: #d6e4eb;
}
.new-theme-design.start-free-trial .faq {
max-width: 900px;
}
.new-theme-design.start-free-trial .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.new-theme-design.start-free-trial .faq summary {
font-weight: 700;
cursor: pointer;
color: var(--navy);
}
.new-theme-design.start-free-trial .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
}
.new-theme-design.start-free-trial .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 42px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.new-theme-design.start-free-trial .final h2 {
color: #fff;
}
.new-theme-design.start-free-trial .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.new-theme-design.start-free-trial .final .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
}
.new-theme-design.start-free-trial .footerNote {
text-align: center;
padding: 18px 20px 28px;
color: #758b99;
font-size: 10px;
}
.new-theme-design.start-free-trial .intl-tel-input {
width: 100%;
}
@media (max-width: 1100px) {
.new-theme-design.start-free-trial .awardTrack {
grid-template-columns: repeat(5, minmax(110px, 1fr));
overflow-x: auto;
}
.new-theme-design.start-free-trial .ratingsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.new-theme-design.start-free-trial .enterpriseGrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 960px) {
.new-theme-design.start-free-trial .heroGrid,
.new-theme-design.start-free-trial .final {
grid-template-columns: 1fr;
}
.new-theme-design.start-free-trial .formStage {
max-width: 700px;
}
.new-theme-design.start-free-trial .suiteGrid {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.start-free-trial .suiteCard.featured {
grid-column: span 2;
}
.new-theme-design.start-free-trial .clientLogos {
grid-template-columns: repeat(3, 1fr);
}
.new-theme-design.start-free-trial .contactGrid {
grid-template-columns: 1fr;
}
.new-theme-design.start-free-trial .contactItem {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.new-theme-design.start-free-trial .contactItem:last-child {
border-bottom: 0;
}
.new-theme-design.start-free-trial .proofRow {
grid-template-columns: 1fr;
}
.new-theme-design.start-free-trial .proofLabel {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 13px 15px;
}
.new-theme-design.start-free-trial .proofLabel span {
display: none;
}
.new-theme-design.start-free-trial .ratingsLayout {
grid-template-columns: 1fr;
gap: 25px;
}
.new-theme-design.start-free-trial .ratingsIntro {
max-width: 720px;
}
}
@media (max-width: 700px) {
.new-theme-design.start-free-trial .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.new-theme-design.start-free-trial .hero {
padding: 50px 0 28px;
}
.new-theme-design.start-free-trial .lead {
font-size: 16px;
}
.new-theme-design.start-free-trial .fieldGrid {
grid-template-columns: 1fr;
}
.new-theme-design.start-free-trial .field.full {
grid-column: auto;
}
.new-theme-design.start-free-trial .suiteGrid,
.new-theme-design.start-free-trial .steps,
.new-theme-design.start-free-trial .enterpriseGrid {
grid-template-columns: 1fr;
}
.new-theme-design.start-free-trial .suiteCard.featured {
grid-column: auto;
}
.new-theme-design.start-free-trial .steps:before {
display: none;
}
.new-theme-design.start-free-trial .clientLogos {
grid-template-columns: repeat(2, 1fr);
}
.new-theme-design.start-free-trial .awardTrack {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 13px;
}
.new-theme-design.start-free-trial .awardTile {
flex: 0 0 118px;
scroll-snap-align: start;
}
.new-theme-design.start-free-trial .proofTrack {
-webkit-overflow-scrolling: touch;
}
.new-theme-design.start-free-trial .ratingsGrid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 9px;
-webkit-overflow-scrolling: touch;
}
.new-theme-design.start-free-trial .ratingTile {
flex: 0 0 150px;
scroll-snap-align: start;
}
.new-theme-design.start-free-trial .final {
padding: 30px;
}
.new-theme-design.start-free-trial .formTopRow {
align-items: flex-start;
}
.new-theme-design.start-free-trial .freeChip {
display: none;
}
}
@media (max-width: 430px) {
.new-theme-design.start-free-trial .contactItem {
padding-left: 6px;
padding-right: 6px;
}
.new-theme-design.start-free-trial .clientLogos {
grid-template-columns: 1fr 1fr;
}
.new-theme-design.start-free-trial .heroMicro {
display: grid;
}
.new-theme-design.start-free-trial .trialForm {
padding: 18px;
}
.new-theme-design.start-free-trial .formTop {
padding: 20px;
}
.new-theme-design.start-free-trial .heroTrust {
border-radius: 18px;
}
}
@media (max-width: 767px) {
.new-theme-design.start-free-trial .actions .button {
width: 100%;
}
.new-theme-design.start-free-trial textarea {
height: 80px !important;
}
.new-theme-design.start-free-trial .form-container p {
margin-bottom: 0 !important;
}
.new-theme-design.start-free-trial .consent label,
.new-theme-design.free-personalized-demo .consent label {
display: flex;
gap: 8px;
align-items: flex-start;
}
.new-theme-design.start-free-trial .consent label[for="consent"],
.new-theme-design.free-personalized-demo .consent label[for="consent"] {
flex-direction: column;
}
}  .new-theme-design .final p {
font-size: 16px;
}
.new-theme-design .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
}
.ctaPanel br {
display: none;
}
@media (max-width: 767px) {
.new-theme-design h2,
.home-v2 h2 {
font-size: 20px !important;
}
.new-theme-design .awardBand .sectionHead {
text-align: center;
max-width: none;
}
}  .fm-page {
--brand: #00a8f8;
--brand-dark: #087fb9;
--navy: #063b5c;
--navy-2: #0b4f75;
--sky: #eaf8ff;
--sky-2: #f5fbff;
--ink: #172c3e;
--muted: #5c7283;
--line: #d9e8f1;
--white: #ffffff;
--success: #187f64;
--success-bg: #eaf8f3;
--black: #101315;
--black-soft: #1a2023;
--yellow: #ffc928;
--yellow-soft: #fff7d6;
--radius: 20px; --max: 1320px;
color: var(--ink);
background: #fff;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.fm-page *,
.fm-page *::before,
.fm-page *::after {
box-sizing: border-box;
}
.fm-page a {
color: inherit;
text-decoration: none;
}
.fm-page img,
.fm-page svg {
max-width: 100%;
}
.fm-page a,
.fm-page summary,
.fm-page input {
touch-action: manipulation;
}
.fm-page a:focus-visible,
.fm-page summary:focus-visible,
.fm-page input:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 5px;
}
.fm-page .wrap {
width: min(var(--max), calc(100% - 48px));
margin: 0 auto;
}
.fm-page section {
padding: 80px 0;
scroll-margin-top: 94px;
}
.fm-page h1,
.fm-page h2,
.fm-page h3,
.fm-page p,
.fm-page figure {
margin: 0;
}
.fm-page h1,
.fm-page h2,
.fm-page h3 {
color: var(--black);
line-height: 1.14;
letter-spacing: -0.035em;
} .fm-page h2 {
font-size: clamp(30px, 3.25vw, 44px);
font-weight: 780;
}
.fm-page h3 {
font-size: 21px;
font-weight: 750;
}
.fm-page .accent {
color: var(--brand-dark);
}
.fm-page .eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border-radius: 50px;
background: var(--yellow-soft);
color: #544600;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.045em;
text-transform: uppercase;
margin-bottom: 18px;
line-height: 1.6;
}
.fm-page .sectionHead {
max-width: 820px;
margin-bottom: 36px;
}
.fm-page .sectionHead p {
max-width: 735px;
color: var(--muted);
margin-top: 16px;
font-size: 17px;
line-height: 1.7;
}
.fm-page .button {
display: inline-flex;
gap: 10px;
min-height: 48px;
padding: 10px 21px;
align-items: center;
justify-content: center;
border-radius: 9px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
white-space: normal;
text-align: center;
}
.fm-page .button svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.fm-page .button.primary {
background: var(--brand-dark);
color: #fff;
} .fm-page .button.secondary {
background: #fff;
color: var(--black);
border-color: #cbdde7;
} .fm-page .button.yellow {
background: var(--yellow);
color: var(--black);
} .fm-page .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--brand-dark);
font-size: 13px;
font-weight: 750;
margin-top: 20px;
}
.fm-page .textLink:hover {
text-decoration: underline;
text-underline-offset: 5px;
}
.fm-page .textLink svg {
width: 16px;
height: 16px;
}
.fm-page .skipLink {
position: fixed;
top: -100px;
left: 20px;
padding: 12px 20px;
background: var(--black);
color: #fff;
z-index: 100;
}
.fm-page .skipLink:focus {
top: 12px;
} .fm-page .topbar {
position: sticky;
top: 0;
z-index: 40;
background: #fff;
border-bottom: 1px solid var(--line);
} .fm-page .brand {
display: inline-flex;
align-items: center;
gap: 9px;
flex-shrink: 0;
color: var(--navy);
font-weight: 850;
font-size: 23px;
letter-spacing: -0.04em;
}
.fm-page .brandWord {
white-space: nowrap;
}
.fm-page .brandWord span {
color: var(--brand);
}
.fm-page .brandMark {
width: 30px;
height: 33px;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--sky);
color: var(--brand);
}
.fm-page .brandMark svg {
width: 23px;
height: 23px;
}
.fm-page .navlinks {
display: flex;
gap: 25px;
align-items: center;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.fm-page .navlinks a:hover {
color: var(--brand-dark);
}
.fm-page .nav>.button {
min-height: 42px;
font-size: 12px;
padding: 9px 15px;
}
.fm-page .mobileNav {
display: none;
}
.fm-page .mobileNav:not([open]) nav {
display: none;
} .fm-page section.hero {
padding: 64px 0 54px;
background:
radial-gradient(ellipse at 92% 38%, #e5f5ff 0, transparent 57%),
linear-gradient(180deg, #fff, #f5fbff);
overflow: hidden;
}
.fm-page .heroGrid {
display: grid;
grid-template-columns: 1.2fr 1.06fr;
gap: 20px;
align-items: center;
}
.fm-page .hero .eyebrow {
font-size: 10.5px;
margin-bottom: 22px;
}
.fm-page .lead {
color: var(--muted);
font-size: 17px;
margin-top: 24px;
max-width: 490px;
line-height: 1.75;
}
.fm-page .lead strong {
color: var(--ink);
font-weight: 700;
}
.fm-page .heroActions {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-top: 27px;
}
.fm-page .hero .button.secondary {
border-color: #e9c95f;
background: #fffdf5;
}
.fm-page .microcopy {
color: var(--muted);
font-size: 11px;
margin-top: 15px;
}
.fm-page .heroCapabilities {
display: flex;
flex-wrap: wrap;
gap: 7px 16px;
margin-top: 27px;
padding-top: 19px;
border-top: 1px solid #dceaf2;
color: #4d6f84;
font-size: 11px;
font-weight: 650;
}
.fm-page .heroCapabilities span {
display: flex;
align-items: center;
gap: 5px;
}
.fm-page .heroCapabilities svg {
width: 15px;
height: 15px;
stroke: var(--brand-dark);
}
.fm-page .heroVisual {
min-width: 0;
position: relative;
}
.fm-page .heroVisual figure {
margin-left: -12px;
margin-right: -8px;
}
.fm-page .heroVisual .fm-svg {
display: block;
width: 100%;
height: auto;
}
.fm-page .heroVisual figcaption {
font-size: 10px;
color: var(--muted);
margin-left: 32px;
margin-top: 5px;
}
.fm-page .motionControl {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
font-size: 10px;
color: var(--muted);
cursor: pointer;
margin: 0 20px 3px auto;
position: relative;
z-index: 1;
}
.fm-page .motionToggle {
appearance: none;
width: 28px;
height: 16px;
position: absolute;
right: 102px;
top: 0;
border-radius: 10px;
background: #d8e4ec;
cursor: pointer;
z-index: 2;
margin: 1px 0 0;
}
.fm-page .motionToggle::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
transition: transform 0.15s;
}
.fm-page .motionToggle:checked {
background: var(--brand-dark);
}
.fm-page .motionToggle:checked::after {
transform: translateX(12px);
}
.fm-page .motionToggle:checked~figure * {
animation-play-state: paused !important;
} .fm-page .clientBand {
background: #fff;
padding: 26px 0 27px;
border-bottom: 1px solid var(--line);
}
.fm-page .trustLabel {
text-align: center;
color: var(--muted);
font-weight: 650;
font-size: 11px;
margin-bottom: 20px;
letter-spacing: 0.035em;
text-transform: uppercase;
}
.fm-page .logoRow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
align-items: center;
}
.fm-page .logoBox {
min-height: 33px;
display: grid;
place-items: center;
text-align: center;
color: #627586;
font-size: 21px;
font-weight: 800;
letter-spacing: -0.055em;
line-height: 1.25;
}
.fm-page .logoBox small {
font-size: 9px;
letter-spacing: 0.07em;
font-weight: 600;
display: block;
}
.fm-page .logoBox.dhl {
font-style: italic;
font-weight: 900;
letter-spacing: -0.04em;
font-size: 29px;
}
.fm-page .logoBox.nestle {
font-family: Georgia, serif;
letter-spacing: -0.06em;
}
.fm-page .logoBox.careflight {
font-style: italic;
}
.fm-page .logoBox.fls {
font-weight: 900;
letter-spacing: -0.06em;
} .fm-page .vedaSection {
background: linear-gradient(120deg, #101417, #19222a);
color: #fff;
border-top: 3px solid var(--yellow);
}
.fm-page .vedaGrid {
display: grid;
grid-template-columns: 0.93fr 1.07fr;
gap: 50px;
align-items: center;
}
.fm-page .vedaSection h2,
.fm-page .vedaSection h3 {
color: #fff;
}
.fm-page .vedaSection .copy p {
color: #c9d4dd;
}
.fm-page .vedaSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.fm-page .vedaSection .featureItem {
color: #e5ecf1;
}
.fm-page .vedaSection .check {
background: #2c3335;
color: var(--yellow);
}
.fm-page .vedaSection .visual figcaption {
color: #b8c9d4;
}
.fm-page .vedaActions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 34px;
}
.fm-page .vedaAction {
display: flex;
gap: 15px;
align-items: flex-start;
padding: 19px 22px;
border: 1px solid #35414a;
border-radius: 13px;
background: #192129;
}
.fm-page .vedaAction>svg {
width: 25px;
height: 25px;
flex-shrink: 0;
color: var(--yellow);
margin-top: 3px;
}
.fm-page .vedaAction strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 4px;
}
.fm-page .vedaAction span {
display: block;
color: #c5d1d9;
font-size: 12px;
line-height: 1.6;
} .fm-page .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.fm-page .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 13px;
padding: 23px;
}
.fm-page .outcome>svg {
width: 26px;
height: 26px;
color: var(--brand-dark);
margin-bottom: 13px;
}
.fm-page .outcome strong {
display: block;
color: var(--black);
font-size: 18px;
line-height: 1.3;
letter-spacing: -0.025em;
margin-bottom: 9px;
}
.fm-page .outcome span {
display: block;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}
.fm-page .awardLayout {
display: grid;
grid-template-columns: 1.15fr 2.85fr;
gap: 30px;
align-items: center;
}
.fm-page .awardLead h2 {
font-size: 25px;
max-width: 260px;
}
.fm-page .awardLead p {
font-size: 12px;
color: var(--muted);
margin-top: 10px;
}
.fm-page .awardProofGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.fm-page .awardItem {
border: 1px solid #e7dca9;
border-radius: 12px;
background: #fffef9;
min-height: 139px;
padding: 15px 10px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.fm-page .awardItem svg {
width: 25px;
height: 25px;
color: #8b701c;
margin-bottom: 9px;
}
.fm-page .awardItem strong {
font-size: 13px;
font-weight: 750;
}
.fm-page .awardItem span {
font-size: 10px;
color: var(--muted);
margin-top: 2px;
}
.fm-page .awardItem b {
color: #7b671f;
font-size: 10px;
font-weight: 650;
margin-top: 4px;
} .fm-page .coreGrid,
.fm-page .cards,
.fm-page .proofCards,
.fm-page .seoGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 19px;
}
.fm-page .coreCard,
.fm-page .card,
.fm-page .proofCard,
.fm-page .seoCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 25px;
min-width: 0;
}
.fm-page .coreCard {
display: flex;
flex-direction: column;
transition: border-color 0.2s;
}
.fm-page .coreCard:hover {
border-color: #8fc4e1;
}
.fm-page .coreIcon,
.fm-page .cardIcon {
width: 44px;
height: 44px;
border-radius: 11px;
display: grid;
place-items: center;
background: var(--yellow-soft);
color: #8a6a08;
margin-bottom: 18px;
}
.fm-page .coreIcon svg,
.fm-page .cardIcon svg {
width: 24px;
height: 24px;
}
.fm-page .coreCard h3,
.fm-page .card h3 {
font-size: 19px;
line-height: 1.3;
}
.fm-page .coreCard p,
.fm-page .card p,
.fm-page .proofCard p,
.fm-page .seoCard p {
color: var(--muted);
margin-top: 11px;
font-size: 13px;
line-height: 1.75;
}
.fm-page .coreCard a {
margin-top: auto;
padding-top: 17px;
display: inline-flex;
gap: 7px;
align-items: center;
font-size: 12px;
color: var(--brand-dark);
font-weight: 750;
}
.fm-page .coreCard a svg {
width: 15px;
height: 15px;
} .fm-page .capability {
background: #fff;
}
.fm-page .capability.alt {
background: var(--sky-2);
}
.fm-page .twoCol {
display: grid;
grid-template-columns: 1fr 1.03fr;
gap: 52px;
align-items: center;
}
.fm-page .twoCol.reverse .copy {
order: 2;
}
.fm-page .twoCol.reverse .visual {
order: 1;
}
.fm-page .copy {
min-width: 0;
}
.fm-page .copy p {
color: var(--muted);
font-size: 15px;
margin-top: 18px;
line-height: 1.8;
}
.fm-page .copy h2 {
font-size: clamp(30px, 3vw, 41px);
}
.fm-page .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 18px;
margin-top: 25px;
}
.fm-page .featureItem {
display: flex;
gap: 8px;
align-items: flex-start;
color: var(--ink);
font-size: 15px;
line-height: 1.65;
}
.fm-page .check {
width: 19px;
height: 19px;
flex: 0 0 19px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
margin-top: 1px;
font-size: 11px;
font-weight: 800;
}
.fm-page .visual {
min-width: 0;
}
.fm-page .visual>.fm-svg {
display: block;
width: 100%;
height: auto;
}
.fm-page .visual figcaption {
color: var(--muted);
font-size: 10px;
padding-left: 18px;
margin-top: 7px;
}
.fm-page details.capabilityMore {
margin-top: 21px;
border: 0;
padding: 0;
background: none;
}
.fm-page details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 12px;
font-weight: 750;
list-style: none;
}
.fm-page details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.fm-page details.capabilityMore summary::after {
content: "+";
font-size: 19px;
font-weight: 500;
line-height: 1;
}
.fm-page details.capabilityMore[open] summary::after {
content: "\2212";
}
.fm-page .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 18px;
margin-top: 17px;
padding-top: 17px;
border-top: 1px solid var(--line);
}
.fm-page .inlineCta {
margin-top: 42px;
border: 1px solid var(--line);
border-left: 4px solid var(--yellow);
border-radius: 14px;
background: #fff;
padding: 25px 27px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.fm-page .inlineCta h3 {
font-size: 19px;
margin-bottom: 7px;
}
.fm-page .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 13px;
max-width: 685px;
}
.fm-page .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex-shrink: 0;
} .fm-page .darkSection {
background: linear-gradient(130deg, #111619, #1a232a);
color: #fff;
border-top: 3px solid var(--yellow);
}
.fm-page .darkSection h2,
.fm-page .darkSection h3 {
color: #fff;
}
.fm-page .darkSection .sectionHead p,
.fm-page .darkSection .copy p {
color: #c7d1d9;
}
.fm-page .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.fm-page .darkSection .featureItem {
color: #e5ebef;
}
.fm-page .darkSection .check {
background: #323b3e;
color: var(--yellow);
}
.fm-page .darkSection .visual figcaption {
color: #b8c9d4;
}
.fm-page .aiFlow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 43px;
}
.fm-page .aiStep {
position: relative;
background: #1e282f;
border: 1px solid #3a464f;
border-radius: 12px;
padding: 21px;
display: flex;
gap: 16px;
}
.fm-page .aiStepNum {
width: 31px;
height: 31px;
flex: 0 0 31px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 800;
font-size: 11px;
}
.fm-page .aiStep strong {
display: block;
color: #fff;
font-size: 15px;
margin-bottom: 5px;
}
.fm-page .aiStep span {
display: block;
color: #c8d1d8;
font-size: 12px;
line-height: 1.65;
}
.fm-page .configNote {
font-size: 11px !important;
color: var(--muted);
margin-top: 18px !important;
}
.fm-page .darkSection .configNote {
color: #b6c4cf !important;
} .fm-page section.metricBand {
padding: 48px 0;
background: var(--black);
color: #fff;
border-top: 3px solid var(--yellow);
}
.fm-page .metricBand .sectionHead {
margin-bottom: 27px;
}
.fm-page .metricBand h2 {
color: #fff;
font-size: 31px;
}
.fm-page .metricBand .sectionHead p {
color: #c8d1d9;
font-size: 14px;
}
.fm-page .metricGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.fm-page .metric {
border-left: 2px solid #505146 !important;
padding: 0 23px 0 18px;
background: transparent;
border: none;
border-radius: 0;
}
.fm-page .metric strong {
color: var(--yellow);
font-size: 20px;
display: block;
line-height: 1.3;
margin-bottom: 7px;
}
.fm-page .metric span {
color: #cbd5dc;
font-size: 12px;
display: block;
} .fm-page .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.fm-page .integration {
min-height: 100px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid #9ed7f4;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 15px 8px;
}
.fm-page .integration strong {
font-size: 16px;
color: var(--navy);
font-weight: 750;
letter-spacing: -0.03em;
}
.fm-page .integration span {
color: var(--muted);
font-size: 10px;
margin-top: 4px;
}
.fm-page .integration strong.sap {
font-size: 25px;
font-style: italic;
color: #1679b0;
}
.fm-page .integration strong.bi {
color: #93701a;
}  .fm-page .ratingSectionGrid {
display: grid;
grid-template-columns: 1fr 1.7fr;
gap: 38px;
align-items: center;
}
.fm-page .ratingLead strong {
font-size: 18px;
display: block;
color: #fff;
}
.fm-page .ratingLead span {
font-size: 15px;
display: block;
color: #fff;
margin-top: 5px;
}
.fm-page .ratingGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.fm-page .ratingItem {
display: block !important;
text-align: center;
padding: 12px 7px;
border-left: 1px solid #323232;
}
.fm-page .ratingItem strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.fm-page .ratingItem span {
font-size: 10px;
color: var(--brand-dark);
display: block;
margin-top: 4px;
}
.fm-page .proofCard {
border-top: 3px solid var(--yellow);
}
.fm-page .proofNumber {
font-size: 12px;
font-weight: 750;
color: var(--brand-dark);
margin-bottom: 20px;
display: block;
}
.fm-page .proofCard h3 {
font-size: 20px;
line-height: 1.25;
}
.fm-page .proofCard .proofResult {
color: var(--navy);
font-size: 12px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
font-weight: 650;
}
.fm-page .cardIcon {
background: var(--sky);
color: var(--brand-dark);
}
.fm-page .seoCard h3 {
font-size: 19px;
line-height: 1.3;
} .fm-page .ctaPanel {
background: linear-gradient(125deg, #000, #000);
border-radius: 0;
padding: 46px 48px;
color: #fff;
display: grid;
grid-template-columns: 1fr;
gap: 42px;
align-items: center;
border-top: 4px solid var(--yellow);
}
.fm-page .ctaPanel h2 {
color: #fff;
font-size: 37px;
}
.fm-page .ctaPanel p {
color: #c8d5df;
font-size: 14px;
margin-top: 17px;
}
.fm-page .ctaActions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 11px;
}
.fm-page .ctaActions .button {
min-width: 211px;
}
.fm-page .contactLinks {
display: flex;
flex-wrap: wrap;
gap: 9px 22px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #42505a;
font-size: 12px;
color: #e3ecf2;
grid-column: 1/-1;
}
.fm-page .contactLinks a:hover {
color: var(--yellow);
}
.fm-page footer {
padding: 24px 0 36px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11px;
}
.fm-page .footerRow {
display: flex;
justify-content: space-between;
gap: 25px;
align-items: flex-start;
}
.fm-page .footerLinks {
display: flex;
gap: 22px;
flex-wrap: wrap;
}
.fm-page .demoDisclaimer {
font-size: 10px;
line-height: 1.7;
color: var(--muted);
max-width: 680px;
margin-top: 12px;
}
.new-theme-design.fm-page .aiStep::after {
display: none;
}
.new-theme-design.fm-page .aiStep {
min-height: 0;
}
.fm-page .ratingBand {
background: #0b0b0b;
color: #fff;
padding: 22px 0;
border-top: 4px solid #ffc928;
} @media (max-width: 1060px) {
.fm-page .navlinks {
gap: 17px;
font-size: 11px;
}
.fm-page .nav {
gap: 16px;
}
.fm-page .brand {
font-size: 20px;
}
.fm-page .heroGrid {
gap: 12px;
grid-template-columns: 1fr 1fr;
} .fm-page .lead {
font-size: 15px;
}
.fm-page .twoCol,
.fm-page .vedaGrid {
gap: 30px;
}
.fm-page .copy h2 {
font-size: 34px;
}
.fm-page .awardLayout {
grid-template-columns: 1fr;
}
.fm-page .awardLead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.fm-page .awardLead h2 {
max-width: none;
}
.fm-page .awardLead p {
max-width: 320px;
margin: 0;
}
.fm-page .heroActions .button {
font-size: 12px;
padding: 10px 15px;
}
.fm-page .inlineCtaActions {
flex-shrink: 1;
}
}
@media (max-width: 820px) {
.fm-page section {
padding: 60px 0;
}
.fm-page .navlinks {
display: none;
}
.fm-page .nav>.button {
margin-left: auto;
}
.fm-page .mobileNav {
display: block;
}
.fm-page .mobileNav summary {
list-style: none;
cursor: pointer;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 8px;
}
.fm-page .mobileNav summary::-webkit-details-marker {
display: none;
}
.fm-page .mobileNav summary svg {
width: 21px;
height: 21px;
}
.fm-page .mobileNav nav {
position: absolute;
left: 0;
right: 0;
top: 74px;
background: #fff;
border: 1px solid var(--line);
border-radius: 0 0 12px 12px;
padding: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.fm-page .mobileNav nav a {
padding: 10px 12px;
font-size: 13px;
border-radius: 7px;
background: var(--sky-2);
}
.fm-page .heroGrid,
.fm-page .twoCol,
.fm-page .vedaGrid {
grid-template-columns: 1fr;
}
.fm-page .heroCopy {
max-width: 600px;
}
.fm-page .heroGrid {
gap: 38px;
} .fm-page .lead {
font-size: 17px;
max-width: 570px;
}
.fm-page .heroVisual {
max-width: 625px;
width: 100%;
margin: 0 auto;
}
.fm-page .twoCol.reverse .copy,
.fm-page .twoCol.reverse .visual {
order: initial;
}
.fm-page .visual {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.fm-page .copy h2 {
font-size: 37px;
max-width: 600px;
}
.fm-page .copy p {
font-size: 16px;
}
.fm-page .featureList {
max-width: 640px;
}
.fm-page .featureItem {
font-size: 13px;
}
.fm-page .vedaActions {
gap: 10px;
}
.fm-page .vedaAction {
flex-direction: column;
padding: 19px;
gap: 10px;
}
.fm-page .outcomeGrid {
grid-template-columns: repeat(2, 1fr);
}
.fm-page .coreGrid,
.fm-page .cards {
grid-template-columns: repeat(2, 1fr);
}
.fm-page .logoRow {
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.fm-page .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.fm-page .ratingSectionGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.fm-page .ratingLead {
text-align: center;
}
.fm-page .ratingItem:first-child {
border-left: 0;
}
.fm-page .proofCards,
.fm-page .seoGrid {
grid-template-columns: 1fr;
}
.fm-page .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.fm-page .metricGrid {
gap: 12px;
}
.fm-page .metric {
padding-right: 7px;
}
.fm-page .ctaPanel {
grid-template-columns: 1fr;
gap: 27px;
}
.fm-page .ctaActions {
flex-direction: row;
flex-wrap: wrap;
}
.fm-page .contactLinks {
margin-top: 0;
}
}
@media (max-width: 767px) {
.fm-page .heroVisual {
display: none;
}
.fm-page .visual {
order: 0;
}
.fm-page .copy {
order: 1;
}
.fm-page .wrap {
width: calc(100% - 32px);
}
.fm-page .nav {
min-height: 66px;
gap: 10px;
}
.fm-page .brand {
font-size: 19px;
gap: 6px;
}
.fm-page .brandMark {
width: 25px;
height: 29px;
}
.fm-page .brandMark svg {
width: 19px;
height: 19px;
}
.fm-page .nav>.button {
font-size: 10px;
min-height: 36px;
padding: 8px 10px;
border-radius: 7px;
}
.fm-page .mobileNav summary {
width: 33px;
height: 36px;
}
.fm-page .mobileNav nav {
top: 66px;
}
.fm-page section.hero {
padding: 42px 0;
} .fm-page .hero .eyebrow {
font-size: 9px;
padding: 7px 9px;
margin-bottom: 22px;
}
.fm-page .lead {
font-size: 15px;
margin-top: 21px;
}
.fm-page .heroActions {
gap: 9px;
}
.fm-page .heroActions .button {
font-size: 11px;
padding: 10px 13px;
min-height: 43px;
}
.fm-page .microcopy {
font-size: 10px;
}
.fm-page .heroCapabilities {
gap: 10px 15px;
font-size: 10px;
margin-top: 22px;
}
.fm-page .heroGrid {
gap: 31px;
}
.fm-page .heroVisual figure {
margin-left: -10px;
margin-right: -10px;
}
.fm-page .heroVisual figcaption {
font-size: 9px;
margin-left: 7px;
}
.fm-page .motionControl {
font-size: 9px;
margin-right: 6px;
}
.fm-page .motionToggle {
right: 82px;
height: 15px;
margin-top: 0;
}
.fm-page section {
padding: 48px 0;
}
.fm-page h2,
.fm-page .copy h2 {
font-size: 31px;
}
.fm-page .sectionHead p {
font-size: 14px;
line-height: 1.8;
}
.fm-page .sectionHead {
margin-bottom: 28px;
}
.fm-page .copy p {
font-size: 14px;
}
.fm-page .eyebrow {
font-size: 9px;
margin-bottom: 15px;
}
.fm-page .featureList {
gap: 12px 14px;
}
.fm-page .featureItem {
font-size: 11px;
line-height: 1.75;
}
.fm-page .check {
width: 17px;
height: 17px;
flex-basis: 17px;
margin-top: 2px;
font-size: 10px;
}
.fm-page .vedaActions {
grid-template-columns: 1fr;
gap: 10px;
margin-top: 24px;
}
.fm-page .vedaAction {
flex-direction: row;
padding: 16px;
gap: 15px;
}
.fm-page .outcomeGrid {
gap: 11px;
}
.fm-page .outcome {
padding: 18px 15px;
}
.fm-page .outcome strong {
font-size: 16px;
}
.fm-page .outcome span {
font-size: 11px;
}
.fm-page .outcome>svg {
width: 23px;
height: 23px;
margin-bottom: 9px;
}
.fm-page .awardLead {
display: block;
}
.fm-page .awardLead h2 {
font-size: 24px;
}
.fm-page .awardLead p {
margin-top: 8px;
}
.fm-page .awardProofGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.fm-page .awardItem {
min-height: 132px;
}
.fm-page .coreGrid,
.fm-page .cards {
grid-template-columns: 1fr;
gap: 12px;
}
.fm-page .coreCard,
.fm-page .card,
.fm-page .proofCard,
.fm-page .seoCard {
padding: 23px;
}
.fm-page .coreCard h3,
.fm-page .card h3 {
font-size: 20px;
}
.fm-page .logoBox {
font-size: 17px;
}
.fm-page .logoBox.dhl {
font-size: 24px;
}
.fm-page .logoRow {
gap: 21px 15px;
}
.fm-page .trustLabel {
font-size: 9px;
}
.fm-page .visual figcaption {
font-size: 9px;
padding-left: 9px;
}
.fm-page .aiFlow {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 30px;
}
.fm-page .aiStep {
padding: 18px;
}
.fm-page .metricGrid {
grid-template-columns: 1fr;
gap: 23px;
}
.fm-page .metricBand h2 {
font-size: 29px;
}
.fm-page .metric strong {
font-size: 20px;
}
.fm-page .metric span {
font-size: 12px;
}
.fm-page .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.fm-page .integration {
min-height: 91px;
}
.fm-page .integration strong {
font-size: 15px;
}
.fm-page .ratingItem strong {
font-size: 14px;
}
.fm-page .ratingItem span {
font-size: 9px;
}
.fm-page .ratingLead strong {
font-size: 18px;
}
.fm-page .ratingLead span {
font-size: 11px;
}
.fm-page .faqItem {
padding: 17px;
}
.fm-page .faqItem summary {
font-size: 13px;
}
.fm-page .faqItem p {
font-size: 12px;
}
.fm-page .inlineCta {
padding: 22px 20px;
gap: 20px;
margin-top: 28px;
}
.fm-page .inlineCta h3 {
font-size: 18px;
}
.fm-page .inlineCta p {
font-size: 12px;
}
.fm-page .inlineCtaActions .button {
font-size: 12px;
min-height: 43px;
}
.fm-page .ctaPanel {
padding: 29px 24px;
gap: 24px;
border-radius: 0;
}
.fm-page .ctaPanel h2 {
font-size: 30px;
}
.fm-page .ctaPanel p {
font-size: 13px;
}
.fm-page .ctaActions {
flex-direction: column;
align-items: stretch;
}
.fm-page .ctaActions .button {
font-size: 13px;
}
.fm-page .contactLinks {
font-size: 11px;
gap: 10px;
flex-direction: column;
overflow-wrap: anywhere;
}
.fm-page .footerRow {
flex-direction: column;
gap: 12px;
}
}
@media (max-width: 360px) {
.fm-page .nav>.button {
display: none;
}
.fm-page .mobileNav {
margin-left: auto;
} .fm-page .heroActions {
flex-direction: column;
align-items: flex-start;
}
.fm-page .featureList,
.fm-page .moreGrid {
grid-template-columns: 1fr;
}
}  .fm-facility-asset-tracking .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.fm-facility-asset-tracking .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.fm-facility-asset-tracking .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.fm-facility-asset-tracking .btn:hover {
transform: translateY(-2px);
}
.fm-facility-asset-tracking .btn.black {
background: #0b0b0b;
color: #fff;
}
.fm-facility-asset-tracking .btn.yellow {
background: var(--yellow);
color: #000;
}
.fm-facility-asset-tracking .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.fm-facility-asset-tracking .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.fm-facility-asset-tracking .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.fm-facility-asset-tracking .soft {
background: var(--sky2);
}
.fm-facility-asset-tracking .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.fm-facility-asset-tracking .dark h2,
.fm-facility-asset-tracking .dark h3 {
color: #fff;
}
.fm-facility-asset-tracking .dark p {
color: #d6d6d6;
}
.fm-facility-asset-tracking .dark .ey {
background: var(--yellow);
color: #000;
} .fm-facility-asset-tracking .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.fm-facility-asset-tracking .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.fm-facility-asset-tracking .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.fm-facility-asset-tracking .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.fm-facility-asset-tracking .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.fm-facility-asset-tracking .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.fm-facility-asset-tracking .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.fm-facility-asset-tracking .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.fm-facility-asset-tracking .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.fm-facility-asset-tracking .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.fm-facility-asset-tracking .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.fm-facility-asset-tracking .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.fm-facility-asset-tracking .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.fm-facility-asset-tracking .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.fm-facility-asset-tracking .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.fm-facility-asset-tracking .outcome:nth-child(2):before {
background: var(--yellow);
}
.fm-facility-asset-tracking .outcome:nth-child(3):before {
background: var(--green);
}
.fm-facility-asset-tracking .outcome:nth-child(4):before {
background: var(--purple);
}
.fm-facility-asset-tracking .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.fm-facility-asset-tracking .outcome span {
font-size: 13px;
color: var(--muted);
}
.fm-facility-asset-tracking .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.fm-facility-asset-tracking .feature.reverse .visual {
order: -1;
}
.fm-facility-asset-tracking .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.fm-facility-asset-tracking .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.fm-facility-asset-tracking .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.fm-facility-asset-tracking .visual {
position: relative;
}
.fm-facility-asset-tracking .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.fm-facility-asset-tracking .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.fm-facility-asset-tracking .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.fm-facility-asset-tracking .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.fm-facility-asset-tracking .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.fm-facility-asset-tracking .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.fm-facility-asset-tracking .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.fm-facility-asset-tracking .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.fm-facility-asset-tracking .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.fm-facility-asset-tracking .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.fm-facility-asset-tracking .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.fm-facility-asset-tracking .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fm-facility-asset-tracking .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.fm-facility-asset-tracking .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.fm-facility-asset-tracking .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.fm-facility-asset-tracking .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.fm-facility-asset-tracking .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.fm-facility-asset-tracking .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.fm-facility-asset-tracking .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.fm-facility-asset-tracking .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.fm-facility-asset-tracking .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.fm-facility-asset-tracking .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.fm-facility-asset-tracking .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
@keyframes stream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 8px rgba(17, 138, 97, 0.08);
}
}
.fm-facility-asset-tracking .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fm-facility-asset-tracking .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.fm-facility-asset-tracking .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.fm-facility-asset-tracking .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.fm-facility-asset-tracking .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.fm-facility-asset-tracking .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.fm-facility-asset-tracking .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.fm-facility-asset-tracking .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.fm-facility-asset-tracking .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.fm-facility-asset-tracking .review strong {
font-size: 12px;
}
.fm-facility-asset-tracking .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.fm-facility-asset-tracking .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.fm-facility-asset-tracking .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.fm-facility-asset-tracking .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.fm-facility-asset-tracking .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.fm-facility-asset-tracking .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.fm-facility-asset-tracking .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.fm-facility-asset-tracking .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.fm-facility-asset-tracking .faq {
max-width: 900px;
}
.fm-facility-asset-tracking .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.fm-facility-asset-tracking .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.fm-facility-asset-tracking .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
}
.fm-facility-asset-tracking .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.fm-facility-asset-tracking .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.fm-facility-asset-tracking .cta h3 {
font-size: 19px;
}
.fm-facility-asset-tracking .cta.darkCta h3 {
color: #fff;
}
.fm-facility-asset-tracking .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.fm-facility-asset-tracking .cta.darkCta p {
color: #d1d1d1;
}
.fm-facility-asset-tracking .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.fm-facility-asset-tracking .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.fm-facility-asset-tracking .final h2 {
color: #fff;
text-align: center;
}
.fm-facility-asset-tracking .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.fm-facility-asset-tracking .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.fm-facility-asset-tracking .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.fm-facility-asset-tracking .heroGrid,
.fm-facility-asset-tracking .feature,
.fm-facility-asset-tracking .aiGrid,
.fm-facility-asset-tracking .final {
grid-template-columns: 1fr;
}
.fm-facility-asset-tracking .feature.reverse .visual {
order: 0;
}
.fm-facility-asset-tracking .outcomes,
.fm-facility-asset-tracking .featureGrid,
.fm-facility-asset-tracking .connectedGrid,
.fm-facility-asset-tracking .useCases {
grid-template-columns: repeat(2, 1fr);
}
.fm-facility-asset-tracking .logos {
grid-template-columns: repeat(4, 1fr);
}
.fm-facility-asset-tracking .integrations {
grid-template-columns: repeat(3, 1fr);
}
.fm-facility-asset-tracking .reviews {
grid-template-columns: 1fr;
}
.fm-facility-asset-tracking .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.fm-facility-asset-tracking .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.fm-facility-asset-tracking .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.fm-facility-asset-tracking .hero {
padding: 54px 0;
} .fm-facility-asset-tracking .fl,
.fm-facility-asset-tracking .outcomes,
.fm-facility-asset-tracking .featureGrid,
.fm-facility-asset-tracking .connectedGrid,
.fm-facility-asset-tracking .useCases,
.fm-facility-asset-tracking .logos,
.fm-facility-asset-tracking .integrations,
.fm-facility-asset-tracking .ratingGrid {
grid-template-columns: 1fr;
}
.fm-facility-asset-tracking .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
img {
max-width: 100%;
height: auto;
}
.fm-facility-asset-tracking .heroGrid,
.fm-facility-asset-tracking .feature,
.fm-facility-asset-tracking .aiGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.fm-facility-asset-tracking .heroGrid>*,
.fm-facility-asset-tracking .feature>*,
.fm-facility-asset-tracking .aiGrid>*,
.fm-facility-asset-tracking .final>* {
min-width: 0;
}
.fm-facility-asset-tracking .heroGrid {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: 38px;
} .fm-facility-asset-tracking .hero .lead {
font-size: 17px;
line-height: 1.7;
}
.fm-facility-asset-tracking .hero .micro {
font-size: 12px;
line-height: 1.7;
}
.fm-facility-asset-tracking .heroPills span {
font-size: 11px;
}
.fm-facility-asset-tracking .heroVisual {
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.fm-facility-asset-tracking .heroArt {
order: 0;
width: 100%;
max-width: 760px;
}
.fm-facility-asset-tracking .heroArt svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.fm-facility-asset-tracking .motion-toggle {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.fm-facility-asset-tracking .motion-label {
order: 1;
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 5px 12px;
border: 1px solid #c6dfec;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
color: var(--navy);
background: #fff;
cursor: pointer;
margin-top: 8px;
}
.fm-facility-asset-tracking .motion-label:before {
content: "";
display: block;
width: 7px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.fm-facility-asset-tracking .motion-resume {
display: none;
}
.fm-facility-asset-tracking .motion-toggle:checked~.motion-label .motion-pause {
display: none;
}
.fm-facility-asset-tracking .motion-toggle:checked~.motion-label .motion-resume {
display: inline;
}
.fm-facility-asset-tracking .motion-toggle:checked~.motion-label:before {
content: "";
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-right: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.fm-facility-asset-tracking .motion-toggle:checked~.heroArt * {
animation-play-state: paused !important;
}
.fm-facility-asset-tracking .motion-toggle:focus-visible~.motion-label {
outline: 3px solid var(--brand2);
outline-offset: 3px;
}
.fm-facility-asset-tracking .assetNote {
order: 2;
margin: 9px 0 0;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.fm-facility-asset-tracking .breadcrumbs {
font-size: 12px;
color: var(--muted);
margin: 0 0 21px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fm-facility-asset-tracking .breadcrumbs a {
color: var(--brand2);
}
.fm-facility-asset-tracking .breadcrumbs a:hover {
text-decoration: underline;
}
.fm-facility-asset-tracking .visual {
min-width: 0;
width: 100%;
}
.fm-facility-asset-tracking .visualCard,
.fm-facility-asset-tracking .visualCard.darkFrame {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.fm-facility-asset-tracking .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
object-fit: contain;
}
.fm-facility-asset-tracking .feature {
gap: 44px;
}
.fm-facility-asset-tracking .feature p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
margin: 17px 0 0;
}
.fm-facility-asset-tracking .fl {
gap: 12px 17px;
}
.fm-facility-asset-tracking .fi {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
font-weight: 500;
line-height: 1.55;
align-items: flex-start;
}
.fm-facility-asset-tracking .tick {
margin-top: 1px;
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 11px;
}
.fm-facility-asset-tracking .outcome,
.fm-facility-asset-tracking .review {
box-shadow: none;
}
.fm-facility-asset-tracking .logo {
text-align: center;
padding: 8px;
font-size: 11px;
line-height: 1.5;
border-style: solid;
background: #fbfdff;
}
.fm-facility-asset-tracking .reveal,
.fm-facility-asset-tracking .reveal.show {
opacity: 1;
transform: none;
transition: none;
}
.fm-facility-asset-tracking .reviewPlaceholder {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: var(--yellowsoft);
color: #785c0b;
padding: 4px 8px;
border-radius: 6px;
}
.fm-facility-asset-tracking .review span {
font-size: 11px;
line-height: 1.5;
margin-top: 6px;
}
.fm-facility-asset-tracking .ratingPlaceholder {
display: block;
font-size: 10px;
color: #b8bec7;
margin-top: 4px;
}
.fm-facility-asset-tracking .streamDot,
.fm-facility-asset-tracking .streamTrack span {
animation: none;
}
.fm-facility-asset-tracking .stream {
grid-template-columns: auto minmax(20px, 1fr) minmax(0, 2fr);
}
.fm-facility-asset-tracking .stream strong {
line-height: 1.7;
overflow-wrap: anywhere;
}
.fm-facility-asset-tracking .ctaBtns {
min-width: 0;
max-width: 100%;
flex-shrink: 1;
}
.fm-facility-asset-tracking .ctaBtns a {
white-space: normal;
text-align: center;
}
.fm-facility-asset-tracking .final {
grid-template-columns: minmax(0, 1fr) auto;
}
.fm-facility-asset-tracking .featureCard p,
.fm-facility-asset-tracking .useCase p {
font-size: 13px;
line-height: 1.7;
}
.fm-facility-asset-tracking .connectedCard span,
.fm-facility-asset-tracking .aiMini span {
font-size: 12px;
line-height: 1.6;
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid var(--brand2);
outline-offset: 4px;
}
@media (max-width: 960px) {
.fm-facility-asset-tracking .heroGrid,
.fm-facility-asset-tracking .feature,
.fm-facility-asset-tracking .aiGrid,
.fm-facility-asset-tracking .final {
grid-template-columns: minmax(0, 1fr);
}
.fm-facility-asset-tracking .heroArt {
max-width: 680px;
}
.fm-facility-asset-tracking .heroVisual {
width: 100%;
margin: auto;
}
.fm-facility-asset-tracking .feature.reverse .visual {
order: 0;
}
.fm-facility-asset-tracking .hero h1 {
max-width: 850px;
}
.fm-facility-asset-tracking .visual {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.fm-facility-asset-tracking .aiMini {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fm-facility-asset-tracking .final .ctaBtns {
max-width: none;
}
.fm-facility-asset-tracking .cta {
flex-wrap: wrap;
}
.fm-facility-asset-tracking .ratingItem {
padding: 12px;
border-left: 0;
}
}
@media (max-width: 767px) {
.fm-facility-asset-tracking .heroArt {
display: none;
}
.fm-facility-asset-tracking .visual {
order: 0;
}
.fm-facility-asset-tracking .visual-content {
order: 1;
}
.fm-facility-asset-tracking .hero {
padding: 34px 0 42px;
} .fm-facility-asset-tracking .hero .lead {
font-size: 16px;
}
.fm-facility-asset-tracking .heroGrid {
gap: 26px;
}
.fm-facility-asset-tracking .breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
.fm-facility-asset-tracking .hero .ey {
font-size: 12px;
margin-bottom: 14px;
}
.fm-facility-asset-tracking .heroPills span {
font-size: 10px;
padding: 5px 8px;
}
.fm-facility-asset-tracking .sectionHead h2,
.fm-facility-asset-tracking .feature h2,
.fm-facility-asset-tracking .aiGrid h2,
.fm-facility-asset-tracking .final h2 {
font-size: clamp(30px, 7.5vw, 38px);
}
.fm-facility-asset-tracking .logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.fm-facility-asset-tracking .logo {
min-height: 54px;
height: auto;
}
.fm-facility-asset-tracking .feature {
gap: 25px;
}
.fm-facility-asset-tracking .feature p {
font-size: 15px;
}
.fm-facility-asset-tracking .visual {
width: calc(100% + 8px);
max-width: none;
margin-left: -4px;
}
.fm-facility-asset-tracking .aiMini {
grid-template-columns: minmax(0, 1fr);
}
.fm-facility-asset-tracking .final {
padding: 28px 22px;
border-radius: 21px;
}
.fm-facility-asset-tracking .stream {
grid-template-columns: auto minmax(0, 1fr);
}
.fm-facility-asset-tracking .streamTrack {
display: none;
}
.fm-facility-asset-tracking .stream strong {
font-size: 10px !important;
}
.fm-facility-asset-tracking .btn {
font-size: 14px;
padding: 0 18px;
}
.fm-facility-asset-tracking .cta {
padding: 20px 17px;
gap: 16px;
}
.fm-facility-asset-tracking .actions,
.fm-facility-asset-tracking .ctaBtns {
gap: 8px;
}
.fm-facility-asset-tracking .motion-label {
font-size: 10px;
}
.fm-facility-asset-tracking .trust {
padding: 23px 0;
}
.fm-facility-asset-tracking .faq details {
padding: 17px 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.fm-facility-asset-tracking .motion-label {
display: none;
}
}  .fm-automated-maintenance-scheduling .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.fm-automated-maintenance-scheduling.new-theme-design .awards__label {
color: #fff;
}
.fm-automated-maintenance-scheduling .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.fm-automated-maintenance-scheduling .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.fm-automated-maintenance-scheduling .btn:hover {
transform: translateY(-2px);
}
.fm-automated-maintenance-scheduling .btn.black {
background: #0b0b0b;
color: #fff;
}
.fm-automated-maintenance-scheduling .btn.yellow {
background: var(--yellow);
color: #000;
}
.fm-automated-maintenance-scheduling .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.fm-automated-maintenance-scheduling .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.fm-automated-maintenance-scheduling .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.fm-automated-maintenance-scheduling .soft {
background: var(--sky2);
}
.fm-automated-maintenance-scheduling .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.fm-automated-maintenance-scheduling .dark h2,
.fm-automated-maintenance-scheduling .dark h3 {
color: #fff;
}
.fm-automated-maintenance-scheduling .dark p {
color: #d6d6d6;
}
.fm-automated-maintenance-scheduling .dark .ey {
background: var(--yellow);
} .fm-automated-maintenance-scheduling .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.fm-automated-maintenance-scheduling .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.fm-automated-maintenance-scheduling .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.fm-automated-maintenance-scheduling .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.fm-automated-maintenance-scheduling .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.fm-automated-maintenance-scheduling .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.fm-automated-maintenance-scheduling .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.fm-automated-maintenance-scheduling .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.fm-automated-maintenance-scheduling .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.fm-automated-maintenance-scheduling .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.fm-automated-maintenance-scheduling .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.fm-automated-maintenance-scheduling .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.fm-automated-maintenance-scheduling .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.fm-automated-maintenance-scheduling .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.fm-automated-maintenance-scheduling .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.fm-automated-maintenance-scheduling .outcome:nth-child(2):before {
background: var(--yellow);
}
.fm-automated-maintenance-scheduling .outcome:nth-child(3):before {
background: var(--green);
}
.fm-automated-maintenance-scheduling .outcome:nth-child(4):before {
background: var(--purple);
}
.fm-automated-maintenance-scheduling .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.fm-automated-maintenance-scheduling .outcome span {
font-size: 13px;
color: var(--muted);
}
.fm-automated-maintenance-scheduling .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.fm-automated-maintenance-scheduling .feature.reverse .visual {
order: -1;
}
.fm-automated-maintenance-scheduling .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.fm-automated-maintenance-scheduling .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.fm-automated-maintenance-scheduling .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.fm-automated-maintenance-scheduling .visual {
position: relative;
}
.fm-automated-maintenance-scheduling .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.fm-automated-maintenance-scheduling .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.fm-automated-maintenance-scheduling .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.fm-automated-maintenance-scheduling .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.fm-automated-maintenance-scheduling .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.fm-automated-maintenance-scheduling .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.fm-automated-maintenance-scheduling .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.fm-automated-maintenance-scheduling .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.fm-automated-maintenance-scheduling .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.fm-automated-maintenance-scheduling .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.fm-automated-maintenance-scheduling .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.fm-automated-maintenance-scheduling .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fm-automated-maintenance-scheduling .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.fm-automated-maintenance-scheduling .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.fm-automated-maintenance-scheduling .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.fm-automated-maintenance-scheduling .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.fm-automated-maintenance-scheduling .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.fm-automated-maintenance-scheduling .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.fm-automated-maintenance-scheduling .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.fm-automated-maintenance-scheduling .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.fm-automated-maintenance-scheduling .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.fm-automated-maintenance-scheduling .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.fm-automated-maintenance-scheduling .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
@keyframes stream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 8px rgba(17, 138, 97, 0.08);
}
}
.fm-automated-maintenance-scheduling .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fm-automated-maintenance-scheduling .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.fm-automated-maintenance-scheduling .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.fm-automated-maintenance-scheduling .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.fm-automated-maintenance-scheduling .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.fm-automated-maintenance-scheduling .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.fm-automated-maintenance-scheduling .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.fm-automated-maintenance-scheduling .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.fm-automated-maintenance-scheduling .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.fm-automated-maintenance-scheduling .review strong {
font-size: 12px;
}
.fm-automated-maintenance-scheduling .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.fm-automated-maintenance-scheduling .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.fm-automated-maintenance-scheduling .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.fm-automated-maintenance-scheduling .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.fm-automated-maintenance-scheduling .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.fm-automated-maintenance-scheduling .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.fm-automated-maintenance-scheduling .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.fm-automated-maintenance-scheduling .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.fm-automated-maintenance-scheduling .faq {
max-width: 900px;
}
.fm-automated-maintenance-scheduling .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.fm-automated-maintenance-scheduling .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.fm-automated-maintenance-scheduling .faq details p {
color: var(--muted);
font-size: 16px;
margin-top: 10px;
}
.fm-automated-maintenance-scheduling .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.fm-automated-maintenance-scheduling .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.fm-automated-maintenance-scheduling .cta h3 {
font-size: 19px;
}
.fm-automated-maintenance-scheduling .cta.darkCta h3 {
color: #fff;
}
.fm-automated-maintenance-scheduling .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.fm-automated-maintenance-scheduling .cta.darkCta p {
color: #d1d1d1;
}
.fm-automated-maintenance-scheduling .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.fm-automated-maintenance-scheduling .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.fm-automated-maintenance-scheduling .final h2 {
color: #fff;
}
.fm-automated-maintenance-scheduling .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.fm-automated-maintenance-scheduling .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.fm-automated-maintenance-scheduling .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.fm-automated-maintenance-scheduling .heroGrid,
.fm-automated-maintenance-scheduling .feature,
.fm-automated-maintenance-scheduling .aiGrid,
.fm-automated-maintenance-scheduling .final {
grid-template-columns: 1fr;
}
.fm-automated-maintenance-scheduling .feature.reverse .visual {
order: 0;
}
.fm-automated-maintenance-scheduling .outcomes,
.fm-automated-maintenance-scheduling .featureGrid,
.fm-automated-maintenance-scheduling .connectedGrid,
.fm-automated-maintenance-scheduling .useCases {
grid-template-columns: repeat(2, 1fr);
}
.fm-automated-maintenance-scheduling .logos {
grid-template-columns: repeat(4, 1fr);
}
.fm-automated-maintenance-scheduling .integrations {
grid-template-columns: repeat(3, 1fr);
}
.fm-automated-maintenance-scheduling .reviews {
grid-template-columns: 1fr;
}
.fm-automated-maintenance-scheduling .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.fm-automated-maintenance-scheduling .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.fm-automated-maintenance-scheduling .wrap {
width: calc(100% - 24px);
}
.fm-automated-maintenance-scheduling section {
padding: 56px 0;
}
.fm-automated-maintenance-scheduling .hero {
padding: 54px 0;
} .fm-automated-maintenance-scheduling .fl,
.fm-automated-maintenance-scheduling .outcomes,
.fm-automated-maintenance-scheduling .featureGrid,
.fm-automated-maintenance-scheduling .connectedGrid,
.fm-automated-maintenance-scheduling .useCases,
.fm-automated-maintenance-scheduling .logos,
.fm-automated-maintenance-scheduling .integrations,
.fm-automated-maintenance-scheduling .ratingGrid {
grid-template-columns: 1fr;
}
.fm-automated-maintenance-scheduling .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.fm-automated-maintenance-scheduling *,
.fm-automated-maintenance-scheduling *:before,
.fm-automated-maintenance-scheduling *:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.fm-automated-maintenance-scheduling .heroGrid,
.fm-automated-maintenance-scheduling .feature,
.fm-automated-maintenance-scheduling .aiGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.fm-automated-maintenance-scheduling .heroGrid>*,
.fm-automated-maintenance-scheduling .feature>*,
.fm-automated-maintenance-scheduling .aiGrid>*,
.fm-automated-maintenance-scheduling .final>* {
min-width: 0;
}
.fm-automated-maintenance-scheduling .heroGrid {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: 38px;
} .fm-automated-maintenance-scheduling .hero .lead {
font-size: 17px;
line-height: 1.7;
}
.fm-automated-maintenance-scheduling .hero .micro {
font-size: 12px;
line-height: 1.7;
}
.fm-automated-maintenance-scheduling .heroPills span {
font-size: 11px;
}
.fm-automated-maintenance-scheduling .heroVisual {
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.fm-automated-maintenance-scheduling .heroArt {
order: 0;
width: 100%;
max-width: 760px;
}
.fm-automated-maintenance-scheduling .heroArt svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.fm-automated-maintenance-scheduling .motion-toggle {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.fm-automated-maintenance-scheduling .motion-label {
order: 1;
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 5px 12px;
border: 1px solid #c6dfec;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
color: var(--navy);
background: #fff;
cursor: pointer;
margin-top: 8px;
}
.fm-automated-maintenance-scheduling .motion-label:before {
content: "";
display: block;
width: 7px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.fm-automated-maintenance-scheduling .motion-resume {
display: none;
}
.fm-automated-maintenance-scheduling .motion-toggle:checked~.motion-label .motion-pause {
display: none;
}
.fm-automated-maintenance-scheduling .motion-toggle:checked~.motion-label .motion-resume {
display: inline;
}
.fm-automated-maintenance-scheduling .motion-toggle:checked~.motion-label:before {
content: "";
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-right: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.fm-automated-maintenance-scheduling .motion-toggle:checked~.heroArt * {
animation-play-state: paused !important;
}
.fm-automated-maintenance-scheduling .motion-toggle:focus-visible~.motion-label {
outline: 3px solid var(--brand2);
outline-offset: 3px;
}
.fm-automated-maintenance-scheduling .assetNote {
order: 2;
margin: 9px 0 0;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.fm-automated-maintenance-scheduling .breadcrumbs {
font-size: 12px;
color: var(--muted);
margin: 0 0 21px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fm-automated-maintenance-scheduling .breadcrumbs a {
color: var(--brand2);
}
.fm-automated-maintenance-scheduling .breadcrumbs a:hover {
text-decoration: underline;
}
.fm-automated-maintenance-scheduling .visual {
min-width: 0;
width: 100%;
}
.fm-automated-maintenance-scheduling .visualCard,
.fm-automated-maintenance-scheduling .visualCard.darkFrame {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.fm-automated-maintenance-scheduling .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
object-fit: contain;
}
.fm-automated-maintenance-scheduling .feature {
gap: 44px;
}
.fm-automated-maintenance-scheduling .feature p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
margin: 17px 0 0;
}
.fm-automated-maintenance-scheduling .fl {
gap: 12px 17px;
}
.fm-automated-maintenance-scheduling .fi {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
font-weight: 500;
line-height: 1.55;
align-items: flex-start;
}
.fm-automated-maintenance-scheduling .tick {
margin-top: 1px;
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 11px;
}
.fm-automated-maintenance-scheduling .outcome,
.fm-automated-maintenance-scheduling .review {
box-shadow: none;
}
.fm-automated-maintenance-scheduling .logo {
text-align: center;
padding: 8px;
font-size: 11px;
line-height: 1.5;
border-style: solid;
background: #fbfdff;
}
.fm-automated-maintenance-scheduling .reveal,
.fm-automated-maintenance-scheduling .reveal.show {
opacity: 1;
transform: none;
transition: none;
}
.fm-automated-maintenance-scheduling .reviewPlaceholder {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: var(--yellowsoft);
color: #785c0b;
padding: 4px 8px;
border-radius: 6px;
}
.fm-automated-maintenance-scheduling .review span {
font-size: 11px;
line-height: 1.5;
margin-top: 6px;
}
.fm-automated-maintenance-scheduling .ratingPlaceholder {
display: block;
font-size: 10px;
color: #b8bec7;
margin-top: 4px;
}
.fm-automated-maintenance-scheduling .streamDot,
.fm-automated-maintenance-scheduling .streamTrack span {
animation: none;
}
.fm-automated-maintenance-scheduling .stream {
grid-template-columns: auto minmax(20px, 1fr) minmax(0, 2fr);
}
.fm-automated-maintenance-scheduling .stream strong {
line-height: 1.7;
overflow-wrap: anywhere;
}
.fm-automated-maintenance-scheduling .ctaBtns {
min-width: 0;
max-width: 100%;
flex-shrink: 1;
}
.fm-automated-maintenance-scheduling .ctaBtns a {
white-space: normal;
text-align: center;
}
.fm-automated-maintenance-scheduling .final {
grid-template-columns: minmax(0, 1fr) auto;
}
.fm-automated-maintenance-scheduling .featureCard p,
.fm-automated-maintenance-scheduling .useCase p {
font-size: 13px;
line-height: 1.7;
}
.fm-automated-maintenance-scheduling .connectedCard span,
.fm-automated-maintenance-scheduling .aiMini span {
font-size: 12px;
line-height: 1.6;
}
.fm-automated-maintenance-scheduling a:focus-visible,
.fm-automated-maintenance-scheduling summary:focus-visible {
outline: 3px solid var(--brand2);
outline-offset: 4px;
}
@media (max-width: 960px) {
.fm-automated-maintenance-scheduling .heroGrid,
.fm-automated-maintenance-scheduling .feature,
.fm-automated-maintenance-scheduling .aiGrid,
.fm-automated-maintenance-scheduling .final {
grid-template-columns: minmax(0, 1fr);
}
.fm-automated-maintenance-scheduling .heroArt {
max-width: 680px;
}
.fm-automated-maintenance-scheduling .heroVisual {
width: 100%;
margin: auto;
}
.fm-automated-maintenance-scheduling .feature.reverse .visual {
order: 0;
}
.fm-automated-maintenance-scheduling .hero h1 {
max-width: 850px;
}
.fm-automated-maintenance-scheduling .visual {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.fm-automated-maintenance-scheduling .aiMini {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fm-automated-maintenance-scheduling .final .ctaBtns {
max-width: none;
}
.fm-automated-maintenance-scheduling .cta {
flex-wrap: wrap;
}
.fm-automated-maintenance-scheduling .ratingItem {
padding: 12px;
border-left: 0;
}
}
@media (max-width: 640px) {
.fm-automated-maintenance-scheduling .hero {
padding: 34px 0 42px;
} .fm-automated-maintenance-scheduling .hero .lead {
font-size: 16px;
}
.fm-automated-maintenance-scheduling .heroGrid {
gap: 26px;
}
.fm-automated-maintenance-scheduling .breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
.fm-automated-maintenance-scheduling .hero .ey {
font-size: 12px;
margin-bottom: 14px;
}
.fm-automated-maintenance-scheduling .heroPills span {
font-size: 10px;
padding: 5px 8px;
}
.fm-automated-maintenance-scheduling .sectionHead h2,
.fm-automated-maintenance-scheduling .feature h2,
.fm-automated-maintenance-scheduling .aiGrid h2,
.fm-automated-maintenance-scheduling .final h2 {
font-size: clamp(30px, 7.5vw, 38px);
}
.fm-automated-maintenance-scheduling .logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.fm-automated-maintenance-scheduling .logo {
min-height: 54px;
height: auto;
}
.fm-automated-maintenance-scheduling .feature {
gap: 25px;
}
.fm-automated-maintenance-scheduling .feature p {
font-size: 15px;
}
.fm-automated-maintenance-scheduling .visual {
width: calc(100% + 8px);
max-width: none;
margin-left: -4px;
}
.fm-automated-maintenance-scheduling .aiMini {
grid-template-columns: minmax(0, 1fr);
}
.fm-automated-maintenance-scheduling .final {
padding: 28px 22px;
border-radius: 0;
}
.fm-automated-maintenance-scheduling .stream {
grid-template-columns: auto minmax(0, 1fr);
}
.fm-automated-maintenance-scheduling .streamTrack {
display: none;
}
.fm-automated-maintenance-scheduling .stream strong {
font-size: 10px !important;
}
.fm-automated-maintenance-scheduling .btn {
font-size: 14px;
padding: 0 18px;
}
.fm-automated-maintenance-scheduling .cta {
padding: 20px 17px;
gap: 16px;
}
.fm-automated-maintenance-scheduling .actions,
.fm-automated-maintenance-scheduling .ctaBtns {
gap: 8px;
}
.fm-automated-maintenance-scheduling .motion-label {
font-size: 10px;
}
.fm-automated-maintenance-scheduling .trust {
padding: 23px 0;
}
.fm-automated-maintenance-scheduling .faq details {
padding: 17px 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.fm-automated-maintenance-scheduling .motion-label {
display: none;
}
}
.fm-automated-maintenance-scheduling .hero .ey {
color: #11283a;
}
.fm-automated-maintenance-scheduling .dark .ey {
color: #151515;
}
.fm-automated-maintenance-scheduling .dark .sectionHead p {
color: #d6d6d6;
}
.fm-automated-maintenance-scheduling .hero h1 {
max-width: 590px;
}
.fm-automated-maintenance-scheduling .heroArt {
max-width: 760px;
}
.fm-automated-maintenance-scheduling .heroArt svg {
overflow: hidden;
}
.fm-automated-maintenance-scheduling .hero .lead {
max-width: 550px;
}
.fm-automated-maintenance-scheduling .breadcrumbs {
line-height: 1.6;
}
.fm-automated-maintenance-scheduling .visualNote {
margin: 8px 0 0 !important;
text-align: center;
font-size: 11px !important;
line-height: 1.5 !important;
color: var(--muted) !important;
}
.fm-automated-maintenance-scheduling .aiGrid .visualNote {
color: #b8c9d7 !important;
}
.fm-automated-maintenance-scheduling .outcome span {
font-size: 13px;
line-height: 1.65;
}
.fm-automated-maintenance-scheduling .sectionHead p {
line-height: 1.75;
}
.fm-automated-maintenance-scheduling .featureCard h3,
.fm-automated-maintenance-scheduling .useCase h3 {
font-size: 20px;
line-height: 1.22;
}
.fm-automated-maintenance-scheduling .featureIcon svg,
.fm-automated-maintenance-scheduling .useIcon svg {
width: 23px;
height: 23px;
display: block;
}
.fm-automated-maintenance-scheduling .featureIcon,
.fm-automated-maintenance-scheduling .useIcon {
font-size: 14px;
}
.fm-automated-maintenance-scheduling .review p {
font-size: 14px;
line-height: 1.75;
}
.fm-automated-maintenance-scheduling .review h3 {
font-size: 21px;
line-height: 1.25;
margin-top: 15px;
}
.fm-automated-maintenance-scheduling .review strong {
font-size: 14px;
color: var(--brand2);
}
.fm-automated-maintenance-scheduling .review span {
font-size: 12px;
}
.fm-automated-maintenance-scheduling .ratingItem strong {
font-size: 15px;
}
.fm-automated-maintenance-scheduling .ratingItem span {
display: block;
font-size: 11px;
color: #cbd3da;
margin-top: 6px;
}
.fm-automated-maintenance-scheduling .faq details p {
line-height: 1.75;
} .fm-automated-maintenance-scheduling .sourceNote {
font-size: 12px !important;
color: var(--muted);
margin: 20px 0 0;
}
.fm-automated-maintenance-scheduling .skipLink {
position: absolute;
top: -100px;
left: 16px;
z-index: 20;
padding: 12px 18px;
background: #fff;
color: #063b5c;
border: 2px solid #0076dd;
border-radius: 10px;
font-weight: 700;
}
.fm-automated-maintenance-scheduling .skipLink:focus {
top: 12px;
}
@media (max-width: 767px) { .fm-automated-maintenance-scheduling .outcome {
padding: 21px;
}
.fm-automated-maintenance-scheduling .sectionHead p {
font-size: 16px;
}
.fm-automated-maintenance-scheduling .aiGrid {
gap: 26px;
}
.fm-automated-maintenance-scheduling .featureCard,
.fm-automated-maintenance-scheduling .useCase {
padding: 20px;
}
.fm-automated-maintenance-scheduling .heroArt {
max-width: 100%;
}
.fm-automated-maintenance-scheduling .heroVisual {
display: none;
}
.fm-automated-maintenance-scheduling .visual {
order: 0;
}
.fm-automated-maintenance-scheduling .visual-content {
order: 1;
}
}  .fm-simplify-work-order-management .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.fm-simplify-work-order-management .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.fm-simplify-work-order-management .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.fm-simplify-work-order-management .btn:hover {
transform: translateY(-2px);
}
.fm-simplify-work-order-management .btn.black {
background: #0b0b0b;
color: #fff;
}
.fm-simplify-work-order-management .btn.yellow {
background: var(--yellow);
color: #000;
}
.fm-simplify-work-order-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.fm-simplify-work-order-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.fm-simplify-work-order-management .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.fm-simplify-work-order-management .soft {
background: var(--sky2);
}
.fm-simplify-work-order-management .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.fm-simplify-work-order-management .dark h2,
.fm-simplify-work-order-management .dark h3 {
color: #fff;
}
.fm-simplify-work-order-management .dark p {
color: #d6d6d6;
}
.fm-simplify-work-order-management .dark .ey {
background: var(--yellow);
} .fm-simplify-work-order-management .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.fm-simplify-work-order-management .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.fm-simplify-work-order-management .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.fm-simplify-work-order-management .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.fm-simplify-work-order-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.fm-simplify-work-order-management .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.fm-simplify-work-order-management .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.fm-simplify-work-order-management .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.fm-simplify-work-order-management .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.fm-simplify-work-order-management .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.fm-simplify-work-order-management .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.fm-simplify-work-order-management .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.fm-simplify-work-order-management .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.fm-simplify-work-order-management .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.fm-simplify-work-order-management .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.fm-simplify-work-order-management .outcome:nth-child(2):before {
background: var(--yellow);
}
.fm-simplify-work-order-management .outcome:nth-child(3):before {
background: var(--green);
}
.fm-simplify-work-order-management .outcome:nth-child(4):before {
background: var(--purple);
}
.fm-simplify-work-order-management .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.fm-simplify-work-order-management .outcome span {
font-size: 13px;
color: var(--muted);
}
.fm-simplify-work-order-management .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.fm-simplify-work-order-management .feature.reverse .visual {
order: -1;
}
.fm-simplify-work-order-management .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.fm-simplify-work-order-management .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.fm-simplify-work-order-management .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.fm-simplify-work-order-management .visual {
position: relative;
}
.fm-simplify-work-order-management .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.fm-simplify-work-order-management .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.fm-simplify-work-order-management .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.fm-simplify-work-order-management .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.fm-simplify-work-order-management .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.fm-simplify-work-order-management .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.fm-simplify-work-order-management .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.fm-simplify-work-order-management .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.fm-simplify-work-order-management .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.fm-simplify-work-order-management .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.fm-simplify-work-order-management .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.fm-simplify-work-order-management .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fm-simplify-work-order-management .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.fm-simplify-work-order-management .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.fm-simplify-work-order-management .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.fm-simplify-work-order-management .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.fm-simplify-work-order-management .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.fm-simplify-work-order-management .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.fm-simplify-work-order-management .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.fm-simplify-work-order-management .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.fm-simplify-work-order-management .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.fm-simplify-work-order-management .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.fm-simplify-work-order-management .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
@keyframes stream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 8px rgba(17, 138, 97, 0.08);
}
}
.fm-simplify-work-order-management .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fm-simplify-work-order-management .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.fm-simplify-work-order-management .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.fm-simplify-work-order-management .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.fm-simplify-work-order-management .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.fm-simplify-work-order-management .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.fm-simplify-work-order-management .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.fm-simplify-work-order-management .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.fm-simplify-work-order-management .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.fm-simplify-work-order-management .review strong {
font-size: 12px;
}
.fm-simplify-work-order-management .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.fm-simplify-work-order-management .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.fm-simplify-work-order-management .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.fm-simplify-work-order-management .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.fm-simplify-work-order-management .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.fm-simplify-work-order-management .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.fm-simplify-work-order-management .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.fm-simplify-work-order-management .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.fm-simplify-work-order-management .faq {
max-width: 900px;
}
.fm-simplify-work-order-management .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.fm-simplify-work-order-management .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.fm-simplify-work-order-management .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
}
.fm-simplify-work-order-management .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.fm-simplify-work-order-management .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.fm-simplify-work-order-management .cta h3 {
font-size: 19px;
}
.fm-simplify-work-order-management .cta.darkCta h3 {
color: #fff;
}
.fm-simplify-work-order-management .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.fm-simplify-work-order-management .cta.darkCta p {
color: #d1d1d1;
}
.fm-simplify-work-order-management .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.fm-simplify-work-order-management .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.fm-simplify-work-order-management .final h2 {
color: #fff;
}
.fm-simplify-work-order-management .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.fm-simplify-work-order-management .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.fm-simplify-work-order-management .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.fm-simplify-work-order-management .heroGrid,
.fm-simplify-work-order-management .feature,
.fm-simplify-work-order-management .aiGrid,
.fm-simplify-work-order-management .final {
grid-template-columns: 1fr;
}
.fm-simplify-work-order-management .feature.reverse .visual {
order: 0;
}
.fm-simplify-work-order-management .outcomes,
.fm-simplify-work-order-management .featureGrid,
.fm-simplify-work-order-management .connectedGrid,
.fm-simplify-work-order-management .useCases {
grid-template-columns: repeat(2, 1fr);
}
.fm-simplify-work-order-management .logos {
grid-template-columns: repeat(4, 1fr);
}
.fm-simplify-work-order-management .integrations {
grid-template-columns: repeat(3, 1fr);
}
.fm-simplify-work-order-management .reviews {
grid-template-columns: 1fr;
}
.fm-simplify-work-order-management .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.fm-simplify-work-order-management .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.fm-simplify-work-order-management .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.fm-simplify-work-order-management .hero {
padding: 54px 0;
} .fm-simplify-work-order-management .fl,
.fm-simplify-work-order-management .outcomes,
.fm-simplify-work-order-management .featureGrid,
.fm-simplify-work-order-management .connectedGrid,
.fm-simplify-work-order-management .useCases,
.fm-simplify-work-order-management .logos,
.fm-simplify-work-order-management .integrations,
.fm-simplify-work-order-management .ratingGrid {
grid-template-columns: 1fr;
}
.fm-simplify-work-order-management .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
} body {
overflow-x: clip;
}
img {
max-width: 100%;
height: auto;
}
.fm-simplify-work-order-management .heroGrid,
.fm-simplify-work-order-management .feature,
.fm-simplify-work-order-management .aiGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.fm-simplify-work-order-management .heroGrid>*,
.fm-simplify-work-order-management .feature>*,
.fm-simplify-work-order-management .aiGrid>*,
.fm-simplify-work-order-management .final>* {
min-width: 0;
}
.fm-simplify-work-order-management .heroGrid {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: 38px;
} .fm-simplify-work-order-management .hero .lead {
font-size: 17px;
line-height: 1.7;
}
.fm-simplify-work-order-management .hero .micro {
font-size: 12px;
line-height: 1.7;
}
.fm-simplify-work-order-management .heroPills span {
font-size: 11px;
}
.fm-simplify-work-order-management .heroVisual {
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.fm-simplify-work-order-management .heroArt {
order: 0;
width: 100%;
max-width: 760px;
}
.fm-simplify-work-order-management .heroArt svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.fm-simplify-work-order-management .motion-toggle {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.fm-simplify-work-order-management .motion-label {
order: 1;
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 5px 12px;
border: 1px solid #c6dfec;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
color: var(--navy);
background: #fff;
cursor: pointer;
margin-top: 8px;
}
.fm-simplify-work-order-management .motion-label:before {
content: "";
display: block;
width: 7px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.fm-simplify-work-order-management .motion-resume {
display: none;
}
.fm-simplify-work-order-management .motion-toggle:checked~.motion-label .motion-pause {
display: none;
}
.fm-simplify-work-order-management .motion-toggle:checked~.motion-label .motion-resume {
display: inline;
}
.fm-simplify-work-order-management .motion-toggle:checked~.motion-label:before {
content: "";
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-right: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.fm-simplify-work-order-management .motion-toggle:checked~.heroArt * {
animation-play-state: paused !important;
}
.fm-simplify-work-order-management .motion-toggle:focus-visible~.motion-label {
outline: 3px solid var(--brand2);
outline-offset: 3px;
}
.fm-simplify-work-order-management .assetNote {
order: 2;
margin: 9px 0 0;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.fm-simplify-work-order-management .breadcrumbs {
font-size: 12px;
color: var(--muted);
margin: 0 0 21px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fm-simplify-work-order-management .breadcrumbs a {
color: var(--brand2);
}
.fm-simplify-work-order-management .breadcrumbs a:hover {
text-decoration: underline;
}
.fm-simplify-work-order-management .visual {
min-width: 0;
width: 100%;
}
.fm-simplify-work-order-management .visualCard,
.fm-simplify-work-order-management .visualCard.darkFrame {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.fm-simplify-work-order-management .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
object-fit: contain;
}
.fm-simplify-work-order-management .feature {
gap: 44px;
}
.fm-simplify-work-order-management .feature p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
margin: 17px 0 0;
}
.fm-simplify-work-order-management .fl {
gap: 12px 17px;
}
.fm-simplify-work-order-management .fi {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
font-weight: 500;
line-height: 1.55;
align-items: flex-start;
}
.fm-simplify-work-order-management .tick {
margin-top: 1px;
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 11px;
}
.fm-simplify-work-order-management .outcome,
.fm-simplify-work-order-management .review {
box-shadow: none;
}
.fm-simplify-work-order-management .logo {
text-align: center;
padding: 8px;
font-size: 11px;
line-height: 1.5;
border-style: solid;
background: #fbfdff;
}
.fm-simplify-work-order-management .reveal,
.fm-simplify-work-order-management .reveal.show {
opacity: 1;
transform: none;
transition: none;
}
.fm-simplify-work-order-management .reviewPlaceholder {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: var(--yellowsoft);
color: #785c0b;
padding: 4px 8px;
border-radius: 6px;
}
.fm-simplify-work-order-management .review span {
font-size: 11px;
line-height: 1.5;
margin-top: 6px;
}
.fm-simplify-work-order-management .ratingPlaceholder {
display: block;
font-size: 10px;
color: #b8bec7;
margin-top: 4px;
}
.fm-simplify-work-order-management .streamDot,
.fm-simplify-work-order-management .streamTrack span {
animation: none;
}
.fm-simplify-work-order-management .stream {
grid-template-columns: auto minmax(20px, 1fr) minmax(0, 2fr);
}
.fm-simplify-work-order-management .stream strong {
line-height: 1.7;
overflow-wrap: anywhere;
}
.fm-simplify-work-order-management .ctaBtns {
min-width: 0;
max-width: 100%;
flex-shrink: 1;
}
.fm-simplify-work-order-management .ctaBtns a {
white-space: normal;
text-align: center;
}
.fm-simplify-work-order-management .final {
grid-template-columns: minmax(0, 1fr) auto;
}
.fm-simplify-work-order-management .featureCard p,
.fm-simplify-work-order-management .useCase p {
font-size: 13px;
line-height: 1.7;
}
.fm-simplify-work-order-management .connectedCard span,
.fm-simplify-work-order-management .aiMini span {
font-size: 12px;
line-height: 1.6;
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid var(--brand2);
outline-offset: 4px;
}
@media (max-width: 960px) {
.fm-simplify-work-order-management .heroGrid,
.fm-simplify-work-order-management .feature,
.fm-simplify-work-order-management .aiGrid,
.fm-simplify-work-order-management .final {
grid-template-columns: minmax(0, 1fr);
}
.fm-simplify-work-order-management .heroArt {
max-width: 680px;
}
.fm-simplify-work-order-management .heroVisual {
width: 100%;
margin: auto;
}
.fm-simplify-work-order-management .feature.reverse .visual {
order: 0;
}
.fm-simplify-work-order-management .hero h1 {
max-width: 850px;
}
.fm-simplify-work-order-management .visual {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.fm-simplify-work-order-management .aiMini {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fm-simplify-work-order-management .final .ctaBtns {
max-width: none;
}
.fm-simplify-work-order-management .cta {
flex-wrap: wrap;
}
.fm-simplify-work-order-management .ratingItem {
padding: 12px;
border-left: 0;
}
}
@media (max-width: 640px) {
.fm-simplify-work-order-management .hero {
padding: 34px 0 42px;
} .fm-simplify-work-order-management .hero .lead {
font-size: 16px;
}
.fm-simplify-work-order-management .heroGrid {
gap: 26px;
}
.fm-simplify-work-order-management .breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
.fm-simplify-work-order-management .hero .ey {
font-size: 12px;
margin-bottom: 14px;
}
.fm-simplify-work-order-management .heroPills span {
font-size: 10px;
padding: 5px 8px;
}
.fm-simplify-work-order-management .sectionHead h2,
.fm-simplify-work-order-management .feature h2,
.fm-simplify-work-order-management .aiGrid h2,
.fm-simplify-work-order-management .final h2 {
font-size: clamp(30px, 7.5vw, 38px);
}
.fm-simplify-work-order-management .logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.fm-simplify-work-order-management .logo {
min-height: 54px;
height: auto;
}
.fm-simplify-work-order-management .feature {
gap: 25px;
}
.fm-simplify-work-order-management .feature p {
font-size: 15px;
}
.fm-simplify-work-order-management .visual {
width: calc(100% + 8px);
max-width: none;
margin-left: -4px;
}
.fm-simplify-work-order-management .aiMini {
grid-template-columns: minmax(0, 1fr);
}
.fm-simplify-work-order-management .final {
padding: 28px 22px;
border-radius: 0;
}
.fm-simplify-work-order-management .stream {
grid-template-columns: auto minmax(0, 1fr);
}
.fm-simplify-work-order-management .streamTrack {
display: none;
}
.fm-simplify-work-order-management .stream strong {
font-size: 10px !important;
}
.fm-simplify-work-order-management .btn {
font-size: 14px;
padding: 0 18px;
}
.fm-simplify-work-order-management .cta {
padding: 20px 17px;
gap: 16px;
}
.fm-simplify-work-order-management .actions,
.fm-simplify-work-order-management .ctaBtns {
gap: 8px;
}
.fm-simplify-work-order-management .motion-label {
font-size: 10px;
}
.fm-simplify-work-order-management .trust {
padding: 23px 0;
}
.fm-simplify-work-order-management .faq details {
padding: 17px 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.fm-simplify-work-order-management .motion-label {
display: none;
}
} .hero .ey {
color: #11283a;
}
.fm-simplify-work-order-management .dark .ey {
color: #151515;
}
.fm-simplify-work-order-management .dark .sectionHead p {
color: #d6d6d6;
}
.fm-simplify-work-order-management .hero h1 {
max-width: 590px;
}
.fm-simplify-work-order-management .heroArt {
max-width: 760px;
}
.fm-simplify-work-order-management .heroArt svg {
overflow: hidden;
}
.fm-simplify-work-order-management .hero .lead {
max-width: 550px;
}
.fm-simplify-work-order-management .breadcrumbs {
line-height: 1.6;
}
.fm-simplify-work-order-management .visualNote {
margin: 8px 0 0 !important;
text-align: center;
font-size: 11px !important;
line-height: 1.5 !important;
color: var(--muted) !important;
}
.fm-simplify-work-order-management .aiGrid .visualNote {
color: #b8c9d7 !important;
}
.fm-simplify-work-order-management .outcome span {
font-size: 13px;
line-height: 1.65;
}
.fm-simplify-work-order-management .sectionHead p {
line-height: 1.75;
}
.fm-simplify-work-order-management .featureCard h3,
.fm-simplify-work-order-management .useCase h3 {
font-size: 20px;
line-height: 1.22;
}
.fm-simplify-work-order-management .featureIcon svg,
.fm-simplify-work-order-management .useIcon svg {
width: 23px;
height: 23px;
display: block;
}
.fm-simplify-work-order-management .featureIcon,
.fm-simplify-work-order-management .useIcon {
font-size: 14px;
}
.fm-simplify-work-order-management .review p {
font-size: 14px;
line-height: 1.75;
}
.fm-simplify-work-order-management .review h3 {
font-size: 21px;
line-height: 1.25;
margin-top: 15px;
}
.fm-simplify-work-order-management .review strong {
font-size: 14px;
color: var(--brand2);
}
.fm-simplify-work-order-management .review span {
font-size: 12px;
}
.fm-simplify-work-order-management .ratingItem strong {
font-size: 15px;
}
.fm-simplify-work-order-management .ratingItem span {
display: block;
font-size: 11px;
color: #cbd3da;
margin-top: 6px;
}
.fm-simplify-work-order-management .faq details p {
line-height: 1.75;
}
.fm-simplify-work-order-management .sectionHead {
max-width: 850px;
}
.fm-simplify-work-order-management .sourceNote {
font-size: 12px !important;
color: var(--muted);
margin: 20px 0 0;
}
.fm-simplify-work-order-management .skipLink {
position: absolute;
top: -100px;
left: 16px;
z-index: 20;
padding: 12px 18px;
background: #fff;
color: #063b5c;
border: 2px solid #0076dd;
border-radius: 10px;
font-weight: 700;
}
.fm-simplify-work-order-management .skipLink:focus {
top: 12px;
}
@media (max-width: 640px) { .fm-simplify-work-order-management .outcome {
padding: 21px;
}
.fm-simplify-work-order-management .sectionHead p {
font-size: 16px;
}
.fm-simplify-work-order-management .aiGrid {
gap: 26px;
}
.fm-simplify-work-order-management .featureCard,
.fm-simplify-work-order-management .useCase {
padding: 20px;
}
.fm-simplify-work-order-management .heroArt {
max-width: 100%;
}
}
.fm-simplify-work-order-management .hero h1 {
max-width: 585px;
}
.fm-simplify-work-order-management .heroArt {
max-width: 760px;
}
.fm-simplify-work-order-management .heroVisual {
min-width: 0;
}
.fm-simplify-work-order-management .dark .ey {
color: #11283a;
}
.fm-simplify-work-order-management .ratingGrid .ratingItem {
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
.fm-simplify-work-order-management .heroPills {
row-gap: 8px;
}
.fm-simplify-work-order-management .workflow-label {
font-size: 12px;
color: #d8e3eb;
}
@media (max-width: 640px) {
.fm-simplify-work-order-management .heroVisual {
padding-top: 5px;
}
.fm-simplify-work-order-management .heroArt svg {
width: 100%;
height: auto;
}
.fm-simplify-work-order-management .assetNote {
font-size: 10px;
max-width: 270px;
}
.fm-simplify-work-order-management .ratingGrid {
gap: 0;
}
.fm-simplify-work-order-management .ratingItem {
border-top: 1px solid #2d2d2d;
}
.fm-simplify-work-order-management .heroVisual {
display: none;
}
.fm-simplify-work-order-management .visual {
order: 0;
}
.fm-simplify-work-order-management .visual-content {
order: 1;
}
}  .fm-incident-reporting-tracking .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.fm-incident-reporting-tracking .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.fm-incident-reporting-tracking .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.fm-incident-reporting-tracking .btn:hover {
transform: translateY(-2px);
}
.fm-incident-reporting-tracking .btn.black {
background: #0b0b0b;
color: #fff;
}
.fm-incident-reporting-tracking .btn.yellow {
background: var(--yellow);
color: #000;
}
.fm-incident-reporting-tracking .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.fm-incident-reporting-tracking .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.fm-incident-reporting-tracking .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.fm-incident-reporting-tracking .soft {
background: var(--sky2);
}
.fm-incident-reporting-tracking .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.fm-incident-reporting-tracking .dark h2,
.fm-incident-reporting-tracking .dark h3 {
color: #fff;
}
.fm-incident-reporting-tracking .dark p {
color: #d6d6d6;
}
.fm-incident-reporting-tracking .dark .ey {
background: var(--yellow);
} .fm-incident-reporting-tracking .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.fm-incident-reporting-tracking .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.fm-incident-reporting-tracking .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.fm-incident-reporting-tracking .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.fm-incident-reporting-tracking .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.fm-incident-reporting-tracking .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.fm-incident-reporting-tracking .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.fm-incident-reporting-tracking .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.fm-incident-reporting-tracking .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.fm-incident-reporting-tracking .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.fm-incident-reporting-tracking .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.fm-incident-reporting-tracking .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.fm-incident-reporting-tracking .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.fm-incident-reporting-tracking .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.fm-incident-reporting-tracking .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.fm-incident-reporting-tracking .outcome:nth-child(2):before {
background: var(--yellow);
}
.fm-incident-reporting-tracking .outcome:nth-child(3):before {
background: var(--green);
}
.fm-incident-reporting-tracking .outcome:nth-child(4):before {
background: var(--purple);
}
.fm-incident-reporting-tracking .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.fm-incident-reporting-tracking .outcome span {
font-size: 13px;
color: var(--muted);
}
.fm-incident-reporting-tracking .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.fm-incident-reporting-tracking .feature.reverse .visual {
order: -1;
}
.fm-incident-reporting-tracking .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.fm-incident-reporting-tracking .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.fm-incident-reporting-tracking .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.fm-incident-reporting-tracking .visual {
position: relative;
}
.fm-incident-reporting-tracking .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.fm-incident-reporting-tracking .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.fm-incident-reporting-tracking .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.fm-incident-reporting-tracking .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.fm-incident-reporting-tracking .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.fm-incident-reporting-tracking .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.fm-incident-reporting-tracking .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.fm-incident-reporting-tracking .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.fm-incident-reporting-tracking .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.fm-incident-reporting-tracking .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.fm-incident-reporting-tracking .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.fm-incident-reporting-tracking .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fm-incident-reporting-tracking .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.fm-incident-reporting-tracking .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.fm-incident-reporting-tracking .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.fm-incident-reporting-tracking .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.fm-incident-reporting-tracking .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.fm-incident-reporting-tracking .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.fm-incident-reporting-tracking .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.fm-incident-reporting-tracking .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.fm-incident-reporting-tracking .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.fm-incident-reporting-tracking .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.fm-incident-reporting-tracking .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
@keyframes stream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 8px rgba(17, 138, 97, 0.08);
}
}
.fm-incident-reporting-tracking .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fm-incident-reporting-tracking .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.fm-incident-reporting-tracking .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.fm-incident-reporting-tracking .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.fm-incident-reporting-tracking .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.fm-incident-reporting-tracking .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.fm-incident-reporting-tracking .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.fm-incident-reporting-tracking .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.fm-incident-reporting-tracking .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.fm-incident-reporting-tracking .review strong {
font-size: 12px;
}
.fm-incident-reporting-tracking .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.fm-incident-reporting-tracking .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.fm-incident-reporting-tracking .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.fm-incident-reporting-tracking .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.fm-incident-reporting-tracking .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.fm-incident-reporting-tracking .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.fm-incident-reporting-tracking .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.fm-incident-reporting-tracking .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.fm-incident-reporting-tracking .faq {
max-width: 900px;
}
.fm-incident-reporting-tracking .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.fm-incident-reporting-tracking .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.fm-incident-reporting-tracking .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
}
.fm-incident-reporting-tracking .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.fm-incident-reporting-tracking .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.fm-incident-reporting-tracking .cta h3 {
font-size: 19px;
}
.fm-incident-reporting-tracking .cta.darkCta h3 {
color: #fff;
}
.fm-incident-reporting-tracking .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.fm-incident-reporting-tracking .cta.darkCta p {
color: #d1d1d1;
}
.fm-incident-reporting-tracking .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.fm-incident-reporting-tracking .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.fm-incident-reporting-tracking .final h2 {
color: #fff;
}
.fm-incident-reporting-tracking .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.fm-incident-reporting-tracking .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.fm-incident-reporting-tracking .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.fm-incident-reporting-tracking .heroGrid,
.fm-incident-reporting-tracking .feature,
.fm-incident-reporting-tracking .aiGrid,
.fm-incident-reporting-tracking .final {
grid-template-columns: 1fr;
}
.fm-incident-reporting-tracking .feature.reverse .visual {
order: 0;
}
.fm-incident-reporting-tracking .outcomes,
.fm-incident-reporting-tracking .featureGrid,
.fm-incident-reporting-tracking .connectedGrid,
.fm-incident-reporting-tracking .useCases {
grid-template-columns: repeat(2, 1fr);
}
.fm-incident-reporting-tracking .logos {
grid-template-columns: repeat(4, 1fr);
}
.fm-incident-reporting-tracking .integrations {
grid-template-columns: repeat(3, 1fr);
}
.fm-incident-reporting-tracking .reviews {
grid-template-columns: 1fr;
}
.fm-incident-reporting-tracking .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.fm-incident-reporting-tracking .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.fm-incident-reporting-tracking .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.fm-incident-reporting-tracking .hero {
padding: 54px 0;
} .fm-incident-reporting-tracking .fl,
.fm-incident-reporting-tracking .outcomes,
.fm-incident-reporting-tracking .featureGrid,
.fm-incident-reporting-tracking .connectedGrid,
.fm-incident-reporting-tracking .useCases,
.fm-incident-reporting-tracking .logos,
.fm-incident-reporting-tracking .integrations,
.fm-incident-reporting-tracking .ratingGrid {
grid-template-columns: 1fr;
}
.fm-incident-reporting-tracking .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
} body {
overflow-x: clip;
}
img {
max-width: 100%;
height: auto;
}
.fm-incident-reporting-tracking .heroGrid,
.fm-incident-reporting-tracking .feature,
.fm-incident-reporting-tracking .aiGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.fm-incident-reporting-tracking .heroGrid>*,
.fm-incident-reporting-tracking .feature>*,
.fm-incident-reporting-tracking .aiGrid>*,
.fm-incident-reporting-tracking .final>* {
min-width: 0;
}
.fm-incident-reporting-tracking .heroGrid {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: 38px;
}
.fm-incident-reporting-tracking .hero .lead {
font-size: 17px;
line-height: 1.7;
}
.fm-incident-reporting-tracking .hero .micro {
font-size: 12px;
line-height: 1.7;
}
.fm-incident-reporting-tracking .heroPills span {
font-size: 11px;
}
.fm-incident-reporting-tracking .heroVisual {
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.fm-incident-reporting-tracking .heroArt {
order: 0;
width: 100%;
max-width: 760px;
}
.fm-incident-reporting-tracking .heroArt svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.fm-incident-reporting-tracking .motion-toggle {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.fm-incident-reporting-tracking .motion-label {
order: 1;
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 5px 12px;
border: 1px solid #c6dfec;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
color: var(--navy);
background: #fff;
cursor: pointer;
margin-top: 8px;
}
.fm-incident-reporting-tracking .motion-label:before {
content: "";
display: block;
width: 7px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.fm-incident-reporting-tracking .motion-resume {
display: none;
}
.fm-incident-reporting-tracking .motion-toggle:checked~.motion-label .motion-pause {
display: none;
}
.fm-incident-reporting-tracking .motion-toggle:checked~.motion-label .motion-resume {
display: inline;
}
.fm-incident-reporting-tracking .motion-toggle:checked~.motion-label:before {
content: "";
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-right: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.fm-incident-reporting-tracking .motion-toggle:checked~.heroArt * {
animation-play-state: paused !important;
}
.fm-incident-reporting-tracking .motion-toggle:focus-visible~.motion-label {
outline: 3px solid var(--brand2);
outline-offset: 3px;
}
.fm-incident-reporting-tracking .assetNote {
order: 2;
margin: 9px 0 0;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.fm-incident-reporting-tracking .breadcrumbs {
font-size: 12px;
color: var(--muted);
margin: 0 0 21px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fm-incident-reporting-tracking .breadcrumbs a {
color: var(--brand2);
}
.fm-incident-reporting-tracking .breadcrumbs a:hover {
text-decoration: underline;
}
.fm-incident-reporting-tracking .visual {
min-width: 0;
width: 100%;
}
.fm-incident-reporting-tracking .visualCard,
.fm-incident-reporting-tracking .visualCard.darkFrame {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.fm-incident-reporting-tracking .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
object-fit: contain;
}
.fm-incident-reporting-tracking .feature {
gap: 44px;
}
.fm-incident-reporting-tracking .feature p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
margin: 17px 0 0;
}
.fm-incident-reporting-tracking .fl {
gap: 12px 17px;
}
.fm-incident-reporting-tracking .fi {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
font-weight: 500;
line-height: 1.55;
align-items: flex-start;
}
.fm-incident-reporting-tracking .tick {
margin-top: 1px;
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 11px;
}
.fm-incident-reporting-tracking .outcome,
.fm-incident-reporting-tracking .review {
box-shadow: none;
}
.fm-incident-reporting-tracking .logo {
text-align: center;
padding: 8px;
font-size: 11px;
line-height: 1.5;
border-style: solid;
background: #fbfdff;
}
.fm-incident-reporting-tracking .reveal,
.fm-incident-reporting-tracking .reveal.show {
opacity: 1;
transform: none;
transition: none;
}
.fm-incident-reporting-tracking .reviewPlaceholder {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: var(--yellowsoft);
color: #785c0b;
padding: 4px 8px;
border-radius: 6px;
}
.fm-incident-reporting-tracking .review span {
font-size: 11px;
line-height: 1.5;
margin-top: 6px;
}
.fm-incident-reporting-tracking .ratingPlaceholder {
display: block;
font-size: 10px;
color: #b8bec7;
margin-top: 4px;
}
.fm-incident-reporting-tracking .streamDot,
.fm-incident-reporting-tracking .streamTrack span {
animation: none;
}
.fm-incident-reporting-tracking .stream {
grid-template-columns: auto minmax(20px, 1fr) minmax(0, 2fr);
}
.fm-incident-reporting-tracking .stream strong {
line-height: 1.7;
overflow-wrap: anywhere;
}
.fm-incident-reporting-tracking .ctaBtns {
min-width: 0;
max-width: 100%;
flex-shrink: 1;
}
.fm-incident-reporting-tracking .ctaBtns a {
white-space: normal;
text-align: center;
}
.fm-incident-reporting-tracking .final {
grid-template-columns: minmax(0, 1fr) auto;
}
.fm-incident-reporting-tracking .featureCard p,
.fm-incident-reporting-tracking .useCase p {
font-size: 13px;
line-height: 1.7;
}
.fm-incident-reporting-tracking .connectedCard span,
.fm-incident-reporting-tracking .aiMini span {
font-size: 12px;
line-height: 1.6;
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid var(--brand2);
outline-offset: 4px;
}
@media (max-width: 960px) {
.fm-incident-reporting-tracking .heroGrid,
.fm-incident-reporting-tracking .feature,
.fm-incident-reporting-tracking .aiGrid,
.fm-incident-reporting-tracking .final {
grid-template-columns: minmax(0, 1fr);
}
.fm-incident-reporting-tracking .heroArt {
max-width: 680px;
}
.fm-incident-reporting-tracking .heroVisual {
width: 100%;
margin: auto;
}
.fm-incident-reporting-tracking .feature.reverse .visual {
order: 0;
}
.fm-incident-reporting-tracking .hero h1 {
max-width: 850px;
}
.fm-incident-reporting-tracking .visual {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.fm-incident-reporting-tracking .aiMini {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fm-incident-reporting-tracking .final .ctaBtns {
max-width: none;
}
.fm-incident-reporting-tracking .cta {
flex-wrap: wrap;
}
.fm-incident-reporting-tracking .ratingItem {
padding: 12px;
border-left: 0;
}
}
@media (max-width: 640px) {
.fm-incident-reporting-tracking .hero {
padding: 34px 0 42px;
} .fm-incident-reporting-tracking .hero .lead {
font-size: 16px;
}
.fm-incident-reporting-tracking .heroGrid {
gap: 26px;
}
.fm-incident-reporting-tracking .breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
.fm-incident-reporting-tracking .hero .ey {
font-size: 12px;
margin-bottom: 14px;
}
.fm-incident-reporting-tracking .heroPills span {
font-size: 10px;
padding: 5px 8px;
}
.fm-incident-reporting-tracking .sectionHead h2,
.fm-incident-reporting-tracking .feature h2,
.fm-incident-reporting-tracking .aiGrid h2,
.fm-incident-reporting-tracking .final h2 {
font-size: clamp(30px, 7.5vw, 38px);
}
.fm-incident-reporting-tracking .logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.fm-incident-reporting-tracking .logo {
min-height: 54px;
height: auto;
}
.fm-incident-reporting-tracking .feature {
gap: 25px;
}
.fm-incident-reporting-tracking .feature p {
font-size: 15px;
}
.fm-incident-reporting-tracking .visual {
width: calc(100% + 8px);
max-width: none;
margin-left: -4px;
}
.fm-incident-reporting-tracking .aiMini {
grid-template-columns: minmax(0, 1fr);
}
.fm-incident-reporting-tracking .final {
padding: 28px 22px;
border-radius: 0;
}
.fm-incident-reporting-tracking .stream {
grid-template-columns: auto minmax(0, 1fr);
}
.fm-incident-reporting-tracking .streamTrack {
display: none;
}
.fm-incident-reporting-tracking .stream strong {
font-size: 10px !important;
}
.fm-incident-reporting-tracking .btn {
font-size: 14px;
padding: 0 18px;
}
.fm-incident-reporting-tracking .cta {
padding: 20px 17px;
gap: 16px;
}
.fm-incident-reporting-tracking .actions,
.fm-incident-reporting-tracking .ctaBtns {
gap: 8px;
}
.fm-incident-reporting-tracking .motion-label {
font-size: 10px;
}
.fm-incident-reporting-tracking .trust {
padding: 23px 0;
}
.fm-incident-reporting-tracking .faq details {
padding: 17px 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.fm-incident-reporting-tracking .motion-label {
display: none;
}
}
.fm-incident-reporting-tracking .hero .ey {
color: #11283a;
}
.fm-incident-reporting-tracking .dark .ey {
color: #151515;
}
.fm-incident-reporting-tracking .dark .sectionHead p {
color: #d6d6d6;
}
.fm-incident-reporting-tracking .hero h1 {
max-width: 590px;
}
.fm-incident-reporting-tracking .heroArt {
max-width: 760px;
}
.fm-incident-reporting-tracking .heroArt svg {
overflow: hidden;
}
.fm-incident-reporting-tracking .hero .lead {
max-width: 550px;
}
.fm-incident-reporting-tracking .breadcrumbs {
line-height: 1.6;
}
.fm-incident-reporting-tracking .visualNote {
margin: 8px 0 0 !important;
text-align: center;
font-size: 11px !important;
line-height: 1.5 !important;
color: var(--muted) !important;
}
.fm-incident-reporting-tracking .aiGrid .visualNote {
color: #b8c9d7 !important;
}
.fm-incident-reporting-tracking .outcome span {
font-size: 13px;
line-height: 1.65;
}
.fm-incident-reporting-tracking .sectionHead p {
line-height: 1.75;
}
.fm-incident-reporting-tracking .featureCard h3,
.fm-incident-reporting-tracking .useCase h3 {
font-size: 20px;
line-height: 1.22;
}
.fm-incident-reporting-tracking .featureIcon svg,
.fm-incident-reporting-tracking .useIcon svg {
width: 23px;
height: 23px;
display: block;
margin-bottom: 0;
}
.fm-incident-reporting-tracking .featureIcon,
.fm-incident-reporting-tracking .useIcon {
font-size: 14px;
}
.fm-incident-reporting-tracking .review p {
font-size: 14px;
line-height: 1.75;
}
.fm-incident-reporting-tracking .review h3 {
font-size: 21px;
line-height: 1.25;
margin-top: 15px;
}
.fm-incident-reporting-tracking .review strong {
font-size: 14px;
color: var(--brand2);
}
.fm-incident-reporting-tracking .review span {
font-size: 12px;
}
.fm-incident-reporting-tracking .ratingItem strong {
font-size: 15px;
}
.fm-incident-reporting-tracking .ratingItem span {
display: block;
font-size: 11px;
color: #cbd3da;
margin-top: 6px;
}
.fm-incident-reporting-tracking .faq details p {
line-height: 1.75;
} .fm-incident-reporting-tracking .sourceNote {
font-size: 12px !important;
color: var(--muted);
margin: 20px 0 0;
}
.fm-incident-reporting-tracking .skipLink {
position: absolute;
top: -100px;
left: 16px;
z-index: 20;
padding: 12px 18px;
background: #fff;
color: #063b5c;
border: 2px solid #0076dd;
border-radius: 10px;
font-weight: 700;
}
.fm-incident-reporting-tracking .skipLink:focus {
top: 12px;
}
@media (max-width: 640px) { .fm-incident-reporting-tracking .outcome {
padding: 21px;
}
.fm-incident-reporting-tracking .sectionHead p {
font-size: 16px;
}
.fm-incident-reporting-tracking .aiGrid {
gap: 26px;
}
.fm-incident-reporting-tracking .featureCard,
.fm-incident-reporting-tracking .useCase {
padding: 20px;
}
.fm-incident-reporting-tracking .heroArt {
max-width: 100%;
}
}
.fm-incident-reporting-tracking .hero h1 {
max-width: 585px;
}
.fm-incident-reporting-tracking .heroArt {
max-width: 760px;
}
.fm-incident-reporting-tracking .heroVisual {
min-width: 0;
}
.fm-incident-reporting-tracking .dark .ey {
color: #11283a;
}
.fm-incident-reporting-tracking .ratingGrid .ratingItem {
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
.fm-incident-reporting-tracking .heroPills {
row-gap: 8px;
}
.fm-incident-reporting-tracking .workflow-label {
font-size: 12px;
color: #d8e3eb;
}
@media (max-width: 640px) {
.fm-incident-reporting-tracking .heroVisual {
padding-top: 5px;
}
.fm-incident-reporting-tracking .heroArt svg {
width: 100%;
height: auto;
}
.fm-incident-reporting-tracking .assetNote {
font-size: 10px;
max-width: 270px;
}
.fm-incident-reporting-tracking .ratingGrid {
gap: 0;
}
.fm-incident-reporting-tracking .ratingItem {
border-top: 1px solid #2d2d2d;
}
}
.fm-incident-reporting-tracking .motion-toggle:checked~.heroArt .fir-anim,
.fm-incident-reporting-tracking .motion-toggle:checked~.heroArt .fir-link {
animation-play-state: paused !important;
}
.fm-incident-reporting-tracking .hero .micro {
max-width: 550px;
}
.fm-incident-reporting-tracking .heroPills span {
font-size: 11px;
}
.fm-incident-reporting-tracking .feature .copy {
min-width: 0;
}
.fm-incident-reporting-tracking .roleTag {
display: inline-block;
color: var(--brand2);
background: var(--sky);
font-size: 11px;
font-weight: 700;
border-radius: 7px;
padding: 4px 8px;
}
.fm-incident-reporting-tracking .incidentBandIcon {
color: var(--yellow);
display: flex;
justify-content: center;
margin-bottom: 9px;
}
.fm-incident-reporting-tracking .incidentBandIcon svg {
width: 23px;
height: 23px;
}
.fm-incident-reporting-tracking .detailLink {
display: inline-flex;
margin-top: 18px;
color: var(--brand2);
font-size: 14px;
font-weight: 700;
gap: 6px;
}
.fm-incident-reporting-tracking .detailLink:hover {
text-decoration: underline;
}
.fm-incident-reporting-tracking .pageFoot {
padding: 18px 20px 30px;
text-align: center;
color: var(--muted);
font-size: 12px;
border-top: 1px solid var(--line);
}
@media (prefers-reduced-motion: reduce) {
.fm-incident-reporting-tracking .motion-toggle {
display: none;
}
}
@media (max-width: 767px) {
.fm-incident-reporting-tracking .heroVisual {
display: none;
}
}  .vendor-amc-contract-management .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.vendor-amc-contract-management .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.vendor-amc-contract-management .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.vendor-amc-contract-management .btn:hover {
transform: translateY(-2px);
}
.vendor-amc-contract-management .btn.black {
background: #0b0b0b;
color: #fff;
}
.vendor-amc-contract-management .btn.yellow {
background: var(--yellow);
color: #000;
}
.vendor-amc-contract-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.vendor-amc-contract-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.vendor-amc-contract-management .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.vendor-amc-contract-management .soft {
background: var(--sky2);
}
.vendor-amc-contract-management .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.vendor-amc-contract-management .dark h2,
.vendor-amc-contract-management .dark h3 {
color: #fff;
}
.vendor-amc-contract-management .dark p {
color: #d6d6d6;
}
.vendor-amc-contract-management .dark .ey {
background: var(--yellow);
} .vendor-amc-contract-management .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.vendor-amc-contract-management .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.vendor-amc-contract-management .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.vendor-amc-contract-management .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.vendor-amc-contract-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.vendor-amc-contract-management .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.vendor-amc-contract-management .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.vendor-amc-contract-management .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.vendor-amc-contract-management .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.vendor-amc-contract-management .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.vendor-amc-contract-management .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.vendor-amc-contract-management .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.vendor-amc-contract-management .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.vendor-amc-contract-management .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.vendor-amc-contract-management .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.vendor-amc-contract-management .outcome:nth-child(2):before {
background: var(--yellow);
}
.vendor-amc-contract-management .outcome:nth-child(3):before {
background: var(--green);
}
.vendor-amc-contract-management .outcome:nth-child(4):before {
background: var(--purple);
}
.vendor-amc-contract-management .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.vendor-amc-contract-management .outcome span {
font-size: 13px;
color: var(--muted);
}
.vendor-amc-contract-management .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.vendor-amc-contract-management .feature.reverse .visual {
order: -1;
}
.vendor-amc-contract-management .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.vendor-amc-contract-management .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.vendor-amc-contract-management .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.vendor-amc-contract-management .visual {
position: relative;
}
.vendor-amc-contract-management .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.vendor-amc-contract-management .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.vendor-amc-contract-management .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.vendor-amc-contract-management .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.vendor-amc-contract-management .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.vendor-amc-contract-management .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.vendor-amc-contract-management .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.vendor-amc-contract-management .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.vendor-amc-contract-management .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.vendor-amc-contract-management .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.vendor-amc-contract-management .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.vendor-amc-contract-management .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.vendor-amc-contract-management .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.vendor-amc-contract-management .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.vendor-amc-contract-management .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.vendor-amc-contract-management .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.vendor-amc-contract-management .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.vendor-amc-contract-management .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.vendor-amc-contract-management .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.vendor-amc-contract-management .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.vendor-amc-contract-management .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.vendor-amc-contract-management .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.vendor-amc-contract-management .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
@keyframes stream {
from {
transform: translateX(-120%);
}
to {
transform: translateX(340%);
}
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 8px rgba(17, 138, 97, 0.08);
}
}
.vendor-amc-contract-management .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.vendor-amc-contract-management .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.vendor-amc-contract-management .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.vendor-amc-contract-management .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.vendor-amc-contract-management .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.vendor-amc-contract-management .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.vendor-amc-contract-management .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.vendor-amc-contract-management .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.vendor-amc-contract-management .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.vendor-amc-contract-management .review strong {
font-size: 12px;
}
.vendor-amc-contract-management .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.vendor-amc-contract-management .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.vendor-amc-contract-management .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.vendor-amc-contract-management .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.vendor-amc-contract-management .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.vendor-amc-contract-management .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.vendor-amc-contract-management .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.vendor-amc-contract-management .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.vendor-amc-contract-management .faq {
max-width: 900px;
}
.vendor-amc-contract-management .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.vendor-amc-contract-management .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.vendor-amc-contract-management .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
}
.vendor-amc-contract-management .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.vendor-amc-contract-management .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.vendor-amc-contract-management .cta h3 {
font-size: 19px;
}
.vendor-amc-contract-management .cta.darkCta h3 {
color: #fff;
}
.vendor-amc-contract-management .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.vendor-amc-contract-management .cta.darkCta p {
color: #d1d1d1;
}
.vendor-amc-contract-management .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.vendor-amc-contract-management .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.vendor-amc-contract-management .reveal.show {
opacity: 1;
transform: none;
}
.vendor-amc-contract-management .soft {
background: #f5fbff;
}
@media (max-width: 960px) {
.vendor-amc-contract-management .heroGrid,
.vendor-amc-contract-management .feature,
.vendor-amc-contract-management .aiGrid,
.vendor-amc-contract-management .final {
grid-template-columns: 1fr;
}
.vendor-amc-contract-management .feature.reverse .visual {
order: 0;
}
.vendor-amc-contract-management .outcomes,
.vendor-amc-contract-management .featureGrid,
.vendor-amc-contract-management .connectedGrid,
.vendor-amc-contract-management .useCases {
grid-template-columns: repeat(2, 1fr);
}
.vendor-amc-contract-management .logos {
grid-template-columns: repeat(4, 1fr);
}
.vendor-amc-contract-management .integrations {
grid-template-columns: repeat(3, 1fr);
}
.vendor-amc-contract-management .reviews {
grid-template-columns: 1fr;
}
.vendor-amc-contract-management .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.vendor-amc-contract-management .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.vendor-amc-contract-management .wrap {
width: calc(100% - 24px);
}
.vendor-amc-contract-management section {
padding: 56px 0;
}
.vendor-amc-contract-management .hero {
padding: 54px 0;
} .vendor-amc-contract-management .fl,
.vendor-amc-contract-management .outcomes,
.vendor-amc-contract-management .featureGrid,
.vendor-amc-contract-management .connectedGrid,
.vendor-amc-contract-management .useCases,
.vendor-amc-contract-management .logos,
.vendor-amc-contract-management .integrations,
.vendor-amc-contract-management .ratingGrid {
grid-template-columns: 1fr;
}
.vendor-amc-contract-management .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.vendor-amc-contract-management *,
.vendor-amc-contract-management *:before,
.vendor-amc-contract-management *:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.vendor-amc-contract-management .heroGrid,
.vendor-amc-contract-management .feature,
.vendor-amc-contract-management .aiGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.vendor-amc-contract-management .heroGrid>*,
.vendor-amc-contract-management .feature>*,
.vendor-amc-contract-management .aiGrid>*,
.vendor-amc-contract-management .final>* {
min-width: 0;
}
.vendor-amc-contract-management .heroGrid {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: 38px;
} .vendor-amc-contract-management .hero .lead {
font-size: 17px;
line-height: 1.7;
}
.vendor-amc-contract-management .hero .micro {
font-size: 12px;
line-height: 1.7;
}
.vendor-amc-contract-management .heroPills span {
font-size: 11px;
}
.vendor-amc-contract-management .heroVisual {
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.vendor-amc-contract-management .heroArt {
order: 0;
width: 100%;
max-width: 760px;
}
.vendor-amc-contract-management .heroArt svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.vendor-amc-contract-management .motion-toggle {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.vendor-amc-contract-management .motion-label {
order: 1;
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 5px 12px;
border: 1px solid #c6dfec;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
color: var(--navy);
background: #fff;
cursor: pointer;
margin-top: 8px;
}
.vendor-amc-contract-management .motion-label:before {
content: "";
display: block;
width: 7px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.vendor-amc-contract-management .motion-resume {
display: none;
}
.vendor-amc-contract-management .motion-toggle:checked~.motion-label .motion-pause {
display: none;
}
.vendor-amc-contract-management .motion-toggle:checked~.motion-label .motion-resume {
display: inline;
}
.vendor-amc-contract-management .motion-toggle:checked~.motion-label:before {
content: "";
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-right: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.vendor-amc-contract-management .motion-toggle:checked~.heroArt * {
animation-play-state: paused !important;
}
.vendor-amc-contract-management .motion-toggle:focus-visible~.motion-label {
outline: 3px solid var(--brand2);
outline-offset: 3px;
}
.vendor-amc-contract-management .assetNote {
order: 2;
margin: 9px 0 0;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.vendor-amc-contract-management .breadcrumbs {
font-size: 12px;
color: var(--muted);
margin: 0 0 21px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.vendor-amc-contract-management .breadcrumbs a {
color: var(--brand2);
}
.vendor-amc-contract-management .breadcrumbs a:hover {
text-decoration: underline;
}
.vendor-amc-contract-management .visual {
min-width: 0;
width: 100%;
}
.vendor-amc-contract-management .visualCard,
.vendor-amc-contract-management .visualCard.darkFrame {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.vendor-amc-contract-management .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
object-fit: contain;
}
.vendor-amc-contract-management .feature {
gap: 44px;
}
.vendor-amc-contract-management .feature p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
margin: 17px 0 0;
}
.vendor-amc-contract-management .fl {
gap: 12px 17px;
}
.vendor-amc-contract-management .fi {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
font-weight: 500;
line-height: 1.55;
align-items: flex-start;
}
.vendor-amc-contract-management .tick {
margin-top: 1px;
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 11px;
}
.vendor-amc-contract-management .outcome,
.vendor-amc-contract-management .review {
box-shadow: none;
}
.vendor-amc-contract-management .logo {
text-align: center;
padding: 8px;
font-size: 11px;
line-height: 1.5;
border-style: solid;
background: #fbfdff;
}
.vendor-amc-contract-management .reveal,
.vendor-amc-contract-management .reveal.show {
opacity: 1;
transform: none;
transition: none;
}
.vendor-amc-contract-management .reviewPlaceholder {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: var(--yellowsoft);
color: #785c0b;
padding: 4px 8px;
border-radius: 6px;
}
.vendor-amc-contract-management .review span {
font-size: 11px;
line-height: 1.5;
margin-top: 6px;
}
.vendor-amc-contract-management .ratingPlaceholder {
display: block;
font-size: 10px;
color: #b8bec7;
margin-top: 4px;
}
.vendor-amc-contract-management .streamDot,
.vendor-amc-contract-management .streamTrack span {
animation: none;
}
.vendor-amc-contract-management .stream {
grid-template-columns: auto minmax(20px, 1fr) minmax(0, 2fr);
}
.vendor-amc-contract-management .stream strong {
line-height: 1.7;
overflow-wrap: anywhere;
}
.vendor-amc-contract-management .ctaBtns {
min-width: 0;
max-width: 100%;
flex-shrink: 1;
}
.vendor-amc-contract-management .ctaBtns a {
white-space: normal;
text-align: center;
}
.vendor-amc-contract-management .final {
grid-template-columns: 1fr;
}
.vendor-amc-contract-management .featureCard p,
.vendor-amc-contract-management .useCase p {
font-size: 13px;
line-height: 1.7;
}
.vendor-amc-contract-management .connectedCard span,
.vendor-amc-contract-management .aiMini span {
font-size: 12px;
line-height: 1.6;
}
.vendor-amc-contract-management a:focus-visible,
.vendor-amc-contract-management summary:focus-visible {
outline: 3px solid var(--brand2);
outline-offset: 4px;
}
@media (max-width: 960px) {
.vendor-amc-contract-management .heroGrid,
.vendor-amc-contract-management .feature,
.vendor-amc-contract-management .aiGrid,
.vendor-amc-contract-management .final {
grid-template-columns: minmax(0, 1fr);
}
.vendor-amc-contract-management .heroArt {
max-width: 680px;
}
.vendor-amc-contract-management .heroVisual {
width: 100%;
margin: auto;
}
.vendor-amc-contract-management .feature.reverse .visual {
order: 0;
}
.vendor-amc-contract-management .hero h1 {
max-width: 850px;
}
.vendor-amc-contract-management .visual {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.vendor-amc-contract-management .aiMini {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vendor-amc-contract-management .final .ctaBtns {
max-width: none;
}
.vendor-amc-contract-management .cta {
flex-wrap: wrap;
}
.vendor-amc-contract-management .ratingItem {
padding: 12px;
border-left: 0;
}
}
@media (max-width: 640px) {
.vendor-amc-contract-management .hero {
padding: 34px 0 42px;
} .vendor-amc-contract-management .hero .lead {
font-size: 16px;
}
.vendor-amc-contract-management .heroGrid {
gap: 26px;
}
.vendor-amc-contract-management .breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
.vendor-amc-contract-management .hero .ey {
font-size: 12px;
margin-bottom: 14px;
}
.vendor-amc-contract-management .heroPills span {
font-size: 10px;
padding: 5px 8px;
}
.vendor-amc-contract-management .sectionHead h2,
.vendor-amc-contract-management .feature h2,
.vendor-amc-contract-management .aiGrid h2,
.vendor-amc-contract-management .final h2 {
font-size: clamp(30px, 7.5vw, 38px);
}
.vendor-amc-contract-management .logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.vendor-amc-contract-management .logo {
min-height: 54px;
height: auto;
}
.vendor-amc-contract-management .feature {
gap: 25px;
}
.vendor-amc-contract-management .feature p {
font-size: 15px;
}
.vendor-amc-contract-management .visual {
width: calc(100% + 8px);
max-width: none;
margin-left: -4px;
}
.vendor-amc-contract-management .aiMini {
grid-template-columns: minmax(0, 1fr);
}
.vendor-amc-contract-management .final {
padding: 28px 22px;
}
.vendor-amc-contract-management .stream {
grid-template-columns: auto minmax(0, 1fr);
}
.vendor-amc-contract-management .streamTrack {
display: none;
}
.vendor-amc-contract-management .stream strong {
font-size: 10px !important;
}
.vendor-amc-contract-management .btn {
font-size: 14px;
padding: 0 18px;
}
.vendor-amc-contract-management .cta {
padding: 20px 17px;
gap: 16px;
}
.vendor-amc-contract-management .actions,
.vendor-amc-contract-management .ctaBtns {
gap: 8px;
}
.vendor-amc-contract-management .motion-label {
font-size: 10px;
}
.vendor-amc-contract-management .trust {
padding: 23px 0;
}
.vendor-amc-contract-management .faq details {
padding: 17px 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.vendor-amc-contract-management .motion-label {
display: none;
}
}
.vendor-amc-contract-management .hero .ey {
color: #11283a;
}
.vendor-amc-contract-management .dark .ey {
color: #151515;
}
.vendor-amc-contract-management .dark .sectionHead p {
color: #d6d6d6;
}
.vendor-amc-contract-management .hero h1 {
max-width: 590px;
}
.vendor-amc-contract-management .heroArt {
max-width: 760px;
}
.vendor-amc-contract-management .heroArt svg {
overflow: hidden;
}
.vendor-amc-contract-management .hero .lead {
max-width: 550px;
}
.vendor-amc-contract-management .breadcrumbs {
line-height: 1.6;
}
.vendor-amc-contract-management .visualNote {
margin: 8px 0 0 !important;
text-align: center;
font-size: 11px !important;
line-height: 1.5 !important;
color: var(--muted) !important;
}
.vendor-amc-contract-management .aiGrid .visualNote {
color: #b8c9d7 !important;
}
.vendor-amc-contract-management .outcome span {
font-size: 13px;
line-height: 1.65;
}
.vendor-amc-contract-management .sectionHead p {
line-height: 1.75;
}
.vendor-amc-contract-management .featureCard h3,
.vendor-amc-contract-management .useCase h3 {
font-size: 20px;
line-height: 1.22;
}
.vendor-amc-contract-management .featureIcon svg,
.vendor-amc-contract-management .useIcon svg {
width: 23px;
height: 23px;
display: block;
}
.vendor-amc-contract-management .featureIcon,
.vendor-amc-contract-management .useIcon {
font-size: 14px;
}
.vendor-amc-contract-management .review p {
font-size: 14px;
line-height: 1.75;
}
.vendor-amc-contract-management .review h3 {
font-size: 21px;
line-height: 1.25;
margin-top: 15px;
}
.vendor-amc-contract-management .review strong {
font-size: 14px;
color: var(--brand2);
}
.vendor-amc-contract-management .review span {
font-size: 12px;
}
.vendor-amc-contract-management .ratingItem strong {
font-size: 15px;
}
.vendor-amc-contract-management .ratingItem span {
display: block;
font-size: 11px;
color: #cbd3da;
margin-top: 6px;
}
.vendor-amc-contract-management .faq details p {
line-height: 1.75;
}
.vendor-amc-contract-management .sectionHead {
max-width: 850px;
}
.vendor-amc-contract-management .sourceNote {
font-size: 12px !important;
color: var(--muted);
margin: 20px 0 0;
}
.vendor-amc-contract-management .skipLink {
position: absolute;
top: -100px;
left: 16px;
z-index: 20;
padding: 12px 18px;
background: #fff;
color: #063b5c;
border: 2px solid #0076dd;
border-radius: 10px;
font-weight: 700;
}
.vendor-amc-contract-management .skipLink:focus {
top: 12px;
}
@media (max-width: 640px) { .vendor-amc-contract-management .outcome {
padding: 21px;
}
.vendor-amc-contract-management .sectionHead p {
font-size: 16px;
}
.vendor-amc-contract-management .aiGrid {
gap: 26px;
}
.vendor-amc-contract-management .featureCard,
.vendor-amc-contract-management .useCase {
padding: 20px;
}
.vendor-amc-contract-management .heroArt {
max-width: 100%;
}
} .vendor-amc-contract-management .hero h1 {
max-width: 585px;
}
.vendor-amc-contract-management .heroArt {
max-width: 760px;
}
.vendor-amc-contract-management .heroVisual {
min-width: 0;
}
.vendor-amc-contract-management .dark .ey {
color: #11283a;
}
.vendor-amc-contract-management .ratingGrid .ratingItem {
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
.vendor-amc-contract-management .heroPills {
row-gap: 8px;
}
.vendor-amc-contract-management .workflow-label {
font-size: 12px;
color: #d8e3eb;
}
@media (max-width: 640px) {
.vendor-amc-contract-management .heroVisual {
padding-top: 5px;
}
.vendor-amc-contract-management .heroArt svg {
width: 100%;
height: auto;
}
.vendor-amc-contract-management .assetNote {
font-size: 10px;
max-width: 270px;
}
.vendor-amc-contract-management .ratingGrid {
gap: 0;
}
.vendor-amc-contract-management .ratingItem {
border-top: 1px solid #2d2d2d;
}
} .vendor-amc-contract-management .hero h1 {
max-width: 550px;
}
.vendor-amc-contract-management .heroArt {
max-width: 800px;
}
.vendor-amc-contract-management .roleTag {
display: inline-block;
color: var(--brand2);
background: var(--sky);
font-size: 11px;
font-weight: 700;
border-radius: 7px;
padding: 4px 8px;
}
.vendor-amc-contract-management .workflowIcon {
color: var(--yellow);
display: flex;
justify-content: center;
margin-bottom: 9px;
}
.vendor-amc-contract-management .workflowIcon svg {
width: 23px;
height: 23px;
}
.vendor-amc-contract-management .detailLink {
display: inline-flex;
margin-top: 18px;
color: var(--brand2);
font-size: 14px;
font-weight: 700;
gap: 6px;
}
.vendor-amc-contract-management .detailLink:hover {
text-decoration: underline;
}
.vendor-amc-contract-management .pageFoot {
padding: 18px 20px 30px;
text-align: center;
color: var(--muted);
font-size: 12px;
border-top: 1px solid var(--line);
}
.vendor-amc-contract-management .scopeNote {
margin-top: 18px;
padding: 12px 15px;
border-left: 3px solid #a9d9ed;
background: var(--sky2);
font-size: 12px;
line-height: 1.7;
color: var(--muted);
border-radius: 0 8px 8px 0;
}
.vendor-amc-contract-management .dark .scopeNote {
background: #18252e;
border-color: #d9bb41;
color: #c8d8e4;
}
.vendor-amc-contract-management .visualCard>svg {
display: block;
width: 100%;
height: auto;
overflow: hidden;
}
.vendor-amc-contract-management .visualCard>svg text {
font-family: Arial, sans-serif;
} .vendor-amc-contract-management .amcHero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 0;
background: #061c38;
color: #fff;
min-height: 700px;
display: flex;
align-items: center;
}
.vendor-amc-contract-management .amcHero * {
box-sizing: border-box;
}
.vendor-amc-contract-management .amcHero .amcHeroImage {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 50%;
z-index: -3;
display: block;
}
.vendor-amc-contract-management .amcHero:before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(90deg,
rgba(3, 19, 39, 0.68) 0%,
rgba(3, 24, 50, 0.44) 30%,
rgba(3, 24, 50, 0.08) 52%,
transparent 67%);
}
.vendor-amc-contract-management .amcHeroInner {
width: min(var(--newmax), 88.5%);
margin: 0 auto;
padding: 64px 0 58px;
position: relative;
z-index: 2;
}
.vendor-amc-contract-management .amcHeroCopy {
width: 43%;
max-width: 630px;
}
.vendor-amc-contract-management .amcHeroEy {
display: flex;
gap: 13px;
align-items: center;
font-size: 12px;
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.115em;
color: #ffad5b;
text-transform: uppercase;
margin: 0 0 26px;
}
.vendor-amc-contract-management .amcHeroEy:before {
content: "";
width: 28px;
height: 2px;
flex: 0 0 28px;
background: #ffad5b;
}
.vendor-amc-contract-management .amcHero h1 {
font-family: inherit;
color: #fff; font-weight: 700;
line-height: 1.075;
letter-spacing: -0.043em;
margin: 0;
max-width: 640px;
}
.vendor-amc-contract-management .amcHero h1 .amcAccent {
display: block;
color: #0076dd;
margin-top: 3px;
}
.vendor-amc-contract-management .amcHeroLead {
font-size: clamp(15px, 1.08vw, 18px);
line-height: 1.8;
color: #d0e0ef;
margin: 26px 0 0;
max-width: 585px;
}
.vendor-amc-contract-management .amcHeroLead strong {
font-weight: 700;
color: #fff;
}
.vendor-amc-contract-management .amcHeroActions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 28px;
}
.vendor-amc-contract-management .amcHeroBtn {
display: inline-flex;
gap: 19px;
justify-content: center;
align-items: center;
min-height: 53px;
border-radius: 8px;
padding: 14px 21px;
font-family: inherit;
font-size: 14px;
font-weight: 750;
line-height: 1.35;
text-decoration: none;
border: 1px solid transparent;
transition:
background-color 0.18s,
border-color 0.18s;
}
.vendor-amc-contract-management .amcHeroBtn.primary {
color: #09233e;
background: #ffad5b;
border-color: #ffad5b;
}
.vendor-amc-contract-management .amcHeroBtn.primary:hover {
background: #ffc080;
border-color: #ffc080;
}
.vendor-amc-contract-management .amcHeroBtn.secondary {
color: #fff;
background: rgba(255, 255, 255, 0.035);
border-color: rgba(194, 216, 240, 0.38);
}
.vendor-amc-contract-management .amcHeroBtn.secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(194, 216, 240, 0.7);
}
.vendor-amc-contract-management .amcHeroBtn:focus-visible {
outline: 3px solid #ffbe79;
outline-offset: 5px;
}
.vendor-amc-contract-management .amcHeroArrow {
font-size: 20px;
font-weight: 400;
line-height: 1;
display: none;
}
.vendor-amc-contract-management .amcHeroMicro {
margin: 13px 0 0;
color: #bdd6e9;
font-size: 12px;
line-height: 1.7;
}
.vendor-amc-contract-management .amcHeroProof {
margin-top: 31px;
padding-top: 17px;
border-top: 1px solid rgba(201, 222, 244, 0.2);
}
.vendor-amc-contract-management .amcHeroProofLabel {
font-size: 9px;
line-height: 1.6;
letter-spacing: 0.14em;
color: #a5cfe9;
font-weight: 750;
text-transform: uppercase;
margin: 0 0 13px;
}
.vendor-amc-contract-management .amcHeroProofGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 13px;
}
.vendor-amc-contract-management .amcHeroProofItem+.amcHeroProofItem {
padding-left: 14px;
border-left: 1px solid rgba(201, 222, 244, 0.18);
}
.vendor-amc-contract-management .amcHeroProofItem strong {
display: block;
font-size: 13px;
line-height: 1.5;
color: #fff;
font-weight: 650;
}
.vendor-amc-contract-management .amcHeroProofItem span {
display: block;
color: #b5d0e5;
font-size: 10px;
line-height: 1.6;
margin-top: 2px;
}
.vendor-amc-contract-management .amcHeroCards {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.vendor-amc-contract-management .amcHeroCard {
position: absolute;
background: rgba(247, 252, 255, 0.95);
border: 1px solid rgba(151, 194, 226, 0.5);
border-radius: 15px;
padding: 16px 17px;
color: #113554;
width: 220px;
box-shadow: none;
}
.vendor-amc-contract-management .amcHeroCard.contract {
top: 10.3%;
left: 46.7%;
}
.vendor-amc-contract-management .amcHeroCard.renewal {
top: 12%;
right: 4.8%;
}
.vendor-amc-contract-management .amcHeroCard.history {
bottom: 8.2%;
right: 4.8%;
width: 235px;
}
.vendor-amc-contract-management .amcHeroCardHead {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 750;
line-height: 1.35;
margin-bottom: 13px;
}
.vendor-amc-contract-management .amcHeroCard h2 {
font-size: 14px;
line-height: 1.45;
font-weight: 750;
letter-spacing: -0.015em;
color: #143b5b;
margin: 0 0 7px;
}
.vendor-amc-contract-management .amcHeroCard p {
font-size: 11px;
line-height: 1.55;
color: #55718b;
margin: 7px 0 0;
}
.vendor-amc-contract-management .amcHeroTag {
display: inline-flex;
gap: 5px;
align-items: center;
background: #e1f5ed;
color: #087859;
border-radius: 999px;
padding: 3px 8px;
font-size: 10px;
line-height: 1.5;
font-weight: 700;
}
.vendor-amc-contract-management .amcHeroTag:before {
content: "";
width: 5px;
height: 5px;
background: currentColor;
border-radius: 50%;
}
.vendor-amc-contract-management .amcHeroTag.amber {
color: #956010;
background: #fff1d7;
}
.vendor-amc-contract-management .amcHeroDocIcon {
width: 17px;
height: 21px;
flex: 0 0 17px;
border: 1.5px solid #168ee1;
border-radius: 2px;
position: relative;
color: #168ee1;
}
.vendor-amc-contract-management .amcHeroDocIcon:before,
.vendor-amc-contract-management .amcHeroDocIcon:after {
content: "";
position: absolute;
height: 1px;
background: currentColor;
left: 3px;
right: 3px;
top: 6px;
}
.vendor-amc-contract-management .amcHeroDocIcon:after {
top: 11px;
}
.vendor-amc-contract-management .amcHeroCalendarIcon {
width: 17px;
height: 18px;
flex: 0 0 17px;
border: 1.5px solid #168ee1;
border-radius: 2px;
border-top-width: 5px;
position: relative;
}
.vendor-amc-contract-management .amcHeroCalendarIcon:before,
.vendor-amc-contract-management .amcHeroCalendarIcon:after {
content: "";
position: absolute;
height: 1px;
background: #168ee1;
left: 3px;
right: 3px;
top: 4px;
}
.vendor-amc-contract-management .amcHeroCalendarIcon:after {
top: 7px;
}
.vendor-amc-contract-management .amcHeroCheckIcon {
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
flex: 0 0 20px;
border: 1px solid #079b7b;
border-radius: 50%;
color: #079b7b;
font-size: 14px;
line-height: 1;
}
.vendor-amc-contract-management .amcHeroCaption {
position: absolute;
right: 22px;
bottom: 10px;
font-size: 8px;
line-height: 1.5;
color: #d4e8f7;
background: rgba(4, 26, 54, 0.76);
padding: 2px 6px;
border-radius: 3px;
z-index: 2;
}
@media (min-width: 1650px) {
.vendor-amc-contract-management .amcHero {
min-height: 800px;
}
.vendor-amc-contract-management .amcHeroInner {
padding-top: 85px;
padding-bottom: 76px;
}
.vendor-amc-contract-management .amcHeroCopy {
width: 51%;
max-width: 754px;
}
.vendor-amc-contract-management .amcHero h1 {
max-width: 525px;
}
.vendor-amc-contract-management .amcHeroLead {
max-width: 630px;
}
.vendor-amc-contract-management .amcHeroProof {
max-width: 630px;
margin-top: 34px;
}
.vendor-amc-contract-management .amcHeroProofItem strong {
font-size: 15px;
}
.vendor-amc-contract-management .amcHeroProofItem span {
font-size: 11px;
}
.vendor-amc-contract-management .amcHeroEy {
font-size: 13px;
}
.vendor-amc-contract-management .amcHeroCard {
width: 245px;
padding: 19px 20px;
}
.vendor-amc-contract-management .amcHeroCard.history {
width: 260px;
}
.vendor-amc-contract-management .amcHeroCardHead {
font-size: 13px;
}
.vendor-amc-contract-management .amcHeroCard h2 {
font-size: 16px;
}
.vendor-amc-contract-management .amcHeroCard p {
font-size: 12px;
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
.vendor-amc-contract-management .amcHero {
min-height: 690px;
}
.vendor-amc-contract-management .amcHeroInner {
width: 90%;
padding: 58px 0;
}
.vendor-amc-contract-management .amcHeroCopy {
width: 45%;
}
.vendor-amc-contract-management .amcHeroEy {
font-size: 10px;
letter-spacing: 0.08em;
gap: 9px;
} .vendor-amc-contract-management .amcHeroCard {
width: 184px;
padding: 13px 14px;
}
.vendor-amc-contract-management .amcHeroCard.contract {
left: 49%;
top: 9%;
}
.vendor-amc-contract-management .amcHeroCard.renewal {
right: 3%;
top: 10.5%;
}
.vendor-amc-contract-management .amcHeroCard.history {
width: 214px;
right: 3%;
}
.vendor-amc-contract-management .amcHeroProofGrid {
gap: 9px;
}
.vendor-amc-contract-management .amcHeroProofItem strong {
font-size: 12px;
}
.vendor-amc-contract-management .amcHeroProofItem+.amcHeroProofItem {
padding-left: 10px;
}
}
@media (max-width: 1024px) {
.vendor-amc-contract-management .amcHero {
display: block;
min-height: 0;
padding: 0 0 370px;
background: #061e3d;
}
.vendor-amc-contract-management .amcHeroInner {
width: calc(100% - 64px);
padding: 50px 0 20px;
}
.vendor-amc-contract-management .amcHeroCopy {
width: 100%;
max-width: 730px;
}
.vendor-amc-contract-management .amcHero h1 { max-width: 730px;
}
.vendor-amc-contract-management .amcHeroLead {
max-width: 650px;
}
.vendor-amc-contract-management .amcHero .amcHeroImage {
top: auto;
bottom: 0;
height: 465px;
object-position: right bottom;
}
.vendor-amc-contract-management .amcHero:before {
background: linear-gradient(180deg,
#061e3d 0%,
#061e3d 47%,
rgba(6, 30, 61, 0.9) 56%,
rgba(6, 30, 61, 0.25) 72%,
transparent 87%);
}
.vendor-amc-contract-management .amcHeroProof {
max-width: 600px;
margin-top: 24px;
}
.vendor-amc-contract-management .amcHeroCard.contract {
top: auto;
bottom: 227px;
left: 5%;
width: 215px;
}
.vendor-amc-contract-management .amcHeroCard.renewal {
top: auto;
bottom: 211px;
right: 4%;
width: 209px;
}
.vendor-amc-contract-management .amcHeroCard.history {
bottom: 32px;
right: 4%;
width: 219px;
}
.vendor-amc-contract-management .amcHeroCaption {
right: 12px;
bottom: 6px;
}
}
@media (max-width: 640px) {
.vendor-amc-contract-management .amcHero {
padding-bottom: 287px;
}
.vendor-amc-contract-management .amcHeroInner {
width: calc(100% - 40px);
padding: 34px 0 18px;
}
.vendor-amc-contract-management .amcHeroEy {
font-size: 9px;
letter-spacing: 0.065em;
gap: 9px;
margin-bottom: 19px;
}
.vendor-amc-contract-management .amcHeroEy:before {
width: 19px;
flex-basis: 19px;
} .vendor-amc-contract-management .amcHeroLead {
font-size: 14px;
line-height: 1.8;
margin-top: 20px;
}
.vendor-amc-contract-management .amcHeroActions {
gap: 9px;
margin-top: 23px;
}
.vendor-amc-contract-management .amcHeroBtn {
font-size: 12px;
min-height: 48px;
padding: 12px 13px;
gap: 10px;
}
.vendor-amc-contract-management .amcHeroMicro {
font-size: 10px;
margin-top: 12px;
}
.vendor-amc-contract-management .amcHeroProof {
margin-top: 23px;
padding-top: 14px;
}
.vendor-amc-contract-management .amcHeroProofLabel {
font-size: 8px;
margin-bottom: 11px;
}
.vendor-amc-contract-management .amcHeroProofGrid {
gap: 8px;
grid-template-columns: 1.04fr 0.98fr 1fr;
}
.vendor-amc-contract-management .amcHeroProofItem+.amcHeroProofItem {
padding-left: 8px;
}
.vendor-amc-contract-management .amcHeroProofItem strong {
font-size: 10px;
line-height: 1.5;
}
.vendor-amc-contract-management .amcHeroProofItem span {
font-size: 9px;
line-height: 1.5;
}
.vendor-amc-contract-management .amcHero .amcHeroImage {
height: 322px;
object-position: 76% bottom;
}
.vendor-amc-contract-management .amcHero:before {
background: linear-gradient(180deg,
#061e3d 0%,
#061e3d 57%,
rgba(6, 30, 61, 0.96) 64%,
rgba(6, 30, 61, 0.18) 78%,
transparent 90%);
}
.vendor-amc-contract-management .amcHeroCard {
padding: 10px 11px;
border-radius: 10px;
}
.vendor-amc-contract-management .amcHeroCard.contract {
left: 15px;
bottom: 163px;
width: 158px;
}
.vendor-amc-contract-management .amcHeroCard.renewal {
right: 14px;
bottom: 156px;
width: 153px;
}
.vendor-amc-contract-management .amcHeroCard.history {
right: 14px;
bottom: 21px;
width: 169px;
}
.vendor-amc-contract-management .amcHeroCardHead {
font-size: 9px;
gap: 7px;
margin-bottom: 7px;
}
.vendor-amc-contract-management .amcHeroCard h2 {
font-size: 11px;
line-height: 1.35;
margin-bottom: 5px;
}
.vendor-amc-contract-management .amcHeroCard p {
font-size: 9px;
line-height: 1.5;
margin-top: 5px;
}
.vendor-amc-contract-management .amcHeroTag {
font-size: 8px;
padding: 2px 6px;
}
.vendor-amc-contract-management .amcHeroDocIcon {
width: 13px;
height: 17px;
flex-basis: 13px;
}
.vendor-amc-contract-management .amcHeroCalendarIcon {
width: 13px;
height: 15px;
flex-basis: 13px;
}
.vendor-amc-contract-management .amcHeroCheckIcon {
width: 16px;
height: 16px;
flex-basis: 16px;
font-size: 11px;
}
.vendor-amc-contract-management .amcHeroCaption {
font-size: 6px;
bottom: 4px;
right: 8px;
}
}
@media (max-width: 359px) {
.vendor-amc-contract-management .amcHeroEy {
font-size: 8px;
}
.vendor-amc-contract-management .amcHeroBtn {
font-size: 11px;
padding: 12px 10px;
gap: 8px;
}
.vendor-amc-contract-management .amcHeroCard.contract {
left: 10px;
width: 141px;
}
.vendor-amc-contract-management .amcHeroCard.renewal {
right: 10px;
width: 144px;
}
.vendor-amc-contract-management .amcHeroProofItem strong {
font-size: 9px;
}
}
.vendor-amc-contract-management .amcUI {
background: #edf8fe;
border: 1px solid #e0eff8;
border-radius: 24px;
padding: 20px;
font-size: 13px;
color: #18394f;
line-height: 1.6;
}
.vendor-amc-contract-management .amcUI * {
box-sizing: border-box;
min-width: 0;
}
.vendor-amc-contract-management .amcUI p {
font-size: 12px;
line-height: 1.65;
margin: 7px 0;
color: #698297;
}
.vendor-amc-contract-management .amcUIHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.vendor-amc-contract-management .amcUIKicker {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
color: #678497;
text-transform: uppercase;
line-height: 1.5;
margin-bottom: 5px;
}
.vendor-amc-contract-management .amcUITitle {
font-weight: 750;
font-size: 19px;
line-height: 1.35;
color: #173c58;
letter-spacing: -0.025em;
}
.vendor-amc-contract-management .amcUIPill {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-size: 10px;
font-weight: 700;
line-height: 1.5;
padding: 4px 9px;
border-radius: 999px;
background: #e5f6ee;
color: #13825e;
}
.vendor-amc-contract-management .amcUIPill.blue {
background: #e7f4ff;
color: #167bb8;
}
.vendor-amc-contract-management .amcUIPill.amber {
background: #fff4d9;
color: #95650b;
}
.vendor-amc-contract-management .amcUIPill.neutral {
background: #eff4f7;
color: #657b8c;
}
.vendor-amc-contract-management .amcUIPanel {
border: 1px solid #dbeaf3;
border-radius: 17px;
background: #fff;
padding: 18px;
}
.vendor-amc-contract-management .amcUIDirectory {
display: grid;
grid-template-columns: 0.85fr 1.4fr;
gap: 12px;
}
.vendor-amc-contract-management .amcUIList {
display: flex;
flex-direction: column;
gap: 9px;
}
.vendor-amc-contract-management .amcUIVendor {
border-radius: 13px;
padding: 13px 11px;
border: 1px solid #dcebf4;
background: #fff;
}
.vendor-amc-contract-management .amcUIVendor.selected {
border-color: #adddf7;
background: #e1f3ff;
}
.vendor-amc-contract-management .amcUIVendor strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: #214560;
}
.vendor-amc-contract-management .amcUIVendor span {
display: block;
font-size: 10px;
line-height: 1.6;
color: #6f8799;
margin-top: 2px;
}
.vendor-amc-contract-management .amcUIAvatar {
width: 35px;
height: 35px;
display: grid;
place-items: center;
border-radius: 10px;
background: #e6f5fd;
color: #168acc;
font-size: 12px;
font-weight: 800;
margin-bottom: 12px;
}
.vendor-amc-contract-management .amcUIName {
font-size: 18px;
line-height: 1.35;
font-weight: 750;
letter-spacing: -0.025em;
color: #173c58;
}
.vendor-amc-contract-management .amcUIFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 18px;
margin: 20px 0;
}
.vendor-amc-contract-management .amcUIFields.single {
grid-template-columns: 1fr;
gap: 12px;
margin: 15px 0 0;
}
.vendor-amc-contract-management .amcUIField span {
display: block;
font-size: 10px;
line-height: 1.5;
color: #768a9b;
margin-bottom: 3px;
}
.vendor-amc-contract-management .amcUIField strong {
display: block;
font-size: 12px;
line-height: 1.5;
font-weight: 650;
color: #244860;
}
.vendor-amc-contract-management .amcUIDivider {
height: 1px;
background: #e5edf4;
margin: 16px 0;
}
.vendor-amc-contract-management .amcUIFooter {
margin-top: 14px !important;
font-size: 10px !important;
line-height: 1.6 !important;
text-align: center;
color: #68849a !important;
}
.vendor-amc-contract-management .amcUIBottom {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 13px;
}
.vendor-amc-contract-management .amcUIBottom span {
border: 1px solid #dceaf4;
border-radius: 7px;
background: #fff;
padding: 5px 8px;
font-size: 10px;
color: #47728d;
font-weight: 600;
}
.vendor-amc-contract-management .amcUIFile {
display: flex;
gap: 10px;
align-items: center;
padding: 11px 12px;
background: #f2f8fd;
border: 1px solid #dcecf7;
border-radius: 10px;
font-size: 11px;
color: #3e6e8d;
margin-top: 15px;
overflow-wrap: anywhere;
}
.vendor-amc-contract-management .amcUIFileIcon {
display: inline-grid;
place-items: center;
background: #e1f0fc;
color: #238cc5;
border-radius: 5px;
font-size: 9px;
font-weight: 800;
width: 31px;
height: 34px;
flex: 0 0 31px;
}
.vendor-amc-contract-management .amcUIScope {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.vendor-amc-contract-management .amcUIScope span {
font-size: 10px;
border-radius: 6px;
background: #f2f7fb;
color: #627d93;
padding: 4px 8px;
}
.vendor-amc-contract-management .amcUIContractTop {
display: flex;
gap: 12px;
align-items: center;
}
.vendor-amc-contract-management .amcUIContractIcon {
width: 42px;
height: 48px;
border-radius: 8px;
background: #e7f5ff;
display: grid;
place-items: center;
font-size: 24px;
color: #168ace;
flex: 0 0 42px;
}
.vendor-amc-contract-management .amcUIRenewalTop {
display: grid;
grid-template-columns: 78px 1fr;
gap: 15px;
align-items: center;
margin-bottom: 19px;
}
.vendor-amc-contract-management .amcUIDate {
border-radius: 13px;
background: #fff;
border: 1px solid #c5e4f7;
overflow: hidden;
text-align: center;
}
.vendor-amc-contract-management .amcUIDate span {
display: block;
background: #e3f3ff;
color: #1c7db5;
font-size: 10px;
letter-spacing: 0.1em;
font-weight: 750;
padding: 5px;
}
.vendor-amc-contract-management .amcUIDate strong {
display: block;
font-size: 35px;
line-height: 1.25;
font-weight: 800;
padding: 6px 3px;
color: #173c58;
}
.vendor-amc-contract-management .amcUIRenewalTop .amcUIName {
font-size: 17px;
margin-bottom: 7px;
}
.vendor-amc-contract-management .amcUITimeline {
display: grid;
gap: 0;
}
.vendor-amc-contract-management .amcUIReminder {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 10px;
align-items: center;
position: relative;
padding: 11px 0;
}
.vendor-amc-contract-management .amcUIReminder:not(:last-child):before {
content: "";
position: absolute;
top: 30px;
bottom: -13px;
left: 8px;
width: 1px;
background: #d7e8f3;
}
.vendor-amc-contract-management .amcUIDot {
width: 17px;
height: 17px;
display: grid;
place-items: center;
border: 1px solid #abdef0;
border-radius: 50%;
background: #eff8ff;
color: #2289c1;
font-size: 9px;
z-index: 1;
}
.vendor-amc-contract-management .amcUIDot.done {
background: #e7f7ef;
border-color: #bde7d7;
color: #16825f;
}
.vendor-amc-contract-management .amcUIReminder strong {
font-size: 12px;
line-height: 1.5;
display: block;
}
.vendor-amc-contract-management .amcUIReminder small {
font-size: 10px;
color: #7b8d9c;
display: block;
}
.vendor-amc-contract-management .amcUIStats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.vendor-amc-contract-management .amcUIStat {
padding: 13px 10px;
border: 1px solid #dceaf4;
border-radius: 13px;
background: #fff;
text-align: center;
}
.vendor-amc-contract-management .amcUIStat strong {
font-size: 29px;
line-height: 1.3;
display: block;
font-weight: 800;
letter-spacing: -0.04em;
color: #1c526f;
}
.vendor-amc-contract-management .amcUIStat span {
font-size: 10px;
color: #6c8597;
display: block;
margin-top: 2px;
}
.vendor-amc-contract-management .amcUIStat:nth-child(2) strong {
color: #158a69;
}
.vendor-amc-contract-management .amcUIStat:nth-child(3) strong {
color: #1a8dcc;
}
.vendor-amc-contract-management .amcUIBarRow {
margin-top: 15px;
}
.vendor-amc-contract-management .amcUIBarLabel {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 11px;
line-height: 1.5;
margin-bottom: 6px;
}
.vendor-amc-contract-management .amcUIBarLabel strong {
font-weight: 650;
}
.vendor-amc-contract-management .amcUIBarLabel span {
color: #7590a2;
font-size: 10px;
}
.vendor-amc-contract-management .amcUIBar {
height: 8px;
border-radius: 5px;
background: #eaf2f7;
overflow: hidden;
}
.vendor-amc-contract-management .amcUIBar span {
display: block;
height: 100%;
background: #309cda;
border-radius: 5px;
}
.vendor-amc-contract-management .amcUIBar.green span {
background: #40aa8b;
}
.vendor-amc-contract-management .amcUIBar.gold span {
background: #e4b34c;
}
.vendor-amc-contract-management .amcUIAttention {
display: flex;
align-items: center;
gap: 9px;
border-radius: 9px;
background: #fff6e2;
color: #8c661a;
font-size: 11px;
line-height: 1.5;
margin-top: 18px;
padding: 10px 12px;
}
.vendor-amc-contract-management .amcUIAttention span {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border: 1px solid #d9b257;
border-radius: 50%;
font-size: 11px;
flex: 0 0 18px;
}
.vendor-amc-contract-management .amcUIHistoryHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 15px;
}
.vendor-amc-contract-management .amcUIEvent {
padding: 2px 0 17px 24px;
position: relative;
margin-left: 5px;
}
.vendor-amc-contract-management .amcUIEvent:not(:last-child) {
border-left: 1px solid #d6e7f0;
}
.vendor-amc-contract-management .amcUIEvent:last-child {
padding-bottom: 0;
}
.vendor-amc-contract-management .amcUIEvent:before {
content: "";
position: absolute;
left: -5px;
top: 5px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #2fa786;
border: 2px solid #e4f6ee;
}
.vendor-amc-contract-management .amcUIEvent time {
font-size: 10px;
line-height: 1.6;
color: #7d91a2;
display: block;
margin-bottom: 5px;
}
.vendor-amc-contract-management .amcUIEvent strong {
font-size: 12px;
font-weight: 700;
display: block;
line-height: 1.5;
color: #244860;
}
.vendor-amc-contract-management .amcUIEvent p {
font-size: 10px;
margin: 4px 0 7px;
line-height: 1.55;
}
.vendor-amc-contract-management .amcUIEvidence {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.vendor-amc-contract-management .amcUIEvidence span {
font-size: 9px;
color: #317990;
background: #edf8fc;
border: 1px solid #d7ebf4;
border-radius: 5px;
padding: 2px 7px;
}
.vendor-amc-contract-management .amcUIEvidence .complete {
color: #178767;
background: #edf9f3;
border-color: #d4ebdf;
}
.vendor-amc-contract-management .amcAI {
background: #101d29;
border: 1px solid #2c3e4c;
border-radius: 22px;
padding: 22px;
color: #d9e8f2;
}
.vendor-amc-contract-management .amcAIHead {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 16px;
border-bottom: 1px solid #2a3b48;
margin-bottom: 17px;
}
.vendor-amc-contract-management .amcAIIcon {
display: grid;
place-items: center;
width: 39px;
height: 39px;
background: #ffce31;
color: #0c2437;
border-radius: 11px;
font-size: 23px;
}
.vendor-amc-contract-management .amcAIHead strong {
font-size: 17px;
color: #fff;
display: block;
line-height: 1.4;
}
.vendor-amc-contract-management .amcAIHead span {
font-size: 10px;
color: #8ca6b8;
display: block;
}
.vendor-amc-contract-management .amcAIPrompt {
padding: 14px 16px;
border-radius: 13px 13px 3px 13px;
background: #20394b;
color: #e5f4ff;
font-size: 13px;
line-height: 1.65;
margin-left: 27px;
}
.vendor-amc-contract-management .amcAIResult {
margin-top: 16px;
border: 1px solid #2c3d4b;
border-radius: 13px;
padding: 15px;
background: #152631;
}
.vendor-amc-contract-management .amcAIResult h3 {
font-size: 16px;
line-height: 1.4;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.vendor-amc-contract-management .amcAIResult p {
font-size: 10px;
line-height: 1.7;
color: #93abbc;
margin: 0 0 15px;
}
.vendor-amc-contract-management .amcAIJob {
display: grid;
grid-template-columns: 1fr auto;
gap: 9px;
align-items: center;
padding: 12px 0;
border-top: 1px solid #2a3b49;
font-size: 12px;
line-height: 1.5;
}
.vendor-amc-contract-management .amcAIJob strong {
display: block;
font-size: 10px;
color: #8fabbe;
font-weight: 500;
}
.vendor-amc-contract-management .amcAIJob .amcUIPill {
font-size: 8px;
padding: 3px 7px;
}
.vendor-amc-contract-management .amcAINote {
font-size: 10px !important;
color: #91abbb !important;
line-height: 1.6 !important;
margin: 14px 0 0 !important;
}
.vendor-amc-contract-management .featureCard:hover {
box-shadow: none;
}
.vendor-amc-contract-management section[id] {
scroll-margin-top: 20px;
}
.vendor-amc-contract-management .awards__label {
color: #fff;
}
@media (max-width: 640px) {
.vendor-amc-contract-management .amcUI {
padding: 14px;
border-radius: 19px;
}
.vendor-amc-contract-management .amcUIHeader {
gap: 8px;
margin-bottom: 14px;
}
.vendor-amc-contract-management .amcUITitle {
font-size: 17px;
}
.vendor-amc-contract-management .amcUIKicker {
font-size: 8px;
}
.vendor-amc-contract-management .amcUIDirectory {
grid-template-columns: 0.8fr 1.25fr;
gap: 8px;
}
.vendor-amc-contract-management .amcUIVendor {
padding: 11px 8px;
}
.vendor-amc-contract-management .amcUIVendor strong {
font-size: 10px;
}
.vendor-amc-contract-management .amcUIVendor span {
font-size: 9px;
}
.vendor-amc-contract-management .amcUIPanel {
padding: 14px;
border-radius: 13px;
}
.vendor-amc-contract-management .amcUIName {
font-size: 16px;
}
.vendor-amc-contract-management .amcUIPill {
font-size: 9px;
padding: 3px 7px;
}
.vendor-amc-contract-management .amcUIFields {
gap: 12px;
margin: 16px 0;
}
.vendor-amc-contract-management .amcUIField strong {
font-size: 11px;
}
.vendor-amc-contract-management .amcUIFields.single {
gap: 11px;
}
.vendor-amc-contract-management .amcUIFile {
padding: 8px;
font-size: 9px;
gap: 7px;
}
.vendor-amc-contract-management .amcUIStats {
gap: 8px;
}
.vendor-amc-contract-management .amcUIStat {
padding: 11px 6px;
}
.vendor-amc-contract-management .amcUIStat strong {
font-size: 26px;
}
.vendor-amc-contract-management .amcUIStat span {
font-size: 9px;
}
.vendor-amc-contract-management .amcUIReminder {
grid-template-columns: 17px 1fr auto;
gap: 8px;
}
.vendor-amc-contract-management .amcUIReminder strong {
font-size: 11px;
}
.vendor-amc-contract-management .amcUIHistoryHead .amcUIName {
font-size: 15px;
}
.vendor-amc-contract-management .amcAI {
padding: 16px;
}
.vendor-amc-contract-management .amcAIPrompt {
font-size: 12px;
margin-left: 13px;
}
.vendor-amc-contract-management .amcAIResult {
padding: 13px;
}
.vendor-amc-contract-management .amcAIJob {
font-size: 11px;
}
.vendor-amc-contract-management .amcAIJob .amcUIPill {
font-size: 7px;
padding: 3px 5px;
}
.vendor-amc-contract-management .amcUIEvidence {
gap: 4px;
}
.vendor-amc-contract-management .amcUIEvidence span {
font-size: 8px;
padding: 2px 5px;
}
}  .facility-analytics-reports .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.facility-analytics-reports .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.facility-analytics-reports .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.facility-analytics-reports .btn:hover {
transform: translateY(-2px);
}
.facility-analytics-reports .btn.black {
background: #0b0b0b;
color: #fff;
}
.facility-analytics-reports .btn.yellow {
background: var(--yellow);
color: #000;
}
.facility-analytics-reports .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.facility-analytics-reports .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.facility-analytics-reports .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.facility-analytics-reports .soft {
background: var(--sky2);
}
.facility-analytics-reports .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.facility-analytics-reports .dark h2,
.facility-analytics-reports .dark h3 {
color: #fff;
}
.facility-analytics-reports .dark p {
color: #d6d6d6;
}
.facility-analytics-reports .dark .ey {
background: var(--yellow);
} .facility-analytics-reports .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.facility-analytics-reports .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.facility-analytics-reports .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.facility-analytics-reports .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.facility-analytics-reports .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.facility-analytics-reports .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.facility-analytics-reports .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.facility-analytics-reports .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.facility-analytics-reports .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.facility-analytics-reports .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.facility-analytics-reports .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.facility-analytics-reports .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.facility-analytics-reports .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.facility-analytics-reports .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.facility-analytics-reports .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.facility-analytics-reports .outcome:nth-child(2):before {
background: var(--yellow);
}
.facility-analytics-reports .outcome:nth-child(3):before {
background: var(--green);
}
.facility-analytics-reports .outcome:nth-child(4):before {
background: var(--purple);
}
.facility-analytics-reports .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.facility-analytics-reports .outcome span {
font-size: 13px;
color: var(--muted);
}
.facility-analytics-reports .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.facility-analytics-reports .feature.reverse .visual {
order: -1;
}
.facility-analytics-reports .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.facility-analytics-reports .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.facility-analytics-reports .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.facility-analytics-reports .visual {
position: relative;
}
.facility-analytics-reports .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.facility-analytics-reports .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.facility-analytics-reports .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.facility-analytics-reports .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.facility-analytics-reports .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.facility-analytics-reports .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.facility-analytics-reports .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.facility-analytics-reports .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.facility-analytics-reports .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.facility-analytics-reports .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.facility-analytics-reports .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.facility-analytics-reports .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.facility-analytics-reports .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.facility-analytics-reports .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.facility-analytics-reports .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.facility-analytics-reports .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.facility-analytics-reports .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.facility-analytics-reports .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.facility-analytics-reports .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.facility-analytics-reports .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.facility-analytics-reports .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.facility-analytics-reports .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.facility-analytics-reports .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: none;
}
.facility-analytics-reports .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.facility-analytics-reports .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.facility-analytics-reports .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.facility-analytics-reports .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.facility-analytics-reports .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.facility-analytics-reports .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.facility-analytics-reports .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.facility-analytics-reports .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.facility-analytics-reports .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.facility-analytics-reports .review strong {
font-size: 12px;
}
.facility-analytics-reports .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.facility-analytics-reports .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.facility-analytics-reports .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.facility-analytics-reports .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.facility-analytics-reports .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.facility-analytics-reports .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.facility-analytics-reports .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.facility-analytics-reports .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.facility-analytics-reports .faq {
max-width: 900px;
}
.facility-analytics-reports .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.facility-analytics-reports .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.facility-analytics-reports .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
}
.facility-analytics-reports .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.facility-analytics-reports .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.facility-analytics-reports .cta h3 {
font-size: 19px;
}
.facility-analytics-reports .cta.darkCta h3 {
color: #fff;
}
.facility-analytics-reports .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.facility-analytics-reports .cta.darkCta p {
color: #d1d1d1;
}
.facility-analytics-reports .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.facility-analytics-reports .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.facility-analytics-reports .final h2 {
color: #fff;
}
.facility-analytics-reports .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.facility-analytics-reports .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.facility-analytics-reports .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.facility-analytics-reports .heroGrid,
.facility-analytics-reports .feature,
.facility-analytics-reports .aiGrid,
.facility-analytics-reports .final {
grid-template-columns: 1fr;
}
.facility-analytics-reports .feature.reverse .visual {
order: 0;
}
.facility-analytics-reports .outcomes,
.facility-analytics-reports .featureGrid,
.facility-analytics-reports .connectedGrid,
.facility-analytics-reports .useCases {
grid-template-columns: repeat(2, 1fr);
}
.facility-analytics-reports .logos {
grid-template-columns: repeat(4, 1fr);
}
.facility-analytics-reports .integrations {
grid-template-columns: repeat(3, 1fr);
}
.facility-analytics-reports .reviews {
grid-template-columns: 1fr;
}
.facility-analytics-reports .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.facility-analytics-reports .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.facility-analytics-reports .wrap {
width: calc(100% - 24px);
}
.facility-analytics-reports section {
padding: 56px 0;
}
.facility-analytics-reports .hero {
padding: 54px 0;
} .facility-analytics-reports .fl,
.facility-analytics-reports .outcomes,
.facility-analytics-reports .featureGrid,
.facility-analytics-reports .connectedGrid,
.facility-analytics-reports .useCases,
.facility-analytics-reports .logos,
.facility-analytics-reports .integrations,
.facility-analytics-reports .ratingGrid {
grid-template-columns: 1fr;
}
.facility-analytics-reports .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.facility-analytics-reports *,
.facility-analytics-reports *:before,
.facility-analytics-reports *:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.facility-analytics-reports body {
overflow-x: clip;
}
.facility-analytics-reports .heroGrid,
.facility-analytics-reports .feature,
.facility-analytics-reports .aiGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.facility-analytics-reports .heroGrid>*,
.facility-analytics-reports .feature>*,
.facility-analytics-reports .aiGrid>*,
.facility-analytics-reports .final>* {
min-width: 0;
}
.facility-analytics-reports .heroGrid {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: 38px;
} .facility-analytics-reports .hero .lead {
font-size: 17px;
line-height: 1.7;
}
.facility-analytics-reports .hero .micro {
font-size: 12px;
line-height: 1.7;
}
.facility-analytics-reports .heroPills span {
font-size: 11px;
}
.facility-analytics-reports .heroVisual {
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.facility-analytics-reports .heroArt {
order: 0;
width: 100%;
max-width: 760px;
}
.facility-analytics-reports .heroArt svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.facility-analytics-reports .motion-toggle {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.facility-analytics-reports .motion-label {
order: 1;
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 5px 12px;
border: 1px solid #c6dfec;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
color: var(--navy);
background: #fff;
cursor: pointer;
margin-top: 8px;
}
.facility-analytics-reports .motion-label:before {
content: "";
display: block;
width: 7px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.facility-analytics-reports .motion-resume {
display: none;
}
.facility-analytics-reports .motion-toggle:checked~.motion-label .motion-pause {
display: none;
}
.facility-analytics-reports .motion-toggle:checked~.motion-label .motion-resume {
display: inline;
}
.facility-analytics-reports .motion-toggle:checked~.motion-label:before {
content: "";
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-right: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.facility-analytics-reports .motion-toggle:checked~.heroArt * {
animation-play-state: paused !important;
}
.facility-analytics-reports .motion-toggle:focus-visible~.motion-label {
outline: 3px solid var(--brand2);
outline-offset: 3px;
}
.facility-analytics-reports .assetNote {
order: 2;
margin: 9px 0 0;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.facility-analytics-reports .breadcrumbs {
font-size: 12px;
color: var(--muted);
margin: 0 0 21px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.facility-analytics-reports .breadcrumbs a {
color: var(--brand2);
}
.facility-analytics-reports .breadcrumbs a:hover {
text-decoration: underline;
}
.facility-analytics-reports .visual {
min-width: 0;
width: 100%;
}
.facility-analytics-reports .visualCard,
.facility-analytics-reports .visualCard.darkFrame {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.facility-analytics-reports .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
object-fit: contain;
}
.facility-analytics-reports .feature {
gap: 44px;
}
.facility-analytics-reports .feature p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
margin: 17px 0 0;
}
.facility-analytics-reports .fl {
gap: 12px 17px;
}
.facility-analytics-reports .fi {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
font-weight: 500;
line-height: 1.55;
align-items: flex-start;
}
.facility-analytics-reports .tick {
margin-top: 1px;
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 11px;
}
.facility-analytics-reports .outcome,
.facility-analytics-reports .review {
box-shadow: none;
}
.facility-analytics-reports .logo {
text-align: center;
padding: 8px;
font-size: 11px;
line-height: 1.5;
border-style: solid;
background: #fbfdff;
}
.facility-analytics-reports .reveal,
.facility-analytics-reports .reveal.show {
opacity: 1;
transform: none;
transition: none;
}
.facility-analytics-reports .reviewPlaceholder {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: var(--yellowsoft);
color: #785c0b;
padding: 4px 8px;
border-radius: 6px;
}
.facility-analytics-reports .review span {
font-size: 11px;
line-height: 1.5;
margin-top: 6px;
}
.facility-analytics-reports .ratingPlaceholder {
display: block;
font-size: 10px;
color: #b8bec7;
margin-top: 4px;
}
.facility-analytics-reports .streamDot,
.facility-analytics-reports .streamTrack span {
animation: none;
}
.facility-analytics-reports .stream {
grid-template-columns: auto minmax(20px, 1fr) minmax(0, 2fr);
}
.facility-analytics-reports .stream strong {
line-height: 1.7;
overflow-wrap: anywhere;
}
.facility-analytics-reports .ctaBtns {
min-width: 0;
max-width: 100%;
flex-shrink: 1;
}
.facility-analytics-reports .ctaBtns a {
white-space: normal;
text-align: center;
}
.facility-analytics-reports .final {
grid-template-columns: 1fr;
}
.facility-analytics-reports .featureCard p,
.facility-analytics-reports .useCase p {
font-size: 13px;
line-height: 1.7;
}
.facility-analytics-reports .connectedCard span,
.facility-analytics-reports .aiMini span {
font-size: 12px;
line-height: 1.6;
}
.facility-analytics-reports a:focus-visible,
.facility-analytics-reports summary:focus-visible {
outline: 3px solid var(--brand2);
outline-offset: 4px;
}
.facility-analytics-reports .awards__label {
color: #fff;
}
.facility-analytics-reports .visual-bg {
background: #fff;
border-radius: 20px;
padding: 15px;
border: 1px solid #d9e8f1;
}
@media (max-width: 960px) {
.facility-analytics-reports .heroGrid,
.facility-analytics-reports .feature,
.facility-analytics-reports .aiGrid,
.facility-analytics-reports .final {
grid-template-columns: minmax(0, 1fr);
}
.facility-analytics-reports .heroArt {
max-width: 680px;
}
.facility-analytics-reports .heroVisual {
width: 100%;
margin: auto;
}
.facility-analytics-reports .feature.reverse .visual {
order: 0;
}
.facility-analytics-reports .hero h1 {
max-width: 850px;
}
.facility-analytics-reports .visual {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.facility-analytics-reports .aiMini {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.facility-analytics-reports .final .ctaBtns {
max-width: none;
}
.facility-analytics-reports .cta {
flex-wrap: wrap;
}
.facility-analytics-reports .ratingItem {
padding: 12px;
border-left: 0;
}
}
@media (max-width: 640px) {
.facility-analytics-reports .hero {
padding: 34px 0 42px;
} .facility-analytics-reports .hero .lead {
font-size: 16px;
}
.facility-analytics-reports .heroGrid {
gap: 26px;
}
.facility-analytics-reports .breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
.facility-analytics-reports .hero .ey {
font-size: 12px;
margin-bottom: 14px;
}
.facility-analytics-reports .heroPills span {
font-size: 10px;
padding: 5px 8px;
}
.facility-analytics-reports .sectionHead h2,
.facility-analytics-reports .feature h2,
.facility-analytics-reports .aiGrid h2,
.facility-analytics-reports .final h2 {
font-size: clamp(30px, 7.5vw, 38px);
}
.facility-analytics-reports .logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.facility-analytics-reports .logo {
min-height: 54px;
height: auto;
}
.facility-analytics-reports .feature {
gap: 25px;
}
.facility-analytics-reports .feature p {
font-size: 15px;
}
.facility-analytics-reports .visual {
width: calc(100% + 8px);
max-width: none;
margin-left: -4px;
}
.facility-analytics-reports .aiMini {
grid-template-columns: minmax(0, 1fr);
}
.facility-analytics-reports .final {
padding: 28px 22px;
border-radius: 0;
}
.facility-analytics-reports .stream {
grid-template-columns: auto minmax(0, 1fr);
}
.facility-analytics-reports .streamTrack {
display: none;
}
.facility-analytics-reports .stream strong {
font-size: 10px !important;
}
.facility-analytics-reports .btn {
font-size: 14px;
padding: 0 18px;
}
.facility-analytics-reports .cta {
padding: 20px 17px;
gap: 16px;
}
.facility-analytics-reports .actions,
.facility-analytics-reports .ctaBtns {
gap: 8px;
}
.facility-analytics-reports .motion-label {
font-size: 10px;
}
.facility-analytics-reports .trust {
padding: 23px 0;
}
.facility-analytics-reports .faq details {
padding: 17px 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.facility-analytics-reports .motion-label {
display: none;
}
}
.facility-analytics-reports .hero .ey {
color: #11283a;
}
.facility-analytics-reports .dark .ey {
color: #151515;
}
.facility-analytics-reports .dark .sectionHead p {
color: #d6d6d6;
}
.facility-analytics-reports .hero h1 {
max-width: 590px;
}
.facility-analytics-reports .heroArt {
max-width: 760px;
}
.facility-analytics-reports .heroArt svg {
overflow: hidden;
}
.facility-analytics-reports .hero .lead {
max-width: 550px;
}
.facility-analytics-reports .breadcrumbs {
line-height: 1.6;
}
.facility-analytics-reports .visualNote {
margin: 8px 0 0 !important;
text-align: center;
font-size: 11px !important;
line-height: 1.5 !important;
color: var(--muted) !important;
}
.facility-analytics-reports .aiGrid .visualNote {
color: #b8c9d7 !important;
}
.facility-analytics-reports .outcome span {
font-size: 13px;
line-height: 1.65;
}
.facility-analytics-reports .sectionHead p {
line-height: 1.75;
}
.facility-analytics-reports .featureCard h3,
.facility-analytics-reports .useCase h3 {
font-size: 20px;
line-height: 1.22;
}
.facility-analytics-reports .featureIcon svg,
.facility-analytics-reports .useIcon svg {
width: 23px;
height: 23px;
display: block;
}
.facility-analytics-reports .featureIcon,
.facility-analytics-reports .useIcon {
font-size: 14px;
}
.facility-analytics-reports .review p {
font-size: 14px;
line-height: 1.75;
}
.facility-analytics-reports .review h3 {
font-size: 21px;
line-height: 1.25;
margin-top: 15px;
}
.facility-analytics-reports .review strong {
font-size: 14px;
color: var(--brand2);
}
.facility-analytics-reports .review span {
font-size: 12px;
}
.facility-analytics-reports .ratingItem strong {
font-size: 15px;
}
.facility-analytics-reports .ratingItem span {
display: block;
font-size: 11px;
color: #cbd3da;
margin-top: 6px;
}
.facility-analytics-reports .faq details p {
line-height: 1.75;
}
.facility-analytics-reports .sectionHead {
max-width: 850px;
}
.facility-analytics-reports .sourceNote {
font-size: 12px !important;
color: var(--muted);
margin: 20px 0 0;
}
.facility-analytics-reports .skipLink {
position: absolute;
top: -100px;
left: 16px;
z-index: 20;
padding: 12px 18px;
background: #fff;
color: #063b5c;
border: 2px solid #0076dd;
border-radius: 10px;
font-weight: 700;
}
.facility-analytics-reports .skipLink:focus {
top: 12px;
}
@media (max-width: 640px) { .facility-analytics-reports .outcome {
padding: 21px;
}
.facility-analytics-reports .sectionHead p {
font-size: 16px;
}
.facility-analytics-reports .aiGrid {
gap: 26px;
}
.facility-analytics-reports .featureCard,
.facility-analytics-reports .useCase {
padding: 20px;
}
.facility-analytics-reports .heroArt {
max-width: 100%;
}
}
.facility-analytics-reports .hero h1 {
max-width: 585px;
}
.facility-analytics-reports .heroArt {
max-width: 760px;
}
.facility-analytics-reports .heroVisual {
min-width: 0;
}
.facility-analytics-reports .dark .ey {
color: #11283a;
}
.facility-analytics-reports .ratingGrid .ratingItem {
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
.facility-analytics-reports .heroPills {
row-gap: 8px;
}
.facility-analytics-reports .workflow-label {
font-size: 12px;
color: #d8e3eb;
}
@media (max-width: 640px) {
.facility-analytics-reports .heroVisual {
padding-top: 5px;
}
.facility-analytics-reports .heroArt svg {
width: 100%;
height: auto;
}
.facility-analytics-reports .assetNote {
font-size: 10px;
max-width: 270px;
}
.facility-analytics-reports .ratingGrid {
gap: 0;
}
.facility-analytics-reports .ratingItem {
border-top: 1px solid #2d2d2d;
}
}
.facility-analytics-reports .hero h1 {
max-width: 550px;
}
.facility-analytics-reports .heroArt {
max-width: 800px;
}
.facility-analytics-reports .roleTag {
display: inline-block;
color: var(--brand2);
background: var(--sky);
font-size: 11px;
font-weight: 700;
border-radius: 7px;
padding: 4px 8px;
}
.facility-analytics-reports .workflowIcon {
color: var(--yellow);
display: flex;
justify-content: center;
margin-bottom: 9px;
}
.facility-analytics-reports .workflowIcon svg {
width: 23px;
height: 23px;
}
.facility-analytics-reports .detailLink {
display: inline-flex;
margin-top: 18px;
color: var(--brand2);
font-size: 14px;
font-weight: 700;
gap: 6px;
}
.facility-analytics-reports .detailLink:hover {
text-decoration: underline;
}
.facility-analytics-reports .pageFoot {
padding: 18px 20px 30px;
text-align: center;
color: var(--muted);
font-size: 12px;
border-top: 1px solid var(--line);
}
.facility-analytics-reports .scopeNote {
margin-top: 18px;
padding: 12px 15px;
border-left: 3px solid #a9d9ed;
background: var(--sky2);
font-size: 12px;
line-height: 1.7;
color: var(--muted);
border-radius: 0 8px 8px 0;
}
.facility-analytics-reports .dark .scopeNote {
background: #18252e;
border-color: #d9bb41;
color: #c8d8e4;
}
.facility-analytics-reports .farHero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 0;
background: #061c38;
color: #fff;
min-height: 700px;
display: flex;
align-items: center;
}
.facility-analytics-reports .farHero * {
box-sizing: border-box;
}
.facility-analytics-reports .farHero .farHeroImage {
position: absolute;
inset: 0;
width: 100%;
max-width: none; object-position: 0;
z-index: -3;
display: block;
}
.facility-analytics-reports .farHero:before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(90deg,
rgba(3, 19, 39, 0.68) 0%,
rgba(3, 24, 50, 0.44) 30%,
rgba(3, 24, 50, 0.08) 52%,
transparent 67%);
}
.facility-analytics-reports .farHeroInner {
width: min(var(--newmax), 88.5%);
margin: 0 auto;
padding: 64px 0 58px;
position: relative;
z-index: 2;
}
.facility-analytics-reports .farHeroCopy {
width: 43%;
max-width: 630px;
}
.facility-analytics-reports .farHeroEy {
display: flex;
gap: 13px;
align-items: center;
font-size: 12px;
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.115em;
color: #ffad5b;
text-transform: uppercase;
margin: 0 0 26px;
}
.facility-analytics-reports .farHeroEy:before {
content: "";
width: 28px;
height: 2px;
flex: 0 0 28px;
background: #ffad5b;
}
.facility-analytics-reports .farHero h1 {
font-family: inherit;
color: #fff; font-weight: 700;
line-height: 1.075;
letter-spacing: -0.043em;
margin: 0;
max-width: 640px;
}
.facility-analytics-reports .farHero h1 .farAccent {
display: block;
color: #0076dd;
margin-top: 3px;
}
.facility-analytics-reports .farHeroLead {
font-size: clamp(15px, 1.08vw, 18px);
line-height: 1.8;
color: #d0e0ef;
margin: 26px 0 0;
max-width: 585px;
}
.facility-analytics-reports .farHeroLead strong {
font-weight: 700;
color: #fff;
}
.facility-analytics-reports .farHeroActions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 28px;
}
.facility-analytics-reports .farHeroBtn {
display: inline-flex;
gap: 19px;
justify-content: center;
align-items: center;
min-height: 53px;
border-radius: 8px;
padding: 14px 21px;
font-family: inherit;
font-size: 14px;
font-weight: 750;
line-height: 1.35;
text-decoration: none;
border: 1px solid transparent;
transition:
background-color 0.18s,
border-color 0.18s;
}
.facility-analytics-reports .farHeroBtn.primary {
color: #09233e;
background: #ffad5b;
border-color: #ffad5b;
}
.facility-analytics-reports .farHeroBtn.primary:hover {
background: #ffc080;
border-color: #ffc080;
}
.facility-analytics-reports .farHeroBtn.secondary {
color: #fff;
background: rgba(255, 255, 255, 0.035);
border-color: rgba(194, 216, 240, 0.38);
}
.facility-analytics-reports .farHeroBtn.secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(194, 216, 240, 0.7);
}
.facility-analytics-reports .farHeroBtn:focus-visible {
outline: 3px solid #ffbe79;
outline-offset: 5px;
}
.facility-analytics-reports .farHeroArrow {
font-size: 20px;
font-weight: 400;
line-height: 1;
display: none;
}
.facility-analytics-reports .farHeroMicro {
margin: 13px 0 0;
color: #bdd6e9;
font-size: 12px;
line-height: 1.7;
}
.facility-analytics-reports .farHeroProof {
margin-top: 31px;
padding-top: 17px;
border-top: 1px solid rgba(201, 222, 244, 0.2);
}
.facility-analytics-reports .farHeroProofLabel {
font-size: 9px;
line-height: 1.6;
letter-spacing: 0.14em;
color: #a5cfe9;
font-weight: 750;
text-transform: uppercase;
margin: 0 0 13px;
}
.facility-analytics-reports .farHeroProofGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 13px;
}
.facility-analytics-reports .farHeroProofItem+.farHeroProofItem {
padding-left: 14px;
border-left: 1px solid rgba(201, 222, 244, 0.18);
}
.facility-analytics-reports .farHeroProofItem strong {
display: block;
font-size: 13px;
line-height: 1.5;
color: #fff;
font-weight: 650;
}
.facility-analytics-reports .farHeroProofItem span {
display: block;
color: #b5d0e5;
font-size: 10px;
line-height: 1.6;
margin-top: 2px;
}
.facility-analytics-reports .farHeroCards {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.facility-analytics-reports .farHeroCard {
position: absolute;
background: rgba(247, 252, 255, 0.95);
border: 1px solid rgba(151, 194, 226, 0.5);
border-radius: 15px;
padding: 16px 17px;
color: #113554;
width: 220px;
box-shadow: none;
}
.facility-analytics-reports .farHeroCard.contract {
top: 10.3%;
left: 46.7%;
}
.facility-analytics-reports .farHeroCard.renewal {
top: 12%;
right: 4.8%;
}
.facility-analytics-reports .farHeroCard.history {
bottom: 8.2%;
right: 4.8%;
width: 235px;
}
.facility-analytics-reports .farHeroCardHead {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 750;
line-height: 1.35;
margin-bottom: 13px;
}
.facility-analytics-reports .farHeroCard h2 {
font-size: 14px;
line-height: 1.45;
font-weight: 750;
letter-spacing: -0.015em;
color: #143b5b;
margin: 0 0 7px;
}
.facility-analytics-reports .farHeroCard p {
font-size: 11px;
line-height: 1.55;
color: #55718b;
margin: 7px 0 0;
}
.facility-analytics-reports .farHeroTag {
display: inline-flex;
gap: 5px;
align-items: center;
background: #e1f5ed;
color: #087859;
border-radius: 999px;
padding: 3px 8px;
font-size: 10px;
line-height: 1.5;
font-weight: 700;
}
.facility-analytics-reports .farHeroTag:before {
content: "";
width: 5px;
height: 5px;
background: currentColor;
border-radius: 50%;
}
.facility-analytics-reports .farHeroTag.amber {
color: #956010;
background: #fff1d7;
}
.facility-analytics-reports .farHeroDocIcon {
width: 17px;
height: 21px;
flex: 0 0 17px;
border: 1.5px solid #168ee1;
border-radius: 2px;
position: relative;
color: #168ee1;
}
.facility-analytics-reports .farHeroDocIcon:before,
.facility-analytics-reports .farHeroDocIcon:after {
content: "";
position: absolute;
height: 1px;
background: currentColor;
left: 3px;
right: 3px;
top: 6px;
}
.facility-analytics-reports .farHeroDocIcon:after {
top: 11px;
}
.facility-analytics-reports .farHeroCalendarIcon {
width: 17px;
height: 18px;
flex: 0 0 17px;
border: 1.5px solid #168ee1;
border-radius: 2px;
border-top-width: 5px;
position: relative;
}
.facility-analytics-reports .farHeroCalendarIcon:before,
.facility-analytics-reports .farHeroCalendarIcon:after {
content: "";
position: absolute;
height: 1px;
background: #168ee1;
left: 3px;
right: 3px;
top: 4px;
}
.facility-analytics-reports .farHeroCalendarIcon:after {
top: 7px;
}
.facility-analytics-reports .farHeroCheckIcon {
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
flex: 0 0 20px;
border: 1px solid #079b7b;
border-radius: 50%;
color: #079b7b;
font-size: 14px;
line-height: 1;
}
.facility-analytics-reports .farHeroCaption {
position: absolute;
right: 22px;
bottom: 10px;
font-size: 8px;
line-height: 1.5;
color: #d4e8f7;
background: rgba(4, 26, 54, 0.76);
padding: 2px 6px;
border-radius: 3px;
z-index: 2;
}
@media (min-width: 1650px) {
.facility-analytics-reports .farHero {
min-height: 800px;
}
.facility-analytics-reports .farHeroInner {
padding-top: 85px;
padding-bottom: 76px;
}
.facility-analytics-reports .farHeroCopy {
width: 43%;
max-width: 685px;
}
.facility-analytics-reports .farHero h1 {
max-width: 680px;
}
.facility-analytics-reports .farHeroLead {
max-width: 630px;
}
.facility-analytics-reports .farHeroProof {
max-width: 630px;
margin-top: 34px;
}
.facility-analytics-reports .farHeroProofItem strong {
font-size: 15px;
}
.facility-analytics-reports .farHeroProofItem span {
font-size: 11px;
}
.facility-analytics-reports .farHeroEy {
font-size: 13px;
}
.facility-analytics-reports .farHeroCard {
width: 245px;
padding: 19px 20px;
}
.facility-analytics-reports .farHeroCard.history {
width: 260px;
}
.facility-analytics-reports .farHeroCardHead {
font-size: 13px;
}
.facility-analytics-reports .farHeroCard h2 {
font-size: 16px;
}
.facility-analytics-reports .farHeroCard p {
font-size: 12px;
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
.facility-analytics-reports .farHero {
min-height: 690px;
}
.facility-analytics-reports .farHeroInner {
width: 90%;
padding: 58px 0;
}
.facility-analytics-reports .farHeroCopy {
width: 45%;
}
.facility-analytics-reports .farHeroEy {
font-size: 10px;
letter-spacing: 0.08em;
gap: 9px;
} .facility-analytics-reports .farHeroCard {
width: 184px;
padding: 13px 14px;
}
.facility-analytics-reports .farHeroCard.contract {
left: 49%;
top: 9%;
}
.facility-analytics-reports .farHeroCard.renewal {
right: 3%;
top: 10.5%;
}
.facility-analytics-reports .farHeroCard.history {
width: 214px;
right: 3%;
}
.facility-analytics-reports .farHeroProofGrid {
gap: 9px;
}
.facility-analytics-reports .farHeroProofItem strong {
font-size: 12px;
}
.facility-analytics-reports .farHeroProofItem+.farHeroProofItem {
padding-left: 10px;
}
}
@media (max-width: 1024px) {
.facility-analytics-reports .farHero {
display: block;
min-height: 0;
padding: 0 0 370px;
background: #061e3d;
}
.facility-analytics-reports .farHeroInner {
width: calc(100% - 64px);
padding: 50px 0 20px;
}
.facility-analytics-reports .farHeroCopy {
width: 100%;
max-width: 730px;
}
.facility-analytics-reports .farHero h1 { max-width: 730px;
}
.facility-analytics-reports .farHeroLead {
max-width: 650px;
}
.facility-analytics-reports .farHero .farHeroImage {
top: auto;
bottom: 0;
height: 465px;
object-position: right bottom;
}
.facility-analytics-reports .farHero:before {
background: linear-gradient(180deg,
#061e3d 0%,
#061e3d 47%,
rgba(6, 30, 61, 0.9) 56%,
rgba(6, 30, 61, 0.25) 72%,
transparent 87%);
}
.facility-analytics-reports .farHeroProof {
max-width: 600px;
margin-top: 24px;
}
.facility-analytics-reports .farHeroCard.contract {
top: auto;
bottom: 227px;
left: 5%;
width: 215px;
}
.facility-analytics-reports .farHeroCard.renewal {
top: auto;
bottom: 211px;
right: 4%;
width: 209px;
}
.facility-analytics-reports .farHeroCard.history {
bottom: 32px;
right: 4%;
width: 219px;
}
.facility-analytics-reports .farHeroCaption {
right: 12px;
bottom: 6px;
}
}
@media (max-width: 640px) {
.facility-analytics-reports .farHero {
padding-bottom: 287px;
}
.facility-analytics-reports .farHeroInner {
width: calc(100% - 40px);
padding: 34px 0 18px;
}
.facility-analytics-reports .farHeroEy {
font-size: 9px;
letter-spacing: 0.065em;
gap: 9px;
margin-bottom: 19px;
}
.facility-analytics-reports .farHeroEy:before {
width: 19px;
flex-basis: 19px;
}
.facility-analytics-reports .farHero h1 { line-height: 1.1;
letter-spacing: -0.04em;
}
.facility-analytics-reports .farHeroLead {
font-size: 14px;
line-height: 1.8;
margin-top: 20px;
}
.facility-analytics-reports .farHeroActions {
gap: 9px;
margin-top: 23px;
}
.facility-analytics-reports .farHeroBtn {
font-size: 12px;
min-height: 48px;
padding: 12px 13px;
gap: 10px;
}
.facility-analytics-reports .farHeroMicro {
font-size: 10px;
margin-top: 12px;
}
.facility-analytics-reports .farHeroProof {
margin-top: 23px;
padding-top: 14px;
}
.facility-analytics-reports .farHeroProofLabel {
font-size: 8px;
margin-bottom: 11px;
}
.facility-analytics-reports .farHeroProofGrid {
gap: 8px;
grid-template-columns: 1.04fr 0.98fr 1fr;
}
.facility-analytics-reports .farHeroProofItem+.farHeroProofItem {
padding-left: 8px;
}
.facility-analytics-reports .farHeroProofItem strong {
font-size: 10px;
line-height: 1.5;
}
.facility-analytics-reports .farHeroProofItem span {
font-size: 9px;
line-height: 1.5;
}
.facility-analytics-reports .farHero .farHeroImage {
height: 322px;
object-position: 76% bottom;
}
.facility-analytics-reports .farHero:before {
background: linear-gradient(180deg,
#061e3d 0%,
#061e3d 57%,
rgba(6, 30, 61, 0.96) 64%,
rgba(6, 30, 61, 0.18) 78%,
transparent 90%);
}
.facility-analytics-reports .farHeroCard {
padding: 10px 11px;
border-radius: 10px;
}
.facility-analytics-reports .farHeroCard.contract {
left: 15px;
bottom: 163px;
width: 158px;
}
.facility-analytics-reports .farHeroCard.renewal {
right: 14px;
bottom: 156px;
width: 153px;
}
.facility-analytics-reports .farHeroCard.history {
right: 14px;
bottom: 21px;
width: 169px;
}
.facility-analytics-reports .farHeroCardHead {
font-size: 9px;
gap: 7px;
margin-bottom: 7px;
}
.facility-analytics-reports .farHeroCard h2 {
font-size: 11px;
line-height: 1.35;
margin-bottom: 5px;
}
.facility-analytics-reports .farHeroCard p {
font-size: 9px;
line-height: 1.5;
margin-top: 5px;
}
.facility-analytics-reports .farHeroTag {
font-size: 8px;
padding: 2px 6px;
}
.facility-analytics-reports .farHeroDocIcon {
width: 13px;
height: 17px;
flex-basis: 13px;
}
.facility-analytics-reports .farHeroCalendarIcon {
width: 13px;
height: 15px;
flex-basis: 13px;
}
.facility-analytics-reports .farHeroCheckIcon {
width: 16px;
height: 16px;
flex-basis: 16px;
font-size: 11px;
}
.facility-analytics-reports .farHeroCaption {
font-size: 6px;
bottom: 4px;
right: 8px;
}
}
@media (max-width: 359px) {
.facility-analytics-reports .farHeroEy {
font-size: 8px;
}
.facility-analytics-reports .farHeroBtn {
font-size: 11px;
padding: 12px 10px;
gap: 8px;
}
.facility-analytics-reports .farHeroCard.contract {
left: 10px;
width: 141px;
}
.facility-analytics-reports .farHeroCard.renewal {
right: 10px;
width: 144px;
}
.facility-analytics-reports .farHeroProofItem strong {
font-size: 9px;
}
}
.facility-analytics-reports .farHeroCaption {
font-size: 9px;
max-width: 95%;
text-align: right;
}
.facility-analytics-reports .farHero h1 {
max-width: 680px;
}
.facility-analytics-reports .farHeroCopy {
width: 51%;
max-width: 650px;
}
.facility-analytics-reports .farHero .farHeroImage {
object-position: 65% 50%;
}
.facility-analytics-reports .farHero:before {
background: linear-gradient(90deg,
rgba(3, 19, 39, 0.7),
rgba(3, 24, 50, 0.38) 32%,
rgba(3, 24, 50, 0.03) 56%,
transparent 68%);
}
.facility-analytics-reports .farPowerBIBadge {
position: absolute;
right: 5.7%;
bottom: 38px;
display: flex;
gap: 12px;
align-items: center;
padding: 13px 17px;
border: 1px solid #d5e6f1;
border-radius: 12px;
background: #f8fcff;
color: #113554;
z-index: 3;
}
.facility-analytics-reports .farPowerBIBadge strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.facility-analytics-reports .farPowerBIBadge span {
display: block;
font-size: 10px;
color: #60788f;
line-height: 1.5;
}
.facility-analytics-reports .raPowerBIIcon {
width: 27px;
height: 26px;
display: flex;
gap: 3px;
align-items: flex-end;
flex: none;
}
.facility-analytics-reports .raPowerBIIcon b {
width: 7px;
height: 13px;
background: #f2c811;
border-radius: 2px 2px 0 0;
}
.facility-analytics-reports .raPowerBIIcon b:nth-child(2) {
height: 20px;
background: #ddb111;
}
.facility-analytics-reports .raPowerBIIcon b:nth-child(3) {
height: 26px;
background: #c69a0a;
}
.facility-analytics-reports .raUI {
background: #edf8fe;
border: 1px solid #dfedf6;
border-radius: 24px;
padding: 20px;
color: #18394f;
font-size: 12px;
line-height: 1.55;
}
.facility-analytics-reports .raUI *,
.facility-analytics-reports .raBI *,
.facility-analytics-reports .raAI * {
box-sizing: border-box;
min-width: 0;
}
.facility-analytics-reports .raHead {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 17px;
}
.facility-analytics-reports .raKicker {
font-size: 9px;
letter-spacing: 0.095em;
font-weight: 800;
color: #698297;
margin-bottom: 5px;
line-height: 1.5;
}
.facility-analytics-reports .raTitle {
font-size: 20px;
font-weight: 750;
letter-spacing: -0.025em;
line-height: 1.3;
color: #173c58;
}
.facility-analytics-reports .raTag {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
padding: 4px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
line-height: 1.4;
background: #e4f5ed;
color: #177859;
}
.facility-analytics-reports .raTag.neutral {
background: #f2f6f9;
border: 1px solid #dbe7ee;
color: #597488;
}
.facility-analytics-reports .raTag.blue {
background: #e5f2ff;
color: #1b6fa6;
}
.facility-analytics-reports .raTag.amber {
background: #fff2d7;
color: #936609;
}
.facility-analytics-reports .raFilters {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 15px;
}
.facility-analytics-reports .raFilter {
background: #fff;
border: 1px solid #dce8f0;
border-radius: 7px;
padding: 6px 10px;
font-size: 10px;
color: #547185;
display: inline-flex;
gap: 18px;
align-items: center;
}
.facility-analytics-reports .raFilter b {
font-weight: 400;
}
.facility-analytics-reports .raMetrics,
.facility-analytics-reports .raBIStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 15px;
}
.facility-analytics-reports .raMetric {
padding: 13px 11px;
border: 1px solid #dceaf3;
border-radius: 11px;
background: #fff;
line-height: 1.45;
}
.facility-analytics-reports .raMetric>span {
display: block;
font-size: 10px;
font-weight: 650;
color: #5c7486;
}
.facility-analytics-reports .raMetric strong {
display: block;
font-size: 29px;
letter-spacing: -0.04em;
line-height: 1.2;
font-weight: 750;
color: #193d59;
margin-top: 6px;
}
.facility-analytics-reports .raMetric small {
display: block;
font-size: 9px;
color: #698092;
line-height: 1.6;
margin-top: 5px;
font-weight: 400;
}
.facility-analytics-reports .raMetric.green strong {
color: #168365;
}
.facility-analytics-reports .raMetric.amber strong {
color: #a36d0a;
}
.facility-analytics-reports .raMetric.blue strong {
color: #2386c7;
}
.facility-analytics-reports .raPanel,
.facility-analytics-reports .raBIPanel {
padding: 16px;
border-radius: 15px;
background: #fff;
border: 1px solid #dceaf3;
}
.facility-analytics-reports .raPanelHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 16px;
line-height: 1.5;
}
.facility-analytics-reports .raPanelHeading>strong {
font-size: 12px;
color: #21465f;
letter-spacing: -0.01em;
}
.facility-analytics-reports .raPanelHeading>span {
font-size: 9px;
color: #698194;
text-align: right;
}
.facility-analytics-reports .raFacilityRow {
display: grid;
grid-template-columns: 1.42fr 1fr 40px;
gap: 13px;
align-items: center;
padding: 13px 0;
border-top: 1px solid #eef3f7;
}
.facility-analytics-reports .raFacilityRow>div>strong {
font-size: 11px;
display: block;
color: #244760;
line-height: 1.5;
}
.facility-analytics-reports .raFacilityRow>div>span {
font-size: 9px;
display: block;
color: #698395;
margin-top: 2px;
line-height: 1.5;
}
.facility-analytics-reports .raFacilityRow>b {
font-size: 10px;
text-align: right;
color: #3a5c74;
}
.facility-analytics-reports .raBarTrack {
height: 7px;
border-radius: 8px;
background: #edf3f8;
overflow: hidden;
}
.facility-analytics-reports .raBarTrack i {
height: 100%;
background: #2e99df;
display: block;
border-radius: 8px;
}
.facility-analytics-reports .raFacilityRow:nth-last-child(2) .raBarTrack i {
background: #e7b147;
}
.facility-analytics-reports .raInsight {
margin-top: 14px;
padding: 11px 13px;
display: flex;
align-items: center;
gap: 11px;
background: #e1f0fa;
border-radius: 10px;
color: #355c79;
}
.facility-analytics-reports .raInsight strong {
font-size: 11px;
display: block;
font-weight: 700;
}
.facility-analytics-reports .raInsight span {
font-size: 10px;
display: block;
line-height: 1.5;
margin-top: 2px;
}
.facility-analytics-reports .raInsightDot {
flex: 0 0 8px;
height: 8px;
border-radius: 50%;
background: #2c95d6;
}
.facility-analytics-reports .raMaintenanceTop {
display: flex;
gap: 28px;
align-items: center;
padding: 5px 12px 22px;
}
.facility-analytics-reports .raDonut {
width: 140px;
height: 140px;
flex: 0 0 140px;
border-radius: 50%;
background: conic-gradient(#188a6a 0% 94%, #efb652 94% 98%, #d4e0e8 98% 100%);
padding: 12px;
display: grid;
place-items: center;
}
.facility-analytics-reports .raDonut>div {
width: 100%;
height: 100%;
border-radius: 50%;
background: #edf8fe;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.facility-analytics-reports .raDonut strong {
font-size: 32px;
color: #153e58;
letter-spacing: -0.04em;
line-height: 1.2;
}
.facility-analytics-reports .raDonut span {
font-size: 10px;
color: #5d7b8f;
margin-top: 4px;
}
.facility-analytics-reports .raPMBreakdown {
flex: 1;
}
.facility-analytics-reports .raPMBreakdown>strong {
display: block;
font-size: 15px;
color: #2a4e67;
margin-bottom: 11px;
}
.facility-analytics-reports .raPMBreakdown>div {
display: flex;
gap: 7px;
align-items: center;
font-size: 10px;
padding: 5px 0;
color: #567387;
}
.facility-analytics-reports .raPMBreakdown b {
margin-left: auto;
font-size: 11px;
color: #2b4c64;
}
.facility-analytics-reports .raKey {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 2px;
flex: 0 0 7px;
}
.facility-analytics-reports .raKey.green {
background: #188a6a;
}
.facility-analytics-reports .raKey.amber {
background: #efb652;
}
.facility-analytics-reports .raKey.gray {
background: #d4e0e8;
}
.facility-analytics-reports .raKey.blue {
background: #319add;
}
.facility-analytics-reports .raKey.pale {
background: #c7e4f7;
}
.facility-analytics-reports .raLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 16px;
font-size: 9px;
line-height: 1.5;
color: #698296;
}
.facility-analytics-reports .raLegend>span {
display: flex;
align-items: center;
gap: 6px;
}
.facility-analytics-reports .raWeeklyChart {
height: 160px;
display: flex;
gap: 10px;
padding-top: 9px;
}
.facility-analytics-reports .raAxis {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 22px;
font-size: 8px;
color: #7991a2;
width: 17px;
flex: none;
}
.facility-analytics-reports .raColumns {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
width: 100%;
height: 100%;
background: repeating-linear-gradient(to top,
transparent 0,
transparent 42px,
#edf3f7 42px,
#edf3f7 43px);
background-origin: content-box;
padding-bottom: 0;
}
.facility-analytics-reports .raColumn {
height: 100%;
display: flex;
flex-direction: column;
}
.facility-analytics-reports .raColumn>b,
.facility-analytics-reports .raEnergyColumn>b {
font-size: 9px;
text-align: center;
font-weight: 500;
color: #71899a;
margin-top: 8px;
line-height: 1.5;
}
.facility-analytics-reports .raColumnPair {
height: calc(100% - 22px);
display: flex;
justify-content: center;
align-items: flex-end;
gap: 6px;
border-bottom: 1px solid #dce8f0;
}
.facility-analytics-reports .raColumnPair i {
width: 27%;
max-width: 26px;
min-width: 12px;
display: block;
border-radius: 4px 4px 0 0;
position: relative;
}
.facility-analytics-reports .raColumnPair i.raDue {
background: #c7e4f7;
}
.facility-analytics-reports .raColumnPair i.raDone {
background: #319add;
}
.facility-analytics-reports .raColumnPair i span {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 8px;
font-style: normal;
color: #5e7b8f;
margin-bottom: 3px;
}
.facility-analytics-reports .raSmallPrint {
font-size: 9px;
line-height: 1.7;
color: #6d8799;
margin-top: 12px;
}
.facility-analytics-reports .raServiceRow {
display: grid;
grid-template-columns: 70px 1fr 48px;
gap: 11px;
align-items: center;
font-size: 10px;
margin: 18px 0;
}
.facility-analytics-reports .raServiceRow>span {
color: #466b84;
}
.facility-analytics-reports .raServiceRow>b {
font-size: 9px;
text-align: right;
color: #536f83;
}
.facility-analytics-reports .raStack {
display: flex;
height: 10px;
border-radius: 4px;
overflow: hidden;
background: repeating-linear-gradient(90deg,
#f1f6fa 0,
#f1f6fa calc(25% - 1px),
#e4edf4 calc(25% - 1px),
#e4edf4 25%);
}
.facility-analytics-reports .raStack i {
height: 100%;
display: block;
}
.facility-analytics-reports .raStack .resolved {
background: #319add;
}
.facility-analytics-reports .raStack .pending {
background: #c7e4f7;
}
.facility-analytics-reports .raTwoMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 13px;
}
.facility-analytics-reports .raTwoMetrics>div {
background: #fff;
border: 1px solid #dceaf3;
padding: 13px 15px;
border-radius: 11px;
}
.facility-analytics-reports .raTwoMetrics span {
font-size: 10px;
color: #657f91;
display: block;
}
.facility-analytics-reports .raTwoMetrics strong {
font-size: 25px;
line-height: 1.3;
margin-top: 6px;
display: block;
color: #28546f;
}
.facility-analytics-reports .raTwoMetrics small {
font-size: 10px;
font-weight: 500;
color: #7890a1;
}
.facility-analytics-reports .raEnergyTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 5px 0 20px;
}
.facility-analytics-reports .raEnergyTotal>div>span {
font-size: 11px;
color: #648094;
}
.facility-analytics-reports .raEnergyTotal strong {
font-size: 31px;
letter-spacing: -0.04em;
color: #163f5b;
display: block;
line-height: 1.3;
margin-top: 5px;
}
.facility-analytics-reports .raEnergyTotal small {
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
color: #7590a4;
}
.facility-analytics-reports .raEnergyTotal .raTag {
font-size: 9px;
}
.facility-analytics-reports .raEnergyChart {
height: 170px;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
padding-top: 8px;
}
.facility-analytics-reports .raEnergyColumn {
height: 100%;
display: flex;
flex-direction: column;
}
.facility-analytics-reports .raEnergyBarSlot {
height: calc(100% - 22px);
display: flex;
align-items: flex-end;
justify-content: center;
border-bottom: 1px solid #dce8f0;
background: repeating-linear-gradient(to top,
transparent 0,
transparent 40px,
#edf3f7 40px,
#edf3f7 41px);
}
.facility-analytics-reports .raEnergyBarSlot i {
width: 70%;
max-width: 37px;
position: relative;
background: #a2d5f4;
border-radius: 5px 5px 0 0;
display: block;
}
.facility-analytics-reports .raEnergyBarSlot i>span {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-style: normal;
color: #688397;
margin-bottom: 5px;
}
.facility-analytics-reports .raEnergyColumn.current .raEnergyBarSlot i {
background: #2a96d8;
}
.facility-analytics-reports .raResourceGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.facility-analytics-reports .raResourceGrid>div {
padding: 12px 10px;
background: #fff;
border: 1px solid #dceaf3;
border-radius: 11px;
line-height: 1.5;
}
.facility-analytics-reports .raResourceGrid span {
display: block;
font-size: 9px;
color: #6b8293;
font-weight: 600;
}
.facility-analytics-reports .raResourceGrid strong {
font-size: 22px;
display: block;
color: #24506b;
letter-spacing: -0.025em;
margin-top: 7px;
line-height: 1.25;
}
.facility-analytics-reports .raResourceGrid small {
font-size: 9px;
font-weight: 500;
letter-spacing: 0;
}
.facility-analytics-reports .raResourceGrid em {
font-size: 8px;
color: #7a8e9e;
font-style: normal;
display: block;
margin-top: 5px;
}
.facility-analytics-reports .raBI {
background: #eef6fb;
border: 1px solid #d6e6f0;
border-radius: 20px;
overflow: hidden;
color: #173f59;
font-size: 12px;
line-height: 1.5;
}
.facility-analytics-reports .raBITop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 14px 17px;
background: #fff;
border-bottom: 1px solid #dfebf2;
}
.facility-analytics-reports .raBIApp {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 750;
}
.facility-analytics-reports .raBIApp .raPowerBIIcon {
transform: scale(0.75);
transform-origin: center;
margin-right: -3px;
}
.facility-analytics-reports .raBITop>.raTag {
font-size: 9px;
}
.facility-analytics-reports .raBIHeading {
padding: 17px 18px 10px;
}
.facility-analytics-reports .raBIHeading strong {
display: block;
font-size: 20px;
letter-spacing: -0.025em;
color: #1f4056;
line-height: 1.3;
}
.facility-analytics-reports .raBIHeading span {
display: block;
font-size: 10px;
color: #718798;
margin-top: 5px;
}
.facility-analytics-reports .raBITabs {
position: relative;
border: 0;
padding: 0 16px 14px;
margin: 0;
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: flex-start;
}
.facility-analytics-reports .raTabInput {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.facility-analytics-reports .raBITabs>label {
display: block;
padding: 8px 9px;
margin: 0 3px 13px 0;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 10px;
color: #738696;
line-height: 1.5;
}
.facility-analytics-reports .raTabInput:checked+label {
border-color: #e3b30e;
color: #24445a;
font-weight: 750;
}
.facility-analytics-reports .raTabInput:focus-visible+label {
outline: 3px solid #1f8ecc;
outline-offset: 1px;
border-radius: 3px;
}
.facility-analytics-reports .raBITabPanels {
width: 100%;
flex: 0 0 100%;
min-height: 316px;
}
.facility-analytics-reports .raBITabPanel {
display: none;
}
.facility-analytics-reports #report-overview:checked~.raBITabPanels .biOverview,
.facility-analytics-reports #report-maintenance:checked~.raBITabPanels .biMaintenance,
.facility-analytics-reports #report-service:checked~.raBITabPanels .biService,
.facility-analytics-reports #report-resources:checked~.raBITabPanels .biResources {
display: block;
}
.facility-analytics-reports .raBIStats .raMetric {
padding: 11px 9px;
}
.facility-analytics-reports .raBIStats .raMetric strong {
font-size: 25px;
}
.facility-analytics-reports .raBIStats .raMetric>span {
font-size: 9px;
}
.facility-analytics-reports .raBIStats .raMetric small {
font-size: 8px;
}
.facility-analytics-reports .raBIPanel {
padding: 12px 14px;
border-radius: 12px;
}
.facility-analytics-reports .raBIPanel .raFacilityRow {
padding: 9px 0;
}
.facility-analytics-reports .raBIPanel .raPanelHeading {
margin-bottom: 10px;
}
.facility-analytics-reports .raBIPanel .raFacilityRow>div>strong {
font-size: 10px;
}
.facility-analytics-reports .raBIPanel .raFacilityRow>div>span {
font-size: 8px;
}
.facility-analytics-reports .raBIFooter {
display: flex;
justify-content: space-between;
gap: 9px;
font-size: 8px;
line-height: 1.5;
color: #718799;
padding: 10px 16px;
border-top: 1px solid #d7e6ef;
background: #e7f1f8;
}
.facility-analytics-reports .raAI {
padding: 22px;
border: 1px solid #30404c;
border-radius: 22px;
background: #101a23;
color: #dce8ef;
font-size: 12px;
line-height: 1.6;
}
.facility-analytics-reports .raAIHead {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 21px;
}
.facility-analytics-reports .raAIHead>div {
flex: 1;
}
.facility-analytics-reports .raAIHead strong {
display: block;
font-size: 16px;
color: #fff;
line-height: 1.4;
}
.facility-analytics-reports .raAIHead>div>span {
display: block;
font-size: 10px;
color: #a9becd;
line-height: 1.5;
}
.facility-analytics-reports .raAIHead>.raTag {
background: #243744;
border-color: #344b5b;
color: #bad2e0;
font-size: 8px;
}
.facility-analytics-reports .raAIIcon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: #292b20;
border: 1px solid #514a2a;
border-radius: 10px;
color: #ffcf45;
}
.facility-analytics-reports .raAIIcon svg {
width: 22px;
height: 22px;
}
.facility-analytics-reports .raAIQuestion {
margin-left: 26px;
padding: 12px 15px;
background: #223748;
border: 1px solid #354e60;
color: #e4f1f9;
border-radius: 13px 13px 3px 13px;
font-size: 13px;
line-height: 1.6;
}
.facility-analytics-reports .raAIAnswer {
margin-top: 16px;
padding: 17px;
background: #182733;
border: 1px solid #314653;
border-radius: 13px;
}
.facility-analytics-reports .raAIAnswerKicker {
font-size: 8px;
letter-spacing: 0.08em;
font-weight: 750;
color: #b8cace;
margin-bottom: 10px;
}
.facility-analytics-reports .raAI h3 {
font-size: 20px !important;
line-height: 1.35 !important;
color: #fff !important;
letter-spacing: -0.025em;
}
.facility-analytics-reports .raAI p {
font-size: 12px !important;
color: #b3c9d8 !important;
line-height: 1.7 !important;
margin: 10px 0 0 !important;
}
.facility-analytics-reports .raAIJobs {
margin-top: 15px;
}
.facility-analytics-reports .raAIJobs>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 0;
border-top: 1px solid #304551;
font-size: 11px;
}
.facility-analytics-reports .raAIJobs b {
display: block;
font-size: 9px;
color: #8eafc2;
margin-bottom: 3px;
font-weight: 650;
}
.facility-analytics-reports .raAIJobs .raTag {
font-size: 8px;
padding: 3px 7px;
}
.facility-analytics-reports .raAINext {
margin-top: 12px;
background: #213946;
border-left: 3px solid #71b7d6;
padding: 10px 12px;
border-radius: 0 8px 8px 0;
}
.facility-analytics-reports .raAINext strong {
display: block;
font-size: 11px;
font-weight: 700;
color: #d1e7f3;
}
.facility-analytics-reports .raAINext span {
display: block;
font-size: 10px;
color: #a9c6d8;
line-height: 1.7;
margin-top: 5px;
}
.facility-analytics-reports .raAINote {
font-size: 9px;
color: #99b2c3;
margin-top: 14px;
line-height: 1.65;
}
.facility-analytics-reports .srOnly {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
border: 0;
}
.facility-analytics-reports .featureCard:hover {
box-shadow: none;
}
.facility-analytics-reports .featureIcon svg,
.facility-analytics-reports .useIcon svg {
width: 23px;
height: 23px;
}
.facility-analytics-reports .featureCard h3 {
font-size: 18px;
}
.facility-analytics-reports section[id] {
scroll-margin-top: 24px;
}
.facility-analytics-reports .logo {
color: #5e7c90;
}
.facility-analytics-reports .review .roleTag {
margin-bottom: 3px;
}
@media (max-width: 1100px) {
.facility-analytics-reports .raMetric strong {
font-size: 25px;
}
.facility-analytics-reports .raMetrics,
.facility-analytics-reports .raBIStats {
gap: 7px;
}
.facility-analytics-reports .raMetric {
padding: 11px 9px;
}
.facility-analytics-reports .raMaintenanceTop {
gap: 18px;
padding-left: 2px;
padding-right: 2px;
}
.facility-analytics-reports .raDonut {
width: 126px;
height: 126px;
flex-basis: 126px;
}
.facility-analytics-reports .raFacilityRow {
gap: 8px;
}
.facility-analytics-reports .raServiceRow {
gap: 8px;
}
}
@media (max-width: 1024px) {
.facility-analytics-reports .farHeroCopy {
width: 100%;
max-width: 730px;
}
.facility-analytics-reports .farHero .farHeroImage {
object-position: right bottom;
}
.facility-analytics-reports .farHero:before {
background: linear-gradient(180deg,
#061e3d 0%,
#061e3d 47%,
rgba(6, 30, 61, 0.92) 55%,
rgba(6, 30, 61, 0.25) 72%,
transparent 88%);
}
.facility-analytics-reports .farPowerBIBadge {
right: 5%;
bottom: 25px;
}
.facility-analytics-reports .farHeroCaption {
bottom: 5px;
}
}
@media (max-width: 640px) {
.facility-analytics-reports .farHero .farHeroImage {
object-position: 86% bottom;
}
.facility-analytics-reports .farHero:before {
background: linear-gradient(180deg,
#061e3d 0%,
#061e3d calc(100% - 280px),
rgba(6, 30, 61, 0.94) calc(100% - 245px),
rgba(6, 30, 61, 0.42) calc(100% - 190px),
transparent calc(100% - 80px));
}
.facility-analytics-reports .farPowerBIBadge {
right: 14px;
bottom: 22px;
padding: 8px 12px;
border-radius: 8px;
gap: 7px;
}
.facility-analytics-reports .farPowerBIBadge strong {
font-size: 10px;
}
.facility-analytics-reports .farPowerBIBadge span {
font-size: 8px;
}
.facility-analytics-reports .farPowerBIBadge .raPowerBIIcon {
transform: scale(0.75);
margin-left: -3px;
margin-right: -3px;
}
.facility-analytics-reports .farHeroCaption {
font-size: 7px;
text-align: center;
width: 100%;
right: 0;
border-radius: 0;
background: rgba(4, 26, 54, 0.86);
bottom: 0;
padding: 3px 5px;
}
.facility-analytics-reports .raUI {
padding: 14px;
border-radius: 18px;
}
.facility-analytics-reports .raHead {
gap: 8px;
margin-bottom: 15px;
}
.facility-analytics-reports .raTitle {
font-size: 17px;
}
.facility-analytics-reports .raKicker {
font-size: 8px;
}
.facility-analytics-reports .raTag {
font-size: 9px;
padding: 3px 7px;
}
.facility-analytics-reports .raFilters {
gap: 6px;
}
.facility-analytics-reports .raFilter {
font-size: 9px;
gap: 12px;
padding: 5px 8px;
}
.facility-analytics-reports .raMetrics,
.facility-analytics-reports .raBIStats {
gap: 7px;
}
.facility-analytics-reports .raMetric {
padding: 10px 8px;
}
.facility-analytics-reports .raMetric>span {
font-size: 9px;
}
.facility-analytics-reports .raMetric strong {
font-size: 25px;
}
.facility-analytics-reports .raMetric small {
font-size: 8px;
}
.facility-analytics-reports .raPanel {
padding: 13px;
}
.facility-analytics-reports .raPanelHeading {
gap: 6px;
}
.facility-analytics-reports .raPanelHeading>strong {
font-size: 11px;
}
.facility-analytics-reports .raPanelHeading>span {
font-size: 8px;
}
.facility-analytics-reports .raFacilityRow {
grid-template-columns: 1.4fr 0.75fr 36px;
gap: 8px;
padding: 11px 0;
}
.facility-analytics-reports .raFacilityRow>div>strong {
font-size: 10px;
}
.facility-analytics-reports .raFacilityRow>div>span {
font-size: 8px;
}
.facility-analytics-reports .raFacilityRow>b {
font-size: 9px;
}
.facility-analytics-reports .raInsight {
padding: 10px;
gap: 8px;
}
.facility-analytics-reports .raInsight strong {
font-size: 10px;
}
.facility-analytics-reports .raInsight span {
font-size: 9px;
}
.facility-analytics-reports .raMaintenanceTop {
gap: 17px;
padding: 2px 0 19px;
}
.facility-analytics-reports .raDonut {
width: 113px;
height: 113px;
flex-basis: 113px;
padding: 10px;
}
.facility-analytics-reports .raDonut strong {
font-size: 29px;
}
.facility-analytics-reports .raDonut span {
font-size: 9px;
}
.facility-analytics-reports .raPMBreakdown>strong {
font-size: 13px;
}
.facility-analytics-reports .raPMBreakdown>div {
font-size: 9px;
gap: 5px;
}
.facility-analytics-reports .raPMBreakdown b {
font-size: 10px;
}
.facility-analytics-reports .raPMBreakdown .raKey {
width: 6px;
height: 6px;
flex-basis: 6px;
}
.facility-analytics-reports .raColumns {
gap: 9px;
}
.facility-analytics-reports .raColumnPair {
gap: 4px;
}
.facility-analytics-reports .raWeeklyChart {
height: 148px;
}
.facility-analytics-reports .raColumnPair i span {
font-size: 7px;
}
.facility-analytics-reports .raColumn>b {
font-size: 8px;
}
.facility-analytics-reports .raAxis {
font-size: 7px;
}
.facility-analytics-reports .raLegend {
gap: 10px;
font-size: 8px;
}
.facility-analytics-reports .raServiceRow {
grid-template-columns: 60px 1fr 44px;
gap: 8px;
font-size: 9px;
margin: 17px 0;
}
.facility-analytics-reports .raServiceRow>b {
font-size: 8px;
}
.facility-analytics-reports .raTwoMetrics>div {
padding: 12px;
}
.facility-analytics-reports .raTwoMetrics span {
font-size: 9px;
}
.facility-analytics-reports .raTwoMetrics strong {
font-size: 23px;
}
.facility-analytics-reports .raTwoMetrics small {
font-size: 9px;
}
.facility-analytics-reports .raEnergyTotal {
align-items: flex-start;
gap: 8px;
}
.facility-analytics-reports .raEnergyTotal>div>span {
font-size: 10px;
}
.facility-analytics-reports .raEnergyTotal strong {
font-size: 27px;
}
.facility-analytics-reports .raEnergyTotal small {
font-size: 11px;
}
.facility-analytics-reports .raEnergyTotal .raTag {
font-size: 8px;
margin-top: 7px;
}
.facility-analytics-reports .raEnergyChart {
gap: 9px;
height: 156px;
}
.facility-analytics-reports .raEnergyBarSlot i>span {
font-size: 8px;
}
.facility-analytics-reports .raEnergyColumn>b {
font-size: 8px;
}
.facility-analytics-reports .raResourceGrid {
gap: 7px;
}
.facility-analytics-reports .raResourceGrid>div {
padding: 10px 7px;
}
.facility-analytics-reports .raResourceGrid span {
font-size: 8px;
}
.facility-analytics-reports .raResourceGrid strong {
font-size: 20px;
}
.facility-analytics-reports .raResourceGrid small {
font-size: 8px;
}
.facility-analytics-reports .raResourceGrid em {
font-size: 7px;
}
.facility-analytics-reports .raBITop {
padding: 11px 13px;
}
.facility-analytics-reports .raBIApp {
font-size: 11px;
gap: 5px;
}
.facility-analytics-reports .raBIHeading {
padding: 14px 13px 8px;
}
.facility-analytics-reports .raBIHeading strong {
font-size: 18px;
}
.facility-analytics-reports .raBITabs {
padding: 0 12px 12px;
}
.facility-analytics-reports .raBITabs>label {
font-size: 9px;
padding: 7px 6px;
margin-right: 2px;
}
.facility-analytics-reports .raBIStats .raMetric {
padding: 9px 6px;
}
.facility-analytics-reports .raBIStats .raMetric strong {
font-size: 22px;
}
.facility-analytics-reports .raBIStats .raMetric>span {
font-size: 8px;
}
.facility-analytics-reports .raBIStats .raMetric small {
font-size: 7px;
}
.facility-analytics-reports .raBIPanel {
padding: 12px;
}
.facility-analytics-reports .raBIFooter {
font-size: 7px;
padding: 9px 12px;
}
.facility-analytics-reports .raBITabPanels {
min-height: 305px;
}
.facility-analytics-reports .raAI {
padding: 16px;
}
.facility-analytics-reports .raAIQuestion {
font-size: 12px;
margin-left: 14px;
}
.facility-analytics-reports .raAIAnswer {
padding: 13px;
}
.facility-analytics-reports .raAI h3 {
font-size: 18px !important;
}
.facility-analytics-reports .raAIJobs>div {
font-size: 10px;
}
.facility-analytics-reports .raAIJobs .raTag {
font-size: 7px;
}
.facility-analytics-reports .raSmallPrint {
font-size: 8px;
}
}
@media (max-width: 359px) {
.facility-analytics-reports .farHeroEy {
font-size: 8px;
}
.facility-analytics-reports .raTitle {
font-size: 15px;
}
.facility-analytics-reports .raHead>.raTag {
font-size: 8px;
}
.facility-analytics-reports .raDonut {
width: 99px;
height: 99px;
flex-basis: 99px;
}
.facility-analytics-reports .raMaintenanceTop {
gap: 11px;
}
.facility-analytics-reports .raEnergyTotal strong {
font-size: 24px;
}
.facility-analytics-reports .raEnergyTotal .raTag {
font-size: 7px;
}
.facility-analytics-reports .raMetrics {
gap: 5px;
}
.facility-analytics-reports .raMetric strong {
font-size: 23px;
}
.facility-analytics-reports .raMetric small {
font-size: 7px;
}
.facility-analytics-reports .raResourceGrid strong {
font-size: 18px;
}
.facility-analytics-reports .raBIStats .raMetric strong {
font-size: 19px;
}
}  .mobile-facility-management .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.mobile-facility-management .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.mobile-facility-management .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.mobile-facility-management .btn:hover {
transform: translateY(-2px);
}
.mobile-facility-management .btn.black {
background: #0b0b0b;
color: #fff;
}
.mobile-facility-management .btn.yellow {
background: var(--yellow);
color: #000;
}
.mobile-facility-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.mobile-facility-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.mobile-facility-management .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.mobile-facility-management .soft {
background: var(--sky2);
}
.mobile-facility-management .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.mobile-facility-management .dark h2,
.mobile-facility-management .dark h3 {
color: #fff;
}
.mobile-facility-management .dark p {
color: #d6d6d6;
}
.mobile-facility-management .dark .ey {
background: var(--yellow);
}
.mobile-facility-management .sectionHead {
max-width: 830px;
margin-bottom: 38px;
}
.mobile-facility-management .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.mobile-facility-management .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.mobile-facility-management .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.mobile-facility-management .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.mobile-facility-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.mobile-facility-management .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.mobile-facility-management .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.mobile-facility-management .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.mobile-facility-management .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.mobile-facility-management .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.mobile-facility-management .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.mobile-facility-management .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.mobile-facility-management .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 15px;
}
.mobile-facility-management .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.mobile-facility-management .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.mobile-facility-management .outcome:nth-child(2):before {
background: var(--yellow);
}
.mobile-facility-management .outcome:nth-child(3):before {
background: var(--green);
}
.mobile-facility-management .outcome:nth-child(4):before {
background: var(--purple);
}
.mobile-facility-management .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.mobile-facility-management .outcome span {
font-size: 13px;
color: var(--muted);
}
.mobile-facility-management .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.mobile-facility-management .feature.reverse .visual {
order: -1;
}
.mobile-facility-management .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.mobile-facility-management .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.mobile-facility-management .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.mobile-facility-management .visual {
position: relative;
}
.mobile-facility-management .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.mobile-facility-management .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.mobile-facility-management .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.mobile-facility-management .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.mobile-facility-management .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.mobile-facility-management .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.mobile-facility-management .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.mobile-facility-management .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.mobile-facility-management .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.mobile-facility-management .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.mobile-facility-management .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.mobile-facility-management .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 15px 0 0;
}
.mobile-facility-management .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.mobile-facility-management .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.mobile-facility-management .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.mobile-facility-management .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.mobile-facility-management .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.mobile-facility-management .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.mobile-facility-management .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.mobile-facility-management .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.mobile-facility-management .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.mobile-facility-management .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.mobile-facility-management .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
.mobile-facility-management .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.mobile-facility-management .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.mobile-facility-management .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.mobile-facility-management .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.mobile-facility-management .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.mobile-facility-management .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.mobile-facility-management .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.mobile-facility-management .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.mobile-facility-management .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.mobile-facility-management .review strong {
font-size: 12px;
}
.mobile-facility-management .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.mobile-facility-management .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.mobile-facility-management .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.mobile-facility-management .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.mobile-facility-management .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.mobile-facility-management .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.mobile-facility-management .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.mobile-facility-management .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.mobile-facility-management .faq {
max-width: 900px;
}
.mobile-facility-management .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.mobile-facility-management .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.mobile-facility-management .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
}
.mobile-facility-management .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.mobile-facility-management .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.mobile-facility-management .cta h3 {
font-size: 19px;
}
.mobile-facility-management .cta.darkCta h3 {
color: #fff;
}
.mobile-facility-management .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.mobile-facility-management .cta.darkCta p {
color: #d1d1d1;
}
.mobile-facility-management .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.mobile-facility-management .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.mobile-facility-management .final h2 {
color: #fff;
}
.mobile-facility-management .final p {
color: #ddd;
margin-top: 12px;
max-width: 720px;
}
.mobile-facility-management .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.mobile-facility-management .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.mobile-facility-management .heroGrid,
.mobile-facility-management .feature,
.mobile-facility-management .aiGrid,
.mobile-facility-management .final {
grid-template-columns: 1fr;
}
.mobile-facility-management .feature.reverse .visual {
order: 0;
}
.mobile-facility-management .outcomes,
.mobile-facility-management .featureGrid,
.mobile-facility-management .connectedGrid,
.mobile-facility-management .useCases {
grid-template-columns: repeat(2, 1fr);
}
.mobile-facility-management .logos {
grid-template-columns: repeat(4, 1fr);
}
.mobile-facility-management .integrations {
grid-template-columns: repeat(3, 1fr);
}
.mobile-facility-management .reviews {
grid-template-columns: 1fr;
}
.mobile-facility-management .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.mobile-facility-management .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.mobile-facility-management .wrap {
width: calc(100% - 24px);
}
.mobile-facility-management section {
padding: 56px 0;
}
.mobile-facility-management .hero {
padding: 54px 0;
} .mobile-facility-management .fl,
.mobile-facility-management .outcomes,
.mobile-facility-management .featureGrid,
.mobile-facility-management .connectedGrid,
.mobile-facility-management .useCases,
.mobile-facility-management .logos,
.mobile-facility-management .integrations,
.mobile-facility-management .ratingGrid {
grid-template-columns: 1fr;
}
.mobile-facility-management .cta {
flex-direction: column;
align-items: flex-start;
}
} .mobile-facility-management .hero h1 {
max-width: 550px;
}
.mobile-facility-management .heroArt {
max-width: 800px;
}
.mobile-facility-management .roleTag {
display: inline-block;
color: var(--brand2);
background: var(--sky);
font-size: 11px;
font-weight: 700;
border-radius: 7px;
padding: 4px 8px;
}
.mobile-facility-management .workflowIcon {
color: var(--yellow);
display: flex;
justify-content: center;
margin-bottom: 9px;
}
.mobile-facility-management .workflowIcon svg {
width: 23px;
height: 23px;
}
.mobile-facility-management .detailLink {
display: inline-flex;
margin-top: 18px;
color: var(--brand2);
font-size: 14px;
font-weight: 700;
gap: 6px;
}
.mobile-facility-management .detailLink:hover {
text-decoration: underline;
}
.mobile-facility-management .pageFoot {
padding: 18px 20px 30px;
text-align: center;
color: var(--muted);
font-size: 12px;
border-top: 1px solid var(--line);
}
.mobile-facility-management .scopeNote {
margin-top: 18px;
padding: 12px 15px;
border-left: 3px solid #a9d9ed;
background: var(--sky2);
font-size: 12px;
line-height: 1.7;
color: var(--muted);
border-radius: 0 8px 8px 0;
}
.mobile-facility-management .dark .scopeNote {
background: #18252e;
border-color: #d9bb41;
color: #c8d8e4;
} .mobile-facility-management .featureCard:hover {
transform: none;
box-shadow: none;
}
.mobile-facility-management .promptBox {
box-shadow: none;
}
.mobile-facility-management .visual {
margin: 0;
width: 100%;
}
.mobile-facility-management .dark .lead {
color: #d6d6d6;
}
.mobile-facility-management .featureCard h3,
.mobile-facility-management .useCase h3 {
font-size: 20px;
}
.mobile-facility-management .scopeNote {
font-size: 12px !important;
}
.mobile-facility-management .fi {
font-size: 13px;
}
.mobile-facility-management .copy h2 {
line-height: 1.13;
}
.mobile-facility-management .pageFoot a:hover {
text-decoration: underline;
} .mobile-facility-management .icon {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle;
}
.mobile-facility-management p {
line-height: 1.75;
}
.mobile-facility-management figure {
margin: 0;
}
.mobile-facility-management .detailLink .icon {
width: 16px;
}
.mobile-facility-management .mobileHero {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(105deg,
#061c38 0%,
#092d53 41%,
#3d6b91 74%,
#afcbda 100%);
padding: 0;
min-height: 730px;
display: flex;
align-items: center;
color: #fff;
}
.mobile-facility-management .mobileHeroInner {
position: relative;
width: min(var(--newmax), 88.5%);
margin: 0 auto;
z-index: 3;
padding: 57px 0 58px;
display: grid;
grid-template-columns: 44% minmax(0, 56%);
align-items: center;
}
.mobile-facility-management .mobileHeroCopy {
max-width: 780px;
z-index: 3;
position: relative;
}
.mobile-facility-management .heroCrumb {
font-size: 11px;
display: flex;
align-items: center;
gap: 7px;
color: #bdd7e9;
margin-bottom: 24px;
}
.mobile-facility-management .heroCrumb a:hover {
text-decoration: underline;
}
.mobile-facility-management .mobileEy {
display: flex;
gap: 12px;
align-items: center;
color: #ffad5b;
text-transform: uppercase;
letter-spacing: 0.11em;
font-size: 13px;
font-weight: 800;
margin: 0 0 24px;
}
.mobile-facility-management .mobileEy:before {
content: "";
height: 2px;
width: 26px;
background: #ffad5b;
flex: 0 0 26px;
}
.mobile-facility-management .mobileHero h1 { line-height: 1.095;
color: white;
letter-spacing: -0.045em;
font-weight: 700;
max-width: 650px;
}
.mobile-facility-management .mobileHero h1 .accent {
color: #0076dd;
display: block;
margin-top: 4px;
}
.mobile-facility-management .mobileLead {
font-size: clamp(15px, 1.1vw, 18px);
color: #d2e4f1;
line-height: 1.8;
margin: 23px 0 0;
max-width: 560px;
}
.mobile-facility-management .mobileLead strong {
color: white;
font-weight: 700;
}
.mobile-facility-management .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.mobile-facility-management .heroBtn {
min-height: 53px;
padding: 14px 21px;
border: 1px solid transparent;
border-radius: 8px;
font-size: 14px;
font-weight: 750;
line-height: 1.35;
display: inline-flex;
align-items: center;
gap: 16px;
justify-content: center;
}
.mobile-facility-management .heroBtn.primary {
background: #ffad5b;
color: #09233e;
}
.mobile-facility-management .heroBtn.secondary {
border-color: #728ba8;
background: rgba(255, 255, 255, 0.035);
color: white;
}
.mobile-facility-management .heroBtn.primary:hover {
background: #ffc080;
}
.mobile-facility-management .heroBtn.secondary:hover {
background: rgba(255, 255, 255, 0.09);
}
.mobile-facility-management .heroBtn:focus-visible {
outline: 3px solid #ffbe79;
outline-offset: 4px;
}
.mobile-facility-management .heroBtn .icon {
width: 18px;
}
.mobile-facility-management .heroMicro {
margin: 12px 0 0;
font-size: 11px;
line-height: 1.65;
color: #c1d8e9;
}
.mobile-facility-management .heroProof {
margin-top: 28px;
padding-top: 17px;
border-top: 1px solid #435d76;
max-width: 575px;
}
.mobile-facility-management .heroProofLabel {
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #a5cfe9;
font-weight: 750;
margin: 0 0 12px;
}
.mobile-facility-management .heroProofGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.mobile-facility-management .heroProofGrid>div+div {
padding-left: 13px;
border-left: 1px solid #435d76;
}
.mobile-facility-management .heroProofGrid strong {
font-size: 12px;
display: block;
line-height: 1.45;
}
.mobile-facility-management .heroProofGrid span {
font-size: 10px;
display: block;
color: #bbd7eb;
margin-top: 4px;
}
.mobile-facility-management .heroArchitecture {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}    .mobile-facility-management .mobileHeroArt {
height: 570px;
position: relative;
z-index: 1;
width: 100%;
max-width: 900px;
justify-self: end;
container-type: inline-size;
}
.mobile-facility-management .heroArtStage {
position: absolute;
inset: 0;
}
.mobile-facility-management .heroPhone {
position: absolute;
left: 27%;
top: 42px;
z-index: 3;
transform: rotate(-3deg);
width: 260px;
}
.mobile-facility-management .heroPhone .device {
width: 260px;
}
.mobile-facility-management .heroPhone .deviceScreen {
min-height: 482px;
}
.mobile-facility-management .heroPhone .screenBody {
padding: 11px 14px 15px;
}
.mobile-facility-management .heroPhone .appPageTitle {
font-size: 19px;
margin: 1px 0 13px;
}
.mobile-facility-management .heroPhone .appBottom {
margin-top: 7px;
}
.mobile-facility-management .heroLabel {
position: absolute;
left: 30%;
bottom: -1px;
color: #d9e8f2;
font-size: 9px;
line-height: 1.5;
z-index: 3;
}
.mobile-facility-management .heroMini {
position: absolute;
z-index: 5;
background: #f8fcff;
color: #173b56;
border: 1px solid #c0d8e9;
border-radius: 13px;
padding: 14px 16px;
width: 208px;
font-size: 12px;
line-height: 1.5;
}
.mobile-facility-management .heroMini.assigned {
top: 26px;
right: -3%;
}
.mobile-facility-management .heroMini.local {
bottom: 77px;
left: 2%;
width: 218px;
}
.mobile-facility-management .heroMiniHead {
font-size: 11px;
font-weight: 750;
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 8px;
color: #315b7a;
}
.mobile-facility-management .heroMiniHead .icon {
width: 17px;
color: #228dce;
}
.mobile-facility-management .heroMini strong {
font-size: 14px;
display: block;
}
.mobile-facility-management .heroMini p {
font-size: 10px;
margin: 6px 0 0;
color: #648198;
line-height: 1.6;
}
.mobile-facility-management .heroMini .pill {
margin-top: 9px;
}
.mobile-facility-management .ahuUnit {
width: 270px;
height: 182px;
position: relative;
isolation: isolate;
}
.mobile-facility-management .heroAHU {
position: absolute;
right: -14%;
top: 243px;
transform: scale(1.03);
transform-origin: right center;
z-index: 1;
}
.mobile-facility-management .ahuFace {
position: absolute;
inset: 27px 27px 24px 0;
background: linear-gradient(145deg, #e9f2f8, #aebfcd);
border: 2px solid #9bafbc;
display: grid;
grid-template-columns: 51% 49%;
border-radius: 3px;
}
.mobile-facility-management .ahuTop {
position: absolute;
top: 0;
left: 0;
right: 27px;
height: 28px;
background: linear-gradient(145deg, #f4f8fc, #b4ccd9);
transform: skewX(-45deg);
transform-origin: bottom left;
border: 1px solid #b1c5d1;
}
.mobile-facility-management .ahuSide {
position: absolute;
right: 0;
top: 0;
width: 28px;
bottom: 24px;
background: repeating-linear-gradient(0deg, #819eaf 0 4px, #a4bdcb 4px 6px);
transform: skewY(-45deg);
transform-origin: bottom left;
border: 1px solid #6f8fa4;
}
.mobile-facility-management .ahuGrille {
margin: 14px 9px;
background: repeating-linear-gradient(0deg, #4e6c7f 0 2px, #a3bccc 3px 7px);
border: 3px solid #8eacbd;
}
.mobile-facility-management .ahuPanel {
position: relative;
border-left: 2px solid #a5b9c8;
margin: 6px 0;
}
.mobile-facility-management .equipmentLabel {
position: absolute;
font-size: 8px;
top: 3px;
left: 9px;
font-weight: 800;
letter-spacing: 0.09em;
background: #fff;
color: #31556a;
padding: 3px 6px;
border-radius: 2px;
}
.mobile-facility-management .fan {
position: absolute;
width: 62px;
height: 62px;
left: 20px;
top: 33px;
border: 5px solid #57798e;
border-radius: 50%;
background: repeating-conic-gradient(#678fa5 0deg 27deg, #a9c3d3 28deg 88deg);
outline: 3px solid #dce7ee;
}
.mobile-facility-management .fan:after {
content: "";
position: absolute;
inset: 19px;
border: 2px solid #7999af;
background: #c2d8e5;
border-radius: 50%;
}
.mobile-facility-management .equipmentWarning {
position: absolute;
bottom: 5px;
left: 10px;
font-size: 12px;
color: #896818;
}
.mobile-facility-management .ahuHandle {
position: absolute;
top: 50%;
right: 9px;
width: 3px;
height: 16px;
background: #526c7e;
border-radius: 2px;
}
.mobile-facility-management .ahuStand {
position: absolute;
bottom: 12px;
left: 13px;
width: 210px;
height: 12px;
border-left: 12px solid #56778b;
border-right: 12px solid #56778b;
border-bottom: 4px solid #44657a;
}
.mobile-facility-management .heroPipes {
position: absolute;
right: -10%;
top: 173px;
width: 205px;
height: 194px;
border: 17px solid #a4becf;
border-radius: 18px 18px 0 0;
border-bottom: 0;
opacity: 0.6;
z-index: 0;
}
.mobile-facility-management .heroPipes:before {
content: "";
position: absolute;
left: 36px;
bottom: 0;
height: 137px;
width: 95px;
border: 10px solid #7595aa;
border-bottom: 0;
border-radius: 12px 12px 0 0;
} .mobile-facility-management .pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
border-radius: 999px;
background: #e8f3fc;
color: #1c648e;
font-size: 10px;
font-weight: 750;
line-height: 1.4;
white-space: normal;
}
.mobile-facility-management .pill.green {
background: #e5f5ed;
color: #11674c;
}
.mobile-facility-management .pill.amber {
background: #fff1d7;
color: #865600;
}
.mobile-facility-management .pill.muted {
background: #eff3f7;
color: #5b7388;
}
.mobile-facility-management .pill.red {
background: #fff0ef;
color: #a1453c;
}
.mobile-facility-management .pill .icon {
width: 12px;
height: 12px;
}
.mobile-facility-management .device {
width: 260px;
border: 5px solid #263b4b;
border-radius: 35px;
background: #263b4b;
padding: 3px;
flex: 0 0 auto;
position: relative;
}
.mobile-facility-management .device:after {
content: "";
position: absolute;
left: -8px;
top: 95px;
width: 3px;
height: 39px;
background: #405767;
border-radius: 3px;
}
.mobile-facility-management .deviceScreen {
background: white;
color: #16364c;
border-radius: 26px;
overflow: hidden;
min-height: 490px;
display: flex;
flex-direction: column;
}
.mobile-facility-management .statusBar {
height: 32px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 9px;
padding: 6px 16px;
color: #314c5f;
position: relative;
}
.mobile-facility-management .speaker {
height: 7px;
border-radius: 9px;
width: 53px;
background: #16374e;
position: absolute;
left: 50%;
top: 9px;
transform: translateX(-50%);
}
.mobile-facility-management .statusIcons {
display: flex;
align-items: center;
gap: 4px;
}
.mobile-facility-management .statusIcons .icon {
width: 12px;
height: 12px;
}
.mobile-facility-management .battery {
height: 6px;
width: 14px;
border: 1px solid #455f70;
border-radius: 2px;
background: linear-gradient(90deg, #455f70 75%, transparent 75%);
}
.mobile-facility-management .appTop {
display: flex;
gap: 6px;
align-items: center;
border-bottom: 1px solid #e9eff4;
padding: 8px 12px;
font-size: 12px;
font-weight: 800;
}
.mobile-facility-management .appTop>.icon {
margin-left: auto;
width: 16px;
}
.mobile-facility-management .appSymbol {
width: 24px;
height: 24px;
border-radius: 7px;
background: #e4f5fe;
display: grid;
place-items: center;
color: #1c8bc4;
}
.mobile-facility-management .appSymbol .icon {
width: 16px;
height: 16px;
}
.mobile-facility-management .screenBody {
padding: 12px;
flex: 1;
}
.mobile-facility-management .appPageTitle {
font-size: 19px;
line-height: 1.2;
font-weight: 800;
margin: 2px 0 12px;
letter-spacing: -0.02em;
}
.mobile-facility-management .appSubtitle {
font-size: 10px;
color: #718394;
line-height: 1.5;
margin-top: -6px;
margin-bottom: 12px;
}
.mobile-facility-management .appBottom {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
padding: 10px 10px 4px;
border-top: 1px solid #e6edf4;
}
.mobile-facility-management .appBottom>span {
font-size: 8px;
display: flex;
align-items: center;
flex-direction: column;
gap: 3px;
color: #7591a4;
}
.mobile-facility-management .appBottom .icon {
width: 16px;
height: 16px;
}
.mobile-facility-management .appBottom .selected {
color: #197fc2;
}
.mobile-facility-management .homeIndicator {
height: 4px;
width: 67px;
border-radius: 5px;
background: #193a52;
margin: 8px auto;
}
.mobile-facility-management .taskCard {
background: #fff;
border: 1px solid #dce7ef;
border-radius: 10px;
padding: 12px;
margin-top: 10px;
}
.mobile-facility-management .taskCard.selectedTask {
border-color: #86c0e2;
background: #f2faff;
}
.mobile-facility-management .taskTop {
display: flex;
justify-content: space-between;
gap: 5px;
align-items: center;
margin-bottom: 7px;
}
.mobile-facility-management .taskCode {
font-size: 9px;
color: #6c8396;
font-weight: 700;
}
.mobile-facility-management .taskCard>strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: #153f5a;
}
.mobile-facility-management .taskCard .pill {
font-size: 8px;
padding: 3px 6px;
}
.mobile-facility-management .locationLine {
font-size: 10px;
line-height: 1.5;
color: #6a8499;
display: flex;
gap: 5px;
align-items: flex-start;
margin-top: 5px;
}
.mobile-facility-management .locationLine .icon {
width: 12px;
height: 12px;
margin-top: 2px;
}
.mobile-facility-management .taskMeta {
display: flex;
gap: 5px;
align-items: center;
margin-top: 10px;
font-size: 9px;
color: #377397;
}
.mobile-facility-management .taskMeta .icon {
width: 13px;
height: 13px;
}
.mobile-facility-management .taskMeta>.icon:last-child {
margin-left: auto;
}
.mobile-facility-management .appFilters {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 0 0 11px;
}
.mobile-facility-management .appFilters span {
font-size: 9px;
background: #f1f6fa;
border: 1px solid #e0eaf3;
border-radius: 6px;
padding: 4px 7px;
color: #607a90;
}
.mobile-facility-management .appFilters span.active {
color: #147ab5;
border-color: #9fd5ef;
background: #ebf8fe;
}
.mobile-facility-management .appBanner {
font-size: 10px;
line-height: 1.5;
color: #876018;
background: #fff4df;
border: 1px solid #f0dfbb;
border-radius: 8px;
padding: 10px;
display: flex;
align-items: flex-start;
gap: 8px;
margin: 10px 0;
}
.mobile-facility-management .appBanner .icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.mobile-facility-management .appBanner.green {
background: #ecf8f2;
border-color: #c5e6d5;
color: #276d50;
}
.mobile-facility-management .appBanner.blue {
background: #eaf6ff;
border-color: #c5dfef;
color: #2b6c94;
}
.mobile-facility-management .appBanner strong {
display: block;
font-size: 10px;
}
.mobile-facility-management .appBanner small {
display: block;
font-size: 9px;
line-height: 1.55;
margin-top: 2px;
}
.mobile-facility-management .uiCanvas {
background: #edf8fe;
border: 1px solid #dfedf6;
border-radius: 24px;
padding: 22px;
color: #173c58;
font-size: 13px;
line-height: 1.6;
}
.mobile-facility-management .uiCanvas * {
min-width: 0;
}
.mobile-facility-management .uiCanvas p {
font-size: 12px !important;
line-height: 1.65 !important;
margin: 6px 0 0 !important;
color: #607f94;
}
.mobile-facility-management .uiHead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px;
}
.mobile-facility-management .uiHead h3 {
color: #173c58;
font-size: 21px;
line-height: 1.25;
letter-spacing: -0.025em;
}
.mobile-facility-management .uiKicker {
display: block;
font-size: 10px;
letter-spacing: 0.095em;
text-transform: uppercase;
color: #668296;
font-weight: 750;
margin-bottom: 6px;
}
.mobile-facility-management .uiHead>.pill {
flex: 0 0 auto;
max-width: 130px;
}
.mobile-facility-management .uiPanel {
background: #fff;
border: 1px solid #d9e7f1;
border-radius: 15px;
padding: 17px;
}
.mobile-facility-management .uiPanel h4 {
font-size: 13px;
margin: 0 0 12px;
line-height: 1.5;
color: #224c66;
}
.mobile-facility-management .uiNote {
margin-top: 15px;
border-top: 1px solid #d7e6ef;
padding-top: 12px;
color: #698295;
font-size: 10px;
line-height: 1.65;
display: flex;
gap: 7px;
align-items: flex-start;
}
.mobile-facility-management .uiNote .icon {
width: 14px;
height: 14px;
margin-top: 2px;
}
.mobile-facility-management .uiTwo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.mobile-facility-management .uiThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.mobile-facility-management .uiStat {
background: #fff;
border: 1px solid #d9e8f1;
border-radius: 12px;
padding: 15px;
}
.mobile-facility-management .uiStat strong {
font-size: 24px;
display: block;
letter-spacing: -0.035em;
line-height: 1.3;
color: #254f6c;
}
.mobile-facility-management .uiStat span {
font-size: 10px;
color: #668094;
display: block;
margin-top: 4px;
}
.mobile-facility-management .uiDivider {
height: 1px;
background: #e1eaf2;
margin: 14px 0;
}
.mobile-facility-management .tasksLayout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 19px;
align-items: center;
}
.mobile-facility-management .contextRail {
display: flex;
flex-direction: column;
gap: 12px;
}
.mobile-facility-management .contextCard {
background: white;
border: 1px solid #d7e7f2;
border-radius: 12px;
padding: 15px;
}
.mobile-facility-management .contextCard .icon {
color: #2688bf;
width: 25px;
height: 25px;
margin-bottom: 6px;
}
.mobile-facility-management .contextCard strong {
display: block;
font-size: 12px;
line-height: 1.5;
}
.mobile-facility-management .contextCard span {
font-size: 10px;
color: #647d90;
line-height: 1.6;
display: block;
margin-top: 6px;
}
.mobile-facility-management .contextCard.featured {
background: #dfeffc;
border-color: #b5d4e9;
}
.mobile-facility-management .tinyLabel {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #658095;
font-weight: 750;
display: block;
margin-bottom: 6px;
}
.mobile-facility-management .offlineRecord {
margin-top: 16px;
padding: 15px;
background: white;
border: 1px solid #dbe8f0;
border-radius: 14px;
}
.mobile-facility-management .offlineRecord strong {
font-size: 16px;
color: #204d68;
line-height: 1.4;
display: block;
}
.mobile-facility-management .offlineState {
display: flex;
gap: 10px;
align-items: center;
border-radius: 12px;
padding: 14px;
background: #fff3dd;
border: 1px solid #e9d9b4;
margin-bottom: 15px;
font-size: 12px;
font-weight: 750;
color: #835d1c;
}
.mobile-facility-management .offlineState .icon {
width: 20px;
}
.mobile-facility-management .recordRow {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 9px;
align-items: center;
margin-top: 13px;
color: #456982;
font-size: 12px;
}
.mobile-facility-management .recordRow .icon {
width: 17px;
height: 17px;
color: #258760;
}
.mobile-facility-management .recordRow .pill {
font-size: 9px;
}
.mobile-facility-management .queuedState {
padding: 13px;
background: #fff6e7;
border: 1px solid #f0dfc1;
border-radius: 10px;
margin-top: 16px;
font-size: 11px;
color: #805a17;
display: flex;
gap: 10px;
}
.mobile-facility-management .queuedState .icon {
width: 17px;
}
.mobile-facility-management .syncJourney {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 17px;
font-size: 10px;
color: #647d91;
}
.mobile-facility-management .syncJourney .icon {
width: 18px;
}
.mobile-facility-management .syncJourney span:last-child {
color: #277e5c;
}
.mobile-facility-management .offlineCompare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 15px;
}
.mobile-facility-management .offlineCompare>div {
border: 1px solid #d7e5ee;
border-radius: 12px;
background: #fff;
padding: 13px;
font-size: 11px;
}
.mobile-facility-management .offlineCompare strong {
display: block;
color: #365d78;
margin-bottom: 3px;
}
.mobile-facility-management .offlineCompare span {
display: block;
color: #7790a3;
font-size: 10px;
}
.mobile-facility-management .scanBlock {
display: grid;
grid-template-columns: 115px 1fr;
gap: 17px;
align-items: center;
background: white;
border: 1px solid #cfe4f2;
border-radius: 14px;
padding: 16px;
}
.mobile-facility-management .qr {
width: 93px;
height: 93px;
display: grid;
grid-template-columns: repeat(21, 1fr);
background: white;
padding: 5px;
border: 1px solid #d9e5ed;
aspect-ratio: 1;
}
.mobile-facility-management .qr i {
background: transparent;
}
.mobile-facility-management .qr i.on {
background: #204862;
}
.mobile-facility-management .scanBlock h4 {
font-size: 17px;
line-height: 1.35;
margin: 4px 0 5px;
color: #224e6a;
}
.mobile-facility-management .scanMeta {
font-size: 11px;
color: #6b8596;
}
.mobile-facility-management .assetIdentity {
display: grid;
grid-template-columns: 1fr 150px;
gap: 8px;
align-items: center;
background: #fff;
border: 1px solid #d9e8f1;
border-radius: 15px;
padding: 18px;
margin-top: 15px;
overflow: hidden;
}
.mobile-facility-management .smallAHU {
transform: scale(0.48);
transform-origin: left center;
margin: 0;
width: 270px;
height: 125px;
}
.mobile-facility-management .smallAHU .ahuFace {
bottom: 0;
}
.mobile-facility-management .smallAHU .ahuSide {
bottom: 0;
}
.mobile-facility-management .smallAHU .ahuStand {
bottom: -12px;
}
.mobile-facility-management .identityFields {
font-size: 12px;
}
.mobile-facility-management .identityFields strong {
display: block;
color: #20445c;
font-size: 14px;
margin-bottom: 9px;
}
.mobile-facility-management .identityFields span {
display: block;
color: #6b8699;
line-height: 1.8;
}
.mobile-facility-management .historyItem {
padding: 10px 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 9px;
align-items: flex-start;
border-top: 1px solid #e6eff5;
}
.mobile-facility-management .historyItem:first-of-type {
border-top: 0;
}
.mobile-facility-management .historyIcon {
width: 30px;
height: 30px;
background: #e9f7fe;
border-radius: 8px;
display: grid;
place-items: center;
color: #2885b9;
}
.mobile-facility-management .historyIcon .icon {
width: 17px;
height: 17px;
}
.mobile-facility-management .historyItem strong {
font-size: 12px;
line-height: 1.5;
display: block;
color: #305a74;
}
.mobile-facility-management .historyItem small {
font-size: 10px;
color: #7790a2;
line-height: 1.55;
display: block;
margin-top: 3px;
}
.mobile-facility-management .inspectionTitle {
font-size: 16px;
color: #244d67;
line-height: 1.35;
font-weight: 750;
}
.mobile-facility-management .inspectionInfo {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.mobile-facility-management .progressTrack {
height: 7px;
background: #e5edf3;
border-radius: 99px;
margin: 12px 0 6px;
}
.mobile-facility-management .progressTrack>span {
display: block;
height: 100%;
width: 80%;
background: #249c7b;
border-radius: 99px;
}
.mobile-facility-management .progressCaption {
font-size: 10px;
color: #6b8294;
text-align: right;
margin-bottom: 9px;
}
.mobile-facility-management .checkStep {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 9px;
align-items: center;
padding: 11px 0;
border-bottom: 1px solid #e8eff4;
font-size: 12px;
line-height: 1.5;
color: #45677d;
}
.mobile-facility-management .stepMark {
width: 18px;
height: 18px;
border-radius: 50%;
display: grid;
place-items: center;
background: #e8f7ef;
color: #208060;
font-size: 10px;
font-weight: 800;
}
.mobile-facility-management .stepMark.pending {
border: 1px solid #bdcfd9;
background: #f6f9fb;
color: #8ba2b4;
}
.mobile-facility-management .stepValue {
font-size: 10px;
color: #31566e;
font-weight: 700;
}
.mobile-facility-management .evidenceTiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 15px;
}
.mobile-facility-management .evidenceTile {
padding: 12px 9px;
background: #f3f9fd;
border: 1px solid #daeaf5;
border-radius: 9px;
font-size: 10px;
display: flex;
align-items: center;
flex-direction: column;
gap: 5px;
color: #426984;
text-align: center;
}
.mobile-facility-management .evidenceTile .icon {
color: #218dc7;
width: 19px;
height: 19px;
}
.mobile-facility-management .techRemark {
background: #fff9e9;
border: 1px solid #f1e4bb;
border-radius: 10px;
padding: 12px;
margin-top: 15px;
font-size: 11px;
color: #715d2d;
line-height: 1.6;
}
.mobile-facility-management .techRemark strong {
display: block;
margin-bottom: 3px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mobile-facility-management .issueLayout {
display: grid;
grid-template-columns: 258px 1fr;
gap: 17px;
align-items: center;
}
.mobile-facility-management .issueForm {
background: white;
border: 1px solid #d7e7f1;
border-radius: 17px;
padding: 18px;
}
.mobile-facility-management .formTop {
display: flex;
justify-content: space-between;
gap: 9px;
align-items: center;
font-size: 13px;
color: #265473;
font-weight: 750;
padding-bottom: 12px;
border-bottom: 1px solid #e3edf4;
margin-bottom: 14px;
}
.mobile-facility-management .formTop .icon {
width: 18px;
}
.mobile-facility-management .mockField {
margin-top: 11px;
}
.mobile-facility-management .mockField>span {
display: block;
font-size: 10px;
font-weight: 650;
color: #6e879b;
margin-bottom: 5px;
}
.mobile-facility-management .fieldValue {
border: 1px solid #d8e5ef;
border-radius: 7px;
padding: 8px 10px;
font-size: 11px;
line-height: 1.6;
color: #3e627d;
background: #fafcfe;
}
.mobile-facility-management .fieldValue.textarea {
min-height: 78px;
}
.mobile-facility-management .evidenceUpload {
display: flex;
gap: 8px;
align-items: center;
border: 1px dashed #b5d2e3;
padding: 13px;
border-radius: 8px;
margin-top: 14px;
color: #3b7498;
font-size: 11px;
}
.mobile-facility-management .evidenceUpload .icon {
width: 19px;
}
.mobile-facility-management .mockSubmit {
display: block;
text-align: center;
background: #177fb8;
color: white;
padding: 9px;
font-size: 11px;
font-weight: 750;
margin-top: 15px;
border-radius: 8px;
}
.mobile-facility-management .routingLine {
height: 40px;
border-left: 1px dashed #96bcd3;
margin: 4px 0 4px 17px;
}
.mobile-facility-management .routeCard {
background: #fff;
border: 1px solid #d7e6f0;
padding: 14px;
border-radius: 13px;
font-size: 11px;
color: #446980;
}
.mobile-facility-management .routeCard .icon {
color: #2587bd;
width: 22px;
margin-bottom: 8px;
}
.mobile-facility-management .routeCard strong {
font-size: 12px;
line-height: 1.45;
display: block;
}
.mobile-facility-management .routeCard small {
font-size: 10px;
line-height: 1.6;
display: block;
margin-top: 6px;
color: #738b9e;
}
.mobile-facility-management .supervisorTools {
display: flex;
gap: 8px;
justify-content: space-between;
align-items: center;
margin-bottom: 13px;
}
.mobile-facility-management .filterChip {
display: inline-flex;
font-size: 10px;
color: #4b708b;
background: #fff;
border: 1px solid #cde0ee;
border-radius: 6px;
padding: 5px 9px;
}
.mobile-facility-management .workSummary {
margin-top: 14px;
background: #fff;
border: 1px solid #d9e6ef;
border-radius: 15px;
padding: 17px;
}
.mobile-facility-management .summaryTop {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
}
.mobile-facility-management .summaryTop strong {
display: block;
font-size: 15px;
line-height: 1.4;
color: #294e66;
}
.mobile-facility-management .summaryTop small {
display: block;
font-size: 10px;
margin-top: 4px;
color: #728b9e;
}
.mobile-facility-management .summaryEvidence {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 14px;
}
.mobile-facility-management .summaryEvidence span {
font-size: 10px;
color: #406782;
border: 1px solid #d8e7f1;
background: #f6faff;
border-radius: 6px;
padding: 5px 8px;
}
.mobile-facility-management .activity {
border-top: 1px solid #dce8f1;
margin-top: 15px;
padding-top: 9px;
}
.mobile-facility-management .activityRow {
display: flex;
gap: 11px;
margin-top: 10px;
font-size: 11px;
line-height: 1.55;
color: #4c6f88;
}
.mobile-facility-management .activityDot {
margin-top: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ebb259;
flex: 0 0 8px;
}
.mobile-facility-management .activityDot.synced {
background: #2ba583;
}
.mobile-facility-management .activityRow small {
display: block;
font-size: 10px;
color: #7b91a2;
}
.mobile-facility-management .supervisorNote {
background: #e8f7ee;
border-radius: 9px;
padding: 12px;
margin-top: 14px;
color: #2d7557;
font-size: 11px;
line-height: 1.6;
}
.mobile-facility-management .vedaPanel {
background: #142331;
border: 1px solid #3b4c57;
border-radius: 21px;
padding: 22px;
color: #fff;
}
.mobile-facility-management .vedaPanel .uiKicker {
color: #93c6e4;
}
.mobile-facility-management .vedaTitle {
display: flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 750;
margin-bottom: 14px;
}
.mobile-facility-management .vedaTitle .icon {
color: #ffd050;
}
.mobile-facility-management .vedaPrompt {
margin: 13px 0 15px;
background: #21394d;
color: #e2edf4;
border: 1px solid #385b75;
border-radius: 14px 14px 3px 14px;
padding: 14px;
font-size: 13px;
line-height: 1.7;
}
.mobile-facility-management .vedaAnswer {
background: #192d3d;
border: 1px solid #314e63;
border-radius: 14px;
padding: 16px;
font-size: 12px;
color: #c1d4e2;
line-height: 1.7;
}
.mobile-facility-management .vedaAnswer strong {
display: block;
color: #f1f7fb;
margin-bottom: 8px;
font-size: 14px;
}
.mobile-facility-management .vedaAnswer p {
color: #c1d4e2 !important;
font-size: 12px !important;
line-height: 1.7 !important;
margin: 0 !important;
}
.mobile-facility-management .vedaSource {
display: flex;
align-items: center;
gap: 6px;
margin-top: 12px;
font-size: 10px;
color: #99cdea;
}
.mobile-facility-management .vedaSource .icon {
width: 14px;
height: 14px;
}
.mobile-facility-management .vedaHint {
margin-top: 15px;
font-size: 11px;
color: #afc4d2;
line-height: 1.65;
}
.mobile-facility-management .connectedGrid .connectedCard {
box-shadow: none;
}
.mobile-facility-management .workflowBand .ratingItem {
border-left: 1px solid #353535;
}
.mobile-facility-management .roleTag {
font-size: 10px;
}
.mobile-facility-management .useIcon .icon,
.mobile-facility-management .featureIcon .icon {
width: 22px;
height: 22px;
color: #102d43;
margin-bottom: 0;
}
.mobile-facility-management .mobileBroader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: #fff;
border: 1px solid #dae8f1;
border-left: 4px solid #00a8f8;
border-radius: 13px;
padding: 19px 22px;
margin-top: 26px;
}
.mobile-facility-management .mobileBroader p {
font-size: 13px;
color: #5b768a;
margin: 4px 0 0;
}
.mobile-facility-management .mobileBroader strong {
font-size: 15px;
}
.mobile-facility-management .mobileBroader .detailLink {
margin: 0;
flex: 0 0 auto;
}
.mobile-facility-management .faq details[open] summary {
margin-bottom: 8px;
}
.mobile-facility-management .visualNote {
margin-top: 10px !important;
}
.mobile-facility-management .footerLinks {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.mobile-facility-management .pageFoot p {
margin: 10px 0 0;
font-size: 11px;
}
.mobile-facility-management .feature section {
padding: 0;
}
@media (min-width: 1700px) {
.mobileHero {
min-height: 820px;
}
.mobile-facility-management .mobileHeroInner {
padding: 82px 0;
}
.mobile-facility-management .mobileHeroArt {
height: 640px;
}
.mobile-facility-management .heroPhone {
left: 30%;
top: 30px;
transform: scale(1.14) rotate(-3deg);
transform-origin: top left;
}
.mobile-facility-management .heroMini.assigned {
top: 18px;
right: 0;
width: 235px;
}
.mobile-facility-management .heroMini.local {
bottom: 100px;
left: 2%;
width: 242px;
}
.mobile-facility-management .heroAHU {
right: 0;
top: 320px;
transform: scale(1.26);
}
.mobile-facility-management .heroPipes {
right: 1%;
top: 222px;
width: 215px;
}
.mobile-facility-management .heroLabel {
left: 35%;
bottom: 1px;
}
.mobile-facility-management .heroProofGrid strong {
font-size: 14px;
}
.mobile-facility-management .heroProofGrid span {
font-size: 11px;
}
.mobile-facility-management .heroMini strong {
font-size: 16px;
}
.mobile-facility-management .heroMiniHead {
font-size: 12px;
}
.mobile-facility-management .heroMini p {
font-size: 11px;
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
.mobileHeroInner {
width: 92%;
grid-template-columns: 47% 53%;
padding: 50px 0;
} .mobile-facility-management .mobileEy {
font-size: 10px;
}
.mobile-facility-management .mobileHeroArt {
height: 540px;
}
.mobile-facility-management .heroPhone {
left: 17%;
top: 47px;
transform: scale(0.94) rotate(-3deg);
transform-origin: top left;
}
.mobile-facility-management .heroMini.assigned {
width: 175px;
right: -1%;
top: 5px;
}
.mobile-facility-management .heroMini.local {
width: 188px;
left: 0;
bottom: 60px;
}
.mobile-facility-management .heroMini strong {
font-size: 12px;
}
.mobile-facility-management .heroMini p {
font-size: 9px;
}
.mobile-facility-management .heroAHU {
right: -18%;
transform: scale(0.85);
}
.mobile-facility-management .heroLabel {
left: 25%;
bottom: 0;
}
.mobile-facility-management .heroBtn {
font-size: 12px;
padding: 12px 15px;
}
.mobile-facility-management .heroLead {
font-size: 15px;
}
}
@media (max-width: 1024px) {
.mobileHero {
display: block;
min-height: 0;
}
.mobile-facility-management .mobileHeroInner {
width: calc(100% - 64px);
grid-template-columns: 1fr;
padding: 44px 0 24px;
gap: 22px;
}
.mobile-facility-management .mobileHeroCopy {
max-width: 730px;
}
.mobile-facility-management .mobileHero h1 { max-width: 710px;
}
.mobile-facility-management .mobileLead {
font-size: 16px;
max-width: 655px;
}
.mobile-facility-management .heroProof {
max-width: 600px;
}
.mobile-facility-management .mobileHeroArt {
width: 100%;
height: 570px;
max-width: 640px;
margin: 0 auto;
justify-self: center;
}
.mobile-facility-management .heroPhone {
left: 29%;
top: 29px;
transform: rotate(-3deg);
}
.mobile-facility-management .heroMini.assigned {
right: 1%;
top: 9px;
}
.mobile-facility-management .heroMini.local {
bottom: 84px;
left: 0;
}
.mobile-facility-management .heroAHU {
right: -5%;
top: 285px;
}
.mobile-facility-management .heroPipes {
right: -3%;
top: 188px;
}
.mobile-facility-management .heroLabel {
left: 32%;
bottom: 4px;
}
.mobile-facility-management .heroArchitecture:after {
background: linear-gradient(180deg,
#061c38 0%,
rgba(6, 28, 56, 0.94) 40%,
rgba(9, 37, 68, 0.3) 70%,
rgba(9, 37, 68, 0.08) 100%);
}
.mobile-facility-management .distantBuilding {
height: 45%;
width: 65%;
bottom: 9%;
}
.mobile-facility-management .distantBuilding.two {
right: 37%;
height: 35%;
width: 40%;
bottom: 15%;
}
.mobile-facility-management .roofDeck {
left: -20%;
right: -20%;
bottom: -160px;
}
.mobile-facility-management .roofRail {
width: 120%;
bottom: 10%;
}
.mobile-facility-management .mobileHero {
background: linear-gradient(130deg, #061c38, #092d53 44%, #6c95af 100%);
}
.mobile-facility-management .tasksLayout {
grid-template-columns: 260px 1fr;
}
.mobile-facility-management .visual {
max-width: 690px;
margin: auto;
}
.mobile-facility-management .uiHead h3 {
font-size: 22px;
}
}
@media (max-width: 640px) {
.mobileHeroInner {
width: calc(100% - 40px);
padding: 29px 0 15px;
gap: 12px;
}
.mobile-facility-management .heroCrumb {
font-size: 9px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.mobile-facility-management .mobileEy {
font-size: 9px;
letter-spacing: 0.08em;
margin-bottom: 17px;
gap: 8px;
}
.mobile-facility-management .mobileEy:before {
width: 18px;
flex-basis: 18px;
}
.mobile-facility-management .mobileHero h1 { line-height: 1.095;
}
.mobile-facility-management .mobileLead {
font-size: 14px;
margin-top: 19px;
line-height: 1.8;
}
.mobile-facility-management .heroActions {
gap: 9px;
margin-top: 21px;
}
.mobile-facility-management .heroBtn {
font-size: 12px;
padding: 12px 13px;
gap: 9px;
min-height: 48px;
}
.mobile-facility-management .heroBtn .icon {
width: 16px;
}
.mobile-facility-management .heroMicro {
font-size: 10px;
}
.mobile-facility-management .heroProof {
margin-top: 22px;
padding-top: 14px;
}
.mobile-facility-management .heroProofLabel {
font-size: 8px;
}
.mobile-facility-management .heroProofGrid {
gap: 7px;
}
.mobile-facility-management .heroProofGrid strong {
font-size: 10px;
}
.mobile-facility-management .heroProofGrid span {
font-size: 9px;
}
.mobile-facility-management .heroProofGrid>div+div {
padding-left: 8px;
}
.mobile-facility-management .mobileHeroArt {
height: 445px;
margin-top: 10px;
width: 100%;
max-width: 430px;
}
.mobile-facility-management .heroPhone {
top: 30px;
left: 21%;
transform: scale(0.74) rotate(-3deg);
transform-origin: top left;
}
.mobile-facility-management .heroMini {
border-radius: 10px;
padding: 10px 11px;
}
.mobile-facility-management .heroMini.assigned {
right: -5px;
top: 4px;
width: 143px;
}
.mobile-facility-management .heroMini.local {
left: -3px;
bottom: 67px;
width: 160px;
}
.mobile-facility-management .heroMiniHead {
font-size: 9px;
gap: 5px;
margin-bottom: 6px;
}
.mobile-facility-management .heroMiniHead .icon {
width: 14px;
height: 14px;
}
.mobile-facility-management .heroMini strong {
font-size: 11px;
}
.mobile-facility-management .heroMini p {
font-size: 8px;
margin-top: 4px;
}
.mobile-facility-management .heroMini .pill {
font-size: 8px;
padding: 3px 6px;
margin-top: 6px;
}
.mobile-facility-management .heroAHU {
right: -26%;
top: 190px;
transform: scale(0.62);
}
.mobile-facility-management .heroPipes {
right: -10%;
top: 158px;
transform: scale(0.65);
}
.mobile-facility-management .heroLabel {
left: 14%;
right: 0;
bottom: 11px;
font-size: 8px;
text-align: center;
}
.mobile-facility-management .mobileBroader {
align-items: flex-start;
flex-direction: column;
gap: 14px;
padding: 19px;
}
.mobile-facility-management .mobileBroader .detailLink {
font-size: 13px;
}
.mobile-facility-management .uiCanvas {
padding: 17px;
border-radius: 20px;
}
.mobile-facility-management .uiHead {
gap: 10px;
margin-bottom: 17px;
}
.mobile-facility-management .uiHead h3 {
font-size: 19px;
}
.mobile-facility-management .uiHead>.pill {
font-size: 9px;
max-width: 100px;
}
.mobile-facility-management .uiKicker {
font-size: 9px;
}
.mobile-facility-management .tasksLayout {
grid-template-columns: 1fr;
justify-items: center;
gap: 17px;
}
.mobile-facility-management .contextRail {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mobile-facility-management .contextRail .contextCard:first-child {
grid-column: 1/-1;
}
.mobile-facility-management .contextCard {
padding: 13px;
}
.mobile-facility-management .contextCard:first-child {
display: grid;
grid-template-columns: 30px 1fr;
column-gap: 10px;
align-items: center;
}
.mobile-facility-management .contextCard:first-child .icon {
grid-row: span 2;
margin: 0;
}
.mobile-facility-management .contextCard:first-child span {
margin-top: 3px;
}
.mobile-facility-management .contextCard strong {
font-size: 12px;
}
.mobile-facility-management .contextCard span {
font-size: 10px;
}
.mobile-facility-management .uiThree {
gap: 7px;
}
.mobile-facility-management .uiStat {
padding: 12px 9px;
}
.mobile-facility-management .uiStat strong {
font-size: 22px;
}
.mobile-facility-management .uiStat span {
font-size: 9px;
}
.mobile-facility-management .uiPanel {
padding: 14px;
}
.mobile-facility-management .uiTwo {
gap: 9px;
}
.mobile-facility-management .recordRow {
font-size: 11px;
grid-template-columns: 18px 1fr auto;
gap: 7px;
}
.mobile-facility-management .recordRow .pill {
font-size: 8px;
}
.mobile-facility-management .offlineRecord {
padding: 13px;
}
.mobile-facility-management .offlineRecord strong {
font-size: 15px;
}
.mobile-facility-management .scanBlock {
grid-template-columns: 86px 1fr;
padding: 13px;
gap: 12px;
}
.mobile-facility-management .qr {
width: 84px;
height: 84px;
}
.mobile-facility-management .scanBlock h4 {
font-size: 15px;
}
.mobile-facility-management .scanMeta {
font-size: 10px;
}
.mobile-facility-management .assetIdentity {
grid-template-columns: 1fr 116px;
padding: 14px;
}
.mobile-facility-management .smallAHU {
transform: scale(0.4);
}
.mobile-facility-management .identityFields {
font-size: 10px;
}
.mobile-facility-management .identityFields strong {
font-size: 12px;
}
.mobile-facility-management .issueLayout {
grid-template-columns: 1fr;
}
.mobile-facility-management .issueForm {
padding: 16px;
}
.mobile-facility-management .issueRouting {
display: grid;
grid-template-columns: 1fr 20px 1fr;
gap: 5px;
align-items: center;
}
.mobile-facility-management .routingLine {
height: 1px;
width: 19px;
border: 0;
border-top: 1px dashed #8fb4c9;
margin: 0;
}
.mobile-facility-management .routeCard {
padding: 12px;
}
.mobile-facility-management .routeCard strong {
font-size: 11px;
}
.mobile-facility-management .routeCard small {
font-size: 9px;
}
.mobile-facility-management .supervisorTools {
gap: 5px;
flex-wrap: wrap;
}
.mobile-facility-management .workSummary {
padding: 14px;
}
.mobile-facility-management .summaryTop strong {
font-size: 13px;
}
.mobile-facility-management .summaryTop>.pill {
font-size: 9px;
}
.mobile-facility-management .inspectionTitle {
font-size: 14px;
}
.mobile-facility-management .checkStep {
font-size: 11px;
}
.mobile-facility-management .stepValue {
font-size: 9px;
}
.mobile-facility-management .inspectionInfo>.pill {
font-size: 9px;
}
.mobile-facility-management .techRemark {
font-size: 10px;
}
.mobile-facility-management .evidenceTile {
font-size: 9px;
}
.mobile-facility-management .workflowBand .ratingItem {
border-left: 0;
}
.mobile-facility-management .device {
max-width: 100%;
}
.mobile-facility-management .heroPhone .device {
max-width: none;
}
.mobile-facility-management .footerLinks {
gap: 10px;
}
.mobile-facility-management .uiNote {
font-size: 10px;
}
.mobile-facility-management .visualNote {
font-size: 10px !important;
}
.mobile-facility-management .heroLead {
max-width: 100%;
}
.mobile-facility-management .final .ctaBtns {
max-width: none;
}
}
@media (max-width: 359px) {
.heroBtn {
font-size: 11px;
padding: 12px 10px;
} .mobile-facility-management .heroPhone {
left: 17%;
transform: scale(0.68) rotate(-3deg);
}
.mobile-facility-management .mobileHeroArt {
height: 420px;
}
.mobile-facility-management .heroMini.assigned {
width: 135px;
}
.mobile-facility-management .heroMini.local {
width: 145px;
bottom: 72px;
}
.mobile-facility-management .heroAHU {
right: -32%;
transform: scale(0.55);
}
.mobile-facility-management .uiCanvas {
padding: 12px;
}
.mobile-facility-management .uiHead h3 {
font-size: 17px;
}
.mobile-facility-management .uiHead>.pill {
max-width: 87px;
font-size: 8px;
}
.mobile-facility-management .assetIdentity {
grid-template-columns: 1fr 100px;
}
.mobile-facility-management .smallAHU {
transform: scale(0.36);
}
.mobile-facility-management .device {
width: 250px;
}
.mobile-facility-management .uiThree {
grid-template-columns: 1fr 1fr;
}
.mobile-facility-management .uiThree> :last-child {
grid-column: 1/-1;
}
} .heroAHU {
right: -2%;
}
@media (min-width: 1700px) {
.heroAHU {
right: 0;
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
.heroAHU {
right: -4%;
}
}
@media (max-width: 1024px) {
.heroAHU {
right: 0;
}
}
@media (max-width: 640px) {
.heroAHU {
right: -2%;
}
}
.mobile-facility-management .device .taskCard {
padding: 9px;
margin-top: 8px;
}
.mobile-facility-management .device .taskTop {
margin-bottom: 4px;
}
.mobile-facility-management .device .taskMeta {
margin-top: 6px;
line-height: 1.4;
}
.mobile-facility-management .device .screenBody {
padding: 10px 12px;
}
.mobile-facility-management .heroPhone .appPageTitle {
font-size: 18px;
line-height: 1.3;
white-space: nowrap;
}
.mobile-facility-management .heroPhone .screenBody {
padding: 12px 14px;
}
.mobile-facility-management .heroPhone .historyItem {
margin-top: 8px;
padding: 11px 0;
}
.mobile-facility-management .heroPhone .appBanner {
margin-bottom: 8px;
}
.mobile-facility-management .heroLabel {
bottom: -8px;
left: 26%;
right: 13%;
text-align: center;
}
@media (max-width: 1024px) {
.heroLabel {
bottom: 4px;
}
}
@media (max-width: 640px) {
.mobileHeroArt {
height: 480px;
}
.mobile-facility-management .heroPhone {
top: 70px;
}
.mobile-facility-management .heroMini.assigned {
top: 0;
width: 140px;
}
.mobile-facility-management .heroMini.local {
bottom: 72px;
}
.mobile-facility-management .heroLabel {
bottom: 0;
left: 7%;
right: 0;
}
.mobile-facility-management .heroAHU {
top: 229px;
right: -2%;
}
.mobile-facility-management .heroPipes {
top: 195px;
}
}
@media (max-width: 359px) {
.mobileHeroArt {
height: 458px;
}
.mobile-facility-management .heroPhone {
top: 76px;
}
.mobile-facility-management .heroMini.assigned {
width: 133px;
}
.mobile-facility-management .heroMini.local {
bottom: 68px;
}
.mobile-facility-management .heroLabel {
bottom: 0;
}
.mobile-facility-management .heroAHU {
top: 220px;
right: -2%;
}
}
.new-theme-design.mobile-facility-management .icon {
background: transparent !important;
}
.new-theme-design.mobile-facility-management .icon {
margin-bottom: 0 !important;
}  .technician-scheduling-workforce .wfEy {
display: flex;
gap: 12px;
align-items: flex-start;
color: #ffad5b;
text-transform: uppercase;
letter-spacing: 0.105em;
font-size: 13px;
line-height: 1.65;
font-weight: 800;
margin: 0 0 23px;
}
.technician-scheduling-workforce .wfEy:before {
content: "";
height: 2px;
width: 26px;
flex: 0 0 26px;
background: #ffad5b;
margin-top: 8px;
}
.technician-scheduling-workforce .wfHero {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(108deg,
#061c38 0%,
#0c3055 43%,
#4d7596 78%,
#aac5d8 100%);
padding: 0;
min-height: 730px;
display: flex;
align-items: center;
color: #fff;
}
.technician-scheduling-workforce .wfHeroInner {
position: relative;
width: min(var(--newmax), 88.5%);
margin: auto;
z-index: 2;
padding: 57px 0;
display: grid;
grid-template-columns: 44% minmax(0, 56%);
align-items: center;
}
.technician-scheduling-workforce.wfHeroCopy {
position: relative;
z-index: 2;
max-width: 670px;
padding-right: 33px;
}
.technician-scheduling-workforce .heroCrumb {
font-size: 11px;
display: flex;
align-items: center;
gap: 8px;
color: #c1d8e9;
margin: 0 0 27px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .heroCrumb a:hover {
text-decoration: underline;
}
.technician-scheduling-workforce .wfEy {
display: flex;
gap: 12px;
align-items: flex-start;
color: #ffad5b;
text-transform: uppercase;
letter-spacing: 0.105em;
font-size: 13px;
line-height: 1.65;
font-weight: 800;
margin: 0 0 23px;
}
.technician-scheduling-workforce .wfEy:before {
content: "";
height: 2px;
width: 26px;
flex: 0 0 26px;
background: #ffad5b;
margin-top: 8px;
}
.technician-scheduling-workforce .wfHero h1 { line-height: 1.08;
letter-spacing: -0.045em;
color: #fff;
font-weight: 700;
max-width: 640px;
}
.technician-scheduling-workforce .wfHero h1 .accent {
color: #0076dd;
display: inline-block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfLead {
font-size: clamp(15px, 1.1vw, 18px);
color: #d2e4f1;
line-height: 1.8;
margin: 23px 0 0;
max-width: 570px;
}
.technician-scheduling-workforce .wfLead strong {
color: #fff;
}
.technician-scheduling-workforce .heroActions {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-top: 27px;
}
.technician-scheduling-workforce .heroBtn {
min-height: 53px;
padding: 14px 20px;
border: 1px solid transparent;
border-radius: 8px;
font-size: 14px;
font-weight: 750;
line-height: 1.35;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.technician-scheduling-workforce .heroBtn.primary {
background: #ffad5b;
color: #09233e;
}
.technician-scheduling-workforce .heroBtn.secondary {
border-color: #7790ac;
background: rgba(255, 255, 255, 0.035);
color: white;
}
.technician-scheduling-workforce .heroBtn.primary:hover {
background: #ffc080;
}
.technician-scheduling-workforce .heroBtn.secondary:hover {
background: rgba(255, 255, 255, 0.09);
}
.technician-scheduling-workforce .heroBtn:focus-visible {
outline: 3px solid #ffbe79;
outline-offset: 4px;
}
.technician-scheduling-workforce .heroBtn .icon {
width: 18px;
height: 18px;
background: transparent;
margin: 0;
}
.technician-scheduling-workforce .heroMicro {
font-size: 11px;
line-height: 1.65;
color: #c1d8e9;
margin: 13px 0 0;
}
.technician-scheduling-workforce .heroProof {
margin-top: 29px;
padding-top: 17px;
border-top: 1px solid #486079;
max-width: 570px;
}
.technician-scheduling-workforce .heroProofLabel {
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #a5cfe9;
font-weight: 750;
margin: 0 0 13px;
}
.technician-scheduling-workforce .heroProofGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.technician-scheduling-workforce .heroProofGrid>div+div {
padding-left: 13px;
border-left: 1px solid #486079;
}
.technician-scheduling-workforce .heroProofGrid strong {
display: block;
font-size: 13px;
line-height: 1.45;
}
.technician-scheduling-workforce .heroProofGrid span {
display: block;
font-size: 10px;
line-height: 1.6;
color: #bbd7eb;
margin-top: 4px;
}
.technician-scheduling-workforce .wfArchitecture {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.technician-scheduling-workforce .wfBuilding {
position: absolute;
right: -2%;
top: -50px;
width: 33%;
height: 115%;
background:
repeating-linear-gradient(90deg,
transparent 0 69px,
rgba(225, 241, 254, 0.15) 69px 72px),
repeating-linear-gradient(0deg,
transparent 0 56px,
rgba(225, 241, 254, 0.14) 56px 59px),
linear-gradient(160deg, rgba(116, 159, 188, 0.75), rgba(25, 69, 105, 0.6));
transform: skewY(-12deg);
border-left: 2px solid rgba(175, 212, 237, 0.3);
}
.technician-scheduling-workforce .wfBuilding.back {
right: 25%;
top: auto;
bottom: -50px;
width: 29%;
height: 55%;
opacity: 0.38;
transform: skewY(10deg);
}  .technician-scheduling-workforce .wfHeroArt {
position: relative;
z-index: 1;
height: 580px;
min-width: 0;
width: 100%;
max-width: 850px;
justify-self: end;
}
.technician-scheduling-workforce .wfHeroMonitor {
position: absolute;
top: 72px;
left: 1%;
right: -1%;
padding: 7px;
background: #152d46;
border: 1px solid #678ba6;
border-radius: 22px;
z-index: 2;
}
.technician-scheduling-workforce .wfHeroMonitor:after {
content: "";
position: absolute;
left: 41%;
right: 41%;
top: 100%;
height: 46px;
background: linear-gradient(90deg, #496983, #b4c7d5, #3c5d78);
clip-path: polygon(15% 0, 85% 0, 95% 83%, 100% 100%, 0 100%, 5% 83%);
z-index: -1;
}
.technician-scheduling-workforce .wfHeroMonitor .wfBoard {
border-radius: 15px;
border: 0;
}
.technician-scheduling-workforce .wfBoard {
background: #fff;
border: 1px solid #d6e6f0;
border-radius: 19px;
overflow: hidden;
color: #143249;
font-size: 12px;
}
.technician-scheduling-workforce .wfBoardTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 18px 20px;
border-bottom: 1px solid #e1ebf2;
}
.technician-scheduling-workforce .wfBoardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 750;
color: #244b67;
}
.technician-scheduling-workforce .wfBoardBrand .icon {
color: #008bd3;
width: 20px;
height: 20px;
}
.technician-scheduling-workforce .wfWindowDots {
display: flex;
gap: 5px;
}
.technician-scheduling-workforce .wfWindowDots i {
height: 5px;
width: 5px;
border-radius: 50%;
background: #bdcdda;
}
.technician-scheduling-workforce .wfBoardBody {
padding: 20px;
}
.technician-scheduling-workforce .wfBoardHeading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 17px;
}
.technician-scheduling-workforce .wfBoardHeading h3 {
font-size: 23px;
line-height: 1.2;
color: #153951;
margin: 0;
}
.technician-scheduling-workforce .wfSmall {
display: block;
font-size: 11px;
line-height: 1.65;
color: #627b8f;
margin-top: 4px;
}
.technician-scheduling-workforce .wfKicker {
font-size: 10px;
line-height: 1.5;
letter-spacing: 0.1em;
color: #5c7c91;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 6px;
}
.technician-scheduling-workforce .wfPill {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 30px;
padding: 5px 9px;
line-height: 1.4;
font-size: 10px;
font-weight: 750;
background: #eaf6fe;
color: #146493;
white-space: nowrap;
}
.technician-scheduling-workforce .wfPill.green {
background: #e8f7f0;
color: #177658;
}
.technician-scheduling-workforce .wfPill.amber {
background: #fff3df;
color: #8c6216;
}
.technician-scheduling-workforce .wfPill.gray {
background: #eef2f6;
color: #536b7e;
}
.technician-scheduling-workforce .wfPill.purple {
background: #f1edff;
color: #695aa4;
}
.technician-scheduling-workforce .wfPill .icon {
width: 14px;
height: 14px;
}
.technician-scheduling-workforce .wfHeroNumbers {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
font-size: 11px;
color: #567185;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfHeroNumbers strong {
font-size: 16px;
color: #183e56;
margin-right: 4px;
}
.technician-scheduling-workforce .wfHeroNumbers span+span {
border-left: 1px solid #d8e7f0;
padding-left: 14px;
}
.technician-scheduling-workforce .wfRoster {
border: 1px solid #dde9f1;
border-radius: 12px;
overflow: hidden;
}
.technician-scheduling-workforce .wfRosterAxis,
.technician-scheduling-workforce .wfRosterRow {
display: grid;
grid-template-columns: 126px minmax(0, 1fr);
}
.technician-scheduling-workforce .wfRosterAxis {
background: #f4f9fd;
font-size: 9px;
font-weight: 750;
color: #617d91;
}
.technician-scheduling-workforce .wfRosterAxis>span {
padding: 10px 12px;
}
.technician-scheduling-workforce .wfAxisTimes {
display: flex;
justify-content: space-between;
padding: 10px 10px;
}
.technician-scheduling-workforce .wfRosterRow {
border-top: 1px solid #e3edf3;
min-height: 59px;
}
.technician-scheduling-workforce .wfPerson {
padding: 11px 9px;
display: flex;
align-items: center;
gap: 8px;
border-right: 1px solid #e2edf4;
}
.technician-scheduling-workforce .wfAvatar {
height: 28px;
width: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
font-size: 9px;
font-weight: 800;
background: #e5f4ff;
color: #197eaf;
}
.technician-scheduling-workforce .wfAvatar.purple {
background: #eeeafd;
color: #6f5ca5;
}
.technician-scheduling-workforce .wfAvatar.green {
background: #e4f5ed;
color: #298264;
}
.technician-scheduling-workforce .wfAvatar.gray {
background: #edf1f5;
color: #678195;
}
.technician-scheduling-workforce .wfPerson b {
display: block;
font-size: 10px;
font-weight: 750;
line-height: 1.4;
}
.technician-scheduling-workforce .wfPerson small {
display: block;
font-size: 8px;
color: #70879b;
line-height: 1.5;
}
.technician-scheduling-workforce .wfSlots {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 4px;
align-items: center;
padding: 7px 6px;
background: repeating-linear-gradient(90deg,
transparent 0 calc(25% - 1px),
#edf3f7 calc(25% - 1px) 25%);
}
.technician-scheduling-workforce .wfBlock {
grid-column: var(--col);
border-left: 3px solid #328fce;
background: #e7f4fd;
border-radius: 5px;
padding: 8px 7px;
color: #24658b;
font-size: 9px;
font-weight: 650;
line-height: 1.45;
min-width: 0;
}
.technician-scheduling-workforce .wfBlock.green {
border-color: #44a882;
background: #e6f5ec;
color: #297d5c;
}
.technician-scheduling-workforce .wfBlock.purple {
border-color: #9887ca;
background: #f0ecfa;
color: #6b5898;
}
.technician-scheduling-workforce .wfBlock.leave {
border-color: #d3a05f;
background: repeating-linear-gradient(-45deg,
#fff5e9 0 7px,
#fffaf1 7px 14px);
color: #88652e;
text-align: center;
}
.technician-scheduling-workforce .wfBoardFoot {
display: flex;
gap: 8px;
align-items: center;
padding: 12px 0 0;
color: #55738a;
font-size: 10px;
line-height: 1.6;
}
.technician-scheduling-workforce .wfBoardFoot .icon {
color: #b17c24;
width: 15px;
height: 15px;
}
.technician-scheduling-workforce .wfHeroMini {
position: absolute;
z-index: 4;
background: #f9fcff;
border: 1px solid #d1e6f4;
border-radius: 14px;
padding: 17px;
color: #15374e;
width: 224px;
}
.technician-scheduling-workforce .wfHeroMini.shift {
top: 12px;
right: 12px;
width: 208px;
}
.technician-scheduling-workforce .wfHeroMini.cover {
bottom: 7px;
left: 7%;
width: 251px;
}
.technician-scheduling-workforce .wfHeroMiniTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 750;
color: #3c6684;
margin-bottom: 9px;
}
.technician-scheduling-workforce .wfHeroMiniTop .icon {
color: #0c8dcc;
width: 19px;
height: 19px;
}
.technician-scheduling-workforce .wfHeroMini strong {
font-size: 15px;
line-height: 1.4;
display: block;
}
.technician-scheduling-workforce .wfHeroMini p {
font-size: 10px;
line-height: 1.7;
margin: 5px 0 9px;
color: #688094;
}
.technician-scheduling-workforce .wfHeroLabel {
position: absolute;
right: 2%;
bottom: 19px;
font-size: 9px;
line-height: 1.6;
color: #d6e8f4;
max-width: 190px;
text-align: right;
}
.technician-scheduling-workforce .wfCanvas {
background: #edf7fc;
border: 1px solid #d7e9f4;
border-radius: 24px;
padding: 23px;
color: #18364b;
}
.technician-scheduling-workforce .wfCanvas.warm {
background: #f4f8fc;
}
.technician-scheduling-workforce .wfUiHead {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.technician-scheduling-workforce .wfUiHead h3 {
font-size: 24px;
color: #123b53;
line-height: 1.2;
}
.technician-scheduling-workforce .wfCard {
background: #fff;
border: 1px solid #d9e8f1;
border-radius: 15px;
padding: 17px;
}
.technician-scheduling-workforce .wfCardTitle {
font-size: 13px;
font-weight: 750;
color: #173d57;
line-height: 1.45;
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 12px;
}
.technician-scheduling-workforce .wfCardTitle .icon {
color: #178cbf;
width: 18px;
height: 18px;
}
.technician-scheduling-workforce .wfSplit {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.technician-scheduling-workforce .wfWide {
grid-column: 1/-1;
}
.technician-scheduling-workforce .wfField {
font-size: 10px;
line-height: 1.5;
color: #758a9c;
margin: 0 0 12px;
}
.technician-scheduling-workforce .wfField b {
display: block;
font-size: 12px;
font-weight: 650;
line-height: 1.5;
color: #284b64;
margin-top: 4px;
}
.technician-scheduling-workforce .wfField:last-child {
margin-bottom: 0;
}
.technician-scheduling-workforce .wfFieldBox {
background: #f8fbfd;
border: 1px solid #e0ebf3;
border-radius: 8px;
padding: 9px 11px;
margin-top: 5px;
}
.technician-scheduling-workforce .wfNote {
margin: 14px 0 0;
padding: 11px 13px;
background: #fff;
border: 1px solid #dbe9f1;
border-radius: 10px;
font-size: 11px;
line-height: 1.6;
color: #55758c;
display: flex;
gap: 8px;
align-items: flex-start;
}
.technician-scheduling-workforce .wfNote .icon {
width: 16px;
height: 16px;
margin-top: 1px;
color: #2389b9;
}
.technician-scheduling-workforce .wfNote.amber {
background: #fff7e9;
border-color: #eddcba;
color: #84672f;
}
.technician-scheduling-workforce .wfNote.amber .icon {
color: #a27832;
}
.technician-scheduling-workforce .wfChoice {
display: flex;
gap: 10px;
align-items: center;
border: 1px solid #deebf2;
padding: 10px;
border-radius: 10px;
margin-top: 8px;
}
.technician-scheduling-workforce .wfChoice.selected {
background: #edf8ff;
border-color: #9acdea;
}
.technician-scheduling-workforce .wfChoice .wfAvatar {
width: 32px;
height: 32px;
font-size: 10px;
}
.technician-scheduling-workforce .wfChoice b {
font-size: 11px;
line-height: 1.4;
display: block;
}
.technician-scheduling-workforce .wfChoice small {
display: block;
font-size: 9px;
line-height: 1.5;
color: #71899b;
}
.technician-scheduling-workforce .wfChoice .wfPill {
margin-left: auto;
font-size: 8px;
padding: 4px 6px;
}
.technician-scheduling-workforce .wfUiAction {
display: inline-flex;
gap: 8px;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 750;
background: #0c86bf;
color: #fff;
border-radius: 9px;
padding: 10px 12px;
margin-top: 14px;
}
.technician-scheduling-workforce .wfUiAction .icon {
width: 15px;
height: 15px;
}
.technician-scheduling-workforce .wfUiAction.alt {
background: #e9f5fc;
color: #1c7099;
}
.technician-scheduling-workforce .wfUiAction.neutral {
background: #fff;
border: 1px solid #d7e7f0;
color: #426a85;
}
.technician-scheduling-workforce .wfTimeline {
margin: 12px 0 0;
display: grid;
gap: 10px;
}
.technician-scheduling-workforce .wfTimelineRow {
display: grid;
grid-template-columns: 52px 1fr;
gap: 8px;
font-size: 10px;
line-height: 1.5;
}
.technician-scheduling-workforce .wfTimelineRow span {
color: #7790a3;
}
.technician-scheduling-workforce .wfTimelineRow b {
font-weight: 650;
color: #315976;
}
.technician-scheduling-workforce .wfShiftCard {
border-top: 3px solid #379dcc;
}
.technician-scheduling-workforce .wfShiftCard.evening {
border-top-color: #9587c8;
}
.technician-scheduling-workforce .wfShiftIcon {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.technician-scheduling-workforce .wfShiftIcon .icon {
width: 24px;
height: 24px;
color: #3694bc;
}
.technician-scheduling-workforce .wfShiftCard.evening .wfShiftIcon .icon {
color: #8874c0;
}
.technician-scheduling-workforce .wfShiftCard strong {
font-size: 18px;
line-height: 1.3;
display: block;
color: #1c445f;
}
.technician-scheduling-workforce .wfShiftCard small {
font-size: 10px;
color: #688397;
display: block;
margin-top: 7px;
}
.technician-scheduling-workforce .wfWeek {
margin-top: 14px;
}
.technician-scheduling-workforce .wfTableScroll {
overflow-x: auto;
border: 1px solid #dce9f1;
border-radius: 11px;
background: #fff;
}
.technician-scheduling-workforce .wfTable {
border-collapse: collapse;
width: 100%;
font-size: 11px;
line-height: 1.6;
text-align: left;
}
.technician-scheduling-workforce .wfTable th {
font-weight: 750;
background: #f6fafd;
color: #597991;
}
.technician-scheduling-workforce .wfTable td,
.technician-scheduling-workforce .wfTable th {
padding: 10px 9px;
border-bottom: 1px solid #e6eff5;
}
.technician-scheduling-workforce .wfTable tr:last-child td {
border-bottom: 0;
}
.technician-scheduling-workforce .wfTable td {
color: #355973;
}
.technician-scheduling-workforce .wfTable .wfPill {
font-size: 9px;
padding: 4px 7px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable {
font-size: 10px;
min-width: 286px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable td,
.technician-scheduling-workforce .wfRosterWeek .wfTable th {
text-align: center;
padding: 10px 4px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable td:first-child,
.technician-scheduling-workforce .wfRosterWeek .wfTable th:first-child {
text-align: left;
padding-left: 11px;
width: 86px;
}
.technician-scheduling-workforce .wfDay {
padding: 4px 6px;
border-radius: 5px;
background: #e5f4fc;
color: #287ba5;
font-weight: 750;
display: inline-block;
font-size: 9px;
}
.technician-scheduling-workforce .wfDay.evening {
background: #f0ecfa;
color: #826db3;
}
.technician-scheduling-workforce .wfLegend {
font-size: 9px;
color: #6a8395;
display: flex;
gap: 13px;
margin-top: 11px;
line-height: 1.6;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfLegend>span {
display: flex;
gap: 5px;
align-items: center;
}
.technician-scheduling-workforce .wfLegend i {
width: 8px;
height: 8px;
background: #55a6d4;
border-radius: 2px;
display: inline-block;
}
.technician-scheduling-workforce .wfLegend i.purple {
background: #9886c4;
}
.technician-scheduling-workforce .wfLegend i.green {
background: #52a981;
}
.technician-scheduling-workforce .wfStatGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.technician-scheduling-workforce .wfStat {
padding: 14px 12px;
border: 1px solid #dbe9f2;
background: #fff;
border-radius: 12px;
}
.technician-scheduling-workforce .wfStat strong {
font-size: 28px;
font-weight: 800;
line-height: 1.1;
display: block;
color: #174764;
}
.technician-scheduling-workforce .wfStat span {
display: block;
font-size: 9px;
line-height: 1.5;
color: #6c879a;
margin-top: 7px;
}
.technician-scheduling-workforce .wfCapacityList {
background: #fff;
border: 1px solid #dbe8f0;
border-radius: 15px;
padding: 4px 15px;
}
.technician-scheduling-workforce .wfCapacity {
padding: 14px 0;
border-bottom: 1px solid #e5eef4;
}
.technician-scheduling-workforce .wfCapacity:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfCapacityTop {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.technician-scheduling-workforce .wfCapacityTop b {
display: block;
font-size: 12px;
line-height: 1.4;
}
.technician-scheduling-workforce .wfCapacityTop small {
display: block;
font-size: 10px;
color: #728a9a;
line-height: 1.5;
}
.technician-scheduling-workforce .wfCapacityTop .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfBar {
height: 7px;
border-radius: 8px;
background: #e8f1f7;
overflow: hidden;
}
.technician-scheduling-workforce .wfBar i {
display: block;
width: var(--fill);
height: 100%;
background: #469dcc;
border-radius: 8px;
}
.technician-scheduling-workforce .wfBar.purple i {
background: #9a8ac9;
}
.technician-scheduling-workforce .wfBar.green i {
background: #55a881;
}
.technician-scheduling-workforce .wfCapacityDetail {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #6c8598;
margin-top: 7px;
gap: 9px;
}
.technician-scheduling-workforce .wfCapacity.absent {
display: flex;
align-items: center;
gap: 9px;
}
.technician-scheduling-workforce .wfCapacity.absent b {
font-size: 12px;
display: block;
}
.technician-scheduling-workforce .wfCapacity.absent small {
font-size: 10px;
color: #708798;
display: block;
}
.technician-scheduling-workforce .wfCapacity.absent .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfLeaveCard+.wfLeaveCard {
margin-top: 12px;
}
.technician-scheduling-workforce .wfLeaveHead {
display: flex;
gap: 9px;
align-items: center;
margin-bottom: 14px;
}
.technician-scheduling-workforce .wfLeaveHead .wfPill {
margin-left: auto;
}
.technician-scheduling-workforce .wfLeaveHead b {
font-size: 13px;
display: block;
line-height: 1.4;
}
.technician-scheduling-workforce .wfLeaveHead small {
display: block;
font-size: 10px;
color: #718598;
line-height: 1.5;
}
.technician-scheduling-workforce .wfLeaveDates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: #f5fafd;
border-radius: 9px;
padding: 10px 12px;
font-size: 10px;
color: #6f8599;
}
.technician-scheduling-workforce .wfLeaveDates strong {
font-size: 12px;
color: #2c506c;
display: block;
font-weight: 650;
margin-top: 3px;
}
.technician-scheduling-workforce .wfLeaveStatus {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
margin-top: 13px;
}
.technician-scheduling-workforce .wfLeaveStatus span {
font-size: 9px;
color: #658097;
line-height: 1.6;
}
.technician-scheduling-workforce .wfLeaveStatus .wfUiAction {
font-size: 9px;
padding: 7px 9px;
margin: 0;
}
.technician-scheduling-workforce .wfLeavePath {
display: flex;
align-items: center;
gap: 7px;
justify-content: center;
font-size: 10px;
color: #527c93;
margin-top: 16px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfLeavePath .icon {
width: 13px;
height: 13px;
}
.technician-scheduling-workforce .wfLeavePath strong {
color: #287c5f;
}
.technician-scheduling-workforce .wfTimePair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.technician-scheduling-workforce .wfTimeBox {
background: #f0f8fd;
border: 1px solid #d8e9f4;
border-radius: 11px;
padding: 14px;
}
.technician-scheduling-workforce .wfTimeBox .icon {
color: #328fba;
width: 18px;
height: 18px;
margin-bottom: 6px;
}
.technician-scheduling-workforce .wfTimeBox span {
font-size: 10px;
color: #628195;
display: block;
}
.technician-scheduling-workforce .wfTimeBox strong {
font-size: 26px;
line-height: 1.2;
color: #235774;
display: block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfTimeTotal {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 13px;
margin-top: 13px;
border-top: 1px solid #e4edf3;
font-size: 11px;
color: #688599;
gap: 8px;
}
.technician-scheduling-workforce .wfTimeTotal strong {
font-size: 17px;
color: #26698a;
}
.technician-scheduling-workforce .wfSettings {
margin-top: 13px;
}
.technician-scheduling-workforce .wfSetting {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 9px 0;
border-bottom: 1px solid #e6eef4;
font-size: 10px;
color: #688295;
}
.technician-scheduling-workforce .wfSetting:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfSetting b {
font-weight: 650;
color: #315975;
text-align: right;
}
.technician-scheduling-workforce .wfSummaryItem {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid #e4edf3;
}
.technician-scheduling-workforce .wfSummaryItem:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfSummaryIcon {
width: 31px;
height: 31px;
border-radius: 9px;
background: #e6f4ef;
color: #31825d;
display: grid;
place-items: center;
flex-shrink: 0;
}
.technician-scheduling-workforce .wfSummaryIcon.blue {
background: #e7f3fb;
color: #398bb9;
}
.technician-scheduling-workforce .wfSummaryIcon.amber {
background: #fff3df;
color: #ae7c32;
}
.technician-scheduling-workforce .wfSummaryIcon .icon {
width: 17px;
height: 17px;
}
.technician-scheduling-workforce .wfSummaryItem b {
font-size: 12px;
line-height: 1.4;
display: block;
}
.technician-scheduling-workforce .wfSummaryItem small {
font-size: 10px;
color: #70889a;
line-height: 1.6;
display: block;
margin-top: 3px;
}
.technician-scheduling-workforce .wfSummaryItem .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfVedaPanel {
padding: 23px;
border-radius: 22px;
background: #132533;
border: 1px solid #374d5e;
color: #d4e6f3;
}
.technician-scheduling-workforce .wfVedaTitle {
display: flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 750;
margin-bottom: 17px;
color: #f1f7fc;
}
.technician-scheduling-workforce .wfVedaTitle .icon {
color: #ffd056;
}
.technician-scheduling-workforce .wfVedaPrompt {
padding: 15px;
background: #203b50;
border: 1px solid #36576f;
border-radius: 14px 14px 3px 14px;
font-size: 13px;
line-height: 1.7;
margin: 15px 0;
}
.technician-scheduling-workforce .wfVedaAnswer {
padding: 17px;
background: #192e3f;
border: 1px solid #345063;
border-radius: 13px;
font-size: 12px;
line-height: 1.7;
}
.technician-scheduling-workforce .wfVedaAnswer strong {
display: block;
color: #f1f7fd;
font-size: 14px;
margin-bottom: 12px;
}
.technician-scheduling-workforce .wfVedaAnswer p {
font-size: 12px !important;
color: #bfd5e5 !important;
margin: 12px 0 0 !important;
}
.technician-scheduling-workforce .wfVedaTask {
border-top: 1px solid #324a5b;
padding: 10px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 13px;
font-size: 11px;
}
.technician-scheduling-workforce .wfVedaTask b {
font-size: 12px;
display: block;
color: #e8f3fb;
}
.technician-scheduling-workforce .wfVedaTask small {
font-size: 10px;
color: #a0bcd0;
display: block;
margin-top: 3px;
}
.technician-scheduling-workforce .wfVedaHint {
font-size: 10px;
color: #a6c0d3;
line-height: 1.7;
margin-top: 13px;
}
.technician-scheduling-workforce .wfBroader {
margin-top: 25px;
padding: 20px 22px;
border: 1px solid #d8e8f1;
border-left: 4px solid #29a1d6;
border-radius: 13px;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 22px;
}
.technician-scheduling-workforce .wfBroader strong {
font-size: 15px;
}
.technician-scheduling-workforce .wfBroader p {
font-size: 13px;
color: #607e91;
line-height: 1.7;
margin: 5px 0 0;
}
.technician-scheduling-workforce .wfBroader .detailLink {
margin: 0;
flex-shrink: 0;
font-size: 13px;
}
.technician-scheduling-workforce .wfCompare {
margin-top: 25px;
border: 1px solid #dbe9f2;
border-radius: 16px;
padding: 19px 23px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
background: #fff;
}
.technician-scheduling-workforce .wfCompare>div+div {
border-left: 1px solid #dbe9f2;
padding-left: 28px;
}
.technician-scheduling-workforce .wfCompare span {
font-size: 10px;
color: #5f8aa2;
letter-spacing: 0.07em;
text-transform: uppercase;
font-weight: 750;
}
.technician-scheduling-workforce .wfCompare strong {
display: block;
font-size: 15px;
color: #183a50;
margin-top: 4px;
}
.technician-scheduling-workforce .wfCompare p {
margin: 5px 0 0;
font-size: 12px;
color: #6a8293;
line-height: 1.7;
}
.technician-scheduling-workforce .wfRoleTag {
display: inline-block;
font-size: 10px;
font-weight: 750;
border-radius: 6px;
padding: 4px 8px;
background: #e9f7fd;
color: #257ca3;
}
.technician-scheduling-workforce .wfReview p {
font-size: 14px;
line-height: 1.75;
}
.technician-scheduling-workforce .wfReview h3 {
margin-top: 14px;
font-size: 22px;
}
.technician-scheduling-workforce .wfReview strong {
font-size: 13px;
color: #167faa;
}
.technician-scheduling-workforce .wfReview span {
font-size: 11px;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem {
border-left: 1px solid #353535;
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem strong {
font-size: 15px;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem span {
display: block;
font-size: 11px;
color: #c9d6e0;
margin-top: 5px;
}
.technician-scheduling-workforce .workflow-label {
font-size: 12px;
color: #b8cedd;
display: block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfIntegrationNote {
font-size: 12px;
line-height: 1.75;
color: #60788b;
margin-top: 20px;
}
.technician-scheduling-workforce .wfIntegrationNote a {
color: #15789f;
text-decoration: underline;
text-underline-offset: 3px;
}
.technician-scheduling-workforce .pageFoot a:hover {
text-decoration: underline;
}
.technician-scheduling-workforce .footerLinks {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .pageFoot p {
font-size: 11px;
margin: 11px 0 0;
}
.technician-scheduling-workforce .wfRelated {
font-size: 12px;
line-height: 1.8;
margin-top: 25px;
color: #70869a;
text-align: center;
}
.technician-scheduling-workforce .wfRelated a {
color: #147ea6;
text-decoration: underline;
text-underline-offset: 3px;
}
.technician-scheduling-workforce section[id] {
scroll-margin-top: 18px;
}
.technician-scheduling-workforce .visualNote {
font-size: 10px !important;
line-height: 1.6 !important;
margin-top: 10px !important;
}
.technician-scheduling-workforce .faq details[open] summary {
margin-bottom: 8px;
}
.technician-scheduling-workforce .fi {
line-height: 1.65;
}
.technician-scheduling-workforce .wfHero *,
.technician-scheduling-workforce .wfCanvas * {
animation: none !important;
}
.technician-scheduling-workforce .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.technician-scheduling-workforce .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.technician-scheduling-workforce .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.technician-scheduling-workforce .btn:hover {
transform: translateY(-2px);
}
.technician-scheduling-workforce .btn.black {
background: #0b0b0b;
color: #fff;
}
.technician-scheduling-workforce .btn.yellow {
background: var(--yellow);
color: #000;
}
.technician-scheduling-workforce .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.technician-scheduling-workforce .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.technician-scheduling-workforce .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.technician-scheduling-workforce .soft {
background: var(--sky2);
}
.technician-scheduling-workforce .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.technician-scheduling-workforce .dark h2,
.technician-scheduling-workforce .dark h3 {
color: #fff;
}
.technician-scheduling-workforce .dark p {
color: #d6d6d6;
}
.technician-scheduling-workforce .dark .ey {
background: var(--yellow);
} .technician-scheduling-workforce .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.technician-scheduling-workforce .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.technician-scheduling-workforce .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.technician-scheduling-workforce .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.technician-scheduling-workforce .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.technician-scheduling-workforce .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.technician-scheduling-workforce .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.technician-scheduling-workforce .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.technician-scheduling-workforce .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.technician-scheduling-workforce .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.technician-scheduling-workforce .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.technician-scheduling-workforce .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.technician-scheduling-workforce .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.technician-scheduling-workforce .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.technician-scheduling-workforce .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.technician-scheduling-workforce .outcome:nth-child(2):before {
background: var(--yellow);
}
.technician-scheduling-workforce .outcome:nth-child(3):before {
background: var(--green);
}
.technician-scheduling-workforce .outcome:nth-child(4):before {
background: var(--purple);
}
.technician-scheduling-workforce .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.technician-scheduling-workforce .outcome span {
font-size: 13px;
color: var(--muted);
}
.technician-scheduling-workforce .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.technician-scheduling-workforce .feature.reverse .visual {
order: -1;
}
.technician-scheduling-workforce .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.technician-scheduling-workforce .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.technician-scheduling-workforce .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.technician-scheduling-workforce .visual {
position: relative;
}
.technician-scheduling-workforce .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.technician-scheduling-workforce .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.technician-scheduling-workforce .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.technician-scheduling-workforce .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.technician-scheduling-workforce .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.technician-scheduling-workforce .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.technician-scheduling-workforce .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.technician-scheduling-workforce .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.technician-scheduling-workforce .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.technician-scheduling-workforce .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.technician-scheduling-workforce .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.technician-scheduling-workforce .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.technician-scheduling-workforce .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.technician-scheduling-workforce .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.technician-scheduling-workforce .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.technician-scheduling-workforce .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.technician-scheduling-workforce .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.technician-scheduling-workforce .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.technician-scheduling-workforce .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.technician-scheduling-workforce .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.technician-scheduling-workforce .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.technician-scheduling-workforce .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.technician-scheduling-workforce .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
.technician-scheduling-workforce .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.technician-scheduling-workforce .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.technician-scheduling-workforce .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.technician-scheduling-workforce .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.technician-scheduling-workforce .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.technician-scheduling-workforce .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.technician-scheduling-workforce .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.technician-scheduling-workforce .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.technician-scheduling-workforce .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.technician-scheduling-workforce .review strong {
font-size: 12px;
}
.technician-scheduling-workforce .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.technician-scheduling-workforce .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.technician-scheduling-workforce .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.technician-scheduling-workforce .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.technician-scheduling-workforce .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.technician-scheduling-workforce .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.technician-scheduling-workforce .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.technician-scheduling-workforce .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.technician-scheduling-workforce .faq {
max-width: 900px;
}
.technician-scheduling-workforce .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.technician-scheduling-workforce .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.technician-scheduling-workforce .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
}
.technician-scheduling-workforce .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.technician-scheduling-workforce .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.technician-scheduling-workforce .cta h3 {
font-size: 19px;
}
.technician-scheduling-workforce .cta.darkCta h3 {
color: #fff;
}
.technician-scheduling-workforce .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.technician-scheduling-workforce .cta.darkCta p {
color: #d1d1d1;
}
.technician-scheduling-workforce .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.technician-scheduling-workforce .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.technician-scheduling-workforce .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.heroGrid,
.feature,
.aiGrid,
.final {
grid-template-columns: 1fr;
}
.technician-scheduling-workforce .feature.reverse .visual {
order: 0;
}
.technician-scheduling-workforce .outcomes,
.technician-scheduling-workforce .featureGrid,
.technician-scheduling-workforce .connectedGrid,
.technician-scheduling-workforce .useCases {
grid-template-columns: repeat(2, 1fr);
}
.technician-scheduling-workforce .logos {
grid-template-columns: repeat(4, 1fr);
}
.technician-scheduling-workforce .integrations {
grid-template-columns: repeat(3, 1fr);
}
.technician-scheduling-workforce .reviews {
grid-template-columns: 1fr;
}
.technician-scheduling-workforce .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.technician-scheduling-workforce .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.technician-scheduling-workforce .hero {
padding: 54px 0;
} .technician-scheduling-workforce .fl,
.technician-scheduling-workforce .outcomes,
.technician-scheduling-workforce .featureGrid,
.technician-scheduling-workforce .connectedGrid,
.technician-scheduling-workforce .useCases,
.technician-scheduling-workforce .logos,
.technician-scheduling-workforce .integrations,
.technician-scheduling-workforce .ratingGrid {
grid-template-columns: 1fr;
}
.technician-scheduling-workforce .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
body {
overflow-x: clip;
}
img {
max-width: 100%;
height: auto;
}
.technician-scheduling-workforce .heroGrid,
.technician-scheduling-workforce .feature,
.technician-scheduling-workforce .aiGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.technician-scheduling-workforce .heroGrid>*,
.technician-scheduling-workforce .feature>*,
.technician-scheduling-workforce .aiGrid>*,
.technician-scheduling-workforce .final>* {
min-width: 0;
}
.technician-scheduling-workforce .heroGrid {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: 38px;
} .technician-scheduling-workforce .hero .lead {
font-size: 17px;
line-height: 1.7;
}
.technician-scheduling-workforce .hero .micro {
font-size: 12px;
line-height: 1.7;
}
.technician-scheduling-workforce .heroPills span {
font-size: 11px;
}
.technician-scheduling-workforce .heroVisual {
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.technician-scheduling-workforce .heroArt {
order: 0;
width: 100%;
max-width: 760px;
}
.technician-scheduling-workforce .heroArt svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.technician-scheduling-workforce .motion-toggle {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.technician-scheduling-workforce .motion-label {
order: 1;
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 5px 12px;
border: 1px solid #c6dfec;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
color: var(--navy);
background: #fff;
cursor: pointer;
margin-top: 8px;
}
.technician-scheduling-workforce .motion-label:before {
content: "";
display: block;
width: 7px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.technician-scheduling-workforce .motion-resume {
display: none;
}
.technician-scheduling-workforce .motion-toggle:checked~.motion-label .motion-pause {
display: none;
}
.technician-scheduling-workforce .motion-toggle:checked~.motion-label .motion-resume {
display: inline;
}
.technician-scheduling-workforce .motion-toggle:checked~.motion-label:before {
content: "";
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-right: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.technician-scheduling-workforce .motion-toggle:checked~.heroArt * {
animation-play-state: paused !important;
}
.technician-scheduling-workforce .motion-toggle:focus-visible~.motion-label {
outline: 3px solid var(--brand2);
outline-offset: 3px;
}
.technician-scheduling-workforce .assetNote {
order: 2;
margin: 9px 0 0;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.technician-scheduling-workforce .breadcrumbs {
font-size: 12px;
color: var(--muted);
margin: 0 0 21px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .breadcrumbs a {
color: var(--brand2);
}
.technician-scheduling-workforce .breadcrumbs a:hover {
text-decoration: underline;
}
.technician-scheduling-workforce .visual {
min-width: 0;
width: 100%;
}
.technician-scheduling-workforce .visualCard,
.technician-scheduling-workforce .visualCard.darkFrame {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.technician-scheduling-workforce .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
object-fit: contain;
}
.technician-scheduling-workforce .feature {
gap: 44px;
}
.technician-scheduling-workforce .feature p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
margin: 17px 0 0;
}
.technician-scheduling-workforce .fl {
gap: 12px 17px;
}
.technician-scheduling-workforce .fi {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
font-weight: 500;
line-height: 1.55;
align-items: flex-start;
}
.technician-scheduling-workforce .tick {
margin-top: 1px;
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 11px;
}
.technician-scheduling-workforce .outcome,
.technician-scheduling-workforce .review {
box-shadow: none;
}
.technician-scheduling-workforce .logo {
text-align: center;
padding: 8px;
font-size: 11px;
line-height: 1.5;
border-style: solid;
background: #fbfdff;
}
.technician-scheduling-workforce .reveal,
.technician-scheduling-workforce .reveal.show {
opacity: 1;
transform: none;
transition: none;
}
.technician-scheduling-workforce .reviewPlaceholder {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: var(--yellowsoft);
color: #785c0b;
padding: 4px 8px;
border-radius: 6px;
}
.technician-scheduling-workforce .review span {
font-size: 11px;
line-height: 1.5;
margin-top: 6px;
}
.technician-scheduling-workforce .ratingPlaceholder {
display: block;
font-size: 10px;
color: #b8bec7;
margin-top: 4px;
}
.technician-scheduling-workforce .streamDot,
.technician-scheduling-workforce .streamTrack span {
animation: none;
}
.technician-scheduling-workforce .stream {
grid-template-columns: auto minmax(20px, 1fr) minmax(0, 2fr);
}
.technician-scheduling-workforce .stream strong {
line-height: 1.7;
overflow-wrap: anywhere;
}
.technician-scheduling-workforce .ctaBtns {
min-width: 0;
max-width: 100%;
flex-shrink: 1;
}
.technician-scheduling-workforce .ctaBtns a {
white-space: normal;
text-align: center;
}
.technician-scheduling-workforce .final {
grid-template-columns: minmax(0, 1fr) auto;
}
.technician-scheduling-workforce .featureCard p,
.technician-scheduling-workforce .useCase p {
font-size: 13px;
line-height: 1.7;
}
.technician-scheduling-workforce .connectedCard span,
.technician-scheduling-workforce .aiMini span {
font-size: 12px;
line-height: 1.6;
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid var(--brand2);
outline-offset: 4px;
}
@media (max-width: 960px) {
.heroGrid,
.feature,
.aiGrid,
.final {
grid-template-columns: minmax(0, 1fr);
}
.technician-scheduling-workforce .heroArt {
max-width: 680px;
}
.technician-scheduling-workforce .heroVisual {
width: 100%;
margin: auto;
}
.technician-scheduling-workforce .feature.reverse .visual {
order: 0;
}
.technician-scheduling-workforce .hero h1 {
max-width: 850px;
}
.technician-scheduling-workforce .visual {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.technician-scheduling-workforce .aiMini {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.technician-scheduling-workforce .final .ctaBtns {
max-width: none;
}
.technician-scheduling-workforce .cta {
flex-wrap: wrap;
}
.technician-scheduling-workforce .ratingItem {
padding: 12px;
border-left: 0;
}
}
@media (max-width: 640px) {
.hero {
padding: 34px 0 42px;
} .technician-scheduling-workforce .hero .lead {
font-size: 16px;
}
.technician-scheduling-workforce .heroGrid {
gap: 26px;
}
.technician-scheduling-workforce .breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
.technician-scheduling-workforce .hero .ey {
font-size: 12px;
margin-bottom: 14px;
}
.technician-scheduling-workforce .heroPills span {
font-size: 10px;
padding: 5px 8px;
}
.technician-scheduling-workforce .sectionHead h2,
.technician-scheduling-workforce .feature h2,
.technician-scheduling-workforce .aiGrid h2,
.technician-scheduling-workforce .final h2 {
font-size: clamp(30px, 7.5vw, 38px);
}
.technician-scheduling-workforce .logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.technician-scheduling-workforce .logo {
min-height: 54px;
height: auto;
}
.technician-scheduling-workforce .feature {
gap: 25px;
}
.technician-scheduling-workforce .feature p {
font-size: 15px;
}
.technician-scheduling-workforce .visual {
width: calc(100% + 8px);
max-width: none;
margin-left: -4px;
}
.technician-scheduling-workforce .aiMini {
grid-template-columns: minmax(0, 1fr);
}
.technician-scheduling-workforce .final {
padding: 28px 22px;
}
.technician-scheduling-workforce .stream {
grid-template-columns: auto minmax(0, 1fr);
}
.technician-scheduling-workforce .streamTrack {
display: none;
}
.technician-scheduling-workforce .stream strong {
font-size: 10px !important;
}
.technician-scheduling-workforce .btn {
font-size: 14px;
padding: 0 18px;
}
.technician-scheduling-workforce .cta {
padding: 20px 17px;
gap: 16px;
}
.technician-scheduling-workforce .actions,
.technician-scheduling-workforce .ctaBtns {
gap: 8px;
}
.technician-scheduling-workforce .motion-label {
font-size: 10px;
}
.technician-scheduling-workforce .trust {
padding: 23px 0;
}
.technician-scheduling-workforce .faq details {
padding: 17px 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.technician-scheduling-workforce .motion-label {
display: none;
}
}
.technician-scheduling-workforce .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
}
.technician-scheduling-workforce .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
}
.technician-scheduling-workforce .btn {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 850;
transition: 0.2s;
}
.technician-scheduling-workforce .btn:hover {
transform: translateY(-2px);
}
.technician-scheduling-workforce .btn.black {
background: #0b0b0b;
color: #fff;
}
.technician-scheduling-workforce .btn.yellow {
background: var(--yellow);
color: #000;
}
.technician-scheduling-workforce .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.technician-scheduling-workforce .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.technician-scheduling-workforce .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.technician-scheduling-workforce .soft {
background: var(--sky2);
}
.technician-scheduling-workforce .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.technician-scheduling-workforce .dark h2,
.technician-scheduling-workforce .dark h3 {
color: #fff;
}
.technician-scheduling-workforce .dark p {
color: #d6d6d6;
}
.technician-scheduling-workforce .dark .ey {
background: var(--yellow);
}
.technician-scheduling-workforce .sectionHead {
max-width: 830px;
margin-bottom: 38px;
}
.technician-scheduling-workforce .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.technician-scheduling-workforce .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.technician-scheduling-workforce .hero {
padding: 72px 0 68px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.22),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.16),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.technician-scheduling-workforce .heroGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 44px;
align-items: center;
}
.technician-scheduling-workforce .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.technician-scheduling-workforce .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.technician-scheduling-workforce .heroVisual {
min-height: 525px;
display: grid;
place-items: center;
}
.technician-scheduling-workforce .heroVisual img {
max-width: 100%;
height: auto;
display: block;
}
.technician-scheduling-workforce .trust {
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.technician-scheduling-workforce .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 800;
margin-bottom: 16px;
}
.technician-scheduling-workforce .logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 11px;
}
.technician-scheduling-workforce .logo {
height: 62px;
border: 1px dashed #b8d7e7;
border-radius: 11px;
display: grid;
place-items: center;
color: #8195a2;
font-size: 11px;
font-weight: 800;
}
.technician-scheduling-workforce .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.technician-scheduling-workforce .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
position: relative;
overflow: hidden;
}
.technician-scheduling-workforce .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.technician-scheduling-workforce .outcome:nth-child(2):before {
background: var(--yellow);
}
.technician-scheduling-workforce .outcome:nth-child(3):before {
background: var(--green);
}
.technician-scheduling-workforce .outcome:nth-child(4):before {
background: var(--purple);
}
.technician-scheduling-workforce .outcome strong {
display: block;
font-size: 18px;
margin-bottom: 7px;
}
.technician-scheduling-workforce .outcome span {
font-size: 13px;
color: var(--muted);
}
.technician-scheduling-workforce .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center;
}
.technician-scheduling-workforce .feature.reverse .visual {
order: -1;
}
.technician-scheduling-workforce .fl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 22px;
}
.technician-scheduling-workforce .fi {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
font-size: 13px;
font-weight: 700;
color: #18364a;
}
.technician-scheduling-workforce .tick {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--greenbg);
color: var(--green);
display: grid;
place-items: center;
font-size: 13px;
flex: 0 0 auto;
}
.technician-scheduling-workforce .visual {
position: relative;
}
.technician-scheduling-workforce .visualCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
box-shadow: var(--shadow);
}
.technician-scheduling-workforce .visualCard.darkFrame {
background: #121212;
border-color: #303030;
}
.technician-scheduling-workforce .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.technician-scheduling-workforce .aiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.technician-scheduling-workforce .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.technician-scheduling-workforce .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 14px;
padding: 15px;
}
.technician-scheduling-workforce .aiMini strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 6px;
}
.technician-scheduling-workforce .aiMini span {
font-size: 12px;
color: #d0d0d0;
}
.technician-scheduling-workforce .promptBox {
background: #11171e;
border: 1px solid #303a46;
border-radius: 18px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.technician-scheduling-workforce .promptBox strong {
display: block;
color: #fff;
font-size: 16px;
margin-bottom: 12px;
}
.technician-scheduling-workforce .prompt {
padding: 13px 14px;
border-radius: 12px;
background: #1d2731;
color: #e4edf3;
font-size: 13px;
margin-bottom: 10px;
}
.technician-scheduling-workforce .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.technician-scheduling-workforce .connectedCard {
background: #151515;
border: 1px solid #303030;
border-radius: 15px;
padding: 20px;
}
.technician-scheduling-workforce .connectedCard strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 5px;
}
.technician-scheduling-workforce .connectedCard span {
font-size: 11px;
color: #d0d0d0;
}
.technician-scheduling-workforce .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.technician-scheduling-workforce .integration {
height: 72px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
position: relative;
overflow: hidden;
}
.technician-scheduling-workforce .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.technician-scheduling-workforce .integration:nth-child(3n) {
border-bottom-color: var(--green);
}
.technician-scheduling-workforce .stream {
margin-top: 20px;
background: #0c2333;
color: #fff;
border-radius: 15px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.technician-scheduling-workforce .streamDot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #12cb88;
box-shadow: 0 0 0 6px rgba(18, 203, 136, 0.1);
animation: pulse 2s infinite;
}
.technician-scheduling-workforce .streamTrack {
height: 8px;
border-radius: 999px;
background: #173b50;
overflow: hidden;
}
.technician-scheduling-workforce .streamTrack span {
display: block;
width: 30%;
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--green), var(--yellow));
animation: stream 2.6s linear infinite;
}
.technician-scheduling-workforce .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.technician-scheduling-workforce .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 19px;
transition: 0.22s;
}
.technician-scheduling-workforce .featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.09);
}
.technician-scheduling-workforce .featureIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 13px;
}
.technician-scheduling-workforce .featureCard p {
font-size: 11.5px;
color: var(--muted);
margin: 7px 0 0;
}
.technician-scheduling-workforce .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.technician-scheduling-workforce .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 21px;
box-shadow: 0 8px 24px rgba(6, 59, 92, 0.05);
}
.technician-scheduling-workforce .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.technician-scheduling-workforce .review p {
font-size: 12px;
color: #344c5e;
margin: 12px 0;
}
.technician-scheduling-workforce .review strong {
font-size: 12px;
}
.technician-scheduling-workforce .review span {
display: block;
font-size: 9px;
color: var(--muted);
}
.technician-scheduling-workforce .ratingBand {
padding: 28px 0;
background: #0b0b0b;
color: #fff;
border-top: 4px solid var(--yellow);
}
.technician-scheduling-workforce .ratingGrid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 12px;
align-items: center;
}
.technician-scheduling-workforce .ratingItem {
text-align: center;
border-left: 1px solid #2d2d2d;
}
.technician-scheduling-workforce .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.technician-scheduling-workforce .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
}
.technician-scheduling-workforce .useIcon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--yellow);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
margin-bottom: 14px;
}
.technician-scheduling-workforce .useCase p {
color: var(--muted);
font-size: 12px;
margin-top: 7px;
}
.technician-scheduling-workforce .faq {
max-width: 900px;
}
.technician-scheduling-workforce .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.technician-scheduling-workforce .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
}
.technician-scheduling-workforce .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
}
.technician-scheduling-workforce .cta {
margin-top: 30px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.technician-scheduling-workforce .cta.darkCta {
background: #121212;
border-color: #303030;
color: #fff;
}
.technician-scheduling-workforce .cta h3 {
font-size: 19px;
}
.technician-scheduling-workforce .cta.darkCta h3 {
color: #fff;
}
.technician-scheduling-workforce .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 5px;
max-width: 650px;
}
.technician-scheduling-workforce .cta.darkCta p {
color: #d1d1d1;
}
.technician-scheduling-workforce .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.technician-scheduling-workforce .reveal {
opacity: 0;
transform: translateY(18px);
transition: 0.6s ease;
}
.technician-scheduling-workforce .reveal.show {
opacity: 1;
transform: none;
}
@media (max-width: 960px) {
.technician-scheduling-workforce .heroGrid,
.technician-scheduling-workforce .feature,
.technician-scheduling-workforce .aiGrid,
.technician-scheduling-workforce .final {
grid-template-columns: 1fr;
}
.technician-scheduling-workforce .feature.reverse .visual {
order: 0;
}
.technician-scheduling-workforce .outcomes,
.technician-scheduling-workforce .featureGrid,
.technician-scheduling-workforce .connectedGrid,
.technician-scheduling-workforce .useCases {
grid-template-columns: repeat(2, 1fr);
}
.technician-scheduling-workforce .logos {
grid-template-columns: repeat(4, 1fr);
}
.technician-scheduling-workforce .integrations {
grid-template-columns: repeat(3, 1fr);
}
.technician-scheduling-workforce .reviews {
grid-template-columns: 1fr;
}
.technician-scheduling-workforce .ratingGrid {
grid-template-columns: repeat(2, 1fr);
}
.technician-scheduling-workforce .aiMini {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.technician-scheduling-workforce .wrap {
width: calc(100% - 24px);
}
section {
padding: 56px 0;
}
.technician-scheduling-workforce .hero {
padding: 54px 0;
} .technician-scheduling-workforce .fl,
.technician-scheduling-workforce .outcomes,
.technician-scheduling-workforce .featureGrid,
.technician-scheduling-workforce .connectedGrid,
.technician-scheduling-workforce .useCases,
.technician-scheduling-workforce .logos,
.technician-scheduling-workforce .integrations,
.technician-scheduling-workforce .ratingGrid {
grid-template-columns: 1fr;
}
.technician-scheduling-workforce .cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
body {
overflow-x: clip;
}
img {
max-width: 100%;
height: auto;
}
.technician-scheduling-workforce .heroGrid,
.technician-scheduling-workforce .feature,
.technician-scheduling-workforce .aiGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.technician-scheduling-workforce .heroGrid>*,
.technician-scheduling-workforce .feature>*,
.technician-scheduling-workforce .aiGrid>*,
.technician-scheduling-workforce .final>* {
min-width: 0;
}
.technician-scheduling-workforce .heroGrid {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: 38px;
} .technician-scheduling-workforce .hero .lead {
font-size: 17px;
line-height: 1.7;
}
.technician-scheduling-workforce .hero .micro {
font-size: 12px;
line-height: 1.7;
}
.technician-scheduling-workforce .heroPills span {
font-size: 11px;
}
.technician-scheduling-workforce .heroVisual {
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.technician-scheduling-workforce .heroArt {
order: 0;
width: 100%;
max-width: 760px;
}
.technician-scheduling-workforce .heroArt svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.technician-scheduling-workforce .motion-toggle {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.technician-scheduling-workforce .motion-label {
order: 1;
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 34px;
padding: 5px 12px;
border: 1px solid #c6dfec;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
color: var(--navy);
background: #fff;
cursor: pointer;
margin-top: 8px;
}
.technician-scheduling-workforce .motion-label:before {
content: "";
display: block;
width: 7px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.technician-scheduling-workforce .motion-resume {
display: none;
}
.technician-scheduling-workforce .motion-toggle:checked~.motion-label .motion-pause {
display: none;
}
.technician-scheduling-workforce .motion-toggle:checked~.motion-label .motion-resume {
display: inline;
}
.technician-scheduling-workforce .motion-toggle:checked~.motion-label:before {
content: "";
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-right: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.technician-scheduling-workforce .motion-toggle:checked~.heroArt * {
animation-play-state: paused !important;
}
.technician-scheduling-workforce .motion-toggle:focus-visible~.motion-label {
outline: 3px solid var(--brand2);
outline-offset: 3px;
}
.technician-scheduling-workforce .assetNote {
order: 2;
margin: 9px 0 0;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.technician-scheduling-workforce .breadcrumbs {
font-size: 12px;
color: var(--muted);
margin: 0 0 21px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .breadcrumbs a {
color: var(--brand2);
}
.technician-scheduling-workforce .breadcrumbs a:hover {
text-decoration: underline;
}
.technician-scheduling-workforce .visual {
min-width: 0;
width: 100%;
}
.technician-scheduling-workforce .visualCard,
.technician-scheduling-workforce .visualCard.darkFrame {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.technician-scheduling-workforce .visualCard img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
object-fit: contain;
}
.technician-scheduling-workforce .feature {
gap: 44px;
}
.technician-scheduling-workforce .feature p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
margin: 17px 0 0;
}
.technician-scheduling-workforce .fl {
gap: 12px 17px;
}
.technician-scheduling-workforce .fi {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
font-weight: 500;
line-height: 1.55;
align-items: flex-start;
}
.technician-scheduling-workforce .tick {
margin-top: 1px;
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 11px;
}
.technician-scheduling-workforce .outcome,
.technician-scheduling-workforce .review {
box-shadow: none;
}
.technician-scheduling-workforce .logo {
text-align: center;
padding: 8px;
font-size: 11px;
line-height: 1.5;
border-style: solid;
background: #fbfdff;
}
.technician-scheduling-workforce .reveal,
.technician-scheduling-workforce .reveal.show {
opacity: 1;
transform: none;
transition: none;
}
.technician-scheduling-workforce .reviewPlaceholder {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: var(--yellowsoft);
color: #785c0b;
padding: 4px 8px;
border-radius: 6px;
}
.technician-scheduling-workforce .review span {
font-size: 11px;
line-height: 1.5;
margin-top: 6px;
}
.technician-scheduling-workforce .ratingPlaceholder {
display: block;
font-size: 10px;
color: #b8bec7;
margin-top: 4px;
}
.technician-scheduling-workforce .streamDot,
.technician-scheduling-workforce .streamTrack span {
animation: none;
}
.technician-scheduling-workforce .stream {
grid-template-columns: auto minmax(20px, 1fr) minmax(0, 2fr);
}
.technician-scheduling-workforce .stream strong {
line-height: 1.7;
overflow-wrap: anywhere;
}
.technician-scheduling-workforce .ctaBtns {
min-width: 0;
max-width: 100%;
flex-shrink: 1;
}
.technician-scheduling-workforce .ctaBtns a {
white-space: normal;
text-align: center;
}
.technician-scheduling-workforce .final {
grid-template-columns: minmax(0, 1fr) auto;
}
.technician-scheduling-workforce .featureCard p,
.technician-scheduling-workforce .useCase p {
font-size: 13px;
line-height: 1.7;
}
.technician-scheduling-workforce .connectedCard span,
.technician-scheduling-workforce .aiMini span {
font-size: 12px;
line-height: 1.6;
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid var(--brand2);
outline-offset: 4px;
}
@media (max-width: 960px) {
.technician-scheduling-workforce .heroGrid,
.technician-scheduling-workforce .feature,
.technician-scheduling-workforce .aiGrid,
.technician-scheduling-workforce .final {
grid-template-columns: minmax(0, 1fr);
}
.technician-scheduling-workforce .heroArt {
max-width: 680px;
}
.technician-scheduling-workforce .heroVisual {
width: 100%;
margin: auto;
}
.technician-scheduling-workforce .feature.reverse .visual {
order: 0;
}
.technician-scheduling-workforce .hero h1 {
max-width: 850px;
}
.technician-scheduling-workforce .visual {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.technician-scheduling-workforce .aiMini {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.technician-scheduling-workforce .final .ctaBtns {
max-width: none;
}
.technician-scheduling-workforce .cta {
flex-wrap: wrap;
}
.technician-scheduling-workforce .ratingItem {
padding: 12px;
border-left: 0;
}
}
@media (max-width: 640px) {
.technician-scheduling-workforce .hero {
padding: 34px 0 42px;
} .technician-scheduling-workforce .hero .lead {
font-size: 16px;
}
.technician-scheduling-workforce .heroGrid {
gap: 26px;
}
.technician-scheduling-workforce .breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
.technician-scheduling-workforce .hero .ey {
font-size: 12px;
margin-bottom: 14px;
}
.technician-scheduling-workforce .heroPills span {
font-size: 10px;
padding: 5px 8px;
}
.technician-scheduling-workforce .sectionHead h2,
.technician-scheduling-workforce .feature h2,
.technician-scheduling-workforce .aiGrid h2,
.technician-scheduling-workforce .final h2 {
font-size: clamp(30px, 7.5vw, 38px);
}
.technician-scheduling-workforce .logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.technician-scheduling-workforce .logo {
min-height: 54px;
height: auto;
}
.technician-scheduling-workforce .feature {
gap: 25px;
}
.technician-scheduling-workforce .feature p {
font-size: 15px;
}
.technician-scheduling-workforce .visual {
width: calc(100% + 8px);
max-width: none;
margin-left: -4px;
}
.technician-scheduling-workforce .aiMini {
grid-template-columns: minmax(0, 1fr);
}
.technician-scheduling-workforce .final {
padding: 28px 22px;
border-radius: 21px;
}
.technician-scheduling-workforce .stream {
grid-template-columns: auto minmax(0, 1fr);
}
.technician-scheduling-workforce .streamTrack {
display: none;
}
.technician-scheduling-workforce .stream strong {
font-size: 10px !important;
}
.technician-scheduling-workforce .btn {
font-size: 14px;
padding: 0 18px;
}
.technician-scheduling-workforce .cta {
padding: 20px 17px;
gap: 16px;
}
.technician-scheduling-workforce .actions,
.technician-scheduling-workforce .ctaBtns {
gap: 8px;
}
.technician-scheduling-workforce .motion-label {
font-size: 10px;
}
.technician-scheduling-workforce .trust {
padding: 23px 0;
}
.technician-scheduling-workforce .faq details {
padding: 17px 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.technician-scheduling-workforce .motion-label {
display: none;
}
}
.technician-scheduling-workforce .wfTableScroll {
overflow-x: auto;
border: 1px solid #dce9f1;
border-radius: 11px;
background: #fff;
}
.technician-scheduling-workforce .wfTable {
border-collapse: collapse;
width: 100%;
font-size: 11px;
line-height: 1.6;
text-align: left;
}
.technician-scheduling-workforce .wfTable th {
font-weight: 750;
background: #f6fafd;
color: #597991;
}
.technician-scheduling-workforce .wfTable td,
.technician-scheduling-workforce .wfTable th {
padding: 10px 9px;
border-bottom: 1px solid #e6eff5;
}
.technician-scheduling-workforce .wfTable tr:last-child td {
border-bottom: 0;
}
.technician-scheduling-workforce .wfTable td {
color: #355973;
}
.technician-scheduling-workforce .wfTable .wfPill {
font-size: 9px;
padding: 4px 7px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable {
font-size: 10px;
min-width: 286px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable td,
.technician-scheduling-workforce .wfRosterWeek .wfTable th {
text-align: center;
padding: 10px 4px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable td:first-child,
.technician-scheduling-workforce .wfRosterWeek .wfTable th:first-child {
text-align: left;
padding-left: 11px;
width: 86px;
}
.technician-scheduling-workforce .wfDay {
padding: 4px 6px;
border-radius: 5px;
background: #e5f4fc;
color: #287ba5;
font-weight: 750;
display: inline-block;
font-size: 9px;
}
.technician-scheduling-workforce .wfDay.evening {
background: #f0ecfa;
color: #826db3;
}
.technician-scheduling-workforce .wfLegend {
font-size: 9px;
color: #6a8395;
display: flex;
gap: 13px;
margin-top: 11px;
line-height: 1.6;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfLegend>span {
display: flex;
gap: 5px;
align-items: center;
}
.technician-scheduling-workforce .wfLegend i {
width: 8px;
height: 8px;
background: #55a6d4;
border-radius: 2px;
display: inline-block;
}
.technician-scheduling-workforce .wfLegend i.purple {
background: #9886c4;
}
.technician-scheduling-workforce .wfLegend i.green {
background: #52a981;
}
.technician-scheduling-workforce .wfStatGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.technician-scheduling-workforce .wfStat {
padding: 14px 12px;
border: 1px solid #dbe9f2;
background: #fff;
border-radius: 12px;
}
.technician-scheduling-workforce .wfStat strong {
font-size: 28px;
font-weight: 800;
line-height: 1.1;
display: block;
color: #174764;
}
.technician-scheduling-workforce .wfStat span {
display: block;
font-size: 9px;
line-height: 1.5;
color: #6c879a;
margin-top: 7px;
}
.technician-scheduling-workforce .wfCapacityList {
background: #fff;
border: 1px solid #dbe8f0;
border-radius: 15px;
padding: 4px 15px;
}
.technician-scheduling-workforce .wfCapacity {
padding: 14px 0;
border-bottom: 1px solid #e5eef4;
}
.technician-scheduling-workforce .wfCapacity:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfCapacityTop {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.technician-scheduling-workforce .wfCapacityTop b {
display: block;
font-size: 12px;
line-height: 1.4;
}
.technician-scheduling-workforce .wfCapacityTop small {
display: block;
font-size: 10px;
color: #728a9a;
line-height: 1.5;
}
.technician-scheduling-workforce .wfCapacityTop .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfBar {
height: 7px;
border-radius: 8px;
background: #e8f1f7;
overflow: hidden;
}
.technician-scheduling-workforce .wfBar i {
display: block;
width: var(--fill);
height: 100%;
background: #469dcc;
border-radius: 8px;
}
.technician-scheduling-workforce .wfBar.purple i {
background: #9a8ac9;
}
.technician-scheduling-workforce .wfBar.green i {
background: #55a881;
}
.technician-scheduling-workforce .wfCapacityDetail {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #6c8598;
margin-top: 7px;
gap: 9px;
}
.technician-scheduling-workforce .wfCapacity.absent {
display: flex;
align-items: center;
gap: 9px;
}
.technician-scheduling-workforce .wfCapacity.absent b {
font-size: 12px;
display: block;
}
.technician-scheduling-workforce .wfCapacity.absent small {
font-size: 10px;
color: #708798;
display: block;
}
.technician-scheduling-workforce .wfCapacity.absent .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfLeaveCard+.wfLeaveCard {
margin-top: 12px;
}
.technician-scheduling-workforce .wfLeaveHead {
display: flex;
gap: 9px;
align-items: center;
margin-bottom: 14px;
}
.technician-scheduling-workforce .wfLeaveHead .wfPill {
margin-left: auto;
}
.technician-scheduling-workforce .wfLeaveHead b {
font-size: 13px;
display: block;
line-height: 1.4;
}
.technician-scheduling-workforce .wfLeaveHead small {
display: block;
font-size: 10px;
color: #718598;
line-height: 1.5;
}
.technician-scheduling-workforce .wfLeaveDates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: #f5fafd;
border-radius: 9px;
padding: 10px 12px;
font-size: 10px;
color: #6f8599;
}
.technician-scheduling-workforce .wfLeaveDates strong {
font-size: 12px;
color: #2c506c;
display: block;
font-weight: 650;
margin-top: 3px;
}
.technician-scheduling-workforce .wfLeaveStatus {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
margin-top: 13px;
}
.technician-scheduling-workforce .wfLeaveStatus span {
font-size: 9px;
color: #658097;
line-height: 1.6;
}
.technician-scheduling-workforce .wfLeaveStatus .wfUiAction {
font-size: 9px;
padding: 7px 9px;
margin: 0;
}
.technician-scheduling-workforce .wfLeavePath {
display: flex;
align-items: center;
gap: 7px;
justify-content: center;
font-size: 10px;
color: #527c93;
margin-top: 16px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfLeavePath .icon {
width: 13px;
height: 13px;
}
.technician-scheduling-workforce .wfLeavePath strong {
color: #287c5f;
}
.technician-scheduling-workforce .wfTimePair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.technician-scheduling-workforce .wfTimeBox {
background: #f0f8fd;
border: 1px solid #d8e9f4;
border-radius: 11px;
padding: 14px;
}
.technician-scheduling-workforce .wfTimeBox .icon {
color: #328fba;
width: 18px;
height: 18px;
margin-bottom: 6px;
}
.technician-scheduling-workforce .wfTimeBox span {
font-size: 10px;
color: #628195;
display: block;
}
.technician-scheduling-workforce .wfTimeBox strong {
font-size: 26px;
line-height: 1.2;
color: #235774;
display: block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfTimeTotal {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 13px;
margin-top: 13px;
border-top: 1px solid #e4edf3;
font-size: 11px;
color: #688599;
gap: 8px;
}
.technician-scheduling-workforce .wfTimeTotal strong {
font-size: 17px;
color: #26698a;
}
.technician-scheduling-workforce .wfSettings {
margin-top: 13px;
}
.technician-scheduling-workforce .wfSetting {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 9px 0;
border-bottom: 1px solid #e6eef4;
font-size: 10px;
color: #688295;
}
.technician-scheduling-workforce .wfSetting:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfSetting b {
font-weight: 650;
color: #315975;
text-align: right;
}
.technician-scheduling-workforce .wfSummaryItem {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid #e4edf3;
}
.technician-scheduling-workforce .wfSummaryItem:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfSummaryIcon {
width: 31px;
height: 31px;
border-radius: 9px;
background: #e6f4ef;
color: #31825d;
display: grid;
place-items: center;
flex-shrink: 0;
}
.technician-scheduling-workforce .wfSummaryIcon.blue {
background: #e7f3fb;
color: #398bb9;
}
.technician-scheduling-workforce .wfSummaryIcon.amber {
background: #fff3df;
color: #ae7c32;
}
.technician-scheduling-workforce .wfSummaryIcon .icon {
width: 17px;
height: 17px;
}
.technician-scheduling-workforce .wfSummaryItem b {
font-size: 12px;
line-height: 1.4;
display: block;
}
.technician-scheduling-workforce .wfSummaryItem small {
font-size: 10px;
color: #70889a;
line-height: 1.6;
display: block;
margin-top: 3px;
}
.technician-scheduling-workforce .wfSummaryItem .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfVedaPanel {
padding: 23px;
border-radius: 22px;
background: #132533;
border: 1px solid #374d5e;
color: #d4e6f3;
}
.technician-scheduling-workforce .wfVedaTitle {
display: flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 750;
margin-bottom: 17px;
color: #f1f7fc;
}
.technician-scheduling-workforce .wfVedaTitle .icon {
color: #ffd056;
}
.technician-scheduling-workforce .wfVedaPrompt {
padding: 15px;
background: #203b50;
border: 1px solid #36576f;
border-radius: 14px 14px 3px 14px;
font-size: 13px;
line-height: 1.7;
margin: 15px 0;
}
.technician-scheduling-workforce .wfVedaAnswer {
padding: 17px;
background: #192e3f;
border: 1px solid #345063;
border-radius: 13px;
font-size: 12px;
line-height: 1.7;
}
.technician-scheduling-workforce .wfVedaAnswer strong {
display: block;
color: #f1f7fd;
font-size: 14px;
margin-bottom: 12px;
}
.technician-scheduling-workforce .wfVedaAnswer p {
font-size: 12px !important;
color: #bfd5e5 !important;
margin: 12px 0 0 !important;
}
.technician-scheduling-workforce .wfVedaTask {
border-top: 1px solid #324a5b;
padding: 10px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 13px;
font-size: 11px;
}
.technician-scheduling-workforce .wfVedaTask b {
font-size: 12px;
display: block;
color: #e8f3fb;
}
.technician-scheduling-workforce .wfVedaTask small {
font-size: 10px;
color: #a0bcd0;
display: block;
margin-top: 3px;
}
.technician-scheduling-workforce .wfVedaHint {
font-size: 10px;
color: #a6c0d3;
line-height: 1.7;
margin-top: 13px;
}
.technician-scheduling-workforce .wfBroader {
margin-top: 25px;
padding: 20px 22px;
border: 1px solid #d8e8f1;
border-left: 4px solid #29a1d6;
border-radius: 13px;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 22px;
}
.technician-scheduling-workforce .wfBroader strong {
font-size: 15px;
}
.technician-scheduling-workforce .wfBroader p {
font-size: 13px;
color: #607e91;
line-height: 1.7;
margin: 5px 0 0;
}
.technician-scheduling-workforce .wfBroader .detailLink {
margin: 0;
flex-shrink: 0;
font-size: 13px;
}
.technician-scheduling-workforce .wfCompare {
margin-top: 25px;
border: 1px solid #dbe9f2;
border-radius: 16px;
padding: 19px 23px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
background: #fff;
}
.technician-scheduling-workforce .wfCompare>div+div {
border-left: 1px solid #dbe9f2;
padding-left: 28px;
}
.technician-scheduling-workforce .wfCompare span {
font-size: 10px;
color: #5f8aa2;
letter-spacing: 0.07em;
text-transform: uppercase;
font-weight: 750;
}
.technician-scheduling-workforce .wfCompare strong {
display: block;
font-size: 15px;
color: #183a50;
margin-top: 4px;
}
.technician-scheduling-workforce .wfCompare p {
margin: 5px 0 0;
font-size: 12px;
color: #6a8293;
line-height: 1.7;
}
.technician-scheduling-workforce .wfRoleTag {
display: inline-block;
font-size: 10px;
font-weight: 750;
border-radius: 6px;
padding: 4px 8px;
background: #e9f7fd;
color: #257ca3;
}
.technician-scheduling-workforce .wfReview p {
font-size: 14px;
line-height: 1.75;
}
.technician-scheduling-workforce .wfReview h3 {
margin-top: 14px;
font-size: 22px;
}
.technician-scheduling-workforce .wfReview strong {
font-size: 13px;
color: #167faa;
}
.technician-scheduling-workforce .wfReview span {
font-size: 11px;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem {
border-left: 1px solid #353535;
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem strong {
font-size: 15px;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem span {
display: block;
font-size: 11px;
color: #c9d6e0;
margin-top: 5px;
}
.technician-scheduling-workforce .workflow-label {
font-size: 12px;
color: #b8cedd;
display: block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfIntegrationNote {
font-size: 12px;
line-height: 1.75;
color: #60788b;
margin-top: 20px;
}
.technician-scheduling-workforce .wfIntegrationNote a {
color: #15789f;
text-decoration: underline;
text-underline-offset: 3px;
}
.technician-scheduling-workforce .pageFoot a:hover {
text-decoration: underline;
}
.technician-scheduling-workforce .footerLinks {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .pageFoot p {
font-size: 11px;
margin: 11px 0 0;
}
.technician-scheduling-workforce .wfRelated {
font-size: 12px;
line-height: 1.8;
margin-top: 25px;
color: #70869a;
text-align: center;
}
.technician-scheduling-workforce .wfRelated a {
color: #147ea6;
text-decoration: underline;
text-underline-offset: 3px;
}
.technician-scheduling-workforce .visualNote {
font-size: 10px !important;
line-height: 1.6 !important;
margin-top: 10px !important;
}
.technician-scheduling-workforce .faq details[open] summary {
margin-bottom: 8px;
}
.technician-scheduling-workforce .fi {
line-height: 1.65;
}
.technician-scheduling-workforce .wfHero *,
.technician-scheduling-workforce .wfCanvas * {
animation: none !important;
}
@media (min-width: 1700px) {
.technician-scheduling-workforce .wfHero {
min-height: 820px;
}
.technician-scheduling-workforce .wfHeroInner {
padding: 77px 0;
}
.technician-scheduling-workforce .wfHeroArt {
height: 620px;
}
.technician-scheduling-workforce .wfHeroMonitor {
top: 82px;
}
.technician-scheduling-workforce .wfBoardBody {
padding: 25px;
}
.technician-scheduling-workforce .wfBoardHeading h3 {
font-size: 27px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterRow {
min-height: 69px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterAxis,
.technician-scheduling-workforce .wfHeroMonitor .wfRosterRow {
grid-template-columns: 151px minmax(0, 1fr);
}
.technician-scheduling-workforce .wfHeroMonitor .wfPerson b {
font-size: 12px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfPerson small {
font-size: 10px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfBlock {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterAxis {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfBoardFoot {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMini.shift {
right: 6%;
top: 20px;
}
.technician-scheduling-workforce .wfHeroMini.cover {
left: 6%;
bottom: 0;
}
.technician-scheduling-workforce .wfHeroLabel {
bottom: 12px;
}
.technician-scheduling-workforce .heroProofGrid strong {
font-size: 14px;
}
.technician-scheduling-workforce .heroProofGrid span {
font-size: 11px;
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
.technician-scheduling-workforce .wfHeroInner {
width: 92%;
grid-template-columns: 45% 55%;
} .technician-scheduling-workforce .wfHeroCopy {
padding-right: 23px;
}
.technician-scheduling-workforce .wfEy {
font-size: 10px;
}
.technician-scheduling-workforce .wfLead {
font-size: 15px;
}
.technician-scheduling-workforce .heroBtn {
font-size: 12px;
padding: 13px 14px;
gap: 8px;
}
.technician-scheduling-workforce .wfHeroArt {
height: 560px;
}
.technician-scheduling-workforce .wfBoardBody {
padding: 15px;
}
.technician-scheduling-workforce .wfBoardHeading h3 {
font-size: 20px;
}
.technician-scheduling-workforce .wfRosterAxis,
.technician-scheduling-workforce .wfRosterRow {
grid-template-columns: 111px minmax(0, 1fr);
}
.technician-scheduling-workforce .wfPerson {
gap: 6px;
padding-left: 7px;
}
.technician-scheduling-workforce .wfPerson b {
font-size: 9px;
}
.technician-scheduling-workforce .wfBlock {
font-size: 8px;
padding: 8px 4px;
}
.technician-scheduling-workforce .wfHeroMini.shift {
top: 9px;
width: 184px;
}
.technician-scheduling-workforce .wfHeroMini.cover {
left: 3%;
width: 213px;
}
.technician-scheduling-workforce .wfHeroLabel {
max-width: 155px;
font-size: 8px;
}
.technician-scheduling-workforce .wfHeroMini strong {
font-size: 13px;
}
.technician-scheduling-workforce .wfHeroMiniTop {
font-size: 10px;
}
}
@media (max-width: 1024px) {
.technician-scheduling-workforce .wfHero {
display: block;
min-height: 0;
background: linear-gradient(130deg, #061c38, #143b5e 50%, #799eb7);
}
.technician-scheduling-workforce .wfHeroInner {
width: calc(100% - 64px);
grid-template-columns: 1fr;
gap: 16px;
padding: 44px 0 26px;
}
.technician-scheduling-workforce .wfHeroCopy {
max-width: 740px;
padding: 0;
} .technician-scheduling-workforce .wfLead {
font-size: 16px;
max-width: 660px;
}
.technician-scheduling-workforce .heroProof {
max-width: 600px;
}
.technician-scheduling-workforce .wfHeroArt {
height: 584px;
max-width: 720px;
margin: auto;
justify-self: center;
}
.technician-scheduling-workforce .wfHeroMonitor {
left: 0;
right: 0;
} .technician-scheduling-workforce .wfBuilding {
height: 52%;
width: 50%;
top: auto;
bottom: 0;
}
.technician-scheduling-workforce .wfBuilding.back {
height: 38%;
right: 35%;
bottom: -20px;
width: 50%;
}
.technician-scheduling-workforce .wfHeroMini.cover {
bottom: 18px;
left: 4%;
}
.technician-scheduling-workforce .wfHeroLabel {
bottom: 30px;
}
.technician-scheduling-workforce .visual {
max-width: 700px;
margin: auto;
}
}
@media (max-width: 640px) {
.technician-scheduling-workforce .wfHeroInner {
width: calc(100% - 40px);
padding: 29px 0 20px;
gap: 18px;
}
.technician-scheduling-workforce .heroCrumb {
font-size: 9px;
margin-bottom: 21px;
line-height: 1.65;
}
.technician-scheduling-workforce .wfEy {
font-size: 9px;
letter-spacing: 0.07em;
gap: 8px;
margin-bottom: 18px;
}
.technician-scheduling-workforce .wfEy:before {
width: 18px;
flex-basis: 18px;
margin-top: 6px;
} .technician-scheduling-workforce .wfLead {
font-size: 14px;
margin-top: 20px;
line-height: 1.8;
}
.technician-scheduling-workforce .heroActions {
gap: 9px;
margin-top: 21px;
}
.technician-scheduling-workforce .heroBtn {
font-size: 12px;
padding: 12px 14px;
gap: 8px;
min-height: 48px;
}
.technician-scheduling-workforce .heroBtn .icon {
width: 16px;
height: 16px;
}
.technician-scheduling-workforce .heroMicro {
font-size: 10px;
}
.technician-scheduling-workforce .heroProof {
margin-top: 22px;
padding-top: 15px;
}
.technician-scheduling-workforce .heroProofLabel {
font-size: 8px;
}
.technician-scheduling-workforce .heroProofGrid {
gap: 7px;
}
.technician-scheduling-workforce .heroProofGrid strong {
font-size: 10px;
}
.technician-scheduling-workforce .wfTableScroll {
overflow-x: auto;
border: 1px solid #dce9f1;
border-radius: 11px;
background: #fff;
}
.technician-scheduling-workforce .wfTable {
border-collapse: collapse;
width: 100%;
font-size: 11px;
line-height: 1.6;
text-align: left;
}
.technician-scheduling-workforce .wfTable th {
font-weight: 750;
background: #f6fafd;
color: #597991;
}
.technician-scheduling-workforce .wfTable td,
.technician-scheduling-workforce .wfTable th {
padding: 10px 9px;
border-bottom: 1px solid #e6eff5;
}
.technician-scheduling-workforce .wfTable tr:last-child td {
border-bottom: 0;
}
.technician-scheduling-workforce .wfTable td {
color: #355973;
}
.technician-scheduling-workforce .wfTable .wfPill {
font-size: 9px;
padding: 4px 7px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable {
font-size: 10px;
min-width: 286px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable td,
.technician-scheduling-workforce .wfRosterWeek .wfTable th {
text-align: center;
padding: 10px 4px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable td:first-child,
.technician-scheduling-workforce .wfRosterWeek .wfTable th:first-child {
text-align: left;
padding-left: 11px;
width: 86px;
}
.technician-scheduling-workforce .wfDay {
padding: 4px 6px;
border-radius: 5px;
background: #e5f4fc;
color: #287ba5;
font-weight: 750;
display: inline-block;
font-size: 9px;
}
.technician-scheduling-workforce .wfDay.evening {
background: #f0ecfa;
color: #826db3;
}
.technician-scheduling-workforce .wfLegend {
font-size: 9px;
color: #6a8395;
display: flex;
gap: 13px;
margin-top: 11px;
line-height: 1.6;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfLegend>span {
display: flex;
gap: 5px;
align-items: center;
}
.technician-scheduling-workforce .wfLegend i {
width: 8px;
height: 8px;
background: #55a6d4;
border-radius: 2px;
display: inline-block;
}
.technician-scheduling-workforce .wfLegend i.purple {
background: #9886c4;
}
.technician-scheduling-workforce .wfLegend i.green {
background: #52a981;
}
.technician-scheduling-workforce .wfStatGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.technician-scheduling-workforce .wfStat {
padding: 14px 12px;
border: 1px solid #dbe9f2;
background: #fff;
border-radius: 12px;
}
.technician-scheduling-workforce .wfStat strong {
font-size: 28px;
font-weight: 800;
line-height: 1.1;
display: block;
color: #174764;
}
.technician-scheduling-workforce .wfStat span {
display: block;
font-size: 9px;
line-height: 1.5;
color: #6c879a;
margin-top: 7px;
}
.technician-scheduling-workforce .wfCapacityList {
background: #fff;
border: 1px solid #dbe8f0;
border-radius: 15px;
padding: 4px 15px;
}
.technician-scheduling-workforce .wfCapacity {
padding: 14px 0;
border-bottom: 1px solid #e5eef4;
}
.technician-scheduling-workforce .wfCapacity:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfCapacityTop {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.technician-scheduling-workforce .wfCapacityTop b {
display: block;
font-size: 12px;
line-height: 1.4;
}
.technician-scheduling-workforce .wfCapacityTop small {
display: block;
font-size: 10px;
color: #728a9a;
line-height: 1.5;
}
.technician-scheduling-workforce .wfCapacityTop .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfBar {
height: 7px;
border-radius: 8px;
background: #e8f1f7;
overflow: hidden;
}
.technician-scheduling-workforce .wfBar i {
display: block;
width: var(--fill);
height: 100%;
background: #469dcc;
border-radius: 8px;
}
.technician-scheduling-workforce .wfBar.purple i {
background: #9a8ac9;
}
.technician-scheduling-workforce .wfBar.green i {
background: #55a881;
}
.technician-scheduling-workforce .wfCapacityDetail {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #6c8598;
margin-top: 7px;
gap: 9px;
}
.technician-scheduling-workforce .wfCapacity.absent {
display: flex;
align-items: center;
gap: 9px;
}
.technician-scheduling-workforce .wfCapacity.absent b {
font-size: 12px;
display: block;
}
.technician-scheduling-workforce .wfCapacity.absent small {
font-size: 10px;
color: #708798;
display: block;
}
.technician-scheduling-workforce .wfCapacity.absent .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfLeaveCard+.wfLeaveCard {
margin-top: 12px;
}
.technician-scheduling-workforce .wfLeaveHead {
display: flex;
gap: 9px;
align-items: center;
margin-bottom: 14px;
}
.technician-scheduling-workforce .wfLeaveHead .wfPill {
margin-left: auto;
}
.technician-scheduling-workforce .wfLeaveHead b {
font-size: 13px;
display: block;
line-height: 1.4;
}
.technician-scheduling-workforce .wfLeaveHead small {
display: block;
font-size: 10px;
color: #718598;
line-height: 1.5;
}
.technician-scheduling-workforce .wfLeaveDates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: #f5fafd;
border-radius: 9px;
padding: 10px 12px;
font-size: 10px;
color: #6f8599;
}
.technician-scheduling-workforce .wfLeaveDates strong {
font-size: 12px;
color: #2c506c;
display: block;
font-weight: 650;
margin-top: 3px;
}
.technician-scheduling-workforce .wfLeaveStatus {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
margin-top: 13px;
}
.technician-scheduling-workforce .wfLeaveStatus span {
font-size: 9px;
color: #658097;
line-height: 1.6;
}
.technician-scheduling-workforce .wfLeaveStatus .wfUiAction {
font-size: 9px;
padding: 7px 9px;
margin: 0;
}
.technician-scheduling-workforce .wfLeavePath {
display: flex;
align-items: center;
gap: 7px;
justify-content: center;
font-size: 10px;
color: #527c93;
margin-top: 16px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfLeavePath .icon {
width: 13px;
height: 13px;
}
.technician-scheduling-workforce .wfLeavePath strong {
color: #287c5f;
}
.technician-scheduling-workforce .wfTimePair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.technician-scheduling-workforce .wfTimeBox {
background: #f0f8fd;
border: 1px solid #d8e9f4;
border-radius: 11px;
padding: 14px;
}
.technician-scheduling-workforce .wfTimeBox .icon {
color: #328fba;
width: 18px;
height: 18px;
margin-bottom: 6px;
}
.technician-scheduling-workforce .wfTimeBox span {
font-size: 10px;
color: #628195;
display: block;
}
.technician-scheduling-workforce .wfTimeBox strong {
font-size: 26px;
line-height: 1.2;
color: #235774;
display: block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfTimeTotal {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 13px;
margin-top: 13px;
border-top: 1px solid #e4edf3;
font-size: 11px;
color: #688599;
gap: 8px;
}
.technician-scheduling-workforce .wfTimeTotal strong {
font-size: 17px;
color: #26698a;
}
.technician-scheduling-workforce .wfSettings {
margin-top: 13px;
}
.technician-scheduling-workforce .wfSetting {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 9px 0;
border-bottom: 1px solid #e6eef4;
font-size: 10px;
color: #688295;
}
.technician-scheduling-workforce .wfSetting:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfSetting b {
font-weight: 650;
color: #315975;
text-align: right;
}
.technician-scheduling-workforce .wfSummaryItem {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid #e4edf3;
}
.technician-scheduling-workforce .wfSummaryItem:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfSummaryIcon {
width: 31px;
height: 31px;
border-radius: 9px;
background: #e6f4ef;
color: #31825d;
display: grid;
place-items: center;
flex-shrink: 0;
}
.technician-scheduling-workforce .wfSummaryIcon.blue {
background: #e7f3fb;
color: #398bb9;
}
.technician-scheduling-workforce .wfSummaryIcon.amber {
background: #fff3df;
color: #ae7c32;
}
.technician-scheduling-workforce .wfSummaryIcon .icon {
width: 17px;
height: 17px;
}
.technician-scheduling-workforce .wfSummaryItem b {
font-size: 12px;
line-height: 1.4;
display: block;
}
.technician-scheduling-workforce .wfSummaryItem small {
font-size: 10px;
color: #70889a;
line-height: 1.6;
display: block;
margin-top: 3px;
}
.technician-scheduling-workforce .wfSummaryItem .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfVedaPanel {
padding: 23px;
border-radius: 22px;
background: #132533;
border: 1px solid #374d5e;
color: #d4e6f3;
}
.technician-scheduling-workforce .wfVedaTitle {
display: flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 750;
margin-bottom: 17px;
color: #f1f7fc;
}
.technician-scheduling-workforce .wfVedaTitle .icon {
color: #ffd056;
}
.technician-scheduling-workforce .wfVedaPrompt {
padding: 15px;
background: #203b50;
border: 1px solid #36576f;
border-radius: 14px 14px 3px 14px;
font-size: 13px;
line-height: 1.7;
margin: 15px 0;
}
.technician-scheduling-workforce .wfVedaAnswer {
padding: 17px;
background: #192e3f;
border: 1px solid #345063;
border-radius: 13px;
font-size: 12px;
line-height: 1.7;
}
.technician-scheduling-workforce .wfVedaAnswer strong {
display: block;
color: #f1f7fd;
font-size: 14px;
margin-bottom: 12px;
}
.technician-scheduling-workforce .wfVedaAnswer p {
font-size: 12px !important;
color: #bfd5e5 !important;
margin: 12px 0 0 !important;
}
.technician-scheduling-workforce .wfVedaTask {
border-top: 1px solid #324a5b;
padding: 10px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 13px;
font-size: 11px;
}
.technician-scheduling-workforce .wfVedaTask b {
font-size: 12px;
display: block;
color: #e8f3fb;
}
.technician-scheduling-workforce .wfVedaTask small {
font-size: 10px;
color: #a0bcd0;
display: block;
margin-top: 3px;
}
.technician-scheduling-workforce .wfVedaHint {
font-size: 10px;
color: #a6c0d3;
line-height: 1.7;
margin-top: 13px;
}
.technician-scheduling-workforce .wfBroader {
margin-top: 25px;
padding: 20px 22px;
border: 1px solid #d8e8f1;
border-left: 4px solid #29a1d6;
border-radius: 13px;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 22px;
}
.technician-scheduling-workforce .wfBroader strong {
font-size: 15px;
}
.technician-scheduling-workforce .wfBroader p {
font-size: 13px;
color: #607e91;
line-height: 1.7;
margin: 5px 0 0;
}
.technician-scheduling-workforce .wfBroader .detailLink {
margin: 0;
flex-shrink: 0;
font-size: 13px;
}
.technician-scheduling-workforce .wfCompare {
margin-top: 25px;
border: 1px solid #dbe9f2;
border-radius: 16px;
padding: 19px 23px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
background: #fff;
}
.technician-scheduling-workforce .wfCompare>div+div {
border-left: 1px solid #dbe9f2;
padding-left: 28px;
}
.technician-scheduling-workforce .wfCompare span {
font-size: 10px;
color: #5f8aa2;
letter-spacing: 0.07em;
text-transform: uppercase;
font-weight: 750;
}
.technician-scheduling-workforce .wfCompare strong {
display: block;
font-size: 15px;
color: #183a50;
margin-top: 4px;
}
.technician-scheduling-workforce .wfCompare p {
margin: 5px 0 0;
font-size: 12px;
color: #6a8293;
line-height: 1.7;
}
.technician-scheduling-workforce .wfRoleTag {
display: inline-block;
font-size: 10px;
font-weight: 750;
border-radius: 6px;
padding: 4px 8px;
background: #e9f7fd;
color: #257ca3;
}
.technician-scheduling-workforce .wfReview p {
font-size: 14px;
line-height: 1.75;
}
.technician-scheduling-workforce .wfReview h3 {
margin-top: 14px;
font-size: 22px;
}
.technician-scheduling-workforce .wfReview strong {
font-size: 13px;
color: #167faa;
}
.technician-scheduling-workforce .wfReview span {
font-size: 11px;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem {
border-left: 1px solid #353535;
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem strong {
font-size: 15px;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem span {
display: block;
font-size: 11px;
color: #c9d6e0;
margin-top: 5px;
}
.technician-scheduling-workforce .workflow-label {
font-size: 12px;
color: #b8cedd;
display: block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfIntegrationNote {
font-size: 12px;
line-height: 1.75;
color: #60788b;
margin-top: 20px;
}
.technician-scheduling-workforce .wfIntegrationNote a {
color: #15789f;
text-decoration: underline;
text-underline-offset: 3px;
}
.technician-scheduling-workforce .pageFoot a:hover {
text-decoration: underline;
}
.technician-scheduling-workforce .footerLinks {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .pageFoot p {
font-size: 11px;
margin: 11px 0 0;
}
.technician-scheduling-workforce .wfRelated {
font-size: 12px;
line-height: 1.8;
margin-top: 25px;
color: #70869a;
text-align: center;
}
.technician-scheduling-workforce .wfRelated a {
color: #147ea6;
text-decoration: underline;
text-underline-offset: 3px;
}
section[id] {
scroll-margin-top: 18px;
}
.technician-scheduling-workforce .visualNote {
font-size: 10px !important;
line-height: 1.6 !important;
margin-top: 10px !important;
}
.technician-scheduling-workforce .faq details[open] summary {
margin-bottom: 8px;
}
.technician-scheduling-workforce .final .ctaBtns a {
width: 100%;
}
.technician-scheduling-workforce .fi {
line-height: 1.65;
}
.technician-scheduling-workforce .wfHero *,
.technician-scheduling-workforce .wfCanvas * {
animation: none !important;
}
}
@media (min-width: 1700px) {
.technician-scheduling-workforce .wfHero {
min-height: 820px;
}
.technician-scheduling-workforce .wfHeroInner {
padding: 77px 0;
}
.technician-scheduling-workforce .wfHeroArt {
height: 620px;
}
.technician-scheduling-workforce .wfHeroMonitor {
top: 82px;
}
.technician-scheduling-workforce .wfBoardBody {
padding: 25px;
}
.technician-scheduling-workforce .wfBoardHeading h3 {
font-size: 27px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterRow {
min-height: 69px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterAxis,
.technician-scheduling-workforce .wfHeroMonitor .wfRosterRow {
grid-template-columns: 151px minmax(0, 1fr);
}
.technician-scheduling-workforce .wfHeroMonitor .wfPerson b {
font-size: 12px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfPerson small {
font-size: 10px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfBlock {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterAxis {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfBoardFoot {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMini.shift {
right: 6%;
top: 20px;
}
.technician-scheduling-workforce .wfHeroMini.cover {
left: 6%;
bottom: 0;
}
.technician-scheduling-workforce .wfHeroLabel {
bottom: 12px;
}
.technician-scheduling-workforce .heroProofGrid strong {
font-size: 14px;
}
.technician-scheduling-workforce .heroProofGrid span {
font-size: 11px;
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
.technician-scheduling-workforce .wfHeroInner {
width: 92%;
grid-template-columns: 45% 55%;
} .technician-scheduling-workforce .wfHeroCopy {
padding-right: 23px;
}
.technician-scheduling-workforce .wfEy {
font-size: 10px;
}
.technician-scheduling-workforce .wfLead {
font-size: 15px;
}
.technician-scheduling-workforce .heroBtn {
font-size: 12px;
padding: 13px 14px;
gap: 8px;
}
.technician-scheduling-workforce .wfHeroArt {
height: 560px;
}
.technician-scheduling-workforce .wfBoardBody {
padding: 15px;
}
.technician-scheduling-workforce .wfBoardHeading h3 {
font-size: 20px;
}
.technician-scheduling-workforce .wfRosterAxis,
.technician-scheduling-workforce .wfRosterRow {
grid-template-columns: 111px minmax(0, 1fr);
}
.technician-scheduling-workforce .wfPerson {
gap: 6px;
padding-left: 7px;
}
.technician-scheduling-workforce .wfPerson b {
font-size: 9px;
}
.technician-scheduling-workforce .wfBlock {
font-size: 8px;
padding: 8px 4px;
}
.technician-scheduling-workforce .wfHeroMini.shift {
top: 9px;
width: 184px;
}
.technician-scheduling-workforce .wfHeroMini.cover {
left: 3%;
width: 213px;
}
.technician-scheduling-workforce .wfHeroLabel {
max-width: 155px;
font-size: 8px;
}
.technician-scheduling-workforce .wfHeroMini strong {
font-size: 13px;
}
.technician-scheduling-workforce .wfHeroMiniTop {
font-size: 10px;
}
}
@media (max-width: 1024px) {
.technician-scheduling-workforce .wfHero {
display: block;
min-height: 0;
background: linear-gradient(130deg, #061c38, #143b5e 50%, #799eb7);
}
.technician-scheduling-workforce .wfHeroInner {
width: calc(100% - 64px);
grid-template-columns: 1fr;
gap: 16px;
padding: 44px 0 26px;
}
.technician-scheduling-workforce .wfHeroCopy {
max-width: 740px;
padding: 0;
} .technician-scheduling-workforce .wfLead {
font-size: 16px;
max-width: 660px;
}
.technician-scheduling-workforce .heroProof {
max-width: 600px;
}
.technician-scheduling-workforce .wfHeroArt {
height: 584px;
max-width: 720px;
margin: auto;
justify-self: center;
}
.technician-scheduling-workforce .wfHeroMonitor {
left: 0;
right: 0;
} .technician-scheduling-workforce .wfBuilding {
height: 52%;
width: 50%;
top: auto;
bottom: 0;
}
.technician-scheduling-workforce .wfBuilding.back {
height: 38%;
right: 35%;
bottom: -20px;
width: 50%;
}
.technician-scheduling-workforce .wfHeroMini.cover {
bottom: 18px;
left: 4%;
}
.technician-scheduling-workforce .wfHeroLabel {
bottom: 30px;
}
.technician-scheduling-workforce .visual {
max-width: 700px;
margin: auto;
}
}
@media (max-width: 640px) {
.technician-scheduling-workforce .wfHeroInner {
width: calc(100% - 40px);
padding: 29px 0 20px;
gap: 18px;
}
.technician-scheduling-workforce .heroCrumb {
font-size: 9px;
margin-bottom: 21px;
line-height: 1.65;
}
.technician-scheduling-workforce .wfEy {
font-size: 9px;
letter-spacing: 0.07em;
gap: 8px;
margin-bottom: 18px;
}
.technician-scheduling-workforce .wfEy:before {
width: 18px;
flex-basis: 18px;
margin-top: 6px;
} .technician-scheduling-workforce .wfLead {
font-size: 14px;
margin-top: 20px;
line-height: 1.8;
}
.technician-scheduling-workforce .heroActions {
gap: 9px;
margin-top: 21px;
}
.technician-scheduling-workforce .heroBtn {
font-size: 12px;
padding: 12px 14px;
gap: 8px;
min-height: 48px;
}
.technician-scheduling-workforce .heroBtn .icon {
width: 16px;
height: 16px;
}
.technician-scheduling-workforce .heroMicro {
font-size: 10px;
}
.technician-scheduling-workforce .heroProof {
margin-top: 22px;
padding-top: 15px;
}
.technician-scheduling-workforce .heroProofLabel {
font-size: 8px;
}
.technician-scheduling-workforce .heroProofGrid {
gap: 7px;
}
.technician-scheduling-workforce .heroProofGrid strong {
font-size: 10px;
}
}
.technician-scheduling-workforce .wfTableScroll {
overflow-x: auto;
border: 1px solid #dce9f1;
border-radius: 11px;
background: #fff;
}
.technician-scheduling-workforce .wfTable {
border-collapse: collapse;
width: 100%;
font-size: 11px;
line-height: 1.6;
text-align: left;
}
.technician-scheduling-workforce .wfTable th {
font-weight: 750;
background: #f6fafd;
color: #597991;
}
.technician-scheduling-workforce .wfTable td,
.technician-scheduling-workforce .wfTable th {
padding: 10px 9px;
border-bottom: 1px solid #e6eff5;
}
.technician-scheduling-workforce .wfTable tr:last-child td {
border-bottom: 0;
}
.technician-scheduling-workforce .wfTable td {
color: #355973;
}
.technician-scheduling-workforce .wfTable .wfPill {
font-size: 9px;
padding: 4px 7px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable {
font-size: 10px;
min-width: 286px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable td,
.technician-scheduling-workforce .wfRosterWeek .wfTable th {
text-align: center;
padding: 10px 4px;
}
.technician-scheduling-workforce .wfRosterWeek .wfTable td:first-child,
.technician-scheduling-workforce .wfRosterWeek .wfTable th:first-child {
text-align: left;
padding-left: 11px;
width: 86px;
}
.technician-scheduling-workforce .wfDay {
padding: 4px 6px;
border-radius: 5px;
background: #e5f4fc;
color: #287ba5;
font-weight: 750;
display: inline-block;
font-size: 9px;
}
.technician-scheduling-workforce .wfDay.evening {
background: #f0ecfa;
color: #826db3;
}
.technician-scheduling-workforce .wfLegend {
font-size: 9px;
color: #6a8395;
display: flex;
gap: 13px;
margin-top: 11px;
line-height: 1.6;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfLegend>span {
display: flex;
gap: 5px;
align-items: center;
}
.technician-scheduling-workforce .wfLegend i {
width: 8px;
height: 8px;
background: #55a6d4;
border-radius: 2px;
display: inline-block;
}
.technician-scheduling-workforce .wfLegend i.purple {
background: #9886c4;
}
.technician-scheduling-workforce .wfLegend i.green {
background: #52a981;
}
.technician-scheduling-workforce .wfStatGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.technician-scheduling-workforce .wfStat {
padding: 14px 12px;
border: 1px solid #dbe9f2;
background: #fff;
border-radius: 12px;
}
.technician-scheduling-workforce .wfStat strong {
font-size: 28px;
font-weight: 800;
line-height: 1.1;
display: block;
color: #174764;
}
.technician-scheduling-workforce .wfStat span {
display: block;
font-size: 9px;
line-height: 1.5;
color: #6c879a;
margin-top: 7px;
}
.technician-scheduling-workforce .wfCapacityList {
background: #fff;
border: 1px solid #dbe8f0;
border-radius: 15px;
padding: 4px 15px;
}
.technician-scheduling-workforce .wfCapacity {
padding: 14px 0;
border-bottom: 1px solid #e5eef4;
}
.technician-scheduling-workforce .wfCapacity:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfCapacityTop {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.technician-scheduling-workforce .wfCapacityTop b {
display: block;
font-size: 12px;
line-height: 1.4;
}
.technician-scheduling-workforce .wfCapacityTop small {
display: block;
font-size: 10px;
color: #728a9a;
line-height: 1.5;
}
.technician-scheduling-workforce .wfCapacityTop .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfBar {
height: 7px;
border-radius: 8px;
background: #e8f1f7;
overflow: hidden;
}
.technician-scheduling-workforce .wfBar i {
display: block;
width: var(--fill);
height: 100%;
background: #469dcc;
border-radius: 8px;
}
.technician-scheduling-workforce .wfBar.purple i {
background: #9a8ac9;
}
.technician-scheduling-workforce .wfBar.green i {
background: #55a881;
}
.technician-scheduling-workforce .wfCapacityDetail {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #6c8598;
margin-top: 7px;
gap: 9px;
}
.technician-scheduling-workforce .wfCapacity.absent {
display: flex;
align-items: center;
gap: 9px;
}
.technician-scheduling-workforce .wfCapacity.absent b {
font-size: 12px;
display: block;
}
.technician-scheduling-workforce .wfCapacity.absent small {
font-size: 10px;
color: #708798;
display: block;
}
.technician-scheduling-workforce .wfCapacity.absent .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfLeaveCard+.wfLeaveCard {
margin-top: 12px;
}
.technician-scheduling-workforce .wfLeaveHead {
display: flex;
gap: 9px;
align-items: center;
margin-bottom: 14px;
}
.technician-scheduling-workforce .wfLeaveHead .wfPill {
margin-left: auto;
}
.technician-scheduling-workforce .wfLeaveHead b {
font-size: 13px;
display: block;
line-height: 1.4;
}
.technician-scheduling-workforce .wfLeaveHead small {
display: block;
font-size: 10px;
color: #718598;
line-height: 1.5;
}
.technician-scheduling-workforce .wfLeaveDates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: #f5fafd;
border-radius: 9px;
padding: 10px 12px;
font-size: 10px;
color: #6f8599;
}
.technician-scheduling-workforce .wfLeaveDates strong {
font-size: 12px;
color: #2c506c;
display: block;
font-weight: 650;
margin-top: 3px;
}
.technician-scheduling-workforce .wfLeaveStatus {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
margin-top: 13px;
}
.technician-scheduling-workforce .wfLeaveStatus span {
font-size: 9px;
color: #658097;
line-height: 1.6;
}
.technician-scheduling-workforce .wfLeaveStatus .wfUiAction {
font-size: 9px;
padding: 7px 9px;
margin: 0;
}
.technician-scheduling-workforce .wfLeavePath {
display: flex;
align-items: center;
gap: 7px;
justify-content: center;
font-size: 10px;
color: #527c93;
margin-top: 16px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .wfLeavePath .icon {
width: 13px;
height: 13px;
}
.technician-scheduling-workforce .wfLeavePath strong {
color: #287c5f;
}
.technician-scheduling-workforce .wfTimePair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.technician-scheduling-workforce .wfTimeBox {
background: #f0f8fd;
border: 1px solid #d8e9f4;
border-radius: 11px;
padding: 14px;
}
.technician-scheduling-workforce .wfTimeBox .icon {
color: #328fba;
width: 18px;
height: 18px;
margin-bottom: 6px;
}
.technician-scheduling-workforce .wfTimeBox span {
font-size: 10px;
color: #628195;
display: block;
}
.technician-scheduling-workforce .wfTimeBox strong {
font-size: 26px;
line-height: 1.2;
color: #235774;
display: block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfTimeTotal {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 13px;
margin-top: 13px;
border-top: 1px solid #e4edf3;
font-size: 11px;
color: #688599;
gap: 8px;
}
.technician-scheduling-workforce .wfTimeTotal strong {
font-size: 17px;
color: #26698a;
}
.technician-scheduling-workforce .wfSettings {
margin-top: 13px;
}
.technician-scheduling-workforce .wfSetting {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 9px 0;
border-bottom: 1px solid #e6eef4;
font-size: 10px;
color: #688295;
}
.technician-scheduling-workforce .wfSetting:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfSetting b {
font-weight: 650;
color: #315975;
text-align: right;
}
.technician-scheduling-workforce .wfSummaryItem {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid #e4edf3;
}
.technician-scheduling-workforce .wfSummaryItem:last-child {
border-bottom: 0;
}
.technician-scheduling-workforce .wfSummaryIcon {
width: 31px;
height: 31px;
border-radius: 9px;
background: #e6f4ef;
color: #31825d;
display: grid;
place-items: center;
flex-shrink: 0;
}
.technician-scheduling-workforce .wfSummaryIcon.blue {
background: #e7f3fb;
color: #398bb9;
}
.technician-scheduling-workforce .wfSummaryIcon.amber {
background: #fff3df;
color: #ae7c32;
}
.technician-scheduling-workforce .wfSummaryIcon .icon {
width: 17px;
height: 17px;
}
.technician-scheduling-workforce .wfSummaryItem b {
font-size: 12px;
line-height: 1.4;
display: block;
}
.technician-scheduling-workforce .wfSummaryItem small {
font-size: 10px;
color: #70889a;
line-height: 1.6;
display: block;
margin-top: 3px;
}
.technician-scheduling-workforce .wfSummaryItem .wfPill {
margin-left: auto;
font-size: 9px;
}
.technician-scheduling-workforce .wfVedaPanel {
padding: 23px;
border-radius: 22px;
background: #132533;
border: 1px solid #374d5e;
color: #d4e6f3;
}
.technician-scheduling-workforce .wfVedaTitle {
display: flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 750;
margin-bottom: 17px;
color: #f1f7fc;
}
.technician-scheduling-workforce .wfVedaTitle .icon {
color: #ffd056;
}
.technician-scheduling-workforce .wfVedaPrompt {
padding: 15px;
background: #203b50;
border: 1px solid #36576f;
border-radius: 14px 14px 3px 14px;
font-size: 13px;
line-height: 1.7;
margin: 15px 0;
}
.technician-scheduling-workforce .wfVedaAnswer {
padding: 17px;
background: #192e3f;
border: 1px solid #345063;
border-radius: 13px;
font-size: 12px;
line-height: 1.7;
}
.technician-scheduling-workforce .wfVedaAnswer strong {
display: block;
color: #f1f7fd;
font-size: 14px;
margin-bottom: 12px;
}
.technician-scheduling-workforce .wfVedaAnswer p {
font-size: 12px !important;
color: #bfd5e5 !important;
margin: 12px 0 0 !important;
}
.technician-scheduling-workforce .wfVedaTask {
border-top: 1px solid #324a5b;
padding: 10px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 13px;
font-size: 11px;
}
.technician-scheduling-workforce .wfVedaTask b {
font-size: 12px;
display: block;
color: #e8f3fb;
}
.technician-scheduling-workforce .wfVedaTask small {
font-size: 10px;
color: #a0bcd0;
display: block;
margin-top: 3px;
}
.technician-scheduling-workforce .wfVedaHint {
font-size: 10px;
color: #a6c0d3;
line-height: 1.7;
margin-top: 13px;
}
.technician-scheduling-workforce .wfBroader {
margin-top: 25px;
padding: 20px 22px;
border: 1px solid #d8e8f1;
border-left: 4px solid #29a1d6;
border-radius: 13px;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 22px;
}
.technician-scheduling-workforce .wfBroader strong {
font-size: 15px;
}
.technician-scheduling-workforce .wfBroader p {
font-size: 13px;
color: #607e91;
line-height: 1.7;
margin: 5px 0 0;
}
.technician-scheduling-workforce .wfBroader .detailLink {
margin: 0;
flex-shrink: 0;
font-size: 13px;
}
.technician-scheduling-workforce .wfCompare {
margin-top: 25px;
border: 1px solid #dbe9f2;
border-radius: 16px;
padding: 19px 23px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
background: #fff;
}
.technician-scheduling-workforce .wfCompare>div+div {
border-left: 1px solid #dbe9f2;
padding-left: 28px;
}
.technician-scheduling-workforce .wfCompare span {
font-size: 10px;
color: #5f8aa2;
letter-spacing: 0.07em;
text-transform: uppercase;
font-weight: 750;
}
.technician-scheduling-workforce .wfCompare strong {
display: block;
font-size: 15px;
color: #183a50;
margin-top: 4px;
}
.technician-scheduling-workforce .wfCompare p {
margin: 5px 0 0;
font-size: 12px;
color: #6a8293;
line-height: 1.7;
}
.technician-scheduling-workforce .wfRoleTag {
display: inline-block;
font-size: 10px;
font-weight: 750;
border-radius: 6px;
padding: 4px 8px;
background: #e9f7fd;
color: #257ca3;
}
.technician-scheduling-workforce .wfReview p {
font-size: 14px;
line-height: 1.75;
}
.technician-scheduling-workforce .wfReview h3 {
margin-top: 14px;
font-size: 22px;
}
.technician-scheduling-workforce .wfReview strong {
font-size: 13px;
color: #167faa;
}
.technician-scheduling-workforce .wfReview span {
font-size: 11px;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem {
border-left: 1px solid #353535;
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem strong {
font-size: 15px;
}
.technician-scheduling-workforce .wfWorkflowBand .ratingItem span {
display: block;
font-size: 11px;
color: #c9d6e0;
margin-top: 5px;
}
.technician-scheduling-workforce .workflow-label {
font-size: 12px;
color: #b8cedd;
display: block;
margin-top: 5px;
}
.technician-scheduling-workforce .wfIntegrationNote {
font-size: 12px;
line-height: 1.75;
color: #60788b;
margin-top: 20px;
}
.technician-scheduling-workforce .wfIntegrationNote a {
color: #15789f;
text-decoration: underline;
text-underline-offset: 3px;
}
.technician-scheduling-workforce .pageFoot a:hover {
text-decoration: underline;
}
.technician-scheduling-workforce .footerLinks {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.technician-scheduling-workforce .pageFoot p {
font-size: 11px;
margin: 11px 0 0;
}
.technician-scheduling-workforce .wfRelated {
font-size: 12px;
line-height: 1.8;
margin-top: 25px;
color: #70869a;
text-align: center;
}
.technician-scheduling-workforce .wfRelated a {
color: #147ea6;
text-decoration: underline;
text-underline-offset: 3px;
}
section[id] {
scroll-margin-top: 18px;
}
.technician-scheduling-workforce .visualNote {
font-size: 10px !important;
line-height: 1.6 !important;
margin-top: 10px !important;
}
.technician-scheduling-workforce .faq details[open] summary {
margin-bottom: 8px;
}  .technician-scheduling-workforce .fi {
line-height: 1.65;
}
.technician-scheduling-workforce .wfHero *,
.technician-scheduling-workforce .wfCanvas * {
animation: none !important;
}
@media (min-width: 1700px) {
.technician-scheduling-workforce .wfHero {
min-height: 820px;
}
.technician-scheduling-workforce .wfHeroInner {
padding: 77px 0;
}
.technician-scheduling-workforce .wfHeroArt {
height: 620px;
}
.technician-scheduling-workforce .wfHeroMonitor {
top: 82px;
}
.technician-scheduling-workforce .wfBoardBody {
padding: 25px;
}
.technician-scheduling-workforce .wfBoardHeading h3 {
font-size: 27px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterRow {
min-height: 69px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterAxis,
.technician-scheduling-workforce .wfHeroMonitor .wfRosterRow {
grid-template-columns: 151px minmax(0, 1fr);
}
.technician-scheduling-workforce .wfHeroMonitor .wfPerson b {
font-size: 12px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfPerson small {
font-size: 10px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfBlock {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfRosterAxis {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMonitor .wfBoardFoot {
font-size: 11px;
}
.technician-scheduling-workforce .wfHeroMini.shift {
right: 6%;
top: 20px;
}
.technician-scheduling-workforce .wfHeroMini.cover {
left: 6%;
bottom: 0;
}
.technician-scheduling-workforce .wfHeroLabel {
bottom: 12px;
}
.technician-scheduling-workforce .heroProofGrid strong {
font-size: 14px;
}
.technician-scheduling-workforce .heroProofGrid span {
font-size: 11px;
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
.technician-scheduling-workforce .wfHeroInner {
width: 92%;
grid-template-columns: 45% 55%;
} .technician-scheduling-workforce .wfHeroCopy {
padding-right: 23px;
}
.technician-scheduling-workforce .wfEy {
font-size: 10px;
}
.technician-scheduling-workforce .wfLead {
font-size: 15px;
}
.technician-scheduling-workforce .heroBtn {
font-size: 12px;
padding: 13px 14px;
gap: 8px;
}
.technician-scheduling-workforce .wfHeroArt {
height: 560px;
}
.technician-scheduling-workforce .wfBoardBody {
padding: 15px;
}
.technician-scheduling-workforce .wfBoardHeading h3 {
font-size: 20px;
}
.technician-scheduling-workforce .wfRosterAxis,
.technician-scheduling-workforce .wfRosterRow {
grid-template-columns: 111px minmax(0, 1fr);
}
.technician-scheduling-workforce .wfPerson {
gap: 6px;
padding-left: 7px;
}
.technician-scheduling-workforce .wfPerson b {
font-size: 9px;
}
.technician-scheduling-workforce .wfBlock {
font-size: 8px;
padding: 8px 4px;
}
.technician-scheduling-workforce .wfHeroMini.shift {
top: 9px;
width: 184px;
}
.technician-scheduling-workforce .wfHeroMini.cover {
left: 3%;
width: 213px;
}
.technician-scheduling-workforce .wfHeroLabel {
max-width: 155px;
font-size: 8px;
}
.technician-scheduling-workforce .wfHeroMini strong {
font-size: 13px;
}
.technician-scheduling-workforce .wfHeroMiniTop {
font-size: 10px;
}
}
@media (max-width: 1024px) {
.technician-scheduling-workforce .wfHero {
display: block;
min-height: 0;
background: linear-gradient(130deg, #061c38, #143b5e 50%, #799eb7);
}
.technician-scheduling-workforce .wfHeroInner {
width: calc(100% - 64px);
grid-template-columns: 1fr;
gap: 16px;
padding: 44px 0 26px;
}
.technician-scheduling-workforce .wfHeroCopy {
max-width: 740px;
padding: 0;
} .technician-scheduling-workforce .wfLead {
font-size: 16px;
max-width: 660px;
}
.technician-scheduling-workforce .heroProof {
max-width: 600px;
}
.technician-scheduling-workforce .wfHeroArt {
height: 584px;
max-width: 720px;
margin: auto;
justify-self: center;
}
.technician-scheduling-workforce .wfHeroMonitor {
left: 0;
right: 0;
} .technician-scheduling-workforce .wfBuilding {
height: 52%;
width: 50%;
top: auto;
bottom: 0;
}
.technician-scheduling-workforce .wfBuilding.back {
height: 38%;
right: 35%;
bottom: -20px;
width: 50%;
}
.technician-scheduling-workforce .wfHeroMini.cover {
bottom: 18px;
left: 4%;
}
.technician-scheduling-workforce .wfHeroLabel {
bottom: 30px;
}
.technician-scheduling-workforce .visual {
max-width: 700px;
margin: auto;
}
}
@media (max-width: 640px) {
.technician-scheduling-workforce .wfHeroInner {
width: calc(100% - 40px);
padding: 29px 0 20px;
gap: 18px;
}
.technician-scheduling-workforce .heroCrumb {
font-size: 9px;
margin-bottom: 21px;
line-height: 1.65;
}
.technician-scheduling-workforce .wfEy {
font-size: 9px;
letter-spacing: 0.07em;
gap: 8px;
margin-bottom: 18px;
}
.technician-scheduling-workforce .wfEy:before {
width: 18px;
flex-basis: 18px;
margin-top: 6px;
} .technician-scheduling-workforce .wfLead {
font-size: 14px;
margin-top: 20px;
line-height: 1.8;
}
.technician-scheduling-workforce .heroActions {
gap: 9px;
margin-top: 21px;
}
.technician-scheduling-workforce .heroBtn {
font-size: 12px;
padding: 12px 14px;
gap: 8px;
min-height: 48px;
}
.technician-scheduling-workforce .heroBtn .icon {
width: 16px;
height: 16px;
}
.technician-scheduling-workforce .heroMicro {
font-size: 10px;
}
.technician-scheduling-workforce .heroProof {
margin-top: 22px;
padding-top: 15px;
}
.technician-scheduling-workforce .heroProofLabel {
font-size: 8px;
}
.technician-scheduling-workforce .heroProofGrid {
gap: 7px;
}
.technician-scheduling-workforce .heroProofGrid strong {
font-size: 10px;
}
.technician-scheduling-workforce .wfBroader {
flex-direction: column;
}
}
.technician-scheduling-workforce .detailLink .icon {
width: 16px;
height: 16px;
background: transparent;
}
.technician-scheduling-workforce .wfArchitecture img {
width: 100%;
object-fit: cover;
height: 100%;
}  #dfm-facility-header {
--dfm-night: #102846;
--dfm-accent: #0076dd;
position: relative;
isolation: isolate;
display: grid;
align-items: center;
width: 100%;
max-width: none;
min-width: 0;
min-height: 0;
height: auto;
aspect-ratio: 2014 / 781;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
overflow: hidden;
background: var(--dfm-night);
color: #fff;
font-family: var(--dfm-font-family, Inter, "Segoe UI", Arial, sans-serif);
text-align: left;
box-shadow: none;
}
#dfm-facility-header,
#dfm-facility-header * {
box-sizing: border-box;
} #dfm-facility-header .dfm-header__media {
position: absolute;
z-index: 0;
inset: 0;
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
pointer-events: none;
}
#dfm-facility-header .dfm-header__image {
display: block;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
object-fit: contain;
object-position: center;
opacity: 1;
filter: none;
box-shadow: none;
}
#dfm-facility-header .dfm-header__inner {
position: relative;
z-index: 1;
width: 90%;
max-width: 1320px;
min-width: 0;
margin: 0 auto;
padding: clamp(20px, calc(8vw - 84px), 76px) 0;
}
#dfm-facility-header .dfm-header__copy {
width: 46%;
max-width: 620px;
margin: 0;
padding: 0;
}
#dfm-facility-header .dfm-header__eyebrow {
display: inline-block;
max-width: 100%;
margin: 0 0 18px;
padding: 7px 12px;
border: 1px solid #fff1bb;
border-radius: 100px;
background: #fff5d1;
color: #695000;
font-size: clamp(10px, 0.6vw, 11px);
font-weight: 750;
line-height: 1.3;
letter-spacing: 0.055em;
text-transform: uppercase;
}
#dfm-facility-header h1 {
margin: 0 0 20px;
padding: 0;
color: #fff;
font-family: inherit; font-weight: 700;
line-height: 1.055;
letter-spacing: -0.045em;
text-wrap: nowrap;
text-transform: none;
text-shadow: none;
}
#dfm-facility-header .dfm-header__accent {
color: var(--dfm-accent);
}
#dfm-facility-header .dfm-header__lead {
max-width: 100%;
margin: 0;
padding: 0;
color: #e1ebf6;
font-size: clamp(15px, 1.04vw, 18px);
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
}
#dfm-facility-header .dfm-header__lead strong {
color: #fff;
font-weight: 700;
}
#dfm-facility-header .dfm-header__actions {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 12px;
margin: 22px 0 0;
padding: 0;
}
#dfm-facility-header .dfm-header__button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: 10px;
min-height: 48px;
margin: 0;
padding: 12px 19px;
border: 1px solid transparent;
border-radius: 8px;
font-family: inherit;
font-size: clamp(13px, 0.77vw, 15px);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
text-align: center;
text-decoration: none;
text-transform: none;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease;
}
#dfm-facility-header .dfm-header__button--primary {
border-color: rgba(255, 255, 255, 0.24);
background: #101719;
color: #fff;
}
#dfm-facility-header .dfm-header__button--primary:hover {
border-color: #65cfff;
background: #183343;
color: #fff;
}
#dfm-facility-header .dfm-header__button--secondary {
border-color: #fff;
border-bottom: 2px solid #ffcb38;
background: #fff;
color: #101719;
}
#dfm-facility-header .dfm-header__button--secondary:hover {
border-color: #fff3bf;
border-bottom-color: #ffcb38;
background: #fff3bf;
color: #101719;
}
#dfm-facility-header .dfm-header__button:focus-visible {
outline: 3px solid #ffcb38;
outline-offset: 5px;
}
#dfm-facility-header .dfm-header__button svg {
display: block;
flex: 0 0 18px;
width: 18px;
height: 18px;
}
#dfm-facility-header .dfm-header__microcopy {
margin: 16px 0 0;
padding: 0;
color: #d0deed;
font-size: clamp(11px, 0.68vw, 13px);
font-weight: 400;
line-height: 1.55;
}
#dfm-facility-header .dfm-header__capabilities {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 18px;
margin: 24px 0 0;
padding: 17px 0 0;
border-top: 1px solid rgba(218, 234, 250, 0.24);
color: #e0ebf7;
font-size: clamp(10px, 0.67vw, 12px);
font-weight: 600;
line-height: 1.5;
}
#dfm-facility-header .dfm-header__capabilities>span {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
white-space: nowrap;
}
#dfm-facility-header .dfm-header__capabilities svg {
display: block;
flex: 0 0 15px;
width: 15px;
height: 15px;
color: #79d6ff;
} @media (max-width: 1199px) {
#dfm-facility-header {
display: flex;
flex-direction: column;
align-items: stretch;
aspect-ratio: auto;
}
#dfm-facility-header .dfm-header__inner {
order: 0;
width: calc(100% - 64px);
max-width: 720px;
padding: 54px 0 38px;
}
#dfm-facility-header .dfm-header__copy {
width: 100%;
max-width: none;
}
#dfm-facility-header .dfm-header__media {
position: relative;
order: 1;
inset: auto;
width: 100%;
height: auto;
}
#dfm-facility-header .dfm-header__image {
height: auto;
} #dfm-facility-header .dfm-header__lead {
max-width: 650px;
font-size: 17px;
}
#dfm-facility-header .dfm-header__button {
font-size: 14px;
}
#dfm-facility-header .dfm-header__microcopy {
font-size: 12px;
}
#dfm-facility-header .dfm-header__capabilities {
font-size: 12px;
gap: 12px 22px;
}
}
@media (max-width: 599px) {
#dfm-facility-header .dfm-header__inner {
width: calc(100% - 40px);
padding: 38px 0 30px;
}
#dfm-facility-header .dfm-header__eyebrow {
font-size: 9px;
padding: 7px 10px;
margin-bottom: 20px;
}
#dfm-facility-header h1 {
margin-bottom: 20px; letter-spacing: -0.045em;
}
#dfm-facility-header .dfm-header__image {
display: none;
}
#dfm-facility-header .dfm-header__lead {
font-size: 15px;
line-height: 1.65;
}
#dfm-facility-header .dfm-header__actions {
gap: 10px;
margin-top: 22px;
}
#dfm-facility-header .dfm-header__button {
min-height: 46px;
padding: 11px 14px;
font-size: 12px;
gap: 8px;
}
#dfm-facility-header .dfm-header__microcopy {
margin-top: 16px;
font-size: 11px;
}
#dfm-facility-header .dfm-header__capabilities { grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 12px;
margin-top: 23px;
padding-top: 18px;
font-size: 11px;
}
}
@media (max-width: 359px) {
#dfm-facility-header .dfm-header__actions {
flex-direction: column;
align-items: stretch;
}
#dfm-facility-header .dfm-header__button {
width: 100%;
}
#dfm-facility-header .dfm-header__capabilities {
font-size: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
#dfm-facility-header .dfm-header__button {
transition: none;
}
}
@media (max-width: 767px) {
.fm-page .ratingItem {
border-left: 0 !important;
}
.new-theme-design .dzcmms-logo {
height: 53px !important;
}
} .fm-automated-maintenance-scheduling .hero { background: url(https://dreamzcmms.com/wp-content/uploads/2026/09/Automated-Maintenance-Scheduling.webp) no-repeat;
background-size: cover;
}
.fm-automated-maintenance-scheduling .hero h1,
.fm-automated-maintenance-scheduling .hero .lead,
.fm-automated-maintenance-scheduling .hero .micro {
color: #fff;
}
@media (max-width: 767px) {
.fm-automated-maintenance-scheduling .hero {
background: #041e48;
}
.ai-powered-facility-management .visual {
order: 0 !important;
}
.ai-powered-facility-management .copy {
order: 1 !important;
}
}
#fat-asset-header {
position: relative;
isolation: isolate;
display: grid;
align-items: center;
width: 100%;
max-width: none;
min-width: 0;
height: auto;
min-height: min(56.2799vw, 820px);
max-height: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
overflow: visible;
background: linear-gradient(180deg, #051d3f 0%, #021a3e 55%, #041b39 100%);
color: #fff;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 16px;
line-height: 1.65;
text-align: left;
box-shadow: none;
}
#fat-asset-header,
#fat-asset-header *,
#fat-asset-header *::before,
#fat-asset-header *::after {
box-sizing: border-box;
}
#fat-asset-header::before,
#fat-asset-header::after {
content: none;
display: none;
} #fat-asset-header .fat-media {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
pointer-events: none;
}
#fat-asset-header .fat-image {
display: block;
width: 100%;
height: 100%;
min-width: 0;
max-width: none;
min-height: 0;
max-height: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0; object-fit: cover;
object-position: right center;
opacity: 1;
filter: none;
transform: none;
box-shadow: none;
}
#fat-asset-header .fat-wrap {
position: relative;
z-index: 1;
width: 90%;
max-width: 1320px;
min-width: 0;
margin: 0 auto;
padding: clamp(36px, 3.5vw, 68px) 0;
}
#fat-asset-header .fat-grid {
display: block;
width: 100%;
min-height: 0;
margin: 0;
padding: 0;
}
#fat-asset-header .fat-content {
width: 44%;
max-width: 620px;
min-width: 0;
margin: 0;
padding: 0;
color: #fff;
}
#fat-asset-header .fat-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
padding: 0;
color: #d1dfed;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
#fat-asset-header .fat-breadcrumbs a {
color: #8ed8ff;
text-decoration: none;
}
#fat-asset-header .fat-breadcrumbs a:hover {
text-decoration: underline;
}
#fat-asset-header .fat-eyebrow {
display: inline-flex;
align-items: center;
max-width: 100%;
margin: 0 0 16px;
padding: 7px 13px;
border: 1px solid rgba(255, 201, 40, 0.32);
border-radius: 999px;
background: rgba(255, 201, 40, 0.16);
color: #ffd863;
font-size: 12px;
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.02em;
}
#fat-asset-header h1 {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
color: #fff;
font-family: inherit; letter-spacing: -0.035em;
text-transform: none;
text-shadow: none;
overflow-wrap: normal;
}
#fat-asset-header .fat-lead {
max-width: none;
margin: 18px 0 0;
padding: 0;
color: #e0e9f4;
font-size: clamp(16px, 1.2vw, 18px);
font-weight: 400;
line-height: 1.65;
}
#fat-asset-header .fat-actions {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 12px;
margin: 24px 0 0;
padding: 0;
}
#fat-asset-header .fat-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
max-width: 100%;
margin: 0;
padding: 11px 22px;
border: 1px solid transparent;
border-radius: 12px;
font-family: inherit;
font-size: 15px;
font-weight: 800;
line-height: 1.4;
text-align: center;
text-decoration: none;
text-transform: none;
box-shadow: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
#fat-asset-header .fat-btn.black {
border-color: rgba(255, 255, 255, 0.2);
background: #0b0b0b;
color: #fff;
}
#fat-asset-header .fat-btn.yellow {
background: #ffc928;
color: #111;
}
#fat-asset-header .fat-btn.black:hover {
background: #162d40;
border-color: #8ed8ff;
}
#fat-asset-header .fat-btn.yellow:hover {
background: #ffda65;
}
#fat-asset-header a:focus-visible {
outline: 3px solid #8ed8ff;
outline-offset: 4px;
}
#fat-asset-header .fat-micro {
margin: 14px 0 0;
padding: 0;
color: #c8d7e8;
font-size: 12px;
font-weight: 400;
line-height: 1.7;
}
#fat-asset-header .fat-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 0;
padding: 0;
}
#fat-asset-header .fat-pills span {
display: inline-flex;
align-items: center;
max-width: 100%;
margin: 0;
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.fm-simplify-work-order-management .hero { background: url(https://dreamzcmms.com/wp-content/uploads/2026/09/Work-Order-Management-1.webp) no-repeat;
background-size: cover;
}
.fm-simplify-work-order-management h1,
.fm-simplify-work-order-management .lead,
.fm-simplify-work-order-management .hero .micro,
.fm-incident-reporting-tracking .awards__label {
color: #fff;
}
.fm-incident-reporting-tracking .hero { background: url(https://dreamzcmms.com/wp-content/uploads/2026/09/Incident-Reporting-Tracking-1.webp) no-repeat;
background-size: cover;
}
.fm-incident-reporting-tracking.spare-parts-inventory-management .hero { background: url(https://dreamzcmms.com/wp-content/uploads/2026/09/Spare-Parts-Inventory-Management-1.webp) no-repeat;
background-size: cover;
}
.fm-incident-reporting-tracking.energy-monitoring-sol .hero { background: url(https://dreamzcmms.com/wp-content/uploads/2026/09/Energy-Monitoring-Solutions-1.webp) no-repeat;
background-size: cover;
}
.fm-incident-reporting-tracking.ai-powered-checklists .hero { background: url(https://dreamzcmms.com/wp-content/uploads/2026/09/AI-Powered-Checklists-for-Compliance-1.webp) no-repeat;
background-size: cover;
}
.fm-incident-reporting-tracking.mobile-facility-management .hero { background: url(https://dreamzcmms.com/wp-content/uploads/2026/09/MobileFacilityManagement.png) no-repeat !important;
background-size: cover !important;
}
.fm-incident-reporting-tracking h1,
.fm-incident-reporting-tracking .lead,
.fm-incident-reporting-tracking .hero .micro,
.fm-incident-reporting-tracking .awards__label {
color: #fff !important;
}
.fm-simplify-work-order-management h1,
.fm-simplify-work-order-management .lead,
.fm-simplify-work-order-management .hero .micro {
color: #fff;
}
@media (max-width: 1199px) {
#fat-asset-header {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
height: auto;
max-height: none;
background: #051d3f;
}
#fat-asset-header .fat-wrap {
order: 0;
width: calc(100% - 64px);
max-width: 760px;
margin: 0 auto;
padding: 48px 0 32px;
}
#fat-asset-header .fat-content {
width: 100%;
max-width: none;
} #fat-asset-header .fat-lead {
max-width: 720px;
font-size: 17px;
}
#fat-asset-header .fat-media {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: auto;
margin: 0;
}
#fat-asset-header .fat-image {
width: 100%;
height: auto;
aspect-ratio: 1672 / 941;
object-fit: contain;
object-position: center;
}
}
@media (max-width: 640px) {
#fat-asset-header .fat-wrap {
width: calc(100% - 40px);
padding: 34px 0 28px;
}
#fat-asset-header .fat-breadcrumbs {
font-size: 11px;
margin-bottom: 16px;
}
#fat-asset-header .fat-eyebrow {
font-size: 11px;
margin-bottom: 14px;
} #fat-asset-header .fat-lead {
margin-top: 18px;
font-size: 16px;
line-height: 1.65;
}
#fat-asset-header .fat-actions {
gap: 10px;
margin-top: 22px;
}
#fat-asset-header .fat-btn {
min-height: 48px;
padding: 11px 17px;
font-size: 14px;
}
#fat-asset-header .fat-micro {
font-size: 11px;
}
#fat-asset-header .fat-pills span {
font-size: 10px;
}
}
@media (max-width: 359px) {
#fat-asset-header .fat-actions {
flex-direction: column;
}
#fat-asset-header .fat-btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
#fat-asset-header .fat-btn {
transition: none;
}
}
@media (max-width: 767px) {
.fm-facility-asset-tracking .fat-image {
display: none;
}
.fm-simplify-work-order-management .hero,
.fm-incident-reporting-tracking .hero,
.fm-incident-reporting-tracking.spare-parts-inventory-management .hero,
.fm-incident-reporting-tracking.energy-monitoring-sol .hero,
.fm-incident-reporting-tracking.ai-powered-checklists .hero,
.fm-incident-reporting-tracking.mobile-facility-management .hero,
.fm-incident-reporting-tracking.mobile-facility-management .hero {
background: #041e48;
}
.vendor-amc-contract-management .amcHero>img,
.technician-scheduling-workforce .wfArchitecture>img {
display: none !important;
}
.vendor-amc-contract-management .amcHero {
padding-bottom: 0;
}
.new-theme-design.mobile-facility-management .hero .button.primary,
.new-theme-design.mobile-facility-management .hero .button.secondary,
.new-theme-design.mobile-facility-management .dfm-header__inner .button.secondary,
.new-theme-design.fm-incident-reporting-tracking.technician-scheduling-workforce .hero .button.primary,
.new-theme-design.fm-incident-reporting-tracking.technician-scheduling-workforce .hero .button.secondary,
.new-theme-design.fm-incident-reporting-tracking.technician-scheduling-workforce .dfm-header__inner .button.secondary {
width: 100%;
}
} .rfidPage {
--brand: #00a8f8;
--brand-dark: #0076dd;
--navy: #063b5c;
--sky: #eaf8ff;
--sky-2: #f5fbff;
--ink: #11283a;
--muted: #607487;
--line: #d9e8f1;
--white: #fff;
--success: #118a61;
--success-bg: #eaf8f3;
--black: #0b0b0b;
--black-soft: #171717;
--yellow: #ffc928;
--yellow-soft: #fff7d6; color: var(--ink);
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
line-height: 1.65;
font-size: 16px;
background: #fff;
isolation: isolate;
overflow-wrap: break-word;
}
.rfidPage *,
.rfidPage *::before,
.rfidPage *::after {
box-sizing: border-box;
}
.rfidPage :where(h1, h2, h3, h4, p, figure, ul, ol, dl, dd) {
margin: 0;
}
.rfidPage a {
color: inherit;
text-decoration: none;
}
.rfidPage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px;
}
.rfidPage img {
display: block;
max-width: 100%;
height: auto;
}
.rfidPage .icon {
width: 23px;
height: 23px;
flex: 0 0 auto;
vertical-align: middle;
}
.rfidPage .wrap {
width: min(var(--max), calc(100% - 48px));
margin-inline: auto;
}
.rfidPage section {
padding: 84px 0;
scroll-margin-top: 104px;
}
.rfidPage [id] {
scroll-margin-top: 104px;
}
.rfidPage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 100;
padding: 14px 22px;
background: #fff;
color: #11283a;
border: 2px solid #0076dd;
}
.rfidPage .skipLink:focus {
top: 15px;
}
.rfidPage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.rfidPage h1,
.rfidPage h2,
.rfidPage h3 {
color: var(--black);
font-weight: 760;
line-height: 1.13;
letter-spacing: -0.036em;
}
.rfidPage h1 { max-width: 620px;
}
.rfidPage h2 {
font-size: clamp(30px, 3.4vw, 44px);
max-width: 840px;
}
.rfidPage h3 {
font-size: 22px;
letter-spacing: -0.022em;
}
.rfidPage p {
color: var(--muted);
}
.rfidPage .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: #413719;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.095em;
text-transform: uppercase;
padding: 7px 11px;
border-radius: 6px;
margin-bottom: 17px;
}
.rfidPage .sectionHead {
max-width: 820px;
margin-bottom: 35px;
}
.rfidPage .sectionHead p {
font-size: 18px;
margin-top: 18px;
max-width: 740px;
}
.rfidPage .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
min-height: 49px;
border-radius: 9px;
padding: 11px 20px;
font-size: 14px;
font-weight: 750;
line-height: 1.45;
border: 1px solid transparent;
text-align: center;
transition:
background 0.18s,
color 0.18s;
}
.rfidPage .button .icon {
width: 18px;
height: 18px;
}
.rfidPage .button.primary,
.rfidPage .button.black {
background: var(--black);
color: #fff;
white-space: nowrap;
}
.rfidPage .button.primary:hover,
.rfidPage .button.black:hover {
background: #28465a;
}
.rfidPage .button.secondary {
border-color: #accbda;
background: #fff;
color: var(--ink);
}
.rfidPage .button.secondary:hover {
background: #eaf8ff;
}
.rfidPage .button.yellow {
background: var(--yellow);
color: #18212a;
}
.rfidPage .button.yellow:hover {
background: #ffe079;
}
.rfidPage .textCta {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
color: var(--brand-dark);
margin-top: 22px;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #b6ddeb;
}
.rfidPage .textCta .icon {
width: 17px;
height: 17px;
}
.rfidPage .textCta:hover {
color: #063b5c;
}
.rfidPage .microcopy {
font-size: 12px;
line-height: 1.6;
color: #556c7d;
}
.rfidPage .sampleNote {
font-size: 10px;
line-height: 1.55;
color: #5b6d7a;
text-align: center;
padding: 11px 6px 0;
}
.rfidPage .pill {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 5px;
padding: 3px 7px;
font-size: 10px;
line-height: 1.6;
font-weight: 700;
background: #ecf4f9;
color: #355d75;
}
.rfidPage .pill.green {
background: var(--success-bg);
color: #116747;
}
.rfidPage .pill.yellow {
background: #fff3c6;
color: #675009;
}
.rfidPage .pill.blue {
background: #eaf8ff;
color: #006da5;
}
.rfidPage .dot {
display: inline-block;
width: 6px;
height: 6px;
background: var(--success);
border-radius: 50%;
}
.rfidPage .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.97);
border-bottom: 1px solid var(--line);
}
.rfidPage .brand {
display: flex;
align-items: center;
gap: 10px;
font-size: 23px;
font-weight: 850;
letter-spacing: -0.05em;
white-space: nowrap;
}
.rfidPage .brand>span:last-child span {
color: #0076dd;
}
.rfidPage .brandMark {
display: grid;
place-items: center;
width: 33px;
height: 37px;
background: #eaf8ff;
border: 1px solid #cbe8f7;
border-radius: 9px;
color: #0076dd;
}
.rfidPage .brandMark .icon {
width: 21px;
height: 21px;
}
.rfidPage .navlinks {
display: flex;
gap: 23px;
font-size: 13px;
color: #496275;
align-items: center;
}
.rfidPage .navlinks a:hover {
color: #0076dd;
}
.rfidPage .nav .button {
min-height: 42px;
font-size: 12px;
padding: 9px 16px;
}
.rfidPage .mobileNav {
display: none;
}
.rfidPage .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #586d7a;
margin-bottom: 23px;
}
.rfidPage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px;
}
.rfidPage .hero {
position: relative;
overflow: hidden;
padding: 32px 0 68px;
background: linear-gradient(145deg, #fff 20%, #f0f9ff 100%);
}
.rfidPage .heroGrid {
display: grid;
grid-template-columns: 1.02fr 1fr;
gap: 46px;
align-items: center;
}
.rfidPage .hero .eyebrow {
font-size: 10px;
}
.rfidPage .hero .eyebrow .icon {
width: 16px;
height: 16px;
} .rfidPage .lead {
font-size: 18px;
margin-top: 22px;
line-height: 1.75;
max-width: 600px;
}
.rfidPage .heroActions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 27px;
}
.rfidPage .heroChecks {
display: flex;
flex-wrap: wrap;
gap: 7px 17px;
font-size: 11px;
color: #4b6374;
margin-top: 20px;
}
.rfidPage .heroChecks span {
display: flex;
align-items: center;
gap: 5px;
}
.rfidPage .heroChecks .icon {
width: 13px;
height: 13px;
color: #147455;
}
.rfidPage .heroVisual {
min-width: 0;
position: relative;
padding-top: 5px;
}
.rfidPage .productFrame {
background: #fff;
border: 1px solid #c8dfea;
border-radius: 16px;
overflow: hidden;
}
.rfidPage .frameHead {
padding: 13px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--line);
font-size: 11px;
color: #5a7384;
}
.rfidPage .frameHead strong {
font-size: 12px;
color: #173e55;
}
.rfidPage .frameHead .dot {
margin-right: 5px;
}
.rfidPage .frameHead .brandTiny {
display: flex;
align-items: center;
gap: 7px;
}
.rfidPage .brandTiny .icon {
width: 16px;
height: 16px;
color: #0076dd;
}
.rfidPage .heroScene {
position: relative;
background: #edf7fc;
}
.rfidPage .heroScene>img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.rfidPage .readChip {
position: absolute;
left: 16px;
bottom: 17px;
background: #fff;
border: 1px solid #c8dfea;
border-radius: 11px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 11px;
}
.rfidPage .readChip .icon {
width: 30px;
height: 30px;
color: #0076dd;
}
.rfidPage .readChip small {
font-size: 10px;
color: #577486;
display: block;
}
.rfidPage .readChip strong {
font-size: 20px;
line-height: 1.3;
display: block;
}
.rfidPage .locationChip {
position: absolute;
right: 13px;
top: 17px;
background: #fff;
border: 1px solid #c8dfea;
border-radius: 10px;
padding: 10px 12px;
font-size: 10px;
line-height: 1.6;
min-width: 148px;
}
.rfidPage .locationChip strong {
display: block;
font-size: 12px;
margin: 4px 0;
}
.rfidPage .locationChip .pill {
font-size: 9px;
}
.rfidPage .heroMiniStats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line);
}
.rfidPage .heroMiniStats>div {
background: #fff;
padding: 13px 15px;
display: flex;
flex-direction: column;
}
.rfidPage .heroMiniStats strong {
font-size: 12px;
color: #173e55;
}
.rfidPage .heroMiniStats span {
font-size: 10px;
color: #5d7181;
}
.rfidPage .clientBand {
padding: 26px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #fff;
}
.rfidPage .trustLabel {
text-align: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #5c7383;
margin-bottom: 18px;
}
.rfidPage .logoRow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
align-items: center;
}
.rfidPage .industryLabel {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
font-weight: 650;
font-size: 12px;
color: #456478;
}
.rfidPage .industryLabel .icon {
width: 21px;
height: 21px;
color: #62879b;
}
.rfidPage .answerSection {
padding: 47px 0;
background: #fff;
}
.rfidPage .answerGrid {
display: grid;
grid-template-columns: 0.8fr 2fr;
gap: 52px;
align-items: center;
}
.rfidPage .answerGrid h2 {
font-size: 26px;
line-height: 1.25;
}
.rfidPage .answerGrid p {
font-size: 16px;
}
.rfidPage .answerGrid .eyebrow {
margin-bottom: 11px;
}
.rfidPage .aiJourney,
.rfidPage .darkSection {
background: var(--black);
color: #fff;
border-top: 3px solid var(--yellow);
}
.rfidPage .aiJourney h2,
.rfidPage .darkSection h2,
.rfidPage .darkSection h3 {
color: #fff;
}
.rfidPage .aiJourney p,
.rfidPage .darkSection p {
color: #d7d7d7;
}
.rfidPage .aiJourney .eyebrow,
.rfidPage .darkSection .eyebrow {
background: #34332b;
color: #ffe485;
}
.rfidPage .aiFlow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.rfidPage .aiStep {
position: relative;
border: 1px solid #2a2a2a;
border-radius: 14px;
padding: 25px;
min-width: 0;
background: #151515;
}
.rfidPage .aiStepTop {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 23px;
}
.rfidPage .aiStepNum {
font-size: 12px;
color: #9bb2c0;
letter-spacing: 0.12em;
white-space: nowrap;
}
.rfidPage .aiStepTop .icon {
width: 32px;
height: 32px;
color: #ffc928;
}
.rfidPage .aiStep h3 {
font-size: 21px;
color: #fff;
margin-bottom: 11px;
}
.rfidPage .aiStep p {
font-size: 14px;
}
.rfidPage .aiCallout {
margin-top: 23px;
color: #bcd0de;
font-size: 13px;
display: flex;
align-items: center;
gap: 9px;
}
.rfidPage .aiCallout .icon {
width: 17px;
height: 17px;
color: #ffc928;
}
.rfidPage .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.rfidPage .outcome {
padding: 24px 22px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
border-top: 3px solid #ffc928;
}
.rfidPage .outcome .icon {
color: #0076dd;
margin-bottom: 20px;
}
.rfidPage .outcome h3 {
font-size: 20px;
margin-bottom: 10px;
}
.rfidPage .outcome p {
font-size: 13px;
line-height: 1.75;
}
.rfidPage .outcomesSection {
background: #f7fbfe;
padding-bottom: 65px;
}
.rfidPage .capability {
background: #fff;
}
.rfidPage .capability.alt {
background: var(--sky-2);
}
.rfidPage .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.rfidPage .twoCol.reverse .copy {
order: 2;
}
.rfidPage .twoCol.reverse .visual {
order: 1;
}
.rfidPage .copy>p {
font-size: 16px;
margin-top: 18px;
}
.rfidPage .copy h2 {
font-size: clamp(30px, 3vw, 42px);
}
.rfidPage .featureList {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 18px;
margin-top: 25px;
}
.rfidPage .featureItem {
display: flex;
gap: 8px;
font-size: 13px;
line-height: 1.6;
align-items: flex-start;
}
.rfidPage .featureItem .icon {
width: 16px;
height: 16px;
margin-top: 3px;
color: #147455;
}
.rfidPage .darkSection .featureItem {
color: #d5e1e9;
}
.rfidPage .darkSection .featureItem .icon {
color: var(--yellow);
}
.rfidPage .darkSection .sampleNote {
color: #9dafba;
}
.rfidPage .visual {
min-width: 0;
}
.rfidPage .demoUi {
background: #fff;
border: 1px solid #c8dfea;
border-radius: 15px;
overflow: hidden;
color: #11283a;
}
.rfidPage .uiBody {
padding: 19px;
}
.rfidPage .uiHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 17px;
}
.rfidPage .uiHeading strong {
font-size: 16px;
letter-spacing: -0.015em;
}
.rfidPage .uiHeading small {
font-size: 10px;
color: #647a89;
display: block;
}
.rfidPage .uiHeading .icon {
width: 19px;
height: 19px;
color: #547587;
}
.rfidPage .uiTabs {
display: flex;
gap: 21px;
border-bottom: 1px solid #d9e8f1;
margin-bottom: 16px;
font-size: 10px;
color: #667d8c;
padding-bottom: 9px;
}
.rfidPage .uiTabs .selected {
color: #0076dd;
font-weight: 750;
border-bottom: 2px solid #0076dd;
margin-bottom: -10px;
padding-bottom: 9px;
}
.rfidPage .assetRow {
display: grid;
grid-template-columns: 27px 1.7fr 1fr auto;
gap: 8px;
align-items: center;
padding: 13px 0;
border-bottom: 1px solid #e5eff4;
font-size: 10px;
}
.rfidPage .assetRow:last-child {
border-bottom: 0;
}
.rfidPage .assetRow strong {
font-size: 11px;
display: block;
}
.rfidPage .assetRow small {
font-size: 9px;
display: block;
color: #657d8d;
}
.rfidPage .assetRow>.icon {
width: 23px;
height: 23px;
color: #52788e;
background: #eff7fb;
padding: 4px;
box-sizing: content-box;
border-radius: 6px;
}
.rfidPage .assetFooter {
padding: 14px 17px;
display: flex;
justify-content: space-between;
background: #f6fafd;
border-top: 1px solid #d9e8f1;
gap: 15px;
font-size: 10px;
}
.rfidPage .assetFooter span {
display: flex;
gap: 6px;
align-items: center;
}
.rfidPage .assetFooter .icon {
width: 13px;
height: 13px;
color: #0076dd;
}
.rfidPage .assetSmallNote {
font-size: 10px;
color: #637d8d;
margin-top: 15px;
background: #fff8df;
padding: 10px 12px;
border-radius: 6px;
}
.rfidPage .auditVisual {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 0;
align-items: center;
background: #eaf5fb;
border: 1px solid #c9e2f0;
border-radius: 16px;
padding: 18px 17px 18px 0;
min-height: 343px;
}
.rfidPage .auditReader {
position: relative;
min-width: 0;
overflow: hidden;
}
.rfidPage .auditReader img {
width: 190%;
max-width: none;
margin-left: -48%;
background: transparent;
}
.rfidPage .auditCard {
background: #fff;
border: 1px solid #c8dfea;
padding: 20px 17px;
border-radius: 12px;
position: relative;
}
.rfidPage .auditCard h3 {
font-size: 16px;
margin: 9px 0 4px;
}
.rfidPage .auditCard .auditSubtitle {
font-size: 10px;
color: #617a8b;
}
.rfidPage .auditCount {
font-size: 43px;
letter-spacing: -0.05em;
font-weight: 750;
line-height: 1.1;
margin-top: 16px;
}
.rfidPage .auditCount small {
font-size: 12px;
letter-spacing: 0;
color: #617a8b;
font-weight: 500;
}
.rfidPage .progress {
height: 7px;
background: #e5f0f6;
border-radius: 7px;
overflow: hidden;
margin: 13px 0 16px;
}
.rfidPage .progress>span {
display: block;
width: 96.1%;
height: 100%;
background: #0076dd;
border-radius: 7px;
}
.rfidPage .auditLine {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 0;
font-size: 11px;
border-bottom: 1px solid #e5eff4;
}
.rfidPage .auditLine:last-child {
border: 0;
}
.rfidPage .auditLine strong {
font-weight: 750;
}
.rfidPage .auditLine span {
display: flex;
gap: 7px;
align-items: center;
}
.rfidPage .auditLine .icon {
width: 13px;
height: 13px;
}
.rfidPage .locatorStrip {
padding: 17px 19px;
border: 1px solid #c8dfea;
border-radius: 12px;
background: #fff;
display: flex;
align-items: center;
gap: 14px;
margin-top: 12px;
}
.rfidPage .locatorStrip>.icon {
color: #0076dd;
width: 27px;
height: 27px;
}
.rfidPage .locatorStrip strong {
font-size: 12px;
display: block;
}
.rfidPage .locatorStrip small {
font-size: 10px;
color: #61788a;
}
.rfidPage .signalBars {
display: flex;
gap: 3px;
align-items: flex-end;
height: 25px;
margin-left: auto;
}
.rfidPage .signalBars span {
display: block;
width: 5px;
border-radius: 2px;
background: #298eec;
}
.rfidPage .signalBars span:nth-child(1) {
height: 7px;
}
.rfidPage .signalBars span:nth-child(2) {
height: 11px;
}
.rfidPage .signalBars span:nth-child(3) {
height: 16px;
}
.rfidPage .signalBars span:nth-child(4) {
height: 21px;
}
.rfidPage .signalBars span:nth-child(5) {
height: 25px;
background: #dbeaf3;
}
.rfidPage .movementTop {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 0 17px 0 0;
background: #edf7fc;
border-radius: 13px 13px 0 0;
overflow: hidden;
}
.rfidPage .movementTop img {
width: 145%;
max-width: none;
margin-left: -25%;
}
.rfidPage .transferStatus {
padding: 15px 0;
}
.rfidPage .transferStatus strong {
font-size: 16px;
line-height: 1.3;
display: block;
margin: 8px 0;
}
.rfidPage .transferStatus p {
font-size: 10px;
color: #5c7688;
}
.rfidPage .timeline {
padding: 7px 22px 19px;
list-style: none;
background: #fff;
border-radius: 0 0 13px 13px;
}
.rfidPage .timeline li {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 8px;
position: relative;
padding-top: 18px;
font-size: 11px;
align-items: start;
}
.rfidPage .timeline li::before {
content: "";
position: absolute;
height: calc(100% - 8px);
left: 9px;
top: 38px;
border-left: 1px solid #c8dfea;
}
.rfidPage .timeline li:last-child::before {
display: none;
}
.rfidPage .timeline .icon {
background: #eaf8f3;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 4px;
color: #116c4f;
z-index: 1;
}
.rfidPage .timeline strong {
font-size: 11px;
display: block;
}
.rfidPage .timeline small {
font-size: 10px;
color: #667d8c;
display: block;
}
.rfidPage .timeline time {
font-size: 10px;
color: #61788a;
}
.rfidPage .inlineCtaSection {
padding: 15px 0 58px;
background: #fff;
}
.rfidPage .inlineCta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
border: 1px solid var(--line);
border-left: 4px solid var(--yellow);
border-radius: 13px;
padding: 25px 28px;
background: #fafcfe;
margin-top: 0;
}
.rfidPage .inlineCta h3 {
font-size: 21px;
}
.rfidPage .inlineCta p {
font-size: 13px;
margin-top: 7px;
max-width: 680px;
}
.rfidPage .inlineCta .button {
flex: 0 0 auto;
}
.rfidPage .workOrder {
padding: 20px;
}
.rfidPage .workAsset {
display: flex;
align-items: center;
gap: 13px;
padding-bottom: 16px;
border-bottom: 1px solid #dfeaf1;
}
.rfidPage .assetThumb {
display: grid;
place-items: center;
width: 49px;
height: 49px;
background: #eaf8ff;
border-radius: 11px;
color: #0076dd;
}
.rfidPage .workAsset strong {
font-size: 16px;
display: block;
}
.rfidPage .workAsset small {
font-size: 10px;
color: #607b8d;
}
.rfidPage .workOrderLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 17px;
font-size: 10px;
}
.rfidPage .workTitle {
display: block;
font-size: 20px;
letter-spacing: -0.03em;
margin-top: 10px;
}
.rfidPage .workMeta {
display: flex;
gap: 23px;
font-size: 10px;
margin: 9px 0 16px;
color: #657d8c;
}
.rfidPage .miniChecklist {
list-style: none;
padding: 0;
}
.rfidPage .miniChecklist li {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 0;
font-size: 11px;
}
.rfidPage .miniChecklist .icon {
width: 17px;
height: 17px;
padding: 2px;
border: 1px solid #b7dcd0;
border-radius: 4px;
color: #118a61;
background: #f1fbf7;
}
.rfidPage .aiNote {
margin: 0 18px 19px;
background: #fff7d6;
border: 1px solid #f0e1aa;
border-radius: 9px;
padding: 13px;
display: flex;
gap: 10px;
}
.rfidPage .aiNote .icon {
width: 20px;
height: 20px;
color: #7b601c;
}
.rfidPage .aiNote strong {
font-size: 11px;
display: block;
color: #3e391e;
}
.rfidPage .aiNote p {
font-size: 10px;
color: #635b39;
margin-top: 4px;
}
.rfidPage .scopeNote {
font-size: 11px !important;
line-height: 1.6;
margin-top: 20px !important;
padding-top: 14px;
border-top: 1px solid #354b5a;
}
.rfidPage .darkSection .textCta {
color: #ffe079;
text-decoration-color: #877139;
}
.rfidPage .workflowCanvas {
padding: 22px 32px;
background: #f0f7fb;
border: 1px solid #d3e5ef;
border-radius: 16px;
}
.rfidPage .ruleCard {
position: relative;
background: #fff;
border: 1px solid #cee1eb;
border-radius: 11px;
padding: 16px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.rfidPage .ruleCard>.icon {
width: 33px;
height: 33px;
color: #0076dd;
background: #ecf8ff;
padding: 7px;
border-radius: 8px;
}
.rfidPage .ruleCard .ruleLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
color: #5b7688;
text-transform: uppercase;
}
.rfidPage .ruleCard strong {
font-size: 13px;
display: block;
}
.rfidPage .ruleCard p {
font-size: 10px;
margin-top: 2px;
}
.rfidPage .ruleConnector {
height: 23px;
position: relative;
}
.rfidPage .ruleConnector::before {
content: "";
position: absolute;
left: 31px;
top: 0;
bottom: 0;
border-left: 1px solid #96bdcf;
}
.rfidPage .ruleCard.action {
border-left: 3px solid #ffc928;
}
.rfidPage .ruleCard.action>.icon {
color: #715513;
background: #fff7d6;
}
.rfidPage .reportNumbers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 23px;
}
.rfidPage .reportNumbers div {
border: 1px solid #d6e6f0;
border-radius: 9px;
padding: 12px;
}
.rfidPage .reportNumbers strong {
font-size: 24px;
line-height: 1.25;
display: block;
letter-spacing: -0.03em;
}
.rfidPage .reportNumbers span {
font-size: 9px;
color: #5f7889;
line-height: 1.4;
display: block;
margin-top: 4px;
}
.rfidPage .chartLabel {
font-size: 11px;
font-weight: 700;
margin: 0 0 15px;
}
.rfidPage .barRow {
display: grid;
grid-template-columns: 77px 1fr 26px;
gap: 10px;
align-items: center;
font-size: 10px;
margin: 13px 0;
color: #526d80;
}
.rfidPage .barTrack {
height: 13px;
background: #edf4f8;
border-radius: 3px;
overflow: hidden;
}
.rfidPage .barTrack span {
height: 100%;
display: block;
background: #0076dd;
border-radius: 3px;
}
.rfidPage .barRow:nth-of-type(2) .barTrack span {
background: #50b5e5;
}
.rfidPage .barRow:nth-of-type(3) .barTrack span {
background: #a8ddf4;
}
.rfidPage .exportRow {
margin-top: 21px;
display: flex;
gap: 6px;
align-items: center;
font-size: 10px;
color: #587285;
border-top: 1px solid #dce9f1;
padding-top: 15px;
}
.rfidPage .exportRow .icon {
width: 13px;
height: 13px;
margin-right: 5px;
}
.rfidPage .exportRow span {
border: 1px solid #cbdde8;
border-radius: 4px;
padding: 3px 7px;
background: #fff;
}
.rfidPage .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.rfidPage .card {
border: 1px solid var(--line);
border-radius: 14px;
padding: 26px;
background: #fff;
min-width: 0;
}
.rfidPage .card p {
font-size: 14px;
margin-top: 12px;
}
.rfidPage .cardIcon {
display: grid;
place-items: center;
width: 43px;
height: 43px;
background: #fff4c7;
color: #6e5314;
border-radius: 10px;
margin-bottom: 20px;
}
.rfidPage .card h3 {
font-size: 21px;
}
.rfidPage .hardwareCard {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.rfidPage .hardwareArt {
height: 190px;
width: 100%;
background: #edf7fc;
overflow: hidden;
border-bottom: 1px solid #d9e8f1;
}
.rfidPage .hardwareArt img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rfidPage .hardwareBody {
padding: 23px;
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
}
.rfidPage .hardwareBody .pill {
margin-bottom: 13px;
font-size: 9px;
}
.rfidPage .hardwareBody p {
font-size: 13px;
}
.rfidPage .hardwareBody .hardwareFoot {
font-size: 11px;
margin-top: 17px;
padding-top: 15px;
border-top: 1px solid #d9e8f1;
color: #425f72;
line-height: 1.65;
}
.rfidPage .hybridArt {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
background: #edf7fc;
}
.rfidPage .hybridArt .hybridDevice {
width: 43%;
height: 160px;
overflow: hidden;
border: 1px solid #d5e7ef;
border-radius: 11px;
background: #fff;
}
.rfidPage .hybridDevice img {
width: 150%;
max-width: none;
height: 160px;
object-fit: cover;
margin-left: -25%;
}
.rfidPage .hybridArt>.icon {
position: absolute;
width: 35px;
height: 35px;
padding: 8px;
background: #ffc928;
border-radius: 50%;
color: #28363f;
z-index: 1;
}
.rfidPage .hardwareBanner {
display: grid;
grid-template-columns: 150px 1fr auto;
align-items: center;
gap: 22px;
border: 1px solid #d5e7ef;
background: #f8fbfd;
border-radius: 13px;
margin-top: 25px;
padding: 15px 24px 15px 8px;
}
.rfidPage .hardwareBanner img {
width: 150px;
height: 105px;
object-fit: cover;
}
.rfidPage .hardwareBanner h3 {
font-size: 18px;
}
.rfidPage .hardwareBanner p {
font-size: 12px;
margin-top: 6px;
}
.rfidPage .hardwareBanner .textCta {
margin-top: 0;
white-space: nowrap;
font-size: 12px;
}
.rfidPage .hardwareNote {
margin-top: 18px;
font-size: 12px;
line-height: 1.8;
color: #5b7183;
}
.rfidPage .hardwareNote strong {
color: #2d5065;
}
.rfidPage .tableSection {
background: #f5fbff;
}
.rfidPage .tableScroll {
overflow-x: auto;
border: 1px solid #c8dfea;
border-radius: 14px;
background: #fff;
}
.rfidPage table {
width: 100%;
border-collapse: collapse;
min-width: 690px;
font-size: 13px;
}
.rfidPage table caption {
text-align: left;
padding: 17px 22px;
background: #fff;
font-size: 12px;
color: #4d6b7f;
border-bottom: 1px solid #d9e8f1;
}
.rfidPage th,
.rfidPage td {
text-align: left;
vertical-align: top;
padding: 19px 20px;
border-bottom: 1px solid #dce9f1;
line-height: 1.7;
}
.rfidPage thead th {
background: #132c3d;
color: #fff;
font-size: 13px;
font-weight: 700;
}
.rfidPage thead th:nth-child(3) {
background: #065c86;
}
.rfidPage tbody th {
width: 19%;
background: #f8fbfd;
font-weight: 700;
color: #23485e;
}
.rfidPage td {
width: 27%;
color: #506d80;
}
.rfidPage tr:last-child td,
.rfidPage tr:last-child th {
border-bottom: 0;
}
.rfidPage td:nth-child(3) {
background: #f1faff;
}
.rfidPage .tableNote {
font-size: 12px;
margin-top: 16px;
max-width: 990px;
}
.rfidPage .tableNote a {
color: #0076dd;
text-decoration: underline;
text-underline-offset: 3px;
}
.rfidPage .tableHint {
display: none;
}
.rfidPage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.rfidPage .integration {
border: 1px solid #d9e8f1;
border-bottom: 3px solid #80cbef;
border-radius: 12px;
min-height: 99px;
padding: 18px 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
}
.rfidPage .integration strong {
font-size: 18px;
color: #234b65;
line-height: 1.3;
font-weight: 750;
letter-spacing: -0.025em;
}
.rfidPage .integration span {
font-size: 10px;
color: #607b8d;
margin-top: 8px;
}
.rfidPage .integrationCopy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 42px;
margin-top: 27px;
}
.rfidPage .integrationCopy p {
font-size: 13px;
}
.rfidPage .integrationCopy strong {
color: #244e68;
}
.rfidPage .proofSection {
padding: 75px 0;
background: #fff9e6;
border-block: 1px solid #f0e1aa;
}
.rfidPage .proofGrid {
display: grid;
grid-template-columns: 0.75fr 1.5fr;
gap: 66px;
align-items: center;
}
.rfidPage .proofIdentity {
min-height: 240px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border: 1px solid #e2d291;
border-radius: 15px;
background: #fff;
padding: 35px;
}
.rfidPage .proofIdentity .eyebrow {
font-size: 9px;
margin-bottom: 18px;
}
.rfidPage .proofBrand {
font-size: 37px;
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.045em;
}
.rfidPage .proofIdentity p {
font-size: 12px;
margin-top: 14px;
}
.rfidPage .proofTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 20px;
}
.rfidPage .proofContent h2 {
font-size: 36px;
}
.rfidPage .proofContent p {
margin-top: 17px;
font-size: 16px;
}
.rfidPage .proofContent .textCta {
color: #695114;
text-decoration-color: #d7c172;
}
.rfidPage .proofSource {
font-size: 10px !important;
color: #746941 !important;
margin-top: 15px !important;
}
.rfidPage .industryCards .card {
padding: 25px;
}
.rfidPage .industryCards h3 {
font-size: 20px;
}
.rfidPage .industryCards p {
font-size: 13px;
}
.rfidPage .buyerGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 55px;
align-items: start;
}
.rfidPage .buyerChecks {
list-style: none;
padding: 0;
display: grid;
gap: 0;
margin-top: 20px;
}
.rfidPage .buyerChecks li {
display: flex;
gap: 13px;
align-items: flex-start;
border-bottom: 1px solid #d9e8f1;
padding: 14px 0;
}
.rfidPage .buyerChecks li>.icon {
width: 19px;
height: 19px;
margin-top: 2px;
color: #0076dd;
}
.rfidPage .buyerChecks strong {
display: block;
font-size: 14px;
margin-bottom: 3px;
}
.rfidPage .buyerChecks p {
font-size: 12px;
}
.rfidPage .pricingCard {
border: 1px solid #d1e3ee;
border-top: 4px solid #ffc928;
border-radius: 14px;
background: #fff;
padding: 30px;
}
.rfidPage .pricingCard h3 {
font-size: 26px;
}
.rfidPage .pricingCard>p {
font-size: 14px;
margin-top: 14px;
}
.rfidPage .pricingCard dl {
margin: 21px 0;
}
.rfidPage .pricingCard dl>div {
padding: 13px 0;
border-bottom: 1px solid #e0ebf1;
}
.rfidPage .pricingCard dt {
font-size: 12px;
font-weight: 750;
color: #244b64;
}
.rfidPage .pricingCard dd {
font-size: 12px;
color: #5a7588;
margin-top: 4px;
}
.rfidPage .pricingCard .button {
width: 100%;
}
.rfidPage .pricingCard .microcopy {
margin-top: 13px;
font-size: 10px;
}
.rfidPage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 35px;
}
.rfidPage .rolloutStep {
border-top: 1px solid #bad6e6;
padding: 20px 0 0;
position: relative;
}
.rfidPage .rolloutNumber {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: #fff3c4;
font-size: 12px;
font-weight: 800;
margin-bottom: 20px;
}
.rfidPage .rolloutStep h3 {
font-size: 19px;
margin-bottom: 11px;
}
.rfidPage .rolloutStep p {
font-size: 13px;
}
.rfidPage .pilotMeasures {
margin-top: 32px;
padding: 18px 23px;
background: #eef7fc;
border: 1px solid #cee3ef;
border-radius: 10px;
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
}
.rfidPage .pilotMeasures strong {
color: #234d66;
}
.rfidPage .pilotMeasures span {
color: #527287;
display: flex;
align-items: center;
gap: 6px;
}
.rfidPage .pilotMeasures .icon {
width: 15px;
height: 15px;
}
.rfidPage .faq {
max-width: 890px;
}
.rfidPage .faqSection {
background: #f5fbff;
}
.rfidPage details {
background: #fff;
border: 1px solid #d1e3ee;
border-radius: 11px;
margin-bottom: 11px;
overflow: hidden;
}
.rfidPage summary {
cursor: pointer;
position: relative;
font-size: 15px;
font-weight: 700;
color: #1d4058;
padding: 20px 50px 20px 22px;
list-style: none;
line-height: 1.6;
}
.rfidPage summary::-webkit-details-marker {
display: none;
}
.rfidPage summary::after {
content: "+";
position: absolute;
right: 20px;
top: 18px;
color: #0076dd;
font-weight: 500;
font-size: 23px;
line-height: 1.2;
}
.rfidPage details[open] summary::after {
content: "-";
}
.rfidPage details[open] summary {
border-bottom: 1px solid #e1edf4;
}
.rfidPage details p {
padding: 17px 22px 22px;
font-size: 14px;
line-height: 1.8;
}
.rfidPage details p a {
color: #0076dd;
text-decoration: underline;
text-underline-offset: 3px;
}
.rfidPage .ctaPanel {
background: #0b0b0b;
border-top: 4px solid #ffc928;
border-radius: 0;
padding: 43px 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 45px;
align-items: center;
}
.rfidPage .ctaPanel h2 {
font-size: 39px;
color: #fff;
}
.rfidPage .ctaPanel p {
color: #bfcdd7;
font-size: 16px;
margin-top: 15px;
max-width: 640px;
}
.rfidPage .ctaPanel .button {
display: flex;
min-width: 203px;
}
.rfidPage .ctaPanel .ctaSmall {
font-size: 11px;
color: #afbfcc;
text-align: center;
margin-top: 10px;
}
.rfidPage .contactRow {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: center;
margin-top: 22px;
font-size: 13px;
color: #5a7184;
}
.rfidPage .contactRow a {
display: inline-flex;
gap: 8px;
align-items: center;
color: #0076dd;
font-weight: 700;
}
.rfidPage .contactRow .icon {
width: 17px;
height: 17px;
}
.rfidPage .pageFooter {
padding: 30px 0;
background: #f7fbfd;
border-top: 1px solid #d9e8f1;
}
.rfidPage .footerGrid {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
flex-wrap: wrap;
font-size: 11px;
color: #5b7486;
}
.rfidPage .footerBrand {
font-size: 17px;
font-weight: 800;
letter-spacing: -0.03em;
color: #234b65;
}
.rfidPage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.rfidPage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px;
}
.rfidPage .referenceLinks {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #d9e8f1;
display: flex;
flex-wrap: wrap;
gap: 7px 18px;
font-size: 10px;
color: #607a8c;
}
.rfidPage .referenceLinks a {
text-decoration: underline;
text-underline-offset: 3px;
}
.rfidPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.new-theme-design.rfidPage .outcome .icon {
margin-bottom: 20px;
}
@media (min-width: 1600px) {
.rfidPage .heroGrid {
gap: 52px;
} }
@media (max-width: 1100px) {
.rfidPage .navlinks {
gap: 14px;
font-size: 12px;
}
.rfidPage .nav {
gap: 18px;
}
.rfidPage .heroGrid {
gap: 30px;
}
.rfidPage .twoCol {
gap: 35px;
} .rfidPage .logoRow {
gap: 10px;
}
.rfidPage .industryLabel {
font-size: 11px;
}
.rfidPage .outcome {
padding: 21px 17px;
}
.rfidPage .outcome h3 {
font-size: 18px;
}
.rfidPage .hardwareBanner {
grid-template-columns: 120px 1fr;
}
.rfidPage .hardwareBanner img {
width: 120px;
}
.rfidPage .hardwareBanner .textCta {
grid-column: 2;
margin-top: -9px;
}
.rfidPage .hardwareBanner {
gap: 10px 20px;
}
.rfidPage .pricingCard {
padding: 25px;
}
.rfidPage .proofGrid {
gap: 40px;
}
}
@media (max-width: 900px) {
.rfidPage section {
padding: 65px 0;
}
.rfidPage .navlinks {
display: none;
}
.rfidPage .mobileNav {
display: block;
position: relative;
margin: 0 0 0 auto;
overflow: visible;
border: 0;
background: transparent;
}
.rfidPage .mobileNav summary {
padding: 9px 26px 9px 8px;
font-size: 12px;
border: 0 !important;
}
.rfidPage .mobileNav summary::after {
right: 7px;
top: 9px;
font-size: 17px;
}
.rfidPage .mobileNav nav {
position: absolute;
right: 0;
top: 45px;
background: #fff;
border: 1px solid #d1e3ee;
z-index: 55;
padding: 9px;
border-radius: 9px;
min-width: 190px;
}
.rfidPage .mobileNav nav a {
display: block;
padding: 9px 11px;
font-size: 12px;
}
.rfidPage .hero {
padding: 29px 0 51px;
}
.rfidPage .heroGrid {
grid-template-columns: 1fr;
gap: 37px;
}
.rfidPage .hero h1 { max-width: 720px;
}
.rfidPage .hero .lead {
max-width: 670px;
}
.rfidPage .heroVisual {
width: 100%;
max-width: 680px;
margin-inline: auto;
}
.rfidPage .heroScene>img {
aspect-ratio: 1.58;
object-fit: cover;
object-position: center;
}
.rfidPage .heroMiniStats>div {
padding: 15px 20px;
}
.rfidPage .heroMiniStats strong {
font-size: 13px;
}
.rfidPage .heroMiniStats span {
font-size: 11px;
}
.rfidPage .answerGrid {
grid-template-columns: 1fr;
gap: 17px;
}
.rfidPage .answerGrid h2 {
font-size: 31px;
}
.rfidPage .outcomeGrid {
grid-template-columns: repeat(2, 1fr);
}
.rfidPage .twoCol {
grid-template-columns: 1fr;
gap: 32px;
}
.rfidPage .twoCol .copy,
.rfidPage .twoCol.reverse .copy {
order: 1;
}
.rfidPage .twoCol .visual,
.rfidPage .twoCol.reverse .visual {
order: 2;
max-width: 630px;
width: 100%;
margin-inline: auto;
}
.rfidPage .copy h2 {
max-width: 650px;
font-size: 39px;
}
.rfidPage .copy>p {
max-width: 720px;
}
.rfidPage .featureList {
max-width: 640px;
}
.rfidPage .aiFlow {
gap: 14px;
}
.rfidPage .aiStep {
padding: 22px 18px;
}
.rfidPage .aiStep h3 {
font-size: 18px;
}
.rfidPage .aiStep p {
font-size: 12px;
}
.rfidPage .logoRow {
grid-template-columns: repeat(3, 1fr);
gap: 15px 20px;
}
.rfidPage .industryLabel {
font-size: 12px;
}
.rfidPage .inlineCta {
align-items: flex-start;
flex-direction: column;
}
.rfidPage .inlineCtaSection {
padding: 0 0 50px;
}
.rfidPage .cards {
grid-template-columns: repeat(2, 1fr);
}
.rfidPage .hardwareCards {
grid-template-columns: 1fr;
gap: 17px;
}
.rfidPage .hardwareCard {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
}
.rfidPage .hardwareArt {
height: 100%;
min-height: 230px;
border: 0;
border-right: 1px solid #d9e8f1;
display: flex;
align-items: center;
}
.rfidPage .hardwareArt img {
height: 100%;
object-fit: cover;
}
.rfidPage .hardwareBody {
padding: 23px;
}
.rfidPage .hybridArt {
gap: 7px;
padding: 8px;
}
.rfidPage .hybridArt .hybridDevice {
width: 47%;
height: 140px;
}
.rfidPage .hybridDevice img {
height: 140px;
}
.rfidPage .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.rfidPage .proofGrid {
grid-template-columns: 0.8fr 1.2fr;
gap: 25px;
}
.rfidPage .proofIdentity {
padding: 26px;
min-height: 256px;
}
.rfidPage .proofBrand {
font-size: 30px;
}
.rfidPage .proofContent h2 {
font-size: 31px;
}
.rfidPage .proofContent p {
font-size: 14px;
}
.rfidPage .buyerGrid {
grid-template-columns: 1fr;
gap: 34px;
}
.rfidPage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.rfidPage .ctaPanel {
grid-template-columns: 1fr;
gap: 24px;
padding: 36px;
}
.rfidPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.rfidPage .ctaPanel .button {
display: inline-flex;
}
.rfidPage .ctaPanel .ctaSmall {
text-align: left;
}
.rfidPage .contactRow {
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
.rfidPage .tableHint {
display: block;
font-size: 11px;
color: #617c8d;
margin: 0 0 9px;
}
}
@media (max-width: 580px) {
.rfidPage {
font-size: 15px;
}
.rfidPage .wrap {
width: calc(100% - 36px);
}
.rfidPage section {
padding: 53px 0;
}
.rfidPage .nav {
min-height: 67px;
gap: 12px;
}
.rfidPage .brand {
font-size: 19px;
gap: 6px;
}
.rfidPage .brandMark {
width: 28px;
height: 31px;
border-radius: 7px;
}
.rfidPage .brandMark .icon {
width: 18px;
height: 18px;
}
.rfidPage .nav .button {
font-size: 11px;
padding: 9px 11px;
min-height: 39px;
gap: 5px;
}
.rfidPage .nav .button .icon {
display: none;
}
.rfidPage .mobileNav {
margin-left: 0;
}
.rfidPage .mobileNav summary {
font-size: 11px;
padding-left: 0;
}
.rfidPage .mobileNav nav {
right: -65px;
}
.rfidPage .hero {
padding: 23px 0 39px;
}
.rfidPage .breadcrumb {
font-size: 9px;
margin-bottom: 21px;
} .rfidPage .hero .eyebrow {
font-size: 8px;
letter-spacing: 0.07em;
padding: 6px 8px;
}
.rfidPage .hero .eyebrow .icon {
width: 13px;
height: 13px;
}
.rfidPage .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 19px;
}
.rfidPage .heroActions {
gap: 9px;
margin-top: 23px;
}
.rfidPage .heroActions .button {
font-size: 12px;
padding: 11px 13px;
min-height: 46px;
gap: 6px;
flex: 1;
}
.rfidPage .heroActions .button .icon {
width: 15px;
height: 15px;
}
.rfidPage .heroChecks {
font-size: 9px;
gap: 6px 12px;
margin-top: 15px;
}
.rfidPage .heroGrid {
gap: 29px;
}
.rfidPage .heroScene>img {
aspect-ratio: 4/3;
object-fit: contain;
}
.rfidPage .frameHead {
padding: 11px 12px;
font-size: 9px;
}
.rfidPage .frameHead strong {
font-size: 10px;
}
.rfidPage .locationChip {
right: 9px;
top: 10px;
padding: 7px 9px;
min-width: 116px;
font-size: 8px;
}
.rfidPage .locationChip strong {
font-size: 10px;
}
.rfidPage .locationChip .pill {
font-size: 8px;
}
.rfidPage .readChip {
left: 9px;
bottom: 11px;
padding: 8px 10px;
gap: 8px;
}
.rfidPage .readChip .icon {
width: 23px;
height: 23px;
}
.rfidPage .readChip strong {
font-size: 17px;
}
.rfidPage .readChip small {
font-size: 8px;
}
.rfidPage .heroMiniStats>div {
padding: 11px 9px;
}
.rfidPage .heroMiniStats strong {
font-size: 10px;
}
.rfidPage .heroMiniStats span {
font-size: 8px;
}
.rfidPage .sampleNote {
font-size: 9px;
}
.rfidPage .clientBand {
padding: 23px 0;
}
.rfidPage .logoRow {
grid-template-columns: repeat(2, 1fr);
gap: 14px 10px;
}
.rfidPage .industryLabel {
font-size: 11px;
justify-content: flex-start;
padding-left: 8px;
}
.rfidPage .trustLabel {
font-size: 8px;
letter-spacing: 0.08em;
}
.rfidPage .answerSection {
padding: 37px 0;
}
.rfidPage .answerGrid {
gap: 14px;
}
.rfidPage .answerGrid h2 {
font-size: 26px;
}
.rfidPage .answerGrid p {
font-size: 14px;
}
.rfidPage .sectionHead {
margin-bottom: 28px;
}
.rfidPage .sectionHead h2,
.rfidPage .copy h2 {
font-size: 32px;
}
.rfidPage .sectionHead p {
font-size: 15px;
margin-top: 15px;
}
.rfidPage .eyebrow {
font-size: 9px;
margin-bottom: 15px;
}
.rfidPage .aiFlow {
grid-template-columns: 1fr;
gap: 12px;
}
.rfidPage .aiStep {
padding: 22px;
min-height: 0;
}
.rfidPage .aiStepTop {
margin-bottom: 16px;
}
.rfidPage .aiStep h3 {
font-size: 20px;
}
.rfidPage .aiStep p {
font-size: 13px;
}
.rfidPage .aiCallout {
font-size: 11px;
align-items: flex-start;
}
.rfidPage .aiCallout .icon {
margin-top: 3px;
flex: 0 0 auto;
}
.rfidPage .outcomeGrid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.rfidPage .outcome {
padding: 20px 15px;
}
.rfidPage .outcome h3 {
font-size: 18px;
}
.rfidPage .outcome p {
font-size: 12px;
}
.rfidPage .outcome .icon {
margin-bottom: 15px;
}
.rfidPage .copy>p {
font-size: 15px;
}
.rfidPage .featureList {
gap: 13px 14px;
margin-top: 23px;
}
.rfidPage .featureItem {
font-size: 12px;
gap: 6px;
}
.rfidPage .featureItem .icon {
width: 13px;
height: 13px;
}
.rfidPage .textCta {
font-size: 12px;
}
.rfidPage .uiBody {
padding: 15px 12px;
}
.rfidPage .uiHeading strong {
font-size: 14px;
}
.rfidPage .uiTabs {
font-size: 9px;
gap: 16px;
}
.rfidPage .assetRow {
grid-template-columns: 23px 1.2fr 65px 56px;
font-size: 8px;
gap: 6px;
padding: 12px 0;
}
.rfidPage .assetRow strong {
font-size: 9px;
}
.rfidPage .assetRow small {
font-size: 8px;
}
.rfidPage .assetRow>.icon {
width: 16px;
height: 16px;
padding: 3px;
}
.rfidPage .assetRow .pill {
font-size: 8px;
padding: 2px 4px;
}
.rfidPage .assetFooter {
padding: 12px;
font-size: 8px;
gap: 8px;
}
.rfidPage .assetSmallNote {
font-size: 9px;
}
.rfidPage .auditVisual {
padding: 14px 12px 14px 0;
grid-template-columns: 0.72fr 1.28fr;
min-height: 305px;
}
.rfidPage .auditCard {
padding: 16px 12px;
}
.rfidPage .auditCard h3 {
font-size: 15px;
}
.rfidPage .auditCount {
font-size: 37px;
}
.rfidPage .auditCount small {
font-size: 10px;
}
.rfidPage .auditLine {
font-size: 10px;
}
.rfidPage .locatorStrip {
padding: 13px 12px;
gap: 10px;
}
.rfidPage .locatorStrip strong {
font-size: 11px;
}
.rfidPage .locatorStrip small {
font-size: 9px;
}
.rfidPage .movementTop {
grid-template-columns: 1fr 1.05fr;
padding-right: 12px;
}
.rfidPage .transferStatus strong {
font-size: 14px;
}
.rfidPage .transferStatus p {
font-size: 9px;
}
.rfidPage .timeline {
padding-inline: 15px;
}
.rfidPage .inlineCta {
padding: 23px;
}
.rfidPage .inlineCta h3 {
font-size: 21px;
}
.rfidPage .inlineCta p {
font-size: 12px;
}
.rfidPage .inlineCtaSection {
padding: 0 0 45px;
}
.rfidPage .workOrder {
padding: 16px;
}
.rfidPage .workTitle {
font-size: 19px;
}
.rfidPage .workMeta {
gap: 14px;
font-size: 9px;
}
.rfidPage .miniChecklist li {
font-size: 10px;
}
.rfidPage .aiNote {
margin-inline: 13px;
padding: 11px;
}
.rfidPage .workflowCanvas {
padding: 20px;
}
.rfidPage .ruleCard {
padding: 14px;
}
.rfidPage .ruleCard strong {
font-size: 12px;
}
.rfidPage .ruleCard p {
font-size: 10px;
}
.rfidPage .reportNumbers {
gap: 8px;
}
.rfidPage .reportNumbers div {
padding: 11px 9px;
}
.rfidPage .reportNumbers strong {
font-size: 22px;
}
.rfidPage .reportNumbers span {
font-size: 8px;
}
.rfidPage .cards {
grid-template-columns: 1fr;
}
.rfidPage .hardwareCard {
display: flex;
}
.rfidPage .hardwareArt {
height: 190px;
min-height: 0;
border-bottom: 1px solid #d9e8f1;
border-right: 0;
}
.rfidPage .hardwareBody {
padding: 24px;
}
.rfidPage .hardwareArt img {
width: 100%;
height: 190px;
object-fit: cover;
}
.rfidPage .hybridArt .hybridDevice {
height: 156px;
width: 42%;
}
.rfidPage .hybridDevice img {
height: 156px;
width: 150%;
}
.rfidPage .hardwareBanner {
grid-template-columns: 83px 1fr;
padding: 16px 13px 16px 0;
gap: 8px 12px;
}
.rfidPage .hardwareBanner img {
width: 100%;
height: 90px;
object-fit: cover;
}
.rfidPage .hardwareBanner h3 {
font-size: 16px;
}
.rfidPage .hardwareBanner p {
font-size: 11px;
}
.rfidPage .hardwareBanner .textCta {
grid-column: 2;
white-space: normal;
font-size: 11px;
margin: 0;
}
.rfidPage .hardwareNote {
font-size: 11px;
}
.rfidPage th,
.rfidPage td {
padding: 15px 14px;
}
.rfidPage table {
font-size: 12px;
min-width: 690px;
}
.rfidPage .tableNote {
font-size: 11px;
}
.rfidPage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.rfidPage .integration:last-child {
grid-column: 1/-1;
}
.rfidPage .integration strong {
font-size: 17px;
}
.rfidPage .integrationCopy {
grid-template-columns: 1fr;
gap: 13px;
}
.rfidPage .integrationCopy p {
font-size: 12px;
}
.rfidPage .proofGrid {
grid-template-columns: 1fr;
gap: 26px;
}
.rfidPage .proofIdentity {
min-height: 0;
padding: 25px;
align-items: flex-start;
}
.rfidPage .proofBrand {
font-size: 34px;
}
.rfidPage .proofContent h2 {
font-size: 31px;
}
.rfidPage .industryCards {
gap: 13px;
}
.rfidPage .industryCards .card {
padding: 24px;
}
.rfidPage .industryCards .cardIcon {
margin-bottom: 17px;
}
.rfidPage .pricingCard {
padding: 25px;
}
.rfidPage .pricingCard h3 {
font-size: 25px;
}
.rfidPage .rolloutGrid {
gap: 25px 20px;
}
.rfidPage .rolloutStep h3 {
font-size: 18px;
}
.rfidPage .rolloutStep p {
font-size: 12px;
}
.rfidPage .pilotMeasures {
display: grid;
gap: 11px;
padding: 20px;
}
.rfidPage summary {
font-size: 13px;
padding: 18px 41px 18px 17px;
}
.rfidPage summary::after {
right: 16px;
top: 17px;
font-size: 20px;
}
.rfidPage details p {
font-size: 13px;
padding: 15px 17px 20px;
}
.rfidPage .ctaPanel {
padding: 29px 25px;
border-radius: 15px;
gap: 23px;
}
.rfidPage .ctaPanel h2 {
font-size: 32px;
}
.rfidPage .ctaPanel p {
font-size: 14px;
}
.rfidPage .ctaPanel .button {
width: 100%;
min-width: 0;
}
.rfidPage .ctaPanel .ctaSmall {
text-align: center;
font-size: 10px;
}
.rfidPage .contactRow {
font-size: 11px;
gap: 12px;
}
.rfidPage .contactRow a {
font-size: 12px;
}
.rfidPage .footerGrid {
align-items: flex-start;
flex-direction: column;
gap: 17px;
}
.rfidPage .footerLinks {
gap: 14px;
}
.rfidPage .referenceLinks {
font-size: 9px;
gap: 8px 14px;
}
}
@media (max-width: 359px) {
.rfidPage .mobileNav {
display: none;
} .rfidPage .heroActions {
flex-direction: column;
}
.rfidPage .outcomeGrid {
grid-template-columns: 1fr;
}
.rfidPage .featureList {
grid-template-columns: 1fr;
}
.rfidPage .heroChecks {
font-size: 8px;
}
.rfidPage .assetRow {
grid-template-columns: 21px 1fr 53px 51px;
gap: 4px;
}
} .rfidPage {
--brand: #00a8f8;
--brand-dark: #0076dd;
--navy: #063b5c;
--navy-2: #0b4f75;
--sky: #eaf8ff;
--sky-2: #f5fbff;
--ink: #11283a;
--muted: #607487;
--line: #d9e8f1;
--white: #ffffff;
--success: #118a61;
--success-bg: #eaf8f3;
--gold: #f4c64e;
--black: #0b0b0b;
--black-soft: #171717;
--yellow: #ffc928;
--yellow-soft: #fff7d6;
--yellow-dark: #b98300;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.11);
--radius: 20px; background: var(--sky-2);
}
.rfidPage .wrap {
width: min(var(--max), calc(100% - 40px));
}
.rfidPage section {
padding: 88px 0;
}
.rfidPage h1,
.rfidPage h2,
.rfidPage h3 {
line-height: 1.12;
letter-spacing: -0.035em;
font-weight: 700;
color: var(--black);
} .rfidPage h2,
.rfidPage .copy h2 {
font-size: clamp(32px, 4.3vw, 50px);
}
.rfidPage h3 {
font-size: 23px;
}
.rfidPage .eyebrow,
.rfidPage .hero .eyebrow {
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
letter-spacing: 0;
text-transform: none;
padding: 8px 13px;
border-radius: 999px;
margin-bottom: 20px;
}
.rfidPage .eyebrow .icon {
width: 17px;
height: 17px;
}
.rfidPage .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.rfidPage .sectionHead p {
margin: 16px 0 0;
font-size: 18px;
color: var(--muted);
}
.rfidPage .button {
min-height: 48px;
padding: 11px 22px;
border-radius: 12px;
font-weight: 800;
font-size: 15px;
}
.rfidPage .button.black {
background: var(--black);
color: #fff;
}
.rfidPage .button.black:hover {
background: var(--black-soft);
}
.rfidPage .button.secondary {
background: #fff;
color: var(--navy);
border-color: var(--line);
}
.rfidPage .hero .button.primary {
background: var(--black);
color: #fff;
box-shadow: 0 10px 25px rgba(11, 11, 11, 0.12);
}
.rfidPage .hero .button.primary:hover {
background: var(--black-soft);
}
.rfidPage .hero .button.secondary {
border-color: var(--yellow);
box-shadow: inset 0 -3px 0 var(--yellow);
}
.rfidPage .button.yellow {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.rfidPage .topbar {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(12px);
}
.rfidPage .nav {
min-height: 72px;
gap: 24px;
}
.rfidPage .brand {
color: var(--navy);
font-size: 23px;
font-weight: 900;
letter-spacing: -0.03em;
}
.rfidPage .brand>span:last-child span {
color: var(--brand);
}
.rfidPage .brandMark {
background: linear-gradient(135deg, var(--brand), #62ccff);
color: white;
border: 0;
border-radius: 10px;
width: 34px;
height: 34px;
}
.rfidPage .navlinks {
gap: 22px;
font-size: 14px;
color: var(--muted);
}
.rfidPage .nav .button {
min-height: 46px;
font-size: 13px;
}
.rfidPage .hero {
padding: 38px 0 72px;
background:
radial-gradient(circle at 85% 15%,
rgba(0, 168, 248, 0.18),
transparent 30%),
radial-gradient(circle at 15% 30%,
rgba(0, 168, 248, 0.08),
transparent 30%),
linear-gradient(180deg, #ffffff 0%, #f3fbff 100%);
}
.rfidPage .heroGrid {
grid-template-columns: 1.03fr 0.97fr;
gap: 58px;
}
.rfidPage .hero h1 .accent {
color: var(--black);
}
.rfidPage .lead {
color: var(--muted);
font-size: 20px;
line-height: 1.65;
margin-top: 24px;
}
.rfidPage .heroActions {
margin-top: 30px;
}
.rfidPage .heroChecks {
color: var(--muted);
font-size: 12px;
}
.rfidPage .productFrame {
border-radius: 20px;
box-shadow: var(--shadow);
}
.rfidPage .heroScene>img {
object-fit: contain;
aspect-ratio: 4/3;
}
.rfidPage .clientBand {
padding: 30px 0;
background: white;
border-top: 0;
border-bottom: 1px solid var(--line);
}
.rfidPage .trustLabel {
color: var(--black);
font-size: 14px;
font-weight: 800;
text-transform: none;
letter-spacing: 0;
margin-bottom: 18px;
}
.rfidPage .logoRow {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 12px;
}
.rfidPage .logoBox {
min-width: 0;
min-height: 80px;
display: grid;
place-items: center;
background: white;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
}
.rfidPage .clientLogo {
display: block;
width: 100%;
height: 48px;
object-fit: contain;
max-width: 125px;
}
.rfidPage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 48px;
font-size: 15px;
font-weight: 800;
color: var(--navy);
text-align: center;
line-height: 1.2;
}
.rfidPage .aiJourney,
.rfidPage .darkSection {
background: linear-gradient(135deg, var(--black), var(--black-soft));
border-top: 4px solid var(--yellow);
}
.rfidPage .aiJourney h2,
.rfidPage .darkSection h2,
.rfidPage .darkSection h3 {
color: white;
}
.rfidPage .aiJourney p,
.rfidPage .darkSection p {
color: #d7d7d7;
}
.rfidPage .aiJourney .eyebrow,
.rfidPage .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.rfidPage .aiStep {
background: #151515;
border: 1px solid #2a2a2a;
border-radius: 16px;
padding: 26px;
}
.rfidPage .aiStepNum {
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-size: 12px !important;
font-weight: 700;
letter-spacing: 0;
border-radius: 9px;
padding: 6px 10px;
color: #000 !important;
white-space: nowrap;
width: auto;
}
.rfidPage .aiStep h3 {
color: white;
}
.rfidPage .aiStep p {
color: #cfcfcf;
font-size: 14px;
}
.rfidPage .aiCallout {
color: #d7d7d7;
background: #222;
border: 1px solid #404040;
}
.rfidPage .outcomesSection {
background: var(--sky-2);
}
.rfidPage .outcome {
border-radius: 16px;
padding: 24px;
}
.rfidPage .outcome h3 {
font-size: 23px;
}
.rfidPage .outcome p {
font-size: 14px;
}
.rfidPage .twoCol {
gap: 54px;
}
.rfidPage .copy>p {
font-size: 17px;
margin-top: 16px;
color: var(--muted);
}
.rfidPage .darkSection .copy>p {
color: #d7d7d7;
}
.rfidPage .featureList,
.rfidPage details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
padding: 0;
margin-top: 25px;
}
.rfidPage .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
line-height: 1.6;
}
.rfidPage .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.rfidPage .darkSection .featureItem {
color: #f7f7f7;
}
.rfidPage .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.rfidPage details.capabilityMore {
margin: 18px 0 0;
background: transparent;
border: 0;
padding: 0;
overflow: visible;
border-radius: 0;
}
.rfidPage details.capabilityMore summary {
display: inline-flex;
position: static;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
padding: 6px 0;
border: 0;
line-height: 1.5;
}
.rfidPage details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.rfidPage details.capabilityMore summary::after {
content: "+";
position: static;
font-size: 18px;
line-height: 1;
color: inherit;
font-weight: 850;
}
.rfidPage details.capabilityMore[open] summary::after {
content: "\2212";
}
.rfidPage details.capabilityMore .moreGrid {
margin-top: 14px;
}
.rfidPage .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.rfidPage .scopeNote {
font-size: 12px !important;
color: #d0d0d0 !important;
border-color: #333;
}
.rfidPage .inlineCtaSection {
padding: 0 0 40px;
}
.rfidPage .inlineCta {
background: white;
border-radius: 18px;
border-left: 5px solid var(--yellow);
padding: 24px 26px;
}
.rfidPage .inlineCta h3 {
font-size: 20px;
}
.rfidPage .inlineCta p {
font-size: 14px;
}
.rfidPage .card {
border-radius: 18px;
}
.rfidPage .hardwareArt.hardwareClear {
height: auto;
min-height: 0;
display: block;
background: var(--sky-2);
border-right: 0;
}
.rfidPage .hardwareClear img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 600/340;
object-fit: contain;
margin: 0;
max-width: 100%;
}
.rfidPage .deviceCaption {
padding: 0 15px 18px;
font-size: 14px;
font-weight: 800;
color: var(--navy);
text-align: center;
}
.rfidPage .hardwareBody {
padding: 27px;
}
.rfidPage .hardwareBody h3 {
font-size: 23px;
}
.rfidPage .hardwareBody p {
font-size: 14px;
}
.rfidPage .hardwareFoot {
font-size: 12px !important;
}
.rfidPage .hardwareBanner {
grid-template-columns: 100px 1fr auto;
padding: 24px;
}
.rfidPage .tagTile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 85px;
border: 1px solid #e8d487;
background: var(--yellow-soft);
border-radius: 13px;
color: var(--black);
font-size: 12px;
font-weight: 800;
}
.rfidPage .tagTile .icon {
width: 34px;
height: 34px;
}
.rfidPage .auditVisual {
grid-template-columns: 1fr 1.05fr;
padding: 20px 20px 20px 0;
}
.rfidPage .auditReader img {
width: 155%;
margin-left: -28%;
object-fit: contain;
max-width: none;
}
.rfidPage .auditCard {
padding: 20px 16px;
}
.rfidPage .integration {
border-bottom: 3px solid var(--brand);
}
.rfidPage .integration strong {
color: var(--black);
}
.rfidPage thead th {
background: var(--black);
}
.rfidPage thead th:nth-child(3) {
background: var(--navy);
}
.rfidPage .rolloutNumber {
background: var(--yellow);
color: var(--black);
}
.rfidPage .faq {
max-width: 900px;
}
.rfidPage .faqSection {
background: white;
}
.rfidPage .faq details {
background: white;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
overflow: visible;
}
.rfidPage .faq summary {
display: list-item;
cursor: pointer;
font-size: 16px;
font-weight: 800;
color: var(--navy);
padding: 0;
list-style: disclosure-closed inside;
line-height: 1.65;
}
.rfidPage .faq details[open] summary {
list-style-type: disclosure-open;
border: 0;
}
.rfidPage .faq summary::-webkit-details-marker {
display: inline;
}
.rfidPage .faq summary::after {
content: none;
}
.rfidPage .faq details p {
color: var(--muted);
margin: 12px 0 0;
padding: 0;
font-size: 16px;
line-height: 1.65;
}
.rfidPage .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 0;
padding: 54px;
border-top: 5px solid var(--yellow);
box-shadow: var(--shadow);
}
.rfidPage .ctaPanel h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: white;
}
.rfidPage .ctaPanel p {
font-size: 18px;
color: #e6e6e6;
}
.rfidPage .ctaPanel .button {
background: var(--yellow);
color: var(--black);
} .rfidPage .aiScope {
font-size: 13px !important;
border-top: 1px solid var(--line);
padding-top: 17px;
}
.rfidPage .aiWorkspace {
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
background: white;
}
.rfidPage .aiWorkspaceHead {
background: var(--black);
color: white;
border-top: 4px solid var(--yellow);
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 19px 22px;
font-size: 11px;
}
.rfidPage .aiBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 15px;
}
.rfidPage .aiBrand .icon {
color: var(--yellow);
}
.rfidPage .identifiedAsset {
display: flex;
align-items: center;
gap: 12px;
margin: 20px;
padding: 15px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 12px;
}
.rfidPage .identityIcon {
color: var(--brand-dark);
background: var(--sky);
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 9px;
flex: 0 0 auto;
}
.rfidPage .identifiedAsset small {
display: block;
font-size: 9px;
letter-spacing: 0.04em;
color: var(--muted);
}
.rfidPage .identifiedAsset strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.rfidPage .identifiedAsset div>span {
font-size: 10px;
color: var(--muted);
}
.rfidPage .identifiedAsset>.pill {
margin-left: auto;
}
.rfidPage .aiConversation {
padding: 0 20px 20px;
}
.rfidPage .userQuestion {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 0 0 17px;
}
.rfidPage .questionAvatar {
display: grid;
place-items: center;
border-radius: 50%;
background: var(--sky);
color: var(--navy);
width: 28px;
height: 28px;
font-size: 10px;
font-weight: 800;
flex: 0 0 auto;
}
.rfidPage .userQuestion p {
background: #f4f5f6;
border-radius: 0 12px 12px;
padding: 12px 14px;
font-size: 13px;
color: var(--ink);
line-height: 1.6;
}
.rfidPage .aiResponse {
padding: 18px;
border: 1px solid #e8d487;
background: #fffdf5;
border-radius: 12px;
}
.rfidPage .aiResponseLabel {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 800;
color: #765500;
margin-bottom: 9px;
}
.rfidPage .aiResponseLabel .icon {
width: 18px;
height: 18px;
}
.rfidPage .aiResponse>strong {
display: block;
font-size: 17px;
color: var(--black);
margin-bottom: 13px;
}
.rfidPage .aiChecklist {
display: grid;
gap: 10px;
}
.rfidPage .aiChecklist>div {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 12px;
color: var(--ink);
}
.rfidPage .aiChecklist .icon {
width: 16px;
height: 16px;
background: white;
border: 1px solid #d7dabf;
border-radius: 4px;
padding: 2px;
color: var(--success);
margin-top: 2px;
}
.rfidPage .knowledgeTags {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px;
padding-top: 12px;
border-top: 1px solid #eee5c6;
}
.rfidPage .knowledgeTags>span {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: #765500;
padding: 4px 7px;
background: white;
border-radius: 5px;
}
.rfidPage .knowledgeTags .icon {
width: 12px;
height: 12px;
}
.rfidPage .humanReview {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 10px;
color: var(--muted);
margin-top: 14px;
}
.rfidPage .humanReview .icon {
width: 15px;
height: 15px;
color: var(--success);
} .rfidPage .transferBoard {
background: white;
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
}
.rfidPage .transferAsset {
display: flex;
gap: 12px;
align-items: center;
padding: 20px 22px 16px;
}
.rfidPage .transferAsset>span {
background: var(--yellow-soft);
color: var(--black);
width: 43px;
height: 43px;
border-radius: 10px;
display: grid;
place-items: center;
flex: 0 0 auto;
}
.rfidPage .transferAsset strong {
display: block;
font-size: 16px;
}
.rfidPage .transferAsset small {
display: block;
color: var(--muted);
font-size: 11px;
margin-top: 4px;
}
.rfidPage .routeLabels {
display: flex;
justify-content: space-between;
padding: 0 54px 10px;
font-size: 13px;
font-weight: 800;
color: var(--navy);
}
.rfidPage .transferIllustration {
width: calc(100% - 36px);
height: auto;
object-fit: contain;
margin: 0 18px;
}
.rfidPage .transferTimeline {
padding: 10px 22px 19px;
}
.rfidPage .transferTimeline>div {
display: grid;
grid-template-columns: 30px 1fr auto;
gap: 10px;
padding: 13px 0;
align-items: center;
border-bottom: 1px solid var(--line);
}
.rfidPage .transferTimeline>div:last-child {
border: 0;
}
.rfidPage .transferNumber {
display: grid;
place-items: center;
width: 28px;
height: 28px;
background: var(--yellow-soft);
color: var(--black);
font-size: 10px;
font-weight: 800;
border-radius: 8px;
}
.rfidPage .transferTimeline strong {
display: block;
font-size: 13px;
}
.rfidPage .transferTimeline small {
display: block;
color: var(--muted);
font-size: 10px;
}
.rfidPage .transferTime {
font-size: 11px;
color: var(--muted);
display: flex;
align-items: center;
gap: 7px;
}
.rfidPage .transferTime .icon {
width: 15px;
height: 15px;
color: var(--success);
} .rfidPage .maintenanceBoard {
background: white;
color: var(--ink);
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--line);
}
.rfidPage .maintenanceHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--line);
padding: 16px 20px;
font-size: 12px;
}
.rfidPage .maintenanceHeader>span:first-child {
display: flex;
gap: 8px;
align-items: center;
font-weight: 800;
}
.rfidPage .maintenanceHeader .icon {
width: 18px;
height: 18px;
color: var(--brand-dark);
}
.rfidPage .maintenanceAsset {
padding: 23px 22px 18px;
display: flex;
gap: 14px;
align-items: center;
}
.rfidPage .equipmentIcon {
display: grid;
place-items: center;
background: var(--sky);
color: var(--brand-dark);
border-radius: 14px;
width: 64px;
height: 64px;
flex: 0 0 auto;
}
.rfidPage .equipmentIcon .icon {
width: 34px;
height: 34px;
}
.rfidPage .maintenanceAsset small {
display: block;
font-size: 10px;
color: var(--muted);
font-weight: 750;
}
.rfidPage .maintenanceAsset strong {
display: block;
font-size: 23px;
color: var(--black);
line-height: 1.4;
}
.rfidPage .maintenanceAsset div>span {
font-size: 11px;
color: var(--muted);
}
.rfidPage .maintenanceStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0 22px 18px;
}
.rfidPage .maintenanceStats>div {
display: flex;
gap: 9px;
align-items: flex-start;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px;
}
.rfidPage .maintenanceStats .icon {
width: 18px;
height: 18px;
color: var(--brand-dark);
margin-top: 2px;
}
.rfidPage .maintenanceStats span {
font-size: 10px;
color: var(--muted);
}
.rfidPage .maintenanceStats strong {
display: block;
font-size: 11px;
color: var(--ink);
margin-top: 4px;
}
.rfidPage .activeWork {
margin: 0 22px 18px;
border: 1px solid var(--line);
border-left: 4px solid var(--yellow);
border-radius: 11px;
padding: 17px;
}
.rfidPage .activeWorkTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 9px;
color: var(--muted);
font-weight: 750;
}
.rfidPage .activeWorkTitle {
display: block;
font-size: 20px;
color: var(--black);
line-height: 1.4;
margin-top: 13px;
}
.rfidPage .activeWork>p {
color: var(--muted) !important;
font-size: 11px;
margin-top: 5px;
}
.rfidPage .workChecklist {
display: grid;
gap: 10px;
margin-top: 18px;
}
.rfidPage .workChecklist>div {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.rfidPage .workChecklist .icon,
.rfidPage .emptyCheck {
display: block;
width: 17px;
height: 17px;
border: 1px solid #a6cdbd;
border-radius: 4px;
background: var(--success-bg);
color: var(--success);
padding: 2px;
flex: 0 0 auto;
}
.rfidPage .emptyCheck {
background: white;
border-color: var(--line);
}
.rfidPage .workEvidence {
display: flex;
gap: 16px;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 17px;
}
.rfidPage .workEvidence>span {
display: flex;
gap: 5px;
align-items: center;
font-size: 11px;
color: var(--muted);
}
.rfidPage .workEvidence .icon {
width: 14px;
height: 14px;
}
.rfidPage .assetHistoryUpdate {
display: flex;
gap: 9px;
align-items: center;
background: var(--success-bg);
color: #166548;
padding: 15px 22px;
font-size: 11px;
}
.rfidPage .assetHistoryUpdate .icon {
width: 17px;
height: 17px;
}
.rfidPage :where(a, summary):focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.rfidPage .darkSection :where(a, summary):focus-visible {
outline-color: var(--yellow);
}
.new-theme-design.rfidPage .icon {
background: transparent !important;
margin: 0 !important;
}
.new-theme-design.rfidPage .dzcmms-logo {
height: 53px !important;
}
.new-theme-design.rfidPage .aiStep::after {
display: none;
} @media (max-width: 1100px) {
.rfidPage .navlinks {
gap: 15px;
font-size: 12px;
}
.rfidPage .nav {
gap: 18px;
}
.rfidPage .heroGrid {
gap: 36px;
}
.rfidPage .twoCol {
gap: 36px;
}
.rfidPage .hardwareBanner {
grid-template-columns: 90px 1fr;
}
.rfidPage .hardwareBanner .textCta {
grid-column: 2;
}
}
@media (max-width: 980px) {
.rfidPage .heroGrid,
.rfidPage .twoCol,
.rfidPage .ctaPanel {
grid-template-columns: 1fr;
}
.rfidPage .navlinks {
display: none;
}
.rfidPage .mobileNav {
display: block;
position: relative;
margin: 0 0 0 auto;
overflow: visible;
border: 0;
background: transparent;
}
.rfidPage .mobileNav summary {
padding: 9px 26px 9px 8px;
font-size: 12px;
border: 0 !important;
}
.rfidPage .mobileNav summary::after {
right: 7px;
top: 9px;
font-size: 17px;
}
.rfidPage .mobileNav nav {
position: absolute;
right: 0;
top: 45px;
background: #fff;
border: 1px solid var(--line);
z-index: 55;
padding: 9px;
border-radius: 9px;
min-width: 190px;
}
.rfidPage .mobileNav nav a {
display: block;
padding: 9px 11px;
font-size: 12px;
}
.rfidPage .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rfidPage .heroGrid {
gap: 42px;
}
.rfidPage .hero h1 { max-width: 820px;
}
.rfidPage .heroVisual {
max-width: 650px;
width: 100%;
margin-inline: auto;
}
.rfidPage .twoCol .copy,
.rfidPage .twoCol.reverse .copy {
order: 1;
}
.rfidPage .twoCol .visual,
.rfidPage .twoCol.reverse .visual {
order: 2;
max-width: 650px;
width: 100%;
margin-inline: auto;
}
.rfidPage .copy h2 {
max-width: 760px;
}
.rfidPage .outcomeGrid {
grid-template-columns: repeat(2, 1fr);
}
.rfidPage .hardwareCards {
grid-template-columns: 1fr;
}
.rfidPage .hardwareCard {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
}
.rfidPage .hardwareArt.hardwareClear {
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 0;
border-right: 1px solid var(--line);
}
.rfidPage .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.rfidPage .ctaPanel {
gap: 26px;
}
}
@media (max-width: 640px) {
.rfidPage .nav {
min-height: 67px;
gap: 9px;
}
.rfidPage .brand {
font-size: 19px;
gap: 6px;
}
.rfidPage .brandMark {
width: 28px;
height: 31px;
}
.rfidPage .nav .button {
padding: 9px 11px;
min-height: 40px;
font-size: 11px;
gap: 5px;
}
.rfidPage .nav .button .icon {
display: none;
}
.rfidPage .mobileNav {
margin-left: auto;
}
.rfidPage .mobileNav summary {
padding-left: 0;
font-size: 11px;
}
.rfidPage .mobileNav nav {
right: -80px;
}
.rfidPage .wrap {
width: min(var(--max), calc(100% - 24px));
}
.rfidPage section {
padding: 64px 0;
}
.rfidPage .hero {
padding: 26px 0 52px;
} .rfidPage h2,
.rfidPage .copy h2,
.rfidPage .sectionHead h2 {
font-size: 34px;
}
.rfidPage .eyebrow,
.rfidPage .hero .eyebrow {
font-size: 11px;
padding: 8px 11px;
}
.rfidPage .lead {
font-size: 18px;
}
.rfidPage .heroActions .button {
font-size: 13px;
padding: 12px 14px;
}
.rfidPage .heroChecks {
font-size: 10px;
}
.rfidPage .sectionHead p {
font-size: 17px;
}
.rfidPage .copy>p {
font-size: 16px;
}
.rfidPage .featureList,
.rfidPage details.capabilityMore .moreGrid {
grid-template-columns: 1fr;
gap: 12px;
}
.rfidPage .featureItem {
font-size: 14px;
}
.rfidPage .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.rfidPage .logoBox {
min-height: 76px;
}
.rfidPage .trustLabel {
font-size: 13px;
}
.rfidPage .aiFlow {
grid-template-columns: 1fr;
}
.rfidPage .aiStep h3 {
font-size: 23px;
}
.rfidPage .aiStep p {
font-size: 14px;
}
.rfidPage .outcomeGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.rfidPage .outcome {
padding: 24px;
}
.rfidPage .twoCol {
gap: 34px;
}
.rfidPage .hardwareCard {
display: flex;
}
.rfidPage .hardwareArt.hardwareClear {
border-bottom: 1px solid var(--line);
border-right: 0;
}
.rfidPage .hardwareBody {
padding: 25px;
}
.rfidPage .hardwareBanner {
grid-template-columns: 76px 1fr;
padding: 20px 16px;
}
.rfidPage .inlineCtaSection {
padding: 0 0 30px;
}
.rfidPage .inlineCta {
padding: 24px;
}
.rfidPage .faq details {
padding: 18px;
}
.rfidPage .faq summary {
font-size: 15px;
}
.rfidPage .faq details p {
font-size: 15px;
}
.rfidPage .ctaPanel {
padding: 34px 24px;
border-radius: 0;
}
.rfidPage .ctaPanel h2 {
font-size: 34px;
}
.rfidPage .ctaPanel p {
font-size: 17px;
}
.rfidPage .aiWorkspaceHead {
padding: 16px;
font-size: 9px;
}
.rfidPage .aiBrand {
font-size: 14px;
}
.rfidPage .identifiedAsset {
margin: 16px;
padding: 12px;
gap: 9px;
}
.rfidPage .identifiedAsset strong {
font-size: 11px;
}
.rfidPage .identifiedAsset>.pill {
font-size: 8px;
padding: 3px 5px;
}
.rfidPage .identifiedAsset div>span {
font-size: 9px;
}
.rfidPage .aiConversation {
padding: 0 16px 16px;
}
.rfidPage .aiResponse {
padding: 15px;
}
.rfidPage .aiChecklist>div {
font-size: 12px;
}
.rfidPage .transferAsset {
padding: 17px;
}
.rfidPage .transferAsset strong {
font-size: 14px;
}
.rfidPage .routeLabels {
padding-inline: 37px;
font-size: 12px;
}
.rfidPage .transferTimeline {
padding: 8px 16px 14px;
}
.rfidPage .transferTimeline>div {
grid-template-columns: 28px 1fr auto;
gap: 8px;
}
.rfidPage .transferTimeline small {
font-size: 9px;
}
.rfidPage .transferTime {
font-size: 10px;
gap: 4px;
}
.rfidPage .maintenanceAsset {
padding: 20px 17px 16px;
}
.rfidPage .maintenanceAsset strong {
font-size: 21px;
}
.rfidPage .maintenanceStats {
margin-inline: 16px;
gap: 8px;
}
.rfidPage .maintenanceStats>div {
padding: 10px;
gap: 6px;
}
.rfidPage .maintenanceStats strong {
font-size: 10px;
}
.rfidPage .activeWork {
margin-inline: 16px;
padding: 14px;
}
.rfidPage .activeWorkTitle {
font-size: 18px;
}
.rfidPage .workChecklist>div {
font-size: 11px;
}
.rfidPage .assetHistoryUpdate {
padding: 14px 17px;
font-size: 10px;
}
.rfidPage .auditVisual {
grid-template-columns: 0.8fr 1.2fr;
padding: 16px 13px 16px 0;
}
}
@media (max-width: 359px) {
.rfidPage .mobileNav {
display: none;
}
.rfidPage .nav {
gap: 8px;
}
.rfidPage .brand {
font-size: 18px;
}
.rfidPage .nav .button {
padding: 10px;
font-size: 11px;
} .rfidPage .identifiedAsset>.pill {
display: none;
}
.rfidPage .activeWorkTop {
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.rfidPage .heroVisual {
display: none;
}
.rfidPage .twoCol .visual {
order: 0 !important;
}
.rfidPage .copy {
order: 1;
}
.rfidPage .outcome svg {
display: none;
}
}  .warehousePage {
--brand: #00a8f8;
--brand2: #0076dd;
--navy: #063b5c;
--navy2: #0a4e75;
--sky: #eaf8ff;
--sky2: #f5fbff;
--ink: #11283a;
--muted: #607487;
--line: #d9e8f1;
--green: #118a61;
--greenbg: #eaf8f3;
--yellow: #ffc928;
--yellowsoft: #fff7d6;
--black: #0b0b0b;
--black2: #171717;
--red: #e25757;
--purple: #7c67e8;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.09); font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
isolation: isolate;
overflow-wrap: break-word;
font-size: 16px;
}
.warehousePage *,
.warehousePage *::before,
.warehousePage *::after {
box-sizing: border-box;
}
.warehousePage :where(h1, h2, h3, p, figure, ul, ol, dl, dd) {
margin: 0;
}
.warehousePage a {
color: inherit;
text-decoration: none;
}
.warehousePage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px;
}
.warehousePage .ico {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle;
}
.warehousePage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto;
}
.warehousePage section {
padding: 76px 0;
scroll-margin-top: 30px;
}
.warehousePage [id] {
scroll-margin-top: 28px;
}
.warehousePage h1,
.warehousePage h2,
.warehousePage h3 {
line-height: 1.12;
letter-spacing: -0.035em;
font-weight: 780;
color: var(--black);
} .warehousePage h2 {
font-size: clamp(31px, 3.35vw, 45px);
}
.warehousePage h3 {
font-size: 21px;
}
.warehousePage p {
color: var(--muted);
}
.warehousePage .ey {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 12px;
font-weight: 800;
margin-bottom: 18px;
}
.warehousePage .ey .ico {
width: 16px;
height: 16px;
}
.warehousePage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
line-height: 1.75;
}
.warehousePage .btn {
display: inline-flex;
gap: 12px;
min-height: 49px;
padding: 11px 20px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: background 0.2s ease;
line-height: 1.45;
font-size: 14px;
text-align: center;
}
.warehousePage .btn .ico {
width: 18px;
height: 18px;
}
.warehousePage .btn.black {
background: var(--black);
color: #fff;
}
.warehousePage .btn.black:hover {
background: #292929;
}
.warehousePage .btn.yellow {
background: var(--yellow);
color: #000;
}
.warehousePage .btn.yellow:hover {
background: #ffda67;
}
.warehousePage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.warehousePage .btn.outline:hover {
background: var(--sky);
}
.warehousePage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.warehousePage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.warehousePage .soft {
background: var(--sky2);
}
.warehousePage .sectionHead {
max-width: 820px;
margin-bottom: 35px;
}
.warehousePage .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.warehousePage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.warehousePage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.warehousePage .dark h2,
.warehousePage .dark h3 {
color: #fff;
}
.warehousePage .dark p {
color: #d6d6d6;
}
.warehousePage .dark .ey {
background: var(--yellow);
color: var(--black);
}
.warehousePage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.warehousePage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 99;
background: #fff;
padding: 12px 20px;
color: var(--navy);
}
.warehousePage .skipLink:focus {
top: 10px;
} .warehousePage .hero {
padding: 30px 0 64px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.18),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.14),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.warehousePage .breadcrumb {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
font-size: 10px;
color: #536c7d;
margin-bottom: 31px;
}
.warehousePage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px;
}
.warehousePage .breadcrumb .ico {
width: 11px;
height: 11px;
}
.warehousePage .heroGrid {
display: grid;
grid-template-columns: 1.25fr 1.04fr;
gap: 38px;
align-items: center;
}
.warehousePage .hero h1 span {
color: var(--brand2);
}
.warehousePage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px;
}
.warehousePage .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.warehousePage .heroVisual {
min-width: 0;
position: relative;
}
.warehousePage .warehouseStage {
position: relative;
height: 560px;
max-width: 610px;
margin: auto;
}
.warehousePage .warehouseScene {
position: absolute;
top: 13px;
left: -15px;
width: 100%;
height: 440px;
object-fit: contain;
}
.warehousePage .stageLabel {
position: absolute;
left: 15px;
top: 3px;
background: #fff;
border: 1px solid #c6e5f3;
padding: 10px 13px;
border-radius: 10px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: var(--navy);
font-weight: 750;
}
.warehousePage .stageLabel .ico {
width: 18px;
height: 18px;
color: var(--brand2);
}
.warehousePage .inventoryPhone {
position: absolute;
right: -1px;
top: 85px;
width: 212px;
padding: 7px;
border-radius: 28px;
background: #102435;
border: 1px solid #254a62;
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.14);
}
.warehousePage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden;
min-height: 328px;
}
.warehousePage .phoneNotch {
height: 20px;
background: #102435;
display: flex;
justify-content: center;
align-items: center;
}
.warehousePage .phoneNotch:before {
content: "";
height: 5px;
width: 53px;
border-radius: 9px;
background: #3f5665;
}
.warehousePage .phoneHead {
padding: 13px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.warehousePage .phoneHead strong {
font-size: 12px;
display: block;
}
.warehousePage .phoneHead small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.warehousePage .phoneBody {
padding: 12px;
}
.warehousePage .phoneBody>.badge {
font-size: 9px;
}
.warehousePage .scanStatus {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px;
}
.warehousePage .scanStatus>.ico {
width: 31px;
height: 31px;
color: var(--brand2);
}
.warehousePage .scanStatus strong {
font-size: 29px;
line-height: 1;
display: block;
letter-spacing: -0.03em;
}
.warehousePage .scanStatus small {
font-size: 9px;
color: var(--muted);
}
.warehousePage .phoneLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
border-bottom: 1px solid var(--line);
padding: 9px 0;
}
.warehousePage .phoneLine:last-child {
border: 0;
}
.warehousePage .phoneAlert {
padding: 9px;
background: var(--yellowsoft);
border: 1px solid #f0dfab;
border-radius: 7px;
font-size: 9px;
margin-top: 12px;
color: #66500f;
}
.warehousePage .heroStockCard {
position: absolute;
left: 3px;
bottom: 2px;
width: 274px;
background: #111820;
border: 1px solid #263d4d;
color: #fff;
border-radius: 15px;
padding: 17px 18px;
}
.warehousePage .stockCardHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
margin-bottom: 13px;
color: #d2dfe7;
}
.warehousePage .stockCardHead .ico {
width: 18px;
height: 18px;
color: var(--yellow);
}
.warehousePage .stockCardMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
}
.warehousePage .stockCardMetrics strong {
display: block;
font-size: 27px;
color: #fff;
line-height: 1.15;
letter-spacing: -0.04em;
}
.warehousePage .stockCardMetrics span {
font-size: 9px;
color: #b6ccd9;
}
.warehousePage .stockCardMetrics>div+div {
border-left: 1px solid #395364;
padding-left: 18px;
}
.warehousePage .stageTag {
position: absolute;
right: 8px;
bottom: 8px;
background: var(--yellow);
color: #0b0b0b;
border-radius: 9px;
padding: 8px 10px;
max-width: 208px;
font-size: 10px;
font-weight: 800;
}
.warehousePage .stageTag .ico {
width: 15px;
height: 15px;
margin-right: 4px;
}
.warehousePage .heroVisual figcaption {
font-size: 10px;
color: #536c7d;
text-align: center;
margin-top: 14px;
}
.warehousePage .trust {
padding: 27px 0;
border-bottom: 1px solid var(--line);
background: #fff;
}
.warehousePage .trustLabel {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-bottom: 19px;
color: #3d596c;
}
.warehousePage .logos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
align-items: center;
}
.warehousePage .logo {
height: 60px;
display: grid;
place-items: center;
padding: 8px 10px;
border: 1px solid #e8f0f5;
border-radius: 11px;
background: #fff;
overflow: hidden;
}
.warehousePage .clientLogo {
width: 100%;
height: 40px;
object-fit: contain;
display: block;
pointer-events: none;
}
.warehousePage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #445e6f;
font-weight: 800;
text-align: center;
line-height: 1.2;
}
.warehousePage .quickNav {
display: flex;
justify-content: center;
gap: 6px 25px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: #32617b;
}
.warehousePage .quickNav a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #b7dceb;
}
.warehousePage .quickNav a:hover {
color: #005f94;
} .warehousePage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.warehousePage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
position: relative;
overflow: hidden;
}
.warehousePage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.warehousePage .outcome:nth-child(2):before {
background: var(--yellow);
}
.warehousePage .outcome:nth-child(3):before {
background: var(--green);
}
.warehousePage .outcome:nth-child(4):before {
background: var(--purple);
}
.warehousePage .outcome>.ico {
width: 28px;
height: 28px;
color: var(--navy);
margin-bottom: 18px;
}
.warehousePage .outcome h3 {
font-size: 20px;
margin-bottom: 10px;
}
.warehousePage .outcome p {
font-size: 13px;
line-height: 1.75;
}
.warehousePage .workflow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.warehousePage .flowStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 18px;
position: relative;
padding: 23px 20px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line);
}
.warehousePage .flowNumber {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--yellow);
font-size: 14px;
font-weight: 850;
}
.warehousePage .flowStep h3 {
font-size: 19px;
margin-bottom: 9px;
}
.warehousePage .flowStep p {
font-size: 13px;
}
.warehousePage .flowStep:not(:last-child):after {
content: "\2192";
position: absolute;
right: -20px;
top: 37px;
color: #0076dd;
font-size: 23px;
z-index: 2;
}
.warehousePage .workflowSection {
padding-top: 62px;
padding-bottom: 65px;
}
.warehousePage .workflowSection .sectionHead {
margin-bottom: 28px;
} .warehousePage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.warehousePage .feature.reverse .visual {
order: -1;
}
.warehousePage .copy>p {
color: var(--muted);
font-size: 16px;
margin-top: 18px;
line-height: 1.8;
}
.warehousePage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 16px;
margin-top: 23px;
list-style: none;
padding: 0;
}
.warehousePage .fl li {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.65;
align-items: flex-start;
min-width: 0;
}
.warehousePage .tick {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--greenbg);
color: #0b7651;
display: grid;
place-items: center;
flex: 0 0 20px;
margin-top: 1px;
}
.warehousePage .tick .ico {
width: 12px;
height: 12px;
stroke-width: 2.2;
}
.warehousePage details.capabilityMore {
margin-top: 21px;
background: none;
border: 0;
padding: 0;
border-radius: 0;
}
.warehousePage .capabilityMore summary {
display: inline-flex;
gap: 9px;
align-items: center;
color: #006fa9;
font-size: 13px;
font-weight: 800;
cursor: pointer;
list-style: none;
min-height: 33px;
}
.warehousePage .capabilityMore summary::-webkit-details-marker {
display: none;
}
.warehousePage .capabilityMore summary::after {
content: "+";
font-size: 20px;
font-weight: 500;
line-height: 1;
}
.warehousePage .capabilityMore[open] summary::after {
content: "\2212";
}
.warehousePage .capabilityMore .fl {
margin-top: 14px;
}
.warehousePage .dark .fl {
color: #e7e7e7;
}
.warehousePage .dark .tick {
background: var(--yellow);
color: #000;
}
.warehousePage .dark .capabilityMore summary {
color: var(--yellow);
}
.warehousePage .visual {
min-width: 0;
position: relative;
}
.warehousePage .visualInner {
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.15),
transparent 28%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 24px;
position: relative;
overflow: hidden;
}
.warehousePage .visual figcaption {
font-size: 10px;
line-height: 1.65;
text-align: center;
margin-top: 11px;
color: #526c80;
}
.warehousePage .appWindow {
background: #fff;
border: 1px solid #c5dde9;
border-radius: 13px;
overflow: hidden;
}
.warehousePage .appBar {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 14px;
background: #fff;
border-bottom: 1px solid var(--line);
min-width: 0;
}
.warehousePage .appBar strong {
font-size: 11px;
color: #183c53;
}
.warehousePage .appMark {
display: grid;
place-items: center;
background: var(--sky);
width: 25px;
height: 25px;
border-radius: 7px;
color: #0076dd;
}
.warehousePage .appMark .ico {
width: 15px;
height: 15px;
}
.warehousePage .windowDots {
margin-left: auto;
display: flex;
gap: 4px;
}
.warehousePage .windowDots i {
width: 4px;
height: 4px;
background: #bccfd9;
border-radius: 50%;
}
.warehousePage .appBody {
padding: 18px;
}
.warehousePage .appSub {
font-size: 10px;
color: #617a8c;
margin-bottom: 14px;
}
.warehousePage .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
padding: 5px 7px;
border-radius: 6px;
background: #eef5f9;
color: #375e75;
vertical-align: middle;
}
.warehousePage .badge.green {
background: var(--greenbg);
color: #0b704d;
}
.warehousePage .badge.yellow {
background: var(--yellowsoft);
color: #695000;
}
.warehousePage .badge.blue {
background: #e4f6ff;
color: #006799;
}
.warehousePage .badge.red {
background: #fff0f0;
color: #a23d3d;
}
.warehousePage .badge.darkBadge {
background: #203c4f;
color: #e4f3fc;
}
.warehousePage .progress {
height: 7px;
background: #e4eef4;
border-radius: 8px;
overflow: hidden;
margin: 14px 0;
}
.warehousePage .progress span {
height: 100%;
background: var(--brand2);
display: block;
border-radius: inherit;
}
.warehousePage .appHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 14px;
}
.warehousePage .appHeading>strong {
font-size: 15px;
line-height: 1.3;
color: #143c55;
}
.warehousePage .appHeading small {
font-size: 10px;
color: var(--muted);
display: block;
}
.warehousePage .miniTabs {
display: flex;
gap: 17px;
font-size: 10px;
color: #597488;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 17px;
}
.warehousePage .miniTabs .active {
color: #006fa9;
font-weight: 800;
position: relative;
}
.warehousePage .miniTabs .active:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -11px;
border-bottom: 2px solid #0076dd;
}
.warehousePage .lightNote {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #466b81;
background: #f3f9fc;
border: 1px solid #dceaf2;
padding: 10px;
border-radius: 8px;
margin-top: 14px;
}
.warehousePage .lightNote .ico {
width: 16px;
height: 16px;
color: #0076dd;
}
.warehousePage .inlineNotice {
display: flex;
gap: 9px;
align-items: flex-start;
background: #fff8e0;
border: 1px solid #f1e1af;
border-radius: 9px;
padding: 11px;
font-size: 10px;
line-height: 1.65;
color: #665014;
margin-top: 14px;
}
.warehousePage .inlineNotice .ico {
width: 17px;
height: 17px;
color: #8a680f;
margin-top: 1px;
}
.warehousePage .subLabel {
font-size: 10px;
font-weight: 800;
color: #456579;
display: block;
margin-bottom: 10px;
} .warehousePage .mapLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
color: #4b6e84;
}
.warehousePage .binGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.warehousePage .bin {
border: 1px solid #c8dee9;
background: #f7fbfd;
border-radius: 8px;
padding: 12px 10px;
min-width: 0;
}
.warehousePage .bin.selected {
border: 2px solid #008ccf;
background: #eaf8ff;
padding: 11px 9px;
}
.warehousePage .bin strong {
font-size: 11px;
display: block;
color: #17455e;
}
.warehousePage .bin small {
font-size: 9px;
color: #58758a;
display: block;
margin-top: 6px;
}
.warehousePage .binStock {
display: flex;
gap: 4px;
align-items: flex-end;
height: 23px;
margin-top: 9px;
}
.warehousePage .binStock span {
width: 14px;
height: 17px;
background: #a6d9f0;
border: 1px solid #6db4d8;
border-radius: 2px;
position: relative;
}
.warehousePage .binStock span:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: white;
top: 4px;
left: 4px;
}
.warehousePage .bin.selected .binStock span {
background: #ffc928;
border-color: #d7ae36;
}
.warehousePage .stockRecord {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 0 0;
margin-top: 15px;
border-top: 1px solid var(--line);
}
.warehousePage .stockRecord>.ico {
width: 37px;
height: 37px;
padding: 7px;
background: #eaf8ff;
border-radius: 9px;
color: #0076dd;
}
.warehousePage .stockRecord strong {
font-size: 12px;
display: block;
}
.warehousePage .stockRecord small {
font-size: 9px;
color: var(--muted);
display: block;
}
.warehousePage .stockRecord>.badge {
margin-left: auto;
}
.warehousePage .miniMeta {
display: flex;
gap: 17px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 9px;
color: #587489;
} .warehousePage .receivingPicture {
height: 167px;
position: relative;
margin: -18px -18px 16px;
border-bottom: 1px solid var(--line);
background: #f0f9fd;
}
.warehousePage .receivingPicture img {
width: 100%;
height: 100%;
object-fit: contain;
}
.warehousePage .metricsThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.warehousePage .metricBox {
border: 1px solid var(--line);
border-radius: 9px;
padding: 11px;
min-width: 0;
}
.warehousePage .metricBox strong {
font-size: 25px;
letter-spacing: -0.04em;
line-height: 1.1;
color: #0d3b55;
display: block;
}
.warehousePage .metricBox span {
font-size: 9px;
color: #587487;
display: block;
margin-top: 6px;
}
.warehousePage .metricBox.warn {
background: #fff8e2;
border-color: #edddaa;
}
.warehousePage .metricBox.warn strong {
color: #80600c;
}
.warehousePage .miniTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.warehousePage .miniTable :where(th, td) {
text-align: left;
padding: 10px 6px;
border-bottom: 1px solid #e4eef4;
vertical-align: middle;
}
.warehousePage .miniTable th {
font-size: 9px;
color: #526f82;
font-weight: 700;
}
.warehousePage .miniTable td {
color: #2b5067;
}
.warehousePage .miniTable td:first-child {
font-weight: 700;
}
.warehousePage .miniTable tr:last-child td {
border-bottom: 0;
}
.warehousePage .miniTable small {
display: block;
color: #607a8d;
font-size: 8px;
font-weight: 400;
}
.warehousePage .miniTable .badge {
font-size: 8px;
padding: 4px 5px;
}
.warehousePage .auditLayout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 13px;
align-items: center;
}
.warehousePage .auditDevice {
min-width: 0;
overflow: hidden;
}
.warehousePage .auditDevice img {
width: 175%;
max-width: none;
margin-left: -37%;
height: 295px;
object-fit: contain;
}
.warehousePage .auditDevice span {
display: block;
text-align: center;
color: #44697e;
font-size: 10px;
font-weight: 700;
}
.warehousePage .auditCard {
padding: 19px 15px;
border-radius: 13px;
border: 1px solid #bbd9e9;
background: #fff;
min-width: 0;
}
.warehousePage .auditCard h3 {
font-size: 17px;
margin-top: 13px;
}
.warehousePage .auditSubtitle {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px;
}
.warehousePage .auditCount {
display: block;
font-size: 42px;
letter-spacing: -0.04em;
color: var(--navy);
line-height: 1.1;
margin-top: 17px;
}
.warehousePage .auditCount small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted);
}
.warehousePage .auditLine {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 10px;
border-bottom: 1px solid #e3eef4;
padding: 9px 0;
}
.warehousePage .auditLine:last-child {
border-bottom: 0;
}
.warehousePage .auditLine span {
display: flex;
gap: 6px;
align-items: center;
}
.warehousePage .miniDot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
background: #0076dd;
}
.warehousePage .miniDot.amber {
background: #bc8f11;
}
.warehousePage .miniDot.red {
background: #cb5e54;
}
.warehousePage .locator {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
background: #fff;
border: 1px solid #cee4ef;
border-radius: 11px;
padding: 14px;
}
.warehousePage .locator .ico {
color: #0076dd;
width: 27px;
height: 27px;
}
.warehousePage .locator strong {
display: block;
font-size: 11px;
}
.warehousePage .locator small {
font-size: 9px;
display: block;
color: var(--muted);
}
.warehousePage .signal {
display: flex;
align-items: flex-end;
gap: 3px;
margin-left: auto;
height: 23px;
}
.warehousePage .signal i {
width: 4px;
border-radius: 2px;
background: #0076dd;
}
.warehousePage .signal i:nth-child(1) {
height: 7px;
}
.warehousePage .signal i:nth-child(2) {
height: 11px;
}
.warehousePage .signal i:nth-child(3) {
height: 16px;
}
.warehousePage .signal i:nth-child(4) {
height: 21px;
}
.warehousePage .signal i:nth-child(5) {
height: 23px;
background: #d3e5ef;
} .warehousePage .transferRoute {
display: grid;
grid-template-columns: 1fr 49px 1fr;
gap: 9px;
align-items: center;
margin-bottom: 16px;
}
.warehousePage .routeStop {
border: 1px solid #cbe0eb;
border-radius: 10px;
padding: 15px 9px;
text-align: center;
background: #f5fafd;
}
.warehousePage .routeStop>.ico {
width: 34px;
height: 34px;
color: #0076dd;
margin-bottom: 9px;
}
.warehousePage .routeStop strong {
display: block;
font-size: 12px;
}
.warehousePage .routeStop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px;
}
.warehousePage .routeArrow {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8px;
color: #536e82;
gap: 6px;
}
.warehousePage .routeArrow .ico {
width: 25px;
color: #0076dd;
}
.warehousePage .timeline {
list-style: none;
padding: 0;
margin-top: 17px;
}
.warehousePage .timeline li {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 17px;
position: relative;
font-size: 10px;
}
.warehousePage .timeline li:not(:last-child):before {
content: "";
position: absolute;
border-left: 1px solid #bbd4e2;
left: 10px;
top: 24px;
bottom: 3px;
}
.warehousePage .timeline .timelineDot {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--greenbg);
border-radius: 50%;
color: #0b7651;
}
.warehousePage .timeline .timelineDot .ico {
width: 13px;
height: 13px;
}
.warehousePage .timeline .timelineDot.pending {
color: #83650b;
background: #fff3c9;
}
.warehousePage .timeline strong {
font-size: 11px;
display: block;
}
.warehousePage .timeline small {
font-size: 9px;
color: var(--muted);
display: block;
}
.warehousePage .timeline time {
font-size: 9px;
color: var(--muted);
padding-top: 2px;
}
.warehousePage .timeline li:last-child {
padding-bottom: 0;
}
.warehousePage .levelChart {
padding: 18px;
border: 1px solid #d6e7f0;
border-radius: 10px;
background: #f7fbfd;
margin-top: 15px;
}
.warehousePage .levelLabels {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: #607c8f;
margin-bottom: 13px;
}
.warehousePage .stockLevel {
height: 27px;
border-radius: 5px;
background: #e4eff5;
position: relative;
margin-bottom: 10px;
}
.warehousePage .stockLevel>span {
display: block;
width: 36%;
height: 100%;
background: var(--yellow);
border-radius: 5px;
}
.warehousePage .stockLevel:after {
content: "";
position: absolute;
left: 50%;
top: -5px;
bottom: -5px;
border-left: 2px dashed #174964;
}
.warehousePage .stockLevelNote {
font-size: 9px;
color: #385d73;
line-height: 1.6;
}
.warehousePage .purchaseRequest {
border: 1px solid #bbd9e9;
border-radius: 11px;
background: #fff;
padding: 15px;
margin-top: 16px;
display: grid;
grid-template-columns: 33px 1fr auto;
gap: 10px;
align-items: center;
}
.warehousePage .purchaseRequest>.ico {
color: #0076dd;
background: #eaf8ff;
padding: 7px;
box-sizing: content-box;
width: 19px;
height: 19px;
border-radius: 9px;
}
.warehousePage .purchaseRequest strong {
font-size: 11px;
display: block;
}
.warehousePage .purchaseRequest small {
font-size: 9px;
color: var(--muted);
display: block;
}
.warehousePage .purchaseRequest .qty {
font-size: 24px;
color: var(--navy);
letter-spacing: -0.04em;
}
.warehousePage .ownershipSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 17px;
}
.warehousePage .ownerCard {
border: 1px solid #cde2ed;
background: #f8fcfe;
border-radius: 10px;
padding: 14px;
}
.warehousePage .ownerCard strong {
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.04em;
display: block;
color: var(--navy);
}
.warehousePage .ownerCard span {
display: block;
font-size: 9px;
margin-top: 6px;
color: var(--muted);
}
.warehousePage .ownerCard.vendor {
background: #fff9e9;
border-color: #f0e0af;
}
.warehousePage .exportStrip {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
color: #58788c;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 10px;
flex-wrap: wrap;
}
.warehousePage .exportStrip .ico {
width: 14px;
height: 14px;
}
.warehousePage .exportStrip span {
margin-left: auto;
}
.warehousePage .exportStrip b {
font-weight: 600;
padding: 3px 6px;
background: #f5fafd;
border: 1px solid #d3e6f1;
border-radius: 4px;
} .warehousePage .aiGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 50px;
align-items: center;
}
.warehousePage .aiGrid>.copy>p {
color: #d6d6d6;
}
.warehousePage .promptBox {
border: 1px solid #354149;
border-radius: 18px;
background: #111920;
padding: 22px;
min-width: 0;
}
.warehousePage .aiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px;
}
.warehousePage .aiBrand {
display: flex;
align-items: center;
gap: 9px;
}
.warehousePage .aiBrand>.ico {
color: var(--yellow);
width: 26px;
height: 26px;
}
.warehousePage .aiBrand strong {
font-size: 16px;
letter-spacing: 0.02em;
}
.warehousePage .aiTop>span {
font-size: 9px;
color: #bbccd7;
}
.warehousePage .question {
border: 1px solid #344653;
border-radius: 11px 11px 2px 11px;
background: #21303b;
padding: 14px;
margin-left: 33px;
color: #f1f5f8;
font-size: 13px;
}
.warehousePage .aiAnswer {
background: #fff;
color: var(--ink);
padding: 19px;
border-radius: 12px;
margin-top: 15px;
}
.warehousePage .aiAnswer .answerTitle {
font-size: 14px;
line-height: 1.45;
display: block;
color: #123c55;
margin-bottom: 8px;
}
.warehousePage .aiAnswer p {
font-size: 11px;
color: #587387;
line-height: 1.7;
}
.warehousePage .aiItem {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid #d6e5ef;
border-radius: 9px;
background: #f8fbfd;
padding: 12px;
margin-top: 13px;
}
.warehousePage .aiItem strong {
display: block;
font-size: 12px;
}
.warehousePage .aiItem small {
font-size: 9px;
color: #607789;
display: block;
margin-top: 3px;
}
.warehousePage .aiItem>.badge {
font-size: 9px;
}
.warehousePage .sourceChip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 7px;
border: 1px solid #d1e3ed;
border-radius: 5px;
font-size: 9px;
color: #456c83;
margin-top: 13px;
}
.warehousePage .sourceChip .ico {
width: 12px;
height: 12px;
}
.warehousePage .aiReview {
font-size: 10px !important;
color: #ccdae4 !important;
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 16px;
}
.warehousePage .aiReview .ico {
width: 16px;
height: 16px;
color: var(--yellow);
margin-top: 2px;
}
.warehousePage .aiSample {
font-size: 10px;
color: #bdc9d3;
text-align: center;
margin-top: 12px;
}
.warehousePage .aiScope {
font-size: 11px !important;
color: #b9c7d0 !important;
border-top: 1px solid #35434e;
padding-top: 16px;
margin-top: 22px !important;
line-height: 1.7 !important;
} .warehousePage .cta {
margin-top: 30px;
padding: 24px 27px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.warehousePage .cta h3 {
font-size: 21px;
}
.warehousePage .cta p {
font-size: 13px;
margin-top: 7px;
max-width: 660px;
}
.warehousePage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.warehousePage .ctaSection {
padding: 0 0 64px;
background: var(--sky2);
} .warehousePage .connectedGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px;
}
.warehousePage .connectedCard {
background: #151515;
border: 1px solid #333;
border-radius: 15px;
padding: 24px;
}
.warehousePage .connectedCard>.ico {
color: var(--yellow);
width: 27px;
height: 27px;
margin-bottom: 20px;
}
.warehousePage .connectedCard h3 {
font-size: 21px;
margin-bottom: 11px;
color: #fff;
}
.warehousePage .connectedCard p {
font-size: 13px;
line-height: 1.8;
color: #cfcfcf;
}
.warehousePage .connectedCard a {
display: inline-block;
color: var(--yellow);
font-size: 12px;
font-weight: 750;
margin-top: 15px;
text-decoration: underline;
text-underline-offset: 4px;
}
.warehousePage .hardwareGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.warehousePage .hardwareCard {
border: 1px solid #cde3ed;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0;
}
.warehousePage .hardwareImage {
width: 100%;
height: 195px;
object-fit: contain;
background: #f0f9fd;
border-bottom: 1px solid var(--line);
}
.warehousePage .hardwareCopy {
padding: 23px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column;
}
.warehousePage .hardwareCopy h3 {
font-size: 21px;
margin: 13px 0 10px;
}
.warehousePage .hardwareCopy p {
font-size: 13px;
line-height: 1.75;
}
.warehousePage .hardwareCopy .bestFor {
font-size: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
color: #355971;
}
.warehousePage .hardwareNote {
font-size: 12px;
line-height: 1.8;
margin-top: 22px;
padding: 18px 21px;
border: 1px solid #cde3ee;
border-left: 4px solid var(--yellow);
border-radius: 11px;
background: #f7fbfd;
}
.warehousePage .hardwareNote a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.warehousePage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.warehousePage .integration {
height: 87px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 10px;
color: #183e56;
min-width: 0;
line-height: 1.3;
}
.warehousePage .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.warehousePage .integration small {
font-size: 9px;
color: #60788a;
margin-top: 6px;
font-weight: 500;
}
.warehousePage .integrationFlow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
align-items: center;
gap: 13px;
background: #0c2333;
padding: 23px;
border-radius: 15px;
margin-top: 23px;
color: #fff;
}
.warehousePage .integrationFlow>div {
min-width: 0;
}
.warehousePage .integrationFlow strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: #fff;
}
.warehousePage .integrationFlow small {
font-size: 10px;
color: #c1d5e2;
display: block;
margin-top: 5px;
}
.warehousePage .integrationFlow>.ico {
color: var(--yellow);
width: 26px;
height: 26px;
}
.warehousePage .integrationNote {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 19px auto 0 !important;
max-width: 950px;
text-align: center;
}
.warehousePage .integrationNote a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.warehousePage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 23px;
margin-top: 32px;
}
.warehousePage .rolloutStep {
border-top: 1px solid #bad7e8;
padding-top: 19px;
}
.warehousePage .rolloutNumber {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
margin-bottom: 17px;
}
.warehousePage .rolloutStep h3 {
font-size: 20px;
margin-bottom: 11px;
}
.warehousePage .rolloutStep p {
font-size: 13px;
line-height: 1.8;
}
.warehousePage .pilotMeasures {
display: flex;
gap: 14px 23px;
align-items: center;
flex-wrap: wrap;
background: #eff8fd;
border: 1px solid #cee4f0;
border-radius: 11px;
padding: 17px 21px;
margin-top: 27px;
font-size: 11px;
color: #40677f;
}
.warehousePage .pilotMeasures strong {
font-size: 12px;
color: #173f57;
}
.warehousePage .pilotMeasures span {
display: flex;
align-items: center;
gap: 6px;
}
.warehousePage .pilotMeasures .ico {
width: 14px;
height: 14px;
} .warehousePage .faq {
max-width: 900px;
}
.warehousePage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.warehousePage .faq summary {
font-size: 15px;
font-weight: 800;
cursor: pointer;
color: var(--navy);
line-height: 1.65;
}
.warehousePage .faq details p {
margin-top: 11px;
line-height: 1.85;
}
.warehousePage .faq details p a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.warehousePage .faq details:last-child {
margin-bottom: 0;
}
.warehousePage .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 43px;
color: #fff;
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: center;
}
.warehousePage .final h2 {
color: #fff;
font-size: 39px;
}
.warehousePage .final p {
color: #ddd;
margin-top: 15px;
max-width: 720px;
font-size: 16px;
}
.warehousePage .final .ctaBtns {
justify-content: center;
}
.warehousePage .final .btn.outline {
background: transparent;
border-color: #666;
color: #fff;
}
.warehousePage .final .btn.outline:hover {
background: #303030;
}
.warehousePage .contactRow {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 23px;
font-size: 12px;
color: #5b7588;
align-items: center;
}
.warehousePage .contactRow a {
color: #006fa9;
font-weight: 700;
display: flex;
gap: 7px;
align-items: center;
}
.warehousePage .contactRow .ico {
width: 16px;
height: 16px;
}
.warehousePage .pageFooter {
padding: 25px 0;
border-top: 1px solid var(--line);
background: #f7fbfd;
}
.warehousePage .footerRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 11px;
flex-wrap: wrap;
color: #4e6d80;
}
.warehousePage .footerRow strong {
font-size: 16px;
letter-spacing: -0.03em;
color: #163f59;
}
.warehousePage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.warehousePage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px;
}
@media (min-width: 1600px) { }
@media (max-width: 1100px) {
.warehousePage .heroGrid {
gap: 27px;
grid-template-columns: 1fr 1fr;
} .warehousePage .warehouseStage {
height: 540px;
}
.warehousePage .inventoryPhone {
width: 192px;
top: 91px;
}
.warehousePage .heroStockCard {
width: 228px;
padding: 15px;
}
.warehousePage .stageTag {
max-width: 182px;
font-size: 9px;
right: 0;
}
.warehousePage .warehouseScene {
height: 397px;
}
.warehousePage .feature,
.warehousePage .aiGrid {
gap: 33px;
}
.warehousePage .visualInner {
padding: 18px;
}
.warehousePage .logos {
gap: 8px;
}
.warehousePage .logo {
padding: 8px;
}
.warehousePage .outcome {
padding: 23px 19px;
}
.warehousePage .hardwareCopy {
padding: 20px;
}
.warehousePage .hardwareImage {
height: 172px;
}
.warehousePage .flowStep {
grid-template-columns: 37px 1fr;
gap: 12px;
padding: 20px 17px;
}
.warehousePage .flowNumber {
width: 34px;
height: 34px;
}
.warehousePage .flowStep h3 {
font-size: 18px;
}
.warehousePage .fl {
gap: 12px;
}
.warehousePage .fl li {
font-size: 12px;
}
.warehousePage .appBody {
padding: 15px;
}
.warehousePage .receivingPicture {
margin: -15px -15px 15px;
}
.warehousePage .auditCard {
padding: 17px 12px;
}
.warehousePage .auditDevice img {
height: 270px;
}
.warehousePage .auditCount {
font-size: 36px;
}
.warehousePage .integration {
font-size: 13px;
}
}
@media (max-width: 960px) {
.warehousePage section {
padding: 63px 0;
}
.warehousePage .hero {
padding: 25px 0 51px;
}
.warehousePage .heroGrid,
.warehousePage .feature,
.warehousePage .aiGrid,
.warehousePage .final {
grid-template-columns: 1fr;
}
.warehousePage .heroGrid {
gap: 31px;
} .warehousePage .lead {
max-width: 690px;
}
.warehousePage .heroVisual {
width: 100%;
max-width: 610px;
margin: auto;
}
.warehousePage .warehouseStage {
height: 560px;
}
.warehousePage .warehouseScene {
height: 440px;
}
.warehousePage .inventoryPhone {
width: 224px;
top: 78px;
}
.warehousePage .heroStockCard {
width: 279px;
}
.warehousePage .stageTag {
max-width: none;
right: 7px;
font-size: 10px;
}
.warehousePage .feature.reverse .visual {
order: 0;
}
.warehousePage .feature>.visual {
max-width: 650px;
width: 100%;
margin: auto;
}
.warehousePage .feature .copy {
max-width: 780px;
}
.warehousePage .feature h2 {
max-width: 760px;
font-size: 40px;
}
.warehousePage .visualInner {
padding: 26px;
}
.warehousePage .fl li {
font-size: 13px;
}
.warehousePage .fl {
max-width: 710px;
gap: 14px 20px;
}
.warehousePage .feature,
.warehousePage .aiGrid {
gap: 32px;
}
.warehousePage .appBody {
padding: 20px;
}
.warehousePage .receivingPicture {
height: 185px;
margin: -20px -20px 17px;
}
.warehousePage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.warehousePage .outcomes {
grid-template-columns: repeat(2, 1fr);
}
.warehousePage .workflow {
gap: 16px;
}
.warehousePage .flowStep {
grid-template-columns: 1fr;
padding: 20px;
}
.warehousePage .flowStep:not(:last-child):after {
right: -16px;
top: 28px;
}
.warehousePage .promptBox {
max-width: 660px;
width: 100%;
margin: auto;
padding: 25px;
}
.warehousePage .aiVisual {
max-width: 660px;
width: 100%;
margin: auto;
}
.warehousePage .aiScope {
max-width: 760px;
}
.warehousePage .auditLayout {
grid-template-columns: 0.85fr 1.15fr;
gap: 20px;
}
.warehousePage .auditDevice img {
height: 320px;
}
.warehousePage .auditCard {
padding: 22px;
}
.warehousePage .auditCount {
font-size: 45px;
}
.warehousePage .auditLine {
font-size: 12px;
}
.warehousePage .auditSubtitle {
font-size: 10px;
}
.warehousePage .auditCard h3 {
font-size: 20px;
}
.warehousePage .appBar strong {
font-size: 12px;
}
.warehousePage .appHeading>strong {
font-size: 17px;
}
.warehousePage .miniTable {
font-size: 11px;
}
.warehousePage .miniTable th {
font-size: 10px;
}
.warehousePage .bin strong {
font-size: 12px;
}
.warehousePage .bin small {
font-size: 10px;
}
.warehousePage .cta {
align-items: flex-start;
flex-direction: column;
}
.warehousePage .connectedGrid {
gap: 12px;
}
.warehousePage .connectedCard {
padding: 21px;
}
.warehousePage .connectedCard h3 {
font-size: 19px;
}
.warehousePage .hardwareGrid {
grid-template-columns: 1fr;
gap: 18px;
}
.warehousePage .hardwareCard {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
}
.warehousePage .hardwareImage {
height: 100%;
min-height: 215px;
object-fit: contain;
border-right: 1px solid var(--line);
border-bottom: 0;
}
.warehousePage .hardwareCopy {
padding: 24px;
}
.warehousePage .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.warehousePage .integration {
font-size: 15px;
}
.warehousePage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 27px;
}
.warehousePage .final .ctaBtns {
flex-direction: row;
}
.warehousePage .final {
padding: 35px;
}
.warehousePage .final h2 {
max-width: 690px;
}
.warehousePage .quickNav {
margin-top: 23px;
}
.warehousePage .trust {
padding: 26px 0;
}
.warehousePage .hero .breadcrumb {
margin-bottom: 27px;
}
}
@media (max-width: 640px) {
.warehousePage {
font-size: 15px;
}
.warehousePage .wrap {
width: calc(100% - 32px);
}
.warehousePage section {
padding: 52px 0;
}
.warehousePage .hero {
padding: 22px 0 39px;
} .warehousePage h2,
.warehousePage .feature h2 {
font-size: 33px;
line-height: 1.16;
}
.warehousePage h3 {
font-size: 20px;
}
.warehousePage .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px;
}
.warehousePage .ey .ico {
width: 14px;
height: 14px;
}
.warehousePage .lead {
font-size: 16px;
margin-top: 18px;
}
.warehousePage .actions {
gap: 9px;
margin-top: 23px;
}
.warehousePage .actions .btn {
font-size: 12px;
padding: 12px 14px;
gap: 7px;
}
.warehousePage .actions .btn .ico {
width: 15px;
height: 15px;
}
.warehousePage .heroPills {
gap: 6px;
margin-top: 17px;
}
.warehousePage .heroPills span {
font-size: 9px;
padding: 5px 8px;
}
.warehousePage .micro {
font-size: 10px;
margin-top: 13px;
}
.warehousePage .breadcrumb {
font-size: 8px;
gap: 4px;
margin-bottom: 24px;
}
.warehousePage .breadcrumb .ico {
width: 9px;
height: 9px;
}
.warehousePage .heroGrid {
gap: 24px;
}
.warehousePage .warehouseStage {
height: 530px;
max-width: 410px;
}
.warehousePage .warehouseScene {
top: 10px;
left: -23px;
width: 110%;
max-width: none;
height: 340px;
}
.warehousePage .stageLabel {
top: 0;
left: 0;
padding: 8px 10px;
font-size: 9px;
}
.warehousePage .stageLabel .ico {
width: 15px;
height: 15px;
}
.warehousePage .inventoryPhone {
width: 175px;
top: 65px;
right: -1px;
border-radius: 23px;
padding: 6px;
}
.warehousePage .phoneScreen {
min-height: 0;
border-radius: 17px;
}
.warehousePage .phoneNotch {
height: 15px;
}
.warehousePage .phoneHead {
padding: 10px;
}
.warehousePage .phoneHead strong {
font-size: 10px;
}
.warehousePage .phoneHead small {
font-size: 8px;
}
.warehousePage .phoneBody {
padding: 10px;
}
.warehousePage .phoneBody>.badge {
font-size: 8px;
}
.warehousePage .scanStatus {
gap: 8px;
margin-top: 12px;
}
.warehousePage .scanStatus>.ico {
width: 25px;
height: 25px;
}
.warehousePage .scanStatus strong {
font-size: 25px;
}
.warehousePage .scanStatus small {
font-size: 8px;
}
.warehousePage .phoneLine {
font-size: 9px;
padding: 7px 0;
}
.warehousePage .phoneAlert {
font-size: 8px;
padding: 7px;
margin-top: 10px;
}
.warehousePage .phoneBody .progress {
margin: 10px 0;
height: 5px;
}
.warehousePage .heroStockCard {
width: 184px;
padding: 13px;
bottom: 10px;
left: 0;
border-radius: 12px;
}
.warehousePage .stockCardHead {
font-size: 8px;
margin-bottom: 11px;
}
.warehousePage .stockCardHead .ico {
width: 15px;
height: 15px;
}
.warehousePage .stockCardMetrics {
gap: 7px;
}
.warehousePage .stockCardMetrics strong {
font-size: 24px;
}
.warehousePage .stockCardMetrics span {
font-size: 8px;
}
.warehousePage .stockCardMetrics>div+div {
padding-left: 12px;
}
.warehousePage .stageTag {
right: 0;
bottom: 3px;
font-size: 8px;
max-width: 140px;
line-height: 1.7;
padding: 7px 9px;
}
.warehousePage .stageTag .ico {
width: 12px;
height: 12px;
}
.warehousePage .heroVisual figcaption {
font-size: 9px;
margin-top: 12px;
}
.warehousePage .trustLabel {
font-size: 11px;
padding-inline: 10px;
}
.warehousePage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.warehousePage .logo {
height: 52px;
padding: 6px;
}
.warehousePage .clientLogo {
height: 35px;
}
.warehousePage .logoFallback {
font-size: 9px;
}
.warehousePage .quickNav {
gap: 10px 17px;
font-size: 11px;
justify-content: flex-start;
line-height: 1.4;
margin-top: 24px;
}
.warehousePage .outcomes {
gap: 12px;
}
.warehousePage .outcome {
padding: 20px 16px;
}
.warehousePage .outcome h3 {
font-size: 18px;
line-height: 1.18;
}
.warehousePage .outcome p {
font-size: 12px;
line-height: 1.7;
}
.warehousePage .outcome>.ico {
width: 25px;
height: 25px;
margin-bottom: 15px;
}
.warehousePage .sectionHead {
margin-bottom: 28px;
}
.warehousePage .sectionHead p {
font-size: 15px;
margin-top: 15px;
}
.warehousePage .workflow {
grid-template-columns: 1fr;
gap: 12px;
}
.warehousePage .flowStep {
grid-template-columns: 39px 1fr;
padding: 21px;
gap: 16px;
}
.warehousePage .flowStep:not(:last-child):after {
display: none;
}
.warehousePage .flowNumber {
width: 37px;
height: 37px;
font-size: 13px;
}
.warehousePage .flowStep h3 {
font-size: 19px;
}
.warehousePage .flowStep p {
font-size: 13px;
}
.warehousePage .copy>p {
font-size: 15px;
line-height: 1.8;
margin-top: 16px;
}
.warehousePage .fl {
gap: 13px 12px;
}
.warehousePage .fl li {
font-size: 12px;
gap: 7px;
}
.warehousePage .tick {
width: 18px;
height: 18px;
flex-basis: 18px;
margin-top: 1px;
}
.warehousePage .tick .ico {
width: 10px;
height: 10px;
}
.warehousePage .capabilityMore summary {
font-size: 12px;
min-height: 40px;
}
.warehousePage .capabilityMore {
margin-top: 18px !important;
}
.warehousePage .visualInner {
padding: 15px;
border-radius: 17px;
}
.warehousePage .visual figcaption {
font-size: 9px;
margin-top: 9px;
}
.warehousePage .feature {
gap: 25px;
}
.warehousePage .appBar {
padding: 10px 11px;
gap: 7px;
}
.warehousePage .appBar strong {
font-size: 10px;
}
.warehousePage .appMark {
width: 23px;
height: 23px;
}
.warehousePage .appMark .ico {
width: 13px;
height: 13px;
}
.warehousePage .appBody {
padding: 14px;
}
.warehousePage .appSub {
font-size: 9px;
margin-bottom: 12px;
}
.warehousePage .appHeading {
gap: 7px;
margin-bottom: 12px;
}
.warehousePage .appHeading>strong {
font-size: 14px;
}
.warehousePage .badge {
font-size: 8px;
padding: 4px 6px;
}
.warehousePage .miniTabs {
font-size: 9px;
gap: 14px;
margin-bottom: 14px;
}
.warehousePage .mapLabel {
font-size: 9px;
margin-bottom: 10px;
}
.warehousePage .binGrid {
gap: 7px;
}
.warehousePage .bin {
padding: 10px 7px;
}
.warehousePage .bin.selected {
padding: 9px 6px;
}
.warehousePage .bin strong {
font-size: 10px;
}
.warehousePage .bin small {
font-size: 8px;
}
.warehousePage .binStock {
gap: 3px;
height: 20px;
margin-top: 7px;
}
.warehousePage .binStock span {
width: 11px;
height: 15px;
}
.warehousePage .binStock span:after {
left: 3px;
width: 3px;
height: 3px;
}
.warehousePage .stockRecord {
gap: 9px;
flex-wrap: wrap;
}
.warehousePage .stockRecord>.ico {
width: 30px;
height: 30px;
padding: 6px;
}
.warehousePage .stockRecord strong {
font-size: 10px;
}
.warehousePage .stockRecord small {
font-size: 8px;
}
.warehousePage .stockRecord>.badge {
font-size: 8px;
}
.warehousePage .miniMeta {
gap: 5px 12px;
font-size: 8px;
}
.warehousePage .lightNote {
font-size: 9px;
gap: 7px;
padding: 9px;
}
.warehousePage .lightNote .ico {
width: 14px;
height: 14px;
}
.warehousePage .receivingPicture {
height: 149px;
margin: -14px -14px 14px;
}
.warehousePage .metricsThree {
gap: 7px;
}
.warehousePage .metricBox {
padding: 10px 8px;
}
.warehousePage .metricBox strong {
font-size: 23px;
}
.warehousePage .metricBox span {
font-size: 8px;
}
.warehousePage .miniTable {
font-size: 9px;
line-height: 1.5;
}
.warehousePage .miniTable th {
font-size: 8px;
}
.warehousePage .miniTable :where(th, td) {
padding: 9px 4px;
}
.warehousePage .miniTable small {
font-size: 8px;
}
.warehousePage .miniTable .badge {
font-size: 7px;
padding: 3px 4px;
}
.warehousePage .inlineNotice {
font-size: 9px;
padding: 10px;
gap: 7px;
}
.warehousePage .inlineNotice .ico {
width: 15px;
height: 15px;
}
.warehousePage .auditLayout {
gap: 10px;
grid-template-columns: 0.76fr 1.24fr;
}
.warehousePage .auditDevice img {
height: 278px;
width: 195%;
margin-left: -50%;
}
.warehousePage .auditDevice span {
font-size: 8px;
}
.warehousePage .auditCard {
padding: 17px 12px;
}
.warehousePage .auditCard h3 {
font-size: 16px;
margin-top: 12px;
}
.warehousePage .auditCount {
font-size: 35px;
margin-top: 15px;
}
.warehousePage .auditCount small {
font-size: 10px;
}
.warehousePage .auditSubtitle {
font-size: 8px;
}
.warehousePage .auditLine {
font-size: 9px;
padding: 8px 0;
}
.warehousePage .locator {
gap: 9px;
padding: 12px;
margin-top: 13px;
}
.warehousePage .locator>.ico {
width: 23px;
height: 23px;
}
.warehousePage .locator strong {
font-size: 10px;
}
.warehousePage .locator small {
font-size: 8px;
}
.warehousePage .signal {
gap: 2px;
}
.warehousePage .signal i {
width: 3px;
}
.warehousePage .transferRoute {
grid-template-columns: 1fr 32px 1fr;
gap: 7px;
}
.warehousePage .routeStop {
padding: 12px 7px;
}
.warehousePage .routeStop>.ico {
width: 29px;
height: 29px;
margin-bottom: 8px;
}
.warehousePage .routeStop strong {
font-size: 11px;
}
.warehousePage .routeStop small {
font-size: 8px;
}
.warehousePage .routeArrow {
font-size: 7px;
}
.warehousePage .routeArrow .ico {
width: 20px;
height: 20px;
}
.warehousePage .timeline {
margin-top: 15px;
}
.warehousePage .timeline li {
gap: 7px;
grid-template-columns: 21px 1fr auto;
}
.warehousePage .timeline strong {
font-size: 10px;
}
.warehousePage .timeline small,
.warehousePage .timeline time {
font-size: 8px;
}
.warehousePage .timelineDot {
width: 20px;
height: 20px;
}
.warehousePage .levelChart {
padding: 14px;
}
.warehousePage .purchaseRequest {
padding: 12px;
gap: 9px;
}
.warehousePage .purchaseRequest strong {
font-size: 10px;
}
.warehousePage .purchaseRequest small {
font-size: 8px;
}
.warehousePage .purchaseRequest .qty {
font-size: 22px;
}
.warehousePage .ownerCard {
padding: 12px;
}
.warehousePage .ownerCard strong {
font-size: 25px;
}
.warehousePage .ownerCard span {
font-size: 8px;
}
.warehousePage .exportStrip {
font-size: 8px;
gap: 5px;
}
.warehousePage .exportStrip span {
margin-left: 0;
}
.warehousePage .promptBox {
padding: 18px;
border-radius: 15px;
}
.warehousePage .aiTop {
margin-bottom: 17px;
gap: 8px;
}
.warehousePage .aiBrand strong {
font-size: 15px;
}
.warehousePage .aiTop>span {
font-size: 8px;
}
.warehousePage .aiBrand>.ico {
width: 22px;
height: 22px;
}
.warehousePage .question {
font-size: 12px;
padding: 12px;
margin-left: 20px;
}
.warehousePage .aiAnswer {
padding: 15px;
}
.warehousePage .aiAnswer .answerTitle {
font-size: 13px;
}
.warehousePage .aiAnswer p {
font-size: 10px;
}
.warehousePage .aiItem {
padding: 11px;
gap: 8px;
}
.warehousePage .aiItem strong {
font-size: 11px;
}
.warehousePage .aiItem small {
font-size: 8px;
}
.warehousePage .sourceChip {
font-size: 8px;
}
.warehousePage .aiReview {
font-size: 9px !important;
}
.warehousePage .aiSample {
font-size: 9px;
}
.warehousePage .aiScope {
font-size: 10px !important;
}
.warehousePage .ctaSection {
padding: 0 0 48px;
}
.warehousePage .cta {
padding: 22px;
margin-top: 0;
}
.warehousePage .cta h3 {
font-size: 21px;
}
.warehousePage .cta p {
font-size: 12px;
}
.warehousePage .ctaBtns {
width: 100%;
}
.warehousePage .ctaBtns .btn {
font-size: 12px;
padding: 12px 14px;
flex: 1;
}
.warehousePage .connectedGrid {
grid-template-columns: 1fr;
gap: 12px;
}
.warehousePage .connectedCard {
padding: 24px;
}
.warehousePage .connectedCard h3 {
font-size: 21px;
}
.warehousePage .connectedCard p {
font-size: 13px;
}
.warehousePage .connectedCard>.ico {
margin-bottom: 16px;
}
.warehousePage .hardwareCard {
display: flex;
}
.warehousePage .hardwareImage {
height: 185px;
min-height: 0;
border-bottom: 1px solid var(--line);
border-right: 0;
}
.warehousePage .hardwareCopy {
padding: 22px;
}
.warehousePage .hardwareCopy h3 {
font-size: 21px;
}
.warehousePage .hardwareCopy p {
font-size: 13px;
}
.warehousePage .hardwareNote {
font-size: 11px;
padding: 17px;
}
.warehousePage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.warehousePage .integration {
height: 77px;
font-size: 14px;
}
.warehousePage .integration:last-child {
grid-column: 1/-1;
}
.warehousePage .integrationFlow {
grid-template-columns: 1fr;
padding: 23px;
gap: 13px;
}
.warehousePage .integrationFlow>.ico {
transform: rotate(90deg);
width: 20px;
height: 20px;
margin-left: 7px;
}
.warehousePage .integrationFlow strong {
font-size: 14px;
}
.warehousePage .integrationFlow small {
font-size: 10px;
}
.warehousePage .integrationNote {
text-align: left;
font-size: 11px !important;
}
.warehousePage .rolloutGrid {
gap: 25px 20px;
}
.warehousePage .rolloutStep h3 {
font-size: 18px;
}
.warehousePage .rolloutStep p {
font-size: 12px;
}
.warehousePage .pilotMeasures {
gap: 13px;
padding: 18px;
font-size: 10px;
}
.warehousePage .pilotMeasures strong {
width: 100%;
}
.warehousePage .faq details {
padding: 17px 16px;
margin-bottom: 10px;
}
.warehousePage .faq summary {
font-size: 13px;
line-height: 1.6;
}
.warehousePage .faq details p {
font-size: 13px;
line-height: 1.85;
}
.warehousePage .final {
padding: 29px 24px;
gap: 24px;
}
.warehousePage .final h2 {
font-size: 32px;
}
.warehousePage .final p {
font-size: 14px;
}
.warehousePage .final .ctaBtns {
flex-direction: column;
}
.warehousePage .final .btn {
width: 100%;
min-height: 47px;
}
.warehousePage .contactRow {
flex-direction: column;
align-items: flex-start;
font-size: 11px;
gap: 12px;
}
.warehousePage .footerRow {
align-items: flex-start;
gap: 17px;
}
.warehousePage .footerLinks {
gap: 10px 17px;
font-size: 10px;
}
.warehousePage .pageFooter {
padding: 23px 0;
}
}
@media (max-width: 767px) {
.warehousePage .heroVisual {
display: none;
}
}
@media (max-width: 359px) { .warehousePage .actions {
flex-direction: column;
}
.warehousePage .actions .btn {
width: 100%;
}
.warehousePage .warehouseStage {
height: 530px;
}
.warehousePage .inventoryPhone {
width: 163px;
top: 67px;
}
.warehousePage .heroStockCard {
width: 175px;
}
.warehousePage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px;
}
.warehousePage .stockCardMetrics strong {
font-size: 22px;
}
.warehousePage .stockCardMetrics span {
font-size: 7px;
}
.warehousePage .warehouseScene {
left: -22px;
width: 114%;
top: 18px;
height: 315px;
}
.warehousePage .fl {
grid-template-columns: 1fr;
}
.warehousePage .outcomes {
grid-template-columns: 1fr;
}
.warehousePage .logos {
grid-template-columns: repeat(2, 1fr);
}
.warehousePage .logoFallback {
font-size: 11px;
}
.warehousePage .visualInner {
padding: 12px;
}
.warehousePage .appBody {
padding: 12px;
}
.warehousePage .receivingPicture {
margin: -12px -12px 12px;
}
.warehousePage .auditCard {
padding: 15px 10px;
}
.warehousePage .auditCount {
font-size: 31px;
}
.warehousePage .auditCard h3 {
font-size: 14px;
}
.warehousePage .auditLayout {
gap: 7px;
}
.warehousePage .rolloutGrid {
grid-template-columns: 1fr;
}
.warehousePage .miniTable {
font-size: 8px;
}
.warehousePage .ownerCard strong {
font-size: 23px;
}
}  .logisticsPage {
--brand: #00a8f8;
--brand2: #0076dd;
--navy: #063b5c;
--navy2: #0a4e75;
--sky: #eaf8ff;
--sky2: #f5fbff;
--ink: #11283a;
--muted: #607487;
--line: #d9e8f1;
--green: #118a61;
--greenbg: #eaf8f3;
--yellow: #ffc928;
--yellowsoft: #fff7d6;
--black: #0b0b0b;
--black2: #171717;
--red: #e25757;
--purple: #7c67e8;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.09); font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
isolation: isolate;
overflow-wrap: break-word;
font-size: 16px;
}
.logisticsPage *,
.logisticsPage *::before,
.logisticsPage *::after {
box-sizing: border-box;
}
.logisticsPage :where(h1, h2, h3, p, figure, ul, ol, dl, dd) {
margin: 0;
}
.logisticsPage a {
color: inherit;
text-decoration: none;
} .logisticsPage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px;
}
.logisticsPage .ico {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle;
}
.logisticsPage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto;
}
.logisticsPage section {
padding: 76px 0;
scroll-margin-top: 30px;
}
.logisticsPage [id] {
scroll-margin-top: 28px;
}
.logisticsPage h1,
.logisticsPage h2,
.logisticsPage h3 {
line-height: 1.12;
letter-spacing: -0.035em;
font-weight: 780;
color: var(--black);
} .logisticsPage h2 {
font-size: clamp(31px, 3.35vw, 45px);
}
.logisticsPage h3 {
font-size: 21px;
}
.logisticsPage p {
color: var(--muted);
}
.logisticsPage .ey {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 12px;
font-weight: 800;
margin-bottom: 18px;
}
.logisticsPage .ey .ico {
width: 16px;
height: 16px;
}
.logisticsPage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
line-height: 1.75;
}
.logisticsPage .btn {
display: inline-flex;
gap: 12px;
min-height: 49px;
padding: 11px 20px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: background 0.2s ease;
line-height: 1.45;
font-size: 14px;
text-align: center;
}
.logisticsPage .btn .ico {
width: 18px;
height: 18px;
}
.logisticsPage .btn.black {
background: var(--black);
color: #fff;
}
.logisticsPage .btn.black:hover {
background: #292929;
}
.logisticsPage .btn.yellow {
background: var(--yellow);
color: #000;
}
.logisticsPage .btn.yellow:hover {
background: #ffda67;
}
.logisticsPage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.logisticsPage .btn.outline:hover {
background: var(--sky);
}
.logisticsPage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.logisticsPage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.logisticsPage .soft {
background: var(--sky2);
}
.logisticsPage .sectionHead {
max-width: 820px;
margin-bottom: 35px;
}
.logisticsPage .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.logisticsPage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.logisticsPage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.logisticsPage .dark h2,
.logisticsPage .dark h3 {
color: #fff;
}
.logisticsPage .dark p {
color: #d6d6d6;
}
.logisticsPage .dark .ey {
background: var(--yellow);
color: var(--black);
}
.logisticsPage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.logisticsPage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 99;
background: #fff;
padding: 12px 20px;
color: var(--navy);
}
.logisticsPage .skipLink:focus {
top: 10px;
} .logisticsPage .hero {
padding: 30px 0 64px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.18),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.14),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.logisticsPage .breadcrumb {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
font-size: 10px;
color: #536c7d;
margin-bottom: 31px;
}
.logisticsPage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px;
}
.logisticsPage .breadcrumb .ico {
width: 11px;
height: 11px;
}
.logisticsPage .heroGrid {
display: grid;
grid-template-columns: 1.25fr 1.04fr;
gap: 38px;
align-items: center;
}
.logisticsPage .hero h1 span {
color: var(--brand2);
}
.logisticsPage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px;
}
.logisticsPage .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.logisticsPage .heroVisual {
min-width: 0;
position: relative;
}
.logisticsPage .logisticsStage {
position: relative;
height: 560px;
max-width: 610px;
margin: auto;
}
.logisticsPage .logisticsScene {
position: absolute;
top: 13px;
left: -15px;
width: 100%;
height: 440px;
object-fit: contain;
}
.logisticsPage .stageLabel {
position: absolute;
left: 15px;
top: 3px;
background: #fff;
border: 1px solid #c6e5f3;
padding: 10px 13px;
border-radius: 10px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: var(--navy);
font-weight: 750;
}
.logisticsPage .stageLabel .ico {
width: 18px;
height: 18px;
color: var(--brand2);
}
.logisticsPage .shipmentPhone {
position: absolute;
right: -1px;
top: 85px;
width: 212px;
padding: 7px;
border-radius: 28px;
background: #102435;
border: 1px solid #254a62;
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.14);
}
.logisticsPage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden;
min-height: 328px;
}
.logisticsPage .phoneNotch {
height: 20px;
background: #102435;
display: flex;
justify-content: center;
align-items: center;
}
.logisticsPage .phoneNotch:before {
content: "";
height: 5px;
width: 53px;
border-radius: 9px;
background: #3f5665;
}
.logisticsPage .phoneHead {
padding: 13px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.logisticsPage .phoneHead strong {
font-size: 12px;
display: block;
}
.logisticsPage .phoneHead small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.logisticsPage .phoneBody {
padding: 12px;
}
.logisticsPage .phoneBody>.badge {
font-size: 9px;
}
.logisticsPage .scanStatus {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px;
}
.logisticsPage .scanStatus>.ico {
width: 31px;
height: 31px;
color: var(--brand2);
}
.logisticsPage .scanStatus strong {
font-size: 29px;
line-height: 1;
display: block;
letter-spacing: -0.03em;
}
.logisticsPage .scanStatus small {
font-size: 9px;
color: var(--muted);
}
.logisticsPage .phoneLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
border-bottom: 1px solid var(--line);
padding: 9px 0;
}
.logisticsPage .phoneLine:last-child {
border: 0;
}
.logisticsPage .phoneAlert {
padding: 9px;
background: var(--yellowsoft);
border: 1px solid #f0dfab;
border-radius: 7px;
font-size: 9px;
margin-top: 12px;
color: #66500f;
}
.logisticsPage .heroShipmentCard {
position: absolute;
left: 3px;
bottom: 2px;
width: 274px;
background: #111820;
border: 1px solid #263d4d;
color: #fff;
border-radius: 15px;
padding: 17px 18px;
}
.logisticsPage .stockCardHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
margin-bottom: 13px;
color: #d2dfe7;
}
.logisticsPage .stockCardHead .ico {
width: 18px;
height: 18px;
color: var(--yellow);
}
.logisticsPage .stockCardMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
}
.logisticsPage .stockCardMetrics strong {
display: block;
font-size: 27px;
color: #fff;
line-height: 1.15;
letter-spacing: -0.04em;
}
.logisticsPage .stockCardMetrics span {
font-size: 9px;
color: #b6ccd9;
}
.logisticsPage .stockCardMetrics>div+div {
border-left: 1px solid #395364;
padding-left: 18px;
}
.logisticsPage .stageTag {
position: absolute;
right: 8px;
bottom: 8px;
background: var(--yellow);
color: #0b0b0b;
border-radius: 9px;
padding: 8px 10px;
max-width: 208px;
font-size: 10px;
font-weight: 800;
}
.logisticsPage .stageTag .ico {
width: 15px;
height: 15px;
margin-right: 4px;
}
.logisticsPage .heroVisual figcaption {
font-size: 10px;
color: #536c7d;
text-align: center;
margin-top: 14px;
}
.logisticsPage .trust {
padding: 27px 0;
border-bottom: 1px solid var(--line);
background: #fff;
}
.logisticsPage .trustLabel {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-bottom: 19px;
color: #3d596c;
}
.logisticsPage .logos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
align-items: center;
}
.logisticsPage .logo {
height: 60px;
display: grid;
place-items: center;
padding: 8px 10px;
border: 1px solid #e8f0f5;
border-radius: 11px;
background: #fff;
overflow: hidden;
}
.logisticsPage .clientLogo {
width: 100%;
height: 40px;
object-fit: contain;
display: block;
pointer-events: none;
}
.logisticsPage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #445e6f;
font-weight: 800;
text-align: center;
line-height: 1.2;
}
.logisticsPage .quickNav {
display: flex;
justify-content: center;
gap: 6px 25px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: #32617b;
}
.logisticsPage .quickNav a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #b7dceb;
}
.logisticsPage .quickNav a:hover {
color: #005f94;
} .logisticsPage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.logisticsPage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
position: relative;
overflow: hidden;
}
.logisticsPage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.logisticsPage .outcome:nth-child(2):before {
background: var(--yellow);
}
.logisticsPage .outcome:nth-child(3):before {
background: var(--green);
}
.logisticsPage .outcome:nth-child(4):before {
background: var(--purple);
}
.logisticsPage .outcome>.ico {
width: 28px;
height: 28px;
color: var(--navy);
margin-bottom: 18px;
}
.logisticsPage .outcome h3 {
font-size: 20px;
margin-bottom: 10px;
}
.logisticsPage .outcome p {
font-size: 13px;
line-height: 1.75;
}
.logisticsPage .workflow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.logisticsPage .flowStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 18px;
position: relative;
padding: 23px 20px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line);
}
.logisticsPage .flowNumber {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--yellow);
font-size: 14px;
font-weight: 850;
}
.logisticsPage .flowStep h3 {
font-size: 19px;
margin-bottom: 9px;
}
.logisticsPage .flowStep p {
font-size: 13px;
}
.logisticsPage .flowStep:not(:last-child):after {
content: "\2192";
position: absolute;
right: -20px;
top: 37px;
color: #0076dd;
font-size: 23px;
z-index: 2;
}
.logisticsPage .workflowSection {
padding-top: 62px;
padding-bottom: 65px;
}
.logisticsPage .workflowSection .sectionHead {
margin-bottom: 28px;
} .logisticsPage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.logisticsPage .feature.reverse .visual {
order: -1;
}
.logisticsPage .copy>p {
color: var(--muted);
font-size: 16px;
margin-top: 18px;
line-height: 1.8;
}
.logisticsPage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 16px;
margin-top: 23px;
list-style: none;
padding: 0;
}
.logisticsPage .fl li {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.65;
align-items: flex-start;
min-width: 0;
}
.logisticsPage .tick {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--greenbg);
color: #0b7651;
display: grid;
place-items: center;
flex: 0 0 20px;
margin-top: 1px;
}
.logisticsPage .tick .ico {
width: 12px;
height: 12px;
stroke-width: 2.2;
}
.logisticsPage details.capabilityMore {
margin-top: 21px;
background: none;
border: 0;
padding: 0;
border-radius: 0;
}
.logisticsPage .capabilityMore summary {
display: inline-flex;
gap: 9px;
align-items: center;
color: #006fa9;
font-size: 13px;
font-weight: 800;
cursor: pointer;
list-style: none;
min-height: 33px;
}
.logisticsPage .capabilityMore summary::-webkit-details-marker {
display: none;
}
.logisticsPage .capabilityMore summary::after {
content: "+";
font-size: 20px;
font-weight: 500;
line-height: 1;
}
.logisticsPage .capabilityMore[open] summary::after {
content: "\2212";
}
.logisticsPage .capabilityMore .fl {
margin-top: 14px;
}
.logisticsPage .dark .fl {
color: #e7e7e7;
}
.logisticsPage .dark .tick {
background: var(--yellow);
color: #000;
}
.logisticsPage .dark .capabilityMore summary {
color: var(--yellow);
}
.logisticsPage .visual {
min-width: 0;
position: relative;
}
.logisticsPage .visualInner {
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.15),
transparent 28%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 24px;
position: relative;
overflow: hidden;
}
.logisticsPage .visual figcaption {
font-size: 10px;
line-height: 1.65;
text-align: center;
margin-top: 11px;
color: #526c80;
}
.logisticsPage .appWindow {
background: #fff;
border: 1px solid #c5dde9;
border-radius: 13px;
overflow: hidden;
}
.logisticsPage .appBar {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 14px;
background: #fff;
border-bottom: 1px solid var(--line);
min-width: 0;
}
.logisticsPage .appBar strong {
font-size: 11px;
color: #183c53;
}
.logisticsPage .appMark {
display: grid;
place-items: center;
background: var(--sky);
width: 25px;
height: 25px;
border-radius: 7px;
color: #0076dd;
}
.logisticsPage .appMark .ico {
width: 15px;
height: 15px;
}
.logisticsPage .windowDots {
margin-left: auto;
display: flex;
gap: 4px;
}
.logisticsPage .windowDots i {
width: 4px;
height: 4px;
background: #bccfd9;
border-radius: 50%;
}
.logisticsPage .appBody {
padding: 18px;
}
.logisticsPage .appSub {
font-size: 10px;
color: #617a8c;
margin-bottom: 14px;
}
.logisticsPage .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
padding: 5px 7px;
border-radius: 6px;
background: #eef5f9;
color: #375e75;
vertical-align: middle;
}
.logisticsPage .badge.green {
background: var(--greenbg);
color: #0b704d;
}
.logisticsPage .badge.yellow {
background: var(--yellowsoft);
color: #695000;
}
.logisticsPage .badge.blue {
background: #e4f6ff;
color: #006799;
}
.logisticsPage .badge.red {
background: #fff0f0;
color: #a23d3d;
}
.logisticsPage .badge.darkBadge {
background: #203c4f;
color: #e4f3fc;
}
.logisticsPage .progress {
height: 7px;
background: #e4eef4;
border-radius: 8px;
overflow: hidden;
margin: 14px 0;
}
.logisticsPage .progress span {
height: 100%;
background: var(--brand2);
display: block;
border-radius: inherit;
}
.logisticsPage .appHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 14px;
}
.logisticsPage .appHeading>strong {
font-size: 15px;
line-height: 1.3;
color: #143c55;
}
.logisticsPage .appHeading small {
font-size: 10px;
color: var(--muted);
display: block;
}
.logisticsPage .miniTabs {
display: flex;
gap: 17px;
font-size: 10px;
color: #597488;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 17px;
}
.logisticsPage .miniTabs .active {
color: #006fa9;
font-weight: 800;
position: relative;
}
.logisticsPage .miniTabs .active:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -11px;
border-bottom: 2px solid #0076dd;
}
.logisticsPage .lightNote {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #466b81;
background: #f3f9fc;
border: 1px solid #dceaf2;
padding: 10px;
border-radius: 8px;
margin-top: 14px;
}
.logisticsPage .lightNote .ico {
width: 16px;
height: 16px;
color: #0076dd;
}
.logisticsPage .inlineNotice {
display: flex;
gap: 9px;
align-items: flex-start;
background: #fff8e0;
border: 1px solid #f1e1af;
border-radius: 9px;
padding: 11px;
font-size: 10px;
line-height: 1.65;
color: #665014;
margin-top: 14px;
}
.logisticsPage .inlineNotice .ico {
width: 17px;
height: 17px;
color: #8a680f;
margin-top: 1px;
}
.logisticsPage .subLabel {
font-size: 10px;
font-weight: 800;
color: #456579;
display: block;
margin-bottom: 10px;
} .logisticsPage .mapLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
color: #4b6e84;
}
.logisticsPage .binGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.logisticsPage .bin {
border: 1px solid #c8dee9;
background: #f7fbfd;
border-radius: 8px;
padding: 12px 10px;
min-width: 0;
}
.logisticsPage .bin.selected {
border: 2px solid #008ccf;
background: #eaf8ff;
padding: 11px 9px;
}
.logisticsPage .bin strong {
font-size: 11px;
display: block;
color: #17455e;
}
.logisticsPage .bin small {
font-size: 9px;
color: #58758a;
display: block;
margin-top: 6px;
}
.logisticsPage .binStock {
display: flex;
gap: 4px;
align-items: flex-end;
height: 23px;
margin-top: 9px;
}
.logisticsPage .binStock span {
width: 14px;
height: 17px;
background: #a6d9f0;
border: 1px solid #6db4d8;
border-radius: 2px;
position: relative;
}
.logisticsPage .binStock span:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: white;
top: 4px;
left: 4px;
}
.logisticsPage .bin.selected .binStock span {
background: #ffc928;
border-color: #d7ae36;
}
.logisticsPage .stockRecord {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 0 0;
margin-top: 15px;
border-top: 1px solid var(--line);
}
.logisticsPage .stockRecord>.ico {
width: 37px;
height: 37px;
padding: 7px;
background: #eaf8ff;
border-radius: 9px;
color: #0076dd;
}
.logisticsPage .stockRecord strong {
font-size: 12px;
display: block;
}
.logisticsPage .stockRecord small {
font-size: 9px;
color: var(--muted);
display: block;
}
.logisticsPage .stockRecord>.badge {
margin-left: auto;
}
.logisticsPage .miniMeta {
display: flex;
gap: 17px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 9px;
color: #587489;
} .logisticsPage .receivingPicture {
height: 167px;
position: relative;
margin: -18px -18px 16px;
border-bottom: 1px solid var(--line);
background: #f0f9fd;
}
.logisticsPage .receivingPicture img {
width: 100%;
height: 100%;
object-fit: contain;
}
.logisticsPage .metricsThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.logisticsPage .metricBox {
border: 1px solid var(--line);
border-radius: 9px;
padding: 11px;
min-width: 0;
}
.logisticsPage .metricBox strong {
font-size: 25px;
letter-spacing: -0.04em;
line-height: 1.1;
color: #0d3b55;
display: block;
}
.logisticsPage .metricBox span {
font-size: 9px;
color: #587487;
display: block;
margin-top: 6px;
}
.logisticsPage .metricBox.warn {
background: #fff8e2;
border-color: #edddaa;
}
.logisticsPage .metricBox.warn strong {
color: #80600c;
}
.logisticsPage .miniTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.logisticsPage .miniTable :where(th, td) {
text-align: left;
padding: 10px 6px;
border-bottom: 1px solid #e4eef4;
vertical-align: middle;
}
.logisticsPage .miniTable th {
font-size: 9px;
color: #526f82;
font-weight: 700;
}
.logisticsPage .miniTable td {
color: #2b5067;
}
.logisticsPage .miniTable td:first-child {
font-weight: 700;
}
.logisticsPage .miniTable tr:last-child td {
border-bottom: 0;
}
.logisticsPage .miniTable small {
display: block;
color: #607a8d;
font-size: 8px;
font-weight: 400;
}
.logisticsPage .miniTable .badge {
font-size: 8px;
padding: 4px 5px;
}
.logisticsPage .auditLayout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 13px;
align-items: center;
}
.logisticsPage .auditDevice {
min-width: 0;
overflow: hidden;
}
.logisticsPage .auditDevice img {
width: 175%;
max-width: none;
margin-left: -37%;
height: 295px;
object-fit: contain;
}
.logisticsPage .auditDevice span {
display: block;
text-align: center;
color: #44697e;
font-size: 10px;
font-weight: 700;
}
.logisticsPage .auditCard {
padding: 19px 15px;
border-radius: 13px;
border: 1px solid #bbd9e9;
background: #fff;
min-width: 0;
}
.logisticsPage .auditCard h3 {
font-size: 17px;
margin-top: 13px;
}
.logisticsPage .auditSubtitle {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px;
}
.logisticsPage .auditCount {
display: block;
font-size: 42px;
letter-spacing: -0.04em;
color: var(--navy);
line-height: 1.1;
margin-top: 17px;
}
.logisticsPage .auditCount small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted);
}
.logisticsPage .auditLine {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 10px;
border-bottom: 1px solid #e3eef4;
padding: 9px 0;
}
.logisticsPage .auditLine:last-child {
border-bottom: 0;
}
.logisticsPage .auditLine span {
display: flex;
gap: 6px;
align-items: center;
}
.logisticsPage .miniDot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
background: #0076dd;
}
.logisticsPage .miniDot.amber {
background: #bc8f11;
}
.logisticsPage .miniDot.red {
background: #cb5e54;
}
.logisticsPage .locator {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
background: #fff;
border: 1px solid #cee4ef;
border-radius: 11px;
padding: 14px;
}
.logisticsPage .locator .ico {
color: #0076dd;
width: 27px;
height: 27px;
}
.logisticsPage .locator strong {
display: block;
font-size: 11px;
}
.logisticsPage .locator small {
font-size: 9px;
display: block;
color: var(--muted);
}
.logisticsPage .signal {
display: flex;
align-items: flex-end;
gap: 3px;
margin-left: auto;
height: 23px;
}
.logisticsPage .signal i {
width: 4px;
border-radius: 2px;
background: #0076dd;
}
.logisticsPage .signal i:nth-child(1) {
height: 7px;
}
.logisticsPage .signal i:nth-child(2) {
height: 11px;
}
.logisticsPage .signal i:nth-child(3) {
height: 16px;
}
.logisticsPage .signal i:nth-child(4) {
height: 21px;
}
.logisticsPage .signal i:nth-child(5) {
height: 23px;
background: #d3e5ef;
} .logisticsPage .transferRoute {
display: grid;
grid-template-columns: 1fr 49px 1fr;
gap: 9px;
align-items: center;
margin-bottom: 16px;
}
.logisticsPage .routeStop {
border: 1px solid #cbe0eb;
border-radius: 10px;
padding: 15px 9px;
text-align: center;
background: #f5fafd;
}
.logisticsPage .routeStop>.ico {
width: 34px;
height: 34px;
color: #0076dd;
margin-bottom: 9px;
}
.logisticsPage .routeStop strong {
display: block;
font-size: 12px;
}
.logisticsPage .routeStop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px;
}
.logisticsPage .routeArrow {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8px;
color: #536e82;
gap: 6px;
}
.logisticsPage .routeArrow .ico {
width: 25px;
color: #0076dd;
}
.logisticsPage .timeline {
list-style: none;
padding: 0;
margin-top: 17px;
}
.logisticsPage .timeline li {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 17px;
position: relative;
font-size: 10px;
}
.logisticsPage .timeline li:not(:last-child):before {
content: "";
position: absolute;
border-left: 1px solid #bbd4e2;
left: 10px;
top: 24px;
bottom: 3px;
}
.logisticsPage .timeline .timelineDot {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--greenbg);
border-radius: 50%;
color: #0b7651;
}
.logisticsPage .timeline .timelineDot .ico {
width: 13px;
height: 13px;
}
.logisticsPage .timeline .timelineDot.pending {
color: #83650b;
background: #fff3c9;
}
.logisticsPage .timeline strong {
font-size: 11px;
display: block;
}
.logisticsPage .timeline small {
font-size: 9px;
color: var(--muted);
display: block;
}
.logisticsPage .timeline time {
font-size: 9px;
color: var(--muted);
padding-top: 2px;
}
.logisticsPage .timeline li:last-child {
padding-bottom: 0;
}
.logisticsPage .levelChart {
padding: 18px;
border: 1px solid #d6e7f0;
border-radius: 10px;
background: #f7fbfd;
margin-top: 15px;
}
.logisticsPage .levelLabels {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: #607c8f;
margin-bottom: 13px;
}
.logisticsPage .stockLevel {
height: 27px;
border-radius: 5px;
background: #e4eff5;
position: relative;
margin-bottom: 10px;
}
.logisticsPage .stockLevel>span {
display: block;
width: 36%;
height: 100%;
background: var(--yellow);
border-radius: 5px;
}
.logisticsPage .stockLevel:after {
content: "";
position: absolute;
left: 50%;
top: -5px;
bottom: -5px;
border-left: 2px dashed #174964;
}
.logisticsPage .stockLevelNote {
font-size: 9px;
color: #385d73;
line-height: 1.6;
}
.logisticsPage .purchaseRequest {
border: 1px solid #bbd9e9;
border-radius: 11px;
background: #fff;
padding: 15px;
margin-top: 16px;
display: grid;
grid-template-columns: 33px 1fr auto;
gap: 10px;
align-items: center;
}
.logisticsPage .purchaseRequest>.ico {
color: #0076dd;
background: #eaf8ff;
padding: 7px;
box-sizing: content-box;
width: 19px;
height: 19px;
border-radius: 9px;
}
.logisticsPage .purchaseRequest strong {
font-size: 11px;
display: block;
}
.logisticsPage .purchaseRequest small {
font-size: 9px;
color: var(--muted);
display: block;
}
.logisticsPage .purchaseRequest .qty {
font-size: 24px;
color: var(--navy);
letter-spacing: -0.04em;
}
.logisticsPage .ownershipSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 17px;
}
.logisticsPage .ownerCard {
border: 1px solid #cde2ed;
background: #f8fcfe;
border-radius: 10px;
padding: 14px;
}
.logisticsPage .ownerCard strong {
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.04em;
display: block;
color: var(--navy);
}
.logisticsPage .ownerCard span {
display: block;
font-size: 9px;
margin-top: 6px;
color: var(--muted);
}
.logisticsPage .ownerCard.vendor {
background: #fff9e9;
border-color: #f0e0af;
}
.logisticsPage .exportStrip {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
color: #58788c;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 10px;
flex-wrap: wrap;
}
.logisticsPage .exportStrip .ico {
width: 14px;
height: 14px;
}
.logisticsPage .exportStrip span {
margin-left: auto;
}
.logisticsPage .exportStrip b {
font-weight: 600;
padding: 3px 6px;
background: #f5fafd;
border: 1px solid #d3e6f1;
border-radius: 4px;
} .logisticsPage .aiGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 50px;
align-items: center;
}
.logisticsPage .aiGrid>.copy>p {
color: #d6d6d6;
}
.logisticsPage .promptBox {
border: 1px solid #354149;
border-radius: 18px;
background: #111920;
padding: 22px;
min-width: 0;
}
.logisticsPage .aiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px;
}
.logisticsPage .aiBrand {
display: flex;
align-items: center;
gap: 9px;
}
.logisticsPage .aiBrand>.ico {
color: var(--yellow);
width: 26px;
height: 26px;
}
.logisticsPage .aiBrand strong {
font-size: 16px;
letter-spacing: 0.02em;
}
.logisticsPage .aiTop>span {
font-size: 9px;
color: #bbccd7;
}
.logisticsPage .question {
border: 1px solid #344653;
border-radius: 11px 11px 2px 11px;
background: #21303b;
padding: 14px;
margin-left: 33px;
color: #f1f5f8;
font-size: 13px;
}
.logisticsPage .aiAnswer {
background: #fff;
color: var(--ink);
padding: 19px;
border-radius: 12px;
margin-top: 15px;
}
.logisticsPage .aiAnswer .answerTitle {
font-size: 14px;
line-height: 1.45;
display: block;
color: #123c55;
margin-bottom: 8px;
}
.logisticsPage .aiAnswer p {
font-size: 11px;
color: #587387;
line-height: 1.7;
}
.logisticsPage .aiItem {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid #d6e5ef;
border-radius: 9px;
background: #f8fbfd;
padding: 12px;
margin-top: 13px;
}
.logisticsPage .aiItem strong {
display: block;
font-size: 12px;
}
.logisticsPage .aiItem small {
font-size: 9px;
color: #607789;
display: block;
margin-top: 3px;
}
.logisticsPage .aiItem>.badge {
font-size: 9px;
}
.logisticsPage .sourceChip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 7px;
border: 1px solid #d1e3ed;
border-radius: 5px;
font-size: 9px;
color: #456c83;
margin-top: 13px;
}
.logisticsPage .sourceChip .ico {
width: 12px;
height: 12px;
}
.logisticsPage .aiReview {
font-size: 10px !important;
color: #ccdae4 !important;
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 16px;
}
.logisticsPage .aiReview .ico {
width: 16px;
height: 16px;
color: var(--yellow);
margin-top: 2px;
}
.logisticsPage .aiSample {
font-size: 10px;
color: #bdc9d3;
text-align: center;
margin-top: 12px;
}
.logisticsPage .aiScope {
font-size: 11px !important;
color: #b9c7d0 !important;
border-top: 1px solid #35434e;
padding-top: 16px;
margin-top: 22px !important;
line-height: 1.7 !important;
} .logisticsPage .cta {
margin-top: 30px;
padding: 24px 27px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.logisticsPage .cta h3 {
font-size: 21px;
}
.logisticsPage .cta p {
font-size: 13px;
margin-top: 7px;
max-width: 660px;
}
.logisticsPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.logisticsPage .ctaSection {
padding: 0 0 64px;
background: var(--sky2);
} .logisticsPage .connectedGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px;
}
.logisticsPage .connectedCard {
background: #151515;
border: 1px solid #333;
border-radius: 15px;
padding: 24px;
}
.logisticsPage .connectedCard>.ico {
color: var(--yellow);
width: 27px;
height: 27px;
margin-bottom: 20px;
}
.logisticsPage .connectedCard h3 {
font-size: 21px;
margin-bottom: 11px;
color: #fff;
}
.logisticsPage .connectedCard p {
font-size: 13px;
line-height: 1.8;
color: #cfcfcf;
}
.logisticsPage .connectedCard a {
display: inline-block;
color: var(--yellow);
font-size: 12px;
font-weight: 750;
margin-top: 15px;
text-decoration: underline;
text-underline-offset: 4px;
}
.logisticsPage .hardwareGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.logisticsPage .hardwareCard {
border: 1px solid #cde3ed;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0;
}
.logisticsPage .hardwareImage {
width: 100%;
height: 195px;
object-fit: contain;
background: #f0f9fd;
border-bottom: 1px solid var(--line);
}
.logisticsPage .hardwareCopy {
padding: 23px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column;
}
.logisticsPage .hardwareCopy h3 {
font-size: 21px;
margin: 13px 0 10px;
}
.logisticsPage .hardwareCopy p {
font-size: 13px;
line-height: 1.75;
}
.logisticsPage .hardwareCopy .bestFor {
font-size: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
color: #355971;
}
.logisticsPage .hardwareNote {
font-size: 12px;
line-height: 1.8;
margin-top: 22px;
padding: 18px 21px;
border: 1px solid #cde3ee;
border-left: 4px solid var(--yellow);
border-radius: 11px;
background: #f7fbfd;
}
.logisticsPage .hardwareNote a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.logisticsPage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.logisticsPage .integration {
height: 87px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 10px;
color: #183e56;
min-width: 0;
line-height: 1.3;
}
.logisticsPage .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.logisticsPage .integration small {
font-size: 9px;
color: #60788a;
margin-top: 6px;
font-weight: 500;
}
.logisticsPage .integrationFlow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
align-items: center;
gap: 13px;
background: #0c2333;
padding: 23px;
border-radius: 15px;
margin-top: 23px;
color: #fff;
}
.logisticsPage .integrationFlow>div {
min-width: 0;
}
.logisticsPage .integrationFlow strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: #fff;
}
.logisticsPage .integrationFlow small {
font-size: 10px;
color: #c1d5e2;
display: block;
margin-top: 5px;
}
.logisticsPage .integrationFlow>.ico {
color: var(--yellow);
width: 26px;
height: 26px;
}
.logisticsPage .integrationNote {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 19px auto 0 !important;
max-width: 950px;
text-align: center;
}
.logisticsPage .integrationNote a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.logisticsPage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 23px;
margin-top: 32px;
}
.logisticsPage .rolloutStep {
border-top: 1px solid #bad7e8;
padding-top: 19px;
}
.logisticsPage .rolloutNumber {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
margin-bottom: 17px;
}
.logisticsPage .rolloutStep h3 {
font-size: 20px;
margin-bottom: 11px;
}
.logisticsPage .rolloutStep p {
font-size: 13px;
line-height: 1.8;
}
.logisticsPage .pilotMeasures {
display: flex;
gap: 14px 23px;
align-items: center;
flex-wrap: wrap;
background: #eff8fd;
border: 1px solid #cee4f0;
border-radius: 11px;
padding: 17px 21px;
margin-top: 27px;
font-size: 11px;
color: #40677f;
}
.logisticsPage .pilotMeasures strong {
font-size: 12px;
color: #173f57;
}
.logisticsPage .pilotMeasures span {
display: flex;
align-items: center;
gap: 6px;
}
.logisticsPage .pilotMeasures .ico {
width: 14px;
height: 14px;
} .logisticsPage .faq {
max-width: 900px;
}
.logisticsPage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.logisticsPage .faq summary {
font-size: 15px;
font-weight: 800;
cursor: pointer;
color: var(--navy);
line-height: 1.65;
}
.logisticsPage .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 11px;
line-height: 1.85;
}
.logisticsPage .faq details p a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.logisticsPage .faq details:last-child {
margin-bottom: 0;
}
.logisticsPage .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 43px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.logisticsPage .final h2 {
color: #fff;
font-size: 39px;
}
.logisticsPage .final p {
color: #ddd;
margin-top: 15px;
max-width: 720px;
font-size: 16px;
}
.logisticsPage .final .ctaBtns {
justify-content: center;
}
.logisticsPage .final .btn.outline {
background: transparent;
border-color: #666;
color: #fff;
}
.logisticsPage .final .btn.outline:hover {
background: #303030;
}
.logisticsPage .contactRow {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 23px;
font-size: 12px;
color: #5b7588;
align-items: center;
}
.logisticsPage .contactRow a {
color: #006fa9;
font-weight: 700;
display: flex;
gap: 7px;
align-items: center;
}
.logisticsPage .contactRow .ico {
width: 16px;
height: 16px;
}
.logisticsPage .pageFooter {
padding: 25px 0;
border-top: 1px solid var(--line);
background: #f7fbfd;
}
.logisticsPage .footerRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 11px;
flex-wrap: wrap;
color: #4e6d80;
}
.logisticsPage .footerRow strong {
font-size: 16px;
letter-spacing: -0.03em;
color: #163f59;
}
.logisticsPage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.logisticsPage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px;
}
@media (min-width: 1600px) { }
@media (max-width: 1100px) {
.logisticsPage .heroGrid {
gap: 27px;
grid-template-columns: 1fr 1fr;
} .logisticsPage .logisticsStage {
height: 540px;
}
.logisticsPage .shipmentPhone {
width: 192px;
top: 91px;
}
.logisticsPage .heroShipmentCard {
width: 228px;
padding: 15px;
}
.logisticsPage .stageTag {
max-width: 182px;
font-size: 9px;
right: 0;
}
.logisticsPage .logisticsScene {
height: 397px;
}
.logisticsPage .feature,
.logisticsPage .aiGrid {
gap: 33px;
}
.logisticsPage .visualInner {
padding: 18px;
}
.logisticsPage .logos {
gap: 8px;
}
.logisticsPage .logo {
padding: 8px;
}
.logisticsPage .outcome {
padding: 23px 19px;
}
.logisticsPage .hardwareCopy {
padding: 20px;
}
.logisticsPage .hardwareImage {
height: 172px;
}
.logisticsPage .flowStep {
grid-template-columns: 37px 1fr;
gap: 12px;
padding: 20px 17px;
}
.logisticsPage .flowNumber {
width: 34px;
height: 34px;
}
.logisticsPage .flowStep h3 {
font-size: 18px;
}
.logisticsPage .fl {
gap: 12px;
}
.logisticsPage .fl li {
font-size: 12px;
}
.logisticsPage .appBody {
padding: 15px;
}
.logisticsPage .receivingPicture {
margin: -15px -15px 15px;
}
.logisticsPage .auditCard {
padding: 17px 12px;
}
.logisticsPage .auditDevice img {
height: 270px;
}
.logisticsPage .auditCount {
font-size: 36px;
}
.logisticsPage .integration {
font-size: 13px;
}
}
@media (max-width: 960px) {
.logisticsPage section {
padding: 63px 0;
}
.logisticsPage .hero {
padding: 25px 0 51px;
}
.logisticsPage .heroGrid,
.logisticsPage .feature,
.logisticsPage .aiGrid,
.logisticsPage .final {
grid-template-columns: 1fr;
}
.logisticsPage .heroGrid {
gap: 31px;
} .logisticsPage .lead {
max-width: 690px;
}
.logisticsPage .heroVisual {
width: 100%;
max-width: 610px;
margin: auto;
}
.logisticsPage .logisticsStage {
height: 560px;
}
.logisticsPage .logisticsScene {
height: 440px;
}
.logisticsPage .shipmentPhone {
width: 224px;
top: 78px;
}
.logisticsPage .heroShipmentCard {
width: 279px;
}
.logisticsPage .stageTag {
max-width: none;
right: 7px;
font-size: 10px;
}
.logisticsPage .feature.reverse .visual {
order: 0;
}
.logisticsPage .feature>.visual {
max-width: 650px;
width: 100%;
margin: auto;
}
.logisticsPage .feature .copy {
max-width: 780px;
}
.logisticsPage .feature h2 {
max-width: 760px;
font-size: 40px;
}
.logisticsPage .visualInner {
padding: 26px;
}
.logisticsPage .fl li {
font-size: 13px;
}
.logisticsPage .fl {
max-width: 710px;
gap: 14px 20px;
}
.logisticsPage .feature,
.logisticsPage .aiGrid {
gap: 32px;
}
.logisticsPage .appBody {
padding: 20px;
}
.logisticsPage .receivingPicture {
height: 185px;
margin: -20px -20px 17px;
}
.logisticsPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.logisticsPage .outcomes {
grid-template-columns: repeat(2, 1fr);
}
.logisticsPage .workflow {
gap: 16px;
}
.logisticsPage .flowStep {
grid-template-columns: 1fr;
padding: 20px;
}
.logisticsPage .flowStep:not(:last-child):after {
right: -16px;
top: 28px;
}
.logisticsPage .promptBox {
max-width: 660px;
width: 100%;
margin: auto;
padding: 25px;
}
.logisticsPage .aiVisual {
max-width: 660px;
width: 100%;
margin: auto;
}
.logisticsPage .aiScope {
max-width: 760px;
}
.logisticsPage .auditLayout {
grid-template-columns: 0.85fr 1.15fr;
gap: 20px;
}
.logisticsPage .auditDevice img {
height: 320px;
}
.logisticsPage .auditCard {
padding: 22px;
}
.logisticsPage .auditCount {
font-size: 45px;
}
.logisticsPage .auditLine {
font-size: 12px;
}
.logisticsPage .auditSubtitle {
font-size: 10px;
}
.logisticsPage .auditCard h3 {
font-size: 20px;
}
.logisticsPage .appBar strong {
font-size: 12px;
}
.logisticsPage .appHeading>strong {
font-size: 17px;
}
.logisticsPage .miniTable {
font-size: 11px;
}
.logisticsPage .miniTable th {
font-size: 10px;
}
.logisticsPage .bin strong {
font-size: 12px;
}
.logisticsPage .bin small {
font-size: 10px;
}
.logisticsPage .cta {
align-items: flex-start;
flex-direction: column;
}
.logisticsPage .connectedGrid {
gap: 12px;
}
.logisticsPage .connectedCard {
padding: 21px;
}
.logisticsPage .connectedCard h3 {
font-size: 19px;
}
.logisticsPage .hardwareGrid {
grid-template-columns: 1fr;
gap: 18px;
}
.logisticsPage .hardwareCard {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
}
.logisticsPage .hardwareImage {
height: 100%;
min-height: 215px;
object-fit: contain;
border-right: 1px solid var(--line);
border-bottom: 0;
}
.logisticsPage .hardwareCopy {
padding: 24px;
}
.logisticsPage .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.logisticsPage .integration {
font-size: 15px;
}
.logisticsPage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 27px;
}
.logisticsPage .final .ctaBtns {
flex-direction: row;
}
.logisticsPage .final {
padding: 35px;
}
.logisticsPage .final h2 {
max-width: 690px;
}
.logisticsPage .quickNav {
margin-top: 23px;
}
.logisticsPage .trust {
padding: 26px 0;
}
.logisticsPage .hero .breadcrumb {
margin-bottom: 27px;
}
}
@media (max-width: 640px) {
.logisticsPage {
font-size: 15px;
}
.logisticsPage .wrap {
width: calc(100% - 32px);
}
.logisticsPage section {
padding: 52px 0;
}
.logisticsPage .hero {
padding: 22px 0 39px;
} .logisticsPage h2,
.logisticsPage .feature h2 {
font-size: 33px;
line-height: 1.16;
}
.logisticsPage h3 {
font-size: 20px;
}
.logisticsPage .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px;
}
.logisticsPage .ey .ico {
width: 14px;
height: 14px;
}
.logisticsPage .lead {
font-size: 16px;
margin-top: 18px;
}
.logisticsPage .actions {
gap: 9px;
margin-top: 23px;
}
.logisticsPage .actions .btn {
font-size: 12px;
padding: 12px 14px;
gap: 7px;
}
.logisticsPage .actions .btn .ico {
width: 15px;
height: 15px;
}
.logisticsPage .heroPills {
gap: 6px;
margin-top: 17px;
}
.logisticsPage .heroPills span {
font-size: 9px;
padding: 5px 8px;
}
.logisticsPage .micro {
font-size: 10px;
margin-top: 13px;
}
.logisticsPage .breadcrumb {
font-size: 8px;
gap: 4px;
margin-bottom: 24px;
}
.logisticsPage .breadcrumb .ico {
width: 9px;
height: 9px;
}
.logisticsPage .heroGrid {
gap: 24px;
}
.logisticsPage .logisticsStage {
height: 530px;
max-width: 410px;
}
.logisticsPage .logisticsScene {
top: 10px;
left: -23px;
width: 110%;
max-width: none;
height: 340px;
}
.logisticsPage .stageLabel {
top: 0;
left: 0;
padding: 8px 10px;
font-size: 9px;
}
.logisticsPage .stageLabel .ico {
width: 15px;
height: 15px;
}
.logisticsPage .shipmentPhone {
width: 175px;
top: 65px;
right: -1px;
border-radius: 23px;
padding: 6px;
}
.logisticsPage .phoneScreen {
min-height: 0;
border-radius: 17px;
}
.logisticsPage .phoneNotch {
height: 15px;
}
.logisticsPage .phoneHead {
padding: 10px;
}
.logisticsPage .phoneHead strong {
font-size: 10px;
}
.logisticsPage .phoneHead small {
font-size: 8px;
}
.logisticsPage .phoneBody {
padding: 10px;
}
.logisticsPage .phoneBody>.badge {
font-size: 8px;
}
.logisticsPage .scanStatus {
gap: 8px;
margin-top: 12px;
}
.logisticsPage .scanStatus>.ico {
width: 25px;
height: 25px;
}
.logisticsPage .scanStatus strong {
font-size: 25px;
}
.logisticsPage .scanStatus small {
font-size: 8px;
}
.logisticsPage .phoneLine {
font-size: 9px;
padding: 7px 0;
}
.logisticsPage .phoneAlert {
font-size: 8px;
padding: 7px;
margin-top: 10px;
}
.logisticsPage .phoneBody .progress {
margin: 10px 0;
height: 5px;
}
.logisticsPage .heroShipmentCard {
width: 184px;
padding: 13px;
bottom: 10px;
left: 0;
border-radius: 12px;
}
.logisticsPage .stockCardHead {
font-size: 8px;
margin-bottom: 11px;
}
.logisticsPage .stockCardHead .ico {
width: 15px;
height: 15px;
}
.logisticsPage .stockCardMetrics {
gap: 7px;
}
.logisticsPage .stockCardMetrics strong {
font-size: 24px;
}
.logisticsPage .stockCardMetrics span {
font-size: 8px;
}
.logisticsPage .stockCardMetrics>div+div {
padding-left: 12px;
}
.logisticsPage .stageTag {
right: 0;
bottom: 3px;
font-size: 8px;
max-width: 140px;
line-height: 1.7;
padding: 7px 9px;
}
.logisticsPage .stageTag .ico {
width: 12px;
height: 12px;
}
.logisticsPage .heroVisual figcaption {
font-size: 9px;
margin-top: 12px;
}
.logisticsPage .trustLabel {
font-size: 11px;
padding-inline: 10px;
}
.logisticsPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.logisticsPage .logo {
height: 52px;
padding: 6px;
}
.logisticsPage .clientLogo {
height: 35px;
}
.logisticsPage .logoFallback {
font-size: 9px;
}
.logisticsPage .quickNav {
gap: 10px 17px;
font-size: 11px;
justify-content: flex-start;
line-height: 1.4;
margin-top: 24px;
}
.logisticsPage .outcomes {
gap: 12px;
}
.logisticsPage .outcome {
padding: 20px 16px;
}
.logisticsPage .outcome h3 {
font-size: 18px;
line-height: 1.18;
}
.logisticsPage .outcome p {
font-size: 12px;
line-height: 1.7;
}
.logisticsPage .outcome>.ico {
width: 25px;
height: 25px;
margin-bottom: 15px;
}
.logisticsPage .sectionHead {
margin-bottom: 28px;
}
.logisticsPage .sectionHead p {
font-size: 15px;
margin-top: 15px;
}
.logisticsPage .workflow {
grid-template-columns: 1fr;
gap: 12px;
}
.logisticsPage .flowStep {
grid-template-columns: 39px 1fr;
padding: 21px;
gap: 16px;
}
.logisticsPage .flowStep:not(:last-child):after {
display: none;
}
.logisticsPage .flowNumber {
width: 37px;
height: 37px;
font-size: 13px;
}
.logisticsPage .flowStep h3 {
font-size: 19px;
}
.logisticsPage .flowStep p {
font-size: 13px;
}
.logisticsPage .copy>p {
font-size: 15px;
line-height: 1.8;
margin-top: 16px;
}
.logisticsPage .fl {
gap: 13px 12px;
}
.logisticsPage .fl li {
font-size: 12px;
gap: 7px;
}
.logisticsPage .tick {
width: 18px;
height: 18px;
flex-basis: 18px;
margin-top: 1px;
}
.logisticsPage .tick .ico {
width: 10px;
height: 10px;
}
.logisticsPage .capabilityMore summary {
font-size: 12px;
min-height: 40px;
}
.logisticsPage .capabilityMore {
margin-top: 18px !important;
}
.logisticsPage .visualInner {
padding: 15px;
border-radius: 17px;
}
.logisticsPage .visual figcaption {
font-size: 9px;
margin-top: 9px;
}
.logisticsPage .feature {
gap: 25px;
}
.logisticsPage .appBar {
padding: 10px 11px;
gap: 7px;
}
.logisticsPage .appBar strong {
font-size: 10px;
}
.logisticsPage .appMark {
width: 23px;
height: 23px;
}
.logisticsPage .appMark .ico {
width: 13px;
height: 13px;
}
.logisticsPage .appBody {
padding: 14px;
}
.logisticsPage .appSub {
font-size: 9px;
margin-bottom: 12px;
}
.logisticsPage .appHeading {
gap: 7px;
margin-bottom: 12px;
}
.logisticsPage .appHeading>strong {
font-size: 14px;
}
.logisticsPage .badge {
font-size: 8px;
padding: 4px 6px;
}
.logisticsPage .miniTabs {
font-size: 9px;
gap: 14px;
margin-bottom: 14px;
}
.logisticsPage .mapLabel {
font-size: 9px;
margin-bottom: 10px;
}
.logisticsPage .binGrid {
gap: 7px;
}
.logisticsPage .bin {
padding: 10px 7px;
}
.logisticsPage .bin.selected {
padding: 9px 6px;
}
.logisticsPage .bin strong {
font-size: 10px;
}
.logisticsPage .bin small {
font-size: 8px;
}
.logisticsPage .binStock {
gap: 3px;
height: 20px;
margin-top: 7px;
}
.logisticsPage .binStock span {
width: 11px;
height: 15px;
}
.logisticsPage .binStock span:after {
left: 3px;
width: 3px;
height: 3px;
}
.logisticsPage .stockRecord {
gap: 9px;
flex-wrap: wrap;
}
.logisticsPage .stockRecord>.ico {
width: 30px;
height: 30px;
padding: 6px;
}
.logisticsPage .stockRecord strong {
font-size: 10px;
}
.logisticsPage .stockRecord small {
font-size: 8px;
}
.logisticsPage .stockRecord>.badge {
font-size: 8px;
}
.logisticsPage .miniMeta {
gap: 5px 12px;
font-size: 8px;
}
.logisticsPage .lightNote {
font-size: 9px;
gap: 7px;
padding: 9px;
}
.logisticsPage .lightNote .ico {
width: 14px;
height: 14px;
}
.logisticsPage .receivingPicture {
height: 149px;
margin: -14px -14px 14px;
}
.logisticsPage .metricsThree {
gap: 7px;
}
.logisticsPage .metricBox {
padding: 10px 8px;
}
.logisticsPage .metricBox strong {
font-size: 23px;
}
.logisticsPage .metricBox span {
font-size: 8px;
}
.logisticsPage .miniTable {
font-size: 9px;
line-height: 1.5;
}
.logisticsPage .miniTable th {
font-size: 8px;
}
.logisticsPage .miniTable :where(th, td) {
padding: 9px 4px;
}
.logisticsPage .miniTable small {
font-size: 8px;
}
.logisticsPage .miniTable .badge {
font-size: 7px;
padding: 3px 4px;
}
.logisticsPage .inlineNotice {
font-size: 9px;
padding: 10px;
gap: 7px;
}
.logisticsPage .inlineNotice .ico {
width: 15px;
height: 15px;
}
.logisticsPage .auditLayout {
gap: 10px;
grid-template-columns: 0.76fr 1.24fr;
}
.logisticsPage .auditDevice img {
height: 278px;
width: 195%;
margin-left: -50%;
}
.logisticsPage .auditDevice span {
font-size: 8px;
}
.logisticsPage .auditCard {
padding: 17px 12px;
}
.logisticsPage .auditCard h3 {
font-size: 16px;
margin-top: 12px;
}
.logisticsPage .auditCount {
font-size: 35px;
margin-top: 15px;
}
.logisticsPage .auditCount small {
font-size: 10px;
}
.logisticsPage .auditSubtitle {
font-size: 8px;
}
.logisticsPage .auditLine {
font-size: 9px;
padding: 8px 0;
}
.logisticsPage .locator {
gap: 9px;
padding: 12px;
margin-top: 13px;
}
.logisticsPage .locator>.ico {
width: 23px;
height: 23px;
}
.logisticsPage .locator strong {
font-size: 10px;
}
.logisticsPage .locator small {
font-size: 8px;
}
.logisticsPage .signal {
gap: 2px;
}
.logisticsPage .signal i {
width: 3px;
}
.logisticsPage .transferRoute {
grid-template-columns: 1fr 32px 1fr;
gap: 7px;
}
.logisticsPage .routeStop {
padding: 12px 7px;
}
.logisticsPage .routeStop>.ico {
width: 29px;
height: 29px;
margin-bottom: 8px;
}
.logisticsPage .routeStop strong {
font-size: 11px;
}
.logisticsPage .routeStop small {
font-size: 8px;
}
.logisticsPage .routeArrow {
font-size: 7px;
}
.logisticsPage .routeArrow .ico {
width: 20px;
height: 20px;
}
.logisticsPage .timeline {
margin-top: 15px;
}
.logisticsPage .timeline li {
gap: 7px;
grid-template-columns: 21px 1fr auto;
}
.logisticsPage .timeline strong {
font-size: 10px;
}
.logisticsPage .timeline small,
.logisticsPage .timeline time {
font-size: 8px;
}
.logisticsPage .timelineDot {
width: 20px;
height: 20px;
}
.logisticsPage .levelChart {
padding: 14px;
}
.logisticsPage .purchaseRequest {
padding: 12px;
gap: 9px;
}
.logisticsPage .purchaseRequest strong {
font-size: 10px;
}
.logisticsPage .purchaseRequest small {
font-size: 8px;
}
.logisticsPage .purchaseRequest .qty {
font-size: 22px;
}
.logisticsPage .ownerCard {
padding: 12px;
}
.logisticsPage .ownerCard strong {
font-size: 25px;
}
.logisticsPage .ownerCard span {
font-size: 8px;
}
.logisticsPage .exportStrip {
font-size: 8px;
gap: 5px;
}
.logisticsPage .exportStrip span {
margin-left: 0;
}
.logisticsPage .promptBox {
padding: 18px;
border-radius: 15px;
}
.logisticsPage .aiTop {
margin-bottom: 17px;
gap: 8px;
}
.logisticsPage .aiBrand strong {
font-size: 15px;
}
.logisticsPage .aiTop>span {
font-size: 8px;
}
.logisticsPage .aiBrand>.ico {
width: 22px;
height: 22px;
}
.logisticsPage .question {
font-size: 12px;
padding: 12px;
margin-left: 20px;
}
.logisticsPage .aiAnswer {
padding: 15px;
}
.logisticsPage .aiAnswer .answerTitle {
font-size: 13px;
}
.logisticsPage .aiAnswer p {
font-size: 10px;
}
.logisticsPage .aiItem {
padding: 11px;
gap: 8px;
}
.logisticsPage .aiItem strong {
font-size: 11px;
}
.logisticsPage .aiItem small {
font-size: 8px;
}
.logisticsPage .sourceChip {
font-size: 8px;
}
.logisticsPage .aiReview {
font-size: 9px !important;
}
.logisticsPage .aiSample {
font-size: 9px;
}
.logisticsPage .aiScope {
font-size: 10px !important;
}
.logisticsPage .ctaSection {
padding: 0 0 48px;
}
.logisticsPage .cta {
padding: 22px;
margin-top: 0;
}
.logisticsPage .cta h3 {
font-size: 21px;
}
.logisticsPage .cta p {
font-size: 12px;
}
.logisticsPage .ctaBtns {
width: 100%;
}
.logisticsPage .ctaBtns .btn {
font-size: 12px;
padding: 12px 14px;
flex: 1;
}
.logisticsPage .connectedGrid {
grid-template-columns: 1fr;
gap: 12px;
}
.logisticsPage .connectedCard {
padding: 24px;
}
.logisticsPage .connectedCard h3 {
font-size: 21px;
}
.logisticsPage .connectedCard p {
font-size: 13px;
}
.logisticsPage .connectedCard>.ico {
margin-bottom: 16px;
}
.logisticsPage .hardwareCard {
display: flex;
}
.logisticsPage .hardwareImage {
height: 185px;
min-height: 0;
border-bottom: 1px solid var(--line);
border-right: 0;
}
.logisticsPage .hardwareCopy {
padding: 22px;
}
.logisticsPage .hardwareCopy h3 {
font-size: 21px;
}
.logisticsPage .hardwareCopy p {
font-size: 13px;
}
.logisticsPage .hardwareNote {
font-size: 11px;
padding: 17px;
}
.logisticsPage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.logisticsPage .integration {
height: 77px;
font-size: 14px;
}
.logisticsPage .integration:last-child {
grid-column: 1/-1;
}
.logisticsPage .integrationFlow {
grid-template-columns: 1fr;
padding: 23px;
gap: 13px;
}
.logisticsPage .integrationFlow>.ico {
transform: rotate(90deg);
width: 20px;
height: 20px;
margin-left: 7px;
}
.logisticsPage .integrationFlow strong {
font-size: 14px;
}
.logisticsPage .integrationFlow small {
font-size: 10px;
}
.logisticsPage .integrationNote {
text-align: left;
font-size: 11px !important;
}
.logisticsPage .rolloutGrid {
gap: 25px 20px;
}
.logisticsPage .rolloutStep h3 {
font-size: 18px;
}
.logisticsPage .rolloutStep p {
font-size: 12px;
}
.logisticsPage .pilotMeasures {
gap: 13px;
padding: 18px;
font-size: 10px;
}
.logisticsPage .pilotMeasures strong {
width: 100%;
}
.logisticsPage .faq details {
padding: 17px 16px;
margin-bottom: 10px;
}
.logisticsPage .faq summary {
font-size: 13px;
line-height: 1.6;
}
.logisticsPage .faq details p {
font-size: 13px;
line-height: 1.85;
}
.logisticsPage .final {
padding: 29px 24px;
border-radius: 0;
gap: 24px;
}
.logisticsPage .final h2 {
font-size: 32px;
}
.logisticsPage .final p {
font-size: 14px;
}
.logisticsPage .final .ctaBtns {
flex-direction: column;
}
.logisticsPage .final .btn {
width: 100%;
min-height: 47px;
}
.logisticsPage .contactRow {
flex-direction: column;
align-items: flex-start;
font-size: 11px;
gap: 12px;
}
.logisticsPage .footerRow {
align-items: flex-start;
gap: 17px;
}
.logisticsPage .footerLinks {
gap: 10px 17px;
font-size: 10px;
}
.logisticsPage .pageFooter {
padding: 23px 0;
}
}
@media (max-width: 359px) { .logisticsPage .actions {
flex-direction: column;
}
.logisticsPage .actions .btn {
width: 100%;
}
.logisticsPage .logisticsStage {
height: 530px;
}
.logisticsPage .shipmentPhone {
width: 163px;
top: 67px;
}
.logisticsPage .heroShipmentCard {
width: 175px;
}
.logisticsPage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px;
}
.logisticsPage .stockCardMetrics strong {
font-size: 22px;
}
.logisticsPage .stockCardMetrics span {
font-size: 7px;
}
.logisticsPage .logisticsScene {
left: -22px;
width: 114%;
top: 18px;
height: 315px;
}
.logisticsPage .fl {
grid-template-columns: 1fr;
}
.logisticsPage .outcomes {
grid-template-columns: 1fr;
}
.logisticsPage .logos {
grid-template-columns: repeat(2, 1fr);
}
.logisticsPage .logoFallback {
font-size: 11px;
}
.logisticsPage .visualInner {
padding: 12px;
}
.logisticsPage .appBody {
padding: 12px;
}
.logisticsPage .receivingPicture {
margin: -12px -12px 12px;
}
.logisticsPage .auditCard {
padding: 15px 10px;
}
.logisticsPage .auditCount {
font-size: 31px;
}
.logisticsPage .auditCard h3 {
font-size: 14px;
}
.logisticsPage .auditLayout {
gap: 7px;
}
.logisticsPage .rolloutGrid {
grid-template-columns: 1fr;
}
.logisticsPage .miniTable {
font-size: 8px;
}
.logisticsPage .ownerCard strong {
font-size: 23px;
}
} .logisticsPage .manifestTop {
display: grid;
grid-template-columns: 103px 1fr;
gap: 19px;
align-items: center;
margin-bottom: 17px;
}
.logisticsPage .shipmentCrate {
height: 100px;
display: grid;
place-items: center;
background: #eaf8ff;
border: 1px solid #c8e4f1;
border-radius: 13px;
position: relative;
}
.logisticsPage .shipmentCrate>.ico {
width: 64px;
height: 64px;
color: #0076dd;
stroke-width: 1.15;
}
.logisticsPage .tagMini {
position: absolute;
bottom: 7px;
right: 6px;
background: #ffc928;
border-radius: 5px;
padding: 4px 6px;
display: flex;
gap: 4px;
align-items: center;
font-size: 8px;
font-weight: 800;
}
.logisticsPage .tagMini .ico {
width: 12px;
height: 12px;
}
.logisticsPage .manifestID {
font-size: 21px;
font-weight: 800;
color: #123c55;
line-height: 1.3;
letter-spacing: -0.025em;
}
.logisticsPage .manifestTop p {
font-size: 10px;
margin: 6px 0 10px;
}
.logisticsPage .manifestFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin: 15px 0;
}
.logisticsPage .manifestFields>div {
padding: 11px 12px;
background: #f5fafd;
border: 1px solid #d5e8f1;
border-radius: 9px;
}
.logisticsPage .manifestFields small {
display: block;
font-size: 9px;
color: #587589;
margin-bottom: 3px;
}
.logisticsPage .manifestFields strong {
font-size: 11px;
color: #194b66;
line-height: 1.45;
display: block;
}
.logisticsPage .itemTags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 9px;
}
.logisticsPage .itemTags span {
font-size: 9px;
background: #fff8dd;
border: 1px solid #efdeaa;
border-radius: 5px;
padding: 5px 7px;
color: #6b561d;
}
.logisticsPage .checkpointPicture {
height: 172px;
margin: -18px -18px 17px;
border-bottom: 1px solid #d9e8f1;
background: #edf9fe;
}
.logisticsPage .checkpointPicture img {
width: 100%;
height: 100%;
object-fit: contain;
}
.logisticsPage .journeyMap {
background: #f2fafe;
border: 1px solid #d1e7f1;
border-radius: 12px;
padding: 21px 15px 17px;
margin-bottom: 17px;
}
.logisticsPage .journeyNodes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
position: relative;
text-align: center;
}
.logisticsPage .journeyNodes:before {
content: "";
height: 2px;
position: absolute;
left: 16%;
right: 16%;
top: 25px;
background: #88bdda;
}
.logisticsPage .journeyNode {
position: relative;
z-index: 1;
min-width: 0;
}
.logisticsPage .journeyNode>.ico {
width: 50px;
height: 50px;
padding: 12px;
background: #fff;
border: 1px solid #a8cddf;
border-radius: 50%;
color: #0076dd;
margin-bottom: 9px;
}
.logisticsPage .journeyNode.current>.ico {
background: #ffc928;
border-color: #dcb544;
color: #142b3a;
}
.logisticsPage .journeyNode strong {
display: block;
font-size: 11px;
line-height: 1.4;
color: #183e55;
}
.logisticsPage .journeyNode small {
font-size: 9px;
color: #52758d;
display: block;
margin: 5px 0 8px;
}
.logisticsPage .journeyNode .badge {
font-size: 8px;
padding: 4px 5px;
}
.logisticsPage .feedRows {
display: grid;
gap: 9px;
}
.logisticsPage .feedRow {
display: grid;
grid-template-columns: 30px 1fr auto;
gap: 10px;
align-items: center;
border: 1px solid #d8e8f0;
border-radius: 10px;
padding: 12px;
background: #fff;
}
.logisticsPage .feedRow>.ico {
width: 27px;
height: 27px;
color: #0076dd;
}
.logisticsPage .feedRow strong {
font-size: 11px;
display: block;
color: #1c435c;
}
.logisticsPage .feedRow small {
font-size: 9px;
display: block;
color: #5f7c8e;
margin-top: 3px;
}
.logisticsPage .feedRow time {
font-size: 10px;
color: #3c6077;
}
.logisticsPage .feedCaption {
font-size: 9px;
text-align: center;
color: #597a8f;
line-height: 1.7;
margin-top: 12px;
}
.logisticsPage .exceptionCard {
border: 1px solid #e8cfa1;
background: #fffaea;
border-left: 4px solid #e5ac21;
border-radius: 10px;
padding: 16px;
margin-bottom: 12px;
}
.logisticsPage .exceptionTop {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 800;
color: #5c471a;
}
.logisticsPage .exceptionTop .ico {
width: 22px;
height: 22px;
color: #a4780c;
}
.logisticsPage .exceptionCard p {
font-size: 10px;
color: #705e37;
margin: 8px 0 12px;
}
.logisticsPage .exceptionMeta {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.logisticsPage .ruleFlow {
display: grid;
gap: 10px;
margin-top: 17px;
}
.logisticsPage .ruleStep {
display: grid;
grid-template-columns: 29px 1fr;
gap: 10px;
align-items: start;
border: 1px solid #d7e7f0;
border-radius: 9px;
padding: 13px;
background: #fff;
}
.logisticsPage .ruleNumber {
width: 25px;
height: 25px;
display: grid;
place-items: center;
background: #eaf8ff;
color: #0074ae;
font-size: 10px;
font-weight: 800;
border-radius: 7px;
}
.logisticsPage .ruleStep strong {
font-size: 11px;
color: #173f56;
display: block;
}
.logisticsPage .ruleStep small {
font-size: 9px;
color: #627a8c;
display: block;
margin-top: 4px;
line-height: 1.7;
}
.logisticsPage .deliveryReceipt {
background: #fff;
border: 1px solid #c5dfeb;
border-radius: 12px;
overflow: hidden;
}
.logisticsPage .receiptHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 17px;
background: #edf9f4;
border-bottom: 1px solid #cae7d9;
gap: 12px;
}
.logisticsPage .receiptHeader>.ico {
width: 33px;
height: 33px;
border-radius: 50%;
background: #d2efdf;
color: #0e714e;
padding: 7px;
}
.logisticsPage .receiptHeader>div {
flex: 1;
}
.logisticsPage .receiptHeader strong {
font-size: 16px;
color: #104a36;
display: block;
}
.logisticsPage .receiptHeader small {
font-size: 9px;
color: #4d7567;
display: block;
margin-top: 3px;
}
.logisticsPage .receiptBody {
padding: 18px;
}
.logisticsPage .receiptCount {
display: flex;
align-items: center;
gap: 13px;
padding-bottom: 15px;
border-bottom: 1px dashed #b6d5e4;
margin-bottom: 14px;
}
.logisticsPage .receiptCount strong {
font-size: 39px;
line-height: 1;
letter-spacing: -0.045em;
color: #123e57;
}
.logisticsPage .receiptCount>span {
font-size: 10px;
color: #5c778b;
line-height: 1.7;
}
.logisticsPage .documentChips {
display: flex;
gap: 8px;
margin-top: 14px;
flex-wrap: wrap;
}
.logisticsPage .documentChips>span {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
padding: 7px 8px;
border-radius: 6px;
background: #eaf7fe;
border: 1px solid #c5e1f0;
color: #2e5d78;
}
.logisticsPage .documentChips .ico {
width: 14px;
height: 14px;
}
.logisticsPage .reportBars {
margin-top: 17px;
padding: 15px;
background: #f7fbfe;
border: 1px solid #d1e5f0;
border-radius: 11px;
}
.logisticsPage .reportBar {
display: grid;
grid-template-columns: 78px 1fr 27px;
align-items: center;
gap: 10px;
margin: 12px 0;
font-size: 10px;
color: #526f82;
}
.logisticsPage .reportBar strong {
color: #183f58;
font-size: 11px;
text-align: right;
}
.logisticsPage .reportTrack {
height: 12px;
background: #e2eff6;
border-radius: 4px;
overflow: hidden;
}
.logisticsPage .reportTrack span {
display: block;
height: 100%;
background: #0076dd;
border-radius: 4px;
}
.logisticsPage .reportBar:nth-child(2) .reportTrack span {
background: #118a61;
}
.logisticsPage .reportBar:nth-child(3) .reportTrack span {
background: #ffc928;
}
.logisticsPage .reportKey {
font-size: 9px;
color: #4c7189;
margin-top: 11px;
text-align: center;
}
.logisticsPage .logisticsScene {
left: -5px;
top: 5px;
height: 440px;
width: 100%;
}
.logisticsPage .phoneRoute {
display: grid;
grid-template-columns: 12px 1fr;
gap: 6px 7px;
align-items: center;
margin: 13px 0 7px;
font-size: 9px;
color: #436b80;
}
.logisticsPage .phoneRoute .miniDot {
width: 6px;
height: 6px;
}
.logisticsPage .shipmentPhone {
top: 80px;
}
.logisticsPage .heroShipmentCard .stockCardMetrics strong {
font-size: 26px;
}
.logisticsPage .heroShipmentCard .stockCardMetrics>div+div {
padding-left: 15px;
}
@media (max-width: 1100px) {
.logisticsPage .checkpointPicture {
margin: -15px -15px 15px;
}
.logisticsPage .heroShipmentCard .stockCardMetrics strong {
font-size: 24px;
}
}
@media (max-width: 960px) {
.logisticsPage .checkpointPicture {
height: 188px;
margin: -20px -20px 17px;
}
}
@media (max-width: 640px) {
.logisticsPage .manifestTop {
grid-template-columns: 82px 1fr;
gap: 12px;
}
.logisticsPage .shipmentCrate {
height: 91px;
}
.logisticsPage .shipmentCrate>.ico {
width: 53px;
height: 53px;
}
.logisticsPage .manifestID {
font-size: 19px;
}
.logisticsPage .manifestFields>div {
padding: 10px;
}
.logisticsPage .manifestFields strong {
font-size: 10px;
}
.logisticsPage .manifestFields small {
font-size: 8px;
}
.logisticsPage .itemTags span {
font-size: 8px;
}
.logisticsPage .checkpointPicture {
height: 142px;
margin: -14px -14px 14px;
}
.logisticsPage .journeyMap {
padding: 17px 9px 13px;
}
.logisticsPage .journeyNode>.ico {
width: 42px;
height: 42px;
padding: 10px;
}
.logisticsPage .journeyNodes:before {
top: 21px;
}
.logisticsPage .journeyNode strong {
font-size: 10px;
}
.logisticsPage .journeyNode small {
font-size: 8px;
}
.logisticsPage .journeyNode .badge {
font-size: 7px;
padding: 4px;
}
.logisticsPage .feedRow {
grid-template-columns: 24px 1fr auto;
padding: 10px;
gap: 8px;
}
.logisticsPage .feedRow>.ico {
width: 24px;
height: 24px;
}
.logisticsPage .feedRow strong {
font-size: 10px;
}
.logisticsPage .feedRow small {
font-size: 8px;
}
.logisticsPage .feedRow time {
font-size: 9px;
}
.logisticsPage .exceptionCard {
padding: 13px;
}
.logisticsPage .exceptionTop {
font-size: 11px;
}
.logisticsPage .ruleStep {
padding: 11px;
gap: 8px;
}
.logisticsPage .ruleStep strong {
font-size: 10px;
}
.logisticsPage .receiptHeader {
padding: 13px;
}
.logisticsPage .receiptHeader strong {
font-size: 14px;
}
.logisticsPage .receiptHeader .badge {
font-size: 7px;
}
.logisticsPage .receiptBody {
padding: 14px;
}
.logisticsPage .receiptCount strong {
font-size: 33px;
}
.logisticsPage .reportBar {
grid-template-columns: 65px 1fr 24px;
font-size: 9px;
gap: 8px;
}
.logisticsPage .reportBars {
padding: 11px;
}
.logisticsPage .logisticsScene {
left: -22px;
top: 8px;
width: 110%;
height: 340px;
}
.logisticsPage .shipmentPhone {
top: 78px;
}
.logisticsPage .heroShipmentCard .stockCardMetrics strong {
font-size: 23px;
}
.logisticsPage .heroShipmentCard .stockCardMetrics>div+div {
padding-left: 10px;
}
.logisticsPage .phoneRoute {
font-size: 8px;
}
.logisticsPage .heroShipmentCard {
bottom: 14px;
}
}
@media (max-width: 359px) {
.logisticsPage .checkpointPicture {
margin: -12px -12px 12px;
}
.logisticsPage .logisticsScene {
width: 114%;
height: 320px;
}
.logisticsPage .journeyMap {
padding-inline: 7px;
}
.logisticsPage .journeyNodes {
gap: 4px;
}
.logisticsPage .reportBar {
grid-template-columns: 61px 1fr 22px;
}
.logisticsPage .heroShipmentCard .stockCardMetrics strong {
font-size: 21px;
}
}
@media (max-width: 767px) {
.new-theme-design .heroVisual {
display: none;
}
}  .forkliftPage {
--brand: #00a8f8;
--brand2: #0076dd;
--navy: #063b5c;
--navy2: #0a4e75;
--sky: #eaf8ff;
--sky2: #f5fbff;
--ink: #11283a;
--muted: #607487;
--line: #d9e8f1;
--green: #118a61;
--greenbg: #eaf8f3;
--yellow: #ffc928;
--yellowsoft: #fff7d6;
--black: #0b0b0b;
--black2: #171717;
--red: #e25757;
--purple: #7c67e8;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.09); font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
isolation: isolate;
overflow-wrap: break-word;
font-size: 16px;
}
.forkliftPage *,
.forkliftPage *::before,
.forkliftPage *::after {
box-sizing: border-box;
}
.forkliftPage :where(h1, h2, h3, p, figure, ul, ol, dl, dd) {
margin: 0;
}
.forkliftPage a {
color: inherit;
text-decoration: none;
}
.forkliftPage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px;
}
.forkliftPage .ico {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle;
}
.forkliftPage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto;
}
.forkliftPage section {
padding: 76px 0;
scroll-margin-top: 30px;
}
.forkliftPage [id] {
scroll-margin-top: 28px;
}
.forkliftPage h1,
.forkliftPage h2,
.forkliftPage h3 {
line-height: 1.12;
letter-spacing: -0.035em;
font-weight: 780;
color: var(--black);
} .forkliftPage h2 {
font-size: clamp(31px, 3.35vw, 45px);
}
.forkliftPage h3 {
font-size: 21px;
}
.forkliftPage p {
color: var(--muted);
}
.forkliftPage .ey {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 12px;
font-weight: 800;
margin-bottom: 18px;
}
.forkliftPage .ey .ico {
width: 16px;
height: 16px;
}
.forkliftPage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
line-height: 1.75;
}
.forkliftPage .btn {
display: inline-flex;
gap: 12px;
min-height: 49px;
padding: 11px 20px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: background 0.2s ease;
line-height: 1.45;
font-size: 14px;
text-align: center;
}
.forkliftPage .btn .ico {
width: 18px;
height: 18px;
}
.forkliftPage .btn.black {
background: var(--black);
color: #fff;
}
.forkliftPage .btn.black:hover {
background: #292929;
}
.forkliftPage .btn.yellow {
background: var(--yellow);
color: #000;
}
.forkliftPage .btn.yellow:hover {
background: #ffda67;
}
.forkliftPage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.forkliftPage .btn.outline:hover {
background: var(--sky);
}
.forkliftPage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.forkliftPage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.forkliftPage .soft {
background: var(--sky2);
}
.forkliftPage .sectionHead {
max-width: 820px;
margin-bottom: 35px;
}
.forkliftPage .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.forkliftPage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.forkliftPage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.forkliftPage .dark h2,
.forkliftPage .dark h3 {
color: #fff;
}
.forkliftPage .dark p {
color: #d6d6d6;
}
.forkliftPage .dark .ey {
background: var(--yellow);
color: var(--black);
}
.forkliftPage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.forkliftPage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 99;
background: #fff;
padding: 12px 20px;
color: var(--navy);
}
.forkliftPage .skipLink:focus {
top: 10px;
} .forkliftPage .hero {
padding: 30px 0 64px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.18),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.14),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.forkliftPage .breadcrumb {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
font-size: 10px;
color: #536c7d;
margin-bottom: 31px;
}
.forkliftPage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px;
}
.forkliftPage .breadcrumb .ico {
width: 11px;
height: 11px;
}
.forkliftPage .heroGrid {
display: grid;
grid-template-columns: 1.25fr 1.04fr;
gap: 38px;
align-items: center;
}
.forkliftPage .hero h1 span {
color: var(--brand2);
}
.forkliftPage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px;
}
.forkliftPage .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.forkliftPage .heroVisual {
min-width: 0;
position: relative;
}
.forkliftPage .forkliftStage {
position: relative;
height: 560px;
max-width: 610px;
margin: auto;
}
.forkliftPage .forkliftScene {
position: absolute;
top: 13px;
left: -15px;
width: 100%;
height: 440px;
object-fit: contain;
}
.forkliftPage .stageLabel {
position: absolute;
left: 15px;
top: 3px;
background: #fff;
border: 1px solid #c6e5f3;
padding: 10px 13px;
border-radius: 10px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: var(--navy);
font-weight: 750;
}
.forkliftPage .stageLabel .ico {
width: 18px;
height: 18px;
color: var(--brand2);
}
.forkliftPage .driverPanel {
position: absolute;
right: -1px;
top: 85px;
width: 212px;
padding: 7px;
border-radius: 28px;
background: #102435;
border: 1px solid #254a62;
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.14);
}
.forkliftPage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden;
min-height: 328px;
}
.forkliftPage .phoneNotch {
height: 20px;
background: #102435;
display: flex;
justify-content: center;
align-items: center;
}
.forkliftPage .phoneNotch:before {
content: "";
height: 5px;
width: 53px;
border-radius: 9px;
background: #3f5665;
}
.forkliftPage .phoneHead {
padding: 13px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.forkliftPage .phoneHead strong {
font-size: 12px;
display: block;
}
.forkliftPage .phoneHead small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.forkliftPage .phoneBody {
padding: 12px;
}
.forkliftPage .phoneBody>.badge {
font-size: 9px;
}
.forkliftPage .scanStatus {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px;
}
.forkliftPage .scanStatus>.ico {
width: 31px;
height: 31px;
color: var(--brand2);
}
.forkliftPage .scanStatus strong {
font-size: 29px;
line-height: 1;
display: block;
letter-spacing: -0.03em;
}
.forkliftPage .scanStatus small {
font-size: 9px;
color: var(--muted);
}
.forkliftPage .phoneLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
border-bottom: 1px solid var(--line);
padding: 9px 0;
}
.forkliftPage .phoneLine:last-child {
border: 0;
}
.forkliftPage .phoneAlert {
padding: 9px;
background: var(--yellowsoft);
border: 1px solid #f0dfab;
border-radius: 7px;
font-size: 9px;
margin-top: 12px;
color: #66500f;
}
.forkliftPage .heroMoveCard {
position: absolute;
left: 3px;
bottom: 2px;
width: 274px;
background: #111820;
border: 1px solid #263d4d;
color: #fff;
border-radius: 15px;
padding: 17px 18px;
}
.forkliftPage .stockCardHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
margin-bottom: 13px;
color: #d2dfe7;
}
.forkliftPage .stockCardHead .ico {
width: 18px;
height: 18px;
color: var(--yellow);
}
.forkliftPage .stockCardMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
}
.forkliftPage .stockCardMetrics strong {
display: block;
font-size: 27px;
color: #fff;
line-height: 1.15;
letter-spacing: -0.04em;
}
.forkliftPage .stockCardMetrics span {
font-size: 9px;
color: #b6ccd9;
}
.forkliftPage .stockCardMetrics>div+div {
border-left: 1px solid #395364;
padding-left: 18px;
}
.forkliftPage .stageTag {
position: absolute;
right: 8px;
bottom: 8px;
background: var(--yellow);
color: #0b0b0b;
border-radius: 9px;
padding: 8px 10px;
max-width: 208px;
font-size: 10px;
font-weight: 800;
}
.forkliftPage .stageTag .ico {
width: 15px;
height: 15px;
margin-right: 4px;
}
.forkliftPage .heroVisual figcaption {
font-size: 10px;
color: #536c7d;
text-align: center;
margin-top: 14px;
}
.forkliftPage .trust {
padding: 27px 0;
border-bottom: 1px solid var(--line);
background: #fff;
}
.forkliftPage .trustLabel {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-bottom: 19px;
color: #3d596c;
}
.forkliftPage .logos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
align-items: center;
}
.forkliftPage .logo {
height: 60px;
display: grid;
place-items: center;
padding: 8px 10px;
border: 1px solid #e8f0f5;
border-radius: 11px;
background: #fff;
overflow: hidden;
}
.forkliftPage .clientLogo {
width: 100%;
height: 40px;
object-fit: contain;
display: block;
pointer-events: none;
}
.forkliftPage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #445e6f;
font-weight: 800;
text-align: center;
line-height: 1.2;
}
.forkliftPage .quickNav {
display: flex;
justify-content: center;
gap: 6px 25px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: #32617b;
}
.forkliftPage .quickNav a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #b7dceb;
}
.forkliftPage .quickNav a:hover {
color: #005f94;
} .forkliftPage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.forkliftPage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
position: relative;
overflow: hidden;
}
.forkliftPage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.forkliftPage .outcome:nth-child(2):before {
background: var(--yellow);
}
.forkliftPage .outcome:nth-child(3):before {
background: var(--green);
}
.forkliftPage .outcome:nth-child(4):before {
background: var(--purple);
}
.forkliftPage .outcome>.ico {
width: 28px;
height: 28px;
color: var(--navy);
margin-bottom: 18px;
}
.forkliftPage .outcome h3 {
font-size: 20px;
margin-bottom: 10px;
}
.forkliftPage .outcome p {
font-size: 13px;
line-height: 1.75;
}
.forkliftPage .workflow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.forkliftPage .flowStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 18px;
position: relative;
padding: 23px 20px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line);
}
.forkliftPage .flowNumber {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--yellow);
font-size: 14px;
font-weight: 850;
}
.forkliftPage .flowStep h3 {
font-size: 19px;
margin-bottom: 9px;
}
.forkliftPage .flowStep p {
font-size: 13px;
}
.forkliftPage .flowStep:not(:last-child):after {
content: "\2192";
position: absolute;
right: -20px;
top: 37px;
color: #0076dd;
font-size: 23px;
z-index: 2;
}
.forkliftPage .workflowSection {
padding-top: 62px;
padding-bottom: 65px;
}
.forkliftPage .workflowSection .sectionHead {
margin-bottom: 28px;
} .forkliftPage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.forkliftPage .feature.reverse .visual {
order: -1;
}
.forkliftPage .copy>p {
color: var(--muted);
font-size: 16px;
margin-top: 18px;
line-height: 1.8;
}
.forkliftPage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 16px;
margin-top: 23px;
list-style: none;
padding: 0;
}
.forkliftPage .fl li {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.65;
align-items: flex-start;
min-width: 0;
}
.forkliftPage .tick {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--greenbg);
color: #0b7651;
display: grid;
place-items: center;
flex: 0 0 20px;
margin-top: 1px;
}
.forkliftPage .tick .ico {
width: 12px;
height: 12px;
stroke-width: 2.2;
}
.forkliftPage details.capabilityMore {
margin-top: 21px;
background: none;
border: 0;
padding: 0;
border-radius: 0;
}
.forkliftPage .capabilityMore summary {
display: inline-flex;
gap: 9px;
align-items: center;
color: #006fa9;
font-size: 13px;
font-weight: 800;
cursor: pointer;
list-style: none;
min-height: 33px;
}
.forkliftPage .capabilityMore summary::-webkit-details-marker {
display: none;
}
.forkliftPage .capabilityMore summary::after {
content: "+";
font-size: 20px;
font-weight: 500;
line-height: 1;
}
.forkliftPage .capabilityMore[open] summary::after {
content: "\2212";
}
.forkliftPage .capabilityMore .fl {
margin-top: 14px;
}
.forkliftPage .dark .fl {
color: #e7e7e7;
}
.forkliftPage .dark .tick {
background: var(--yellow);
color: #000;
}
.forkliftPage .dark .capabilityMore summary {
color: var(--yellow);
}
.forkliftPage .visual {
min-width: 0;
position: relative;
}
.forkliftPage .visualInner {
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.15),
transparent 28%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 24px;
position: relative;
overflow: hidden;
}
.forkliftPage .visual figcaption {
font-size: 10px;
line-height: 1.65;
text-align: center;
margin-top: 11px;
color: #526c80;
}
.forkliftPage .appWindow {
background: #fff;
border: 1px solid #c5dde9;
border-radius: 13px;
overflow: hidden;
}
.forkliftPage .appBar {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 14px;
background: #fff;
border-bottom: 1px solid var(--line);
min-width: 0;
}
.forkliftPage .appBar strong {
font-size: 11px;
color: #183c53;
}
.forkliftPage .appMark {
display: grid;
place-items: center;
background: var(--sky);
width: 25px;
height: 25px;
border-radius: 7px;
color: #0076dd;
}
.forkliftPage .appMark .ico {
width: 15px;
height: 15px;
}
.forkliftPage .windowDots {
margin-left: auto;
display: flex;
gap: 4px;
}
.forkliftPage .windowDots i {
width: 4px;
height: 4px;
background: #bccfd9;
border-radius: 50%;
}
.forkliftPage .appBody {
padding: 18px;
}
.forkliftPage .appSub {
font-size: 10px;
color: #617a8c;
margin-bottom: 14px;
}
.forkliftPage .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
padding: 5px 7px;
border-radius: 6px;
background: #eef5f9;
color: #375e75;
vertical-align: middle;
}
.forkliftPage .badge.green {
background: var(--greenbg);
color: #0b704d;
}
.forkliftPage .badge.yellow {
background: var(--yellowsoft);
color: #695000;
}
.forkliftPage .badge.blue {
background: #e4f6ff;
color: #006799;
}
.forkliftPage .badge.red {
background: #fff0f0;
color: #a23d3d;
}
.forkliftPage .badge.darkBadge {
background: #203c4f;
color: #e4f3fc;
}
.forkliftPage .progress {
height: 7px;
background: #e4eef4;
border-radius: 8px;
overflow: hidden;
margin: 14px 0;
}
.forkliftPage .progress span {
height: 100%;
background: var(--brand2);
display: block;
border-radius: inherit;
}
.forkliftPage .appHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 14px;
}
.forkliftPage .appHeading>strong {
font-size: 15px;
line-height: 1.3;
color: #143c55;
}
.forkliftPage .appHeading small {
font-size: 10px;
color: var(--muted);
display: block;
}
.forkliftPage .miniTabs {
display: flex;
gap: 17px;
font-size: 10px;
color: #597488;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 17px;
}
.forkliftPage .miniTabs .active {
color: #006fa9;
font-weight: 800;
position: relative;
}
.forkliftPage .miniTabs .active:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -11px;
border-bottom: 2px solid #0076dd;
}
.forkliftPage .lightNote {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #466b81;
background: #f3f9fc;
border: 1px solid #dceaf2;
padding: 10px;
border-radius: 8px;
margin-top: 14px;
}
.forkliftPage .lightNote .ico {
width: 16px;
height: 16px;
color: #0076dd;
}
.forkliftPage .inlineNotice {
display: flex;
gap: 9px;
align-items: flex-start;
background: #fff8e0;
border: 1px solid #f1e1af;
border-radius: 9px;
padding: 11px;
font-size: 10px;
line-height: 1.65;
color: #665014;
margin-top: 14px;
}
.forkliftPage .inlineNotice .ico {
width: 17px;
height: 17px;
color: #8a680f;
margin-top: 1px;
}
.forkliftPage .subLabel {
font-size: 10px;
font-weight: 800;
color: #456579;
display: block;
margin-bottom: 10px;
} .forkliftPage .mapLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
color: #4b6e84;
}
.forkliftPage .binGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.forkliftPage .bin {
border: 1px solid #c8dee9;
background: #f7fbfd;
border-radius: 8px;
padding: 12px 10px;
min-width: 0;
}
.forkliftPage .bin.selected {
border: 2px solid #008ccf;
background: #eaf8ff;
padding: 11px 9px;
}
.forkliftPage .bin strong {
font-size: 11px;
display: block;
color: #17455e;
}
.forkliftPage .bin small {
font-size: 9px;
color: #58758a;
display: block;
margin-top: 6px;
}
.forkliftPage .binStock {
display: flex;
gap: 4px;
align-items: flex-end;
height: 23px;
margin-top: 9px;
}
.forkliftPage .binStock span {
width: 14px;
height: 17px;
background: #a6d9f0;
border: 1px solid #6db4d8;
border-radius: 2px;
position: relative;
}
.forkliftPage .binStock span:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: white;
top: 4px;
left: 4px;
}
.forkliftPage .bin.selected .binStock span {
background: #ffc928;
border-color: #d7ae36;
}
.forkliftPage .stockRecord {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 0 0;
margin-top: 15px;
border-top: 1px solid var(--line);
}
.forkliftPage .stockRecord>.ico {
width: 37px;
height: 37px;
padding: 7px;
background: #eaf8ff;
border-radius: 9px;
color: #0076dd;
}
.forkliftPage .stockRecord strong {
font-size: 12px;
display: block;
}
.forkliftPage .stockRecord small {
font-size: 9px;
color: var(--muted);
display: block;
}
.forkliftPage .stockRecord>.badge {
margin-left: auto;
}
.forkliftPage .miniMeta {
display: flex;
gap: 17px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 9px;
color: #587489;
} .forkliftPage .receivingPicture {
height: 167px;
position: relative;
margin: -18px -18px 16px;
border-bottom: 1px solid var(--line);
background: #f0f9fd;
}
.forkliftPage .receivingPicture img {
width: 100%;
height: 100%;
object-fit: contain;
}
.forkliftPage .metricsThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.forkliftPage .metricBox {
border: 1px solid var(--line);
border-radius: 9px;
padding: 11px;
min-width: 0;
}
.forkliftPage .metricBox strong {
font-size: 25px;
letter-spacing: -0.04em;
line-height: 1.1;
color: #0d3b55;
display: block;
}
.forkliftPage .metricBox span {
font-size: 9px;
color: #587487;
display: block;
margin-top: 6px;
}
.forkliftPage .metricBox.warn {
background: #fff8e2;
border-color: #edddaa;
}
.forkliftPage .metricBox.warn strong {
color: #80600c;
}
.forkliftPage .miniTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.forkliftPage .miniTable :where(th, td) {
text-align: left;
padding: 10px 6px;
border-bottom: 1px solid #e4eef4;
vertical-align: middle;
}
.forkliftPage .miniTable th {
font-size: 9px;
color: #526f82;
font-weight: 700;
}
.forkliftPage .miniTable td {
color: #2b5067;
}
.forkliftPage .miniTable td:first-child {
font-weight: 700;
}
.forkliftPage .miniTable tr:last-child td {
border-bottom: 0;
}
.forkliftPage .miniTable small {
display: block;
color: #607a8d;
font-size: 8px;
font-weight: 400;
}
.forkliftPage .miniTable .badge {
font-size: 8px;
padding: 4px 5px;
}
.forkliftPage .auditLayout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 13px;
align-items: center;
}
.forkliftPage .auditDevice {
min-width: 0;
overflow: hidden;
}
.forkliftPage .auditDevice img {
width: 175%;
max-width: none;
margin-left: -37%;
height: 295px;
object-fit: contain;
}
.forkliftPage .auditDevice span {
display: block;
text-align: center;
color: #44697e;
font-size: 10px;
font-weight: 700;
}
.forkliftPage .auditCard {
padding: 19px 15px;
border-radius: 13px;
border: 1px solid #bbd9e9;
background: #fff;
min-width: 0;
}
.forkliftPage .auditCard h3 {
font-size: 17px;
margin-top: 13px;
}
.forkliftPage .auditSubtitle {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px;
}
.forkliftPage .auditCount {
display: block;
font-size: 42px;
letter-spacing: -0.04em;
color: var(--navy);
line-height: 1.1;
margin-top: 17px;
}
.forkliftPage .auditCount small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted);
}
.forkliftPage .auditLine {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 10px;
border-bottom: 1px solid #e3eef4;
padding: 9px 0;
}
.forkliftPage .auditLine:last-child {
border-bottom: 0;
}
.forkliftPage .auditLine span {
display: flex;
gap: 6px;
align-items: center;
}
.forkliftPage .miniDot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
background: #0076dd;
}
.forkliftPage .miniDot.amber {
background: #bc8f11;
}
.forkliftPage .miniDot.red {
background: #cb5e54;
}
.forkliftPage .locator {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
background: #fff;
border: 1px solid #cee4ef;
border-radius: 11px;
padding: 14px;
}
.forkliftPage .locator .ico {
color: #0076dd;
width: 27px;
height: 27px;
}
.forkliftPage .locator strong {
display: block;
font-size: 11px;
}
.forkliftPage .locator small {
font-size: 9px;
display: block;
color: var(--muted);
}
.forkliftPage .signal {
display: flex;
align-items: flex-end;
gap: 3px;
margin-left: auto;
height: 23px;
}
.forkliftPage .signal i {
width: 4px;
border-radius: 2px;
background: #0076dd;
}
.forkliftPage .signal i:nth-child(1) {
height: 7px;
}
.forkliftPage .signal i:nth-child(2) {
height: 11px;
}
.forkliftPage .signal i:nth-child(3) {
height: 16px;
}
.forkliftPage .signal i:nth-child(4) {
height: 21px;
}
.forkliftPage .signal i:nth-child(5) {
height: 23px;
background: #d3e5ef;
} .forkliftPage .transferRoute {
display: grid;
grid-template-columns: 1fr 49px 1fr;
gap: 9px;
align-items: center;
margin-bottom: 16px;
}
.forkliftPage .routeStop {
border: 1px solid #cbe0eb;
border-radius: 10px;
padding: 15px 9px;
text-align: center;
background: #f5fafd;
}
.forkliftPage .routeStop>.ico {
width: 34px;
height: 34px;
color: #0076dd;
margin-bottom: 9px;
}
.forkliftPage .routeStop strong {
display: block;
font-size: 12px;
}
.forkliftPage .routeStop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px;
}
.forkliftPage .routeArrow {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8px;
color: #536e82;
gap: 6px;
}
.forkliftPage .routeArrow .ico {
width: 25px;
color: #0076dd;
}
.forkliftPage .timeline {
list-style: none;
padding: 0;
margin-top: 17px;
}
.forkliftPage .timeline li {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 17px;
position: relative;
font-size: 10px;
}
.forkliftPage .timeline li:not(:last-child):before {
content: "";
position: absolute;
border-left: 1px solid #bbd4e2;
left: 10px;
top: 24px;
bottom: 3px;
}
.forkliftPage .timeline .timelineDot {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--greenbg);
border-radius: 50%;
color: #0b7651;
}
.forkliftPage .timeline .timelineDot .ico {
width: 13px;
height: 13px;
}
.forkliftPage .timeline .timelineDot.pending {
color: #83650b;
background: #fff3c9;
}
.forkliftPage .timeline strong {
font-size: 11px;
display: block;
}
.forkliftPage .timeline small {
font-size: 9px;
color: var(--muted);
display: block;
}
.forkliftPage .timeline time {
font-size: 9px;
color: var(--muted);
padding-top: 2px;
}
.forkliftPage .timeline li:last-child {
padding-bottom: 0;
}
.forkliftPage .levelChart {
padding: 18px;
border: 1px solid #d6e7f0;
border-radius: 10px;
background: #f7fbfd;
margin-top: 15px;
}
.forkliftPage .levelLabels {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: #607c8f;
margin-bottom: 13px;
}
.forkliftPage .stockLevel {
height: 27px;
border-radius: 5px;
background: #e4eff5;
position: relative;
margin-bottom: 10px;
}
.forkliftPage .stockLevel>span {
display: block;
width: 36%;
height: 100%;
background: var(--yellow);
border-radius: 5px;
}
.forkliftPage .stockLevel:after {
content: "";
position: absolute;
left: 50%;
top: -5px;
bottom: -5px;
border-left: 2px dashed #174964;
}
.forkliftPage .stockLevelNote {
font-size: 9px;
color: #385d73;
line-height: 1.6;
}
.forkliftPage .purchaseRequest {
border: 1px solid #bbd9e9;
border-radius: 11px;
background: #fff;
padding: 15px;
margin-top: 16px;
display: grid;
grid-template-columns: 33px 1fr auto;
gap: 10px;
align-items: center;
}
.forkliftPage .purchaseRequest>.ico {
color: #0076dd;
background: #eaf8ff;
padding: 7px;
box-sizing: content-box;
width: 19px;
height: 19px;
border-radius: 9px;
}
.forkliftPage .purchaseRequest strong {
font-size: 11px;
display: block;
}
.forkliftPage .purchaseRequest small {
font-size: 9px;
color: var(--muted);
display: block;
}
.forkliftPage .purchaseRequest .qty {
font-size: 24px;
color: var(--navy);
letter-spacing: -0.04em;
}
.forkliftPage .ownershipSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 17px;
}
.forkliftPage .ownerCard {
border: 1px solid #cde2ed;
background: #f8fcfe;
border-radius: 10px;
padding: 14px;
}
.forkliftPage .ownerCard strong {
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.04em;
display: block;
color: var(--navy);
}
.forkliftPage .ownerCard span {
display: block;
font-size: 9px;
margin-top: 6px;
color: var(--muted);
}
.forkliftPage .ownerCard.vendor {
background: #fff9e9;
border-color: #f0e0af;
}
.forkliftPage .exportStrip {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
color: #58788c;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 10px;
flex-wrap: wrap;
}
.forkliftPage .exportStrip .ico {
width: 14px;
height: 14px;
}
.forkliftPage .exportStrip span {
margin-left: auto;
}
.forkliftPage .exportStrip b {
font-weight: 600;
padding: 3px 6px;
background: #f5fafd;
border: 1px solid #d3e6f1;
border-radius: 4px;
} .forkliftPage .aiGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 50px;
align-items: center;
}
.forkliftPage .aiGrid>.copy>p {
color: #d6d6d6;
}
.forkliftPage .promptBox {
border: 1px solid #354149;
border-radius: 18px;
background: #111920;
padding: 22px;
min-width: 0;
}
.forkliftPage .aiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px;
}
.forkliftPage .aiBrand {
display: flex;
align-items: center;
gap: 9px;
}
.forkliftPage .aiBrand>.ico {
color: var(--yellow);
width: 26px;
height: 26px;
}
.forkliftPage .aiBrand strong {
font-size: 16px;
letter-spacing: 0.02em;
}
.forkliftPage .aiTop>span {
font-size: 9px;
color: #bbccd7;
}
.forkliftPage .question {
border: 1px solid #344653;
border-radius: 11px 11px 2px 11px;
background: #21303b;
padding: 14px;
margin-left: 33px;
color: #f1f5f8;
font-size: 13px;
}
.forkliftPage .aiAnswer {
background: #fff;
color: var(--ink);
padding: 19px;
border-radius: 12px;
margin-top: 15px;
}
.forkliftPage .aiAnswer .answerTitle {
font-size: 14px;
line-height: 1.45;
display: block;
color: #123c55;
margin-bottom: 8px;
}
.forkliftPage .aiAnswer p {
font-size: 11px;
color: #587387;
line-height: 1.7;
}
.forkliftPage .aiItem {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid #d6e5ef;
border-radius: 9px;
background: #f8fbfd;
padding: 12px;
margin-top: 13px;
}
.forkliftPage .aiItem strong {
display: block;
font-size: 12px;
}
.forkliftPage .aiItem small {
font-size: 9px;
color: #607789;
display: block;
margin-top: 3px;
}
.forkliftPage .aiItem>.badge {
font-size: 9px;
}
.forkliftPage .sourceChip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 7px;
border: 1px solid #d1e3ed;
border-radius: 5px;
font-size: 9px;
color: #456c83;
margin-top: 13px;
}
.forkliftPage .sourceChip .ico {
width: 12px;
height: 12px;
}
.forkliftPage .aiReview {
font-size: 10px !important;
color: #ccdae4 !important;
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 16px;
}
.forkliftPage .aiReview .ico {
width: 16px;
height: 16px;
color: var(--yellow);
margin-top: 2px;
}
.forkliftPage .aiSample {
font-size: 10px;
color: #bdc9d3;
text-align: center;
margin-top: 12px;
}
.forkliftPage .aiScope {
font-size: 11px !important;
color: #b9c7d0 !important;
border-top: 1px solid #35434e;
padding-top: 16px;
margin-top: 22px !important;
line-height: 1.7 !important;
} .forkliftPage .cta {
margin-top: 30px;
padding: 24px 27px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.forkliftPage .cta h3 {
font-size: 21px;
}
.forkliftPage .cta p {
font-size: 13px;
margin-top: 7px;
max-width: 660px;
}
.forkliftPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.forkliftPage .ctaSection {
padding: 0 0 64px;
background: var(--sky2);
} .forkliftPage .connectedGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px;
}
.forkliftPage .connectedCard {
background: #151515;
border: 1px solid #333;
border-radius: 15px;
padding: 24px;
}
.forkliftPage .connectedCard>.ico {
color: var(--yellow);
width: 27px;
height: 27px;
margin-bottom: 20px;
}
.forkliftPage .connectedCard h3 {
font-size: 21px;
margin-bottom: 11px;
color: #fff;
}
.forkliftPage .connectedCard p {
font-size: 13px;
line-height: 1.8;
color: #cfcfcf;
}
.forkliftPage .connectedCard a {
display: inline-block;
color: var(--yellow);
font-size: 12px;
font-weight: 750;
margin-top: 15px;
text-decoration: underline;
text-underline-offset: 4px;
}
.forkliftPage .hardwareGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.forkliftPage .hardwareCard {
border: 1px solid #cde3ed;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0;
}
.forkliftPage .hardwareImage {
width: 100%;
height: 195px;
object-fit: contain;
background: #f0f9fd;
border-bottom: 1px solid var(--line);
}
.forkliftPage .hardwareCopy {
padding: 23px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column;
}
.forkliftPage .hardwareCopy h3 {
font-size: 21px;
margin: 13px 0 10px;
}
.forkliftPage .hardwareCopy p {
font-size: 13px;
line-height: 1.75;
}
.forkliftPage .hardwareCopy .bestFor {
font-size: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
color: #355971;
}
.forkliftPage .hardwareNote {
font-size: 12px;
line-height: 1.8;
margin-top: 22px;
padding: 18px 21px;
border: 1px solid #cde3ee;
border-left: 4px solid var(--yellow);
border-radius: 11px;
background: #f7fbfd;
}
.forkliftPage .hardwareNote a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.forkliftPage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.forkliftPage .integration {
height: 87px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 10px;
color: #183e56;
min-width: 0;
line-height: 1.3;
}
.forkliftPage .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.forkliftPage .integration small {
font-size: 9px;
color: #60788a;
margin-top: 6px;
font-weight: 500;
}
.forkliftPage .integrationFlow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
align-items: center;
gap: 13px;
background: #0c2333;
padding: 23px;
border-radius: 15px;
margin-top: 23px;
color: #fff;
}
.forkliftPage .integrationFlow>div {
min-width: 0;
}
.forkliftPage .integrationFlow strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: #fff;
}
.forkliftPage .integrationFlow small {
font-size: 10px;
color: #c1d5e2;
display: block;
margin-top: 5px;
}
.forkliftPage .integrationFlow>.ico {
color: var(--yellow);
width: 26px;
height: 26px;
}
.forkliftPage .integrationNote {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 19px auto 0 !important;
max-width: 950px;
text-align: center;
}
.forkliftPage .integrationNote a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.forkliftPage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 23px;
margin-top: 32px;
}
.forkliftPage .rolloutStep {
border-top: 1px solid #bad7e8;
padding-top: 19px;
}
.forkliftPage .rolloutNumber {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
margin-bottom: 17px;
}
.forkliftPage .rolloutStep h3 {
font-size: 20px;
margin-bottom: 11px;
}
.forkliftPage .rolloutStep p {
font-size: 13px;
line-height: 1.8;
}
.forkliftPage .pilotMeasures {
display: flex;
gap: 14px 23px;
align-items: center;
flex-wrap: wrap;
background: #eff8fd;
border: 1px solid #cee4f0;
border-radius: 11px;
padding: 17px 21px;
margin-top: 27px;
font-size: 11px;
color: #40677f;
}
.forkliftPage .pilotMeasures strong {
font-size: 12px;
color: #173f57;
}
.forkliftPage .pilotMeasures span {
display: flex;
align-items: center;
gap: 6px;
}
.forkliftPage .pilotMeasures .ico {
width: 14px;
height: 14px;
} .forkliftPage .faq {
max-width: 900px;
}
.forkliftPage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.forkliftPage .faq summary {
font-size: 15px;
font-weight: 800;
cursor: pointer;
color: var(--navy);
line-height: 1.65;
}
.forkliftPage .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 11px;
line-height: 1.85;
}
.forkliftPage .faq details p a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.forkliftPage .faq details:last-child {
margin-bottom: 0;
}
.forkliftPage .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
padding: 43px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.forkliftPage .final h2 {
color: #fff;
font-size: 39px;
}
.forkliftPage .final p {
color: #ddd;
margin-top: 15px;
max-width: 720px;
font-size: 16px;
}
.forkliftPage .final .ctaBtns {
justify-content: center;
}
.forkliftPage .final .btn.outline {
background: transparent;
border-color: #666;
color: #fff;
}
.forkliftPage .final .btn.outline:hover {
background: #303030;
}
.forkliftPage .contactRow {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 23px;
font-size: 12px;
color: #5b7588;
align-items: center;
}
.forkliftPage .contactRow a {
color: #006fa9;
font-weight: 700;
display: flex;
gap: 7px;
align-items: center;
}
.forkliftPage .contactRow .ico {
width: 16px;
height: 16px;
}
.forkliftPage .pageFooter {
padding: 25px 0;
border-top: 1px solid var(--line);
background: #f7fbfd;
}
.forkliftPage .footerRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 11px;
flex-wrap: wrap;
color: #4e6d80;
}
.forkliftPage .footerRow strong {
font-size: 16px;
letter-spacing: -0.03em;
color: #163f59;
}
.forkliftPage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.forkliftPage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px;
}
@media (min-width: 1600px) { }
@media (max-width: 1100px) {
.forkliftPage .heroGrid {
gap: 27px;
grid-template-columns: 1fr 1fr;
}
.forkliftPage h1 {
font-size: 53px;
}
.forkliftPage .forkliftStage {
height: 540px;
}
.forkliftPage .driverPanel {
width: 192px;
top: 91px;
}
.forkliftPage .heroMoveCard {
width: 228px;
padding: 15px;
}
.forkliftPage .stageTag {
max-width: 182px;
font-size: 9px;
right: 0;
}
.forkliftPage .forkliftScene {
height: 397px;
}
.forkliftPage .feature,
.forkliftPage .aiGrid {
gap: 33px;
}
.forkliftPage .visualInner {
padding: 18px;
}
.forkliftPage .logos {
gap: 8px;
}
.forkliftPage .logo {
padding: 8px;
}
.forkliftPage .outcome {
padding: 23px 19px;
}
.forkliftPage .hardwareCopy {
padding: 20px;
}
.forkliftPage .hardwareImage {
height: 172px;
}
.forkliftPage .flowStep {
grid-template-columns: 37px 1fr;
gap: 12px;
padding: 20px 17px;
}
.forkliftPage .flowNumber {
width: 34px;
height: 34px;
}
.forkliftPage .flowStep h3 {
font-size: 18px;
}
.forkliftPage .fl {
gap: 12px;
}
.forkliftPage .fl li {
font-size: 12px;
}
.forkliftPage .appBody {
padding: 15px;
}
.forkliftPage .receivingPicture {
margin: -15px -15px 15px;
}
.forkliftPage .auditCard {
padding: 17px 12px;
}
.forkliftPage .auditDevice img {
height: 270px;
}
.forkliftPage .auditCount {
font-size: 36px;
}
.forkliftPage .integration {
font-size: 13px;
}
}
@media (max-width: 960px) {
.forkliftPage section {
padding: 63px 0;
}
.forkliftPage .hero {
padding: 25px 0 51px;
}
.forkliftPage .heroGrid,
.forkliftPage .feature,
.forkliftPage .aiGrid,
.forkliftPage .final {
grid-template-columns: 1fr;
}
.forkliftPage .heroGrid {
gap: 31px;
}
.forkliftPage h1 { max-width: 780px;
}
.forkliftPage .lead {
max-width: 690px;
}
.forkliftPage .heroVisual {
width: 100%;
max-width: 610px;
margin: auto;
}
.forkliftPage .forkliftStage {
height: 560px;
}
.forkliftPage .forkliftScene {
height: 440px;
}
.forkliftPage .driverPanel {
width: 224px;
top: 78px;
}
.forkliftPage .heroMoveCard {
width: 279px;
}
.forkliftPage .stageTag {
max-width: none;
right: 7px;
font-size: 10px;
}
.forkliftPage .feature.reverse .visual {
order: 0;
}
.forkliftPage .feature>.visual {
max-width: 650px;
width: 100%;
margin: auto;
}
.forkliftPage .feature .copy {
max-width: 780px;
}
.forkliftPage .feature h2 {
max-width: 760px;
font-size: 40px;
}
.forkliftPage .visualInner {
padding: 26px;
}
.forkliftPage .fl li {
font-size: 13px;
}
.forkliftPage .fl {
max-width: 710px;
gap: 14px 20px;
}
.forkliftPage .feature,
.forkliftPage .aiGrid {
gap: 32px;
}
.forkliftPage .appBody {
padding: 20px;
}
.forkliftPage .receivingPicture {
height: 185px;
margin: -20px -20px 17px;
}
.forkliftPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.forkliftPage .outcomes {
grid-template-columns: repeat(2, 1fr);
}
.forkliftPage .workflow {
gap: 16px;
}
.forkliftPage .flowStep {
grid-template-columns: 1fr;
padding: 20px;
}
.forkliftPage .flowStep:not(:last-child):after {
right: -16px;
top: 28px;
}
.forkliftPage .promptBox {
max-width: 660px;
width: 100%;
margin: auto;
padding: 25px;
}
.forkliftPage .aiVisual {
max-width: 660px;
width: 100%;
margin: auto;
}
.forkliftPage .aiScope {
max-width: 760px;
}
.forkliftPage .auditLayout {
grid-template-columns: 0.85fr 1.15fr;
gap: 20px;
}
.forkliftPage .auditDevice img {
height: 320px;
}
.forkliftPage .auditCard {
padding: 22px;
}
.forkliftPage .auditCount {
font-size: 45px;
}
.forkliftPage .auditLine {
font-size: 12px;
}
.forkliftPage .auditSubtitle {
font-size: 10px;
}
.forkliftPage .auditCard h3 {
font-size: 20px;
}
.forkliftPage .appBar strong {
font-size: 12px;
}
.forkliftPage .appHeading>strong {
font-size: 17px;
}
.forkliftPage .miniTable {
font-size: 11px;
}
.forkliftPage .miniTable th {
font-size: 10px;
}
.forkliftPage .bin strong {
font-size: 12px;
}
.forkliftPage .bin small {
font-size: 10px;
}
.forkliftPage .cta {
align-items: flex-start;
flex-direction: column;
}
.forkliftPage .connectedGrid {
gap: 12px;
}
.forkliftPage .connectedCard {
padding: 21px;
}
.forkliftPage .connectedCard h3 {
font-size: 19px;
}
.forkliftPage .hardwareGrid {
grid-template-columns: 1fr;
gap: 18px;
}
.forkliftPage .hardwareCard {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
}
.forkliftPage .hardwareImage {
height: 100%;
min-height: 215px;
object-fit: contain;
border-right: 1px solid var(--line);
border-bottom: 0;
}
.forkliftPage .hardwareCopy {
padding: 24px;
}
.forkliftPage .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.forkliftPage .integration {
font-size: 15px;
}
.forkliftPage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 27px;
}
.forkliftPage .final .ctaBtns {
flex-direction: row;
}
.forkliftPage .final {
padding: 35px;
}
.forkliftPage .final h2 {
max-width: 690px;
}
.forkliftPage .quickNav {
margin-top: 23px;
}
.forkliftPage .trust {
padding: 26px 0;
}
.forkliftPage .hero .breadcrumb {
margin-bottom: 27px;
}
}
@media (max-width: 640px) {
.forkliftPage {
font-size: 15px;
}
.forkliftPage .wrap {
width: calc(100% - 32px);
}
.forkliftPage section {
padding: 52px 0;
}
.forkliftPage .hero {
padding: 22px 0 39px;
} .forkliftPage h2,
.forkliftPage .feature h2 {
font-size: 33px;
line-height: 1.16;
}
.forkliftPage h3 {
font-size: 20px;
}
.forkliftPage .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px;
}
.forkliftPage .ey .ico {
width: 14px;
height: 14px;
}
.forkliftPage .lead {
font-size: 16px;
margin-top: 18px;
}
.forkliftPage .actions {
gap: 9px;
margin-top: 23px;
}
.forkliftPage .actions .btn {
font-size: 12px;
padding: 12px 14px;
gap: 7px;
}
.forkliftPage .actions .btn .ico {
width: 15px;
height: 15px;
}
.forkliftPage .heroPills {
gap: 6px;
margin-top: 17px;
}
.forkliftPage .heroPills span {
font-size: 9px;
padding: 5px 8px;
}
.forkliftPage .micro {
font-size: 10px;
margin-top: 13px;
}
.forkliftPage .breadcrumb {
font-size: 8px;
gap: 4px;
margin-bottom: 24px;
}
.forkliftPage .breadcrumb .ico {
width: 9px;
height: 9px;
}
.forkliftPage .heroGrid {
gap: 24px;
}
.forkliftPage .forkliftStage {
height: 530px;
max-width: 410px;
}
.forkliftPage .forkliftScene {
top: 10px;
left: -23px;
width: 110%;
max-width: none;
height: 340px;
}
.forkliftPage .stageLabel {
top: 0;
left: 0;
padding: 8px 10px;
font-size: 9px;
}
.forkliftPage .stageLabel .ico {
width: 15px;
height: 15px;
}
.forkliftPage .driverPanel {
width: 175px;
top: 65px;
right: -1px;
border-radius: 23px;
padding: 6px;
}
.forkliftPage .phoneScreen {
min-height: 0;
border-radius: 17px;
}
.forkliftPage .phoneNotch {
height: 15px;
}
.forkliftPage .phoneHead {
padding: 10px;
}
.forkliftPage .phoneHead strong {
font-size: 10px;
}
.forkliftPage .phoneHead small {
font-size: 8px;
}
.forkliftPage .phoneBody {
padding: 10px;
}
.forkliftPage .phoneBody>.badge {
font-size: 8px;
}
.forkliftPage .scanStatus {
gap: 8px;
margin-top: 12px;
}
.forkliftPage .scanStatus>.ico {
width: 25px;
height: 25px;
}
.forkliftPage .scanStatus strong {
font-size: 25px;
}
.forkliftPage .scanStatus small {
font-size: 8px;
}
.forkliftPage .phoneLine {
font-size: 9px;
padding: 7px 0;
}
.forkliftPage .phoneAlert {
font-size: 8px;
padding: 7px;
margin-top: 10px;
}
.forkliftPage .phoneBody .progress {
margin: 10px 0;
height: 5px;
}
.forkliftPage .heroMoveCard {
width: 184px;
padding: 13px;
bottom: 10px;
left: 0;
border-radius: 12px;
}
.forkliftPage .stockCardHead {
font-size: 8px;
margin-bottom: 11px;
}
.forkliftPage .stockCardHead .ico {
width: 15px;
height: 15px;
}
.forkliftPage .stockCardMetrics {
gap: 7px;
}
.forkliftPage .stockCardMetrics strong {
font-size: 24px;
}
.forkliftPage .stockCardMetrics span {
font-size: 8px;
}
.forkliftPage .stockCardMetrics>div+div {
padding-left: 12px;
}
.forkliftPage .stageTag {
right: 0;
bottom: 3px;
font-size: 8px;
max-width: 140px;
line-height: 1.7;
padding: 7px 9px;
}
.forkliftPage .stageTag .ico {
width: 12px;
height: 12px;
}
.forkliftPage .heroVisual figcaption {
font-size: 9px;
margin-top: 12px;
}
.forkliftPage .trustLabel {
font-size: 11px;
padding-inline: 10px;
}
.forkliftPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.forkliftPage .logo {
height: 52px;
padding: 6px;
}
.forkliftPage .clientLogo {
height: 35px;
}
.forkliftPage .logoFallback {
font-size: 9px;
}
.forkliftPage .quickNav {
gap: 10px 17px;
font-size: 11px;
justify-content: flex-start;
line-height: 1.4;
margin-top: 24px;
}
.forkliftPage .outcomes {
gap: 12px;
}
.forkliftPage .outcome {
padding: 20px 16px;
}
.forkliftPage .outcome h3 {
font-size: 18px;
line-height: 1.18;
}
.forkliftPage .outcome p {
font-size: 12px;
line-height: 1.7;
}
.forkliftPage .outcome>.ico {
width: 25px;
height: 25px;
margin-bottom: 15px;
}
.forkliftPage .sectionHead {
margin-bottom: 28px;
}
.forkliftPage .sectionHead p {
font-size: 15px;
margin-top: 15px;
}
.forkliftPage .workflow {
grid-template-columns: 1fr;
gap: 12px;
}
.forkliftPage .flowStep {
grid-template-columns: 39px 1fr;
padding: 21px;
gap: 16px;
}
.forkliftPage .flowStep:not(:last-child):after {
display: none;
}
.forkliftPage .flowNumber {
width: 37px;
height: 37px;
font-size: 13px;
}
.forkliftPage .flowStep h3 {
font-size: 19px;
}
.forkliftPage .flowStep p {
font-size: 13px;
}
.forkliftPage .copy>p {
font-size: 15px;
line-height: 1.8;
margin-top: 16px;
}
.forkliftPage .fl {
gap: 13px 12px;
}
.forkliftPage .fl li {
font-size: 12px;
gap: 7px;
}
.forkliftPage .tick {
width: 18px;
height: 18px;
flex-basis: 18px;
margin-top: 1px;
}
.forkliftPage .tick .ico {
width: 10px;
height: 10px;
}
.forkliftPage .capabilityMore summary {
font-size: 12px;
min-height: 40px;
}
.forkliftPage .capabilityMore {
margin-top: 18px !important;
}
.forkliftPage .visualInner {
padding: 15px;
border-radius: 17px;
}
.forkliftPage .visual figcaption {
font-size: 9px;
margin-top: 9px;
}
.forkliftPage .feature {
gap: 25px;
}
.forkliftPage .appBar {
padding: 10px 11px;
gap: 7px;
}
.forkliftPage .appBar strong {
font-size: 10px;
}
.forkliftPage .appMark {
width: 23px;
height: 23px;
}
.forkliftPage .appMark .ico {
width: 13px;
height: 13px;
}
.forkliftPage .appBody {
padding: 14px;
}
.forkliftPage .appSub {
font-size: 9px;
margin-bottom: 12px;
}
.forkliftPage .appHeading {
gap: 7px;
margin-bottom: 12px;
}
.forkliftPage .appHeading>strong {
font-size: 14px;
}
.forkliftPage .badge {
font-size: 8px;
padding: 4px 6px;
}
.forkliftPage .miniTabs {
font-size: 9px;
gap: 14px;
margin-bottom: 14px;
}
.forkliftPage .mapLabel {
font-size: 9px;
margin-bottom: 10px;
}
.forkliftPage .binGrid {
gap: 7px;
}
.forkliftPage .bin {
padding: 10px 7px;
}
.forkliftPage .bin.selected {
padding: 9px 6px;
}
.forkliftPage .bin strong {
font-size: 10px;
}
.forkliftPage .bin small {
font-size: 8px;
}
.forkliftPage .binStock {
gap: 3px;
height: 20px;
margin-top: 7px;
}
.forkliftPage .binStock span {
width: 11px;
height: 15px;
}
.forkliftPage .binStock span:after {
left: 3px;
width: 3px;
height: 3px;
}
.forkliftPage .stockRecord {
gap: 9px;
flex-wrap: wrap;
}
.forkliftPage .stockRecord>.ico {
width: 30px;
height: 30px;
padding: 6px;
}
.forkliftPage .stockRecord strong {
font-size: 10px;
}
.forkliftPage .stockRecord small {
font-size: 8px;
}
.forkliftPage .stockRecord>.badge {
font-size: 8px;
}
.forkliftPage .miniMeta {
gap: 5px 12px;
font-size: 8px;
}
.forkliftPage .lightNote {
font-size: 9px;
gap: 7px;
padding: 9px;
}
.forkliftPage .lightNote .ico {
width: 14px;
height: 14px;
}
.forkliftPage .receivingPicture {
height: 149px;
margin: -14px -14px 14px;
}
.forkliftPage .metricsThree {
gap: 7px;
}
.forkliftPage .metricBox {
padding: 10px 8px;
}
.forkliftPage .metricBox strong {
font-size: 23px;
}
.forkliftPage .metricBox span {
font-size: 8px;
}
.forkliftPage .miniTable {
font-size: 9px;
line-height: 1.5;
}
.forkliftPage .miniTable th {
font-size: 8px;
}
.forkliftPage .miniTable :where(th, td) {
padding: 9px 4px;
}
.forkliftPage .miniTable small {
font-size: 8px;
}
.forkliftPage .miniTable .badge {
font-size: 7px;
padding: 3px 4px;
}
.forkliftPage .inlineNotice {
font-size: 9px;
padding: 10px;
gap: 7px;
}
.forkliftPage .inlineNotice .ico {
width: 15px;
height: 15px;
}
.forkliftPage .auditLayout {
gap: 10px;
grid-template-columns: 0.76fr 1.24fr;
}
.forkliftPage .auditDevice img {
height: 278px;
width: 195%;
margin-left: -50%;
}
.forkliftPage .auditDevice span {
font-size: 8px;
}
.forkliftPage .auditCard {
padding: 17px 12px;
}
.forkliftPage .auditCard h3 {
font-size: 16px;
margin-top: 12px;
}
.forkliftPage .auditCount {
font-size: 35px;
margin-top: 15px;
}
.forkliftPage .auditCount small {
font-size: 10px;
}
.forkliftPage .auditSubtitle {
font-size: 8px;
}
.forkliftPage .auditLine {
font-size: 9px;
padding: 8px 0;
}
.forkliftPage .locator {
gap: 9px;
padding: 12px;
margin-top: 13px;
}
.forkliftPage .locator>.ico {
width: 23px;
height: 23px;
}
.forkliftPage .locator strong {
font-size: 10px;
}
.forkliftPage .locator small {
font-size: 8px;
}
.forkliftPage .signal {
gap: 2px;
}
.forkliftPage .signal i {
width: 3px;
}
.forkliftPage .transferRoute {
grid-template-columns: 1fr 32px 1fr;
gap: 7px;
}
.forkliftPage .routeStop {
padding: 12px 7px;
}
.forkliftPage .routeStop>.ico {
width: 29px;
height: 29px;
margin-bottom: 8px;
}
.forkliftPage .routeStop strong {
font-size: 11px;
}
.forkliftPage .routeStop small {
font-size: 8px;
}
.forkliftPage .routeArrow {
font-size: 7px;
}
.forkliftPage .routeArrow .ico {
width: 20px;
height: 20px;
}
.forkliftPage .timeline {
margin-top: 15px;
}
.forkliftPage .timeline li {
gap: 7px;
grid-template-columns: 21px 1fr auto;
}
.forkliftPage .timeline strong {
font-size: 10px;
}
.forkliftPage .timeline small,
.forkliftPage .timeline time {
font-size: 8px;
}
.forkliftPage .timelineDot {
width: 20px;
height: 20px;
}
.forkliftPage .levelChart {
padding: 14px;
}
.forkliftPage .purchaseRequest {
padding: 12px;
gap: 9px;
}
.forkliftPage .purchaseRequest strong {
font-size: 10px;
}
.forkliftPage .purchaseRequest small {
font-size: 8px;
}
.forkliftPage .purchaseRequest .qty {
font-size: 22px;
}
.forkliftPage .ownerCard {
padding: 12px;
}
.forkliftPage .ownerCard strong {
font-size: 25px;
}
.forkliftPage .ownerCard span {
font-size: 8px;
}
.forkliftPage .exportStrip {
font-size: 8px;
gap: 5px;
}
.forkliftPage .exportStrip span {
margin-left: 0;
}
.forkliftPage .promptBox {
padding: 18px;
border-radius: 15px;
}
.forkliftPage .aiTop {
margin-bottom: 17px;
gap: 8px;
}
.forkliftPage .aiBrand strong {
font-size: 15px;
}
.forkliftPage .aiTop>span {
font-size: 8px;
}
.forkliftPage .aiBrand>.ico {
width: 22px;
height: 22px;
}
.forkliftPage .question {
font-size: 12px;
padding: 12px;
margin-left: 20px;
}
.forkliftPage .aiAnswer {
padding: 15px;
}
.forkliftPage .aiAnswer .answerTitle {
font-size: 13px;
}
.forkliftPage .aiAnswer p {
font-size: 10px;
}
.forkliftPage .aiItem {
padding: 11px;
gap: 8px;
}
.forkliftPage .aiItem strong {
font-size: 11px;
}
.forkliftPage .aiItem small {
font-size: 8px;
}
.forkliftPage .sourceChip {
font-size: 8px;
}
.forkliftPage .aiReview {
font-size: 9px !important;
}
.forkliftPage .aiSample {
font-size: 9px;
}
.forkliftPage .aiScope {
font-size: 10px !important;
}
.forkliftPage .ctaSection {
padding: 0 0 48px;
}
.forkliftPage .cta {
padding: 22px;
margin-top: 0;
}
.forkliftPage .cta h3 {
font-size: 21px;
}
.forkliftPage .cta p {
font-size: 12px;
}
.forkliftPage .ctaBtns {
width: 100%;
}
.forkliftPage .ctaBtns .btn {
font-size: 12px;
padding: 12px 14px;
flex: 1;
}
.forkliftPage .connectedGrid {
grid-template-columns: 1fr;
gap: 12px;
}
.forkliftPage .connectedCard {
padding: 24px;
}
.forkliftPage .connectedCard h3 {
font-size: 21px;
}
.forkliftPage .connectedCard p {
font-size: 13px;
}
.forkliftPage .connectedCard>.ico {
margin-bottom: 16px;
}
.forkliftPage .hardwareCard {
display: flex;
}
.forkliftPage .hardwareImage {
height: 185px;
min-height: 0;
border-bottom: 1px solid var(--line);
border-right: 0;
}
.forkliftPage .hardwareCopy {
padding: 22px;
}
.forkliftPage .hardwareCopy h3 {
font-size: 21px;
}
.forkliftPage .hardwareCopy p {
font-size: 13px;
}
.forkliftPage .hardwareNote {
font-size: 11px;
padding: 17px;
}
.forkliftPage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.forkliftPage .integration {
height: 77px;
font-size: 14px;
}
.forkliftPage .integration:last-child {
grid-column: 1/-1;
}
.forkliftPage .integrationFlow {
grid-template-columns: 1fr;
padding: 23px;
gap: 13px;
}
.forkliftPage .integrationFlow>.ico {
transform: rotate(90deg);
width: 20px;
height: 20px;
margin-left: 7px;
}
.forkliftPage .integrationFlow strong {
font-size: 14px;
}
.forkliftPage .integrationFlow small {
font-size: 10px;
}
.forkliftPage .integrationNote {
text-align: left;
font-size: 11px !important;
}
.forkliftPage .rolloutGrid {
gap: 25px 20px;
}
.forkliftPage .rolloutStep h3 {
font-size: 18px;
}
.forkliftPage .rolloutStep p {
font-size: 12px;
}
.forkliftPage .pilotMeasures {
gap: 13px;
padding: 18px;
font-size: 10px;
}
.forkliftPage .pilotMeasures strong {
width: 100%;
}
.forkliftPage .faq details {
padding: 17px 16px;
margin-bottom: 10px;
}
.forkliftPage .faq summary {
font-size: 13px;
line-height: 1.6;
}
.forkliftPage .faq details p {
font-size: 13px;
line-height: 1.85;
}
.forkliftPage .final {
padding: 29px 24px;
gap: 24px;
}
.forkliftPage .final h2 {
font-size: 32px;
}
.forkliftPage .final p {
font-size: 14px;
}
.forkliftPage .final .ctaBtns {
flex-direction: column;
}
.forkliftPage .final .btn {
width: 100%;
min-height: 47px;
}
.forkliftPage .contactRow {
flex-direction: column;
align-items: flex-start;
font-size: 11px;
gap: 12px;
}
.forkliftPage .footerRow {
align-items: flex-start;
gap: 17px;
}
.forkliftPage .footerLinks {
gap: 10px 17px;
font-size: 10px;
}
.forkliftPage .pageFooter {
padding: 23px 0;
}
}
@media (max-width: 359px) { .forkliftPage .actions {
flex-direction: column;
}
.forkliftPage .actions .btn {
width: 100%;
}
.forkliftPage .forkliftStage {
height: 530px;
}
.forkliftPage .driverPanel {
width: 163px;
top: 67px;
}
.forkliftPage .heroMoveCard {
width: 175px;
}
.forkliftPage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px;
}
.forkliftPage .stockCardMetrics strong {
font-size: 22px;
}
.forkliftPage .stockCardMetrics span {
font-size: 7px;
}
.forkliftPage .forkliftScene {
left: -22px;
width: 114%;
top: 18px;
height: 315px;
}
.forkliftPage .fl {
grid-template-columns: 1fr;
}
.forkliftPage .outcomes {
grid-template-columns: 1fr;
}
.forkliftPage .logos {
grid-template-columns: repeat(2, 1fr);
}
.forkliftPage .logoFallback {
font-size: 11px;
}
.forkliftPage .visualInner {
padding: 12px;
}
.forkliftPage .appBody {
padding: 12px;
}
.forkliftPage .receivingPicture {
margin: -12px -12px 12px;
}
.forkliftPage .auditCard {
padding: 15px 10px;
}
.forkliftPage .auditCount {
font-size: 31px;
}
.forkliftPage .auditCard h3 {
font-size: 14px;
}
.forkliftPage .auditLayout {
gap: 7px;
}
.forkliftPage .rolloutGrid {
grid-template-columns: 1fr;
}
.forkliftPage .miniTable {
font-size: 8px;
}
.forkliftPage .ownerCard strong {
font-size: 23px;
}
}  .forkliftPage .forkliftStage {
height: 555px;
max-width: 610px;
}
.forkliftPage .forkliftScene {
top: 76px;
left: -36px;
width: 108%;
max-width: none;
height: 390px;
object-fit: contain;
}
.forkliftPage .stageLabel {
top: 4px;
left: 0;
font-size: 10px;
}
.forkliftPage .driverPanel {
top: 54px;
right: 0;
width: 229px;
padding: 0;
border-radius: 15px;
background: #fff;
border: 1px solid #b7d8e8;
box-shadow: 0 10px 24px rgba(6, 59, 92, 0.07);
overflow: hidden;
}
.forkliftPage .driverHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
background: #f1fafe;
border-bottom: 1px solid var(--line);
padding: 12px;
}
.forkliftPage .driverHead>span:first-child {
display: flex;
align-items: center;
gap: 7px;
color: #174157;
font-size: 11px;
font-weight: 800;
}
.forkliftPage .driverHead .ico {
width: 20px;
height: 20px;
color: #0076dd;
}
.forkliftPage .driverHead .badge {
font-size: 8px;
padding: 4px 5px;
}
.forkliftPage .driverBody {
padding: 14px;
}
.forkliftPage .driverBody>small {
display: block;
font-size: 8px;
letter-spacing: 0.065em;
color: #607487;
font-weight: 650;
}
.forkliftPage .driverBody>strong {
display: block;
font-size: 17px;
margin: 6px 0 11px;
letter-spacing: -0.025em;
color: #153e56;
}
.forkliftPage .driverRoute {
display: grid;
grid-template-columns: 1fr 16px 1fr;
gap: 7px;
align-items: center;
color: #446a82;
font-size: 9px;
line-height: 1.5;
border-block: 1px solid #e1ecf3;
padding: 11px 0;
}
.forkliftPage .driverRoute .ico {
width: 16px;
height: 16px;
color: #0076dd;
}
.forkliftPage .driverRoute b {
color: #15455f;
font-size: 10px;
}
.forkliftPage .driverDone {
display: flex;
align-items: center;
gap: 7px;
margin-top: 12px;
font-size: 10px;
color: #0b704d;
font-weight: 750;
}
.forkliftPage .driverDone .ico {
width: 17px;
height: 17px;
padding: 3px;
border-radius: 50%;
background: #eaf8f3;
stroke-width: 2.4;
}
.forkliftPage .driverFoot {
font-size: 8px;
color: #607487;
margin-top: 7px;
}
.forkliftPage .heroMoveCard {
width: 265px;
bottom: 0;
left: 0;
padding: 16px 18px;
}
.forkliftPage .stageTag {
right: 0;
bottom: 15px;
font-size: 10px;
max-width: 195px;
}
.forkliftPage .workflowNote {
font-size: 12px;
line-height: 1.75;
color: #5a7488;
text-align: center;
margin: 22px auto 0;
max-width: 820px;
}
.forkliftPage .aiDraft {
display: flex;
gap: 8px;
align-items: center;
font-size: 11px;
font-weight: 750;
color: #17445f;
border: 1px solid #c5deea;
border-radius: 8px;
background: #f2fafe;
padding: 12px;
margin-top: 14px;
}
.forkliftPage .aiDraft .ico {
width: 17px;
height: 17px;
color: #0076dd;
}
.forkliftPage .identificationArt {
margin: -18px -18px 16px;
border-bottom: 1px solid #d9e8f1;
background: #f1fafe;
}
.forkliftPage .identificationArt img {
width: 100%;
height: auto;
max-height: 265px;
object-fit: contain;
}
.forkliftPage .pairFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 13px;
}
.forkliftPage .pairFields>div {
padding: 11px 13px;
border: 1px solid #d5e7f0;
border-radius: 9px;
background: #f8fcfe;
min-width: 0;
}
.forkliftPage .pairFields small {
display: block;
font-size: 9px;
color: #607487;
margin-bottom: 4px;
}
.forkliftPage .pairFields strong {
display: block;
font-size: 12px;
line-height: 1.4;
color: #194b66;
}
.forkliftPage .matchCheck {
display: grid;
grid-template-columns: 29px 1fr auto;
gap: 10px;
align-items: center;
padding: 14px;
background: #eaf8f3;
border: 1px solid #bbdccd;
border-radius: 10px;
margin-top: 17px;
}
.forkliftPage .matchCheck>.ico {
width: 27px;
height: 27px;
border-radius: 50%;
background: #fff;
color: #127052;
padding: 5px;
stroke-width: 2.4;
}
.forkliftPage .matchCheck strong {
display: block;
color: #165b45;
font-size: 12px;
}
.forkliftPage .matchCheck small {
display: block;
font-size: 10px;
color: #477e6a;
margin-top: 4px;
}
.forkliftPage .matchCheck time {
font-size: 10px;
color: #32745c;
}
.forkliftPage .moveRule {
display: grid;
grid-template-columns: 39px 1fr auto;
gap: 12px;
border: 1px solid #cde2ec;
background: #f9fcfe;
border-radius: 11px;
padding: 15px;
align-items: center;
min-width: 0;
}
.forkliftPage .moveRule strong {
display: block;
font-size: 13px;
color: #18455f;
line-height: 1.4;
}
.forkliftPage .moveRule small {
display: block;
font-size: 10px;
color: #607487;
margin-top: 4px;
line-height: 1.65;
}
.forkliftPage .moveRule time {
font-size: 10px;
color: #496b80;
}
.forkliftPage .ruleIcon {
width: 37px;
height: 37px;
display: grid;
place-items: center;
background: #e5f6ff;
border: 1px solid #c1e5f6;
border-radius: 10px;
color: #0076dd;
}
.forkliftPage .ruleIcon .ico {
width: 22px;
height: 22px;
}
.forkliftPage .moveRule.confirmed {
background: #f3fbf7;
border-color: #c1decf;
}
.forkliftPage .moveRule.confirmed .ruleIcon {
background: #eaf8f3;
border-color: #badccb;
color: #118a61;
}
.forkliftPage .moveConnector {
height: 26px;
display: flex;
align-items: center;
padding-left: 27px;
color: #91b8ce;
}
.forkliftPage .moveConnector:before {
content: "";
display: block;
height: 26px;
border-left: 2px solid #b3d1e1;
}
.forkliftPage .fleetSummary {
display: grid;
grid-template-columns: 156px 1fr;
gap: 27px;
align-items: center;
padding: 10px 2px 20px;
}
.forkliftPage .fleetDonut {
position: relative;
width: 154px;
height: 154px;
border-radius: 50%;
background: conic-gradient(#007fc5 0 66.6667%,
#ffc928 66.6667% 83.3333%,
#a8bdca 83.3333% 100%);
display: grid;
place-items: center;
}
.forkliftPage .fleetDonut:before {
content: "";
position: absolute;
inset: 22px;
border-radius: 50%;
background: #fff;
}
.forkliftPage .fleetDonut>div {
position: relative;
text-align: center;
}
.forkliftPage .fleetDonut strong {
display: block;
font-size: 37px;
letter-spacing: -0.04em;
color: #133f58;
line-height: 1.05;
}
.forkliftPage .fleetDonut span {
display: block;
font-size: 10px;
color: #607487;
margin-top: 5px;
}
.forkliftPage .fleetLegend {
display: grid;
gap: 14px;
}
.forkliftPage .fleetLegend>div {
display: grid;
grid-template-columns: 9px 1fr auto;
gap: 9px;
align-items: center;
font-size: 12px;
color: #456a82;
}
.forkliftPage .fleetLegend strong {
font-size: 18px;
font-weight: 800;
color: #194d69;
}
.forkliftPage .fleetLegend i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #0076dd;
}
.forkliftPage .fleetLegend .idleDot {
background: #ffc928;
}
.forkliftPage .fleetLegend .serviceDot {
background: #a8bdca;
}
.forkliftPage .reviewAlert {
padding: 16px;
background: #fffaeb;
border: 1px solid #edd89f;
border-left: 4px solid #ffc928;
border-radius: 11px;
margin-bottom: 16px;
}
.forkliftPage .reviewAlertHead {
display: flex;
align-items: center;
gap: 9px;
}
.forkliftPage .reviewAlertHead>.ico {
width: 22px;
height: 22px;
color: #987317;
}
.forkliftPage .reviewAlertHead>strong {
font-size: 13px;
color: #4c452a;
line-height: 1.4;
}
.forkliftPage .reviewAlertHead>.badge {
margin-left: auto;
white-space: nowrap;
}
.forkliftPage .reviewAlert>p {
font-size: 10px;
color: #7d7152;
margin-top: 9px;
}
.forkliftPage .reviewAlert>small {
display: block;
color: #746546;
font-size: 10px;
line-height: 1.7;
}
.forkliftPage .zoneCompare {
display: grid;
grid-template-columns: 1fr 24px 1fr;
align-items: center;
gap: 15px;
margin: 17px 0;
}
.forkliftPage .zoneCompare>div {
background: #fff;
border: 1px solid #e3dabb;
border-radius: 9px;
padding: 12px 15px;
}
.forkliftPage .zoneCompare small {
font-size: 9px;
color: #7d7152;
display: block;
margin-bottom: 5px;
}
.forkliftPage .zoneCompare strong {
font-size: 26px;
color: #163f57;
letter-spacing: -0.03em;
display: block;
line-height: 1.1;
}
.forkliftPage .zoneCompare>.ico {
color: #a88d45;
width: 23px;
}
.forkliftPage .reviewStep {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
color: #355f77;
padding: 12px 2px;
border-bottom: 1px solid #e2ecf2;
}
.forkliftPage .reviewStep>.ico {
width: 20px;
height: 20px;
color: #0076dd;
}
.forkliftPage .reviewStep>span {
margin-left: auto;
font-size: 10px;
color: #607487;
}
.forkliftPage .serviceHeader {
display: grid;
grid-template-columns: 46px 1fr auto;
align-items: center;
gap: 11px;
margin-bottom: 20px;
}
.forkliftPage .serviceVehicle {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: #eaf8ff;
border: 1px solid #d0e8f4;
border-radius: 11px;
color: #0076dd;
}
.forkliftPage .serviceVehicle .ico {
width: 28px;
height: 28px;
}
.forkliftPage .serviceHeader strong {
display: block;
font-size: 16px;
letter-spacing: -0.015em;
color: #18455e;
}
.forkliftPage .serviceHeader small {
display: block;
font-size: 10px;
color: #607487;
margin-top: 4px;
}
.forkliftPage .serviceHeader>.badge {
font-size: 8px;
}
.forkliftPage .meterPair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.forkliftPage .meterPair>div {
background: #f7fbfd;
border: 1px solid #d1e5f0;
border-radius: 10px;
padding: 15px;
}
.forkliftPage .meterPair>div:last-child {
background: #fff9e8;
border-color: #eeddaa;
}
.forkliftPage .meterPair small {
display: block;
font-size: 10px;
color: #607487;
margin-bottom: 8px;
}
.forkliftPage .meterPair strong {
display: block;
font-size: 30px;
color: #174660;
letter-spacing: -0.035em;
line-height: 1.1;
}
.forkliftPage .meterPair em {
font-style: normal;
font-weight: 500;
font-size: 15px;
color: #607487;
letter-spacing: 0;
}
.forkliftPage .meterCaption {
display: flex;
gap: 10px;
justify-content: space-between;
font-size: 9px;
color: #607487;
margin-bottom: 18px;
}
.forkliftPage .meterCaption strong {
font-size: 10px;
color: #7b6118;
}
.forkliftPage .maintenanceTasks {
display: grid;
gap: 9px;
}
.forkliftPage .maintenanceTasks>div {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 10px;
align-items: center;
border: 1px solid #d5e6ef;
border-radius: 9px;
padding: 12px;
}
.forkliftPage .maintenanceTasks .ico {
width: 21px;
height: 21px;
color: #0076dd;
}
.forkliftPage .maintenanceTasks strong {
display: block;
font-size: 11px;
color: #264f67;
line-height: 1.4;
}
.forkliftPage .maintenanceTasks small {
display: block;
font-size: 9px;
color: #607487;
margin-top: 3px;
}
.forkliftPage .maintenanceTasks .badge {
font-size: 8px;
}
.forkliftPage .capabilityMore summary {
min-height: 44px;
}
.forkliftPage .visualInner {
box-shadow: 0 8px 30px rgba(6, 59, 92, 0.045);
}
@media (min-width: 1600px) { }
@media (max-width: 1100px) { .forkliftPage .forkliftStage {
height: 543px;
}
.forkliftPage .forkliftScene {
top: 153px;
left: -38px;
height: 330px;
width: 115%;
}
.forkliftPage .driverPanel {
width: 221px;
top: 57px;
}
.forkliftPage .heroMoveCard {
width: 228px;
padding: 15px;
}
.forkliftPage .stageTag {
max-width: 170px;
font-size: 9px;
}
.forkliftPage .fleetSummary {
grid-template-columns: 139px 1fr;
gap: 19px;
}
.forkliftPage .fleetDonut {
width: 138px;
height: 138px;
}
.forkliftPage .identificationArt {
margin: -15px -15px 15px;
}
.forkliftPage .moveRule {
gap: 9px;
padding: 13px;
grid-template-columns: 35px 1fr auto;
}
.forkliftPage .moveRule strong {
font-size: 12px;
}
.forkliftPage .reviewAlertHead {
gap: 7px;
}
.forkliftPage .reviewAlertHead>strong {
font-size: 12px;
}
.forkliftPage .serviceHeader {
gap: 8px;
grid-template-columns: 40px 1fr auto;
}
.forkliftPage .serviceVehicle {
width: 38px;
height: 38px;
}
.forkliftPage .serviceHeader strong {
font-size: 14px;
}
.forkliftPage .serviceHeader small {
font-size: 9px;
}
.forkliftPage .maintenanceTasks>div {
padding: 10px;
gap: 8px;
}
}
@media (max-width: 960px) { .forkliftPage .forkliftStage {
height: 565px;
}
.forkliftPage .forkliftScene {
top: 103px;
left: -18px;
width: 104%;
height: 439px;
}
.forkliftPage .driverPanel {
width: 237px;
top: 49px;
}
.forkliftPage .heroMoveCard {
width: 268px;
bottom: 0;
left: 0;
}
.forkliftPage .stageTag {
font-size: 10px;
max-width: 208px;
bottom: 12px;
}
.forkliftPage .identificationArt {
margin: -20px -20px 17px;
}
.forkliftPage .identificationArt img {
max-height: 290px;
}
.forkliftPage .fleetSummary {
grid-template-columns: 176px 1fr;
gap: 33px;
padding: 14px 10px 24px;
}
.forkliftPage .fleetDonut {
width: 174px;
height: 174px;
}
.forkliftPage .fleetDonut:before {
inset: 25px;
}
.forkliftPage .fleetLegend>div {
font-size: 13px;
}
.forkliftPage .fleetLegend strong {
font-size: 21px;
}
.forkliftPage .reviewAlertHead>strong {
font-size: 14px;
}
.forkliftPage .serviceHeader {
grid-template-columns: 46px 1fr auto;
gap: 12px;
}
.forkliftPage .serviceVehicle {
width: 44px;
height: 44px;
}
.forkliftPage .serviceHeader strong {
font-size: 17px;
}
.forkliftPage .moveRule {
grid-template-columns: 41px 1fr auto;
padding: 17px;
gap: 13px;
}
.forkliftPage .moveRule strong {
font-size: 14px;
}
.forkliftPage .moveRule small {
font-size: 11px;
}
.forkliftPage .maintenanceTasks strong {
font-size: 12px;
}
.forkliftPage .maintenanceTasks small {
font-size: 10px;
}
.forkliftPage .maintenanceTasks>div {
padding: 14px;
}
}
@media (max-width: 640px) { .forkliftPage .forkliftStage {
height: 513px;
max-width: 418px;
}
.forkliftPage .forkliftScene {
top: 134px;
left: -30px;
width: 116%;
height: 318px;
}
.forkliftPage .stageLabel {
top: 0;
left: 0;
font-size: 9px;
padding: 8px 10px;
}
.forkliftPage .driverPanel {
width: 201px;
top: 49px;
right: 0;
border-radius: 12px;
padding: 0;
}
.forkliftPage .driverHead {
padding: 10px;
}
.forkliftPage .driverHead>span:first-child {
font-size: 10px;
gap: 5px;
}
.forkliftPage .driverHead .ico {
width: 17px;
height: 17px;
}
.forkliftPage .driverHead .badge {
font-size: 7px;
}
.forkliftPage .driverBody {
padding: 12px;
}
.forkliftPage .driverBody>strong {
font-size: 15px;
margin-bottom: 9px;
}
.forkliftPage .driverBody>small {
font-size: 7px;
}
.forkliftPage .driverRoute {
font-size: 8px;
grid-template-columns: 1fr 13px 1fr;
padding: 9px 0;
gap: 5px;
}
.forkliftPage .driverRoute .ico {
width: 13px;
}
.forkliftPage .driverRoute b {
font-size: 9px;
}
.forkliftPage .driverDone {
font-size: 9px;
margin-top: 10px;
}
.forkliftPage .driverFoot {
font-size: 8px;
}
.forkliftPage .heroMoveCard {
width: 190px;
bottom: 0;
padding: 13px;
left: 0;
}
.forkliftPage .stageTag {
max-width: 144px;
font-size: 8px;
bottom: 12px;
right: 0;
padding: 7px 9px;
}
.forkliftPage .workflowNote {
font-size: 11px;
margin-top: 18px;
text-align: left;
}
.forkliftPage .aiDraft {
font-size: 10px;
padding: 10px;
}
.forkliftPage .identificationArt {
margin: -14px -14px 14px;
}
.forkliftPage .identificationArt img {
max-height: 224px;
}
.forkliftPage .pairFields {
gap: 7px;
}
.forkliftPage .pairFields>div {
padding: 10px;
}
.forkliftPage .pairFields small {
font-size: 8px;
}
.forkliftPage .pairFields strong {
font-size: 11px;
}
.forkliftPage .matchCheck {
grid-template-columns: 24px 1fr auto;
gap: 8px;
padding: 11px;
margin-top: 14px;
}
.forkliftPage .matchCheck>.ico {
width: 23px;
height: 23px;
padding: 4px;
}
.forkliftPage .matchCheck strong {
font-size: 10px;
}
.forkliftPage .matchCheck small {
font-size: 9px;
}
.forkliftPage .matchCheck time {
font-size: 9px;
}
.forkliftPage .moveRule {
grid-template-columns: 32px 1fr auto;
padding: 12px 10px;
gap: 8px;
}
.forkliftPage .ruleIcon {
width: 30px;
height: 30px;
border-radius: 8px;
}
.forkliftPage .ruleIcon .ico {
width: 18px;
height: 18px;
}
.forkliftPage .moveRule strong {
font-size: 11px;
}
.forkliftPage .moveRule small {
font-size: 9px;
}
.forkliftPage .moveRule time {
font-size: 8px;
}
.forkliftPage .moveConnector {
height: 22px;
padding-left: 23px;
}
.forkliftPage .moveConnector:before {
height: 22px;
}
.forkliftPage .fleetSummary {
grid-template-columns: 122px 1fr;
gap: 19px;
padding: 10px 0 20px;
}
.forkliftPage .fleetDonut {
width: 122px;
height: 122px;
}
.forkliftPage .fleetDonut:before {
inset: 18px;
}
.forkliftPage .fleetDonut strong {
font-size: 31px;
}
.forkliftPage .fleetDonut span {
font-size: 9px;
}
.forkliftPage .fleetLegend {
gap: 12px;
}
.forkliftPage .fleetLegend>div {
grid-template-columns: 7px 1fr auto;
gap: 7px;
font-size: 10px;
}
.forkliftPage .fleetLegend strong {
font-size: 17px;
}
.forkliftPage .fleetLegend i {
width: 7px;
height: 7px;
}
.forkliftPage .reviewAlert {
padding: 13px 11px;
margin-bottom: 13px;
}
.forkliftPage .reviewAlertHead {
gap: 7px;
flex-wrap: wrap;
}
.forkliftPage .reviewAlertHead>.ico {
width: 18px;
height: 18px;
}
.forkliftPage .reviewAlertHead>strong {
font-size: 11px;
}
.forkliftPage .reviewAlertHead>.badge {
font-size: 7px;
}
.forkliftPage .reviewAlert>p,
.forkliftPage .reviewAlert>small {
font-size: 9px;
}
.forkliftPage .zoneCompare {
gap: 10px;
grid-template-columns: 1fr 19px 1fr;
margin: 14px 0;
}
.forkliftPage .zoneCompare>div {
padding: 11px;
}
.forkliftPage .zoneCompare strong {
font-size: 24px;
}
.forkliftPage .zoneCompare small {
font-size: 8px;
}
.forkliftPage .zoneCompare>.ico {
width: 18px;
}
.forkliftPage .reviewStep {
font-size: 10px;
padding: 11px 0;
}
.forkliftPage .reviewStep>span {
font-size: 9px;
}
.forkliftPage .serviceHeader {
gap: 9px;
grid-template-columns: 35px 1fr;
margin-bottom: 16px;
}
.forkliftPage .serviceVehicle {
width: 34px;
height: 34px;
border-radius: 9px;
}
.forkliftPage .serviceVehicle .ico {
width: 24px;
height: 24px;
}
.forkliftPage .serviceHeader strong {
font-size: 14px;
}
.forkliftPage .serviceHeader small {
font-size: 9px;
}
.forkliftPage .serviceHeader>.badge {
grid-column: 2;
justify-self: start;
margin-top: -1px;
}
.forkliftPage .meterPair {
gap: 9px;
}
.forkliftPage .meterPair>div {
padding: 12px;
}
.forkliftPage .meterPair small {
font-size: 9px;
}
.forkliftPage .meterPair strong {
font-size: 27px;
}
.forkliftPage .meterPair em {
font-size: 13px;
}
.forkliftPage .meterCaption {
font-size: 8px;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.forkliftPage .meterCaption strong {
font-size: 9px;
}
.forkliftPage .maintenanceTasks {
gap: 8px;
}
.forkliftPage .maintenanceTasks>div {
padding: 10px;
grid-template-columns: 19px 1fr auto;
gap: 8px;
}
.forkliftPage .maintenanceTasks .ico {
width: 18px;
height: 18px;
}
.forkliftPage .maintenanceTasks strong {
font-size: 10px;
}
.forkliftPage .maintenanceTasks small {
font-size: 8px;
}
.forkliftPage .maintenanceTasks .badge {
font-size: 7px;
padding: 4px 5px;
}
}
@media (max-width: 359px) { .forkliftPage .forkliftStage {
height: 511px;
}
.forkliftPage .forkliftScene {
top: 173px;
left: -26px;
width: 121%;
height: 268px;
}
.forkliftPage .driverPanel {
width: 191px;
top: 51px;
}
.forkliftPage .heroMoveCard {
width: 175px;
}
.forkliftPage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px;
}
.forkliftPage .identificationArt {
margin: -12px -12px 12px;
}
.forkliftPage .fleetSummary {
grid-template-columns: 105px 1fr;
gap: 13px;
}
.forkliftPage .fleetDonut {
width: 104px;
height: 104px;
}
.forkliftPage .fleetDonut:before {
inset: 15px;
}
.forkliftPage .fleetDonut strong {
font-size: 29px;
}
.forkliftPage .fleetDonut span {
font-size: 8px;
}
.forkliftPage .fleetLegend>div {
font-size: 9px;
gap: 5px;
}
.forkliftPage .maintenanceTasks>div {
grid-template-columns: 18px 1fr;
gap: 7px;
}
.forkliftPage .maintenanceTasks .badge {
grid-column: 2;
justify-self: start;
}
.forkliftPage .matchCheck {
grid-template-columns: 23px 1fr;
}
.forkliftPage .matchCheck time {
grid-column: 2;
}
.forkliftPage .meterPair strong {
font-size: 24px;
}
.forkliftPage .reviewAlertHead>.badge {
margin-left: 25px;
}
} .forkliftPage .moveRule p {
font-size: 11px;
line-height: 1.6;
margin-top: 5px;
color: #607487;
}
@media (max-width: 640px) {
.forkliftPage .moveRule p {
font-size: 9px;
line-height: 1.65;
}
}  .containerPage {
--brand: #00a8f8;
--brand2: #0076dd;
--navy: #063b5c;
--navy2: #0a4e75;
--sky: #eaf8ff;
--sky2: #f5fbff;
--ink: #11283a;
--muted: #607487;
--line: #d9e8f1;
--green: #118a61;
--greenbg: #eaf8f3;
--yellow: #ffc928;
--yellowsoft: #fff7d6;
--black: #0b0b0b;
--black2: #171717;
--red: #e25757;
--purple: #7c67e8;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.09); font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
isolation: isolate;
overflow-wrap: break-word;
font-size: 16px;
}
.containerPage *,
.containerPage *::before,
.containerPage *::after {
box-sizing: border-box;
}
.containerPage :where(h1, h2, h3, p, figure, ul, ol, dl, dd) {
margin: 0;
}
.containerPage a {
color: inherit;
text-decoration: none;
}
.containerPage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px;
}
.containerPage .ico {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle;
}
.containerPage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto;
}
.containerPage section {
padding: 76px 0;
scroll-margin-top: 30px;
}
.containerPage [id] {
scroll-margin-top: 28px;
}
.containerPage h1,
.containerPage h2,
.containerPage h3 {
line-height: 1.12;
letter-spacing: -0.035em;
font-weight: 780;
color: var(--black);
} .containerPage h2 {
font-size: clamp(31px, 3.35vw, 45px);
}
.containerPage h3 {
font-size: 21px;
}
.containerPage p {
color: var(--muted);
}
.containerPage .ey {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 12px;
font-weight: 800;
margin-bottom: 18px;
}
.containerPage .ey .ico {
width: 16px;
height: 16px;
}
.containerPage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
line-height: 1.75;
}
.containerPage .btn {
display: inline-flex;
gap: 12px;
min-height: 49px;
padding: 11px 20px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: background 0.2s ease;
line-height: 1.45;
font-size: 14px;
text-align: center;
}
.containerPage .btn .ico {
width: 18px;
height: 18px;
}
.containerPage .btn.black {
background: var(--black);
color: #fff;
}
.containerPage .btn.black:hover {
background: #292929;
}
.containerPage .btn.yellow {
background: var(--yellow);
color: #000;
}
.containerPage .btn.yellow:hover {
background: #ffda67;
}
.containerPage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy);
}
.containerPage .btn.outline:hover {
background: var(--sky);
}
.containerPage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px;
}
.containerPage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.containerPage .soft {
background: var(--sky2);
}
.containerPage .sectionHead {
max-width: 820px;
margin-bottom: 35px;
}
.containerPage .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.containerPage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px;
}
.containerPage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow);
}
.containerPage .dark h2,
.containerPage .dark h3 {
color: #fff;
}
.containerPage .dark p {
color: #d6d6d6;
}
.containerPage .dark .ey {
background: var(--yellow);
color: var(--black);
}
.containerPage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.containerPage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 99;
background: #fff;
padding: 12px 20px;
color: var(--navy);
}
.containerPage .skipLink:focus {
top: 10px;
} .containerPage .hero {
padding: 30px 0 64px;
background:
radial-gradient(circle at 78% 18%,
rgba(0, 168, 248, 0.18),
transparent 28%),
radial-gradient(circle at 93% 70%,
rgba(255, 201, 40, 0.14),
transparent 20%),
linear-gradient(180deg, #fff, #eff9fe);
overflow: hidden;
}
.containerPage .breadcrumb {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
font-size: 10px;
color: #536c7d;
margin-bottom: 31px;
}
.containerPage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px;
}
.containerPage .breadcrumb .ico {
width: 11px;
height: 11px;
}
.containerPage .heroGrid {
display: grid;
grid-template-columns: 1.25fr 1.04fr;
gap: 38px;
align-items: center;
}
.containerPage .hero h1 span {
color: var(--brand2);
}
.containerPage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px;
}
.containerPage .heroPills span {
padding: 6px 9px;
border: 1px solid #c8e8f7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800;
}
.containerPage .heroVisual {
min-width: 0;
position: relative;
}
.containerPage .containerStage {
position: relative;
height: 560px;
max-width: 610px;
margin: auto;
}
.containerPage .containerScene {
position: absolute;
top: 13px;
left: -15px;
width: 100%;
height: 440px;
object-fit: contain;
}
.containerPage .stageLabel {
position: absolute;
left: 15px;
top: 3px;
background: #fff;
border: 1px solid #c6e5f3;
padding: 10px 13px;
border-radius: 10px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: var(--navy);
font-weight: 750;
}
.containerPage .stageLabel .ico {
width: 18px;
height: 18px;
color: var(--brand2);
}
.containerPage .trackingPanel {
position: absolute;
right: -1px;
top: 85px;
width: 212px;
padding: 7px;
border-radius: 28px;
background: #102435;
border: 1px solid #254a62;
box-shadow: 0 14px 30px rgba(6, 59, 92, 0.14);
}
.containerPage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden;
min-height: 328px;
}
.containerPage .phoneNotch {
height: 20px;
background: #102435;
display: flex;
justify-content: center;
align-items: center;
}
.containerPage .phoneNotch:before {
content: "";
height: 5px;
width: 53px;
border-radius: 9px;
background: #3f5665;
}
.containerPage .phoneHead {
padding: 13px;
background: linear-gradient(135deg, #e8f9ff, #fff5d0);
border-bottom: 1px solid var(--line);
}
.containerPage .phoneHead strong {
font-size: 12px;
display: block;
}
.containerPage .phoneHead small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.containerPage .phoneBody {
padding: 12px;
}
.containerPage .phoneBody>.badge {
font-size: 9px;
}
.containerPage .scanStatus {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px;
}
.containerPage .scanStatus>.ico {
width: 31px;
height: 31px;
color: var(--brand2);
}
.containerPage .scanStatus strong {
font-size: 29px;
line-height: 1;
display: block;
letter-spacing: -0.03em;
}
.containerPage .scanStatus small {
font-size: 9px;
color: var(--muted);
}
.containerPage .phoneLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
border-bottom: 1px solid var(--line);
padding: 9px 0;
}
.containerPage .phoneLine:last-child {
border: 0;
}
.containerPage .phoneAlert {
padding: 9px;
background: var(--yellowsoft);
border: 1px solid #f0dfab;
border-radius: 7px;
font-size: 9px;
margin-top: 12px;
color: #66500f;
}
.containerPage .heroContainerCard {
position: absolute;
left: 3px;
bottom: 2px;
width: 274px;
background: #111820;
border: 1px solid #263d4d;
color: #fff;
border-radius: 15px;
padding: 17px 18px;
}
.containerPage .stockCardHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
margin-bottom: 13px;
color: #d2dfe7;
}
.containerPage .stockCardHead .ico {
width: 18px;
height: 18px;
color: var(--yellow);
}
.containerPage .stockCardMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
}
.containerPage .stockCardMetrics strong {
display: block;
font-size: 27px;
color: #fff;
line-height: 1.15;
letter-spacing: -0.04em;
}
.containerPage .stockCardMetrics span {
font-size: 9px;
color: #b6ccd9;
}
.containerPage .stockCardMetrics>div+div {
border-left: 1px solid #395364;
padding-left: 18px;
}
.containerPage .stageTag {
position: absolute;
right: 8px;
bottom: 8px;
background: var(--yellow);
color: #0b0b0b;
border-radius: 9px;
padding: 8px 10px;
max-width: 208px;
font-size: 10px;
font-weight: 800;
}
.containerPage .stageTag .ico {
width: 15px;
height: 15px;
margin-right: 4px;
}
.containerPage .heroVisual figcaption {
font-size: 10px;
color: #536c7d;
text-align: center;
margin-top: 14px;
}
.containerPage .trust {
padding: 27px 0;
border-bottom: 1px solid var(--line);
background: #fff;
}
.containerPage .trustLabel {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-bottom: 19px;
color: #3d596c;
}
.containerPage .logos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
align-items: center;
}
.containerPage .logo {
height: 60px;
display: grid;
place-items: center;
padding: 8px 10px;
border: 1px solid #e8f0f5;
border-radius: 11px;
background: #fff;
overflow: hidden;
}
.containerPage .clientLogo {
width: 100%;
height: 40px;
object-fit: contain;
display: block;
pointer-events: none;
}
.containerPage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #445e6f;
font-weight: 800;
text-align: center;
line-height: 1.2;
}
.containerPage .quickNav {
display: flex;
justify-content: center;
gap: 6px 25px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: #32617b;
}
.containerPage .quickNav a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #b7dceb;
}
.containerPage .quickNav a:hover {
color: #005f94;
} .containerPage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.containerPage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
position: relative;
overflow: hidden;
}
.containerPage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand);
}
.containerPage .outcome:nth-child(2):before {
background: var(--yellow);
}
.containerPage .outcome:nth-child(3):before {
background: var(--green);
}
.containerPage .outcome:nth-child(4):before {
background: var(--purple);
}
.containerPage .outcome>.ico {
width: 28px;
height: 28px;
color: var(--navy);
margin-bottom: 18px;
}
.containerPage .outcome h3 {
font-size: 20px;
margin-bottom: 10px;
}
.containerPage .outcome p {
font-size: 13px;
line-height: 1.75;
}
.containerPage .workflow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.containerPage .flowStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 18px;
position: relative;
padding: 23px 20px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line);
}
.containerPage .flowNumber {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--yellow);
font-size: 14px;
font-weight: 850;
}
.containerPage .flowStep h3 {
font-size: 19px;
margin-bottom: 9px;
}
.containerPage .flowStep p {
font-size: 13px;
}
.containerPage .flowStep:not(:last-child):after {
content: "\2192";
position: absolute;
right: -20px;
top: 37px;
color: #0076dd;
font-size: 23px;
z-index: 2;
}
.containerPage .workflowSection {
padding-top: 62px;
padding-bottom: 65px;
}
.containerPage .workflowSection .sectionHead {
margin-bottom: 28px;
} .containerPage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.containerPage .feature.reverse .visual {
order: -1;
}
.containerPage .copy>p {
color: var(--muted);
font-size: 16px;
margin-top: 18px;
line-height: 1.8;
}
.containerPage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 16px;
margin-top: 23px;
list-style: none;
padding: 0;
}
.containerPage .fl li {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.65;
align-items: flex-start;
min-width: 0;
}
.containerPage .tick {
display: none;
}
.containerPage .tick .ico {
width: 12px;
height: 12px;
stroke-width: 2.2;
}
.containerPage details.capabilityMore {
margin-top: 21px;
background: none;
border: 0;
padding: 0;
border-radius: 0;
}
.containerPage .capabilityMore summary {
display: inline-flex;
gap: 9px;
align-items: center;
color: #006fa9;
font-size: 13px;
font-weight: 800;
cursor: pointer;
list-style: none;
min-height: 33px;
}
.containerPage .capabilityMore summary::-webkit-details-marker {
display: none;
}
.containerPage .capabilityMore summary::after {
content: "+";
font-size: 20px;
font-weight: 500;
line-height: 1;
}
.containerPage .capabilityMore[open] summary::after {
content: "\2212";
}
.containerPage .capabilityMore .fl {
margin-top: 14px;
}
.containerPage .dark .fl {
color: #e7e7e7;
}
.containerPage .dark .tick {
background: var(--yellow);
color: #000;
}
.containerPage .dark .capabilityMore summary {
color: var(--yellow);
}
.containerPage .visual {
min-width: 0;
position: relative;
}
.containerPage .visualInner {
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%,
rgba(255, 201, 40, 0.15),
transparent 28%),
linear-gradient(145deg, #fff, #eaf8ff);
border: 1px solid #c0e5f5;
box-shadow: var(--shadow);
padding: 24px;
position: relative;
overflow: hidden;
}
.containerPage .visual figcaption {
font-size: 10px;
line-height: 1.65;
text-align: center;
margin-top: 11px;
color: #526c80;
}
.containerPage .appWindow {
background: #fff;
border: 1px solid #c5dde9;
border-radius: 13px;
overflow: hidden;
}
.containerPage .appBar {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 14px;
background: #fff;
border-bottom: 1px solid var(--line);
min-width: 0;
}
.containerPage .appBar strong {
font-size: 11px;
color: #183c53;
}
.containerPage .appMark {
display: grid;
place-items: center;
background: var(--sky);
width: 25px;
height: 25px;
border-radius: 7px;
color: #0076dd;
}
.containerPage .appMark .ico {
width: 15px;
height: 15px;
}
.containerPage .windowDots {
margin-left: auto;
display: flex;
gap: 4px;
}
.containerPage .windowDots i {
width: 4px;
height: 4px;
background: #bccfd9;
border-radius: 50%;
}
.containerPage .appBody {
padding: 18px;
}
.containerPage .appSub {
font-size: 10px;
color: #617a8c;
margin-bottom: 14px;
}
.containerPage .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
padding: 5px 7px;
border-radius: 6px;
background: #eef5f9;
color: #375e75;
vertical-align: middle;
}
.containerPage .badge.green {
background: var(--greenbg);
color: #0b704d;
}
.containerPage .badge.yellow {
background: var(--yellowsoft);
color: #695000;
}
.containerPage .badge.blue {
background: #e4f6ff;
color: #006799;
}
.containerPage .badge.red {
background: #fff0f0;
color: #a23d3d;
}
.containerPage .badge.darkBadge {
background: #203c4f;
color: #e4f3fc;
}
.containerPage .progress {
height: 7px;
background: #e4eef4;
border-radius: 8px;
overflow: hidden;
margin: 14px 0;
}
.containerPage .progress span {
height: 100%;
background: var(--brand2);
display: block;
border-radius: inherit;
}
.containerPage .appHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 14px;
}
.containerPage .appHeading>strong {
font-size: 15px;
line-height: 1.3;
color: #143c55;
}
.containerPage .appHeading small {
font-size: 10px;
color: var(--muted);
display: block;
}
.containerPage .miniTabs {
display: flex;
gap: 17px;
font-size: 10px;
color: #597488;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 17px;
}
.containerPage .miniTabs .active {
color: #006fa9;
font-weight: 800;
position: relative;
}
.containerPage .miniTabs .active:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -11px;
border-bottom: 2px solid #0076dd;
}
.containerPage .lightNote {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #466b81;
background: #f3f9fc;
border: 1px solid #dceaf2;
padding: 10px;
border-radius: 8px;
margin-top: 14px;
}
.containerPage .lightNote .ico {
width: 16px;
height: 16px;
color: #0076dd;
}
.containerPage .inlineNotice {
display: flex;
gap: 9px;
align-items: flex-start;
background: #fff8e0;
border: 1px solid #f1e1af;
border-radius: 9px;
padding: 11px;
font-size: 10px;
line-height: 1.65;
color: #665014;
margin-top: 14px;
}
.containerPage .inlineNotice .ico {
width: 17px;
height: 17px;
color: #8a680f;
margin-top: 1px;
}
.containerPage .subLabel {
font-size: 10px;
font-weight: 800;
color: #456579;
display: block;
margin-bottom: 10px;
} .containerPage .mapLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
color: #4b6e84;
}
.containerPage .binGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.containerPage .bin {
border: 1px solid #c8dee9;
background: #f7fbfd;
border-radius: 8px;
padding: 12px 10px;
min-width: 0;
}
.containerPage .bin.selected {
border: 2px solid #008ccf;
background: #eaf8ff;
padding: 11px 9px;
}
.containerPage .bin strong {
font-size: 11px;
display: block;
color: #17455e;
}
.containerPage .bin small {
font-size: 9px;
color: #58758a;
display: block;
margin-top: 6px;
}
.containerPage .binStock {
display: flex;
gap: 4px;
align-items: flex-end;
height: 23px;
margin-top: 9px;
}
.containerPage .binStock span {
width: 14px;
height: 17px;
background: #a6d9f0;
border: 1px solid #6db4d8;
border-radius: 2px;
position: relative;
}
.containerPage .binStock span:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: white;
top: 4px;
left: 4px;
}
.containerPage .bin.selected .binStock span {
background: #ffc928;
border-color: #d7ae36;
}
.containerPage .stockRecord {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 0 0;
margin-top: 15px;
border-top: 1px solid var(--line);
}
.containerPage .stockRecord>.ico {
width: 37px;
height: 37px;
padding: 7px;
background: #eaf8ff;
border-radius: 9px;
color: #0076dd;
}
.containerPage .stockRecord strong {
font-size: 12px;
display: block;
}
.containerPage .stockRecord small {
font-size: 9px;
color: var(--muted);
display: block;
}
.containerPage .stockRecord>.badge {
margin-left: auto;
}
.containerPage .miniMeta {
display: flex;
gap: 17px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 9px;
color: #587489;
} .containerPage .receivingPicture {
height: 167px;
position: relative;
margin: -18px -18px 16px;
border-bottom: 1px solid var(--line);
background: #f0f9fd;
}
.containerPage .receivingPicture img {
width: 100%;
height: 100%;
object-fit: contain;
}
.containerPage .metricsThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.containerPage .metricBox {
border: 1px solid var(--line);
border-radius: 9px;
padding: 11px;
min-width: 0;
}
.containerPage .metricBox strong {
font-size: 25px;
letter-spacing: -0.04em;
line-height: 1.1;
color: #0d3b55;
display: block;
}
.containerPage .metricBox span {
font-size: 9px;
color: #587487;
display: block;
margin-top: 6px;
}
.containerPage .metricBox.warn {
background: #fff8e2;
border-color: #edddaa;
}
.containerPage .metricBox.warn strong {
color: #80600c;
}
.containerPage .miniTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.containerPage .miniTable :where(th, td) {
text-align: left;
padding: 10px 6px;
border-bottom: 1px solid #e4eef4;
vertical-align: middle;
}
.containerPage .miniTable th {
font-size: 9px;
color: #526f82;
font-weight: 700;
}
.containerPage .miniTable td {
color: #2b5067;
}
.containerPage .miniTable td:first-child {
font-weight: 700;
}
.containerPage .miniTable tr:last-child td {
border-bottom: 0;
}
.containerPage .miniTable small {
display: block;
color: #607a8d;
font-size: 8px;
font-weight: 400;
}
.containerPage .miniTable .badge {
font-size: 8px;
padding: 4px 5px;
}
.containerPage .auditLayout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 13px;
align-items: center;
}
.containerPage .auditDevice {
min-width: 0;
overflow: hidden;
}
.containerPage .auditDevice img {
width: 175%;
max-width: none;
margin-left: -37%;
height: 295px;
object-fit: contain;
}
.containerPage .auditDevice span {
display: block;
text-align: center;
color: #44697e;
font-size: 10px;
font-weight: 700;
}
.containerPage .auditCard {
padding: 19px 15px;
border-radius: 13px;
border: 1px solid #bbd9e9;
background: #fff;
min-width: 0;
}
.containerPage .auditCard h3 {
font-size: 17px;
margin-top: 13px;
}
.containerPage .auditSubtitle {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px;
}
.containerPage .auditCount {
display: block;
font-size: 42px;
letter-spacing: -0.04em;
color: var(--navy);
line-height: 1.1;
margin-top: 17px;
}
.containerPage .auditCount small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted);
}
.containerPage .auditLine {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 10px;
border-bottom: 1px solid #e3eef4;
padding: 9px 0;
}
.containerPage .auditLine:last-child {
border-bottom: 0;
}
.containerPage .auditLine span {
display: flex;
gap: 6px;
align-items: center;
}
.containerPage .miniDot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
background: #0076dd;
}
.containerPage .miniDot.amber {
background: #bc8f11;
}
.containerPage .miniDot.red {
background: #cb5e54;
}
.containerPage .locator {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
background: #fff;
border: 1px solid #cee4ef;
border-radius: 11px;
padding: 14px;
}
.containerPage .locator .ico {
color: #0076dd;
width: 27px;
height: 27px;
}
.containerPage .locator strong {
display: block;
font-size: 11px;
}
.containerPage .locator small {
font-size: 9px;
display: block;
color: var(--muted);
}
.containerPage .signal {
display: flex;
align-items: flex-end;
gap: 3px;
margin-left: auto;
height: 23px;
}
.containerPage .signal i {
width: 4px;
border-radius: 2px;
background: #0076dd;
}
.containerPage .signal i:nth-child(1) {
height: 7px;
}
.containerPage .signal i:nth-child(2) {
height: 11px;
}
.containerPage .signal i:nth-child(3) {
height: 16px;
}
.containerPage .signal i:nth-child(4) {
height: 21px;
}
.containerPage .signal i:nth-child(5) {
height: 23px;
background: #d3e5ef;
} .containerPage .transferRoute {
display: grid;
grid-template-columns: 1fr 49px 1fr;
gap: 9px;
align-items: center;
margin-bottom: 16px;
}
.containerPage .routeStop {
border: 1px solid #cbe0eb;
border-radius: 10px;
padding: 15px 9px;
text-align: center;
background: #f5fafd;
}
.containerPage .routeStop>.ico {
width: 34px;
height: 34px;
color: #0076dd;
margin-bottom: 9px;
}
.containerPage .routeStop strong {
display: block;
font-size: 12px;
}
.containerPage .routeStop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px;
}
.containerPage .routeArrow {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8px;
color: #536e82;
gap: 6px;
}
.containerPage .routeArrow .ico {
width: 25px;
color: #0076dd;
}
.containerPage .timeline {
list-style: none;
padding: 0;
margin-top: 17px;
}
.containerPage .timeline li {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 17px;
position: relative;
font-size: 10px;
}
.containerPage .timeline li:not(:last-child):before {
content: "";
position: absolute;
border-left: 1px solid #bbd4e2;
left: 10px !important;
top: 24px !important;
bottom: 3px;
display: none;
}
.containerPage .timeline:before {
display: none !important;
}
.containerPage .timeline .timelineDot {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--greenbg);
border-radius: 50%;
color: #0b7651;
}
.containerPage .timeline .timelineDot .ico {
width: 13px;
height: 13px;
}
.containerPage .timeline .timelineDot.pending {
color: #83650b;
background: #fff3c9;
}
.containerPage .timeline strong {
font-size: 11px;
display: block;
}
.containerPage .timeline small {
font-size: 9px;
color: var(--muted);
display: block;
}
.containerPage .timeline time {
font-size: 9px;
color: var(--muted);
padding-top: 2px;
}
.containerPage .timeline li:last-child {
padding-bottom: 0;
}
.containerPage .levelChart {
padding: 18px;
border: 1px solid #d6e7f0;
border-radius: 10px;
background: #f7fbfd;
margin-top: 15px;
}
.containerPage .levelLabels {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: #607c8f;
margin-bottom: 13px;
}
.containerPage .stockLevel {
height: 27px;
border-radius: 5px;
background: #e4eff5;
position: relative;
margin-bottom: 10px;
}
.containerPage .stockLevel>span {
display: block;
width: 36%;
height: 100%;
background: var(--yellow);
border-radius: 5px;
}
.containerPage .stockLevel:after {
content: "";
position: absolute;
left: 50%;
top: -5px;
bottom: -5px;
border-left: 2px dashed #174964;
}
.containerPage .stockLevelNote {
font-size: 9px;
color: #385d73;
line-height: 1.6;
}
.containerPage .purchaseRequest {
border: 1px solid #bbd9e9;
border-radius: 11px;
background: #fff;
padding: 15px;
margin-top: 16px;
display: grid;
grid-template-columns: 33px 1fr auto;
gap: 10px;
align-items: center;
}
.containerPage .purchaseRequest>.ico {
color: #0076dd;
background: #eaf8ff;
padding: 7px;
box-sizing: content-box;
width: 19px;
height: 19px;
border-radius: 9px;
}
.containerPage .purchaseRequest strong {
font-size: 11px;
display: block;
}
.containerPage .purchaseRequest small {
font-size: 9px;
color: var(--muted);
display: block;
}
.containerPage .purchaseRequest .qty {
font-size: 24px;
color: var(--navy);
letter-spacing: -0.04em;
}
.containerPage .ownershipSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 17px;
}
.containerPage .ownerCard {
border: 1px solid #cde2ed;
background: #f8fcfe;
border-radius: 10px;
padding: 14px;
}
.containerPage .ownerCard strong {
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.04em;
display: block;
color: var(--navy);
}
.containerPage .ownerCard span {
display: block;
font-size: 9px;
margin-top: 6px;
color: var(--muted);
}
.containerPage .ownerCard.vendor {
background: #fff9e9;
border-color: #f0e0af;
}
.containerPage .exportStrip {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
color: #58788c;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 10px;
flex-wrap: wrap;
}
.containerPage .exportStrip .ico {
width: 14px;
height: 14px;
}
.containerPage .exportStrip span {
margin-left: auto;
}
.containerPage .exportStrip b {
font-weight: 600;
padding: 3px 6px;
background: #f5fafd;
border: 1px solid #d3e6f1;
border-radius: 4px;
} .containerPage .aiGrid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 50px;
align-items: center;
}
.containerPage .aiGrid>.copy>p {
color: #d6d6d6;
}
.containerPage .promptBox {
border: 1px solid #354149;
border-radius: 18px;
background: #111920;
padding: 22px;
min-width: 0;
}
.containerPage .aiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px;
}
.containerPage .aiBrand {
display: flex;
align-items: center;
gap: 9px;
}
.containerPage .aiBrand>.ico {
color: var(--yellow);
width: 26px;
height: 26px;
}
.containerPage .aiBrand strong {
font-size: 16px;
letter-spacing: 0.02em;
}
.containerPage .aiTop>span {
font-size: 9px;
color: #bbccd7;
}
.containerPage .question {
border: 1px solid #344653;
border-radius: 11px 11px 2px 11px;
background: #21303b;
padding: 14px;
margin-left: 33px;
color: #f1f5f8;
font-size: 13px;
}
.containerPage .aiAnswer {
background: #fff;
color: var(--ink);
padding: 19px;
border-radius: 12px;
margin-top: 15px;
}
.containerPage .aiAnswer .answerTitle {
font-size: 14px;
line-height: 1.45;
display: block;
color: #123c55;
margin-bottom: 8px;
}
.containerPage .aiAnswer p {
font-size: 11px;
color: #587387;
line-height: 1.7;
}
.containerPage .aiItem {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid #d6e5ef;
border-radius: 9px;
background: #f8fbfd;
padding: 12px;
margin-top: 13px;
}
.containerPage .aiItem strong {
display: block;
font-size: 12px;
}
.containerPage .aiItem small {
font-size: 9px;
color: #607789;
display: block;
margin-top: 3px;
}
.containerPage .aiItem>.badge {
font-size: 9px;
}
.containerPage .sourceChip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 7px;
border: 1px solid #d1e3ed;
border-radius: 5px;
font-size: 9px;
color: #456c83;
margin-top: 13px;
}
.containerPage .sourceChip .ico {
width: 12px;
height: 12px;
}
.containerPage .aiReview {
font-size: 10px !important;
color: #ccdae4 !important;
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 16px;
}
.containerPage .aiReview .ico {
width: 16px;
height: 16px;
color: var(--yellow);
margin-top: 2px;
}
.containerPage .aiSample {
font-size: 10px;
color: #bdc9d3;
text-align: center;
margin-top: 12px;
}
.containerPage .aiScope {
font-size: 11px !important;
color: #b9c7d0 !important;
border-top: 1px solid #35434e;
padding-top: 16px;
margin-top: 22px !important;
line-height: 1.7 !important;
} .containerPage .cta {
margin-top: 30px;
padding: 24px 27px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center;
}
.containerPage .cta h3 {
font-size: 21px;
}
.containerPage .cta p {
font-size: 13px;
margin-top: 7px;
max-width: 660px;
}
.containerPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.containerPage .ctaSection {
padding: 0 0 64px;
background: var(--sky2);
} .containerPage .connectedGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px;
}
.containerPage .connectedCard {
background: #151515;
border: 1px solid #333;
border-radius: 15px;
padding: 24px;
}
.containerPage .connectedCard>.ico {
color: var(--yellow);
width: 27px;
height: 27px;
margin-bottom: 20px;
}
.containerPage .connectedCard h3 {
font-size: 21px;
margin-bottom: 11px;
color: #fff;
}
.containerPage .connectedCard p {
font-size: 13px;
line-height: 1.8;
color: #cfcfcf;
}
.containerPage .connectedCard a {
display: inline-block;
color: var(--yellow);
font-size: 12px;
font-weight: 750;
margin-top: 15px;
text-decoration: underline;
text-underline-offset: 4px;
}
.containerPage .hardwareGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.containerPage .hardwareCard {
border: 1px solid #cde3ed;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0;
}
.containerPage .hardwareImage {
width: 100%;
height: 195px;
object-fit: contain;
background: #f0f9fd;
border-bottom: 1px solid var(--line);
}
.containerPage .hardwareCopy {
padding: 23px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column;
}
.containerPage .hardwareCopy h3 {
font-size: 21px;
margin: 13px 0 10px;
}
.containerPage .hardwareCopy p {
font-size: 13px;
line-height: 1.75;
}
.containerPage .hardwareCopy .bestFor {
font-size: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
color: #355971;
}
.containerPage .hardwareNote {
font-size: 12px;
line-height: 1.8;
margin-top: 22px;
padding: 18px 21px;
border: 1px solid #cde3ee;
border-left: 4px solid var(--yellow);
border-radius: 11px;
background: #f7fbfd;
}
.containerPage .hardwareNote a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.containerPage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.containerPage .integration {
height: 87px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 10px;
color: #183e56;
min-width: 0;
line-height: 1.3;
}
.containerPage .integration:nth-child(2n) {
border-bottom-color: var(--yellow);
}
.containerPage .integration small {
font-size: 9px;
color: #60788a;
margin-top: 6px;
font-weight: 500;
}
.containerPage .integrationFlow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
align-items: center;
gap: 13px;
background: #0c2333;
padding: 23px;
border-radius: 15px;
margin-top: 23px;
color: #fff;
}
.containerPage .integrationFlow>div {
min-width: 0;
}
.containerPage .integrationFlow strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: #fff;
}
.containerPage .integrationFlow small {
font-size: 10px;
color: #c1d5e2;
display: block;
margin-top: 5px;
}
.containerPage .integrationFlow>.ico {
color: var(--yellow);
width: 26px;
height: 26px;
}
.containerPage .integrationNote {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 19px auto 0 !important;
max-width: 950px;
text-align: center;
}
.containerPage .integrationNote a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.containerPage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 23px;
margin-top: 32px;
}
.containerPage .rolloutStep {
border-top: 1px solid #bad7e8;
padding-top: 19px;
}
.containerPage .rolloutNumber {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
margin-bottom: 17px;
}
.containerPage .rolloutStep h3 {
font-size: 20px;
margin-bottom: 11px;
}
.containerPage .rolloutStep p {
font-size: 13px;
line-height: 1.8;
}
.containerPage .pilotMeasures {
display: flex;
gap: 14px 23px;
align-items: center;
flex-wrap: wrap;
background: #eff8fd;
border: 1px solid #cee4f0;
border-radius: 11px;
padding: 17px 21px;
margin-top: 27px;
font-size: 11px;
color: #40677f;
}
.containerPage .pilotMeasures strong {
font-size: 12px;
color: #173f57;
}
.containerPage .pilotMeasures span {
display: flex;
align-items: center;
gap: 6px;
}
.containerPage .pilotMeasures .ico {
width: 14px;
height: 14px;
} .containerPage .faq {
max-width: 900px;
}
.containerPage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff;
}
.containerPage .faq summary {
font-size: 15px;
font-weight: 800;
cursor: pointer;
color: var(--navy);
line-height: 1.65;
}
.containerPage .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 11px;
line-height: 1.85;
}
.containerPage .faq details p a {
color: #006fa9;
text-decoration: underline;
text-underline-offset: 3px;
}
.containerPage .faq details:last-child {
margin-bottom: 0;
}
.containerPage .final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 43px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.containerPage .final h2 {
color: #fff;
font-size: 39px;
}
.containerPage .final p {
color: #ddd;
margin-top: 15px;
max-width: 720px;
font-size: 16px;
}
.containerPage .final .ctaBtns {
justify-content: center;
}
.containerPage .final .btn.outline {
background: transparent;
border-color: #666;
color: #fff;
}
.containerPage .final .btn.outline:hover {
background: #303030;
}
.containerPage .contactRow {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 23px;
font-size: 12px;
color: #5b7588;
align-items: center;
}
.containerPage .contactRow a {
color: #006fa9;
font-weight: 700;
display: flex;
gap: 7px;
align-items: center;
}
.containerPage .contactRow .ico {
width: 16px;
height: 16px;
}
.containerPage .pageFooter {
padding: 25px 0;
border-top: 1px solid var(--line);
background: #f7fbfd;
}
.containerPage .footerRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 11px;
flex-wrap: wrap;
color: #4e6d80;
}
.containerPage .footerRow strong {
font-size: 16px;
letter-spacing: -0.03em;
color: #163f59;
}
.containerPage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.containerPage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px;
}
@media (min-width: 1600px) { }
@media (max-width: 1100px) {
.containerPage .heroGrid {
gap: 27px;
grid-template-columns: 1fr 1fr;
} .containerPage .containerStage {
height: 540px;
}
.containerPage .trackingPanel {
width: 192px;
top: 91px;
}
.containerPage .heroContainerCard {
width: 228px;
padding: 15px;
}
.containerPage .stageTag {
max-width: 182px;
font-size: 9px;
right: 0;
}
.containerPage .containerScene {
height: 397px;
}
.containerPage .feature,
.containerPage .aiGrid {
gap: 33px;
}
.containerPage .visualInner {
padding: 18px;
}
.containerPage .logos {
gap: 8px;
}
.containerPage .logo {
padding: 8px;
}
.containerPage .outcome {
padding: 23px 19px;
}
.containerPage .hardwareCopy {
padding: 20px;
}
.containerPage .hardwareImage {
height: 172px;
}
.containerPage .flowStep {
grid-template-columns: 37px 1fr;
gap: 12px;
padding: 20px 17px;
}
.containerPage .flowNumber {
width: 34px;
height: 34px;
}
.containerPage .flowStep h3 {
font-size: 18px;
}
.containerPage .fl {
gap: 12px;
}
.containerPage .fl li {
font-size: 12px;
}
.containerPage .appBody {
padding: 15px;
}
.containerPage .receivingPicture {
margin: -15px -15px 15px;
}
.containerPage .auditCard {
padding: 17px 12px;
}
.containerPage .auditDevice img {
height: 270px;
}
.containerPage .auditCount {
font-size: 36px;
}
.containerPage .integration {
font-size: 13px;
}
}
@media (max-width: 960px) {
.containerPage section {
padding: 63px 0;
}
.containerPage .hero {
padding: 25px 0 51px;
}
.containerPage .heroGrid,
.containerPage .feature,
.containerPage .aiGrid,
.containerPage .final {
grid-template-columns: 1fr;
}
.containerPage .heroGrid {
gap: 31px;
}
.containerPage h1 { max-width: 780px;
}
.containerPage .lead {
max-width: 690px;
}
.containerPage .heroVisual {
width: 100%;
max-width: 610px;
margin: auto;
}
.containerPage .containerStage {
height: 560px;
}
.containerPage .containerScene {
height: 440px;
}
.containerPage .trackingPanel {
width: 224px;
top: 78px;
}
.containerPage .heroContainerCard {
width: 279px;
}
.containerPage .stageTag {
max-width: none;
right: 7px;
font-size: 10px;
}
.containerPage .feature.reverse .visual {
order: 0;
}
.containerPage .feature>.visual {
max-width: 650px;
width: 100%;
margin: auto;
}
.containerPage .feature .copy {
max-width: 780px;
}
.containerPage .feature h2 {
max-width: 760px;
font-size: 40px;
}
.containerPage .visualInner {
padding: 26px;
}
.containerPage .fl li {
font-size: 13px;
}
.containerPage .fl {
max-width: 710px;
gap: 14px 20px;
}
.containerPage .feature,
.containerPage .aiGrid {
gap: 32px;
}
.containerPage .appBody {
padding: 20px;
}
.containerPage .receivingPicture {
height: 185px;
margin: -20px -20px 17px;
}
.containerPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.containerPage .outcomes {
grid-template-columns: repeat(2, 1fr);
}
.containerPage .workflow {
gap: 16px;
}
.containerPage .flowStep {
grid-template-columns: 1fr;
padding: 20px;
}
.containerPage .flowStep:not(:last-child):after {
right: -16px;
top: 28px;
}
.containerPage .promptBox {
max-width: 660px;
width: 100%;
margin: auto;
padding: 25px;
}
.containerPage .aiVisual {
max-width: 660px;
width: 100%;
margin: auto;
}
.containerPage .aiScope {
max-width: 760px;
}
.containerPage .auditLayout {
grid-template-columns: 0.85fr 1.15fr;
gap: 20px;
}
.containerPage .auditDevice img {
height: 320px;
}
.containerPage .auditCard {
padding: 22px;
}
.containerPage .auditCount {
font-size: 45px;
}
.containerPage .auditLine {
font-size: 12px;
}
.containerPage .auditSubtitle {
font-size: 10px;
}
.containerPage .auditCard h3 {
font-size: 20px;
}
.containerPage .appBar strong {
font-size: 12px;
}
.containerPage .appHeading>strong {
font-size: 17px;
}
.containerPage .miniTable {
font-size: 11px;
}
.containerPage .miniTable th {
font-size: 10px;
}
.containerPage .bin strong {
font-size: 12px;
}
.containerPage .bin small {
font-size: 10px;
}
.containerPage .cta {
align-items: flex-start;
flex-direction: column;
}
.containerPage .connectedGrid {
gap: 12px;
}
.containerPage .connectedCard {
padding: 21px;
}
.containerPage .connectedCard h3 {
font-size: 19px;
}
.containerPage .hardwareGrid {
grid-template-columns: 1fr;
gap: 18px;
}
.containerPage .hardwareCard {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
}
.containerPage .hardwareImage {
height: 100%;
min-height: 215px;
object-fit: contain;
border-right: 1px solid var(--line);
border-bottom: 0;
}
.containerPage .hardwareCopy {
padding: 24px;
}
.containerPage .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.containerPage .integration {
font-size: 15px;
}
.containerPage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 27px;
}
.containerPage .final .ctaBtns {
flex-direction: row;
}
.containerPage .final {
padding: 35px;
}
.containerPage .final h2 {
max-width: 690px;
}
.containerPage .quickNav {
margin-top: 23px;
}
.containerPage .trust {
padding: 26px 0;
}
.containerPage .hero .breadcrumb {
margin-bottom: 27px;
}
}
@media (max-width: 640px) {
.containerPage {
font-size: 15px;
}
.containerPage .wrap {
width: calc(100% - 32px);
}
.containerPage section {
padding: 52px 0;
}
.containerPage .hero {
padding: 22px 0 39px;
} .containerPage h2,
.containerPage .feature h2 {
font-size: 33px;
line-height: 1.16;
}
.containerPage h3 {
font-size: 20px;
}
.containerPage .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px;
}
.containerPage .ey .ico {
width: 14px;
height: 14px;
}
.containerPage .lead {
font-size: 16px;
margin-top: 18px;
}
.containerPage .actions {
gap: 9px;
margin-top: 23px;
}
.containerPage .actions .btn {
font-size: 12px;
padding: 12px 14px;
gap: 7px;
}
.containerPage .actions .btn .ico {
width: 15px;
height: 15px;
}
.containerPage .heroPills {
gap: 6px;
margin-top: 17px;
}
.containerPage .heroPills span {
font-size: 9px;
padding: 5px 8px;
}
.containerPage .micro {
font-size: 10px;
margin-top: 13px;
}
.containerPage .breadcrumb {
font-size: 8px;
gap: 4px;
margin-bottom: 24px;
}
.containerPage .breadcrumb .ico {
width: 9px;
height: 9px;
}
.containerPage .heroGrid {
gap: 24px;
}
.containerPage .containerStage {
height: 530px;
max-width: 410px;
}
.containerPage .containerScene {
top: 10px;
left: -23px;
width: 110%;
max-width: none;
height: 340px;
}
.containerPage .stageLabel {
top: 0;
left: 0;
padding: 8px 10px;
font-size: 9px;
}
.containerPage .stageLabel .ico {
width: 15px;
height: 15px;
}
.containerPage .trackingPanel {
width: 175px;
top: 65px;
right: -1px;
border-radius: 23px;
padding: 6px;
}
.containerPage .phoneScreen {
min-height: 0;
border-radius: 17px;
}
.containerPage .phoneNotch {
height: 15px;
}
.containerPage .phoneHead {
padding: 10px;
}
.containerPage .phoneHead strong {
font-size: 10px;
}
.containerPage .phoneHead small {
font-size: 8px;
}
.containerPage .phoneBody {
padding: 10px;
}
.containerPage .phoneBody>.badge {
font-size: 8px;
}
.containerPage .scanStatus {
gap: 8px;
margin-top: 12px;
}
.containerPage .scanStatus>.ico {
width: 25px;
height: 25px;
}
.containerPage .scanStatus strong {
font-size: 25px;
}
.containerPage .scanStatus small {
font-size: 8px;
}
.containerPage .phoneLine {
font-size: 9px;
padding: 7px 0;
}
.containerPage .phoneAlert {
font-size: 8px;
padding: 7px;
margin-top: 10px;
}
.containerPage .phoneBody .progress {
margin: 10px 0;
height: 5px;
}
.containerPage .heroContainerCard {
width: 184px;
padding: 13px;
bottom: 10px;
left: 0;
border-radius: 12px;
}
.containerPage .stockCardHead {
font-size: 8px;
margin-bottom: 11px;
}
.containerPage .stockCardHead .ico {
width: 15px;
height: 15px;
}
.containerPage .stockCardMetrics {
gap: 7px;
}
.containerPage .stockCardMetrics strong {
font-size: 24px;
}
.containerPage .stockCardMetrics span {
font-size: 8px;
}
.containerPage .stockCardMetrics>div+div {
padding-left: 12px;
}
.containerPage .stageTag {
right: 0;
bottom: 3px;
font-size: 8px;
max-width: 140px;
line-height: 1.7;
padding: 7px 9px;
}
.containerPage .stageTag .ico {
width: 12px;
height: 12px;
}
.containerPage .heroVisual figcaption {
font-size: 9px;
margin-top: 12px;
}
.containerPage .trustLabel {
font-size: 11px;
padding-inline: 10px;
}
.containerPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.containerPage .logo {
height: 52px;
padding: 6px;
}
.containerPage .clientLogo {
height: 35px;
}
.containerPage .logoFallback {
font-size: 9px;
}
.containerPage .quickNav {
gap: 10px 17px;
font-size: 11px;
justify-content: flex-start;
line-height: 1.4;
margin-top: 24px;
}
.containerPage .outcomes {
gap: 12px;
}
.containerPage .outcome {
padding: 20px 16px;
}
.containerPage .outcome h3 {
font-size: 18px;
line-height: 1.18;
}
.containerPage .outcome p {
font-size: 12px;
line-height: 1.7;
}
.containerPage .outcome>.ico {
width: 25px;
height: 25px;
margin-bottom: 15px;
}
.containerPage .sectionHead {
margin-bottom: 28px;
}
.containerPage .sectionHead p {
font-size: 15px;
margin-top: 15px;
}
.containerPage .workflow {
grid-template-columns: 1fr;
gap: 12px;
}
.containerPage .flowStep {
grid-template-columns: 39px 1fr;
padding: 21px;
gap: 16px;
}
.containerPage .flowStep:not(:last-child):after {
display: none;
}
.containerPage .flowNumber {
width: 37px;
height: 37px;
font-size: 13px;
}
.containerPage .flowStep h3 {
font-size: 19px;
}
.containerPage .flowStep p {
font-size: 13px;
}
.containerPage .copy>p {
font-size: 15px;
line-height: 1.8;
margin-top: 16px;
}
.containerPage .fl {
gap: 13px 12px;
}
.containerPage .fl li {
font-size: 12px;
gap: 7px;
}
.containerPage .tick {
width: 18px;
height: 18px;
flex-basis: 18px;
margin-top: 1px;
}
.containerPage .tick .ico {
width: 10px;
height: 10px;
}
.containerPage .capabilityMore summary {
font-size: 12px;
min-height: 40px;
}
.containerPage .capabilityMore {
margin-top: 18px !important;
}
.containerPage .visualInner {
padding: 15px;
border-radius: 17px;
}
.containerPage .visual figcaption {
font-size: 9px;
margin-top: 9px;
}
.containerPage .feature {
gap: 25px;
}
.containerPage .appBar {
padding: 10px 11px;
gap: 7px;
}
.containerPage .appBar strong {
font-size: 10px;
}
.containerPage .appMark {
width: 23px;
height: 23px;
}
.containerPage .appMark .ico {
width: 13px;
height: 13px;
}
.containerPage .appBody {
padding: 14px;
}
.containerPage .appSub {
font-size: 9px;
margin-bottom: 12px;
}
.containerPage .appHeading {
gap: 7px;
margin-bottom: 12px;
}
.containerPage .appHeading>strong {
font-size: 14px;
}
.containerPage .badge {
font-size: 8px;
padding: 4px 6px;
}
.containerPage .miniTabs {
font-size: 9px;
gap: 14px;
margin-bottom: 14px;
}
.containerPage .mapLabel {
font-size: 9px;
margin-bottom: 10px;
}
.containerPage .binGrid {
gap: 7px;
}
.containerPage .bin {
padding: 10px 7px;
}
.containerPage .bin.selected {
padding: 9px 6px;
}
.containerPage .bin strong {
font-size: 10px;
}
.containerPage .bin small {
font-size: 8px;
}
.containerPage .binStock {
gap: 3px;
height: 20px;
margin-top: 7px;
}
.containerPage .binStock span {
width: 11px;
height: 15px;
}
.containerPage .binStock span:after {
left: 3px;
width: 3px;
height: 3px;
}
.containerPage .stockRecord {
gap: 9px;
flex-wrap: wrap;
}
.containerPage .stockRecord>.ico {
width: 30px;
height: 30px;
padding: 6px;
}
.containerPage .stockRecord strong {
font-size: 10px;
}
.containerPage .stockRecord small {
font-size: 8px;
}
.containerPage .stockRecord>.badge {
font-size: 8px;
}
.containerPage .miniMeta {
gap: 5px 12px;
font-size: 8px;
}
.containerPage .lightNote {
font-size: 9px;
gap: 7px;
padding: 9px;
}
.containerPage .lightNote .ico {
width: 14px;
height: 14px;
}
.containerPage .receivingPicture {
height: 149px;
margin: -14px -14px 14px;
}
.containerPage .metricsThree {
gap: 7px;
}
.containerPage .metricBox {
padding: 10px 8px;
}
.containerPage .metricBox strong {
font-size: 23px;
}
.containerPage .metricBox span {
font-size: 8px;
}
.containerPage .miniTable {
font-size: 9px;
line-height: 1.5;
}
.containerPage .miniTable th {
font-size: 8px;
}
.containerPage .miniTable :where(th, td) {
padding: 9px 4px;
}
.containerPage .miniTable small {
font-size: 8px;
}
.containerPage .miniTable .badge {
font-size: 7px;
padding: 3px 4px;
}
.containerPage .inlineNotice {
font-size: 9px;
padding: 10px;
gap: 7px;
}
.containerPage .inlineNotice .ico {
width: 15px;
height: 15px;
}
.containerPage .auditLayout {
gap: 10px;
grid-template-columns: 0.76fr 1.24fr;
}
.containerPage .auditDevice img {
height: 278px;
width: 195%;
margin-left: -50%;
}
.containerPage .auditDevice span {
font-size: 8px;
}
.containerPage .auditCard {
padding: 17px 12px;
}
.containerPage .auditCard h3 {
font-size: 16px;
margin-top: 12px;
}
.containerPage .auditCount {
font-size: 35px;
margin-top: 15px;
}
.containerPage .auditCount small {
font-size: 10px;
}
.containerPage .auditSubtitle {
font-size: 8px;
}
.containerPage .auditLine {
font-size: 9px;
padding: 8px 0;
}
.containerPage .locator {
gap: 9px;
padding: 12px;
margin-top: 13px;
}
.containerPage .locator>.ico {
width: 23px;
height: 23px;
}
.containerPage .locator strong {
font-size: 10px;
}
.containerPage .locator small {
font-size: 8px;
}
.containerPage .signal {
gap: 2px;
}
.containerPage .signal i {
width: 3px;
}
.containerPage .transferRoute {
grid-template-columns: 1fr 32px 1fr;
gap: 7px;
}
.containerPage .routeStop {
padding: 12px 7px;
}
.containerPage .routeStop>.ico {
width: 29px;
height: 29px;
margin-bottom: 8px;
}
.containerPage .routeStop strong {
font-size: 11px;
}
.containerPage .routeStop small {
font-size: 8px;
}
.containerPage .routeArrow {
font-size: 7px;
}
.containerPage .routeArrow .ico {
width: 20px;
height: 20px;
}
.containerPage .timeline {
margin-top: 15px;
}
.containerPage .timeline li {
gap: 7px;
grid-template-columns: 21px 1fr auto;
}
.containerPage .timeline strong {
font-size: 10px;
}
.containerPage .timeline small,
.containerPage .timeline time {
font-size: 8px;
}
.containerPage .timelineDot {
width: 20px;
height: 20px;
}
.containerPage .levelChart {
padding: 14px;
}
.containerPage .purchaseRequest {
padding: 12px;
gap: 9px;
}
.containerPage .purchaseRequest strong {
font-size: 10px;
}
.containerPage .purchaseRequest small {
font-size: 8px;
}
.containerPage .purchaseRequest .qty {
font-size: 22px;
}
.containerPage .ownerCard {
padding: 12px;
}
.containerPage .ownerCard strong {
font-size: 25px;
}
.containerPage .ownerCard span {
font-size: 8px;
}
.containerPage .exportStrip {
font-size: 8px;
gap: 5px;
}
.containerPage .exportStrip span {
margin-left: 0;
}
.containerPage .promptBox {
padding: 18px;
border-radius: 15px;
}
.containerPage .aiTop {
margin-bottom: 17px;
gap: 8px;
}
.containerPage .aiBrand strong {
font-size: 15px;
}
.containerPage .aiTop>span {
font-size: 8px;
}
.containerPage .aiBrand>.ico {
width: 22px;
height: 22px;
}
.containerPage .question {
font-size: 12px;
padding: 12px;
margin-left: 20px;
}
.containerPage .aiAnswer {
padding: 15px;
}
.containerPage .aiAnswer .answerTitle {
font-size: 13px;
}
.containerPage .aiAnswer p {
font-size: 10px;
}
.containerPage .aiItem {
padding: 11px;
gap: 8px;
}
.containerPage .aiItem strong {
font-size: 11px;
}
.containerPage .aiItem small {
font-size: 8px;
}
.containerPage .sourceChip {
font-size: 8px;
}
.containerPage .aiReview {
font-size: 9px !important;
}
.containerPage .aiSample {
font-size: 9px;
}
.containerPage .aiScope {
font-size: 10px !important;
}
.containerPage .ctaSection {
padding: 0 0 48px;
}
.containerPage .cta {
padding: 22px;
margin-top: 0;
}
.containerPage .cta h3 {
font-size: 21px;
}
.containerPage .cta p {
font-size: 12px;
}
.containerPage .ctaBtns {
width: 100%;
}
.containerPage .ctaBtns .btn {
font-size: 12px;
padding: 12px 14px;
flex: 1;
}
.containerPage .connectedGrid {
grid-template-columns: 1fr;
gap: 12px;
}
.containerPage .connectedCard {
padding: 24px;
}
.containerPage .connectedCard h3 {
font-size: 21px;
}
.containerPage .connectedCard p {
font-size: 13px;
}
.containerPage .connectedCard>.ico {
margin-bottom: 16px;
}
.containerPage .hardwareCard {
display: flex;
}
.containerPage .hardwareImage {
height: 185px;
min-height: 0;
border-bottom: 1px solid var(--line);
border-right: 0;
}
.containerPage .hardwareCopy {
padding: 22px;
}
.containerPage .hardwareCopy h3 {
font-size: 21px;
}
.containerPage .hardwareCopy p {
font-size: 13px;
}
.containerPage .hardwareNote {
font-size: 11px;
padding: 17px;
}
.containerPage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.containerPage .integration {
height: 77px;
font-size: 14px;
}
.containerPage .integration:last-child {
grid-column: 1/-1;
}
.containerPage .integrationFlow {
grid-template-columns: 1fr;
padding: 23px;
gap: 13px;
}
.containerPage .integrationFlow>.ico {
transform: rotate(90deg);
width: 20px;
height: 20px;
margin-left: 7px;
}
.containerPage .integrationFlow strong {
font-size: 14px;
}
.containerPage .integrationFlow small {
font-size: 10px;
}
.containerPage .integrationNote {
text-align: left;
font-size: 11px !important;
}
.containerPage .rolloutGrid {
gap: 25px 20px;
}
.containerPage .rolloutStep h3 {
font-size: 18px;
}
.containerPage .rolloutStep p {
font-size: 12px;
}
.containerPage .pilotMeasures {
gap: 13px;
padding: 18px;
font-size: 10px;
}
.containerPage .pilotMeasures strong {
width: 100%;
}
.containerPage .faq details {
padding: 17px 16px;
margin-bottom: 10px;
}
.containerPage .faq summary {
font-size: 13px;
line-height: 1.6;
}
.containerPage .faq details p {
font-size: 13px;
line-height: 1.85;
}
.containerPage .final {
padding: 29px 24px;
border-radius: 0;
gap: 24px;
}
.containerPage .final h2 {
font-size: 32px;
}
.containerPage .final p {
font-size: 14px;
}
.containerPage .final .ctaBtns {
flex-direction: column;
}
.containerPage .final .btn {
width: 100%;
min-height: 47px;
}
.containerPage .contactRow {
flex-direction: column;
align-items: flex-start;
font-size: 11px;
gap: 12px;
}
.containerPage .footerRow {
align-items: flex-start;
gap: 17px;
}
.containerPage .footerLinks {
gap: 10px 17px;
font-size: 10px;
}
.containerPage .pageFooter {
padding: 23px 0;
}
}
@media (max-width: 359px) { .containerPage .actions {
flex-direction: column;
}
.containerPage .actions .btn {
width: 100%;
}
.containerPage .containerStage {
height: 530px;
}
.containerPage .trackingPanel {
width: 163px;
top: 67px;
}
.containerPage .heroContainerCard {
width: 175px;
}
.containerPage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px;
}
.containerPage .stockCardMetrics strong {
font-size: 22px;
}
.containerPage .stockCardMetrics span {
font-size: 7px;
}
.containerPage .containerScene {
left: -22px;
width: 114%;
top: 18px;
height: 315px;
}
.containerPage .fl {
grid-template-columns: 1fr;
}
.containerPage .outcomes {
grid-template-columns: 1fr;
}
.containerPage .logos {
grid-template-columns: repeat(2, 1fr);
}
.containerPage .logoFallback {
font-size: 11px;
}
.containerPage .visualInner {
padding: 12px;
}
.containerPage .appBody {
padding: 12px;
}
.containerPage .receivingPicture {
margin: -12px -12px 12px;
}
.containerPage .auditCard {
padding: 15px 10px;
}
.containerPage .auditCount {
font-size: 31px;
}
.containerPage .auditCard h3 {
font-size: 14px;
}
.containerPage .auditLayout {
gap: 7px;
}
.containerPage .rolloutGrid {
grid-template-columns: 1fr;
}
.containerPage .miniTable {
font-size: 8px;
}
.containerPage .ownerCard strong {
font-size: 23px;
}
} .containerPage .containerStage {
height: 550px;
max-width: 610px;
}
.containerPage .containerScene {
top: 89px;
left: -28px;
width: 107%;
max-width: none;
height: 397px;
object-fit: contain;
}
.containerPage .stageLabel {
top: 0;
left: 0;
font-size: 10px;
}
.containerPage .trackingPanel {
top: 45px;
right: 0;
width: 232px;
padding: 0;
border-radius: 15px;
border: 1px solid #b7d8e8;
background: #fff;
overflow: hidden;
box-shadow: 0 10px 24px rgba(6, 59, 92, 0.06);
}
.containerPage .trackingHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
padding: 12px;
border-bottom: 1px solid var(--line);
background: #f2fafe;
}
.containerPage .trackingHead strong {
font-size: 11px;
color: #174157;
display: flex;
gap: 6px;
align-items: center;
}
.containerPage .trackingHead .ico {
width: 18px;
height: 18px;
color: #0076dd;
}
.containerPage .trackingHead .badge {
font-size: 8px;
padding: 4px 5px;
}
.containerPage .trackingBody {
padding: 14px;
}
.containerPage .trackingBody>strong {
display: block;
font-size: 21px;
letter-spacing: -0.035em;
color: #153e56;
line-height: 1.3;
}
.containerPage .trackingBody>small {
display: block;
font-size: 9px;
color: #607487;
margin: 3px 0 12px;
}
.containerPage .trackFeed {
display: grid;
grid-template-columns: 24px 1fr;
gap: 8px;
padding: 10px 0;
border-top: 1px solid #e1ecf3;
align-items: center;
}
.containerPage .trackFeed>.ico {
width: 19px;
height: 19px;
color: #0076dd;
}
.containerPage .trackFeed strong {
font-size: 10px;
color: #244e66;
display: block;
}
.containerPage .trackFeed small {
font-size: 8px;
color: #607487;
display: block;
margin-top: 2px;
}
.containerPage .trackingFoot {
background: #fff7d6;
border-top: 1px solid #eedda8;
color: #725818;
padding: 8px 12px;
font-size: 8px;
}
.containerPage .heroContainerCard {
left: 0;
bottom: 0;
width: 264px;
padding: 16px 18px;
}
.containerPage .stageTag {
bottom: 12px;
right: 0;
font-size: 9px;
max-width: 200px;
}
.containerPage .identityPicture {
height: 182px;
background: #f1f9fd;
border-bottom: 1px solid var(--line);
margin: -18px -18px 17px;
}
.containerPage .identityPicture img {
height: 100%;
width: 100%;
object-fit: contain;
}
.containerPage .recordHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 16px;
}
.containerPage .recordHeader strong {
display: block;
color: #17445d;
font-size: 20px;
letter-spacing: -0.025em;
}
.containerPage .recordHeader small {
display: block;
color: #607487;
font-size: 9px;
margin-top: 2px;
}
.containerPage .recordFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.containerPage .recordFields>div {
border: 1px solid #d8e7ef;
border-radius: 9px;
background: #f7fbfd;
padding: 12px;
min-width: 0;
}
.containerPage .recordFields small {
display: block;
color: #607487;
font-size: 9px;
margin-bottom: 4px;
}
.containerPage .recordFields strong {
font-size: 11px;
line-height: 1.45;
color: #214c66;
display: block;
overflow-wrap: anywhere;
}
.containerPage .eventIntro {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 15px;
}
.containerPage .eventIntro strong {
font-size: 16px;
color: #173e56;
}
.containerPage .eventDiagram {
display: grid;
grid-template-columns: 1fr 29px 1fr;
gap: 10px;
align-items: center;
margin: 15px 0;
}
.containerPage .eventDiagram>.ico {
width: 25px;
color: #0076dd;
}
.containerPage .eventStop {
border: 1px solid #c5dfec;
border-radius: 11px;
background: #f2fafe;
padding: 18px 10px;
text-align: center;
}
.containerPage .eventStop>.ico {
width: 38px;
height: 38px;
color: #0076dd;
display: block;
margin: 0 auto 11px;
}
.containerPage .eventStop strong {
display: block;
font-size: 12px;
color: #204d65;
}
.containerPage .eventStop small {
display: block;
font-size: 9px;
color: #607487;
margin-top: 5px;
}
.containerPage .eventStop.received {
background: #f0faf6;
border-color: #bfdfd3;
}
.containerPage .eventStop.received>.ico {
color: #0e7652;
}
.containerPage .timeline .timelineDot {
flex-shrink: 0;
}
.containerPage .routeCanvas {
position: relative;
background: #f2fafe;
border: 1px solid #cbe2ee;
border-radius: 12px;
padding: 19px 14px;
margin-bottom: 16px;
}
.containerPage .routeCaption {
font-size: 9px;
color: #577c93;
letter-spacing: 0.065em;
text-transform: uppercase;
margin-bottom: 22px;
font-weight: 750;
}
.containerPage .routeNodes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
position: relative;
text-align: center;
}
.containerPage .routeNodes:before {
position: absolute;
content: "";
height: 2px;
background: #88bcda;
left: 16%;
right: 16%;
top: 25px;
}
.containerPage .routeNode {
position: relative;
min-width: 0;
}
.containerPage .routeNode>.ico {
background: #fff;
border: 1px solid #aacdde;
border-radius: 50%;
padding: 12px;
width: 50px;
height: 50px;
position: relative;
color: #0076dd;
margin-bottom: 10px;
}
.containerPage .routeNode.active>.ico {
background: #ffc928;
border-color: #d4ad2d;
color: #102d41;
}
.containerPage .routeNode strong {
font-size: 11px;
line-height: 1.4;
color: #19465f;
display: block;
}
.containerPage .routeNode small {
font-size: 9px;
display: block;
color: #58768b;
margin-top: 6px;
}
.containerPage .feedCard {
border: 1px solid #d1e3ec;
border-radius: 10px;
background: #fff;
padding: 13px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 9px;
}
.containerPage .feedCard>div {
display: flex;
align-items: center;
gap: 9px;
}
.containerPage .feedCard .ico {
width: 24px;
height: 24px;
color: #0076dd;
}
.containerPage .feedCard strong {
font-size: 11px;
display: block;
color: #173f57;
}
.containerPage .feedCard small {
font-size: 9px;
color: #607487;
display: block;
margin-top: 3px;
}
.containerPage .feedCard time {
font-size: 11px;
font-weight: 800;
color: #214d66;
white-space: nowrap;
}
.containerPage .miniDisclaimer {
font-size: 9px;
color: #607487;
text-align: center;
line-height: 1.7;
margin-top: 12px;
}
.containerPage .dwellHeadline {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.containerPage .dwellHeadline strong {
display: block;
color: #173f57;
font-size: 18px;
letter-spacing: -0.02em;
}
.containerPage .dwellHeadline small {
font-size: 10px;
color: #607487;
display: block;
margin-top: 4px;
}
.containerPage .dwellCounter {
display: grid;
grid-template-columns: auto 1fr;
gap: 19px;
align-items: center;
margin: 21px 0;
}
.containerPage .clockFace {
width: 100px;
height: 100px;
border-radius: 50%;
border: 9px solid #d8edf8;
border-right-color: #ffc928;
border-bottom-color: #ffc928;
display: grid;
place-items: center;
background: #fff;
}
.containerPage .clockFace>.ico {
width: 43px;
height: 43px;
color: #006fa9;
stroke-width: 1.4;
}
.containerPage .dwellCounter strong {
font-size: 36px;
line-height: 1.1;
color: #153f58;
display: block;
letter-spacing: -0.05em;
}
.containerPage .dwellCounter small {
font-size: 10px;
color: #607487;
display: block;
margin-top: 7px;
}
.containerPage .dwellCounter span {
display: inline-block;
font-size: 10px;
color: #745715;
background: #fff4ce;
border: 1px solid #eddaa4;
border-radius: 5px;
padding: 5px 8px;
margin-top: 11px;
}
.containerPage .dwellScale {
height: 20px;
position: relative;
border-radius: 4px;
background: #e5eef3;
margin: 28px 0 11px;
}
.containerPage .dwellScale .normal {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 66.667%;
background: #72c7ed;
border-radius: 4px 0 0 4px;
}
.containerPage .dwellScale .exceeded {
position: absolute;
left: 66.667%;
top: 0;
height: 100%;
width: 8.333%;
background: #ffc928;
}
.containerPage .dwellScale:after {
position: absolute;
content: "";
left: 66.667%;
top: -8px;
bottom: -8px;
border-left: 2px dashed #325e77;
}
.containerPage .scaleLegend {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 9px;
color: #58788c;
line-height: 1.6;
}
.containerPage .dwellRows {
margin-top: 20px;
border-top: 1px solid var(--line);
}
.containerPage .dwellRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
padding: 11px 0;
font-size: 10px;
border-bottom: 1px solid #e1ecf2;
color: #315d76;
}
.containerPage .dwellRow:last-child {
border: 0;
}
.containerPage .dwellRow strong {
font-size: 11px;
color: #1a485f;
}
.containerPage .sensorHeadline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 11px;
margin-bottom: 16px;
}
.containerPage .sensorHeadline strong {
font-size: 16px;
color: #15425d;
display: block;
}
.containerPage .sensorHeadline small {
font-size: 9px;
color: #607487;
display: block;
margin-top: 3px;
}
.containerPage .tempHero {
border: 1px solid #ecd8a1;
border-left: 4px solid #ffc928;
border-radius: 11px;
background: #fffae8;
padding: 17px;
display: grid;
grid-template-columns: 37px 1fr;
gap: 12px;
align-items: center;
}
.containerPage .tempHero>.ico {
width: 33px;
height: 48px;
color: #957015;
stroke-width: 1.5;
}
.containerPage .tempHero strong {
font-size: 33px;
line-height: 1.1;
display: block;
color: #715415;
letter-spacing: -0.04em;
}
.containerPage .tempHero span {
display: block;
color: #7d6630;
font-size: 10px;
margin-top: 6px;
}
.containerPage .tempHero small {
display: block;
font-size: 9px;
color: #7d6630;
margin-top: 7px;
}
.containerPage .sensorTrend {
position: relative;
height: 103px;
background: #f6fbfe;
border: 1px solid #d5e8f2;
border-radius: 10px;
margin: 14px 0;
padding: 22px 10px 9px;
overflow: hidden;
}
.containerPage .sensorTrend>span {
position: absolute;
top: 8px;
left: 11px;
font-size: 8px;
color: #56788d;
}
.containerPage .sensorTrend svg {
width: 100%;
height: 100%;
display: block;
}
.containerPage .sensorPair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 12px 0 0;
}
.containerPage .sensorPair>div {
border: 1px solid #d4e5ef;
border-radius: 9px;
padding: 12px;
display: flex;
gap: 10px;
align-items: center;
background: #fff;
}
.containerPage .sensorPair .ico {
width: 25px;
height: 25px;
color: #0076dd;
}
.containerPage .sensorPair strong {
font-size: 12px;
color: #234d65;
display: block;
}
.containerPage .sensorPair small {
font-size: 9px;
color: #607487;
display: block;
margin-top: 3px;
}
.containerPage .receiptHeader {
display: flex;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.containerPage .receiptHeader>.ico {
width: 44px;
height: 44px;
background: #eaf8f3;
border-radius: 11px;
padding: 10px;
color: #0a7451;
}
.containerPage .receiptHeader strong {
display: block;
font-size: 19px;
color: #194961;
line-height: 1.35;
}
.containerPage .receiptHeader small {
display: block;
font-size: 10px;
color: #607487;
margin-top: 5px;
}
.containerPage .receiptFiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 17px;
}
.containerPage .receiptFile {
display: flex;
align-items: center;
gap: 9px;
border: 1px solid #d2e6ef;
border-radius: 8px;
background: #f6fafd;
padding: 12px;
font-size: 10px;
color: #365f76;
}
.containerPage .receiptFile .ico {
width: 20px;
height: 20px;
color: #0076dd;
}
.containerPage .arrivalFoot {
border-top: 1px solid #d5e6ef;
padding-top: 13px;
margin-top: 17px;
font-size: 10px;
color: #466b82;
display: flex;
align-items: center;
gap: 7px;
}
.containerPage .arrivalFoot .ico {
width: 16px;
height: 16px;
color: #0076dd;
}
.containerPage .hardwareImage {
height: 207px;
background: #f5fbfe;
}
.containerPage .aiAnswer .sensorNote {
margin-top: 12px;
padding: 10px;
background: #fff8e2;
border: 1px solid #efdeaa;
border-radius: 8px;
font-size: 10px;
color: #715b27;
line-height: 1.65;
}
@media (max-width: 1100px) {
.containerPage .containerScene {
left: -23px;
width: 108%;
height: 355px;
top: 116px;
}
.containerPage .trackingPanel {
width: 211px;
}
.containerPage .heroContainerCard {
width: 220px;
}
.containerPage .stageTag {
max-width: 166px;
}
.containerPage .hardwareImage {
height: 178px;
}
.containerPage .dwellCounter {
gap: 14px;
}
.containerPage .clockFace {
width: 84px;
height: 84px;
}
.containerPage .dwellCounter strong {
font-size: 32px;
}
.containerPage .identityPicture {
margin: -15px -15px 15px;
}
}
@media (max-width: 960px) {
.containerPage .containerStage {
height: 550px;
}
.containerPage .containerScene {
top: 94px;
left: -28px;
width: 107%;
height: 397px;
}
.containerPage .trackingPanel {
width: 239px;
top: 35px;
}
.containerPage .heroContainerCard {
width: 274px;
}
.containerPage .stageTag {
max-width: 200px;
}
.containerPage .identityPicture {
height: 207px;
margin: -20px -20px 17px;
}
.containerPage .hardwareImage {
height: 100%;
min-height: 222px;
}
.containerPage .dwellCounter strong {
font-size: 38px;
}
.containerPage .clockFace {
width: 100px;
height: 100px;
}
}
@media (max-width: 640px) {
.containerPage .containerStage {
height: 495px;
max-width: 410px;
}
.containerPage .containerScene {
top: 124px;
left: -14px;
width: 108%;
height: 300px;
}
.containerPage .stageLabel {
font-size: 8px;
padding: 8px;
gap: 5px;
}
.containerPage .stageLabel .ico {
width: 14px;
height: 14px;
}
.containerPage .trackingPanel {
top: 39px;
right: 0;
width: 177px;
border-radius: 12px;
}
.containerPage .trackingHead {
padding: 9px;
gap: 6px;
}
.containerPage .trackingHead strong {
font-size: 9px;
gap: 5px;
}
.containerPage .trackingHead .ico {
width: 15px;
height: 15px;
}
.containerPage .trackingHead .badge {
font-size: 7px;
padding: 3px 4px;
}
.containerPage .trackingBody {
padding: 11px;
}
.containerPage .trackingBody>strong {
font-size: 18px;
}
.containerPage .trackingBody>small {
font-size: 8px;
margin-bottom: 9px;
}
.containerPage .trackFeed {
grid-template-columns: 18px 1fr;
padding: 8px 0;
gap: 6px;
}
.containerPage .trackFeed>.ico {
width: 16px;
height: 16px;
}
.containerPage .trackFeed strong {
font-size: 9px;
}
.containerPage .trackFeed small {
font-size: 7px;
}
.containerPage .trackingFoot {
font-size: 7px;
padding: 7px 9px;
}
.containerPage .heroContainerCard {
width: 186px;
padding: 13px;
bottom: 3px;
}
.containerPage .stageTag {
max-width: 138px;
font-size: 8px;
bottom: 10px;
}
.containerPage .identityPicture {
height: 158px;
margin: -14px -14px 14px;
}
.containerPage .recordHeader strong {
font-size: 18px;
}
.containerPage .recordFields>div {
padding: 10px;
}
.containerPage .recordFields strong {
font-size: 10px;
}
.containerPage .recordFields small {
font-size: 8px;
}
.containerPage .eventIntro strong {
font-size: 14px;
}
.containerPage .eventDiagram {
grid-template-columns: 1fr 23px 1fr;
gap: 7px;
}
.containerPage .eventStop {
padding: 14px 7px;
}
.containerPage .eventStop>.ico {
width: 31px;
height: 31px;
}
.containerPage .eventStop strong {
font-size: 11px;
}
.containerPage .eventStop small {
font-size: 8px;
}
.containerPage .routeCanvas {
padding: 16px 10px;
}
.containerPage .routeCaption {
font-size: 8px;
}
.containerPage .routeNodes {
gap: 6px;
}
.containerPage .routeNode strong {
font-size: 10px;
}
.containerPage .routeNode small {
font-size: 8px;
}
.containerPage .routeNode>.ico {
width: 43px;
height: 43px;
padding: 10px;
}
.containerPage .routeNodes:before {
top: 21px;
}
.containerPage .feedCard {
padding: 11px;
gap: 7px;
}
.containerPage .feedCard>div {
gap: 7px;
}
.containerPage .feedCard .ico {
width: 21px;
height: 21px;
}
.containerPage .feedCard strong {
font-size: 10px;
}
.containerPage .feedCard small {
font-size: 8px;
}
.containerPage .feedCard time {
font-size: 10px;
}
.containerPage .miniDisclaimer {
font-size: 8px;
}
.containerPage .dwellHeadline strong {
font-size: 16px;
}
.containerPage .dwellHeadline small {
font-size: 9px;
}
.containerPage .dwellCounter {
gap: 14px;
margin: 20px 0;
}
.containerPage .clockFace {
width: 83px;
height: 83px;
border-width: 8px;
}
.containerPage .clockFace>.ico {
width: 36px;
height: 36px;
}
.containerPage .dwellCounter strong {
font-size: 31px;
}
.containerPage .dwellCounter small,
.containerPage .dwellCounter span {
font-size: 9px;
}
.containerPage .dwellRow {
font-size: 9px;
}
.containerPage .dwellRow strong {
font-size: 10px;
}
.containerPage .scaleLegend {
font-size: 8px;
}
.containerPage .sensorHeadline strong {
font-size: 14px;
}
.containerPage .tempHero {
padding: 14px;
gap: 9px;
grid-template-columns: 31px 1fr;
}
.containerPage .tempHero strong {
font-size: 29px;
}
.containerPage .tempHero>.ico {
width: 28px;
height: 42px;
}
.containerPage .tempHero span {
font-size: 9px;
}
.containerPage .tempHero small {
font-size: 8px;
}
.containerPage .sensorPair {
gap: 8px;
}
.containerPage .sensorPair>div {
padding: 10px;
gap: 8px;
}
.containerPage .sensorPair strong {
font-size: 11px;
}
.containerPage .sensorPair small {
font-size: 8px;
}
.containerPage .sensorPair .ico {
width: 21px;
height: 21px;
}
.containerPage .receiptHeader strong {
font-size: 17px;
}
.containerPage .receiptHeader small {
font-size: 9px;
}
.containerPage .receiptHeader>.ico {
width: 39px;
height: 39px;
padding: 9px;
}
.containerPage .receiptFile {
padding: 10px;
font-size: 9px;
gap: 7px;
}
.containerPage .receiptFile .ico {
width: 18px;
height: 18px;
}
.containerPage .arrivalFoot {
font-size: 9px;
}
.containerPage .hardwareImage {
height: 202px;
min-height: 0;
}
.containerPage .aiAnswer .sensorNote {
font-size: 9px;
}
}
@media (max-width: 359px) {
.containerPage .containerStage {
height: 490px;
}
.containerPage .containerScene {
top: 140px;
left: -10px;
width: 108%;
height: 265px;
}
.containerPage .trackingPanel {
width: 170px;
}
.containerPage .heroContainerCard {
width: 176px;
}
.containerPage .stageTag {
max-width: 100px;
font-size: 7px;
}
.containerPage .identityPicture {
margin: -12px -12px 12px;
}
.containerPage .dwellCounter {
gap: 11px;
}
.containerPage .clockFace {
width: 73px;
height: 73px;
}
.containerPage .dwellCounter strong {
font-size: 28px;
}
.containerPage .recordFields>div {
padding: 9px;
}
.containerPage .eventDiagram {
gap: 5px;
}
} .containerPage .scaleLegend {
display: block;
position: relative;
min-height: 28px;
}
.containerPage .scaleLegend span:first-child {
position: absolute;
left: 0;
top: 0;
}
.containerPage .scaleLegend span:nth-child(2) {
position: absolute;
left: 66.667%;
top: 0;
transform: translateX(-50%);
white-space: nowrap;
}
.containerPage .scaleLegend span:last-child {
position: absolute;
right: 0;
top: 0;
}  .rtlsPage {
--brand: #00A8F8;
--brand2: #0076dd;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--black2: #171717;
--red: #E25757;
--purple: #7C67E8;
--shadow: 0 18px 48px rgba(6, 59, 92, .09); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
isolation: isolate;
overflow-wrap: break-word;
font-size: 16px
}
.rtlsPage *,
.rtlsPage *::before,
.rtlsPage *::after {
box-sizing: border-box
}
.rtlsPage :where(h1, h2, h3, p, figure, ul, ol, dl, dd) {
margin: 0
}
.rtlsPage a {
color: inherit;
text-decoration: none
}
.rtlsPage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.rtlsPage .ico {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle
}
.rtlsPage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto
}
.rtlsPage section {
padding: 76px 0;
scroll-margin-top: 30px
}
.rtlsPage [id] {
scroll-margin-top: 28px
}
.rtlsPage h1,
.rtlsPage h2,
.rtlsPage h3 {
line-height: 1.12;
letter-spacing: -.035em;
font-weight: 780;
color: var(--black)
} .rtlsPage h2 {
font-size: clamp(31px, 3.35vw, 45px)
}
.rtlsPage h3 {
font-size: 21px
}
.rtlsPage p {
color: var(--muted)
}
.rtlsPage .ey {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 12px;
font-weight: 800;
margin-bottom: 18px
}
.rtlsPage .ey .ico {
width: 16px;
height: 16px
}
.rtlsPage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
line-height: 1.75
}
.rtlsPage .btn {
display: inline-flex;
gap: 12px;
min-height: 49px;
padding: 11px 20px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: background .2s ease;
line-height: 1.45;
font-size: 14px;
text-align: center
}
.rtlsPage .btn .ico {
width: 18px;
height: 18px
}
.rtlsPage .btn.black {
background: var(--black);
color: #fff
}
.rtlsPage .btn.black:hover {
background: #292929
}
.rtlsPage .btn.yellow {
background: var(--yellow);
color: #000
}
.rtlsPage .btn.yellow:hover {
background: #FFDA67
}
.rtlsPage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.rtlsPage .btn.outline:hover {
background: var(--sky)
}
.rtlsPage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.rtlsPage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.rtlsPage .soft {
background: var(--sky2)
}
.rtlsPage .sectionHead {
max-width: 820px;
margin-bottom: 35px
}
.rtlsPage .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.rtlsPage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.rtlsPage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.rtlsPage .dark h2,
.rtlsPage .dark h3 {
color: #fff
}
.rtlsPage .dark p {
color: #D6D6D6
}
.rtlsPage .dark .ey {
background: var(--yellow);
color: var(--black)
}
.rtlsPage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
.rtlsPage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 99;
background: #fff;
padding: 12px 20px;
color: var(--navy)
}
.rtlsPage .skipLink:focus {
top: 10px
} .rtlsPage .hero {
padding: 30px 0 64px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .18), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .14), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.rtlsPage .breadcrumb {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
font-size: 10px;
color: #536C7D;
margin-bottom: 31px
}
.rtlsPage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px
}
.rtlsPage .breadcrumb .ico {
width: 11px;
height: 11px
}
.rtlsPage .heroGrid {
display: grid;
grid-template-columns: 1.25fr 1.04fr;
gap: 38px;
align-items: center
}
.rtlsPage .hero h1 span {
color: var(--brand2)
}
.rtlsPage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px
}
.rtlsPage .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.rtlsPage .heroVisual {
min-width: 0;
position: relative
}
.rtlsPage .rtlsStage {
position: relative;
height: 560px;
max-width: 610px;
margin: auto
}
.rtlsPage .rtlsScene {
position: absolute;
top: 13px;
left: -15px;
width: 100%;
height: 440px;
object-fit: contain
}
.rtlsPage .stageLabel {
position: absolute;
left: 15px;
top: 3px;
background: #fff;
border: 1px solid #C6E5F3;
padding: 10px 13px;
border-radius: 10px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: var(--navy);
font-weight: 750
}
.rtlsPage .stageLabel .ico {
width: 18px;
height: 18px;
color: var(--brand2)
}
.rtlsPage .locationPanel {
position: absolute;
right: -1px;
top: 85px;
width: 212px;
padding: 7px;
border-radius: 28px;
background: #102435;
border: 1px solid #254A62;
box-shadow: 0 14px 30px rgba(6, 59, 92, .14)
}
.rtlsPage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden;
min-height: 328px
}
.rtlsPage .phoneNotch {
height: 20px;
background: #102435;
display: flex;
justify-content: center;
align-items: center
}
.rtlsPage .phoneNotch:before {
content: "";
height: 5px;
width: 53px;
border-radius: 9px;
background: #3F5665
}
.rtlsPage .phoneHead {
padding: 13px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.rtlsPage .phoneHead strong {
font-size: 12px;
display: block
}
.rtlsPage .phoneHead small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.rtlsPage .phoneBody {
padding: 12px
}
.rtlsPage .phoneBody>.badge {
font-size: 9px
}
.rtlsPage .scanStatus {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px
}
.rtlsPage .scanStatus>.ico {
width: 31px;
height: 31px;
color: var(--brand2)
}
.rtlsPage .scanStatus strong {
font-size: 29px;
line-height: 1;
display: block;
letter-spacing: -.03em
}
.rtlsPage .scanStatus small {
font-size: 9px;
color: var(--muted)
}
.rtlsPage .phoneLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
border-bottom: 1px solid var(--line);
padding: 9px 0
}
.rtlsPage .phoneLine:last-child {
border: 0
}
.rtlsPage .phoneAlert {
padding: 9px;
background: var(--yellowsoft);
border: 1px solid #F0DFAB;
border-radius: 7px;
font-size: 9px;
margin-top: 12px;
color: #66500F
}
.rtlsPage .heroAssetCard {
position: absolute;
left: 3px;
bottom: 2px;
width: 274px;
background: #111820;
border: 1px solid #263D4D;
color: #fff;
border-radius: 15px;
padding: 17px 18px
}
.rtlsPage .stockCardHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
margin-bottom: 13px;
color: #D2DFE7
}
.rtlsPage .stockCardHead .ico {
width: 18px;
height: 18px;
color: var(--yellow)
}
.rtlsPage .stockCardMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px
}
.rtlsPage .stockCardMetrics strong {
display: block;
font-size: 27px;
color: #fff;
line-height: 1.15;
letter-spacing: -.04em
}
.rtlsPage .stockCardMetrics span {
font-size: 9px;
color: #B6CCD9
}
.rtlsPage .stockCardMetrics>div+div {
border-left: 1px solid #395364;
padding-left: 18px
}
.rtlsPage .stageTag {
position: absolute;
right: 8px;
bottom: 8px;
background: var(--yellow);
color: #0B0B0B;
border-radius: 9px;
padding: 8px 10px;
max-width: 208px;
font-size: 10px;
font-weight: 800
}
.rtlsPage .stageTag .ico {
width: 15px;
height: 15px;
margin-right: 4px
}
.rtlsPage .heroVisual figcaption {
font-size: 10px;
color: #536C7D;
text-align: center;
margin-top: 14px
}
.rtlsPage .trust {
padding: 27px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.rtlsPage .trustLabel {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-bottom: 19px;
color: #3D596C
}
.rtlsPage .logos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
align-items: center
}
.rtlsPage .logo {
height: 60px;
display: grid;
place-items: center;
padding: 8px 10px;
border: 1px solid #E8F0F5;
border-radius: 11px;
background: #fff;
overflow: hidden
}
.rtlsPage .clientLogo {
width: 100%;
height: 40px;
object-fit: contain;
display: block;
pointer-events: none
}
.rtlsPage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #445E6F;
font-weight: 800;
text-align: center;
line-height: 1.2
}
.rtlsPage .quickNav {
display: flex;
justify-content: center;
gap: 6px 25px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: #32617B
}
.rtlsPage .quickNav a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #B7DCEB
}
.rtlsPage .quickNav a:hover {
color: #005F94
} .rtlsPage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.rtlsPage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
position: relative;
overflow: hidden
}
.rtlsPage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.rtlsPage .outcome:nth-child(2):before {
background: var(--yellow)
}
.rtlsPage .outcome:nth-child(3):before {
background: var(--green)
}
.rtlsPage .outcome:nth-child(4):before {
background: var(--purple)
}
.rtlsPage .outcome>.ico {
width: 28px;
height: 28px;
color: var(--navy);
margin-bottom: 18px
}
.rtlsPage .outcome h3 {
font-size: 20px;
margin-bottom: 10px
}
.rtlsPage .outcome p {
font-size: 13px;
line-height: 1.75
}
.rtlsPage .workflow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}
.rtlsPage .flowStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 18px;
position: relative;
padding: 23px 20px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line)
}
.rtlsPage .flowNumber {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--yellow);
font-size: 14px;
font-weight: 850
}
.rtlsPage .flowStep h3 {
font-size: 19px;
margin-bottom: 9px
}
.rtlsPage .flowStep p {
font-size: 13px
}
.rtlsPage .flowStep:not(:last-child):after {
content: "\2192";
position: absolute;
right: -20px;
top: 37px;
color: #0076dd;
font-size: 23px;
z-index: 2
}
.rtlsPage .workflowSection {
padding-top: 62px;
padding-bottom: 65px
}
.rtlsPage .workflowSection .sectionHead {
margin-bottom: 28px
} .rtlsPage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.rtlsPage .feature.reverse .visual {
order: -1
}
.rtlsPage .copy>p {
color: var(--muted);
font-size: 16px;
margin-top: 18px;
line-height: 1.8
}
.rtlsPage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 16px;
margin-top: 23px;
list-style: none;
padding: 0
}
.rtlsPage .fl li {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.65;
align-items: flex-start;
min-width: 0
}
.rtlsPage .tick {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--greenbg);
color: #0B7651;
display: grid;
place-items: center;
flex: 0 0 20px;
margin-top: 1px;
display: none !important;
}
.rtlsPage .tick .ico {
width: 12px;
height: 12px;
stroke-width: 2.2
}
.rtlsPage details.capabilityMore {
margin-top: 21px;
background: none;
border: 0;
padding: 0;
border-radius: 0
}
.rtlsPage .capabilityMore summary {
display: inline-flex;
gap: 9px;
align-items: center;
color: #006FA9;
font-size: 13px;
font-weight: 800;
cursor: pointer;
list-style: none;
min-height: 33px
}
.rtlsPage .capabilityMore summary::-webkit-details-marker {
display: none
}
.rtlsPage .capabilityMore summary::after {
content: "+";
font-size: 20px;
font-weight: 500;
line-height: 1
}
.rtlsPage .capabilityMore[open] summary::after {
content: "\2212"
}
.rtlsPage .capabilityMore .fl {
margin-top: 14px
}
.rtlsPage .dark .fl {
color: #E7E7E7
}
.rtlsPage .dark .tick {
background: var(--yellow);
color: #000
}
.rtlsPage .dark .capabilityMore summary {
color: var(--yellow)
}
.rtlsPage .visual {
min-width: 0;
position: relative
}
.rtlsPage .visualInner {
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .15), transparent 28%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 24px;
position: relative;
overflow: hidden
}
.rtlsPage .visual figcaption {
font-size: 10px;
line-height: 1.65;
text-align: center;
margin-top: 11px;
color: #526C80
}
.rtlsPage .appWindow {
background: #fff;
border: 1px solid #C5DDE9;
border-radius: 13px;
overflow: hidden
}
.rtlsPage .appBar {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 14px;
background: #fff;
border-bottom: 1px solid var(--line);
min-width: 0
}
.rtlsPage .appBar strong {
font-size: 11px;
color: #183C53
}
.rtlsPage .appMark {
display: grid;
place-items: center;
background: var(--sky);
width: 25px;
height: 25px;
border-radius: 7px;
color: #007FC5
}
.rtlsPage .appMark .ico {
width: 15px;
height: 15px
}
.rtlsPage .windowDots {
margin-left: auto;
display: flex;
gap: 4px
}
.rtlsPage .windowDots i {
width: 4px;
height: 4px;
background: #BCCFD9;
border-radius: 50%
}
.rtlsPage .appBody {
padding: 18px
}
.rtlsPage .appSub {
font-size: 10px;
color: #617A8C;
margin-bottom: 14px
}
.rtlsPage .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
padding: 5px 7px;
border-radius: 6px;
background: #EEF5F9;
color: #375E75;
vertical-align: middle
}
.rtlsPage .badge.green {
background: var(--greenbg);
color: #0B704D
}
.rtlsPage .badge.yellow {
background: var(--yellowsoft);
color: #695000
}
.rtlsPage .badge.blue {
background: #E4F6FF;
color: #006799
}
.rtlsPage .badge.red {
background: #FFF0F0;
color: #A23D3D
}
.rtlsPage .badge.darkBadge {
background: #203C4F;
color: #E4F3FC
}
.rtlsPage .progress {
height: 7px;
background: #E4EEF4;
border-radius: 8px;
overflow: hidden;
margin: 14px 0
}
.rtlsPage .progress span {
height: 100%;
background: var(--brand2);
display: block;
border-radius: inherit
}
.rtlsPage .appHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 14px
}
.rtlsPage .appHeading>strong {
font-size: 15px;
line-height: 1.3;
color: #143C55
}
.rtlsPage .appHeading small {
font-size: 10px;
color: var(--muted);
display: block
}
.rtlsPage .miniTabs {
display: flex;
gap: 17px;
font-size: 10px;
color: #597488;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 17px
}
.rtlsPage .miniTabs .active {
color: #006FA9;
font-weight: 800;
position: relative
}
.rtlsPage .miniTabs .active:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -11px;
border-bottom: 2px solid #007FC5
}
.rtlsPage .lightNote {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #466B81;
background: #F3F9FC;
border: 1px solid #DCEAF2;
padding: 10px;
border-radius: 8px;
margin-top: 14px
}
.rtlsPage .lightNote .ico {
width: 16px;
height: 16px;
color: #007FC5
}
.rtlsPage .inlineNotice {
display: flex;
gap: 9px;
align-items: flex-start;
background: #FFF8E0;
border: 1px solid #F1E1AF;
border-radius: 9px;
padding: 11px;
font-size: 10px;
line-height: 1.65;
color: #665014;
margin-top: 14px
}
.rtlsPage .inlineNotice .ico {
width: 17px;
height: 17px;
color: #8A680F;
margin-top: 1px
}
.rtlsPage .subLabel {
font-size: 10px;
font-weight: 800;
color: #456579;
display: block;
margin-bottom: 10px
} .rtlsPage .mapLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
color: #4B6E84
}
.rtlsPage .binGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px
}
.rtlsPage .bin {
border: 1px solid #C8DEE9;
background: #F7FBFD;
border-radius: 8px;
padding: 12px 10px;
min-width: 0
}
.rtlsPage .bin.selected {
border: 2px solid #008CCF;
background: #EAF8FF;
padding: 11px 9px
}
.rtlsPage .bin strong {
font-size: 11px;
display: block;
color: #17455E
}
.rtlsPage .bin small {
font-size: 9px;
color: #58758A;
display: block;
margin-top: 6px
}
.rtlsPage .binStock {
display: flex;
gap: 4px;
align-items: flex-end;
height: 23px;
margin-top: 9px
}
.rtlsPage .binStock span {
width: 14px;
height: 17px;
background: #A6D9F0;
border: 1px solid #6DB4D8;
border-radius: 2px;
position: relative
}
.rtlsPage .binStock span:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: white;
top: 4px;
left: 4px
}
.rtlsPage .bin.selected .binStock span {
background: #FFC928;
border-color: #D7AE36
}
.rtlsPage .stockRecord {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 0 0;
margin-top: 15px;
border-top: 1px solid var(--line)
}
.rtlsPage .stockRecord>.ico {
width: 37px;
height: 37px;
padding: 7px;
background: #EAF8FF;
border-radius: 9px;
color: #007FC5
}
.rtlsPage .stockRecord strong {
font-size: 12px;
display: block
}
.rtlsPage .stockRecord small {
font-size: 9px;
color: var(--muted);
display: block
}
.rtlsPage .stockRecord>.badge {
margin-left: auto
}
.rtlsPage .miniMeta {
display: flex;
gap: 17px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 9px;
color: #587489
} .rtlsPage .receivingPicture {
height: 167px;
position: relative;
margin: -18px -18px 16px;
border-bottom: 1px solid var(--line);
background: #F0F9FD
}
.rtlsPage .receivingPicture img {
width: 100%;
height: 100%;
object-fit: contain
}
.rtlsPage .metricsThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px
}
.rtlsPage .metricBox {
border: 1px solid var(--line);
border-radius: 9px;
padding: 11px;
min-width: 0
}
.rtlsPage .metricBox strong {
font-size: 25px;
letter-spacing: -.04em;
line-height: 1.1;
color: #0D3B55;
display: block
}
.rtlsPage .metricBox span {
font-size: 9px;
color: #587487;
display: block;
margin-top: 6px
}
.rtlsPage .metricBox.warn {
background: #FFF8E2;
border-color: #EDDDAA
}
.rtlsPage .metricBox.warn strong {
color: #80600C
}
.rtlsPage .miniTable {
width: 100%;
border-collapse: collapse;
font-size: 10px
}
.rtlsPage .miniTable :where(th, td) {
text-align: left;
padding: 10px 6px;
border-bottom: 1px solid #E4EEF4;
vertical-align: middle
}
.rtlsPage .miniTable th {
font-size: 9px;
color: #526F82;
font-weight: 700
}
.rtlsPage .miniTable td {
color: #2B5067
}
.rtlsPage .miniTable td:first-child {
font-weight: 700
}
.rtlsPage .miniTable tr:last-child td {
border-bottom: 0
}
.rtlsPage .miniTable small {
display: block;
color: #607A8D;
font-size: 8px;
font-weight: 400
}
.rtlsPage .miniTable .badge {
font-size: 8px;
padding: 4px 5px
}
.rtlsPage .auditLayout {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 13px;
align-items: center
}
.rtlsPage .auditDevice {
min-width: 0;
overflow: hidden
}
.rtlsPage .auditDevice img {
width: 175%;
max-width: none;
margin-left: -37%;
height: 295px;
object-fit: contain
}
.rtlsPage .auditDevice span {
display: block;
text-align: center;
color: #44697E;
font-size: 10px;
font-weight: 700
}
.rtlsPage .auditCard {
padding: 19px 15px;
border-radius: 13px;
border: 1px solid #BBD9E9;
background: #fff;
min-width: 0
}
.rtlsPage .auditCard h3 {
font-size: 17px;
margin-top: 13px
}
.rtlsPage .auditSubtitle {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px
}
.rtlsPage .auditCount {
display: block;
font-size: 42px;
letter-spacing: -.04em;
color: var(--navy);
line-height: 1.1;
margin-top: 17px
}
.rtlsPage .auditCount small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted)
}
.rtlsPage .auditLine {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 10px;
border-bottom: 1px solid #E3EEF4;
padding: 9px 0
}
.rtlsPage .auditLine:last-child {
border-bottom: 0
}
.rtlsPage .auditLine span {
display: flex;
gap: 6px;
align-items: center
}
.rtlsPage .miniDot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
background: #007FC5
}
.rtlsPage .miniDot.amber {
background: #BC8F11
}
.rtlsPage .miniDot.red {
background: #CB5E54
}
.rtlsPage .locator {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
background: #fff;
border: 1px solid #CEE4EF;
border-radius: 11px;
padding: 14px
}
.rtlsPage .locator .ico {
color: #0076dd;
width: 27px;
height: 27px
}
.rtlsPage .locator strong {
display: block;
font-size: 11px
}
.rtlsPage .locator small {
font-size: 9px;
display: block;
color: var(--muted)
}
.rtlsPage .signal {
display: flex;
align-items: flex-end;
gap: 3px;
margin-left: auto;
height: 23px
}
.rtlsPage .signal i {
width: 4px;
border-radius: 2px;
background: #007FC5
}
.rtlsPage .signal i:nth-child(1) {
height: 7px
}
.rtlsPage .signal i:nth-child(2) {
height: 11px
}
.rtlsPage .signal i:nth-child(3) {
height: 16px
}
.rtlsPage .signal i:nth-child(4) {
height: 21px
}
.rtlsPage .signal i:nth-child(5) {
height: 23px;
background: #D3E5EF
} .rtlsPage .transferRoute {
display: grid;
grid-template-columns: 1fr 49px 1fr;
gap: 9px;
align-items: center;
margin-bottom: 16px
}
.rtlsPage .routeStop {
border: 1px solid #CBE0EB;
border-radius: 10px;
padding: 15px 9px;
text-align: center;
background: #F5FAFD
}
.rtlsPage .routeStop>.ico {
width: 34px;
height: 34px;
color: #0076dd;
margin-bottom: 9px
}
.rtlsPage .routeStop strong {
display: block;
font-size: 12px
}
.rtlsPage .routeStop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.rtlsPage .routeArrow {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8px;
color: #536E82;
gap: 6px
}
.rtlsPage .routeArrow .ico {
width: 25px;
color: #007FC5
}
.rtlsPage .timeline {
list-style: none;
padding: 0;
margin-top: 17px
}
.rtlsPage .timeline li {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 17px;
position: relative;
font-size: 10px
}
.rtlsPage .timeline li:not(:last-child):before {
content: "";
position: absolute;
border-left: 1px solid #BBD4E2;
left: 10px;
top: 24px;
bottom: 3px;
display: none;
}
.rtlsPage .timeline .timelineDot {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--greenbg);
border-radius: 50%;
color: #0B7651;
}
.rtlsPage .timeline .timelineDot .ico {
width: 13px;
height: 13px
}
.rtlsPage .timeline .timelineDot.pending {
color: #83650B;
background: #FFF3C9
}
.rtlsPage .timeline strong {
font-size: 11px;
display: block
}
.rtlsPage .timeline small {
font-size: 9px;
color: var(--muted);
display: block
}
.rtlsPage .timeline time {
font-size: 9px;
color: var(--muted);
padding-top: 2px
}
.rtlsPage .timeline li:last-child {
padding-bottom: 0
}
.rtlsPage .levelChart {
padding: 18px;
border: 1px solid #D6E7F0;
border-radius: 10px;
background: #F7FBFD;
margin-top: 15px
}
.rtlsPage .levelLabels {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: #607C8F;
margin-bottom: 13px
}
.rtlsPage .stockLevel {
height: 27px;
border-radius: 5px;
background: #E4EFF5;
position: relative;
margin-bottom: 10px
}
.rtlsPage .stockLevel>span {
display: block;
width: 36%;
height: 100%;
background: var(--yellow);
border-radius: 5px
}
.rtlsPage .stockLevel:after {
content: "";
position: absolute;
left: 50%;
top: -5px;
bottom: -5px;
border-left: 2px dashed #174964
}
.rtlsPage .stockLevelNote {
font-size: 9px;
color: #385D73;
line-height: 1.6
}
.rtlsPage .purchaseRequest {
border: 1px solid #BBD9E9;
border-radius: 11px;
background: #fff;
padding: 15px;
margin-top: 16px;
display: grid;
grid-template-columns: 33px 1fr auto;
gap: 10px;
align-items: center
}
.rtlsPage .purchaseRequest>.ico {
color: #0076dd;
background: #EAF8FF;
padding: 7px;
box-sizing: content-box;
width: 19px;
height: 19px;
border-radius: 9px
}
.rtlsPage .purchaseRequest strong {
font-size: 11px;
display: block
}
.rtlsPage .purchaseRequest small {
font-size: 9px;
color: var(--muted);
display: block
}
.rtlsPage .purchaseRequest .qty {
font-size: 24px;
color: var(--navy);
letter-spacing: -.04em
}
.rtlsPage .ownershipSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 17px
}
.rtlsPage .ownerCard {
border: 1px solid #CDE2ED;
background: #F8FCFE;
border-radius: 10px;
padding: 14px
}
.rtlsPage .ownerCard strong {
font-size: 26px;
line-height: 1.1;
letter-spacing: -.04em;
display: block;
color: var(--navy)
}
.rtlsPage .ownerCard span {
display: block;
font-size: 9px;
margin-top: 6px;
color: var(--muted)
}
.rtlsPage .ownerCard.vendor {
background: #FFF9E9;
border-color: #F0E0AF
}
.rtlsPage .exportStrip {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
color: #58788C;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 10px;
flex-wrap: wrap
}
.rtlsPage .exportStrip .ico {
width: 14px;
height: 14px
}
.rtlsPage .exportStrip span {
margin-left: auto
}
.rtlsPage .exportStrip b {
font-weight: 600;
padding: 3px 6px;
background: #F5FAFD;
border: 1px solid #D3E6F1;
border-radius: 4px
} .rtlsPage .aiGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 50px;
align-items: center
}
.rtlsPage .aiGrid>.copy>p {
color: #D6D6D6
}
.rtlsPage .promptBox {
border: 1px solid #354149;
border-radius: 18px;
background: #111920;
padding: 22px;
min-width: 0
}
.rtlsPage .aiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px
}
.rtlsPage .aiBrand {
display: flex;
align-items: center;
gap: 9px
}
.rtlsPage .aiBrand>.ico {
color: var(--yellow);
width: 26px;
height: 26px
}
.rtlsPage .aiBrand strong {
font-size: 16px;
letter-spacing: .02em
}
.rtlsPage .aiTop>span {
font-size: 9px;
color: #BBCCD7
}
.rtlsPage .question {
border: 1px solid #344653;
border-radius: 11px 11px 2px 11px;
background: #21303B;
padding: 14px;
margin-left: 33px;
color: #F1F5F8;
font-size: 13px
}
.rtlsPage .aiAnswer {
background: #fff;
color: var(--ink);
padding: 19px;
border-radius: 12px;
margin-top: 15px
}
.rtlsPage .aiAnswer .answerTitle {
font-size: 14px;
line-height: 1.45;
display: block;
color: #123C55;
margin-bottom: 8px
}
.rtlsPage .aiAnswer p {
font-size: 11px;
color: #587387;
line-height: 1.7
}
.rtlsPage .aiItem {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid #D6E5EF;
border-radius: 9px;
background: #F8FBFD;
padding: 12px;
margin-top: 13px
}
.rtlsPage .aiItem strong {
display: block;
font-size: 12px
}
.rtlsPage .aiItem small {
font-size: 9px;
color: #607789;
display: block;
margin-top: 3px
}
.rtlsPage .aiItem>.badge {
font-size: 9px
}
.rtlsPage .sourceChip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 7px;
border: 1px solid #D1E3ED;
border-radius: 5px;
font-size: 9px;
color: #456C83;
margin-top: 13px
}
.rtlsPage .sourceChip .ico {
width: 12px;
height: 12px
}
.rtlsPage .aiReview {
font-size: 10px !important;
color: #CCDAE4 !important;
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 16px
}
.rtlsPage .aiReview .ico {
width: 16px;
height: 16px;
color: var(--yellow);
margin-top: 2px
}
.rtlsPage .aiSample {
font-size: 10px;
color: #BDC9D3;
text-align: center;
margin-top: 12px
}
.rtlsPage .aiScope {
font-size: 11px !important;
color: #B9C7D0 !important;
border-top: 1px solid #35434E;
padding-top: 16px;
margin-top: 22px !important;
line-height: 1.7 !important
} .rtlsPage .cta {
margin-top: 30px;
padding: 24px 27px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.rtlsPage .cta h3 {
font-size: 21px
}
.rtlsPage .cta p {
font-size: 13px;
margin-top: 7px;
max-width: 660px
}
.rtlsPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.rtlsPage .ctaSection {
padding: 0 0 64px; } .rtlsPage .connectedGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px
}
.rtlsPage .connectedCard {
background: #151515;
border: 1px solid #333;
border-radius: 15px;
padding: 24px
}
.rtlsPage .connectedCard>.ico {
color: var(--yellow);
width: 27px;
height: 27px;
margin-bottom: 20px
}
.rtlsPage .connectedCard h3 {
font-size: 21px;
margin-bottom: 11px;
color: #fff
}
.rtlsPage .connectedCard p {
font-size: 13px;
line-height: 1.8;
color: #CFCFCF
}
.rtlsPage .connectedCard a {
display: inline-block;
color: var(--yellow);
font-size: 12px;
font-weight: 750;
margin-top: 15px;
text-decoration: underline;
text-underline-offset: 4px
}
.rtlsPage .hardwareGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}
.rtlsPage .hardwareCard {
border: 1px solid #CDE3ED;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0
}
.rtlsPage .hardwareImage {
width: 100%;
height: 195px;
object-fit: contain;
background: #F0F9FD;
border-bottom: 1px solid var(--line)
}
.rtlsPage .hardwareCopy {
padding: 23px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column
}
.rtlsPage .hardwareCopy h3 {
font-size: 21px;
margin: 13px 0 10px
}
.rtlsPage .hardwareCopy p {
font-size: 13px;
line-height: 1.75
}
.rtlsPage .hardwareCopy .bestFor {
font-size: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
color: #355971
}
.rtlsPage .hardwareNote {
font-size: 12px;
line-height: 1.8;
margin-top: 22px;
padding: 18px 21px;
border: 1px solid #CDE3EE;
border-left: 4px solid var(--yellow);
border-radius: 11px;
background: #F7FBFD
}
.rtlsPage .hardwareNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.rtlsPage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.rtlsPage .integration {
height: 87px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 10px;
color: #183E56;
min-width: 0;
line-height: 1.3
}
.rtlsPage .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.rtlsPage .integration small {
font-size: 9px;
color: #60788A;
margin-top: 6px;
font-weight: 500
}
.rtlsPage .integrationFlow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
align-items: center;
gap: 13px;
background: #0C2333;
padding: 23px;
border-radius: 15px;
margin-top: 23px;
color: #fff
}
.rtlsPage .integrationFlow>div {
min-width: 0
}
.rtlsPage .integrationFlow strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: #fff
}
.rtlsPage .integrationFlow small {
font-size: 10px;
color: #C1D5E2;
display: block;
margin-top: 5px
}
.rtlsPage .integrationFlow>.ico {
color: var(--yellow);
width: 26px;
height: 26px
}
.rtlsPage .integrationNote {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 19px auto 0 !important;
max-width: 950px;
text-align: center
}
.rtlsPage .integrationNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.rtlsPage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 23px;
margin-top: 32px
}
.rtlsPage .rolloutStep {
border-top: 1px solid #BAD7E8;
padding-top: 19px
}
.rtlsPage .rolloutNumber {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
margin-bottom: 17px
}
.rtlsPage .rolloutStep h3 {
font-size: 20px;
margin-bottom: 11px
}
.rtlsPage .rolloutStep p {
font-size: 13px;
line-height: 1.8
}
.rtlsPage .pilotMeasures {
display: flex;
gap: 14px 23px;
align-items: center;
flex-wrap: wrap;
background: #EFF8FD;
border: 1px solid #CEE4F0;
border-radius: 11px;
padding: 17px 21px;
margin-top: 27px;
font-size: 11px;
color: #40677F
}
.rtlsPage .pilotMeasures strong {
font-size: 12px;
color: #173F57
}
.rtlsPage .pilotMeasures span {
display: flex;
align-items: center;
gap: 6px
}
.rtlsPage .pilotMeasures .ico {
width: 14px;
height: 14px
} .rtlsPage .faq {
max-width: 900px
}
.rtlsPage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.rtlsPage .faq summary {
font-size: 15px;
font-weight: 800;
cursor: pointer;
color: var(--navy);
line-height: 1.65
}
.rtlsPage .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 11px;
line-height: 1.85
}
.rtlsPage .faq details p a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.rtlsPage .faq details:last-child {
margin-bottom: 0
}
.rtlsPage .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 43px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center
}
.rtlsPage .final h2 {
color: #fff;
font-size: 39px
}
.rtlsPage .final p {
color: #DDD;
margin-top: 15px;
max-width: 720px;
font-size: 16px
}
.rtlsPage .final .ctaBtns {
justify-content: center;
}
.rtlsPage .final .btn.outline {
background: transparent;
border-color: #666;
color: #fff
}
.rtlsPage .final .btn.outline:hover {
background: #303030
}
.rtlsPage .contactRow {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 23px;
font-size: 12px;
color: #5B7588;
align-items: center
}
.rtlsPage .contactRow a {
color: #006FA9;
font-weight: 700;
display: flex;
gap: 7px;
align-items: center
}
.rtlsPage .contactRow .ico {
width: 16px;
height: 16px
}
.rtlsPage .pageFooter {
padding: 25px 0;
border-top: 1px solid var(--line);
background: #F7FBFD
}
.rtlsPage .footerRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 11px;
flex-wrap: wrap;
color: #4E6D80
}
.rtlsPage .footerRow strong {
font-size: 16px;
letter-spacing: -.03em;
color: #163F59
}
.rtlsPage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap
}
.rtlsPage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px
}
@media(min-width:1600px) { }
@media(max-width:1100px) {
.rtlsPage .heroGrid {
gap: 27px;
grid-template-columns: 1fr 1fr
} .rtlsPage .rtlsStage {
height: 540px
}
.rtlsPage .locationPanel {
width: 192px;
top: 91px
}
.rtlsPage .heroAssetCard {
width: 228px;
padding: 15px
}
.rtlsPage .stageTag {
max-width: 182px;
font-size: 9px;
right: 0
}
.rtlsPage .rtlsScene {
height: 397px
}
.rtlsPage .feature,
.rtlsPage .aiGrid {
gap: 33px
}
.rtlsPage .visualInner {
padding: 18px
}
.rtlsPage .logos {
gap: 8px
}
.rtlsPage .logo {
padding: 8px
}
.rtlsPage .outcome {
padding: 23px 19px
}
.rtlsPage .hardwareCopy {
padding: 20px
}
.rtlsPage .hardwareImage {
height: 172px
}
.rtlsPage .flowStep {
grid-template-columns: 37px 1fr;
gap: 12px;
padding: 20px 17px
}
.rtlsPage .flowNumber {
width: 34px;
height: 34px
}
.rtlsPage .flowStep h3 {
font-size: 18px
}
.rtlsPage .fl {
gap: 12px
}
.rtlsPage .fl li {
font-size: 12px
}
.rtlsPage .appBody {
padding: 15px
}
.rtlsPage .receivingPicture {
margin: -15px -15px 15px
}
.rtlsPage .auditCard {
padding: 17px 12px
}
.rtlsPage .auditDevice img {
height: 270px
}
.rtlsPage .auditCount {
font-size: 36px
}
.rtlsPage .integration {
font-size: 13px
}
}
@media(max-width:960px) {
.rtlsPage section {
padding: 63px 0
}
.rtlsPage .hero {
padding: 25px 0 51px
}
.rtlsPage .heroGrid,
.rtlsPage .feature,
.rtlsPage .aiGrid,
.rtlsPage .final {
grid-template-columns: 1fr
}
.rtlsPage .heroGrid {
gap: 31px
} .rtlsPage .lead {
max-width: 690px
}
.rtlsPage .heroVisual {
width: 100%;
max-width: 610px;
margin: auto
}
.rtlsPage .rtlsStage {
height: 560px
}
.rtlsPage .rtlsScene {
height: 440px
}
.rtlsPage .locationPanel {
width: 224px;
top: 78px
}
.rtlsPage .heroAssetCard {
width: 279px
}
.rtlsPage .stageTag {
max-width: none;
right: 7px;
font-size: 10px
}
.rtlsPage .feature.reverse .visual {
order: 0
}
.rtlsPage .feature>.visual {
max-width: 650px;
width: 100%;
margin: auto
}
.rtlsPage .feature .copy {
max-width: 780px
}
.rtlsPage .feature h2 {
max-width: 760px;
font-size: 40px
}
.rtlsPage .visualInner {
padding: 26px
}
.rtlsPage .fl li {
font-size: 13px
}
.rtlsPage .fl {
max-width: 710px;
gap: 14px 20px
}
.rtlsPage .feature,
.rtlsPage .aiGrid {
gap: 32px
}
.rtlsPage .appBody {
padding: 20px
}
.rtlsPage .receivingPicture {
height: 185px;
margin: -20px -20px 17px
}
.rtlsPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 12px
}
.rtlsPage .outcomes {
grid-template-columns: repeat(2, 1fr)
}
.rtlsPage .workflow {
gap: 16px
}
.rtlsPage .flowStep {
grid-template-columns: 1fr;
padding: 20px
}
.rtlsPage .flowStep:not(:last-child):after {
right: -16px;
top: 28px
}
.rtlsPage .promptBox {
max-width: 660px;
width: 100%;
margin: auto;
padding: 25px
}
.rtlsPage .aiVisual {
max-width: 660px;
width: 100%;
margin: auto
}
.rtlsPage .aiScope {
max-width: 760px
}
.rtlsPage .auditLayout {
grid-template-columns: .85fr 1.15fr;
gap: 20px
}
.rtlsPage .auditDevice img {
height: 320px
}
.rtlsPage .auditCard {
padding: 22px
}
.rtlsPage .auditCount {
font-size: 45px
}
.rtlsPage .auditLine {
font-size: 12px
}
.rtlsPage .auditSubtitle {
font-size: 10px
}
.rtlsPage .auditCard h3 {
font-size: 20px
}
.rtlsPage .appBar strong {
font-size: 12px
}
.rtlsPage .appHeading>strong {
font-size: 17px
}
.rtlsPage .miniTable {
font-size: 11px
}
.rtlsPage .miniTable th {
font-size: 10px
}
.rtlsPage .bin strong {
font-size: 12px
}
.rtlsPage .bin small {
font-size: 10px
}
.rtlsPage .cta {
align-items: flex-start;
flex-direction: column
}
.rtlsPage .connectedGrid {
gap: 12px
}
.rtlsPage .connectedCard {
padding: 21px
}
.rtlsPage .connectedCard h3 {
font-size: 19px
}
.rtlsPage .hardwareGrid {
grid-template-columns: 1fr;
gap: 18px
}
.rtlsPage .hardwareCard {
display: grid;
grid-template-columns: .85fr 1.15fr
}
.rtlsPage .hardwareImage {
height: 100%;
min-height: 215px;
object-fit: contain;
border-right: 1px solid var(--line);
border-bottom: 0
}
.rtlsPage .hardwareCopy {
padding: 24px
}
.rtlsPage .integrationGrid {
grid-template-columns: repeat(3, 1fr)
}
.rtlsPage .integration {
font-size: 15px
}
.rtlsPage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 27px
}
.rtlsPage .final .ctaBtns {
flex-direction: row
}
.rtlsPage .final {
padding: 35px
}
.rtlsPage .final h2 {
max-width: 690px
}
.rtlsPage .quickNav {
margin-top: 23px
}
.rtlsPage .trust {
padding: 26px 0
}
.rtlsPage .hero .breadcrumb {
margin-bottom: 27px
}
}
@media(max-width:640px) {
.rtlsPage {
font-size: 15px
}
.rtlsPage .wrap {
width: calc(100% - 32px)
}
.rtlsPage section {
padding: 52px 0
}
.rtlsPage .hero {
padding: 22px 0 39px
} .rtlsPage h2,
.rtlsPage .feature h2 {
font-size: 33px;
line-height: 1.16
}
.rtlsPage h3 {
font-size: 20px
}
.rtlsPage .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.rtlsPage .ey .ico {
width: 14px;
height: 14px
}
.rtlsPage .lead {
font-size: 16px;
margin-top: 18px
}
.rtlsPage .actions {
gap: 9px;
margin-top: 23px
}
.rtlsPage .actions .btn {
font-size: 12px;
padding: 12px 14px;
gap: 7px
}
.rtlsPage .actions .btn .ico {
width: 15px;
height: 15px
}
.rtlsPage .heroPills {
gap: 6px;
margin-top: 17px
}
.rtlsPage .heroPills span {
font-size: 9px;
padding: 5px 8px
}
.rtlsPage .micro {
font-size: 10px;
margin-top: 13px
}
.rtlsPage .breadcrumb {
font-size: 8px;
gap: 4px;
margin-bottom: 24px
}
.rtlsPage .breadcrumb .ico {
width: 9px;
height: 9px
}
.rtlsPage .heroGrid {
gap: 24px
}
.rtlsPage .rtlsStage {
height: 530px;
max-width: 410px
}
.rtlsPage .rtlsScene {
top: 10px;
left: -23px;
width: 110%;
max-width: none;
height: 340px
}
.rtlsPage .stageLabel {
top: 0;
left: 0;
padding: 8px 10px;
font-size: 9px
}
.rtlsPage .stageLabel .ico {
width: 15px;
height: 15px
}
.rtlsPage .locationPanel {
width: 175px;
top: 65px;
right: -1px;
border-radius: 23px;
padding: 6px
}
.rtlsPage .phoneScreen {
min-height: 0;
border-radius: 17px
}
.rtlsPage .phoneNotch {
height: 15px
}
.rtlsPage .phoneHead {
padding: 10px
}
.rtlsPage .phoneHead strong {
font-size: 10px
}
.rtlsPage .phoneHead small {
font-size: 8px
}
.rtlsPage .phoneBody {
padding: 10px
}
.rtlsPage .phoneBody>.badge {
font-size: 8px
}
.rtlsPage .scanStatus {
gap: 8px;
margin-top: 12px
}
.rtlsPage .scanStatus>.ico {
width: 25px;
height: 25px
}
.rtlsPage .scanStatus strong {
font-size: 25px
}
.rtlsPage .scanStatus small {
font-size: 8px
}
.rtlsPage .phoneLine {
font-size: 9px;
padding: 7px 0
}
.rtlsPage .phoneAlert {
font-size: 8px;
padding: 7px;
margin-top: 10px
}
.rtlsPage .phoneBody .progress {
margin: 10px 0;
height: 5px
}
.rtlsPage .heroAssetCard {
width: 184px;
padding: 13px;
bottom: 10px;
left: 0;
border-radius: 12px
}
.rtlsPage .stockCardHead {
font-size: 8px;
margin-bottom: 11px
}
.rtlsPage .stockCardHead .ico {
width: 15px;
height: 15px
}
.rtlsPage .stockCardMetrics {
gap: 7px
}
.rtlsPage .stockCardMetrics strong {
font-size: 24px
}
.rtlsPage .stockCardMetrics span {
font-size: 8px
}
.rtlsPage .stockCardMetrics>div+div {
padding-left: 12px
}
.rtlsPage .stageTag {
right: 0;
bottom: 3px;
font-size: 8px;
max-width: 140px;
line-height: 1.7;
padding: 7px 9px
}
.rtlsPage .stageTag .ico {
width: 12px;
height: 12px
}
.rtlsPage .heroVisual figcaption {
font-size: 9px;
margin-top: 12px
}
.rtlsPage .trustLabel {
font-size: 11px;
padding-inline: 10px
}
.rtlsPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 8px
}
.rtlsPage .logo {
height: 52px;
padding: 6px
}
.rtlsPage .clientLogo {
height: 35px
}
.rtlsPage .logoFallback {
font-size: 9px
}
.rtlsPage .quickNav {
gap: 10px 17px;
font-size: 11px;
justify-content: flex-start;
line-height: 1.4;
margin-top: 24px
}
.rtlsPage .outcomes {
gap: 12px
}
.rtlsPage .outcome {
padding: 20px 16px
}
.rtlsPage .outcome h3 {
font-size: 18px;
line-height: 1.18
}
.rtlsPage .outcome p {
font-size: 12px;
line-height: 1.7
}
.rtlsPage .outcome>.ico {
width: 25px;
height: 25px;
margin-bottom: 15px
}
.rtlsPage .sectionHead {
margin-bottom: 28px
}
.rtlsPage .sectionHead p {
font-size: 15px;
margin-top: 15px
}
.rtlsPage .workflow {
grid-template-columns: 1fr;
gap: 12px
}
.rtlsPage .flowStep {
grid-template-columns: 39px 1fr;
padding: 21px;
gap: 16px
}
.rtlsPage .flowStep:not(:last-child):after {
display: none
}
.rtlsPage .flowNumber {
width: 37px;
height: 37px;
font-size: 13px
}
.rtlsPage .flowStep h3 {
font-size: 19px
}
.rtlsPage .flowStep p {
font-size: 13px
}
.rtlsPage .copy>p {
font-size: 15px;
line-height: 1.8;
margin-top: 16px
}
.rtlsPage .fl {
gap: 13px 12px
}
.rtlsPage .fl li {
font-size: 12px;
gap: 7px
}
.rtlsPage .tick {
width: 18px;
height: 18px;
flex-basis: 18px;
margin-top: 1px
}
.rtlsPage .tick .ico {
width: 10px;
height: 10px
}
.rtlsPage .capabilityMore summary {
font-size: 12px;
min-height: 40px
}
.rtlsPage .capabilityMore {
margin-top: 18px !important
}
.rtlsPage .visualInner {
padding: 15px;
border-radius: 17px
}
.rtlsPage .visual figcaption {
font-size: 9px;
margin-top: 9px
}
.rtlsPage .feature {
gap: 25px
}
.rtlsPage .appBar {
padding: 10px 11px;
gap: 7px
}
.rtlsPage .appBar strong {
font-size: 10px
}
.rtlsPage .appMark {
width: 23px;
height: 23px
}
.rtlsPage .appMark .ico {
width: 13px;
height: 13px
}
.rtlsPage .appBody {
padding: 14px
}
.rtlsPage .appSub {
font-size: 9px;
margin-bottom: 12px
}
.rtlsPage .appHeading {
gap: 7px;
margin-bottom: 12px
}
.rtlsPage .appHeading>strong {
font-size: 14px
}
.rtlsPage .badge {
font-size: 8px;
padding: 4px 6px
}
.rtlsPage .miniTabs {
font-size: 9px;
gap: 14px;
margin-bottom: 14px
}
.rtlsPage .mapLabel {
font-size: 9px;
margin-bottom: 10px
}
.rtlsPage .binGrid {
gap: 7px
}
.rtlsPage .bin {
padding: 10px 7px
}
.rtlsPage .bin.selected {
padding: 9px 6px
}
.rtlsPage .bin strong {
font-size: 10px
}
.rtlsPage .bin small {
font-size: 8px
}
.rtlsPage .binStock {
gap: 3px;
height: 20px;
margin-top: 7px
}
.rtlsPage .binStock span {
width: 11px;
height: 15px
}
.rtlsPage .binStock span:after {
left: 3px;
width: 3px;
height: 3px
}
.rtlsPage .stockRecord {
gap: 9px;
flex-wrap: wrap
}
.rtlsPage .stockRecord>.ico {
width: 30px;
height: 30px;
padding: 6px
}
.rtlsPage .stockRecord strong {
font-size: 10px
}
.rtlsPage .stockRecord small {
font-size: 8px
}
.rtlsPage .stockRecord>.badge {
font-size: 8px
}
.rtlsPage .miniMeta {
gap: 5px 12px;
font-size: 8px
}
.rtlsPage .lightNote {
font-size: 9px;
gap: 7px;
padding: 9px
}
.rtlsPage .lightNote .ico {
width: 14px;
height: 14px
}
.rtlsPage .receivingPicture {
height: 149px;
margin: -14px -14px 14px
}
.rtlsPage .metricsThree {
gap: 7px
}
.rtlsPage .metricBox {
padding: 10px 8px
}
.rtlsPage .metricBox strong {
font-size: 23px
}
.rtlsPage .metricBox span {
font-size: 8px
}
.rtlsPage .miniTable {
font-size: 9px;
line-height: 1.5
}
.rtlsPage .miniTable th {
font-size: 8px
}
.rtlsPage .miniTable :where(th, td) {
padding: 9px 4px
}
.rtlsPage .miniTable small {
font-size: 8px
}
.rtlsPage .miniTable .badge {
font-size: 7px;
padding: 3px 4px
}
.rtlsPage .inlineNotice {
font-size: 9px;
padding: 10px;
gap: 7px
}
.rtlsPage .inlineNotice .ico {
width: 15px;
height: 15px
}
.rtlsPage .auditLayout {
gap: 10px;
grid-template-columns: .76fr 1.24fr
}
.rtlsPage .auditDevice img {
height: 278px;
width: 195%;
margin-left: -50%
}
.rtlsPage .auditDevice span {
font-size: 8px
}
.rtlsPage .auditCard {
padding: 17px 12px
}
.rtlsPage .auditCard h3 {
font-size: 16px;
margin-top: 12px
}
.rtlsPage .auditCount {
font-size: 35px;
margin-top: 15px
}
.rtlsPage .auditCount small {
font-size: 10px
}
.rtlsPage .auditSubtitle {
font-size: 8px
}
.rtlsPage .auditLine {
font-size: 9px;
padding: 8px 0
}
.rtlsPage .locator {
gap: 9px;
padding: 12px;
margin-top: 13px
}
.rtlsPage .locator>.ico {
width: 23px;
height: 23px
}
.rtlsPage .locator strong {
font-size: 10px
}
.rtlsPage .locator small {
font-size: 8px
}
.rtlsPage .signal {
gap: 2px
}
.rtlsPage .signal i {
width: 3px
}
.rtlsPage .transferRoute {
grid-template-columns: 1fr 32px 1fr;
gap: 7px
}
.rtlsPage .routeStop {
padding: 12px 7px
}
.rtlsPage .routeStop>.ico {
width: 29px;
height: 29px;
margin-bottom: 8px
}
.rtlsPage .routeStop strong {
font-size: 11px
}
.rtlsPage .routeStop small {
font-size: 8px
}
.rtlsPage .routeArrow {
font-size: 7px
}
.rtlsPage .routeArrow .ico {
width: 20px;
height: 20px
}
.rtlsPage .timeline {
margin-top: 15px
}
.rtlsPage .timeline li {
gap: 7px;
grid-template-columns: 21px 1fr auto
}
.rtlsPage .timeline strong {
font-size: 10px
}
.rtlsPage .timeline small,
.rtlsPage .timeline time {
font-size: 8px
}
.rtlsPage .timelineDot {
width: 20px;
height: 20px
}
.rtlsPage .levelChart {
padding: 14px
}
.rtlsPage .purchaseRequest {
padding: 12px;
gap: 9px
}
.rtlsPage .purchaseRequest strong {
font-size: 10px
}
.rtlsPage .purchaseRequest small {
font-size: 8px
}
.rtlsPage .purchaseRequest .qty {
font-size: 22px
}
.rtlsPage .ownerCard {
padding: 12px
}
.rtlsPage .ownerCard strong {
font-size: 25px
}
.rtlsPage .ownerCard span {
font-size: 8px
}
.rtlsPage .exportStrip {
font-size: 8px;
gap: 5px
}
.rtlsPage .exportStrip span {
margin-left: 0
}
.rtlsPage .promptBox {
padding: 18px;
border-radius: 15px
}
.rtlsPage .aiTop {
margin-bottom: 17px;
gap: 8px
}
.rtlsPage .aiBrand strong {
font-size: 15px
}
.rtlsPage .aiTop>span {
font-size: 8px
}
.rtlsPage .aiBrand>.ico {
width: 22px;
height: 22px
}
.rtlsPage .question {
font-size: 12px;
padding: 12px;
margin-left: 20px
}
.rtlsPage .aiAnswer {
padding: 15px
}
.rtlsPage .aiAnswer .answerTitle {
font-size: 13px
}
.rtlsPage .aiAnswer p {
font-size: 10px
}
.rtlsPage .aiItem {
padding: 11px;
gap: 8px
}
.rtlsPage .aiItem strong {
font-size: 11px
}
.rtlsPage .aiItem small {
font-size: 8px
}
.rtlsPage .sourceChip {
font-size: 8px
}
.rtlsPage .aiReview {
font-size: 9px !important
}
.rtlsPage .aiSample {
font-size: 9px
}
.rtlsPage .aiScope {
font-size: 10px !important
}
.rtlsPage .ctaSection {
padding: 0 0 48px
}
.rtlsPage .cta {
padding: 22px;
margin-top: 0
}
.rtlsPage .cta h3 {
font-size: 21px
}
.rtlsPage .cta p {
font-size: 12px
}
.rtlsPage .ctaBtns {
width: 100%
}
.rtlsPage .ctaBtns .btn {
font-size: 12px;
padding: 12px 14px;
flex: 1
}
.rtlsPage .connectedGrid {
grid-template-columns: 1fr;
gap: 12px
}
.rtlsPage .connectedCard {
padding: 24px
}
.rtlsPage .connectedCard h3 {
font-size: 21px
}
.rtlsPage .connectedCard p {
font-size: 13px
}
.rtlsPage .connectedCard>.ico {
margin-bottom: 16px
}
.rtlsPage .hardwareCard {
display: flex
}
.rtlsPage .hardwareImage {
height: 185px;
min-height: 0;
border-bottom: 1px solid var(--line);
border-right: 0
}
.rtlsPage .hardwareCopy {
padding: 22px
}
.rtlsPage .hardwareCopy h3 {
font-size: 21px
}
.rtlsPage .hardwareCopy p {
font-size: 13px
}
.rtlsPage .hardwareNote {
font-size: 11px;
padding: 17px
}
.rtlsPage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px
}
.rtlsPage .integration {
height: 77px;
font-size: 14px
}
.rtlsPage .integration:last-child {
grid-column: 1/-1
}
.rtlsPage .integrationFlow {
grid-template-columns: 1fr;
padding: 23px;
gap: 13px
}
.rtlsPage .integrationFlow>.ico {
transform: rotate(90deg);
width: 20px;
height: 20px;
margin-left: 7px
}
.rtlsPage .integrationFlow strong {
font-size: 14px
}
.rtlsPage .integrationFlow small {
font-size: 10px
}
.rtlsPage .integrationNote {
text-align: left;
font-size: 11px !important
}
.rtlsPage .rolloutGrid {
gap: 25px 20px
}
.rtlsPage .rolloutStep h3 {
font-size: 18px
}
.rtlsPage .rolloutStep p {
font-size: 12px
}
.rtlsPage .pilotMeasures {
gap: 13px;
padding: 18px;
font-size: 10px
}
.rtlsPage .pilotMeasures strong {
width: 100%
}
.rtlsPage .faq details {
padding: 17px 16px;
margin-bottom: 10px
}
.rtlsPage .faq summary {
font-size: 13px;
line-height: 1.6
}
.rtlsPage .faq details p {
font-size: 13px;
line-height: 1.85
}
.rtlsPage .final {
padding: 29px 24px;
border-radius: 0;
gap: 24px
}
.rtlsPage .final h2 {
font-size: 32px
}
.rtlsPage .final p {
font-size: 14px
}
.rtlsPage .final .ctaBtns {
flex-direction: column
}
.rtlsPage .final .btn {
width: 100%;
min-height: 47px
}
.rtlsPage .contactRow {
flex-direction: column;
align-items: flex-start;
font-size: 11px;
gap: 12px
}
.rtlsPage .footerRow {
align-items: flex-start;
gap: 17px
}
.rtlsPage .footerLinks {
gap: 10px 17px;
font-size: 10px
}
.rtlsPage .pageFooter {
padding: 23px 0
}
}
@media(max-width:359px) { .rtlsPage .actions {
flex-direction: column
}
.rtlsPage .actions .btn {
width: 100%
}
.rtlsPage .rtlsStage {
height: 530px
}
.rtlsPage .locationPanel {
width: 163px;
top: 67px
}
.rtlsPage .heroAssetCard {
width: 175px
}
.rtlsPage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px
}
.rtlsPage .stockCardMetrics strong {
font-size: 22px
}
.rtlsPage .stockCardMetrics span {
font-size: 7px
}
.rtlsPage .rtlsScene {
left: -22px;
width: 114%;
top: 18px;
height: 315px
}
.rtlsPage .fl {
grid-template-columns: 1fr
}
.rtlsPage .outcomes {
grid-template-columns: 1fr
}
.rtlsPage .logos {
grid-template-columns: repeat(2, 1fr)
}
.rtlsPage .logoFallback {
font-size: 11px
}
.rtlsPage .visualInner {
padding: 12px
}
.rtlsPage .appBody {
padding: 12px
}
.rtlsPage .receivingPicture {
margin: -12px -12px 12px
}
.rtlsPage .auditCard {
padding: 15px 10px
}
.rtlsPage .auditCount {
font-size: 31px
}
.rtlsPage .auditCard h3 {
font-size: 14px
}
.rtlsPage .auditLayout {
gap: 7px
}
.rtlsPage .rolloutGrid {
grid-template-columns: 1fr
}
.rtlsPage .miniTable {
font-size: 8px
}
.rtlsPage .ownerCard strong {
font-size: 23px
}
} .rtlsPage .rtlsStage {
height: 548px;
max-width: 610px
}
.rtlsPage .rtlsScene {
top: 90px;
left: -12px;
width: 105%;
max-width: none;
height: 398px;
object-fit: contain
}
.rtlsPage .stageLabel {
top: 0;
left: 0;
font-size: 10px
}
.rtlsPage .locationPanel {
top: 48px;
right: 0;
width: 229px;
padding: 0;
border-radius: 15px;
border: 1px solid #B7D8E8;
background: #fff;
overflow: hidden;
box-shadow: 0 10px 24px rgba(6, 59, 92, .06)
}
.rtlsPage .locationHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: #F1FAFE;
border-bottom: 1px solid var(--line);
padding: 12px
}
.rtlsPage .locationHead strong {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #174157
}
.rtlsPage .locationHead .ico {
width: 18px;
height: 18px;
color: #007FC5
}
.rtlsPage .locationHead .badge {
font-size: 8px;
padding: 4px 5px
}
.rtlsPage .locationBody {
padding: 15px
}
.rtlsPage .locationBody>strong {
font-size: 19px;
letter-spacing: -.025em;
color: #163E56;
display: block
}
.rtlsPage .locationBody>small {
font-size: 9px;
color: #58768B;
display: block;
margin: 3px 0 13px
}
.rtlsPage .locationRow {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 0;
border-top: 1px solid var(--line)
}
.rtlsPage .locationRow>.ico {
width: 21px;
height: 21px;
color: #007FC5
}
.rtlsPage .locationRow strong {
font-size: 11px;
color: #174157;
display: block
}
.rtlsPage .locationRow small {
font-size: 8px;
color: #58768B;
display: block;
margin-top: 3px
}
.rtlsPage .locationFoot {
background: #FFF7D6;
border-top: 1px solid #E8D9A2;
padding: 9px 12px;
font-size: 8px;
color: #6A5313
}
.rtlsPage .heroAssetCard {
bottom: 0;
left: 0;
width: 263px;
background: #0E1B25
}
.rtlsPage .stageTag {
bottom: 12px;
right: 0;
font-size: 9px;
max-width: 205px
}
.rtlsPage .floorMap {
width: 100%;
height: auto;
border-radius: 9px;
background: #F3FAFE
}
.rtlsPage .floorMapWrap {
margin: -3px -3px 16px
}
.rtlsPage .recordRibbon {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 11px;
align-items: center;
margin-top: 14px;
padding: 14px 0 0;
border-top: 1px solid var(--line)
}
.rtlsPage .recordRibbon>.ico {
width: 35px;
height: 35px;
padding: 7px;
background: #EAF8FF;
color: #0076dd;
border-radius: 8px
}
.rtlsPage .recordRibbon strong {
font-size: 12px;
color: #174157;
display: block
}
.rtlsPage .recordRibbon small {
font-size: 9px;
display: block;
color: #5A7485;
margin-top: 2px
}
.rtlsPage .dataFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 15px
}
.rtlsPage .dataFields>div {
border: 1px solid #D4E5EE;
border-radius: 9px;
background: #F7FBFD;
padding: 11px
}
.rtlsPage .dataFields small {
font-size: 9px;
color: #5A778A;
display: block;
margin-bottom: 4px
}
.rtlsPage .dataFields strong {
font-size: 11px;
color: #214C64;
display: block;
line-height: 1.5
}
.rtlsPage .zoneCanvas {
position: relative;
background: #F4FAFD;
border: 1px solid #CFDFE9;
border-radius: 11px;
padding: 20px 15px;
margin-bottom: 17px
}
.rtlsPage .zoneAreas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
position: relative
}
.rtlsPage .zoneAreas>div {
min-height: 126px;
border: 1px solid #BBD6E5;
border-radius: 9px;
padding: 15px 13px;
background: #EAF8FF;
position: relative
}
.rtlsPage .zoneAreas>div.restricted {
border: 2px dashed #CC953D;
background: #FFF4D6;
padding: 14px 12px
}
.rtlsPage .zoneAreas strong {
font-size: 12px;
color: #244E65;
display: block
}
.rtlsPage .zoneAreas small {
font-size: 9px;
color: #5B7484;
display: block;
margin-top: 4px
}
.rtlsPage .zoneAreas .ico {
position: absolute;
left: 14px;
bottom: 15px;
color: #3B7797;
width: 28px;
height: 28px
}
.rtlsPage .zoneAsset {
position: absolute;
bottom: 14px;
right: 12px;
display: flex;
gap: 7px;
align-items: center;
background: white;
border: 1px solid #E4CCA2;
padding: 8px 9px;
border-radius: 7px;
font-size: 9px;
font-weight: 750;
color: #6E4C0C
}
.rtlsPage .zoneAsset:before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: #C78B20;
box-shadow: 0 0 0 4px #FAE6AF
}
.rtlsPage .zoneArrow {
position: absolute;
top: 72px;
left: 50%;
transform: translateX(-50%);
background: #fff;
border-radius: 50%;
border: 1px solid #D4E5EE;
padding: 6px;
display: flex
}
.rtlsPage .zoneAreas .zoneArrow .ico {
position: static;
width: 20px;
height: 20px;
color: #007FC5
}
.rtlsPage .exceptionHeader {
display: flex;
gap: 10px;
align-items: center;
margin: 4px 0 13px
}
.rtlsPage .exceptionHeader>.ico {
width: 33px;
height: 33px;
padding: 7px;
background: #FFF0CF;
color: #8A641A;
border-radius: 9px
}
.rtlsPage .exceptionHeader strong {
font-size: 14px;
color: #4E4023;
display: block
}
.rtlsPage .exceptionHeader small {
font-size: 9px;
color: #7C714E;
display: block
}
.rtlsPage .reviewSteps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
margin-top: 15px
}
.rtlsPage .reviewSteps>div {
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px 9px;
background: #fff;
text-align: center
}
.rtlsPage .reviewSteps b {
width: 22px;
height: 22px;
background: #FFF4CF;
display: grid;
place-items: center;
border-radius: 6px;
font-size: 10px;
margin: 0 auto 8px;
color: #6C551E
}
.rtlsPage .reviewSteps strong {
font-size: 10px;
color: #274E65;
display: block
}
.rtlsPage .reviewSteps small {
font-size: 8px;
color: #5B768A;
display: block;
margin-top: 4px
}
.rtlsPage .routeHistory {
padding: 17px 12px;
border: 1px solid #CFE4F0;
border-radius: 11px;
background: #F0F9FD;
margin-bottom: 16px
}
.rtlsPage .routeNodes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
position: relative;
text-align: center
}
.rtlsPage .routeNodes:before {
content: "";
position: absolute;
left: 16%;
right: 16%;
height: 2px;
background: #A5CBE1;
top: 21px
}
.rtlsPage .routeNode {
position: relative;
z-index: 1
}
.rtlsPage .routeNode>.ico {
width: 43px;
height: 43px;
background: white;
border: 1px solid #A7CDE1;
color: #0076dd;
padding: 10px;
border-radius: 50%;
margin-bottom: 10px
}
.rtlsPage .routeNode:last-child>.ico {
background: #FFC928;
border-color: #DFB438;
color: #1C4256
}
.rtlsPage .routeNode strong {
display: block;
font-size: 11px;
color: #20495F
}
.rtlsPage .routeNode small {
font-size: 9px;
color: #577285;
display: block;
margin-top: 5px
}
.rtlsPage .historyCaption {
font-size: 9px;
text-align: center;
color: #58778B;
margin-top: 13px
}
.rtlsPage .historyEnd {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 16px;
font-size: 9px;
color: #587487
}
.rtlsPage .heatmap {
border: 1px solid #D3E5EE;
border-radius: 10px;
background: #F6FBFE;
padding: 16px;
margin: 14px 0 16px
}
.rtlsPage .heatmapLabels {
display: grid;
grid-template-columns: repeat(3, 1fr);
font-size: 9px;
color: #45697D;
margin-bottom: 10px;
gap: 9px;
text-align: center
}
.rtlsPage .heatmapCells {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 4px
}
.rtlsPage .heatmapCells>span {
aspect-ratio: 1.14;
border-radius: 3px;
border: 1px solid #D4E5F0;
background: #DFEFF7
}
.rtlsPage .heatmapCells .h2 {
background: #A6D7EE;
border-color: #92C8E2
}
.rtlsPage .heatmapCells .h3 {
background: #64B9E0;
border-color: #54ABD2
}
.rtlsPage .heatmapCells .h4 {
background: #FFC928;
border-color: #E2B530
}
.rtlsPage .heatmapCells .h5 {
background: #EBAE37;
border-color: #D89921
}
.rtlsPage .heatmapLegend {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 11px;
font-size: 8px;
color: #517286
}
.rtlsPage .heatmapLegend i {
display: inline-block;
width: 67px;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, #DFEFF7, #64B9E0, #FFC928, #EBAE37)
}
.rtlsPage .dwellPanel {
border: 1px solid #E5D4A2;
border-radius: 10px;
background: #FFFAEA;
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center
}
.rtlsPage .dwellPanel strong {
font-size: 12px;
color: #59471E;
display: block
}
.rtlsPage .dwellPanel small {
font-size: 9px;
line-height: 1.7;
display: block;
color: #72613C;
margin-top: 4px
}
.rtlsPage .dwellValue {
font-size: 30px;
line-height: 1.2;
font-weight: 800;
letter-spacing: -.04em;
color: #755613;
text-align: right
}
.rtlsPage .dwellValue small {
font-weight: 500;
font-size: 8px;
margin-top: 3px;
letter-spacing: 0
}
.rtlsPage .siteSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 15px
}
.rtlsPage .siteCard {
background: #F3FAFE;
border: 1px solid #C8E1ED;
border-radius: 11px;
padding: 17px 14px
}
.rtlsPage .siteCard>.ico {
width: 27px;
height: 27px;
color: #0076dd;
margin-bottom: 12px
}
.rtlsPage .siteCard h3 {
font-size: 15px;
margin-bottom: 11px;
color: #1A455E
}
.rtlsPage .siteTotal {
font-size: 32px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.04em;
color: #173E55
}
.rtlsPage .siteTotal span {
font-size: 9px;
font-weight: 500;
letter-spacing: 0;
display: block;
margin-top: 5px;
color: #5F7889
}
.rtlsPage .siteStatus {
margin-top: 13px;
padding-top: 11px;
border-top: 1px solid #D2E5EF;
display: grid;
gap: 6px;
font-size: 9px;
color: #406277
}
.rtlsPage .siteStatus span {
display: flex;
justify-content: space-between;
gap: 9px
}
.rtlsPage .permissionRows {
display: grid;
gap: 8px
}
.rtlsPage .permissionRows>div {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 9px;
align-items: center;
border: 1px solid #D8E7F0;
border-radius: 9px;
padding: 11px
}
.rtlsPage .permissionRows .ico {
width: 19px;
height: 19px;
color: #497894
}
.rtlsPage .permissionRows strong {
font-size: 10px;
color: #295069;
display: block
}
.rtlsPage .permissionRows small {
font-size: 8px;
color: #59798E;
display: block
}
.rtlsPage .workAsset {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--line);
padding-bottom: 15px;
margin-bottom: 15px
}
.rtlsPage .workAsset>.ico {
background: #EAF8FF;
color: #0076dd;
width: 44px;
height: 44px;
padding: 10px;
border-radius: 11px
}
.rtlsPage .workAsset strong {
font-size: 15px;
display: block;
color: #163E55
}
.rtlsPage .workAsset small {
display: block;
font-size: 9px;
color: #5E7A8D;
margin-top: 3px
}
.rtlsPage .workLocation {
display: flex;
gap: 9px;
align-items: center;
background: #F4FAFD;
border: 1px solid #CFE3ED;
border-radius: 9px;
padding: 11px;
margin-bottom: 17px;
font-size: 10px;
color: #2C5871
}
.rtlsPage .workLocation .ico {
width: 21px;
height: 21px;
color: #007FC5
}
.rtlsPage .workLocation strong {
display: block;
font-size: 11px
}
.rtlsPage .workLocation small {
display: block;
font-size: 9px;
color: #5B7485;
margin-top: 3px
}
.rtlsPage .workRequest {
border-left: 3px solid var(--yellow);
border-radius: 0 9px 9px 0;
background: #FFFBEE;
padding: 13px 15px;
margin-top: 13px
}
.rtlsPage .workRequest strong {
font-size: 16px;
color: #1A425A;
display: block;
margin: 10px 0
}
.rtlsPage .workRequest small {
font-size: 9px;
color: #64717A;
display: block;
line-height: 1.6
}
.rtlsPage .miniChecklist {
list-style: none;
padding: 0;
margin: 15px 0 0;
display: grid;
gap: 10px
}
.rtlsPage .miniChecklist li {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: #456579
}
.rtlsPage .miniChecklist .ico {
width: 15px;
height: 15px;
color: #10815B
}
.rtlsPage .workFooter {
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 17px;
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #547386
}
.rtlsPage .aiAnswer .locationRead {
display: flex;
align-items: center;
gap: 9px;
border: 1px solid #C9E1ED;
background: #F0F9FE;
border-radius: 9px;
padding: 12px;
margin: 13px 0
}
.rtlsPage .locationRead>.ico {
width: 25px;
height: 25px;
color: #007FC5
}
.rtlsPage .locationRead strong {
font-size: 12px;
display: block;
color: #183E55
}
.rtlsPage .locationRead small {
font-size: 9px;
color: #607487;
display: block;
margin-top: 3px
}
.rtlsPage .aiAnswer .aiItem strong {
color: #1F465F
}
@media(max-width:1100px) {
.rtlsPage .rtlsScene {
width: 105%;
left: -17px;
height: 367px;
top: 115px
}
.rtlsPage .locationPanel {
width: 204px
}
.rtlsPage .heroAssetCard {
width: 235px
}
.rtlsPage .stageTag {
font-size: 8px;
max-width: 178px
}
.rtlsPage .rtlsStage {
height: 555px
}
}
@media(max-width:960px) {
.rtlsPage .rtlsStage {
height: 550px;
max-width: 610px
}
.rtlsPage .rtlsScene {
left: -12px;
top: 90px;
width: 105%;
height: 398px
}
.rtlsPage .locationPanel {
width: 229px
}
.rtlsPage .heroAssetCard {
width: 263px
}
.rtlsPage .stageTag {
font-size: 9px;
max-width: 205px
}
}
@media(max-width:640px) {
.rtlsPage .rtlsStage {
height: 475px;
max-width: 410px
}
.rtlsPage .rtlsScene {
top: 135px;
left: -8px;
width: 106%;
height: 278px
}
.rtlsPage .stageLabel {
font-size: 9px;
max-width: 100%;
padding: 8px 10px
}
.rtlsPage .locationPanel {
width: 184px;
top: 43px;
right: 0;
border-radius: 12px
}
.rtlsPage .locationHead {
padding: 10px;
gap: 6px
}
.rtlsPage .locationHead strong {
font-size: 9px;
gap: 5px
}
.rtlsPage .locationHead .ico {
width: 15px;
height: 15px
}
.rtlsPage .locationHead .badge {
font-size: 7px
}
.rtlsPage .locationBody {
padding: 12px
}
.rtlsPage .locationBody>strong {
font-size: 16px
}
.rtlsPage .locationBody>small {
font-size: 8px;
margin-bottom: 10px
}
.rtlsPage .locationRow {
padding: 9px 0;
gap: 7px
}
.rtlsPage .locationRow>.ico {
width: 18px;
height: 18px
}
.rtlsPage .locationRow strong {
font-size: 9px
}
.rtlsPage .locationRow small {
font-size: 7px
}
.rtlsPage .locationFoot {
font-size: 7px;
padding: 8px 10px
}
.rtlsPage .heroAssetCard {
width: 185px;
bottom: 0;
padding: 13px
}
.rtlsPage .stageTag {
font-size: 8px;
max-width: 146px;
bottom: 12px;
padding: 7px 9px
}
.rtlsPage .recordRibbon {
grid-template-columns: 30px 1fr auto;
gap: 8px
}
.rtlsPage .recordRibbon>.ico {
width: 30px;
height: 30px;
padding: 6px
}
.rtlsPage .recordRibbon strong {
font-size: 10px
}
.rtlsPage .recordRibbon small {
font-size: 8px
}
.rtlsPage .dataFields {
gap: 7px
}
.rtlsPage .dataFields>div {
padding: 10px
}
.rtlsPage .dataFields small {
font-size: 8px
}
.rtlsPage .dataFields strong {
font-size: 10px
}
.rtlsPage .zoneCanvas {
padding: 14px 11px
}
.rtlsPage .zoneAreas {
gap: 14px
}
.rtlsPage .zoneAreas>div {
padding: 12px 10px;
min-height: 124px
}
.rtlsPage .zoneAreas>div.restricted {
padding: 11px 9px
}
.rtlsPage .zoneAreas strong {
font-size: 10px
}
.rtlsPage .zoneAreas small {
font-size: 8px
}
.rtlsPage .zoneAreas .ico {
left: 10px;
bottom: 16px;
width: 23px;
height: 23px
}
.rtlsPage .zoneAsset {
bottom: 12px;
right: 8px;
gap: 6px;
padding: 7px;
font-size: 8px
}
.rtlsPage .zoneArrow {
padding: 4px;
top: 69px
}
.rtlsPage .zoneAreas .zoneArrow .ico {
width: 17px;
height: 17px
}
.rtlsPage .exceptionHeader strong {
font-size: 12px
}
.rtlsPage .exceptionHeader small {
font-size: 8px
}
.rtlsPage .reviewSteps {
gap: 7px
}
.rtlsPage .reviewSteps>div {
padding: 11px 6px
}
.rtlsPage .reviewSteps strong {
font-size: 9px
}
.rtlsPage .reviewSteps small {
font-size: 7px
}
.rtlsPage .routeNodes {
gap: 6px
}
.rtlsPage .routeNode>.ico {
width: 38px;
height: 38px;
padding: 9px
}
.rtlsPage .routeNodes:before {
top: 19px
}
.rtlsPage .routeNode strong {
font-size: 10px
}
.rtlsPage .routeNode small {
font-size: 8px
}
.rtlsPage .heatmap {
padding: 13px
}
.rtlsPage .heatmapLabels {
font-size: 8px
}
.rtlsPage .heatmapCells {
gap: 3px
}
.rtlsPage .dwellPanel {
padding: 13px;
gap: 9px
}
.rtlsPage .dwellPanel strong {
font-size: 11px
}
.rtlsPage .dwellPanel small {
font-size: 8px
}
.rtlsPage .dwellValue {
font-size: 27px
}
.rtlsPage .siteSummary {
gap: 9px
}
.rtlsPage .siteCard {
padding: 14px 11px
}
.rtlsPage .siteCard h3 {
font-size: 14px
}
.rtlsPage .siteTotal {
font-size: 29px
}
.rtlsPage .siteStatus {
font-size: 8px
}
.rtlsPage .permissionRows>div {
grid-template-columns: 19px 1fr auto;
gap: 7px;
padding: 10px
}
.rtlsPage .permissionRows strong {
font-size: 9px
}
.rtlsPage .permissionRows small {
font-size: 7px
}
.rtlsPage .workAsset strong {
font-size: 14px
}
.rtlsPage .workAsset small {
font-size: 8px
}
.rtlsPage .workLocation small {
font-size: 8px
}
.rtlsPage .workRequest {
padding: 12px
}
.rtlsPage .workRequest strong {
font-size: 15px
}
.rtlsPage .miniChecklist li {
font-size: 9px
}
.rtlsPage .workFooter {
font-size: 8px
}
.rtlsPage .locationRead small {
font-size: 8px
}
}
@media(max-width:389px) {
.rtlsPage .heroAssetCard {
width: 162px
}
.rtlsPage .stageTag {
max-width: 125px;
bottom: 8px;
font-size: 7px
}
.rtlsPage .stockCardMetrics strong {
font-size: 22px
}
.rtlsPage .stockCardMetrics span {
font-size: 7px
}
.rtlsPage .stageTag .ico {
width: 11px;
height: 11px
}
.rtlsPage .rtlsScene {
height: 254px;
top: 149px
}
.rtlsPage .zoneAreas .ico {
bottom: 46px;
width: 22px;
height: 22px
}
.rtlsPage .zoneAsset {
left: 8px;
right: auto
}
.rtlsPage .permissionRows .badge {
font-size: 7px
}
}
@media(max-width:359px) {
.rtlsPage .locationPanel {
width: 169px
}
.rtlsPage .rtlsScene {
height: 242px;
top: 156px
}
.rtlsPage .heroAssetCard {
width: 155px
}
.rtlsPage .stageTag {
max-width: 115px
}
.rtlsPage .siteTotal {
font-size: 26px
}
.rtlsPage .reviewSteps strong {
font-size: 8px
}
.rtlsPage .dataFields {
gap: 6px
}
.rtlsPage .dataFields>div {
padding: 8px
}
}  .coldPage {
--brand: #00A8F8;
--brand2: #0076dd;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--black2: #171717;
--red: #E25757;
--purple: #7C67E8;
--shadow: 0 18px 48px rgba(6, 59, 92, .09); --max: 1320px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
isolation: isolate;
overflow-wrap: break-word;
font-size: 16px
}
.coldPage *,
.coldPage *::before,
.coldPage *::after {
box-sizing: border-box
}
.coldPage :where(h1, h2, h3, p, figure, ul, ol, dl, dd) {
margin: 0
}
.coldPage a {
color: inherit;
text-decoration: none
}
.coldPage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.coldPage .ico {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle
}
.coldPage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto
}
.coldPage section {
padding: 76px 0;
scroll-margin-top: 30px
}
.coldPage [id] {
scroll-margin-top: 28px
}
.coldPage h1,
.coldPage h2,
.coldPage h3 {
line-height: 1.12;
letter-spacing: -.035em;
font-weight: 780;
color: var(--black)
} .coldPage h2 {
font-size: clamp(31px, 3.35vw, 45px)
}
.coldPage h3 {
font-size: 21px
}
.coldPage p {
color: var(--muted)
}
.coldPage .ey {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 12px;
font-weight: 800;
margin-bottom: 18px
}
.coldPage .ey .ico {
width: 16px;
height: 16px
}
.coldPage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
line-height: 1.75
}
.coldPage .btn {
display: inline-flex;
gap: 12px;
min-height: 49px;
padding: 11px 20px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: background .2s ease;
line-height: 1.45;
font-size: 14px;
text-align: center
}
.coldPage .btn .ico {
width: 18px;
height: 18px
}
.coldPage .btn.black {
background: var(--black);
color: #fff
}
.coldPage .btn.black:hover {
background: #292929
}
.coldPage .btn.yellow {
background: var(--yellow);
color: #000
}
.coldPage .btn.yellow:hover {
background: #FFDA67
}
.coldPage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.coldPage .btn.outline:hover {
background: var(--sky)
}
.coldPage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.coldPage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.coldPage .soft {
background: var(--sky2)
}
.coldPage .sectionHead {
max-width: 820px;
margin-bottom: 35px
}
.coldPage .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.coldPage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.coldPage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.coldPage .dark h2,
.coldPage .dark h3 {
color: #fff
}
.coldPage .dark p {
color: #D6D6D6
}
.coldPage .dark .ey {
background: var(--yellow);
color: var(--black)
}
.coldPage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
.coldPage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 99;
background: #fff;
padding: 12px 20px;
color: var(--navy)
}
.coldPage .skipLink:focus {
top: 10px
} .coldPage .hero {
padding: 30px 0 64px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .18), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .14), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.coldPage .breadcrumb {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
font-size: 10px;
color: #536C7D;
margin-bottom: 31px
}
.coldPage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px
}
.coldPage .breadcrumb .ico {
width: 11px;
height: 11px
}
.coldPage .heroGrid {
display: grid;
grid-template-columns: 1.25fr 1.04fr;
gap: 38px;
align-items: center
}
.coldPage .hero h1 span {
color: var(--brand2)
}
.coldPage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px
}
.coldPage .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.coldPage .heroVisual {
min-width: 0;
position: relative
}
.coldPage .coldStage {
position: relative;
height: 560px;
max-width: 610px;
margin: auto
}
.coldPage .coldScene {
position: absolute;
top: 13px;
left: -15px;
width: 100%;
height: 440px;
object-fit: contain
}
.coldPage .stageLabel {
position: absolute;
left: 15px;
top: 3px;
background: #fff;
border: 1px solid #C6E5F3;
padding: 10px 13px;
border-radius: 10px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: var(--navy);
font-weight: 750
}
.coldPage .stageLabel .ico {
width: 18px;
height: 18px;
color: var(--brand2)
}
.coldPage .conditionPanel {
position: absolute;
right: -1px;
top: 85px;
width: 212px;
padding: 7px;
border-radius: 28px;
background: #102435;
border: 1px solid #254A62;
box-shadow: 0 14px 30px rgba(6, 59, 92, .14)
}
.coldPage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden;
min-height: 328px
}
.coldPage .phoneNotch {
height: 20px;
background: #102435;
display: flex;
justify-content: center;
align-items: center
}
.coldPage .phoneNotch:before {
content: "";
height: 5px;
width: 53px;
border-radius: 9px;
background: #3F5665
}
.coldPage .phoneHead {
padding: 13px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.coldPage .phoneHead strong {
font-size: 12px;
display: block
}
.coldPage .phoneHead small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.coldPage .phoneBody {
padding: 12px
}
.coldPage .phoneBody>.badge {
font-size: 9px
}
.coldPage .scanStatus {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px
}
.coldPage .scanStatus>.ico {
width: 31px;
height: 31px;
color: var(--brand2)
}
.coldPage .scanStatus strong {
font-size: 29px;
line-height: 1;
display: block;
letter-spacing: -.03em
}
.coldPage .scanStatus small {
font-size: 9px;
color: var(--muted)
}
.coldPage .phoneLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
border-bottom: 1px solid var(--line);
padding: 9px 0
}
.coldPage .phoneLine:last-child {
border: 0
}
.coldPage .phoneAlert {
padding: 9px;
background: var(--yellowsoft);
border: 1px solid #F0DFAB;
border-radius: 7px;
font-size: 9px;
margin-top: 12px;
color: #66500F
}
.coldPage .heroColdCard {
position: absolute;
left: 3px;
bottom: 2px;
width: 274px;
background: #111820;
border: 1px solid #263D4D;
color: #fff;
border-radius: 15px;
padding: 17px 18px
}
.coldPage .stockCardHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
margin-bottom: 13px;
color: #D2DFE7
}
.coldPage .stockCardHead .ico {
width: 18px;
height: 18px;
color: var(--yellow)
}
.coldPage .stockCardMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px
}
.coldPage .stockCardMetrics strong {
display: block;
font-size: 27px;
color: #fff;
line-height: 1.15;
letter-spacing: -.04em
}
.coldPage .stockCardMetrics span {
font-size: 9px;
color: #B6CCD9
}
.coldPage .stockCardMetrics>div+div {
border-left: 1px solid #395364;
padding-left: 18px
}
.coldPage .stageTag {
position: absolute;
right: 8px;
bottom: 8px;
background: var(--yellow);
color: #0B0B0B;
border-radius: 9px;
padding: 8px 10px;
max-width: 208px;
font-size: 10px;
font-weight: 800
}
.coldPage .stageTag .ico {
width: 15px;
height: 15px;
margin-right: 4px
}
.coldPage .heroVisual figcaption {
font-size: 10px;
color: #536C7D;
text-align: center;
margin-top: 14px
}
.coldPage .trust {
padding: 27px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.coldPage .trustLabel {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-bottom: 19px;
color: #3D596C
}
.coldPage .logos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
align-items: center
}
.coldPage .logo {
height: 60px;
display: grid;
place-items: center;
padding: 8px 10px;
border: 1px solid #E8F0F5;
border-radius: 11px;
background: #fff;
overflow: hidden
}
.coldPage .clientLogo {
width: 100%;
height: 40px;
object-fit: contain;
display: block;
pointer-events: none
}
.coldPage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #445E6F;
font-weight: 800;
text-align: center;
line-height: 1.2
}
.coldPage .quickNav {
display: flex;
justify-content: center;
gap: 6px 25px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: #32617B
}
.coldPage .quickNav a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #B7DCEB
}
.coldPage .quickNav a:hover {
color: #005F94
} .coldPage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.coldPage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
position: relative;
overflow: hidden
}
.coldPage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.coldPage .outcome:nth-child(2):before {
background: var(--yellow)
}
.coldPage .outcome:nth-child(3):before {
background: var(--green)
}
.coldPage .outcome:nth-child(4):before {
background: var(--purple)
}
.coldPage .outcome>.ico {
width: 28px;
height: 28px;
color: var(--navy);
margin-bottom: 18px
}
.coldPage .outcome h3 {
font-size: 20px;
margin-bottom: 10px
}
.coldPage .outcome p {
font-size: 13px;
line-height: 1.75
}
.coldPage .workflow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}
.coldPage .flowStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 18px;
position: relative;
padding: 23px 20px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line)
}
.coldPage .flowNumber {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--yellow);
font-size: 14px;
font-weight: 850
}
.coldPage .flowStep h3 {
font-size: 19px;
margin-bottom: 9px
}
.coldPage .flowStep p {
font-size: 13px
}
.coldPage .flowStep:not(:last-child):after {
content: "\2192";
position: absolute;
right: -20px;
top: 37px;
color: #0076dd;
font-size: 23px;
z-index: 2
}
.coldPage .workflowSection {
padding-top: 62px;
padding-bottom: 65px
}
.coldPage .workflowSection .sectionHead {
margin-bottom: 28px
} .coldPage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.coldPage .feature.reverse .visual {
order: -1
}
.coldPage .copy>p {
color: var(--muted);
font-size: 16px;
margin-top: 18px;
line-height: 1.8
}
.coldPage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 16px;
margin-top: 23px;
list-style: none;
padding: 0
}
.coldPage .fl li {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.65;
align-items: flex-start;
min-width: 0
}
.coldPage .tick {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--greenbg);
color: #0B7651;
display: grid;
place-items: center;
flex: 0 0 20px;
margin-top: 1px
}
.coldPage .tick .ico {
width: 12px;
height: 12px;
stroke-width: 2.2
}
.coldPage details.capabilityMore {
margin-top: 21px;
background: none;
border: 0;
padding: 0;
border-radius: 0
}
.coldPage .capabilityMore summary {
display: inline-flex;
gap: 9px;
align-items: center;
color: #006FA9;
font-size: 13px;
font-weight: 800;
cursor: pointer;
list-style: none;
min-height: 33px
}
.coldPage .capabilityMore summary::-webkit-details-marker {
display: none
}
.coldPage .capabilityMore summary::after {
content: "+";
font-size: 20px;
font-weight: 500;
line-height: 1
}
.coldPage .capabilityMore[open] summary::after {
content: "\2212"
}
.coldPage .capabilityMore .fl {
margin-top: 14px
}
.coldPage .dark .fl {
color: #E7E7E7
}
.coldPage .dark .tick {
background: var(--yellow);
color: #000
}
.coldPage .dark .capabilityMore summary {
color: var(--yellow)
}
.coldPage .visual {
min-width: 0;
position: relative
}
.coldPage .visualInner {
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .15), transparent 28%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 24px;
position: relative;
overflow: hidden
}
.coldPage .visual figcaption {
font-size: 10px;
line-height: 1.65;
text-align: center;
margin-top: 11px;
color: #526C80
}
.coldPage .appWindow {
background: #fff;
border: 1px solid #C5DDE9;
border-radius: 13px;
overflow: hidden
}
.coldPage .appBar {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 14px;
background: #fff;
border-bottom: 1px solid var(--line);
min-width: 0
}
.coldPage .appBar strong {
font-size: 11px;
color: #183C53
}
.coldPage .appMark {
display: grid;
place-items: center;
background: var(--sky);
width: 25px;
height: 25px;
border-radius: 7px;
color: #007FC5
}
.coldPage .appMark .ico {
width: 15px;
height: 15px
}
.coldPage .windowDots {
margin-left: auto;
display: flex;
gap: 4px
}
.coldPage .windowDots i {
width: 4px;
height: 4px;
background: #BCCFD9;
border-radius: 50%
}
.coldPage .appBody {
padding: 18px
}
.coldPage .appSub {
font-size: 10px;
color: #617A8C;
margin-bottom: 14px
}
.coldPage .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
padding: 5px 7px;
border-radius: 6px;
background: #EEF5F9;
color: #375E75;
vertical-align: middle
}
.coldPage .badge.green {
background: var(--greenbg);
color: #0B704D
}
.coldPage .badge.yellow {
background: var(--yellowsoft);
color: #695000
}
.coldPage .badge.blue {
background: #E4F6FF;
color: #006799
}
.coldPage .badge.red {
background: #FFF0F0;
color: #A23D3D
}
.coldPage .badge.darkBadge {
background: #203C4F;
color: #E4F3FC
}
.coldPage .progress {
height: 7px;
background: #E4EEF4;
border-radius: 8px;
overflow: hidden;
margin: 14px 0
}
.coldPage .progress span {
height: 100%;
background: var(--brand2);
display: block;
border-radius: inherit
}
.coldPage .appHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 14px
}
.coldPage .appHeading>strong {
font-size: 15px;
line-height: 1.3;
color: #143C55
}
.coldPage .appHeading small {
font-size: 10px;
color: var(--muted);
display: block
}
.coldPage .miniTabs {
display: flex;
gap: 17px;
font-size: 10px;
color: #597488;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 17px
}
.coldPage .miniTabs .active {
color: #006FA9;
font-weight: 800;
position: relative
}
.coldPage .miniTabs .active:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -11px;
border-bottom: 2px solid #007FC5
}
.coldPage .lightNote {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #466B81;
background: #F3F9FC;
border: 1px solid #DCEAF2;
padding: 10px;
border-radius: 8px;
margin-top: 14px
}
.coldPage .lightNote .ico {
width: 16px;
height: 16px;
color: #007FC5
}
.coldPage .inlineNotice {
display: flex;
gap: 9px;
align-items: flex-start;
background: #FFF8E0;
border: 1px solid #F1E1AF;
border-radius: 9px;
padding: 11px;
font-size: 10px;
line-height: 1.65;
color: #665014;
margin-top: 14px
}
.coldPage .inlineNotice .ico {
width: 17px;
height: 17px;
color: #8A680F;
margin-top: 1px
}
.coldPage .subLabel {
font-size: 10px;
font-weight: 800;
color: #456579;
display: block;
margin-bottom: 10px
} .coldPage .mapLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
color: #4B6E84
}
.coldPage .binGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px
}
.coldPage .bin {
border: 1px solid #C8DEE9;
background: #F7FBFD;
border-radius: 8px;
padding: 12px 10px;
min-width: 0
}
.coldPage .bin.selected {
border: 2px solid #008CCF;
background: #EAF8FF;
padding: 11px 9px
}
.coldPage .bin strong {
font-size: 11px;
display: block;
color: #17455E
}
.coldPage .bin small {
font-size: 9px;
color: #58758A;
display: block;
margin-top: 6px
}
.coldPage .binStock {
display: flex;
gap: 4px;
align-items: flex-end;
height: 23px;
margin-top: 9px
}
.coldPage .binStock span {
width: 14px;
height: 17px;
background: #A6D9F0;
border: 1px solid #6DB4D8;
border-radius: 2px;
position: relative
}
.coldPage .binStock span:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: white;
top: 4px;
left: 4px
}
.coldPage .bin.selected .binStock span {
background: #FFC928;
border-color: #D7AE36
}
.coldPage .stockRecord {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 0 0;
margin-top: 15px;
border-top: 1px solid var(--line)
}
.coldPage .stockRecord>.ico {
width: 37px;
height: 37px;
padding: 7px;
background: #EAF8FF;
border-radius: 9px;
color: #007FC5
}
.coldPage .stockRecord strong {
font-size: 12px;
display: block
}
.coldPage .stockRecord small {
font-size: 9px;
color: var(--muted);
display: block
}
.coldPage .stockRecord>.badge {
margin-left: auto
}
.coldPage .miniMeta {
display: flex;
gap: 17px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 9px;
color: #587489
} .coldPage .receivingPicture {
height: 167px;
position: relative;
margin: -18px -18px 16px;
border-bottom: 1px solid var(--line);
background: #F0F9FD
}
.coldPage .receivingPicture img {
width: 100%;
height: 100%;
object-fit: contain
}
.coldPage .metricsThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px
}
.coldPage .metricBox {
border: 1px solid var(--line);
border-radius: 9px;
padding: 11px;
min-width: 0
}
.coldPage .metricBox strong {
font-size: 25px;
letter-spacing: -.04em;
line-height: 1.1;
color: #0D3B55;
display: block
}
.coldPage .metricBox span {
font-size: 9px;
color: #587487;
display: block;
margin-top: 6px
}
.coldPage .metricBox.warn {
background: #FFF8E2;
border-color: #EDDDAA
}
.coldPage .metricBox.warn strong {
color: #80600C
}
.coldPage .miniTable {
width: 100%;
border-collapse: collapse;
font-size: 10px
}
.coldPage .miniTable :where(th, td) {
text-align: left;
padding: 10px 6px;
border-bottom: 1px solid #E4EEF4;
vertical-align: middle
}
.coldPage .miniTable th {
font-size: 9px;
color: #526F82;
font-weight: 700
}
.coldPage .miniTable td {
color: #2B5067
}
.coldPage .miniTable td:first-child {
font-weight: 700
}
.coldPage .miniTable tr:last-child td {
border-bottom: 0
}
.coldPage .miniTable small {
display: block;
color: #607A8D;
font-size: 8px;
font-weight: 400
}
.coldPage .miniTable .badge {
font-size: 8px;
padding: 4px 5px
}
.coldPage .auditLayout {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 13px;
align-items: center
}
.coldPage .auditDevice {
min-width: 0;
overflow: hidden
}
.coldPage .auditDevice img {
width: 175%;
max-width: none;
margin-left: -37%;
height: 295px;
object-fit: contain
}
.coldPage .auditDevice span {
display: block;
text-align: center;
color: #44697E;
font-size: 10px;
font-weight: 700
}
.coldPage .auditCard {
padding: 19px 15px;
border-radius: 13px;
border: 1px solid #BBD9E9;
background: #fff;
min-width: 0
}
.coldPage .auditCard h3 {
font-size: 17px;
margin-top: 13px
}
.coldPage .auditSubtitle {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px
}
.coldPage .auditCount {
display: block;
font-size: 42px;
letter-spacing: -.04em;
color: var(--navy);
line-height: 1.1;
margin-top: 17px
}
.coldPage .auditCount small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted)
}
.coldPage .auditLine {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 10px;
border-bottom: 1px solid #E3EEF4;
padding: 9px 0
}
.coldPage .auditLine:last-child {
border-bottom: 0
}
.coldPage .auditLine span {
display: flex;
gap: 6px;
align-items: center
}
.coldPage .miniDot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
background: #007FC5
}
.coldPage .miniDot.amber {
background: #BC8F11
}
.coldPage .miniDot.red {
background: #CB5E54
}
.coldPage .locator {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
background: #fff;
border: 1px solid #CEE4EF;
border-radius: 11px;
padding: 14px
}
.coldPage .locator .ico {
color: #0076dd;
width: 27px;
height: 27px
}
.coldPage .locator strong {
display: block;
font-size: 11px
}
.coldPage .locator small {
font-size: 9px;
display: block;
color: var(--muted)
}
.coldPage .signal {
display: flex;
align-items: flex-end;
gap: 3px;
margin-left: auto;
height: 23px
}
.coldPage .signal i {
width: 4px;
border-radius: 2px;
background: #007FC5
}
.coldPage .signal i:nth-child(1) {
height: 7px
}
.coldPage .signal i:nth-child(2) {
height: 11px
}
.coldPage .signal i:nth-child(3) {
height: 16px
}
.coldPage .signal i:nth-child(4) {
height: 21px
}
.coldPage .signal i:nth-child(5) {
height: 23px;
background: #D3E5EF
} .coldPage .transferRoute {
display: grid;
grid-template-columns: 1fr 49px 1fr;
gap: 9px;
align-items: center;
margin-bottom: 16px
}
.coldPage .routeStop {
border: 1px solid #CBE0EB;
border-radius: 10px;
padding: 15px 9px;
text-align: center;
background: #F5FAFD
}
.coldPage .routeStop>.ico {
width: 34px;
height: 34px;
color: #0076dd;
margin-bottom: 9px
}
.coldPage .routeStop strong {
display: block;
font-size: 12px
}
.coldPage .routeStop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.coldPage .routeArrow {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8px;
color: #536E82;
gap: 6px
}
.coldPage .routeArrow .ico {
width: 25px;
color: #007FC5
}
.coldPage .timeline {
list-style: none;
padding: 0;
margin-top: 17px
}
.coldPage .timeline li {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 17px;
position: relative;
font-size: 10px
}
.coldPage .timeline li:not(:last-child):before {
content: "";
position: absolute;
border-left: 1px solid #BBD4E2;
left: 10px;
top: 24px;
bottom: 3px
}
.coldPage .timeline .timelineDot {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--greenbg);
border-radius: 50%;
color: #0B7651
}
.coldPage .timeline .timelineDot .ico {
width: 13px;
height: 13px
}
.coldPage .timeline .timelineDot.pending {
color: #83650B;
background: #FFF3C9
}
.coldPage .timeline strong {
font-size: 11px;
display: block
}
.coldPage .timeline small {
font-size: 9px;
color: var(--muted);
display: block
}
.coldPage .timeline time {
font-size: 9px;
color: var(--muted);
padding-top: 2px
}
.coldPage .timeline li:last-child {
padding-bottom: 0
}
.coldPage .levelChart {
padding: 18px;
border: 1px solid #D6E7F0;
border-radius: 10px;
background: #F7FBFD;
margin-top: 15px
}
.coldPage .levelLabels {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: #607C8F;
margin-bottom: 13px
}
.coldPage .stockLevel {
height: 27px;
border-radius: 5px;
background: #E4EFF5;
position: relative;
margin-bottom: 10px
}
.coldPage .stockLevel>span {
display: block;
width: 36%;
height: 100%;
background: var(--yellow);
border-radius: 5px
}
.coldPage .stockLevel:after {
content: "";
position: absolute;
left: 50%;
top: -5px;
bottom: -5px;
border-left: 2px dashed #174964
}
.coldPage .stockLevelNote {
font-size: 9px;
color: #385D73;
line-height: 1.6
}
.coldPage .purchaseRequest {
border: 1px solid #BBD9E9;
border-radius: 11px;
background: #fff;
padding: 15px;
margin-top: 16px;
display: grid;
grid-template-columns: 33px 1fr auto;
gap: 10px;
align-items: center
}
.coldPage .purchaseRequest>.ico {
color: #0076dd;
background: #EAF8FF;
padding: 7px;
box-sizing: content-box;
width: 19px;
height: 19px;
border-radius: 9px
}
.coldPage .purchaseRequest strong {
font-size: 11px;
display: block
}
.coldPage .purchaseRequest small {
font-size: 9px;
color: var(--muted);
display: block
}
.coldPage .purchaseRequest .qty {
font-size: 24px;
color: var(--navy);
letter-spacing: -.04em
}
.coldPage .ownershipSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 17px
}
.coldPage .ownerCard {
border: 1px solid #CDE2ED;
background: #F8FCFE;
border-radius: 10px;
padding: 14px
}
.coldPage .ownerCard strong {
font-size: 26px;
line-height: 1.1;
letter-spacing: -.04em;
display: block;
color: var(--navy)
}
.coldPage .ownerCard span {
display: block;
font-size: 9px;
margin-top: 6px;
color: var(--muted)
}
.coldPage .ownerCard.vendor {
background: #FFF9E9;
border-color: #F0E0AF
}
.coldPage .exportStrip {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
color: #58788C;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 10px;
flex-wrap: wrap
}
.coldPage .exportStrip .ico {
width: 14px;
height: 14px
}
.coldPage .exportStrip span {
margin-left: auto
}
.coldPage .exportStrip b {
font-weight: 600;
padding: 3px 6px;
background: #F5FAFD;
border: 1px solid #D3E6F1;
border-radius: 4px
} .coldPage .aiGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 50px;
align-items: center
}
.coldPage .aiGrid>.copy>p {
color: #D6D6D6
}
.coldPage .promptBox {
border: 1px solid #354149;
border-radius: 18px;
background: #111920;
padding: 22px;
min-width: 0
}
.coldPage .aiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px
}
.coldPage .aiBrand {
display: flex;
align-items: center;
gap: 9px
}
.coldPage .aiBrand>.ico {
color: var(--yellow);
width: 26px;
height: 26px
}
.coldPage .aiBrand strong {
font-size: 16px;
letter-spacing: .02em
}
.coldPage .aiTop>span {
font-size: 9px;
color: #BBCCD7
}
.coldPage .question {
border: 1px solid #344653;
border-radius: 11px 11px 2px 11px;
background: #21303B;
padding: 14px;
margin-left: 33px;
color: #F1F5F8;
font-size: 13px
}
.coldPage .aiAnswer {
background: #fff;
color: var(--ink);
padding: 19px;
border-radius: 12px;
margin-top: 15px
}
.coldPage .aiAnswer .answerTitle {
font-size: 14px;
line-height: 1.45;
display: block;
color: #123C55;
margin-bottom: 8px
}
.coldPage .aiAnswer p {
font-size: 11px;
color: #587387;
line-height: 1.7
}
.coldPage .aiItem {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid #D6E5EF;
border-radius: 9px;
background: #F8FBFD;
padding: 12px;
margin-top: 13px
}
.coldPage .aiItem strong {
display: block;
font-size: 12px
}
.coldPage .aiItem small {
font-size: 9px;
color: #607789;
display: block;
margin-top: 3px
}
.coldPage .aiItem>.badge {
font-size: 9px
}
.coldPage .sourceChip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 7px;
border: 1px solid #D1E3ED;
border-radius: 5px;
font-size: 9px;
color: #456C83;
margin-top: 13px
}
.coldPage .sourceChip .ico {
width: 12px;
height: 12px
}
.coldPage .aiReview {
font-size: 10px !important;
color: #CCDAE4 !important;
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 16px
}
.coldPage .aiReview .ico {
width: 16px;
height: 16px;
color: var(--yellow);
margin-top: 2px
}
.coldPage .aiSample {
font-size: 10px;
color: #BDC9D3;
text-align: center;
margin-top: 12px
}
.coldPage .aiScope {
font-size: 11px !important;
color: #B9C7D0 !important;
border-top: 1px solid #35434E;
padding-top: 16px;
margin-top: 22px !important;
line-height: 1.7 !important
} .coldPage .cta {
margin-top: 30px;
padding: 24px 27px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.coldPage .cta h3 {
font-size: 21px
}
.coldPage .cta p {
font-size: 13px;
margin-top: 7px;
max-width: 660px
}
.coldPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.coldPage .ctaSection {
padding: 0 0 64px;
background: var(--sky2)
} .coldPage .connectedGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px
}
.coldPage .connectedCard {
background: #151515;
border: 1px solid #333;
border-radius: 15px;
padding: 24px
}
.coldPage .connectedCard>.ico {
color: var(--yellow);
width: 27px;
height: 27px;
margin-bottom: 20px
}
.coldPage .connectedCard h3 {
font-size: 21px;
margin-bottom: 11px;
color: #fff
}
.coldPage .connectedCard p {
font-size: 13px;
line-height: 1.8;
color: #CFCFCF
}
.coldPage .connectedCard a {
display: inline-block;
color: var(--yellow);
font-size: 12px;
font-weight: 750;
margin-top: 15px;
text-decoration: underline;
text-underline-offset: 4px
}
.coldPage .hardwareGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}
.coldPage .hardwareCard {
border: 1px solid #CDE3ED;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0
}
.coldPage .hardwareImage {
width: 100%;
height: 195px;
object-fit: contain;
background: #F0F9FD;
border-bottom: 1px solid var(--line)
}
.coldPage .hardwareCopy {
padding: 23px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column
}
.coldPage .hardwareCopy h3 {
font-size: 21px;
margin: 13px 0 10px
}
.coldPage .hardwareCopy p {
font-size: 13px;
line-height: 1.75
}
.coldPage .hardwareCopy .bestFor {
font-size: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
color: #355971
}
.coldPage .hardwareNote {
font-size: 12px;
line-height: 1.8;
margin-top: 22px;
padding: 18px 21px;
border: 1px solid #CDE3EE;
border-left: 4px solid var(--yellow);
border-radius: 11px;
background: #F7FBFD
}
.coldPage .hardwareNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.coldPage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.coldPage .integration {
height: 87px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 10px;
color: #183E56;
min-width: 0;
line-height: 1.3
}
.coldPage .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.coldPage .integration small {
font-size: 9px;
color: #60788A;
margin-top: 6px;
font-weight: 500
}
.coldPage .integrationFlow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
align-items: center;
gap: 13px;
background: #0C2333;
padding: 23px;
border-radius: 15px;
margin-top: 23px;
color: #fff
}
.coldPage .integrationFlow>div {
min-width: 0
}
.coldPage .integrationFlow strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: #fff
}
.coldPage .integrationFlow small {
font-size: 10px;
color: #C1D5E2;
display: block;
margin-top: 5px
}
.coldPage .integrationFlow>.ico {
color: var(--yellow);
width: 26px;
height: 26px
}
.coldPage .integrationNote {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 19px auto 0 !important;
max-width: 950px;
text-align: center
}
.coldPage .integrationNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.coldPage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 23px;
margin-top: 32px
}
.coldPage .rolloutStep {
border-top: 1px solid #BAD7E8;
padding-top: 19px
}
.coldPage .rolloutNumber {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
margin-bottom: 17px
}
.coldPage .rolloutStep h3 {
font-size: 20px;
margin-bottom: 11px
}
.coldPage .rolloutStep p {
font-size: 13px;
line-height: 1.8
}
.coldPage .pilotMeasures {
display: flex;
gap: 14px 23px;
align-items: center;
flex-wrap: wrap;
background: #EFF8FD;
border: 1px solid #CEE4F0;
border-radius: 11px;
padding: 17px 21px;
margin-top: 27px;
font-size: 11px;
color: #40677F
}
.coldPage .pilotMeasures strong {
font-size: 12px;
color: #173F57
}
.coldPage .pilotMeasures span {
display: flex;
align-items: center;
gap: 6px
}
.coldPage .pilotMeasures .ico {
width: 14px;
height: 14px
} .coldPage .faq {
max-width: 900px
}
.coldPage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.coldPage .faq summary {
font-size: 15px;
font-weight: 800;
cursor: pointer;
color: var(--navy);
line-height: 1.65
}
.coldPage .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 11px;
line-height: 1.85
}
.coldPage .faq details p a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.coldPage .faq details:last-child {
margin-bottom: 0
}
.coldPage .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 43px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center
}
.coldPage .final h2 {
color: #fff;
font-size: 39px
}
.coldPage .final p {
color: #DDD;
margin-top: 15px;
max-width: 720px;
font-size: 16px
}
.coldPage .final .ctaBtns {
justify-content: center;
}
.coldPage .final .btn.outline {
background: transparent;
border-color: #666;
color: #fff
}
.coldPage .final .btn.outline:hover {
background: #303030
}
.coldPage .contactRow {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 23px;
font-size: 12px;
color: #5B7588;
align-items: center
}
.coldPage .contactRow a {
color: #006FA9;
font-weight: 700;
display: flex;
gap: 7px;
align-items: center
}
.coldPage .contactRow .ico {
width: 16px;
height: 16px
}
.coldPage .pageFooter {
padding: 25px 0;
border-top: 1px solid var(--line);
background: #F7FBFD
}
.coldPage .footerRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 11px;
flex-wrap: wrap;
color: #4E6D80
}
.coldPage .footerRow strong {
font-size: 16px;
letter-spacing: -.03em;
color: #163F59
}
.coldPage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap
}
.coldPage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px
}
@media(min-width:1600px) { }
@media(max-width:1100px) {
.coldPage .heroGrid {
gap: 27px;
grid-template-columns: 1fr 1fr
} .coldPage .coldStage {
height: 540px
}
.coldPage .conditionPanel {
width: 192px;
top: 91px
}
.coldPage .heroColdCard {
width: 228px;
padding: 15px
}
.coldPage .stageTag {
max-width: 182px;
font-size: 9px;
right: 0
}
.coldPage .coldScene {
height: 397px
}
.coldPage .feature,
.coldPage .aiGrid {
gap: 33px
}
.coldPage .visualInner {
padding: 18px
}
.coldPage .logos {
gap: 8px
}
.coldPage .logo {
padding: 8px
}
.coldPage .outcome {
padding: 23px 19px
}
.coldPage .hardwareCopy {
padding: 20px
}
.coldPage .hardwareImage {
height: 172px
}
.coldPage .flowStep {
grid-template-columns: 37px 1fr;
gap: 12px;
padding: 20px 17px
}
.coldPage .flowNumber {
width: 34px;
height: 34px
}
.coldPage .flowStep h3 {
font-size: 18px
}
.coldPage .fl {
gap: 12px
}
.coldPage .fl li {
font-size: 12px
}
.coldPage .appBody {
padding: 15px
}
.coldPage .receivingPicture {
margin: -15px -15px 15px
}
.coldPage .auditCard {
padding: 17px 12px
}
.coldPage .auditDevice img {
height: 270px
}
.coldPage .auditCount {
font-size: 36px
}
.coldPage .integration {
font-size: 13px
}
}
@media(max-width:960px) {
.coldPage section {
padding: 63px 0
}
.coldPage .hero {
padding: 25px 0 51px
}
.coldPage .heroGrid,
.coldPage .feature,
.coldPage .aiGrid,
.coldPage .final {
grid-template-columns: 1fr
}
.coldPage .heroGrid {
gap: 31px
} .coldPage .lead {
max-width: 690px
}
.coldPage .heroVisual {
width: 100%;
max-width: 610px;
margin: auto
}
.coldPage .coldStage {
height: 560px
}
.coldPage .coldScene {
height: 440px
}
.coldPage .conditionPanel {
width: 224px;
top: 78px
}
.coldPage .heroColdCard {
width: 279px
}
.coldPage .stageTag {
max-width: none;
right: 7px;
font-size: 10px
}
.coldPage .feature.reverse .visual {
order: 0
}
.coldPage .feature>.visual {
max-width: 650px;
width: 100%;
margin: auto
}
.coldPage .feature .copy {
max-width: 780px
}
.coldPage .feature h2 {
max-width: 760px;
font-size: 40px
}
.coldPage .visualInner {
padding: 26px
}
.coldPage .fl li {
font-size: 13px
}
.coldPage .fl {
max-width: 710px;
gap: 14px 20px
}
.coldPage .feature,
.coldPage .aiGrid {
gap: 32px
}
.coldPage .appBody {
padding: 20px
}
.coldPage .receivingPicture {
height: 185px;
margin: -20px -20px 17px
}
.coldPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 12px
}
.coldPage .outcomes {
grid-template-columns: repeat(2, 1fr)
}
.coldPage .workflow {
gap: 16px
}
.coldPage .flowStep {
grid-template-columns: 1fr;
padding: 20px
}
.coldPage .flowStep:not(:last-child):after {
right: -16px;
top: 28px
}
.coldPage .promptBox {
max-width: 660px;
width: 100%;
margin: auto;
padding: 25px
}
.coldPage .aiVisual {
max-width: 660px;
width: 100%;
margin: auto
}
.coldPage .aiScope {
max-width: 760px
}
.coldPage .auditLayout {
grid-template-columns: .85fr 1.15fr;
gap: 20px
}
.coldPage .auditDevice img {
height: 320px
}
.coldPage .auditCard {
padding: 22px
}
.coldPage .auditCount {
font-size: 45px
}
.coldPage .auditLine {
font-size: 12px
}
.coldPage .auditSubtitle {
font-size: 10px
}
.coldPage .auditCard h3 {
font-size: 20px
}
.coldPage .appBar strong {
font-size: 12px
}
.coldPage .appHeading>strong {
font-size: 17px
}
.coldPage .miniTable {
font-size: 11px
}
.coldPage .miniTable th {
font-size: 10px
}
.coldPage .bin strong {
font-size: 12px
}
.coldPage .bin small {
font-size: 10px
}
.coldPage .cta {
align-items: flex-start;
flex-direction: column
}
.coldPage .connectedGrid {
gap: 12px
}
.coldPage .connectedCard {
padding: 21px
}
.coldPage .connectedCard h3 {
font-size: 19px
}
.coldPage .hardwareGrid {
grid-template-columns: 1fr;
gap: 18px
}
.coldPage .hardwareCard {
display: grid;
grid-template-columns: .85fr 1.15fr
}
.coldPage .hardwareImage {
height: 100%;
min-height: 215px;
object-fit: contain;
border-right: 1px solid var(--line);
border-bottom: 0
}
.coldPage .hardwareCopy {
padding: 24px
}
.coldPage .integrationGrid {
grid-template-columns: repeat(3, 1fr)
}
.coldPage .integration {
font-size: 15px
}
.coldPage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 27px
}
.coldPage .final .ctaBtns {
flex-direction: row
}
.coldPage .final {
padding: 35px
}
.coldPage .final h2 {
max-width: 690px
}
.coldPage .quickNav {
margin-top: 23px
}
.coldPage .trust {
padding: 26px 0
}
.coldPage .hero .breadcrumb {
margin-bottom: 27px
}
}
@media(max-width:640px) {
.coldPage {
font-size: 15px
}
.coldPage .wrap {
width: calc(100% - 32px)
}
.coldPage section {
padding: 52px 0
}
.coldPage .hero {
padding: 22px 0 39px
} .coldPage h2,
.coldPage .feature h2 {
font-size: 33px;
line-height: 1.16
}
.coldPage h3 {
font-size: 20px
}
.coldPage .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.coldPage .ey .ico {
width: 14px;
height: 14px
}
.coldPage .lead {
font-size: 16px;
margin-top: 18px
}
.coldPage .actions {
gap: 9px;
margin-top: 23px
}
.coldPage .actions .btn {
font-size: 12px;
padding: 12px 14px;
gap: 7px
}
.coldPage .actions .btn .ico {
width: 15px;
height: 15px
}
.coldPage .heroPills {
gap: 6px;
margin-top: 17px
}
.coldPage .heroPills span {
font-size: 9px;
padding: 5px 8px
}
.coldPage .micro {
font-size: 10px;
margin-top: 13px
}
.coldPage .breadcrumb {
font-size: 8px;
gap: 4px;
margin-bottom: 24px
}
.coldPage .breadcrumb .ico {
width: 9px;
height: 9px
}
.coldPage .heroGrid {
gap: 24px
}
.coldPage .coldStage {
height: 530px;
max-width: 410px
}
.coldPage .coldScene {
top: 10px;
left: -23px;
width: 110%;
max-width: none;
height: 340px
}
.coldPage .stageLabel {
top: 0;
left: 0;
padding: 8px 10px;
font-size: 9px
}
.coldPage .stageLabel .ico {
width: 15px;
height: 15px
}
.coldPage .conditionPanel {
width: 175px;
top: 65px;
right: -1px;
border-radius: 23px;
padding: 6px
}
.coldPage .phoneScreen {
min-height: 0;
border-radius: 17px
}
.coldPage .phoneNotch {
height: 15px
}
.coldPage .phoneHead {
padding: 10px
}
.coldPage .phoneHead strong {
font-size: 10px
}
.coldPage .phoneHead small {
font-size: 8px
}
.coldPage .phoneBody {
padding: 10px
}
.coldPage .phoneBody>.badge {
font-size: 8px
}
.coldPage .scanStatus {
gap: 8px;
margin-top: 12px
}
.coldPage .scanStatus>.ico {
width: 25px;
height: 25px
}
.coldPage .scanStatus strong {
font-size: 25px
}
.coldPage .scanStatus small {
font-size: 8px
}
.coldPage .phoneLine {
font-size: 9px;
padding: 7px 0
}
.coldPage .phoneAlert {
font-size: 8px;
padding: 7px;
margin-top: 10px
}
.coldPage .phoneBody .progress {
margin: 10px 0;
height: 5px
}
.coldPage .heroColdCard {
width: 184px;
padding: 13px;
bottom: 10px;
left: 0;
border-radius: 12px
}
.coldPage .stockCardHead {
font-size: 8px;
margin-bottom: 11px
}
.coldPage .stockCardHead .ico {
width: 15px;
height: 15px
}
.coldPage .stockCardMetrics {
gap: 7px
}
.coldPage .stockCardMetrics strong {
font-size: 24px
}
.coldPage .stockCardMetrics span {
font-size: 8px
}
.coldPage .stockCardMetrics>div+div {
padding-left: 12px
}
.coldPage .stageTag {
right: 0;
bottom: 3px;
font-size: 8px;
max-width: 140px;
line-height: 1.7;
padding: 7px 9px
}
.coldPage .stageTag .ico {
width: 12px;
height: 12px
}
.coldPage .heroVisual figcaption {
font-size: 9px;
margin-top: 12px
}
.coldPage .trustLabel {
font-size: 11px;
padding-inline: 10px
}
.coldPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 8px
}
.coldPage .logo {
height: 52px;
padding: 6px
}
.coldPage .clientLogo {
height: 35px
}
.coldPage .logoFallback {
font-size: 9px
}
.coldPage .quickNav {
gap: 10px 17px;
font-size: 11px;
justify-content: flex-start;
line-height: 1.4;
margin-top: 24px
}
.coldPage .outcomes {
gap: 12px
}
.coldPage .outcome {
padding: 20px 16px
}
.coldPage .outcome h3 {
font-size: 18px;
line-height: 1.18
}
.coldPage .outcome p {
font-size: 12px;
line-height: 1.7
}
.coldPage .outcome>.ico {
width: 25px;
height: 25px;
margin-bottom: 15px
}
.coldPage .sectionHead {
margin-bottom: 28px
}
.coldPage .sectionHead p {
font-size: 15px;
margin-top: 15px
}
.coldPage .workflow {
grid-template-columns: 1fr;
gap: 12px
}
.coldPage .flowStep {
grid-template-columns: 39px 1fr;
padding: 21px;
gap: 16px
}
.coldPage .flowStep:not(:last-child):after {
display: none
}
.coldPage .flowNumber {
width: 37px;
height: 37px;
font-size: 13px
}
.coldPage .flowStep h3 {
font-size: 19px
}
.coldPage .flowStep p {
font-size: 13px
}
.coldPage .copy>p {
font-size: 15px;
line-height: 1.8;
margin-top: 16px
}
.coldPage .fl {
gap: 13px 12px
}
.coldPage .fl li {
font-size: 12px;
gap: 7px
}
.coldPage .tick {
width: 18px;
height: 18px;
flex-basis: 18px;
margin-top: 1px
}
.coldPage .tick .ico {
width: 10px;
height: 10px
}
.coldPage .capabilityMore summary {
font-size: 12px;
min-height: 40px
}
.coldPage .capabilityMore {
margin-top: 18px !important
}
.coldPage .visualInner {
padding: 15px;
border-radius: 17px
}
.coldPage .visual figcaption {
font-size: 9px;
margin-top: 9px
}
.coldPage .feature {
gap: 25px
}
.coldPage .appBar {
padding: 10px 11px;
gap: 7px
}
.coldPage .appBar strong {
font-size: 10px
}
.coldPage .appMark {
width: 23px;
height: 23px
}
.coldPage .appMark .ico {
width: 13px;
height: 13px
}
.coldPage .appBody {
padding: 14px
}
.coldPage .appSub {
font-size: 9px;
margin-bottom: 12px
}
.coldPage .appHeading {
gap: 7px;
margin-bottom: 12px
}
.coldPage .appHeading>strong {
font-size: 14px
}
.coldPage .badge {
font-size: 8px;
padding: 4px 6px
}
.coldPage .miniTabs {
font-size: 9px;
gap: 14px;
margin-bottom: 14px
}
.coldPage .mapLabel {
font-size: 9px;
margin-bottom: 10px
}
.coldPage .binGrid {
gap: 7px
}
.coldPage .bin {
padding: 10px 7px
}
.coldPage .bin.selected {
padding: 9px 6px
}
.coldPage .bin strong {
font-size: 10px
}
.coldPage .bin small {
font-size: 8px
}
.coldPage .binStock {
gap: 3px;
height: 20px;
margin-top: 7px
}
.coldPage .binStock span {
width: 11px;
height: 15px
}
.coldPage .binStock span:after {
left: 3px;
width: 3px;
height: 3px
}
.coldPage .stockRecord {
gap: 9px;
flex-wrap: wrap
}
.coldPage .stockRecord>.ico {
width: 30px;
height: 30px;
padding: 6px
}
.coldPage .stockRecord strong {
font-size: 10px
}
.coldPage .stockRecord small {
font-size: 8px
}
.coldPage .stockRecord>.badge {
font-size: 8px
}
.coldPage .miniMeta {
gap: 5px 12px;
font-size: 8px
}
.coldPage .lightNote {
font-size: 9px;
gap: 7px;
padding: 9px
}
.coldPage .lightNote .ico {
width: 14px;
height: 14px
}
.coldPage .receivingPicture {
height: 149px;
margin: -14px -14px 14px
}
.coldPage .metricsThree {
gap: 7px
}
.coldPage .metricBox {
padding: 10px 8px
}
.coldPage .metricBox strong {
font-size: 23px
}
.coldPage .metricBox span {
font-size: 8px
}
.coldPage .miniTable {
font-size: 9px;
line-height: 1.5
}
.coldPage .miniTable th {
font-size: 8px
}
.coldPage .miniTable :where(th, td) {
padding: 9px 4px
}
.coldPage .miniTable small {
font-size: 8px
}
.coldPage .miniTable .badge {
font-size: 7px;
padding: 3px 4px
}
.coldPage .inlineNotice {
font-size: 9px;
padding: 10px;
gap: 7px
}
.coldPage .inlineNotice .ico {
width: 15px;
height: 15px
}
.coldPage .auditLayout {
gap: 10px;
grid-template-columns: .76fr 1.24fr
}
.coldPage .auditDevice img {
height: 278px;
width: 195%;
margin-left: -50%
}
.coldPage .auditDevice span {
font-size: 8px
}
.coldPage .auditCard {
padding: 17px 12px
}
.coldPage .auditCard h3 {
font-size: 16px;
margin-top: 12px
}
.coldPage .auditCount {
font-size: 35px;
margin-top: 15px
}
.coldPage .auditCount small {
font-size: 10px
}
.coldPage .auditSubtitle {
font-size: 8px
}
.coldPage .auditLine {
font-size: 9px;
padding: 8px 0
}
.coldPage .locator {
gap: 9px;
padding: 12px;
margin-top: 13px
}
.coldPage .locator>.ico {
width: 23px;
height: 23px
}
.coldPage .locator strong {
font-size: 10px
}
.coldPage .locator small {
font-size: 8px
}
.coldPage .signal {
gap: 2px
}
.coldPage .signal i {
width: 3px
}
.coldPage .transferRoute {
grid-template-columns: 1fr 32px 1fr;
gap: 7px
}
.coldPage .routeStop {
padding: 12px 7px
}
.coldPage .routeStop>.ico {
width: 29px;
height: 29px;
margin-bottom: 8px
}
.coldPage .routeStop strong {
font-size: 11px
}
.coldPage .routeStop small {
font-size: 8px
}
.coldPage .routeArrow {
font-size: 7px
}
.coldPage .routeArrow .ico {
width: 20px;
height: 20px
}
.coldPage .timeline {
margin-top: 15px
}
.coldPage .timeline li {
gap: 7px;
grid-template-columns: 21px 1fr auto
}
.coldPage .timeline strong {
font-size: 10px
}
.coldPage .timeline small,
.coldPage .timeline time {
font-size: 8px
}
.coldPage .timelineDot {
width: 20px;
height: 20px
}
.coldPage .levelChart {
padding: 14px
}
.coldPage .purchaseRequest {
padding: 12px;
gap: 9px
}
.coldPage .purchaseRequest strong {
font-size: 10px
}
.coldPage .purchaseRequest small {
font-size: 8px
}
.coldPage .purchaseRequest .qty {
font-size: 22px
}
.coldPage .ownerCard {
padding: 12px
}
.coldPage .ownerCard strong {
font-size: 25px
}
.coldPage .ownerCard span {
font-size: 8px
}
.coldPage .exportStrip {
font-size: 8px;
gap: 5px
}
.coldPage .exportStrip span {
margin-left: 0
}
.coldPage .promptBox {
padding: 18px;
border-radius: 15px
}
.coldPage .aiTop {
margin-bottom: 17px;
gap: 8px
}
.coldPage .aiBrand strong {
font-size: 15px
}
.coldPage .aiTop>span {
font-size: 8px
}
.coldPage .aiBrand>.ico {
width: 22px;
height: 22px
}
.coldPage .question {
font-size: 12px;
padding: 12px;
margin-left: 20px
}
.coldPage .aiAnswer {
padding: 15px
}
.coldPage .aiAnswer .answerTitle {
font-size: 13px
}
.coldPage .aiAnswer p {
font-size: 10px
}
.coldPage .aiItem {
padding: 11px;
gap: 8px
}
.coldPage .aiItem strong {
font-size: 11px
}
.coldPage .aiItem small {
font-size: 8px
}
.coldPage .sourceChip {
font-size: 8px
}
.coldPage .aiReview {
font-size: 9px !important
}
.coldPage .aiSample {
font-size: 9px
}
.coldPage .aiScope {
font-size: 10px !important
}
.coldPage .ctaSection {
padding: 0 0 48px
}
.coldPage .cta {
padding: 22px;
margin-top: 0
}
.coldPage .cta h3 {
font-size: 21px
}
.coldPage .cta p {
font-size: 12px
}
.coldPage .ctaBtns {
width: 100%
}
.coldPage .ctaBtns .btn {
font-size: 12px;
padding: 12px 14px;
flex: 1
}
.coldPage .connectedGrid {
grid-template-columns: 1fr;
gap: 12px
}
.coldPage .connectedCard {
padding: 24px
}
.coldPage .connectedCard h3 {
font-size: 21px
}
.coldPage .connectedCard p {
font-size: 13px
}
.coldPage .connectedCard>.ico {
margin-bottom: 16px
}
.coldPage .hardwareCard {
display: flex
}
.coldPage .hardwareImage {
height: 185px;
min-height: 0;
border-bottom: 1px solid var(--line);
border-right: 0
}
.coldPage .hardwareCopy {
padding: 22px
}
.coldPage .hardwareCopy h3 {
font-size: 21px
}
.coldPage .hardwareCopy p {
font-size: 13px
}
.coldPage .hardwareNote {
font-size: 11px;
padding: 17px
}
.coldPage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px
}
.coldPage .integration {
height: 77px;
font-size: 14px
}
.coldPage .integration:last-child {
grid-column: 1/-1
}
.coldPage .integrationFlow {
grid-template-columns: 1fr;
padding: 23px;
gap: 13px
}
.coldPage .integrationFlow>.ico {
transform: rotate(90deg);
width: 20px;
height: 20px;
margin-left: 7px
}
.coldPage .integrationFlow strong {
font-size: 14px
}
.coldPage .integrationFlow small {
font-size: 10px
}
.coldPage .integrationNote {
text-align: left;
font-size: 11px !important
}
.coldPage .rolloutGrid {
gap: 25px 20px
}
.coldPage .rolloutStep h3 {
font-size: 18px
}
.coldPage .rolloutStep p {
font-size: 12px
}
.coldPage .pilotMeasures {
gap: 13px;
padding: 18px;
font-size: 10px
}
.coldPage .pilotMeasures strong {
width: 100%
}
.coldPage .faq details {
padding: 17px 16px;
margin-bottom: 10px
}
.coldPage .faq summary {
font-size: 13px;
line-height: 1.6
}
.coldPage .faq details p {
font-size: 13px;
line-height: 1.85
}
.coldPage .final {
padding: 29px 24px;
border-radius: 0;
gap: 24px
}
.coldPage .final h2 {
font-size: 32px
}
.coldPage .final p {
font-size: 14px
}
.coldPage .final .ctaBtns {
flex-direction: column
}
.coldPage .final .btn {
width: 100%;
min-height: 47px
}
.coldPage .contactRow {
flex-direction: column;
align-items: flex-start;
font-size: 11px;
gap: 12px
}
.coldPage .footerRow {
align-items: flex-start;
gap: 17px
}
.coldPage .footerLinks {
gap: 10px 17px;
font-size: 10px
}
.coldPage .pageFooter {
padding: 23px 0
}
}
@media(max-width:359px) { .coldPage .actions {
flex-direction: column
}
.coldPage .actions .btn {
width: 100%
}
.coldPage .coldStage {
height: 530px
}
.coldPage .conditionPanel {
width: 163px;
top: 67px
}
.coldPage .heroColdCard {
width: 175px
}
.coldPage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px
}
.coldPage .stockCardMetrics strong {
font-size: 22px
}
.coldPage .stockCardMetrics span {
font-size: 7px
}
.coldPage .coldScene {
left: -22px;
width: 114%;
top: 18px;
height: 315px
}
.coldPage .fl {
grid-template-columns: 1fr
}
.coldPage .outcomes {
grid-template-columns: 1fr
}
.coldPage .logos {
grid-template-columns: repeat(2, 1fr)
}
.coldPage .logoFallback {
font-size: 11px
}
.coldPage .visualInner {
padding: 12px
}
.coldPage .appBody {
padding: 12px
}
.coldPage .receivingPicture {
margin: -12px -12px 12px
}
.coldPage .auditCard {
padding: 15px 10px
}
.coldPage .auditCount {
font-size: 31px
}
.coldPage .auditCard h3 {
font-size: 14px
}
.coldPage .auditLayout {
gap: 7px
}
.coldPage .rolloutGrid {
grid-template-columns: 1fr
}
.coldPage .miniTable {
font-size: 8px
}
.coldPage .ownerCard strong {
font-size: 23px
}
} .coldPage .coldStage {
height: 550px;
max-width: 610px
}
.coldPage .coldScene {
top: 105px;
left: -33px;
width: 107%;
max-width: none;
height: 390px;
object-fit: contain
}
.coldPage .stageLabel {
top: 0;
left: 0;
font-size: 10px
}
.coldPage .conditionPanel {
top: 47px;
right: 0;
width: 221px;
padding: 0;
border: 1px solid #B7D8E8;
border-radius: 15px;
background: #fff;
box-shadow: 0 10px 24px rgba(6, 59, 92, .06);
overflow: hidden
}
.coldPage .conditionHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
padding: 12px;
background: #F2FAFE;
border-bottom: 1px solid var(--line)
}
.coldPage .conditionHead strong {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #174157
}
.coldPage .conditionHead .ico {
width: 18px;
height: 18px;
color: #007FC5
}
.coldPage .conditionHead .badge {
font-size: 8px
}
.coldPage .conditionBody {
padding: 15px
}
.coldPage .conditionBody>small {
display: block;
font-size: 10px;
color: #5E798D
}
.coldPage .heroTemp {
display: block;
font-size: 41px;
line-height: 1.2;
letter-spacing: -.045em;
color: #183E55;
margin: 4px 0 7px
}
.coldPage .heroTemp span {
font-size: 23px;
letter-spacing: -.02em
}
.coldPage .heroMeasure {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 9px 0;
border-top: 1px solid #D9E8F1;
font-size: 9px;
line-height: 1.55;
color: #5B778B
}
.coldPage .heroMeasure b {
color: #214A62;
text-align: right
}
.coldPage .conditionFoot {
font-size: 9px;
line-height: 1.6;
background: #FFF7D6;
border-top: 1px solid #F0E1AA;
padding: 10px 13px;
color: #695316
}
.coldPage .heroColdCard {
bottom: 0;
left: 0;
width: 257px;
background: #0C202E;
box-shadow: none
}
.coldPage .stageTag {
bottom: 12px;
right: 0;
font-size: 9px;
max-width: 207px
}
.coldPage .dataFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin: 15px 0
}
.coldPage .dataFields>div {
background: #F6FAFD;
border: 1px solid #D4E7F0;
padding: 11px;
border-radius: 9px;
min-width: 0
}
.coldPage .dataFields small {
font-size: 9px;
color: #59768A;
display: block;
margin-bottom: 4px
}
.coldPage .dataFields strong {
font-size: 11px;
color: #214960;
line-height: 1.45;
display: block
}
.coldPage .monitorTop {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 16px;
margin-bottom: 16px;
align-items: center
}
.coldPage .readingLabel {
font-size: 10px;
color: #5B798D
}
.coldPage .readingValue {
font-size: 45px;
line-height: 1.15;
letter-spacing: -.045em;
color: #123E57;
font-weight: 800;
margin: 6px 0
}
.coldPage .readingValue span {
font-size: 24px
}
.coldPage .readingMeta {
display: grid;
gap: 8px
}
.coldPage .readingMeta>div {
font-size: 9px;
color: #58748A;
border: 1px solid #D8E7F0;
border-radius: 8px;
padding: 10px;
background: #F8FBFD
}
.coldPage .readingMeta strong {
display: block;
font-size: 12px;
color: #1B4963;
margin-top: 2px
}
.coldPage .temperatureChart {
padding: 15px 12px 11px;
border: 1px solid #D5E7EF;
border-radius: 11px;
background: #FAFCFE
}
.coldPage .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: #42677D;
font-size: 10px;
font-weight: 750;
margin-bottom: 13px
}
.coldPage .temperatureChart svg {
display: block;
width: 100%;
height: auto;
overflow: visible
}
.coldPage .chartLegend {
display: flex;
gap: 9px 15px;
align-items: center;
flex-wrap: wrap;
font-size: 9px;
color: #5A768A;
margin-top: 10px
}
.coldPage .chartLegend span {
display: inline-flex;
align-items: center;
gap: 5px
}
.coldPage .chartLegend i {
width: 12px;
height: 3px;
background: #0076dd;
display: inline-block
}
.coldPage .chartLegend .limit {
background: #C49C22
}
.coldPage .conditionHint {
font-size: 9px !important;
color: #57778B !important;
margin-top: 13px;
line-height: 1.7
}
.coldPage .zoneGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 16px
}
.coldPage .zoneTile {
background: #F3FAFE;
border: 1px solid #CDE3F0;
border-radius: 10px;
padding: 13px 10px;
min-width: 0
}
.coldPage .zoneTile.warning {
border-color: #E4C46C;
background: #FFFAE9
}
.coldPage .zoneTile .ico {
width: 21px;
height: 21px;
color: #0076dd;
margin-bottom: 11px
}
.coldPage .zoneTile strong {
font-size: 12px;
display: block;
color: #214D65
}
.coldPage .zoneTile b {
font-size: 22px;
display: block;
color: #173E56;
margin: 6px 0 3px;
letter-spacing: -.035em
}
.coldPage .zoneTile small {
font-size: 8px;
display: block;
color: #577389
}
.coldPage .zoneTile .badge {
margin-top: 10px;
font-size: 8px
}
.coldPage .batchFocus {
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 11px;
align-items: center;
background: #fff;
border: 1px solid #B9D8E8;
border-left: 4px solid #0076dd;
border-radius: 10px;
padding: 15px
}
.coldPage .batchFocus>.ico {
width: 31px;
height: 31px;
color: #007FC5
}
.coldPage .batchFocus strong {
font-size: 13px;
color: #19435C;
display: block
}
.coldPage .batchFocus small {
display: block;
font-size: 9px;
color: #60788B;
margin-top: 3px
}
.coldPage .batchQty {
font-size: 27px;
font-weight: 800;
line-height: 1;
color: #123E57;
text-align: right
}
.coldPage .batchQty small {
font-size: 9px;
font-weight: 500
}
.coldPage .shelfHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 10px;
color: #56778B;
margin-bottom: 15px
}
.coldPage .expiryFocus {
display: grid;
grid-template-columns: 67px 1fr;
align-items: center;
gap: 16px;
border: 1px solid #E7D498;
background: #FFF9E5;
border-radius: 12px;
padding: 17px;
margin-bottom: 18px
}
.coldPage .expiryDays {
text-align: center;
border-right: 1px solid #E2CD89;
padding-right: 12px
}
.coldPage .expiryDays strong {
font-size: 36px;
letter-spacing: -.05em;
line-height: 1;
color: #183C51;
display: block
}
.coldPage .expiryDays span {
font-size: 9px;
color: #715A1C
}
.coldPage .expiryFocus>div:last-child strong {
font-size: 14px;
color: #284B5E;
display: block
}
.coldPage .expiryFocus small {
font-size: 10px;
color: #6D623B;
display: block;
line-height: 1.7;
margin-top: 5px
}
.coldPage .expiryTable {
table-layout: fixed
}
.coldPage .expiryTable th:nth-child(1) {
width: 28%
}
.coldPage .expiryTable th:nth-child(2) {
width: 27%
}
.coldPage .expiryTable th:nth-child(3) {
width: 17%
}
.coldPage .expiryTable th:nth-child(4) {
width: 28%
}
.coldPage .rankTag {
display: inline-flex;
align-items: center;
gap: 5px;
color: #0C7550;
font-size: 9px;
background: #EAF8F3;
border-radius: 5px;
padding: 5px 6px
}
.coldPage .coldGatePicture {
height: 190px;
margin: -18px -18px 16px;
background: #EFF8FD;
border-bottom: 1px solid #D5E7F0
}
.coldPage .coldGatePicture img {
height: 100%;
width: 100%;
object-fit: contain
}
.coldPage .gateRoute {
display: flex;
gap: 11px;
align-items: center;
justify-content: space-between;
color: #365F77;
font-size: 11px;
font-weight: 750;
margin-bottom: 15px
}
.coldPage .gateRoute>.ico {
width: 20px;
height: 20px;
color: #007FC5
}
.coldPage .exceptionHeader {
background: #FFF8DE;
border: 1px solid #ECD58F;
border-left: 4px solid #E2AF21;
border-radius: 11px;
padding: 16px
}
.coldPage .exceptionHeader .top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 10px;
color: #856C22
}
.coldPage .exceptionHeader strong {
display: block;
font-size: 17px;
color: #1B4156;
margin-top: 11px
}
.coldPage .exceptionHeader p {
font-size: 10px;
color: #6F613A;
line-height: 1.8;
margin-top: 8px
}
.coldPage .reportPack {
border: 1px solid #D3E6EF;
border-radius: 10px;
padding: 14px;
background: #F4FAFD;
margin-top: 17px
}
.coldPage .reportPack strong {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
color: #24516B;
margin-bottom: 9px
}
.coldPage .reportPack .ico {
width: 16px;
height: 16px;
color: #007FC5
}
.coldPage .reportChips {
display: flex;
flex-wrap: wrap;
gap: 6px
}
.coldPage .reportChips span {
font-size: 9px;
padding: 5px 7px;
border: 1px solid #C5DDEA;
border-radius: 5px;
background: #fff;
color: #4F7085
}
.coldPage .plantEquipment {
display: flex;
gap: 17px;
align-items: center;
background: #F0F8FC;
border: 1px solid #CDE2ED;
padding: 17px;
border-radius: 12px;
margin-bottom: 16px
}
.coldPage .coolingUnit {
position: relative;
width: 121px;
min-width: 121px;
height: 88px;
border-radius: 11px;
background: #D4E6F0;
border: 2px solid #719BB0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px
}
.coldPage .coolingUnit:before {
content: "";
position: absolute;
top: 7px;
left: 10px;
right: 10px;
height: 5px;
border-top: 2px solid #92B8CD;
border-bottom: 2px solid #92B8CD
}
.coldPage .coolingUnit:after {
content: "";
position: absolute;
bottom: -7px;
left: 15px;
right: 15px;
height: 5px;
border-left: 7px solid #63879C;
border-right: 7px solid #63879C
}
.coldPage .unitFan {
width: 42px;
height: 42px;
border: 3px solid #52778D;
border-radius: 50%;
background: #F7FCFF;
display: grid;
place-items: center;
margin-top: 11px
}
.coldPage .unitFan .ico {
width: 31px;
height: 31px;
color: #2E5C75;
stroke-width: 1.2
}
.coldPage .plantEquipment strong {
display: block;
font-size: 15px;
color: #184660;
margin-bottom: 5px
}
.coldPage .plantEquipment small {
display: block;
font-size: 10px;
color: #5C7B8D;
line-height: 1.65
}
.coldPage .jobCard {
background: #fff;
border: 1px solid #CDE2EC;
border-radius: 12px;
padding: 17px
}
.coldPage .jobTop {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
color: #5D7B8F;
font-size: 10px
}
.coldPage .jobCard>strong {
display: block;
font-size: 17px;
color: #133F59;
margin-top: 13px;
line-height: 1.35
}
.coldPage .jobCard>p {
font-size: 11px;
color: #5B778B;
margin-top: 7px;
line-height: 1.7
}
.coldPage .taskChecks {
padding: 0;
list-style: none;
display: grid;
gap: 9px;
margin: 16px 0 0
}
.coldPage .taskChecks li {
display: flex;
gap: 7px;
align-items: center;
font-size: 11px;
line-height: 1.55;
color: #30586F
}
.coldPage .taskChecks .ico {
width: 15px;
height: 15px;
color: #007FC5
}
.coldPage .flowNote {
font-size: 12px;
line-height: 1.7;
color: #5E798B;
margin-top: 22px;
text-align: center
}
@media(max-width:1100px) {
.coldPage .coldStage {
height: 545px
}
.coldPage .coldScene {
left: -21px;
width: 105%;
height: 351px;
top: 137px
}
.coldPage .conditionPanel {
width: 203px
}
.coldPage .heroColdCard {
width: 221px
}
.coldPage .stageTag {
max-width: 179px;
font-size: 8px
}
.coldPage .zoneTile {
padding: 11px 8px
}
.coldPage .zoneTile b {
font-size: 20px
}
.coldPage .coldGatePicture {
margin: -15px -15px 15px
}
.coldPage .plantEquipment {
gap: 12px;
padding: 14px
}
.coldPage .coolingUnit {
width: 105px;
min-width: 105px
}
.coldPage .unitFan {
width: 36px;
height: 36px
}
.coldPage .unitFan .ico {
width: 26px;
height: 26px
}
}
@media(max-width:960px) {
.coldPage .coldStage {
height: 550px
}
.coldPage .coldScene {
height: 390px;
top: 105px;
left: -28px
}
.coldPage .conditionPanel {
width: 229px
}
.coldPage .heroColdCard {
width: 257px
}
.coldPage .stageTag {
max-width: 207px;
font-size: 9px
}
.coldPage .coldGatePicture {
height: 205px;
margin: -20px -20px 17px
}
.coldPage .zoneTile {
padding: 17px 13px
}
.coldPage .zoneTile b {
font-size: 25px
}
.coldPage .coolingUnit {
width: 121px;
min-width: 121px
}
.coldPage .unitFan {
width: 42px;
height: 42px
}
.coldPage .unitFan .ico {
width: 31px;
height: 31px
}
}
@media(max-width:640px) {
.coldPage .coldStage {
height: 564px;
max-width: 410px
}
.coldPage .coldScene {
top: 193px;
left: -10px;
width: 105%;
height: 275px
}
.coldPage .conditionPanel {
top: 49px;
right: 0;
width: 194px
}
.coldPage .conditionHead {
padding: 10px
}
.coldPage .conditionBody {
padding: 12px
}
.coldPage .heroTemp {
font-size: 35px
}
.coldPage .heroMeasure {
font-size: 8px;
padding: 7px 0
}
.coldPage .conditionFoot {
font-size: 8px;
padding: 8px 11px
}
.coldPage .stageLabel {
font-size: 9px;
top: 0
}
.coldPage .heroColdCard {
width: 189px;
bottom: 0;
padding: 13px
}
.coldPage .stageTag {
max-width: 137px;
font-size: 8px;
bottom: 7px
}
.coldPage .monitorTop {
gap: 11px
}
.coldPage .readingValue {
font-size: 36px
}
.coldPage .readingValue span {
font-size: 20px
}
.coldPage .readingMeta>div {
padding: 8px;
font-size: 8px
}
.coldPage .readingMeta strong {
font-size: 11px
}
.coldPage .chartTitle {
font-size: 9px
}
.coldPage .temperatureChart {
padding: 13px 10px 10px
}
.coldPage .chartLegend {
font-size: 8px;
gap: 8px
}
.coldPage .conditionHint {
font-size: 8px !important
}
.coldPage .zoneGrid {
gap: 7px
}
.coldPage .zoneTile {
padding: 11px 7px
}
.coldPage .zoneTile strong {
font-size: 10px
}
.coldPage .zoneTile b {
font-size: 19px
}
.coldPage .zoneTile .badge {
font-size: 7px;
padding: 4px
}
.coldPage .zoneTile small {
font-size: 7px
}
.coldPage .batchFocus {
grid-template-columns: 27px 1fr auto;
gap: 8px;
padding: 12px
}
.coldPage .batchFocus>.ico {
width: 26px;
height: 26px
}
.coldPage .batchFocus strong {
font-size: 11px
}
.coldPage .batchFocus small {
font-size: 8px
}
.coldPage .batchQty {
font-size: 24px
}
.coldPage .dataFields {
gap: 7px
}
.coldPage .dataFields>div {
padding: 9px
}
.coldPage .dataFields small {
font-size: 8px
}
.coldPage .dataFields strong {
font-size: 10px
}
.coldPage .shelfHeader {
font-size: 9px
}
.coldPage .expiryFocus {
gap: 12px;
padding: 14px;
grid-template-columns: 58px 1fr
}
.coldPage .expiryDays strong {
font-size: 31px
}
.coldPage .expiryFocus>div:last-child strong {
font-size: 12px
}
.coldPage .expiryFocus small {
font-size: 9px
}
.coldPage .rankTag {
font-size: 8px;
padding: 4px
}
.coldPage .coldGatePicture {
height: 155px;
margin: -14px -14px 14px
}
.coldPage .gateRoute {
font-size: 10px;
gap: 8px
}
.coldPage .exceptionHeader {
padding: 14px
}
.coldPage .exceptionHeader .top {
font-size: 9px
}
.coldPage .exceptionHeader strong {
font-size: 15px
}
.coldPage .exceptionHeader p {
font-size: 9px
}
.coldPage .reportPack {
padding: 12px
}
.coldPage .reportChips span {
font-size: 8px
}
.coldPage .plantEquipment {
padding: 13px;
gap: 13px
}
.coldPage .coolingUnit {
width: 99px;
min-width: 99px;
height: 80px
}
.coldPage .unitFan {
width: 34px;
height: 34px
}
.coldPage .unitFan .ico {
width: 25px;
height: 25px
}
.coldPage .plantEquipment strong {
font-size: 12px
}
.coldPage .plantEquipment small {
font-size: 9px
}
.coldPage .jobCard {
padding: 14px
}
.coldPage .jobTop {
font-size: 9px
}
.coldPage .jobCard>strong {
font-size: 15px
}
.coldPage .jobCard>p,
.coldPage .taskChecks li {
font-size: 10px
}
.coldPage .flowNote {
font-size: 11px;
text-align: left
}
}
@media(max-width:359px) {
.coldPage .conditionPanel {
width: 183px
}
.coldPage .coldStage {
height: 566px
}
.coldPage .heroColdCard {
width: 175px
}
.coldPage .stageTag {
max-width: 101px;
line-height: 1.65
}
.coldPage .coldScene {
left: -10px;
top: 211px;
height: 251px
}
.coldPage .zoneGrid {
gap: 5px
}
.coldPage .zoneTile {
padding: 10px 5px
}
.coldPage .zoneTile b {
font-size: 17px
}
.coldPage .zoneTile .badge {
font-size: 6px
}
.coldPage .coldGatePicture {
margin: -12px -12px 12px
}
.coldPage .plantEquipment {
flex-wrap: wrap
}
.coldPage .readingValue {
font-size: 32px
}
.coldPage .rankTag {
font-size: 7px;
padding: 3px
}
}   .personnelPage {
--brand: #00A8F8;
--brand2: #0076dd;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--black2: #171717;
--red: #E25757;
--purple: #7C67E8;
--shadow: 0 18px 48px rgba(6, 59, 92, .09); --max: 1320px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
isolation: isolate;
overflow-wrap: break-word;
font-size: 16px
}
.personnelPage *,
.personnelPage *::before,
.personnelPage *::after {
box-sizing: border-box
}
.personnelPage :where(h1, h2, h3, p, figure, ul, ol, dl, dd) {
margin: 0
}
.personnelPage a {
color: inherit;
text-decoration: none
}
.personnelPage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.personnelPage .ico {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle
}
.personnelPage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto
}
.personnelPage section {
padding: 76px 0;
scroll-margin-top: 30px
}
.personnelPage [id] {
scroll-margin-top: 28px
}
.personnelPage h1,
.personnelPage h2,
.personnelPage h3 {
line-height: 1.12;
letter-spacing: -.035em;
font-weight: 780;
color: var(--black)
} .personnelPage h2 {
font-size: clamp(31px, 3.35vw, 45px)
}
.personnelPage h3 {
font-size: 21px
}
.personnelPage p {
color: var(--muted)
}
.personnelPage .ey {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 12px;
font-weight: 800;
margin-bottom: 18px
}
.personnelPage .ey .ico {
width: 16px;
height: 16px
}
.personnelPage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
line-height: 1.75
}
.personnelPage .btn {
display: inline-flex;
gap: 12px;
min-height: 49px;
padding: 11px 20px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: background .2s ease;
line-height: 1.45;
font-size: 14px;
text-align: center
}
.personnelPage .btn .ico {
width: 18px;
height: 18px
}
.personnelPage .btn.black {
background: var(--black);
color: #fff
}
.personnelPage .btn.black:hover {
background: #292929
}
.personnelPage .btn.yellow {
background: var(--yellow);
color: #000
}
.personnelPage .btn.yellow:hover {
background: #FFDA67
}
.personnelPage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.personnelPage .btn.outline:hover {
background: var(--sky)
}
.personnelPage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.personnelPage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.personnelPage .soft {
background: var(--sky2)
}
.personnelPage .sectionHead {
max-width: 820px;
margin-bottom: 35px
}
.personnelPage .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.personnelPage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.personnelPage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.personnelPage .dark h2,
.personnelPage .dark h3 {
color: #fff
}
.personnelPage .dark p {
color: #D6D6D6
}
.personnelPage .dark .ey {
background: var(--yellow);
color: var(--black)
}
.personnelPage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
.personnelPage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 99;
background: #fff;
padding: 12px 20px;
color: var(--navy)
}
.personnelPage .skipLink:focus {
top: 10px
} .personnelPage .hero {
padding: 30px 0 64px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .18), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .14), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.personnelPage .breadcrumb {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
font-size: 10px;
color: #536C7D;
margin-bottom: 31px
}
.personnelPage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px
}
.personnelPage .breadcrumb .ico {
width: 11px;
height: 11px
}
.personnelPage .heroGrid {
display: grid;
grid-template-columns: 1.25fr 1.04fr;
gap: 38px;
align-items: center
}
.personnelPage .hero h1 span {
color: var(--brand2)
}
.personnelPage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px
}
.personnelPage .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.personnelPage .heroVisual {
min-width: 0;
position: relative
}
.personnelPage .personnelStageBase {
position: relative;
height: 560px;
max-width: 610px;
margin: auto
}
.personnelPage .personnelSceneBase {
position: absolute;
top: 13px;
left: -15px;
width: 100%;
height: 440px;
object-fit: contain
}
.personnelPage .stageLabel {
position: absolute;
left: 15px;
top: 3px;
background: #fff;
border: 1px solid #C6E5F3;
padding: 10px 13px;
border-radius: 10px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: var(--navy);
font-weight: 750
}
.personnelPage .stageLabel .ico {
width: 18px;
height: 18px;
color: var(--brand2)
}
.personnelPage .personnelPanelBase {
position: absolute;
right: -1px;
top: 85px;
width: 212px;
padding: 7px;
border-radius: 28px;
background: #102435;
border: 1px solid #254A62;
box-shadow: 0 14px 30px rgba(6, 59, 92, .14)
}
.personnelPage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden;
min-height: 328px
}
.personnelPage .phoneNotch {
height: 20px;
background: #102435;
display: flex;
justify-content: center;
align-items: center
}
.personnelPage .phoneNotch:before {
content: "";
height: 5px;
width: 53px;
border-radius: 9px;
background: #3F5665
}
.personnelPage .phoneHead {
padding: 13px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.personnelPage .phoneHead strong {
font-size: 12px;
display: block
}
.personnelPage .phoneHead small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.personnelPage .phoneBody {
padding: 12px
}
.personnelPage .phoneBody>.badge {
font-size: 9px
}
.personnelPage .scanStatus {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px
}
.personnelPage .scanStatus>.ico {
width: 31px;
height: 31px;
color: var(--brand2)
}
.personnelPage .scanStatus strong {
font-size: 29px;
line-height: 1;
display: block;
letter-spacing: -.03em
}
.personnelPage .scanStatus small {
font-size: 9px;
color: var(--muted)
}
.personnelPage .phoneLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
border-bottom: 1px solid var(--line);
padding: 9px 0
}
.personnelPage .phoneLine:last-child {
border: 0
}
.personnelPage .phoneAlert {
padding: 9px;
background: var(--yellowsoft);
border: 1px solid #F0DFAB;
border-radius: 7px;
font-size: 9px;
margin-top: 12px;
color: #66500F
}
.personnelPage .personnelCardBase {
position: absolute;
left: 3px;
bottom: 2px;
width: 274px;
background: #111820;
border: 1px solid #263D4D;
color: #fff;
border-radius: 15px;
padding: 17px 18px
}
.personnelPage .stockCardHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
margin-bottom: 13px;
color: #D2DFE7
}
.personnelPage .stockCardHead .ico {
width: 18px;
height: 18px;
color: var(--yellow)
}
.personnelPage .stockCardMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px
}
.personnelPage .stockCardMetrics strong {
display: block;
font-size: 27px;
color: #fff;
line-height: 1.15;
letter-spacing: -.04em
}
.personnelPage .stockCardMetrics span {
font-size: 9px;
color: #B6CCD9
}
.personnelPage .stockCardMetrics>div+div {
border-left: 1px solid #395364;
padding-left: 18px
}
.personnelPage .stageTag {
position: absolute;
right: 8px;
bottom: 8px;
background: var(--yellow);
color: #0B0B0B;
border-radius: 9px;
padding: 8px 10px;
max-width: 208px;
font-size: 10px;
font-weight: 800
}
.personnelPage .stageTag .ico {
width: 15px;
height: 15px;
margin-right: 4px
}
.personnelPage .heroVisual figcaption {
font-size: 10px;
color: #536C7D;
text-align: center;
margin-top: 14px
}
.personnelPage .trust {
padding: 27px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.personnelPage .trustLabel {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-bottom: 19px;
color: #3D596C
}
.personnelPage .logos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
align-items: center
}
.personnelPage .logo {
height: 60px;
display: grid;
place-items: center;
padding: 8px 10px;
border: 1px solid #E8F0F5;
border-radius: 11px;
background: #fff;
overflow: hidden
}
.personnelPage .clientLogo {
width: 100%;
height: 40px;
object-fit: contain;
display: block;
pointer-events: none
}
.personnelPage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #445E6F;
font-weight: 800;
text-align: center;
line-height: 1.2
}
.personnelPage .quickNav {
display: flex;
justify-content: center;
gap: 6px 25px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: #32617B
}
.personnelPage .quickNav a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #B7DCEB
}
.personnelPage .quickNav a:hover {
color: #005F94
} .personnelPage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.personnelPage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
position: relative;
overflow: hidden
}
.personnelPage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.personnelPage .outcome:nth-child(2):before {
background: var(--yellow)
}
.personnelPage .outcome:nth-child(3):before {
background: var(--green)
}
.personnelPage .outcome:nth-child(4):before {
background: var(--purple)
}
.personnelPage .outcome>.ico {
width: 28px;
height: 28px;
color: var(--navy);
margin-bottom: 18px
}
.personnelPage .outcome h3 {
font-size: 20px;
margin-bottom: 10px
}
.personnelPage .outcome p {
font-size: 13px;
line-height: 1.75
}
.personnelPage .workflow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}
.personnelPage .flowStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 18px;
position: relative;
padding: 23px 20px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line)
}
.personnelPage .flowNumber {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--yellow);
font-size: 14px;
font-weight: 850
}
.personnelPage .flowStep h3 {
font-size: 19px;
margin-bottom: 9px
}
.personnelPage .flowStep p {
font-size: 13px
}
.personnelPage .flowStep:not(:last-child):after {
content: "\2192";
position: absolute;
right: -20px;
top: 37px;
color: #0076dd;
font-size: 23px;
z-index: 2
}
.personnelPage .workflowSection {
padding-top: 62px;
padding-bottom: 65px
}
.personnelPage .workflowSection .sectionHead {
margin-bottom: 28px
} .personnelPage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.personnelPage .feature.reverse .visual {
order: -1
}
.personnelPage .copy>p {
color: var(--muted);
font-size: 16px;
margin-top: 18px;
line-height: 1.8
}
.personnelPage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 16px;
margin-top: 23px;
list-style: none;
padding: 0
}
.personnelPage .fl li {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.65;
align-items: flex-start;
min-width: 0
}
.personnelPage .tick {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--greenbg);
color: #0B7651;
display: grid;
place-items: center;
flex: 0 0 20px;
margin-top: 1px;
display: none;
}
.personnelPage .tick .ico {
width: 12px;
height: 12px;
stroke-width: 2.2
}
.personnelPage details.capabilityMore {
margin-top: 21px;
background: none;
border: 0;
padding: 0;
border-radius: 0
}
.personnelPage .capabilityMore summary {
display: inline-flex;
gap: 9px;
align-items: center;
color: #006FA9;
font-size: 13px;
font-weight: 800;
cursor: pointer;
list-style: none;
min-height: 33px
}
.personnelPage .capabilityMore summary::-webkit-details-marker {
display: none
}
.personnelPage .capabilityMore summary::after {
content: "+";
font-size: 20px;
font-weight: 500;
line-height: 1
}
.personnelPage .capabilityMore[open] summary::after {
content: "\2212"
}
.personnelPage .capabilityMore .fl {
margin-top: 14px
}
.personnelPage .dark .fl {
color: #E7E7E7
}
.personnelPage .dark .tick {
background: var(--yellow);
color: #000
}
.personnelPage .dark .capabilityMore summary {
color: var(--yellow)
}
.personnelPage .visual {
min-width: 0;
position: relative
}
.personnelPage .visualInner {
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .15), transparent 28%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 24px;
position: relative;
overflow: hidden
}
.personnelPage .visual figcaption {
font-size: 10px;
line-height: 1.65;
text-align: center;
margin-top: 11px;
color: #526C80
}
.personnelPage .appWindow {
background: #fff;
border: 1px solid #C5DDE9;
border-radius: 13px;
overflow: hidden
}
.personnelPage .appBar {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 14px;
background: #fff;
border-bottom: 1px solid var(--line);
min-width: 0
}
.personnelPage .appBar strong {
font-size: 11px;
color: #183C53
}
.personnelPage .appMark {
display: grid;
place-items: center;
background: var(--sky);
width: 25px;
height: 25px;
border-radius: 7px;
color: #007FC5
}
.personnelPage .appMark .ico {
width: 15px;
height: 15px
}
.personnelPage .windowDots {
margin-left: auto;
display: flex;
gap: 4px
}
.personnelPage .windowDots i {
width: 4px;
height: 4px;
background: #BCCFD9;
border-radius: 50%
}
.personnelPage .appBody {
padding: 18px
}
.personnelPage .appSub {
font-size: 10px;
color: #617A8C;
margin-bottom: 14px
}
.personnelPage .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
padding: 5px 7px;
border-radius: 6px;
background: #EEF5F9;
color: #375E75;
vertical-align: middle
}
.personnelPage .badge.green {
background: var(--greenbg);
color: #0B704D
}
.personnelPage .badge.yellow {
background: var(--yellowsoft);
color: #695000
}
.personnelPage .badge.blue {
background: #E4F6FF;
color: #006799
}
.personnelPage .badge.red {
background: #FFF0F0;
color: #A23D3D
}
.personnelPage .badge.darkBadge {
background: #203C4F;
color: #E4F3FC
}
.personnelPage .progress {
height: 7px;
background: #E4EEF4;
border-radius: 8px;
overflow: hidden;
margin: 14px 0
}
.personnelPage .progress span {
height: 100%;
background: var(--brand2);
display: block;
border-radius: inherit
}
.personnelPage .appHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 14px
}
.personnelPage .appHeading>strong {
font-size: 15px;
line-height: 1.3;
color: #143C55
}
.personnelPage .appHeading small {
font-size: 10px;
color: var(--muted);
display: block
}
.personnelPage .miniTabs {
display: flex;
gap: 17px;
font-size: 10px;
color: #597488;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 17px
}
.personnelPage .miniTabs .active {
color: #006FA9;
font-weight: 800;
position: relative
}
.personnelPage .miniTabs .active:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -11px;
border-bottom: 2px solid #007FC5
}
.personnelPage .lightNote {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #466B81;
background: #F3F9FC;
border: 1px solid #DCEAF2;
padding: 10px;
border-radius: 8px;
margin-top: 14px
}
.personnelPage .lightNote .ico {
width: 16px;
height: 16px;
color: #007FC5
}
.personnelPage .inlineNotice {
display: flex;
gap: 9px;
align-items: flex-start;
background: #FFF8E0;
border: 1px solid #F1E1AF;
border-radius: 9px;
padding: 11px;
font-size: 10px;
line-height: 1.65;
color: #665014;
margin-top: 14px
}
.personnelPage .inlineNotice .ico {
width: 17px;
height: 17px;
color: #8A680F;
margin-top: 1px
}
.personnelPage .subLabel {
font-size: 10px;
font-weight: 800;
color: #456579;
display: block;
margin-bottom: 10px
} .personnelPage .mapLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
color: #4B6E84
}
.personnelPage .binGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px
}
.personnelPage .bin {
border: 1px solid #C8DEE9;
background: #F7FBFD;
border-radius: 8px;
padding: 12px 10px;
min-width: 0
}
.personnelPage .bin.selected {
border: 2px solid #008CCF;
background: #EAF8FF;
padding: 11px 9px
}
.personnelPage .bin strong {
font-size: 11px;
display: block;
color: #17455E
}
.personnelPage .bin small {
font-size: 9px;
color: #58758A;
display: block;
margin-top: 6px
}
.personnelPage .binStock {
display: flex;
gap: 4px;
align-items: flex-end;
height: 23px;
margin-top: 9px
}
.personnelPage .binStock span {
width: 14px;
height: 17px;
background: #A6D9F0;
border: 1px solid #6DB4D8;
border-radius: 2px;
position: relative
}
.personnelPage .binStock span:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: white;
top: 4px;
left: 4px
}
.personnelPage .bin.selected .binStock span {
background: #FFC928;
border-color: #D7AE36
}
.personnelPage .stockRecord {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 0 0;
margin-top: 15px;
border-top: 1px solid var(--line)
}
.personnelPage .stockRecord>.ico {
width: 37px;
height: 37px;
padding: 7px;
background: #EAF8FF;
border-radius: 9px;
color: #007FC5
}
.personnelPage .stockRecord strong {
font-size: 12px;
display: block
}
.personnelPage .stockRecord small {
font-size: 9px;
color: var(--muted);
display: block
}
.personnelPage .stockRecord>.badge {
margin-left: auto
}
.personnelPage .miniMeta {
display: flex;
gap: 17px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 9px;
color: #587489
} .personnelPage .receivingPicture {
height: 167px;
position: relative;
margin: -18px -18px 16px;
border-bottom: 1px solid var(--line);
background: #F0F9FD
}
.personnelPage .receivingPicture img {
width: 100%;
height: 100%;
object-fit: contain
}
.personnelPage .metricsThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px
}
.personnelPage .metricBox {
border: 1px solid var(--line);
border-radius: 9px;
padding: 11px;
min-width: 0
}
.personnelPage .metricBox strong {
font-size: 25px;
letter-spacing: -.04em;
line-height: 1.1;
color: #0D3B55;
display: block
}
.personnelPage .metricBox span {
font-size: 9px;
color: #587487;
display: block;
margin-top: 6px
}
.personnelPage .metricBox.warn {
background: #FFF8E2;
border-color: #EDDDAA
}
.personnelPage .metricBox.warn strong {
color: #80600C
}
.personnelPage .miniTable {
width: 100%;
border-collapse: collapse;
font-size: 10px
}
.personnelPage .miniTable :where(th, td) {
text-align: left;
padding: 10px 6px;
border-bottom: 1px solid #E4EEF4;
vertical-align: middle
}
.personnelPage .miniTable th {
font-size: 9px;
color: #526F82;
font-weight: 700
}
.personnelPage .miniTable td {
color: #2B5067
}
.personnelPage .miniTable td:first-child {
font-weight: 700
}
.personnelPage .miniTable tr:last-child td {
border-bottom: 0
}
.personnelPage .miniTable small {
display: block;
color: #607A8D;
font-size: 8px;
font-weight: 400
}
.personnelPage .miniTable .badge {
font-size: 8px;
padding: 4px 5px
}
.personnelPage .auditLayout {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 13px;
align-items: center
}
.personnelPage .auditDevice {
min-width: 0;
overflow: hidden
}
.personnelPage .auditDevice img {
width: 175%;
max-width: none;
margin-left: -37%;
height: 295px;
object-fit: contain
}
.personnelPage .auditDevice span {
display: block;
text-align: center;
color: #44697E;
font-size: 10px;
font-weight: 700
}
.personnelPage .auditCard {
padding: 19px 15px;
border-radius: 13px;
border: 1px solid #BBD9E9;
background: #fff;
min-width: 0
}
.personnelPage .auditCard h3 {
font-size: 17px;
margin-top: 13px
}
.personnelPage .auditSubtitle {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px
}
.personnelPage .auditCount {
display: block;
font-size: 42px;
letter-spacing: -.04em;
color: var(--navy);
line-height: 1.1;
margin-top: 17px
}
.personnelPage .auditCount small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted)
}
.personnelPage .auditLine {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 10px;
border-bottom: 1px solid #E3EEF4;
padding: 9px 0
}
.personnelPage .auditLine:last-child {
border-bottom: 0
}
.personnelPage .auditLine span {
display: flex;
gap: 6px;
align-items: center
}
.personnelPage .miniDot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
background: #007FC5
}
.personnelPage .miniDot.amber {
background: #BC8F11
}
.personnelPage .miniDot.red {
background: #CB5E54
}
.personnelPage .locator {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
background: #fff;
border: 1px solid #CEE4EF;
border-radius: 11px;
padding: 14px
}
.personnelPage .locator .ico {
color: #0076dd;
width: 27px;
height: 27px
}
.personnelPage .locator strong {
display: block;
font-size: 11px
}
.personnelPage .locator small {
font-size: 9px;
display: block;
color: var(--muted)
}
.personnelPage .signal {
display: flex;
align-items: flex-end;
gap: 3px;
margin-left: auto;
height: 23px
}
.personnelPage .signal i {
width: 4px;
border-radius: 2px;
background: #007FC5
}
.personnelPage .signal i:nth-child(1) {
height: 7px
}
.personnelPage .signal i:nth-child(2) {
height: 11px
}
.personnelPage .signal i:nth-child(3) {
height: 16px
}
.personnelPage .signal i:nth-child(4) {
height: 21px
}
.personnelPage .signal i:nth-child(5) {
height: 23px;
background: #D3E5EF
} .personnelPage .transferRoute {
display: grid;
grid-template-columns: 1fr 49px 1fr;
gap: 9px;
align-items: center;
margin-bottom: 16px
}
.personnelPage .routeStop {
border: 1px solid #CBE0EB;
border-radius: 10px;
padding: 15px 9px;
text-align: center;
background: #F5FAFD
}
.personnelPage .routeStop>.ico {
width: 34px;
height: 34px;
color: #0076dd;
margin-bottom: 9px
}
.personnelPage .routeStop strong {
display: block;
font-size: 12px
}
.personnelPage .routeStop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.personnelPage .routeArrow {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8px;
color: #536E82;
gap: 6px
}
.personnelPage .routeArrow .ico {
width: 25px;
color: #007FC5
}
.personnelPage .timeline {
list-style: none;
padding: 0;
margin-top: 17px
}
.personnelPage .timeline li {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 17px;
position: relative;
font-size: 10px
}
.personnelPage .timeline li:not(:last-child):before {
content: "";
position: absolute;
border-left: 1px solid #BBD4E2;
left: 10px;
top: 24px;
bottom: 3px
}
.personnelPage .timeline .timelineDot {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--greenbg);
border-radius: 50%;
color: #0B7651
}
.personnelPage .timeline .timelineDot .ico {
width: 13px;
height: 13px
}
.personnelPage .timeline .timelineDot.pending {
color: #83650B;
background: #FFF3C9
}
.personnelPage .timeline strong {
font-size: 11px;
display: block
}
.personnelPage .timeline small {
font-size: 9px;
color: var(--muted);
display: block
}
.personnelPage .timeline time {
font-size: 9px;
color: var(--muted);
padding-top: 2px
}
.personnelPage .timeline li:last-child {
padding-bottom: 0
}
.personnelPage .levelChart {
padding: 18px;
border: 1px solid #D6E7F0;
border-radius: 10px;
background: #F7FBFD;
margin-top: 15px
}
.personnelPage .levelLabels {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: #607C8F;
margin-bottom: 13px
}
.personnelPage .stockLevel {
height: 27px;
border-radius: 5px;
background: #E4EFF5;
position: relative;
margin-bottom: 10px
}
.personnelPage .stockLevel>span {
display: block;
width: 36%;
height: 100%;
background: var(--yellow);
border-radius: 5px
}
.personnelPage .stockLevel:after {
content: "";
position: absolute;
left: 50%;
top: -5px;
bottom: -5px;
border-left: 2px dashed #174964
}
.personnelPage .stockLevelNote {
font-size: 9px;
color: #385D73;
line-height: 1.6
}
.personnelPage .purchaseRequest {
border: 1px solid #BBD9E9;
border-radius: 11px;
background: #fff;
padding: 15px;
margin-top: 16px;
display: grid;
grid-template-columns: 33px 1fr auto;
gap: 10px;
align-items: center
}
.personnelPage .purchaseRequest>.ico {
color: #0076dd;
background: #EAF8FF;
padding: 7px;
box-sizing: content-box;
width: 19px;
height: 19px;
border-radius: 9px
}
.personnelPage .purchaseRequest strong {
font-size: 11px;
display: block
}
.personnelPage .purchaseRequest small {
font-size: 9px;
color: var(--muted);
display: block
}
.personnelPage .purchaseRequest .qty {
font-size: 24px;
color: var(--navy);
letter-spacing: -.04em
}
.personnelPage .ownershipSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 17px
}
.personnelPage .ownerCard {
border: 1px solid #CDE2ED;
background: #F8FCFE;
border-radius: 10px;
padding: 14px
}
.personnelPage .ownerCard strong {
font-size: 26px;
line-height: 1.1;
letter-spacing: -.04em;
display: block;
color: var(--navy)
}
.personnelPage .ownerCard span {
display: block;
font-size: 9px;
margin-top: 6px;
color: var(--muted)
}
.personnelPage .ownerCard.vendor {
background: #FFF9E9;
border-color: #F0E0AF
}
.personnelPage .exportStrip {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
color: #58788C;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 10px;
flex-wrap: wrap
}
.personnelPage .exportStrip .ico {
width: 14px;
height: 14px
}
.personnelPage .exportStrip span {
margin-left: auto
}
.personnelPage .exportStrip b {
font-weight: 600;
padding: 3px 6px;
background: #F5FAFD;
border: 1px solid #D3E6F1;
border-radius: 4px
} .personnelPage .aiGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 50px;
align-items: center
}
.personnelPage .aiGrid>.copy>p {
color: #D6D6D6
}
.personnelPage .promptBox {
border: 1px solid #354149;
border-radius: 18px;
background: #111920;
padding: 22px;
min-width: 0
}
.personnelPage .aiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px
}
.personnelPage .aiBrand {
display: flex;
align-items: center;
gap: 9px
}
.personnelPage .aiBrand>.ico {
color: var(--yellow);
width: 26px;
height: 26px
}
.personnelPage .aiBrand strong {
font-size: 16px;
letter-spacing: .02em
}
.personnelPage .aiTop>span {
font-size: 9px;
color: #BBCCD7
}
.personnelPage .question {
border: 1px solid #344653;
border-radius: 11px 11px 2px 11px;
background: #21303B;
padding: 14px;
margin-left: 33px;
color: #F1F5F8;
font-size: 13px
}
.personnelPage .aiAnswer {
background: #fff;
color: var(--ink);
padding: 19px;
border-radius: 12px;
margin-top: 15px
}
.personnelPage .aiAnswer .answerTitle {
font-size: 14px;
line-height: 1.45;
display: block;
color: #123C55;
margin-bottom: 8px
}
.personnelPage .aiAnswer p {
font-size: 11px;
color: #587387;
line-height: 1.7
}
.personnelPage .aiItem {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid #D6E5EF;
border-radius: 9px;
background: #F8FBFD;
padding: 12px;
margin-top: 13px
}
.personnelPage .aiItem strong {
display: block;
font-size: 12px
}
.personnelPage .aiItem small {
font-size: 9px;
color: #607789;
display: block;
margin-top: 3px
}
.personnelPage .aiItem>.badge {
font-size: 9px
}
.personnelPage .sourceChip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 7px;
border: 1px solid #D1E3ED;
border-radius: 5px;
font-size: 9px;
color: #456C83;
margin-top: 13px
}
.personnelPage .sourceChip .ico {
width: 12px;
height: 12px
}
.personnelPage .aiReview {
font-size: 10px !important;
color: #CCDAE4 !important;
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 16px
}
.personnelPage .aiReview .ico {
width: 16px;
height: 16px;
color: var(--yellow);
margin-top: 2px
}
.personnelPage .aiSample {
font-size: 10px;
color: #BDC9D3;
text-align: center;
margin-top: 12px
}
.personnelPage .aiScope {
font-size: 11px !important;
color: #B9C7D0 !important;
border-top: 1px solid #35434E;
padding-top: 16px;
margin-top: 22px !important;
line-height: 1.7 !important
} .personnelPage .cta {
margin-top: 30px;
padding: 24px 27px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.personnelPage .cta h3 {
font-size: 21px
}
.personnelPage .cta p {
font-size: 13px;
margin-top: 7px;
max-width: 660px
}
.personnelPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.personnelPage .ctaSection {
padding: 0 0 64px;
background: var(--sky2)
} .personnelPage .connectedGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px
}
.personnelPage .connectedCard {
background: #151515;
border: 1px solid #333;
border-radius: 15px;
padding: 24px
}
.personnelPage .connectedCard>.ico {
color: var(--yellow);
width: 27px;
height: 27px;
margin-bottom: 20px
}
.personnelPage .connectedCard h3 {
font-size: 21px;
margin-bottom: 11px;
color: #fff
}
.personnelPage .connectedCard p {
font-size: 13px;
line-height: 1.8;
color: #CFCFCF
}
.personnelPage .connectedCard a {
display: inline-block;
color: var(--yellow);
font-size: 12px;
font-weight: 750;
margin-top: 15px;
text-decoration: underline;
text-underline-offset: 4px
}
.personnelPage .hardwareGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}
.personnelPage .hardwareCard {
border: 1px solid #CDE3ED;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0
}
.personnelPage .hardwareImage {
width: 100%;
height: 195px;
object-fit: contain;
background: #F0F9FD;
border-bottom: 1px solid var(--line)
}
.personnelPage .hardwareCopy {
padding: 23px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column
}
.personnelPage .hardwareCopy h3 {
font-size: 21px;
margin: 13px 0 10px
}
.personnelPage .hardwareCopy p {
font-size: 13px;
line-height: 1.75
}
.personnelPage .hardwareCopy .bestFor {
font-size: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
color: #355971
}
.personnelPage .hardwareNote {
font-size: 12px;
line-height: 1.8;
margin-top: 22px;
padding: 18px 21px;
border: 1px solid #CDE3EE;
border-left: 4px solid var(--yellow);
border-radius: 11px;
background: #F7FBFD
}
.personnelPage .hardwareNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.personnelPage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.personnelPage .integration {
height: 87px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 10px;
color: #183E56;
min-width: 0;
line-height: 1.3
}
.personnelPage .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.personnelPage .integration small {
font-size: 9px;
color: #60788A;
margin-top: 6px;
font-weight: 500
}
.personnelPage .integrationFlow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
align-items: center;
gap: 13px;
background: #0C2333;
padding: 23px;
border-radius: 15px;
margin-top: 23px;
color: #fff
}
.personnelPage .integrationFlow>div {
min-width: 0
}
.personnelPage .integrationFlow strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: #fff
}
.personnelPage .integrationFlow small {
font-size: 10px;
color: #C1D5E2;
display: block;
margin-top: 5px
}
.personnelPage .integrationFlow>.ico {
color: var(--yellow);
width: 26px;
height: 26px
}
.personnelPage .integrationNote {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 19px auto 0 !important;
max-width: 950px;
text-align: center
}
.personnelPage .integrationNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.personnelPage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 23px;
margin-top: 32px
}
.personnelPage .rolloutStep {
border-top: 1px solid #BAD7E8;
padding-top: 19px
}
.personnelPage .rolloutNumber {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
margin-bottom: 17px
}
.personnelPage .rolloutStep h3 {
font-size: 20px;
margin-bottom: 11px
}
.personnelPage .rolloutStep p {
font-size: 13px;
line-height: 1.8
}
.personnelPage .pilotMeasures {
display: flex;
gap: 14px 23px;
align-items: center;
flex-wrap: wrap;
background: #EFF8FD;
border: 1px solid #CEE4F0;
border-radius: 11px;
padding: 17px 21px;
margin-top: 27px;
font-size: 11px;
color: #40677F
}
.personnelPage .pilotMeasures strong {
font-size: 12px;
color: #173F57
}
.personnelPage .pilotMeasures span {
display: flex;
align-items: center;
gap: 6px
}
.personnelPage .pilotMeasures .ico {
width: 14px;
height: 14px
} .personnelPage .faq {
max-width: 900px
}
.personnelPage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.personnelPage .faq summary {
font-size: 15px;
font-weight: 800;
cursor: pointer;
color: var(--navy);
line-height: 1.65
}
.personnelPage .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 11px;
line-height: 1.85
}
.personnelPage .faq details p a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.personnelPage .faq details:last-child {
margin-bottom: 0
}
.personnelPage .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 43px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center
}
.personnelPage .final h2 {
color: #fff;
font-size: 39px
}
.personnelPage .final p {
color: #DDD;
margin-top: 15px;
max-width: 720px;
font-size: 16px
}
.personnelPage .final .ctaBtns {
justify-content: center;
}
.personnelPage .final .btn.outline {
background: transparent;
border-color: #666;
color: #fff
}
.personnelPage .final .btn.outline:hover {
background: #303030
}
.personnelPage .contactRow {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 23px;
font-size: 12px;
color: #5B7588;
align-items: center
}
.personnelPage .contactRow a {
color: #006FA9;
font-weight: 700;
display: flex;
gap: 7px;
align-items: center
}
.personnelPage .contactRow .ico {
width: 16px;
height: 16px
}
.personnelPage .pageFooter {
padding: 25px 0;
border-top: 1px solid var(--line);
background: #F7FBFD
}
.personnelPage .footerRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 11px;
flex-wrap: wrap;
color: #4E6D80
}
.personnelPage .footerRow strong {
font-size: 16px;
letter-spacing: -.03em;
color: #163F59
}
.personnelPage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap
}
.personnelPage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px
}
@media(min-width:1600px) { }
@media(max-width:1100px) {
.personnelPage .heroGrid {
gap: 27px;
grid-template-columns: 1fr 1fr
} .personnelPage .personnelStageBase {
height: 540px
}
.personnelPage .personnelPanelBase {
width: 192px;
top: 91px
}
.personnelPage .personnelCardBase {
width: 228px;
padding: 15px
}
.personnelPage .stageTag {
max-width: 182px;
font-size: 9px;
right: 0
}
.personnelPage .personnelSceneBase {
height: 397px
}
.personnelPage .feature,
.personnelPage .aiGrid {
gap: 33px
}
.personnelPage .visualInner {
padding: 18px
}
.personnelPage .logos {
gap: 8px
}
.personnelPage .logo {
padding: 8px
}
.personnelPage .outcome {
padding: 23px 19px
}
.personnelPage .hardwareCopy {
padding: 20px
}
.personnelPage .hardwareImage {
height: 172px
}
.personnelPage .flowStep {
grid-template-columns: 37px 1fr;
gap: 12px;
padding: 20px 17px
}
.personnelPage .flowNumber {
width: 34px;
height: 34px
}
.personnelPage .flowStep h3 {
font-size: 18px
}
.personnelPage .fl {
gap: 12px
}
.personnelPage .fl li {
font-size: 12px
}
.personnelPage .appBody {
padding: 15px
}
.personnelPage .receivingPicture {
margin: -15px -15px 15px
}
.personnelPage .auditCard {
padding: 17px 12px
}
.personnelPage .auditDevice img {
height: 270px
}
.personnelPage .auditCount {
font-size: 36px
}
.personnelPage .integration {
font-size: 13px
}
}
@media(max-width:960px) {
.personnelPage section {
padding: 63px 0
}
.personnelPage .hero {
padding: 25px 0 51px
}
.personnelPage .heroGrid,
.personnelPage .feature,
.personnelPage .aiGrid,
.personnelPage .final {
grid-template-columns: 1fr
}
.personnelPage .heroGrid {
gap: 31px
} .personnelPage .lead {
max-width: 690px
}
.personnelPage .heroVisual {
width: 100%;
max-width: 610px;
margin: auto
}
.personnelPage .personnelStageBase {
height: 560px
}
.personnelPage .personnelSceneBase {
height: 440px
}
.personnelPage .personnelPanelBase {
width: 224px;
top: 78px
}
.personnelPage .personnelCardBase {
width: 279px
}
.personnelPage .stageTag {
max-width: none;
right: 7px;
font-size: 10px
}
.personnelPage .feature.reverse .visual {
order: 0
}
.personnelPage .feature>.visual {
max-width: 650px;
width: 100%;
margin: auto
}
.personnelPage .feature .copy {
max-width: 780px
}
.personnelPage .feature h2 {
max-width: 760px;
font-size: 40px
}
.personnelPage .visualInner {
padding: 26px
}
.personnelPage .fl li {
font-size: 13px
}
.personnelPage .fl {
max-width: 710px;
gap: 14px 20px
}
.personnelPage .feature,
.personnelPage .aiGrid {
gap: 32px
}
.personnelPage .appBody {
padding: 20px
}
.personnelPage .receivingPicture {
height: 185px;
margin: -20px -20px 17px
}
.personnelPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 12px
}
.personnelPage .outcomes {
grid-template-columns: repeat(2, 1fr)
}
.personnelPage .workflow {
gap: 16px
}
.personnelPage .flowStep {
grid-template-columns: 1fr;
padding: 20px
}
.personnelPage .flowStep:not(:last-child):after {
right: -16px;
top: 28px
}
.personnelPage .promptBox {
max-width: 660px;
width: 100%;
margin: auto;
padding: 25px
}
.personnelPage .aiVisual {
max-width: 660px;
width: 100%;
margin: auto
}
.personnelPage .aiScope {
max-width: 760px
}
.personnelPage .auditLayout {
grid-template-columns: .85fr 1.15fr;
gap: 20px
}
.personnelPage .auditDevice img {
height: 320px
}
.personnelPage .auditCard {
padding: 22px
}
.personnelPage .auditCount {
font-size: 45px
}
.personnelPage .auditLine {
font-size: 12px
}
.personnelPage .auditSubtitle {
font-size: 10px
}
.personnelPage .auditCard h3 {
font-size: 20px
}
.personnelPage .appBar strong {
font-size: 12px
}
.personnelPage .appHeading>strong {
font-size: 17px
}
.personnelPage .miniTable {
font-size: 11px
}
.personnelPage .miniTable th {
font-size: 10px
}
.personnelPage .bin strong {
font-size: 12px
}
.personnelPage .bin small {
font-size: 10px
}
.personnelPage .cta {
align-items: flex-start;
flex-direction: column
}
.personnelPage .connectedGrid {
gap: 12px
}
.personnelPage .connectedCard {
padding: 21px
}
.personnelPage .connectedCard h3 {
font-size: 19px
}
.personnelPage .hardwareGrid {
grid-template-columns: 1fr;
gap: 18px
}
.personnelPage .hardwareCard {
display: grid;
grid-template-columns: .85fr 1.15fr
}
.personnelPage .hardwareImage {
height: 100%;
min-height: 215px;
object-fit: contain;
border-right: 1px solid var(--line);
border-bottom: 0
}
.personnelPage .hardwareCopy {
padding: 24px
}
.personnelPage .integrationGrid {
grid-template-columns: repeat(3, 1fr)
}
.personnelPage .integration {
font-size: 15px
}
.personnelPage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 27px
}
.personnelPage .final .ctaBtns {
flex-direction: row
}
.personnelPage .final {
padding: 35px
}
.personnelPage .final h2 {
max-width: 690px
}
.personnelPage .quickNav {
margin-top: 23px
}
.personnelPage .trust {
padding: 26px 0
}
.personnelPage .hero .breadcrumb {
margin-bottom: 27px
}
}
@media(max-width:640px) {
.personnelPage {
font-size: 15px
}
.personnelPage .wrap {
width: calc(100% - 32px)
}
.personnelPage section {
padding: 52px 0
}
.personnelPage .hero {
padding: 22px 0 39px
} .personnelPage h2,
.personnelPage .feature h2 {
font-size: 33px;
line-height: 1.16
}
.personnelPage h3 {
font-size: 20px
}
.personnelPage .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.personnelPage .ey .ico {
width: 14px;
height: 14px
}
.personnelPage .lead {
font-size: 16px;
margin-top: 18px
}
.personnelPage .actions {
gap: 9px;
margin-top: 23px
}
.personnelPage .actions .btn {
font-size: 12px;
padding: 12px 14px;
gap: 7px
}
.personnelPage .actions .btn .ico {
width: 15px;
height: 15px
}
.personnelPage .heroPills {
gap: 6px;
margin-top: 17px
}
.personnelPage .heroPills span {
font-size: 9px;
padding: 5px 8px
}
.personnelPage .micro {
font-size: 10px;
margin-top: 13px
}
.personnelPage .breadcrumb {
font-size: 8px;
gap: 4px;
margin-bottom: 24px
}
.personnelPage .breadcrumb .ico {
width: 9px;
height: 9px
}
.personnelPage .heroGrid {
gap: 24px
}
.personnelPage .personnelStageBase {
height: 530px;
max-width: 410px
}
.personnelPage .personnelSceneBase {
top: 10px;
left: -23px;
width: 110%;
max-width: none;
height: 340px
}
.personnelPage .stageLabel {
top: 0;
left: 0;
padding: 8px 10px;
font-size: 9px
}
.personnelPage .stageLabel .ico {
width: 15px;
height: 15px
}
.personnelPage .personnelPanelBase {
width: 175px;
top: 65px;
right: -1px;
border-radius: 23px;
padding: 6px
}
.personnelPage .phoneScreen {
min-height: 0;
border-radius: 17px
}
.personnelPage .phoneNotch {
height: 15px
}
.personnelPage .phoneHead {
padding: 10px
}
.personnelPage .phoneHead strong {
font-size: 10px
}
.personnelPage .phoneHead small {
font-size: 8px
}
.personnelPage .phoneBody {
padding: 10px
}
.personnelPage .phoneBody>.badge {
font-size: 8px
}
.personnelPage .scanStatus {
gap: 8px;
margin-top: 12px
}
.personnelPage .scanStatus>.ico {
width: 25px;
height: 25px
}
.personnelPage .scanStatus strong {
font-size: 25px
}
.personnelPage .scanStatus small {
font-size: 8px
}
.personnelPage .phoneLine {
font-size: 9px;
padding: 7px 0
}
.personnelPage .phoneAlert {
font-size: 8px;
padding: 7px;
margin-top: 10px
}
.personnelPage .phoneBody .progress {
margin: 10px 0;
height: 5px
}
.personnelPage .personnelCardBase {
width: 184px;
padding: 13px;
bottom: 10px;
left: 0;
border-radius: 12px
}
.personnelPage .stockCardHead {
font-size: 8px;
margin-bottom: 11px
}
.personnelPage .stockCardHead .ico {
width: 15px;
height: 15px
}
.personnelPage .stockCardMetrics {
gap: 7px
}
.personnelPage .stockCardMetrics strong {
font-size: 24px
}
.personnelPage .stockCardMetrics span {
font-size: 8px
}
.personnelPage .stockCardMetrics>div+div {
padding-left: 12px
}
.personnelPage .stageTag {
right: 0;
bottom: 3px;
font-size: 8px;
max-width: 140px;
line-height: 1.7;
padding: 7px 9px
}
.personnelPage .stageTag .ico {
width: 12px;
height: 12px
}
.personnelPage .heroVisual figcaption {
font-size: 9px;
margin-top: 12px
}
.personnelPage .trustLabel {
font-size: 11px;
padding-inline: 10px
}
.personnelPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 8px
}
.personnelPage .logo {
height: 52px;
padding: 6px
}
.personnelPage .clientLogo {
height: 35px
}
.personnelPage .logoFallback {
font-size: 9px
}
.personnelPage .quickNav {
gap: 10px 17px;
font-size: 11px;
justify-content: flex-start;
line-height: 1.4;
margin-top: 24px
}
.personnelPage .outcomes {
gap: 12px
}
.personnelPage .outcome {
padding: 20px 16px
}
.personnelPage .outcome h3 {
font-size: 18px;
line-height: 1.18
}
.personnelPage .outcome p {
font-size: 12px;
line-height: 1.7
}
.personnelPage .outcome>.ico {
width: 25px;
height: 25px;
margin-bottom: 15px
}
.personnelPage .sectionHead {
margin-bottom: 28px
}
.personnelPage .sectionHead p {
font-size: 15px;
margin-top: 15px
}
.personnelPage .workflow {
grid-template-columns: 1fr;
gap: 12px
}
.personnelPage .flowStep {
grid-template-columns: 39px 1fr;
padding: 21px;
gap: 16px
}
.personnelPage .flowStep:not(:last-child):after {
display: none
}
.personnelPage .flowNumber {
width: 37px;
height: 37px;
font-size: 13px
}
.personnelPage .flowStep h3 {
font-size: 19px
}
.personnelPage .flowStep p {
font-size: 13px
}
.personnelPage .copy>p {
font-size: 15px;
line-height: 1.8;
margin-top: 16px
}
.personnelPage .fl {
gap: 13px 12px
}
.personnelPage .fl li {
font-size: 12px;
gap: 7px
}
.personnelPage .tick {
width: 18px;
height: 18px;
flex-basis: 18px;
margin-top: 1px
}
.personnelPage .tick .ico {
width: 10px;
height: 10px
}
.personnelPage .capabilityMore summary {
font-size: 12px;
min-height: 40px
}
.personnelPage .capabilityMore {
margin-top: 18px !important
}
.personnelPage .visualInner {
padding: 15px;
border-radius: 17px
}
.personnelPage .visual figcaption {
font-size: 9px;
margin-top: 9px
}
.personnelPage .feature {
gap: 25px
}
.personnelPage .appBar {
padding: 10px 11px;
gap: 7px
}
.personnelPage .appBar strong {
font-size: 10px
}
.personnelPage .appMark {
width: 23px;
height: 23px
}
.personnelPage .appMark .ico {
width: 13px;
height: 13px
}
.personnelPage .appBody {
padding: 14px
}
.personnelPage .appSub {
font-size: 9px;
margin-bottom: 12px
}
.personnelPage .appHeading {
gap: 7px;
margin-bottom: 12px
}
.personnelPage .appHeading>strong {
font-size: 14px
}
.personnelPage .badge {
font-size: 8px;
padding: 4px 6px
}
.personnelPage .miniTabs {
font-size: 9px;
gap: 14px;
margin-bottom: 14px
}
.personnelPage .mapLabel {
font-size: 9px;
margin-bottom: 10px
}
.personnelPage .binGrid {
gap: 7px
}
.personnelPage .bin {
padding: 10px 7px
}
.personnelPage .bin.selected {
padding: 9px 6px
}
.personnelPage .bin strong {
font-size: 10px
}
.personnelPage .bin small {
font-size: 8px
}
.personnelPage .binStock {
gap: 3px;
height: 20px;
margin-top: 7px
}
.personnelPage .binStock span {
width: 11px;
height: 15px
}
.personnelPage .binStock span:after {
left: 3px;
width: 3px;
height: 3px
}
.personnelPage .stockRecord {
gap: 9px;
flex-wrap: wrap
}
.personnelPage .stockRecord>.ico {
width: 30px;
height: 30px;
padding: 6px
}
.personnelPage .stockRecord strong {
font-size: 10px
}
.personnelPage .stockRecord small {
font-size: 8px
}
.personnelPage .stockRecord>.badge {
font-size: 8px
}
.personnelPage .miniMeta {
gap: 5px 12px;
font-size: 8px
}
.personnelPage .lightNote {
font-size: 9px;
gap: 7px;
padding: 9px
}
.personnelPage .lightNote .ico {
width: 14px;
height: 14px
}
.personnelPage .receivingPicture {
height: 149px;
margin: -14px -14px 14px
}
.personnelPage .metricsThree {
gap: 7px
}
.personnelPage .metricBox {
padding: 10px 8px
}
.personnelPage .metricBox strong {
font-size: 23px
}
.personnelPage .metricBox span {
font-size: 8px
}
.personnelPage .miniTable {
font-size: 9px;
line-height: 1.5
}
.personnelPage .miniTable th {
font-size: 8px
}
.personnelPage .miniTable :where(th, td) {
padding: 9px 4px
}
.personnelPage .miniTable small {
font-size: 8px
}
.personnelPage .miniTable .badge {
font-size: 7px;
padding: 3px 4px
}
.personnelPage .inlineNotice {
font-size: 9px;
padding: 10px;
gap: 7px
}
.personnelPage .inlineNotice .ico {
width: 15px;
height: 15px
}
.personnelPage .auditLayout {
gap: 10px;
grid-template-columns: .76fr 1.24fr
}
.personnelPage .auditDevice img {
height: 278px;
width: 195%;
margin-left: -50%
}
.personnelPage .auditDevice span {
font-size: 8px
}
.personnelPage .auditCard {
padding: 17px 12px
}
.personnelPage .auditCard h3 {
font-size: 16px;
margin-top: 12px
}
.personnelPage .auditCount {
font-size: 35px;
margin-top: 15px
}
.personnelPage .auditCount small {
font-size: 10px
}
.personnelPage .auditSubtitle {
font-size: 8px
}
.personnelPage .auditLine {
font-size: 9px;
padding: 8px 0
}
.personnelPage .locator {
gap: 9px;
padding: 12px;
margin-top: 13px
}
.personnelPage .locator>.ico {
width: 23px;
height: 23px
}
.personnelPage .locator strong {
font-size: 10px
}
.personnelPage .locator small {
font-size: 8px
}
.personnelPage .signal {
gap: 2px
}
.personnelPage .signal i {
width: 3px
}
.personnelPage .transferRoute {
grid-template-columns: 1fr 32px 1fr;
gap: 7px
}
.personnelPage .routeStop {
padding: 12px 7px
}
.personnelPage .routeStop>.ico {
width: 29px;
height: 29px;
margin-bottom: 8px
}
.personnelPage .routeStop strong {
font-size: 11px
}
.personnelPage .routeStop small {
font-size: 8px
}
.personnelPage .routeArrow {
font-size: 7px
}
.personnelPage .routeArrow .ico {
width: 20px;
height: 20px
}
.personnelPage .timeline {
margin-top: 15px
}
.personnelPage .timeline li {
gap: 7px;
grid-template-columns: 21px 1fr auto
}
.personnelPage .timeline strong {
font-size: 10px
}
.personnelPage .timeline small,
.personnelPage .timeline time {
font-size: 8px
}
.personnelPage .timelineDot {
width: 20px;
height: 20px
}
.personnelPage .levelChart {
padding: 14px
}
.personnelPage .purchaseRequest {
padding: 12px;
gap: 9px
}
.personnelPage .purchaseRequest strong {
font-size: 10px
}
.personnelPage .purchaseRequest small {
font-size: 8px
}
.personnelPage .purchaseRequest .qty {
font-size: 22px
}
.personnelPage .ownerCard {
padding: 12px
}
.personnelPage .ownerCard strong {
font-size: 25px
}
.personnelPage .ownerCard span {
font-size: 8px
}
.personnelPage .exportStrip {
font-size: 8px;
gap: 5px
}
.personnelPage .exportStrip span {
margin-left: 0
}
.personnelPage .promptBox {
padding: 18px;
border-radius: 15px
}
.personnelPage .aiTop {
margin-bottom: 17px;
gap: 8px
}
.personnelPage .aiBrand strong {
font-size: 15px
}
.personnelPage .aiTop>span {
font-size: 8px
}
.personnelPage .aiBrand>.ico {
width: 22px;
height: 22px
}
.personnelPage .question {
font-size: 12px;
padding: 12px;
margin-left: 20px
}
.personnelPage .aiAnswer {
padding: 15px
}
.personnelPage .aiAnswer .answerTitle {
font-size: 13px
}
.personnelPage .aiAnswer p {
font-size: 10px
}
.personnelPage .aiItem {
padding: 11px;
gap: 8px
}
.personnelPage .aiItem strong {
font-size: 11px
}
.personnelPage .aiItem small {
font-size: 8px
}
.personnelPage .sourceChip {
font-size: 8px
}
.personnelPage .aiReview {
font-size: 9px !important
}
.personnelPage .aiSample {
font-size: 9px
}
.personnelPage .aiScope {
font-size: 10px !important
}
.personnelPage .ctaSection {
padding: 0 0 48px
}
.personnelPage .cta {
padding: 22px;
margin-top: 0
}
.personnelPage .cta h3 {
font-size: 21px
}
.personnelPage .cta p {
font-size: 12px
}
.personnelPage .ctaBtns {
width: 100%
}
.personnelPage .ctaBtns .btn {
font-size: 12px;
padding: 12px 14px;
flex: 1
}
.personnelPage .connectedGrid {
grid-template-columns: 1fr;
gap: 12px
}
.personnelPage .connectedCard {
padding: 24px
}
.personnelPage .connectedCard h3 {
font-size: 21px
}
.personnelPage .connectedCard p {
font-size: 13px
}
.personnelPage .connectedCard>.ico {
margin-bottom: 16px
}
.personnelPage .hardwareCard {
display: flex
}
.personnelPage .hardwareImage {
height: 185px;
min-height: 0;
border-bottom: 1px solid var(--line);
border-right: 0
}
.personnelPage .hardwareCopy {
padding: 22px
}
.personnelPage .hardwareCopy h3 {
font-size: 21px
}
.personnelPage .hardwareCopy p {
font-size: 13px
}
.personnelPage .hardwareNote {
font-size: 11px;
padding: 17px
}
.personnelPage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px
}
.personnelPage .integration {
height: 77px;
font-size: 14px
}
.personnelPage .integration:last-child {
grid-column: 1/-1
}
.personnelPage .integrationFlow {
grid-template-columns: 1fr;
padding: 23px;
gap: 13px
}
.personnelPage .integrationFlow>.ico {
transform: rotate(90deg);
width: 20px;
height: 20px;
margin-left: 7px
}
.personnelPage .integrationFlow strong {
font-size: 14px
}
.personnelPage .integrationFlow small {
font-size: 10px
}
.personnelPage .integrationNote {
text-align: left;
font-size: 11px !important
}
.personnelPage .rolloutGrid {
gap: 25px 20px
}
.personnelPage .rolloutStep h3 {
font-size: 18px
}
.personnelPage .rolloutStep p {
font-size: 12px
}
.personnelPage .pilotMeasures {
gap: 13px;
padding: 18px;
font-size: 10px
}
.personnelPage .pilotMeasures strong {
width: 100%
}
.personnelPage .faq details {
padding: 17px 16px;
margin-bottom: 10px
}
.personnelPage .faq summary {
font-size: 13px;
line-height: 1.6
}
.personnelPage .faq details p {
font-size: 13px;
line-height: 1.85
}
.personnelPage .final {
padding: 29px 24px;
border-radius: 0;
gap: 24px
}
.personnelPage .final h2 {
font-size: 32px
}
.personnelPage .final p {
font-size: 14px
}
.personnelPage .final .ctaBtns {
flex-direction: column
}
.personnelPage .final .btn {
width: 100%;
min-height: 47px
}
.personnelPage .contactRow {
flex-direction: column;
align-items: flex-start;
font-size: 11px;
gap: 12px
}
.personnelPage .footerRow {
align-items: flex-start;
gap: 17px
}
.personnelPage .footerLinks {
gap: 10px 17px;
font-size: 10px
}
.personnelPage .pageFooter {
padding: 23px 0
}
}
@media(max-width:359px) { .personnelPage .actions {
flex-direction: column
}
.personnelPage .actions .btn {
width: 100%
}
.personnelPage .personnelStageBase {
height: 530px
}
.personnelPage .personnelPanelBase {
width: 163px;
top: 67px
}
.personnelPage .personnelCardBase {
width: 175px
}
.personnelPage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px
}
.personnelPage .stockCardMetrics strong {
font-size: 22px
}
.personnelPage .stockCardMetrics span {
font-size: 7px
}
.personnelPage .personnelSceneBase {
left: -22px;
width: 114%;
top: 18px;
height: 315px
}
.personnelPage .fl {
grid-template-columns: 1fr
}
.personnelPage .outcomes {
grid-template-columns: 1fr
}
.personnelPage .logos {
grid-template-columns: repeat(2, 1fr)
}
.personnelPage .logoFallback {
font-size: 11px
}
.personnelPage .visualInner {
padding: 12px
}
.personnelPage .appBody {
padding: 12px
}
.personnelPage .receivingPicture {
margin: -12px -12px 12px
}
.personnelPage .auditCard {
padding: 15px 10px
}
.personnelPage .auditCount {
font-size: 31px
}
.personnelPage .auditCard h3 {
font-size: 14px
}
.personnelPage .auditLayout {
gap: 7px
}
.personnelPage .rolloutGrid {
grid-template-columns: 1fr
}
.personnelPage .miniTable {
font-size: 8px
}
.personnelPage .ownerCard strong {
font-size: 23px
}
} .personnelPage .personnelStage {
position: relative;
height: 550px;
max-width: 610px;
margin: auto
}
.personnelPage .personnelScene {
position: absolute;
top: 68px;
left: -27px;
width: 108%;
max-width: none;
height: 420px;
object-fit: contain
}
.personnelPage .stageLabel {
top: 0;
left: 0;
font-size: 10px
}
.personnelPage .presencePanel {
position: absolute;
top: 47px;
right: 0;
width: 228px;
background: #fff;
border: 1px solid #B7D8E8;
border-radius: 15px;
overflow: hidden
}
.personnelPage .presenceHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
background: #F2FAFE;
border-bottom: 1px solid var(--line);
padding: 12px
}
.personnelPage .presenceHead strong {
display: flex;
gap: 7px;
align-items: center;
font-size: 11px;
color: #174157
}
.personnelPage .presenceHead .ico {
width: 18px;
height: 18px;
color: #007FC5
}
.personnelPage .presenceHead .badge {
font-size: 8px
}
.personnelPage .presenceBody {
padding: 15px
}
.personnelPage .presenceBody>small {
display: block;
font-size: 9px;
color: var(--muted)
}
.personnelPage .presenceBody>strong {
display: block;
font-size: 23px;
letter-spacing: -.035em;
color: var(--navy);
margin: 6px 0 13px
}
.personnelPage .presenceRow {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-top: 1px solid #E1EDF3;
font-size: 9px;
line-height: 1.65;
color: #57778B
}
.personnelPage .presenceRow b {
color: #1C4C65;
font-size: 9px;
text-align: right
}
.personnelPage .presenceFoot {
padding: 10px 13px;
background: var(--yellowsoft);
border-top: 1px solid #ECDFAD;
font-size: 9px;
line-height: 1.65;
color: #665314
}
.personnelPage .heroTeamCard {
position: absolute;
bottom: 1px;
left: 0;
width: 268px;
background: #0B2333;
border: 1px solid #264555;
border-radius: 16px;
color: white;
padding: 17px 18px
}
.personnelPage .heroTeamCard .stockCardMetrics strong {
font-size: 29px
}
.personnelPage .heroTeamCard .stockCardMetrics>div+div {
padding-left: 17px
}
.personnelPage .stageTag {
right: 0;
bottom: 15px;
max-width: 215px;
font-size: 9px
}
.personnelPage .heroVisual figcaption {
max-width: 540px;
margin: 14px auto 0
}
.personnelPage .dataFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin: 15px 0
}
.personnelPage .dataFields>div {
background: #F7FBFD;
border: 1px solid #D5E7F0;
border-radius: 9px;
padding: 11px 12px;
min-width: 0
}
.personnelPage .dataFields small {
display: block;
font-size: 9px;
color: #58778C;
margin-bottom: 4px
}
.personnelPage .dataFields strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: #1B465E
}
.personnelPage .personIdentity {
display: grid;
grid-template-columns: 108px 1fr;
gap: 19px;
align-items: center;
margin-bottom: 16px
}
.personnelPage .idBadge {
position: relative;
border: 1px solid #A6CDE0;
border-radius: 13px;
background: #fff;
padding: 15px 12px 12px;
text-align: center;
min-height: 140px
}
.personnelPage .idBadge:before {
content: "";
position: absolute;
top: 7px;
left: 39%;
right: 39%;
height: 5px;
border-radius: 4px;
background: #C9E0EC
}
.personnelPage .idBadge .ico {
width: 47px;
height: 47px;
color: #287CA6;
background: #EAF8FF;
padding: 10px;
border-radius: 50%;
margin-top: 7px
}
.personnelPage .idBadge strong {
display: block;
font-size: 12px;
color: #173E56;
margin-top: 8px
}
.personnelPage .idBadge small {
display: block;
font-size: 8px;
color: #60778A;
margin: 6px 0
}
.personnelPage .idStripes {
height: 15px;
width: 66%;
margin: auto;
background: repeating-linear-gradient(90deg, #244F67 0 2px, transparent 2px 5px, #244F67 5px 6px, transparent 6px 9px)
}
.personnelPage .personName {
font-size: 21px;
letter-spacing: -.025em;
color: #143E58;
display: block;
line-height: 1.3
}
.personnelPage .personIdentity p {
font-size: 10px;
color: var(--muted);
margin: 7px 0 10px;
line-height: 1.7
}
.personnelPage .equipmentLine {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
border-top: 1px solid var(--line);
padding-top: 15px;
margin-top: 14px
}
.personnelPage .equipmentLine>.ico {
width: 30px;
height: 30px;
color: #0076dd;
background: #E9F6FC;
padding: 6px;
border-radius: 8px
}
.personnelPage .equipmentLine strong {
font-size: 11px;
display: block;
color: #204961
}
.personnelPage .equipmentLine small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.personnelPage .checkpointPicture {
height: 184px;
background: #F0F9FD;
margin: -18px -18px 17px;
border-bottom: 1px solid var(--line)
}
.personnelPage .checkpointPicture img {
width: 100%;
height: 100%;
object-fit: contain
}
.personnelPage .attendanceFormula {
display: flex;
align-items: center;
gap: 7px;
justify-content: center;
flex-wrap: wrap;
padding: 13px 10px;
background: #F1F9FD;
border-radius: 9px;
margin-top: 14px;
font-size: 10px;
color: #365E76;
line-height: 1.7
}
.personnelPage .attendanceFormula strong {
color: #173F57;
font-size: 11px
}
.personnelPage .zonePlan {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 9px;
padding: 12px;
background: #E4F0F6;
border-radius: 11px;
border: 1px solid #C7E1EE;
margin: 15px 0
}
.personnelPage .personZone {
min-height: 112px;
background: #fff;
border: 1px solid #BED9E8;
border-radius: 8px;
padding: 13px;
position: relative;
min-width: 0
}
.personnelPage .personZone.selected {
border: 2px solid #0085C7;
background: #EAF8FF;
padding: 12px
}
.personnelPage .personZone.restricted {
background: #FFF8E5;
border-color: #E9D590
}
.personnelPage .personZone strong {
font-size: 11px;
color: #1B4962;
display: block
}
.personnelPage .personZone small {
font-size: 9px;
color: #577B8F;
display: block;
margin-top: 3px
}
.personnelPage .zoneMarker {
display: inline-flex;
align-items: center;
gap: 5px;
background: #0076dd;
border-radius: 6px;
padding: 6px 8px;
margin-top: 14px;
font-size: 9px;
color: #fff;
font-weight: 750
}
.personnelPage .zoneMarker .ico {
width: 13px;
height: 13px
}
.personnelPage .zoneFurnishing {
display: flex;
gap: 5px;
margin-top: 19px
}
.personnelPage .zoneFurnishing i {
height: 22px;
flex: 1;
background: #DEEDF5;
border: 1px solid #B9D7E7;
border-radius: 3px
}
.personnelPage .zoneFurnishing i:nth-child(2) {
background: #C1E1F1
}
.personnelPage .sourceLine {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 11px 12px;
background: #F5FAFD;
border: 1px solid #D5E6EE;
border-radius: 8px;
font-size: 10px;
color: #4A6F86;
line-height: 1.7
}
.personnelPage .sourceLine>.ico {
width: 17px;
height: 17px;
color: #0076dd;
margin-top: 2px
}
.personnelPage .taskLog {
display: grid;
gap: 10px;
margin-top: 16px
}
.personnelPage .taskEntry {
border: 1px solid #D0E4EE;
border-radius: 10px;
background: #F8FCFE;
padding: 13px
}
.personnelPage .taskEntryTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px
}
.personnelPage .taskEntryTop strong {
font-size: 12px;
color: #163F59;
line-height: 1.4
}
.personnelPage .taskEntry small {
display: block;
font-size: 9px;
color: #5C7A8F;
margin-top: 4px
}
.personnelPage .taskEntryMeta {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
font-size: 10px;
color: #4B6E84;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #DEECF3
}
.personnelPage .taskEntryMeta b {
font-size: 13px;
color: #173F59
}
.personnelPage .laborTotal {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 17px;
background: #0B2333;
border-radius: 12px;
margin-top: 14px;
color: #fff
}
.personnelPage .laborTotal small {
display: block;
font-size: 9px;
color: #B9D0DE
}
.personnelPage .laborTotal strong {
display: block;
font-size: 26px;
letter-spacing: -.04em;
line-height: 1.3;
margin-top: 5px;
color: #fff
}
.personnelPage .laborTotal>div+div {
border-left: 1px solid #365366;
padding-left: 20px
}
.personnelPage .laborTotal span {
display: block;
font-size: 9px;
color: #B9D0DE;
margin-top: 5px
}
.personnelPage .rosterSummary {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 9px;
margin: 15px 0
}
.personnelPage .rosterMetric {
border: 1px solid #CAE1ED;
background: #F7FBFD;
border-radius: 9px;
padding: 13px 11px
}
.personnelPage .rosterMetric strong {
display: block;
font-size: 25px;
color: #1A445D;
line-height: 1.1;
letter-spacing: -.03em
}
.personnelPage .rosterMetric small {
display: block;
font-size: 9px;
margin-top: 7px;
color: #5B788B
}
.personnelPage .rosterMetric.review {
background: #FFF9E7;
border-color: #F0DFA9
}
.personnelPage .coverageRow {
display: grid;
grid-template-columns: 86px 1fr 27px;
gap: 10px;
align-items: center;
margin: 13px 0;
font-size: 10px;
color: #41647B
}
.personnelPage .coverageTrack {
height: 12px;
border-radius: 4px;
background: #E6F0F6;
overflow: hidden
}
.personnelPage .coverageTrack span {
height: 100%;
display: block;
background: #0076dd;
border-radius: 4px
}
.personnelPage .coverageRow:nth-child(2) .coverageTrack span {
background: #49ACD8
}
.personnelPage .coverageRow:nth-child(3) .coverageTrack span {
background: #FFC928
}
.personnelPage .shiftFooter {
padding: 12px 13px;
background: #F7FBFE;
border: 1px solid #D7E7F1;
border-radius: 9px;
display: flex;
gap: 9px;
align-items: center;
font-size: 10px;
color: #4E7085;
margin-top: 16px;
line-height: 1.65
}
.personnelPage .shiftFooter .ico {
width: 20px;
height: 20px;
color: #007FC5
}
.personnelPage .eventCard {
padding: 17px;
border: 1px solid #E9D299;
border-left: 4px solid #E3AD21;
background: #FFF9E7;
border-radius: 11px;
margin-bottom: 18px
}
.personnelPage .eventCard .eventTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
margin-bottom: 10px
}
.personnelPage .eventCard strong {
font-size: 14px;
color: #423819;
line-height: 1.4
}
.personnelPage .eventCard p {
font-size: 10px;
color: #71613B;
line-height: 1.75
}
.personnelPage .eventCard small {
display: block;
font-size: 9px;
color: #7B6A3C;
margin-top: 8px
}
.personnelPage .useNote {
background: #F6FBFE;
border: 1px solid #CEE4EE;
border-radius: 12px;
padding: 23px;
margin-top: 28px;
display: grid;
grid-template-columns: 38px 1fr;
gap: 15px;
align-items: start
}
.personnelPage .useNote>.ico {
width: 30px;
height: 30px;
color: #007FC5
}
.personnelPage .useNote strong {
display: block;
color: #173F57;
font-size: 15px;
line-height: 1.5
}
.personnelPage .useNote p {
font-size: 12px;
line-height: 1.8;
margin-top: 7px;
color: #58758A
}
.personnelPage .aiAnswer .aiItem {
grid-template-columns: 1fr auto
}
.personnelPage .hardwareNote strong {
color: #1E435B
}
@media(max-width:1100px) {
.personnelPage .personnelStage {
height: 540px
}
.personnelPage .presencePanel {
width: 205px
}
.personnelPage .heroTeamCard {
width: 230px
}
.personnelPage .stageTag {
max-width: 190px;
font-size: 8px
}
.personnelPage .personnelScene {
height: 390px;
top: 90px
}
.personnelPage .checkpointPicture {
margin: -15px -15px 16px
}
}
@media(max-width:960px) {
.personnelPage .personnelStage {
height: 560px
}
.personnelPage .presencePanel {
width: 233px;
top: 47px
}
.personnelPage .personnelScene {
height: 427px;
top: 71px
}
.personnelPage .heroTeamCard {
width: 275px
}
.personnelPage .stageTag {
max-width: none;
font-size: 9px
}
.personnelPage .checkpointPicture {
height: 203px;
margin: -20px -20px 17px
}
}
@media(max-width:640px) {
.personnelPage .personnelStage {
height: 542px;
max-width: 410px
}
.personnelPage .stageLabel {
font-size: 9px;
padding: 8px 10px
}
.personnelPage .presencePanel {
top: 49px;
width: 177px;
right: 0;
border-radius: 12px
}
.personnelPage .presenceHead {
padding: 10px;
gap: 5px
}
.personnelPage .presenceHead strong {
font-size: 9px;
gap: 5px
}
.personnelPage .presenceHead .ico {
width: 15px;
height: 15px
}
.personnelPage .presenceHead .badge {
font-size: 7px;
padding: 4px
}
.personnelPage .presenceBody {
padding: 12px
}
.personnelPage .presenceBody>small {
font-size: 8px
}
.personnelPage .presenceBody>strong {
font-size: 21px;
margin: 5px 0 10px
}
.personnelPage .presenceRow {
font-size: 8px;
padding: 7px 0;
gap: 6px
}
.personnelPage .presenceRow b {
font-size: 8px
}
.personnelPage .presenceFoot {
font-size: 8px;
padding: 9px 11px
}
.personnelPage .personnelScene {
top: 103px;
left: -26px;
width: 111%;
height: 333px
}
.personnelPage .heroTeamCard {
bottom: 24px;
width: 206px;
padding: 14px;
left: 0
}
.personnelPage .heroTeamCard .stockCardMetrics strong {
font-size: 25px
}
.personnelPage .heroTeamCard .stockCardMetrics span {
font-size: 8px
}
.personnelPage .heroTeamCard .stockCardMetrics>div+div {
padding-left: 12px
}
.personnelPage .stageTag {
max-width: 143px;
font-size: 8px;
bottom: 26px;
padding: 8px
}
.personnelPage .heroVisual figcaption {
margin-top: 0
}
.personnelPage .dataFields {
gap: 8px;
margin: 13px 0
}
.personnelPage .dataFields>div {
padding: 10px
}
.personnelPage .dataFields strong {
font-size: 10px
}
.personnelPage .dataFields small {
font-size: 8px
}
.personnelPage .personIdentity {
grid-template-columns: 87px 1fr;
gap: 12px
}
.personnelPage .idBadge {
padding: 14px 8px 9px;
min-height: 130px
}
.personnelPage .idBadge strong {
font-size: 10px
}
.personnelPage .idBadge small {
font-size: 7px
}
.personnelPage .personName {
font-size: 17px
}
.personnelPage .personIdentity p {
font-size: 9px
}
.personnelPage .equipmentLine {
grid-template-columns: 28px 1fr auto;
gap: 7px
}
.personnelPage .equipmentLine strong {
font-size: 10px
}
.personnelPage .equipmentLine small {
font-size: 8px
}
.personnelPage .checkpointPicture {
height: 150px;
margin: -14px -14px 14px
}
.personnelPage .attendanceFormula {
font-size: 9px;
padding: 11px 8px
}
.personnelPage .attendanceFormula strong {
font-size: 10px
}
.personnelPage .zonePlan {
gap: 7px;
padding: 9px
}
.personnelPage .personZone {
padding: 10px;
min-height: 105px
}
.personnelPage .personZone.selected {
padding: 9px
}
.personnelPage .personZone strong {
font-size: 10px
}
.personnelPage .personZone small {
font-size: 8px
}
.personnelPage .zoneMarker {
font-size: 8px;
gap: 4px;
padding: 6px
}
.personnelPage .zoneMarker .ico {
width: 11px;
height: 11px
}
.personnelPage .sourceLine {
font-size: 9px;
padding: 10px
}
.personnelPage .taskEntry {
padding: 11px
}
.personnelPage .taskEntryTop strong {
font-size: 11px
}
.personnelPage .taskEntry small {
font-size: 8px
}
.personnelPage .taskEntryMeta {
font-size: 9px;
gap: 8px
}
.personnelPage .taskEntryMeta b {
font-size: 12px
}
.personnelPage .laborTotal {
padding: 14px;
gap: 9px
}
.personnelPage .laborTotal strong {
font-size: 24px
}
.personnelPage .laborTotal small,
.personnelPage .laborTotal span {
font-size: 8px
}
.personnelPage .laborTotal>div+div {
padding-left: 15px
}
.personnelPage .rosterSummary {
gap: 7px
}
.personnelPage .rosterMetric {
padding: 11px 9px
}
.personnelPage .rosterMetric strong {
font-size: 24px
}
.personnelPage .rosterMetric small {
font-size: 8px;
line-height: 1.6
}
.personnelPage .coverageRow {
font-size: 9px;
grid-template-columns: 76px 1fr 21px;
gap: 8px
}
.personnelPage .shiftFooter {
font-size: 9px;
padding: 11px
}
.personnelPage .eventCard {
padding: 13px
}
.personnelPage .eventCard strong {
font-size: 12px
}
.personnelPage .eventCard p {
font-size: 9px
}
.personnelPage .eventCard small {
font-size: 8px
}
.personnelPage .useNote {
padding: 20px;
gap: 11px;
grid-template-columns: 27px 1fr
}
.personnelPage .useNote>.ico {
width: 25px;
height: 25px
}
.personnelPage .useNote strong {
font-size: 14px
}
.personnelPage .useNote p {
font-size: 11px
}
}
@media(max-width:359px) {
.personnelPage .personnelStage {
height: 538px
}
.personnelPage .presencePanel {
width: 167px
}
.personnelPage .personnelScene {
left: -26px;
top: 133px;
width: 117%;
height: 298px
}
.personnelPage .heroTeamCard {
width: 185px;
bottom: 17px
}
.personnelPage .stageTag {
max-width: 97px;
font-size: 7px;
bottom: 24px
}
.personnelPage .heroTeamCard .stockCardMetrics strong {
font-size: 23px
}
.personnelPage .heroTeamCard .stockCardHead {
font-size: 7px
}
.personnelPage .personIdentity {
grid-template-columns: 77px 1fr;
gap: 11px
}
.personnelPage .personName {
font-size: 16px
}
.personnelPage .checkpointPicture {
margin: -12px -12px 12px
}
.personnelPage .personZone {
padding: 9px
}
.personnelPage .zoneMarker {
padding: 5px;
font-size: 7px
}
}  .dreamz-fsm-page { --brand: #00A8F8;
--brand-dark: #0076dd;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.11);
--radius: 20px;
--max: 1320px;
}
.dreamz-fsm-page * {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.dreamz-fsm-page {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
.dreamz-fsm-page a {
color: inherit;
text-decoration: none;
}
.dreamz-fsm-page .wrap {
width: min(var(--newmax), calc(100% - 40px));
margin: 0 auto;
}
.dreamz-fsm-page .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.dreamz-fsm-page .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.dreamz-fsm-page .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: 0 8px 20px rgba(0, 168, 248, .23);
}
.dreamz-fsm-page .brand span {
color: var(--brand);
}
.dreamz-fsm-page .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.dreamz-fsm-page .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.dreamz-fsm-page .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: 0 10px 25px rgba(0, 168, 248, .25);
}
.dreamz-fsm-page .button.primary:hover {
background: var(--brand-dark);
}
.dreamz-fsm-page .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.dreamz-fsm-page .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background: radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.dreamz-fsm-page .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.dreamz-fsm-page .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px; margin-bottom: 20px;
}
.dreamz-fsm-page h1,
.dreamz-fsm-page h2,
.dreamz-fsm-page h3 {
margin: 0;
line-height: 1.12;
letter-spacing: 0;
}
.dreamz-fsm-page h1 { color: var(--black);
}
.dreamz-fsm-page h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
}
.dreamz-fsm-page h3 {
font-size: 23px;
color: var(--black);
}
.dreamz-fsm-page .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.dreamz-fsm-page .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.dreamz-fsm-page .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.dreamz-fsm-page .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: 0 10px 25px rgba(11, 11, 11, .18);
}
.dreamz-fsm-page .hero .button.primary:hover {
background: var(--black-soft);
}
.dreamz-fsm-page .hero .button.secondary {
border-color: var(--yellow);
box-shadow: inset 0 -3px 0 var(--yellow);
}
.dreamz-fsm-page .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: var(--shadow);
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.dreamz-fsm-page .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
} .dreamz-fsm-page .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.dreamz-fsm-page .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.dreamz-fsm-page .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.dreamz-fsm-page .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
} .dreamz-fsm-page .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.dreamz-fsm-page .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.dreamz-fsm-page .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.dreamz-fsm-page .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.dreamz-fsm-page .ratingLead strong {
display: block;
font-size: 20px;
}
.dreamz-fsm-page .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.dreamz-fsm-page .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.dreamz-fsm-page .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.dreamz-fsm-page .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.dreamz-fsm-page .ratingItem span {
color: #CFCFCF;
font-size: 11px;
} .dreamz-fsm-page .awardBand { padding: 24px 0;
}
.dreamz-fsm-page .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.dreamz-fsm-page .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.dreamz-fsm-page .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.dreamz-fsm-page .awardLead span {
color: var(--muted);
font-size: 13px;
}
.dreamz-fsm-page .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: 0 8px 22px rgba(11, 11, 11, .05);
}
.dreamz-fsm-page section {
padding: 88px 0;
} .dreamz-fsm-page .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.dreamz-fsm-page .aiJourney {
background: var(--white);
color: var(--ink);
border-top: 4px solid var(--yellow);
border-bottom: 1px solid var(--line);
}
.dreamz-fsm-page .aiJourney h2 {
color: var(--black);
}
.dreamz-fsm-page .aiJourney .sectionHead p {
color: var(--muted);
}
.dreamz-fsm-page .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.dreamz-fsm-page .aiStep {
position: relative;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.dreamz-fsm-page .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--brand-dark);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.dreamz-fsm-page .aiStep:last-child::after {
display: none;
}
.dreamz-fsm-page .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.dreamz-fsm-page .aiStep strong {
display: block;
font-size: 15px;
color: var(--black);
margin-bottom: 7px;
}
.dreamz-fsm-page .aiStep span {
color: var(--muted);
font-size: 12px;
line-height: 1.5;
display: block;
}
.dreamz-fsm-page .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.dreamz-fsm-page .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.dreamz-fsm-page .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.dreamz-fsm-page .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.dreamz-fsm-page .outcome span {
color: var(--muted);
font-size: 14px;
}
.dreamz-fsm-page .capability {
background: #fff;
}
.dreamz-fsm-page .capability.alt {
background: var(--sky-2);
}
.dreamz-fsm-page .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.dreamz-fsm-page .twoCol.reverse .visual {
order: 2;
}
.dreamz-fsm-page .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.dreamz-fsm-page .visual .placeholder {
min-height: 355px;
}
.dreamz-fsm-page .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.dreamz-fsm-page .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.dreamz-fsm-page details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.dreamz-fsm-page details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.dreamz-fsm-page details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.dreamz-fsm-page details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.dreamz-fsm-page details.capabilityMore[open] summary::after {
content: "−";
}
.dreamz-fsm-page details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.dreamz-fsm-page .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.dreamz-fsm-page .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.dreamz-fsm-page .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.dreamz-fsm-page .darkSection h2,
.dreamz-fsm-page .darkSection h3 {
color: #fff;
}
.dreamz-fsm-page .darkSection .sectionHead p,
.dreamz-fsm-page .darkSection .copy p {
color: #D7D7D7;
}
.dreamz-fsm-page .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.dreamz-fsm-page .darkSection .featureItem {
color: #F7F7F7;
}
.dreamz-fsm-page .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.dreamz-fsm-page .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.dreamz-fsm-page .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.dreamz-fsm-page .darkSection .placeholder small {
color: #D0D0D0;
}
.dreamz-fsm-page .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.dreamz-fsm-page .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, .05);
}
.dreamz-fsm-page .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: 0 6px 14px rgba(255, 201, 40, .22);
}
.dreamz-fsm-page .card p {
color: var(--muted);
margin: 12px 0 0;
}
.dreamz-fsm-page .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.dreamz-fsm-page .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.dreamz-fsm-page .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.dreamz-fsm-page .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.dreamz-fsm-page .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.dreamz-fsm-page .benefitBand h2 {
color: #fff;
}
.dreamz-fsm-page .benefitBand .sectionHead p {
color: #D5D5D5;
}
.dreamz-fsm-page .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.dreamz-fsm-page .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.dreamz-fsm-page .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.dreamz-fsm-page .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.dreamz-fsm-page .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.dreamz-fsm-page .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.dreamz-fsm-page .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.dreamz-fsm-page .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.dreamz-fsm-page .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.dreamz-fsm-page .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.dreamz-fsm-page .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.dreamz-fsm-page details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.dreamz-fsm-page summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
.dreamz-fsm-page details p {
color: var(--muted);
margin: 12px 0 0;
}
.dreamz-fsm-page .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: var(--shadow);
border-top: 5px solid var(--yellow);
}
.dreamz-fsm-page .ctaPanel h2 {
color: #fff;
}
.dreamz-fsm-page .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.dreamz-fsm-page .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.dreamz-fsm-page .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.dreamz-fsm-page .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
} .dreamz-fsm-page .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 10px 28px rgba(6, 59, 92, .06);
}
.dreamz-fsm-page .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.dreamz-fsm-page .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.dreamz-fsm-page .inlineCta.dark h3 {
color: #fff;
}
.dreamz-fsm-page .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.dreamz-fsm-page .inlineCta.dark p {
color: #D8D8D8;
}
.dreamz-fsm-page .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.dreamz-fsm-page .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.dreamz-fsm-page .button.yellow:hover {
background: #FFD84D;
}
.dreamz-fsm-page .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.dreamz-fsm-page .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.dreamz-fsm-page .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.dreamz-fsm-page .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.dreamz-fsm-page footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.dreamz-fsm-page .ratingSectionGrid {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.dreamz-fsm-page .heroGrid,
.dreamz-fsm-page .twoCol,
.dreamz-fsm-page .ctaPanel {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .twoCol.reverse .visual {
order: initial;
}
.dreamz-fsm-page .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.dreamz-fsm-page .ratingGrid,
.dreamz-fsm-page .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.dreamz-fsm-page .ratingLead,
.dreamz-fsm-page .awardLead {
grid-column: 1/-1;
text-align: center;
}
.dreamz-fsm-page .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.dreamz-fsm-page .aiStep:nth-child(3)::after,
.dreamz-fsm-page .aiStep:last-child::after {
display: none;
}
.dreamz-fsm-page .outcomeGrid,
.dreamz-fsm-page .challengeGrid,
.dreamz-fsm-page .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.dreamz-fsm-page .cards,
.dreamz-fsm-page .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.dreamz-fsm-page .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.dreamz-fsm-page .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.dreamz-fsm-page .awardProofGrid {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .wrap {
width: min(var(--max), calc(100% - 24px));
}
.dreamz-fsm-page .hero {
padding: 58px 0 52px;
}
.dreamz-fsm-page section {
padding: 64px 0;
} .dreamz-fsm-page .aiFlow {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .aiStep::after {
display: none;
}
.dreamz-fsm-page .logoRow,
.dreamz-fsm-page .ratingGrid,
.dreamz-fsm-page .awardGrid,
.dreamz-fsm-page .outcomeGrid,
.dreamz-fsm-page .challengeGrid,
.dreamz-fsm-page .benefitGrid,
.dreamz-fsm-page .cards,
.dreamz-fsm-page .proofCards,
.dreamz-fsm-page .integrationGrid,
.dreamz-fsm-page .featureList {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.dreamz-fsm-page .ctaPanel {
padding: 34px 24px;
}
.dreamz-fsm-page .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.dreamz-fsm-page .inlineCtaActions {
width: 100%;
}
.dreamz-fsm-page .inlineCtaActions .button {
flex: 1;
}
} .dreamz-fsm-page {
--brand-dark: #0075B0;
--muted: #51687A;
--shadow: none;
--max: 1320px;
}
html {
scroll-padding-top: 96px;
}
.dreamz-fsm-page {
background: #FFF;
}
.dreamz-fsm-page img {
max-width: 100%;
height: auto;
}
.dreamz-fsm-page figure {
margin: 0;
}
.dreamz-fsm-page button {
font: inherit;
}
.dreamz-fsm-page button,
.dreamz-fsm-page summary,
.dreamz-fsm-page a {
-webkit-tap-highlight-color: transparent;
}
.dreamz-fsm-page a:focus-visible,
.dreamz-fsm-page button:focus-visible,
.dreamz-fsm-page summary:focus-visible {
outline: 3px solid #008BCD;
outline-offset: 5px;
}
.dreamz-fsm-page p {
overflow-wrap: break-word;
}
.dreamz-fsm-page h1,
.dreamz-fsm-page h2,
.dreamz-fsm-page h3 {
letter-spacing: -.04em;
} .dreamz-fsm-page h2 {
font-size: clamp(32px, 3.4vw, 46px);
line-height: 1.12;
}
.dreamz-fsm-page h3 {
font-size: 22px;
line-height: 1.25;
}
.dreamz-fsm-page section {
padding: 78px 0;
scroll-margin-top: 20px;
}
.dreamz-fsm-page .wrap {
width: min(var(--newmax), calc(100% - 48px));
}
.dreamz-fsm-page .eyebrow {
font-size: 12px;
letter-spacing: .04em;
font-weight: 800;
text-transform: uppercase;
padding: 7px 12px;
margin-bottom: 17px;
} .dreamz-fsm-page .sectionHead p {
font-size: 17px;
line-height: 1.75;
}
.dreamz-fsm-page .skipLink {
position: fixed;
top: -90px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #111;
color: #FFF;
border-radius: 8px;
}
.dreamz-fsm-page .skipLink:focus {
top: 10px;
}
.dreamz-fsm-page .topbar {
background: #FFF;
backdrop-filter: none;
position: sticky;
top: 0;
}
.dreamz-fsm-page .brand {
font-size: 25px;
line-height: 1.1;
letter-spacing: -1.1px;
color: #0B0B0B;
gap: 8px;
}
.dreamz-fsm-page .brandMark {
width: 33px;
height: 33px;
background: #00A8F8;
box-shadow: none;
border-radius: 9px;
display: grid;
place-items: center;
color: white;
position: relative;
}
.dreamz-fsm-page .brandMark:after {
content: "";
width: 14px;
height: 17px;
border: 3px solid #FFF;
border-left: 0;
border-radius: 0 10px 10px 0;
}
.dreamz-fsm-page .brand span {
color: #0079B5;
}
.dreamz-fsm-page .brand .brandMark {
color: white;
}
.dreamz-fsm-page .brand small {
display: block;
font-size: 10px;
color: var(--muted);
font-weight: 600;
letter-spacing: .05em;
margin: 5px 0 0 2px;
}
.dreamz-fsm-page .navlinks {
font-weight: 650;
gap: 25px;
color: #405A6F;
}
.dreamz-fsm-page .navlinks a:hover {
color: var(--brand-dark);
}
.dreamz-fsm-page .button {
border-radius: 9px;
font-size: 14px;
min-height: 47px;
font-weight: 750;
gap: 14px;
box-shadow: none !important;
line-height: 1.35;
text-align: center;
padding: 12px 20px;
transition: background .15s, border-color .15s;
}
.dreamz-fsm-page .button.primary {
background: #0079B5;
color: white;
}
.dreamz-fsm-page .button.primary:hover {
background: #005E91;
}
.dreamz-fsm-page .button.secondary {
border: 1px solid #BFD2DF;
}
.dreamz-fsm-page .button.black:hover {
background: #2E2E2E;
}
.dreamz-fsm-page .button.yellow:hover {
background: #FFE079;
}
.dreamz-fsm-page .nav .button {
min-height: 42px;
padding: 10px 17px;
}
.dreamz-fsm-page .menuToggle {
display: none;
border: 1px solid var(--line);
background: #FFF;
border-radius: 8px;
width: 43px;
height: 43px;
padding: 10px;
}
.dreamz-fsm-page .menuToggle span {
display: block;
height: 2px;
background: #11283A;
margin: 4px 0;
}
.dreamz-fsm-page .mobileMenu {
border-top: 1px solid var(--line);
background: #FFF;
padding: 12px 24px 20px;
}
.dreamz-fsm-page .mobileMenu[hidden] {
display: none;
}
.dreamz-fsm-page .mobileMenu a {
display: block;
padding: 12px 0;
border-bottom: 1px solid var(--line);
font-weight: 650;
}
.dreamz-fsm-page .breadcrumb {
font-size: 12px;
color: #4E6475;
margin: 0 0 27px;
display: flex;
gap: 10px;
align-items: center;
}
.dreamz-fsm-page .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px;
}
.dreamz-fsm-page .hero {
padding: 37px 0 64px;
background: radial-gradient(ellipse at 86% 32%, #D9F1FE 0, transparent 44%), linear-gradient(180deg, #FFF, #F4FBFF);
overflow: hidden;
}
.dreamz-fsm-page .heroGrid {
grid-template-columns: 1fr 1.04fr;
gap: 42px;
align-items: center;
}
.dreamz-fsm-page .hero h1 .accent {
background: linear-gradient(transparent 80%, #FFC928 80%);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.dreamz-fsm-page .hero .lead {
font-size: 18px;
line-height: 1.75;
margin-top: 24px;
max-width: 570px;
}
.dreamz-fsm-page .hero .eyebrow {
margin-bottom: 20px;
}
.dreamz-fsm-page .heroActions {
margin-top: 26px;
}
.dreamz-fsm-page .hero .button.secondary {
box-shadow: inset 0 -3px 0 var(--yellow) !important;
}
.dreamz-fsm-page .hero .copy .microcopy {
font-size: 12px;
margin: 16px 0 0;
line-height: 1.7;
}
.dreamz-fsm-page .heroVisual {
position: relative;
padding: 35px 0 49px;
}
.dreamz-fsm-page .heroCanvas {
position: relative;
z-index: 1;
border-radius: 20px;
overflow: hidden;
transform: translateY(8px);
background: #FFF;
border: 1px solid #D4E6F0;
}
.dreamz-fsm-page .heroCanvas img {
display: block;
width: 100%;
height: auto;
}
.dreamz-fsm-page .visualLabel {
font-size: 10px;
letter-spacing: .05em;
text-transform: uppercase;
color: #51687A;
line-height: 1.5;
margin: 12px 3px 0;
}
.dreamz-fsm-page .floatingNote {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid #D2E6EF;
background: white;
border-radius: 12px;
padding: 12px 16px;
font-size: 12px;
}
.dreamz-fsm-page .floatingNote strong {
display: block;
font-size: 13px;
}
.dreamz-fsm-page .floatingNote span {
color: #546E7F;
font-size: 11px;
}
.dreamz-fsm-page .floatTop {
top: 0;
left: 22px;
}
.dreamz-fsm-page .floatBottom {
bottom: 0;
right: 14px;
}
.dreamz-fsm-page .roundIcon {
width: 34px;
height: 34px;
border-radius: 10px;
background: #FFF3CA;
display: grid;
place-items: center;
font-size: 17px;
color: #111;
flex: 0 0 auto;
}
.dreamz-fsm-page .floatBottom .roundIcon {
background: #EAF8F3;
color: #087349;
}
.dreamz-fsm-page .heroProof {
display: flex;
gap: 12px;
align-items: center;
font-size: 12px;
margin-top: 22px;
color: #405B6F;
}
.dreamz-fsm-page .heroProof .proofTick {
display: grid;
place-items: center;
width: 23px;
height: 23px;
border-radius: 50%;
background: #E6F6EF;
color: #087349;
}
.dreamz-fsm-page .clientBand {
padding: 23px 0 25px;
}
.dreamz-fsm-page .trustLabel {
font-weight: 650;
font-size: 12px;
color: #587083;
margin-bottom: 18px;
}
.dreamz-fsm-page .logoRow {
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.dreamz-fsm-page .logoBox {
min-height: 39px;
border: 0;
background: transparent;
padding: 0;
font-size: 17px;
font-weight: 850;
color: #344C5D;
line-height: 1.15;
border-radius: 0;
}
.dreamz-fsm-page .logoBox small {
display: block;
font-size: 9px;
letter-spacing: .09em;
font-weight: 650;
}
.dreamz-fsm-page .aiJourney {
padding: 63px 0;
background: var(--white);
}
.dreamz-fsm-page .aiJourney .sectionHead {
margin-bottom: 30px;
}
.dreamz-fsm-page .aiJourney .sectionHead p {
font-size: 16px;
max-width: 700px;
}
.dreamz-fsm-page .aiFlow {
gap: 13px;
}
.dreamz-fsm-page .aiStep {
background: var(--sky-2);
border-color: var(--line);
min-height: 164px;
padding: 18px 15px;
border-radius: 12px;
}
.dreamz-fsm-page .aiStepNum {
width: 27px;
height: 27px;
font-size: 11px;
}
.dreamz-fsm-page .aiStep strong {
font-size: 14px;
}
.dreamz-fsm-page .aiStep span {
color: var(--muted);
font-size: 12px;
}
.dreamz-fsm-page .aiStep::after {
right: -12px;
font-size: 16px;
}
.dreamz-fsm-page .workflowLink {
font-size: 13px;
color: var(--brand-dark);
margin-top: 22px;
display: inline-block;
text-decoration: underline;
text-underline-offset: 4px;
}
.dreamz-fsm-page .outcomeGrid {
gap: 18px;
}
.dreamz-fsm-page .outcome {
padding: 23px 20px;
box-shadow: none;
}
.dreamz-fsm-page .outcome strong {
font-size: 20px;
line-height: 1.25;
letter-spacing: -.02em;
}
.dreamz-fsm-page .outcome span {
font-size: 14px;
line-height: 1.7;
}
.dreamz-fsm-page .outcomeNumber {
font-size: 12px;
letter-spacing: .05em;
color: #607487;
font-weight: 750;
margin-bottom: 14px;
}
.dreamz-fsm-page .twoCol {
grid-template-columns: 1fr 1fr;
gap: 58px;
}
.dreamz-fsm-page .twoCol>* {
min-width: 0;
}
.dreamz-fsm-page .twoCol.imageFirst .copy {
order: 2;
}
.dreamz-fsm-page .twoCol.imageFirst .visual {
order: 1;
}
.dreamz-fsm-page .copy p {
font-size: 16px;
line-height: 1.8;
}
.dreamz-fsm-page .copy .scopeNote {
font-size: 12px;
line-height: 1.7;
color: #597184;
margin-top: 18px;
max-width: 520px;
}
.dreamz-fsm-page .featureList {
gap: 13px 19px;
margin-top: 25px;
}
.dreamz-fsm-page .featureItem {
font-size: 13px;
line-height: 1.55;
gap: 8px;
}
.dreamz-fsm-page .check {
flex-basis: 19px;
width: 19px;
height: 19px;
font-size: 11px;
background: #E8F5EE;
color: #087349;
}
.dreamz-fsm-page .productVisual img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
}
.dreamz-fsm-page .productVisual figcaption {
font-size: 10px;
color: #617889;
line-height: 1.6;
padding: 10px 4px 0;
}
.dreamz-fsm-page .productScreen {
margin: 13px 0 0;
padding: 0;
border: 0;
background: transparent;
border-radius: 0;
}
.dreamz-fsm-page .productScreen>summary {
list-style: none;
color: #0075B0;
font-size: 12px;
font-weight: 750;
display: flex;
gap: 12px;
justify-content: space-between;
border-top: 1px solid #D4E5EF;
padding: 12px 2px;
}
.dreamz-fsm-page .productScreen>summary::-webkit-details-marker {
display: none;
}
.dreamz-fsm-page .productScreen[open]>summary>span {
transform: rotate(45deg);
}
.dreamz-fsm-page .productScreen figure {
border: 1px solid #D9E8F1;
padding: 12px;
border-radius: 12px;
background: white;
}
.dreamz-fsm-page .productScreen figure img {
display: block;
margin: auto;
}
.dreamz-fsm-page .productScreen img[hidden],
.dreamz-fsm-page .imageNotice[hidden] {
display: none !important;
}
.dreamz-fsm-page .productScreen figcaption,
.dreamz-fsm-page .imageNotice {
font-size: 11px;
color: #536C7F;
line-height: 1.6;
}
.dreamz-fsm-page .imageNotice a {
text-decoration: underline;
}
.dreamz-fsm-page .textCta {
font-size: 13px;
line-height: 1.6;
}
.dreamz-fsm-page .capabilityMore {
margin-bottom: 0;
}
.dreamz-fsm-page .capabilityMore .moreGrid {
gap: 12px 19px;
}
.dreamz-fsm-page details.capabilityMore summary {
font-size: 13px;
}
.dreamz-fsm-page .ctaBridge {
padding: 0 0 36px;
background: #F5FBFF;
}
.dreamz-fsm-page .inlineCta {
margin: 0;
box-shadow: none;
padding: 23px 27px;
border-radius: 12px;
}
.dreamz-fsm-page .inlineCta .button {
flex-shrink: 0;
}
.dreamz-fsm-page .inlineCta h3 {
font-size: 20px;
}
.dreamz-fsm-page .inlineCta p {
font-size: 13px;
}
.dreamz-fsm-page .darkSection {
background: #101416;
}
.dreamz-fsm-page .darkSection .scopeNote {
color: #C0CED8;
}
.dreamz-fsm-page .darkSection .productVisual figcaption {
color: #BBCDD8;
}
.dreamz-fsm-page .darkSection .textCta {
color: #FFE082;
}
.dreamz-fsm-page .darkSection .check {
background: #FFC928;
color: #111;
}
.dreamz-fsm-page .sectionHead.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.dreamz-fsm-page .center .eyebrow {
margin-left: auto;
margin-right: auto;
}
.dreamz-fsm-page .cards {
gap: 20px;
}
.dreamz-fsm-page .card {
box-shadow: none;
padding: 25px;
border-radius: 14px;
}
.dreamz-fsm-page .card p {
font-size: 14px;
line-height: 1.8;
}
.dreamz-fsm-page .cardIcon {
box-shadow: none;
background: #FFF3CA;
width: 42px;
height: 42px;
border-radius: 11px;
font-size: 17px;
}
.dreamz-fsm-page .cardLink {
display: inline-flex;
gap: 8px;
margin-top: 17px;
font-size: 12px;
color: #0075B0;
font-weight: 750;
text-decoration: underline;
text-underline-offset: 4px;
}
.dreamz-fsm-page .card h3 {
font-size: 21px;
}
.dreamz-fsm-page .benefitBand {
padding: 57px 0;
background: #101416;
}
.dreamz-fsm-page .benefitGrid {
gap: 18px;
}
.dreamz-fsm-page .benefit {
background: #1D252A;
border-color: #35444E;
padding: 23px;
}
.dreamz-fsm-page .benefit strong {
font-size: 21px;
line-height: 1.2;
margin-bottom: 12px;
}
.dreamz-fsm-page .benefit span {
font-size: 13px;
}
.dreamz-fsm-page .caseChips {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 20px 0;
}
.dreamz-fsm-page .caseChips span {
font-size: 11px;
background: #EDF6FC;
border: 1px solid #DCE9F2;
padding: 5px 9px;
border-radius: 7px;
color: #3F6179;
}
.dreamz-fsm-page .sourceNote {
font-size: 11px !important;
color: #617587 !important;
}
.dreamz-fsm-page .integrationGrid {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.dreamz-fsm-page .integration {
min-height: 128px;
border-bottom: 3px solid #00A8F8;
place-items: start;
align-content: center;
text-align: left;
gap: 8px;
padding: 21px;
font-size: 18px;
border-radius: 12px;
}
.dreamz-fsm-page .integration span {
font-size: 12px;
color: #526B7D;
line-height: 1.6;
font-weight: 450;
}
.dreamz-fsm-page .integration a {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.dreamz-fsm-page .integrationFoot {
font-size: 12px;
color: #587083;
margin: 21px 0 0;
line-height: 1.8;
}
.dreamz-fsm-page .industries .card {
position: relative;
min-height: 195px;
background: #FFF;
}
.dreamz-fsm-page .industries .cardIcon {
background: #E9F6FE;
color: #0075B0;
}
.dreamz-fsm-page .industryExtra {
padding: 20px 0 0;
color: #546D7D;
font-size: 13px;
text-align: center;
}
.dreamz-fsm-page .proofStrip {
padding: 28px 0;
background: #11181D;
border-top: 3px solid #FFC928;
color: #FFF;
}
.dreamz-fsm-page .proofStrip .wrap {
display: flex;
justify-content: space-between;
gap: 30px;
align-items: center;
}
.dreamz-fsm-page .proofStrip strong {
font-size: 19px;
letter-spacing: -.02em;
}
.dreamz-fsm-page .proofStrip p {
margin: 5px 0 0;
font-size: 13px;
color: #C6D4DE;
}
.dreamz-fsm-page .proofStrip a {
color: #FFE078;
text-decoration: underline;
text-underline-offset: 4px;
font-size: 13px;
white-space: nowrap;
}
.dreamz-fsm-page .ctaPanel {
border-radius: 22px;
padding: 43px 46px;
box-shadow: none;
grid-template-columns: 1fr auto;
background: #101416;
}
.dreamz-fsm-page .ctaPanel h2 {
font-size: 38px;
max-width: 650px;
}
.dreamz-fsm-page .ctaPanel p {
font-size: 15px;
line-height: 1.8;
max-width: 640px;
}
.dreamz-fsm-page .ctaActions {
display: flex;
flex-direction: column;
gap: 10px;
}
.dreamz-fsm-page .ctaActions .button {
min-width: 194px;
}
.dreamz-fsm-page .ctaPanel .scopeNote {
color: #C5D1D9;
font-size: 12px;
margin-top: 15px;
}
.dreamz-fsm-page .finalCta {
padding: 60px 0 75px;
background: #F4FAFD;
}
.dreamz-fsm-page .footerGrid {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.dreamz-fsm-page .footerBrand {
font-weight: 800;
font-size: 20px;
color: #0B0B0B;
}
.dreamz-fsm-page .footerGrid p {
margin: 8px 0 0;
font-size: 12px;
}
.dreamz-fsm-page .footerLinks {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-size: 12px;
}
.dreamz-fsm-page .footerLinks a {
text-decoration: underline;
text-underline-offset: 3px;
}
.dreamz-fsm-page footer {
padding: 32px 0;
background: white;
}
.dreamz-fsm-page .footerLegal {
font-size: 11px;
color: #607789;
margin: 21px 0 0;
}
.dreamz-fsm-page .noScriptNote {
padding: 12px;
background: #FFF7D6;
font-size: 13px;
}
.dreamz-fsm-page .visuallyHidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (min-width:1441px) {
.dreamz-fsm-page .heroGrid {
gap: 50px;
}
.dreamz-fsm-page .heroVisual {
margin-left: 0;
}
}
@media (max-width:1100px) {
.dreamz-fsm-page .navlinks {
gap: 17px;
font-size: 12px;
}
.dreamz-fsm-page .nav {
gap: 18px;
}
.dreamz-fsm-page .heroGrid {
gap: 28px;
}
.dreamz-fsm-page .twoCol {
gap: 35px;
}
.dreamz-fsm-page .integrationGrid {
grid-template-columns: repeat(4, 1fr);
}
.dreamz-fsm-page .hero .lead {
font-size: 17px;
}
.dreamz-fsm-page .featureList {
gap: 13px 12px;
}
.dreamz-fsm-page .featureItem {
font-size: 12px;
}
.dreamz-fsm-page .aiStep {
padding: 17px 12px;
}
}
@media (max-width:980px) {
.dreamz-fsm-page .navlinks {
display: none;
}
.dreamz-fsm-page .menuToggle {
display: block;
}
.dreamz-fsm-page .nav .navCta {
margin-left: auto;
}
.dreamz-fsm-page .heroGrid,
.dreamz-fsm-page .twoCol {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .hero .copy {
max-width: 660px;
}
.dreamz-fsm-page .hero {
padding-bottom: 45px;
}
.dreamz-fsm-page .hero h1 {
max-width: 690px; }
.dreamz-fsm-page .hero .lead {
max-width: 680px;
}
.dreamz-fsm-page .heroVisual {
width: min(100%, 660px);
justify-self: center;
margin-top: 15px;
}
.dreamz-fsm-page .twoCol.imageFirst .copy {
order: 1;
}
.dreamz-fsm-page .twoCol.imageFirst .visual {
order: 2;
}
.dreamz-fsm-page .twoCol .visual {
max-width: 670px;
width: 100%;
justify-self: center;
}
.dreamz-fsm-page .twoCol {
gap: 32px;
}
.dreamz-fsm-page .featureItem {
font-size: 14px;
}
.dreamz-fsm-page .heroProof {
margin-top: 18px;
}
.dreamz-fsm-page .logoRow {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.dreamz-fsm-page .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.dreamz-fsm-page .aiStep:nth-child(3)::after {
display: none;
}
.dreamz-fsm-page .cards {
grid-template-columns: repeat(2, 1fr);
}
.dreamz-fsm-page .integrationGrid {
grid-template-columns: repeat(2, 1fr);
}
.dreamz-fsm-page .ctaPanel {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .ctaActions {
flex-direction: row;
flex-wrap: wrap;
}
.dreamz-fsm-page .proofStrip .wrap {
align-items: flex-start;
}
.dreamz-fsm-page .heroCanvas {
max-width: 640px;
margin: auto;
}
.dreamz-fsm-page section {
padding: 60px 0;
}
}
@media (max-width:640px) {
.dreamz-fsm-page .wrap {
width: calc(100% - 32px);
}
.dreamz-fsm-page .nav {
min-height: 70px;
gap: 12px;
}
.dreamz-fsm-page .brand {
font-size: 22px;
gap: 7px;
}
.dreamz-fsm-page .brandMark {
width: 29px;
height: 29px;
border-radius: 7px;
}
.dreamz-fsm-page .brand small {
font-size: 8px;
}
.dreamz-fsm-page .nav .button {
font-size: 11px;
padding: 9px 12px;
min-height: 39px;
}
.dreamz-fsm-page .menuToggle {
width: 38px;
height: 39px;
padding: 8px;
}
.dreamz-fsm-page .hero {
padding: 24px 0 39px;
} .dreamz-fsm-page .hero .lead {
font-size: 16px;
line-height: 1.8;
}
.dreamz-fsm-page .heroGrid {
gap: 25px;
}
.dreamz-fsm-page .breadcrumb {
font-size: 11px;
margin-bottom: 24px;
gap: 6px;
}
.dreamz-fsm-page .eyebrow {
font-size: 10px;
margin-bottom: 16px;
}
.dreamz-fsm-page .heroActions {
gap: 10px;
}
.dreamz-fsm-page .heroActions .button {
font-size: 12px;
min-height: 46px;
padding: 12px 15px;
flex: 1;
}
.dreamz-fsm-page .heroVisual {
padding: 34px 0 42px;
margin-top: 6px;
}
.dreamz-fsm-page .heroCanvas {
border-radius: 13px;
}
.dreamz-fsm-page .floatingNote {
padding: 8px 11px;
gap: 8px;
border-radius: 9px;
}
.dreamz-fsm-page .floatingNote strong {
font-size: 11px;
}
.dreamz-fsm-page .floatingNote span {
font-size: 9px;
}
.dreamz-fsm-page .roundIcon {
width: 27px;
height: 27px;
border-radius: 7px;
font-size: 14px;
}
.dreamz-fsm-page .floatTop {
left: 10px;
}
.dreamz-fsm-page .floatBottom {
right: 6px;
}
.dreamz-fsm-page .heroProof {
font-size: 11px;
}
.dreamz-fsm-page .hero .copy .microcopy {
font-size: 11px;
}
.dreamz-fsm-page .clientBand {
padding: 21px 0;
}
.dreamz-fsm-page .logoRow {
grid-template-columns: repeat(3, 1fr);
gap: 22px 12px;
}
.dreamz-fsm-page .logoBox {
font-size: 13px;
}
.dreamz-fsm-page .logoBox small {
font-size: 7px;
}
.dreamz-fsm-page .trustLabel {
font-size: 10px;
max-width: 280px;
margin: 0 auto 22px;
}
.dreamz-fsm-page .aiJourney {
padding: 44px 0;
}
.dreamz-fsm-page .aiFlow {
grid-template-columns: repeat(2, 1fr);
gap: 11px;
}
.dreamz-fsm-page .aiStep {
min-height: 159px;
padding: 16px 13px;
}
.dreamz-fsm-page .aiStep::after {
display: none;
}
.dreamz-fsm-page .aiStep strong {
font-size: 13px;
}
.dreamz-fsm-page .aiStep span {
font-size: 11px;
}
.dreamz-fsm-page .sectionHead {
margin-bottom: 29px;
}
.dreamz-fsm-page .sectionHead p {
font-size: 15px;
}
.dreamz-fsm-page h2 {
font-size: 32px;
}
.dreamz-fsm-page h3 {
font-size: 21px;
}
.dreamz-fsm-page .outcomeGrid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.dreamz-fsm-page .outcome {
padding: 20px 15px;
}
.dreamz-fsm-page .outcome strong {
font-size: 18px;
}
.dreamz-fsm-page .outcome span {
font-size: 12px;
}
.dreamz-fsm-page .outcomeNumber {
margin-bottom: 12px;
font-size: 10px;
}
.dreamz-fsm-page .featureList {
grid-template-columns: 1fr 1fr;
gap: 13px;
}
.dreamz-fsm-page .featureItem {
font-size: 12px;
}
.dreamz-fsm-page .copy p {
font-size: 15px;
}
.dreamz-fsm-page .productVisual figcaption {
font-size: 9px;
}
.dreamz-fsm-page .productScreen>summary {
font-size: 11px;
}
.dreamz-fsm-page .copy .scopeNote {
font-size: 11px;
}
.dreamz-fsm-page .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .cards {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .card {
padding: 24px;
}
.dreamz-fsm-page .card p {
font-size: 14px;
}
.dreamz-fsm-page .ctaBridge {
padding-bottom: 25px;
}
.dreamz-fsm-page .inlineCta {
padding: 23px;
gap: 18px;
align-items: flex-start;
flex-direction: column;
}
.dreamz-fsm-page .inlineCta h3 {
font-size: 19px;
}
.dreamz-fsm-page .inlineCta .button {
width: 100%;
font-size: 12px;
}
.dreamz-fsm-page .integrationGrid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.dreamz-fsm-page .integration {
font-size: 16px;
min-height: 130px;
padding: 18px 15px;
}
.dreamz-fsm-page .integration span {
font-size: 11px;
}
.dreamz-fsm-page .benefitGrid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.dreamz-fsm-page .benefit {
padding: 20px 15px;
}
.dreamz-fsm-page .benefit strong {
font-size: 18px;
}
.dreamz-fsm-page .benefit span {
font-size: 12px;
}
.dreamz-fsm-page .proofStrip .wrap {
flex-direction: column;
gap: 15px;
}
.dreamz-fsm-page .proofStrip strong {
font-size: 19px;
}
.dreamz-fsm-page .proofStrip p {
font-size: 12px;
}
.dreamz-fsm-page .ctaPanel {
padding: 29px 25px;
border-radius: 17px;
gap: 24px;
}
.dreamz-fsm-page .ctaPanel h2 {
font-size: 31px;
}
.dreamz-fsm-page .ctaPanel p {
font-size: 14px;
}
.dreamz-fsm-page .ctaActions {
flex-direction: column;
}
.dreamz-fsm-page .ctaActions .button {
width: 100%;
font-size: 13px;
}
.dreamz-fsm-page .footerGrid {
flex-direction: column;
align-items: flex-start;
gap: 22px;
}
.dreamz-fsm-page .footerLinks {
gap: 15px;
}
.dreamz-fsm-page .finalCta {
padding: 40px 0 52px;
}
.dreamz-fsm-page .twoCol {
gap: 28px;
}
.dreamz-fsm-page section {
padding: 48px 0;
}
.dreamz-fsm-page .benefitBand {
padding: 45px 0;
}
}
@media (max-width:360px) {
.dreamz-fsm-page .nav .navCta {
display: none;
}
.dreamz-fsm-page .menuToggle {
margin-left: auto;
} .dreamz-fsm-page .featureList {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .heroActions {
flex-direction: column;
}
.dreamz-fsm-page .outcomeGrid {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .integrationGrid {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .aiFlow {
grid-template-columns: 1fr 1fr;
}
.dreamz-fsm-page .benefitGrid {
grid-template-columns: 1fr;
}
.dreamz-fsm-page .logoBox {
font-size: 12px;
}
} .dreamz-fsm-page .vedaSection {
padding: 68px 0 46px;
background: linear-gradient(135deg, #0B0B0B 0%, #141414 100%);
border-top: 0;
border-bottom: 1px solid #292929;
}
.dreamz-fsm-page .vedaGrid {
grid-template-columns: 0.96fr 1.04fr;
gap: 46px;
align-items: center;
}
.dreamz-fsm-page .vedaSection .eyebrow {
padding: 8px 13px;
margin-bottom: 24px;
color: var(--black);
background: var(--yellow);
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 850;
}
.dreamz-fsm-page .vedaSection h2 {
color: #FFFFFF;
font-size: clamp(34px, 3.35vw, 49px);
line-height: 1.24;
letter-spacing: -0.035em;
}
.dreamz-fsm-page .vedaSection .copy>p {
color: #D7D7D7;
font-size: 16px;
line-height: 1.8;
margin-top: 24px;
}
.dreamz-fsm-page .vedaSection .featureList {
grid-template-columns: 1fr 1fr;
gap: 13px 22px;
margin-top: 26px;
}
.dreamz-fsm-page .vedaSection .featureItem {
font-size: 14px;
line-height: 1.5;
gap: 10px;
color: #F7F7F7;
}
.dreamz-fsm-page .vedaSection .check {
width: 22px;
height: 22px;
flex: 0 0 22px;
border-radius: 50%;
background: var(--success-bg);
color: var(--success);
}
.dreamz-fsm-page .vedaPanel {
width: 100%;
padding: 23px;
border: 1px solid #333333;
border-radius: 21px;
background: #111111;
}
.dreamz-fsm-page .vedaPanelHead {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 16px;
}
.dreamz-fsm-page .vedaBadge {
display: grid;
place-items: center;
flex: 0 0 35px;
width: 35px;
height: 35px;
border-radius: 10px;
color: var(--black);
background: var(--yellow);
font-size: 13px;
font-weight: 900;
}
.dreamz-fsm-page .vedaPanel h3 {
font-size: 24px;
letter-spacing: -0.025em;
color: #FFFFFF;
}
.dreamz-fsm-page .vedaPrompts {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.dreamz-fsm-page .vedaPrompts li {
margin: 0;
padding: 14px 15px;
border: 1px solid #303030;
border-radius: 12px;
background: #1E1E1E;
color: #F3F3F3;
font-size: 15px;
line-height: 1.55;
}
.dreamz-fsm-page .vedaCards {
grid-template-columns: repeat(3, 1fr);
gap: 13px;
margin-top: 32px;
}
.dreamz-fsm-page .vedaCards .card {
padding: 21px 18px;
border: 1px solid #303030;
border-radius: 14px;
background: #151515;
box-shadow: none;
}
.dreamz-fsm-page .vedaCards h3 {
color: var(--yellow);
font-size: 20px;
letter-spacing: -0.025em;
line-height: 1.3;
}
.dreamz-fsm-page .vedaCards p {
color: #D7D7D7;
font-size: 15px;
line-height: 1.65;
margin: 10px 0 0;
} .dreamz-fsm-page .faq {
max-width: 900px;
}
.dreamz-fsm-page .faq .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.dreamz-fsm-page .faq .eyebrow {
font-size: 13px;
font-weight: 850;
padding: 8px 13px;
margin-bottom: 20px;
text-transform: none;
letter-spacing: 0;
}
.dreamz-fsm-page .faq h2 {
font-size: clamp(32px, 4.3vw, 50px);
line-height: 1.12;
letter-spacing: -0.035em;
}
.dreamz-fsm-page .faq .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
line-height: 1.65;
} @media (max-width: 980px) {
.dreamz-fsm-page .vedaGrid {
grid-template-columns: 1fr;
gap: 32px;
}
.dreamz-fsm-page .vedaGrid .vedaVisual {
max-width: none;
width: 100%;
}
.dreamz-fsm-page .vedaSection h2 {
max-width: 700px;
font-size: 44px;
}
.dreamz-fsm-page .vedaSection .copy>p {
max-width: 760px;
}
.dreamz-fsm-page .vedaSection .featureList {
max-width: 760px;
}
.dreamz-fsm-page .vedaCards {
gap: 13px;
}
}
@media (max-width: 640px) {
.dreamz-fsm-page .vedaSection {
padding: 44px 0 36px;
}
.dreamz-fsm-page .vedaSection .eyebrow {
font-size: 12px;
margin-bottom: 20px;
}
.dreamz-fsm-page .vedaSection h2 {
font-size: 34px;
line-height: 1.24;
}
.dreamz-fsm-page .vedaSection .copy>p {
margin-top: 20px;
font-size: 15px;
line-height: 1.8;
}
.dreamz-fsm-page .vedaSection .featureList {
grid-template-columns: 1fr;
gap: 13px;
margin-top: 23px;
}
.dreamz-fsm-page .vedaSection .featureItem {
font-size: 14px;
}
.dreamz-fsm-page .vedaPanel {
padding: 18px;
border-radius: 17px;
}
.dreamz-fsm-page .vedaPanel h3 {
font-size: 23px;
}
.dreamz-fsm-page .vedaPrompts li {
font-size: 14px;
padding: 13px;
}
.dreamz-fsm-page .vedaCards {
grid-template-columns: 1fr;
margin-top: 22px;
gap: 12px;
}
.dreamz-fsm-page .vedaCards .card {
padding: 20px;
}
}
.key-feature-sec-head {
margin-bottom: 10px;
}  @media (max-width: 767px) {
.new-footer .foter-left img {
max-height: 50px !important;
}
.new-footer .footer .foter-left {
padding: 0 0 20px !important;
align-items: center;
justify-content: center;
}
}
.ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.final {
background: linear-gradient(135deg, #0b0b0b, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.final h2 {
color: var(--white);
margin: 0 0 15px;
}
.final .scopeNote {
color: #C5D1D9;
font-size: 12px !important;
margin: 15px 0 0;
}
.button-dark-outline {
background: transparent !important;
color: #fff !important;
border-color: #555 !important;
} .cmms-integration-design {
margin: 15px 0 0;
}
.new-theme-design .cmms-integration-design .key-feature-sec-tab .nav.nav-tabs {
gap: 0;
justify-content: flex-start;
}
.dreamz-fsm-page .reviews {
margin: 15px 0 0;
}  .field-service-invoicing-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.field-service-invoicing-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.field-service-invoicing-software .dark a:focus-visible,
.field-service-invoicing-software .final a:focus-visible {
outline-color: var(--yellow)
}
.field-service-invoicing-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.field-service-invoicing-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.field-service-invoicing-software .soft {
background: var(--sky2)
}
.field-service-invoicing-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.field-service-invoicing-software .dark h2,
.field-service-invoicing-software .dark h3 {
color: #fff
}
.field-service-invoicing-software .dark p {
color: #D6D6D6
}
.field-service-invoicing-software .dark .ey {
background: var(--yellow)
}
.field-service-invoicing-software .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.field-service-invoicing-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.field-service-invoicing-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.field-service-invoicing-software .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.field-service-invoicing-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.field-service-invoicing-software .textLink .icon {
width: 16px;
height: 16px;
margin-bottom: 0;
}
.field-service-invoicing-software .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.field-service-invoicing-software .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.field-service-invoicing-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.field-service-invoicing-software .skipLink:focus {
top: 12px
} .field-service-invoicing-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.field-service-invoicing-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.field-service-invoicing-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.field-service-invoicing-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.field-service-invoicing-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.field-service-invoicing-software .logo.adobe {
font-size: 20px
}
.field-service-invoicing-software .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .field-service-invoicing-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.field-service-invoicing-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.field-service-invoicing-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.field-service-invoicing-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.field-service-invoicing-software .outcome:nth-child(3):before {
background: var(--green)
}
.field-service-invoicing-software .outcome:nth-child(4):before {
background: var(--purple)
}
.field-service-invoicing-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.field-service-invoicing-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.field-service-invoicing-software .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .field-service-invoicing-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.field-service-invoicing-software .feature.reverse .visual {
order: -1
}
.field-service-invoicing-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.field-service-invoicing-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.field-service-invoicing-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.field-service-invoicing-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.field-service-invoicing-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.field-service-invoicing-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.field-service-invoicing-software .visual>* {
position: relative;
z-index: 2
}
.field-service-invoicing-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.field-service-invoicing-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.field-service-invoicing-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.field-service-invoicing-software .uiHeading .icon {
width: 19px;
height: 19px;
margin-bottom: 0;
}
.field-service-invoicing-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.field-service-invoicing-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.field-service-invoicing-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.field-service-invoicing-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.field-service-invoicing-software .pill.green {
background: var(--greenbg);
color: #116746
}
.field-service-invoicing-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.field-service-invoicing-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.field-service-invoicing-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .field-service-invoicing-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.field-service-invoicing-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.field-service-invoicing-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.field-service-invoicing-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.field-service-invoicing-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.field-service-invoicing-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.field-service-invoicing-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.field-service-invoicing-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.field-service-invoicing-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.field-service-invoicing-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .field-service-invoicing-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.field-service-invoicing-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.field-service-invoicing-software .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.field-service-invoicing-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.field-service-invoicing-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.field-service-invoicing-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.field-service-invoicing-software .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .field-service-invoicing-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.field-service-invoicing-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.field-service-invoicing-software .featureCard:hover {
transform: translateY(-3px)
}
.field-service-invoicing-software .featureIcon,
.field-service-invoicing-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.field-service-invoicing-software .featureIcon .icon,
.field-service-invoicing-software .useIcon .icon {
width: 22px;
height: 22px
}
.field-service-invoicing-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.field-service-invoicing-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .field-service-invoicing-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.field-service-invoicing-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.field-service-invoicing-software .useCase h3 {
font-size: 20px
}
.field-service-invoicing-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.field-service-invoicing-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.field-service-invoicing-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.field-service-invoicing-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.field-service-invoicing-software .review h3 {
font-size: 22px
}
.field-service-invoicing-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.field-service-invoicing-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.field-service-invoicing-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.field-service-invoicing-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.field-service-invoicing-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.field-service-invoicing-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.field-service-invoicing-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.field-service-invoicing-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.field-service-invoicing-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .field-service-invoicing-software .faq {
max-width: 900px
}
.field-service-invoicing-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.field-service-invoicing-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.field-service-invoicing-software .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.field-service-invoicing-software .faq summary::marker {
color: var(--navy)
}
.field-service-invoicing-software .faq details[open] {
border-color: #A9D3E7
}
.field-service-invoicing-software .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .field-service-invoicing-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.field-service-invoicing-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.field-service-invoicing-software .cta h3 {
font-size: 19px
}
.field-service-invoicing-software .cta.darkCta h3 {
color: #fff
}
.field-service-invoicing-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.field-service-invoicing-software .cta.darkCta p {
color: #D1D1D1
}
.field-service-invoicing-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.field-service-invoicing-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: center
}
.field-service-invoicing-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.field-service-invoicing-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.field-service-invoicing-software .final .ctaBtns {
align-items: stretch;
justify-content: center;
}
.field-service-invoicing-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.field-service-invoicing-software .reveal {
opacity: 1;
transform: none
}  .field-service-invoicing-software #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.field-service-invoicing-software #connected-tools.fsmTools *,
.field-service-invoicing-software #connected-tools.fsmTools *::before,
.field-service-invoicing-software #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.field-service-invoicing-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.field-service-invoicing-software #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.field-service-invoicing-software #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.field-service-invoicing-software #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.field-service-invoicing-software #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .field-service-invoicing-software #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__step::before,
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.field-service-invoicing-software #connected-tools.fsmTools {
padding: 52px 0;
}
.field-service-invoicing-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.field-service-invoicing-software #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.field-service-invoicing-software #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.field-service-invoicing-software #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.field-service-invoicing-software #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card,
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.field-service-invoicing-software #connected-tools.fsmTools h2 {
font-size: 30px;
}
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.field-service-invoicing-software #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .field-service-invoicing-software .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden;
}
.field-service-invoicing-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.field-service-invoicing-software .heroGrid>*,
.field-service-invoicing-software .feature>*,
.field-service-invoicing-software .aiGrid>* {
min-width: 0
}
.field-service-invoicing-software .hero h1 {
max-width: 590px
}
.field-service-invoicing-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.field-service-invoicing-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.field-service-invoicing-software .heroVisual {
position: relative;
min-width: 0
}
.field-service-invoicing-software .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 184px;
gap: 14px 12px;
align-items: start
}
.field-service-invoicing-software .assetStage:before {
content: "";
position: absolute;
inset: 60px 0 18px 22px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.field-service-invoicing-software .assetStage>* {
position: relative;
z-index: 1
}
.field-service-invoicing-software .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px
}
.field-service-invoicing-software .invoiceBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 19px;
overflow: hidden
}
.field-service-invoicing-software .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 18px;
border-bottom: 1px solid var(--line)
}
.field-service-invoicing-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.field-service-invoicing-software .brandTile {
width: 28px;
height: 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.field-service-invoicing-software .brandTile .icon2 {
width: 18px;
height: 18px
}
.field-service-invoicing-software .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.field-service-invoicing-software .invoicePaper {
padding: 20px 23px 16px
}
.field-service-invoicing-software .paperLabel {
display: block;
font-size: 9px;
letter-spacing: .07em;
color: var(--muted);
font-weight: 750
}
.field-service-invoicing-software .invoiceTitle {
display: flex;
gap: 15px;
align-items: center;
justify-content: space-between;
margin-bottom: 18px
}
.field-service-invoicing-software .invoiceTitle strong {
display: block;
font-size: 24px;
line-height: 1.3;
margin-top: 4px;
color: var(--navy);
letter-spacing: -.025em
}
.field-service-invoicing-software .invoiceMeta {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 20px;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 7px
}
.field-service-invoicing-software .invoiceMeta small {
font-size: 9px;
color: var(--muted);
display: block;
margin-bottom: 3px
}
.field-service-invoicing-software .invoiceMeta b {
display: block;
font-size: 12px
}
.field-service-invoicing-software .invoiceMeta span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px;
line-height: 1.5
}
.field-service-invoicing-software .invoiceLine {
display: grid;
grid-template-columns: minmax(0, 1fr) 32px 83px;
gap: 12px;
align-items: center;
border-bottom: 1px solid #E7EEF3;
padding: 12px 0;
font-size: 11px
}
.field-service-invoicing-software .invoiceLine>span:nth-child(2) {
text-align: center;
color: var(--muted)
}
.field-service-invoicing-software .invoiceLine>strong,
.field-service-invoicing-software .invoiceLine>span:last-child {
text-align: right
}
.field-service-invoicing-software .invoiceLine b {
font-size: 11px;
display: block;
line-height: 1.5
}
.field-service-invoicing-software .invoiceLine small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.field-service-invoicing-software .invoiceLine--head {
font-size: 9px;
color: var(--muted);
font-weight: 800;
padding: 10px 0
}
.field-service-invoicing-software .invoiceTotals {
margin-top: 12px;
margin-left: auto;
max-width: 235px
}
.field-service-invoicing-software .invoiceTotals>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
font-size: 11px;
padding: 4px 0
}
.field-service-invoicing-software .invoiceTotals small {
font-size: 9px
}
.field-service-invoicing-software .invoiceTotals .grandTotal {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750
}
.field-service-invoicing-software .grandTotal strong {
font-size: 22px;
letter-spacing: -.02em
}
.field-service-invoicing-software .boardFooter {
padding: 11px 18px;
min-height: 48px;
font-size: 9px;
line-height: 1.5;
background: var(--sky2);
border-top: 1px solid var(--line);
color: #536F82;
display: flex;
align-items: center;
gap: 7px;
padding-right: 193px
}
.field-service-invoicing-software .boardFooter .icon {
height: 14px;
width: 14px;
color: var(--green)
}
.field-service-invoicing-software .invoiceContext {
grid-column: 1;
align-self: start;
background: #101922;
border: 1px solid #2A404F;
border-radius: 15px;
color: #fff;
overflow: hidden
}
.field-service-invoicing-software .contextHead {
font-size: 11px;
font-weight: 800;
padding: 11px 14px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #2E404B
}
.field-service-invoicing-software .contextHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.field-service-invoicing-software .contextBody {
padding: 11px 14px
}
.field-service-invoicing-software .contextBody>div {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
font-size: 11px;
padding: 5px 0;
line-height: 1.5
}
.field-service-invoicing-software .contextBody span {
color: #C8D7E1
}
.field-service-invoicing-software .contextBody b {
font-size: 12px;
font-weight: 750;
white-space: nowrap
}
.field-service-invoicing-software .contextBody .contextBalance {
border-top: 1px solid #2E404B;
margin-top: 6px;
padding-top: 10px
}
.field-service-invoicing-software .contextBalance strong {
color: var(--yellow);
font-size: 19px;
white-space: nowrap;
letter-spacing: -.02em
}
.field-service-invoicing-software .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -46px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.field-service-invoicing-software .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.field-service-invoicing-software .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.field-service-invoicing-software .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.field-service-invoicing-software .phoneHead {
padding: 12px 11px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.field-service-invoicing-software .phoneHead strong {
font-size: 11px;
display: block;
line-height: 1.5
}
.field-service-invoicing-software .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.field-service-invoicing-software .phonePayment {
padding: 15px 12px 12px
}
.field-service-invoicing-software .phonePayment>.paperLabel {
font-size: 8px
}
.field-service-invoicing-software .payAmount {
display: block;
font-size: 28px;
color: var(--navy);
line-height: 1.3;
letter-spacing: -.02em;
margin-top: 4px
}
.field-service-invoicing-software .phonePayment>p {
font-size: 9px;
color: var(--muted);
margin: 7px 0 12px
}
.field-service-invoicing-software .payChoice {
display: flex;
align-items: center;
gap: 8px;
padding: 9px;
border: 1px solid var(--line);
border-radius: 8px;
margin-top: 7px;
font-size: 10px;
background: #fff;
line-height: 1.4
}
.field-service-invoicing-software .payChoice .icon {
width: 16px;
height: 16px;
color: var(--navy)
}
.field-service-invoicing-software .payChoice i {
margin-left: auto;
height: 10px;
width: 10px;
flex: 0 0 10px;
border: 1px solid #AFC5D1;
border-radius: 50%;
background: #fff
}
.field-service-invoicing-software .payChoice.selected {
background: var(--sky2);
border-color: #A1CBDF
}
.field-service-invoicing-software .payChoice.selected i {
background: var(--navy);
box-shadow: inset 0 0 0 2px #fff;
border-color: var(--navy)
}
.field-service-invoicing-software .mockAction {
background: var(--yellow);
color: #111;
font-weight: 800;
font-size: 11px;
text-align: center;
line-height: 1.4;
padding: 11px 6px;
border-radius: 8px;
margin-top: 12px
}
.field-service-invoicing-software .payFine {
display: block;
font-size: 7px;
color: var(--muted);
text-align: center;
line-height: 1.5;
margin-top: 8px
}
.field-service-invoicing-software .phoneBottom {
font-size: 7px;
line-height: 1.5;
text-align: center;
color: var(--navy);
padding: 9px 7px;
background: #EFF8FD;
border-top: 1px solid var(--line)
}
.field-service-invoicing-software .diagramCaption {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
text-align: center;
margin: 12px 0 0
} .field-service-invoicing-software .jobBanner {
padding: 14px;
border: 1px solid #BFDDED;
border-radius: 12px;
display: flex;
align-items: center;
gap: 10px;
background: #EAF8FF;
margin-bottom: 13px
}
.field-service-invoicing-software .jobBadge {
height: 34px;
width: 34px;
flex: 0 0 34px;
background: #fff;
color: var(--navy);
border: 1px solid var(--line);
display: grid;
place-items: center;
border-radius: 9px
}
.field-service-invoicing-software .jobBadge .icon {
width: 19px;
height: 19px
}
.field-service-invoicing-software .jobBanner>div {
flex: 1;
min-width: 0
}
.field-service-invoicing-software .jobBanner strong {
display: block;
font-size: 12px;
line-height: 1.5
}
.field-service-invoicing-software .jobBanner small {
display: block;
font-size: 10px;
color: #526C7C;
margin-top: 3px;
line-height: 1.5
}
.field-service-invoicing-software .jobBanner .pill {
font-size: 8px
}
.field-service-invoicing-software .builderDoc {
border: 1px solid var(--line);
background: #fff;
border-radius: 13px;
padding: 16px
}
.field-service-invoicing-software .builderFields {
display: grid;
grid-template-columns: 1fr .8fr 1fr;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line)
}
.field-service-invoicing-software .builderFields small {
font-size: 9px;
color: var(--muted);
display: block
}
.field-service-invoicing-software .builderFields b {
display: block;
font-size: 12px;
margin-top: 4px;
line-height: 1.5
}
.field-service-invoicing-software .builderTotals {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 15px 0;
font-size: 10px;
color: var(--muted)
}
.field-service-invoicing-software .builderTotals strong {
color: var(--navy);
font-size: 20px;
white-space: nowrap
}
.field-service-invoicing-software .fileChip {
display: flex;
align-items: center;
gap: 8px;
background: var(--sky2);
border: 1px solid var(--line);
padding: 10px;
border-radius: 8px;
font-size: 10px;
color: #36596D
}
.field-service-invoicing-software .fileChip .icon {
width: 16px;
height: 16px
}
.field-service-invoicing-software .fileChip>span {
margin-left: auto;
color: var(--muted);
font-size: 9px;
font-weight: 750
}
.field-service-invoicing-software .editorActions {
display: flex;
gap: 9px;
align-items: center;
justify-content: flex-end;
margin-top: 14px
}
.field-service-invoicing-software .editorActions>span {
font-size: 10px;
border: 1px solid var(--line);
padding: 9px 10px;
border-radius: 7px;
display: flex;
align-items: center;
gap: 5px;
font-weight: 750
}
.field-service-invoicing-software .editorActions>span:last-child {
background: var(--yellow);
border-color: var(--yellow);
color: #111
}
.field-service-invoicing-software .editorActions .icon {
width: 14px;
height: 14px;
margin-bottom: 0;
}
.field-service-invoicing-software .infoFoot {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
color: #526C7C;
padding: 13px 0 0;
line-height: 1.6
}
.field-service-invoicing-software .infoFoot .icon {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 1px
} .field-service-invoicing-software .paymentScene {
display: grid;
grid-template-columns: 185px minmax(0, 1fr);
gap: 18px;
align-items: center
}
.field-service-invoicing-software .paymentDevice {
border: 1px solid #2A4353;
border-radius: 26px;
padding: 6px;
background: #0C1E2A;
min-width: 0
}
.field-service-invoicing-software .deviceTop {
height: 15px;
position: relative
}
.field-service-invoicing-software .deviceTop:after {
content: "";
display: block;
position: absolute;
width: 42px;
height: 4px;
background: #536A77;
border-radius: 8px;
left: 50%;
top: 4px;
transform: translateX(-50%)
}
.field-service-invoicing-software .payPanel {
border-radius: 20px;
padding: 17px 12px 15px;
background: #fff
}
.field-service-invoicing-software .payPanel h3 {
font-size: 29px;
margin-top: 5px;
color: var(--navy)
}
.field-service-invoicing-software .payPanel>p {
font-size: 10px;
margin: 5px 0 15px;
color: var(--muted)
}
.field-service-invoicing-software .payPanel>small {
display: block;
text-align: center;
font-size: 8px;
color: var(--muted);
margin-top: 9px;
line-height: 1.5
}
.field-service-invoicing-software .paymentSteps {
min-width: 0
}
.field-service-invoicing-software .payEvent {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
position: relative
}
.field-service-invoicing-software .payEvent:not(:nth-child(3)):after {
content: "";
height: 16px;
border-left: 1px solid #BDD8E6;
position: absolute;
left: 17px;
bottom: -8px
}
.field-service-invoicing-software .eventIcon {
display: grid;
place-items: center;
width: 35px;
height: 35px;
flex: 0 0 35px;
border-radius: 10px;
background: var(--sky);
border: 1px solid #C4E5F4;
color: var(--navy)
}
.field-service-invoicing-software .eventIcon.yellow {
background: var(--yellowsoft);
border-color: #EBDDAB;
color: #7C5E0F
}
.field-service-invoicing-software .eventIcon.green {
background: var(--greenbg);
border-color: #BFDFD2;
color: var(--green)
}
.field-service-invoicing-software .eventIcon .icon {
width: 18px;
height: 18px
}
.field-service-invoicing-software .payEvent strong {
display: block;
font-size: 12px;
line-height: 1.5
}
.field-service-invoicing-software .payEvent small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px;
line-height: 1.5
}
.field-service-invoicing-software .paymentBalance {
margin-top: 12px;
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px
}
.field-service-invoicing-software .paymentBalance>span,
.field-service-invoicing-software .paymentBalance>strong {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 10px;
padding: 4px 0;
line-height: 1.6
}
.field-service-invoicing-software .paymentBalance>span {
color: var(--muted)
}
.field-service-invoicing-software .paymentBalance b {
color: var(--navy);
font-size: 11px;
white-space: nowrap
}
.field-service-invoicing-software .paymentBalance>strong {
border-top: 1px solid var(--line);
padding-top: 9px;
margin-top: 5px
} .field-service-invoicing-software .invoiceMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 14px
}
.field-service-invoicing-software .invoiceMetrics>div {
padding: 13px 12px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 11px;
background: #fff
}
.field-service-invoicing-software .invoiceMetrics>div:nth-child(2) {
border-top-color: var(--yellow)
}
.field-service-invoicing-software .invoiceMetrics>div:nth-child(3) {
border-top-color: #BA5E53
}
.field-service-invoicing-software .invoiceMetrics span {
display: block;
color: var(--muted);
font-size: 10px
}
.field-service-invoicing-software .invoiceMetrics strong {
display: block;
font-size: 24px;
line-height: 1.3;
color: var(--navy);
margin-top: 3px;
letter-spacing: -.025em
}
.field-service-invoicing-software .invoiceMetrics small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 5px;
line-height: 1.5
}
.field-service-invoicing-software .ledger {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden
}
.field-service-invoicing-software .ledgerHeader,
.field-service-invoicing-software .ledgerRow {
display: grid;
grid-template-columns: minmax(0, 1.65fr) repeat(3, minmax(0, 1fr));
gap: 9px;
align-items: center;
padding: 13px 14px;
font-size: 11px;
text-align: right
}
.field-service-invoicing-software .ledgerHeader {
font-size: 9px;
font-weight: 800;
background: #F4FAFD;
color: #526C7C;
padding: 11px 14px
}
.field-service-invoicing-software .ledgerHeader>span:first-child,
.field-service-invoicing-software .ledgerRow>span:first-child {
text-align: left;
min-width: 0
}
.field-service-invoicing-software .ledgerRow {
border-top: 1px solid var(--line)
}
.field-service-invoicing-software .ledgerRow b {
display: block;
font-size: 11px;
line-height: 1.5
}
.field-service-invoicing-software .ledgerRow small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px;
line-height: 1.5
}
.field-service-invoicing-software .ledgerRow strong {
font-size: 12px;
color: var(--navy)
}
.field-service-invoicing-software .ledgerRow.reconciled {
background: var(--yellowsoft)
}
.field-service-invoicing-software .ledgerRow small.overdueText {
color: #A03832
}
.field-service-invoicing-software .reminderRule {
padding: 14px;
background: #fff;
border: 1px solid #EAD89E;
border-left: 3px solid var(--yellow);
border-radius: 12px;
display: flex;
align-items: center;
gap: 11px;
margin-top: 13px
}
.field-service-invoicing-software .reminderRule strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.field-service-invoicing-software .reminderRule p {
font-size: 11px;
color: #536E7E;
margin-top: 4px;
line-height: 1.5
}
.field-service-invoicing-software .reminderRule small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
line-height: 1.5
} .field-service-invoicing-software .projectHeader {
background: #0D2637;
color: #fff;
padding: 20px;
border: 1px solid #264759;
border-radius: 13px;
display: flex;
justify-content: space-between;
gap: 15px;
align-items: center
}
.field-service-invoicing-software .projectHeader span {
font-size: 9px;
letter-spacing: .06em;
color: #B7D1E1;
font-weight: 750;
display: block
}
.field-service-invoicing-software .projectHeader strong {
font-size: 30px;
letter-spacing: -.025em;
display: block;
margin-top: 4px;
line-height: 1.3
}
.field-service-invoicing-software .projectHeader small {
font-size: 10px;
color: #C5D9E5;
display: block;
margin-top: 4px
}
.field-service-invoicing-software .projectHeader>.icon {
width: 37px;
height: 37px;
color: var(--yellow)
}
.field-service-invoicing-software .milestoneBar {
display: flex;
gap: 4px;
margin: 16px 0;
height: 24px
}
.field-service-invoicing-software .milestoneBar>span {
font-size: 10px;
display: grid;
place-items: center;
border-radius: 5px;
font-weight: 750
}
.field-service-invoicing-software .milestoneBar .paid {
flex: 4;
background: #D6F1E6;
color: #17634A
}
.field-service-invoicing-software .milestoneBar .issued {
flex: 4;
background: #BFEAFF;
color: #165273
}
.field-service-invoicing-software .milestoneBar .planned {
flex: 2;
background: #E9EDF1;
color: #536B7A
}
.field-service-invoicing-software .milestoneList {
display: grid;
gap: 10px
}
.field-service-invoicing-software .milestone {
display: grid;
grid-template-columns: 33px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 14px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff
}
.field-service-invoicing-software .stageNumber {
width: 33px;
height: 33px;
display: grid;
place-items: center;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 9px;
font-size: 11px;
color: var(--navy);
font-weight: 800
}
.field-service-invoicing-software .milestone strong {
font-size: 12px;
display: block;
line-height: 1.5
}
.field-service-invoicing-software .milestone small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
line-height: 1.5
}
.field-service-invoicing-software .stageValue {
text-align: right
}
.field-service-invoicing-software .stageValue strong {
color: var(--navy);
font-size: 14px
}
.field-service-invoicing-software .stageValue .pill {
margin-top: 4px;
font-size: 8px
}
.field-service-invoicing-software .projectTotals {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
padding-top: 14px;
margin-top: 13px;
border-top: 1px solid var(--line)
}
.field-service-invoicing-software .projectTotals>span {
font-size: 10px;
color: var(--muted)
}
.field-service-invoicing-software .projectTotals b {
display: block;
font-size: 18px;
color: var(--navy);
margin-top: 3px
}
.field-service-invoicing-software .sectionNote {
color: var(--muted);
font-size: 13px;
line-height: 1.7;
max-width: 930px;
margin: 22px auto 0;
text-align: center
}
.field-service-invoicing-software #veda .sectionHead {
margin-bottom: 0
}
.field-service-invoicing-software #veda .lead {
font-size: 17px;
line-height: 1.7
}
.new-theme-design.field-service-invoicing-software .icon {
background: transparent !important;
margin: 0 !important;
} @media(max-width:1100px) and (min-width:961px) {
.field-service-invoicing-software .heroGrid {
gap: 28px
}
.field-service-invoicing-software .hero .lead {
font-size: 17px
}
.field-service-invoicing-software .assetStage {
grid-template-columns: minmax(0, 1fr) 160px;
gap: 12px 10px
}
.field-service-invoicing-software .boardFooter {
padding-right: 170px
}
.field-service-invoicing-software .contextHead {
padding: 11px;
font-size: 10px
}
.field-service-invoicing-software .contextBody {
padding: 10px
}
.field-service-invoicing-software .contextBody>div {
font-size: 10px
}
.field-service-invoicing-software .contextBalance strong {
font-size: 17px
}
.field-service-invoicing-software .invoicePaper {
padding: 18px
}
.field-service-invoicing-software .paymentScene {
grid-template-columns: 155px minmax(0, 1fr);
gap: 12px
}
.field-service-invoicing-software .visual {
padding: 18px
}
.field-service-invoicing-software .payEvent {
gap: 8px
}
.field-service-invoicing-software .payEvent strong {
font-size: 11px
}
.field-service-invoicing-software .payEvent small {
font-size: 9px
}
.field-service-invoicing-software .paymentBalance {
padding: 10px
}
.field-service-invoicing-software .invoiceLine {
gap: 9px;
grid-template-columns: minmax(0, 1fr) 25px 70px
}
}
@media(max-width:960px) {
.field-service-invoicing-software .heroGrid,
.field-service-invoicing-software .feature,
.field-service-invoicing-software .aiGrid,
.field-service-invoicing-software .final {
grid-template-columns: 1fr
}
.field-service-invoicing-software .heroGrid {
gap: 36px
}
.field-service-invoicing-software .hero h1 {
max-width: 800px
}
.field-service-invoicing-software .hero .lead {
max-width: 750px
}
.field-service-invoicing-software .heroVisual {
width: 100%;
max-width: 640px;
margin: 0 auto
}
.field-service-invoicing-software .assetStage {
margin: auto
}
.field-service-invoicing-software .feature.reverse .visual {
order: 0
}
.field-service-invoicing-software .feature {
gap: 30px
}
.field-service-invoicing-software .feature>div:first-child {
max-width: 800px
}
.field-service-invoicing-software .outcomes,
.field-service-invoicing-software .featureGrid,
.field-service-invoicing-software .connectedGrid,
.field-service-invoicing-software .useCases {
grid-template-columns: repeat(2, 1fr)
}
.field-service-invoicing-software .logos {
grid-template-columns: repeat(3, 1fr)
}
.field-service-invoicing-software .reviews {
grid-template-columns: 1fr
}
.field-service-invoicing-software .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.field-service-invoicing-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.field-service-invoicing-software .ratingItem:nth-child(2) {
border: 0
}
.field-service-invoicing-software .final .ctaBtns {
flex-direction: column;
justify-content: flex-start
}
.field-service-invoicing-software .final .btn {
min-width: 195px
}
.field-service-invoicing-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.field-service-invoicing-software .aiGrid {
gap: 30px
}
.field-service-invoicing-software .aiMini {
max-width: 760px
}
.field-service-invoicing-software .promptBox {
width: 100%
}
.field-service-invoicing-software .cta {
align-items: flex-start;
flex-direction: column
}
.field-service-invoicing-software .ctaBtns {
max-width: 100%
}
}
@media(max-width:767px) {
.field-service-invoicing-software .visual-content {
order: 2;
}
.field-service-invoicing-software .wrap {
width: calc(100% - 24px)
}
.field-service-invoicing-software .hero {
padding: 32px 0 42px
}
.field-service-invoicing-software .lead {
font-size: 17px
}
.field-service-invoicing-software .sectionHead p {
font-size: 16px
}
.field-service-invoicing-software .sectionHead {
margin-bottom: 28px
}
.field-service-invoicing-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.field-service-invoicing-software .heroGrid {
gap: 26px
}
.field-service-invoicing-software .hero .actions {
gap: 8px
}
.field-service-invoicing-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.field-service-invoicing-software .micro {
font-size: 11px
}
.field-service-invoicing-software .heroPills {
gap: 6px
}
.field-service-invoicing-software .heroPills span {
font-size: 9px
}
.field-service-invoicing-software .assetStage {
grid-template-columns: minmax(0, 1fr) 159px;
gap: 12px 10px
}
.field-service-invoicing-software .assetTag {
font-size: 9px
}
.field-service-invoicing-software .boardHeader {
padding: 13px
}
.field-service-invoicing-software .boardBrand {
font-size: 12px
}
.field-service-invoicing-software .sampleBadge {
font-size: 7px
}
.field-service-invoicing-software .invoicePaper {
padding: 17px 15px 14px
}
.field-service-invoicing-software .invoiceTitle {
margin-bottom: 13px
}
.field-service-invoicing-software .invoiceTitle strong {
font-size: 22px
}
.field-service-invoicing-software .invoiceMeta {
gap: 12px
}
.field-service-invoicing-software .invoiceMeta b {
font-size: 11px
}
.field-service-invoicing-software .invoiceMeta span {
font-size: 9px
}
.field-service-invoicing-software .invoiceLine {
grid-template-columns: minmax(0, 1fr) 25px 73px;
gap: 8px;
font-size: 10px
}
.field-service-invoicing-software .invoiceLine b {
font-size: 10px
}
.field-service-invoicing-software .invoiceLine small {
font-size: 8px
}
.field-service-invoicing-software .invoiceLine--head {
font-size: 8px
}
.field-service-invoicing-software .invoiceTotals {
max-width: 205px
}
.field-service-invoicing-software .invoiceTotals>div {
font-size: 10px
}
.field-service-invoicing-software .grandTotal strong {
font-size: 21px
}
.field-service-invoicing-software .boardFooter {
padding: 10px 12px;
padding-right: 168px;
min-height: 53px;
font-size: 8px
}
.field-service-invoicing-software .assetPhone {
margin-top: -43px;
border-radius: 24px
}
.field-service-invoicing-software .phoneScreen {
border-radius: 18px
}
.field-service-invoicing-software .phoneHead {
padding: 10px 9px
}
.field-service-invoicing-software .phoneHead strong {
font-size: 10px
}
.field-service-invoicing-software .phoneHead small {
font-size: 7px
}
.field-service-invoicing-software .phonePayment {
padding: 13px 10px 10px
}
.field-service-invoicing-software .phonePayment .paperLabel {
font-size: 7px
}
.field-service-invoicing-software .payAmount {
font-size: 25px
}
.field-service-invoicing-software .phonePayment>p {
font-size: 8px
}
.field-service-invoicing-software .payChoice {
font-size: 9px;
padding: 8px;
gap: 7px
}
.field-service-invoicing-software .mockAction {
font-size: 10px
}
.field-service-invoicing-software .payFine,
.field-service-invoicing-software .phoneBottom {
font-size: 7px
}
.field-service-invoicing-software .contextHead {
font-size: 9px;
padding: 10px;
gap: 6px
}
.field-service-invoicing-software .contextHead .icon {
width: 15px;
height: 15px
}
.field-service-invoicing-software .contextBody {
padding: 10px
}
.field-service-invoicing-software .contextBody>div {
align-items: flex-start;
font-size: 9px;
gap: 6px
}
.field-service-invoicing-software .contextBody b {
font-size: 10px
}
.field-service-invoicing-software .contextBalance strong {
font-size: 16px
}
.field-service-invoicing-software .diagramCaption {
font-size: 9px
}
.field-service-invoicing-software .trust {
padding: 23px 0
}
.field-service-invoicing-software .trustLabel {
font-size: 12px
}
.field-service-invoicing-software .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.field-service-invoicing-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.field-service-invoicing-software .logo.dhl {
font-size: 19px
}
.field-service-invoicing-software .logo.adobe {
font-size: 17px
}
.field-service-invoicing-software .logo.golden {
font-size: 8px
}
.field-service-invoicing-software .fl,
.field-service-invoicing-software .outcomes,
.field-service-invoicing-software .featureGrid,
.field-service-invoicing-software .connectedGrid,
.field-service-invoicing-software .useCases {
grid-template-columns: 1fr
}
.field-service-invoicing-software .fi {
font-size: 14px
}
.field-service-invoicing-software .outcome {
padding: 21px
}
.field-service-invoicing-software .outcome strong {
margin-top: 12px
}
.field-service-invoicing-software .outcome span {
font-size: 14px
}
.field-service-invoicing-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.field-service-invoicing-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.field-service-invoicing-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.field-service-invoicing-software .uiSub {
font-size: 9px
}
.field-service-invoicing-software .jobBanner {
padding: 12px;
gap: 9px
}
.field-service-invoicing-software .jobBanner strong {
font-size: 11px
}
.field-service-invoicing-software .jobBanner small {
font-size: 9px
}
.field-service-invoicing-software .jobBadge {
height: 29px;
width: 29px;
flex-basis: 29px
}
.field-service-invoicing-software .jobBanner>.pill {
display: none
}
.field-service-invoicing-software .builderDoc {
padding: 13px
}
.field-service-invoicing-software .builderFields {
gap: 10px
}
.field-service-invoicing-software .builderFields b {
font-size: 11px
}
.field-service-invoicing-software .builderTotals {
font-size: 9px;
gap: 8px
}
.field-service-invoicing-software .builderTotals strong {
font-size: 19px
}
.field-service-invoicing-software .fileChip {
font-size: 9px
}
.field-service-invoicing-software .editorActions {
gap: 7px
}
.field-service-invoicing-software .editorActions>span {
font-size: 9px;
padding: 8px
}
.field-service-invoicing-software .infoFoot {
font-size: 10px
}
.field-service-invoicing-software .paymentScene {
grid-template-columns: 148px minmax(0, 1fr);
gap: 12px
}
.field-service-invoicing-software .payPanel {
padding: 15px 10px 12px
}
.field-service-invoicing-software .payPanel h3 {
font-size: 26px
}
.field-service-invoicing-software .payPanel>small {
font-size: 7px
}
.field-service-invoicing-software .payEvent {
gap: 8px
}
.field-service-invoicing-software .eventIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
border-radius: 8px
}
.field-service-invoicing-software .eventIcon .icon {
width: 15px;
height: 15px
}
.field-service-invoicing-software .payEvent:not(:nth-child(3)):after {
left: 13px
}
.field-service-invoicing-software .payEvent strong {
font-size: 10px
}
.field-service-invoicing-software .payEvent small {
font-size: 9px
}
.field-service-invoicing-software .paymentBalance {
padding: 10px
}
.field-service-invoicing-software .paymentBalance>span,
.field-service-invoicing-software .paymentBalance>strong {
font-size: 9px
}
.field-service-invoicing-software .paymentBalance b {
font-size: 10px
}
.field-service-invoicing-software .invoiceMetrics {
gap: 7px
}
.field-service-invoicing-software .invoiceMetrics>div {
padding: 11px 9px
}
.field-service-invoicing-software .invoiceMetrics span {
font-size: 9px
}
.field-service-invoicing-software .invoiceMetrics strong {
font-size: 21px
}
.field-service-invoicing-software .invoiceMetrics small {
font-size: 8px
}
.field-service-invoicing-software .ledgerHeader,
.field-service-invoicing-software .ledgerRow {
gap: 7px;
padding: 12px 10px;
font-size: 10px
}
.field-service-invoicing-software .ledgerHeader {
font-size: 8px
}
.field-service-invoicing-software .ledgerRow b {
font-size: 10px
}
.field-service-invoicing-software .ledgerRow strong {
font-size: 10px
}
.field-service-invoicing-software .ledgerRow small {
font-size: 8px
}
.field-service-invoicing-software .reminderRule {
padding: 12px;
gap: 9px
}
.field-service-invoicing-software .reminderRule strong {
font-size: 11px
}
.field-service-invoicing-software .reminderRule p {
font-size: 10px
}
.field-service-invoicing-software .reminderRule small {
font-size: 8px
}
.field-service-invoicing-software .projectHeader {
padding: 17px
}
.field-service-invoicing-software .projectHeader strong {
font-size: 27px
}
.field-service-invoicing-software .projectHeader span {
font-size: 8px
}
.field-service-invoicing-software .projectHeader small {
font-size: 9px
}
.field-service-invoicing-software .milestone {
padding: 12px;
gap: 9px;
grid-template-columns: 28px minmax(0, 1fr) auto
}
.field-service-invoicing-software .stageNumber {
height: 28px;
width: 28px;
font-size: 10px
}
.field-service-invoicing-software .milestone strong {
font-size: 11px
}
.field-service-invoicing-software .milestone small {
font-size: 9px
}
.field-service-invoicing-software .stageValue strong {
font-size: 13px
}
.field-service-invoicing-software .projectTotals b {
font-size: 17px
}
.field-service-invoicing-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.field-service-invoicing-software .aiMini div {
padding: 16px
}
.field-service-invoicing-software .aiMini strong {
font-size: 14px
}
.field-service-invoicing-software .aiMini span {
font-size: 13px
}
.field-service-invoicing-software .promptBox {
padding: 18px;
border-radius: 17px
}
.field-service-invoicing-software .prompt {
font-size: 13px;
padding: 13px
}
.field-service-invoicing-software .promptHead {
font-size: 19px
}
.field-service-invoicing-software .promptFoot {
font-size: 10px !important
}
.field-service-invoicing-software .connectedCard {
padding: 22px
}
.field-service-invoicing-software .connectedCard p,
.field-service-invoicing-software .featureCard p,
.field-service-invoicing-software .useCase p {
font-size: 14px
}
.field-service-invoicing-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.field-service-invoicing-software .sectionNote {
font-size: 12px
}
.field-service-invoicing-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.field-service-invoicing-software .ratingItem {
border: 0
}
.field-service-invoicing-software .ratingLead {
margin-bottom: 3px
}
.field-service-invoicing-software .review p {
font-size: 14px
}
.field-service-invoicing-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.field-service-invoicing-software .ctaBtns {
width: 100%
}
.field-service-invoicing-software .ctaBtns .btn {
flex: 1
}
.field-service-invoicing-software .cta p {
font-size: 14px
}
.field-service-invoicing-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.field-service-invoicing-software .final h2 {
font-size: 32px
}
.field-service-invoicing-software .final p {
font-size: 15px
}
.field-service-invoicing-software .final .ctaBtns {
flex-direction: column
}
.field-service-invoicing-software .final .btn {
min-width: 0;
width: 100%
}
.field-service-invoicing-software .faq details {
padding: 16px
}
.field-service-invoicing-software .faq summary {
font-size: 14px
}
.field-service-invoicing-software .faq details p {
font-size: 14px
}
}
@media(max-width:380px) {
.field-service-invoicing-software .assetStage {
grid-template-columns: minmax(0, 1fr) 146px;
gap: 10px 8px
}
.field-service-invoicing-software .boardFooter {
padding-right: 154px
}
.field-service-invoicing-software .contextBody>div {
flex-wrap: wrap;
gap: 2px;
justify-content: flex-start
}
.field-service-invoicing-software .contextBody>div>span {
flex-basis: 100%
}
.field-service-invoicing-software .contextBody b {
font-size: 12px
}
.field-service-invoicing-software .contextBalance strong {
font-size: 18px
}
.field-service-invoicing-software .contextHead {
line-height: 1.4;
font-size: 8px;
padding: 10px
}
.field-service-invoicing-software .contextHead .icon {
width: 14px;
height: 14px
}
.field-service-invoicing-software .paymentScene {
grid-template-columns: 1fr;
gap: 15px
}
.field-service-invoicing-software .paymentDevice {
width: 185px;
margin: auto
}
.field-service-invoicing-software .paymentSteps {
display: grid;
grid-template-columns: 1fr;
gap: 0
}
.field-service-invoicing-software .payEvent strong {
font-size: 12px
}
.field-service-invoicing-software .payEvent small {
font-size: 10px
}
.field-service-invoicing-software .paymentBalance>span,
.field-service-invoicing-software .paymentBalance>strong {
font-size: 11px
}
.field-service-invoicing-software .paymentBalance b {
font-size: 12px
}
.field-service-invoicing-software .ledgerHeader,
.field-service-invoicing-software .ledgerRow {
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
gap: 5px;
padding: 11px 8px
}
.field-service-invoicing-software .invoiceMetrics>div {
padding: 10px 8px
}
.field-service-invoicing-software .invoiceMetrics strong {
font-size: 20px
}
.field-service-invoicing-software .invoiceMetrics small {
font-size: 7px
}
.field-service-invoicing-software .builderTotals {
align-items: flex-end
}
.field-service-invoicing-software .builderTotals span {
max-width: 135px;
line-height: 1.6
}
.field-service-invoicing-software .milestone {
gap: 7px;
padding: 11px
}
.field-service-invoicing-software .milestone strong {
font-size: 10px
}
.field-service-invoicing-software .milestone small {
font-size: 8px
}
.field-service-invoicing-software .stageValue strong {
font-size: 12px
}
}
@media(max-width:360px) {
.field-service-invoicing-software .phonePayment {
padding: 12px 9px
}
.field-service-invoicing-software .phoneHead {
padding: 9px
}
.field-service-invoicing-software .phoneHead strong {
font-size: 9px
}
.field-service-invoicing-software .payAmount {
font-size: 23px
}
.field-service-invoicing-software .payFine,
.field-service-invoicing-software .phoneBottom {
font-size: 6.5px
}
}  .job-scheduling-page .wrap {
width: min(var(--newmax), calc(100% - 40px));
margin: auto
}
.job-scheduling-page section {
padding: 76px 0;
scroll-margin-top: 24px
}
.job-scheduling-page .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.job-scheduling-page .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.job-scheduling-page .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.job-scheduling-page .btn:hover {
transform: translateY(-2px)
}
.job-scheduling-page .btn.black {
background: #0b0b0b;
color: #fff
}
.job-scheduling-page .btn.black:hover {
background: #292929
}
.job-scheduling-page .btn.yellow {
background: var(--yellow);
color: #000
}
.job-scheduling-page .btn.yellow:hover {
background: #FFD454
}
.job-scheduling-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.job-scheduling-page .btn .icon2 {
width: 17px;
height: 17px
}
.job-scheduling-page a:focus-visible,
.job-scheduling-page summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.job-scheduling-page .dark a:focus-visible,
.job-scheduling-page .final a:focus-visible {
outline-color: var(--yellow)
}
.job-scheduling-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.job-scheduling-page .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.job-scheduling-page .soft {
background: var(--sky2)
}
.job-scheduling-page .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.job-scheduling-page .dark h2,
.job-scheduling-page .dark h3 {
color: #fff
}
.job-scheduling-page .dark p {
color: #D6D6D6
}
.job-scheduling-page .dark .ey {
background: var(--yellow)
}
.job-scheduling-page .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.job-scheduling-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.job-scheduling-page .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.job-scheduling-page .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.job-scheduling-page .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.job-scheduling-page .textLink .icon2 {
width: 16px;
height: 16px
}
.job-scheduling-page .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.skipLink:focus {
top: 12px
} .job-scheduling-page .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.job-scheduling-page .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.job-scheduling-page .heroGrid>*,
.job-scheduling-page .feature>*,
.job-scheduling-page .aiGrid>* {
min-width: 0
}
.job-scheduling-page .hero h1 {
max-width: 580px
}
.job-scheduling-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.job-scheduling-page .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.job-scheduling-page .heroVisual {
min-height: 555px;
position: relative
}
.job-scheduling-page .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.job-scheduling-page .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.job-scheduling-page .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.job-scheduling-page .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.job-scheduling-page .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.job-scheduling-page .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.job-scheduling-page .brandTile .icon2 {
width: 17px;
height: 17px
}
.job-scheduling-page .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.job-scheduling-page .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.job-scheduling-page .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.job-scheduling-page .viewPills span {
padding: 4px 7px
}
.job-scheduling-page .viewPills .active {
background: var(--navy);
color: #fff
}
.job-scheduling-page .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.job-scheduling-page .miniDates,
.job-scheduling-page .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.job-scheduling-page .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.job-scheduling-page .miniDates>div:last-child {
border: 0
}
.job-scheduling-page .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.job-scheduling-page .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.job-scheduling-page .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.job-scheduling-page .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.job-scheduling-page .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.job-scheduling-page .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.job-scheduling-page .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.job-scheduling-page .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.job-scheduling-page .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.job-scheduling-page .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.job-scheduling-page .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.job-scheduling-page .boardFooter strong {
color: var(--navy)
}
.job-scheduling-page .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.job-scheduling-page .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.job-scheduling-page .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.job-scheduling-page .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.job-scheduling-page .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.job-scheduling-page .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.job-scheduling-page .phoneHead small {
font-size: 9px;
color: #50697A
}
.job-scheduling-page .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.job-scheduling-page .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.job-scheduling-page .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.job-scheduling-page .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.job-scheduling-page .phoneJob.current {
background: var(--sky2)
}
.job-scheduling-page .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.job-scheduling-page .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.job-scheduling-page .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.job-scheduling-page .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.job-scheduling-page .lifecycleHead .icon2 {
color: var(--yellow);
width: 17px;
height: 17px
}
.job-scheduling-page .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.job-scheduling-page .lifecycleBody strong {
font-size: 12px
}
.job-scheduling-page .lifecycleBody span {
color: #CEDBE4
}
.job-scheduling-page .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.job-scheduling-page .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .job-scheduling-page .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.job-scheduling-page .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.job-scheduling-page .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.job-scheduling-page .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.job-scheduling-page .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.job-scheduling-page .logo.adobe {
font-size: 20px
}
.logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .job-scheduling-page .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 15px
}
.job-scheduling-page .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.job-scheduling-page .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.job-scheduling-page .outcome:nth-child(2):before {
background: var(--yellow)
}
.job-scheduling-page .outcome:nth-child(3):before {
background: var(--green)
}
.job-scheduling-page .outcome:nth-child(4):before {
background: var(--purple)
}
.job-scheduling-page .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.job-scheduling-page .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.job-scheduling-page .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
} .job-scheduling-page .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.job-scheduling-page .feature.reverse .visual {
order: -1
}
.job-scheduling-page .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.job-scheduling-page .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.job-scheduling-page .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.job-scheduling-page .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.job-scheduling-page .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.job-scheduling-page .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.job-scheduling-page .visual>* {
position: relative;
z-index: 2
}
.job-scheduling-page .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.job-scheduling-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.job-scheduling-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.job-scheduling-page .uiHeading .icon2 {
width: 19px;
height: 19px
}
.job-scheduling-page .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.job-scheduling-page .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.job-scheduling-page .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.job-scheduling-page .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.job-scheduling-page .pill.green {
background: var(--greenbg);
color: #116746
}
.job-scheduling-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.job-scheduling-page .pill.gray {
background: #F0F3F5;
color: #586C79
}
.job-scheduling-page .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .job-scheduling-page .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.job-scheduling-page .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.job-scheduling-page .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.job-scheduling-page .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.job-scheduling-page .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.job-scheduling-page .plannerRow:last-child {
border-bottom: 0
}
.job-scheduling-page .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.job-scheduling-page .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.job-scheduling-page .avatar.green {
background: var(--greenbg);
color: #116746
}
.job-scheduling-page .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.job-scheduling-page .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.job-scheduling-page .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.job-scheduling-page .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.job-scheduling-page .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.job-scheduling-page .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.job-scheduling-page .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.job-scheduling-page .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.job-scheduling-page .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.job-scheduling-page .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.job-scheduling-page .pending .icon2 {
width: 18px;
height: 18px;
color: var(--navy)
}
.job-scheduling-page .pending strong {
font-size: 11px;
color: var(--navy)
}
.job-scheduling-page .pending .pill {
margin-left: auto
}
.job-scheduling-page .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.job-scheduling-page .legend span {
display: flex;
align-items: center;
gap: 4px
}
.job-scheduling-page .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.job-scheduling-page .legend .green i {
background: var(--green)
}
.job-scheduling-page .legend .yellow i {
background: #D7A200
} .job-scheduling-page .roster {
display: grid;
gap: 10px
}
.job-scheduling-page .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.job-scheduling-page .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.job-scheduling-page .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.job-scheduling-page .rosterName {
flex: 1;
min-width: 0
}
.job-scheduling-page .rosterName strong {
display: block;
font-size: 11px
}
.job-scheduling-page .rosterName small {
color: var(--muted);
font-size: 9px
}
.job-scheduling-page .rosterTop .pill {
font-size: 8px
}
.job-scheduling-page .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.job-scheduling-page .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.job-scheduling-page .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.job-scheduling-page .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.job-scheduling-page .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.job-scheduling-page .rosterNote .icon2 {
width: 19px;
height: 19px
}
.job-scheduling-page .rosterNote strong {
display: block;
margin-bottom: 3px
} .job-scheduling-page .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.job-scheduling-page .ruleCard .uiLabel {
color: #9CBED1
}
.job-scheduling-page .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.job-scheduling-page .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.job-scheduling-page .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.job-scheduling-page .workCards {
display: grid;
gap: 9px
}
.job-scheduling-page .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.job-scheduling-page .workCard strong {
display: block;
font-size: 11px
}
.job-scheduling-page .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.job-scheduling-page .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.job-scheduling-page .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.job-scheduling-page .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.job-scheduling-page .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.job-scheduling-page .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.job-scheduling-page .modeRow .icon2 {
width: 14px;
height: 14px
} .job-scheduling-page .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.job-scheduling-page .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.job-scheduling-page .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.job-scheduling-page .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.job-scheduling-page .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.job-scheduling-page .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.job-scheduling-page .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.job-scheduling-page .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.job-scheduling-page .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.job-scheduling-page .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.job-scheduling-page .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.job-scheduling-page .lookupSide {
display: grid;
gap: 11px
}
.job-scheduling-page .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.job-scheduling-page .lookupCard .icon2 {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.job-scheduling-page .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.job-scheduling-page .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.job-scheduling-page .lookupCard.done {
border-left: 3px solid var(--green)
} .job-scheduling-page .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.job-scheduling-page .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.job-scheduling-page .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.job-scheduling-page .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.job-scheduling-page .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.job-scheduling-page .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.job-scheduling-page .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.job-scheduling-page .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.job-scheduling-page .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.job-scheduling-page .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .job-scheduling-page .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.job-scheduling-page .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.job-scheduling-page .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.job-scheduling-page .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.job-scheduling-page .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.job-scheduling-page .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.job-scheduling-page .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
} .job-scheduling-page .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.job-scheduling-page .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.job-scheduling-page .featureCard:hover {
transform: translateY(-3px)
}
.job-scheduling-page .featureIcon,
.job-scheduling-page .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.job-scheduling-page .featureIcon .icon2,
.job-scheduling-page .useIcon .icon2 {
width: 22px;
height: 22px
}
.job-scheduling-page .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.job-scheduling-page .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .job-scheduling-page .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.job-scheduling-page .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.job-scheduling-page .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.job-scheduling-page .integration:hover {
background: var(--sky2)
}
.job-scheduling-page .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.job-scheduling-page .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.job-scheduling-page .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.job-scheduling-page .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.job-scheduling-page .stream>span[aria-hidden] {
color: #86B2C9
} .job-scheduling-page .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.job-scheduling-page .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.job-scheduling-page .useCase h3 {
font-size: 20px
}
.job-scheduling-page .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.job-scheduling-page .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.job-scheduling-page .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.job-scheduling-page .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.job-scheduling-page .review h3 {
font-size: 22px
}
.job-scheduling-page .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.job-scheduling-page .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.job-scheduling-page .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.job-scheduling-page .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.job-scheduling-page .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.job-scheduling-page .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.job-scheduling-page .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.job-scheduling-page .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.job-scheduling-page .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .job-scheduling-page .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.job-scheduling-page .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.job-scheduling-page .cta h3 {
font-size: 19px
}
.job-scheduling-page .cta.darkCta h3 {
color: #fff
}
.job-scheduling-page .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.job-scheduling-page .cta.darkCta p {
color: #D1D1D1
}
.job-scheduling-page .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.job-scheduling-page .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.job-scheduling-page .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.job-scheduling-page .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.job-scheduling-page .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.job-scheduling-page .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.job-scheduling-page .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.job-scheduling-page .heroGrid {
gap: 28px
} .job-scheduling-page .hero .lead {
font-size: 17px
}
.job-scheduling-page .assetPhone {
width: 168px;
top: 235px
}
.job-scheduling-page .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.job-scheduling-page .scheduleBoard {
width: 96%;
left: 0
}
.job-scheduling-page .miniJob {
padding: 4px
}
.job-scheduling-page .heroVisual,
.job-scheduling-page .assetStage {
min-height: 555px
}
.job-scheduling-page .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.job-scheduling-page .job-scheduling-page .visual {
padding: 17px
}
.job-scheduling-page .plannerTicks,
.job-scheduling-page .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.job-scheduling-page .plannerRow {
grid-template-columns: 75px 1fr
}
.job-scheduling-page .person {
font-size: 9px;
padding: 10px 5px
}
.job-scheduling-page .person .avatar {
display: none
}
}
@media(max-width:960px) {
.job-scheduling-page .heroGrid,
.job-scheduling-page .feature,
.job-scheduling-page .aiGrid,
.job-scheduling-page .final {
grid-template-columns: 1fr
}
.job-scheduling-page .heroGrid {
gap: 36px
}
.job-scheduling-page .hero h1 {
max-width: 760px
}
.job-scheduling-page .hero .lead {
max-width: 750px
}
.job-scheduling-page .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.job-scheduling-page .assetStage {
margin: auto
}
.job-scheduling-page .feature.reverse .visual {
order: 0
}
.job-scheduling-page .feature {
gap: 30px
}
.job-scheduling-page .feature>div:first-child {
max-width: 800px
}
.job-scheduling-page .outcomes,
.job-scheduling-page .featureGrid,
.job-scheduling-page .connectedGrid,
.job-scheduling-page .useCases {
grid-template-columns: repeat(2, 1fr)
}
.job-scheduling-page .logos {
grid-template-columns: repeat(3, 1fr)
}
.job-scheduling-page .integrations {
grid-template-columns: repeat(3, 1fr)
}
.job-scheduling-page .reviews {
grid-template-columns: 1fr
}
.job-scheduling-page .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.job-scheduling-page .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.job-scheduling-page .ratingItem:nth-child(2) {
border: 0
}
.job-scheduling-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.job-scheduling-page .final .btn {
min-width: 195px
}
.job-scheduling-page .job-scheduling-page .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.job-scheduling-page .aiGrid {
gap: 30px
}
.job-scheduling-page .aiMini {
max-width: 760px
}
.job-scheduling-page .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.job-scheduling-page .wrap {
width: calc(100% - 24px)
}
.job-scheduling-page section {
padding: 56px 0
}
.job-scheduling-page .hero {
padding: 32px 0 42px
}
.job-scheduling-page h2 {
font-size: 34px
}
.job-scheduling-page .lead {
font-size: 17px
}
.job-scheduling-page .sectionHead p {
font-size: 16px
}
.job-scheduling-page .sectionHead {
margin-bottom: 28px
}
.job-scheduling-page .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.job-scheduling-page .heroGrid {
gap: 24px
}
.job-scheduling-page .hero .actions {
gap: 8px
}
.job-scheduling-page .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.job-scheduling-page .micro {
font-size: 11px
}
.job-scheduling-page .heroPills {
gap: 6px
}
.job-scheduling-page .heroPills span {
font-size: 9px
}
.job-scheduling-page .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.job-scheduling-page .heroVisual {
min-height: 525px
}
.job-scheduling-page .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.job-scheduling-page .assetStage:before {
inset: 38px 0 28px 10px
}
.job-scheduling-page .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.job-scheduling-page .boardHeader {
padding: 12px
}
.job-scheduling-page .boardBrand {
font-size: 12px
}
.job-scheduling-page .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.job-scheduling-page .miniCalendar {
margin: 0 10px 12px
}
.job-scheduling-page .miniDates,
.job-scheduling-page .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.job-scheduling-page .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.job-scheduling-page .miniPerson small {
font-size: 7px
}
.job-scheduling-page .miniCell {
padding: 4px 3px
}
.job-scheduling-page .miniDates>div {
font-size: 8px
}
.job-scheduling-page .miniDates small {
font-size: 7px
}
.job-scheduling-page .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.job-scheduling-page .miniJob b {
font-size: 7px
}
.job-scheduling-page .miniRow {
min-height: 57px
}
.job-scheduling-page .miniJob {
min-height: 48px
}
.job-scheduling-page .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.job-scheduling-page .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.job-scheduling-page .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.job-scheduling-page .phoneHead strong {
font-size: 11px
}
.job-scheduling-page .phoneHead small {
font-size: 8px
}
.job-scheduling-page .phoneAgenda {
padding: 8px;
gap: 6px
}
.job-scheduling-page .phoneJob {
padding: 7px;
font-size: 8px
}
.job-scheduling-page .phoneJob strong {
font-size: 9px
}
.job-scheduling-page .phoneJob small {
font-size: 7px
}
.job-scheduling-page .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.job-scheduling-page .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.job-scheduling-page .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.job-scheduling-page .lifecycleHead .icon2 {
width: 15px;
height: 15px
}
.job-scheduling-page .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.job-scheduling-page .lifecycleBody strong {
font-size: 10px
}
.job-scheduling-page .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.job-scheduling-page .diagramCaption {
font-size: 9px
}
.job-scheduling-page .trust {
padding: 23px 0
}
.job-scheduling-page .trustLabel {
font-size: 12px
}
.job-scheduling-page .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.job-scheduling-page .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.job-scheduling-page .logo.dhl {
font-size: 19px
}
.job-scheduling-page .logo.adobe {
font-size: 17px
}
.job-scheduling-page .logo.golden {
font-size: 8px
}
.job-scheduling-page .fl,
.job-scheduling-page .outcomes,
.job-scheduling-page .featureGrid,
.job-scheduling-page .connectedGrid,
.job-scheduling-page .useCases {
grid-template-columns: 1fr
}
.job-scheduling-page .fi {
font-size: 14px
}
.job-scheduling-page .outcome {
padding: 21px
}
.job-scheduling-page .outcome strong {
margin-top: 12px
}
.job-scheduling-page .outcome span {
font-size: 14px
}
.job-scheduling-page .job-scheduling-page .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.job-scheduling-page .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.job-scheduling-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.job-scheduling-page .uiSub {
font-size: 9px
}
.job-scheduling-page .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.job-scheduling-page .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.job-scheduling-page .person {
font-size: 9px;
padding: 8px 6px
}
.job-scheduling-page .person .avatar {
display: none
}
.job-scheduling-page .person small {
font-size: 8px
}
.job-scheduling-page .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.job-scheduling-page .slot strong {
font-size: 8px
}
.job-scheduling-page .plannerHead {
font-size: 10px;
padding: 10px
}
.job-scheduling-page .plannerHead .pill {
font-size: 8px
}
.job-scheduling-page .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.job-scheduling-page .pending strong {
font-size: 10px
}
.job-scheduling-page .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.job-scheduling-page .rosterTop .pill {
font-size: 8px
}
.job-scheduling-page .rosterCard {
padding: 11px
}
.job-scheduling-page .rosterNote {
padding: 11px;
font-size: 10px
}
.job-scheduling-page .ruleCard {
padding: 14px
}
.job-scheduling-page .ruleCard strong {
font-size: 15px
}
.job-scheduling-page .workCard {
padding: 10px;
gap: 8px
}
.job-scheduling-page .workCard strong {
font-size: 10px
}
.job-scheduling-page .workCard small {
font-size: 8px
}
.job-scheduling-page .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.job-scheduling-page .modeRow span {
font-size: 8px;
padding: 7px
}
.job-scheduling-page .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.job-scheduling-page .phoneMockInner {
padding: 11px;
min-height: 288px
}
.job-scheduling-page .lookupCard {
padding: 10px
}
.job-scheduling-page .lookupCard strong {
font-size: 10px
}
.job-scheduling-page .lookupCard span {
font-size: 9px
}
.job-scheduling-page .lookupCard .icon2 {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.job-scheduling-page .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.job-scheduling-page .aiMini div {
padding: 16px
}
.job-scheduling-page .aiMini strong {
font-size: 14px
}
.job-scheduling-page .aiMini span {
font-size: 13px
}
.job-scheduling-page .promptBox {
padding: 18px;
border-radius: 17px
}
.job-scheduling-page .prompt {
font-size: 13px;
padding: 13px
}
.job-scheduling-page .promptHead {
font-size: 19px
}
.job-scheduling-page .promptFoot {
font-size: 10px !important
}
.job-scheduling-page .connectedCard {
padding: 22px
}
.job-scheduling-page .connectedCard p,
.job-scheduling-page .featureCard p,
.job-scheduling-page .useCase p {
font-size: 14px
}
.job-scheduling-page .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.job-scheduling-page .integrations {
grid-template-columns: repeat(2, 1fr)
}
.job-scheduling-page .integration:last-child {
grid-column: 1/-1
}
.job-scheduling-page .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.job-scheduling-page .stream>span[aria-hidden] {
display: none
}
.job-scheduling-page .streamStep {
min-height: 24px
}
.job-scheduling-page .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.job-scheduling-page .ratingItem {
border: 0
}
.job-scheduling-page .ratingLead {
margin-bottom: 3px
}
.job-scheduling-page .review p {
font-size: 14px
}
.job-scheduling-page .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.job-scheduling-page .ctaBtns {
width: 100%
}
.job-scheduling-page .ctaBtns .btn {
flex: 1
}
.job-scheduling-page .cta p {
font-size: 14px
}
.job-scheduling-page .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.job-scheduling-page .final h2 {
font-size: 32px
}
.job-scheduling-page .final p {
font-size: 15px
}
.job-scheduling-page .final .ctaBtns {
flex-direction: column
}
.job-scheduling-page .final .btn {
min-width: 0;
width: 100%
}
}
@media(max-width:360px) {
.job-scheduling-page .heroVisual,
.job-scheduling-page .assetStage {
height: 520px;
min-height: 520px
}
.job-scheduling-page .assetPhone {
width: 152px;
top: 242px
}
.job-scheduling-page .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.job-scheduling-page .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.job-scheduling-page .lifecycleBody {
padding: 8px;
font-size: 8px
}
.job-scheduling-page .lifecycleBody strong {
font-size: 9px
}
.job-scheduling-page .boardBrand {
font-size: 11px
}
.job-scheduling-page .sampleBadge {
font-size: 8px
}
.job-scheduling-page .miniDates,
.job-scheduling-page .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.job-scheduling-page .miniDates small {
font-size: 6px
}
.job-scheduling-page .miniJob b {
font-size: 6.5px
}
.job-scheduling-page .boardFooter {
padding-right: 135px;
min-height: 45px
}
.job-scheduling-page .mobileLookup {
grid-template-columns: 1fr
}
.job-scheduling-page .phoneMock {
width: 200px;
margin: auto
}
.job-scheduling-page .lookupSide {
grid-template-columns: 1fr
}
.job-scheduling-page .lookupCard {
padding: 13px
}
.job-scheduling-page .lookupCard strong {
font-size: 12px
}
.job-scheduling-page .lookupCard span {
font-size: 11px
}
.job-scheduling-page .plannerHead {
gap: 5px
}
.job-scheduling-page .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.job-scheduling-page .plannerRow {
grid-template-columns: 61px 1fr
}
.job-scheduling-page .uiHeading>span:first-child {
gap: 5px
}
.job-scheduling-page .uiHeading .icon2 {
width: 17px;
height: 17px
}
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .field-service-dispatch-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.field-service-dispatch-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.field-service-dispatch-software .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.field-service-dispatch-software .btn:hover {
transform: translateY(-2px)
}
.field-service-dispatch-software .btn.black {
background: #0b0b0b;
color: #fff
}
.field-service-dispatch-software .btn.black:hover {
background: #292929
}
.field-service-dispatch-software .btn.yellow {
background: var(--yellow);
color: #000
}
.field-service-dispatch-software .btn.yellow:hover {
background: #FFD454
}
.field-service-dispatch-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.field-service-dispatch-software .btn .icon2 {
width: 17px;
height: 17px
}
.field-service-dispatch-software a:focus-visible,
summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.field-service-dispatch-software .dark a:focus-visible,
.field-service-dispatch-software .final a:focus-visible {
outline-color: var(--yellow)
}
.field-service-dispatch-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.field-service-dispatch-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.field-service-dispatch-software .soft {
background: var(--sky2)
}
.field-service-dispatch-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.field-service-dispatch-software .dark h2,
.field-service-dispatch-software .dark h3 {
color: #fff
}
.field-service-dispatch-software .dark p {
color: #D6D6D6
}
.field-service-dispatch-software .dark .ey {
background: var(--yellow)
} .field-service-dispatch-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.field-service-dispatch-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.field-service-dispatch-software .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.field-service-dispatch-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.field-service-dispatch-software .textLink .icon2 {
width: 16px;
height: 16px
}
.field-service-dispatch-software .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.field-service-dispatch-software .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.field-service-dispatch-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.field-service-dispatch-software .skipLink:focus {
top: 12px
} .field-service-dispatch-software .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.field-service-dispatch-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.field-service-dispatch-software .heroGrid>*,
.field-service-dispatch-software .feature>*,
.field-service-dispatch-software .aiGrid>* {
min-width: 0
}
.field-service-dispatch-software .hero h1 {
max-width: 580px
}
.field-service-dispatch-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.field-service-dispatch-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.field-service-dispatch-software .heroVisual {
min-height: 555px;
position: relative
}
.field-service-dispatch-software .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.field-service-dispatch-software .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.field-service-dispatch-software .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.field-service-dispatch-software .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.field-service-dispatch-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.field-service-dispatch-software .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.field-service-dispatch-software .brandTile .icon2 {
width: 17px;
height: 17px
}
.field-service-dispatch-software .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.field-service-dispatch-software .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.field-service-dispatch-software .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.field-service-dispatch-software .viewPills span {
padding: 4px 7px
}
.field-service-dispatch-software .viewPills .active {
background: var(--navy);
color: #fff
}
.field-service-dispatch-software .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.field-service-dispatch-software .miniDates,
.field-service-dispatch-software .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.field-service-dispatch-software .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.field-service-dispatch-software .miniDates>div:last-child {
border: 0
}
.field-service-dispatch-software .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.field-service-dispatch-software .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.field-service-dispatch-software .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.field-service-dispatch-software .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.field-service-dispatch-software .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.field-service-dispatch-software .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.field-service-dispatch-software .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.field-service-dispatch-software .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.field-service-dispatch-software .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.field-service-dispatch-software .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.field-service-dispatch-software .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.field-service-dispatch-software .boardFooter strong {
color: var(--navy)
}
.field-service-dispatch-software .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.field-service-dispatch-software .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.field-service-dispatch-software .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.field-service-dispatch-software .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.field-service-dispatch-software .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.field-service-dispatch-software .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.field-service-dispatch-software .phoneHead small {
font-size: 9px;
color: #50697A
}
.field-service-dispatch-software .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.field-service-dispatch-software .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.field-service-dispatch-software .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.field-service-dispatch-software .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.field-service-dispatch-software .phoneJob.current {
background: var(--sky2)
}
.field-service-dispatch-software .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.field-service-dispatch-software .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.field-service-dispatch-software .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.field-service-dispatch-software .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.field-service-dispatch-software .lifecycleHead .icon2 {
color: var(--yellow);
width: 17px;
height: 17px
}
.field-service-dispatch-software .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.field-service-dispatch-software .lifecycleBody strong {
font-size: 12px
}
.field-service-dispatch-software .lifecycleBody span {
color: #CEDBE4
}
.field-service-dispatch-software .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.field-service-dispatch-software .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .field-service-dispatch-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.field-service-dispatch-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.field-service-dispatch-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.field-service-dispatch-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.field-service-dispatch-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.logo.adobe {
font-size: 20px
}
.logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .field-service-dispatch-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 15px 0 0;
}
.field-service-dispatch-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.field-service-dispatch-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.field-service-dispatch-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.field-service-dispatch-software .outcome:nth-child(3):before {
background: var(--green)
}
.field-service-dispatch-software .outcome:nth-child(4):before {
background: var(--purple)
}
.field-service-dispatch-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.field-service-dispatch-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.field-service-dispatch-software .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
} .field-service-dispatch-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.field-service-dispatch-software .feature.reverse .visual {
order: -1
}
.field-service-dispatch-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.field-service-dispatch-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.field-service-dispatch-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.field-service-dispatch-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.field-service-dispatch-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.field-service-dispatch-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.field-service-dispatch-software .visual>* {
position: relative;
z-index: 2
}
.field-service-dispatch-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.field-service-dispatch-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.field-service-dispatch-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.field-service-dispatch-software .uiHeading .icon2 {
width: 19px;
height: 19px
}
.field-service-dispatch-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.field-service-dispatch-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.field-service-dispatch-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.field-service-dispatch-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.field-service-dispatch-software .pill.green {
background: var(--greenbg);
color: #116746
}
.field-service-dispatch-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.field-service-dispatch-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.field-service-dispatch-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .field-service-dispatch-software .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.field-service-dispatch-software .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.field-service-dispatch-software .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.field-service-dispatch-software .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.field-service-dispatch-software .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.field-service-dispatch-software .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.field-service-dispatch-software .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.field-service-dispatch-software .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.field-service-dispatch-software .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.field-service-dispatch-software .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.field-service-dispatch-software .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.field-service-dispatch-software .lookupSide {
display: grid;
gap: 11px
}
.field-service-dispatch-software .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.field-service-dispatch-software .lookupCard .icon2 {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.field-service-dispatch-software .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.field-service-dispatch-software .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.field-service-dispatch-software .lookupCard.done {
border-left: 3px solid var(--green)
} .field-service-dispatch-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.field-service-dispatch-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.field-service-dispatch-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.field-service-dispatch-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.field-service-dispatch-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.field-service-dispatch-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.field-service-dispatch-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.field-service-dispatch-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.field-service-dispatch-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.field-service-dispatch-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .field-service-dispatch-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.field-service-dispatch-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.field-service-dispatch-software .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.field-service-dispatch-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.field-service-dispatch-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.field-service-dispatch-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.field-service-dispatch-software .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
} .field-service-dispatch-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 15px 0 0;
}
.field-service-dispatch-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.field-service-dispatch-software .featureCard:hover {
transform: translateY(-3px)
}
.field-service-dispatch-software .featureIcon,
.field-service-dispatch-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.field-service-dispatch-software .featureIcon .icon2,
.field-service-dispatch-software .useIcon .icon2 {
width: 22px;
height: 22px
}
.field-service-dispatch-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.field-service-dispatch-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .field-service-dispatch-software .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.field-service-dispatch-software .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.field-service-dispatch-software .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.field-service-dispatch-software .integration:hover {
background: var(--sky2)
}
.field-service-dispatch-software .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.field-service-dispatch-software .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.field-service-dispatch-software .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.field-service-dispatch-software .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.field-service-dispatch-software .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.field-service-dispatch-software .stream>span[aria-hidden] {
color: #86B2C9
} .field-service-dispatch-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.field-service-dispatch-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.field-service-dispatch-software .useCase h3 {
font-size: 20px
}
.field-service-dispatch-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.field-service-dispatch-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 15px 0 0;
}
.field-service-dispatch-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.field-service-dispatch-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.field-service-dispatch-software .review h3 {
font-size: 22px
}
.field-service-dispatch-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.field-service-dispatch-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.field-service-dispatch-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.field-service-dispatch-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.field-service-dispatch-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.field-service-dispatch-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.field-service-dispatch-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.field-service-dispatch-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.field-service-dispatch-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .field-service-dispatch-software .faq {
max-width: 900px
}
.field-service-dispatch-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.field-service-dispatch-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.field-service-dispatch-software .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.field-service-dispatch-software .faq summary::marker {
color: var(--navy)
}
.field-service-dispatch-software .faq details[open] {
border-color: #A9D3E7
}
.field-service-dispatch-software .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .field-service-dispatch-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.field-service-dispatch-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.field-service-dispatch-software .cta h3 {
font-size: 19px
}
.field-service-dispatch-software .cta.darkCta h3 {
color: #fff
}
.field-service-dispatch-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.field-service-dispatch-software .cta.darkCta p {
color: #D1D1D1
}
.field-service-dispatch-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.field-service-dispatch-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.field-service-dispatch-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.field-service-dispatch-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.field-service-dispatch-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.field-service-dispatch-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.field-service-dispatch-software .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.field-service-dispatch-software .heroGrid {
gap: 28px
}
.field-service-dispatch-software .hero .lead {
font-size: 17px
}
.field-service-dispatch-software .assetPhone {
width: 168px;
top: 235px
}
.field-service-dispatch-software .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.field-service-dispatch-software .scheduleBoard {
width: 96%;
left: 0
}
.field-service-dispatch-software .miniJob {
padding: 4px
}
.field-service-dispatch-software .heroVisual,
.field-service-dispatch-software .assetStage {
min-height: 555px
}
.field-service-dispatch-software .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.field-service-dispatch-software .visual {
padding: 17px
}
.field-service-dispatch-software .plannerTicks,
.field-service-dispatch-software .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.field-service-dispatch-software .plannerRow {
grid-template-columns: 75px 1fr
}
.field-service-dispatch-software .person {
font-size: 9px;
padding: 10px 5px
}
.field-service-dispatch-software .person .avatar {
display: none
}
}
@media(max-width:960px) {
.field-service-dispatch-software .heroGrid,
.field-service-dispatch-software .feature,
.field-service-dispatch-software .aiGrid,
.field-service-dispatch-software .final {
grid-template-columns: 1fr
}
.field-service-dispatch-software .heroGrid {
gap: 36px
}
.field-service-dispatch-software .hero h1 {
max-width: 760px
}
.field-service-dispatch-software .hero .lead {
max-width: 750px
}
.field-service-dispatch-software .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.field-service-dispatch-software .assetStage {
margin: auto
}
.field-service-dispatch-software .feature.reverse .visual {
order: 0
}
.field-service-dispatch-software .feature {
gap: 30px
}
.field-service-dispatch-software .feature>div:first-child {
max-width: 800px
}
.field-service-dispatch-software .outcomes,
.field-service-dispatch-software .featureGrid,
.field-service-dispatch-software .connectedGrid,
.field-service-dispatch-software .useCases {
grid-template-columns: repeat(2, 1fr)
}
.field-service-dispatch-software .logos {
grid-template-columns: repeat(3, 1fr)
}
.field-service-dispatch-software .integrations {
grid-template-columns: repeat(3, 1fr)
}
.field-service-dispatch-software .reviews {
grid-template-columns: 1fr
}
.field-service-dispatch-software .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.field-service-dispatch-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.field-service-dispatch-software .ratingItem:nth-child(2) {
border: 0
}
.field-service-dispatch-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.field-service-dispatch-software .final .btn {
min-width: 195px
}
.field-service-dispatch-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.field-service-dispatch-software .aiGrid {
gap: 30px
}
.field-service-dispatch-software .aiMini {
max-width: 760px
}
.field-service-dispatch-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.field-service-dispatch-software .wrap {
width: calc(100% - 24px)
}
.field-service-dispatch-software .hero {
padding: 32px 0 42px
}
.field-service-dispatch-software .lead {
font-size: 17px
}
.field-service-dispatch-software .sectionHead p {
font-size: 16px
}
.field-service-dispatch-software .sectionHead {
margin-bottom: 28px
}
.field-service-dispatch-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.field-service-dispatch-software .heroGrid {
gap: 24px
}
.field-service-dispatch-software .hero .actions {
gap: 8px
}
.field-service-dispatch-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.field-service-dispatch-software .micro {
font-size: 11px
}
.field-service-dispatch-software .heroPills {
gap: 6px
}
.field-service-dispatch-software .heroPills span {
font-size: 9px
}
.field-service-dispatch-software .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.field-service-dispatch-software .heroVisual {
min-height: 525px
}
.field-service-dispatch-software .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.field-service-dispatch-software .assetStage:before {
inset: 38px 0 28px 10px
}
.field-service-dispatch-software .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.field-service-dispatch-software .boardHeader {
padding: 12px
}
.field-service-dispatch-software .boardBrand {
font-size: 12px
}
.field-service-dispatch-software .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.field-service-dispatch-software .miniCalendar {
margin: 0 10px 12px
}
.field-service-dispatch-software .miniDates,
.field-service-dispatch-software .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.field-service-dispatch-software .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.field-service-dispatch-software .miniPerson small {
font-size: 7px
}
.field-service-dispatch-software .miniCell {
padding: 4px 3px
}
.field-service-dispatch-software .miniDates>div {
font-size: 8px
}
.field-service-dispatch-software .miniDates small {
font-size: 7px
}
.field-service-dispatch-software .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.field-service-dispatch-software .miniJob b {
font-size: 7px
}
.field-service-dispatch-software .miniRow {
min-height: 57px
}
.field-service-dispatch-software .miniJob {
min-height: 48px
}
.field-service-dispatch-software .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.field-service-dispatch-software .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.field-service-dispatch-software .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.field-service-dispatch-software .phoneHead strong {
font-size: 11px
}
.field-service-dispatch-software .phoneHead small {
font-size: 8px
}
.field-service-dispatch-software .phoneAgenda {
padding: 8px;
gap: 6px
}
.field-service-dispatch-software .phoneJob {
padding: 7px;
font-size: 8px
}
.field-service-dispatch-software .phoneJob strong {
font-size: 9px
}
.field-service-dispatch-software .phoneJob small {
font-size: 7px
}
.field-service-dispatch-software .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.field-service-dispatch-software .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.field-service-dispatch-software .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.field-service-dispatch-software .lifecycleHead .icon2 {
width: 15px;
height: 15px
}
.field-service-dispatch-software .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.field-service-dispatch-software .lifecycleBody strong {
font-size: 10px
}
.field-service-dispatch-software .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.field-service-dispatch-software .diagramCaption {
font-size: 9px
}
.field-service-dispatch-software .trust {
padding: 23px 0
}
.field-service-dispatch-software .trustLabel {
font-size: 12px
}
.field-service-dispatch-software .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.field-service-dispatch-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.field-service-dispatch-software .logo.dhl {
font-size: 19px
}
.field-service-dispatch-software .logo.adobe {
font-size: 17px
}
.field-service-dispatch-software .logo.golden {
font-size: 8px
}
.field-service-dispatch-software .fl,
.field-service-dispatch-software .outcomes,
.field-service-dispatch-software .featureGrid,
.field-service-dispatch-software .connectedGrid,
.field-service-dispatch-software .useCases {
grid-template-columns: 1fr
}
.field-service-dispatch-software .fi {
font-size: 14px
}
.field-service-dispatch-software .outcome {
padding: 21px
}
.field-service-dispatch-software .outcome strong {
margin-top: 12px
}
.field-service-dispatch-software .outcome span {
font-size: 14px
}
.field-service-dispatch-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.field-service-dispatch-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.field-service-dispatch-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.field-service-dispatch-software .uiSub {
font-size: 9px
}
.plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.field-service-dispatch-software .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.field-service-dispatch-software .person {
font-size: 9px;
padding: 8px 6px
}
.field-service-dispatch-software .person .avatar {
display: none
}
.field-service-dispatch-software .person small {
font-size: 8px
}
.field-service-dispatch-software .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.field-service-dispatch-software .slot strong {
font-size: 8px
}
.field-service-dispatch-software .plannerHead {
font-size: 10px;
padding: 10px
}
.field-service-dispatch-software .plannerHead .pill {
font-size: 8px
}
.field-service-dispatch-software .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.field-service-dispatch-software .pending strong {
font-size: 10px
}
.field-service-dispatch-software .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.field-service-dispatch-software .rosterTop .pill {
font-size: 8px
}
.field-service-dispatch-software .rosterCard {
padding: 11px
}
.field-service-dispatch-software .rosterNote {
padding: 11px;
font-size: 10px
}
.field-service-dispatch-software .ruleCard {
padding: 14px
}
.field-service-dispatch-software .ruleCard strong {
font-size: 15px
}
.field-service-dispatch-software .workCard {
padding: 10px;
gap: 8px
}
.field-service-dispatch-software .workCard strong {
font-size: 10px
}
.field-service-dispatch-software .workCard small {
font-size: 8px
}
.field-service-dispatch-software .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.field-service-dispatch-software .modeRow span {
font-size: 8px;
padding: 7px
}
.field-service-dispatch-software .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.field-service-dispatch-software .phoneMockInner {
padding: 11px;
min-height: 288px
}
.field-service-dispatch-software .lookupCard {
padding: 10px
}
.field-service-dispatch-software .lookupCard strong {
font-size: 10px
}
.field-service-dispatch-software .lookupCard span {
font-size: 9px
}
.field-service-dispatch-software .lookupCard .icon2 {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.field-service-dispatch-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.field-service-dispatch-software .aiMini div {
padding: 16px
}
.field-service-dispatch-software .aiMini strong {
font-size: 14px
}
.field-service-dispatch-software .aiMini span {
font-size: 13px
}
.field-service-dispatch-software .promptBox {
padding: 18px;
border-radius: 17px
}
.field-service-dispatch-software .prompt {
font-size: 13px;
padding: 13px
}
.field-service-dispatch-software .promptHead {
font-size: 19px
}
.field-service-dispatch-software .promptFoot {
font-size: 10px !important
}
.field-service-dispatch-software .connectedCard {
padding: 22px
}
.field-service-dispatch-software .connectedCard p,
.field-service-dispatch-software .featureCard p,
.field-service-dispatch-software .useCase p {
font-size: 14px
}
.field-service-dispatch-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.field-service-dispatch-software .integrations {
grid-template-columns: repeat(2, 1fr)
}
.field-service-dispatch-software .integration:last-child {
grid-column: 1/-1
}
.field-service-dispatch-software .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.field-service-dispatch-software .stream>span[aria-hidden] {
display: none
}
.field-service-dispatch-software .streamStep {
min-height: 24px
}
.field-service-dispatch-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.field-service-dispatch-software .ratingItem {
border: 0
}
.field-service-dispatch-software .ratingLead {
margin-bottom: 3px
}
.field-service-dispatch-software .review p {
font-size: 14px
}
.field-service-dispatch-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.field-service-dispatch-software .ctaBtns {
width: 100%
}
.field-service-dispatch-software .ctaBtns .btn {
flex: 1
}
.field-service-dispatch-software .cta p {
font-size: 14px
}
.field-service-dispatch-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.field-service-dispatch-software .final h2 {
font-size: 32px
}
.field-service-dispatch-software .final p {
font-size: 15px
}
.field-service-dispatch-software .final .ctaBtns {
flex-direction: column
}
.field-service-dispatch-software .final .btn {
min-width: 0;
width: 100%
}
}
@media(max-width:360px) {
.field-service-dispatch-software .field-service-dispatch-software .heroVisual,
.field-service-dispatch-software .field-service-dispatch-software .assetStage {
height: 520px;
min-height: 520px
}
.field-service-dispatch-software .field-service-dispatch-software .assetPhone {
width: 152px;
top: 242px
}
.field-service-dispatch-software .field-service-dispatch-software .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.field-service-dispatch-software .field-service-dispatch-software .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.field-service-dispatch-software .field-service-dispatch-software .lifecycleBody {
padding: 8px;
font-size: 8px
}
.field-service-dispatch-software .field-service-dispatch-software .lifecycleBody strong {
font-size: 9px
}
.field-service-dispatch-software .field-service-dispatch-software .boardBrand {
font-size: 11px
}
.field-service-dispatch-software .sampleBadge {
font-size: 8px
}
.field-service-dispatch-software .miniDates,
.field-service-dispatch-software .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.field-service-dispatch-software .miniDates small {
font-size: 6px
}
.field-service-dispatch-software .miniJob b {
font-size: 6.5px
}
.field-service-dispatch-software .boardFooter {
padding-right: 135px;
min-height: 45px
}
.field-service-dispatch-software .mobileLookup {
grid-template-columns: 1fr
}
.field-service-dispatch-software .phoneMock {
width: 200px;
margin: auto
}
.field-service-dispatch-software .lookupSide {
grid-template-columns: 1fr
}
.field-service-dispatch-software .lookupCard {
padding: 13px
}
.field-service-dispatch-software .lookupCard strong {
font-size: 12px
}
.field-service-dispatch-software .lookupCard span {
font-size: 11px
}
.field-service-dispatch-software .plannerHead {
gap: 5px
}
.field-service-dispatch-software .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.field-service-dispatch-software .plannerRow {
grid-template-columns: 61px 1fr
}
.field-service-dispatch-software .uiHeading>span:first-child {
gap: 5px
}
.field-service-dispatch-software .uiHeading .icon2 {
width: 17px;
height: 17px
}
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .field-service-dispatch-software .field-service-dispatch-software .dispatchStage {
height: 615px;
min-height: 615px
}
.field-service-dispatch-software .dispatchBoard {
position: absolute;
top: 47px;
left: 0;
width: 100%;
border: 1px solid #BEDCEB;
border-radius: 18px;
background: #fff;
overflow: hidden;
z-index: 2;
box-shadow: 0 12px 28px rgba(6, 59, 92, .07)
}
.field-service-dispatch-software .dispatchBoard .boardHeader {
padding: 15px 16px
}
.field-service-dispatch-software .dispatchMap {
position: relative;
height: 225px;
overflow: hidden;
background: #F2F7F9
}
.field-service-dispatch-software .dispatchMap>svg,
.field-service-dispatch-software .routeMap>svg {
width: 100%;
height: 100%;
display: block
}
.field-service-dispatch-software .field-service-dispatch-software .mapCaption {
position: absolute;
left: 13px;
top: 12px;
padding: 5px 9px;
border-radius: 6px;
background: #fff;
border: 1px solid #D9E8F1;
font-size: 10px;
color: var(--navy);
font-weight: 800;
line-height: 1.4
}
.field-service-dispatch-software .field-service-dispatch-software .mapLegend {
position: absolute;
left: 12px;
bottom: 12px;
display: flex;
gap: 7px;
flex-wrap: wrap;
max-width: 62%
}
.field-service-dispatch-software .field-service-dispatch-software .mapLegend span {
display: flex;
align-items: center;
gap: 5px;
background: #fff;
border: 1px solid #DAE7EE;
border-radius: 6px;
padding: 5px 7px;
font-size: 9px;
line-height: 1.4;
color: #3B596B
}
.field-service-dispatch-software .field-service-dispatch-software .mapLegend i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #118A61
}
.field-service-dispatch-software .mapLegend span:last-child i {
background: #007FC5
}
.field-service-dispatch-software .dispatchBoard .boardFooter {
padding: 11px 195px 11px 14px;
min-height: 49px;
font-size: 10px
}
.field-service-dispatch-software .dispatchStage .assetPhone {
top: 282px;
width: 185px;
right: 0
}
.field-service-dispatch-software .dispatchStage .phoneScreen {
min-height: 253px
}
.field-service-dispatch-software .dispatchStage .phoneHead strong {
font-size: 12px
}
.field-service-dispatch-software .dispatchStage .phoneJob {
font-size: 9px
}
.field-service-dispatch-software .dispatchStage .phoneJob strong {
font-size: 11px;
line-height: 1.4
}
.field-service-dispatch-software .dispatchStage .phoneJob small {
font-size: 9px
}
.field-service-dispatch-software .dispatchStage .lifecycleCard {
top: 399px;
left: 4px;
width: calc(100% - 204px);
max-width: 326px
}
.field-service-dispatch-software .dispatchStage .lifecycleHead {
padding: 11px 12px;
line-height: 1.5
}
.field-service-dispatch-software .dispatchStage .lifecycleBody {
padding: 11px 12px;
font-size: 11px
}
.field-service-dispatch-software .dispatchStage .lifecycleBody strong {
font-size: 14px
}
.field-service-dispatch-software .dispatchStage .assetTag {
left: 0;
top: 7px;
font-size: 10px
}
.field-service-dispatch-software .dispatchStage .phoneBottom {
font-size: 9px
} .field-service-dispatch-software .dispatchVisual {
box-shadow: none
}
.field-service-dispatch-software .dispatchVisual .uiPanel {
position: relative
}
.field-service-dispatch-software .dispatchVisual .uiHeading {
font-size: 14px;
line-height: 1.4
}
.field-service-dispatch-software .dispatchVisual .uiSub {
font-size: 10px
}
.field-service-dispatch-software .dispatchVisual .avatar {
width: 27px;
height: 27px;
flex: 0 0 27px;
border-radius: 50%;
background: #E5F5FD;
display: grid;
place-items: center;
color: #165B7C;
font-size: 9px;
font-weight: 850
}
.field-service-dispatch-software .dispatchVisual .avatar.green {
background: #E7F7EF;
color: #136447
}
.field-service-dispatch-software .dispatchVisual .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.field-service-dispatch-software .dispatchVisual .pill {
font-size: 9px;
line-height: 1.4
}
.field-service-dispatch-software .pill.red {
background: #FFF0EC;
color: #A23E22
}
.field-service-dispatch-software .uiFooter {
padding: 11px 13px;
background: #F8FCFE;
border-top: 1px solid var(--line);
font-size: 10px;
line-height: 1.55;
color: var(--muted)
}
.field-service-dispatch-software .uiFooter strong {
color: var(--navy)
} .field-service-dispatch-software .dispatchToolbar {
padding: 13px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-bottom: 1px solid var(--line);
font-size: 11px;
font-weight: 800
}
.field-service-dispatch-software .dispatchToolbar .viewPills {
font-size: 10px
}
.field-service-dispatch-software .dispatchLanes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 12px;
background: #F8FBFD;
min-height: 213px
}
.field-service-dispatch-software .dispatchLane {
min-width: 0
}
.field-service-dispatch-software .laneHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800;
color: var(--navy);
padding: 0 2px 10px
}
.field-service-dispatch-software .laneHead>span {
display: grid;
place-items: center;
width: 18px;
height: 18px;
background: #DFEBF2;
border-radius: 5px;
font-size: 9px
}
.field-service-dispatch-software .dispatchTicket {
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 10px;
padding: 11px 9px;
background: #fff;
min-height: 151px
}
.field-service-dispatch-software .dispatchTicket.urgent {
border-top-color: #DDA500;
background: #fff
}
.field-service-dispatch-software .dispatchTicket.done {
border-top-color: var(--green);
background: #fff
}
.field-service-dispatch-software .ticketCode {
color: var(--muted);
font-size: 9px;
display: block;
margin-bottom: 6px
}
.field-service-dispatch-software .dispatchTicket>strong {
display: block;
font-size: 12px;
line-height: 1.4;
color: var(--ink);
margin: 0 0 5px
}
.field-service-dispatch-software .dispatchTicket>small {
font-size: 10px;
line-height: 1.5;
color: var(--muted);
display: block;
min-height: 32px
}
.field-service-dispatch-software .ticketOwner {
display: flex;
align-items: center;
gap: 5px;
margin-top: 12px;
padding-top: 8px;
border-top: 1px solid #E7EFF4;
font-size: 10px;
font-weight: 750;
color: var(--navy)
}
.field-service-dispatch-software .ticketOwner .avatar {
width: 21px;
height: 21px;
flex-basis: 21px;
font-size: 7px
}
.field-service-dispatch-software .assignmentNote {
display: flex;
gap: 10px;
align-items: center;
border: 1px solid #E7D387;
border-radius: 11px;
padding: 12px;
margin-top: 13px;
background: #FFF9E5;
color: #655010;
font-size: 11px;
line-height: 1.5
}
.field-service-dispatch-software .assignmentNote .icon2 {
width: 19px;
height: 19px;
flex: 0 0 19px
}
.field-service-dispatch-software .assignmentNote strong {
display: block
} .field-service-dispatch-software .routeMap {
position: relative;
height: 219px;
background: #F1F6F8;
border-radius: 12px;
border: 1px solid #CCDDE7;
overflow: hidden
}
.field-service-dispatch-software .routeList {
display: grid;
gap: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 12px;
overflow: hidden
}
.field-service-dispatch-software .routeStop {
display: grid;
grid-template-columns: 26px 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid #E7EFF4;
font-size: 10px
}
.field-service-dispatch-software .routeStop:last-child {
border-bottom: 0
}
.field-service-dispatch-software .stopNumber {
height: 24px;
width: 24px;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--sky);
color: var(--navy);
font-size: 11px;
font-weight: 850
}
.field-service-dispatch-software .routeStop strong {
display: block;
font-size: 11px;
color: var(--ink)
}
.field-service-dispatch-software .routeStop small {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.5
}
.field-service-dispatch-software .routeStop>span:last-child {
font-size: 10px;
color: var(--navy);
font-weight: 800
} .field-service-dispatch-software .dispatchMobile {
display: grid;
grid-template-columns: 187px 1fr;
gap: 18px;
align-items: center
}
.field-service-dispatch-software .dispatchMobile .phoneMock {
box-shadow: none;
width: 100%;
max-width: 210px
}
.field-service-dispatch-software .dispatchMobile .phoneMockInner {
padding: 13px;
min-height: 314px
}
.field-service-dispatch-software .dispatchMobile .miniBrand {
font-size: 11px
}
.field-service-dispatch-software .mobileJobTitle {
margin: 12px 0 6px;
font-size: 15px;
line-height: 1.3;
font-weight: 850;
color: var(--navy)
}
.field-service-dispatch-software .mobileMeta {
font-size: 10px;
color: var(--muted);
line-height: 1.6
}
.field-service-dispatch-software .mobileTools {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 13px 0
}
.field-service-dispatch-software .mobileTools span {
display: grid;
place-items: center;
padding: 8px 0;
border: 1px solid var(--line);
border-radius: 7px;
background: #F8FCFE;
font-size: 8px;
gap: 5px;
color: var(--navy)
}
.field-service-dispatch-software .mobileTools .icon2 {
width: 17px;
height: 17px
}
.field-service-dispatch-software .mobileCheck {
font-size: 10px;
display: flex;
gap: 7px;
align-items: center;
padding: 7px 0;
border-top: 1px solid #E6EEF3;
line-height: 1.45
}
.field-service-dispatch-software .mobileCheck .icon2 {
width: 14px;
height: 14px;
color: var(--green)
}
.field-service-dispatch-software .mobileJobNote {
font-size: 10px;
padding: 9px;
border-radius: 8px;
background: #F3F9FD;
color: #4F6E80;
margin-top: 10px;
line-height: 1.5
}
.field-service-dispatch-software .dispatchMobile .mockButton {
font-size: 10px;
margin-top: 12px
}
.field-service-dispatch-software .fieldTimeline {
display: grid;
gap: 12px
}
.field-service-dispatch-software .fieldEvent {
padding: 14px 13px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 11px;
background: #fff;
position: relative
}
.fieldEvent:not(:last-child):after {
content: '';
height: 13px;
width: 1px;
position: absolute;
top: 100%;
left: 21px;
background: #A9CFDF
}
.field-service-dispatch-software .fieldEvent:nth-child(2) {
border-left-color: var(--yellow)
}
.field-service-dispatch-software .fieldEvent:nth-child(3) {
border-left-color: var(--green)
}
.field-service-dispatch-software .fieldEvent small {
font-size: 9px;
font-weight: 700;
color: var(--muted);
display: block;
margin-bottom: 4px
}
.field-service-dispatch-software .fieldEvent strong {
font-size: 12px;
display: block;
line-height: 1.4;
color: var(--navy)
}
.field-service-dispatch-software .fieldEvent span {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 5px
} .field-service-dispatch-software .messagePanel {
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.field-service-dispatch-software .messageHead {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 13px;
border-bottom: 1px solid var(--line);
color: var(--navy);
font-size: 13px;
font-weight: 850
}
.field-service-dispatch-software .messageHead .icon2 {
width: 23px;
height: 23px
}
.field-service-dispatch-software .messageHead small {
display: block;
font-size: 10px;
font-weight: 500;
color: var(--muted)
}
.field-service-dispatch-software .messageEvent {
margin-top: 14px
}
.field-service-dispatch-software .messageLabel {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
color: var(--muted);
margin: 0 0 6px
}
.field-service-dispatch-software .messageBubble {
background: #EDF8FD;
border: 1px solid #D4EAF5;
padding: 13px;
border-radius: 12px 12px 12px 3px;
font-size: 12px;
line-height: 1.6;
color: #284C62;
max-width: 90%
}
.field-service-dispatch-software .messageBubble.green {
background: #EDF8F2;
border-color: #D5EDE1;
margin-left: auto;
border-radius: 12px 12px 3px 12px
}
.field-service-dispatch-software .messageBubble strong {
color: var(--navy)
}
.field-service-dispatch-software .changeNotice {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
background: var(--yellowsoft);
border: 1px solid #ECDD9B;
border-radius: 11px;
margin-top: 14px;
font-size: 11px;
line-height: 1.55;
color: #654F14
}
.field-service-dispatch-software .changeNotice .icon2 {
width: 19px;
height: 19px;
flex: 0 0 19px;
margin-top: 1px
}
.field-service-dispatch-software .changeNotice strong {
display: block
}
@media(max-width:1100px) and (min-width:961px) {
.field-service-dispatch-software .dispatchStage .assetPhone {
width: 166px;
top: 292px
}
.field-service-dispatch-software .dispatchStage .lifecycleCard {
width: calc(100% - 181px);
left: 0;
top: 405px
}
.field-service-dispatch-software .dispatchStage .lifecycleBody strong {
font-size: 12px
}
.field-service-dispatch-software .dispatchBoard .boardBrand {
font-size: 13px
}
.field-service-dispatch-software .dispatchBoard .sampleBadge {
font-size: 8px
}
.field-service-dispatch-software .dispatchBoard .boardFooter {
padding-right: 176px
}
.field-service-dispatch-software .dispatchMobile {
grid-template-columns: 166px 1fr;
gap: 12px
}
.field-service-dispatch-software .dispatchLanes {
gap: 6px;
padding: 9px
}
.field-service-dispatch-software .dispatchTicket {
padding: 9px 7px
}
.field-service-dispatch-software .dispatchTicket>strong {
font-size: 11px
}
.field-service-dispatch-software .laneHead {
font-size: 9px
}
}
@media(max-width:960px) {
.field-service-dispatch-software .dispatchStage {
max-width: 600px
}
.field-service-dispatch-software .dispatchVisual {
max-width: 650px
}
.field-service-dispatch-software .dispatchMobile {
grid-template-columns: 205px 1fr
}
.field-service-dispatch-software .dispatchVisual .uiHeading {
font-size: 15px
}
.field-service-dispatch-software .dispatchLanes {
min-height: 0
}
.field-service-dispatch-software .dispatchTicket {
min-height: 157px
}
}
@media(max-width:640px) {
.field-service-dispatch-software .heroVisual.dispatchHero {
min-height: 0;
height: auto
}
.field-service-dispatch-software .assetStage.dispatchStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, .93fr) minmax(0, 1fr);
gap: 16px 12px;
height: auto;
min-height: 0;
max-width: 440px;
align-items: start
}
.field-service-dispatch-software .dispatchStage:before {
display: none
}
.field-service-dispatch-software .dispatchStage .assetTag {
position: static;
grid-column: 1/-1;
justify-self: start;
font-size: 10px;
margin-bottom: -4px
}
.field-service-dispatch-software .dispatchBoard {
position: relative;
grid-column: 1/-1;
top: auto;
left: auto;
width: 100%;
border-radius: 15px;
box-shadow: none
}
.field-service-dispatch-software .dispatchBoard .boardHeader {
padding: 12px
}
.field-service-dispatch-software .dispatchBoard .boardBrand {
font-size: 12px
}
.field-service-dispatch-software .dispatchMap {
height: 215px
}
.field-service-dispatch-software .dispatchBoard .boardFooter {
min-height: 0;
padding: 10px 12px;
font-size: 10px
}
.field-service-dispatch-software .mapLegend {
max-width: none
}
.field-service-dispatch-software .mapLegend span {
font-size: 9px
}
.field-service-dispatch-software .dispatchStage .assetPhone {
position: relative;
top: auto;
right: auto;
width: 100%;
padding: 6px;
border-radius: 25px;
box-shadow: none;
grid-column: 2;
grid-row: 3
}
.field-service-dispatch-software .dispatchStage .phoneScreen {
min-height: 0;
border-radius: 18px
}
.field-service-dispatch-software .dispatchStage .phoneHead strong {
font-size: 11px
}
.field-service-dispatch-software .dispatchStage .phoneHead small {
font-size: 9px
}
.field-service-dispatch-software .dispatchStage .phoneJob {
padding: 9px 7px;
font-size: 9px
}
.field-service-dispatch-software .dispatchStage .phoneJob strong {
font-size: 11px
}
.field-service-dispatch-software .dispatchStage .phoneJob small {
font-size: 9px
}
.field-service-dispatch-software .dispatchStage .phoneBottom {
font-size: 9px;
padding: 7px
}
.field-service-dispatch-software .dispatchStage .phoneAgenda {
padding: 8px
}
.field-service-dispatch-software .dispatchStage .lifecycleCard {
position: relative;
grid-column: 1;
grid-row: 3;
left: auto;
top: auto;
width: 100%;
margin: 17px 0 0;
border-radius: 13px;
box-shadow: none
}
.field-service-dispatch-software .dispatchStage .lifecycleHead {
font-size: 10px;
padding: 11px;
gap: 6px;
align-items: flex-start
}
.field-service-dispatch-software .dispatchStage .lifecycleHead .icon2 {
width: 15px;
height: 15px;
margin-top: 2px
}
.field-service-dispatch-software .dispatchStage .lifecycleBody {
font-size: 11px;
padding: 11px
}
.field-service-dispatch-software .dispatchStage .lifecycleBody strong {
font-size: 13px
}
.field-service-dispatch-software .dispatchVisual .uiHeading {
font-size: 13px
}
.field-service-dispatch-software .dispatchVisual .uiSub {
font-size: 9px
}
.field-service-dispatch-software .dispatchToolbar {
padding: 11px;
font-size: 10px
}
.field-service-dispatch-software .dispatchLanes {
gap: 7px;
padding: 10px
}
.field-service-dispatch-software .dispatchTicket>strong {
font-size: 11px
}
.field-service-dispatch-software .dispatchTicket>small {
font-size: 9px
}
.field-service-dispatch-software .dispatchTicket {
padding: 10px 7px
}
.field-service-dispatch-software .ticketOwner {
font-size: 9px
}
.field-service-dispatch-software .laneHead {
font-size: 9px
}
.field-service-dispatch-software .assignmentNote {
font-size: 11px
}
.field-service-dispatch-software .routeMap {
height: 204px
}
.field-service-dispatch-software .routeStop {
padding: 11px;
gap: 8px
}
.field-service-dispatch-software .routeStop strong {
font-size: 11px
}
.field-service-dispatch-software .routeStop small {
font-size: 10px
}
.field-service-dispatch-software .dispatchMobile {
grid-template-columns: 166px minmax(0, 1fr);
gap: 12px
}
.field-service-dispatch-software .dispatchMobile .phoneMockInner {
padding: 11px
}
.field-service-dispatch-software .mobileJobTitle {
font-size: 14px
}
.field-service-dispatch-software .fieldEvent {
padding: 12px 10px
}
.field-service-dispatch-software .fieldEvent strong {
font-size: 11px
}
.field-service-dispatch-software .fieldEvent span {
font-size: 10px
}
.field-service-dispatch-software .fieldEvent small {
font-size: 9px
}
.field-service-dispatch-software .messagePanel {
padding: 14px
}
.field-service-dispatch-software .messageBubble {
max-width: 96%;
font-size: 12px
}
.field-service-dispatch-software .changeNotice {
font-size: 11px
}
.field-service-dispatch-software .dispatchVisual figcaption {
font-size: 10px
}
.field-service-dispatch-software .uiFooter {
font-size: 10px
}
}
@media(max-width:430px) {
.field-service-dispatch-software .dispatchLanes {
grid-template-columns: 1fr;
gap: 12px
}
.field-service-dispatch-software .laneHead {
font-size: 11px;
padding-bottom: 7px
}
.field-service-dispatch-software .dispatchTicket {
min-height: 0;
padding: 12px;
border-top-width: 1px;
border-left-width: 3px;
border-left-color: var(--brand)
}
.field-service-dispatch-software .dispatchTicket.urgent {
border-top-color: var(--line);
border-left-color: #DDA500
}
.field-service-dispatch-software .dispatchTicket.done {
border-top-color: var(--line);
border-left-color: var(--green)
}
.field-service-dispatch-software .dispatchTicket>strong {
font-size: 13px
}
.field-service-dispatch-software .dispatchTicket>small {
font-size: 11px;
min-height: 0
}
.field-service-dispatch-software .ticketCode {
font-size: 10px
}
.field-service-dispatch-software .ticketOwner {
font-size: 11px;
margin-top: 8px;
padding-top: 8px
}
.field-service-dispatch-software .ticketOwner .avatar {
width: 22px;
height: 22px;
flex-basis: 22px;
font-size: 8px
}
.field-service-dispatch-software .dispatchMobile {
grid-template-columns: 1fr
}
.field-service-dispatch-software .dispatchMobile .phoneMock {
width: 209px;
margin: 0 auto
}
.field-service-dispatch-software .dispatchMobile .phoneMockInner {
padding: 14px
}
.field-service-dispatch-software .fieldTimeline {
grid-template-columns: 1fr
}
.field-service-dispatch-software .fieldEvent {
padding: 13px
}
.field-service-dispatch-software .fieldEvent strong {
font-size: 13px
}
.field-service-dispatch-software .fieldEvent span {
font-size: 11px
}
.field-service-dispatch-software .fieldEvent small {
font-size: 10px
}
.field-service-dispatch-software .mobileMeta,
.field-service-dispatch-software .mobileCheck,
.field-service-dispatch-software .mobileJobNote {
font-size: 11px
}
.field-service-dispatch-software .mobileTools span {
font-size: 9px
}
}
@media(max-width:360px) {
.field-service-dispatch-software .dispatchStage .lifecycleHead {
font-size: 9px;
padding: 9px
}
.field-service-dispatch-software .dispatchStage .lifecycleBody {
font-size: 10px;
padding: 10px
}
.field-service-dispatch-software .dispatchStage .lifecycleBody strong {
font-size: 12px
}
.field-service-dispatch-software .dispatchStage .phoneHead strong {
font-size: 10px
}
.field-service-dispatch-software .dispatchStage .phoneJob strong {
font-size: 10px
}
.field-service-dispatch-software .dispatchStage .phoneJob small {
font-size: 8px
}
.field-service-dispatch-software .dispatchStage .phoneBottom {
font-size: 8px
}
.field-service-dispatch-software .dispatchStage .sampleBadge {
font-size: 8px
}
.field-service-dispatch-software .dispatchStage .boardBrand {
font-size: 11px
}
.field-service-dispatch-software .dispatchMap {
height: 200px
}
.field-service-dispatch-software .mapLegend {
gap: 4px
}
.field-service-dispatch-software .mapLegend span {
font-size: 8px;
padding: 5px
}
.field-service-dispatch-software .routeStop {
grid-template-columns: 24px 1fr auto;
gap: 6px
}
.field-service-dispatch-software .field-service-dispatch-software .routeStop>span:last-child {
font-size: 9px
}
}  .voip-phone-system-field-service .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.voip-phone-system-field-service .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.voip-phone-system-field-service .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.voip-phone-system-field-service .btn:hover {
transform: translateY(-2px)
}
.voip-phone-system-field-service .btn.black {
background: #0b0b0b;
color: #fff
}
.voip-phone-system-field-service .btn.black:hover {
background: #292929
}
.voip-phone-system-field-service .btn.yellow {
background: var(--yellow);
color: #000
}
.voip-phone-system-field-service .btn.yellow:hover {
background: #FFD454
}
.voip-phone-system-field-service .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.voip-phone-system-field-service .btn .icon {
width: 17px;
height: 17px
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.voip-phone-system-field-service .dark a:focus-visible,
.voip-phone-system-field-service .final a:focus-visible {
outline-color: var(--yellow)
}
.voip-phone-system-field-service .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.voip-phone-system-field-service .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.voip-phone-system-field-service .soft {
background: var(--sky2)
}
.voip-phone-system-field-service .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.voip-phone-system-field-service .dark h2,
.voip-phone-system-field-service .dark h3 {
color: #fff
}
.voip-phone-system-field-service .dark p {
color: #D6D6D6
}
.voip-phone-system-field-service .dark .ey {
background: var(--yellow)
}
.voip-phone-system-field-service .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.voip-phone-system-field-service .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.voip-phone-system-field-service .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.voip-phone-system-field-service .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.voip-phone-system-field-service .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.voip-phone-system-field-service .textLink .icon {
width: 16px;
height: 16px
}
.voip-phone-system-field-service .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.voip-phone-system-field-service .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.voip-phone-system-field-service .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.voip-phone-system-field-service .skipLink:focus {
top: 12px
} .voip-phone-system-field-service .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.voip-phone-system-field-service .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.voip-phone-system-field-service .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.voip-phone-system-field-service .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.voip-phone-system-field-service .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.voip-phone-system-field-service .logo.adobe {
font-size: 20px
}
.voip-phone-system-field-service .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .voip-phone-system-field-service .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.voip-phone-system-field-service .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.voip-phone-system-field-service .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.voip-phone-system-field-service .outcome:nth-child(2):before {
background: var(--yellow)
}
.voip-phone-system-field-service .outcome:nth-child(3):before {
background: var(--green)
}
.voip-phone-system-field-service .outcome:nth-child(4):before {
background: var(--purple)
}
.voip-phone-system-field-service .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.voip-phone-system-field-service .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.voip-phone-system-field-service .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .voip-phone-system-field-service .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.voip-phone-system-field-service .feature.reverse .visual {
order: -1
}
.voip-phone-system-field-service .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.voip-phone-system-field-service .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.voip-phone-system-field-service .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.voip-phone-system-field-service .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.voip-phone-system-field-service .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.voip-phone-system-field-service .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.voip-phone-system-field-service .visual>* {
position: relative;
z-index: 2
}
.voip-phone-system-field-service .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.voip-phone-system-field-service .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.voip-phone-system-field-service .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.voip-phone-system-field-service .uiHeading .icon {
width: 19px;
height: 19px
}
.voip-phone-system-field-service .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.voip-phone-system-field-service .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.voip-phone-system-field-service .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.voip-phone-system-field-service .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.voip-phone-system-field-service .pill.green {
background: var(--greenbg);
color: #116746
}
.voip-phone-system-field-service .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.voip-phone-system-field-service .pill.gray {
background: #F0F3F5;
color: #586C79
}
.voip-phone-system-field-service .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .voip-phone-system-field-service .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.voip-phone-system-field-service .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.voip-phone-system-field-service .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.voip-phone-system-field-service .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.voip-phone-system-field-service .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.voip-phone-system-field-service .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.voip-phone-system-field-service .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.voip-phone-system-field-service .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.voip-phone-system-field-service .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.voip-phone-system-field-service .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .voip-phone-system-field-service .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.voip-phone-system-field-service .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.voip-phone-system-field-service .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.voip-phone-system-field-service .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.voip-phone-system-field-service .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.voip-phone-system-field-service .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.voip-phone-system-field-service .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .voip-phone-system-field-service .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.voip-phone-system-field-service .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.voip-phone-system-field-service .featureCard:hover {
transform: translateY(-3px)
}
.voip-phone-system-field-service .featureIcon,
.voip-phone-system-field-service .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.voip-phone-system-field-service .featureIcon .icon,
.voip-phone-system-field-service .useIcon .icon {
width: 22px;
height: 22px
}
.voip-phone-system-field-service .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.voip-phone-system-field-service .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .voip-phone-system-field-service .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.voip-phone-system-field-service .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.voip-phone-system-field-service .useCase h3 {
font-size: 20px
}
.voip-phone-system-field-service .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.voip-phone-system-field-service .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.voip-phone-system-field-service .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.voip-phone-system-field-service .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.voip-phone-system-field-service .review h3 {
font-size: 22px
}
.voip-phone-system-field-service .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.voip-phone-system-field-service .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.voip-phone-system-field-service .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.voip-phone-system-field-service .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.voip-phone-system-field-service .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.voip-phone-system-field-service .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.voip-phone-system-field-service .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.voip-phone-system-field-service .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.voip-phone-system-field-service .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .voip-phone-system-field-service .faq {
max-width: 900px
}
.voip-phone-system-field-service .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.voip-phone-system-field-service .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.voip-phone-system-field-service .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.voip-phone-system-field-service .faq summary::marker {
color: var(--navy)
}
.voip-phone-system-field-service .faq details[open] {
border-color: #A9D3E7
}
.voip-phone-system-field-service .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .voip-phone-system-field-service .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.voip-phone-system-field-service .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.voip-phone-system-field-service .cta h3 {
font-size: 19px
}
.voip-phone-system-field-service .cta.darkCta h3 {
color: #fff
}
.voip-phone-system-field-service .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.voip-phone-system-field-service .cta.darkCta p {
color: #D1D1D1
}
.voip-phone-system-field-service .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.voip-phone-system-field-service .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 0;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: center
}
.voip-phone-system-field-service .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.voip-phone-system-field-service .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.voip-phone-system-field-service .final .ctaBtns {
align-items: stretch
}
.voip-phone-system-field-service .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.voip-phone-system-field-service .reveal {
opacity: 1;
transform: none
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.voip-phone-system-field-service #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.voip-phone-system-field-service #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.voip-phone-system-field-service #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.voip-phone-system-field-service #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__step::before,
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
} figure br {
display: none !important;
}
@media (max-width: 960px) {
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
.voip-phone-system-field-service #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.voip-phone-system-field-service #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.voip-phone-system-field-service #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card,
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.voip-phone-system-field-service #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .voip-phone-system-field-service .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.voip-phone-system-field-service .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.voip-phone-system-field-service .heroGrid>*,
.voip-phone-system-field-service .feature>*,
.voip-phone-system-field-service .aiGrid>* {
min-width: 0
}
.voip-phone-system-field-service .hero h1 {
max-width: 590px
}
.voip-phone-system-field-service .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.voip-phone-system-field-service .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.voip-phone-system-field-service .heroVisual {
position: relative;
min-width: 0
}
.voip-phone-system-field-service .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 182px;
gap: 14px 12px;
align-items: start
}
.voip-phone-system-field-service .assetStage:before {
content: "";
position: absolute;
inset: 60px 0 18px 22px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.voip-phone-system-field-service .assetStage>* {
position: relative;
z-index: 1
}
.voip-phone-system-field-service .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px
}
.voip-phone-system-field-service .callBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 19px;
overflow: hidden
}
.voip-phone-system-field-service .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--line)
}
.voip-phone-system-field-service .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.voip-phone-system-field-service .brandTile {
width: 28px;
height: 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.voip-phone-system-field-service .brandTile .icon {
width: 18px;
height: 18px
}
.voip-phone-system-field-service .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.voip-phone-system-field-service .callLayout {
display: grid;
grid-template-columns: 144px minmax(0, 1fr)
}
.voip-phone-system-field-service .callSidebar {
background: #F7FBFE;
border-right: 1px solid var(--line);
padding: 14px 8px
}
.voip-phone-system-field-service .sidebarTitle {
font-size: 11px;
font-weight: 800;
padding: 0 7px 10px;
color: var(--navy)
}
.voip-phone-system-field-service .recentCall {
padding: 11px 8px;
border: 1px solid transparent;
border-radius: 9px;
margin-bottom: 7px;
line-height: 1.45
}
.voip-phone-system-field-service .recentCall.active {
border-color: #BFE1F0;
background: #EAF8FF
}
.voip-phone-system-field-service .recentCall strong {
font-size: 11px;
display: block;
color: var(--ink)
}
.voip-phone-system-field-service .recentCall small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 4px
}
.voip-phone-system-field-service .callType {
font-size: 8px;
font-weight: 800;
color: #336983;
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 5px
}
.voip-phone-system-field-service .callType .icon {
width: 12px;
height: 12px
}
.voip-phone-system-field-service .callType.missed {
color: #A63434
}
.voip-phone-system-field-service .callDetail {
padding: 18px;
min-width: 0
}
.voip-phone-system-field-service .callerHeader {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 17px
}
.voip-phone-system-field-service .callerAvatar {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: grid;
place-items: center;
background: #E5F4FB;
color: var(--navy);
border-radius: 50%;
font-size: 12px;
font-weight: 850
}
.voip-phone-system-field-service .callerHeader strong {
display: block;
font-size: 14px;
line-height: 1.4
}
.voip-phone-system-field-service .callerHeader small {
display: block;
color: var(--muted);
font-size: 10px;
margin-top: 3px
}
.voip-phone-system-field-service .callStatus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border: 1px solid #C7E8DB;
background: var(--greenbg);
border-radius: 9px;
font-size: 10px;
color: #116746;
font-weight: 750;
gap: 10px
}
.voip-phone-system-field-service .statusDot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
margin-right: 6px
}
.voip-phone-system-field-service .callMeta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 13px
}
.voip-phone-system-field-service .callMeta div {
padding: 11px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff
}
.voip-phone-system-field-service .callMeta small {
display: block;
font-size: 9px;
color: var(--muted)
}
.voip-phone-system-field-service .callMeta strong {
font-size: 10px;
display: block;
line-height: 1.4;
margin-top: 4px
}
.voip-phone-system-field-service .callNote {
padding: 12px;
border: 1px solid #EADBA1;
background: #FFFBEA;
border-radius: 9px;
margin-top: 12px
}
.voip-phone-system-field-service .callNote strong {
font-size: 10px;
display: flex;
align-items: center;
gap: 6px
}
.voip-phone-system-field-service .callNote .icon {
width: 14px;
height: 14px;
color: #8C6911
}
.voip-phone-system-field-service .callNote p {
font-size: 11px;
color: #615436;
line-height: 1.65;
margin-top: 5px
}
.voip-phone-system-field-service .callAction {
margin-top: 13px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
font-weight: 800
}
.voip-phone-system-field-service .callAction span {
padding: 8px 11px;
border: 1px solid var(--line);
border-radius: 7px;
display: flex;
align-items: center;
gap: 6px
}
.voip-phone-system-field-service .callAction span:first-child {
background: var(--yellow);
border-color: var(--yellow);
color: #111
}
.voip-phone-system-field-service .callAction .icon {
width: 14px;
height: 14px
}
.voip-phone-system-field-service .boardFooter {
padding: 11px 15px;
min-height: 46px;
font-size: 9px;
line-height: 1.5;
background: var(--sky2);
border-top: 1px solid var(--line);
color: #536F82;
display: flex;
align-items: center;
gap: 7px;
padding-right: 185px
}
.voip-phone-system-field-service .boardFooter .icon {
height: 14px;
width: 14px;
color: var(--green)
}
.voip-phone-system-field-service .callContext {
grid-column: 1;
align-self: start;
background: #101922;
border: 1px solid #2A404F;
border-radius: 15px;
color: #fff;
overflow: hidden
}
.voip-phone-system-field-service .contextHead {
font-size: 10px;
font-weight: 800;
padding: 11px 13px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #2E404B
}
.voip-phone-system-field-service .contextHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.voip-phone-system-field-service .contextBody {
padding: 13px
}
.voip-phone-system-field-service .contextBody strong {
display: block;
font-size: 14px;
line-height: 1.4
}
.voip-phone-system-field-service .contextBody p {
color: #C8D7E1;
font-size: 11px;
line-height: 1.6;
margin-top: 6px
}
.voip-phone-system-field-service .contextTags {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 11px
}
.voip-phone-system-field-service .contextTags span {
font-size: 8px;
border: 1px solid #415663;
padding: 4px 6px;
border-radius: 5px;
color: #DBE8EF
}
.voip-phone-system-field-service .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -60px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.voip-phone-system-field-service .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.voip-phone-system-field-service .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.voip-phone-system-field-service .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.voip-phone-system-field-service .phoneHead {
padding: 12px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.voip-phone-system-field-service .phoneHead strong {
font-size: 11px;
display: block
}
.voip-phone-system-field-service .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 4px
}
.voip-phone-system-field-service .phoneCaller {
padding: 19px 11px 14px;
text-align: center
}
.voip-phone-system-field-service .phoneCaller .callerAvatar {
margin: 0 auto 10px;
width: 52px;
height: 52px;
font-size: 17px
}
.voip-phone-system-field-service .phoneCaller>strong {
display: block;
font-size: 14px;
line-height: 1.3
}
.voip-phone-system-field-service .phoneCaller>small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 6px
}
.voip-phone-system-field-service .incomingLabel {
display: block;
font-size: 8px;
letter-spacing: .08em;
text-transform: uppercase;
color: #387451;
margin-bottom: 11px;
font-weight: 800
}
.voip-phone-system-field-service .phoneControls {
display: flex;
justify-content: center;
gap: 26px;
margin: 5px 8px 14px
}
.voip-phone-system-field-service .phoneControls>span {
font-size: 8px;
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
color: #576D7B
}
.voip-phone-system-field-service .phoneControls i {
display: grid;
place-items: center;
width: 33px;
height: 33px;
border-radius: 50%;
background: #FDEAEA;
color: #AD3131
}
.voip-phone-system-field-service .phoneControls .accept {
background: #13835E;
color: #fff
}
.voip-phone-system-field-service .phoneControls .icon {
width: 17px;
height: 17px
}
.voip-phone-system-field-service .phoneBottom {
font-size: 8px;
line-height: 1.5;
text-align: center;
color: var(--navy);
padding: 9px 8px;
background: #EFF8FD;
border-top: 1px solid var(--line)
}
.voip-phone-system-field-service .diagramCaption {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
text-align: center;
margin: 12px 0 0
} .voip-phone-system-field-service .voiceHub {
background: #0D2637;
color: #fff;
padding: 20px;
border: 1px solid #264759;
border-radius: 14px;
text-align: center
}
.voip-phone-system-field-service .voiceHub .hubIcon {
display: grid;
place-items: center;
margin: 0 auto 10px;
background: var(--yellow);
color: #151515;
width: 40px;
height: 40px;
border-radius: 12px
}
.voip-phone-system-field-service .voiceHub strong {
font-size: 20px;
display: block;
line-height: 1.3
}
.voip-phone-system-field-service .voiceHub small {
font-size: 11px;
display: block;
color: #CCDEE9;
margin-top: 7px
}
.voip-phone-system-field-service .deviceBranches {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding-top: 28px;
position: relative
}
.voip-phone-system-field-service .deviceBranches:before {
content: "";
position: absolute;
top: 0;
left: 50%;
height: 15px;
border-left: 1px solid #96BECE
}
.voip-phone-system-field-service .deviceCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 15px;
text-align: center;
position: relative
}
.voip-phone-system-field-service .deviceCard:before {
content: "";
position: absolute;
top: -15px;
left: 50%;
height: 14px;
border-left: 1px solid #96BECE
}
.voip-phone-system-field-service .deviceBranches:after {
content: "";
position: absolute;
top: 14px;
left: 25%;
right: 25%;
border-top: 1px solid #96BECE
}
.voip-phone-system-field-service .deviceCard .deviceIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin: 0 auto 11px;
background: var(--sky);
border-radius: 12px;
color: var(--navy)
}
.voip-phone-system-field-service .deviceCard .deviceIcon .icon {
width: 26px;
height: 26px
}
.voip-phone-system-field-service .deviceCard strong {
font-size: 13px;
display: block
}
.voip-phone-system-field-service .deviceCard small {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 6px
}
.voip-phone-system-field-service .deviceCard .pill {
margin-top: 11px
}
.voip-phone-system-field-service .infoFoot {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
color: #526C7C;
padding: 13px 0 0;
line-height: 1.6
}
.voip-phone-system-field-service .infoFoot .icon {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 1px
} .voip-phone-system-field-service .routingHeader {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
border-radius: 12px;
background: #0D2637;
color: #fff
}
.voip-phone-system-field-service .routingHeader>.icon {
color: var(--yellow);
width: 25px;
height: 25px
}
.voip-phone-system-field-service .routingHeader strong {
font-size: 14px;
display: block;
line-height: 1.4
}
.voip-phone-system-field-service .routingHeader small {
font-size: 10px;
display: block;
color: #C3D8E5;
margin-top: 3px
}
.voip-phone-system-field-service .scheduleTabs {
display: flex;
gap: 8px;
margin: 15px 0 11px
}
.voip-phone-system-field-service .scheduleTabs span {
padding: 7px 11px;
border-radius: 7px;
font-size: 10px;
border: 1px solid var(--line);
background: #fff;
color: var(--muted)
}
.voip-phone-system-field-service .scheduleTabs .active {
background: var(--yellowsoft);
border-color: #EAD487;
color: #72570F;
font-weight: 800
}
.voip-phone-system-field-service .ivrMenu {
display: grid;
gap: 9px
}
.voip-phone-system-field-service .ivrOption {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 18px minmax(85px, .65fr);
gap: 10px;
align-items: center;
background: #fff;
padding: 12px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 11px
}
.voip-phone-system-field-service .ivrKey {
background: var(--sky);
color: var(--navy);
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 8px;
font-size: 12px;
font-weight: 850
}
.voip-phone-system-field-service .ivrOption .icon {
width: 16px;
height: 16px;
color: #76A1B6
}
.voip-phone-system-field-service .ivrOption strong {
font-size: 11px;
line-height: 1.5
}
.voip-phone-system-field-service .ivrDest {
font-size: 10px;
color: var(--muted)
}
.voip-phone-system-field-service .afterHours {
padding: 13px;
margin-top: 12px;
background: var(--yellowsoft);
border: 1px solid #ECD98D;
border-radius: 11px;
display: flex;
gap: 10px;
align-items: flex-start
}
.voip-phone-system-field-service .afterHours>.icon {
width: 18px;
height: 18px;
color: #89691A
}
.voip-phone-system-field-service .afterHours strong {
font-size: 11px;
display: block
}
.voip-phone-system-field-service .afterHours p {
margin-top: 4px;
color: #6F5C29;
font-size: 10px;
line-height: 1.6
} .voip-phone-system-field-service .logTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 14px;
background: var(--sky2);
border-bottom: 1px solid var(--line);
gap: 10px
}
.voip-phone-system-field-service .logTop strong {
font-size: 12px
}
.voip-phone-system-field-service .logTop>span {
font-size: 9px;
color: var(--muted)
}
.voip-phone-system-field-service .logRow {
display: grid;
grid-template-columns: 29px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 13px 14px;
border-bottom: 1px solid #E7EEF3
}
.voip-phone-system-field-service .logRow:last-child {
border-bottom: 0
}
.voip-phone-system-field-service .logRow.active {
background: #F4FAFE
}
.voip-phone-system-field-service .logIcon {
display: grid;
place-items: center;
background: var(--greenbg);
color: var(--green);
height: 29px;
width: 29px;
border-radius: 9px
}
.voip-phone-system-field-service .logIcon.red {
color: #A53232;
background: #FFF0F0
}
.voip-phone-system-field-service .logIcon.blue {
background: var(--sky);
color: #14658D
}
.voip-phone-system-field-service .logIcon .icon {
height: 16px;
width: 16px
}
.voip-phone-system-field-service .logRow strong {
font-size: 11px;
display: block
}
.voip-phone-system-field-service .logRow small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 2px
}
.voip-phone-system-field-service .logTime {
text-align: right;
font-size: 10px;
color: #536D7D
}
.voip-phone-system-field-service .logTime span {
display: block;
font-size: 9px;
margin-top: 3px
}
.voip-phone-system-field-service .recordPanel {
margin-top: 13px;
background: #fff;
padding: 15px;
border: 1px solid var(--line);
border-radius: 12px
}
.voip-phone-system-field-service .recordTitle {
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px
}
.voip-phone-system-field-service .recordTitle>span {
font-size: 9px;
color: var(--muted);
font-weight: 500
}
.voip-phone-system-field-service .recording {
display: flex;
align-items: center;
gap: 11px;
padding: 12px 0
}
.voip-phone-system-field-service .playCircle {
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 50%;
background: var(--yellow);
display: grid;
place-items: center;
color: #132530
}
.voip-phone-system-field-service .playCircle .icon {
width: 13px;
height: 13px
}
.voip-phone-system-field-service .waveform {
display: flex;
align-items: center;
gap: 3px;
height: 30px;
flex: 1;
min-width: 0;
overflow: hidden
}
.voip-phone-system-field-service .waveform i {
display: block;
width: 3px;
flex: 1;
max-width: 6px;
border-radius: 3px;
background: #4F9CBF;
height: var(--h, 45%)
}
.voip-phone-system-field-service .recording>small {
font-size: 9px;
color: var(--muted);
white-space: nowrap
}
.voip-phone-system-field-service .recordNote {
font-size: 11px;
color: #516D7D;
line-height: 1.65;
padding: 11px;
background: var(--sky2);
border-radius: 8px
}
.voip-phone-system-field-service .recordNote b {
color: var(--navy)
} .voip-phone-system-field-service .voiceMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px
}
.voip-phone-system-field-service .voiceMetric {
padding: 14px 11px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff
}
.voip-phone-system-field-service .voiceMetric strong {
display: block;
font-size: 23px;
color: var(--navy);
line-height: 1.3
}
.voip-phone-system-field-service .voiceMetric span {
display: block;
color: var(--muted);
font-size: 10px;
margin-top: 5px
}
.voip-phone-system-field-service .voiceMetric.yellow {
border-top: 3px solid var(--yellow)
}
.voip-phone-system-field-service .chartPanel {
margin-top: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
padding: 16px
}
.voip-phone-system-field-service .chartHead {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 12px;
font-weight: 800
}
.voip-phone-system-field-service .chartHead span {
font-size: 9px;
color: var(--muted);
font-weight: 500
}
.voip-phone-system-field-service .voiceBars {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
margin-top: 18px;
height: 162px;
align-items: end
}
.voip-phone-system-field-service .voiceBar {
height: 100%;
display: grid;
grid-template-rows: 1fr auto;
gap: 8px;
align-items: end;
text-align: center;
min-width: 0
}
.voip-phone-system-field-service .barTrack {
display: flex;
align-items: end;
justify-content: center;
height: 100%;
border-bottom: 1px solid #D9E8F1;
background: repeating-linear-gradient(to top, transparent 0, transparent 30px, #F1F6F9 30px, #F1F6F9 31px)
}
.voip-phone-system-field-service .barTrack i {
display: flex;
align-items: flex-start;
justify-content: center;
width: 72%;
height: var(--bar, 60%);
background: #BCE8FA;
border: 1px solid #90D3EF;
border-radius: 6px 6px 0 0;
font-style: normal;
padding-top: 6px;
font-size: 10px;
color: var(--navy);
font-weight: 800
}
.voip-phone-system-field-service .voiceBar:nth-child(3) .barTrack i {
background: var(--yellow);
border-color: #E8B51F;
color: #3D310A
}
.voip-phone-system-field-service .voiceBar>span {
font-size: 10px;
color: #536E7E
}
.voip-phone-system-field-service .insightNote {
margin-top: 13px;
border-left: 3px solid var(--brand);
padding: 11px 13px;
background: #fff;
border-radius: 0 10px 10px 0;
color: #48677A;
font-size: 11px;
line-height: 1.65
}
.voip-phone-system-field-service .insightNote strong {
color: var(--navy)
} @media(max-width:1100px) and (min-width:961px) {
.voip-phone-system-field-service .heroGrid {
gap: 28px
}
.voip-phone-system-field-service .hero .lead {
font-size: 17px
}
.voip-phone-system-field-service .callLayout {
grid-template-columns: 116px minmax(0, 1fr)
}
.voip-phone-system-field-service .callDetail {
padding: 14px
}
.voip-phone-system-field-service .recentCall {
padding: 10px 6px
}
.voip-phone-system-field-service .recentCall strong {
font-size: 10px
}
.voip-phone-system-field-service .callMeta {
gap: 7px
}
.voip-phone-system-field-service .callMeta div {
padding: 9px
}
.voip-phone-system-field-service .callAction span {
padding: 7px
}
.voip-phone-system-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 158px;
gap: 12px 10px
}
.voip-phone-system-field-service .boardFooter {
padding-right: 162px
}
.voip-phone-system-field-service .contextTags {
display: none
}
.voip-phone-system-field-service .visual {
padding: 18px
}
.voip-phone-system-field-service .ivrOption {
gap: 8px;
grid-template-columns: 28px minmax(0, 1fr) 16px 85px
}
}
@media(max-width:960px) {
.voip-phone-system-field-service .heroGrid,
.voip-phone-system-field-service .feature,
.voip-phone-system-field-service .aiGrid,
.voip-phone-system-field-service .final {
grid-template-columns: 1fr
}
.voip-phone-system-field-service .heroGrid {
gap: 36px
}
.voip-phone-system-field-service .hero h1 {
max-width: 800px
}
.voip-phone-system-field-service .hero .lead {
max-width: 750px
}
.voip-phone-system-field-service .heroVisual {
width: 100%;
max-width: 640px;
margin: 0 auto
}
.voip-phone-system-field-service .assetStage {
margin: auto
}
.voip-phone-system-field-service .feature.reverse .visual {
order: 0
}
.voip-phone-system-field-service .feature {
gap: 30px
}
.voip-phone-system-field-service .feature>div:first-child {
max-width: 800px
}
.voip-phone-system-field-service .outcomes,
.voip-phone-system-field-service .featureGrid,
.voip-phone-system-field-service .connectedGrid,
.voip-phone-system-field-service .useCases {
grid-template-columns: repeat(2, 1fr)
}
.voip-phone-system-field-service .logos {
grid-template-columns: repeat(3, 1fr)
}
.voip-phone-system-field-service .reviews {
grid-template-columns: 1fr
}
.voip-phone-system-field-service .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.voip-phone-system-field-service .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.voip-phone-system-field-service .ratingItem:nth-child(2) {
border: 0
}
.voip-phone-system-field-service .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.voip-phone-system-field-service .final .btn {
min-width: 195px
}
.voip-phone-system-field-service .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.voip-phone-system-field-service .aiGrid {
gap: 30px
}
.voip-phone-system-field-service .aiMini {
max-width: 760px
}
.voip-phone-system-field-service .promptBox {
width: 100%
}
}
@media(max-width:767px) {
.visual-content {
order: 2;
}
.field-service-invoicing-software .final {
border-radius: 0;
}
.voip-phone-system-field-service .wrap {
width: calc(100% - 24px)
}
section {
padding: 56px 0
}
.voip-phone-system-field-service .hero {
padding: 32px 0 42px
}
.voip-phone-system-field-service .lead {
font-size: 17px
}
.voip-phone-system-field-service .sectionHead p {
font-size: 16px
}
.voip-phone-system-field-service .sectionHead {
margin-bottom: 28px
}
.voip-phone-system-field-service .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.voip-phone-system-field-service .heroGrid {
gap: 26px
}
.voip-phone-system-field-service .hero .actions {
gap: 8px
}
.voip-phone-system-field-service .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.voip-phone-system-field-service .micro {
font-size: 11px
}
.voip-phone-system-field-service .heroPills {
gap: 6px
}
.voip-phone-system-field-service .heroPills span {
font-size: 9px
}
.voip-phone-system-field-service .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.voip-phone-system-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 164px;
gap: 12px 10px
}
.voip-phone-system-field-service .assetTag {
font-size: 9px
}
.voip-phone-system-field-service .boardHeader {
padding: 13px
}
.voip-phone-system-field-service .boardBrand {
font-size: 12px
}
.voip-phone-system-field-service .sampleBadge {
font-size: 7px
}
.voip-phone-system-field-service .callLayout {
grid-template-columns: 108px minmax(0, 1fr)
}
.voip-phone-system-field-service .callSidebar {
padding: 12px 6px
}
.voip-phone-system-field-service .recentCall {
padding: 10px 6px
}
.voip-phone-system-field-service .recentCall strong {
font-size: 10px
}
.voip-phone-system-field-service .recentCall small {
font-size: 8px
}
.voip-phone-system-field-service .sidebarTitle {
font-size: 10px;
padding: 0 5px 10px
}
.voip-phone-system-field-service .callDetail {
padding: 13px
}
.voip-phone-system-field-service .callMeta div {
padding: 9px
}
.voip-phone-system-field-service .callMeta {
gap: 8px
}
.voip-phone-system-field-service .callMeta strong {
font-size: 10px
}
.voip-phone-system-field-service .callMeta small {
font-size: 8px
}
.voip-phone-system-field-service .callAction {
font-size: 9px
}
.voip-phone-system-field-service .callAction span {
padding: 7px 8px
}
.voip-phone-system-field-service .callerHeader {
gap: 8px
}
.voip-phone-system-field-service .callerHeader strong {
font-size: 13px
}
.voip-phone-system-field-service .callStatus {
font-size: 9px;
padding: 9px
}
.voip-phone-system-field-service .callNote {
padding: 11px
}
.voip-phone-system-field-service .callNote p {
font-size: 10px
}
.voip-phone-system-field-service .boardFooter {
padding: 10px 12px;
padding-right: 172px;
min-height: 54px
}
.voip-phone-system-field-service .assetPhone {
margin-top: -45px;
border-radius: 24px
}
.voip-phone-system-field-service .phoneScreen {
border-radius: 18px
}
.voip-phone-system-field-service .phoneHead {
padding: 10px 9px
}
.voip-phone-system-field-service .phoneHead strong {
font-size: 10px
}
.voip-phone-system-field-service .phoneHead small {
font-size: 8px
}
.voip-phone-system-field-service .phoneCaller {
padding: 17px 9px 12px
}
.voip-phone-system-field-service .phoneCaller>strong {
font-size: 13px
}
.voip-phone-system-field-service .phoneCaller .callerAvatar {
width: 46px;
height: 46px
}
.voip-phone-system-field-service .phoneBottom {
font-size: 8px
}
.voip-phone-system-field-service .contextHead {
padding: 10px;
font-size: 9px;
gap: 6px
}
.voip-phone-system-field-service .contextBody {
padding: 11px
}
.voip-phone-system-field-service .contextBody strong {
font-size: 12px
}
.voip-phone-system-field-service .contextBody p {
font-size: 10px
}
.voip-phone-system-field-service .contextTags {
display: none
}
.voip-phone-system-field-service .diagramCaption {
font-size: 9px
}
.voip-phone-system-field-service .trust {
padding: 23px 0
}
.voip-phone-system-field-service .trustLabel {
font-size: 12px
}
.voip-phone-system-field-service .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.voip-phone-system-field-service .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.voip-phone-system-field-service .logo.dhl {
font-size: 19px
}
.voip-phone-system-field-service .logo.adobe {
font-size: 17px
}
.voip-phone-system-field-service .logo.golden {
font-size: 8px
}
.voip-phone-system-field-service .fl,
.voip-phone-system-field-service .outcomes,
.voip-phone-system-field-service .featureGrid,
.voip-phone-system-field-service .connectedGrid,
.voip-phone-system-field-service .useCases {
grid-template-columns: 1fr
}
.voip-phone-system-field-service .fi {
font-size: 14px
}
.voip-phone-system-field-service .outcome {
padding: 21px
}
.voip-phone-system-field-service .outcome strong {
margin-top: 12px
}
.voip-phone-system-field-service .outcome span {
font-size: 14px
}
.voip-phone-system-field-service .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.voip-phone-system-field-service .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.voip-phone-system-field-service .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.voip-phone-system-field-service .uiSub {
font-size: 9px
}
.voip-phone-system-field-service .deviceCard {
padding: 15px 11px
}
.voip-phone-system-field-service .deviceCard small {
font-size: 10px
}
.voip-phone-system-field-service .deviceBranches {
gap: 10px
}
.voip-phone-system-field-service .voiceHub strong {
font-size: 19px
}
.voip-phone-system-field-service .voiceHub {
padding: 18px
}
.voip-phone-system-field-service .ivrOption {
grid-template-columns: 27px minmax(0, 1fr) 14px minmax(72px, .65fr);
gap: 8px;
padding: 11px
}
.voip-phone-system-field-service .ivrKey {
width: 27px;
height: 27px
}
.voip-phone-system-field-service .ivrOption strong {
font-size: 10px
}
.voip-phone-system-field-service .ivrDest {
font-size: 9px
}
.voip-phone-system-field-service .afterHours p {
font-size: 11px
}
.voip-phone-system-field-service .voiceBars {
gap: 13px;
height: 151px
}
.voip-phone-system-field-service .voiceMetrics {
gap: 8px
}
.voip-phone-system-field-service .voiceMetric {
padding: 12px 9px
}
.voip-phone-system-field-service .voiceMetric strong {
font-size: 22px
}
.voip-phone-system-field-service .voiceMetric span {
font-size: 9px
}
.voip-phone-system-field-service .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.voip-phone-system-field-service .aiMini div {
padding: 16px
}
.voip-phone-system-field-service .aiMini strong {
font-size: 14px
}
.voip-phone-system-field-service .aiMini span {
font-size: 13px
}
.voip-phone-system-field-service .promptBox {
padding: 18px;
border-radius: 17px
}
.voip-phone-system-field-service .prompt {
font-size: 13px;
padding: 13px
}
.voip-phone-system-field-service .promptHead {
font-size: 19px
}
.voip-phone-system-field-service .promptFoot {
font-size: 10px !important
}
.voip-phone-system-field-service .connectedCard {
padding: 22px
}
.voip-phone-system-field-service .connectedCard p,
.voip-phone-system-field-service .featureCard p,
.voip-phone-system-field-service .useCase p {
font-size: 14px
}
.voip-phone-system-field-service .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.voip-phone-system-field-service .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.voip-phone-system-field-service .ratingItem {
border: 0
}
.voip-phone-system-field-service .ratingLead {
margin-bottom: 3px
}
.voip-phone-system-field-service .review p {
font-size: 14px
}
.voip-phone-system-field-service .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.voip-phone-system-field-service .ctaBtns {
width: 100%
}
.voip-phone-system-field-service .ctaBtns .btn {
flex: 1
}
.voip-phone-system-field-service .cta p {
font-size: 14px
}
.voip-phone-system-field-service .final {
padding: 30px 23px;
gap: 25px;
border-radius: 0
}
.voip-phone-system-field-service .final h2 {
font-size: 32px
}
.voip-phone-system-field-service .final p {
font-size: 15px
}
.voip-phone-system-field-service .final .ctaBtns {
flex-direction: column
}
.voip-phone-system-field-service .final .btn {
min-width: 0;
width: 100%
}
.voip-phone-system-field-service .faq details {
padding: 16px
}
.voip-phone-system-field-service .faq summary {
font-size: 14px
}
.voip-phone-system-field-service .faq details p {
font-size: 14px
}
}
@media(max-width:420px) {
.voip-phone-system-field-service .callSidebar {
display: none
}
.voip-phone-system-field-service .callLayout {
grid-template-columns: 1fr
}
.voip-phone-system-field-service .callDetail {
padding: 16px
}
.voip-phone-system-field-service .callerHeader strong {
font-size: 15px
}
.voip-phone-system-field-service .callerHeader small {
font-size: 10px
}
.voip-phone-system-field-service .callMeta small {
font-size: 9px
}
.voip-phone-system-field-service .callMeta strong {
font-size: 11px
}
.voip-phone-system-field-service .callNote p {
font-size: 11px
}
.voip-phone-system-field-service .callNote strong {
font-size: 11px
}
.voip-phone-system-field-service .callStatus {
font-size: 10px
}
.voip-phone-system-field-service .callAction {
font-size: 10px
}
.voip-phone-system-field-service .callAction span {
padding: 9px 11px
}
.voip-phone-system-field-service .deviceCard .pill {
font-size: 8px
}
.voip-phone-system-field-service .ivrOption {
gap: 7px
}
.voip-phone-system-field-service .logRow {
padding: 12px 10px
}
.voip-phone-system-field-service .logTop {
padding: 12px
}
.voip-phone-system-field-service .recordPanel {
padding: 13px
}
.voip-phone-system-field-service .chartPanel {
padding: 13px
}
.voip-phone-system-field-service .barTrack i {
width: 80%
}
}
@media(max-width:360px) {
.voip-phone-system-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 144px;
gap: 10px 8px
}
.voip-phone-system-field-service .contextHead {
font-size: 8px;
padding: 9px;
gap: 5px
}
.voip-phone-system-field-service .contextHead .icon {
width: 14px;
height: 14px
}
.voip-phone-system-field-service .contextBody {
padding: 10px
}
.voip-phone-system-field-service .contextBody strong {
font-size: 11px
}
.voip-phone-system-field-service .contextBody p {
font-size: 9px
}
.voip-phone-system-field-service .phoneHead strong {
font-size: 9px
}
.voip-phone-system-field-service .phoneHead small {
font-size: 7px
}
.voip-phone-system-field-service .phoneCaller>strong {
font-size: 12px
}
.voip-phone-system-field-service .phoneCaller>small {
font-size: 8px
}
.voip-phone-system-field-service .phoneCaller .callerAvatar {
width: 43px;
height: 43px
}
.voip-phone-system-field-service .incomingLabel {
font-size: 7px
}
.voip-phone-system-field-service .phoneBottom {
font-size: 7px
}
.voip-phone-system-field-service .boardFooter {
padding-right: 153px;
font-size: 8px
}
.voip-phone-system-field-service .deviceCard strong {
font-size: 12px
}
.voip-phone-system-field-service .deviceCard small {
font-size: 9px
}
.voip-phone-system-field-service .voiceHub strong {
font-size: 18px
}
.voip-phone-system-field-service .ivrOption {
grid-template-columns: 25px minmax(0, 1fr) 12px 72px;
padding: 10px;
gap: 6px
}
.voip-phone-system-field-service .ivrKey {
width: 25px;
height: 25px
}
.voip-phone-system-field-service .voiceMetric strong {
font-size: 20px
}
.voip-phone-system-field-service .voiceMetric span {
font-size: 8px
}
}
.voip-phone-system-field-service .icon {
margin: 0 !important;
background: transparent !important;
}  .online-booking-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.online-booking-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.online-booking-software .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.online-booking-software .btn:hover {
transform: translateY(-2px)
}
.online-booking-software .btn.black {
background: #0b0b0b;
color: #fff
}
.online-booking-software .btn.black:hover {
background: #292929
}
.online-booking-software .btn.yellow {
background: var(--yellow);
color: #000
}
.online-booking-software .btn.yellow:hover {
background: #FFD454
}
.online-booking-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.online-booking-software .btn .icon2 {
width: 17px;
height: 17px
}
.online-booking-software a:focus-visible,
summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.online-booking-software .dark a:focus-visible,
.online-booking-software .final a:focus-visible {
outline-color: var(--yellow)
}
.online-booking-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.online-booking-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.online-booking-software .soft {
background: var(--sky2)
}
.online-booking-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.online-booking-software .dark h2,
.online-booking-software .dark h3 {
color: #fff
}
.online-booking-software .dark p {
color: #D6D6D6
}
.online-booking-software .dark .ey {
background: var(--yellow)
}
.online-booking-software .receiptHead .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.online-booking-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.online-booking-software .textLink .icon2 {
width: 16px;
height: 16px
}
.online-booking-software .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.online-booking-software .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.online-booking-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.online-booking-software .skipLink:focus {
top: 12px
} .online-booking-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.online-booking-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.online-booking-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.online-booking-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.online-booking-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.online-booking-software .logo.adobe {
font-size: 20px
}
.online-booking-software .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .online-booking-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 15px 0 0;
}
.online-booking-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.online-booking-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.online-booking-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.online-booking-software .outcome:nth-child(3):before {
background: var(--green)
}
.online-booking-software .outcome:nth-child(4):before {
background: var(--purple)
}
.online-booking-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.online-booking-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.online-booking-software .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
} .online-booking-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.online-booking-software .feature.reverse .visual {
order: -1
}
.online-booking-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.online-booking-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.online-booking-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.online-booking-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.online-booking-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.online-booking-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.online-booking-software .visual>* {
position: relative;
z-index: 2
}
.online-booking-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.online-booking-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.online-booking-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.online-booking-software .uiHeading .icon2 {
width: 19px;
height: 19px
}
.online-booking-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.online-booking-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.online-booking-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.online-booking-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.online-booking-software .pill.green {
background: var(--greenbg);
color: #116746
}
.online-booking-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.online-booking-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.online-booking-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .online-booking-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.online-booking-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.online-booking-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.online-booking-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.online-booking-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.online-booking-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.online-booking-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.online-booking-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.online-booking-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.online-booking-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .online-booking-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.online-booking-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.online-booking-software .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.online-booking-software .connectedCard .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
}
.online-booking-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.online-booking-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.online-booking-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.online-booking-software .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
} .online-booking-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.online-booking-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.online-booking-software .featureCard:hover {
transform: translateY(-3px)
}
.online-booking-software .featureIcon,
.online-booking-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.online-booking-software .featureIcon .icon2,
.online-booking-software .useIcon .icon2 {
width: 22px;
height: 22px
}
.online-booking-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.online-booking-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .online-booking-software .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.online-booking-software .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.online-booking-software .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.online-booking-software .integration:hover {
background: var(--sky2)
}
.online-booking-software .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.online-booking-software .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.online-booking-software .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.online-booking-software .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.online-booking-software .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.online-booking-software .stream>span[aria-hidden] {
color: #86B2C9
} .online-booking-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.online-booking-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.online-booking-software .useCase h3 {
font-size: 20px
}
.online-booking-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.online-booking-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.online-booking-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.online-booking-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.online-booking-software .review h3 {
font-size: 22px
}
.online-booking-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.online-booking-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.online-booking-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.online-booking-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.online-booking-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.online-booking-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.online-booking-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.online-booking-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.online-booking-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .online-booking-software .faq {
max-width: 900px
}
.online-booking-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.online-booking-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.online-booking-software .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.online-booking-software .faq summary::marker {
color: var(--navy)
}
.online-booking-software .faq details[open] {
border-color: #A9D3E7
}
.online-booking-software .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .online-booking-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.online-booking-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.online-booking-software .cta h3 {
font-size: 19px
}
.online-booking-software .cta.darkCta h3 {
color: #fff
}
.online-booking-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.online-booking-software .cta.darkCta p {
color: #D1D1D1
}
.online-booking-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.online-booking-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.online-booking-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.online-booking-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.online-booking-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.online-booking-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.online-booking-software .reveal {
opacity: 1;
transform: none
}  .online-booking-software #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.online-booking-software #connected-tools.fsmTools *,
.online-booking-software #connected-tools.fsmTools *::before,
.online-booking-software #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.online-booking-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.online-booking-software #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.online-booking-software #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.online-booking-software #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.online-booking-software #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.online-booking-software #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.online-booking-software #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__step::before,
.online-booking-software #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.online-booking-software #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.online-booking-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.online-booking-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.online-booking-software #connected-tools.fsmTools {
padding: 52px 0;
}
.online-booking-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.online-booking-software #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.online-booking-software #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.online-booking-software #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.online-booking-software #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card,
.online-booking-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.online-booking-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.online-booking-software #connected-tools.fsmTools h2 {
font-size: 30px;
}
.online-booking-software #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.online-booking-software #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.online-booking-software .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE)
}
.online-booking-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.online-booking-software .heroGrid>*,
.online-booking-software .feature>*,
.online-booking-software .aiGrid>* {
min-width: 0
}
.online-booking-software .hero h1 {
max-width: 580px
}
.online-booking-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.online-booking-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.online-booking-software .heroVisual {
position: relative;
min-width: 0
}
.online-booking-software .bookingStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 182px;
gap: 12px;
align-items: start;
max-width: 620px;
margin-left: auto
}
.online-booking-software .bookingStage:before {
content: "";
position: absolute;
inset: 58px 12px 18px 24px;
border-radius: 24px;
background: linear-gradient(rgba(0, 168, 248, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .055) 1px, transparent 1px);
background-size: 27px 27px;
z-index: 0
}
.online-booking-software .bookingStage>* {
position: relative;
z-index: 1;
min-width: 0
}
.online-booking-software .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
line-height: 1.5;
padding: 6px 10px;
border-radius: 8px
}
.online-booking-software .bookingBrowser {
grid-column: 1/-1;
border: 1px solid #BCDDEB;
border-radius: 18px;
background: #fff;
overflow: hidden;
box-shadow: 0 14px 30px rgba(6, 59, 92, .06)
}
.online-booking-software .browserBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--line)
}
.online-booking-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.online-booking-software .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.online-booking-software .brandTile .icon2 {
width: 17px;
height: 17px
}
.online-booking-software .sampleBadge {
font-size: 8px;
font-weight: 750;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px;
line-height: 1.5;
white-space: nowrap
}
.online-booking-software .browserIntro {
padding: 16px 18px 13px
}
.online-booking-software .browserIntro strong {
font-size: 21px;
letter-spacing: -.025em;
line-height: 1.3;
display: block;
color: var(--ink)
}
.online-booking-software .browserIntro>span {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 4px
}
.online-booking-software .browserBody {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
padding: 0 18px 17px
}
.online-booking-software .browserBody>div {
min-width: 0
}
.online-booking-software .heroServices .serviceRow {
padding: 10px 8px;
gap: 7px;
margin-top: 9px;
grid-template-columns: 28px 1fr auto
}
.online-booking-software .heroServices .serviceIcon {
width: 27px;
height: 30px;
border-radius: 7px
}
.online-booking-software .heroServices .serviceIcon .icon2 {
width: 16px;
height: 16px
}
.online-booking-software .heroServices .serviceRow strong {
font-size: 10px;
line-height: 1.4
}
.online-booking-software .heroServices .serviceRow small {
font-size: 8px;
line-height: 1.4
}
.online-booking-software .heroServices .serviceEnd .icon2 {
width: 12px;
height: 12px
}
.online-booking-software .heroServices .serviceRow:not(.selected) .serviceEnd {
display: none
}
.online-booking-software .monthLabel {
font-size: 11px;
font-weight: 850;
margin: 11px 0 9px
}
.online-booking-software .dateChoices {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px
}
.online-booking-software .dateChoices>span {
text-align: center;
padding: 7px 2px;
border: 1px solid var(--line);
border-radius: 7px;
font-size: 7px;
color: var(--muted);
line-height: 1.4;
background: #fff
}
.online-booking-software .dateChoices b {
display: block;
font-size: 17px;
color: var(--ink);
margin-top: 4px
}
.online-booking-software .dateChoices>span.selected {
background: var(--navy);
border-color: var(--navy);
color: #D1EAF7
}
.online-booking-software .dateChoices .selected b {
color: #fff
}
.online-booking-software .slotLabel {
margin-top: 12px;
margin-bottom: 7px;
display: block;
font-size: 9px
}
.online-booking-software .slotChoices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px
}
.online-booking-software .slotChoices>span {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
font-size: 9px;
line-height: 1.4;
padding: 7px 2px;
border: 1px solid var(--line);
border-radius: 6px;
white-space: nowrap
}
.online-booking-software .slotChoices .selected {
border-color: #69BCDF;
background: #EAF8FF;
color: var(--navy);
font-weight: 850
}
.online-booking-software .slotChoices .icon2 {
width: 10px;
height: 10px
}
.online-booking-software .selectionNote {
display: flex;
align-items: center;
gap: 4px;
margin-top: 10px;
font-size: 8px;
color: var(--muted)
}
.online-booking-software .selectionNote .icon2 {
width: 12px;
height: 12px
}
.online-booking-software .browserFooter {
padding: 13px 205px 14px 18px;
min-height: 99px;
border-top: 1px solid var(--line);
background: var(--sky2);
font-size: 9px;
color: var(--muted)
}
.online-booking-software .browserFooter strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 7px;
line-height: 1.4
}
.online-booking-software .browserFooter>span:last-child {
display: block;
margin-top: 4px;
line-height: 1.5
}
.online-booking-software .browserFooter .pill {
font-size: 9px;
gap: 4px
}
.online-booking-software .browserFooter .icon2 {
width: 11px;
height: 11px
}
.online-booking-software .bookingPhone {
grid-column: 2;
grid-row: 3;
z-index: 3;
margin-top: -85px;
width: 100%;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 27px;
padding: 7px;
box-shadow: 0 14px 24px rgba(6, 59, 92, .1)
}
.online-booking-software .phoneScreen {
border-radius: 20px;
background: #fff;
overflow: hidden
}
.online-booking-software .phoneTop {
height: 19px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.online-booking-software .notch {
width: 46px;
height: 4px;
border-radius: 99px;
background: #4E626F
}
.online-booking-software .bookingPhoneHead {
padding: 12px 10px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line);
text-align: center
}
.online-booking-software .phoneSuccess {
width: 25px;
height: 25px;
display: grid;
place-items: center;
margin: 0 auto 6px;
background: var(--green);
color: #fff;
border-radius: 50%
}
.online-booking-software .phoneSuccess .icon2 {
width: 16px;
height: 16px
}
.online-booking-software .bookingPhoneHead strong {
font-size: 12px;
line-height: 1.35;
display: block
}
.online-booking-software .bookingPhoneHead small {
font-size: 9px;
color: var(--muted)
}
.online-booking-software .phoneDetails {
padding: 2px 12px
}
.online-booking-software .phoneDetails>div {
border-bottom: 1px solid var(--line);
padding: 8px 0;
line-height: 1.4
}
.online-booking-software .phoneDetails>div:last-child {
border: 0
}
.online-booking-software .phoneDetails span {
display: block;
font-size: 8px;
color: var(--muted);
margin-bottom: 3px
}
.online-booking-software .phoneDetails strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.online-booking-software .phoneEmail {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
margin: 5px 8px 10px;
padding: 8px 4px;
background: var(--greenbg);
border-radius: 7px;
color: #146448;
font-size: 8px;
line-height: 1.4;
text-align: center
}
.online-booking-software .phoneEmail .icon2 {
width: 12px;
height: 12px
}
.online-booking-software .bookingReceipt {
grid-column: 1;
grid-row: 3;
background: #111821;
border: 1px solid #303B47;
border-radius: 15px;
color: #fff;
overflow: hidden;
margin-top: 2px;
box-shadow: 0 9px 20px rgba(6, 59, 92, .06)
}
.online-booking-software .receiptHead {
padding: 11px 13px;
font-size: 11px;
font-weight: 800;
border-bottom: 1px solid #303B47;
display: flex;
gap: 8px;
align-items: center
}
.online-booking-software .receiptHead .icon2 {
width: 16px;
height: 16px;
color: var(--yellow)
}
.online-booking-software .receiptBody {
padding: 13px;
font-size: 10px;
line-height: 1.5
}
.online-booking-software .receiptBody>strong {
display: block;
font-size: 14px;
line-height: 1.35;
color: #fff;
margin-bottom: 6px
}
.online-booking-software .receiptBody>span {
color: #C5D6E1
}
.online-booking-software .receiptPills {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 10px
}
.online-booking-software .receiptPills>span {
font-size: 8px;
line-height: 1.5;
padding: 4px 6px;
border: 1px solid #34505E;
border-radius: 5px;
color: #E1EEF3
}
.online-booking-software .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 16px 0 0;
line-height: 1.5
}
.online-booking-software .bookingVisual {
min-width: 0
}
.online-booking-software .bookingVisual .uiHeading {
font-size: 14px
}
.online-booking-software .bookingVisual .uiHeading>span:first-child {
min-width: 0;
line-height: 1.45
}
.online-booking-software .bookingVisual .uiHeading .icon2 {
width: 20px;
height: 20px
}
.online-booking-software .pill .icon2 {
width: 12px;
height: 12px
}
.online-booking-software .panelTitle {
display: flex;
gap: 10px;
justify-content: space-between;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800;
color: var(--navy)
}
.online-booking-software .panelTitle>span:first-child {
display: flex;
gap: 7px;
align-items: center
}
.online-booking-software .panelTitle .icon2 {
width: 18px;
height: 18px
}
.online-booking-software .serviceRow {
padding: 13px;
display: grid;
grid-template-columns: 37px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
min-width: 0
}
.online-booking-software .serviceRow.selected {
border-color: #9BD7F0;
background: #F5FCFF
}
.online-booking-software .serviceIcon {
width: 37px;
height: 39px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--sky);
color: var(--navy)
}
.online-booking-software .serviceIcon .icon2 {
width: 22px;
height: 22px
}
.online-booking-software .serviceRow strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.online-booking-software .serviceRow small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px;
line-height: 1.45
}
.online-booking-software .serviceEnd {
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.online-booking-software .serviceEnd .icon2 {
width: 17px;
height: 17px
}
.online-booking-software .catalogList {
display: grid;
gap: 9px;
padding: 14px 14px 0
}
.online-booking-software .formPreview {
padding: 17px 15px
}
.online-booking-software .formGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 8px
}
.online-booking-software .formGrid>div {
min-width: 0
}
.online-booking-software .formGrid>div>span {
font-size: 10px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-bottom: 4px
}
.online-booking-software .formGrid b {
color: #B73535
}
.online-booking-software .fullField {
grid-column: 1/-1
}
.online-booking-software .fieldPreview {
padding: 9px;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--sky2);
font-size: 11px;
line-height: 1.45;
color: #365365
}
.online-booking-software .fieldPreview.multiline {
min-height: 49px
}
.online-booking-software .termsPreview {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--muted);
margin-top: 12px
}
.online-booking-software .termsPreview .icon2 {
width: 14px;
height: 14px;
color: var(--green)
}
.online-booking-software .weekDays {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
padding: 16px 15px
}
.online-booking-software .weekDays>span {
padding: 9px 3px;
border: 1px solid #C8E7DD;
border-radius: 8px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--greenbg);
color: #185A44
}
.online-booking-software .weekDays b {
font-size: 10px;
display: block;
font-weight: 650;
margin-top: 4px
}
.online-booking-software .hoursLine {
display: flex;
gap: 12px;
justify-content: space-between;
margin: 0 15px;
padding-bottom: 13px;
border-bottom: 1px solid var(--line);
font-size: 11px
}
.online-booking-software .hoursLine>span {
color: var(--muted)
}
.online-booking-software .hoursLine>strong {
color: var(--navy);
font-size: 11px
}
.online-booking-software .ruleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
padding: 14px 15px
}
.online-booking-software .ruleGrid>div {
padding: 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky2)
}
.online-booking-software .ruleGrid span {
font-size: 10px;
display: block;
color: var(--muted)
}
.online-booking-software .ruleGrid strong {
display: block;
font-size: 20px;
letter-spacing: -.025em;
color: var(--navy);
line-height: 1.3;
margin-top: 4px
}
.online-booking-software .assignmentPanel {
padding: 14px;
margin-top: 13px;
border: 1px solid #EAD992;
background: var(--yellowsoft);
border-radius: 12px
}
.online-booking-software .assignmentPanel .uiLabel {
color: #705717;
font-size: 9px
}
.online-booking-software .assignmentModes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: 9px
}
.online-booking-software .assignmentModes>span {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
background: #fff;
border: 1px solid #E8DAA1;
border-radius: 8px;
padding: 10px 5px;
font-size: 10px;
line-height: 1.35;
font-weight: 700;
color: #54441D;
text-align: center
}
.online-booking-software .assignmentModes .icon2 {
width: 17px;
height: 17px
}
.online-booking-software .actionSource {
display: flex;
align-items: center;
gap: 12px;
padding: 17px;
border-radius: 13px;
background: var(--navy);
color: #fff
}
.online-booking-software .sourceIcon {
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
width: 37px;
height: 39px;
flex: 0 0 37px;
border-radius: 9px
}
.online-booking-software .sourceIcon .icon2 {
width: 22px;
height: 22px
}
.online-booking-software .actionSource .uiLabel {
color: #B7D5E8;
font-size: 9px
}
.online-booking-software .actionSource strong {
display: block;
font-size: 13px;
margin-top: 3px;
line-height: 1.4
}
.online-booking-software .actionSource small {
display: block;
font-size: 10px;
color: #D4E5EF;
line-height: 1.5;
margin-top: 3px
}
.online-booking-software .actionConnector {
height: 37px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #739BAF
}
.online-booking-software .actionConnector>span {
width: 1px;
height: 8px;
background: #A7CDD9
}
.online-booking-software .actionConnector>svg {
transform: rotate(90deg);
width: 20px;
height: 20px
}
.online-booking-software .actionLabel {
font-size: 9px;
text-align: center;
display: block;
margin-bottom: 11px
}
.online-booking-software .actionRoutes {
display: grid;
gap: 9px
}
.online-booking-software .actionOption {
display: flex;
gap: 11px;
align-items: center;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff
}
.online-booking-software .routeChoice {
display: grid;
place-items: center;
width: 33px;
height: 33px;
flex: 0 0 33px;
border-radius: 8px;
background: var(--yellowsoft);
color: #7C5D10
}
.online-booking-software .routeChoice.blue {
background: var(--sky);
color: var(--navy)
}
.online-booking-software .routeChoice.gray {
background: #F0F3F5;
color: #5C7180
}
.online-booking-software .routeChoice .icon2 {
width: 20px;
height: 20px
}
.online-booking-software .actionOption strong {
font-size: 12px;
display: block
}
.online-booking-software .actionOption>div>span {
font-size: 11px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.online-booking-software .dashboardPeek {
margin-top: 14px;
padding: 13px;
background: #fff;
border: 1px dashed #B6D6E5;
border-radius: 10px
}
.online-booking-software .dashboardPeek>span {
display: flex;
gap: 6px;
align-items: center;
font-size: 11px;
font-weight: 800;
color: var(--navy)
}
.online-booking-software .dashboardPeek .icon2 {
width: 16px;
height: 16px
}
.online-booking-software .dashboardPeek>div {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px;
margin-top: 9px
}
.online-booking-software .dashboardPeek b {
padding: 5px 2px;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
text-align: center;
font-weight: 650;
color: var(--muted)
}
.online-booking-software .bookingExperience {
display: grid;
grid-template-columns: 185px minmax(0, 1fr);
gap: 18px;
align-items: center
}
.online-booking-software .portalPhone {
background: #0C1D2A;
padding: 7px;
border: 1px solid #304858;
border-radius: 27px;
box-shadow: 0 9px 22px rgba(6, 59, 92, .08)
}
.online-booking-software .portalPhoneHead {
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
padding: 12px 11px;
border-bottom: 1px solid var(--line)
}
.online-booking-software .portalPhoneHead>span {
display: block;
font-size: 9px;
color: var(--muted)
}
.online-booking-software .portalPhoneHead>strong {
display: block;
font-size: 14px;
line-height: 1.3;
margin-top: 4px
}
.online-booking-software .portalVisit {
padding: 13px 11px 10px
}
.online-booking-software .portalVisit h3 {
font-size: 15px;
line-height: 1.3;
margin-top: 9px;
letter-spacing: -.02em
}
.online-booking-software .portalVisit p {
font-size: 10px;
margin-top: 6px;
color: var(--muted)
}
.online-booking-software .portalVisit>strong {
font-size: 11px;
line-height: 1.5;
display: block;
margin-top: 3px
}
.online-booking-software .portalVisit>span:last-child {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 5px
}
.online-booking-software .portalActions {
display: grid;
gap: 7px;
padding: 3px 11px 13px
}
.online-booking-software .portalActions>span {
padding: 7px 5px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.5;
text-align: center;
color: var(--navy);
background: var(--sky2);
font-weight: 650
}
.online-booking-software .portalActions>span:first-child {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow)
}
.online-booking-software .notificationStack {
display: grid;
gap: 11px
}
.online-booking-software .notificationCard {
padding: 14px 12px;
display: flex;
gap: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.online-booking-software .notificationIcon {
display: grid;
place-items: center;
width: 29px;
height: 29px;
flex: 0 0 29px;
background: var(--sky);
color: var(--navy);
border-radius: 8px
}
.online-booking-software .notificationIcon.yellow {
background: var(--yellowsoft);
color: #7C5D10
}
.online-booking-software .notificationIcon.green {
background: var(--greenbg);
color: var(--green)
}
.online-booking-software .notificationIcon .icon2 {
width: 17px;
height: 17px
}
.online-booking-software .notificationCard strong {
font-size: 12px;
display: block;
line-height: 1.4
}
.online-booking-software .notificationCard>div>span {
font-size: 11px;
color: var(--muted);
display: block;
margin-top: 4px;
line-height: 1.5
}
.online-booking-software .darkCta .outline {
background: transparent;
color: #fff;
border-color: #555
}
@media(max-width:1100px) and (min-width:961px) {
.online-booking-software .heroGrid {
gap: 28px
} .online-booking-software .hero .lead {
font-size: 17px
}
.online-booking-software .bookingStage {
grid-template-columns: minmax(0, 1fr) 155px;
gap: 10px
}
.online-booking-software .browserBody {
gap: 12px;
padding-left: 13px;
padding-right: 13px
}
.online-booking-software .browserFooter {
padding-right: 177px
}
.online-booking-software .heroServices .serviceRow {
padding: 9px 6px;
grid-template-columns: 22px 1fr auto;
gap: 5px
}
.online-booking-software .heroServices .serviceIcon {
width: 22px
}
.online-booking-software .heroServices .serviceRow strong {
font-size: 9px
}
.online-booking-software .heroServices .serviceRow small {
font-size: 8px
}
.online-booking-software .bookingExperience {
grid-template-columns: 165px minmax(0, 1fr);
gap: 12px
}
.online-booking-software .notificationCard {
padding: 12px 9px;
gap: 7px
}
.online-booking-software .notificationIcon {
display: none
}
.online-booking-software .visual {
padding: 18px
}
.online-booking-software .receiptBody>strong {
font-size: 13px
}
}
@media(max-width:960px) {
.online-booking-software .heroGrid,
.online-booking-software .feature,
.online-booking-software .aiGrid,
.online-booking-software .final {
grid-template-columns: 1fr
}
.online-booking-software .heroGrid {
gap: 38px
}
.online-booking-software .hero h1 {
max-width: 790px
}
.online-booking-software .hero .lead {
max-width: 750px
}
.online-booking-software .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.online-booking-software .bookingStage {
margin: auto
}
.online-booking-software .feature.reverse .visual {
order: 0
}
.online-booking-software .feature {
gap: 30px
}
.online-booking-software .feature>div:first-child {
max-width: 800px
}
.online-booking-software .outcomes,
.online-booking-software .featureGrid,
.online-booking-software .connectedGrid,
.online-booking-software .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.online-booking-software .logos {
grid-template-columns: repeat(3, 1fr)
}
.online-booking-software .reviews {
grid-template-columns: 1fr
}
.online-booking-software .ratingGrid {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.online-booking-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.online-booking-software .ratingItem:nth-child(2) {
border: 0
}
.online-booking-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.online-booking-software .final .btn {
min-width: 195px
}
.online-booking-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.online-booking-software .aiGrid {
gap: 30px
}
.online-booking-software .aiMini {
max-width: 760px
}
.online-booking-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.online-booking-software .wrap {
width: calc(100% - 24px)
}
.online-booking-software section {
padding: 56px 0
}
.online-booking-software .hero {
padding: 32px 0 42px
} .online-booking-software h2 {
font-size: 34px
}
.online-booking-software .lead {
font-size: 17px
}
.online-booking-software .sectionHead p {
font-size: 16px
}
.online-booking-software .sectionHead {
margin-bottom: 28px
}
.online-booking-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.online-booking-software .heroGrid {
gap: 28px
}
.online-booking-software .hero .actions {
gap: 8px
}
.online-booking-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.online-booking-software .micro {
font-size: 11px
}
.online-booking-software .heroPills {
gap: 6px
}
.online-booking-software .heroPills span {
font-size: 9px
}
.online-booking-software .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.online-booking-software .bookingStage {
grid-template-columns: minmax(0, 1fr) 155px;
gap: 10px;
max-width: 470px
}
.online-booking-software .assetTag {
font-size: 9px;
padding: 6px 9px
}
.online-booking-software .bookingBrowser {
border-radius: 15px;
box-shadow: none
}
.online-booking-software .browserBar {
padding: 12px;
gap: 7px
}
.online-booking-software .boardBrand {
font-size: 12px
}
.online-booking-software .brandTile {
width: 24px;
height: 24px
}
.online-booking-software .browserIntro {
padding: 14px 12px 12px
}
.online-booking-software .browserIntro strong {
font-size: 19px
}
.online-booking-software .browserIntro>span {
font-size: 10px
}
.online-booking-software .browserBody {
padding: 0 12px 14px;
gap: 12px;
grid-template-columns: 1fr 1fr
}
.online-booking-software .uiLabel {
font-size: 9px
}
.online-booking-software .heroServices .serviceRow {
padding: 10px 6px;
gap: 5px;
grid-template-columns: 23px 1fr auto
}
.online-booking-software .heroServices .serviceIcon {
width: 23px;
height: 27px
}
.online-booking-software .heroServices .serviceIcon .icon2 {
width: 15px;
height: 15px
}
.online-booking-software .heroServices .serviceRow strong {
font-size: 10px
}
.online-booking-software .heroServices .serviceRow small {
font-size: 8px
}
.online-booking-software .heroServices .serviceEnd .icon2 {
width: 11px;
height: 11px
}
.online-booking-software .monthLabel {
font-size: 10px
}
.online-booking-software .dateChoices {
gap: 4px
}
.online-booking-software .dateChoices b {
font-size: 15px
}
.online-booking-software .dateChoices>span {
font-size: 7px;
padding: 7px 1px
}
.online-booking-software .slotChoices>span {
font-size: 8px;
gap: 2px;
padding: 7px 1px
}
.online-booking-software .slotChoices .icon2 {
width: 9px;
height: 9px
}
.online-booking-software .slotLabel {
font-size: 8px
}
.online-booking-software .selectionNote {
font-size: 8px;
align-items: flex-start;
line-height: 1.5
}
.online-booking-software .selectionNote .icon2 {
margin-top: 1px;
flex-shrink: 0
}
.online-booking-software .browserFooter {
padding: 12px 177px 14px 12px;
min-height: 104px
}
.online-booking-software .browserFooter strong {
font-size: 11px
}
.online-booking-software .browserFooter>span:last-child {
font-size: 9px
}
.online-booking-software .browserFooter .pill {
font-size: 8px;
padding: 4px 6px
}
.online-booking-software .bookingPhone {
padding: 6px;
border-radius: 24px;
margin-top: -89px;
box-shadow: none
}
.online-booking-software .phoneScreen {
border-radius: 18px
}
.online-booking-software .bookingPhoneHead {
padding: 10px 8px
}
.online-booking-software .bookingPhoneHead strong {
font-size: 11px
}
.online-booking-software .bookingPhoneHead small {
font-size: 8px
}
.online-booking-software .phoneDetails {
padding: 2px 10px
}
.online-booking-software .phoneDetails strong {
font-size: 10px
}
.online-booking-software .phoneEmail {
font-size: 8px;
gap: 3px
}
.online-booking-software .phoneEmail .icon2 {
width: 11px;
height: 11px
}
.online-booking-software .bookingReceipt {
border-radius: 12px;
margin-top: 0;
box-shadow: none
}
.online-booking-software .receiptHead {
padding: 11px 10px;
gap: 6px;
font-size: 10px;
line-height: 1.4
}
.online-booking-software .receiptBody {
padding: 11px 10px;
font-size: 10px
}
.online-booking-software .receiptBody>strong {
font-size: 13px
}
.online-booking-software .receiptPills>span {
font-size: 8px;
padding: 4px 5px
}
.online-booking-software .diagramCaption {
font-size: 9px;
margin-top: 14px
}
.online-booking-software .trust {
padding: 23px 0
}
.online-booking-software .trustLabel {
font-size: 12px
}
.online-booking-software .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.online-booking-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.online-booking-software .logo.dhl {
font-size: 19px
}
.online-booking-software .logo.adobe {
font-size: 17px
}
.online-booking-software .logo.golden {
font-size: 8px
}
.online-booking-software .fl,
.online-booking-software .outcomes,
.online-booking-software .featureGrid,
.online-booking-software .connectedGrid,
.online-booking-software .useCases {
grid-template-columns: 1fr
}
.online-booking-software .fi {
font-size: 14px
}
.online-booking-software .outcome {
padding: 21px
}
.online-booking-software .outcome strong {
margin-top: 12px
}
.online-booking-software .outcome span {
font-size: 14px
}
.online-booking-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.online-booking-software .bookingVisual .uiHeading {
font-size: 13px;
gap: 7px;
margin-bottom: 13px
}
.online-booking-software .bookingVisual .uiHeading .icon2 {
width: 18px;
height: 18px
}
.online-booking-software .uiHeading .sampleBadge {
font-size: 7px;
padding: 3px 4px
}
.online-booking-software .uiHeading>span:first-child {
gap: 6px
}
.online-booking-software .bookingVisual figcaption {
font-size: 10px
}
.online-booking-software .panelTitle {
padding: 12px;
font-size: 11px;
gap: 7px
}
.online-booking-software .panelTitle .pill {
font-size: 8px
}
.online-booking-software .catalogList {
padding: 12px 12px 0;
gap: 8px
}
.online-booking-software .serviceRow {
padding: 11px 9px;
gap: 8px;
grid-template-columns: 30px minmax(0, 1fr) auto
}
.online-booking-software .serviceIcon {
width: 30px;
height: 34px
}
.online-booking-software .serviceRow strong {
font-size: 11px
}
.online-booking-software .serviceRow small {
font-size: 9px
}
.online-booking-software .serviceEnd {
font-size: 12px
}
.online-booking-software .formPreview {
padding: 14px 12px
}
.online-booking-software .fieldPreview {
font-size: 10px
}
.online-booking-software .formGrid>div>span {
font-size: 9px
}
.online-booking-software .formGrid {
gap: 8px
}
.online-booking-software .termsPreview {
font-size: 9px
}
.online-booking-software .weekDays {
gap: 5px;
padding: 13px 12px
}
.online-booking-software .weekDays>span {
font-size: 8px;
padding: 8px 1px
}
.online-booking-software .weekDays b {
font-size: 9px
}
.online-booking-software .hoursLine {
margin: 0 12px;
font-size: 10px;
gap: 8px
}
.online-booking-software .hoursLine>strong {
font-size: 10px
}
.online-booking-software .ruleGrid {
padding: 13px 12px;
gap: 8px
}
.online-booking-software .ruleGrid>div {
padding: 11px
}
.online-booking-software .ruleGrid strong {
font-size: 19px
}
.online-booking-software .ruleGrid span {
font-size: 9px
}
.online-booking-software .assignmentPanel {
padding: 12px
}
.online-booking-software .assignmentModes>span {
font-size: 9px;
padding: 9px 4px
}
.online-booking-software .assignmentPanel .uiLabel {
font-size: 8px
}
.online-booking-software .actionSource {
padding: 14px;
gap: 10px
}
.online-booking-software .actionSource strong {
font-size: 12px
}
.online-booking-software .actionSource small {
font-size: 10px
}
.online-booking-software .sourceIcon {
width: 32px;
height: 36px;
flex-basis: 32px
}
.online-booking-software .actionSource .uiLabel {
font-size: 8px
}
.online-booking-software .actionLabel {
font-size: 8px
}
.online-booking-software .actionOption {
padding: 12px
}
.online-booking-software .dashboardPeek {
padding: 12px
}
.online-booking-software .dashboardPeek>span {
font-size: 10px
}
.online-booking-software .dashboardPeek b {
font-size: 8px
}
.online-booking-software .bookingExperience {
grid-template-columns: 166px minmax(0, 1fr);
gap: 12px
}
.online-booking-software .notificationCard {
padding: 12px 10px;
gap: 7px;
flex-direction: column
}
.online-booking-software .notificationCard strong {
font-size: 11px
}
.online-booking-software .notificationCard>div>span {
font-size: 10px
}
.online-booking-software .notificationIcon {
width: 26px;
height: 26px;
flex-basis: 26px
}
.online-booking-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.online-booking-software .aiMini div {
padding: 16px
}
.online-booking-software .aiMini strong {
font-size: 14px
}
.online-booking-software .aiMini span {
font-size: 13px
}
.online-booking-software .promptBox {
padding: 18px;
border-radius: 17px
}
.online-booking-software .prompt {
font-size: 13px;
padding: 13px
}
.online-booking-software .promptHead {
font-size: 19px
}
.online-booking-software .promptFoot {
font-size: 10px !important
}
.online-booking-software .connectedCard {
padding: 22px
}
.online-booking-software .connectedCard p,
.online-booking-software .featureCard p,
.online-booking-software .useCase p {
font-size: 14px
}
.online-booking-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.online-booking-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px
}
.online-booking-software .ratingItem {
border: 0
}
.online-booking-software .ratingLead {
margin-bottom: 3px
}
.online-booking-software .review p {
font-size: 14px
}
.online-booking-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.online-booking-software .ctaBtns {
width: 100%
}
.online-booking-software .ctaBtns .btn {
flex: 1
}
.online-booking-software .cta p {
font-size: 14px
}
.online-booking-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.online-booking-software .final h2 {
font-size: 32px
}
.online-booking-software .final p {
font-size: 15px
}
.online-booking-software .final .ctaBtns {
flex-direction: column
}
.online-booking-software .final .btn {
min-width: 0;
width: 100%
}
.online-booking-software .faq details {
padding: 16px
}
.online-booking-software .faq summary {
font-size: 14px
}
.online-booking-software .faq details p {
font-size: 14px
}
}
@media(max-width:430px) {
.online-booking-software .bookingExperience {
grid-template-columns: 1fr;
gap: 17px
}
.online-booking-software .portalPhone {
width: 206px;
margin: 0 auto
}
.online-booking-software .notificationCard {
flex-direction: row;
padding: 13px
}
.online-booking-software .notificationCard strong {
font-size: 12px
}
.online-booking-software .notificationCard>div>span {
font-size: 11px
}
.online-booking-software .portalPhoneHead>strong {
font-size: 15px
}
.online-booking-software .portalVisit h3 {
font-size: 16px
}
.online-booking-software .portalVisit p,
.online-booking-software .portalVisit>strong {
font-size: 11px
}
.online-booking-software .portalActions>span {
font-size: 10px
}
}
@media(max-width:360px) { .online-booking-software h2 {
font-size: 31px
}
.online-booking-software .bookingStage {
grid-template-columns: minmax(0, 1fr) 137px;
gap: 8px
}
.online-booking-software .browserBody {
gap: 9px;
padding: 0 10px 12px
}
.online-booking-software .browserBar {
padding: 11px 10px
}
.online-booking-software .boardBrand {
font-size: 11px
}
.online-booking-software .sampleBadge {
font-size: 7px;
padding: 3px 4px
}
.online-booking-software .browserIntro {
padding: 13px 10px 10px
}
.online-booking-software .browserIntro strong {
font-size: 17px
}
.online-booking-software .browserIntro>span {
font-size: 9px
}
.online-booking-software .heroServices .serviceRow {
grid-template-columns: 20px minmax(0, 1fr);
padding: 9px 5px;
gap: 4px
}
.online-booking-software .heroServices .serviceIcon {
width: 20px;
height: 25px
}
.online-booking-software .heroServices .serviceRow strong {
font-size: 9px
}
.online-booking-software .heroServices .serviceRow small {
font-size: 8px
}
.online-booking-software .heroServices .serviceEnd {
display: none
}
.online-booking-software .heroServices .selected {
border-left: 3px solid var(--brand)
}
.online-booking-software .dateChoices>span {
font-size: 6px
}
.online-booking-software .dateChoices b {
font-size: 14px
}
.online-booking-software .monthLabel {
font-size: 9px
}
.online-booking-software .slotChoices>span {
font-size: 7px
}
.online-booking-software .slotChoices .icon2 {
display: none
}
.online-booking-software .selectionNote {
font-size: 7px
}
.online-booking-software .browserFooter {
padding-right: 155px;
min-height: 108px
}
.online-booking-software .browserFooter strong {
font-size: 10px
}
.online-booking-software .browserFooter>span:last-child {
font-size: 8px
}
.online-booking-software .receiptHead {
font-size: 9px;
gap: 5px;
padding: 10px 9px
}
.online-booking-software .receiptHead .icon2 {
width: 14px;
height: 14px
}
.online-booking-software .receiptBody {
padding: 10px 9px;
font-size: 9px
}
.online-booking-software .receiptBody>strong {
font-size: 12px
}
.online-booking-software .receiptPills>span {
font-size: 7px
}
.online-booking-software .bookingPhoneHead strong {
font-size: 10px
}
.online-booking-software .bookingPhoneHead small {
font-size: 7px
}
.online-booking-software .phoneDetails strong {
font-size: 9px
}
.online-booking-software .phoneEmail {
font-size: 7px
}
.online-booking-software .phoneEmail .icon2 {
display: none
}
.online-booking-software .bookingVisual .uiHeading {
font-size: 12px
}
.online-booking-software .panelTitle {
font-size: 10px
}
.online-booking-software .formGrid {
grid-template-columns: 1fr
}
.online-booking-software .formGrid>div>span {
font-size: 10px
}
.online-booking-software .fieldPreview {
font-size: 11px
}
.online-booking-software .hoursLine {
flex-direction: column;
gap: 3px
}
.online-booking-software .hoursLine>strong {
font-size: 11px
}
.online-booking-software .assignmentModes>span {
font-size: 8px
}
.online-booking-software .dashboardPeek>div {
grid-template-columns: 1fr 1fr
}
.online-booking-software .dashboardPeek b {
font-size: 9px
}
.online-booking-software .actionSource {
padding: 12px;
gap: 8px
}
.online-booking-software .actionSource strong {
font-size: 11px
}
}  .in-app-chat-software-field-service .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.in-app-chat-software-field-service .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.in-app-chat-software-field-service .dark a:focus-visible,
.in-app-chat-software-field-service .final a:focus-visible {
outline-color: var(--yellow)
}
.in-app-chat-software-field-service .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.in-app-chat-software-field-service .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.in-app-chat-software-field-service .soft {
background: var(--sky2)
}
.in-app-chat-software-field-service .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.in-app-chat-software-field-service .dark h2,
.in-app-chat-software-field-service .dark h3 {
color: #fff
}
.in-app-chat-software-field-service .dark p {
color: #D6D6D6
}
.in-app-chat-software-field-service .dark .ey {
background: var(--yellow)
}
.in-app-chat-software-field-service .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.in-app-chat-software-field-service .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.in-app-chat-software-field-service .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.in-app-chat-software-field-service .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.in-app-chat-software-field-service .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.in-app-chat-software-field-service .textLink .icon {
width: 16px;
height: 16px
}
.in-app-chat-software-field-service .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.in-app-chat-software-field-service .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.in-app-chat-software-field-service .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.in-app-chat-software-field-service .skipLink:focus {
top: 12px
} .in-app-chat-software-field-service .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.in-app-chat-software-field-service .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.in-app-chat-software-field-service .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.in-app-chat-software-field-service .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.in-app-chat-software-field-service .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.in-app-chat-software-field-service .logo.adobe {
font-size: 20px
}
.in-app-chat-software-field-service .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .in-app-chat-software-field-service .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.in-app-chat-software-field-service .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.in-app-chat-software-field-service .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.in-app-chat-software-field-service .outcome:nth-child(2):before {
background: var(--yellow)
}
.in-app-chat-software-field-service .outcome:nth-child(3):before {
background: var(--green)
}
.in-app-chat-software-field-service .outcome:nth-child(4):before {
background: var(--purple)
}
.in-app-chat-software-field-service .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.in-app-chat-software-field-service .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.in-app-chat-software-field-service .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px;
background: transparent;
} .in-app-chat-software-field-service .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.in-app-chat-software-field-service .feature.reverse .visual {
order: -1
}
.in-app-chat-software-field-service .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.in-app-chat-software-field-service .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.in-app-chat-software-field-service .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.in-app-chat-software-field-service .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.in-app-chat-software-field-service .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.in-app-chat-software-field-service .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.in-app-chat-software-field-service .visual>* {
position: relative;
z-index: 2
}
.in-app-chat-software-field-service .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.in-app-chat-software-field-service .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.in-app-chat-software-field-service .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.in-app-chat-software-field-service .uiHeading .icon {
width: 19px;
height: 19px
}
.in-app-chat-software-field-service .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.in-app-chat-software-field-service .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.in-app-chat-software-field-service .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.in-app-chat-software-field-service .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.in-app-chat-software-field-service .pill.green {
background: var(--greenbg);
color: #116746
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .pill.gray {
background: #F0F3F5;
color: #586C79
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .in-app-chat-software-field-service .in-app-chat-software-field-service .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.in-app-chat-software-field-service .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.in-app-chat-software-field-service .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.in-app-chat-software-field-service .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.in-app-chat-software-field-service .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.in-app-chat-software-field-service .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.in-app-chat-software-field-service .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.in-app-chat-software-field-service .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.in-app-chat-software-field-service .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .in-app-chat-software-field-service .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.in-app-chat-software-field-service .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.in-app-chat-software-field-service .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.in-app-chat-software-field-service .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.in-app-chat-software-field-service .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.in-app-chat-software-field-service .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.in-app-chat-software-field-service .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .in-app-chat-software-field-service .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.in-app-chat-software-field-service .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.in-app-chat-software-field-service .featureCard:hover {
transform: translateY(-3px)
}
.in-app-chat-software-field-service .featureIcon,
.in-app-chat-software-field-service .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.in-app-chat-software-field-service .featureIcon .icon,
.in-app-chat-software-field-service .useIcon .icon {
width: 22px;
height: 22px
}
.in-app-chat-software-field-service .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.in-app-chat-software-field-service .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .in-app-chat-software-field-service .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.in-app-chat-software-field-service .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.in-app-chat-software-field-service .useCase h3 {
font-size: 20px
}
.in-app-chat-software-field-service .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.in-app-chat-software-field-service .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.in-app-chat-software-field-service .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.in-app-chat-software-field-service .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.in-app-chat-software-field-service .review h3 {
font-size: 22px
}
.in-app-chat-software-field-service .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.in-app-chat-software-field-service .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.in-app-chat-software-field-service .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.in-app-chat-software-field-service .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.in-app-chat-software-field-service .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.in-app-chat-software-field-service .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.in-app-chat-software-field-service .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.in-app-chat-software-field-service .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.in-app-chat-software-field-service .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .in-app-chat-software-field-service .faq {
max-width: 900px
}
.in-app-chat-software-field-service .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.in-app-chat-software-field-service .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.in-app-chat-software-field-service .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.in-app-chat-software-field-service .faq summary::marker {
color: var(--navy)
}
.in-app-chat-software-field-service .faq details[open] {
border-color: #A9D3E7
}
.in-app-chat-software-field-service .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .in-app-chat-software-field-service .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.in-app-chat-software-field-service .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.in-app-chat-software-field-service .cta h3 {
font-size: 19px
}
.in-app-chat-software-field-service .cta.darkCta h3 {
color: #fff
}
.in-app-chat-software-field-service .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.in-app-chat-software-field-service .cta.darkCta p {
color: #D1D1D1
}
.in-app-chat-software-field-service .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
} .in-app-chat-software-field-service .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.in-app-chat-software-field-service .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
} .in-app-chat-software-field-service .reveal {
opacity: 1;
transform: none
}  .in-app-chat-software-field-service #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.in-app-chat-software-field-service #connected-tools.fsmTools *,
.in-app-chat-software-field-service #connected-tools.fsmTools *::before,
.in-app-chat-software-field-service #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.in-app-chat-software-field-service #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.in-app-chat-software-field-service #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__step::before,
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.in-app-chat-software-field-service #connected-tools.fsmTools {
padding: 52px 0;
}
.in-app-chat-software-field-service #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.in-app-chat-software-field-service #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card,
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.in-app-chat-software-field-service #connected-tools.fsmTools h2 {
font-size: 30px;
}
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.in-app-chat-software-field-service #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .in-app-chat-software-field-service .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.in-app-chat-software-field-service .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.in-app-chat-software-field-service .heroGrid>*,
.in-app-chat-software-field-service .feature>*,
.in-app-chat-software-field-service .aiGrid>* {
min-width: 0
}
.in-app-chat-software-field-service .hero h1 {
max-width: 590px
}
.in-app-chat-software-field-service .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.in-app-chat-software-field-service .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.in-app-chat-software-field-service .heroVisual {
position: relative;
min-width: 0
}
.in-app-chat-software-field-service .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 182px;
gap: 14px 12px;
align-items: start
}
.in-app-chat-software-field-service .assetStage:before {
content: "";
position: absolute;
inset: 60px 0 18px 22px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.in-app-chat-software-field-service .assetStage>* {
position: relative;
z-index: 1
}
.in-app-chat-software-field-service .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px
}
.in-app-chat-software-field-service .chatBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 19px;
overflow: hidden
}
.in-app-chat-software-field-service .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--line)
}
.in-app-chat-software-field-service .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.in-app-chat-software-field-service .brandTile {
width: 28px;
height: 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.in-app-chat-software-field-service .brandTile .icon {
width: 18px;
height: 18px
}
.in-app-chat-software-field-service .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.in-app-chat-software-field-service .chatLayout {
display: grid;
grid-template-columns: 146px minmax(0, 1fr)
}
.in-app-chat-software-field-service .chatSidebar {
background: #F7FBFE;
border-right: 1px solid var(--line);
padding: 14px 8px
}
.in-app-chat-software-field-service .sidebarTitle {
font-size: 11px;
font-weight: 800;
padding: 0 7px 10px;
color: var(--navy)
}
.in-app-chat-software-field-service .threadItem {
padding: 12px 8px;
border: 1px solid transparent;
border-radius: 9px;
margin-bottom: 7px;
line-height: 1.4
}
.in-app-chat-software-field-service .threadItem.active {
border-color: #BFE1F0;
background: #EAF8FF
}
.in-app-chat-software-field-service .threadItem strong {
font-size: 11px;
display: block;
color: var(--ink)
}
.in-app-chat-software-field-service .threadItem span {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 5px
}
.in-app-chat-software-field-service .threadType {
font-size: 8px !important;
font-weight: 800 !important;
color: #336983 !important;
margin-top: 0 !important;
margin-bottom: 4px !important;
letter-spacing: .03em;
text-transform: uppercase
}
.in-app-chat-software-field-service .chatThread {
min-width: 0
}
.in-app-chat-software-field-service .threadHeading {
padding: 14px 15px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 9px
}
.in-app-chat-software-field-service .chatAvatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: #E7F4FB;
color: #0A577C;
font-size: 10px;
font-weight: 850;
flex: 0 0 32px
}
.in-app-chat-software-field-service .chatAvatar.green {
background: #EAF8F3;
color: #116746
}
.in-app-chat-software-field-service .threadHeading strong {
font-size: 12px;
display: block;
line-height: 1.4
}
.in-app-chat-software-field-service .threadHeading small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.in-app-chat-software-field-service .chatMessages {
display: flex;
flex-direction: column;
gap: 11px;
padding: 15px;
min-width: 0
}
.in-app-chat-software-field-service .message {
max-width: 91%;
align-self: flex-start;
line-height: 1.5;
min-width: 0
}
.in-app-chat-software-field-service .message.to {
align-self: flex-end
}
.in-app-chat-software-field-service .messageAuthor {
display: block;
font-size: 9px;
color: #617687;
margin-bottom: 4px
}
.in-app-chat-software-field-service .bubble {
border: 1px solid #E0EAF0;
background: #F3F7FA;
border-radius: 2px 11px 11px 11px;
padding: 10px 12px;
font-size: 11px;
color: #27495F;
overflow-wrap: anywhere
}
.in-app-chat-software-field-service .to .bubble {
border-color: #BAE1F3;
background: #E9F7FE;
border-radius: 11px 2px 11px 11px
}
.in-app-chat-software-field-service .to .messageAuthor {
text-align: right
}
.in-app-chat-software-field-service .bubble span {
display: block
}
.in-app-chat-software-field-service .bubble .icon {
width: 15px;
height: 15px
}
.in-app-chat-software-field-service .bubbleMedia {
display: flex;
align-items: center;
gap: 7px;
border-radius: 7px;
background: #fff;
border: 1px solid #D9E8F1;
padding: 8px;
font-size: 9px;
font-weight: 750;
margin-top: 8px
}
.in-app-chat-software-field-service .bubbleMedia .icon {
color: var(--brand2)
}
.in-app-chat-software-field-service .chatComposer {
display: flex;
align-items: center;
gap: 10px;
margin: 0 15px 15px;
padding: 10px;
border: 1px solid var(--line);
border-radius: 9px;
color: #61798B;
font-size: 10px
}
.in-app-chat-software-field-service .chatComposer span:first-child {
flex: 1
}
.in-app-chat-software-field-service .chatComposer .icon {
height: 16px;
width: 16px;
color: var(--navy)
}
.in-app-chat-software-field-service .sendTile {
height: 24px;
width: 24px;
border-radius: 7px;
background: var(--yellow);
display: grid;
place-items: center;
flex: 0 0 24px
}
.in-app-chat-software-field-service .sendTile .icon {
height: 13px;
width: 13px;
color: #17222B
}
.in-app-chat-software-field-service .boardFooter {
padding: 10px 15px;
font-size: 9px;
line-height: 1.5;
background: var(--sky2);
border-top: 1px solid var(--line);
color: #536F82;
display: flex;
align-items: center;
gap: 7px
}
.in-app-chat-software-field-service .boardFooter .icon {
height: 14px;
width: 14px;
color: var(--green)
}
.in-app-chat-software-field-service .chatContext {
grid-column: 1;
align-self: start;
background: #101922;
border: 1px solid #2A404F;
border-radius: 15px;
color: #fff;
overflow: hidden
}
.in-app-chat-software-field-service .contextHead {
font-size: 10px;
font-weight: 800;
padding: 11px 13px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #2E404B
}
.in-app-chat-software-field-service .contextHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.in-app-chat-software-field-service .contextBody {
padding: 13px
}
.in-app-chat-software-field-service .contextBody strong {
display: block;
font-size: 14px;
line-height: 1.4
}
.in-app-chat-software-field-service .contextBody p {
color: #C8D7E1;
font-size: 11px;
line-height: 1.6;
margin-top: 6px
}
.in-app-chat-software-field-service .contextTags {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 11px
}
.in-app-chat-software-field-service .contextTags span {
font-size: 8px;
border: 1px solid #415663;
padding: 4px 6px;
border-radius: 5px;
color: #DBE8EF
}
.in-app-chat-software-field-service .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -63px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.in-app-chat-software-field-service .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.in-app-chat-software-field-service .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.in-app-chat-software-field-service .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.in-app-chat-software-field-service .phoneHead {
padding: 13px 11px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.in-app-chat-software-field-service .phoneHead strong {
font-size: 11px;
display: block
}
.in-app-chat-software-field-service .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 4px
}
.in-app-chat-software-field-service .phoneMessages {
padding: 12px 9px;
display: grid;
gap: 9px
}
.in-app-chat-software-field-service .phoneBubble {
padding: 9px;
border-radius: 8px;
background: #F2F6F9;
color: #234A61;
font-size: 9px;
line-height: 1.55
}
.in-app-chat-software-field-service .phoneBubble.blue {
background: #E7F6FE;
margin-left: 15px
}
.in-app-chat-software-field-service .phoneBubble strong {
font-size: 8px;
display: block;
margin-bottom: 3px;
color: #406176
}
.in-app-chat-software-field-service .phoneBottom {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
background: var(--greenbg);
color: #116746;
padding: 8px;
margin: 0 9px 11px;
border-radius: 7px;
font-size: 8px;
font-weight: 750
}
.in-app-chat-software-field-service .phoneBottom .icon {
height: 12px;
width: 12px
}
.in-app-chat-software-field-service .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin-top: 15px;
line-height: 1.55
} .in-app-chat-software-field-service .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.in-app-chat-software-field-service .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.4;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.in-app-chat-software-field-service .pill.green {
background: var(--greenbg);
color: #116746
}
.in-app-chat-software-field-service .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.in-app-chat-software-field-service .jobContext {
padding: 18px;
border: 1px solid #BBDEEF;
border-left: 4px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
gap: 12px;
align-items: center
}
.in-app-chat-software-field-service .jobContext .icon {
color: var(--navy);
width: 28px;
height: 28px
}
.in-app-chat-software-field-service .jobContext strong {
font-size: 14px;
display: block
}
.in-app-chat-software-field-service .jobContext span {
font-size: 11px;
display: block;
color: var(--muted);
margin-top: 4px
}
.in-app-chat-software-field-service .jobContext .pill {
margin-left: auto;
font-size: 9px;
color: #116746
}
.in-app-chat-software-field-service .threadBranches {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
margin-top: 16px
}
.in-app-chat-software-field-service .threadCard {
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px
}
.in-app-chat-software-field-service .threadCardHead {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 850;
color: var(--navy);
margin-bottom: 13px
}
.in-app-chat-software-field-service .threadCardHead .icon {
width: 18px;
height: 18px
}
.in-app-chat-software-field-service .miniBubble {
background: #F0F6FA;
padding: 11px;
border-radius: 10px;
font-size: 11px;
line-height: 1.6;
color: #31566E;
margin-top: 9px
}
.in-app-chat-software-field-service .miniBubble.blue {
background: #E6F6FE
}
.in-app-chat-software-field-service .miniBubble.green {
background: #EAF8F3
}
.in-app-chat-software-field-service .miniBubble small {
display: block;
font-size: 9px;
font-weight: 700;
color: #5B7587;
margin-bottom: 4px
}
.in-app-chat-software-field-service .infoFoot {
padding: 12px 14px;
margin-top: 14px;
border: 1px solid #BFDDEB;
background: #F5FBFF;
border-radius: 10px;
font-size: 11px;
color: #3C647B;
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: 8px
}
.in-app-chat-software-field-service .infoFoot .icon {
height: 17px;
width: 17px;
flex: 0 0 17px;
margin-top: 1px
}
.in-app-chat-software-field-service .siteWindow {
border: 1px solid var(--line);
background: #fff;
border-radius: 14px;
overflow: hidden
}
.in-app-chat-software-field-service .browserBar {
display: flex;
align-items: center;
gap: 5px;
padding: 10px 12px;
background: #F7FBFD;
border-bottom: 1px solid var(--line)
}
.in-app-chat-software-field-service .browserBar i {
height: 5px;
width: 5px;
background: #BACCD6;
border-radius: 50%
}
.in-app-chat-software-field-service .browserBar span {
display: block;
background: #fff;
border: 1px solid #E4EDF2;
border-radius: 5px;
font-size: 9px;
color: #61798A;
padding: 4px 9px;
flex: 1;
margin-left: 6px
}
.in-app-chat-software-field-service .siteBody {
display: grid;
grid-template-columns: .78fr 1.22fr;
gap: 15px;
padding: 20px;
align-items: center;
background: linear-gradient(135deg, #fff, #F1FAFF)
}
.in-app-chat-software-field-service .siteCopy {
min-width: 0
}
.in-app-chat-software-field-service .siteLogo {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 850;
color: var(--navy)
}
.in-app-chat-software-field-service .siteLogo .icon {
width: 18px;
height: 18px
}
.in-app-chat-software-field-service .siteTitle {
font-size: 25px;
letter-spacing: -.035em;
font-weight: 850;
line-height: 1.14;
margin-top: 20px;
color: #102A3D
}
.in-app-chat-software-field-service .siteText {
font-size: 10px;
line-height: 1.7;
color: #61778A;
margin-top: 12px
}
.in-app-chat-software-field-service .siteServices {
display: grid;
gap: 7px;
margin-top: 16px
}
.in-app-chat-software-field-service .siteServices span {
font-size: 9px;
padding: 7px 8px;
background: #fff;
border: 1px solid #DCEAF2;
border-radius: 7px
}
.in-app-chat-software-field-service .webChatWidget {
border: 1px solid #B5D8EC;
background: #fff;
border-radius: 12px;
overflow: hidden
}
.in-app-chat-software-field-service .widgetHead {
background: #0D3D5B;
color: #fff;
padding: 14px
}
.in-app-chat-software-field-service .widgetHead strong {
font-size: 12px;
display: flex;
align-items: center;
gap: 7px
}
.in-app-chat-software-field-service .widgetHead .icon {
width: 17px;
height: 17px
}
.in-app-chat-software-field-service .widgetHead small {
display: block;
font-size: 9px;
color: #D1E5F1;
margin-top: 6px
}
.in-app-chat-software-field-service .widgetMessages {
padding: 10px
}
.in-app-chat-software-field-service .widgetBubble {
border-radius: 8px;
background: #F3F7FA;
padding: 10px;
font-size: 10px;
color: #32566D;
line-height: 1.6
}
.in-app-chat-software-field-service .widgetBubble.reply {
margin: 9px 0 0 10px;
background: #E7F6FE
}
.in-app-chat-software-field-service .widgetComposer {
font-size: 9px;
display: flex;
align-items: center;
gap: 6px;
padding: 10px;
border: 1px solid #D9E8F1;
margin: 1px 10px 10px;
border-radius: 7px;
color: #627A8D
}
.in-app-chat-software-field-service .widgetComposer span {
flex: 1
}
.in-app-chat-software-field-service .widgetComposer .icon {
width: 13px;
height: 13px
}
.in-app-chat-software-field-service .captureRow {
display: flex;
align-items: center;
gap: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 13px;
margin-top: 14px
}
.in-app-chat-software-field-service .captureRow .icon {
width: 20px;
height: 20px;
color: var(--green)
}
.in-app-chat-software-field-service .captureRow strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.in-app-chat-software-field-service .captureRow small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px
}
.in-app-chat-software-field-service .mobileLookup {
display: grid;
grid-template-columns: 196px minmax(0, 1fr);
gap: 18px;
align-items: center
}
.in-app-chat-software-field-service .phoneMock {
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px
}
.in-app-chat-software-field-service .phoneMockInner {
border-radius: 21px;
overflow: hidden;
background: #fff
}
.in-app-chat-software-field-service .phoneMock .phoneHead strong {
font-size: 12px
}
.in-app-chat-software-field-service .phoneMock .phoneHead small {
font-size: 9px
}
.in-app-chat-software-field-service .phoneMock .phoneBubble {
font-size: 11px
}
.in-app-chat-software-field-service .phoneMock .phoneBubble strong {
font-size: 9px
}
.in-app-chat-software-field-service .phoneMock .phoneBottom {
font-size: 9px
}
.in-app-chat-software-field-service .lookupSide {
display: grid;
gap: 13px
}
.in-app-chat-software-field-service .lookupCard {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
padding: 15px
}
.in-app-chat-software-field-service .lookupCard .icon {
width: 21px;
height: 21px;
color: var(--navy);
margin-bottom: 9px
}
.in-app-chat-software-field-service .lookupCard strong {
font-size: 13px;
line-height: 1.4;
display: block;
color: var(--ink)
}
.in-app-chat-software-field-service .lookupCard span {
font-size: 11px;
line-height: 1.6;
display: block;
color: var(--muted);
margin-top: 6px
}
.in-app-chat-software-field-service .lookupCard.done {
border-left: 3px solid var(--green)
}
.in-app-chat-software-field-service .mediaGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px
}
.in-app-chat-software-field-service .mediaItem {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0
}
.in-app-chat-software-field-service .mediaThumb {
height: 145px;
display: grid;
place-items: center;
position: relative;
background: linear-gradient(135deg, #DBEFFA, #EAF7FE)
}
.in-app-chat-software-field-service .mediaThumb.video {
background: linear-gradient(135deg, #DCE9EB, #C8E1E4)
}
.in-app-chat-software-field-service .equipmentSketch {
width: 135px;
max-width: 90%;
height: 110px;
color: #49788E
}
.in-app-chat-software-field-service .playBadge {
width: 36px;
height: 36px;
display: grid;
place-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
color: #063B5C;
background: #FFC928
}
.in-app-chat-software-field-service .playBadge .icon {
width: 17px;
height: 17px
}
.in-app-chat-software-field-service .clipLength {
position: absolute;
right: 8px;
bottom: 7px;
font-size: 9px;
background: #173F52;
color: #fff;
border-radius: 5px;
padding: 3px 5px
}
.in-app-chat-software-field-service .mediaCaption {
padding: 12px
}
.in-app-chat-software-field-service .mediaCaption strong {
display: block;
font-size: 12px;
color: var(--ink)
}
.in-app-chat-software-field-service .mediaCaption small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 4px
}
.in-app-chat-software-field-service .mediaNote {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 14px;
margin-top: 14px;
color: #325B71;
font-size: 11px;
line-height: 1.7
}
.in-app-chat-software-field-service .mediaNote strong {
font-size: 10px;
display: block;
margin-bottom: 6px;
color: var(--navy)
}
.in-app-chat-software-field-service .syncChips {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 14px;
font-size: 10px;
color: #2D627E
}
.in-app-chat-software-field-service .syncChips span {
display: flex;
align-items: center;
gap: 6px
}
.in-app-chat-software-field-service .syncChips .icon {
width: 16px;
height: 16px
} .in-app-chat-software-field-service .cta.darkCta .outline {
background: transparent;
color: #fff;
border-color: #555
}
.in-app-chat-software-field-service .hero .lead {
line-height: 1.7
}
@media(max-width:1100px) and (min-width:961px) {
.in-app-chat-software-field-service .heroGrid {
gap: 28px
}
.in-app-chat-software-field-service .hero .lead {
font-size: 17px
}
.in-app-chat-software-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 160px
}
.in-app-chat-software-field-service .chatLayout {
grid-template-columns: 112px minmax(0, 1fr)
}
.in-app-chat-software-field-service .threadItem {
padding: 10px 5px
}
.in-app-chat-software-field-service .chatMessages {
padding: 12px
}
.in-app-chat-software-field-service .bubble {
font-size: 10px;
padding: 9px
}
.in-app-chat-software-field-service .chatComposer {
margin: 0 12px 12px
}
.in-app-chat-software-field-service .contextBody {
padding: 11px
}
.in-app-chat-software-field-service .contextBody strong {
font-size: 12px
}
.in-app-chat-software-field-service .contextBody p {
font-size: 10px
}
.in-app-chat-software-field-service .mobileLookup {
grid-template-columns: 166px 1fr;
gap: 12px
}
.in-app-chat-software-field-service .lookupCard {
padding: 12px
}
.in-app-chat-software-field-service .siteBody {
gap: 12px;
padding: 14px
}
.in-app-chat-software-field-service .siteTitle {
font-size: 22px
}
.in-app-chat-software-field-service .visual {
padding: 17px
}
.in-app-chat-software-field-service .jobContext {
padding: 13px;
gap: 9px
}
.in-app-chat-software-field-service .threadCard {
padding: 12px
}
}
@media(max-width:960px) {
.in-app-chat-software-field-service .heroGrid,
.in-app-chat-software-field-service .feature,
.in-app-chat-software-field-service .aiGrid,
.in-app-chat-software-field-service .final {
grid-template-columns: 1fr
}
.in-app-chat-software-field-service .heroGrid {
gap: 36px
}
.in-app-chat-software-field-service .hero h1 {
max-width: 780px
}
.in-app-chat-software-field-service .hero .lead {
max-width: 750px
}
.in-app-chat-software-field-service .heroVisual {
width: 100%;
max-width: 610px;
margin: auto
}
.in-app-chat-software-field-service .feature.reverse .visual {
order: 0
}
.in-app-chat-software-field-service .feature {
gap: 30px
}
.in-app-chat-software-field-service .feature>div:first-child {
max-width: 800px
}
.in-app-chat-software-field-service .outcomes,
.in-app-chat-software-field-service .featureGrid,
.in-app-chat-software-field-service .connectedGrid,
.in-app-chat-software-field-service .useCases {
grid-template-columns: repeat(2, 1fr)
}
.in-app-chat-software-field-service .logos {
grid-template-columns: repeat(3, 1fr)
}
.in-app-chat-software-field-service .reviews {
grid-template-columns: 1fr
}
.in-app-chat-software-field-service .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.in-app-chat-software-field-service .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.in-app-chat-software-field-service .ratingItem:nth-child(2) {
border: 0
} .final .btn {
min-width: 195px
}
.visual {
max-width: 650px;
width: 100%;
margin: auto
}
.aiGrid {
gap: 30px
}
.aiMini {
max-width: 760px
}
.promptBox {
width: 100%
}
}
@media(max-width:640px) {
.in-app-chat-software-field-service .wrap {
width: calc(100% - 24px)
}
.in-app-chat-software-field-service .hero {
padding: 32px 0 42px
}
.in-app-chat-software-field-service .lead {
font-size: 17px
}
.in-app-chat-software-field-service .sectionHead p {
font-size: 16px
}
.in-app-chat-software-field-service .sectionHead {
margin-bottom: 28px
}
.in-app-chat-software-field-service .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.in-app-chat-software-field-service .heroGrid {
gap: 28px
}
.in-app-chat-software-field-service .hero .actions {
gap: 8px
}
.in-app-chat-software-field-service .hero .actions .btn {
flex: 1 1 140px;
padding: 12px 14px
}
.in-app-chat-software-field-service .micro {
font-size: 11px
}
.in-app-chat-software-field-service .heroPills {
gap: 6px
}
.in-app-chat-software-field-service .heroPills span {
font-size: 9px
}
.in-app-chat-software-field-service .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.in-app-chat-software-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 160px;
gap: 12px 10px
}
.in-app-chat-software-field-service .assetTag {
font-size: 9px
}
.in-app-chat-software-field-service .boardHeader {
padding: 13px
}
.in-app-chat-software-field-service .boardBrand {
font-size: 12px
}
.in-app-chat-software-field-service .sampleBadge {
font-size: 7px
}
.in-app-chat-software-field-service .chatLayout {
grid-template-columns: 105px minmax(0, 1fr)
}
.in-app-chat-software-field-service .chatSidebar {
padding: 12px 6px
}
.in-app-chat-software-field-service .sidebarTitle {
font-size: 10px;
padding-left: 4px
}
.in-app-chat-software-field-service .threadItem {
padding: 10px 5px
}
.in-app-chat-software-field-service .threadItem strong {
font-size: 10px
}
.in-app-chat-software-field-service .threadItem span {
font-size: 8px
}
.in-app-chat-software-field-service .threadHeading {
padding: 12px;
gap: 7px
}
.in-app-chat-software-field-service .threadHeading strong {
font-size: 11px
}
.in-app-chat-software-field-service .threadHeading small {
font-size: 8px
}
.in-app-chat-software-field-service .chatAvatar {
width: 27px;
height: 27px;
flex-basis: 27px;
font-size: 9px
}
.in-app-chat-software-field-service .chatMessages {
padding: 12px;
gap: 10px
}
.in-app-chat-software-field-service .message {
max-width: 97%
}
.in-app-chat-software-field-service .bubble {
padding: 9px;
font-size: 10px
}
.in-app-chat-software-field-service .messageAuthor {
font-size: 8px
}
.in-app-chat-software-field-service .bubbleMedia {
font-size: 8px;
padding: 6px
}
.in-app-chat-software-field-service .chatComposer {
margin: 0 12px 12px;
padding: 8px;
font-size: 9px
}
.in-app-chat-software-field-service .boardFooter {
font-size: 8px;
padding: 10px 12px;
padding-right: 168px;
min-height: 54px
}
.in-app-chat-software-field-service .assetPhone {
margin-top: -46px;
border-radius: 24px
}
.in-app-chat-software-field-service .phoneScreen {
border-radius: 18px
}
.in-app-chat-software-field-service .phoneHead {
padding: 11px 9px
}
.in-app-chat-software-field-service .phoneHead strong {
font-size: 10px
}
.in-app-chat-software-field-service .phoneHead small {
font-size: 8px
}
.in-app-chat-software-field-service .phoneBubble {
font-size: 9px;
padding: 8px
}
.in-app-chat-software-field-service .phoneBubble.blue {
margin-left: 9px
}
.in-app-chat-software-field-service .phoneBottom {
font-size: 7px
}
.in-app-chat-software-field-service .contextHead {
padding: 10px;
font-size: 9px;
gap: 6px
}
.in-app-chat-software-field-service .contextBody {
padding: 11px
}
.in-app-chat-software-field-service .contextBody strong {
font-size: 12px
}
.in-app-chat-software-field-service .contextBody p {
font-size: 10px
}
.in-app-chat-software-field-service .contextTags {
gap: 4px
}
.in-app-chat-software-field-service .contextTags span {
font-size: 7px
}
.in-app-chat-software-field-service .diagramCaption {
font-size: 9px
}
.in-app-chat-software-field-service .trust {
padding: 23px 0
}
.in-app-chat-software-field-service .trustLabel {
font-size: 12px
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .logo.dhl {
font-size: 19px
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .logo.adobe {
font-size: 17px
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .logo.golden {
font-size: 8px
}
.in-app-chat-software-field-service .in-app-chat-software-field-service .fl,
.in-app-chat-software-field-service .outcomes,
.in-app-chat-software-field-service .featureGrid,
.in-app-chat-software-field-service .connectedGrid,
.in-app-chat-software-field-service .useCases {
grid-template-columns: 1fr
}
.in-app-chat-software-field-service .fi {
font-size: 14px
}
.in-app-chat-software-field-service .outcome {
padding: 21px
}
.in-app-chat-software-field-service .outcome strong {
margin-top: 12px
}
.in-app-chat-software-field-service .outcome span {
font-size: 14px
}
.in-app-chat-software-field-service .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.in-app-chat-software-field-service .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.in-app-chat-software-field-service .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.in-app-chat-software-field-service .uiSub {
font-size: 9px
}
.in-app-chat-software-field-service .jobContext {
padding: 13px;
gap: 9px
}
.in-app-chat-software-field-service .jobContext strong {
font-size: 12px
}
.in-app-chat-software-field-service .jobContext span {
font-size: 10px
}
.in-app-chat-software-field-service .jobContext .pill {
font-size: 8px
}
.in-app-chat-software-field-service .threadBranches {
gap: 10px
}
.in-app-chat-software-field-service .threadCard {
padding: 12px
}
.in-app-chat-software-field-service .threadCardHead {
font-size: 11px;
gap: 6px;
align-items: flex-start
}
.in-app-chat-software-field-service .miniBubble {
font-size: 10px;
padding: 9px
}
.in-app-chat-software-field-service .infoFoot {
font-size: 10px
}
.in-app-chat-software-field-service .siteBody {
padding: 14px;
gap: 12px
}
.in-app-chat-software-field-service .siteTitle {
font-size: 22px
}
.in-app-chat-software-field-service .siteLogo {
font-size: 9px
}
.in-app-chat-software-field-service .siteText {
font-size: 10px
}
.in-app-chat-software-field-service .siteServices span {
font-size: 8px
}
.in-app-chat-software-field-service .widgetHead {
padding: 11px
}
.in-app-chat-software-field-service .widgetHead strong {
font-size: 11px
}
.in-app-chat-software-field-service .widgetBubble {
font-size: 10px;
padding: 9px
}
.in-app-chat-software-field-service .mobileLookup {
grid-template-columns: 158px minmax(0, 1fr);
gap: 12px
}
.in-app-chat-software-field-service .phoneMock .phoneBubble {
font-size: 10px
}
.in-app-chat-software-field-service .phoneMock .phoneHead strong {
font-size: 11px
}
.in-app-chat-software-field-service .lookupCard {
padding: 12px
}
.in-app-chat-software-field-service .lookupCard strong {
font-size: 11px
}
.in-app-chat-software-field-service .lookupCard span {
font-size: 10px
}
.in-app-chat-software-field-service .mediaGrid {
gap: 11px
}
.in-app-chat-software-field-service .mediaThumb {
height: 124px
}
.in-app-chat-software-field-service .mediaCaption {
padding: 11px
}
.in-app-chat-software-field-service .mediaCaption strong {
font-size: 11px
}
.in-app-chat-software-field-service .mediaCaption small {
font-size: 9px
}
.in-app-chat-software-field-service .mediaNote {
font-size: 10px
}
.in-app-chat-software-field-service .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.in-app-chat-software-field-service .aiMini div {
padding: 16px
}
.in-app-chat-software-field-service .aiMini strong {
font-size: 14px
}
.in-app-chat-software-field-service .aiMini span {
font-size: 13px
}
.in-app-chat-software-field-service .promptBox {
padding: 18px;
border-radius: 17px
}
.in-app-chat-software-field-service .prompt {
font-size: 13px;
padding: 13px
}
.in-app-chat-software-field-service .promptHead {
font-size: 19px
}
.in-app-chat-software-field-service .promptFoot {
font-size: 10px !important
}
.in-app-chat-software-field-service .connectedCard {
padding: 22px
}
.in-app-chat-software-field-service .connectedCard p,
.in-app-chat-software-field-service .featureCard p,
.in-app-chat-software-field-service .useCase p {
font-size: 14px
}
.in-app-chat-software-field-service .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.in-app-chat-software-field-service .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.in-app-chat-software-field-service .ratingItem {
border: 0
}
.in-app-chat-software-field-service .ratingLead {
margin-bottom: 3px
}
.in-app-chat-software-field-service .review p {
font-size: 14px
}
.in-app-chat-software-field-service .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.in-app-chat-software-field-service .ctaBtns {
width: 100%
}
.in-app-chat-software-field-service .ctaBtns .btn {
flex: 1
}
.in-app-chat-software-field-service .cta p {
font-size: 14px
} .in-app-chat-software-field-service .final h2 {
font-size: 32px
}   .in-app-chat-software-field-service .faq details {
padding: 16px
}
.in-app-chat-software-field-service .faq summary {
font-size: 14px
}
.in-app-chat-software-field-service .faq details p {
font-size: 14px
}
}
@media(max-width:420px) {
.in-app-chat-software-field-service .chatSidebar {
display: none
}
.in-app-chat-software-field-service .chatLayout {
grid-template-columns: 1fr
}
.in-app-chat-software-field-service .chatMessages {
padding: 14px
}
.in-app-chat-software-field-service .bubble {
font-size: 11px
}
.in-app-chat-software-field-service .message {
max-width: 88%
}
.in-app-chat-software-field-service .threadHeading strong {
font-size: 12px
}
.in-app-chat-software-field-service .threadHeading small {
font-size: 9px
}
.in-app-chat-software-field-service .chatAvatar {
width: 30px;
height: 30px;
flex-basis: 30px
}
.in-app-chat-software-field-service .chatComposer {
font-size: 10px
}
.in-app-chat-software-field-service .contextTags {
display: none
}
.in-app-chat-software-field-service .threadBranches {
grid-template-columns: 1fr
}
.in-app-chat-software-field-service .threadCard {
padding: 14px
}
.in-app-chat-software-field-service .threadCardHead {
font-size: 12px
}
.in-app-chat-software-field-service .miniBubble {
font-size: 11px
}
.in-app-chat-software-field-service .siteBody {
grid-template-columns: 1fr
}
.in-app-chat-software-field-service .siteCopy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
align-items: start
}
.in-app-chat-software-field-service .siteLogo {
grid-column: 1/-1
}
.in-app-chat-software-field-service .siteTitle {
font-size: 22px;
margin-top: 3px
}
.in-app-chat-software-field-service .siteText {
margin-top: 0
}
.in-app-chat-software-field-service .siteServices {
grid-column: 1/-1;
grid-template-columns: 1fr 1fr;
margin-top: 0
}
.in-app-chat-software-field-service .siteServices span:last-child {
display: none
}
.in-app-chat-software-field-service .widgetHead strong {
font-size: 12px
}
.in-app-chat-software-field-service .widgetBubble {
font-size: 11px
}
.in-app-chat-software-field-service .widgetComposer {
font-size: 10px
}
.in-app-chat-software-field-service .mobileLookup {
grid-template-columns: 1fr
}
.in-app-chat-software-field-service .phoneMock {
max-width: 220px;
width: 100%;
margin: auto
}
.in-app-chat-software-field-service .phoneMock .phoneBubble {
font-size: 12px
}
.in-app-chat-software-field-service .phoneMock .phoneHead strong {
font-size: 13px
}
.in-app-chat-software-field-service .phoneMock .phoneHead small {
font-size: 10px
}
.in-app-chat-software-field-service .lookupSide {
grid-template-columns: 1fr
}
.in-app-chat-software-field-service .lookupCard strong {
font-size: 13px
}
.in-app-chat-software-field-service .lookupCard span {
font-size: 12px
}
.in-app-chat-software-field-service .lookupCard {
padding: 14px
}
.in-app-chat-software-field-service .mediaGrid {
grid-template-columns: 1fr 1fr
}
.in-app-chat-software-field-service .jobContext .pill {
display: none
}
}
@media(max-width:360px) {
.in-app-chat-software-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 144px;
gap: 10px 8px
}
.in-app-chat-software-field-service .contextHead {
font-size: 8px;
padding: 9px;
gap: 5px
}
.in-app-chat-software-field-service .contextHead .icon {
width: 14px;
height: 14px
}
.in-app-chat-software-field-service .contextBody {
padding: 10px
}
.in-app-chat-software-field-service .contextBody strong {
font-size: 11px
}
.in-app-chat-software-field-service .contextBody p {
font-size: 9px
}
.in-app-chat-software-field-service .phoneHead strong {
font-size: 9px
}
.in-app-chat-software-field-service .phoneHead small {
font-size: 7px
}
.in-app-chat-software-field-service .phoneMessages {
padding: 10px 8px;
gap: 7px
}
.in-app-chat-software-field-service .phoneBubble {
font-size: 8px
}
.in-app-chat-software-field-service .phoneBubble strong {
font-size: 7px
}
.in-app-chat-software-field-service .boardFooter {
padding-right: 154px
}
.in-app-chat-software-field-service .mediaCaption {
padding: 9px
}
.in-app-chat-software-field-service .mediaCaption strong {
font-size: 10px
}
.in-app-chat-software-field-service .syncChips {
gap: 8px;
font-size: 9px
}
}   .quickBooks-integration-field .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.quickBooks-integration-field .dark a:focus-visible,
.quickBooks-integration-field .final a:focus-visible {
outline-color: var(--yellow)
}
.quickBooks-integration-field .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.quickBooks-integration-field .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.quickBooks-integration-field .soft {
background: var(--sky2)
}
.quickBooks-integration-field .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.quickBooks-integration-field .dark h2,
.quickBooks-integration-field .dark h3 {
color: #fff
}
.quickBooks-integration-field .dark p {
color: #D6D6D6
}
.quickBooks-integration-field .dark .ey {
background: var(--yellow)
}
.quickBooks-integration-field .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.quickBooks-integration-field .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.quickBooks-integration-field .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.quickBooks-integration-field .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.quickBooks-integration-field .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.quickBooks-integration-field .textLink .icon {
width: 16px;
height: 16px
}
.skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.skipLink:focus {
top: 12px
} .quickBooks-integration-field .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.quickBooks-integration-field .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.quickBooks-integration-field .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.quickBooks-integration-field .outcome:nth-child(2):before {
background: var(--yellow)
}
.quickBooks-integration-field .outcome:nth-child(3):before {
background: var(--green)
}
.quickBooks-integration-field .outcome:nth-child(4):before {
background: var(--purple)
}
.quickBooks-integration-field .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.quickBooks-integration-field .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.quickBooks-integration-field .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .quickBooks-integration-field .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.quickBooks-integration-field .feature.reverse .visual {
order: -1
}
.quickBooks-integration-field .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.quickBooks-integration-field .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.quickBooks-integration-field .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.quickBooks-integration-field .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.quickBooks-integration-field .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.quickBooks-integration-field .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.quickBooks-integration-field .visual>* {
position: relative;
z-index: 2
}
.quickBooks-integration-field .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.quickBooks-integration-field .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.quickBooks-integration-field .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.quickBooks-integration-field .uiHeading .icon {
width: 19px;
height: 19px
}
.quickBooks-integration-field .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.quickBooks-integration-field .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.quickBooks-integration-field .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.quickBooks-integration-field .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.quickBooks-integration-field .pill.green {
background: var(--greenbg);
color: #116746
}
.quickBooks-integration-field .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.quickBooks-integration-field .pill.gray {
background: #F0F3F5;
color: #586C79
}
.quickBooks-integration-field .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .quickBooks-integration-field .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.quickBooks-integration-field .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.quickBooks-integration-field .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.quickBooks-integration-field .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.quickBooks-integration-field .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.quickBooks-integration-field .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.quickBooks-integration-field .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.quickBooks-integration-field .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.quickBooks-integration-field .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.quickBooks-integration-field .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .quickBooks-integration-field .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.quickBooks-integration-field .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.quickBooks-integration-field .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.quickBooks-integration-field .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.quickBooks-integration-field .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.quickBooks-integration-field .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.quickBooks-integration-field .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .quickBooks-integration-field .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.quickBooks-integration-field .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.quickBooks-integration-field .featureCard:hover {
transform: translateY(-3px)
}
.quickBooks-integration-field .featureIcon,
.quickBooks-integration-field .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.quickBooks-integration-field .featureIcon .icon,
.quickBooks-integration-field .useIcon .icon {
width: 22px;
height: 22px
}
.quickBooks-integration-field .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.quickBooks-integration-field .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .quickBooks-integration-field .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.quickBooks-integration-field .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.quickBooks-integration-field .useCase h3 {
font-size: 20px
}
.quickBooks-integration-field .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.quickBooks-integration-field .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.quickBooks-integration-field .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.quickBooks-integration-field .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.quickBooks-integration-field .review h3 {
font-size: 22px
}
.quickBooks-integration-field .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.quickBooks-integration-field .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.quickBooks-integration-field .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.quickBooks-integration-field .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.quickBooks-integration-field .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.quickBooks-integration-field .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.quickBooks-integration-field .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.quickBooks-integration-field .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.quickBooks-integration-field .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.quickBooks-integration-field .cta h3 {
font-size: 19px
}
.quickBooks-integration-field .cta.darkCta h3 {
color: #fff
}
.quickBooks-integration-field .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.quickBooks-integration-field .cta.darkCta p {
color: #D1D1D1
}
.quickBooks-integration-field .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
} .quickBooks-integration-field .reveal {
opacity: 1;
transform: none
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.quickBooks-integration-field .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.quickBooks-integration-field .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.quickBooks-integration-field .heroGrid>*,
.quickBooks-integration-field .feature>*,
.quickBooks-integration-field .aiGrid>* {
min-width: 0
}
.quickBooks-integration-field .hero h1 {
max-width: 590px
}
.quickBooks-integration-field .quickBooks-integration-field .compatNote {
font-size: 12px;
color: var(--muted);
line-height: 1.7;
margin-top: 16px;
max-width: 515px
}
.quickBooks-integration-field .heroVisual {
position: relative;
min-width: 0
}
.quickBooks-integration-field .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 184px;
gap: 14px 12px;
align-items: start
}
.quickBooks-integration-field .assetStage:before {
content: "";
position: absolute;
inset: 60px 0 18px 22px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.quickBooks-integration-field .assetStage>* {
position: relative;
z-index: 1
}
.quickBooks-integration-field .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px
}
.quickBooks-integration-field .syncBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 19px;
overflow: hidden
}
.quickBooks-integration-field .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--line)
}
.quickBooks-integration-field .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.quickBooks-integration-field .brandTile {
width: 28px;
height: 28px;
flex: 0 0 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.quickBooks-integration-field .brandTile .icon {
width: 18px;
height: 18px
}
.quickBooks-integration-field .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.quickBooks-integration-field .syncApps {
display: grid;
grid-template-columns: minmax(0, 1fr) 75px minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 26px 23px 22px
}
.quickBooks-integration-field .appIdentity {
display: flex;
align-items: center;
flex-direction: column;
text-align: center
}
.quickBooks-integration-field .appMark {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
margin-bottom: 10px
}
.quickBooks-integration-field .appMark.blue {
background: #E8F7FF;
color: var(--brand2)
}
.quickBooks-integration-field .appMark.green {
background: #E9F8EF;
color: #187E48
}
.quickBooks-integration-field .appMark .icon {
height: 25px;
width: 25px
}
.quickBooks-integration-field .appIdentity strong {
font-size: 15px;
line-height: 1.4
}
.quickBooks-integration-field .appIdentity small {
color: var(--muted);
font-size: 10px;
margin-top: 4px
}
.quickBooks-integration-field .connectionBridge {
display: flex;
align-items: center;
flex-direction: column;
gap: 7px;
color: var(--green);
font-size: 9px;
font-weight: 750
}
.quickBooks-integration-field .connectionBridge .icon {
height: 28px;
width: 38px
}
.quickBooks-integration-field .syncDirectionRows {
margin: 0 20px;
padding: 13px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: grid;
gap: 12px
}
.quickBooks-integration-field .syncDirectionRows>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
font-size: 11px
}
.quickBooks-integration-field .syncDirectionRows>div>span {
display: flex;
align-items: center;
gap: 7px;
font-weight: 700
}
.quickBooks-integration-field .syncDirectionRows .icon {
height: 16px;
width: 16px;
color: var(--navy);
}
.quickBooks-integration-field .syncDirectionRows strong {
display: flex;
gap: 7px;
align-items: center;
font-size: 10px;
font-weight: 650;
color: #456678
}
.quickBooks-integration-field .syncActivity {
padding: 16px 20px 13px
}
.quickBooks-integration-field .activityLabel {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
font-weight: 800;
margin-bottom: 5px
}
.quickBooks-integration-field .activityRow {
display: grid;
grid-template-columns: 31px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 11px 0
}
.quickBooks-integration-field .activityRow+.activityRow {
border-top: 1px solid #E9F0F4
}
.quickBooks-integration-field .recordGlyph {
width: 31px;
height: 31px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--sky2);
color: var(--navy)
}
.quickBooks-integration-field .recordGlyph .icon {
width: 17px;
height: 17px
}
.quickBooks-integration-field .activityRow strong {
display: block;
font-size: 11px
}
.quickBooks-integration-field .activityRow small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.quickBooks-integration-field .activityRow .pill {
font-size: 8px
}
.quickBooks-integration-field .boardFooter {
padding: 12px 196px 12px 15px;
min-height: 50px;
background: var(--sky2);
border-top: 1px solid var(--line);
color: #536F82;
font-size: 9px;
display: flex;
gap: 7px;
align-items: center;
line-height: 1.5
}
.quickBooks-integration-field .boardFooter .icon {
width: 15px;
height: 15px;
color: var(--green)
}
.quickBooks-integration-field .syncContext {
grid-column: 1;
align-self: start;
background: #101922;
border: 1px solid #2A404F;
border-radius: 15px;
color: #fff;
overflow: hidden
}
.quickBooks-integration-field .contextHead {
font-size: 10px;
font-weight: 800;
padding: 11px 13px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #2E404B
}
.quickBooks-integration-field .contextHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.quickBooks-integration-field .contextBody {
padding: 15px
}
.quickBooks-integration-field .contextBody>strong {
display: block;
font-size: 19px;
line-height: 1.3;
letter-spacing: -.02em
}
.quickBooks-integration-field .contextBody p {
color: #C8D7E1;
font-size: 11px;
line-height: 1.6;
margin-top: 9px
}
.quickBooks-integration-field .contextTags {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 11px
}
.quickBooks-integration-field .contextTags span {
font-size: 8px;
border: 1px solid #415663;
padding: 4px 6px;
border-radius: 5px;
color: #DBE8EF
}
.quickBooks-integration-field .assetPhone {
grid-column: 2;
grid-row: 3;
margin-top: -49px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.quickBooks-integration-field .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.quickBooks-integration-field .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.quickBooks-integration-field .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.quickBooks-integration-field .phoneHead {
padding: 12px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.quickBooks-integration-field .phoneHead strong {
font-size: 11px;
display: block
}
.quickBooks-integration-field .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.quickBooks-integration-field .phoneBody {
padding: 16px 12px 12px
}
.quickBooks-integration-field .paperLabel {
font-size: 9px;
color: var(--muted);
font-weight: 800;
letter-spacing: .03em;
display: block
}
.quickBooks-integration-field .phoneBody .paperLabel {
font-size: 7px
}
.quickBooks-integration-field .phoneAmount {
display: block;
font-size: 27px;
color: var(--navy);
letter-spacing: -.04em;
line-height: 1.3;
margin-top: 7px
}
.quickBooks-integration-field .phoneAmounts {
display: grid;
gap: 8px;
margin: 16px 0
}
.quickBooks-integration-field .phoneAmounts>div {
display: flex;
justify-content: space-between;
font-size: 10px;
gap: 8px
}
.quickBooks-integration-field .phoneAmounts>div>span {
color: var(--muted)
}
.quickBooks-integration-field .phoneAmounts b {
color: var(--navy)
}
.quickBooks-integration-field .phoneUpdate {
padding: 10px 8px;
background: var(--greenbg);
border: 1px solid #C9E8D8;
color: #166545;
border-radius: 8px;
display: flex;
align-items: center;
gap: 7px;
font-size: 9px;
font-weight: 650;
line-height: 1.5
}
.quickBooks-integration-field .phoneUpdate .icon {
width: 16px;
height: 16px
}
.quickBooks-integration-field .phoneNote {
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 10px
}
.quickBooks-integration-field .diagramCaption {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
text-align: center;
margin-top: 12px
} .quickBooks-integration-field .foundation {
display: flex;
gap: 10px;
align-items: center;
background: #0D2637;
color: #fff;
padding: 16px;
border-radius: 12px;
margin-bottom: 16px
}
.quickBooks-integration-field .foundationIcon {
display: grid;
place-items: center;
width: 35px;
height: 35px;
background: #213E50;
border: 1px solid #365568;
border-radius: 10px;
color: var(--yellow);
flex: 0 0 35px
}
.quickBooks-integration-field .foundationIcon .icon {
width: 21px;
height: 21px
}
.quickBooks-integration-field .foundation>div {
flex: 1;
min-width: 0
}
.quickBooks-integration-field .foundation strong {
font-size: 13px;
display: block
}
.quickBooks-integration-field .foundation small {
display: flex;
align-items: center;
gap: 6px;
color: #D0E0EA;
font-size: 10px;
margin-top: 5px
}
.quickBooks-integration-field .foundation small .icon {
width: 13px;
height: 13px
}
.quickBooks-integration-field .foundation .pill {
font-size: 8px
}
.quickBooks-integration-field .masterColumnLabels,
.quickBooks-integration-field .masterRow {
display: grid;
grid-template-columns: 1.35fr .8fr .7fr;
gap: 12px;
align-items: center
}
.quickBooks-integration-field .masterColumnLabels {
font-size: 9px;
color: var(--muted);
padding: 0 12px 10px
}
.quickBooks-integration-field .masterColumnLabels>span:last-child {
text-align: right
}
.quickBooks-integration-field .masterRow {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 12px;
margin-bottom: 9px
}
.quickBooks-integration-field .masterName {
display: flex;
align-items: center;
gap: 9px;
min-width: 0
}
.quickBooks-integration-field .masterName>.icon {
height: 20px;
width: 20px;
color: var(--navy)
}
.quickBooks-integration-field .masterName strong {
font-size: 12px;
display: block
}
.quickBooks-integration-field .masterName small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.quickBooks-integration-field .twoWay {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
color: #187248
}
.quickBooks-integration-field .twoWay .icon {
height: 17px;
width: 17px
}
.quickBooks-integration-field .idTag {
justify-self: end;
padding: 5px 8px;
border: 1px solid #D4E4EC;
background: #F5FBFF;
border-radius: 6px;
font-size: 10px;
font-weight: 750;
color: var(--navy)
}
.quickBooks-integration-field .mappingNote {
display: flex;
align-items: flex-start;
gap: 10px;
background: #FFFBE9;
border: 1px solid #EDDEA8;
border-radius: 11px;
padding: 14px;
margin-top: 15px
}
.quickBooks-integration-field .mappingNote>.icon {
height: 19px;
width: 19px;
color: #8A6C1F
}
.quickBooks-integration-field .mappingNote strong {
font-size: 11px;
line-height: 1.5;
display: block;
color: #5E4D1A
}
.quickBooks-integration-field .mappingNote span {
font-size: 10px;
color: #766335;
display: block;
line-height: 1.6;
margin-top: 4px
} .quickBooks-integration-field .paperPanel {
padding: 20px;
background: #fff;
border: 1px solid #CBDDE7;
border-radius: 13px
}
.quickBooks-integration-field .paperHeader {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px
}
.quickBooks-integration-field .paperHeader strong {
font-size: 18px;
color: var(--navy);
display: block;
margin-top: 4px
}
.quickBooks-integration-field .paperHeader .pill {
font-size: 8px
}
.quickBooks-integration-field .paperCustomer {
margin: 17px 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--line)
}
.quickBooks-integration-field .paperCustomer strong {
font-size: 12px;
display: block
}
.quickBooks-integration-field .paperCustomer span {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 4px
}
.quickBooks-integration-field .paperRow {
display: flex;
justify-content: space-between;
gap: 15px;
padding: 10px 0;
border-bottom: 1px solid #E7EEF3;
font-size: 11px
}
.quickBooks-integration-field .paperRow>b {
color: var(--navy);
white-space: nowrap
}
.quickBooks-integration-field .paperTotal {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
margin-top: 15px
}
.quickBooks-integration-field .paperTotal>span {
font-size: 11px;
color: var(--muted)
}
.quickBooks-integration-field .paperTotal>strong {
font-size: 27px;
color: var(--navy);
letter-spacing: -.025em;
line-height: 1.3
}
.quickBooks-integration-field .paperChecks {
display: flex;
gap: 14px;
margin-top: 17px;
flex-wrap: wrap
}
.quickBooks-integration-field .paperChecks span {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
color: #1B7551
}
.quickBooks-integration-field .paperChecks .icon {
width: 13px;
height: 13px
}
.quickBooks-integration-field .verticalConnector {
height: 34px;
display: grid;
place-items: center;
color: #5194B5
}
.quickBooks-integration-field .verticalConnector>.icon {
transform: rotate(90deg);
height: 22px;
width: 22px
}
.quickBooks-integration-field .postingCard {
display: flex;
gap: 11px;
align-items: center;
background: #ECF9F2;
border: 1px solid #B9DFC9;
padding: 15px;
border-radius: 12px
}
.quickBooks-integration-field .postingIcon {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 10px;
background: #DDF2E6;
display: grid;
place-items: center;
color: #157445
}
.quickBooks-integration-field .postingIcon>.icon {
width: 20px;
height: 20px
}
.quickBooks-integration-field .postingCard>div {
flex: 1;
min-width: 0
}
.quickBooks-integration-field .postingCard strong {
font-size: 12px;
line-height: 1.4;
display: block
}
.quickBooks-integration-field .postingCard small {
font-size: 9px;
line-height: 1.6;
color: #527764;
display: block;
margin-top: 4px
}
.quickBooks-integration-field .postingCard .pill {
font-size: 8px
}
.quickBooks-integration-field .infoFoot {
display: flex;
align-items: flex-start;
gap: 8px;
color: #526D7E;
font-size: 10px;
line-height: 1.6;
margin-top: 14px
}
.quickBooks-integration-field .infoFoot>.icon {
height: 16px;
width: 16px;
margin-top: 1px;
color: var(--navy)
} .quickBooks-integration-field .paymentOrigin {
display: flex;
align-items: center;
gap: 11px;
background: #fff;
border: 1px solid #C8DED2;
border-radius: 12px;
padding: 16px
}
.quickBooks-integration-field .paymentOrigin>div {
flex: 1;
min-width: 0
}
.quickBooks-integration-field .paymentOrigin .paperLabel {
font-size: 8px;
color: #357256
}
.quickBooks-integration-field .paymentOrigin strong {
font-size: 12px;
line-height: 1.5;
display: block;
margin-top: 4px
}
.quickBooks-integration-field .paymentOrigin small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.quickBooks-integration-field .paymentOrigin>b {
font-size: 21px;
color: var(--navy);
letter-spacing: -.025em
}
.quickBooks-integration-field .refreshBridge {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin: 19px 0;
font-size: 10px;
color: var(--muted)
}
.quickBooks-integration-field .refreshBridge>.icon {
width: 15px;
height: 15px;
color: #65A2BE
}
.quickBooks-integration-field .refreshPill {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border: 1px solid #CCE3EF;
border-radius: 999px;
background: #fff;
font-size: 9px;
font-weight: 700;
color: var(--navy)
}
.quickBooks-integration-field .refreshPill .icon {
width: 13px;
height: 13px
}
.quickBooks-integration-field .balancePanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 17px
}
.quickBooks-integration-field .balanceHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 17px
}
.quickBooks-integration-field .balanceHeader strong {
font-size: 13px
}
.quickBooks-integration-field .balanceHeader .pill {
font-size: 8px
}
.quickBooks-integration-field .balanceGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
.quickBooks-integration-field .balanceGrid>div {
background: #F7FBFE;
border: 1px solid #D8E8F1;
border-radius: 9px;
padding: 12px 10px
}
.quickBooks-integration-field .balanceGrid>div.paid {
background: #EFFAF4;
border-color: #C9E6D6
}
.quickBooks-integration-field .balanceGrid>div.remaining {
background: #FFFBEC;
border-color: #F1DEA0
}
.quickBooks-integration-field .balanceGrid span {
display: block;
font-size: 9px;
color: var(--muted)
}
.quickBooks-integration-field .balanceGrid strong {
display: block;
font-size: 24px;
letter-spacing: -.03em;
color: var(--navy);
line-height: 1.3;
margin-top: 8px
}
.quickBooks-integration-field .balanceTrack {
height: 9px;
border-radius: 99px;
background: #E4EBEF;
overflow: hidden;
margin-top: 20px
}
.quickBooks-integration-field .balanceTrack>span {
display: block;
width: 60%;
height: 100%;
background: #159567;
border-radius: 99px
}
.quickBooks-integration-field .balanceLegend {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 8px
}
.quickBooks-integration-field .balanceLegend>span:first-child {
color: #16825C
}
.quickBooks-integration-field .balanceLegend i {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
margin-right: 4px
}
.quickBooks-integration-field .refreshModes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px
}
.quickBooks-integration-field .refreshModes>div {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px 14px;
display: grid;
grid-template-columns: 21px 1fr;
gap: 3px 9px;
align-items: center
}
.quickBooks-integration-field .refreshModes .icon {
grid-row: 1/3;
height: 19px;
width: 19px;
color: var(--navy)
}
.quickBooks-integration-field .refreshModes strong {
font-size: 10px
}
.quickBooks-integration-field .refreshModes small {
font-size: 9px;
color: var(--muted)
} .quickBooks-integration-field .costLane {
border: 1px solid #CDDDE7;
background: #fff;
border-radius: 13px;
overflow: hidden
}
.quickBooks-integration-field .costLane+.costLane {
margin-top: 15px
}
.quickBooks-integration-field .costLaneHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 15px;
background: #F4FAFE;
border-bottom: 1px solid var(--line)
}
.quickBooks-integration-field .costLaneHead>span:first-child {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 750;
color: var(--navy)
}
.quickBooks-integration-field .costLaneHead .icon {
height: 18px;
width: 18px
}
.quickBooks-integration-field .costLaneHead .pill {
font-size: 8px
}
.quickBooks-integration-field .costLaneBody {
display: grid;
grid-template-columns: 1.15fr 18px 1fr;
gap: 13px;
align-items: center;
padding: 18px 15px
}
.quickBooks-integration-field .costLaneBody small {
font-size: 9px;
color: var(--muted);
display: block
}
.quickBooks-integration-field .costLaneBody strong {
font-size: 12px;
line-height: 1.4;
display: block;
margin-top: 7px
}
.quickBooks-integration-field .costLaneBody div>span {
font-size: 10px;
color: var(--muted);
display: block;
line-height: 1.6;
margin-top: 5px
}
.quickBooks-integration-field .costArrow .icon {
width: 18px;
height: 18px;
color: #5497B5
}
.quickBooks-integration-field .costDestination {
padding: 12px;
border: 1px solid #CBE7D7;
border-radius: 9px;
background: #F0FAF4
}
.quickBooks-integration-field .costDestination strong {
color: #166744
}
.quickBooks-integration-field .trademarkNote {
color: var(--muted);
font-size: 11px;
line-height: 1.65;
text-align: center;
margin-top: 20px
} @media(max-width:1100px) and (min-width:961px) {
.quickBooks-integration-field .heroGrid {
gap: 28px
}
.hero .lead {
font-size: 17px
}
.quickBooks-integration-field .assetStage {
grid-template-columns: minmax(0, 1fr) 164px;
gap: 12px 10px
}
.quickBooks-integration-field .syncApps {
padding: 22px 15px;
grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
gap: 8px
}
.quickBooks-integration-field .appIdentity strong {
font-size: 13px
}
.quickBooks-integration-field .boardHeader {
padding: 14px
}
.quickBooks-integration-field .boardBrand {
font-size: 12px
}
.quickBooks-integration-field .syncDirectionRows {
margin: 0 14px
}
.quickBooks-integration-field .syncDirectionRows strong {
font-size: 9px;
gap: 4px
}
.quickBooks-integration-field .syncDirectionRows>div {
font-size: 10px
}
.quickBooks-integration-field .boardFooter {
padding-right: 177px
}
.quickBooks-integration-field .contextBody {
padding: 13px
}
.quickBooks-integration-field .contextBody>strong {
font-size: 17px
}
.quickBooks-integration-field .contextTags {
display: none
}
.quickBooks-integration-field .visual {
padding: 18px
}
.quickBooks-integration-field .masterColumnLabels,
.quickBooks-integration-field .masterRow {
gap: 8px
}
.quickBooks-integration-field .masterName {
gap: 7px
}
.quickBooks-integration-field .masterName small {
font-size: 8px
}
.quickBooks-integration-field .balanceGrid strong {
font-size: 22px
}
.quickBooks-integration-field .balanceGrid>div {
padding: 11px 8px
}
.quickBooks-integration-field .paymentOrigin>b {
font-size: 20px
}
.quickBooks-integration-field .costLaneBody {
padding: 15px 12px;
gap: 9px
}
}
@media(max-width:960px) {
.quickBooks-integration-field .heroGrid,
.quickBooks-integration-field .feature,
.quickBooks-integration-field .aiGrid,
.quickBooks-integration-field .final {
grid-template-columns: 1fr
}
.quickBooks-integration-field .heroGrid {
gap: 36px
}
.quickBooks-integration-field .hero h1 {
max-width: 800px
}
.quickBooks-integration-field .hero .lead {
max-width: 750px
}
.quickBooks-integration-field .heroVisual {
width: 100%;
max-width: 640px;
margin: 0 auto
}
.quickBooks-integration-field .assetStage {
margin: auto
}
.quickBooks-integration-field .feature.reverse .visual {
order: 0
}
.quickBooks-integration-field .feature {
gap: 30px
}
.quickBooks-integration-field .feature>div:first-child {
max-width: 800px
}
.quickBooks-integration-field .outcomes,
.quickBooks-integration-field .featureGrid,
.quickBooks-integration-field .connectedGrid,
.quickBooks-integration-field .useCases {
grid-template-columns: repeat(2, 1fr)
}
.quickBooks-integration-field .logos {
grid-template-columns: repeat(3, 1fr)
}
.quickBooks-integration-field .reviews {
grid-template-columns: 1fr
}
.quickBooks-integration-field .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.quickBooks-integration-field .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.quickBooks-integration-field .ratingItem:nth-child(2) {
border: 0
}
.quickBooks-integration-field .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.quickBooks-integration-field .final .btn {
min-width: 195px
}
.quickBooks-integration-field .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.quickBooks-integration-field .aiGrid {
gap: 30px
}
.quickBooks-integration-field .aiMini {
max-width: 760px
}
.quickBooks-integration-field .promptBox {
width: 100%
}
.quickBooks-integration-field .compatNote {
max-width: 720px
}
}
@media(max-width:767px) {
.quickBooks-integration-field .cta {
grid-template-columns: 1fr;
}
.quickBooks-integration-field .wrap {
width: calc(100% - 24px)
}
.quickBooks-integration-field .hero {
padding: 32px 0 42px
}
.quickBooks-integration-field .lead {
font-size: 17px
}
.quickBooks-integration-field .sectionHead p {
font-size: 16px
}
.quickBooks-integration-field .sectionHead {
margin-bottom: 28px
}
.quickBooks-integration-field .heroGrid {
gap: 26px
}
.quickBooks-integration-field .hero .actions {
gap: 8px
}
.quickBooks-integration-field .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.quickBooks-integration-field .micro {
font-size: 11px
}
.quickBooks-integration-field .heroPills {
gap: 6px
}
.quickBooks-integration-field .heroPills span {
font-size: 9px
}
.quickBooks-integration-field .compatNote {
font-size: 11px
}
.quickBooks-integration-field .assetStage {
grid-template-columns: minmax(0, 1fr) 163px;
gap: 12px 10px
}
.quickBooks-integration-field .assetTag {
font-size: 9px
}
.quickBooks-integration-field .boardHeader {
padding: 13px
}
.quickBooks-integration-field .boardBrand {
font-size: 12px
}
.quickBooks-integration-field .sampleBadge {
font-size: 7px
}
.quickBooks-integration-field .syncApps {
padding: 23px 13px 19px;
grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
gap: 7px
}
.quickBooks-integration-field .appIdentity strong {
font-size: 12px
}
.quickBooks-integration-field .appIdentity small {
font-size: 8px
}
.quickBooks-integration-field .appMark {
width: 40px;
height: 40px;
border-radius: 12px;
margin-bottom: 9px
}
.quickBooks-integration-field .connectionBridge {
font-size: 8px
}
.quickBooks-integration-field .connectionBridge .icon {
height: 25px;
width: 30px
}
.quickBooks-integration-field .syncDirectionRows {
margin: 0 13px;
gap: 13px
}
.quickBooks-integration-field .syncDirectionRows>div {
font-size: 10px;
gap: 8px
}
.quickBooks-integration-field .syncDirectionRows strong {
font-size: 8px;
gap: 4px
}
.quickBooks-integration-field .syncDirectionRows .icon {
height: 14px;
width: 14px
}
.quickBooks-integration-field .syncActivity {
padding: 15px 13px 12px
}
.quickBooks-integration-field .activityRow {
gap: 9px
}
.quickBooks-integration-field .activityRow strong {
font-size: 11px
}
.quickBooks-integration-field .activityRow small {
font-size: 9px
}
.quickBooks-integration-field .boardFooter {
padding: 11px 174px 11px 12px;
min-height: 54px;
font-size: 8px
}
.quickBooks-integration-field .assetPhone {
margin-top: -43px;
border-radius: 24px
}
.quickBooks-integration-field .phoneScreen {
border-radius: 18px
}
.quickBooks-integration-field .phoneHead {
padding: 10px 9px
}
.quickBooks-integration-field .phoneHead strong {
font-size: 10px
}
.quickBooks-integration-field .phoneHead small {
font-size: 7px
}
.quickBooks-integration-field .phoneBody {
padding: 13px 10px 10px
}
.quickBooks-integration-field .phoneAmount {
font-size: 25px
}
.quickBooks-integration-field .phoneAmounts>div {
font-size: 9px
}
.quickBooks-integration-field .phoneUpdate {
font-size: 8px;
padding: 9px 7px;
gap: 5px
}
.quickBooks-integration-field .phoneNote {
font-size: 8px
}
.quickBooks-integration-field .contextHead {
padding: 10px;
font-size: 9px;
gap: 6px
}
.quickBooks-integration-field .contextHead .icon {
height: 15px;
width: 15px
}
.quickBooks-integration-field .contextBody {
padding: 12px
}
.quickBooks-integration-field .contextBody>strong {
font-size: 16px
}
.quickBooks-integration-field .contextBody>p {
font-size: 10px
}
.quickBooks-integration-field .contextTags {
display: none
}
.quickBooks-integration-field .diagramCaption {
font-size: 9px
}
.quickBooks-integration-field .trust {
padding: 23px 0
}
.quickBooks-integration-field .trustLabel {
font-size: 12px
}
.quickBooks-integration-field .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.quickBooks-integration-field .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.quickBooks-integration-field .logo.dhl {
font-size: 19px
}
.quickBooks-integration-field .logo.adobe {
font-size: 17px
}
.quickBooks-integration-field .logo.golden {
font-size: 8px
}
.quickBooks-integration-field .fl,
.quickBooks-integration-field .outcomes,
.quickBooks-integration-field .featureGrid,
.quickBooks-integration-field .connectedGrid,
.quickBooks-integration-field .useCases {
grid-template-columns: 1fr
}
.quickBooks-integration-field .fi {
font-size: 14px
}
.quickBooks-integration-field .outcome {
padding: 21px
}
.quickBooks-integration-field .outcome strong {
margin-top: 12px
}
.quickBooks-integration-field .outcome span {
font-size: 14px
}
.quickBooks-integration-field .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.quickBooks-integration-field .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.quickBooks-integration-field .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.quickBooks-integration-field .uiSub {
font-size: 9px
}
.quickBooks-integration-field .foundation {
padding: 13px;
gap: 8px
}
.quickBooks-integration-field .foundation strong {
font-size: 12px
}
.quickBooks-integration-field .foundation small {
font-size: 8px;
gap: 5px
}
.quickBooks-integration-field .foundationIcon {
width: 30px;
height: 30px;
flex-basis: 30px
}
.quickBooks-integration-field .foundation .pill {
font-size: 7px
}
.quickBooks-integration-field .masterColumnLabels,
.quickBooks-integration-field .masterRow {
grid-template-columns: 1.3fr .85fr .6fr;
gap: 7px
}
.quickBooks-integration-field .masterColumnLabels {
font-size: 8px;
padding: 0 9px 9px
}
.quickBooks-integration-field .masterRow {
padding: 13px 10px
}
.quickBooks-integration-field .masterName {
gap: 7px
}
.quickBooks-integration-field .masterName>.icon {
height: 17px;
width: 17px
}
.quickBooks-integration-field .masterName strong {
font-size: 11px
}
.quickBooks-integration-field .masterName small {
font-size: 8px
}
.quickBooks-integration-field .twoWay {
font-size: 8px;
gap: 4px
}
.quickBooks-integration-field .twoWay .icon {
height: 15px;
width: 15px
}
.quickBooks-integration-field .idTag {
font-size: 9px;
padding: 5px 7px
}
.quickBooks-integration-field .mappingNote {
padding: 12px
}
.quickBooks-integration-field .paperPanel {
padding: 16px
}
.quickBooks-integration-field .paperRow {
font-size: 10px
}
.quickBooks-integration-field .paperTotal>strong {
font-size: 24px
}
.quickBooks-integration-field .postingCard {
padding: 13px;
gap: 9px
}
.quickBooks-integration-field .postingCard strong {
font-size: 11px
}
.quickBooks-integration-field .postingCard small {
font-size: 8px
}
.quickBooks-integration-field .paymentOrigin {
padding: 13px;
gap: 9px
}
.quickBooks-integration-field .paymentOrigin>b {
font-size: 20px
}
.quickBooks-integration-field .paymentOrigin strong {
font-size: 11px
}
.quickBooks-integration-field .paymentOrigin .paperLabel {
font-size: 7px
}
.quickBooks-integration-field .paymentOrigin small {
font-size: 8px
}
.quickBooks-integration-field .refreshBridge {
gap: 6px;
font-size: 9px;
margin: 16px 0
}
.quickBooks-integration-field .refreshPill {
font-size: 8px;
padding: 7px 8px;
gap: 4px
}
.quickBooks-integration-field .refreshBridge>.icon {
height: 13px;
width: 13px
}
.quickBooks-integration-field .balancePanel {
padding: 14px
}
.quickBooks-integration-field .balanceHeader strong {
font-size: 11px
}
.quickBooks-integration-field .balanceGrid {
gap: 7px
}
.quickBooks-integration-field .balanceGrid>div {
padding: 11px 8px
}
.quickBooks-integration-field .balanceGrid span {
font-size: 8px
}
.quickBooks-integration-field .balanceGrid strong {
font-size: 22px
}
.quickBooks-integration-field .refreshModes {
gap: 9px
}
.quickBooks-integration-field .refreshModes>div {
padding: 11px 10px;
gap: 3px 7px;
grid-template-columns: 18px 1fr
}
.quickBooks-integration-field .refreshModes .icon {
height: 17px;
width: 17px
}
.quickBooks-integration-field .refreshModes strong {
font-size: 9px
}
.quickBooks-integration-field .refreshModes small {
font-size: 8px
}
.quickBooks-integration-field .costLaneHead {
padding: 12px
}
.quickBooks-integration-field .costLaneBody {
padding: 14px 12px;
gap: 9px;
grid-template-columns: 1.1fr 14px 1fr
}
.quickBooks-integration-field .costLaneBody strong {
font-size: 11px
}
.quickBooks-integration-field .costLaneBody small {
font-size: 8px
}
.quickBooks-integration-field .costLaneBody div>span {
font-size: 9px
}
.quickBooks-integration-field .costDestination {
padding: 10px
}
.quickBooks-integration-field .costArrow .icon {
height: 15px;
width: 15px
}
.quickBooks-integration-field .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.quickBooks-integration-field .aiMini div {
padding: 16px
}
.quickBooks-integration-field .aiMini strong {
font-size: 14px
}
.quickBooks-integration-field .aiMini span {
font-size: 13px
}
.quickBooks-integration-field .promptBox {
padding: 18px;
border-radius: 17px
}
.quickBooks-integration-field .prompt {
font-size: 13px;
padding: 13px
}
.quickBooks-integration-field .promptHead {
font-size: 19px
}
.quickBooks-integration-field .promptFoot {
font-size: 10px !important
}
.quickBooks-integration-field .connectedCard {
padding: 22px
}
.quickBooks-integration-field .connectedCard p,
.quickBooks-integration-field .featureCard p,
.quickBooks-integration-field .useCase p {
font-size: 14px
}
.quickBooks-integration-field .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.quickBooks-integration-field .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.quickBooks-integration-field .ratingItem {
border: 0
}
.quickBooks-integration-field .ratingLead {
margin-bottom: 3px
}
.quickBooks-integration-field .review p {
font-size: 14px
}
.quickBooks-integration-field .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.quickBooks-integration-field .ctaBtns {
width: 100%
}
.quickBooks-integration-field .ctaBtns .btn {
flex: 1
}
.quickBooks-integration-field .cta p {
font-size: 14px
}
.quickBooks-integration-field .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.quickBooks-integration-field .trademarkNote {
font-size: 10px
}
}
@media(max-width:380px) {
.quickBooks-integration-field .syncDirectionRows>div {
align-items: flex-start;
flex-direction: column;
gap: 5px
}
.quickBooks-integration-field .syncDirectionRows strong {
padding-left: 21px;
font-size: 9px
}
.quickBooks-integration-field .refreshBridge>span:first-child,
.quickBooks-integration-field .refreshBridge>span:last-child {
font-size: 8px
}
.quickBooks-integration-field .paymentOrigin {
gap: 7px
}
.quickBooks-integration-field .paymentOrigin .postingIcon {
width: 29px;
height: 29px;
flex-basis: 29px
}
.quickBooks-integration-field .paymentOrigin>b {
font-size: 18px
}
.quickBooks-integration-field .balanceGrid>div {
padding: 10px 6px
}
.quickBooks-integration-field .balanceGrid strong {
font-size: 20px
}
.quickBooks-integration-field .balanceGrid span {
font-size: 7px
}
.quickBooks-integration-field .foundation .pill {
display: none
}
.quickBooks-integration-field .masterName>.icon {
display: none
}
.quickBooks-integration-field .costLaneBody {
grid-template-columns: 1fr;
gap: 10px
}
.quickBooks-integration-field .costArrow {
height: 15px;
display: grid;
place-items: center
}
.quickBooks-integration-field .costArrow .icon {
transform: rotate(90deg)
}
.quickBooks-integration-field .costDestination {
padding: 12px
}
.quickBooks-integration-field .costLaneBody strong {
font-size: 12px
}
.quickBooks-integration-field .costLaneBody small {
font-size: 9px
}
.quickBooks-integration-field .costLaneBody div>span {
font-size: 10px
}
}
@media(max-width:360px) {
.quickBooks-integration-field .assetStage {
grid-template-columns: minmax(0, 1fr) 144px;
gap: 10px 8px
}
.quickBooks-integration-field .boardFooter {
padding-right: 155px;
font-size: 8px
}
.quickBooks-integration-field .contextHead {
padding: 9px;
font-size: 8px;
gap: 5px
}
.quickBooks-integration-field .contextHead .icon {
width: 14px;
height: 14px
}
.quickBooks-integration-field .contextBody {
padding: 10px
}
.quickBooks-integration-field .contextBody>strong {
font-size: 14px
}
.quickBooks-integration-field .contextBody p {
font-size: 9px
}
.quickBooks-integration-field .phoneAmount {
font-size: 23px
}
.quickBooks-integration-field .phoneHead strong {
font-size: 9px
}
.quickBooks-integration-field .phoneNote {
font-size: 8px
}
.quickBooks-integration-field .phoneAmounts {
margin: 12px 0
}
.quickBooks-integration-field .phoneUpdate .icon {
height: 14px;
width: 14px
}
.quickBooks-integration-field .uiHeading .pill {
font-size: 7px
}
.quickBooks-integration-field .paperChecks {
gap: 8px
}
.quickBooks-integration-field .postingCard>.pill {
display: none
}
}
.new-theme-design.quickBooks-integration-field .icon {
margin: 0 !important;
background: transparent !important;
}
.quickBooks-integration-field .cta.darkCta h3 {
color: #fff;
}
.quickBooks-integration-field .dark .ey {
background: var(--yellow);
}
.quickBooks-integration-field .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff;
}  .job-estimate-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.job-estimate-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.job-estimate-software .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.job-estimate-software .btn:hover {
transform: translateY(-2px)
}
.job-estimate-software .btn.black {
background: #0b0b0b;
color: #fff
}
.job-estimate-software .btn.black:hover {
background: #292929
}
.job-estimate-software .btn.yellow {
background: var(--yellow);
color: #000
}
.job-estimate-software .btn.yellow:hover {
background: #FFD454
}
.job-estimate-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.job-estimate-software .btn .icon2 {
width: 17px;
height: 17px
}
.job-estimate-software a:focus-visible,
.job-estimate-software summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.job-estimate-software .dark a:focus-visible,
.job-estimate-software .final a:focus-visible {
outline-color: var(--yellow)
}
.job-estimate-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.job-estimate-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.job-estimate-software .soft {
background: var(--sky2)
}
.job-estimate-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.job-estimate-software .dark h2,
.job-estimate-software .dark h3 {
color: #fff
}
.job-estimate-software .dark p {
color: #D6D6D6
}
.job-estimate-software .dark .ey {
background: var(--yellow)
}
.job-estimate-software .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.job-estimate-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.job-estimate-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.job-estimate-software .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.job-estimate-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.job-estimate-software .textLink .icon2 {
width: 16px;
height: 16px
}
.job-estimate-software .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.job-estimate-software .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.job-estimate-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.job-estimate-software .skipLink:focus {
top: 12px
}
.job-estimate-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.job-estimate-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.job-estimate-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.job-estimate-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.job-estimate-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.job-estimate-software .logo.adobe {
font-size: 20px
}
.job-estimate-software .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.job-estimate-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.job-estimate-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.job-estimate-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.job-estimate-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.job-estimate-software .outcome:nth-child(3):before {
background: var(--green)
}
.job-estimate-software .outcome:nth-child(4):before {
background: var(--purple)
}
.job-estimate-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.job-estimate-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.job-estimate-software .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
}
.job-estimate-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.job-estimate-software .feature.reverse .visual {
order: -1
}
.job-estimate-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.job-estimate-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.job-estimate-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.job-estimate-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.job-estimate-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.job-estimate-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.job-estimate-software .visual>* {
position: relative;
z-index: 2
}
.job-estimate-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.job-estimate-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.job-estimate-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.job-estimate-software .uiHeading .icon2 {
width: 19px;
height: 19px
}
.job-estimate-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.job-estimate-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.job-estimate-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.job-estimate-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.job-estimate-software .pill.green {
background: var(--greenbg);
color: #116746
}
.job-estimate-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.job-estimate-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.job-estimate-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.job-estimate-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.job-estimate-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.job-estimate-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.job-estimate-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.job-estimate-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.job-estimate-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.job-estimate-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.job-estimate-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.job-estimate-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.job-estimate-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.job-estimate-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.job-estimate-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.job-estimate-software .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.job-estimate-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.job-estimate-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.job-estimate-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.job-estimate-software .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
}
.job-estimate-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.job-estimate-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.job-estimate-software .featureCard:hover {
transform: translateY(-3px)
}
.job-estimate-software .featureIcon,
.job-estimate-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.job-estimate-software .featureIcon .icon,
.job-estimate-software .useIcon .icon2 {
width: 22px;
height: 22px
}
.job-estimate-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.job-estimate-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.job-estimate-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.job-estimate-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.job-estimate-software .useCase h3 {
font-size: 20px
}
.job-estimate-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.job-estimate-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.job-estimate-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.job-estimate-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.job-estimate-software .review h3 {
font-size: 22px
}
.job-estimate-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.job-estimate-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.job-estimate-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.job-estimate-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.job-estimate-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.job-estimate-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.job-estimate-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.job-estimate-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.job-estimate-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.job-estimate-software .faq {
max-width: 900px
}
.job-estimate-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.job-estimate-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.job-estimate-software .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.job-estimate-software .faq summary::marker {
color: var(--navy)
}
.job-estimate-software .faq details[open] {
border-color: #A9D3E7
}
.job-estimate-software .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.job-estimate-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.job-estimate-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.job-estimate-software .cta h3 {
font-size: 19px
}
.job-estimate-software .cta.darkCta h3 {
color: #fff
}
.job-estimate-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.job-estimate-software .cta.darkCta p {
color: #D1D1D1
}
.job-estimate-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.job-estimate-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.job-estimate-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.job-estimate-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.job-estimate-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.job-estimate-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.job-estimate-software .reveal {
opacity: 1;
transform: none
}
.job-estimate-software  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.job-estimate-software #connected-tools.fsmTools *,
.job-estimate-software #connected-tools.fsmTools *::before,
.job-estimate-software #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.job-estimate-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.job-estimate-software #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.job-estimate-software #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.job-estimate-software #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.job-estimate-software #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__step::before,
.job-estimate-software #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.job-estimate-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.job-estimate-software #connected-tools.fsmTools {
padding: 52px 0;
}
.job-estimate-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.job-estimate-software #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.job-estimate-software #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.job-estimate-software #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.job-estimate-software #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card,
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.job-estimate-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.job-estimate-software #connected-tools.fsmTools h2 {
font-size: 30px;
}
.job-estimate-software #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.job-estimate-software #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.job-estimate-software  .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.job-estimate-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.job-estimate-software .heroGrid>*,
.job-estimate-software .feature>*,
.job-estimate-software .aiGrid>* {
min-width: 0
}
.job-estimate-software .hero h1 {
max-width: 590px
}
.job-estimate-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.job-estimate-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.job-estimate-software .heroVisual {
position: relative;
min-width: 0
}
.job-estimate-software .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 184px;
gap: 14px 12px;
align-items: start
}
.job-estimate-software .assetStage:before {
content: "";
position: absolute;
inset: 60px 0 18px 22px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.job-estimate-software .assetStage>* {
position: relative;
z-index: 1
}
.job-estimate-software .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 800;
padding: 6px 10px;
border-radius: 9px
}
.job-estimate-software .estimateBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 19px;
overflow: hidden
}
.job-estimate-software .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 17px;
border-bottom: 1px solid var(--line)
}
.job-estimate-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 850;
color: var(--ink)
}
.job-estimate-software .boardSub {
font-size: 10px;
font-weight: 500;
color: var(--muted)
}
.job-estimate-software .brandTile {
width: 28px;
height: 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.job-estimate-software .brandTile .icon2 {
width: 18px;
height: 18px
}
.job-estimate-software .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.job-estimate-software .estimatePaper {
padding: 19px 20px 15px
}
.job-estimate-software .estimateTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px
}
.job-estimate-software .estimateTitle strong {
display: block;
font-size: 19px;
line-height: 1.3;
letter-spacing: -.02em;
margin-top: 5px
}
.job-estimate-software .paperLabel {
display: block;
color: var(--muted);
font-size: 9px;
font-weight: 750;
letter-spacing: .05em;
text-transform: uppercase
}
.job-estimate-software .estimateTitle .pill {
font-size: 8px;
padding: 5px 7px
}
.job-estimate-software .customerLine {
font-size: 10px;
color: #647D8D;
margin-top: 9px
}
.job-estimate-software .customerLine span {
margin: 0 4px
}
.job-estimate-software .optionMiniGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 17px
}
.job-estimate-software .optionMini {
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px;
background: #fff;
min-width: 0
}
.job-estimate-software .optionMini.selected {
background: #FFFBEA;
border: 1.5px solid #E9BE37
}
.job-estimate-software .optionMini>span {
display: block;
font-size: 10px;
font-weight: 800;
color: #375972
}
.job-estimate-software .optionMini strong {
display: block;
font-size: 22px;
line-height: 1.3;
color: var(--ink);
margin: 4px 0
}
.job-estimate-software .optionMini small {
font-size: 9px;
display: block;
color: var(--muted);
line-height: 1.4
}
.job-estimate-software .estimateItems {
margin-top: 13px
}
.job-estimate-software .estimateRow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
border-bottom: 1px solid #E6EEF3;
padding: 10px 0;
font-size: 11px
}
.job-estimate-software .estimateRow strong {
display: block;
font-size: 11px
}
.job-estimate-software .estimateRow small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 2px
}
.job-estimate-software .estimateRow>b {
font-size: 11px;
color: var(--navy)
}
.job-estimate-software .estimateTotal {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
margin-top: 12px
}
.job-estimate-software .estimateTotal>span {
font-size: 10px;
font-weight: 800;
color: var(--navy)
}
.job-estimate-software .estimateTotal small {
display: block;
font-weight: 400;
color: var(--muted);
font-size: 8px;
margin-top: 2px
}
.job-estimate-software .estimateTotal>strong {
font-size: 25px;
letter-spacing: -.03em;
color: var(--navy)
}
.job-estimate-software .boardFooter {
font-size: 9px;
color: #526F80;
padding: 10px 195px 10px 16px;
background: var(--sky2);
border-top: 1px solid var(--line);
min-height: 46px;
display: flex;
align-items: center;
gap: 7px;
line-height: 1.5
}
.job-estimate-software .boardFooter .icon2 {
width: 15px;
height: 15px;
color: var(--green)
}
.job-estimate-software .estimateContext {
background: #101922;
border: 1px solid #2A404F;
border-radius: 15px;
color: #fff;
grid-column: 1;
overflow: hidden
}
.job-estimate-software .contextHead {
font-size: 10px;
font-weight: 800;
padding: 11px 13px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #2E404B
}
.job-estimate-software .contextHead .icon2 {
color: var(--yellow);
height: 17px;
width: 17px
}
.job-estimate-software .contextBody {
padding: 14px
}
.job-estimate-software .contextBody>strong {
display: block;
font-size: 16px;
line-height: 1.3;
letter-spacing: -.015em
}
.job-estimate-software .contextBody>p {
font-size: 11px;
color: #C8D7E1;
line-height: 1.6;
margin-top: 8px
}
.job-estimate-software .contextTrail {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 9px;
color: #D1E5F0
}
.job-estimate-software .contextTrail .icon2 {
width: 14px;
height: 14px;
color: var(--yellow)
}
.job-estimate-software .assetPhone {
grid-column: 2;
grid-row: 3;
margin-top: -50px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.job-estimate-software .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.job-estimate-software .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.job-estimate-software .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.job-estimate-software .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.job-estimate-software .phoneHead strong {
font-size: 11px;
display: block
}
.job-estimate-software .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.job-estimate-software .phoneBody {
padding: 13px 11px 10px
}
.job-estimate-software .phoneBody .paperLabel {
font-size: 8px
}
.job-estimate-software .phoneOption {
font-size: 13px;
color: var(--navy);
display: block;
margin-top: 4px
}
.job-estimate-software .phoneTotal {
font-size: 26px;
color: var(--navy);
letter-spacing: -.035em;
display: block;
line-height: 1.4
}
.job-estimate-software .phoneBody>p {
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.job-estimate-software .signatureLine {
margin: 10px 0 12px;
border: 1px solid #D7E5ED;
border-radius: 7px;
padding: 6px 8px;
background: #FBFDFF
}
.job-estimate-software .signatureLine svg {
width: 100%;
height: 35px;
display: block
}
.job-estimate-software .signatureLine>span {
display: block;
font-size: 7px;
color: var(--muted);
text-align: center;
border-top: 1px dashed #C6D7E1;
padding-top: 4px
}
.job-estimate-software .mockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 7px;
background: var(--yellow);
color: #111;
border-radius: 7px;
text-align: center;
font-size: 10px;
font-weight: 800;
line-height: 1.4
}
.job-estimate-software .mockAction .icon2 {
width: 14px;
height: 14px
}
.job-estimate-software .phoneFine {
display: block;
text-align: center;
font-size: 7px;
color: var(--muted);
margin-top: 7px
}
.job-estimate-software .diagramCaption {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
text-align: center;
margin-top: 12px
}
.job-estimate-software .templateBanner {
display: flex;
gap: 10px;
align-items: center;
border: 1px solid #D5E8F1;
padding: 13px;
border-radius: 11px;
background: #fff;
margin-bottom: 14px
}
.job-estimate-software .templateBanner>.icon {
height: 23px;
width: 23px;
color: var(--navy)
}
.job-estimate-software .templateBanner>div {
flex: 1;
min-width: 0
}
.job-estimate-software .templateBanner strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.job-estimate-software .templateBanner small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
.job-estimate-software .templateBanner .pill {
font-size: 8px
}
.job-estimate-software .builderScene {
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: 13px;
align-items: stretch
}
.job-estimate-software .catalogPanel {
border: 1px solid #D9E8F1;
border-radius: 12px;
background: #F9FCFE;
overflow: hidden
}
.job-estimate-software .catalogHeader {
font-size: 12px;
font-weight: 800;
padding: 12px;
background: #EAF8FF;
color: var(--navy);
border-bottom: 1px solid #D9E8F1
}
.job-estimate-software .catalogHeader small {
display: block;
font-weight: 400;
font-size: 9px;
margin-top: 2px
}
.job-estimate-software .catalogItem {
margin: 9px;
background: #fff;
padding: 11px 10px;
border: 1px solid #D9E8F1;
border-radius: 8px
}
.job-estimate-software .catalogItem b {
display: block;
font-size: 11px;
line-height: 1.4
}
.job-estimate-software .catalogItem small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 4px;
line-height: 1.5
}
.job-estimate-software .catalogItem>span {
font-size: 12px;
color: var(--navy);
font-weight: 800;
display: block;
margin-top: 7px
}
.job-estimate-software .builderSheet {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 15px;
min-width: 0
}
.job-estimate-software .sheetTitle {
font-size: 13px;
font-weight: 800;
margin-bottom: 13px;
color: var(--navy)
}
.job-estimate-software .builderField {
border: 1px solid var(--line);
border-radius: 7px;
padding: 9px;
margin-bottom: 9px
}
.job-estimate-software .builderField small {
display: block;
font-size: 8px;
color: var(--muted)
}
.job-estimate-software .builderField strong {
font-size: 10px;
display: block;
margin-top: 3px
}
.job-estimate-software .builderItems {
margin-top: 10px
}
.job-estimate-software .builderItems>div {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
padding: 8px 0;
border-bottom: 1px solid #E7EEF3
}
.job-estimate-software .builderItems b {
color: var(--navy)
}
.job-estimate-software .builderTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 13px 0
}
.job-estimate-software .builderTotal>span {
font-size: 9px;
color: var(--muted)
}
.job-estimate-software .builderTotal>strong {
font-size: 24px;
letter-spacing: -.03em;
color: var(--navy)
}
.job-estimate-software .mockAction.small {
font-size: 10px;
padding: 9px
}
.job-estimate-software .infoFoot {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 14px;
font-size: 10px;
color: #547385;
line-height: 1.6
}
.job-estimate-software .infoFoot .icon2 {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 1px
}
.job-estimate-software .presentBar {
background: #0D2637;
color: #fff;
border: 1px solid #26495B;
border-radius: 11px;
padding: 13px 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px
}
.job-estimate-software .presentBar>span {
display: flex;
gap: 8px;
align-items: center;
font-size: 12px;
font-weight: 750
}
.job-estimate-software .presentBar .icon2 {
width: 18px;
height: 18px;
color: var(--yellow)
}
.job-estimate-software .presentBar>small {
font-size: 9px;
color: #C3DCE9
}
.job-estimate-software .proposalGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: stretch
}
.job-estimate-software .proposalCard {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
padding: 13px 12px;
min-width: 0
}
.job-estimate-software .proposalCard.featured {
border: 2px solid #EDC44B;
background: #FFFCF1;
padding: 12px 11px
}
.job-estimate-software .proposalTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 850;
color: var(--navy)
}
.job-estimate-software .proposalTop .icon2 {
width: 15px;
height: 15px;
color: #6294AD
}
.job-estimate-software .featured .proposalTop .icon2 {
color: #947317
}
.job-estimate-software .proposalPrice {
display: block;
margin-top: 15px;
font-size: 27px;
line-height: 1.2;
color: var(--navy);
letter-spacing: -.035em
}
.job-estimate-software .proposalCard>p {
font-size: 10px !important;
line-height: 1.5;
color: var(--muted);
margin: 6px 0 14px !important;
min-height: 30px
}
.job-estimate-software .proposalList {
display: grid;
gap: 10px;
padding-top: 13px;
border-top: 1px solid #DDE8EE
}
.job-estimate-software .proposalList>div {
display: flex;
gap: 6px;
align-items: flex-start;
font-size: 9px;
line-height: 1.55
}
.job-estimate-software .proposalList .icon2 {
width: 12px;
height: 12px;
color: var(--green);
margin-top: 2px
}
.job-estimate-software .proposalChoose {
padding: 8px 5px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
font-weight: 750;
text-align: center;
margin-top: 20px;
line-height: 1.4;
color: var(--navy)
}
.job-estimate-software .featured .proposalChoose {
background: var(--yellow);
border-color: var(--yellow);
color: #101010
}
.job-estimate-software .optionControls {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 13px
}
.job-estimate-software .optionControls>span {
background: #fff;
border: 1px solid var(--line);
padding: 6px 9px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
color: #526E80
}
.job-estimate-software .optionControls .icon2 {
width: 12px;
height: 12px
}
.job-estimate-software .approvalScene {
display: grid;
grid-template-columns: 185px minmax(0, 1fr);
gap: 20px;
align-items: center
}
.job-estimate-software .approvalDevice {
border-radius: 26px;
background: #0C1E2A;
padding: 6px;
border: 1px solid #324D5F
}
.job-estimate-software .approvalBody {
padding: 14px 12px 12px
}
.job-estimate-software .approvalBody>.paperLabel {
font-size: 8px
}
.job-estimate-software .approvalBody>strong {
display: block;
font-size: 12px;
margin-top: 5px;
color: var(--navy)
}
.job-estimate-software .approvalAmount {
display: block;
font-size: 27px;
line-height: 1.3;
letter-spacing: -.03em;
margin-top: 8px;
color: var(--navy)
}
.job-estimate-software .approvalScope {
margin-top: 11px;
padding: 9px;
border: 1px solid var(--line);
border-radius: 7px;
font-size: 9px;
line-height: 1.8;
color: #536F81
}
.job-estimate-software .approvalOther {
text-align: center;
font-size: 8px;
color: var(--muted);
margin-top: 8px
}
.job-estimate-software .approvalSteps {
display: grid;
gap: 18px;
min-width: 0
}
.job-estimate-software .approvalStep {
display: flex;
align-items: flex-start;
gap: 10px
}
.job-estimate-software .eventIcon {
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 10px;
background: #fff;
border: 1px solid #D0E3EE;
display: grid;
place-items: center;
color: var(--navy)
}
.job-estimate-software .eventIcon .icon2 {
height: 17px;
width: 17px
}
.job-estimate-software .approvalStep strong {
font-size: 12px;
line-height: 1.4;
display: block
}
.job-estimate-software .approvalStep p {
font-size: 11px !important;
line-height: 1.6;
margin-top: 5px !important;
color: var(--muted)
}
.job-estimate-software .approvalNote {
background: #fff;
border: 1px solid #C8E6DB;
border-radius: 12px;
padding: 14px
}
.job-estimate-software .approvalNote>strong {
font-size: 12px;
display: block;
color: #125D44;
margin-top: 10px
}
.job-estimate-software .approvalNote>p {
font-size: 10px !important;
line-height: 1.6;
margin-top: 6px !important
} .estimateMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 13px
}
.job-estimate-software .estimateMetrics>div {
padding: 13px 11px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px
}
.job-estimate-software .estimateMetrics>div:nth-child(2) {
border-top: 3px solid var(--yellow);
padding-top: 11px
}
.job-estimate-software .estimateMetrics span {
display: block;
font-size: 9px;
color: var(--muted)
}
.job-estimate-software .estimateMetrics strong {
display: block;
font-size: 25px;
line-height: 1.2;
letter-spacing: -.035em;
color: var(--navy);
margin: 8px 0 6px
}
.job-estimate-software .estimateMetrics small {
display: block;
font-size: 8px;
color: var(--muted);
line-height: 1.5
}
.job-estimate-software .estimateLedger {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
overflow: hidden
}
.job-estimate-software .ledgerHeading,
.job-estimate-software .ledgerRow {
display: grid;
grid-template-columns: minmax(0, 1.5fr) .65fr .9fr;
gap: 12px;
align-items: center;
padding: 12px 15px;
font-size: 11px
}
.job-estimate-software .ledgerHeading {
background: #F5FBFF;
font-size: 9px;
color: var(--muted);
font-weight: 750
}
.job-estimate-software .ledgerRow {
border-top: 1px solid #E4EDF2
}
.job-estimate-software .ledgerRow b {
font-size: 11px;
display: block
}
.job-estimate-software .ledgerRow small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.job-estimate-software .ledgerRow>strong {
color: var(--navy);
font-size: 12px
}
.job-estimate-software .ledgerRow>.pill {
justify-self: start;
font-size: 8px
}
.job-estimate-software .handoffCard {
background: #0D2637;
color: #fff;
border-radius: 12px;
padding: 16px;
display: flex;
gap: 12px;
margin-top: 14px
}
.job-estimate-software .handoffIcon {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--yellow);
color: #151515
}
.job-estimate-software .handoffIcon .icon2 {
height: 19px;
width: 19px
}
.job-estimate-software .handoffCard strong {
display: block;
font-size: 13px;
line-height: 1.4
}
.job-estimate-software .handoffCard p {
color: #CEDDE7;
font-size: 11px !important;
margin-top: 4px !important;
line-height: 1.6
}
.job-estimate-software .handoffTrail {
display: flex;
align-items: center;
gap: 9px;
color: #D4E8F3;
font-size: 10px;
margin-top: 12px
}
.job-estimate-software .handoffTrail .icon2 {
width: 14px;
height: 14px;
color: var(--yellow)
} @media (max-width:1100px) and (min-width:961px) {
.job-estimate-software .heroGrid {
gap: 28px
} .job-estimate-software .hero .lead {
font-size: 17px
}
.job-estimate-software .assetStage {
grid-template-columns: minmax(0, 1fr) 165px;
gap: 12px 10px
}
.job-estimate-software .boardFooter {
padding-right: 176px
}
.job-estimate-software .estimatePaper {
padding: 17px 15px 14px
}
.job-estimate-software .estimateTitle {
align-items: flex-start
}
.job-estimate-software .estimateTitle .pill {
display: none
}
.job-estimate-software .optionMini {
padding: 9px
}
.job-estimate-software .optionMini strong {
font-size: 21px
}
.job-estimate-software .contextBody {
padding: 12px
}
.job-estimate-software .contextBody>strong {
font-size: 15px
}
.job-estimate-software .contextTrail {
gap: 5px;
font-size: 8px
}
.job-estimate-software .boardSub {
display: none
}
.job-estimate-software .visual {
padding: 18px
}
.job-estimate-software .approvalScene {
grid-template-columns: 161px minmax(0, 1fr);
gap: 13px
}
.job-estimate-software .proposalCard {
padding: 12px 9px
}
.job-estimate-software .proposalCard.featured {
padding: 11px 8px
}
.job-estimate-software .proposalPrice {
font-size: 24px
}
.job-estimate-software .proposalList>div {
font-size: 8.5px
}
.job-estimate-software .builderScene {
gap: 10px
}
.job-estimate-software .builderSheet {
padding: 12px
}
}
@media(max-width:960px) {
.job-estimate-software .heroGrid,
.job-estimate-software .feature,
.job-estimate-software .aiGrid,
.job-estimate-software .final {
grid-template-columns: 1fr
}
.job-estimate-software .heroGrid {
gap: 36px
}
.job-estimate-software .hero h1 {
max-width: 800px
}
.job-estimate-software .hero .lead {
max-width: 750px
}
.job-estimate-software .heroVisual {
width: 100%;
max-width: 640px;
margin: 0 auto
}
.job-estimate-software .assetStage {
margin: auto
}
.job-estimate-software .feature.reverse .visual {
order: 0
}
.job-estimate-software .feature {
gap: 30px
}
.job-estimate-software .feature>div:first-child {
max-width: 800px
}
.job-estimate-software .outcomes,
.job-estimate-software .featureGrid,
.job-estimate-software .connectedGrid,
.job-estimate-software .useCases {
grid-template-columns: repeat(2, 1fr)
}
.job-estimate-software .logos {
grid-template-columns: repeat(3, 1fr)
}
.job-estimate-software .reviews {
grid-template-columns: 1fr
}
.job-estimate-software .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.job-estimate-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.job-estimate-software .ratingItem:nth-child(2) {
border: 0
}
.job-estimate-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.job-estimate-software .final .btn {
min-width: 195px
}
.job-estimate-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.job-estimate-software .aiGrid {
gap: 30px
}
.job-estimate-software .aiMini {
max-width: 760px
}
.job-estimate-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.job-estimate-software .wrap {
width: calc(100% - 24px)
}
.job-estimate-software section {
padding: 56px 0
}
.job-estimate-software .hero {
padding: 32px 0 42px
} .job-estimate-software h2 {
font-size: 34px
}
.job-estimate-software .lead {
font-size: 17px
}
.job-estimate-software .sectionHead p {
font-size: 16px
}
.job-estimate-software .sectionHead {
margin-bottom: 28px
}
.job-estimate-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.job-estimate-software .heroGrid {
gap: 26px
}
.job-estimate-software .hero .actions {
gap: 8px
}
.job-estimate-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.job-estimate-software .micro {
font-size: 11px
}
.job-estimate-software .heroPills {
gap: 6px
}
.job-estimate-software .heroPills span {
font-size: 9px
}
.job-estimate-software .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.job-estimate-software .assetStage {
grid-template-columns: minmax(0, 1fr) 164px;
gap: 12px 10px
}
.job-estimate-software .assetTag {
font-size: 9px
}
.job-estimate-software .boardHeader {
padding: 13px
}
.job-estimate-software .boardBrand {
font-size: 12px
}
.job-estimate-software .boardSub {
display: none
}
.job-estimate-software .sampleBadge {
font-size: 7px
}
.job-estimate-software .estimatePaper {
padding: 16px 14px 13px
}
.job-estimate-software .estimateTitle strong {
font-size: 17px
}
.job-estimate-software .estimateTitle .pill {
display: none
}
.job-estimate-software .optionMiniGrid {
gap: 7px;
margin-top: 14px
}
.job-estimate-software .optionMini {
padding: 9px 8px
}
.job-estimate-software .optionMini strong {
font-size: 21px
}
.job-estimate-software .optionMini small {
font-size: 8px
}
.job-estimate-software .estimateRow {
padding: 10px 0;
font-size: 10px
}
.job-estimate-software .estimateRow strong,
.job-estimate-software .estimateRow>b {
font-size: 10px
}
.job-estimate-software .estimateRow small {
font-size: 8px
}
.job-estimate-software .estimateTotal>strong {
font-size: 23px
}
.job-estimate-software .boardFooter {
padding: 10px 171px 10px 12px;
font-size: 8px;
min-height: 50px
}
.job-estimate-software .assetPhone {
margin-top: -42px;
border-radius: 24px
}
.job-estimate-software .phoneScreen {
border-radius: 18px
}
.job-estimate-software .phoneHead {
padding: 10px 9px
}
.job-estimate-software .phoneHead strong {
font-size: 10px
}
.job-estimate-software .phoneHead small {
font-size: 7px
}
.job-estimate-software .phoneBody {
padding: 12px 10px 10px
}
.job-estimate-software .phoneTotal {
font-size: 25px
}
.job-estimate-software .phoneOption {
font-size: 12px
}
.job-estimate-software .phoneFine {
font-size: 7px
}
.job-estimate-software .contextHead {
padding: 10px;
gap: 7px;
font-size: 9px
}
.job-estimate-software .contextHead .icon2 {
width: 15px;
height: 15px
}
.job-estimate-software .contextBody {
padding: 11px
}
.job-estimate-software .contextBody>strong {
font-size: 13px
}
.job-estimate-software .contextBody>p {
font-size: 10px
}
.job-estimate-software .contextTrail {
gap: 5px;
font-size: 8px;
flex-wrap: wrap
}
.job-estimate-software .diagramCaption {
font-size: 9px
}
.job-estimate-software .trust {
padding: 23px 0
}
.job-estimate-software .trustLabel {
font-size: 12px
}
.job-estimate-software .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.job-estimate-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.job-estimate-software .logo.dhl {
font-size: 19px
}
.job-estimate-software .logo.adobe {
font-size: 17px
}
.job-estimate-software .logo.golden {
font-size: 8px
}
.job-estimate-software .fl,
.job-estimate-software .outcomes,
.job-estimate-software .featureGrid,
.job-estimate-software .connectedGrid,
.job-estimate-software .useCases {
grid-template-columns: 1fr
}
.job-estimate-software .fi {
font-size: 14px
}
.job-estimate-software .outcome {
padding: 21px
}
.job-estimate-software .outcome strong {
margin-top: 12px
}
.job-estimate-software .outcome span {
font-size: 14px
}
.job-estimate-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.job-estimate-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.job-estimate-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.job-estimate-software .uiSub {
font-size: 9px
}
.job-estimate-software .templateBanner {
padding: 11px;
gap: 8px
}
.job-estimate-software .templateBanner strong {
font-size: 11px
}
.job-estimate-software .templateBanner small {
font-size: 9px
}
.job-estimate-software .templateBanner .pill {
display: none
}
.job-estimate-software .builderScene {
grid-template-columns: .85fr 1.15fr;
gap: 10px
}
.job-estimate-software .catalogHeader {
font-size: 11px;
padding: 10px
}
.job-estimate-software .catalogItem {
padding: 10px 8px;
margin: 7px
}
.job-estimate-software .catalogItem b {
font-size: 10px
}
.job-estimate-software .catalogItem small {
font-size: 8px
}
.job-estimate-software .catalogItem>span {
font-size: 11px
}
.job-estimate-software .builderSheet {
padding: 12px
}
.job-estimate-software .builderField {
padding: 8px
}
.job-estimate-software .builderItems>div {
font-size: 9px;
gap: 5px
}
.job-estimate-software .builderField strong {
font-size: 9px
}
.job-estimate-software .sheetTitle {
font-size: 12px
}
.job-estimate-software .builderTotal>strong {
font-size: 22px
}
.job-estimate-software .builderTotal>span {
font-size: 8px
}
.job-estimate-software .mockAction.small {
font-size: 9px
}
.job-estimate-software .presentBar {
padding: 12px
}
.job-estimate-software .presentBar>span {
font-size: 11px
}
.job-estimate-software .presentBar>small {
font-size: 8px
}
.job-estimate-software .proposalGrid {
gap: 8px
}
.job-estimate-software .proposalCard {
padding: 12px 9px
}
.job-estimate-software .proposalCard.featured {
padding: 11px 8px
}
.job-estimate-software .proposalPrice {
font-size: 24px
}
.job-estimate-software .proposalTop {
font-size: 11px
}
.job-estimate-software .proposalTop .icon2 {
width: 13px;
height: 13px
}
.job-estimate-software .proposalCard>p {
font-size: 9px !important
}
.job-estimate-software .proposalList>div {
font-size: 8.5px;
gap: 4px
}
.job-estimate-software .proposalList .icon2 {
width: 10px;
height: 10px
}
.job-estimate-software .proposalChoose {
font-size: 8px;
padding: 8px 3px
}
.job-estimate-software .approvalScene {
grid-template-columns: 164px minmax(0, 1fr);
gap: 14px
}
.job-estimate-software .approvalBody {
padding: 12px 10px
}
.job-estimate-software .approvalSteps {
gap: 15px
}
.job-estimate-software .approvalStep {
gap: 8px
}
.job-estimate-software .eventIcon {
height: 28px;
width: 28px;
flex-basis: 28px
}
.job-estimate-software .approvalStep strong {
font-size: 11px
}
.job-estimate-software .approvalStep p {
font-size: 10px !important
}
.job-estimate-software .approvalNote {
padding: 11px
}
.job-estimate-software .approvalNote>strong {
font-size: 11px
}
.job-estimate-software .approvalNote>p {
font-size: 10px !important
}
.job-estimate-software .estimateMetrics {
gap: 7px
}
.job-estimate-software .estimateMetrics>div {
padding: 12px 9px
}
.job-estimate-software .estimateMetrics span {
font-size: 8px
}
.job-estimate-software .estimateMetrics strong {
font-size: 22px
}
.job-estimate-software .estimateMetrics small {
font-size: 8px
}
.job-estimate-software .ledgerHeading,
.job-estimate-software .ledgerRow {
padding: 11px 12px;
gap: 9px
}
.job-estimate-software .ledgerHeading {
font-size: 8px
}
.job-estimate-software .ledgerRow b {
font-size: 10px
}
.job-estimate-software .ledgerRow small {
font-size: 8px
}
.job-estimate-software .handoffCard {
padding: 14px
}
.job-estimate-software .handoffCard strong {
font-size: 12px
}
.job-estimate-software .handoffCard p {
font-size: 10px !important
}
.job-estimate-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.job-estimate-software .aiMini div {
padding: 16px
}
.job-estimate-software .aiMini strong {
font-size: 14px
}
.job-estimate-software .aiMini span {
font-size: 13px
}
.job-estimate-software .promptBox {
padding: 18px;
border-radius: 17px
}
.job-estimate-software .prompt {
font-size: 13px;
padding: 13px
}
.job-estimate-software .promptHead {
font-size: 19px
}
.job-estimate-software .promptFoot {
font-size: 10px !important
}
.job-estimate-software .connectedCard {
padding: 22px
}
.job-estimate-software .connectedCard p,
.job-estimate-software .featureCard p,
.job-estimate-software .useCase p {
font-size: 14px
}
.job-estimate-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.job-estimate-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.job-estimate-software .ratingItem {
border: 0
}
.job-estimate-software .ratingLead {
margin-bottom: 3px
}
.job-estimate-software .review p {
font-size: 14px
}
.job-estimate-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.job-estimate-software .ctaBtns {
width: 100%
}
.job-estimate-software .ctaBtns .btn {
flex: 1
}
.job-estimate-software .cta p {
font-size: 14px
}
.job-estimate-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.job-estimate-software .final h2 {
font-size: 32px
}
.job-estimate-software .final p {
font-size: 15px
}
.job-estimate-software .final .ctaBtns {
flex-direction: column
}
.job-estimate-software .final .btn {
min-width: 0;
width: 100%
}
.job-estimate-software .faq details {
padding: 16px
}
.job-estimate-software .faq summary {
font-size: 14px
}
.job-estimate-software .faq details p {
font-size: 14px
}
}
@media(max-width:420px) {
.job-estimate-software .proposalGrid {
grid-template-columns: 1fr;
gap: 12px
}
.job-estimate-software .proposalCard,
.job-estimate-software .proposalCard.featured {
padding: 16px;
display: grid;
grid-template-columns: 1fr auto;
gap: 0 14px;
align-items: center
}
.job-estimate-software .proposalTop {
font-size: 14px
}
.job-estimate-software .proposalTop .icon2 {
display: none
}
.job-estimate-software .proposalPrice {
font-size: 28px;
margin-top: 0;
grid-column: 2;
grid-row: 1/3
}
.job-estimate-software .proposalCard>p {
grid-column: 1;
font-size: 11px !important;
margin: 5px 0 12px !important;
min-height: 0
}
.job-estimate-software .proposalList {
grid-column: 1/-1;
gap: 8px
}
.job-estimate-software .proposalList>div {
font-size: 11px
}
.job-estimate-software .proposalList .icon2 {
width: 13px;
height: 13px
}
.job-estimate-software .proposalChoose {
grid-column: 1/-1;
font-size: 11px;
margin-top: 15px;
padding: 9px
}
.job-estimate-software .optionControls {
justify-content: center
}
.job-estimate-software .approvalScene {
grid-template-columns: 1fr;
gap: 20px
}
.job-estimate-software .approvalDevice {
max-width: 205px;
width: 100%;
margin: auto
}
.job-estimate-software .approvalSteps {
gap: 16px
}
.job-estimate-software .approvalStep strong {
font-size: 13px
}
.job-estimate-software .approvalStep p {
font-size: 12px !important
}
.job-estimate-software .approvalNote>strong {
font-size: 13px
}
.job-estimate-software .approvalNote>p {
font-size: 12px !important
}
.job-estimate-software .builderScene {
grid-template-columns: 1fr
}
.job-estimate-software .catalogPanel {
display: none
}
.job-estimate-software .builderField strong {
font-size: 12px
}
.job-estimate-software .builderField small {
font-size: 9px
}
.job-estimate-software .builderItems>div {
font-size: 11px
}
.job-estimate-software .builderTotal>span {
font-size: 10px
}
.job-estimate-software .builderTotal>strong {
font-size: 27px
}
.job-estimate-software .sheetTitle {
font-size: 14px
}
.job-estimate-software .mockAction.small {
font-size: 11px
}
.job-estimate-software .builderSheet {
padding: 16px
}
.job-estimate-software .templateBanner strong {
font-size: 12px
}
.job-estimate-software .templateBanner small {
font-size: 10px
}
.job-estimate-software .infoFoot {
font-size: 11px
}
.job-estimate-software .approvalScope {
font-size: 10px
}
.job-estimate-software .approvalBody>strong {
font-size: 13px
}
}
@media(max-width:360px) { .job-estimate-software h2 {
font-size: 31px
}
.job-estimate-software .assetStage {
grid-template-columns: minmax(0, 1fr) 146px;
gap: 10px 8px
}
.job-estimate-software .boardFooter {
padding-right: 153px
}
.job-estimate-software .contextHead {
font-size: 8px;
padding: 9px;
gap: 5px
}
.job-estimate-software .contextHead .icon2 {
width: 14px;
height: 14px
}
.job-estimate-software .contextBody {
padding: 10px
}
.job-estimate-software .contextBody>strong {
font-size: 12px
}
.job-estimate-software .contextBody>p {
font-size: 9px
}
.job-estimate-software .phoneHead strong {
font-size: 9px
}
.job-estimate-software .phoneHead small {
font-size: 7px
}
.job-estimate-software .phoneTotal {
font-size: 23px
}
.job-estimate-software .phoneBody {
padding: 11px 9px
}
.job-estimate-software .mockAction {
font-size: 9px
}
.job-estimate-software .optionMini {
padding: 8px 7px
}
.job-estimate-software .optionMini strong {
font-size: 20px
}
.job-estimate-software .estimateTitle strong {
font-size: 16px
}
.job-estimate-software .customerLine {
font-size: 9px
}
.job-estimate-software .estimateMetrics strong {
font-size: 20px
}
.job-estimate-software .estimateMetrics>div {
padding: 11px 8px
}
.job-estimate-software .estimateMetrics small {
font-size: 7px
}
.job-estimate-software .ledgerHeading,
.job-estimate-software .ledgerRow {
padding: 11px 9px;
gap: 7px
}
.job-estimate-software .ledgerRow>.pill {
font-size: 7px;
padding: 4px 6px
}
}  .payment-processing-for-field-service .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.payment-processing-for-field-service .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.payment-processing-for-field-service .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.payment-processing-for-field-service .btn:hover {
transform: translateY(-2px)
}
.payment-processing-for-field-service .btn.black {
background: #0b0b0b;
color: #fff
}
.payment-processing-for-field-service .btn.black:hover {
background: #292929
}
.payment-processing-for-field-service .btn.yellow {
background: var(--yellow);
color: #000
}
.payment-processing-for-field-service .btn.yellow:hover {
background: #FFD454
}
.payment-processing-for-field-service .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.payment-processing-for-field-service .btn .icon {
width: 17px;
height: 17px
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.dark a:focus-visible,
.payment-processing-for-field-service .final a:focus-visible {
outline-color: var(--yellow)
}
.payment-processing-for-field-service .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.payment-processing-for-field-service .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.payment-processing-for-field-service .soft {
background: var(--sky2)
}
.payment-processing-for-field-service .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.dark h2,
.payment-processing-for-field-service .dark h3 {
color: #fff
}
.payment-processing-for-field-service .dark p {
color: #D6D6D6
}
.payment-processing-for-field-service .dark .ey {
background: var(--yellow)
}
.payment-processing-for-field-service .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.payment-processing-for-field-service .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.payment-processing-for-field-service .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.payment-processing-for-field-service .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.payment-processing-for-field-service .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.payment-processing-for-field-service .textLink .icon {
width: 16px;
height: 16px
}
.payment-processing-for-field-service .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.payment-processing-for-field-service .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.payment-processing-for-field-service .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.payment-processing-for-field-service .skipLink:focus {
top: 12px
} .payment-processing-for-field-service .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.payment-processing-for-field-service .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.payment-processing-for-field-service .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.payment-processing-for-field-service .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.payment-processing-for-field-service .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.payment-processing-for-field-service .logo.adobe {
font-size: 20px
}
.payment-processing-for-field-service .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .payment-processing-for-field-service .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.payment-processing-for-field-service .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.payment-processing-for-field-service .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.payment-processing-for-field-service .outcome:nth-child(2):before {
background: var(--yellow)
}
.payment-processing-for-field-service .outcome:nth-child(3):before {
background: var(--green)
}
.payment-processing-for-field-service .outcome:nth-child(4):before {
background: var(--purple)
}
.payment-processing-for-field-service .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.payment-processing-for-field-service .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.payment-processing-for-field-service .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .payment-processing-for-field-service .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.payment-processing-for-field-service .feature.reverse .visual {
order: -1
}
.payment-processing-for-field-service .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.payment-processing-for-field-service .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.payment-processing-for-field-service .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.payment-processing-for-field-service .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.payment-processing-for-field-service .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.payment-processing-for-field-service .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.payment-processing-for-field-service .visual>* {
position: relative;
z-index: 2
}
.payment-processing-for-field-service .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.payment-processing-for-field-service .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.payment-processing-for-field-service .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.payment-processing-for-field-service .uiHeading .icon {
width: 19px;
height: 19px
}
.payment-processing-for-field-service .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.payment-processing-for-field-service .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.payment-processing-for-field-service .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.payment-processing-for-field-service .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.payment-processing-for-field-service .pill.green {
background: var(--greenbg);
color: #116746
}
.payment-processing-for-field-service .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.payment-processing-for-field-service .pill.gray {
background: #F0F3F5;
color: #586C79
}
.payment-processing-for-field-service .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .payment-processing-for-field-service .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.payment-processing-for-field-service .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.payment-processing-for-field-service .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.payment-processing-for-field-service .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.payment-processing-for-field-service .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.payment-processing-for-field-service .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.payment-processing-for-field-service .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.payment-processing-for-field-service .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.payment-processing-for-field-service .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.payment-processing-for-field-service .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .payment-processing-for-field-service .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.payment-processing-for-field-service .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.payment-processing-for-field-service .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.payment-processing-for-field-service .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.payment-processing-for-field-service .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.payment-processing-for-field-service .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.payment-processing-for-field-service .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .payment-processing-for-field-service .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.payment-processing-for-field-service .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.payment-processing-for-field-service .featureCard:hover {
transform: translateY(-3px)
}
.featureIcon,
.payment-processing-for-field-service .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.featureIcon .icon,
.payment-processing-for-field-service .useIcon .icon {
width: 22px;
height: 22px
}
.payment-processing-for-field-service .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.payment-processing-for-field-service .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .payment-processing-for-field-service .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.payment-processing-for-field-service .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.payment-processing-for-field-service .useCase h3 {
font-size: 20px
}
.payment-processing-for-field-service .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.payment-processing-for-field-service .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.payment-processing-for-field-service .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.payment-processing-for-field-service .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.payment-processing-for-field-service .review h3 {
font-size: 22px
}
.payment-processing-for-field-service .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.payment-processing-for-field-service .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.payment-processing-for-field-service .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.payment-processing-for-field-service .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.payment-processing-for-field-service .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.payment-processing-for-field-service .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.payment-processing-for-field-service .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.payment-processing-for-field-service .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.payment-processing-for-field-service .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .payment-processing-for-field-service .faq {
max-width: 900px
}
.payment-processing-for-field-service .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.payment-processing-for-field-service .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.payment-processing-for-field-service .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.payment-processing-for-field-service .faq summary::marker {
color: var(--navy)
}
.payment-processing-for-field-service .faq details[open] {
border-color: #A9D3E7
}
.payment-processing-for-field-service .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .payment-processing-for-field-service .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.payment-processing-for-field-service .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.payment-processing-for-field-service .cta h3 {
font-size: 19px
}
.payment-processing-for-field-service .cta.darkCta h3 {
color: #fff
}
.payment-processing-for-field-service .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.payment-processing-for-field-service .cta.darkCta p {
color: #D1D1D1
}
.payment-processing-for-field-service .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.payment-processing-for-field-service .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.payment-processing-for-field-service .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.payment-processing-for-field-service .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.payment-processing-for-field-service .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.payment-processing-for-field-service .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.payment-processing-for-field-service .reveal {
opacity: 1;
transform: none
}  .payment-processing-for-field-service #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
.payment-processing-for-field-service #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.payment-processing-for-field-service #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.payment-processing-for-field-service #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.payment-processing-for-field-service #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.payment-processing-for-field-service #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.payment-processing-for-field-service #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.payment-processing-for-field-service #connected-tools.fsmTools {
padding: 52px 0;
}
.payment-processing-for-field-service #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.payment-processing-for-field-service #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.payment-processing-for-field-service #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.payment-processing-for-field-service #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.payment-processing-for-field-service #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.payment-processing-for-field-service #connected-tools.fsmTools h2 {
font-size: 30px;
}
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.payment-processing-for-field-service #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .payment-processing-for-field-service .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.payment-processing-for-field-service .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.heroGrid>*,
.feature>*,
.payment-processing-for-field-service .aiGrid>* {
min-width: 0
}
.payment-processing-for-field-service .hero h1 {
max-width: 590px
}
.payment-processing-for-field-service .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.payment-processing-for-field-service .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.payment-processing-for-field-service .heroNote {
font-size: 11px;
color: var(--muted);
line-height: 1.6;
max-width: 470px;
margin-top: 15px
}
.payment-processing-for-field-service .heroVisual {
position: relative;
min-width: 0
}
.payment-processing-for-field-service .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 184px;
gap: 14px 12px;
align-items: start
}
.payment-processing-for-field-service .assetStage:before {
content: "";
position: absolute;
inset: 60px 0 18px 22px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.payment-processing-for-field-service .assetStage>* {
position: relative;
z-index: 1
}
.payment-processing-for-field-service .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px
}
.payment-processing-for-field-service .paymentBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 19px;
overflow: hidden
}
.payment-processing-for-field-service .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--line)
}
.payment-processing-for-field-service .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.payment-processing-for-field-service .brandTile {
width: 28px;
height: 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.payment-processing-for-field-service .brandTile .icon {
width: 18px;
height: 18px
}
.payment-processing-for-field-service .boardSub {
font-size: 10px;
font-weight: 500;
color: var(--muted)
}
.payment-processing-for-field-service .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.payment-processing-for-field-service .paymentPaper {
padding: 21px 20px 17px
}
.payment-processing-for-field-service .paperTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px
}
.payment-processing-for-field-service .paperTop strong {
display: block;
font-size: 19px;
line-height: 1.35;
margin-top: 5px;
color: var(--ink)
}
.payment-processing-for-field-service .paperTop small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 9px
}
.payment-processing-for-field-service .paperTop .uiLabel {
font-size: 9px
}
.payment-processing-for-field-service .paperTop .pill {
font-size: 8px
}
.payment-processing-for-field-service .balanceGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 22px
}
.payment-processing-for-field-service .balanceGrid>div {
padding: 14px 11px;
background: var(--sky2);
border: 1px solid #D7E7F0;
border-radius: 11px
}
.payment-processing-for-field-service .balanceGrid>div:nth-child(2) {
background: #F1FBF6;
border-color: #D4EBDE
}
.payment-processing-for-field-service .balanceGrid .balanceDue {
background: #FFFBEC;
border-color: #ECD890
}
.payment-processing-for-field-service .balanceGrid span {
display: block;
font-size: 9px;
line-height: 1.5;
color: var(--muted)
}
.payment-processing-for-field-service .balanceGrid strong {
display: block;
font-size: 25px;
line-height: 1.25;
letter-spacing: -.035em;
color: var(--navy);
margin-top: 7px
}
.payment-processing-for-field-service .paymentMethodTitle {
font-size: 11px;
font-weight: 800;
margin: 20px 0 11px
}
.payment-processing-for-field-service .methodGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
.payment-processing-for-field-service .methodGrid>div {
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px 10px;
background: #fff
}
.payment-processing-for-field-service .methodGrid .icon {
height: 22px;
width: 22px;
color: var(--navy);
margin-bottom: 8px
}
.payment-processing-for-field-service .methodGrid strong {
font-size: 11px;
display: block;
line-height: 1.5
}
.payment-processing-for-field-service .methodGrid small {
font-size: 9px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
.payment-processing-for-field-service .transactionLine {
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #E0EBF2
}
.payment-processing-for-field-service .transactionLine>div {
flex: 1;
min-width: 0
}
.payment-processing-for-field-service .transactionIcon {
display: grid;
place-items: center;
background: var(--greenbg);
color: var(--green);
height: 29px;
width: 29px;
flex: 0 0 29px;
border-radius: 9px
}
.payment-processing-for-field-service .transactionIcon .icon {
width: 17px;
height: 17px
}
.payment-processing-for-field-service .transactionLine strong {
font-size: 11px;
display: block;
line-height: 1.5
}
.payment-processing-for-field-service .transactionLine small {
font-size: 9px;
display: block;
margin-top: 3px;
color: var(--muted)
}
.payment-processing-for-field-service .transactionLine>b {
font-size: 13px;
color: var(--navy);
white-space: nowrap
}
.payment-processing-for-field-service .boardFooter {
padding: 11px 198px 11px 15px;
min-height: 48px;
font-size: 9px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: #536F82;
display: flex;
align-items: center;
gap: 7px
}
.payment-processing-for-field-service .boardFooter .icon {
height: 14px;
width: 14px;
color: var(--green)
}
.payment-processing-for-field-service .paymentContext {
grid-column: 1;
align-self: start;
background: #101922;
border: 1px solid #2A404F;
border-radius: 15px;
color: #fff;
overflow: hidden
}
.payment-processing-for-field-service .contextHead {
font-size: 10px;
font-weight: 800;
padding: 11px 13px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #2E404B
}
.payment-processing-for-field-service .contextHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.payment-processing-for-field-service .contextBody {
padding: 15px
}
.payment-processing-for-field-service .contextBody>strong {
display: block;
font-size: 19px;
line-height: 1.4;
letter-spacing: -.02em
}
.payment-processing-for-field-service .contextBody>p {
color: #C8D7E1;
font-size: 11px;
line-height: 1.7;
margin-top: 7px
}
.payment-processing-for-field-service .contextTrail {
display: flex;
align-items: center;
gap: 9px;
font-size: 9px;
color: #CCE0EC;
margin-top: 13px
}
.payment-processing-for-field-service .contextTrail .icon {
width: 14px;
height: 14px;
color: var(--yellow)
}
.payment-processing-for-field-service .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -49px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.payment-processing-for-field-service .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.payment-processing-for-field-service .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.payment-processing-for-field-service .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.payment-processing-for-field-service .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.payment-processing-for-field-service .phoneHead strong {
font-size: 11px;
display: block;
line-height: 1.5
}
.payment-processing-for-field-service .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.payment-processing-for-field-service .phoneBody {
padding: 14px 11px 12px
}
.payment-processing-for-field-service .phoneBody .uiLabel {
font-size: 8px
}
.payment-processing-for-field-service .phoneTotal {
display: block;
font-size: 28px;
line-height: 1.3;
letter-spacing: -.035em;
color: var(--navy);
margin-top: 4px
}
.payment-processing-for-field-service .phoneBody>p {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 5px
}
.payment-processing-for-field-service .phoneMethods {
display: flex;
gap: 6px;
margin: 14px 0 10px
}
.payment-processing-for-field-service .phoneMethods>span {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
flex: 1;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px 5px;
font-size: 9px;
color: #536B7B
}
.payment-processing-for-field-service .phoneMethods .selected {
background: var(--sky);
border-color: #97CEEA;
color: var(--navy);
font-weight: 800
}
.payment-processing-for-field-service .phoneMethods .icon {
width: 13px;
height: 13px
}
.payment-processing-for-field-service .mockField {
border: 1px solid var(--line);
border-radius: 7px;
padding: 9px;
margin-bottom: 12px
}
.payment-processing-for-field-service .mockField small {
display: block;
font-size: 8px;
color: var(--muted)
}
.payment-processing-for-field-service .mockField strong {
display: block;
font-size: 9px;
line-height: 1.6;
margin-top: 4px
}
.payment-processing-for-field-service .mockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 8px;
background: var(--yellow);
color: #111;
border-radius: 7px;
text-align: center;
font-size: 10px;
font-weight: 800;
line-height: 1.4
}
.payment-processing-for-field-service .mockAction .icon {
width: 14px;
height: 14px
}
.payment-processing-for-field-service .phoneFine {
display: block;
text-align: center;
font-size: 7px;
color: var(--muted);
margin-top: 9px
}
.payment-processing-for-field-service .diagramCaption {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
text-align: center;
margin-top: 12px
} .payment-processing-for-field-service .readerScene {
display: grid;
grid-template-columns: 185px minmax(0, 1fr);
gap: 23px;
align-items: center
}
.payment-processing-for-field-service .readerDevice {
background: #0B2332;
border: 1px solid #294554;
border-radius: 24px;
padding: 13px 13px 19px;
position: relative
}
.payment-processing-for-field-service .readerScreen {
background: #F8FDFF;
border-radius: 12px;
padding: 15px 10px 14px;
text-align: center
}
.payment-processing-for-field-service .readerBrand {
display: block;
font-size: 11px;
font-weight: 850;
color: var(--navy)
}
.payment-processing-for-field-service .readerLabel {
font-size: 7px;
letter-spacing: .04em;
display: block;
color: var(--muted);
margin-top: 12px
}
.payment-processing-for-field-service .readerScreen>strong {
font-size: 30px;
color: var(--navy);
display: block;
letter-spacing: -.04em;
line-height: 1.3;
margin-top: 5px
}
.payment-processing-for-field-service .contactless {
display: block;
color: var(--navy);
margin: 9px auto 4px
}
.payment-processing-for-field-service .contactless .icon {
width: 37px;
height: 37px
}
.payment-processing-for-field-service .readerPrompt {
font-size: 9px;
color: var(--muted)
}
.payment-processing-for-field-service .readerKeys {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 12px 5px 9px
}
.payment-processing-for-field-service .readerKeys i {
display: block;
height: 17px;
background: #234757;
border: 1px solid #3E5B68;
border-radius: 4px
}
.payment-processing-for-field-service .readerKeys i:nth-last-child(1) {
background: #147857
}
.payment-processing-for-field-service .readerKeys i:nth-last-child(2) {
background: #BE9B34
}
.payment-processing-for-field-service .readerKeys i:nth-last-child(3) {
background: #A94949
}
.payment-processing-for-field-service .readerSlot {
display: block;
height: 4px;
margin: 0 auto;
background: #020E14;
width: 58px;
border-radius: 4px
}
.payment-processing-for-field-service .readerSteps {
display: grid;
gap: 16px
}
.payment-processing-for-field-service .miniStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.payment-processing-for-field-service .miniStep>span {
display: grid;
place-items: center;
height: 30px;
width: 30px;
flex: 0 0 30px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff;
color: var(--navy)
}
.payment-processing-for-field-service .miniStep .icon {
height: 16px;
width: 16px
}
.payment-processing-for-field-service .miniStep strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.payment-processing-for-field-service .miniStep p {
font-size: 11px !important;
color: var(--muted);
line-height: 1.6;
margin-top: 4px !important
}
.payment-processing-for-field-service .miniReceipt {
padding: 13px;
background: #fff;
border: 1px solid #C4E5D4;
border-radius: 11px
}
.payment-processing-for-field-service .miniReceipt>span {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: #147052;
font-weight: 700
}
.payment-processing-for-field-service .miniReceipt .icon {
height: 15px;
width: 15px
}
.payment-processing-for-field-service .miniReceipt strong {
display: block;
font-size: 26px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -.03em;
margin-top: 8px
}
.payment-processing-for-field-service .miniReceipt small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 4px
}
.payment-processing-for-field-service .methodBadges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
margin-top: 17px
}
.payment-processing-for-field-service .methodBadges span {
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
padding: 5px 8px;
color: #536B7D
} .payment-processing-for-field-service .messageCard {
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px
}
.payment-processing-for-field-service .messageHeader {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px
}
.payment-processing-for-field-service .messageHeader>span {
display: flex;
gap: 7px;
align-items: center;
font-size: 12px;
font-weight: 800;
color: var(--navy)
}
.payment-processing-for-field-service .messageHeader .icon {
height: 18px;
width: 18px
}
.payment-processing-for-field-service .messageHeader small {
font-size: 9px;
color: var(--muted)
}
.payment-processing-for-field-service .messageCard>p {
font-size: 12px !important;
line-height: 1.65;
margin-top: 12px !important
}
.payment-processing-for-field-service .sampleLink {
display: flex;
align-items: center;
gap: 8px;
padding: 11px;
border-radius: 8px;
background: var(--sky);
border: 1px solid #CBE7F4;
font-size: 11px;
font-weight: 750;
color: var(--navy);
margin-top: 12px
}
.payment-processing-for-field-service .sampleLink .icon {
width: 16px;
height: 16px
}
.payment-processing-for-field-service .sampleLink .icon:last-child {
margin-left: auto
}
.payment-processing-for-field-service .linkConnector {
display: grid;
place-items: center;
height: 36px;
color: #6B9CB3
}
.payment-processing-for-field-service .linkConnector .icon {
width: 20px;
height: 20px;
transform: rotate(90deg)
}
.payment-processing-for-field-service .hostedPage {
background: #fff;
border: 1px solid #C8DDE9;
border-radius: 13px;
overflow: hidden
}
.payment-processing-for-field-service .hostedHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 15px;
background: #F7FBFD;
border-bottom: 1px solid var(--line)
}
.payment-processing-for-field-service .hostedHead>span:first-child {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 750;
color: var(--navy)
}
.payment-processing-for-field-service .hostedHead .icon {
height: 14px;
width: 14px
}
.payment-processing-for-field-service .hostedAmount {
text-align: center;
padding: 17px 15px 14px
}
.payment-processing-for-field-service .hostedAmount>span {
display: block;
font-size: 9px;
color: var(--muted)
}
.payment-processing-for-field-service .hostedAmount>strong {
display: block;
font-size: 32px;
color: var(--navy);
line-height: 1.35;
letter-spacing: -.035em;
margin-top: 4px
}
.payment-processing-for-field-service .hostedAmount>small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 6px
}
.payment-processing-for-field-service .checkoutMethods {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0 15px 15px
}
.payment-processing-for-field-service .checkoutMethods>div {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 11px;
border: 1px solid var(--line);
padding: 10px 7px;
border-radius: 8px
}
.payment-processing-for-field-service .checkoutMethods .icon {
height: 17px;
width: 17px;
color: var(--navy)
}
.payment-processing-for-field-service .checkoutMethods .active {
background: var(--sky);
border-color: #99CFE6;
color: var(--navy);
font-weight: 800
}
.payment-processing-for-field-service .hostedFooter {
border-top: 1px solid var(--line);
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 13px
}
.payment-processing-for-field-service .hostedFooter>span:first-child {
font-size: 10px;
color: var(--muted)
}
.payment-processing-for-field-service .hostedFooter .mockAction {
padding: 9px 12px
}
.payment-processing-for-field-service .infoFoot {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 10px;
color: #547385;
line-height: 1.65;
margin-top: 14px
}
.payment-processing-for-field-service .infoFoot .icon {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 1px
} .payment-processing-for-field-service .balancePanel {
border: 1px solid var(--line);
background: #fff;
border-radius: 14px;
overflow: hidden
}
.payment-processing-for-field-service .balancePanelHead {
padding: 18px;
background: #0D2637;
color: #fff
}
.payment-processing-for-field-service .balancePanelHead>span {
font-size: 11px;
color: #C9DEEB;
display: block
}
.payment-processing-for-field-service .balancePanelHead>strong {
font-size: 31px;
display: block;
line-height: 1.3;
letter-spacing: -.03em;
margin-top: 5px
}
.payment-processing-for-field-service .progressLegend {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 17px 18px 9px;
font-size: 11px;
color: var(--navy)
}
.payment-processing-for-field-service .progressLegend>span:first-child {
display: flex;
align-items: center;
gap: 6px;
font-weight: 800
}
.payment-processing-for-field-service .progressLegend i {
width: 7px;
height: 7px;
display: inline-block;
background: var(--green);
border-radius: 50%
}
.payment-processing-for-field-service .paymentProgress {
height: 12px;
margin: 0 18px 18px;
background: #ECF3F7;
border-radius: 9px;
overflow: hidden
}
.payment-processing-for-field-service .paymentProgress>span {
display: block;
width: 30%;
height: 100%;
background: var(--green);
border-radius: 9px
}
.payment-processing-for-field-service .paymentMilestones {
padding: 0 18px 8px
}
.payment-processing-for-field-service .milestone {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid #DFEAF0;
padding: 14px 0
}
.payment-processing-for-field-service .milestone>div {
flex: 1;
min-width: 0
}
.payment-processing-for-field-service .milestoneIcon {
height: 31px;
width: 31px;
flex: 0 0 31px;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--yellowsoft);
color: #846010
}
.payment-processing-for-field-service .milestoneIcon.done {
background: var(--greenbg);
color: var(--green)
}
.payment-processing-for-field-service .milestoneIcon .icon {
height: 17px;
width: 17px
}
.payment-processing-for-field-service .milestone strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.payment-processing-for-field-service .milestone small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
.payment-processing-for-field-service .milestone>b {
font-size: 13px;
color: var(--navy);
white-space: nowrap
}
.payment-processing-for-field-service .followupCard {
display: flex;
gap: 11px;
align-items: flex-start;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 15px;
margin-top: 13px
}
.payment-processing-for-field-service .eventIcon {
display: grid;
place-items: center;
height: 33px;
width: 33px;
flex: 0 0 33px;
border-radius: 10px;
background: var(--yellowsoft);
color: #937214
}
.payment-processing-for-field-service .eventIcon .icon {
height: 18px;
width: 18px
}
.payment-processing-for-field-service .followupCard strong {
font-size: 12px;
display: block
}
.payment-processing-for-field-service .followupCard p {
font-size: 11px !important;
line-height: 1.6;
margin-top: 4px !important
}
.payment-processing-for-field-service .balanceNote {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 10px;
color: #557181;
line-height: 1.6;
margin-top: 13px
}
.payment-processing-for-field-service .balanceNote .icon {
height: 16px;
width: 16px;
flex: 0 0 16px;
color: var(--navy)
} .payment-processing-for-field-service .paymentMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 13px
}
.payment-processing-for-field-service .paymentMetrics>div {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 14px 10px
}
.payment-processing-for-field-service .paymentMetrics>div:nth-child(2) {
background: #FFFBEF;
border-color: #E7D594
}
.payment-processing-for-field-service .paymentMetrics span {
display: block;
font-size: 9px;
color: var(--muted)
}
.payment-processing-for-field-service .paymentMetrics strong {
display: block;
font-size: 25px;
letter-spacing: -.035em;
line-height: 1.3;
margin: 6px 0;
color: var(--navy)
}
.payment-processing-for-field-service .paymentMetrics small {
font-size: 8px;
color: var(--muted);
display: block;
line-height: 1.5
}
.payment-processing-for-field-service .ledgerPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden
}
.payment-processing-for-field-service .paymentLedger {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 0;
color: var(--ink)
}
.payment-processing-for-field-service .paymentLedger caption {
text-align: left;
padding: 12px 14px;
font-size: 12px;
font-weight: 800;
color: var(--navy);
background: #fff
}
.payment-processing-for-field-service .paymentLedger th {
background: #F1F8FC;
font-size: 10px;
text-align: right;
font-weight: 700;
color: var(--muted);
padding: 10px 14px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line)
}
.payment-processing-for-field-service .paymentLedger th:first-child {
text-align: left;
width: 44%
}
.payment-processing-for-field-service .paymentLedger td {
font-size: 12px;
text-align: right;
padding: 13px 14px;
border-top: 1px solid #E5EDF3
}
.payment-processing-for-field-service .paymentLedger td:first-child {
text-align: left
}
.payment-processing-for-field-service .paymentLedger td strong {
font-size: 11px;
display: block
}
.payment-processing-for-field-service .paymentLedger td small {
display: flex;
align-items: center;
gap: 4px;
font-size: 9px;
color: var(--muted);
margin-top: 3px;
line-height: 1.5
}
.payment-processing-for-field-service .paymentLedger .reconciled {
background: #FFF7D6
}
.payment-processing-for-field-service .paymentLedger .reconciled small {
color: #7F641A
}
.payment-processing-for-field-service .paymentLedger small .icon {
height: 11px;
width: 11px
}
.payment-processing-for-field-service .accountingFlow {
display: grid;
grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
align-items: center;
gap: 13px;
background: #0D2637;
border: 1px solid #274757;
border-radius: 12px;
padding: 17px 15px;
margin-top: 14px;
color: #fff
}
.payment-processing-for-field-service .accountingFlow>span {
display: block
}
.payment-processing-for-field-service .accountingFlow b {
font-size: 13px;
display: block
}
.payment-processing-for-field-service .accountingFlow small {
font-size: 9px;
color: #C8DDE8;
display: block;
margin-top: 5px;
line-height: 1.5
}
.payment-processing-for-field-service .accountingFlow>.icon {
color: var(--yellow);
width: 20px;
height: 20px
} .payment-processing-for-field-service .availabilityNote {
display: block;
color: #607487;
font-size: 11px;
line-height: 1.6;
margin-top: auto;
padding-top: 14px
}
.payment-processing-for-field-service .connectedCard p {
margin-bottom: 10px
}
.payment-processing-for-field-service .sectionNote {
font-size: 12px;
color: var(--muted);
line-height: 1.7;
margin: 21px auto 0;
max-width: 900px;
text-align: center
}
.payment-processing-for-field-service .cta.darkCta .btn.outline {
background: transparent;
color: #fff;
border-color: #555
}
.payment-processing-for-field-service .dark .sectionHead {
margin-bottom: 0
}
.payment-processing-for-field-service .dark .sectionHead h2 {
color: #fff
} @media(max-width:1100px) and (min-width:961px) {
.payment-processing-for-field-service .heroGrid {
gap: 28px
} .payment-processing-for-field-service .hero .lead {
font-size: 17px
}
.payment-processing-for-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 166px;
gap: 12px 10px
}
.payment-processing-for-field-service .boardFooter {
padding-right: 177px
}
.payment-processing-for-field-service .paymentPaper {
padding: 17px 15px
}
.payment-processing-for-field-service .paperTop strong {
font-size: 17px
}
.payment-processing-for-field-service .paperTop .pill {
display: none
}
.payment-processing-for-field-service .balanceGrid {
gap: 7px
}
.payment-processing-for-field-service .balanceGrid>div {
padding: 12px 9px
}
.payment-processing-for-field-service .balanceGrid strong {
font-size: 24px
}
.payment-processing-for-field-service .methodGrid {
gap: 7px
}
.payment-processing-for-field-service .methodGrid>div {
padding: 11px 8px
}
.payment-processing-for-field-service .methodGrid strong {
font-size: 10px
}
.payment-processing-for-field-service .methodGrid small {
font-size: 8px
}
.payment-processing-for-field-service .boardSub {
display: none
}
.payment-processing-for-field-service .contextBody>strong {
font-size: 16px
}
.payment-processing-for-field-service .contextBody {
padding: 12px
}
.payment-processing-for-field-service .contextTrail {
gap: 5px;
font-size: 8px
}
.payment-processing-for-field-service .visual {
padding: 18px
}
.payment-processing-for-field-service .readerScene {
grid-template-columns: 157px minmax(0, 1fr);
gap: 15px
}
.payment-processing-for-field-service .readerDevice {
padding: 11px
}
.payment-processing-for-field-service .readerScreen>strong {
font-size: 27px
}
.payment-processing-for-field-service .readerLabel {
font-size: 6px
}
.payment-processing-for-field-service .miniStep strong {
font-size: 11px
}
.payment-processing-for-field-service .miniStep p {
font-size: 10px !important
}
.payment-processing-for-field-service .paymentMetrics strong {
font-size: 23px
}
}
@media(max-width:960px) {
.heroGrid,
.feature,
.aiGrid,
.payment-processing-for-field-service .final {
grid-template-columns: 1fr
}
.payment-processing-for-field-service .heroGrid {
gap: 36px
}
.payment-processing-for-field-service .hero h1 {
max-width: 800px
}
.payment-processing-for-field-service .hero .lead {
max-width: 750px
}
.payment-processing-for-field-service .heroVisual {
width: 100%;
max-width: 640px;
margin: 0 auto
}
.payment-processing-for-field-service .assetStage {
margin: auto
}
.payment-processing-for-field-service .feature.reverse .visual {
order: 0
}
.payment-processing-for-field-service .feature {
gap: 30px
}
.payment-processing-for-field-service .feature>div:first-child {
max-width: 800px
}
.outcomes,
.featureGrid,
.connectedGrid,
.payment-processing-for-field-service .useCases {
grid-template-columns: repeat(2, 1fr)
}
.payment-processing-for-field-service .logos {
grid-template-columns: repeat(3, 1fr)
}
.payment-processing-for-field-service .reviews {
grid-template-columns: 1fr
}
.payment-processing-for-field-service .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.payment-processing-for-field-service .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.payment-processing-for-field-service .ratingItem:nth-child(2) {
border: 0
}
.payment-processing-for-field-service .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.payment-processing-for-field-service .final .btn {
min-width: 195px
}
.payment-processing-for-field-service .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.payment-processing-for-field-service .aiGrid {
gap: 30px
}
.payment-processing-for-field-service .aiMini {
max-width: 760px
}
.payment-processing-for-field-service .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.payment-processing-for-field-service .wrap {
width: calc(100% - 24px);
grid-template-columns: 1fr;
}
.payment-processing-for-field-service section {
padding: 56px 0
}
.payment-processing-for-field-service .hero {
padding: 32px 0 42px
} .payment-processing-for-field-service h2 {
font-size: 34px
}
.payment-processing-for-field-service .lead {
font-size: 17px
}
.payment-processing-for-field-service .sectionHead p {
font-size: 16px
}
.payment-processing-for-field-service .sectionHead {
margin-bottom: 28px
}
.payment-processing-for-field-service .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.payment-processing-for-field-service .heroGrid {
gap: 26px;
grid-template-columns: none;
}
.payment-processing-for-field-service .hero .actions {
gap: 8px
}
.payment-processing-for-field-service .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.payment-processing-for-field-service .micro {
font-size: 11px
}
.payment-processing-for-field-service .heroPills {
gap: 6px
}
.payment-processing-for-field-service .heroPills span {
font-size: 9px
}
.payment-processing-for-field-service .heroNote {
font-size: 10px
}
.payment-processing-for-field-service .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.payment-processing-for-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 164px;
gap: 12px 10px
}
.payment-processing-for-field-service .assetTag {
font-size: 9px
}
.payment-processing-for-field-service .boardHeader {
padding: 13px
}
.payment-processing-for-field-service .boardBrand {
font-size: 12px
}
.payment-processing-for-field-service .boardSub {
display: none
}
.payment-processing-for-field-service .sampleBadge {
font-size: 7px
}
.payment-processing-for-field-service .paymentPaper {
padding: 16px 13px 14px
}
.payment-processing-for-field-service .paperTop strong {
font-size: 17px
}
.payment-processing-for-field-service .paperTop .pill {
display: none
}
.payment-processing-for-field-service .paperTop small {
font-size: 9px
}
.payment-processing-for-field-service .balanceGrid {
gap: 7px;
margin-top: 17px
}
.payment-processing-for-field-service .balanceGrid>div {
padding: 11px 8px
}
.payment-processing-for-field-service .balanceGrid span {
font-size: 8px;
min-height: 24px
}
.payment-processing-for-field-service .balanceGrid strong {
font-size: 23px;
margin-top: 4px
}
.payment-processing-for-field-service .paymentMethodTitle {
font-size: 10px;
margin-top: 17px
}
.payment-processing-for-field-service .methodGrid {
gap: 7px
}
.payment-processing-for-field-service .methodGrid>div {
padding: 11px 8px
}
.payment-processing-for-field-service .methodGrid .icon {
width: 20px;
height: 20px
}
.payment-processing-for-field-service .methodGrid strong {
font-size: 10px
}
.payment-processing-for-field-service .methodGrid small {
font-size: 8px
}
.payment-processing-for-field-service .transactionLine {
gap: 8px;
margin-top: 15px;
padding-top: 13px
}
.payment-processing-for-field-service .transactionLine strong {
font-size: 10px
}
.payment-processing-for-field-service .transactionLine small {
font-size: 8px
}
.payment-processing-for-field-service .transactionLine>b {
font-size: 11px
}
.payment-processing-for-field-service .boardFooter {
padding: 10px 174px 10px 12px;
font-size: 8px;
min-height: 51px
}
.payment-processing-for-field-service .assetPhone {
margin-top: -44px;
border-radius: 24px
}
.payment-processing-for-field-service .phoneScreen {
border-radius: 18px
}
.payment-processing-for-field-service .phoneHead {
padding: 10px 9px
}
.payment-processing-for-field-service .phoneHead strong {
font-size: 10px
}
.payment-processing-for-field-service .phoneHead small {
font-size: 7px
}
.payment-processing-for-field-service .phoneBody {
padding: 12px 10px 10px
}
.payment-processing-for-field-service .phoneTotal {
font-size: 26px
}
.payment-processing-for-field-service .phoneFine {
font-size: 7px
}
.payment-processing-for-field-service .phoneMethods>span {
font-size: 8px;
padding: 7px 4px
}
.payment-processing-for-field-service .mockField {
padding: 8px
}
.payment-processing-for-field-service .mockField strong {
font-size: 8px
}
.payment-processing-for-field-service .mockAction {
font-size: 9px
}
.payment-processing-for-field-service .contextHead {
padding: 10px;
gap: 7px;
font-size: 9px
}
.payment-processing-for-field-service .contextHead .icon {
width: 15px;
height: 15px
}
.payment-processing-for-field-service .contextBody {
padding: 12px 11px
}
.payment-processing-for-field-service .contextBody>strong {
font-size: 16px
}
.payment-processing-for-field-service .contextBody>p {
font-size: 10px
}
.payment-processing-for-field-service .contextTrail {
gap: 5px;
font-size: 8px;
flex-wrap: wrap
}
.payment-processing-for-field-service .diagramCaption {
font-size: 9px
}
.payment-processing-for-field-service .trust {
padding: 23px 0
}
.payment-processing-for-field-service .trustLabel {
font-size: 12px
}
.payment-processing-for-field-service .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.payment-processing-for-field-service .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.payment-processing-for-field-service .logo.dhl {
font-size: 19px
}
.payment-processing-for-field-service .logo.adobe {
font-size: 17px
}
.payment-processing-for-field-service .logo.golden {
font-size: 8px
}
.payment-processing-for-field-service .fl,
.payment-processing-for-field-service .outcomes,
.payment-processing-for-field-service .featureGrid,
.payment-processing-for-field-service .connectedGrid,
.payment-processing-for-field-service .payment-processing-for-field-service .useCases {
grid-template-columns: 1fr
}
.payment-processing-for-field-service .fi {
font-size: 14px
}
.payment-processing-for-field-service .outcome {
padding: 21px
}
.payment-processing-for-field-service .outcome strong {
margin-top: 12px
}
.payment-processing-for-field-service .outcome span {
font-size: 14px
}
.payment-processing-for-field-service .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.payment-processing-for-field-service .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.payment-processing-for-field-service .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.payment-processing-for-field-service .uiSub {
font-size: 9px
}
.payment-processing-for-field-service .readerScene {
grid-template-columns: 160px minmax(0, 1fr);
gap: 14px
}
.payment-processing-for-field-service .readerDevice {
padding: 11px
}
.payment-processing-for-field-service .readerScreen {
padding: 13px 8px
}
.payment-processing-for-field-service .readerScreen>strong {
font-size: 28px
}
.payment-processing-for-field-service .readerLabel {
font-size: 6px
}
.payment-processing-for-field-service .readerSteps {
gap: 13px
}
.payment-processing-for-field-service .miniStep {
gap: 8px
}
.payment-processing-for-field-service .miniStep>span {
height: 27px;
width: 27px;
flex-basis: 27px
}
.payment-processing-for-field-service .miniStep strong {
font-size: 11px
}
.payment-processing-for-field-service .miniStep p {
font-size: 10px !important
}
.payment-processing-for-field-service .miniReceipt {
padding: 11px
}
.payment-processing-for-field-service .miniReceipt>span {
font-size: 9px
}
.payment-processing-for-field-service .miniReceipt strong {
font-size: 24px
}
.payment-processing-for-field-service .miniReceipt small {
font-size: 8px
}
.payment-processing-for-field-service .methodBadges {
gap: 6px
}
.payment-processing-for-field-service .methodBadges span {
font-size: 8px;
padding: 5px 7px
}
.payment-processing-for-field-service .messageCard {
padding: 14px
}
.payment-processing-for-field-service .messageHeader>span {
font-size: 11px
}
.payment-processing-for-field-service .messageHeader small {
font-size: 8px
}
.payment-processing-for-field-service .messageCard>p {
font-size: 11px !important
}
.payment-processing-for-field-service .sampleLink {
font-size: 10px;
padding: 10px
}
.payment-processing-for-field-service .hostedHead {
padding: 11px 13px
}
.payment-processing-for-field-service .hostedHead>span:first-child {
font-size: 10px
}
.payment-processing-for-field-service .hostedAmount>strong {
font-size: 30px
}
.payment-processing-for-field-service .checkoutMethods {
gap: 6px;
margin: 0 13px 13px
}
.payment-processing-for-field-service .checkoutMethods>div {
font-size: 10px;
gap: 5px;
padding: 9px 6px
}
.payment-processing-for-field-service .checkoutMethods .icon {
height: 15px;
width: 15px
}
.payment-processing-for-field-service .hostedFooter {
padding: 11px 13px
}
.payment-processing-for-field-service .hostedFooter>span:first-child {
font-size: 9px
}
.payment-processing-for-field-service .infoFoot {
font-size: 10px
}
.payment-processing-for-field-service .balancePanelHead {
padding: 16px
}
.payment-processing-for-field-service .balancePanelHead>strong {
font-size: 29px
}
.payment-processing-for-field-service .balancePanelHead>span {
font-size: 10px
}
.payment-processing-for-field-service .progressLegend {
padding: 15px 16px 9px;
font-size: 10px
}
.payment-processing-for-field-service .paymentProgress {
margin: 0 16px 15px
}
.payment-processing-for-field-service .paymentMilestones {
padding: 0 16px 7px
}
.payment-processing-for-field-service .milestone {
gap: 8px
}
.payment-processing-for-field-service .milestone strong {
font-size: 11px
}
.payment-processing-for-field-service .milestone small {
font-size: 8px
}
.payment-processing-for-field-service .milestone>b {
font-size: 12px
}
.payment-processing-for-field-service .milestoneIcon {
height: 29px;
width: 29px;
flex-basis: 29px
}
.payment-processing-for-field-service .followupCard {
padding: 13px
}
.payment-processing-for-field-service .followupCard strong {
font-size: 11px
}
.payment-processing-for-field-service .followupCard p {
font-size: 10px !important
}
.payment-processing-for-field-service .balanceNote {
font-size: 10px
}
.payment-processing-for-field-service .paymentMetrics {
gap: 7px
}
.payment-processing-for-field-service .paymentMetrics>div {
padding: 12px 8px
}
.payment-processing-for-field-service .paymentMetrics span {
font-size: 8px
}
.payment-processing-for-field-service .paymentMetrics strong {
font-size: 23px
}
.payment-processing-for-field-service .paymentMetrics small {
font-size: 8px
}
.payment-processing-for-field-service .paymentLedger caption {
padding: 11px 12px;
font-size: 11px
}
.payment-processing-for-field-service .paymentLedger th {
padding: 10px 12px;
font-size: 9px
}
.payment-processing-for-field-service .paymentLedger td {
padding: 12px;
font-size: 11px
}
.payment-processing-for-field-service .paymentLedger td strong {
font-size: 10px
}
.payment-processing-for-field-service .paymentLedger td small {
font-size: 8px
}
.payment-processing-for-field-service .accountingFlow {
padding: 15px 13px;
gap: 10px
}
.payment-processing-for-field-service .accountingFlow b {
font-size: 12px
}
.payment-processing-for-field-service .accountingFlow small {
font-size: 9px
}
.payment-processing-for-field-service .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.payment-processing-for-field-service .aiMini div {
padding: 16px
}
.payment-processing-for-field-service .aiMini strong {
font-size: 14px
}
.payment-processing-for-field-service .aiMini span {
font-size: 13px
}
.payment-processing-for-field-service .promptBox {
padding: 18px;
border-radius: 17px
}
.payment-processing-for-field-service .prompt {
font-size: 13px;
padding: 13px
}
.payment-processing-for-field-service .promptHead {
font-size: 19px
}
.payment-processing-for-field-service .promptFoot {
font-size: 10px !important
}
.payment-processing-for-field-service .connectedCard {
padding: 22px
}
.connectedCard p,
.featureCard p,
.payment-processing-for-field-service .useCase p {
font-size: 14px
}
.payment-processing-for-field-service .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.payment-processing-for-field-service .availabilityNote {
font-size: 12px
}
.payment-processing-for-field-service .sectionNote {
font-size: 11px;
text-align: left
}
.payment-processing-for-field-service .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.payment-processing-for-field-service .ratingItem {
border: 0
}
.payment-processing-for-field-service .ratingLead {
margin-bottom: 3px
}
.payment-processing-for-field-service .review p {
font-size: 14px
}
.payment-processing-for-field-service .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.payment-processing-for-field-service .ctaBtns {
width: 100%
}
.payment-processing-for-field-service .ctaBtns .btn {
flex: 1
}
.payment-processing-for-field-service .cta p {
font-size: 14px
}
.payment-processing-for-field-service .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.payment-processing-for-field-service .final h2 {
font-size: 32px
}
.payment-processing-for-field-service .final p {
font-size: 15px
}
.payment-processing-for-field-service .final .ctaBtns {
flex-direction: column
}
.payment-processing-for-field-service .final .btn {
min-width: 0;
width: 100%
}
.payment-processing-for-field-service .faq details {
padding: 16px
}
.payment-processing-for-field-service .faq summary {
font-size: 14px
}
.payment-processing-for-field-service .faq details p {
font-size: 14px
}
}
@media(max-width:380px) {
.payment-processing-for-field-service .readerScene {
grid-template-columns: 1fr;
gap: 18px
}
.payment-processing-for-field-service .readerDevice {
width: 185px;
margin: 0 auto
}
.payment-processing-for-field-service .readerSteps {
grid-template-columns: 1fr;
gap: 12px
}
.payment-processing-for-field-service .miniStep strong {
font-size: 12px
}
.payment-processing-for-field-service .miniStep p {
font-size: 11px !important
}
.payment-processing-for-field-service .miniReceipt {
padding: 13px
}
.payment-processing-for-field-service .readerLabel {
font-size: 7px
}
.payment-processing-for-field-service .milestone {
flex-wrap: wrap
}
.payment-processing-for-field-service .milestone>b {
margin-left: 37px;
flex-basis: calc(100% - 37px)
}
.payment-processing-for-field-service .balanceGrid strong {
font-size: 21px
}
.payment-processing-for-field-service .paymentMetrics strong {
font-size: 21px
}
.payment-processing-for-field-service .paymentMetrics small {
font-size: 7px
}
.paymentLedger td,
.payment-processing-for-field-service .paymentLedger th {
padding-left: 10px;
padding-right: 10px
}
}
@media(max-width:360px) { .payment-processing-for-field-service h2 {
font-size: 31px
}
.payment-processing-for-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 146px;
gap: 10px 8px
}
.payment-processing-for-field-service .assetTag {
font-size: 8px
}
.payment-processing-for-field-service .paperTop strong {
font-size: 16px
}
.payment-processing-for-field-service .balanceGrid>div {
padding: 10px 7px
}
.payment-processing-for-field-service .balanceGrid span {
font-size: 7px
}
.payment-processing-for-field-service .methodGrid>div {
padding: 10px 7px
}
.payment-processing-for-field-service .methodGrid strong {
font-size: 9px
}
.payment-processing-for-field-service .methodGrid small {
font-size: 7px
}
.payment-processing-for-field-service .contextHead {
font-size: 8px;
padding: 9px;
gap: 5px
}
.payment-processing-for-field-service .contextBody {
padding: 10px
}
.payment-processing-for-field-service .contextBody>strong {
font-size: 14px
}
.payment-processing-for-field-service .contextBody>p {
font-size: 9px
}
.payment-processing-for-field-service .contextTrail {
font-size: 7px
}
.payment-processing-for-field-service .phoneHead strong {
font-size: 9px
}
.payment-processing-for-field-service .phoneHead small {
font-size: 7px
}
.payment-processing-for-field-service .phoneTotal {
font-size: 24px
}
.payment-processing-for-field-service .phoneBody {
padding: 11px 8px 9px
}
.payment-processing-for-field-service .phoneBody>p {
font-size: 8px
}
.payment-processing-for-field-service .phoneMethods>span {
font-size: 7px
}
.payment-processing-for-field-service .phoneMethods .icon {
height: 12px;
width: 12px
}
.payment-processing-for-field-service .mockField strong {
font-size: 7px
}
.payment-processing-for-field-service .mockField small {
font-size: 7px
}
.payment-processing-for-field-service .boardFooter {
padding-right: 154px;
font-size: 7px
}
.payment-processing-for-field-service .transactionLine strong {
font-size: 9px
}
.payment-processing-for-field-service .transactionLine small {
font-size: 7px
}
.payment-processing-for-field-service .transactionLine>b {
font-size: 10px
}
.payment-processing-for-field-service .checkoutMethods>div {
font-size: 9px
}
.payment-processing-for-field-service .hostedHead .pill {
font-size: 7px
}
}  .card-reader-field-service .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.card-reader-field-service .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.card-reader-field-service .dark a:focus-visible,
.card-reader-field-service .final a:focus-visible {
outline-color: var(--yellow)
}
.card-reader-field-service .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.card-reader-field-service .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.card-reader-field-service .soft {
background: var(--sky2)
}
.card-reader-field-service .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.card-reader-field-service .dark h2,
.card-reader-field-service .dark h3 {
color: #fff
}
.card-reader-field-service .dark p {
color: #D6D6D6
}
.card-reader-field-service .dark .ey {
background: var(--yellow)
}
.card-reader-field-service .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.card-reader-field-service .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.card-reader-field-service .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.card-reader-field-service .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin-bottom: 0 !important;
background: transparent !important;
}
.card-reader-field-service .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.card-reader-field-service .textLink .icon {
width: 16px;
height: 16px
}
.card-reader-field-service .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.card-reader-field-service .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.card-reader-field-service .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.card-reader-field-service .skipLink:focus {
top: 12px
} .card-reader-field-service .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.card-reader-field-service .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.card-reader-field-service .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.card-reader-field-service .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.card-reader-field-service .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.card-reader-field-service .logo.adobe {
font-size: 20px
}
.card-reader-field-service .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .card-reader-field-service .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.card-reader-field-service .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.card-reader-field-service .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.card-reader-field-service .outcome:nth-child(2):before {
background: var(--yellow)
}
.card-reader-field-service .outcome:nth-child(3):before {
background: var(--green)
}
.card-reader-field-service .outcome:nth-child(4):before {
background: var(--purple)
}
.card-reader-field-service .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.card-reader-field-service .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.card-reader-field-service .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .card-reader-field-service .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.card-reader-field-service .feature.reverse .visual {
order: -1
}
.card-reader-field-service .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.card-reader-field-service .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.card-reader-field-service .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.card-reader-field-service .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.card-reader-field-service .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.card-reader-field-service .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.card-reader-field-service .visual>* {
position: relative;
z-index: 2
}
.card-reader-field-service .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.card-reader-field-service .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.card-reader-field-service .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.card-reader-field-service .uiHeading .icon {
width: 19px;
height: 19px
}
.card-reader-field-service .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.card-reader-field-service .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.card-reader-field-service .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
} .card-reader-field-service .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.card-reader-field-service .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.card-reader-field-service .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.card-reader-field-service .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.card-reader-field-service .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.card-reader-field-service .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.card-reader-field-service .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.card-reader-field-service .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.card-reader-field-service .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.card-reader-field-service .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .card-reader-field-service .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.card-reader-field-service .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.card-reader-field-service .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.card-reader-field-service .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.card-reader-field-service .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.card-reader-field-service .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.card-reader-field-service .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .card-reader-field-service .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.card-reader-field-service .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.card-reader-field-service .featureCard:hover {
transform: translateY(-3px)
}
.card-reader-field-service .featureIcon,
.card-reader-field-service .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.card-reader-field-service .featureIcon .icon,
.card-reader-field-service .useIcon .icon {
width: 22px;
height: 22px
}
.card-reader-field-service .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.card-reader-field-service .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .card-reader-field-service .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.card-reader-field-service .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.card-reader-field-service .useCase h3 {
font-size: 20px
}
.card-reader-field-service .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.card-reader-field-service .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.card-reader-field-service .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.card-reader-field-service .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.card-reader-field-service .review h3 {
font-size: 22px
}
.card-reader-field-service .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.card-reader-field-service .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.card-reader-field-service .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.card-reader-field-service .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.card-reader-field-service .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.card-reader-field-service .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.card-reader-field-service .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.card-reader-field-service .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.card-reader-field-service .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .card-reader-field-service .faq {
max-width: 900px
}
.card-reader-field-service .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.card-reader-field-service .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.card-reader-field-service .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.card-reader-field-service .faq summary::marker {
color: var(--navy)
}
.card-reader-field-service .faq details[open] {
border-color: #A9D3E7
}
.card-reader-field-service .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .card-reader-field-service .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.card-reader-field-service .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.card-reader-field-service .cta h3 {
font-size: 19px
}
.cta.darkCta h3 {
color: #fff
}
.card-reader-field-service .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.card-reader-field-service .cta.darkCta p {
color: #D1D1D1
}
.card-reader-field-service .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.card-reader-field-service .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.card-reader-field-service .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.card-reader-field-service .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.card-reader-field-service .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.card-reader-field-service .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.card-reader-field-service .reveal {
opacity: 1;
transform: none
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .card-reader-field-service .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.card-reader-field-service .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.card-reader-field-service .heroGrid>*,
.card-reader-field-service .feature>*,
.card-reader-field-service .aiGrid>* {
min-width: 0
}
.card-reader-field-service .hero h1 {
max-width: 580px
}
.card-reader-field-service .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.card-reader-field-service .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.card-reader-field-service .heroVisual {
min-height: 555px;
position: relative
}
.card-reader-field-service .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.card-reader-field-service .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.card-reader-field-service .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.card-reader-field-service .paymentBoard {
position: absolute;
left: 0;
top: 52px;
width: 92%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
overflow: hidden;
box-shadow: 0 12px 28px rgba(6, 59, 92, .06)
}
.card-reader-field-service .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.card-reader-field-service .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.card-reader-field-service .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.card-reader-field-service .brandTile .icon {
width: 17px;
height: 17px
}
.card-reader-field-service .sampleBadge {
font-size: 8px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.card-reader-field-service .readerInvoice {
padding: 18px 151px 18px 18px;
min-height: 313px
}
.card-reader-field-service .readerInvoice .uiLabel {
font-size: 9px
}
.card-reader-field-service .invoiceName {
display: block;
font-size: 17px;
line-height: 1.35;
color: var(--navy);
margin: 6px 0 3px
}
.card-reader-field-service .invoiceAddress {
display: block;
font-size: 10px;
color: var(--muted)
}
.card-reader-field-service .readerLine {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E4EEF3;
font-size: 11px;
line-height: 1.5
}
.card-reader-field-service .readerLines {
margin-top: 14px
}
.card-reader-field-service .readerLine b {
color: var(--ink);
white-space: nowrap
}
.card-reader-field-service .readerTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 15px;
font-size: 10px;
color: var(--muted)
}
.card-reader-field-service .readerTotal strong {
font-size: 29px;
letter-spacing: -.035em;
line-height: 1.2;
color: var(--navy)
}
.card-reader-field-service .boardFooter {
padding: 11px 18px;
font-size: 9px;
background: var(--sky2);
border-top: 1px solid var(--line);
color: #536E80;
display: flex;
gap: 7px;
align-items: center
}
.card-reader-field-service .boardFooter .icon {
width: 14px;
height: 14px;
color: var(--green)
}
.card-reader-field-service .readerHero {
position: absolute;
right: 0;
top: 177px;
z-index: 5;
width: 194px
}
.card-reader-field-service .readerDevice {
background: #132535;
border: 1px solid #3C5261;
border-radius: 23px;
padding: 11px;
position: relative;
box-shadow: 0 10px 26px rgba(6, 59, 92, .10)
}
.card-reader-field-service .readerCrown {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 22px;
color: #DFEAF0;
font-size: 8px;
font-weight: 750;
margin-bottom: 9px
}
.card-reader-field-service .readerCrown .icon {
height: 15px;
width: 15px;
color: #BDCED8
}
.card-reader-field-service .readerLeds {
display: flex;
gap: 4px
}
.card-reader-field-service .readerLeds i {
width: 4px;
height: 4px;
border-radius: 50%;
background: #71C7A4
}
.card-reader-field-service .readerScreen {
padding: 15px 8px 12px;
background: #F8FCFD;
border: 1px solid #C6DDE7;
border-radius: 11px;
min-height: 144px;
text-align: center;
color: var(--ink)
}
.card-reader-field-service .readerScreen>small {
display: block;
font-size: 8px;
color: #557183;
letter-spacing: .04em;
text-transform: uppercase
}
.card-reader-field-service .readerScreen>strong {
display: block;
font-size: 31px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -.04em;
margin: 7px 0
}
.card-reader-field-service .readerScreen .tapTarget {
height: 26px;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
margin: 4px 0 7px
}
.card-reader-field-service .tapTarget .icon {
height: 25px;
width: 25px
}
.card-reader-field-service .readerScreen>span {
font-size: 8px;
color: #627C89;
display: block;
line-height: 1.5
}
.card-reader-field-service .readerKeys {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
margin-top: 11px
}
.card-reader-field-service .readerKeys span {
display: flex;
align-items: center;
justify-content: center;
min-height: 22px;
background: #263F50;
border: 1px solid #385264;
border-radius: 5px;
color: #F7FAFC;
font-size: 10px;
line-height: 1;
font-weight: 650
}
.card-reader-field-service .readerKeys span:nth-last-child(3) {
background: #633737;
border-color: #835252
}
.card-reader-field-service .readerKeys span:nth-last-child(2) {
background: #635631;
border-color: #827348
}
.card-reader-field-service .readerKeys span:last-child {
background: #1E6852;
border-color: #3A8670
}
.card-reader-field-service .readerKeys .icon {
width: 12px;
height: 12px
}
.card-reader-field-service .readerSlot {
width: 64px;
height: 4px;
border-radius: 3px;
background: #061620;
border-top: 1px solid #36515F;
margin: 13px auto 1px
}
.card-reader-field-service .readerHardwareNote {
display: block;
font-size: 8px;
color: var(--muted);
text-align: center;
margin-top: 7px;
line-height: 1.4
}
.card-reader-field-service .receivedCard {
position: absolute;
left: 13px;
top: 458px;
width: 285px;
z-index: 4;
border-radius: 15px;
border: 1px solid #2C404E;
background: #101B25;
color: #fff;
padding: 14px;
display: flex;
align-items: flex-start;
gap: 10px
}
.card-reader-field-service .receivedIcon {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
background: #E8F8F0;
color: #08734E;
border-radius: 9px
}
.card-reader-field-service .receivedIcon .icon {
width: 17px;
height: 17px
}
.card-reader-field-service .receivedCard strong {
font-size: 12px;
display: block;
line-height: 1.4
}
.card-reader-field-service .receivedCard p {
font-size: 10px;
color: #CCDDE7;
line-height: 1.6;
margin-top: 4px
}
.card-reader-field-service .receivedCard small {
display: block;
font-size: 8px;
color: #B8CBD7;
margin-top: 4px
}
.card-reader-field-service .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
}
.card-reader-field-service .note {
font-size: 12px !important;
line-height: 1.65;
color: var(--muted);
margin-top: 15px !important
}
.card-reader-field-service .visual .note {
font-size: 10px !important
} .card-reader-field-service .methodsBanner {
padding: 18px;
background: #0D2637;
border: 1px solid #25465A;
border-radius: 14px;
display: flex;
align-items: center;
gap: 13px;
color: #fff
}
.card-reader-field-service .methodsBanner>.methodMark {
display: grid;
place-items: center;
width: 47px;
height: 47px;
flex: 0 0 47px;
border-radius: 12px;
background: var(--yellow);
color: #18262F
}
.card-reader-field-service .methodsBanner strong {
display: block;
font-size: 16px;
line-height: 1.4
}
.card-reader-field-service .methodsBanner small {
display: block;
font-size: 10px;
color: #C6DDE9;
margin-top: 4px
}
.card-reader-field-service .methodsGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px
}
.card-reader-field-service .methodCard {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
padding: 18px;
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 110px
}
.card-reader-field-service .methodCard>.icon {
width: 25px;
height: 25px;
color: var(--navy);
margin-top: 1px
}
.card-reader-field-service .methodCard strong {
display: block;
font-size: 13px;
line-height: 1.4
}
.card-reader-field-service .methodCard small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 5px;
line-height: 1.6
}
.card-reader-field-service .walletRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px
}
.card-reader-field-service .walletRow span {
padding: 7px 12px;
font-size: 11px;
font-weight: 750;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
color: var(--navy)
} .card-reader-field-service .mobileCheckout {
display: grid;
grid-template-columns: 181px minmax(0, 1fr);
align-items: center;
gap: 22px
}
.card-reader-field-service .checkoutPhone {
padding: 6px;
border: 1px solid #3A5364;
border-radius: 27px;
background: #102431;
min-width: 0
}
.card-reader-field-service .checkoutScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.card-reader-field-service .phoneTop {
height: 18px;
background: #102431;
display: grid;
place-items: center
}
.card-reader-field-service .notch {
width: 43px;
height: 4px;
border-radius: 9px;
background: #57717E
}
.card-reader-field-service .phoneHead {
padding: 12px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.card-reader-field-service .phoneHead strong {
font-size: 11px;
display: block;
color: var(--navy)
}
.card-reader-field-service .phoneHead small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 3px
}
.card-reader-field-service .phoneInvoice {
padding: 14px 12px 12px
}
.card-reader-field-service .phoneInvoice>.uiLabel {
font-size: 8px
}
.card-reader-field-service .phoneInvoice>strong {
font-size: 13px;
display: block;
color: var(--navy);
margin-top: 5px;
line-height: 1.4
}
.card-reader-field-service .phoneItems {
margin-top: 12px
}
.card-reader-field-service .phoneItems>div {
display: flex;
justify-content: space-between;
gap: 5px;
padding: 7px 0;
font-size: 8px;
border-bottom: 1px solid #E6EDF2
}
.card-reader-field-service .phoneAmount {
font-size: 27px;
line-height: 1.4;
color: var(--navy);
font-weight: 800;
margin: 11px 0 9px;
letter-spacing: -.035em
}
.card-reader-field-service .mockAction {
background: var(--yellow);
color: #111;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 6px;
text-align: center;
font-size: 10px;
font-weight: 800;
line-height: 1.4
}
.card-reader-field-service .mockAction .icon {
height: 15px;
width: 15px
}
.card-reader-field-service .phoneFoot {
font-size: 8px;
text-align: center;
padding: 10px;
background: #F1F9FE;
color: #547286;
border-top: 1px solid var(--line)
}
.card-reader-field-service .checkoutSteps {
display: grid;
gap: 20px;
min-width: 0
}
.card-reader-field-service .checkoutStep {
display: flex;
align-items: flex-start;
gap: 10px
}
.card-reader-field-service .stepTile {
flex: 0 0 30px;
width: 30px;
height: 30px;
background: #fff;
border: 1px solid #CDDFE9;
border-radius: 9px;
display: grid;
place-items: center;
color: var(--navy);
font-size: 12px;
font-weight: 850
}
.card-reader-field-service .checkoutStep strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.card-reader-field-service .checkoutStep p {
font-size: 11px !important;
line-height: 1.7;
margin-top: 5px !important
}
.card-reader-field-service .checkoutPaid {
padding: 13px;
border: 1px solid #BCDFC9;
border-radius: 12px;
background: #F3FCF6
}
.card-reader-field-service .checkoutPaid>strong {
font-size: 12px;
display: block;
color: #146144
}
.card-reader-field-service .checkoutPaid>span {
display: block;
font-size: 11px;
color: #466B58;
margin-top: 5px
} .card-reader-field-service .recordPanel {
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
overflow: hidden
}
.card-reader-field-service .recordHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px;
background: #F5FBFF;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800;
color: var(--navy)
}
.card-reader-field-service .recordHeader .pill {
font-size: 8px
}
.card-reader-field-service .recordPayment {
display: flex;
align-items: center;
gap: 12px;
padding: 19px 17px;
border-bottom: 1px solid var(--line)
}
.card-reader-field-service .recordTick {
width: 41px;
height: 41px;
flex: 0 0 41px;
border-radius: 12px;
background: var(--greenbg);
color: #147151;
display: grid;
place-items: center
}
.card-reader-field-service .recordPayment small {
display: block;
font-size: 9px;
color: var(--muted)
}
.card-reader-field-service .recordPayment strong {
display: block;
font-size: 30px;
line-height: 1.3;
letter-spacing: -.035em;
color: var(--navy)
}
.card-reader-field-service .recordPayment .recordMethod {
margin-left: auto;
text-align: right;
font-size: 10px;
color: var(--navy)
}
.card-reader-field-service .recordMethod small {
font-size: 8px;
margin-top: 4px
}
.card-reader-field-service .recordFields {
padding: 4px 17px 13px
}
.card-reader-field-service .recordField {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 13px;
padding: 10px 0;
border-bottom: 1px solid #E5EEF4;
font-size: 10px;
align-items: center
}
.card-reader-field-service .recordField:last-child {
border-bottom: 0
}
.card-reader-field-service .recordField>span {
color: var(--muted)
}
.card-reader-field-service .recordField>b {
text-align: right;
font-size: 11px;
overflow-wrap: anywhere
}
.card-reader-field-service .accountingTrail {
margin-top: 13px;
border: 1px solid #CEDFE9;
border-radius: 12px;
background: #fff;
padding: 15px;
display: flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-size: 11px;
font-weight: 750
}
.card-reader-field-service .accountingTrail>.trailIcon {
width: 33px;
height: 33px;
flex: 0 0 33px;
display: grid;
place-items: center;
background: var(--yellowsoft);
border-radius: 9px
}
.card-reader-field-service .trailIcon .icon {
width: 18px;
height: 18px
}
.card-reader-field-service .accountingTrail small {
display: block;
font-size: 10px;
font-weight: 400;
color: var(--muted);
margin-top: 3px;
line-height: 1.6
} .card-reader-field-service .readyTop {
display: grid;
grid-template-columns: minmax(0, 1fr) 143px;
gap: 22px;
align-items: center
}
.card-reader-field-service .readyList {
display: grid;
gap: 11px
}
.card-reader-field-service .readyItem {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff
}
.card-reader-field-service .readyItem .icon {
height: 18px;
width: 18px;
color: var(--navy);
margin-top: 1px
}
.card-reader-field-service .readyItem strong {
font-size: 11px;
display: block;
line-height: 1.4
}
.card-reader-field-service .readyItem small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.6;
margin-top: 4px
}
.card-reader-field-service .readerCompact .readerDevice {
padding: 9px;
border-radius: 19px
}
.card-reader-field-service .readerCompact .readerCrown {
font-size: 7px;
height: 18px;
margin-bottom: 7px
}
.card-reader-field-service .readerCompact .readerScreen {
padding: 12px 7px;
min-height: 114px
}
.card-reader-field-service .readerCompact .readerScreen>strong {
font-size: 25px
}
.card-reader-field-service .readerCompact .readerScreen>small,
.card-reader-field-service .readerCompact .readerScreen>span {
font-size: 7px
}
.card-reader-field-service .readerCompact .readerKeys {
gap: 4px;
margin-top: 8px
}
.card-reader-field-service .readerCompact .readerKeys span {
min-height: 17px;
font-size: 8px
}
.card-reader-field-service .readerCompact .readerSlot {
margin-top: 10px;
width: 49px
}
.card-reader-field-service .readerCompact .tapTarget .icon {
width: 20px;
height: 20px
}
.card-reader-field-service .payoutTrail {
display: grid;
grid-template-columns: 1fr 24px 1fr;
gap: 9px;
align-items: center;
margin-top: 17px;
padding: 15px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff
}
.card-reader-field-service .payoutTrail>div {
min-width: 0
}
.card-reader-field-service .payoutTrail strong {
font-size: 11px;
line-height: 1.5;
display: block;
color: var(--navy)
}
.card-reader-field-service .payoutTrail small {
font-size: 9px;
line-height: 1.6;
color: var(--muted);
display: block;
margin-top: 5px
}
.card-reader-field-service .payoutTrail>.icon {
width: 19px;
height: 19px;
color: #7496A9
}
.card-reader-field-service .payoutTrail .pill {
margin-bottom: 7px;
font-size: 8px
} @media(max-width:1100px) and (min-width:961px) {
.card-reader-field-service .heroGrid {
gap: 28px
}
.card-reader-field-service .hero .lead {
font-size: 17px
}
.card-reader-field-service .readerHero {
width: 174px;
top: 186px
}
.card-reader-field-service .readerInvoice {
padding-right: 168px;
padding-left: 15px
}
.card-reader-field-service .receivedCard {
left: 0;
width: 240px;
top: 455px
}
.card-reader-field-service .paymentBoard {
width: 96%
}
.card-reader-field-service .readerTotal {
gap: 7px
}
.card-reader-field-service .readerTotal strong {
font-size: 27px
}
.card-reader-field-service .readerDevice {
padding: 9px
}
.card-reader-field-service .visual {
padding: 17px
}
.card-reader-field-service .mobileCheckout {
grid-template-columns: 160px minmax(0, 1fr);
gap: 14px
}
.card-reader-field-service .readyTop {
gap: 15px;
grid-template-columns: minmax(0, 1fr) 130px
}
.card-reader-field-service .methodCard {
padding: 14px;
gap: 9px
}
}
@media(max-width:960px) {
.card-reader-field-service .heroGrid,
.card-reader-field-service .feature,
.card-reader-field-service .aiGrid,
.card-reader-field-service .final {
grid-template-columns: 1fr
}
.card-reader-field-service .heroGrid {
gap: 36px
}
.card-reader-field-service .hero h1 {
max-width: 760px
}
.card-reader-field-service .hero .lead {
max-width: 750px
}
.card-reader-field-service .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.card-reader-field-service .assetStage {
margin: auto
}
.card-reader-field-service .feature.reverse .visual {
order: 0
}
.card-reader-field-service .feature {
gap: 30px
}
.card-reader-field-service .feature>div:first-child {
max-width: 800px
}
.card-reader-field-service .outcomes,
.card-reader-field-service .featureGrid,
.card-reader-field-service .connectedGrid,
.card-reader-field-service .useCases {
grid-template-columns: repeat(2, 1fr)
}
.card-reader-field-service .logos {
grid-template-columns: repeat(3, 1fr)
}
.card-reader-field-service .reviews {
grid-template-columns: 1fr
}
.card-reader-field-service .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.card-reader-field-service .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.card-reader-field-service .ratingItem:nth-child(2) {
border: 0
}
.card-reader-field-service .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.card-reader-field-service .final .btn {
min-width: 195px
}
.card-reader-field-service .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.card-reader-field-service .aiGrid {
gap: 30px
}
.card-reader-field-service .aiMini {
max-width: 760px
}
.card-reader-field-service .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.card-reader-field-service .wrap {
width: calc(100% - 24px)
}
.card-reader-field-service section {
padding: 56px 0
}
.card-reader-field-service .hero {
padding: 32px 0 42px
}
.card-reader-field-service .lead {
font-size: 17px
}
.card-reader-field-service .sectionHead p {
font-size: 16px
}
.card-reader-field-service .sectionHead {
margin-bottom: 28px
}
.card-reader-field-service .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.card-reader-field-service .heroGrid {
gap: 24px
}
.card-reader-field-service .hero .actions {
gap: 8px
}
.card-reader-field-service .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.card-reader-field-service .micro {
font-size: 11px
}
.card-reader-field-service .heroPills {
gap: 6px
}
.card-reader-field-service .heroPills span {
font-size: 9px
}
.card-reader-field-service .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.card-reader-field-service .heroVisual {
min-height: 515px
}
.card-reader-field-service .assetStage {
height: 515px;
max-width: 410px
}
.card-reader-field-service .assetStage:before {
inset: 38px 0 28px 10px
}
.card-reader-field-service .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.card-reader-field-service .paymentBoard {
top: 42px;
width: 100%;
left: 0
}
.card-reader-field-service .boardHeader {
padding: 12px
}
.card-reader-field-service .boardBrand {
font-size: 12px
}
.card-reader-field-service .sampleBadge {
font-size: 7px
}
.card-reader-field-service .readerInvoice {
padding: 15px 170px 16px 13px;
min-height: 299px
}
.card-reader-field-service .invoiceName {
font-size: 15px
}
.card-reader-field-service .invoiceAddress {
font-size: 9px
}
.card-reader-field-service .readerLine {
font-size: 10px;
padding: 10px 0;
gap: 6px
}
.card-reader-field-service .readerTotal {
flex-direction: column;
align-items: flex-start;
gap: 5px
}
.card-reader-field-service .readerTotal strong {
font-size: 28px
}
.card-reader-field-service .readerHero {
width: 157px;
top: 184px
}
.card-reader-field-service .readerDevice {
border-radius: 20px;
padding: 9px
}
.card-reader-field-service .readerCrown {
font-size: 7px;
height: 18px;
margin-bottom: 7px
}
.card-reader-field-service .readerScreen {
padding: 13px 7px 11px;
min-height: 131px
}
.card-reader-field-service .readerScreen>small {
font-size: 7px
}
.card-reader-field-service .readerScreen>strong {
font-size: 28px
}
.card-reader-field-service .readerScreen>span {
font-size: 7px
}
.card-reader-field-service .readerKeys {
gap: 4px;
margin-top: 9px
}
.card-reader-field-service .readerKeys span {
min-height: 19px;
font-size: 9px
}
.card-reader-field-service .readerHardwareNote {
font-size: 7px
}
.card-reader-field-service .boardFooter {
padding: 10px 164px 10px 12px;
font-size: 8px;
min-height: 50px
}
.card-reader-field-service .receivedCard {
width: calc(100% - 170px);
left: 0;
top: 438px;
padding: 11px;
gap: 8px
}
.card-reader-field-service .receivedIcon {
width: 23px;
height: 23px;
flex-basis: 23px;
border-radius: 7px
}
.card-reader-field-service .receivedIcon .icon {
width: 14px;
height: 14px
}
.card-reader-field-service .receivedCard strong {
font-size: 11px
}
.card-reader-field-service .receivedCard p {
font-size: 9px
}
.card-reader-field-service .receivedCard small {
display: none
}
.card-reader-field-service .diagramCaption {
font-size: 9px
}
.card-reader-field-service .trust {
padding: 23px 0
}
.card-reader-field-service .trustLabel {
font-size: 12px
}
.card-reader-field-service .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.card-reader-field-service .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.card-reader-field-service .logo.dhl {
font-size: 19px
}
.card-reader-field-service .logo.adobe {
font-size: 17px
}
.card-reader-field-service .logo.golden {
font-size: 8px
}
.card-reader-field-service .fl,
.card-reader-field-service .outcomes,
.card-reader-field-service .featureGrid,
.card-reader-field-service .connectedGrid,
.card-reader-field-service .useCases {
grid-template-columns: 1fr
}
.card-reader-field-service .fi {
font-size: 14px
}
.card-reader-field-service .outcome {
padding: 21px
}
.card-reader-field-service .outcome strong {
margin-top: 12px
}
.card-reader-field-service .outcome span {
font-size: 14px
}
.card-reader-field-service .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.card-reader-field-service .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.card-reader-field-service .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.card-reader-field-service .uiSub {
font-size: 9px
}
.card-reader-field-service .methodCard {
padding: 14px 12px;
gap: 9px;
min-height: 111px
}
.card-reader-field-service .methodCard>.icon {
height: 21px;
width: 21px
}
.card-reader-field-service .methodCard strong {
font-size: 12px
}
.card-reader-field-service .methodCard small {
font-size: 9px
}
.card-reader-field-service .methodsGrid {
gap: 10px
}
.card-reader-field-service .methodsBanner {
padding: 15px;
gap: 11px
}
.card-reader-field-service .methodsBanner strong {
font-size: 15px
}
.card-reader-field-service .walletRow {
gap: 6px
}
.card-reader-field-service .walletRow span {
font-size: 10px;
padding: 6px 9px
}
.card-reader-field-service .mobileCheckout {
grid-template-columns: 159px minmax(0, 1fr);
gap: 14px
}
.card-reader-field-service .checkoutStep {
gap: 8px
}
.card-reader-field-service .stepTile {
height: 25px;
width: 25px;
flex-basis: 25px;
font-size: 10px
}
.card-reader-field-service .checkoutStep strong {
font-size: 11px
}
.card-reader-field-service .checkoutStep p {
font-size: 10px !important
}
.card-reader-field-service .checkoutSteps {
gap: 16px
}
.card-reader-field-service .checkoutPaid {
padding: 11px
}
.card-reader-field-service .checkoutPaid>strong {
font-size: 11px
}
.card-reader-field-service .checkoutPaid>span {
font-size: 10px
}
.card-reader-field-service .phoneHead {
padding: 11px 10px
}
.card-reader-field-service .phoneHead strong {
font-size: 10px
}
.card-reader-field-service .phoneInvoice {
padding: 12px 10px
}
.card-reader-field-service .phoneAmount {
font-size: 25px
}
.card-reader-field-service .recordHeader {
padding: 13px;
font-size: 11px
}
.card-reader-field-service .recordPayment {
padding: 16px 13px;
gap: 9px
}
.card-reader-field-service .recordPayment strong {
font-size: 28px
}
.card-reader-field-service .recordPayment .recordMethod {
font-size: 9px
}
.card-reader-field-service .recordFields {
padding: 3px 13px 11px
}
.card-reader-field-service .recordField {
font-size: 9px;
gap: 8px
}
.card-reader-field-service .recordField>b {
font-size: 10px
}
.card-reader-field-service .readyTop {
grid-template-columns: minmax(0, 1fr) 127px;
gap: 13px
}
.card-reader-field-service .readyItem {
padding: 11px;
gap: 8px
}
.card-reader-field-service .readyItem strong {
font-size: 10px
}
.card-reader-field-service .readyItem small {
font-size: 9px
}
.card-reader-field-service .readerCompact .readerDevice {
padding: 8px
}
.card-reader-field-service .readerCompact .readerCrown {
font-size: 6px
}
.card-reader-field-service .readerCompact .readerScreen>strong {
font-size: 23px
}
.card-reader-field-service .payoutTrail {
padding: 12px;
gap: 7px;
grid-template-columns: 1fr 19px 1fr
}
.card-reader-field-service .payoutTrail strong {
font-size: 10px
}
.card-reader-field-service .payoutTrail small {
font-size: 9px
}
.card-reader-field-service .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.card-reader-field-service .aiMini div {
padding: 16px
}
.card-reader-field-service .aiMini strong {
font-size: 14px
}
.card-reader-field-service .aiMini span {
font-size: 13px
}
.card-reader-field-service .promptBox {
padding: 18px;
border-radius: 17px
}
.card-reader-field-service .prompt {
font-size: 13px;
padding: 13px
}
.card-reader-field-service .promptHead {
font-size: 19px
}
.card-reader-field-service .promptFoot {
font-size: 10px !important
}
.card-reader-field-service .connectedCard {
padding: 22px
}
.card-reader-field-service .connectedCard p,
.card-reader-field-service .featureCard p,
.card-reader-field-service .useCase p {
font-size: 14px
}
.card-reader-field-service .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.card-reader-field-service .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.card-reader-field-service .ratingItem {
border: 0
}
.card-reader-field-service .ratingLead {
margin-bottom: 3px
}
.card-reader-field-service .review p {
font-size: 14px
}
.card-reader-field-service .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.card-reader-field-service .ctaBtns {
width: 100%
}
.card-reader-field-service .ctaBtns .btn {
flex: 1
}
.card-reader-field-service .cta p {
font-size: 14px
}
.card-reader-field-service .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.card-reader-field-service .final h2 {
font-size: 32px
}
.card-reader-field-service .final p {
font-size: 15px
}
.card-reader-field-service .final .ctaBtns {
flex-direction: column
}
.card-reader-field-service .final .btn {
min-width: 0;
width: 100%
}
.card-reader-field-service .faq details {
padding: 16px
}
.card-reader-field-service .faq summary {
font-size: 14px
}
.card-reader-field-service .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.card-reader-field-service .readerHero {
width: 139px;
top: 193px
}
.card-reader-field-service .readerInvoice {
padding-right: 152px;
padding-left: 12px
}
.card-reader-field-service .readerInvoice .uiLabel {
font-size: 8px
}
.card-reader-field-service .invoiceName {
font-size: 14px
}
.card-reader-field-service .invoiceAddress {
font-size: 8px
}
.card-reader-field-service .readerLine {
font-size: 9px
}
.card-reader-field-service .readerTotal strong {
font-size: 26px
}
.card-reader-field-service .readerDevice {
padding: 8px
}
.card-reader-field-service .readerScreen>strong {
font-size: 26px
}
.card-reader-field-service .readerCrown {
font-size: 6px
}
.card-reader-field-service .readerKeys span {
min-height: 18px;
font-size: 8px
}
.card-reader-field-service .readerScreen {
min-height: 127px
}
.card-reader-field-service .boardFooter {
padding-right: 146px
}
.card-reader-field-service .receivedCard {
width: calc(100% - 150px);
padding: 10px;
gap: 6px
}
.card-reader-field-service .receivedCard strong {
font-size: 10px
}
.card-reader-field-service .receivedCard p {
font-size: 8px
}
.card-reader-field-service .receivedIcon {
width: 19px;
height: 19px;
flex-basis: 19px
}
.card-reader-field-service .receivedIcon .icon {
width: 12px;
height: 12px
}
.card-reader-field-service .boardBrand {
font-size: 11px
}
.card-reader-field-service .mobileCheckout {
grid-template-columns: 1fr
}
.card-reader-field-service .checkoutPhone {
width: 184px;
margin: auto
}
.card-reader-field-service .checkoutSteps {
margin-top: 7px
}
.card-reader-field-service .checkoutStep strong {
font-size: 13px
}
.card-reader-field-service .checkoutStep p {
font-size: 12px !important
}
.card-reader-field-service .checkoutPaid>strong {
font-size: 12px
}
.card-reader-field-service .checkoutPaid>span {
font-size: 11px
}
.card-reader-field-service .methodCard {
flex-direction: column;
gap: 9px;
padding: 13px
}
.card-reader-field-service .methodCard small {
font-size: 10px
}
.card-reader-field-service .readyTop {
grid-template-columns: 1fr
}
.card-reader-field-service .readerCompact {
width: 147px;
margin: auto;
grid-row: 1
}
.card-reader-field-service .readyList {
grid-template-columns: 1fr
}
.card-reader-field-service .readyItem strong {
font-size: 12px
}
.card-reader-field-service .readyItem small {
font-size: 10px
}
.card-reader-field-service .readerCompact .readerCrown {
font-size: 7px
}
.card-reader-field-service .payoutTrail {
gap: 6px
}
}  .dreamzfsm-customer-portal-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.dreamzfsm-customer-portal-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.dreamzfsm-customer-portal-software .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.dreamzfsm-customer-portal-software .btn:hover {
transform: translateY(-2px)
}
.dreamzfsm-customer-portal-software .btn.black {
background: #0b0b0b;
color: #fff
}
.dreamzfsm-customer-portal-software .btn.black:hover {
background: #292929
}
.dreamzfsm-customer-portal-software .btn.yellow {
background: var(--yellow);
color: #000
}
.dreamzfsm-customer-portal-software .btn.yellow:hover {
background: #FFD454
}
.dreamzfsm-customer-portal-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.dreamzfsm-customer-portal-software .btn .icon2 {
width: 17px;
height: 17px
}
.dreamzfsm-customer-portal-software a:focus-visible,
.dreamzfsm-customer-portal-software summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.dreamzfsm-customer-portal-software .dark a:focus-visible,
.dreamzfsm-customer-portal-software .final a:focus-visible {
outline-color: var(--yellow)
}
.dreamzfsm-customer-portal-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.dreamzfsm-customer-portal-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.dreamzfsm-customer-portal-software .soft {
background: var(--sky2)
}
.dreamzfsm-customer-portal-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.dreamzfsm-customer-portal-software .dark h2,
.dreamzfsm-customer-portal-software .dark h3 {
color: #fff
}
.dreamzfsm-customer-portal-software .dark p {
color: #D6D6D6
}
.dreamzfsm-customer-portal-software .dark .ey {
background: var(--yellow)
}
.dreamzfsm-customer-portal-software .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.dreamzfsm-customer-portal-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.dreamzfsm-customer-portal-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.dreamzfsm-customer-portal-software .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.dreamzfsm-customer-portal-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.dreamzfsm-customer-portal-software .textLink .icon2 {
width: 16px;
height: 16px
}
.dreamzfsm-customer-portal-software .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.dreamzfsm-customer-portal-software .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.dreamzfsm-customer-portal-software .skipLink:focus {
top: 12px
}
.dreamzfsm-customer-portal-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.dreamzfsm-customer-portal-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.dreamzfsm-customer-portal-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.dreamzfsm-customer-portal-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.dreamzfsm-customer-portal-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.dreamzfsm-customer-portal-software .logo.adobe {
font-size: 20px
}
.dreamzfsm-customer-portal-software .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.dreamzfsm-customer-portal-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.dreamzfsm-customer-portal-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.dreamzfsm-customer-portal-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.dreamzfsm-customer-portal-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.dreamzfsm-customer-portal-software .outcome:nth-child(3):before {
background: var(--green)
}
.dreamzfsm-customer-portal-software .outcome:nth-child(4):before {
background: var(--purple)
}
.dreamzfsm-customer-portal-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.dreamzfsm-customer-portal-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.dreamzfsm-customer-portal-software .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
}
.dreamzfsm-customer-portal-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.dreamzfsm-customer-portal-software .feature.reverse .visual {
order: -1
}
.dreamzfsm-customer-portal-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.dreamzfsm-customer-portal-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.dreamzfsm-customer-portal-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.dreamzfsm-customer-portal-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.dreamzfsm-customer-portal-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.dreamzfsm-customer-portal-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.dreamzfsm-customer-portal-software .visual>* {
position: relative;
z-index: 2
}
.dreamzfsm-customer-portal-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.dreamzfsm-customer-portal-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.dreamzfsm-customer-portal-software .uiHeading .icon2 {
width: 19px;
height: 19px
}
.dreamzfsm-customer-portal-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.dreamzfsm-customer-portal-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.dreamzfsm-customer-portal-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.dreamzfsm-customer-portal-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.dreamzfsm-customer-portal-software .pill.green {
background: var(--greenbg);
color: #116746
}
.dreamzfsm-customer-portal-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.dreamzfsm-customer-portal-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.dreamzfsm-customer-portal-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.dreamzfsm-customer-portal-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.dreamzfsm-customer-portal-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.dreamzfsm-customer-portal-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.dreamzfsm-customer-portal-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.dreamzfsm-customer-portal-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.dreamzfsm-customer-portal-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.dreamzfsm-customer-portal-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.dreamzfsm-customer-portal-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.dreamzfsm-customer-portal-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.dreamzfsm-customer-portal-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.dreamzfsm-customer-portal-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.dreamzfsm-customer-portal-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.dreamzfsm-customer-portal-software .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.dreamzfsm-customer-portal-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.dreamzfsm-customer-portal-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.dreamzfsm-customer-portal-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.dreamzfsm-customer-portal-software .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
}
.dreamzfsm-customer-portal-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.dreamzfsm-customer-portal-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.dreamzfsm-customer-portal-software .featureCard:hover {
transform: translateY(-3px)
}
.dreamzfsm-customer-portal-software .featureIcon,
.dreamzfsm-customer-portal-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.dreamzfsm-customer-portal-software .featureIcon .icon2,
.dreamzfsm-customer-portal-software .useIcon .icon2 {
width: 22px;
height: 22px
}
.dreamzfsm-customer-portal-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.dreamzfsm-customer-portal-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.dreamzfsm-customer-portal-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.dreamzfsm-customer-portal-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.dreamzfsm-customer-portal-software .useCase h3 {
font-size: 20px
}
.dreamzfsm-customer-portal-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.dreamzfsm-customer-portal-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.dreamzfsm-customer-portal-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.dreamzfsm-customer-portal-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.dreamzfsm-customer-portal-software .review h3 {
font-size: 22px
}
.dreamzfsm-customer-portal-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.dreamzfsm-customer-portal-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.dreamzfsm-customer-portal-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.dreamzfsm-customer-portal-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.dreamzfsm-customer-portal-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.dreamzfsm-customer-portal-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.dreamzfsm-customer-portal-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.dreamzfsm-customer-portal-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.dreamzfsm-customer-portal-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.dreamzfsm-customer-portal-software .faq {
max-width: 900px
}
.dreamzfsm-customer-portal-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.dreamzfsm-customer-portal-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.dreamzfsm-customer-portal-software .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.dreamzfsm-customer-portal-software .faq summary::marker {
color: var(--navy)
}
.dreamzfsm-customer-portal-software .faq details[open] {
border-color: #A9D3E7
}
.dreamzfsm-customer-portal-software .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.dreamzfsm-customer-portal-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.dreamzfsm-customer-portal-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.dreamzfsm-customer-portal-software .cta h3 {
font-size: 19px
}
.dreamzfsm-customer-portal-software .cta.darkCta h3 {
color: #fff
}
.dreamzfsm-customer-portal-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.dreamzfsm-customer-portal-software .cta.darkCta p {
color: #D1D1D1
}
.dreamzfsm-customer-portal-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.dreamzfsm-customer-portal-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.dreamzfsm-customer-portal-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.dreamzfsm-customer-portal-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.dreamzfsm-customer-portal-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.dreamzfsm-customer-portal-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.dreamzfsm-customer-portal-software .reveal {
opacity: 1;
transform: none
}
.dreamzfsm-customer-portal-software  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools *,
.dreamzfsm-customer-portal-software #connected-tools.fsmTools *::before,
.dreamzfsm-customer-portal-software #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__step::before,
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.dreamzfsm-customer-portal-software #connected-tools.fsmTools {
padding: 52px 0;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card,
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.dreamzfsm-customer-portal-software #connected-tools.fsmTools h2 {
font-size: 30px;
}
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.dreamzfsm-customer-portal-software #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.dreamzfsm-customer-portal-software  .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.dreamzfsm-customer-portal-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.dreamzfsm-customer-portal-software .heroGrid>*,
.dreamzfsm-customer-portal-software .feature>*,
.dreamzfsm-customer-portal-software .aiGrid>* {
min-width: 0
}
.dreamzfsm-customer-portal-software .hero h1 {
max-width: 590px
}
.dreamzfsm-customer-portal-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.dreamzfsm-customer-portal-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.dreamzfsm-customer-portal-software .heroVisual {
position: relative;
min-width: 0
}
.dreamzfsm-customer-portal-software .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 178px;
gap: 13px 14px;
align-items: start;
max-width: 620px;
margin-left: auto
}
.dreamzfsm-customer-portal-software .assetStage:before {
content: "";
position: absolute;
inset: 56px 0 16px 22px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.dreamzfsm-customer-portal-software .assetStage>* {
position: relative;
z-index: 1
}
.dreamzfsm-customer-portal-software .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #101010;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px
}
.dreamzfsm-customer-portal-software .portalBoard {
grid-column: 1/-1;
border: 1px solid #BEDCEA;
border-radius: 18px;
background: #fff;
overflow: hidden
}
.dreamzfsm-customer-portal-software .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--line)
}
.dreamzfsm-customer-portal-software .boardBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.dreamzfsm-customer-portal-software .brandTile {
display: grid;
place-items: center;
height: 28px;
width: 28px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.dreamzfsm-customer-portal-software .brandTile .icon2 {
height: 18px;
width: 18px
}
.dreamzfsm-customer-portal-software .sampleBadge {
font-size: 8px;
font-weight: 750;
padding: 4px 6px;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
color: #526776;
white-space: nowrap
}
.dreamzfsm-customer-portal-software .portalLayout {
display: grid;
grid-template-columns: 120px minmax(0, 1fr)
}
.dreamzfsm-customer-portal-software .portalNav {
background: #F6FBFE;
border-right: 1px solid var(--line);
padding: 14px 8px;
display: flex;
flex-direction: column;
gap: 6px
}
.dreamzfsm-customer-portal-software .portalNavLabel {
font-size: 8px;
letter-spacing: .06em;
font-weight: 800;
color: #6A8190;
padding: 2px 8px 7px
}
.dreamzfsm-customer-portal-software .portalNavItem {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
padding: 9px 8px;
color: #536F81;
border-radius: 7px;
line-height: 1.35
}
.dreamzfsm-customer-portal-software .portalNavItem .icon2 {
width: 14px;
height: 14px
}
.dreamzfsm-customer-portal-software .portalNavItem.active {
background: #DFF2FC;
color: var(--navy);
font-weight: 800
}
.dreamzfsm-customer-portal-software .portalNavItem:last-child {
margin-top: auto
}
.dreamzfsm-customer-portal-software .portalMain {
padding: 18px;
min-width: 0
}
.dreamzfsm-customer-portal-software .portalWelcome {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
margin-bottom: 14px
}
.dreamzfsm-customer-portal-software .portalWelcome strong {
font-size: 17px;
letter-spacing: -.025em;
line-height: 1.25;
display: block;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .portalWelcome small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px
}
.dreamzfsm-customer-portal-software .avatar {
display: grid;
place-items: center;
flex: 0 0 31px;
width: 31px;
height: 31px;
border-radius: 50%;
background: var(--yellowsoft);
color: #84620A;
font-size: 10px;
font-weight: 800
}
.dreamzfsm-customer-portal-software .portalMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 13px
}
.dreamzfsm-customer-portal-software .portalMetric {
background: #F7FBFD;
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px
}
.dreamzfsm-customer-portal-software .portalMetric strong {
display: block;
font-size: 22px;
line-height: 1.2;
color: var(--navy);
letter-spacing: -.035em
}
.dreamzfsm-customer-portal-software .portalMetric span {
display: block;
font-size: 8px;
line-height: 1.5;
color: #5B7282;
margin-top: 4px
}
.dreamzfsm-customer-portal-software .portalMetric:nth-child(2) {
background: #FFFBEC;
border-color: #EADDA8
}
.dreamzfsm-customer-portal-software .visitCard {
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
padding: 12px;
border-radius: 10px;
background: #fff
}
.dreamzfsm-customer-portal-software .visitTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 7px;
margin-bottom: 8px
}
.dreamzfsm-customer-portal-software .miniLabel {
font-size: 8px;
font-weight: 800;
letter-spacing: .03em;
color: #6C8090;
text-transform: uppercase
}
.dreamzfsm-customer-portal-software .visitCard>strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--ink)
}
.dreamzfsm-customer-portal-software .visitMeta {
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
color: #526E80;
margin-top: 7px;
line-height: 1.5
}
.dreamzfsm-customer-portal-software .visitMeta .icon2 {
width: 13px;
height: 13px
}
.dreamzfsm-customer-portal-software .portalShortcuts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 11px
}
.dreamzfsm-customer-portal-software .portalShortcut {
display: flex;
gap: 7px;
align-items: center;
background: #F7FBFD;
border: 1px solid var(--line);
padding: 9px;
border-radius: 7px;
font-size: 9px;
font-weight: 800;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .portalShortcut .icon2 {
width: 14px;
height: 14px
}
.dreamzfsm-customer-portal-software .boardFooter {
background: #F5FBFF;
border-top: 1px solid var(--line);
padding: 10px 188px 10px 14px;
min-height: 47px;
font-size: 9px;
color: #526E80;
line-height: 1.5
}
.dreamzfsm-customer-portal-software .contextCard {
grid-column: 1;
background: #0D2535;
border: 1px solid #2A4656;
color: #fff;
border-radius: 15px;
overflow: hidden
}
.dreamzfsm-customer-portal-software .contextHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #2E4756;
font-size: 10px;
font-weight: 800
}
.dreamzfsm-customer-portal-software .contextHead .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.dreamzfsm-customer-portal-software .contextBody {
padding: 13px
}
.dreamzfsm-customer-portal-software .contextBody>strong {
display: block;
font-size: 16px;
line-height: 1.35
}
.dreamzfsm-customer-portal-software .contextBody>p {
color: #CBDFEA;
font-size: 11px;
line-height: 1.6;
margin-top: 7px
}
.dreamzfsm-customer-portal-software .contextTrail {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 10px
}
.dreamzfsm-customer-portal-software .contextTrail span {
border: 1px solid #3D5666;
border-radius: 5px;
padding: 4px 6px;
font-size: 8px;
color: #D9E8EF
}
.dreamzfsm-customer-portal-software .assetPhone {
grid-column: 2;
grid-row: 3;
margin-top: -48px;
align-self: start;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 26px;
padding: 6px;
z-index: 3
}
.dreamzfsm-customer-portal-software .phoneScreen {
background: #fff;
border-radius: 20px;
overflow: hidden
}
.dreamzfsm-customer-portal-software .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.dreamzfsm-customer-portal-software .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #5B707D
}
.dreamzfsm-customer-portal-software .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.dreamzfsm-customer-portal-software .phoneHead strong {
font-size: 11px;
display: block
}
.dreamzfsm-customer-portal-software .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.dreamzfsm-customer-portal-software .phoneBody {
padding: 13px 11px 12px
}
.dreamzfsm-customer-portal-software .phoneBody>strong {
font-size: 14px;
color: var(--navy);
display: block;
line-height: 1.4
}
.dreamzfsm-customer-portal-software .phoneBody>.miniLabel {
margin-bottom: 4px;
display: block
}
.dreamzfsm-customer-portal-software .phoneRow {
font-size: 9px;
color: #4A687B;
padding: 8px 0;
border-bottom: 1px solid #E0EBF0;
display: flex;
align-items: center;
gap: 6px
}
.dreamzfsm-customer-portal-software .phoneRow .icon2 {
width: 13px;
height: 13px
}
.dreamzfsm-customer-portal-software .phoneStatus {
margin: 11px 0 9px;
background: #EAF8F3;
border: 1px solid #C7E8DA;
border-radius: 7px;
padding: 8px;
color: #156444;
font-size: 9px
}
.dreamzfsm-customer-portal-software .phoneStatus strong {
display: block;
font-size: 10px;
margin-bottom: 3px
}
.dreamzfsm-customer-portal-software .mockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 7px;
background: var(--yellow);
color: #111;
padding: 9px 8px;
font-weight: 800;
font-size: 10px;
line-height: 1.4;
text-align: center
}
.dreamzfsm-customer-portal-software .mockAction .icon2 {
width: 14px;
height: 14px
}
.dreamzfsm-customer-portal-software .phoneFine {
font-size: 7px;
color: var(--muted);
display: block;
line-height: 1.5;
text-align: center;
margin-top: 7px
}
.dreamzfsm-customer-portal-software .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin: 12px 0 0
}
.dreamzfsm-customer-portal-software .workspaceHeader {
background: #0D2637;
color: #fff;
border: 1px solid #2B4A5C;
border-radius: 12px;
padding: 17px;
display: flex;
align-items: center;
gap: 11px
}
.dreamzfsm-customer-portal-software .workspaceBrand {
width: 39px;
height: 39px;
border-radius: 11px;
display: grid;
place-items: center;
background: var(--yellow);
color: #132F40
}
.dreamzfsm-customer-portal-software .workspaceBrand .icon2 {
height: 23px;
width: 23px
}
.dreamzfsm-customer-portal-software .workspaceHeader strong {
display: block;
font-size: 16px;
line-height: 1.3
}
.dreamzfsm-customer-portal-software .workspaceHeader small {
display: block;
color: #C4DBE9;
font-size: 10px;
margin-top: 5px
}
.dreamzfsm-customer-portal-software .workspaceHeader>.pill {
margin-left: auto;
background: #244759;
color: #E3F2FA;
font-size: 8px;
border: 1px solid #477083
}
.dreamzfsm-customer-portal-software .workspaceTiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 13px
}
.dreamzfsm-customer-portal-software .workspaceTile {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 15px 11px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px
}
.dreamzfsm-customer-portal-software .workspaceTile>.icon {
color: var(--navy);
height: 21px;
width: 21px
}
.dreamzfsm-customer-portal-software .workspaceTile strong {
font-size: 12px;
line-height: 1.4
}
.dreamzfsm-customer-portal-software .workspaceTile small {
font-size: 9px;
color: var(--muted);
line-height: 1.5
}
.dreamzfsm-customer-portal-software .accessEmail {
display: flex;
gap: 11px;
align-items: flex-start;
margin-top: 14px;
padding: 15px;
border: 1px solid #D0E5EF;
border-radius: 11px;
background: #fff
}
.dreamzfsm-customer-portal-software .accessEmail>.icon {
width: 20px;
height: 20px;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .accessEmail strong {
font-size: 12px;
display: block
}
.dreamzfsm-customer-portal-software .accessEmail p {
font-size: 11px;
line-height: 1.6;
margin: 5px 0 9px
}
.dreamzfsm-customer-portal-software .accessEmail .mockAction {
display: inline-flex;
padding: 7px 11px;
font-size: 9px
}
.dreamzfsm-customer-portal-software .infoFoot {
display: flex;
gap: 8px;
align-items: flex-start;
color: #526F80;
font-size: 10px;
line-height: 1.6;
margin-top: 14px
}
.dreamzfsm-customer-portal-software .infoFoot .icon2 {
height: 16px;
width: 16px;
color: var(--green)
}
.dreamzfsm-customer-portal-software .requestForm {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
padding: 16px
}
.dreamzfsm-customer-portal-software .formTitle {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 800;
color: var(--navy);
margin-bottom: 13px
}
.dreamzfsm-customer-portal-software .formTitle .icon2 {
width: 20px;
height: 20px
}
.dreamzfsm-customer-portal-software .sampleField {
border: 1px solid #D7E6ED;
border-radius: 7px;
padding: 9px 11px;
margin-top: 9px
}
.dreamzfsm-customer-portal-software .sampleField small {
display: block;
font-size: 8px;
color: var(--muted);
margin-bottom: 3px
}
.dreamzfsm-customer-portal-software .sampleField strong {
display: block;
font-size: 11px;
line-height: 1.5;
font-weight: 600
}
.dreamzfsm-customer-portal-software .sampleField.locked {
background: #F5F8FA;
display: flex;
justify-content: space-between;
align-items: center;
gap: 7px
}
.dreamzfsm-customer-portal-software .sampleField.locked .icon2 {
height: 14px;
width: 14px;
color: #728A99
}
.dreamzfsm-customer-portal-software .requestForm .mockAction {
margin-top: 12px;
justify-self: start;
display: inline-flex;
padding: 9px 14px
}
.dreamzfsm-customer-portal-software .requestProgress {
display: grid;
grid-template-columns: 1fr 25px 1fr;
gap: 11px;
align-items: center;
margin: 13px 0
}
.dreamzfsm-customer-portal-software .requestProgress>.icon {
width: 23px;
height: 23px;
color: #6E99AD
}
.dreamzfsm-customer-portal-software .requestChip {
border: 1px solid #C7E8DA;
border-radius: 10px;
background: #F3FCF8;
padding: 12px
}
.dreamzfsm-customer-portal-software .requestChip small {
display: block;
color: #5A7C6F;
font-size: 9px
}
.dreamzfsm-customer-portal-software .requestChip strong {
font-size: 12px;
display: block;
color: #176246;
margin-top: 4px
}
.dreamzfsm-customer-portal-software .requestChip.blue {
background: #F0FAFF;
border-color: #CAE7F4
}
.dreamzfsm-customer-portal-software .requestChip.blue strong {
color: var(--navy)
}
.dreamzfsm-customer-portal-software .requestChip.blue small {
color: var(--muted)
}
.dreamzfsm-customer-portal-software .requestDetails {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px
}
.dreamzfsm-customer-portal-software .requestDetails>span {
display: flex;
gap: 5px;
align-items: center;
border: 1px solid var(--line);
background: #fff;
padding: 9px 7px;
border-radius: 8px;
font-size: 9px;
line-height: 1.4;
color: #526F80
}
.dreamzfsm-customer-portal-software .requestDetails .icon2 {
height: 14px;
width: 14px;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .documentsTop {
display: flex;
align-items: center;
justify-content: space-between;
background: #0D2637;
color: #fff;
border-radius: 11px;
padding: 14px;
margin-bottom: 13px;
gap: 8px
}
.dreamzfsm-customer-portal-software .documentsTop strong {
font-size: 13px;
display: flex;
align-items: center;
gap: 8px
}
.dreamzfsm-customer-portal-software .documentsTop .icon2 {
height: 19px;
width: 19px;
color: var(--yellow)
}
.dreamzfsm-customer-portal-software .documentsTop small {
font-size: 9px;
color: #C8DDE8
}
.dreamzfsm-customer-portal-software .documentGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px
}
.dreamzfsm-customer-portal-software .documentPaper {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 17px;
min-width: 0;
display: flex;
flex-direction: column
}
.dreamzfsm-customer-portal-software .documentPaper>small {
font-size: 9px;
color: var(--muted)
}
.dreamzfsm-customer-portal-software .documentPaper>strong {
display: block;
font-size: 15px;
color: var(--navy);
line-height: 1.4;
margin-top: 6px
}
.dreamzfsm-customer-portal-software .documentPaper>.pill {
align-self: flex-start;
margin: 11px 0 13px
}
.dreamzfsm-customer-portal-software .documentLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
line-height: 1.5;
padding: 8px 0;
border-bottom: 1px solid #E2EBF0;
color: #5C7584
}
.dreamzfsm-customer-portal-software .documentLine b {
color: var(--navy);
white-space: nowrap
}
.dreamzfsm-customer-portal-software .docTotal {
margin: 14px 0
}
.dreamzfsm-customer-portal-software .docTotal small {
font-size: 8px;
color: var(--muted);
display: block
}
.dreamzfsm-customer-portal-software .docTotal strong {
font-size: 29px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -.03em
}
.dreamzfsm-customer-portal-software .documentPaper .mockAction {
margin-top: auto;
font-size: 9px
}
.dreamzfsm-customer-portal-software .documentPaper .mockAction.outlined {
border: 1px solid #B7D6E6;
background: #F1FAFF;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .docNote {
background: #FFFAE5;
border: 1px solid #EDDEA3;
border-radius: 10px;
padding: 13px;
margin-top: 13px;
font-size: 10px;
color: #6F5D2C;
line-height: 1.6;
display: flex;
gap: 8px
}
.dreamzfsm-customer-portal-software .docNote .icon2 {
color: #987418;
height: 17px;
width: 17px
}
.dreamzfsm-customer-portal-software .communicationScene {
display: grid;
grid-template-columns: 1.12fr .88fr;
gap: 13px;
align-items: start
}
.dreamzfsm-customer-portal-software .chatWindow {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden
}
.dreamzfsm-customer-portal-software .chatHeader {
padding: 13px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 9px
}
.dreamzfsm-customer-portal-software .chatHeader strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .chatHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.dreamzfsm-customer-portal-software .chatHeader .avatar {
background: var(--sky);
color: var(--navy)
}
.dreamzfsm-customer-portal-software .chatThread {
padding: 13px;
display: grid;
gap: 13px
}
.dreamzfsm-customer-portal-software .chatMessage {
max-width: 94%;
font-size: 11px;
line-height: 1.6;
padding: 11px;
border-radius: 10px 10px 10px 2px;
background: #F0F7FB;
color: #244D64
}
.dreamzfsm-customer-portal-software .chatMessage.reply {
justify-self: end;
background: #FFF8D9;
border-radius: 10px 10px 2px 10px;
color: #665421
}
.dreamzfsm-customer-portal-software .chatMessage small {
display: block;
font-size: 8px;
opacity: .82;
margin-top: 5px
}
.dreamzfsm-customer-portal-software .chatComposer {
display: flex;
align-items: center;
justify-content: space-between;
color: #738793;
font-size: 10px;
border-top: 1px solid var(--line);
padding: 11px 13px
}
.dreamzfsm-customer-portal-software .chatComposer .icon2 {
width: 15px;
height: 15px;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .notificationStack {
display: grid;
gap: 12px
}
.dreamzfsm-customer-portal-software .notificationCard {
border: 1px solid var(--line);
border-radius: 11px;
padding: 14px;
background: #fff
}
.dreamzfsm-customer-portal-software .notificationIcon {
height: 31px;
width: 31px;
background: var(--sky);
border-radius: 9px;
display: grid;
place-items: center;
margin-bottom: 10px;
color: var(--navy)
}
.dreamzfsm-customer-portal-software .notificationIcon .icon2 {
width: 17px;
height: 17px
}
.dreamzfsm-customer-portal-software .notificationCard.yellow .notificationIcon {
background: var(--yellowsoft);
color: #8B6916
}
.dreamzfsm-customer-portal-software .notificationCard strong {
font-size: 12px;
color: var(--navy);
display: block;
line-height: 1.4
}
.dreamzfsm-customer-portal-software .notificationCard p {
font-size: 10px;
line-height: 1.7;
margin-top: 6px
}
.dreamzfsm-customer-portal-software .notificationCard small {
font-size: 8px;
color: #718693;
display: block;
margin-top: 8px
}
.dreamzfsm-customer-portal-software .communicationNote {
background: #fff;
border: 1px solid #C8E6D9;
border-left: 3px solid var(--green);
padding: 12px 14px;
border-radius: 9px;
margin-top: 13px;
font-size: 10px;
color: #4D6D5B;
line-height: 1.6
}
.dreamzfsm-customer-portal-software .contextIntro {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 17px;
border: 1px solid var(--line);
border-radius: 11px;
background: #F5FBFF;
margin-bottom: 20px;
color: var(--navy);
font-size: 13px;
font-weight: 750
}
.dreamzfsm-customer-portal-software .contextIntro .icon2 {
height: 20px;
width: 20px
}
.dreamzfsm-customer-portal-software .scopeNote {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 20px;
max-width: 890px
} @media(max-width:1100px) and (min-width:961px) {
.dreamzfsm-customer-portal-software .heroGrid {
gap: 28px
} .dreamzfsm-customer-portal-software .hero .lead {
font-size: 17px
}
.dreamzfsm-customer-portal-software .assetStage {
grid-template-columns: minmax(0, 1fr) 156px;
gap: 12px 11px
}
.dreamzfsm-customer-portal-software .portalLayout {
grid-template-columns: 101px minmax(0, 1fr)
}
.dreamzfsm-customer-portal-software .portalMain {
padding: 14px
}
.dreamzfsm-customer-portal-software .portalNavItem {
font-size: 9px;
padding: 9px 6px;
gap: 5px
}
.dreamzfsm-customer-portal-software .portalMetric {
padding: 9px 7px
}
.dreamzfsm-customer-portal-software .portalMetric span {
font-size: 7px
}
.dreamzfsm-customer-portal-software .portalWelcome strong {
font-size: 15px
}
.dreamzfsm-customer-portal-software .portalShortcuts {
gap: 6px
}
.dreamzfsm-customer-portal-software .portalShortcut {
font-size: 8px;
padding: 8px 6px
}
.dreamzfsm-customer-portal-software .boardFooter {
padding-right: 168px
}
.dreamzfsm-customer-portal-software .contextBody {
padding: 12px
}
.dreamzfsm-customer-portal-software .contextBody>strong {
font-size: 14px
}
.dreamzfsm-customer-portal-software .contextBody>p {
font-size: 10px
}
.dreamzfsm-customer-portal-software .visual {
padding: 18px
}
.dreamzfsm-customer-portal-software .documentPaper {
padding: 13px
}
.dreamzfsm-customer-portal-software .documentGrid {
gap: 10px
}
.dreamzfsm-customer-portal-software .communicationScene {
gap: 10px
}
.dreamzfsm-customer-portal-software .chatThread {
padding: 11px
}
.dreamzfsm-customer-portal-software .notificationCard {
padding: 12px
}
.dreamzfsm-customer-portal-software .workspaceTile {
padding: 12px 9px
}
}
@media(max-width:960px) {
.dreamzfsm-customer-portal-software .heroGrid,
.dreamzfsm-customer-portal-software .feature,
.dreamzfsm-customer-portal-software .aiGrid,
.dreamzfsm-customer-portal-software .final {
grid-template-columns: 1fr
}
.dreamzfsm-customer-portal-software .heroGrid {
gap: 36px
}
.dreamzfsm-customer-portal-software .hero h1 {
max-width: 800px
}
.dreamzfsm-customer-portal-software .hero .lead {
max-width: 750px
}
.dreamzfsm-customer-portal-software .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.dreamzfsm-customer-portal-software .assetStage {
margin: auto
}
.dreamzfsm-customer-portal-software .feature.reverse .visual {
order: 0
}
.dreamzfsm-customer-portal-software .feature {
gap: 30px
}
.dreamzfsm-customer-portal-software .feature>div:first-child {
max-width: 800px
}
.dreamzfsm-customer-portal-software .outcomes,
.dreamzfsm-customer-portal-software .featureGrid,
.dreamzfsm-customer-portal-software .connectedGrid,
.dreamzfsm-customer-portal-software .useCases {
grid-template-columns: repeat(2, 1fr)
}
.dreamzfsm-customer-portal-software .logos {
grid-template-columns: repeat(3, 1fr)
}
.dreamzfsm-customer-portal-software .reviews {
grid-template-columns: 1fr
}
.dreamzfsm-customer-portal-software .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.dreamzfsm-customer-portal-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.dreamzfsm-customer-portal-software .ratingItem:nth-child(2) {
border: 0
}
.dreamzfsm-customer-portal-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.dreamzfsm-customer-portal-software .final .btn {
min-width: 195px
}
.dreamzfsm-customer-portal-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.dreamzfsm-customer-portal-software .aiGrid {
gap: 30px
}
.dreamzfsm-customer-portal-software .aiMini {
max-width: 760px
}
.dreamzfsm-customer-portal-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.dreamzfsm-customer-portal-software .wrap {
width: calc(100% - 24px)
}
.dreamzfsm-customer-portal-software section {
padding: 56px 0
}
.dreamzfsm-customer-portal-software .hero {
padding: 32px 0 42px
} .dreamzfsm-customer-portal-software h2 {
font-size: 34px
}
.dreamzfsm-customer-portal-software .lead {
font-size: 17px
}
.dreamzfsm-customer-portal-software .sectionHead p {
font-size: 16px
}
.dreamzfsm-customer-portal-software .sectionHead {
margin-bottom: 28px
}
.dreamzfsm-customer-portal-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.dreamzfsm-customer-portal-software .heroGrid {
gap: 26px
}
.dreamzfsm-customer-portal-software .hero .actions {
gap: 8px
}
.dreamzfsm-customer-portal-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.dreamzfsm-customer-portal-software .micro {
font-size: 11px
}
.dreamzfsm-customer-portal-software .heroPills {
gap: 6px
}
.dreamzfsm-customer-portal-software .heroPills span {
font-size: 9px
}
.dreamzfsm-customer-portal-software .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.dreamzfsm-customer-portal-software .assetStage {
grid-template-columns: minmax(0, 1fr) 160px;
gap: 12px 10px
}
.dreamzfsm-customer-portal-software .assetTag {
font-size: 9px
}
.dreamzfsm-customer-portal-software .boardHeader {
padding: 13px
}
.dreamzfsm-customer-portal-software .boardBrand {
font-size: 12px
}
.dreamzfsm-customer-portal-software .sampleBadge {
font-size: 7px
}
.dreamzfsm-customer-portal-software .portalLayout {
grid-template-columns: 95px minmax(0, 1fr)
}
.dreamzfsm-customer-portal-software .portalNav {
padding: 12px 6px;
gap: 5px
}
.dreamzfsm-customer-portal-software .portalNavItem {
font-size: 9px;
gap: 5px;
padding: 9px 5px
}
.dreamzfsm-customer-portal-software .portalNavItem .icon2 {
width: 12px;
height: 12px
}
.dreamzfsm-customer-portal-software .portalNavLabel {
font-size: 7px;
padding-left: 5px
}
.dreamzfsm-customer-portal-software .portalMain {
padding: 13px
}
.dreamzfsm-customer-portal-software .portalWelcome strong {
font-size: 15px
}
.dreamzfsm-customer-portal-software .portalWelcome small {
font-size: 9px
}
.dreamzfsm-customer-portal-software .portalMetrics {
gap: 6px
}
.dreamzfsm-customer-portal-software .portalMetric {
padding: 9px 6px
}
.dreamzfsm-customer-portal-software .portalMetric strong {
font-size: 21px
}
.dreamzfsm-customer-portal-software .portalMetric span {
font-size: 7px
}
.dreamzfsm-customer-portal-software .visitCard {
padding: 10px
}
.dreamzfsm-customer-portal-software .visitCard>strong {
font-size: 11px
}
.dreamzfsm-customer-portal-software .portalShortcuts {
gap: 7px
}
.dreamzfsm-customer-portal-software .portalShortcut {
font-size: 8px;
padding: 8px 6px;
gap: 5px
}
.dreamzfsm-customer-portal-software .portalShortcut .icon2 {
width: 12px;
height: 12px
}
.dreamzfsm-customer-portal-software .boardFooter {
padding: 10px 171px 10px 12px;
font-size: 8px;
min-height: 48px
}
.dreamzfsm-customer-portal-software .assetPhone {
margin-top: -42px;
border-radius: 24px
}
.dreamzfsm-customer-portal-software .phoneScreen {
border-radius: 18px
}
.dreamzfsm-customer-portal-software .phoneHead {
padding: 10px 9px
}
.dreamzfsm-customer-portal-software .phoneHead strong {
font-size: 10px
}
.dreamzfsm-customer-portal-software .phoneHead small {
font-size: 7px
}
.dreamzfsm-customer-portal-software .phoneBody {
padding: 12px 10px
}
.dreamzfsm-customer-portal-software .phoneBody>strong {
font-size: 13px
}
.dreamzfsm-customer-portal-software .phoneRow {
font-size: 8px
}
.dreamzfsm-customer-portal-software .phoneStatus {
font-size: 8px
}
.dreamzfsm-customer-portal-software .phoneStatus strong {
font-size: 9px
}
.dreamzfsm-customer-portal-software .contextHead {
font-size: 9px;
padding: 10px;
gap: 6px
}
.dreamzfsm-customer-portal-software .contextHead .icon2 {
width: 15px;
height: 15px
}
.dreamzfsm-customer-portal-software .contextBody {
padding: 11px
}
.dreamzfsm-customer-portal-software .contextBody>strong {
font-size: 13px
}
.dreamzfsm-customer-portal-software .contextBody>p {
font-size: 10px
}
.dreamzfsm-customer-portal-software .contextTrail {
display: none
}
.dreamzfsm-customer-portal-software .diagramCaption {
font-size: 9px
}
.dreamzfsm-customer-portal-software .trust {
padding: 23px 0
}
.dreamzfsm-customer-portal-software .trustLabel {
font-size: 12px
}
.dreamzfsm-customer-portal-software .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.dreamzfsm-customer-portal-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.dreamzfsm-customer-portal-software .logo.dhl {
font-size: 19px
}
.dreamzfsm-customer-portal-software .logo.adobe {
font-size: 17px
}
.dreamzfsm-customer-portal-software .logo.golden {
font-size: 8px
}
.dreamzfsm-customer-portal-software .fl,
.dreamzfsm-customer-portal-software .outcomes,
.dreamzfsm-customer-portal-software .featureGrid,
.dreamzfsm-customer-portal-software .connectedGrid,
.dreamzfsm-customer-portal-software .useCases {
grid-template-columns: 1fr
}
.dreamzfsm-customer-portal-software .fi {
font-size: 14px
}
.dreamzfsm-customer-portal-software .outcome {
padding: 21px
}
.dreamzfsm-customer-portal-software .outcome strong {
margin-top: 12px
}
.dreamzfsm-customer-portal-software .outcome span {
font-size: 14px
}
.dreamzfsm-customer-portal-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.dreamzfsm-customer-portal-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.dreamzfsm-customer-portal-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.dreamzfsm-customer-portal-software .uiSub {
font-size: 9px
}
.dreamzfsm-customer-portal-software .workspaceHeader {
padding: 14px;
gap: 9px
}
.dreamzfsm-customer-portal-software .workspaceHeader strong {
font-size: 14px
}
.dreamzfsm-customer-portal-software .workspaceHeader small {
font-size: 9px
}
.dreamzfsm-customer-portal-software .workspaceHeader>.pill {
display: none
}
.dreamzfsm-customer-portal-software .workspaceTiles {
gap: 8px
}
.dreamzfsm-customer-portal-software .workspaceTile {
padding: 13px 10px;
gap: 8px
}
.dreamzfsm-customer-portal-software .workspaceTile strong {
font-size: 11px
}
.dreamzfsm-customer-portal-software .workspaceTile small {
font-size: 9px
}
.dreamzfsm-customer-portal-software .requestProgress {
gap: 8px;
grid-template-columns: 1fr 20px 1fr
}
.dreamzfsm-customer-portal-software .requestProgress>.icon {
width: 19px;
height: 19px
}
.dreamzfsm-customer-portal-software .requestChip {
padding: 11px
}
.dreamzfsm-customer-portal-software .requestDetails>span {
font-size: 8px;
padding: 9px 6px;
gap: 4px
}
.dreamzfsm-customer-portal-software .documentsTop {
padding: 12px
}
.dreamzfsm-customer-portal-software .documentsTop strong {
font-size: 12px
}
.dreamzfsm-customer-portal-software .documentsTop small {
font-size: 8px
}
.dreamzfsm-customer-portal-software .documentGrid {
gap: 10px
}
.dreamzfsm-customer-portal-software .documentPaper {
padding: 13px
}
.dreamzfsm-customer-portal-software .documentPaper>strong {
font-size: 13px
}
.dreamzfsm-customer-portal-software .docTotal strong {
font-size: 26px
}
.dreamzfsm-customer-portal-software .documentLine {
font-size: 9px;
gap: 6px
}
.dreamzfsm-customer-portal-software .communicationScene {
gap: 10px
}
.dreamzfsm-customer-portal-software .chatThread {
padding: 11px;
gap: 11px
}
.dreamzfsm-customer-portal-software .chatMessage {
padding: 10px;
font-size: 10px
}
.dreamzfsm-customer-portal-software .chatHeader {
padding: 11px;
gap: 7px
}
.dreamzfsm-customer-portal-software .chatHeader strong {
font-size: 11px
}
.dreamzfsm-customer-portal-software .chatHeader small {
font-size: 8px
}
.dreamzfsm-customer-portal-software .notificationCard {
padding: 12px
}
.dreamzfsm-customer-portal-software .notificationCard strong {
font-size: 11px
}
.dreamzfsm-customer-portal-software .notificationCard p {
font-size: 10px
}
.dreamzfsm-customer-portal-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.dreamzfsm-customer-portal-software .aiMini div {
padding: 16px
}
.dreamzfsm-customer-portal-software .aiMini strong {
font-size: 14px
}
.dreamzfsm-customer-portal-software .aiMini span {
font-size: 13px
}
.dreamzfsm-customer-portal-software .promptBox {
padding: 18px;
border-radius: 17px
}
.dreamzfsm-customer-portal-software .prompt {
font-size: 13px;
padding: 13px
}
.dreamzfsm-customer-portal-software .promptHead {
font-size: 19px
}
.dreamzfsm-customer-portal-software .promptFoot {
font-size: 10px !important
}
.dreamzfsm-customer-portal-software .connectedCard {
padding: 22px
}
.dreamzfsm-customer-portal-software .connectedCard p,
.dreamzfsm-customer-portal-software .featureCard p,
.dreamzfsm-customer-portal-software .useCase p {
font-size: 14px
}
.dreamzfsm-customer-portal-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.dreamzfsm-customer-portal-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.dreamzfsm-customer-portal-software .ratingItem {
border: 0
}
.dreamzfsm-customer-portal-software .ratingLead {
margin-bottom: 3px
}
.dreamzfsm-customer-portal-software .review p {
font-size: 14px
}
.dreamzfsm-customer-portal-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.dreamzfsm-customer-portal-software .ctaBtns {
width: 100%
}
.dreamzfsm-customer-portal-software .ctaBtns .btn {
flex: 1
}
.dreamzfsm-customer-portal-software .cta p {
font-size: 14px
}
.dreamzfsm-customer-portal-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.dreamzfsm-customer-portal-software .final h2 {
font-size: 32px
}
.dreamzfsm-customer-portal-software .final p {
font-size: 15px
}
.dreamzfsm-customer-portal-software .final .ctaBtns {
flex-direction: column
}
.dreamzfsm-customer-portal-software .final .btn {
min-width: 0;
width: 100%
}
.dreamzfsm-customer-portal-software .faq details {
padding: 16px
}
.dreamzfsm-customer-portal-software .faq summary {
font-size: 14px
}
.dreamzfsm-customer-portal-software .faq details p {
font-size: 14px
}
}
@media(max-width:420px) {
.dreamzfsm-customer-portal-software .portalNav {
display: none
}
.dreamzfsm-customer-portal-software .portalLayout {
grid-template-columns: 1fr
}
.dreamzfsm-customer-portal-software .portalMain {
padding: 16px
}
.dreamzfsm-customer-portal-software .portalWelcome strong {
font-size: 18px
}
.dreamzfsm-customer-portal-software .portalWelcome small {
font-size: 10px
}
.dreamzfsm-customer-portal-software .portalMetric {
padding: 11px 9px
}
.dreamzfsm-customer-portal-software .portalMetric span {
font-size: 8px
}
.dreamzfsm-customer-portal-software .visitCard>strong {
font-size: 12px
}
.dreamzfsm-customer-portal-software .visitMeta {
font-size: 10px
}
.dreamzfsm-customer-portal-software .portalShortcut {
font-size: 9px;
padding: 9px
}
.dreamzfsm-customer-portal-software .workspaceTiles {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.dreamzfsm-customer-portal-software .workspaceTile strong {
font-size: 12px
}
.dreamzfsm-customer-portal-software .workspaceTile small {
font-size: 10px
}
.dreamzfsm-customer-portal-software .communicationScene {
grid-template-columns: 1fr
}
.dreamzfsm-customer-portal-software .notificationStack {
grid-template-columns: 1fr 1fr
}
.dreamzfsm-customer-portal-software .chatMessage {
font-size: 12px;
max-width: 88%
}
.dreamzfsm-customer-portal-software .chatThread {
padding: 14px
}
.dreamzfsm-customer-portal-software .chatHeader strong {
font-size: 13px
}
.dreamzfsm-customer-portal-software .chatHeader small {
font-size: 9px
}
.dreamzfsm-customer-portal-software .chatComposer {
font-size: 11px
}
.dreamzfsm-customer-portal-software .notificationCard p {
font-size: 11px
}
.dreamzfsm-customer-portal-software .requestDetails {
gap: 6px
}
.dreamzfsm-customer-portal-software .requestDetails>span {
font-size: 9px;
flex-direction: column;
align-items: flex-start;
padding: 9px
}
.dreamzfsm-customer-portal-software .documentGrid {
grid-template-columns: 1fr
}
.dreamzfsm-customer-portal-software .documentPaper {
padding: 18px
}
.dreamzfsm-customer-portal-software .documentPaper>strong {
font-size: 16px
}
.dreamzfsm-customer-portal-software .documentLine {
font-size: 12px
}
.dreamzfsm-customer-portal-software .documentPaper .mockAction {
font-size: 11px
}
.dreamzfsm-customer-portal-software .documentPaper>small,
.dreamzfsm-customer-portal-software .docTotal small {
font-size: 10px
}
.dreamzfsm-customer-portal-software .docTotal strong {
font-size: 30px
}
}
@media(max-width:360px) { .dreamzfsm-customer-portal-software h2 {
font-size: 31px
}
.dreamzfsm-customer-portal-software .assetStage {
grid-template-columns: minmax(0, 1fr) 143px;
gap: 10px 8px
}
.dreamzfsm-customer-portal-software .contextHead {
font-size: 8px;
padding: 9px;
gap: 5px
}
.dreamzfsm-customer-portal-software .contextHead .icon2 {
width: 13px;
height: 13px
}
.dreamzfsm-customer-portal-software .contextBody {
padding: 10px
}
.dreamzfsm-customer-portal-software .contextBody>strong {
font-size: 12px
}
.dreamzfsm-customer-portal-software .contextBody>p {
font-size: 9px
}
.dreamzfsm-customer-portal-software .boardFooter {
padding-right: 155px
}
.dreamzfsm-customer-portal-software .phoneHead strong {
font-size: 9px
}
.dreamzfsm-customer-portal-software .phoneHead small {
font-size: 7px
}
.dreamzfsm-customer-portal-software .phoneBody {
padding: 11px 9px
}
.dreamzfsm-customer-portal-software .phoneBody>strong {
font-size: 12px
}
.dreamzfsm-customer-portal-software .phoneRow {
font-size: 8px;
gap: 4px
}
.dreamzfsm-customer-portal-software .phoneFine {
font-size: 7px
}
.dreamzfsm-customer-portal-software .requestProgress {
gap: 6px;
grid-template-columns: 1fr 17px 1fr
}
.dreamzfsm-customer-portal-software .requestChip {
padding: 10px
}
.dreamzfsm-customer-portal-software .requestChip strong {
font-size: 11px
}
.dreamzfsm-customer-portal-software .requestChip small {
font-size: 8px
}
.dreamzfsm-customer-portal-software .workspaceHeader {
padding: 13px
}
.dreamzfsm-customer-portal-software .workspaceHeader strong {
font-size: 13px
}
}  .review-management-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.review-management-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.review-management-software a:focus-visible,
.review-management-software summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.review-management-software .dark a:focus-visible,
.review-management-software .final a:focus-visible {
outline-color: var(--yellow)
}
.review-management-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.review-management-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.review-management-software .soft {
background: var(--sky2)
}
.review-management-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.review-management-software .dark h2,
.review-management-software .dark h3 {
color: #fff
}
.review-management-software .dark p {
color: #D6D6D6
}
.review-management-software .dark .ey {
background: var(--yellow)
}
.review-management-software .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.review-management-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.review-management-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.review-management-software .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin-bottom: 0 !important;
background: transparent !important;
}
.review-management-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.review-management-software .textLink .icon {
width: 16px;
height: 16px
}
.review-management-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.review-management-software .skipLink:focus {
top: 12px
} .review-management-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.review-management-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.review-management-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.review-management-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.review-management-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.review-management-software .logo.adobe {
font-size: 20px
}
.review-management-software .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .review-management-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.review-management-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.review-management-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.review-management-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.review-management-software .outcome:nth-child(3):before {
background: var(--green)
}
.review-management-software .outcome:nth-child(4):before {
background: var(--purple)
}
.review-management-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.review-management-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.review-management-software .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .review-management-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.review-management-software .feature.reverse .visual {
order: -1
}
.review-management-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.review-management-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.review-management-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.review-management-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.review-management-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: none;
padding: 22px;
position: relative;
overflow: hidden
}
.review-management-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.review-management-software .visual>* {
position: relative;
z-index: 2
}
.review-management-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.review-management-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.review-management-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.review-management-software .uiHeading .icon {
width: 19px;
height: 19px
}
.review-management-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.review-management-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.review-management-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.review-management-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.review-management-software .pill.green {
background: var(--greenbg);
color: #116746
}
.review-management-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.review-management-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.review-management-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .review-management-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.review-management-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.review-management-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.review-management-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.review-management-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.review-management-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.review-management-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.review-management-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.review-management-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.review-management-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .review-management-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.review-management-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.review-management-software .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.review-management-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.review-management-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.review-management-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.review-management-software .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .review-management-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.review-management-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.review-management-software .featureCard:hover {
transform: translateY(-3px)
}
.review-management-software .featureIcon,
.review-management-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.review-management-software .featureIcon .icon,
.review-management-software .useIcon .icon {
width: 22px;
height: 22px
}
.review-management-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.review-management-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .review-management-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.review-management-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.review-management-software .useCase h3 {
font-size: 20px
}
.review-management-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.review-management-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.review-management-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.review-management-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.review-management-software .review h3 {
font-size: 22px
}
.review-management-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.review-management-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.review-management-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.review-management-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.review-management-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.review-management-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.review-management-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.review-management-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.review-management-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .review-management-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.review-management-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.review-management-software .cta h3 {
font-size: 19px
}
.review-management-software .cta.darkCta h3 {
color: #fff
}
.review-management-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.review-management-software .cta.darkCta p {
color: #D1D1D1
}
.review-management-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.review-management-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.review-management-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.review-management-software .review-management-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.review-management-software .review-management-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.review-management-software .review-management-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.review-management-software .review-management-software .reveal {
opacity: 1;
transform: none
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.review-management-software .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.review-management-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.review-management-software .heroGrid>*,
.review-management-software .feature>*,
.review-management-software .aiGrid>* {
min-width: 0
}
.review-management-software .hero h1 {
max-width: 590px
}
.review-management-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.review-management-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.review-management-software .heroVisual {
position: relative;
min-width: 0;
width: 100%;
max-width: 600px;
margin: auto
}
.review-management-software .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 176px;
gap: 12px;
align-items: start
}
.review-management-software .assetStage:before {
content: "";
position: absolute;
inset: 45px 0 22px 20px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.review-management-software .assetStage>* {
position: relative;
z-index: 1
}
.review-management-software .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #111;
font-size: 10px;
font-weight: 800;
padding: 6px 10px;
border-radius: 8px
}
.review-management-software .reviewBoard {
grid-column: 1/-1;
background: #fff;
border: 1px solid #BADCEA;
border-radius: 18px;
overflow: hidden
}
.review-management-software .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 15px;
border-bottom: 1px solid var(--line)
}
.review-management-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.review-management-software .brandTile {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.review-management-software .brandTile .icon {
width: 17px;
height: 17px
}
.review-management-software .sampleBadge {
font-size: 8px;
font-weight: 750;
line-height: 1.4;
border: 1px solid var(--line);
background: var(--sky2);
padding: 4px 6px;
border-radius: 5px;
color: #526776;
white-space: nowrap
}
.review-management-software .rvHeroStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 12px 14px
}
.review-management-software .rvHeroStats>div {
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 9px 10px
}
.review-management-software .rvHeroStats strong {
display: block;
font-size: 22px;
line-height: 1.15;
letter-spacing: -.035em;
color: var(--navy)
}
.review-management-software .rvHeroStats span {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 5px
}
.review-management-software .rvHeroStats>div:last-child {
background: var(--yellowsoft);
border-color: #EEDFAD
}
.review-management-software .heroReviewList {
padding: 0 14px 12px
}
.review-management-software .heroReview {
display: grid;
grid-template-columns: 27px minmax(0, 1fr) auto;
gap: 9px;
align-items: start;
border: 1px solid var(--line);
border-radius: 9px;
padding: 10px;
margin-bottom: 8px
}
.review-management-software .heroReview:last-child {
margin-bottom: 0
}
.review-management-software .rvAvatar {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: #E6F4FB;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.review-management-software .heroReview .rvAvatar {
height: 27px;
width: 27px;
font-size: 9px
}
.review-management-software .rvAvatar.gold {
background: var(--yellowsoft);
color: #765910
}
.review-management-software .heroReview strong {
font-size: 10px;
display: block;
line-height: 1.4
}
.review-management-software .heroReview p {
font-size: 10px;
color: #586F80;
line-height: 1.5;
margin-top: 4px
}
.review-management-software .sourceTag {
font-size: 8px;
line-height: 1.3;
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 5px;
background: #fff;
color: #3D6075;
display: inline-block
}
.review-management-software .rvStars {
display: inline-flex;
gap: 2px;
color: #A77600;
line-height: 1;
vertical-align: middle
}
.review-management-software .rvStars .icon {
width: 12px;
height: 12px;
fill: #FFD554;
stroke: #A77600;
stroke-width: 1.25
}
.review-management-software .heroReview .rvStars {
margin-top: 4px
}
.review-management-software .heroReview .rvStars .icon {
width: 10px;
height: 10px
}
.review-management-software .boardFooter {
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
line-height: 1.5;
padding: 10px 15px;
background: var(--sky2);
color: #4E6A7C;
border-top: 1px solid var(--line)
}
.review-management-software .boardFooter .icon {
width: 14px;
height: 14px;
color: var(--green)
}
.review-management-software .lifecycleCard {
grid-column: 1;
align-self: start;
background: #101B25;
color: #fff;
border: 1px solid #2C4351;
border-radius: 14px;
overflow: hidden
}
.review-management-software .lifecycleHead {
padding: 11px 12px;
display: flex;
gap: 7px;
align-items: center;
font-size: 10px;
font-weight: 800;
border-bottom: 1px solid #304551
}
.review-management-software .lifecycleHead .icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
.review-management-software .lifecycleBody {
padding: 13px
}
.review-management-software .lifecycleBody strong {
display: block;
font-size: 15px;
line-height: 1.35
}
.review-management-software .lifecycleBody p {
color: #C9DAE4;
font-size: 10px;
line-height: 1.6;
margin-top: 6px
}
.review-management-software .contextTrail {
font-size: 9px;
color: #D5E6F1;
margin-top: 12px;
display: flex;
gap: 7px;
align-items: center
}
.review-management-software .contextTrail .icon {
width: 13px;
height: 13px;
color: var(--yellow)
}
.review-management-software .assetPhone {
grid-column: 2;
grid-row: 3;
margin-top: -23px;
background: #0C1E2A;
padding: 6px;
border-radius: 27px;
border: 1px solid #354D5C;
z-index: 3
}
.review-management-software .phoneScreen {
border-radius: 21px;
background: #fff;
overflow: hidden
}
.review-management-software .phoneTop {
height: 16px;
background: #0C1E2A;
display: grid;
place-items: center
}
.review-management-software .notch {
height: 4px;
width: 44px;
background: #536D7E;
border-radius: 9px
}
.review-management-software .phoneHead {
padding: 11px 10px;
border-bottom: 1px solid var(--line);
background: linear-gradient(135deg, #EAF8FF, #FFF7D6)
}
.review-management-software .phoneHead strong {
font-size: 11px;
display: block
}
.review-management-software .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.review-management-software .phoneBody {
padding: 12px 11px
}
.review-management-software .phoneBody>strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.4;
margin-top: 8px
}
.review-management-software .phoneBody>p {
font-size: 10px;
line-height: 1.6;
margin-top: 7px;
color: #576E80
}
.review-management-software .phoneBadge {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--yellowsoft);
color: #8C6813
}
.review-management-software .phoneBadge .icon {
height: 18px;
width: 18px
}
.review-management-software .mockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 8px;
background: var(--yellow);
border-radius: 7px;
color: #111;
font-size: 10px;
font-weight: 800;
text-align: center;
line-height: 1.4;
margin-top: 11px
}
.review-management-software .mockAction .icon {
height: 14px;
width: 14px
}
.review-management-software .phoneFine {
display: block;
font-size: 8px;
line-height: 1.5;
text-align: center;
color: var(--muted);
margin-top: 8px
}
.review-management-software .diagramCaption {
font-size: 10px;
color: var(--muted);
text-align: center;
line-height: 1.6;
margin-top: 12px
} .review-management-software .requestPath {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-bottom: 15px
}
.review-management-software .pathNode {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 10px;
min-width: 0
}
.review-management-software .pathNode>span {
display: grid;
place-items: center;
width: 27px;
height: 27px;
background: var(--sky);
border-radius: 8px;
color: var(--navy);
margin-bottom: 9px
}
.review-management-software .pathNode>span .icon {
width: 16px;
height: 16px
}
.review-management-software .pathNode strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.review-management-software .pathNode small {
display: block;
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 5px
}
.review-management-software .pathNode>.icon {
position: absolute;
right: -18px;
top: 48%;
height: 15px;
width: 15px;
color: #719BAD
}
.review-management-software .pathNode.active {
background: var(--yellowsoft);
border-color: #E6D494
}
.review-management-software .pathNode.active>span {
background: var(--yellow)
}
.review-management-software .messageSheet {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: #fff
}
.review-management-software .messageTitle {
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
background: #F5FBFF;
border-bottom: 1px solid var(--line);
gap: 8px;
font-size: 12px;
font-weight: 800
}
.review-management-software .messageTitle>span {
display: flex;
gap: 7px;
align-items: center
}
.review-management-software .messageTitle .icon {
width: 17px;
height: 17px;
color: var(--navy)
}
.review-management-software .messageTitle small {
font-size: 8px;
color: var(--muted);
font-weight: 500
}
.review-management-software .messageBody {
padding: 18px
}
.review-management-software .messageBody>strong {
display: block;
font-size: 15px;
color: var(--navy);
line-height: 1.4
}
.review-management-software .messageBody>p {
font-size: 12px;
line-height: 1.7;
margin: 10px 0;
color: #536E80
}
.review-management-software .messageBody .mockAction {
display: inline-flex;
padding: 10px 15px;
font-size: 11px;
margin-top: 3px
}
.review-management-software .exampleNote {
font-size: 10px;
color: #547184;
line-height: 1.6;
padding: 12px 14px;
border-top: 1px solid var(--line);
background: #FCFEFF;
display: flex;
align-items: flex-start;
gap: 8px
}
.review-management-software .exampleNote .icon {
width: 15px;
height: 15px;
flex: 0 0 15px;
color: var(--green);
margin-top: 1px
} .review-management-software .sourceSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 14px
}
.review-management-software .sourceBox {
padding: 15px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff
}
.review-management-software .sourceHead {
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 12px;
color: var(--navy)
}
.review-management-software .sourceMark {
width: 26px;
height: 26px;
border-radius: 7px;
display: grid;
place-items: center;
background: #EAF8FF;
font-size: 15px;
font-weight: 850
}
.review-management-software .sourceBox strong {
font-size: 27px;
display: block;
color: var(--navy);
line-height: 1.2;
margin-top: 11px;
letter-spacing: -.035em
}
.review-management-software .sourceBox small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 5px
}
.review-management-software .sourceBox .rvStars {
margin-top: 7px
}
.review-management-software .sourceBox .recommend {
margin-top: 9px;
display: inline-flex
}
.review-management-software .rvInbox {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
overflow: hidden
}
.review-management-software .rvInboxHead {
background: #F5FBFF;
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 11px;
font-weight: 800
}
.review-management-software .rvInboxHead>span {
font-size: 9px;
color: var(--muted);
font-weight: 500
}
.review-management-software .rvEntry {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 15px 13px;
border-bottom: 1px solid var(--line)
}
.review-management-software .rvEntry:last-child {
border: 0
}
.review-management-software .rvEntryBody {
flex: 1;
min-width: 0
}
.review-management-software .rvEntryTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 6px
}
.review-management-software .rvEntryTop>strong {
font-size: 11px;
line-height: 1.4
}
.review-management-software .rvEntry p {
font-size: 11px;
line-height: 1.6;
margin-top: 6px;
color: #536E80
}
.review-management-software .rvStatus {
display: inline-flex;
align-items: center;
gap: 5px;
color: #80600D;
font-size: 9px;
margin-top: 8px
}
.review-management-software .rvStatus .icon {
width: 12px;
height: 12px
}
.review-management-software .rvStatus.answered {
color: #17674B
}
.review-management-software .recommend {
font-size: 9px;
color: #156349;
background: var(--greenbg);
border-radius: 5px;
padding: 4px 6px;
line-height: 1.2
} .review-management-software .alertCard {
display: flex;
gap: 11px;
align-items: center;
padding: 14px;
border: 1px solid #E4D391;
border-radius: 12px;
background: var(--yellowsoft);
margin-bottom: 14px
}
.review-management-software .alertIcon {
width: 35px;
height: 35px;
flex: 0 0 35px;
display: grid;
place-items: center;
background: var(--yellow);
border-radius: 10px;
color: #33270B
}
.review-management-software .alertIcon .icon {
width: 20px;
height: 20px
}
.review-management-software .alertCard strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.review-management-software .alertCard p {
font-size: 11px;
line-height: 1.5;
margin: 4px 0 0;
color: #6C5B2F
}
.review-management-software .replyCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden
}
.review-management-software .feedbackExcerpt {
padding: 16px;
border-bottom: 1px solid var(--line)
}
.review-management-software .feedbackExcerpt>div {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
color: var(--muted)
}
.review-management-software .feedbackExcerpt strong {
font-size: 12px;
color: var(--navy)
}
.review-management-software .feedbackExcerpt>p {
font-size: 13px;
line-height: 1.6;
margin-top: 10px;
color: #35556A
}
.review-management-software .replyDraft {
padding: 16px;
background: #FAFDFE
}
.review-management-software .replyDraft>label,
.review-management-software .replyLabel {
font-size: 10px;
font-weight: 800;
color: var(--muted);
display: block;
margin-bottom: 9px
}
.review-management-software .replyText {
border: 1px solid #C9DEE9;
background: #fff;
padding: 13px;
border-radius: 8px;
font-size: 12px;
line-height: 1.7;
color: #38596F
}
.review-management-software .replyActions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 11px
}
.review-management-software .replyActions .mockAction {
margin: 0;
display: inline-flex;
padding: 9px 12px
}
.review-management-software .replyActions>small {
font-size: 9px;
color: var(--muted);
max-width: 145px;
text-align: right;
line-height: 1.5
} .review-management-software .themePanel {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
padding: 18px
}
.review-management-software .themeHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 18px
}
.review-management-software .themeHead strong {
font-size: 13px;
color: var(--navy)
}
.review-management-software .themeHead span {
font-size: 9px;
color: var(--muted)
}
.review-management-software .themeRow {
display: grid;
grid-template-columns: 106px minmax(0, 1fr) 22px;
gap: 10px;
align-items: center;
margin-bottom: 15px;
font-size: 10px;
color: #446379
}
.review-management-software .themeRow:last-child {
margin: 0
}
.review-management-software .themeTrack {
height: 11px;
border-radius: 5px;
background: #EDF4F8;
overflow: hidden
}
.review-management-software .themeTrack span {
height: 100%;
width: var(--bar, 50%);
display: block;
background: #42B8E8;
border-radius: 5px
}
.review-management-software .themeRow:nth-child(3) .themeTrack span {
background: #E5B62C
}
.review-management-software .themeRow:nth-child(4) .themeTrack span {
background: #29A878
}
.review-management-software .themeRow>strong {
font-size: 11px;
color: var(--navy)
}
.review-management-software .learningCard {
display: flex;
gap: 12px;
padding: 16px;
border-radius: 12px;
background: #0D2637;
color: #fff;
margin-top: 14px
}
.review-management-software .learningCard>span {
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 9px;
background: var(--yellow);
display: grid;
place-items: center;
color: #12232E
}
.review-management-software .learningCard>span .icon {
height: 18px;
width: 18px
}
.review-management-software .learningCard strong {
display: block;
font-size: 13px;
line-height: 1.4
}
.review-management-software .learningCard p {
font-size: 11px;
line-height: 1.6;
color: #D0DFE8;
margin-top: 5px
}
.review-management-software .learningSteps {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
font-size: 10px;
margin-top: 10px;
color: #D7EAF5
}
.review-management-software .learningSteps .icon {
width: 13px;
height: 13px;
color: var(--yellow)
}
.review-management-software .contentNote {
margin-top: 17px;
padding: 12px 14px;
border: 1px solid #C6E2D8;
border-radius: 11px;
background: #F2FBF7;
color: #315F4E;
font-size: 12px;
line-height: 1.7
}
.review-management-software .contentNote strong {
color: #145D42
}
.review-management-software .contentNote a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px
} @media(max-width:1100px) and (min-width:961px) {
.review-management-software .heroGrid {
gap: 28px
}
.review-management-software .hero .lead {
font-size: 17px
}
.review-management-software .assetStage {
grid-template-columns: minmax(0, 1fr) 161px;
gap: 11px
}
.review-management-software .rvHeroStats {
padding: 11px;
gap: 7px
}
.review-management-software .rvHeroStats>div {
padding: 9px 8px
}
.review-management-software .rvHeroStats span {
font-size: 7.5px
}
.review-management-software .heroReviewList {
padding: 0 11px 11px
}
.review-management-software .heroReview {
gap: 7px;
padding: 9px
}
.review-management-software .heroReview p {
font-size: 9px
}
.review-management-software .boardHeader {
padding: 12px
}
.review-management-software .contextTrail {
flex-wrap: wrap
}
.review-management-software .visual {
padding: 18px
}
.review-management-software .requestPath {
gap: 16px
}
.review-management-software .pathNode>.icon {
right: -15px;
width: 13px
}
.review-management-software .themeRow {
grid-template-columns: 96px minmax(0, 1fr) 18px
}
}
@media(max-width:960px) {
.review-management-software .heroGrid,
.review-management-software .feature,
.review-management-software .aiGrid,
.review-management-software .final {
grid-template-columns: 1fr
}
.review-management-software .heroGrid {
gap: 36px
}
.review-management-software .hero h1 {
max-width: 800px
}
.review-management-software .hero .lead {
max-width: 750px
}
.review-management-software .heroVisual {
max-width: 600px;
margin: 0 auto
}
.review-management-software .feature.reverse .visual {
order: 0
}
.review-management-software .feature {
gap: 30px
}
.review-management-software .feature>div:first-child {
max-width: 800px
}
.review-management-software .outcomes,
.review-management-software .featureGrid,
.review-management-software .connectedGrid,
.review-management-software .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.review-management-software .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.review-management-software .reviews {
grid-template-columns: 1fr
}
.review-management-software .ratingGrid {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.review-management-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.review-management-software .ratingItem:nth-child(2) {
border: 0
}
.review-management-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.review-management-software .final .btn {
min-width: 195px
}
.review-management-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.review-management-software .aiGrid {
gap: 30px
}
.review-management-software .aiMini {
max-width: 760px
}
.review-management-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.review-management-software .wrap {
width: calc(100% - 24px)
}
.review-management-software section {
padding: 56px 0
}
.review-management-software .hero {
padding: 32px 0 42px
}
.review-management-software .lead {
font-size: 17px
}
.review-management-software .sectionHead p {
font-size: 16px
}
.review-management-software .sectionHead {
margin-bottom: 28px
}
.review-management-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.review-management-software .heroGrid {
gap: 26px
}
.review-management-software .hero .actions {
gap: 8px
}
.review-management-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.review-management-software .micro {
font-size: 11px
}
.review-management-software .heroPills {
gap: 6px
}
.review-management-software .heroPills span {
font-size: 9px
}
.review-management-software .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.review-management-software .assetStage {
grid-template-columns: minmax(0, 1fr) 160px;
gap: 11px 10px
}
.review-management-software .assetTag {
font-size: 9px
}
.review-management-software .boardHeader {
padding: 12px
}
.review-management-software .boardBrand {
font-size: 12px
}
.review-management-software .sampleBadge {
font-size: 7px
}
.review-management-software .rvHeroStats {
padding: 11px;
gap: 7px
}
.review-management-software .rvHeroStats>div {
padding: 9px 8px
}
.review-management-software .rvHeroStats strong {
font-size: 21px
}
.review-management-software .rvHeroStats span {
font-size: 8px;
line-height: 1.5
}
.review-management-software .heroReviewList {
padding: 0 11px 11px
}
.review-management-software .heroReview {
gap: 8px;
padding: 10px
}
.review-management-software .heroReview p {
font-size: 10px
}
.review-management-software .heroReview strong {
font-size: 10px
}
.review-management-software .boardFooter {
font-size: 8px;
padding: 10px 12px
}
.review-management-software .assetPhone {
margin-top: 0;
border-radius: 25px
}
.review-management-software .phoneScreen {
border-radius: 19px
}
.review-management-software .phoneHead {
padding: 10px 9px
}
.review-management-software .phoneHead strong {
font-size: 10px
}
.review-management-software .phoneBody {
padding: 11px 10px
}
.review-management-software .phoneBody>strong {
font-size: 11px
}
.review-management-software .phoneBody>p {
font-size: 9px
}
.review-management-software .lifecycleHead {
padding: 10px;
font-size: 9px;
gap: 6px
}
.review-management-software .lifecycleBody {
padding: 11px
}
.review-management-software .lifecycleBody strong {
font-size: 13px
}
.review-management-software .lifecycleBody p {
font-size: 10px
}
.review-management-software .contextTrail {
flex-wrap: wrap;
font-size: 8px;
gap: 5px
}
.review-management-software .diagramCaption {
font-size: 9px
}
.review-management-software .trust {
padding: 23px 0
}
.review-management-software .trustLabel {
font-size: 12px
}
.review-management-software .logos {
gap: 7px
}
.review-management-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.review-management-software .logo.dhl {
font-size: 19px
}
.review-management-software .logo.adobe {
font-size: 17px
}
.review-management-software .logo.golden {
font-size: 8px
}
.review-management-software .fl,
.review-management-software .outcomes,
.review-management-software .featureGrid,
.review-management-software .connectedGrid,
.review-management-software .useCases {
grid-template-columns: 1fr
}
.review-management-software .fi {
font-size: 14px
}
.review-management-software .outcome {
padding: 21px
}
.review-management-software .outcome strong {
margin-top: 12px
}
.review-management-software .outcome span {
font-size: 14px
}
.review-management-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.review-management-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.review-management-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.review-management-software .requestPath {
gap: 15px
}
.review-management-software .pathNode {
padding: 11px 8px
}
.review-management-software .pathNode>.icon {
right: -14px;
width: 12px
}
.review-management-software .pathNode strong {
font-size: 10px
}
.review-management-software .pathNode small {
font-size: 9px
}
.review-management-software .messageBody {
padding: 15px
}
.review-management-software .messageBody>strong {
font-size: 14px
}
.review-management-software .messageBody>p {
font-size: 12px
}
.review-management-software .messageTitle {
padding: 11px 12px;
font-size: 11px
}
.review-management-software .messageTitle small {
font-size: 8px
}
.review-management-software .sourceSummary {
gap: 10px
}
.review-management-software .sourceBox {
padding: 13px
}
.review-management-software .rvEntry {
padding: 14px 11px;
gap: 8px
}
.review-management-software .rvEntry .rvAvatar {
width: 27px;
height: 27px;
flex-basis: 27px;
font-size: 9px
}
.review-management-software .rvEntryTop {
align-items: flex-start
}
.review-management-software .rvEntry p {
font-size: 11px
}
.review-management-software .feedbackExcerpt {
padding: 14px
}
.review-management-software .replyDraft {
padding: 14px
}
.review-management-software .replyText {
padding: 12px;
font-size: 12px
}
.review-management-software .replyActions {
gap: 7px
}
.review-management-software .replyActions>small {
font-size: 8px;
max-width: 110px
}
.review-management-software .themePanel {
padding: 15px
}
.review-management-software .themeRow {
grid-template-columns: 98px minmax(0, 1fr) 18px;
gap: 8px
}
.review-management-software .themeHead {
align-items: flex-start
}
.review-management-software .themeHead strong {
font-size: 12px
}
.review-management-software .themeHead span {
font-size: 8px;
max-width: 70px;
text-align: right
}
.review-management-software .learningCard {
padding: 14px;
gap: 10px
}
.review-management-software .learningCard strong {
font-size: 12px
}
.review-management-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.review-management-software .aiMini div {
padding: 16px
}
.review-management-software .aiMini strong {
font-size: 14px
}
.review-management-software .aiMini span {
font-size: 13px
}
.review-management-software .promptBox {
padding: 18px;
border-radius: 17px
}
.review-management-software .prompt {
font-size: 13px;
padding: 13px
}
.review-management-software .promptHead {
font-size: 19px
}
.review-management-software .promptFoot {
font-size: 10px !important
}
.review-management-software .connectedCard {
padding: 22px
}
.review-management-software .connectedCard p,
.review-management-software .featureCard p,
.review-management-software .useCase p {
font-size: 14px
}
.review-management-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.review-management-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px
}
.review-management-software .ratingItem {
border: 0
}
.review-management-software .ratingLead {
margin-bottom: 3px
}
.review-management-software .review p {
font-size: 14px
}
.review-management-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.review-management-software .ctaBtns {
width: 100%
}
.review-management-software .ctaBtns .btn {
flex: 1
}
.review-management-software .cta p {
font-size: 14px
}
.review-management-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.review-management-software .final h2 {
font-size: 32px
}
.review-management-software .final p {
font-size: 15px
}
.review-management-software .final .ctaBtns {
flex-direction: column
}
.review-management-software .final .btn {
min-width: 0;
width: 100%
}
.review-management-software .faq details {
padding: 16px
}
.review-management-software .faq summary {
font-size: 14px
}
.review-management-software .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.review-management-software .assetStage {
grid-template-columns: minmax(0, 1fr) 141px;
gap: 10px 8px
}
.review-management-software .rvHeroStats {
gap: 6px;
padding: 10px
}
.review-management-software .rvHeroStats>div {
padding: 8px 7px
}
.review-management-software .rvHeroStats strong {
font-size: 20px
}
.review-management-software .rvHeroStats span {
font-size: 7px
}
.review-management-software .heroReview {
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 6px;
padding: 9px
}
.review-management-software .heroReview .rvAvatar {
width: 24px;
height: 24px;
font-size: 8px
}
.review-management-software .heroReview p {
font-size: 9px
}
.review-management-software .heroReview strong {
font-size: 9px
}
.review-management-software .heroReview .sourceTag {
font-size: 7px
}
.review-management-software .lifecycleHead {
font-size: 8px;
padding: 9px
}
.review-management-software .lifecycleHead .icon {
height: 14px;
width: 14px
}
.review-management-software .lifecycleBody {
padding: 10px
}
.review-management-software .lifecycleBody strong {
font-size: 12px
}
.review-management-software .lifecycleBody p {
font-size: 9px
}
.review-management-software .phoneBody>p {
font-size: 9px
}
.review-management-software .phoneHead strong {
font-size: 9px
}
.review-management-software .phoneFine {
font-size: 7px
}
.review-management-software .phoneBody .mockAction {
font-size: 9px
}
.review-management-software .sourceBox strong {
font-size: 24px
}
.review-management-software .sourceHead {
font-size: 11px
}
.review-management-software .sourceBox small {
font-size: 9px
}
.review-management-software .requestPath {
gap: 12px
}
.review-management-software .pathNode>.icon {
right: -12px;
width: 11px
}
.review-management-software .pathNode strong {
font-size: 9px
}
.review-management-software .pathNode small {
font-size: 8px
}
.review-management-software .themeRow {
grid-template-columns: 92px minmax(0, 1fr) 16px;
font-size: 9px
}
.review-management-software .themeHead span {
display: none
}
.review-management-software .replyActions>small {
max-width: 90px
}
.review-management-software .rvEntryTop>strong {
font-size: 10px
}
}  .price-book-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.price-book-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.price-book-software a:focus-visible,
.price-book-software summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.price-book-software .dark a:focus-visible,
.price-book-software .final a:focus-visible {
outline-color: var(--yellow)
}
.price-book-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.price-book-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.price-book-software .soft {
background: var(--sky2)
}
.price-book-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.price-book-software .dark h2,
.price-book-software .dark h3 {
color: #fff
}
.price-book-software .dark p {
color: #D6D6D6
}
.price-book-software .dark .ey {
background: var(--yellow)
}
.price-book-software .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.price-book-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.price-book-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.price-book-software .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.price-book-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.price-book-software .textLink .icon {
width: 16px;
height: 16px
}
.price-book-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.price-book-software .skipLink:focus {
top: 12px
} .price-book-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.price-book-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.price-book-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.price-book-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.price-book-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.price-book-software .logo.adobe {
font-size: 20px
}
.price-book-software .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .price-book-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.price-book-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.price-book-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.price-book-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.price-book-software .outcome:nth-child(3):before {
background: var(--green)
}
.price-book-software .outcome:nth-child(4):before {
background: var(--purple)
}
.price-book-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.price-book-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.price-book-software .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .price-book-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.price-book-software .feature.reverse .visual {
order: -1
}
.price-book-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.price-book-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.price-book-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.price-book-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.price-book-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.price-book-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.price-book-software .visual>* {
position: relative;
z-index: 2
}
.price-book-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.price-book-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.price-book-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.price-book-software .uiHeading .icon {
width: 19px;
height: 19px
}
.price-book-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.price-book-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.price-book-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
} .price-book-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.price-book-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.price-book-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.price-book-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.price-book-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.price-book-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.price-book-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.price-book-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.price-book-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.price-book-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .price-book-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.price-book-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.price-book-software .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.price-book-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.price-book-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.price-book-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.price-book-software .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
}
.price-book-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.price-book-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.price-book-software .featureCard:hover {
transform: translateY(-3px)
}
.price-book-software .featureIcon,
.price-book-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.price-book-software .featureIcon .icon,
.price-book-software .useIcon .icon {
width: 22px;
height: 22px
}
.price-book-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.price-book-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .price-book-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.price-book-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.price-book-software .useCase h3 {
font-size: 20px
}
.price-book-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.price-book-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.price-book-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.price-book-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.price-book-software .review h3 {
font-size: 22px
}
.price-book-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.price-book-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.price-book-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.price-book-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.price-book-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.price-book-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.price-book-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.price-book-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.price-book-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.price-book-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.price-book-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.price-book-software .cta h3 {
font-size: 19px
}
.price-book-software .cta.darkCta h3 {
color: #fff
}
.price-book-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.price-book-software .cta.darkCta p {
color: #D1D1D1
}
.price-book-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.price-book-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.price-book-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.price-book-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.price-book-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.price-book-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.price-book-software .reveal {
opacity: 1;
transform: none
}
#connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.price-book-software .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.price-book-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.price-book-software .heroGrid>*,
.price-book-software .feature>*,
.price-book-software .aiGrid>* {
min-width: 0
}
.price-book-software .hero h1 {
max-width: 580px
}
.price-book-software .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 16px
}
.price-book-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.price-book-software .heroVisual {
position: relative;
min-width: 0
}
.price-book-software .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 180px;
gap: 13px;
align-items: start;
max-width: 620px;
margin-left: auto
}
.price-book-software .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 30px 20px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .055) 1px, transparent 1px);
background-size: 26px 26px
}
.price-book-software .assetStage>* {
position: relative;
z-index: 1
}
.price-book-software .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #111;
border-radius: 9px;
font-size: 10px;
font-weight: 850;
padding: 6px 10px
}
.price-book-software .priceBoard {
grid-column: 1/-1;
background: #fff;
border: 1px solid #BCDCEA;
border-radius: 18px;
overflow: hidden
}
.price-book-software .boardHeader {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 15px 16px;
border-bottom: 1px solid var(--line)
}
.price-book-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.price-book-software .brandTile {
width: 28px;
height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--brand);
color: #fff
}
.price-book-software .brandTile .icon {
width: 18px;
height: 18px
}
.price-book-software .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.price-book-software .pbLayout {
display: grid;
grid-template-columns: 120px minmax(0, 1fr)
}
.price-book-software .pbSidebar {
padding: 15px 10px;
border-right: 1px solid var(--line);
background: #F8FCFE
}
.price-book-software .pbSidebar>strong {
display: block;
font-size: 10px;
color: var(--navy);
margin: 0 6px 10px
}
.price-book-software .pbNav {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 7px;
margin-bottom: 4px;
border-radius: 7px;
font-size: 9px;
line-height: 1.4;
color: var(--muted)
}
.price-book-software .pbNav.active {
background: #E1F4FD;
color: var(--navy);
font-weight: 800
}
.price-book-software .pbNav .icon {
width: 14px;
height: 14px
}
.price-book-software .pbMain {
padding: 14px;
min-width: 0
}
.price-book-software .pbTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 13px
}
.price-book-software .pbTop>strong {
font-size: 13px;
color: var(--navy)
}
.price-book-software .pbTop>span {
display: flex;
align-items: center;
gap: 4px;
font-size: 8px;
color: var(--muted)
}
.price-book-software .pbTop .icon {
width: 13px;
height: 13px
}
.price-book-software .pbRow {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 11px 0;
border-bottom: 1px solid #E7EEF3
}
.price-book-software .pbRow:last-child {
border-bottom: 0
}
.price-book-software .itemTile {
height: 36px;
width: 36px;
display: grid;
place-items: center;
background: #EAF8FF;
color: var(--navy);
border: 1px solid #CBE8F4;
border-radius: 9px
}
.price-book-software .itemTile.green {
background: var(--greenbg);
color: #116746;
border-color: #CDEADD
}
.price-book-software .itemTile.yellow {
background: #FFF7D6;
color: #83620C;
border-color: #F0DEA1
}
.price-book-software .itemTile .icon {
height: 22px;
width: 22px
}
.price-book-software .pbName strong {
display: block;
font-size: 11px;
line-height: 1.5
}
.price-book-software .pbName small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.4;
margin-top: 3px
}
.price-book-software .pbPrice {
text-align: right
}
.price-book-software .pbPrice b {
display: block;
font-size: 15px;
color: var(--navy);
line-height: 1.4
}
.price-book-software .pbPrice small {
font-size: 8px;
color: var(--muted);
display: block
}
.price-book-software .boardFooter {
padding: 11px 188px 11px 14px;
min-height: 47px;
border-top: 1px solid var(--line);
background: var(--sky2);
font-size: 9px;
line-height: 1.5;
color: #536F82;
display: flex;
gap: 7px;
align-items: center
}
.price-book-software .boardFooter .icon {
width: 14px;
height: 14px;
color: var(--green)
}
.price-book-software .priceContext {
grid-column: 1;
grid-row: 3;
background: #0E202D;
border: 1px solid #284352;
color: #fff;
border-radius: 14px;
overflow: hidden
}
.price-book-software .contextHead {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
font-weight: 800;
padding: 11px 13px;
border-bottom: 1px solid #294150
}
.price-book-software .contextHead .icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
.price-book-software .contextBody {
padding: 13px
}
.price-book-software .contextBody>strong {
font-size: 13px;
display: block;
line-height: 1.4
}
.price-book-software .contextFields {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 12px
}
.price-book-software .contextFields span {
font-size: 8px;
color: #BECFDB;
display: block;
line-height: 1.3
}
.price-book-software .contextFields b {
font-size: 15px;
color: #fff;
display: block;
margin-top: 5px;
line-height: 1.2
}
.price-book-software .contextFields div:last-child b {
font-size: 11px
}
.price-book-software .contextNote {
display: block;
font-size: 8px;
line-height: 1.6;
color: #BDCEDB;
margin-top: 12px
}
.price-book-software .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -45px;
z-index: 3;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 26px;
padding: 6px
}
.price-book-software .phoneScreen {
background: #fff;
border-radius: 20px;
overflow: hidden
}
.price-book-software .phoneTop {
height: 18px;
background: #0C1E2A;
display: grid;
place-items: center
}
.price-book-software .notch {
height: 4px;
width: 44px;
border-radius: 8px;
background: #566C79
}
.price-book-software .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.price-book-software .phoneHead strong {
font-size: 11px;
display: block
}
.price-book-software .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.price-book-software .phoneBody {
padding: 11px 10px
}
.price-book-software .phoneArt {
height: 58px;
border: 1px solid #CCE5F2;
border-radius: 8px;
background: #EFF9FF;
display: grid;
place-items: center;
color: #397B9C
}
.price-book-software .phoneArt .icon {
height: 40px;
width: 40px
}
.price-book-software .phoneBody>strong {
font-size: 11px;
line-height: 1.4;
display: block;
margin-top: 9px;
color: var(--navy)
}
.price-book-software .phoneBody>p {
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 5px
}
.price-book-software .phoneRate {
display: flex;
align-items: baseline;
gap: 5px;
margin: 10px 0
}
.price-book-software .phoneRate b {
font-size: 24px;
color: var(--navy);
line-height: 1.2;
letter-spacing: -.035em
}
.price-book-software .phoneRate small {
font-size: 8px;
color: var(--muted)
}
.price-book-software .mockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 7px;
background: var(--yellow);
color: #111;
border-radius: 7px;
text-align: center;
font-size: 9px;
font-weight: 800;
line-height: 1.4
}
.price-book-software .mockAction .icon {
width: 13px;
height: 13px
}
.price-book-software .phoneFine {
font-size: 7px;
color: var(--muted);
text-align: center;
margin-top: 7px
}
.price-book-software .diagramCaption {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
text-align: center;
margin: 12px 0 0
} .price-book-software .catalogBar {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 9px;
font-size: 11px;
color: var(--muted)
}
.price-book-software .catalogBar .icon {
width: 16px;
height: 16px;
color: var(--navy)
}
.price-book-software .categoryPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 12px 0
}
.price-book-software .categoryPills span {
font-size: 9px;
padding: 5px 9px;
border: 1px solid var(--line);
border-radius: 6px;
background: #fff;
color: var(--muted)
}
.price-book-software .categoryPills .active {
background: var(--navy);
color: #fff;
border-color: var(--navy)
}
.price-book-software .catalogCards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.price-book-software .catalogCard {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
overflow: hidden
}
.price-book-software .catalogArt {
height: 84px;
background: #EAF7FF;
display: grid;
place-items: center;
color: #387D9F;
border-bottom: 1px solid #DCECF4
}
.price-book-software .catalogArt .icon {
height: 52px;
width: 52px;
stroke-width: 1.2
}
.price-book-software .catalogCard:nth-child(2) .catalogArt {
background: #ECF8F2;
color: #3F886B
}
.price-book-software .catalogCard:nth-child(3) .catalogArt {
background: #FFF8DB;
color: #98762B
}
.price-book-software .catalogCard:nth-child(4) .catalogArt {
background: #F1EDFA;
color: #7862A0
}
.price-book-software .catalogCopy {
padding: 12px
}
.price-book-software .catalogCopy strong {
font-size: 12px;
display: block;
line-height: 1.35
}
.price-book-software .catalogCopy p {
font-size: 10px !important;
line-height: 1.6;
margin-top: 5px !important;
color: var(--muted)
}
.price-book-software .catalogRate {
display: flex;
align-items: baseline;
gap: 5px;
margin-top: 9px
}
.price-book-software .catalogRate b {
font-size: 20px;
color: var(--navy);
line-height: 1.2
}
.price-book-software .catalogRate small {
font-size: 9px;
color: var(--muted)
} .price-book-software .rateHeader {
background: #0D2637;
border: 1px solid #264759;
color: #fff;
border-radius: 12px;
padding: 17px;
display: flex;
align-items: center;
gap: 12px
}
.price-book-software .rateHeader .itemTile {
background: #1D4359;
color: #C2EDFF;
border-color: #355B70;
width: 44px;
height: 44px
}
.price-book-software .rateHeader strong {
font-size: 16px;
line-height: 1.3;
display: block
}
.price-book-software .rateHeader small {
display: block;
color: #BED7E5;
font-size: 10px;
margin-top: 4px
}
.price-book-software .rateEditor {
padding: 17px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 13px
}
.price-book-software .fieldRow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 14px
}
.price-book-software .rateField small {
display: block;
color: var(--muted);
font-size: 9px;
font-weight: 700;
margin-bottom: 5px
}
.price-book-software .rateField>span {
display: block;
background: #F8FCFE;
border: 1px solid #D5E5EE;
border-radius: 7px;
font-size: 12px;
padding: 10px 11px;
line-height: 1.4;
color: var(--ink);
font-weight: 700
}
.price-book-software .rateField.money>span {
font-size: 23px;
font-weight: 800;
letter-spacing: -.035em;
color: var(--navy);
line-height: 1.2
}
.price-book-software .rateFooter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 10px;
border-top: 1px solid #E6EEF3;
padding-top: 13px;
color: var(--muted)
}
.price-book-software .rateFooter strong {
font-size: 12px;
color: var(--navy)
}
.price-book-software .modeCards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 13px
}
.price-book-software .modeCard {
padding: 12px 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 9px;
text-align: center
}
.price-book-software .modeCard strong {
font-size: 11px;
display: block;
color: var(--navy)
}
.price-book-software .modeCard small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 4px;
line-height: 1.4
}
.price-book-software .modeCard:first-child {
border-top: 3px solid var(--yellow);
padding-top: 10px
} .price-book-software .importSheet {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden
}
.price-book-software .sheetTop {
display: flex;
align-items: center;
gap: 9px;
padding: 13px 14px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800;
color: var(--navy)
}
.price-book-software .sheetTop .icon {
width: 19px;
height: 19px
}
.price-book-software .sheetTop .pill {
margin-left: auto;
font-size: 8px
}
.price-book-software .sheetHead,
.price-book-software .sheetRow {
display: grid;
grid-template-columns: minmax(0, 1fr) 75px 66px;
gap: 9px;
padding: 10px 14px;
font-size: 10px;
align-items: center
}
.price-book-software .sheetHead {
font-size: 9px;
background: var(--sky2);
color: var(--muted);
font-weight: 750
}
.price-book-software .sheetRow {
border-top: 1px solid #E6EEF3
}
.price-book-software .sheetRow strong {
font-size: 11px;
color: var(--navy)
}
.price-book-software .sheetRow>span:last-child {
text-align: right;
color: var(--muted)
}
.price-book-software .updateHub {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--navy);
margin: 15px 0;
font-size: 11px;
font-weight: 800
}
.price-book-software .updateHub .icon {
height: 22px;
width: 22px
}
.price-book-software .devicePair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px
}
.price-book-software .deviceCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 15px
}
.price-book-software .deviceTop {
display: flex;
gap: 8px;
align-items: center;
font-size: 12px;
font-weight: 800;
color: var(--navy)
}
.price-book-software .deviceTop .icon {
width: 23px;
height: 23px
}
.price-book-software .deviceEntry {
padding: 12px 0 10px;
border-bottom: 1px solid #E3EDF3;
margin-bottom: 9px
}
.price-book-software .deviceEntry small {
display: block;
font-size: 9px;
color: var(--muted)
}
.price-book-software .deviceEntry strong {
display: block;
font-size: 13px;
color: var(--ink);
margin-top: 4px
}
.price-book-software .deviceEntry span {
font-size: 20px;
font-weight: 800;
color: var(--navy);
margin-top: 6px;
display: block
}
.price-book-software .deviceCard>.pill {
font-size: 8px
}
.price-book-software .infoFoot {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 13px;
color: #526C7D;
font-size: 10px;
line-height: 1.65
}
.price-book-software .infoFoot .icon {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 2px
} .price-book-software .templateStrip {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 14px;
background: #0D2637;
color: #fff;
border: 1px solid #294B5D;
border-radius: 11px;
margin-bottom: 12px
}
.price-book-software .templateStrip .icon {
width: 21px;
height: 21px;
color: var(--yellow)
}
.price-book-software .templateStrip strong {
display: block;
font-size: 12px
}
.price-book-software .templateStrip small {
display: block;
font-size: 9px;
color: #C1D8E5;
margin-top: 3px
}
.price-book-software .scopeList {
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
padding: 3px 13px
}
.price-book-software .scopeList>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 10px;
line-height: 1.5;
padding: 10px 0;
border-bottom: 1px solid #E6EEF3
}
.price-book-software .scopeList>div:last-child {
border-bottom: 0
}
.price-book-software .scopeList b {
font-size: 11px;
color: var(--navy)
}
.price-book-software .optionLabel {
font-size: 10px;
font-weight: 800;
color: var(--navy);
display: flex;
gap: 8px;
align-items: center;
margin: 16px 0 12px
}
.price-book-software .optionLabel .icon {
width: 16px;
height: 16px;
}
.price-book-software .icon {
margin: 0 !important;
background: transparent !important;
}
.price-book-software .optionGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
.price-book-software .optionCard {
padding: 13px 10px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
display: flex;
flex-direction: column;
min-width: 0
}
.price-book-software .optionCard.selected {
background: #FFFCF0;
border: 2px solid #E4BD43;
padding: 12px 9px
}
.price-book-software .optionCard>strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.price-book-software .optionCard>b {
display: block;
font-size: 24px;
letter-spacing: -.035em;
color: var(--navy);
line-height: 1.3;
margin-top: 10px
}
.price-book-software .optionCard>span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 7px
}
.price-book-software .optionCard>small {
display: block;
font-size: 8px;
line-height: 1.4;
text-align: center;
background: #F0F8FC;
border-radius: 5px;
padding: 6px 4px;
margin-top: 12px;
color: var(--navy);
font-weight: 700
}
.price-book-software .optionCard.selected>small {
background: var(--yellow);
color: #111
} @media(max-width:1100px) and (min-width:961px) {
.price-book-software .heroGrid {
gap: 28px
}
.price-book-software .hero .lead {
font-size: 17px
}
.price-book-software .assetStage {
grid-template-columns: minmax(0, 1fr) 163px;
gap: 11px
}
.price-book-software .pbLayout {
grid-template-columns: 99px minmax(0, 1fr)
}
.price-book-software .pbSidebar {
padding: 13px 7px
}
.price-book-software .pbNav {
font-size: 8px;
gap: 4px
}
.price-book-software .pbMain {
padding: 12px
}
.price-book-software .pbRow {
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 7px
}
.price-book-software .pbRow .itemTile {
width: 30px;
height: 30px
}
.price-book-software .pbName strong {
font-size: 10px
}
.price-book-software .pbName small {
font-size: 8px
}
.price-book-software .pbTop>strong {
font-size: 12px
}
.price-book-software .pbTop>span {
display: none
}
.price-book-software .boardFooter {
padding-right: 174px
}
.price-book-software .contextFields {
gap: 5px
}
.price-book-software .contextFields b {
font-size: 14px
}
.price-book-software .visual {
padding: 18px
}
.price-book-software .optionCard>b {
font-size: 21px
}
}
@media(max-width:960px) {
.price-book-software .heroGrid,
.price-book-software .feature,
.price-book-software .aiGrid,
.price-book-software .final {
grid-template-columns: 1fr
}
.price-book-software .heroGrid {
gap: 36px
}
.price-book-software .hero h1 {
max-width: 800px
}
.price-book-software .hero .lead {
max-width: 750px
}
.price-book-software .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.price-book-software .assetStage {
margin: auto
}
.price-book-software .feature.reverse .visual {
order: 0
}
.price-book-software .feature {
gap: 30px
}
.price-book-software .feature>div:first-child {
max-width: 800px
}
.price-book-software .outcomes,
.price-book-software .featureGrid,
.price-book-software .connectedGrid,
.price-book-software .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.price-book-software .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.price-book-software .reviews {
grid-template-columns: 1fr
}
.price-book-software .ratingGrid {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.price-book-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.price-book-software .ratingItem:nth-child(2) {
border: 0
}
.price-book-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.price-book-software .final .btn {
min-width: 195px
}
.price-book-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.price-book-software .aiGrid {
gap: 30px
}
.price-book-software .aiMini {
max-width: 760px
}
.price-book-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.price-book-software .wrap {
width: calc(100% - 24px)
}
.price-book-software section {
padding: 56px 0
}
.price-book-software .hero {
padding: 32px 0 42px
}
.price-book-software .lead {
font-size: 17px
}
.price-book-software .sectionHead p {
font-size: 16px
}
.price-book-software .sectionHead {
margin-bottom: 28px
}
.price-book-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.price-book-software .heroGrid {
gap: 26px
}
.price-book-software .hero .actions {
gap: 8px
}
.price-book-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.price-book-software .micro {
font-size: 11px
}
.price-book-software .heroPills {
gap: 6px
}
.price-book-software .heroPills span {
font-size: 9px
}
.price-book-software .assetStage {
grid-template-columns: minmax(0, 1fr) 159px;
gap: 11px 9px
}
.price-book-software .assetTag {
font-size: 9px
}
.price-book-software .boardHeader {
padding: 12px
}
.price-book-software .boardBrand {
font-size: 12px
}
.price-book-software .sampleBadge {
font-size: 7px
}
.price-book-software .pbLayout {
grid-template-columns: 93px minmax(0, 1fr)
}
.price-book-software .pbSidebar {
padding: 12px 6px
}
.price-book-software .pbNav {
font-size: 8px;
padding: 8px 5px;
gap: 4px
}
.price-book-software .pbNav .icon {
height: 12px;
width: 12px
}
.price-book-software .pbMain {
padding: 12px
}
.price-book-software .pbRow {
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 7px;
padding: 10px 0
}
.price-book-software .pbRow .itemTile {
width: 30px;
height: 30px
}
.price-book-software .pbRow .icon {
width: 18px;
height: 18px
}
.price-book-software .pbName strong {
font-size: 10px
}
.price-book-software .pbName small {
font-size: 8px
}
.price-book-software .pbPrice b {
font-size: 13px
}
.price-book-software .pbPrice small {
font-size: 7px
}
.price-book-software .pbTop>strong {
font-size: 12px
}
.price-book-software .pbTop>span {
display: none
}
.price-book-software .boardFooter {
padding: 10px 167px 10px 12px;
font-size: 8px;
min-height: 48px
}
.price-book-software .assetPhone {
margin-top: -38px;
border-radius: 23px;
padding: 5px
}
.price-book-software .phoneScreen {
border-radius: 18px
}
.price-book-software .phoneHead {
padding: 10px 9px
}
.price-book-software .phoneHead strong {
font-size: 10px
}
.price-book-software .phoneHead small {
font-size: 7px
}
.price-book-software .phoneBody {
padding: 10px 9px
}
.price-book-software .phoneArt {
height: 50px
}
.price-book-software .phoneArt .icon {
width: 34px;
height: 34px
}
.price-book-software .phoneBody>strong {
font-size: 10px
}
.price-book-software .phoneBody>p {
font-size: 8px
}
.price-book-software .phoneRate b {
font-size: 22px
}
.price-book-software .phoneRate small {
font-size: 7px
}
.price-book-software .mockAction {
font-size: 8px;
padding: 8px 5px
}
.price-book-software .contextHead {
padding: 10px;
gap: 6px;
font-size: 9px
}
.price-book-software .contextHead .icon {
width: 14px;
height: 14px
}
.price-book-software .contextBody {
padding: 11px
}
.price-book-software .contextBody>strong {
font-size: 11px
}
.price-book-software .contextFields {
grid-template-columns: 1fr 1fr;
gap: 10px
}
.price-book-software .contextFields>div:last-child {
grid-column: 1/-1
}
.price-book-software .contextFields b {
font-size: 15px
}
.price-book-software .contextFields>div:last-child {
display: flex;
align-items: center;
gap: 8px
}
.price-book-software .contextFields>div:last-child b {
font-size: 9px;
margin: 0
}
.price-book-software .contextNote {
font-size: 7px
}
.price-book-software .diagramCaption {
font-size: 9px
}
.price-book-software .trust {
padding: 23px 0
}
.price-book-software .trustLabel {
font-size: 12px
}
.price-book-software .logos {
gap: 7px
}
.price-book-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.price-book-software .logo.dhl {
font-size: 19px
}
.price-book-software .logo.adobe {
font-size: 17px
}
.price-book-software .logo.golden {
font-size: 8px
}
.price-book-software .fl,
.price-book-software .outcomes,
.price-book-software .featureGrid,
.price-book-software .connectedGrid,
.price-book-software .useCases {
grid-template-columns: 1fr
}
.price-book-software .fi {
font-size: 14px
}
.price-book-software .outcome {
padding: 21px
}
.price-book-software .outcome strong {
margin-top: 12px
}
.price-book-software .outcome span {
font-size: 14px
}
.price-book-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.price-book-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.price-book-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.price-book-software .uiSub {
font-size: 9px
}
.price-book-software .catalogCards {
gap: 10px
}
.price-book-software .catalogArt {
height: 74px
}
.price-book-software .catalogArt .icon {
width: 46px;
height: 46px
}
.price-book-software .catalogCopy {
padding: 11px
}
.price-book-software .catalogCopy strong {
font-size: 11px
}
.price-book-software .catalogCopy p {
font-size: 9px !important
}
.price-book-software .catalogRate b {
font-size: 18px
}
.price-book-software .rateHeader {
padding: 14px
}
.price-book-software .rateHeader strong {
font-size: 14px
}
.price-book-software .rateEditor {
padding: 14px
}
.price-book-software .fieldRow {
gap: 10px
}
.price-book-software .rateField>span {
font-size: 11px;
padding: 9px
}
.price-book-software .rateField.money>span {
font-size: 22px
}
.price-book-software .modeCard {
padding: 10px 7px
}
.price-book-software .modeCard strong {
font-size: 10px
}
.price-book-software .modeCard small {
font-size: 8px
}
.price-book-software .sheetHead,
.price-book-software .sheetRow {
padding: 10px 12px;
grid-template-columns: minmax(0, 1fr) 65px 58px;
gap: 6px
}
.price-book-software .sheetRow {
font-size: 9px
}
.price-book-software .sheetRow strong {
font-size: 10px
}
.price-book-software .devicePair {
gap: 10px
}
.price-book-software .deviceCard {
padding: 13px 11px
}
.price-book-software .deviceTop {
font-size: 11px;
gap: 6px
}
.price-book-software .deviceEntry strong {
font-size: 11px
}
.price-book-software .deviceCard>.pill {
font-size: 7px
}
.price-book-software .optionGrid {
gap: 8px
}
.price-book-software .optionCard {
padding: 11px 8px
}
.price-book-software .optionCard.selected {
padding: 10px 7px
}
.price-book-software .optionCard>b {
font-size: 23px
}
.price-book-software .optionCard>span {
font-size: 9px
}
.price-book-software .optionCard>small {
font-size: 7px
}
.price-book-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.price-book-software .aiMini div {
padding: 16px
}
.price-book-software .aiMini strong {
font-size: 14px
}
.price-book-software .aiMini span {
font-size: 13px
}
.price-book-software .promptBox {
padding: 18px;
border-radius: 17px
}
.price-book-software .prompt {
font-size: 13px;
padding: 13px
}
.price-book-software .promptHead {
font-size: 19px
}
.price-book-software .promptFoot {
font-size: 10px !important
}
.price-book-software .connectedCard {
padding: 22px
}
.price-book-software .connectedCard p,
.price-book-software .featureCard p,
.price-book-software .useCase p {
font-size: 14px
}
.price-book-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.price-book-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px
}
.price-book-software .ratingItem {
border: 0
}
.price-book-software .ratingLead {
margin-bottom: 3px
}
.price-book-software .review p {
font-size: 14px
}
.price-book-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.price-book-software .ctaBtns {
width: 100%
}
.price-book-software .ctaBtns .btn {
flex: 1
}
.price-book-software .cta p {
font-size: 14px
}
.price-book-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.price-book-software .final h2 {
font-size: 32px
}
.price-book-software .final p {
font-size: 15px
}
.price-book-software .final .ctaBtns {
flex-direction: column
}
.price-book-software .final .btn {
min-width: 0;
width: 100%
}
.price-book-software .faq details {
padding: 16px
}
.price-book-software .faq summary {
font-size: 14px
}
.price-book-software .faq details p {
font-size: 14px
}
}
@media(max-width:420px) {
.price-book-software .pbSidebar {
display: none
}
.price-book-software .pbLayout {
grid-template-columns: 1fr
}
.price-book-software .pbMain {
padding: 13px 15px
}
.price-book-software .pbTop>strong {
font-size: 13px
}
.price-book-software .pbRow {
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 10px
}
.price-book-software .pbRow .itemTile {
width: 36px;
height: 36px
}
.price-book-software .pbRow .icon {
width: 22px;
height: 22px;
}
.price-book-software .pbName strong {
font-size: 11px
}
.price-book-software .pbName small {
font-size: 9px
}
.price-book-software .pbPrice b {
font-size: 15px
}
.price-book-software .pbPrice small {
font-size: 8px
}
.price-book-software .optionGrid {
grid-template-columns: 1fr
}
.price-book-software .optionCard,
.price-book-software .optionCard.selected {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 12px;
padding: 13px 14px
}
.price-book-software .optionCard>b {
grid-column: 2;
grid-row: 1/3;
font-size: 25px;
align-self: center;
margin: 0
}
.price-book-software .optionCard>span {
grid-column: 1;
grid-row: 2;
margin: 0;
font-size: 10px
}
.price-book-software .optionCard>small {
grid-column: 1/-1;
margin-top: 7px;
font-size: 9px
}
.price-book-software .optionCard>strong {
font-size: 13px
}
}
@media(max-width:360px) {
.price-book-software .assetStage {
grid-template-columns: minmax(0, 1fr) 145px;
gap: 10px 8px
}
.price-book-software .boardFooter {
padding-right: 152px;
font-size: 7px
}
.price-book-software .contextHead {
font-size: 8px;
padding: 9px;
gap: 5px
}
.price-book-software .contextBody {
padding: 10px
}
.price-book-software .contextBody>strong {
font-size: 10px
}
.price-book-software .contextFields {
gap: 8px
}
.price-book-software .contextFields b {
font-size: 14px
}
.price-book-software .phoneHead strong {
font-size: 9px
}
.price-book-software .phoneBody>strong {
font-size: 9px
}
.price-book-software .phoneBody>p {
font-size: 8px
}
.price-book-software .phoneRate b {
font-size: 21px
}
.price-book-software .catalogCopy {
padding: 10px
}
.price-book-software .catalogCopy strong {
font-size: 10px
}
.price-book-software .catalogRate small {
font-size: 8px
}
.price-book-software .rateFooter {
align-items: flex-start;
font-size: 9px
}
.price-book-software .rateFooter strong {
font-size: 11px
}
}  .mailchimp-integration-for-field-service-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.mailchimp-integration-for-field-service-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.mailchimp-integration-for-field-service-software .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.mailchimp-integration-for-field-service-software .btn:hover {
transform: translateY(-2px)
}
.mailchimp-integration-for-field-service-software .btn.black {
background: #0b0b0b;
color: #fff
}
.mailchimp-integration-for-field-service-software .btn.black:hover {
background: #292929
}
.mailchimp-integration-for-field-service-software .btn.yellow {
background: var(--yellow);
color: #000
}
.mailchimp-integration-for-field-service-software .btn.yellow:hover {
background: #FFD454
}
.mailchimp-integration-for-field-service-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .btn .icon {
width: 17px;
height: 17px
}
.mailchimp-integration-for-field-service-software a:focus-visible,
.mailchimp-integration-for-field-service-software summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.mailchimp-integration-for-field-service-software .dark a:focus-visible,
.mailchimp-integration-for-field-service-software .final a:focus-visible {
outline-color: var(--yellow)
}
.mailchimp-integration-for-field-service-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.mailchimp-integration-for-field-service-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.mailchimp-integration-for-field-service-software .soft {
background: var(--sky2)
}
.mailchimp-integration-for-field-service-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.mailchimp-integration-for-field-service-software .dark h2,
.mailchimp-integration-for-field-service-software .dark h3 {
color: #fff
}
.mailchimp-integration-for-field-service-software .dark p {
color: #D6D6D6
}
.mailchimp-integration-for-field-service-software .dark .ey {
background: var(--yellow)
}
.mailchimp-integration-for-field-service-software .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.mailchimp-integration-for-field-service-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.mailchimp-integration-for-field-service-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.mailchimp-integration-for-field-service-software .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.mailchimp-integration-for-field-service-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.mailchimp-integration-for-field-service-software .textLink .icon {
width: 16px;
height: 16px
}
.mailchimp-integration-for-field-service-software .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.mailchimp-integration-for-field-service-software .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.mailchimp-integration-for-field-service-software .skipLink:focus {
top: 12px
}
.mailchimp-integration-for-field-service-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.mailchimp-integration-for-field-service-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.mailchimp-integration-for-field-service-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.mailchimp-integration-for-field-service-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.mailchimp-integration-for-field-service-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.mailchimp-integration-for-field-service-software .logo.adobe {
font-size: 20px
}
.mailchimp-integration-for-field-service-software .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.mailchimp-integration-for-field-service-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.mailchimp-integration-for-field-service-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.mailchimp-integration-for-field-service-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.mailchimp-integration-for-field-service-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.mailchimp-integration-for-field-service-software .outcome:nth-child(3):before {
background: var(--green)
}
.mailchimp-integration-for-field-service-software .outcome:nth-child(4):before {
background: var(--purple)
}
.mailchimp-integration-for-field-service-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.mailchimp-integration-for-field-service-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.mailchimp-integration-for-field-service-software .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
}
.mailchimp-integration-for-field-service-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.mailchimp-integration-for-field-service-software .feature.reverse .visual {
order: -1
}
.mailchimp-integration-for-field-service-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.mailchimp-integration-for-field-service-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.mailchimp-integration-for-field-service-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.mailchimp-integration-for-field-service-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.mailchimp-integration-for-field-service-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.mailchimp-integration-for-field-service-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.mailchimp-integration-for-field-service-software .visual>* {
position: relative;
z-index: 2
}
.mailchimp-integration-for-field-service-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.mailchimp-integration-for-field-service-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.mailchimp-integration-for-field-service-software .uiHeading .icon {
width: 19px;
height: 19px
}
.mailchimp-integration-for-field-service-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.mailchimp-integration-for-field-service-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.mailchimp-integration-for-field-service-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.mailchimp-integration-for-field-service-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.mailchimp-integration-for-field-service-software .pill.green {
background: var(--greenbg);
color: #116746
}
.mailchimp-integration-for-field-service-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.mailchimp-integration-for-field-service-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.mailchimp-integration-for-field-service-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.mailchimp-integration-for-field-service-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.mailchimp-integration-for-field-service-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.mailchimp-integration-for-field-service-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.mailchimp-integration-for-field-service-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.mailchimp-integration-for-field-service-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.mailchimp-integration-for-field-service-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.mailchimp-integration-for-field-service-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.mailchimp-integration-for-field-service-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.mailchimp-integration-for-field-service-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.mailchimp-integration-for-field-service-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.mailchimp-integration-for-field-service-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.mailchimp-integration-for-field-service-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.mailchimp-integration-for-field-service-software .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.mailchimp-integration-for-field-service-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.mailchimp-integration-for-field-service-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.mailchimp-integration-for-field-service-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.mailchimp-integration-for-field-service-software .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
}
.mailchimp-integration-for-field-service-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.mailchimp-integration-for-field-service-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.mailchimp-integration-for-field-service-software .featureCard:hover {
transform: translateY(-3px)
}
.mailchimp-integration-for-field-service-software .featureIcon,
.mailchimp-integration-for-field-service-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.mailchimp-integration-for-field-service-software .featureIcon .icon,
.mailchimp-integration-for-field-service-software .useIcon .icon {
width: 22px;
height: 22px
}
.mailchimp-integration-for-field-service-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.mailchimp-integration-for-field-service-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.mailchimp-integration-for-field-service-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.mailchimp-integration-for-field-service-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.mailchimp-integration-for-field-service-software .useCase h3 {
font-size: 20px
}
.mailchimp-integration-for-field-service-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.mailchimp-integration-for-field-service-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.mailchimp-integration-for-field-service-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.mailchimp-integration-for-field-service-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.mailchimp-integration-for-field-service-software .review h3 {
font-size: 22px
}
.mailchimp-integration-for-field-service-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.mailchimp-integration-for-field-service-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.mailchimp-integration-for-field-service-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.mailchimp-integration-for-field-service-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.mailchimp-integration-for-field-service-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.mailchimp-integration-for-field-service-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.mailchimp-integration-for-field-service-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.mailchimp-integration-for-field-service-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.mailchimp-integration-for-field-service-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.mailchimp-integration-for-field-service-software .faq {
max-width: 900px
}
.mailchimp-integration-for-field-service-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.mailchimp-integration-for-field-service-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.mailchimp-integration-for-field-service-software .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.mailchimp-integration-for-field-service-software .faq summary::marker {
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .faq details[open] {
border-color: #A9D3E7
}
.mailchimp-integration-for-field-service-software .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.mailchimp-integration-for-field-service-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.mailchimp-integration-for-field-service-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.mailchimp-integration-for-field-service-software .cta h3 {
font-size: 19px
}
.mailchimp-integration-for-field-service-software .cta.darkCta h3 {
color: #fff
}
.mailchimp-integration-for-field-service-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.mailchimp-integration-for-field-service-software .cta.darkCta p {
color: #D1D1D1
}
.mailchimp-integration-for-field-service-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.mailchimp-integration-for-field-service-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.mailchimp-integration-for-field-service-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.mailchimp-integration-for-field-service-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.mailchimp-integration-for-field-service-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.mailchimp-integration-for-field-service-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.mailchimp-integration-for-field-service-software .reveal {
opacity: 1;
transform: none
}
.mailchimp-integration-for-field-service-software  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools *,
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools *::before,
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__step::before,
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools {
padding: 52px 0;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card,
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools h2 {
font-size: 30px;
}
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.mailchimp-integration-for-field-service-software #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.mailchimp-integration-for-field-service-software  .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.mailchimp-integration-for-field-service-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.mailchimp-integration-for-field-service-software .heroGrid>*,
.mailchimp-integration-for-field-service-software .feature>*,
.mailchimp-integration-for-field-service-software .aiGrid>* {
min-width: 0
}
.mailchimp-integration-for-field-service-software .hero h1 {
max-width: 590px
}
.mailchimp-integration-for-field-service-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.mailchimp-integration-for-field-service-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.mailchimp-integration-for-field-service-software .heroVisual {
position: relative;
min-width: 0
}
.mailchimp-integration-for-field-service-software .assetStage {
height: 595px;
position: relative;
max-width: 620px;
margin-left: auto
}
.mailchimp-integration-for-field-service-software .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 30px 28px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px
}
.mailchimp-integration-for-field-service-software .assetTag {
position: absolute;
left: 17px;
top: 8px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.mailchimp-integration-for-field-service-software .marketingBoard {
position: absolute;
top: 46px;
left: 0;
width: 92%;
background: #fff;
border: 1px solid #C4DDE9;
border-radius: 18px;
overflow: hidden
}
.mailchimp-integration-for-field-service-software .boardHeader {
padding: 16px;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
border-bottom: 1px solid var(--line)
}
.mailchimp-integration-for-field-service-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.mailchimp-integration-for-field-service-software .brandTile {
width: 28px;
height: 28px;
display: grid;
place-items: center;
background: var(--brand);
color: #fff;
border-radius: 8px
}
.mailchimp-integration-for-field-service-software .brandTile .icon {
width: 17px;
height: 17px
}
.mailchimp-integration-for-field-service-software .sampleBadge {
font-size: 8px;
font-weight: 700;
color: #526776;
border: 1px solid var(--line);
background: var(--sky2);
padding: 4px 6px;
border-radius: 5px;
white-space: nowrap
}
.mailchimp-integration-for-field-service-software .boardBody {
padding: 18px
}
.mailchimp-integration-for-field-service-software .brandBridge {
display: grid;
grid-template-columns: 1fr 26px 1fr;
gap: 14px;
align-items: center;
padding: 2px 0 18px;
border-bottom: 1px solid var(--line)
}
.mailchimp-integration-for-field-service-software .brandBridge>div {
display: flex;
align-items: center;
gap: 10px;
min-width: 0
}
.mailchimp-integration-for-field-service-software .brandBridge strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .brandBridge small {
display: block;
font-size: 9px;
color: var(--muted);
font-weight: 400;
margin-top: 4px
}
.mailchimp-integration-for-field-service-software .brandBridge>.icon {
width: 23px;
height: 23px;
color: #78A4B9
}
.mailchimp-integration-for-field-service-software .appTile {
width: 37px;
height: 37px;
flex: 0 0 37px;
display: grid;
place-items: center;
border-radius: 11px;
font-weight: 900;
font-size: 19px
}
.mailchimp-integration-for-field-service-software .appTile.blue {
background: var(--sky);
color: #007FC5
}
.mailchimp-integration-for-field-service-software .appTile.yellow {
background: var(--yellow);
color: #171717
}
.mailchimp-integration-for-field-service-software .audienceHeading {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
padding: 15px 0 10px
}
.mailchimp-integration-for-field-service-software .audienceHeading strong {
font-size: 12px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .audienceHeading>span {
font-size: 9px;
color: var(--muted)
}
.mailchimp-integration-for-field-service-software .heroAudience {
display: grid;
gap: 8px
}
.mailchimp-integration-for-field-service-software .heroAudience>div {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 8px;
padding: 9px;
border: 1px solid var(--line);
border-radius: 9px
}
.mailchimp-integration-for-field-service-software .heroAudience b {
font-size: 11px;
line-height: 1.3;
display: block
}
.mailchimp-integration-for-field-service-software .heroAudience small {
font-size: 9px;
line-height: 1.4;
display: block;
color: var(--muted);
margin-top: 3px
}
.mailchimp-integration-for-field-service-software .miniAvatar {
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--sky);
color: var(--navy);
font-size: 9px;
font-weight: 850
}
.mailchimp-integration-for-field-service-software .miniAvatar.green {
background: var(--greenbg);
color: #126044
}
.mailchimp-integration-for-field-service-software .tagChip {
font-size: 8px;
line-height: 1.4;
background: var(--yellowsoft);
color: #705713;
border: 1px solid #EEDB9B;
border-radius: 5px;
padding: 5px 6px
}
.mailchimp-integration-for-field-service-software .tagChip.pale {
background: var(--sky2);
color: var(--navy);
border-color: var(--line)
}
.mailchimp-integration-for-field-service-software .heroDraft {
margin-top: 13px;
padding: 10px 163px 10px 0;
display: flex;
gap: 8px;
align-items: center;
min-height: 48px
}
.mailchimp-integration-for-field-service-software .heroDraft strong {
font-size: 10px;
display: block;
line-height: 1.5
}
.mailchimp-integration-for-field-service-software .heroDraft small {
font-size: 9px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
.mailchimp-integration-for-field-service-software .tinyIcon {
width: 27px;
height: 27px;
flex: 0 0 27px;
border: 1px solid var(--line);
border-radius: 7px;
display: grid;
place-items: center;
color: var(--navy);
background: var(--sky2)
}
.mailchimp-integration-for-field-service-software .tinyIcon .icon {
width: 15px;
height: 15px
}
.mailchimp-integration-for-field-service-software .boardFooter {
padding: 10px 181px 10px 15px;
background: var(--sky2);
color: #536D7E;
font-size: 9px;
border-top: 1px solid var(--line);
display: flex;
gap: 7px;
align-items: center;
line-height: 1.5;
min-height: 42px
}
.mailchimp-integration-for-field-service-software .boardFooter .icon {
width: 14px;
height: 14px;
color: var(--green)
}
.mailchimp-integration-for-field-service-software .lifecycleCard {
position: absolute;
left: 12px;
top: 460px;
width: calc(100% - 218px);
z-index: 5;
padding: 14px;
display: flex;
gap: 10px;
background: #0D202D;
color: #fff;
border: 1px solid #304553;
border-radius: 15px;
align-items: flex-start
}
.mailchimp-integration-for-field-service-software .contextIcon {
display: grid;
place-items: center;
background: #203A49;
color: var(--yellow);
width: 29px;
height: 29px;
flex: 0 0 29px;
border-radius: 8px
}
.mailchimp-integration-for-field-service-software .contextIcon .icon {
width: 17px;
height: 17px
}
.mailchimp-integration-for-field-service-software .lifecycleCard strong {
font-size: 12px;
line-height: 1.45;
display: block
}
.mailchimp-integration-for-field-service-software .lifecycleCard span {
display: block;
font-size: 10px;
color: #CDDCE5;
line-height: 1.6;
margin-top: 4px
}
.mailchimp-integration-for-field-service-software .assetPhone {
position: absolute;
right: 0;
top: 262px;
z-index: 6;
width: 182px;
border: 1px solid #304858;
border-radius: 27px;
background: #0C1E2A;
padding: 6px
}
.mailchimp-integration-for-field-service-software .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.mailchimp-integration-for-field-service-software .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.mailchimp-integration-for-field-service-software .notch {
width: 44px;
height: 4px;
background: #516877;
border-radius: 9px
}
.mailchimp-integration-for-field-service-software .phoneHead {
padding: 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.mailchimp-integration-for-field-service-software .phoneHead strong {
font-size: 11px;
display: block
}
.mailchimp-integration-for-field-service-software .phoneHead small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 3px
}
.mailchimp-integration-for-field-service-software .phoneBody {
padding: 11px
}
.mailchimp-integration-for-field-service-software .emailMast {
font-size: 7px;
font-weight: 850;
letter-spacing: .035em;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .emailImage {
padding: 12px 9px;
display: flex;
gap: 9px;
align-items: center;
background: var(--sky);
border: 1px solid #D0EAF6;
border-radius: 8px;
margin: 10px 0
}
.mailchimp-integration-for-field-service-software .emailImage .icon {
width: 30px;
height: 30px;
color: #0875A2
}
.mailchimp-integration-for-field-service-software .emailImage span {
font-size: 9px;
line-height: 1.5;
color: var(--navy);
font-weight: 700
}
.mailchimp-integration-for-field-service-software .phoneBody>strong {
display: block;
font-size: 12px;
line-height: 1.4;
color: var(--ink)
}
.mailchimp-integration-for-field-service-software .phoneBody>p {
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin: 7px 0 10px
}
.mailchimp-integration-for-field-service-software .mockAction {
display: block;
background: var(--yellow);
color: #101010;
padding: 9px 10px;
border-radius: 7px;
text-align: center;
font-size: 10px;
font-weight: 800;
line-height: 1.4
}
.mailchimp-integration-for-field-service-software .emailFooter {
display: block;
font-size: 7px;
color: var(--muted);
text-align: center;
margin-top: 10px;
line-height: 1.5
}
.mailchimp-integration-for-field-service-software .diagramCaption {
font-size: 10px;
line-height: 1.6;
text-align: center;
color: var(--muted);
margin-top: 14px
}
.mailchimp-integration-for-field-service-software .syncPair {
display: grid;
grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
gap: 10px;
align-items: center
}
.mailchimp-integration-for-field-service-software .syncPanel {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
overflow: hidden;
min-width: 0
}
.mailchimp-integration-for-field-service-software .syncPanelHead {
display: flex;
gap: 9px;
align-items: center;
padding: 13px;
background: #F6FBFE;
border-bottom: 1px solid var(--line)
}
.mailchimp-integration-for-field-service-software .syncPanelHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.mailchimp-integration-for-field-service-software .syncPanelHead small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.mailchimp-integration-for-field-service-software .syncPanelHead .appTile {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 17px;
border-radius: 9px
}
.mailchimp-integration-for-field-service-software .contactExample {
padding: 15px 13px;
border-bottom: 1px solid #E5EFF4
}
.mailchimp-integration-for-field-service-software .contactExample:last-child {
border: 0
}
.mailchimp-integration-for-field-service-software .contactExample>b {
display: block;
font-size: 12px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .contactExample>small {
display: block;
font-size: 10px;
color: var(--muted);
margin: 4px 0 10px;
overflow-wrap: anywhere
}
.mailchimp-integration-for-field-service-software .tags {
display: flex;
gap: 5px;
flex-wrap: wrap
}
.mailchimp-integration-for-field-service-software .tags>span {
font-size: 8px;
line-height: 1.5;
padding: 4px 6px;
background: var(--yellowsoft);
color: #6A5515;
border: 1px solid #EEDB9B;
border-radius: 5px
}
.mailchimp-integration-for-field-service-software .tags>span:nth-child(2) {
background: var(--sky);
border-color: #D0E6F0;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .syncConnector {
color: #6E9BB0;
display: grid;
place-items: center
}
.mailchimp-integration-for-field-service-software .syncConnector .icon {
width: 22px;
height: 22px
}
.mailchimp-integration-for-field-service-software .infoFoot {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 15px;
font-size: 11px;
line-height: 1.6;
color: #557386
}
.mailchimp-integration-for-field-service-software .infoFoot .icon {
height: 17px;
width: 17px;
color: var(--green);
margin-top: 1px
}
.mailchimp-integration-for-field-service-software .campaignScene {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: 14px;
align-items: stretch
}
.mailchimp-integration-for-field-service-software .segmentPanel {
background: #F8FCFE;
border: 1px solid var(--line);
border-radius: 13px;
padding: 15px;
min-width: 0
}
.mailchimp-integration-for-field-service-software .segmentPanel>strong {
display: block;
font-size: 16px;
line-height: 1.3;
color: var(--navy);
margin-top: 8px
}
.mailchimp-integration-for-field-service-software .segmentRule {
display: flex;
gap: 7px;
padding: 11px 0;
align-items: flex-start;
border-bottom: 1px solid var(--line);
font-size: 10px;
color: var(--muted);
line-height: 1.6
}
.mailchimp-integration-for-field-service-software .segmentRule .icon {
width: 16px;
height: 16px;
color: var(--navy);
margin-top: 1px
}
.mailchimp-integration-for-field-service-software .segmentRule b {
display: block;
font-size: 11px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .segmentCount {
margin-top: 16px;
display: flex;
gap: 11px;
align-items: center
}
.mailchimp-integration-for-field-service-software .segmentCount strong {
font-size: 31px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -.04em
}
.mailchimp-integration-for-field-service-software .segmentCount>span {
font-size: 9px;
color: var(--muted);
line-height: 1.6
}
.mailchimp-integration-for-field-service-software .segmentPanel>small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 14px
}
.mailchimp-integration-for-field-service-software .emailSheet {
border: 1px solid #C4DFEC;
border-radius: 13px;
overflow: hidden;
background: #fff;
min-width: 0
}
.mailchimp-integration-for-field-service-software .emailSheetTop {
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background: #F5FBFF;
border-bottom: 1px solid var(--line);
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .emailSheetTop .icon {
height: 17px;
width: 17px
}
.mailchimp-integration-for-field-service-software .emailSheetBody {
padding: 15px
}
.mailchimp-integration-for-field-service-software .emailSheetBody>small {
font-size: 8px;
letter-spacing: .05em;
color: var(--muted);
display: block
}
.mailchimp-integration-for-field-service-software .emailSheetBody>strong {
font-size: 14px;
line-height: 1.4;
display: block;
color: var(--navy);
margin-top: 5px
}
.mailchimp-integration-for-field-service-software .emailBanner {
display: flex;
gap: 11px;
align-items: center;
background: var(--sky);
border: 1px solid #CAE7F4;
border-radius: 9px;
padding: 15px 12px;
margin-top: 12px
}
.mailchimp-integration-for-field-service-software .emailBanner .icon {
width: 31px;
height: 31px;
color: #197BA3
}
.mailchimp-integration-for-field-service-software .emailBanner>span {
font-size: 11px;
font-weight: 700;
color: var(--navy);
line-height: 1.5
}
.mailchimp-integration-for-field-service-software .emailSheetBody>p {
font-size: 11px;
line-height: 1.7;
color: var(--muted);
margin: 12px 0
}
.mailchimp-integration-for-field-service-software .emailFine {
display: block;
font-size: 8px;
text-align: center;
color: var(--muted);
margin-top: 10px;
line-height: 1.5
}
.mailchimp-integration-for-field-service-software .reviewStrip {
padding: 12px;
margin-top: 14px;
display: flex;
gap: 9px;
align-items: flex-start;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 10px;
color: #547080;
line-height: 1.6
}
.mailchimp-integration-for-field-service-software .reviewStrip .icon {
height: 17px;
width: 17px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .automationLabel {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 14px
}
.mailchimp-integration-for-field-service-software .automationLabel>strong {
font-size: 12px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .flowStack {
display: grid;
gap: 22px
}
.mailchimp-integration-for-field-service-software .flowNode {
position: relative;
display: grid;
grid-template-columns: 31px minmax(0, 1fr) 22px;
gap: 11px;
align-items: center;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
padding: 16px
}
.mailchimp-integration-for-field-service-software .flowNode:not(:last-child):after {
content: "";
position: absolute;
left: 31px;
bottom: -20px;
width: 7px;
height: 7px;
border-right: 1.5px solid #7DA8BD;
border-bottom: 1.5px solid #7DA8BD;
transform: rotate(45deg)
}
.mailchimp-integration-for-field-service-software .flowNode:not(:last-child):before {
content: "";
position: absolute;
bottom: -20px;
left: 34px;
height: 19px;
border-left: 1.5px solid #7DA8BD
}
.mailchimp-integration-for-field-service-software .flowNum {
display: grid;
place-items: center;
border-radius: 9px;
background: var(--sky);
color: var(--navy);
font-size: 10px;
font-weight: 850;
width: 31px;
height: 31px
}
.mailchimp-integration-for-field-service-software .flowNode small {
display: block;
font-size: 8px;
letter-spacing: .05em;
color: var(--muted)
}
.mailchimp-integration-for-field-service-software .flowNode strong {
display: block;
font-size: 13px;
line-height: 1.45;
margin-top: 3px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .flowNode p {
font-size: 10px !important;
line-height: 1.5;
margin-top: 3px !important;
color: var(--muted)
}
.mailchimp-integration-for-field-service-software .flowNode>.icon {
height: 21px;
width: 21px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .flowNode.delay {
background: #FFFBEC;
border-color: #EEDCA6
}
.mailchimp-integration-for-field-service-software .flowNode.delay .flowNum {
background: var(--yellowsoft);
color: #745718
}
.mailchimp-integration-for-field-service-software .flowNode.send {
background: #0D2637;
border-color: #244B5F
}
.mailchimp-integration-for-field-service-software .flowNode.send .flowNum {
background: var(--yellow);
color: #111
}
.mailchimp-integration-for-field-service-software .flowNode.send strong {
color: #fff
}
.mailchimp-integration-for-field-service-software .flowNode.send p,
.mailchimp-integration-for-field-service-software .flowNode.send small {
color: #C3D7E3
}
.mailchimp-integration-for-field-service-software .flowNode.send>.icon {
color: var(--yellow)
}
.mailchimp-integration-for-field-service-software .reportTop {
display: flex;
align-items: center;
gap: 10px;
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
margin-bottom: 14px
}
.mailchimp-integration-for-field-service-software .reportTop strong {
display: block;
font-size: 13px;
line-height: 1.4;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .reportTop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
.mailchimp-integration-for-field-service-software .reportTop .appTile {
height: 32px;
width: 32px;
flex-basis: 32px;
font-size: 17px;
border-radius: 9px
}
.mailchimp-integration-for-field-service-software .marketingMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px
}
.mailchimp-integration-for-field-service-software .marketingMetrics>div {
padding: 14px 11px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.mailchimp-integration-for-field-service-software .marketingMetrics>div:nth-child(2) {
border-top: 3px solid var(--yellow);
padding-top: 12px
}
.mailchimp-integration-for-field-service-software .marketingMetrics span {
font-size: 10px;
color: var(--muted);
display: block
}
.mailchimp-integration-for-field-service-software .marketingMetrics strong {
display: block;
font-size: 27px;
letter-spacing: -.035em;
line-height: 1.25;
margin: 8px 0 4px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .marketingMetrics small {
font-size: 9px;
color: var(--muted);
display: block
}
.mailchimp-integration-for-field-service-software .reportPanel {
padding: 16px;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
margin-top: 13px
}
.mailchimp-integration-for-field-service-software .reportPanelTitle {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 15px
}
.mailchimp-integration-for-field-service-software .reportPanelTitle strong {
font-size: 12px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .reportPanelTitle small {
font-size: 9px;
color: var(--muted)
}
.mailchimp-integration-for-field-service-software .performanceRow {
display: grid;
grid-template-columns: 87px minmax(0, 1fr) 22px;
gap: 12px;
align-items: center;
margin-top: 13px;
font-size: 10px;
color: var(--navy)
}
.mailchimp-integration-for-field-service-software .performanceRow>div {
height: 18px;
border-radius: 4px;
background: #F2F7FA;
overflow: hidden
}
.mailchimp-integration-for-field-service-software .performanceRow i {
display: block;
height: 100%;
width: var(--bar);
background: #86CFED;
border-radius: 4px
}
.mailchimp-integration-for-field-service-software .performanceRow:nth-child(2) i {
background: var(--yellow)
}
.mailchimp-integration-for-field-service-software .performanceRow strong {
text-align: right
}
.mailchimp-integration-for-field-service-software .reportNote {
display: flex;
gap: 10px;
align-items: flex-start;
background: #0D2637;
color: #D1E2EC;
border: 1px solid #264A60;
border-radius: 11px;
margin-top: 13px;
padding: 13px;
font-size: 11px;
line-height: 1.6
}
.mailchimp-integration-for-field-service-software .reportNote>.icon {
height: 19px;
width: 19px;
color: var(--yellow)
}
.mailchimp-integration-for-field-service-software .sectionNote {
color: var(--muted);
font-size: 13px;
line-height: 1.75;
margin-top: 22px;
max-width: 920px
}
.mailchimp-integration-for-field-service-software .trademarkNote {
font-size: 11px;
line-height: 1.7;
color: var(--muted);
text-align: center;
margin-top: 22px
} @media(max-width:1100px) and (min-width:961px) {
.mailchimp-integration-for-field-service-software .heroGrid {
gap: 28px
} .mailchimp-integration-for-field-service-software .hero .lead {
font-size: 17px
}
.mailchimp-integration-for-field-service-software .assetPhone {
width: 161px
}
.mailchimp-integration-for-field-service-software .marketingBoard {
width: 94%
}
.mailchimp-integration-for-field-service-software .boardBody {
padding: 15px
}
.mailchimp-integration-for-field-service-software .brandBridge {
gap: 8px;
grid-template-columns: 1fr 20px 1fr
}
.mailchimp-integration-for-field-service-software .brandBridge>div {
gap: 7px
}
.mailchimp-integration-for-field-service-software .brandBridge strong {
font-size: 12px
}
.mailchimp-integration-for-field-service-software .brandBridge small {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .brandBridge .appTile {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 17px
}
.mailchimp-integration-for-field-service-software .audienceHeading>span {
display: none
}
.mailchimp-integration-for-field-service-software .heroDraft {
padding-right: 143px
}
.mailchimp-integration-for-field-service-software .boardFooter {
padding-right: 153px;
font-size: 8px
}
.mailchimp-integration-for-field-service-software .lifecycleCard {
width: calc(100% - 190px)
}
.mailchimp-integration-for-field-service-software .lifecycleCard strong {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .lifecycleCard span {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .visual {
padding: 18px
}
.mailchimp-integration-for-field-service-software .syncPair {
gap: 7px;
grid-template-columns: 1fr 20px 1fr
}
.mailchimp-integration-for-field-service-software .syncPanelHead {
padding: 10px;
gap: 7px
}
.mailchimp-integration-for-field-service-software .syncPanelHead strong {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .contactExample {
padding: 13px 10px
}
.mailchimp-integration-for-field-service-software .contactExample>small {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .campaignScene {
gap: 10px;
grid-template-columns: .8fr 1.2fr
}
.mailchimp-integration-for-field-service-software .segmentPanel {
padding: 12px
}
.mailchimp-integration-for-field-service-software .emailSheetBody {
padding: 12px
}
.mailchimp-integration-for-field-service-software .emailBanner {
padding: 12px 9px;
gap: 8px
}
.mailchimp-integration-for-field-service-software .emailBanner>span {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .segmentCount {
flex-direction: column;
align-items: flex-start;
gap: 4px
}
.mailchimp-integration-for-field-service-software .marketingMetrics strong {
font-size: 24px
}
}
@media(max-width:960px) {
.mailchimp-integration-for-field-service-software .heroGrid,
.mailchimp-integration-for-field-service-software .feature,
.mailchimp-integration-for-field-service-software .aiGrid,
.mailchimp-integration-for-field-service-software .final {
grid-template-columns: 1fr
}
.mailchimp-integration-for-field-service-software .heroGrid {
gap: 36px
}
.mailchimp-integration-for-field-service-software .hero h1 {
max-width: 800px
}
.mailchimp-integration-for-field-service-software .hero .lead {
max-width: 750px
}
.mailchimp-integration-for-field-service-software .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.mailchimp-integration-for-field-service-software .assetStage {
margin: auto
}
.mailchimp-integration-for-field-service-software .feature.reverse .visual {
order: 0
}
.mailchimp-integration-for-field-service-software .feature {
gap: 30px
}
.mailchimp-integration-for-field-service-software .feature>div:first-child {
max-width: 800px
}
.mailchimp-integration-for-field-service-software .outcomes,
.mailchimp-integration-for-field-service-software .featureGrid,
.mailchimp-integration-for-field-service-software .connectedGrid,
.mailchimp-integration-for-field-service-software .useCases {
grid-template-columns: repeat(2, 1fr)
}
.mailchimp-integration-for-field-service-software .logos {
grid-template-columns: repeat(3, 1fr)
}
.mailchimp-integration-for-field-service-software .reviews {
grid-template-columns: 1fr
}
.mailchimp-integration-for-field-service-software .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.mailchimp-integration-for-field-service-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.mailchimp-integration-for-field-service-software .ratingItem:nth-child(2) {
border: 0
}
.mailchimp-integration-for-field-service-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.mailchimp-integration-for-field-service-software .final .btn {
min-width: 195px
}
.mailchimp-integration-for-field-service-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.mailchimp-integration-for-field-service-software .aiGrid {
gap: 30px
}
.mailchimp-integration-for-field-service-software .aiMini {
max-width: 760px
}
.mailchimp-integration-for-field-service-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.mailchimp-integration-for-field-service-software .wrap {
width: calc(100% - 24px)
}
.mailchimp-integration-for-field-service-software section {
padding: 56px 0
}
.mailchimp-integration-for-field-service-software .hero {
padding: 32px 0 42px
} .mailchimp-integration-for-field-service-software h2 {
font-size: 34px
}
.mailchimp-integration-for-field-service-software .lead {
font-size: 17px
}
.mailchimp-integration-for-field-service-software .sectionHead p {
font-size: 16px
}
.mailchimp-integration-for-field-service-software .sectionHead {
margin-bottom: 28px
}
.mailchimp-integration-for-field-service-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.mailchimp-integration-for-field-service-software .heroGrid {
gap: 26px
}
.mailchimp-integration-for-field-service-software .hero .actions {
gap: 8px
}
.mailchimp-integration-for-field-service-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.mailchimp-integration-for-field-service-software .micro {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .heroPills {
gap: 6px
}
.mailchimp-integration-for-field-service-software .heroPills span {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.mailchimp-integration-for-field-service-software .assetStage {
height: 610px
}
.mailchimp-integration-for-field-service-software .assetTag {
left: 0;
top: 7px;
font-size: 9px
}
.mailchimp-integration-for-field-service-software .marketingBoard {
width: 100%;
top: 45px
}
.mailchimp-integration-for-field-service-software .boardHeader {
padding: 13px
}
.mailchimp-integration-for-field-service-software .boardBrand {
font-size: 12px
}
.mailchimp-integration-for-field-service-software .sampleBadge {
font-size: 7px
}
.mailchimp-integration-for-field-service-software .boardBody {
padding: 14px
}
.mailchimp-integration-for-field-service-software .brandBridge {
gap: 8px;
grid-template-columns: 1fr 20px 1fr
}
.mailchimp-integration-for-field-service-software .brandBridge strong {
font-size: 12px
}
.mailchimp-integration-for-field-service-software .brandBridge small {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .brandBridge>div {
gap: 7px
}
.mailchimp-integration-for-field-service-software .appTile {
width: 31px;
height: 31px;
flex-basis: 31px;
font-size: 16px;
border-radius: 9px
}
.mailchimp-integration-for-field-service-software .audienceHeading>span {
display: none
}
.mailchimp-integration-for-field-service-software .heroAudience>div {
padding: 8px;
gap: 6px;
grid-template-columns: 27px minmax(0, 1fr) auto
}
.mailchimp-integration-for-field-service-software .heroAudience b {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .heroAudience small {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .tagChip {
font-size: 7px;
padding: 4px 5px
}
.mailchimp-integration-for-field-service-software .heroDraft {
padding-right: 156px;
gap: 6px
}
.mailchimp-integration-for-field-service-software .heroDraft strong {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .heroDraft small {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .heroDraft .tinyIcon {
display: none
}
.mailchimp-integration-for-field-service-software .boardFooter {
padding-right: 174px;
font-size: 8px
}
.mailchimp-integration-for-field-service-software .assetPhone {
top: 265px;
width: 162px;
border-radius: 24px;
padding: 6px
}
.mailchimp-integration-for-field-service-software .phoneScreen {
border-radius: 18px
}
.mailchimp-integration-for-field-service-software .phoneHead {
padding: 10px 9px
}
.mailchimp-integration-for-field-service-software .phoneHead strong {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .phoneHead small {
font-size: 7px
}
.mailchimp-integration-for-field-service-software .phoneBody {
padding: 10px
}
.mailchimp-integration-for-field-service-software .emailImage {
padding: 10px 7px;
gap: 7px
}
.mailchimp-integration-for-field-service-software .emailImage .icon {
width: 23px;
height: 23px
}
.mailchimp-integration-for-field-service-software .emailImage span {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .phoneBody>strong {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .phoneBody>p {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .mockAction {
font-size: 9px;
padding: 9px 8px
}
.mailchimp-integration-for-field-service-software .emailFooter {
font-size: 6.5px
}
.mailchimp-integration-for-field-service-software .lifecycleCard {
left: 0;
top: 452px;
width: calc(100% - 175px);
padding: 12px;
gap: 7px;
display: block
}
.mailchimp-integration-for-field-service-software .contextIcon {
display: none
}
.mailchimp-integration-for-field-service-software .lifecycleCard strong {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .lifecycleCard span {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .diagramCaption {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .trust {
padding: 23px 0
}
.mailchimp-integration-for-field-service-software .trustLabel {
font-size: 12px
}
.mailchimp-integration-for-field-service-software .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.mailchimp-integration-for-field-service-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.mailchimp-integration-for-field-service-software .logo.dhl {
font-size: 19px
}
.mailchimp-integration-for-field-service-software .logo.adobe {
font-size: 17px
}
.mailchimp-integration-for-field-service-software .logo.golden {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .fl,
.mailchimp-integration-for-field-service-software .outcomes,
.mailchimp-integration-for-field-service-software .featureGrid,
.mailchimp-integration-for-field-service-software .connectedGrid,
.mailchimp-integration-for-field-service-software .useCases {
grid-template-columns: 1fr
}
.mailchimp-integration-for-field-service-software .fi {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .outcome {
padding: 21px
}
.mailchimp-integration-for-field-service-software .outcome strong {
margin-top: 12px
}
.mailchimp-integration-for-field-service-software .outcome span {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.mailchimp-integration-for-field-service-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px;
align-items: flex-start
}
.mailchimp-integration-for-field-service-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.mailchimp-integration-for-field-service-software .uiHeading>span:first-child {
min-width: 0;
line-height: 1.5
}
.mailchimp-integration-for-field-service-software .uiHeading .icon {
width: 17px;
height: 17px
}
.mailchimp-integration-for-field-service-software .uiSub {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .syncPair {
gap: 7px;
grid-template-columns: 1fr 19px 1fr
}
.mailchimp-integration-for-field-service-software .syncPanelHead {
padding: 11px 9px;
gap: 7px
}
.mailchimp-integration-for-field-service-software .syncPanelHead strong {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .syncPanelHead small {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .syncPanelHead .appTile {
height: 25px;
width: 25px;
flex-basis: 25px;
font-size: 14px;
border-radius: 7px
}
.mailchimp-integration-for-field-service-software .contactExample {
padding: 13px 10px
}
.mailchimp-integration-for-field-service-software .contactExample>b {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .contactExample>small {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .tags>span {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .campaignScene {
gap: 11px;
grid-template-columns: .85fr 1.15fr
}
.mailchimp-integration-for-field-service-software .segmentPanel {
padding: 12px
}
.mailchimp-integration-for-field-service-software .segmentPanel>strong {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .segmentRule {
font-size: 9px;
gap: 6px
}
.mailchimp-integration-for-field-service-software .segmentCount {
flex-direction: column;
gap: 5px;
align-items: flex-start
}
.mailchimp-integration-for-field-service-software .segmentCount strong {
font-size: 27px
}
.mailchimp-integration-for-field-service-software .emailSheetBody {
padding: 12px
}
.mailchimp-integration-for-field-service-software .emailBanner {
padding: 12px 8px;
gap: 8px
}
.mailchimp-integration-for-field-service-software .emailBanner>span {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .emailBanner .icon {
width: 25px;
height: 25px
}
.mailchimp-integration-for-field-service-software .emailSheetBody>strong {
font-size: 12px
}
.mailchimp-integration-for-field-service-software .emailSheetBody>p {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .emailSheetTop {
font-size: 10px;
padding: 11px
}
.mailchimp-integration-for-field-service-software .emailFine {
font-size: 7px
}
.mailchimp-integration-for-field-service-software .flowNode {
padding: 14px;
gap: 10px
}
.mailchimp-integration-for-field-service-software .flowNode strong {
font-size: 12px
}
.mailchimp-integration-for-field-service-software .automationLabel>strong {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .automationLabel .pill {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .marketingMetrics {
gap: 8px
}
.mailchimp-integration-for-field-service-software .marketingMetrics>div {
padding: 12px 9px
}
.mailchimp-integration-for-field-service-software .marketingMetrics strong {
font-size: 23px
}
.mailchimp-integration-for-field-service-software .marketingMetrics span {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .marketingMetrics small {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .reportPanel {
padding: 13px
}
.mailchimp-integration-for-field-service-software .reportPanelTitle {
align-items: flex-start
}
.mailchimp-integration-for-field-service-software .reportPanelTitle small {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .reportPanelTitle strong {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .performanceRow {
grid-template-columns: 75px 1fr 19px;
gap: 9px;
font-size: 9px
}
.mailchimp-integration-for-field-service-software .reportNote {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.mailchimp-integration-for-field-service-software .aiMini div {
padding: 16px
}
.mailchimp-integration-for-field-service-software .aiMini strong {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .aiMini span {
font-size: 13px
}
.mailchimp-integration-for-field-service-software .promptBox {
padding: 18px;
border-radius: 17px
}
.mailchimp-integration-for-field-service-software .prompt {
font-size: 13px;
padding: 13px
}
.mailchimp-integration-for-field-service-software .promptHead {
font-size: 19px
}
.mailchimp-integration-for-field-service-software .promptFoot {
font-size: 10px !important
}
.mailchimp-integration-for-field-service-software .connectedCard {
padding: 22px
}
.mailchimp-integration-for-field-service-software .connectedCard p,
.mailchimp-integration-for-field-service-software .featureCard p,
.mailchimp-integration-for-field-service-software .useCase p {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.mailchimp-integration-for-field-service-software .ratingItem {
border: 0
}
.mailchimp-integration-for-field-service-software .ratingLead {
margin-bottom: 3px
}
.mailchimp-integration-for-field-service-software .review p {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.mailchimp-integration-for-field-service-software .ctaBtns {
width: 100%
}
.mailchimp-integration-for-field-service-software .ctaBtns .btn {
flex: 1
}
.mailchimp-integration-for-field-service-software .cta p {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.mailchimp-integration-for-field-service-software .final h2 {
font-size: 32px
}
.mailchimp-integration-for-field-service-software .final p {
font-size: 15px
}
.mailchimp-integration-for-field-service-software .final .ctaBtns {
flex-direction: column
}
.mailchimp-integration-for-field-service-software .final .btn {
min-width: 0;
width: 100%
}
.mailchimp-integration-for-field-service-software .faq details {
padding: 16px
}
.mailchimp-integration-for-field-service-software .faq summary {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .faq details p {
font-size: 14px
}
.mailchimp-integration-for-field-service-software .sectionNote {
font-size: 12px
}
}
@media(max-width:420px) {
.mailchimp-integration-for-field-service-software .campaignScene {
grid-template-columns: 1fr
}
.mailchimp-integration-for-field-service-software .segmentPanel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 12px
}
.mailchimp-integration-for-field-service-software .segmentPanel .uiLabel,
.mailchimp-integration-for-field-service-software .segmentPanel>strong {
grid-column: 1/-1
}
.mailchimp-integration-for-field-service-software .segmentCount {
grid-column: 1;
flex-direction: row;
align-items: center;
margin-top: 10px;
gap: 9px
}
.mailchimp-integration-for-field-service-software .segmentPanel>small {
grid-column: 2;
align-self: center;
margin-top: 10px
}
.mailchimp-integration-for-field-service-software .emailBanner {
padding: 17px 13px
}
.mailchimp-integration-for-field-service-software .emailBanner>span {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .emailSheetBody>strong {
font-size: 15px
}
.mailchimp-integration-for-field-service-software .emailSheetBody>p {
font-size: 12px
}
.mailchimp-integration-for-field-service-software .emailSheetBody .mockAction {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .emailFine {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .syncPair {
grid-template-columns: 1fr;
gap: 12px
}
.mailchimp-integration-for-field-service-software .syncConnector {
height: 20px;
transform: rotate(90deg)
}
.mailchimp-integration-for-field-service-software .syncPanelHead strong {
font-size: 12px
}
.mailchimp-integration-for-field-service-software .syncPanelHead small {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .syncPanel .contactExample {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 4px 10px
}
.mailchimp-integration-for-field-service-software .contactExample>b {
grid-column: 1;
font-size: 12px
}
.mailchimp-integration-for-field-service-software .contactExample>small {
grid-column: 1;
margin: 0;
font-size: 10px
}
.mailchimp-integration-for-field-service-software .contactExample .tags {
grid-column: 2;
grid-row: 1/3
}
.mailchimp-integration-for-field-service-software .infoFoot {
font-size: 11px
}
.mailchimp-integration-for-field-service-software .brandBridge>.icon {
width: 18px;
height: 18px
}
}
@media(max-width:360px) { .mailchimp-integration-for-field-service-software h2 {
font-size: 31px
}
.mailchimp-integration-for-field-service-software .assetPhone {
width: 146px
}
.mailchimp-integration-for-field-service-software .heroDraft {
padding-right: 141px
}
.mailchimp-integration-for-field-service-software .boardFooter {
padding-right: 149px
}
.mailchimp-integration-for-field-service-software .assetTag {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .boardBody {
padding: 12px
}
.mailchimp-integration-for-field-service-software .brandBridge {
gap: 5px;
grid-template-columns: 1fr 17px 1fr
}
.mailchimp-integration-for-field-service-software .brandBridge strong {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .brandBridge small {
font-size: 7px
}
.mailchimp-integration-for-field-service-software .brandBridge .appTile {
height: 26px;
width: 26px;
flex-basis: 26px;
font-size: 14px;
border-radius: 7px
}
.mailchimp-integration-for-field-service-software .heroAudience>div {
padding: 7px;
gap: 5px
}
.mailchimp-integration-for-field-service-software .tagChip {
font-size: 6.5px
}
.mailchimp-integration-for-field-service-software .lifecycleCard {
width: calc(100% - 157px);
padding: 10px
}
.mailchimp-integration-for-field-service-software .lifecycleCard strong {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .lifecycleCard span {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .emailImage {
display: block
}
.mailchimp-integration-for-field-service-software .emailImage .icon {
display: none
}
.mailchimp-integration-for-field-service-software .emailImage span {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .phoneBody>p {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .phoneBody>strong {
font-size: 10px
}
.mailchimp-integration-for-field-service-software .phoneHead strong {
font-size: 9px
}
.mailchimp-integration-for-field-service-software .phoneHead small {
font-size: 6.5px
}
.mailchimp-integration-for-field-service-software .marketingMetrics strong {
font-size: 21px
}
.mailchimp-integration-for-field-service-software .marketingMetrics span {
font-size: 8px
}
.mailchimp-integration-for-field-service-software .reportTop strong {
font-size: 12px
}
}  .sales-proposal-software-for-field-service .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.sales-proposal-software-for-field-service .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.sales-proposal-software-for-field-service .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.sales-proposal-software-for-field-service .btn:hover {
transform: translateY(-2px)
}
.sales-proposal-software-for-field-service .btn.black {
background: #0b0b0b;
color: #fff
}
.sales-proposal-software-for-field-service .btn.black:hover {
background: #292929
}
.sales-proposal-software-for-field-service .btn.yellow {
background: var(--yellow);
color: #000
}
.sales-proposal-software-for-field-service .btn.yellow:hover {
background: #FFD454
}
.sales-proposal-software-for-field-service .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.sales-proposal-software-for-field-service .btn .icon2 {
width: 17px;
height: 17px
}
.sales-proposal-software-for-field-service a:focus-visible,
.sales-proposal-software-for-field-service summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.sales-proposal-software-for-field-service .dark a:focus-visible,
.sales-proposal-software-for-field-service .final a:focus-visible {
outline-color: var(--yellow)
}
.sales-proposal-software-for-field-service .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.sales-proposal-software-for-field-service .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.sales-proposal-software-for-field-service .soft {
background: var(--sky2)
}
.sales-proposal-software-for-field-service .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.sales-proposal-software-for-field-service .dark h2,
.sales-proposal-software-for-field-service .dark h3 {
color: #fff
}
.sales-proposal-software-for-field-service .dark p {
color: #D6D6D6
}
.sales-proposal-software-for-field-service .dark .ey {
background: var(--yellow)
}
.sales-proposal-software-for-field-service .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.sales-proposal-software-for-field-service .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.sales-proposal-software-for-field-service .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.sales-proposal-software-for-field-service .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.sales-proposal-software-for-field-service .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.sales-proposal-software-for-field-service .textLink .icon2 {
width: 16px;
height: 16px
}
.sales-proposal-software-for-field-service .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.sales-proposal-software-for-field-service .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.sales-proposal-software-for-field-service .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.sales-proposal-software-for-field-service .skipLink:focus {
top: 12px
} .sales-proposal-software-for-field-service .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.sales-proposal-software-for-field-service .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.sales-proposal-software-for-field-service .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.sales-proposal-software-for-field-service .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.sales-proposal-software-for-field-service .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.sales-proposal-software-for-field-service .logo.adobe {
font-size: 20px
}
.sales-proposal-software-for-field-service .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .sales-proposal-software-for-field-service .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.sales-proposal-software-for-field-service .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.sales-proposal-software-for-field-service .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.sales-proposal-software-for-field-service .outcome:nth-child(2):before {
background: var(--yellow)
}
.sales-proposal-software-for-field-service .outcome:nth-child(3):before {
background: var(--green)
}
.sales-proposal-software-for-field-service .outcome:nth-child(4):before {
background: var(--purple)
}
.sales-proposal-software-for-field-service .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.sales-proposal-software-for-field-service .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.sales-proposal-software-for-field-service .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
} .sales-proposal-software-for-field-service .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.sales-proposal-software-for-field-service .feature.reverse .visual {
order: -1
}
.sales-proposal-software-for-field-service .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.sales-proposal-software-for-field-service .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.sales-proposal-software-for-field-service .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.sales-proposal-software-for-field-service .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.sales-proposal-software-for-field-service .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.sales-proposal-software-for-field-service .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.sales-proposal-software-for-field-service .visual>* {
position: relative;
z-index: 2
}
.sales-proposal-software-for-field-service .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.sales-proposal-software-for-field-service .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.sales-proposal-software-for-field-service .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.sales-proposal-software-for-field-service .uiHeading .icon2 {
width: 19px;
height: 19px
}
.sales-proposal-software-for-field-service .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.sales-proposal-software-for-field-service .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.sales-proposal-software-for-field-service .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.sales-proposal-software-for-field-service .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.sales-proposal-software-for-field-service .pill.green {
background: var(--greenbg);
color: #116746
}
.sales-proposal-software-for-field-service .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.sales-proposal-software-for-field-service .pill.gray {
background: #F0F3F5;
color: #586C79
}
.sales-proposal-software-for-field-service .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .sales-proposal-software-for-field-service .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.sales-proposal-software-for-field-service .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.sales-proposal-software-for-field-service .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.sales-proposal-software-for-field-service .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.sales-proposal-software-for-field-service .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.sales-proposal-software-for-field-service .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.sales-proposal-software-for-field-service .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.sales-proposal-software-for-field-service .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.sales-proposal-software-for-field-service .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.sales-proposal-software-for-field-service .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .sales-proposal-software-for-field-service .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.sales-proposal-software-for-field-service .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.sales-proposal-software-for-field-service .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.sales-proposal-software-for-field-service .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.sales-proposal-software-for-field-service .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.sales-proposal-software-for-field-service .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.sales-proposal-software-for-field-service .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
} .sales-proposal-software-for-field-service .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.sales-proposal-software-for-field-service .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.sales-proposal-software-for-field-service .featureCard:hover {
transform: translateY(-3px)
}
.sales-proposal-software-for-field-service .featureIcon,
.sales-proposal-software-for-field-service .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.sales-proposal-software-for-field-service .featureIcon .icon2,
.sales-proposal-software-for-field-service .useIcon .icon2 {
width: 22px;
height: 22px
}
.sales-proposal-software-for-field-service .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.sales-proposal-software-for-field-service .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .sales-proposal-software-for-field-service .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.sales-proposal-software-for-field-service .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.sales-proposal-software-for-field-service .useCase h3 {
font-size: 20px
}
.sales-proposal-software-for-field-service .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.sales-proposal-software-for-field-service .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.sales-proposal-software-for-field-service .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.sales-proposal-software-for-field-service .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.sales-proposal-software-for-field-service .review h3 {
font-size: 22px
}
.sales-proposal-software-for-field-service .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.sales-proposal-software-for-field-service .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.sales-proposal-software-for-field-service .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.sales-proposal-software-for-field-service .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.sales-proposal-software-for-field-service .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.sales-proposal-software-for-field-service .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.sales-proposal-software-for-field-service .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.sales-proposal-software-for-field-service .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.sales-proposal-software-for-field-service .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .sales-proposal-software-for-field-service .faq {
max-width: 900px
}
.sales-proposal-software-for-field-service .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.sales-proposal-software-for-field-service .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.sales-proposal-software-for-field-service .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.sales-proposal-software-for-field-service .faq summary::marker {
color: var(--navy)
}
.sales-proposal-software-for-field-service .faq details[open] {
border-color: #A9D3E7
}
.sales-proposal-software-for-field-service .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .sales-proposal-software-for-field-service .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.sales-proposal-software-for-field-service .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.sales-proposal-software-for-field-service .cta h3 {
font-size: 19px
}
.sales-proposal-software-for-field-service .cta.darkCta h3 {
color: #fff
}
.sales-proposal-software-for-field-service .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.sales-proposal-software-for-field-service .cta.darkCta p {
color: #D1D1D1
}
.sales-proposal-software-for-field-service .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.sales-proposal-software-for-field-service .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.sales-proposal-software-for-field-service .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.sales-proposal-software-for-field-service .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.sales-proposal-software-for-field-service .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.sales-proposal-software-for-field-service .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.sales-proposal-software-for-field-service .reveal {
opacity: 1;
transform: none
}  .sales-proposal-software-for-field-service #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools *,
.sales-proposal-software-for-field-service #connected-tools.fsmTools *::before,
.sales-proposal-software-for-field-service #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__step::before,
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.sales-proposal-software-for-field-service #connected-tools.fsmTools {
padding: 52px 0;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card,
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.sales-proposal-software-for-field-service #connected-tools.fsmTools h2 {
font-size: 30px;
}
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.sales-proposal-software-for-field-service #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .sales-proposal-software-for-field-service .hero {
padding: 52px 0 64px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .13), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.sales-proposal-software-for-field-service .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.sales-proposal-software-for-field-service .heroGrid>*,
.sales-proposal-software-for-field-service .feature>*,
.sales-proposal-software-for-field-service .aiGrid>* {
min-width: 0
}
.sales-proposal-software-for-field-service .hero h1 {
max-width: 590px
}
.sales-proposal-software-for-field-service .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.sales-proposal-software-for-field-service .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.sales-proposal-software-for-field-service .heroVisual {
position: relative;
min-width: 0
}
.sales-proposal-software-for-field-service .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 182px;
gap: 14px 14px;
align-items: start
}
.sales-proposal-software-for-field-service .assetStage:before {
content: "";
position: absolute;
inset: 48px 0 18px 24px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .055) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.sales-proposal-software-for-field-service .assetStage>* {
position: relative;
z-index: 1
}
.sales-proposal-software-for-field-service .assetTag {
grid-column: 1/-1;
justify-self: start;
margin-left: 16px;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 800;
padding: 6px 10px;
border-radius: 9px
}
.sales-proposal-software-for-field-service .proposalBoard {
grid-column: 1/-1;
margin-right: 34px;
background: #fff;
border: 1px solid #BCDCEA;
border-radius: 19px;
overflow: hidden
}
.sales-proposal-software-for-field-service .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px;
border-bottom: 1px solid var(--line)
}
.sales-proposal-software-for-field-service .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
line-height: 1.3
}
.sales-proposal-software-for-field-service .brandTile {
width: 28px;
height: 28px;
display: grid;
place-items: center;
background: var(--brand);
color: #fff;
border-radius: 8px
}
.sales-proposal-software-for-field-service .brandTile .icon2 {
width: 18px;
height: 18px
}
.sales-proposal-software-for-field-service .sampleBadge {
font-size: 8px;
font-weight: 750;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.sales-proposal-software-for-field-service .proposalHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 17px 17px 13px
}
.sales-proposal-software-for-field-service .proposalHeader strong {
font-size: 16px;
display: block;
line-height: 1.35;
color: var(--navy)
}
.sales-proposal-software-for-field-service .proposalHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
.sales-proposal-software-for-field-service .presentBadge {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
color: #365D70;
font-weight: 750
}
.sales-proposal-software-for-field-service .presentBadge .icon2 {
width: 15px;
height: 15px
}
.sales-proposal-software-for-field-service .heroOptions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 0 16px 16px
}
.sales-proposal-software-for-field-service .heroOption {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 12px 10px;
display: flex;
flex-direction: column;
min-width: 0
}
.sales-proposal-software-for-field-service .heroOption.selected {
border: 1px solid #EDC54B;
background: #FFFCF0
}
.sales-proposal-software-for-field-service .optionLabel {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 850;
color: var(--navy);
gap: 4px
}
.sales-proposal-software-for-field-service .optionLabel .icon2 {
width: 14px;
height: 14px;
color: #6E91A6
}
.sales-proposal-software-for-field-service .selected .optionLabel .icon2 {
color: #8C6C13
}
.sales-proposal-software-for-field-service .optionPrice {
font-size: 27px;
font-weight: 850;
letter-spacing: -.04em;
line-height: 1.2;
color: var(--navy);
margin: 11px 0 8px
}
.sales-proposal-software-for-field-service .optionSummary {
font-size: 9px;
color: #557184;
line-height: 1.6;
min-height: 31px
}
.sales-proposal-software-for-field-service .optionTicks {
display: grid;
gap: 6px;
margin-top: 10px;
font-size: 8px;
line-height: 1.55;
color: #496676
}
.sales-proposal-software-for-field-service .optionTicks>span {
display: flex;
gap: 4px;
align-items: flex-start
}
.sales-proposal-software-for-field-service .optionTicks .icon2 {
width: 11px;
height: 11px;
flex: 0 0 11px;
margin-top: 1px;
color: #118A61
}
.sales-proposal-software-for-field-service .optionAction {
display: block;
border: 1px solid var(--line);
border-radius: 6px;
padding: 7px 2px;
margin-top: 12px;
font-size: 8px;
font-weight: 800;
text-align: center;
color: var(--navy);
line-height: 1.4
}
.sales-proposal-software-for-field-service .selected .optionAction {
background: var(--yellow);
border-color: var(--yellow);
color: #111
}
.sales-proposal-software-for-field-service .boardFooter {
background: var(--sky2);
padding: 11px 175px 11px 16px;
border-top: 1px solid var(--line);
font-size: 9px;
line-height: 1.6;
min-height: 50px;
color: #536E80;
display: flex;
gap: 6px;
align-items: center
}
.sales-proposal-software-for-field-service .boardFooter .icon2 {
height: 14px;
width: 14px;
color: var(--green)
}
.sales-proposal-software-for-field-service .proposalContext {
grid-column: 1;
background: #0C2333;
border: 1px solid #2A4555;
border-radius: 15px;
color: #fff;
padding: 15px;
margin-left: 12px
}
.sales-proposal-software-for-field-service .contextHead {
display: flex;
gap: 9px;
align-items: center;
font-size: 11px;
font-weight: 800;
line-height: 1.4
}
.sales-proposal-software-for-field-service .contextHead>.icon {
color: var(--yellow);
height: 20px;
width: 20px
}
.sales-proposal-software-for-field-service .contextBody {
font-size: 10px;
color: #CADCE7;
line-height: 1.7;
margin: 8px 0 0 29px
}
.sales-proposal-software-for-field-service .assetPhone {
grid-column: 2;
grid-row: 3;
margin-top: -66px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.sales-proposal-software-for-field-service .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.sales-proposal-software-for-field-service .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.sales-proposal-software-for-field-service .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.sales-proposal-software-for-field-service .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.sales-proposal-software-for-field-service .phoneHead strong {
font-size: 11px;
display: block
}
.sales-proposal-software-for-field-service .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.sales-proposal-software-for-field-service .phoneBody {
padding: 12px 11px
}
.sales-proposal-software-for-field-service .smallLabel {
display: block;
font-size: 8px;
text-transform: uppercase;
letter-spacing: .045em;
color: var(--muted);
font-weight: 750
}
.sales-proposal-software-for-field-service .phoneBody>strong {
font-size: 13px;
display: block;
color: var(--navy);
margin-top: 6px;
line-height: 1.35
}
.sales-proposal-software-for-field-service .phonePrice {
font-size: 27px;
line-height: 1.3;
font-weight: 850;
color: var(--navy);
letter-spacing: -.04em;
margin-top: 7px
}
.sales-proposal-software-for-field-service .phoneBody>p {
font-size: 9px;
color: #566F81;
line-height: 1.6;
margin-top: 5px
}
.sales-proposal-software-for-field-service .signature {
border: 1px solid var(--line);
background: #FBFDFF;
border-radius: 8px;
padding: 5px 7px;
margin: 11px 0
}
.sales-proposal-software-for-field-service .signature svg {
width: 100%;
height: 26px;
display: block
}
.sales-proposal-software-for-field-service .signature small {
display: block;
border-top: 1px dashed #D4E3EB;
font-size: 7px;
text-align: center;
padding-top: 4px;
color: var(--muted)
}
.sales-proposal-software-for-field-service .mockAction {
padding: 9px 8px;
border-radius: 7px;
background: var(--yellow);
color: #111;
font-size: 10px;
line-height: 1.4;
font-weight: 850;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 6px
}
.sales-proposal-software-for-field-service .mockAction .icon2 {
width: 13px;
height: 13px
}
.sales-proposal-software-for-field-service .phoneFine {
font-size: 7px;
color: var(--muted);
text-align: center;
display: block;
margin-top: 7px
}
.sales-proposal-software-for-field-service .diagramCaption {
font-size: 10px;
color: var(--muted);
text-align: center;
line-height: 1.6;
margin-top: 15px
}
.sales-proposal-software-for-field-service .visual p {
margin-top: 0
}
.sales-proposal-software-for-field-service .visual .icon2 {
display: inline-block
}
.sales-proposal-software-for-field-service .uiHeading {
flex-wrap: wrap
}
.sales-proposal-software-for-field-service .uiHeading .uiSub {
margin-left: auto
}
.sales-proposal-software-for-field-service .visualNote {
font-size: 10px !important;
color: #566F80;
line-height: 1.65 !important;
margin-top: 14px !important;
display: flex;
align-items: flex-start;
gap: 7px
}
.sales-proposal-software-for-field-service .visualNote .icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--green);
margin-top: 1px
} .sales-proposal-software-for-field-service .builderFrame {
border: 1px solid #CFE1EB;
background: #fff;
border-radius: 13px;
overflow: hidden
}
.sales-proposal-software-for-field-service .builderTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
background: #F5FBFF;
border-bottom: 1px solid var(--line);
font-size: 11px;
color: var(--navy);
font-weight: 800
}
.sales-proposal-software-for-field-service .builderTop>span {
font-size: 9px;
color: var(--muted);
font-weight: 500
}
.sales-proposal-software-for-field-service .builderLayout {
display: grid;
grid-template-columns: 112px minmax(0, 1fr)
}
.sales-proposal-software-for-field-service .builderSide {
padding: 13px 9px;
background: #F9FCFE;
border-right: 1px solid var(--line)
}
.sales-proposal-software-for-field-service .builderSide>strong {
font-size: 9px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin: 1px 3px 11px
}
.sales-proposal-software-for-field-service .builderBlock {
font-size: 10px;
display: flex;
align-items: center;
gap: 7px;
padding: 10px 7px;
border: 1px solid var(--line);
border-radius: 7px;
margin-bottom: 7px;
background: #fff
}
.sales-proposal-software-for-field-service .builderBlock.active {
background: var(--yellowsoft);
border-color: #EBD381;
color: #6F570D
}
.sales-proposal-software-for-field-service .builderBlock .icon2 {
width: 13px;
height: 13px;
color: #47758C
}
.sales-proposal-software-for-field-service .proposalPaper {
padding: 17px 16px;
min-width: 0
}
.sales-proposal-software-for-field-service .paperBrand {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 850;
color: var(--navy)
}
.sales-proposal-software-for-field-service .paperBrand>span {
height: 23px;
width: 23px;
border-radius: 6px;
background: #EAF8FF;
color: #077CB6;
display: grid;
place-items: center;
font-size: 11px
}
.sales-proposal-software-for-field-service .paperHeading {
display: block;
font-size: 19px;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.3;
margin: 15px 0 6px;
color: #102B3E
}
.sales-proposal-software-for-field-service .paperSub {
font-size: 9px;
color: var(--muted);
line-height: 1.6
}
.sales-proposal-software-for-field-service .paperMedia {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 10px;
align-items: center;
background: #F4FAFD;
border: 1px solid #D5E8F2;
border-radius: 9px;
padding: 10px;
margin-top: 13px
}
.sales-proposal-software-for-field-service .unitDrawing {
display: block;
width: 100%;
height: 64px
}
.sales-proposal-software-for-field-service .paperMedia b {
font-size: 10px;
line-height: 1.4;
display: block;
color: var(--navy)
}
.sales-proposal-software-for-field-service .paperMedia small {
font-size: 8px;
color: #627B8A;
display: block;
line-height: 1.6;
margin-top: 3px
}
.sales-proposal-software-for-field-service .scopeRows {
display: grid;
gap: 8px;
margin-top: 13px
}
.sales-proposal-software-for-field-service .scopeRows div {
font-size: 9px;
line-height: 1.6;
display: flex;
align-items: center;
gap: 6px;
color: #456575
}
.sales-proposal-software-for-field-service .scopeRows .icon2 {
width: 12px;
height: 12px;
color: var(--green)
}
.sales-proposal-software-for-field-service .paperChips {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 14px
}
.sales-proposal-software-for-field-service .paperChips span {
font-size: 8px;
background: var(--yellowsoft);
color: #735C18;
border: 1px solid #EEE0A1;
border-radius: 5px;
padding: 4px 6px
} .sales-proposal-software-for-field-service .presentBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #0C2333;
color: #fff;
border-radius: 11px;
padding: 13px 14px;
margin-bottom: 13px
}
.sales-proposal-software-for-field-service .presentBar>span {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 750
}
.sales-proposal-software-for-field-service .presentBar .icon2 {
width: 19px;
height: 19px;
color: var(--yellow)
}
.sales-proposal-software-for-field-service .presentBar>small {
font-size: 9px;
color: #C6DCE9
}
.sales-proposal-software-for-field-service .proposalGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: stretch
}
.sales-proposal-software-for-field-service .proposalCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 12px;
display: flex;
flex-direction: column;
min-width: 0
}
.sales-proposal-software-for-field-service .proposalCard.featured {
border-color: #DCB333;
background: #FFFCF0
}
.sales-proposal-software-for-field-service .proposalName {
font-size: 12px;
font-weight: 850;
color: var(--navy);
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px
}
.sales-proposal-software-for-field-service .proposalName .icon2 {
width: 15px;
height: 15px;
color: #6F93A7
}
.sales-proposal-software-for-field-service .proposalPrice {
font-size: 31px;
color: var(--navy);
line-height: 1.3;
font-weight: 850;
letter-spacing: -.04em;
margin: 13px 0 4px
}
.sales-proposal-software-for-field-service .proposalPurpose {
font-size: 10px;
color: #526F80;
line-height: 1.6;
min-height: 32px
}
.sales-proposal-software-for-field-service .proposalList {
display: grid;
gap: 10px;
padding-top: 13px;
margin-top: 12px;
border-top: 1px solid #DFE9EF
}
.sales-proposal-software-for-field-service .proposalList>span {
font-size: 9px;
line-height: 1.65;
display: flex;
align-items: flex-start;
gap: 6px
}
.sales-proposal-software-for-field-service .proposalList .icon2 {
width: 12px;
height: 12px;
color: var(--green);
margin-top: 2px
}
.sales-proposal-software-for-field-service .proposalChoice {
font-size: 9px;
font-weight: 800;
border: 1px solid var(--line);
border-radius: 7px;
text-align: center;
padding: 8px 4px;
margin-top: 19px;
color: var(--navy)
}
.sales-proposal-software-for-field-service .featured .proposalChoice {
background: var(--yellow);
border-color: var(--yellow);
color: #111
}
.sales-proposal-software-for-field-service .optionControls {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 13px
}
.sales-proposal-software-for-field-service .optionControls span {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
padding: 6px 8px;
border-radius: 6px;
color: #557487
}
.sales-proposal-software-for-field-service .optionControls .icon2 {
width: 12px;
height: 12px
} .sales-proposal-software-for-field-service .approvalScene {
display: grid;
grid-template-columns: 185px minmax(0, 1fr);
gap: 22px;
align-items: center
}
.sales-proposal-software-for-field-service .approvalDevice {
border: 1px solid #354D5C;
padding: 6px;
background: #0C1E2A;
border-radius: 26px;
min-width: 0
}
.sales-proposal-software-for-field-service .approvalDevice .phoneBody {
padding: 15px 12px
}
.sales-proposal-software-for-field-service .approvalDevice .phoneBody>strong {
font-size: 15px
}
.sales-proposal-software-for-field-service .approvalDevice .phoneBody>p {
font-size: 10px
}
.sales-proposal-software-for-field-service .approvalDevice .signature svg {
height: 35px
}
.sales-proposal-software-for-field-service .approvalDevice .phonePrice {
font-size: 30px
}
.sales-proposal-software-for-field-service .approvalSteps {
display: grid;
gap: 19px
}
.sales-proposal-software-for-field-service .approvalStep {
display: grid;
grid-template-columns: 31px minmax(0, 1fr);
gap: 10px;
align-items: start
}
.sales-proposal-software-for-field-service .stepTile {
width: 31px;
height: 31px;
background: #fff;
border: 1px solid #D4E4ED;
border-radius: 9px;
display: grid;
place-items: center;
color: var(--navy)
}
.sales-proposal-software-for-field-service .stepTile .icon2 {
width: 17px;
height: 17px
}
.sales-proposal-software-for-field-service .approvalStep strong {
font-size: 12px;
line-height: 1.5;
display: block
}
.sales-proposal-software-for-field-service .approvalStep p {
font-size: 11px !important;
line-height: 1.65 !important;
margin-top: 5px !important;
color: var(--muted)
}
.sales-proposal-software-for-field-service .approvalFooter {
border: 1px solid #C6E7D9;
background: #F1FAF6;
border-radius: 10px;
padding: 13px;
margin-top: 3px
}
.sales-proposal-software-for-field-service .approvalFooter strong {
font-size: 11px;
color: #176147;
display: block
}
.sales-proposal-software-for-field-service .approvalFooter p {
font-size: 10px !important;
line-height: 1.65 !important;
margin-top: 5px !important;
color: #537669
} .sales-proposal-software-for-field-service .activityMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 13px
}
.sales-proposal-software-for-field-service .activityMetrics>div {
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
padding: 13px 12px
}
.sales-proposal-software-for-field-service .activityMetrics .icon2 {
height: 20px;
width: 20px;
color: var(--navy);
margin-bottom: 7px
}
.sales-proposal-software-for-field-service .activityMetrics strong {
font-size: 12px;
display: block;
color: var(--navy)
}
.sales-proposal-software-for-field-service .activityMetrics small {
font-size: 9px;
display: block;
color: var(--muted);
line-height: 1.6;
margin-top: 4px
}
.sales-proposal-software-for-field-service .activityPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden
}
.sales-proposal-software-for-field-service .activityHeader {
padding: 13px 15px;
background: #F5FBFF;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px
}
.sales-proposal-software-for-field-service .activityHeader strong {
font-size: 12px;
color: var(--navy)
}
.sales-proposal-software-for-field-service .activityHeader .pill {
font-size: 8px
}
.sales-proposal-software-for-field-service .activityRows {
padding: 16px
}
.sales-proposal-software-for-field-service .activityRow {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
gap: 10px;
align-items: start;
padding-bottom: 19px;
position: relative
}
.sales-proposal-software-for-field-service .activityRow:last-child {
padding-bottom: 0
}
.sales-proposal-software-for-field-service .activityRow:not(:last-child):before {
content: "";
position: absolute;
left: 12px;
top: 26px;
bottom: 0;
border-left: 1px solid #D4E5EE
}
.sales-proposal-software-for-field-service .activityDot {
width: 26px;
height: 26px;
border: 1px solid #D4E5EE;
border-radius: 50%;
background: var(--sky);
display: grid;
place-items: center;
color: #166187
}
.sales-proposal-software-for-field-service .activityDot.yellow {
background: var(--yellowsoft);
color: #92700E
}
.sales-proposal-software-for-field-service .activityDot .icon2 {
width: 13px;
height: 13px
}
.sales-proposal-software-for-field-service .activityRow strong {
font-size: 11px;
line-height: 1.45;
display: block
}
.sales-proposal-software-for-field-service .activityRow p {
font-size: 10px !important;
margin-top: 4px !important;
line-height: 1.55 !important;
color: var(--muted)
}
.sales-proposal-software-for-field-service .activityRow>small {
font-size: 9px;
color: var(--muted);
padding-top: 3px;
white-space: nowrap
}
.sales-proposal-software-for-field-service .followupNote {
border-left: 3px solid var(--yellow);
background: #0C2333;
border-radius: 0 11px 11px 0;
padding: 14px 16px;
color: #fff;
margin-top: 13px
}
.sales-proposal-software-for-field-service .followupNote strong {
display: block;
font-size: 12px
}
.sales-proposal-software-for-field-service .followupNote p {
font-size: 10px !important;
color: #CDDEE7;
line-height: 1.65 !important;
margin-top: 5px !important
} .sales-proposal-software-for-field-service .heroOption .optionTicks {
display: none
}
.sales-proposal-software-for-field-service .heroOption {
padding: 10px
}
.sales-proposal-software-for-field-service .heroOption .optionPrice {
margin: 8px 0 5px
}
.sales-proposal-software-for-field-service .heroOption .optionSummary {
min-height: 28px
}
.sales-proposal-software-for-field-service .heroOption .optionAction {
margin-top: 8px
}
.sales-proposal-software-for-field-service .boardHeader {
padding: 12px 15px
}
.sales-proposal-software-for-field-service .proposalHeader {
padding: 13px 16px 11px
}
.sales-proposal-software-for-field-service .assetPhone .signature {
display: none
}
.sales-proposal-software-for-field-service .assetPhone .mockAction {
margin-top: 12px
} .sales-proposal-software-for-field-service .visual {
box-shadow: none
}
.sales-proposal-software-for-field-service .featureCard:hover {
transform: none
}
.sales-proposal-software-for-field-service .outcome,
.sales-proposal-software-for-field-service .featureCard,
.sales-proposal-software-for-field-service .connectedCard,
.sales-proposal-software-for-field-service .review,
.sales-proposal-software-for-field-service .useCase {
box-shadow: none
}
.sales-proposal-software-for-field-service .aiMini {
align-items: stretch
}
.sales-proposal-software-for-field-service .aiMini span {
display: block
}
.sales-proposal-software-for-field-service .feature .fi {
align-items: flex-start
}
.sales-proposal-software-for-field-service .tick {
line-height: 1
}
.sales-proposal-software-for-field-service .feature .visual figcaption {
margin-top: 15px
}
.sales-proposal-software-for-field-service .faq summary {
min-height: 24px
}
.sales-proposal-software-for-field-service .fsmTools__flow {
list-style: none
}
@media (max-width:1100px) and (min-width:961px) {
.sales-proposal-software-for-field-service .heroGrid {
gap: 28px
} .sales-proposal-software-for-field-service .hero .lead {
font-size: 17px
}
.sales-proposal-software-for-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 162px;
gap: 12px 10px
}
.sales-proposal-software-for-field-service .proposalBoard {
margin-right: 18px
}
.sales-proposal-software-for-field-service .presentBadge {
display: none
}
.sales-proposal-software-for-field-service .boardFooter {
padding-right: 158px
}
.sales-proposal-software-for-field-service .heroOptions {
gap: 7px;
padding: 0 13px 13px
}
.sales-proposal-software-for-field-service .heroOption {
padding: 10px 8px
}
.sales-proposal-software-for-field-service .optionPrice {
font-size: 24px
}
.sales-proposal-software-for-field-service .contextBody {
margin-left: 0
}
.sales-proposal-software-for-field-service .visual {
padding: 18px
}
.sales-proposal-software-for-field-service .approvalScene {
grid-template-columns: 164px minmax(0, 1fr);
gap: 15px
}
.sales-proposal-software-for-field-service .builderLayout {
grid-template-columns: 96px minmax(0, 1fr)
}
.sales-proposal-software-for-field-service .builderSide {
padding: 11px 7px
}
.sales-proposal-software-for-field-service .builderBlock {
font-size: 9px;
padding: 9px 6px;
gap: 5px
}
.sales-proposal-software-for-field-service .proposalPaper {
padding: 14px
}
.sales-proposal-software-for-field-service .proposalCard {
padding: 13px 9px
}
.sales-proposal-software-for-field-service .proposalPrice {
font-size: 27px
}
.sales-proposal-software-for-field-service .proposalList>span {
font-size: 8.5px
}
.sales-proposal-software-for-field-service .paperMedia {
grid-template-columns: 60px minmax(0, 1fr);
padding: 8px
}
}
@media (max-width:960px) {
.sales-proposal-software-for-field-service .heroGrid,
.sales-proposal-software-for-field-service .feature,
.sales-proposal-software-for-field-service .aiGrid,
.sales-proposal-software-for-field-service .final {
grid-template-columns: 1fr
}
.sales-proposal-software-for-field-service .heroGrid {
gap: 36px
}
.sales-proposal-software-for-field-service .hero h1 {
max-width: 800px
}
.sales-proposal-software-for-field-service .hero .lead {
max-width: 750px
}
.sales-proposal-software-for-field-service .heroVisual {
width: 100%;
max-width: 620px;
margin: 0 auto
}
.sales-proposal-software-for-field-service .assetStage {
margin: auto
}
.sales-proposal-software-for-field-service .feature.reverse .visual {
order: 0
}
.sales-proposal-software-for-field-service .feature {
gap: 30px
}
.sales-proposal-software-for-field-service .feature>div:first-child {
max-width: 800px
}
.sales-proposal-software-for-field-service .outcomes,
.sales-proposal-software-for-field-service .featureGrid,
.sales-proposal-software-for-field-service .connectedGrid,
.sales-proposal-software-for-field-service .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.sales-proposal-software-for-field-service .logos {
grid-template-columns: repeat(3, 1fr)
}
.sales-proposal-software-for-field-service .reviews {
grid-template-columns: 1fr
}
.sales-proposal-software-for-field-service .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.sales-proposal-software-for-field-service .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.sales-proposal-software-for-field-service .ratingItem:nth-child(2) {
border: 0
}
.sales-proposal-software-for-field-service .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.sales-proposal-software-for-field-service .final .btn {
min-width: 195px
}
.sales-proposal-software-for-field-service .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.sales-proposal-software-for-field-service .aiGrid {
gap: 30px
}
.sales-proposal-software-for-field-service .aiMini {
max-width: 760px
}
.sales-proposal-software-for-field-service .promptBox {
width: 100%
}
.sales-proposal-software-for-field-service .cta {
flex-wrap: wrap
}
}
@media (max-width:640px) {
.sales-proposal-software-for-field-service .wrap {
width: calc(100% - 24px)
}
.sales-proposal-software-for-field-service section {
padding: 56px 0
}
.sales-proposal-software-for-field-service .hero {
padding: 32px 0 42px
} .sales-proposal-software-for-field-service h2 {
font-size: 34px
}
.sales-proposal-software-for-field-service .lead {
font-size: 17px
}
.sales-proposal-software-for-field-service .sectionHead p {
font-size: 16px
}
.sales-proposal-software-for-field-service .sectionHead {
margin-bottom: 28px
}
.sales-proposal-software-for-field-service .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.sales-proposal-software-for-field-service .heroGrid {
gap: 28px
}
.sales-proposal-software-for-field-service .hero .actions {
gap: 8px
}
.sales-proposal-software-for-field-service .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.sales-proposal-software-for-field-service .micro {
font-size: 11px
}
.sales-proposal-software-for-field-service .heroPills {
gap: 6px
}
.sales-proposal-software-for-field-service .heroPills span {
font-size: 9px
}
.sales-proposal-software-for-field-service .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.sales-proposal-software-for-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 162px;
gap: 12px 10px
}
.sales-proposal-software-for-field-service .assetTag {
margin-left: 0;
font-size: 9px
}
.sales-proposal-software-for-field-service .proposalBoard {
margin-right: 0
}
.sales-proposal-software-for-field-service .boardHeader {
padding: 12px
}
.sales-proposal-software-for-field-service .boardBrand {
font-size: 12px
}
.sales-proposal-software-for-field-service .sampleBadge {
font-size: 7px
}
.sales-proposal-software-for-field-service .proposalHeader {
padding: 14px 12px 12px
}
.sales-proposal-software-for-field-service .proposalHeader strong {
font-size: 15px
}
.sales-proposal-software-for-field-service .presentBadge {
display: none
}
.sales-proposal-software-for-field-service .heroOptions {
gap: 7px;
padding: 0 11px 13px
}
.sales-proposal-software-for-field-service .heroOption {
padding: 11px 8px
}
.sales-proposal-software-for-field-service .optionLabel {
font-size: 10px
}
.sales-proposal-software-for-field-service .optionPrice {
font-size: 24px
}
.sales-proposal-software-for-field-service .optionSummary {
font-size: 8px;
min-height: 29px
}
.sales-proposal-software-for-field-service .optionTicks {
font-size: 8px;
gap: 6px
}
.sales-proposal-software-for-field-service .optionTicks .icon2 {
height: 10px;
width: 10px;
flex-basis: 10px
}
.sales-proposal-software-for-field-service .optionAction {
font-size: 8px
}
.sales-proposal-software-for-field-service .boardFooter {
padding: 10px 166px 10px 12px;
font-size: 8px;
min-height: 51px
}
.sales-proposal-software-for-field-service .assetPhone {
margin-top: -47px;
border-radius: 24px
}
.sales-proposal-software-for-field-service .phoneScreen {
border-radius: 18px
}
.sales-proposal-software-for-field-service .phoneHead {
padding: 10px 9px
}
.sales-proposal-software-for-field-service .phoneHead strong {
font-size: 10px
}
.sales-proposal-software-for-field-service .phoneHead small {
font-size: 8px
}
.sales-proposal-software-for-field-service .phoneBody {
padding: 12px 9px
}
.sales-proposal-software-for-field-service .phoneBody>strong {
font-size: 12px
}
.sales-proposal-software-for-field-service .phonePrice {
font-size: 26px
}
.sales-proposal-software-for-field-service .proposalContext {
margin-left: 0;
padding: 12px
}
.sales-proposal-software-for-field-service .contextHead {
gap: 7px;
font-size: 10px;
align-items: flex-start
}
.sales-proposal-software-for-field-service .contextHead>.icon {
width: 17px;
height: 17px;
flex-basis: 17px
}
.sales-proposal-software-for-field-service .contextBody {
margin: 8px 0 0;
font-size: 10px
}
.sales-proposal-software-for-field-service .diagramCaption {
font-size: 9px
}
.sales-proposal-software-for-field-service .trust {
padding: 23px 0
}
.sales-proposal-software-for-field-service .trustLabel {
font-size: 12px
}
.sales-proposal-software-for-field-service .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.sales-proposal-software-for-field-service .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.sales-proposal-software-for-field-service .logo.dhl {
font-size: 19px
}
.sales-proposal-software-for-field-service .logo.adobe {
font-size: 17px
}
.sales-proposal-software-for-field-service .logo.golden {
font-size: 8px
}
.sales-proposal-software-for-field-service .fl,
.sales-proposal-software-for-field-service .outcomes,
.sales-proposal-software-for-field-service .featureGrid,
.sales-proposal-software-for-field-service .connectedGrid,
.sales-proposal-software-for-field-service .useCases {
grid-template-columns: 1fr
}
.sales-proposal-software-for-field-service .fi {
font-size: 14px
}
.sales-proposal-software-for-field-service .outcome {
padding: 21px
}
.sales-proposal-software-for-field-service .outcome strong {
margin-top: 12px
}
.sales-proposal-software-for-field-service .outcome span {
font-size: 14px
}
.sales-proposal-software-for-field-service .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.sales-proposal-software-for-field-service .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.sales-proposal-software-for-field-service .uiSub {
font-size: 9px
}
.sales-proposal-software-for-field-service .visualNote {
font-size: 11px !important
}
.sales-proposal-software-for-field-service .builderLayout {
grid-template-columns: 90px minmax(0, 1fr)
}
.sales-proposal-software-for-field-service .builderSide {
padding: 11px 6px
}
.sales-proposal-software-for-field-service .builderBlock {
padding: 9px 6px;
gap: 5px;
font-size: 9px
}
.sales-proposal-software-for-field-service .builderBlock .icon2 {
width: 12px;
height: 12px
}
.sales-proposal-software-for-field-service .builderSide>strong {
font-size: 8px
}
.sales-proposal-software-for-field-service .proposalPaper {
padding: 14px 12px
}
.sales-proposal-software-for-field-service .paperMedia {
grid-template-columns: 1fr;
gap: 5px
}
.sales-proposal-software-for-field-service .unitDrawing {
height: 61px;
max-width: 110px;
margin: auto
}
.sales-proposal-software-for-field-service .paperMedia small {
font-size: 9px
}
.sales-proposal-software-for-field-service .scopeRows div {
font-size: 9px
}
.sales-proposal-software-for-field-service .paperHeading {
font-size: 18px
}
.sales-proposal-software-for-field-service .proposalGrid {
grid-template-columns: 1fr;
gap: 12px
}
.sales-proposal-software-for-field-service .proposalCard {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 0 15px;
padding: 16px
}
.sales-proposal-software-for-field-service .proposalName {
grid-column: 1;
grid-row: 1;
font-size: 14px
}
.sales-proposal-software-for-field-service .proposalPrice {
grid-column: 1;
grid-row: 2;
font-size: 30px;
margin: 7px 0 4px
}
.sales-proposal-software-for-field-service .proposalPurpose {
grid-column: 1;
grid-row: 3;
font-size: 10px;
min-height: 0
}
.sales-proposal-software-for-field-service .proposalList {
grid-column: 2;
grid-row: 1/4;
margin: 0;
border: 0;
padding: 0;
gap: 9px;
align-content: center
}
.sales-proposal-software-for-field-service .proposalList>span {
font-size: 11px
}
.sales-proposal-software-for-field-service .proposalChoice {
grid-column: 1/-1;
margin-top: 15px;
font-size: 11px;
padding: 8px
}
.sales-proposal-software-for-field-service .presentBar {
padding: 12px
}
.sales-proposal-software-for-field-service .presentBar>span {
font-size: 11px
}
.sales-proposal-software-for-field-service .presentBar>small {
font-size: 8px
}
.sales-proposal-software-for-field-service .approvalScene {
grid-template-columns: 164px minmax(0, 1fr);
gap: 14px
}
.sales-proposal-software-for-field-service .approvalDevice .phoneBody {
padding: 13px 10px
}
.sales-proposal-software-for-field-service .approvalDevice .phoneBody>strong {
font-size: 13px
}
.sales-proposal-software-for-field-service .approvalDevice .phoneBody>p {
font-size: 9px
}
.sales-proposal-software-for-field-service .approvalDevice .phonePrice {
font-size: 27px
}
.sales-proposal-software-for-field-service .approvalSteps {
gap: 15px
}
.sales-proposal-software-for-field-service .approvalStep {
grid-template-columns: 27px minmax(0, 1fr);
gap: 8px
}
.sales-proposal-software-for-field-service .stepTile {
height: 27px;
width: 27px;
border-radius: 8px
}
.sales-proposal-software-for-field-service .stepTile .icon2 {
height: 15px;
width: 15px
}
.sales-proposal-software-for-field-service .approvalStep strong {
font-size: 11px
}
.sales-proposal-software-for-field-service .approvalStep p {
font-size: 10px !important
}
.sales-proposal-software-for-field-service .approvalFooter {
padding: 11px
}
.sales-proposal-software-for-field-service .activityMetrics {
gap: 8px
}
.sales-proposal-software-for-field-service .activityMetrics>div {
padding: 12px 10px
}
.sales-proposal-software-for-field-service .activityMetrics strong {
font-size: 11px
}
.sales-proposal-software-for-field-service .activityHeader {
padding: 12px
}
.sales-proposal-software-for-field-service .activityRows {
padding: 14px
}
.sales-proposal-software-for-field-service .activityRow {
gap: 8px
}
.sales-proposal-software-for-field-service .activityRow p {
font-size: 10px !important
}
.sales-proposal-software-for-field-service .activityRow>small {
font-size: 8px
}
.sales-proposal-software-for-field-service .followupNote p {
font-size: 11px !important
}
.sales-proposal-software-for-field-service .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.sales-proposal-software-for-field-service .aiMini div {
padding: 16px
}
.sales-proposal-software-for-field-service .aiMini strong {
font-size: 14px
}
.sales-proposal-software-for-field-service .aiMini span {
font-size: 13px
}
.sales-proposal-software-for-field-service .promptBox {
padding: 18px;
border-radius: 17px
}
.sales-proposal-software-for-field-service .prompt {
font-size: 13px;
padding: 13px
}
.sales-proposal-software-for-field-service .promptHead {
font-size: 19px
}
.sales-proposal-software-for-field-service .promptFoot {
font-size: 10px !important
}
.sales-proposal-software-for-field-service .connectedCard {
padding: 22px
}
.sales-proposal-software-for-field-service .connectedCard p,
.sales-proposal-software-for-field-service .featureCard p,
.sales-proposal-software-for-field-service .useCase p {
font-size: 14px
}
.sales-proposal-software-for-field-service .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.sales-proposal-software-for-field-service .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.sales-proposal-software-for-field-service .ratingItem {
border: 0
}
.sales-proposal-software-for-field-service .ratingLead {
margin-bottom: 3px
}
.sales-proposal-software-for-field-service .review p {
font-size: 14px
}
.sales-proposal-software-for-field-service .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.sales-proposal-software-for-field-service .ctaBtns {
width: 100%
}
.sales-proposal-software-for-field-service .ctaBtns .btn {
flex: 1
}
.sales-proposal-software-for-field-service .cta p {
font-size: 14px
}
.sales-proposal-software-for-field-service .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.sales-proposal-software-for-field-service .final h2 {
font-size: 32px
}
.sales-proposal-software-for-field-service .final p {
font-size: 15px
}
.sales-proposal-software-for-field-service .final .ctaBtns {
flex-direction: column
}
.sales-proposal-software-for-field-service .final .btn {
min-width: 0;
width: 100%
}
.sales-proposal-software-for-field-service .faq details {
padding: 16px
}
.sales-proposal-software-for-field-service .faq summary,
.sales-proposal-software-for-field-service .faq details p {
font-size: 14px
}
}
@media (max-width:360px) { .sales-proposal-software-for-field-service h2 {
font-size: 31px
}
.sales-proposal-software-for-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 143px;
gap: 10px 8px
}
.sales-proposal-software-for-field-service .heroOption {
padding: 10px 6px
}
.sales-proposal-software-for-field-service .heroOptions {
gap: 5px;
padding: 0 9px 12px
}
.sales-proposal-software-for-field-service .optionLabel {
font-size: 9px
}
.sales-proposal-software-for-field-service .optionLabel .icon2 {
width: 11px;
height: 11px
}
.sales-proposal-software-for-field-service .optionPrice {
font-size: 22px
}
.sales-proposal-software-for-field-service .optionTicks {
font-size: 7.5px;
gap: 6px
}
.sales-proposal-software-for-field-service .optionTicks .icon2 {
height: 9px;
width: 9px;
flex-basis: 9px
}
.sales-proposal-software-for-field-service .optionSummary {
font-size: 8px
}
.sales-proposal-software-for-field-service .optionAction {
font-size: 7px
}
.sales-proposal-software-for-field-service .boardFooter {
padding-right: 148px;
font-size: 7.5px
}
.sales-proposal-software-for-field-service .proposalContext {
padding: 11px
}
.sales-proposal-software-for-field-service .contextHead {
font-size: 9px
}
.sales-proposal-software-for-field-service .contextBody {
font-size: 9px
}
.sales-proposal-software-for-field-service .phoneHead small {
font-size: 7px
}
.sales-proposal-software-for-field-service .phoneBody>strong {
font-size: 11px
}
.sales-proposal-software-for-field-service .phoneBody>p {
font-size: 8px
}
.sales-proposal-software-for-field-service .phonePrice {
font-size: 24px
}
.sales-proposal-software-for-field-service .mockAction {
font-size: 9px
}
.sales-proposal-software-for-field-service .phoneFine {
font-size: 6.5px
}
.sales-proposal-software-for-field-service .builderLayout {
grid-template-columns: 1fr
}
.sales-proposal-software-for-field-service .builderSide {
display: none
}
.sales-proposal-software-for-field-service .paperMedia {
grid-template-columns: 78px minmax(0, 1fr)
}
.sales-proposal-software-for-field-service .approvalScene {
grid-template-columns: 1fr
}
.sales-proposal-software-for-field-service .approvalDevice {
width: 198px;
margin: auto
}
.sales-proposal-software-for-field-service .approvalSteps {
margin-top: 8px
}
.sales-proposal-software-for-field-service .approvalStep strong {
font-size: 13px
}
.sales-proposal-software-for-field-service .approvalStep p {
font-size: 12px !important
}
.sales-proposal-software-for-field-service .approvalFooter p {
font-size: 11px !important
}
.sales-proposal-software-for-field-service .proposalCard {
padding: 14px;
grid-template-columns: 80px minmax(0, 1fr);
gap: 0 12px
}
.sales-proposal-software-for-field-service .proposalList>span {
font-size: 10px
}
.sales-proposal-software-for-field-service .activityRow {
grid-template-columns: 24px minmax(0, 1fr)
}
.sales-proposal-software-for-field-service .activityRow>small {
grid-column: 2;
white-space: normal;
padding-top: 0
}
.sales-proposal-software-for-field-service .activityMetrics strong {
font-size: 10px
}
.sales-proposal-software-for-field-service .activityMetrics small {
font-size: 8px
}
}  .job-costing-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.job-costing-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.job-costing-software .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.job-costing-software .btn:hover {
transform: translateY(-2px)
}
.job-costing-software .btn.black {
background: #0b0b0b;
color: #fff
}
.job-costing-software .btn.black:hover {
background: #292929
}
.job-costing-software .btn.yellow {
background: var(--yellow);
color: #000
}
.job-costing-software .btn.yellow:hover {
background: #FFD454
}
.job-costing-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.job-costing-software .btn .icon2 {
width: 17px;
height: 17px
}
.job-costing-software a:focus-visible,
.job-costing-software summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.job-costing-software .dark a:focus-visible,
.job-costing-software .final a:focus-visible {
outline-color: var(--yellow)
}
.job-costing-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.job-costing-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.job-costing-software .soft {
background: var(--sky2)
}
.job-costing-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.job-costing-software .dark h2,
.job-costing-software .dark h3 {
color: #fff
}
.job-costing-software .dark p {
color: #D6D6D6
}
.job-costing-software .dark .ey {
background: var(--yellow)
}
.job-costing-software .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.job-costing-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.job-costing-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.job-costing-software .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.job-costing-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.job-costing-software .textLink .icon2 {
width: 16px;
height: 16px
}
.job-costing-software .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.job-costing-software .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.job-costing-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.job-costing-software .skipLink:focus {
top: 12px
}
.job-costing-software .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.job-costing-software .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.job-costing-software .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.job-costing-software .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.job-costing-software .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.job-costing-software .logo.adobe {
font-size: 20px
}
.job-costing-software .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.job-costing-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.job-costing-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.job-costing-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.job-costing-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.job-costing-software .outcome:nth-child(3):before {
background: var(--green)
}
.job-costing-software .outcome:nth-child(4):before {
background: var(--purple)
}
.job-costing-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.job-costing-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.job-costing-software .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
}
.job-costing-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.job-costing-software .feature.reverse .visual {
order: -1
}
.job-costing-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.job-costing-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.job-costing-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.job-costing-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.job-costing-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.job-costing-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.job-costing-software .visual>* {
position: relative;
z-index: 2
}
.job-costing-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.job-costing-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.job-costing-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.job-costing-software .uiHeading .icon2 {
width: 19px;
height: 19px
}
.job-costing-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.job-costing-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.job-costing-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.job-costing-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.job-costing-software .pill.green {
background: var(--greenbg);
color: #116746
}
.job-costing-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.job-costing-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.job-costing-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.job-costing-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.job-costing-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.job-costing-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.job-costing-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.job-costing-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.job-costing-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.job-costing-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.job-costing-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.job-costing-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.job-costing-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.job-costing-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.job-costing-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.job-costing-software .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.job-costing-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.job-costing-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.job-costing-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.job-costing-software .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
}
.job-costing-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.job-costing-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.job-costing-software .featureCard:hover {
transform: translateY(-3px)
}
.job-costing-software .featureIcon,
.job-costing-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.job-costing-software .featureIcon .icon,
.job-costing-software .useIcon .icon2 {
width: 22px;
height: 22px
}
.job-costing-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.job-costing-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.job-costing-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.job-costing-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.job-costing-software .useCase h3 {
font-size: 20px
}
.job-costing-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.job-costing-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.job-costing-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.job-costing-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.job-costing-software .review h3 {
font-size: 22px
}
.job-costing-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.job-costing-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.job-costing-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.job-costing-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.job-costing-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.job-costing-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.job-costing-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.job-costing-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.job-costing-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.job-costing-software .faq {
max-width: 900px
}
.job-costing-software .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.job-costing-software .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.job-costing-software .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.job-costing-software .faq summary::marker {
color: var(--navy)
}
.job-costing-software .faq details[open] {
border-color: #A9D3E7
}
.job-costing-software .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.job-costing-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.job-costing-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.job-costing-software .cta h3 {
font-size: 19px
}
.job-costing-software .cta.darkCta h3 {
color: #fff
}
.job-costing-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.job-costing-software .cta.darkCta p {
color: #D1D1D1
}
.job-costing-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.job-costing-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.job-costing-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.job-costing-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.job-costing-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.job-costing-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.job-costing-software .reveal {
opacity: 1;
transform: none
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.job-costing-software #connected-tools.fsmTools *,
.job-costing-software #connected-tools.fsmTools *::before,
.job-costing-software #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.job-costing-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.job-costing-software #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.job-costing-software #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.job-costing-software #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.job-costing-software #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.job-costing-software #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.job-costing-software #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__step::before,
.job-costing-software #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.job-costing-software #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.job-costing-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.job-costing-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.job-costing-software #connected-tools.fsmTools {
padding: 52px 0;
}
.job-costing-software #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.job-costing-software #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.job-costing-software #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.job-costing-software #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.job-costing-software #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card,
.job-costing-software #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.job-costing-software #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.job-costing-software #connected-tools.fsmTools h2 {
font-size: 30px;
}
.job-costing-software #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.job-costing-software #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.job-costing-software  .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.job-costing-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.job-costing-software .heroGrid>*,
.job-costing-software .feature>*,
.job-costing-software .aiGrid>* {
min-width: 0
}
.job-costing-software .hero h1 {
max-width: 590px
}
.job-costing-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.job-costing-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.job-costing-software .heroVisual {
position: relative;
min-width: 0
}
.job-costing-software .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 177px;
gap: 13px 12px;
align-items: start
}
.job-costing-software .assetStage:before {
content: "";
position: absolute;
inset: 42px -8px 14px 20px;
border-radius: 26px;
background: linear-gradient(rgba(0, 168, 248, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .065) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.job-costing-software .assetStage>* {
position: relative;
z-index: 1
}
.job-costing-software .assetTag {
grid-column: 1/-1;
justify-self: start;
margin-left: 12px;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px
}
.job-costing-software .costBoard {
grid-column: 1/-1;
margin-right: 18px;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 19px;
overflow: hidden
}
.job-costing-software .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 16px;
border-bottom: 1px solid var(--line)
}
.job-costing-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.job-costing-software .brandTile {
width: 28px;
height: 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.job-costing-software .brandTile .icon2 {
width: 18px;
height: 18px
}
.job-costing-software .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.job-costing-software .boardBody {
padding: 15px 16px
}
.job-costing-software .boardTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px
}
.job-costing-software .boardTitle strong {
display: block;
font-size: 15px;
line-height: 1.3;
color: var(--navy)
}
.job-costing-software .boardTitle small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px
}
.job-costing-software .boardTitle>.pill {
font-size: 8px
}
.job-costing-software .jcMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
.job-costing-software .jcMetric {
padding: 12px 10px;
border: 1px solid #CEE6F3;
border-radius: 10px;
background: #F5FBFF;
min-width: 0
}
.job-costing-software .jcMetric>span {
display: block;
font-size: 9px;
color: #536D7F
}
.job-costing-software .jcMetric>strong {
display: block;
margin-top: 5px;
font-size: 26px;
line-height: 1.15;
letter-spacing: -.035em;
color: var(--navy)
}
.job-costing-software .jcMetric.profit {
background: #FFFBEA;
border-color: #EDD893
}
.job-costing-software .jcMetric small {
display: block;
font-size: 8px;
color: #607487;
margin-top: 5px
}
.job-costing-software .heroCostDetail {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 12px;
margin-top: 12px
}
.job-costing-software .heroCategories {
padding: 13px;
border: 1px solid var(--line);
border-radius: 11px
}
.job-costing-software .panelTitle {
font-size: 11px;
font-weight: 800;
color: var(--ink);
display: block;
line-height: 1.4
}
.job-costing-software .miniCost {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 5px 8px;
margin-top: 11px;
font-size: 10px
}
.job-costing-software .miniCost>span {
color: var(--muted)
}
.job-costing-software .miniCost>b {
color: var(--navy);
font-size: 11px
}
.job-costing-software .miniTrack {
grid-column: 1/-1;
background: #EDF4F8;
border-radius: 4px;
height: 5px;
overflow: hidden
}
.job-costing-software .miniTrack>i {
height: 100%;
width: var(--fill, 50%);
background: var(--brand);
display: block;
border-radius: 4px
}
.job-costing-software .miniCost.material .miniTrack>i {
background: var(--green)
}
.job-costing-software .miniCost.commission .miniTrack>i {
background: var(--yellow)
}
.job-costing-software .marginPanel {
padding: 14px 10px;
border: 1px solid var(--line);
border-radius: 11px;
background: #FAFDFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center
}
.job-costing-software .marginRing {
width: 97px;
height: 97px;
border-radius: 50%;
background: conic-gradient(var(--green) 0 30%, #E8F1F6 30% 100%);
display: grid;
place-items: center;
position: relative;
margin: 10px 0 5px
}
.job-costing-software .marginRing:before {
content: "";
position: absolute;
inset: 10px;
background: #fff;
border-radius: 50%
}
.job-costing-software .marginRing>strong {
position: relative;
font-size: 28px;
color: var(--navy);
letter-spacing: -.035em;
line-height: 1.2
}
.job-costing-software .marginPanel>small {
font-size: 8px;
line-height: 1.5;
color: var(--muted);
max-width: 120px
}
.job-costing-software .boardFooter {
padding: 10px 184px 10px 14px;
background: var(--sky2);
border-top: 1px solid var(--line);
font-size: 9px;
line-height: 1.5;
color: #536F82;
min-height: 40px;
display: flex;
gap: 6px;
align-items: center
}
.job-costing-software .boardFooter .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.job-costing-software .insightCard {
grid-column: 1;
margin-left: 10px;
background: #0E293A;
border: 1px solid #294653;
border-radius: 14px;
padding: 15px;
color: #fff;
display: flex;
gap: 11px;
align-items: flex-start
}
.job-costing-software .insightIcon {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
background: var(--yellow);
color: #11283A;
border-radius: 9px
}
.job-costing-software .insightIcon .icon2 {
height: 19px;
width: 19px
}
.job-costing-software .insightCard strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.job-costing-software .insightCard p {
font-size: 11px;
color: #CCDEE9;
line-height: 1.6;
margin-top: 6px
}
.job-costing-software .insightCard small {
display: block;
font-size: 9px;
color: #AEC9D9;
margin-top: 8px
}
.job-costing-software .assetPhone {
grid-column: 2;
grid-row: 3;
margin-top: -33px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.job-costing-software .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.job-costing-software .phoneTop {
height: 16px;
background: #0C1E2A;
display: grid;
place-items: center
}
.job-costing-software .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.job-costing-software .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.job-costing-software .phoneHead strong {
display: block;
font-size: 11px;
line-height: 1.4
}
.job-costing-software .phoneHead small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 3px
}
.job-costing-software .phoneBody {
padding: 13px 10px 10px
}
.job-costing-software .phoneKicker {
text-align: center;
font-size: 8px;
color: var(--muted);
display: block;
letter-spacing: .035em;
text-transform: uppercase
}
.job-costing-software .phoneNumber {
display: block;
text-align: center;
font-size: 34px;
line-height: 1.2;
color: var(--navy);
font-weight: 850;
letter-spacing: -.04em;
margin: 8px 0 3px
}
.job-costing-software .phoneSub {
text-align: center;
font-size: 9px;
color: var(--muted)
}
.job-costing-software .phoneRow {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 9px;
border-top: 1px solid var(--line);
padding: 9px 0;
margin-top: 9px;
color: var(--muted);
line-height: 1.45
}
.job-costing-software .phoneRow b {
color: var(--navy);
font-size: 10px
}
.job-costing-software .phoneNote {
padding: 8px 7px;
border-radius: 7px;
background: var(--greenbg);
color: #12664A;
font-size: 8px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 3px
}
.job-costing-software .phoneNote .icon2 {
width: 12px;
height: 12px
}
.job-costing-software .diagramCaption {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
text-align: center;
margin-top: 12px
}
.job-costing-software .jcTopline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: #0E293A;
color: #fff;
padding: 17px;
border-radius: 13px;
margin-bottom: 14px
}
.job-costing-software .jcTopline strong {
display: block;
font-size: 15px;
line-height: 1.4
}
.job-costing-software .jcTopline small {
display: block;
font-size: 10px;
color: #C1D9E6;
margin-top: 4px
}
.job-costing-software .jcTopline>b {
font-size: 27px;
letter-spacing: -.03em;
color: var(--yellow);
white-space: nowrap
}
.job-costing-software .costLedger {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
overflow: hidden
}
.job-costing-software .costLedgerRow {
display: grid;
grid-template-columns: 35px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 16px 15px;
border-bottom: 1px solid #E4EDF2
}
.job-costing-software .costLedgerRow:last-child {
border-bottom: 0
}
.job-costing-software .categoryIcon {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
background: #EAF8FF;
color: var(--navy)
}
.job-costing-software .categoryIcon .icon2 {
height: 19px;
width: 19px
}
.job-costing-software .categoryIcon.green {
background: var(--greenbg);
color: var(--green)
}
.job-costing-software .categoryIcon.yellow {
background: var(--yellowsoft);
color: #8A6609
}
.job-costing-software .costLedgerRow strong {
display: block;
font-size: 13px;
line-height: 1.4
}
.job-costing-software .costLedgerRow small {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 4px
}
.job-costing-software .costLedgerRow>b {
font-size: 17px;
line-height: 1.3;
color: var(--navy);
white-space: nowrap
}
.job-costing-software .costTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: #EFF8FC;
border-radius: 11px;
margin-top: 12px;
font-size: 12px;
font-weight: 800;
color: var(--navy)
}
.job-costing-software .costTotal b {
font-size: 23px;
letter-spacing: -.03em
}
.job-costing-software .dataNote {
font-size: 10px;
color: #577184;
line-height: 1.7;
margin-top: 12px;
display: flex;
align-items: flex-start;
gap: 7px
}
.job-costing-software .dataNote .icon2 {
width: 15px;
height: 15px;
flex: 0 0 15px;
color: var(--navy);
margin-top: 2px
}
.job-costing-software .budgetSummary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 14px
}
.job-costing-software .budgetSummary>div {
padding: 14px 11px;
border-radius: 11px;
background: #fff;
border: 1px solid var(--line)
}
.job-costing-software .budgetSummary small {
font-size: 9px;
color: var(--muted);
display: block
}
.job-costing-software .budgetSummary strong {
font-size: 25px;
color: var(--navy);
display: block;
letter-spacing: -.035em;
margin-top: 7px;
line-height: 1.2
}
.job-costing-software .budgetSummary span {
display: block;
color: var(--muted);
font-size: 9px;
margin-top: 5px
}
.job-costing-software .budgetSummary .over {
background: #FFF8E7;
border-color: #EAD38B
}
.job-costing-software .budgetSummary .over strong {
color: #8B5611
}
.job-costing-software .budgetTable {
width: 100%;
border-spacing: 0;
border-collapse: separate;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
overflow: hidden;
font-size: 11px
}
.job-costing-software .budgetTable th,
.job-costing-software .budgetTable td {
padding: 13px 10px;
text-align: right;
border-bottom: 1px solid #E6EDF3;
line-height: 1.45
}
.job-costing-software .budgetTable th:first-child,
.job-costing-software .budgetTable td:first-child {
text-align: left
}
.job-costing-software .budgetTable thead th {
font-size: 9px;
background: #F4FAFD;
color: var(--muted)
}
.job-costing-software .budgetTable tbody th {
font-size: 11px;
color: var(--ink);
font-weight: 750
}
.job-costing-software .budgetTable tr:last-child>* {
border-bottom: 0
}
.job-costing-software .budgetTable td:last-child {
color: #8B5611;
font-weight: 750
}
.job-costing-software .budgetTable td.same {
color: #536D7E
}
.job-costing-software .budgetTable tfoot th,
.job-costing-software .budgetTable tfoot td {
background: #EEF8FC;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 800
}
.job-costing-software .budgetBars {
display: grid;
gap: 11px;
margin-top: 14px;
padding: 15px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.job-costing-software .budgetBar {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 47px;
align-items: center;
gap: 10px;
font-size: 10px;
color: var(--muted)
}
.job-costing-software .budgetBar>div {
height: 12px;
background: #EFF4F7;
border-radius: 4px;
overflow: hidden
}
.job-costing-software .budgetBar i {
display: block;
width: var(--w);
height: 100%;
background: #A7C5D6;
border-radius: 4px
}
.job-costing-software .budgetBar.actual i {
background: var(--brand)
}
.job-costing-software .budgetBar b {
color: var(--navy);
text-align: right;
font-size: 10px
}
.job-costing-software .varianceNote {
padding: 12px 14px;
border-radius: 10px;
background: var(--yellowsoft);
border: 1px solid #EEDC9C;
margin-top: 13px;
font-size: 11px;
line-height: 1.7;
color: #71571D
}
.job-costing-software .fieldScene {
display: grid;
grid-template-columns: 175px minmax(0, 1fr);
gap: 18px;
align-items: center
}
.job-costing-software .fieldPhone {
border-radius: 26px;
background: #0C1E2A;
border: 1px solid #324D5F;
padding: 6px
}
.job-costing-software .fieldPhone .phoneHead strong {
font-size: 12px
}
.job-costing-software .fieldPhone .phoneNumber {
font-size: 35px
}
.job-costing-software .fieldField {
margin-top: 10px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 9px
}
.job-costing-software .fieldField small {
font-size: 8px;
color: var(--muted);
display: block
}
.job-costing-software .fieldField strong {
display: block;
font-size: 10px;
line-height: 1.4;
margin-top: 4px;
color: var(--navy)
}
.job-costing-software .fieldPhone .fieldMessage {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin: 11px 0
}
.job-costing-software .mockAction {
padding: 9px 10px;
text-align: center;
font-size: 10px;
font-weight: 800;
line-height: 1.4;
color: #101010;
background: var(--yellow);
border-radius: 7px
}
.job-costing-software .fieldSide {
display: grid;
gap: 12px;
min-width: 0
}
.job-costing-software .catalogCost {
padding: 15px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.job-costing-software .catalogIcon {
width: 33px;
height: 33px;
background: var(--sky);
color: var(--navy);
border-radius: 9px;
display: grid;
place-items: center;
margin-bottom: 9px
}
.job-costing-software .catalogIcon .icon2 {
width: 20px;
height: 20px
}
.job-costing-software .catalogCost>strong {
display: block;
font-size: 13px;
line-height: 1.45;
color: var(--ink)
}
.job-costing-software .catalogCost>small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px;
line-height: 1.5
}
.job-costing-software .priceFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px
}
.job-costing-software .priceFields>div {
border: 1px solid #DDE9F0;
background: #F6FBFE;
border-radius: 8px;
padding: 9px
}
.job-costing-software .priceFields small {
font-size: 9px;
color: var(--muted);
display: block
}
.job-costing-software .priceFields b {
font-size: 18px;
line-height: 1.3;
color: var(--navy);
display: block;
margin-top: 3px
}
.job-costing-software .fieldLink {
background: #0E293A;
padding: 14px;
border-radius: 11px;
color: #fff
}
.job-costing-software .fieldLink>strong {
font-size: 12px;
display: flex;
align-items: center;
gap: 7px;
line-height: 1.4
}
.job-costing-software .fieldLink .icon2 {
height: 16px;
width: 16px;
color: var(--yellow)
}
.job-costing-software .fieldLink p {
font-size: 10px !important;
line-height: 1.7;
color: #C3D9E6 !important;
margin-top: 6px !important
}
.job-costing-software .marginReport {
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden
}
.job-costing-software .marginReportHead {
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
font-weight: 800;
color: var(--navy);
background: #F4FAFD
}
.job-costing-software .marginReportHead small {
font-size: 9px;
font-weight: 500;
color: var(--muted)
}
.job-costing-software .profitRow {
display: grid;
grid-template-columns: minmax(0, 1fr) 70px 62px;
gap: 12px;
align-items: center;
padding: 14px;
border-top: 1px solid var(--line)
}
.job-costing-software .profitRow>div strong {
font-size: 12px;
display: block;
line-height: 1.4
}
.job-costing-software .profitRow small {
font-size: 9px;
display: block;
color: var(--muted);
margin-top: 4px
}
.job-costing-software .profitRow>b {
font-size: 16px;
color: var(--navy);
text-align: right
}
.job-costing-software .profitRow>span {
background: var(--greenbg);
color: #116746;
font-size: 14px;
font-weight: 800;
padding: 7px;
border-radius: 8px;
text-align: center
}
.job-costing-software .profitRow.header {
font-size: 9px;
color: var(--muted);
padding-top: 9px;
padding-bottom: 9px
}
.job-costing-software .profitRow.header>span {
font: inherit;
background: none;
padding: 0;
text-align: right;
color: inherit
}
.job-costing-software .reportNames {
display: grid;
gap: 8px;
margin-top: 14px
}
.job-costing-software .reportName {
background: #fff;
border: 1px solid var(--line);
border-radius: 9px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 9px;
font-size: 11px;
color: var(--navy);
font-weight: 750
}
.job-costing-software .reportName .icon2 {
width: 17px;
height: 17px;
flex: 0 0 17px;
color: #5388A5
}
.job-costing-software .reportName>span {
margin-left: auto;
font-size: 9px;
font-weight: 500;
color: var(--muted)
} @media(max-width:1100px) and (min-width:961px) {
.job-costing-software .heroGrid {
gap: 28px
} .job-costing-software .hero .lead {
font-size: 17px
}
.job-costing-software .assetStage {
grid-template-columns: minmax(0, 1fr) 154px;
gap: 12px 10px
}
.job-costing-software .boardFooter {
padding-right: 160px
}
.job-costing-software .boardBody {
padding: 13px
}
.job-costing-software .jcMetric {
padding: 10px 8px
}
.job-costing-software .jcMetric>strong {
font-size: 24px
}
.job-costing-software .jcMetric>span {
font-size: 8px
}
.job-costing-software .insightCard {
padding: 12px;
margin-left: 0;
gap: 8px
}
.job-costing-software .insightCard small {
font-size: 8px
}
.job-costing-software .insightIcon {
display: none
}
.job-costing-software .boardTitle strong {
font-size: 13px
}
.job-costing-software .boardTitle>.pill {
display: none
}
.job-costing-software .heroCostDetail {
gap: 9px
}
.job-costing-software .heroCategories {
padding: 11px
}
.job-costing-software .marginRing {
width: 85px;
height: 85px
}
.job-costing-software .visual {
padding: 18px
}
.job-costing-software .fieldScene {
grid-template-columns: 152px minmax(0, 1fr);
gap: 12px
}
.job-costing-software .catalogCost {
padding: 12px
}
.job-costing-software .priceFields {
gap: 5px
}
.job-costing-software .priceFields>div {
padding: 8px
}
.job-costing-software .priceFields b {
font-size: 16px
}
.job-costing-software .budgetTable th,
.job-costing-software .budgetTable td {
padding: 11px 8px
}
}
@media(max-width:960px) {
.job-costing-software .heroGrid,
.job-costing-software .feature,
.job-costing-software .aiGrid,
.job-costing-software .final {
grid-template-columns: 1fr
}
.job-costing-software .heroGrid {
gap: 36px
}
.job-costing-software .hero h1 {
max-width: 800px
}
.job-costing-software .hero .lead {
max-width: 750px
}
.job-costing-software .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.job-costing-software .assetStage {
margin: auto
}
.job-costing-software .feature.reverse .visual {
order: 0
}
.job-costing-software .feature {
gap: 30px
}
.job-costing-software .feature>div:first-child {
max-width: 800px
}
.job-costing-software .outcomes,
.job-costing-software .featureGrid,
.job-costing-software .connectedGrid,
.job-costing-software .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.job-costing-software .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.job-costing-software .reviews {
grid-template-columns: 1fr
}
.job-costing-software .ratingGrid {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.job-costing-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.job-costing-software .ratingItem:nth-child(2) {
border: 0
}
.job-costing-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.job-costing-software .final .btn {
min-width: 195px
}
.job-costing-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.job-costing-software .aiGrid {
gap: 30px
}
.job-costing-software .aiMini {
max-width: 760px
}
.job-costing-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.job-costing-software .wrap {
width: calc(100% - 24px)
}
.job-costing-software section {
padding: 56px 0
}
.job-costing-software .hero {
padding: 32px 0 42px
} .job-costing-software h2 {
font-size: 34px
}
.job-costing-software .lead {
font-size: 17px
}
.job-costing-software .sectionHead p {
font-size: 16px
}
.job-costing-software .sectionHead {
margin-bottom: 28px
}
.job-costing-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.job-costing-software .heroGrid {
gap: 26px
}
.job-costing-software .hero .actions {
gap: 8px
}
.job-costing-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.job-costing-software .micro {
font-size: 11px
}
.job-costing-software .heroPills {
gap: 6px
}
.job-costing-software .heroPills span {
font-size: 9px
}
.job-costing-software .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.job-costing-software .assetStage {
grid-template-columns: minmax(0, 1fr) 155px;
gap: 12px 10px
}
.job-costing-software .assetTag {
font-size: 9px;
margin-left: 0
}
.job-costing-software .costBoard {
margin-right: 0;
border-radius: 15px
}
.job-costing-software .boardHeader {
padding: 12px
}
.job-costing-software .boardBrand {
font-size: 12px
}
.job-costing-software .sampleBadge {
font-size: 7px
}
.job-costing-software .boardBody {
padding: 12px
}
.job-costing-software .boardTitle strong {
font-size: 13px
}
.job-costing-software .boardTitle small {
font-size: 9px
}
.job-costing-software .boardTitle>.pill {
display: none
}
.job-costing-software .jcMetrics {
gap: 7px
}
.job-costing-software .jcMetric {
padding: 10px 8px
}
.job-costing-software .jcMetric>span {
font-size: 8px
}
.job-costing-software .jcMetric>strong {
font-size: 23px
}
.job-costing-software .jcMetric small {
font-size: 7px
}
.job-costing-software .heroCostDetail {
grid-template-columns: 1.4fr 1fr;
gap: 9px
}
.job-costing-software .heroCategories {
padding: 11px
}
.job-costing-software .panelTitle {
font-size: 10px
}
.job-costing-software .miniCost {
font-size: 9px;
margin-top: 10px
}
.job-costing-software .miniCost>b {
font-size: 10px
}
.job-costing-software .marginPanel {
padding: 11px 8px
}
.job-costing-software .marginRing {
width: 82px;
height: 82px;
margin: 9px 0 5px
}
.job-costing-software .marginRing>strong {
font-size: 25px
}
.job-costing-software .marginPanel>small {
font-size: 7px
}
.job-costing-software .boardFooter {
padding: 9px 164px 9px 12px;
font-size: 8px;
min-height: 47px
}
.job-costing-software .assetPhone {
margin-top: -27px;
border-radius: 24px
}
.job-costing-software .phoneScreen {
border-radius: 18px
}
.job-costing-software .phoneHead {
padding: 10px 9px
}
.job-costing-software .phoneHead strong {
font-size: 10px
}
.job-costing-software .phoneHead small {
font-size: 7px
}
.job-costing-software .phoneBody {
padding: 12px 9px 9px
}
.job-costing-software .phoneNumber {
font-size: 31px
}
.job-costing-software .phoneNote {
font-size: 7px
}
.job-costing-software .phoneRow {
font-size: 8px
}
.job-costing-software .phoneRow b {
font-size: 9px
}
.job-costing-software .insightCard {
margin-left: 0;
padding: 12px;
display: block
}
.job-costing-software .insightIcon {
margin-bottom: 9px;
width: 27px;
height: 27px
}
.job-costing-software .insightCard strong {
font-size: 12px
}
.job-costing-software .insightCard p {
font-size: 10px
}
.job-costing-software .insightCard small {
font-size: 8px
}
.job-costing-software .diagramCaption {
font-size: 9px
}
.job-costing-software .trust {
padding: 23px 0
}
.job-costing-software .trustLabel {
font-size: 12px
}
.job-costing-software .logos {
gap: 7px
}
.job-costing-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.job-costing-software .logo.dhl {
font-size: 19px
}
.job-costing-software .logo.adobe {
font-size: 17px
}
.job-costing-software .logo.golden {
font-size: 8px
}
.job-costing-software .fl,
.job-costing-software .outcomes,
.job-costing-software .featureGrid,
.job-costing-software .connectedGrid,
.job-costing-software .useCases {
grid-template-columns: 1fr
}
.job-costing-software .fi {
font-size: 14px
}
.job-costing-software .outcome {
padding: 21px
}
.job-costing-software .outcome strong {
margin-top: 12px
}
.job-costing-software .outcome span {
font-size: 14px
}
.job-costing-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.job-costing-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.job-costing-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.job-costing-software .uiSub {
font-size: 9px
}
.job-costing-software .jcTopline {
padding: 14px
}
.job-costing-software .jcTopline strong {
font-size: 13px
}
.job-costing-software .jcTopline small {
font-size: 9px
}
.job-costing-software .jcTopline>b {
font-size: 24px
}
.job-costing-software .costLedgerRow {
padding: 14px 12px;
gap: 9px
}
.job-costing-software .costLedgerRow strong {
font-size: 12px
}
.job-costing-software .costLedgerRow small {
font-size: 9px
}
.job-costing-software .costLedgerRow>b {
font-size: 16px
}
.job-costing-software .costTotal {
padding: 13px;
font-size: 11px
}
.job-costing-software .costTotal b {
font-size: 22px
}
.job-costing-software .dataNote {
font-size: 10px
}
.job-costing-software .budgetSummary {
gap: 7px
}
.job-costing-software .budgetSummary>div {
padding: 12px 9px
}
.job-costing-software .budgetSummary strong {
font-size: 22px
}
.job-costing-software .budgetSummary small,
.job-costing-software .budgetSummary span {
font-size: 8px
}
.job-costing-software .budgetTable th,
.job-costing-software .budgetTable td {
padding: 11px 8px;
font-size: 10px
}
.job-costing-software .budgetTable thead th {
font-size: 8px
}
.job-costing-software .budgetTable tbody th {
font-size: 10px
}
.job-costing-software .budgetBars {
padding: 12px
}
.job-costing-software .varianceNote {
font-size: 10px
}
.job-costing-software .fieldScene {
grid-template-columns: 155px minmax(0, 1fr);
gap: 12px
}
.job-costing-software .fieldPhone .phoneHead strong {
font-size: 10px
}
.job-costing-software .fieldPhone .phoneNumber {
font-size: 31px
}
.job-costing-software .catalogCost {
padding: 12px
}
.job-costing-software .catalogCost>strong {
font-size: 12px
}
.job-costing-software .priceFields {
gap: 6px
}
.job-costing-software .priceFields>div {
padding: 8px 6px
}
.job-costing-software .priceFields b {
font-size: 16px
}
.job-costing-software .priceFields small {
font-size: 8px
}
.job-costing-software .fieldLink {
padding: 12px
}
.job-costing-software .fieldLink>strong {
font-size: 11px
}
.job-costing-software .fieldLink p {
font-size: 10px !important
}
.job-costing-software .profitRow {
gap: 8px;
padding: 12px;
grid-template-columns: minmax(0, 1fr) 64px 52px
}
.job-costing-software .profitRow>div strong {
font-size: 11px
}
.job-costing-software .profitRow small {
font-size: 8px
}
.job-costing-software .profitRow>b {
font-size: 14px
}
.job-costing-software .profitRow>span {
font-size: 12px
}
.job-costing-software .marginReportHead {
padding: 12px
}
.job-costing-software .reportName {
font-size: 10px;
padding: 10px
}
.job-costing-software .reportName>span {
font-size: 8px
}
.job-costing-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.job-costing-software .aiMini div {
padding: 16px
}
.job-costing-software .aiMini strong {
font-size: 14px
}
.job-costing-software .aiMini span {
font-size: 13px
}
.job-costing-software .promptBox {
padding: 18px;
border-radius: 17px
}
.job-costing-software .prompt {
font-size: 13px;
padding: 13px
}
.job-costing-software .promptHead {
font-size: 19px
}
.job-costing-software .promptFoot {
font-size: 10px !important
}
.job-costing-software .connectedCard {
padding: 22px
}
.job-costing-software .connectedCard p,
.job-costing-software .featureCard p,
.job-costing-software .useCase p {
font-size: 14px
}
.job-costing-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.job-costing-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px
}
.job-costing-software .ratingItem {
border: 0
}
.job-costing-software .ratingLead {
margin-bottom: 3px
}
.job-costing-software .review p {
font-size: 14px
}
.job-costing-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.job-costing-software .ctaBtns {
width: 100%
}
.job-costing-software .ctaBtns .btn {
flex: 1
}
.job-costing-software .cta p {
font-size: 14px
}
.job-costing-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.job-costing-software .final h2 {
font-size: 32px
}
.job-costing-software .final p {
font-size: 15px
}
.job-costing-software .final .ctaBtns {
flex-direction: column
}
.job-costing-software .final .btn {
min-width: 0;
width: 100%
}
.job-costing-software .faq details {
padding: 16px
}
.job-costing-software .faq summary {
font-size: 14px
}
.job-costing-software .faq details p {
font-size: 14px
}
}
@media(max-width:420px) {
.job-costing-software .fieldScene {
grid-template-columns: 1fr;
gap: 15px
}
.job-costing-software .fieldPhone {
width: 191px;
max-width: 100%;
margin: 0 auto
}
.job-costing-software .fieldPhone .phoneHead strong {
font-size: 12px
}
.job-costing-software .fieldPhone .phoneBody {
padding: 14px 12px
}
.job-costing-software .fieldField strong {
font-size: 11px
}
.job-costing-software .fieldMessage {
font-size: 10px
}
.job-costing-software .fieldSide {
grid-template-columns: 1fr
}
.job-costing-software .catalogCost>strong {
font-size: 13px
}
.job-costing-software .priceFields b {
font-size: 20px
}
.job-costing-software .priceFields small {
font-size: 10px
}
.job-costing-software .catalogCost>small {
font-size: 10px
}
.job-costing-software .fieldLink>strong {
font-size: 12px
}
.job-costing-software .fieldLink p {
font-size: 11px !important
}
}
@media(max-width:360px) { .job-costing-software h2 {
font-size: 31px
}
.job-costing-software .assetStage {
grid-template-columns: minmax(0, 1fr) 138px;
gap: 10px 8px
}
.job-costing-software .jcMetric {
padding: 9px 6px
}
.job-costing-software .jcMetric>strong {
font-size: 21px
}
.job-costing-software .jcMetric>span {
font-size: 7px
}
.job-costing-software .jcMetric small {
font-size: 6.5px
}
.job-costing-software .heroCostDetail {
grid-template-columns: 1.35fr 1fr
}
.job-costing-software .heroCategories {
padding: 10px
}
.job-costing-software .miniCost {
font-size: 8px
}
.job-costing-software .miniCost>b {
font-size: 9px
}
.job-costing-software .marginRing {
width: 72px;
height: 72px
}
.job-costing-software .marginRing>strong {
font-size: 23px
}
.job-costing-software .boardFooter {
padding-right: 146px;
font-size: 7px
}
.job-costing-software .insightCard {
padding: 10px
}
.job-costing-software .insightCard strong {
font-size: 11px
}
.job-costing-software .insightCard p {
font-size: 9px
}
.job-costing-software .phoneHead strong {
font-size: 9px
}
.job-costing-software .phoneRow {
font-size: 7px
}
.job-costing-software .phoneRow b {
font-size: 8px
}
.job-costing-software .phoneNote {
font-size: 6.5px
}
.job-costing-software .phoneKicker {
font-size: 7px
}
.job-costing-software .phoneNumber {
font-size: 29px
}
.job-costing-software .budgetSummary strong {
font-size: 20px
}
.job-costing-software .budgetTable th,
.job-costing-software .budgetTable td {
padding: 10px 6px;
font-size: 9px
}
.job-costing-software .budgetTable tbody th {
font-size: 9px
}
.job-costing-software .costLedgerRow {
grid-template-columns: 29px minmax(0, 1fr) auto;
padding: 12px 10px;
gap: 8px
}
.job-costing-software .categoryIcon {
width: 29px;
height: 29px
}
.job-costing-software .costLedgerRow>b {
font-size: 15px
}
.job-costing-software .profitRow {
grid-template-columns: minmax(0, 1fr) 57px 44px;
padding: 11px 10px;
gap: 6px
}
.job-costing-software .profitRow>span {
font-size: 11px;
padding: 6px
}
.job-costing-software .profitRow>b {
font-size: 13px
}
.job-costing-software .reportName {
font-size: 9px
}
.job-costing-software .reportName>span {
font-size: 8px
}
}  .dreamz-fsm-subpage {
--brand: #00A8F8;
--brand2: #0076dd;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--black2: #171717;
--red: #B73535;
--purple: #7254C7;
--shadow: 0 12px 32px rgba(6, 59, 92, .07);
}
.dreamz-fsm-subpage * {
box-sizing: border-box
}
.dreamz-fsm-subpage {
scroll-behavior: smooth;
scroll-padding-top: 24px
}
.dreamz-fsm-subpage {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
-webkit-font-smoothing: antialiased
}
.dreamz-fsm-subpage a {
text-decoration: none;
color: inherit
}
.dreamz-fsm-subpage button,
.dreamz-fsm-subpage input {
font: inherit
}
.dreamz-fsm-subpage figure {
margin: 0
}
.dreamz-fsm-subpage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto
}
.dreamz-fsm-subpage section {
padding: 76px 0;
scroll-margin-top: 24px
}
.dreamz-fsm-subpage h2 {
font-size: clamp(31px, 4vw, 48px);
color: #0b0b0b
}
.dreamz-fsm-subpage h3 {
font-size: 21px;
color: #0b0b0b
}
.dreamz-fsm-subpage p {
margin: 0
}
.dreamz-fsm-subpage .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.dreamz-fsm-subpage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.dreamz-fsm-subpage .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.dreamz-fsm-subpage .btn:hover {
transform: translateY(-2px)
}
.dreamz-fsm-subpage .btn.black {
background: #0b0b0b;
color: #fff
}
.dreamz-fsm-subpage .btn.black:hover {
background: #292929
}
.dreamz-fsm-subpage .btn.yellow {
background: var(--yellow);
color: #000
}
.dreamz-fsm-subpage .btn.yellow:hover {
background: #FFD454
}
.dreamz-fsm-subpage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.dreamz-fsm-subpage .btn .icon {
width: 17px;
height: 17px
}
.dreamz-fsm-subpage a:focus-visible,
.dreamz-fsm-subpage summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.dreamz-fsm-subpage .dark a:focus-visible,
.dreamz-fsm-subpage .final a:focus-visible {
outline-color: var(--yellow)
}
.dreamz-fsm-subpage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.dreamz-fsm-subpage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.dreamz-fsm-subpage .soft {
background: var(--sky2)
}
.dreamz-fsm-subpage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.dreamz-fsm-subpage .dark h2,
.dreamz-fsm-subpage .dark h3 {
color: #fff
}
.dreamz-fsm-subpage .dark p {
color: #D6D6D6
}
.dreamz-fsm-subpage .dark .ey {
background: var(--yellow)
}
.dreamz-fsm-subpage .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.dreamz-fsm-subpage .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.dreamz-fsm-subpage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.dreamz-fsm-subpage .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin-bottom: 0;
background: transparent;
}
.dreamz-fsm-subpage .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.dreamz-fsm-subpage .textLink .icon {
width: 16px;
height: 16px
}
.dreamz-fsm-subpage .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.dreamz-fsm-subpage .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.dreamz-fsm-subpage .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.dreamz-fsm-subpage .skipLink:focus {
top: 12px
} .dreamz-fsm-subpage .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.dreamz-fsm-subpage .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.dreamz-fsm-subpage .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.dreamz-fsm-subpage .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.dreamz-fsm-subpage .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.dreamz-fsm-subpage .logo.adobe {
font-size: 20px
}
.dreamz-fsm-subpage .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .dreamz-fsm-subpage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.dreamz-fsm-subpage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.dreamz-fsm-subpage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.dreamz-fsm-subpage .outcome:nth-child(2):before {
background: var(--yellow)
}
.dreamz-fsm-subpage .outcome:nth-child(3):before {
background: var(--green)
}
.dreamz-fsm-subpage .outcome:nth-child(4):before {
background: var(--purple)
}
.dreamz-fsm-subpage .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.dreamz-fsm-subpage .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.dreamz-fsm-subpage .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .dreamz-fsm-subpage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.dreamz-fsm-subpage .feature.reverse .visual {
order: -1
}
.dreamz-fsm-subpage .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.dreamz-fsm-subpage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.dreamz-fsm-subpage .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.dreamz-fsm-subpage .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.dreamz-fsm-subpage .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.dreamz-fsm-subpage .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.dreamz-fsm-subpage .visual>* {
position: relative;
z-index: 2
}
.dreamz-fsm-subpage .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.dreamz-fsm-subpage .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.dreamz-fsm-subpage .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.dreamz-fsm-subpage .uiHeading .icon {
width: 19px;
height: 19px
}
.dreamz-fsm-subpage .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.dreamz-fsm-subpage .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.dreamz-fsm-subpage .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.dreamz-fsm-subpage .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.dreamz-fsm-subpage .pill.green {
background: var(--greenbg);
color: #116746
}
.dreamz-fsm-subpage .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.dreamz-fsm-subpage .pill.gray {
background: #F0F3F5;
color: #586C79
}
.dreamz-fsm-subpage .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .dreamz-fsm-subpage .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.dreamz-fsm-subpage .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.dreamz-fsm-subpage .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.dreamz-fsm-subpage .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.dreamz-fsm-subpage .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.dreamz-fsm-subpage .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.dreamz-fsm-subpage .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.dreamz-fsm-subpage .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.dreamz-fsm-subpage .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.dreamz-fsm-subpage .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .dreamz-fsm-subpage .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.dreamz-fsm-subpage .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.dreamz-fsm-subpage .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.dreamz-fsm-subpage .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.dreamz-fsm-subpage .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.dreamz-fsm-subpage .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.dreamz-fsm-subpage .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .dreamz-fsm-subpage .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.dreamz-fsm-subpage .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.dreamz-fsm-subpage .featureCard:hover {
transform: translateY(-3px)
}
.dreamz-fsm-subpage .featureIcon,
.dreamz-fsm-subpage .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.dreamz-fsm-subpage .featureIcon .icon,
.dreamz-fsm-subpage .useIcon .icon {
width: 22px;
height: 22px
}
.dreamz-fsm-subpage .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.dreamz-fsm-subpage .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .dreamz-fsm-subpage .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.dreamz-fsm-subpage .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.dreamz-fsm-subpage .useCase h3 {
font-size: 20px
}
.dreamz-fsm-subpage .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.dreamz-fsm-subpage .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.dreamz-fsm-subpage .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.dreamz-fsm-subpage .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.dreamz-fsm-subpage .review h3 {
font-size: 22px
}
.dreamz-fsm-subpage .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.dreamz-fsm-subpage .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.dreamz-fsm-subpage .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.dreamz-fsm-subpage .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.dreamz-fsm-subpage .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.dreamz-fsm-subpage .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.dreamz-fsm-subpage .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.dreamz-fsm-subpage .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.dreamz-fsm-subpage .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .dreamz-fsm-subpage .faq {
max-width: 900px
}
.dreamz-fsm-subpage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.dreamz-fsm-subpage .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.dreamz-fsm-subpage .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.dreamz-fsm-subpage .faq summary::marker {
color: var(--navy)
}
.dreamz-fsm-subpage .faq details[open] {
border-color: #A9D3E7
}
.dreamz-fsm-subpage .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .dreamz-fsm-subpage .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.dreamz-fsm-subpage .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.dreamz-fsm-subpage .cta h3 {
font-size: 19px
}
.dreamz-fsm-subpage .cta.darkCta h3 {
color: #fff
}
.dreamz-fsm-subpage .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.dreamz-fsm-subpage .cta.darkCta p {
color: #D1D1D1
}
.dreamz-fsm-subpage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.dreamz-fsm-subpage .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.dreamz-fsm-subpage .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.dreamz-fsm-subpage .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.dreamz-fsm-subpage .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.dreamz-fsm-subpage .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.dreamz-fsm-subpage .reveal {
opacity: 1;
transform: none
}  .dreamz-fsm-subpage #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.dreamz-fsm-subpage #connected-tools.fsmTools *,
.dreamz-fsm-subpage #connected-tools.fsmTools *::before,
.dreamz-fsm-subpage #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.dreamz-fsm-subpage #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.dreamz-fsm-subpage #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__step::before,
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.dreamz-fsm-subpage #connected-tools.fsmTools {
padding: 52px 0;
}
.dreamz-fsm-subpage #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.dreamz-fsm-subpage #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card,
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.dreamz-fsm-subpage #connected-tools.fsmTools h2 {
font-size: 30px;
}
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.dreamz-fsm-subpage #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .dreamz-fsm-subpage .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.dreamz-fsm-subpage .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.dreamz-fsm-subpage .heroGrid>*,
.dreamz-fsm-subpage .feature>*,
.dreamz-fsm-subpage .aiGrid>* {
min-width: 0
}
.dreamz-fsm-subpage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.dreamz-fsm-subpage .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.dreamz-fsm-subpage .heroVisual {
position: relative;
min-width: 0
}
.dreamz-fsm-subpage .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 182px;
gap: 14px 12px;
align-items: start
}
.dreamz-fsm-subpage .assetStage:before {
content: "";
position: absolute;
inset: 48px 0 18px 20px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .055) 1px, transparent 1px);
background-size: 26px 26px
}
.dreamz-fsm-subpage .assetStage>* {
position: relative;
z-index: 1
}
.dreamz-fsm-subpage .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px;
margin-left: 16px
}
.dreamz-fsm-subpage .timeBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 19px;
overflow: hidden;
margin-right: 32px
}
.dreamz-fsm-subpage .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px;
border-bottom: 1px solid var(--line)
}
.dreamz-fsm-subpage .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.dreamz-fsm-subpage .brandTile {
width: 28px;
height: 28px;
flex: 0 0 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.dreamz-fsm-subpage .brandTile .icon {
width: 18px;
height: 18px
}
.dreamz-fsm-subpage .sampleBadge {
font-size: 8px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.dreamz-fsm-subpage .boardToolbar {
padding: 11px 16px 9px;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center
}
.dreamz-fsm-subpage .boardToolbar strong {
font-size: 14px;
color: var(--navy);
line-height: 1.4
}
.dreamz-fsm-subpage .boardToolbar small {
line-height: 1.4;
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.dreamz-fsm-subpage .viewPills {
display: flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 8px;
font-weight: 750
}
.dreamz-fsm-subpage .viewPills span {
padding: 5px 8px
}
.dreamz-fsm-subpage .viewPills .active {
background: var(--navy);
color: #fff
}
.dreamz-fsm-subpage .heroMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 0 16px 13px
}
.dreamz-fsm-subpage .heroMetric {
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 9px;
padding: 9px
}
.dreamz-fsm-subpage .heroMetric:nth-child(3) {
background: #FFFCF0;
border-color: #EADDAB
}
.dreamz-fsm-subpage .heroMetric strong {
font-size: 22px;
display: block;
color: var(--navy);
letter-spacing: -.025em;
line-height: 1.3
}
.dreamz-fsm-subpage .heroMetric span {
line-height: 1.4;
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.dreamz-fsm-subpage .timeTable {
margin: 0 16px 14px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.dreamz-fsm-subpage .timeTableHead,
.dreamz-fsm-subpage .timeTableRow {
display: grid;
grid-template-columns: minmax(0, 1.15fr) .72fr .65fr .88fr;
gap: 7px;
align-items: center;
padding: 8px 11px;
font-size: 10px;
line-height: 1.4
}
.dreamz-fsm-subpage .timeTableHead {
font-size: 8px;
color: var(--muted);
font-weight: 750;
background: var(--sky2)
}
.dreamz-fsm-subpage .timeTableRow {
border-top: 1px solid #E6EEF3
}
.dreamz-fsm-subpage .timeTableRow strong {
font-size: 10px
}
.dreamz-fsm-subpage .timeTableRow small {
font-size: 8px;
color: var(--muted);
display: block
}
.dreamz-fsm-subpage .timeTableRow>span {
color: var(--muted);
font-size: 9px
}
.dreamz-fsm-subpage .timeTableRow .pill {
font-size: 7px;
justify-self: start;
padding: 4px 6px
}
.dreamz-fsm-subpage .boardFooter {
padding: 9px 174px 9px 16px;
font-size: 9px;
line-height: 1.55;
background: var(--sky2);
border-top: 1px solid var(--line);
color: #526F82;
display: flex;
align-items: center;
gap: 7px;
min-height: 40px
}
.dreamz-fsm-subpage .boardFooter .icon {
width: 15px;
height: 15px;
color: var(--green)
}
.dreamz-fsm-subpage .timeContext {
grid-column: 1;
align-self: start;
background: #0C2333;
border: 1px solid #2A4453;
border-radius: 15px;
padding: 15px;
margin-left: 12px;
display: flex;
gap: 10px;
color: #fff
}
.dreamz-fsm-subpage .timeContext>.icon {
width: 20px;
height: 20px;
color: var(--yellow);
margin-top: 2px
}
.dreamz-fsm-subpage .timeContext strong {
display: block;
font-size: 12px;
line-height: 1.5
}
.dreamz-fsm-subpage .timeContext p {
font-size: 10px;
color: #CDDFEA;
line-height: 1.7;
margin-top: 6px
}
.dreamz-fsm-subpage .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -51px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.dreamz-fsm-subpage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.dreamz-fsm-subpage .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.dreamz-fsm-subpage .notch {
width: 42px;
height: 4px;
border-radius: 9px;
background: #536A78
}
.dreamz-fsm-subpage .phoneHead {
padding: 10px;
line-height: 1.4;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.dreamz-fsm-subpage .phoneHead strong {
display: block;
font-size: 11px
}
.dreamz-fsm-subpage .phoneHead small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 3px
}
.dreamz-fsm-subpage .phoneBody {
padding: 11px 10px;
line-height: 1.4
}
.dreamz-fsm-subpage .timerState {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 8px;
color: #15684A;
font-weight: 800
}
.dreamz-fsm-subpage .stateDot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green)
}
.dreamz-fsm-subpage .timerDigits {
display: block;
text-align: center;
font-size: 33px;
line-height: 1.2;
color: var(--navy);
font-weight: 800;
letter-spacing: -.04em;
font-variant-numeric: tabular-nums;
margin: 6px 0 2px
}
.dreamz-fsm-subpage .timerHint {
display: block;
text-align: center;
font-size: 8px;
color: var(--muted)
}
.dreamz-fsm-subpage .phoneJobDetail {
background: var(--sky2);
padding: 9px;
border: 1px solid var(--line);
border-radius: 8px;
margin: 9px 0
}
.dreamz-fsm-subpage .phoneJobDetail strong {
font-size: 10px;
line-height: 1.4;
display: block;
color: var(--navy)
}
.dreamz-fsm-subpage .phoneJobDetail span {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 4px
}
.dreamz-fsm-subpage .mockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 7px;
background: var(--yellow);
color: #111;
border-radius: 7px;
font-size: 10px;
font-weight: 800;
line-height: 1.4;
text-align: center
}
.dreamz-fsm-subpage .mockAction .icon {
width: 14px;
height: 14px
}
.dreamz-fsm-subpage .phoneFine {
display: block;
text-align: center;
font-size: 7px;
color: var(--muted);
margin-top: 8px;
line-height: 1.5
}
.dreamz-fsm-subpage .diagramCaption {
font-size: 10px;
color: var(--muted);
text-align: center;
line-height: 1.6;
margin-top: 14px
} .dreamz-fsm-subpage .entryScene {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 20px;
align-items: center
}
.dreamz-fsm-subpage .entryPhone {
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 26px;
padding: 6px
}
.dreamz-fsm-subpage .entryFields {
padding: 13px 11px
}
.dreamz-fsm-subpage .entryField {
padding: 9px;
border: 1px solid var(--line);
background: var(--sky2);
border-radius: 7px;
margin-bottom: 9px
}
.dreamz-fsm-subpage .entryField small {
display: block;
font-size: 8px;
color: var(--muted)
}
.dreamz-fsm-subpage .entryField strong {
display: block;
font-size: 10px;
line-height: 1.5;
margin-top: 4px;
color: var(--navy)
}
.dreamz-fsm-subpage .entryField.comment {
background: #FFFCF0;
border-color: #E9DEB3
}
.dreamz-fsm-subpage .entryField.comment strong {
font-weight: 500;
font-size: 9px
}
.dreamz-fsm-subpage .entryFields .mockAction {
margin-top: 11px
}
.dreamz-fsm-subpage .entryEvents {
display: grid;
gap: 13px
}
.dreamz-fsm-subpage .eventCard {
padding: 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.dreamz-fsm-subpage .eventTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
font-size: 11px;
color: var(--navy);
font-weight: 800
}
.dreamz-fsm-subpage .eventTitle .icon {
width: 18px;
height: 18px;
color: var(--green)
}
.dreamz-fsm-subpage .eventCard>strong {
display: block;
margin-top: 7px;
font-size: 22px;
line-height: 1.3;
letter-spacing: -.02em;
color: var(--navy)
}
.dreamz-fsm-subpage .eventCard>p {
font-size: 10px;
line-height: 1.6;
margin: 6px 0 0;
color: var(--muted)
}
.dreamz-fsm-subpage .eventCard.completed .icon {
color: var(--brand2)
}
.dreamz-fsm-subpage .entryTotal {
padding: 14px;
background: #0C2333;
color: #fff;
border-radius: 12px
}
.dreamz-fsm-subpage .entryTotal strong {
font-size: 24px;
display: block;
line-height: 1.3
}
.dreamz-fsm-subpage .entryTotal span {
font-size: 10px;
color: #D2E3EE;
display: block;
margin-top: 5px
}
.dreamz-fsm-subpage .noteStrip {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 10px;
color: #547082;
margin-top: 14px;
line-height: 1.6
}
.dreamz-fsm-subpage .noteStrip .icon {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 1px
} .dreamz-fsm-subpage .reviewToolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 13px 14px;
background: #0C2333;
color: #fff;
border-radius: 11px;
margin-bottom: 13px
}
.dreamz-fsm-subpage .reviewToolbar strong {
font-size: 12px
}
.dreamz-fsm-subpage .reviewToolbar span {
font-size: 9px;
color: #D3E4ED
}
.dreamz-fsm-subpage .reviewLedger {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: #fff
}
.dreamz-fsm-subpage .reviewHead,
.dreamz-fsm-subpage .reviewRow {
display: grid;
grid-template-columns: minmax(0, 1.4fr) .7fr .9fr;
gap: 9px;
align-items: center;
padding: 12px 14px
}
.dreamz-fsm-subpage .reviewHead {
font-size: 9px;
background: var(--sky2);
color: var(--muted);
font-weight: 750
}
.dreamz-fsm-subpage .reviewRow {
border-top: 1px solid #E4EDF2
}
.dreamz-fsm-subpage .reviewRow strong {
font-size: 11px;
display: block
}
.dreamz-fsm-subpage .reviewRow small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.dreamz-fsm-subpage .reviewRow>b {
font-size: 13px;
color: var(--navy)
}
.dreamz-fsm-subpage .reviewRow>.pill {
font-size: 8px;
justify-self: start
}
.dreamz-fsm-subpage .reviewRow.needsReview {
background: #FFFCF1
}
.dreamz-fsm-subpage .otPanel {
padding: 16px;
background: #fff;
border: 1px solid #EADFB5;
border-left: 3px solid var(--yellow);
border-radius: 12px;
margin-top: 14px
}
.dreamz-fsm-subpage .otPanelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px
}
.dreamz-fsm-subpage .otPanelHead strong {
font-size: 12px;
color: var(--navy)
}
.dreamz-fsm-subpage .otPanelHead small {
font-size: 9px;
color: var(--muted)
}
.dreamz-fsm-subpage .otGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 14px
}
.dreamz-fsm-subpage .otGrid>div {
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px;
background: var(--sky2)
}
.dreamz-fsm-subpage .otGrid small {
display: block;
font-size: 8px;
color: var(--muted)
}
.dreamz-fsm-subpage .otGrid b {
display: block;
color: var(--navy);
font-size: 19px;
margin-top: 4px;
line-height: 1.2
}
.dreamz-fsm-subpage .otPanel>p {
font-size: 10px;
line-height: 1.6;
margin-top: 12px;
color: var(--muted)
} .dreamz-fsm-subpage .hoursSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px;
margin-bottom: 14px
}
.dreamz-fsm-subpage .hoursSummary>div {
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.dreamz-fsm-subpage .hoursSummary>div:nth-child(2) {
border-top: 3px solid var(--yellow);
padding-top: 14px
}
.dreamz-fsm-subpage .hoursSummary strong {
font-size: 29px;
color: var(--navy);
line-height: 1.2;
display: block;
letter-spacing: -.03em
}
.dreamz-fsm-subpage .hoursSummary span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 6px
}
.dreamz-fsm-subpage .jobReport {
padding: 17px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px
}
.dreamz-fsm-subpage .reportTitle {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px
}
.dreamz-fsm-subpage .reportTitle strong {
font-size: 13px;
line-height: 1.4;
color: var(--navy)
}
.dreamz-fsm-subpage .reportTitle small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.dreamz-fsm-subpage .reportTitle .icon {
color: var(--navy);
width: 20px;
height: 20px
}
.dreamz-fsm-subpage .hoursBars {
display: grid;
gap: 14px;
margin-top: 19px
}
.dreamz-fsm-subpage .hoursBar {
display: grid;
grid-template-columns: 37px minmax(0, 1fr) 26px;
gap: 10px;
align-items: center;
font-size: 10px
}
.dreamz-fsm-subpage .hoursBar>span {
color: var(--muted)
}
.dreamz-fsm-subpage .hoursBar>b {
font-size: 11px;
color: var(--navy);
text-align: right
}
.dreamz-fsm-subpage .hoursTrack {
height: 16px;
background: #EDF4F8;
border-radius: 5px;
overflow: hidden
}
.dreamz-fsm-subpage .hoursTrack i {
display: block;
height: 100%;
width: var(--fill, 50%);
background: #8DD6F6;
border-radius: 5px
}
.dreamz-fsm-subpage .hoursBar:nth-child(2) .hoursTrack i {
background: var(--yellow)
}
.dreamz-fsm-subpage .reportTotal {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 18px;
font-size: 11px;
color: var(--muted)
}
.dreamz-fsm-subpage .reportTotal strong {
font-size: 22px;
line-height: 1.2;
color: var(--navy)
}
.dreamz-fsm-subpage .costContext {
margin-top: 13px;
padding: 13px;
border: 1px solid var(--line);
background: #0C2333;
color: #fff;
border-radius: 11px;
display: flex;
gap: 10px;
align-items: flex-start
}
.dreamz-fsm-subpage .costContext .icon {
color: var(--yellow);
width: 20px;
height: 20px
}
.dreamz-fsm-subpage .costContext strong {
font-size: 12px;
display: block
}
.dreamz-fsm-subpage .costContext p {
font-size: 10px;
line-height: 1.6;
color: #D1E2EB;
margin-top: 4px
} .dreamz-fsm-subpage .attendanceStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px
}
.dreamz-fsm-subpage .attendanceStats>div {
padding: 14px 10px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
text-align: center
}
.dreamz-fsm-subpage .attendanceStats strong {
font-size: 26px;
line-height: 1.2;
color: var(--navy);
display: block
}
.dreamz-fsm-subpage .attendanceStats small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 6px
}
.dreamz-fsm-subpage .attendanceStats>div:nth-child(2) {
background: #EAF8FF
}
.dreamz-fsm-subpage .attendanceStats>div:nth-child(3) {
background: #F3F0FC
}
.dreamz-fsm-subpage .shiftGrid {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
overflow: hidden
}
.dreamz-fsm-subpage .shiftHead,
.dreamz-fsm-subpage .shiftRow {
display: grid;
grid-template-columns: minmax(80px, 1.3fr) repeat(5, minmax(0, 1fr));
gap: 7px;
padding: 12px;
align-items: center
}
.dreamz-fsm-subpage .shiftHead {
background: var(--sky2);
font-size: 9px;
font-weight: 750;
color: var(--muted);
text-align: center
}
.dreamz-fsm-subpage .shiftHead>span:first-child {
text-align: left
}
.dreamz-fsm-subpage .shiftRow {
border-top: 1px solid #E3ECF2
}
.dreamz-fsm-subpage .shiftRow>strong {
font-size: 10px;
color: var(--navy)
}
.dreamz-fsm-subpage .shiftCell {
background: var(--greenbg);
border: 1px solid #D2ECDD;
color: #196B4E;
text-align: center;
padding: 7px 0;
border-radius: 6px;
font-size: 9px;
font-weight: 750
}
.dreamz-fsm-subpage .shiftCell.leave {
background: #EAF8FF;
border-color: #CDEAF7;
color: #246C90
}
.dreamz-fsm-subpage .shiftCell.off {
background: #F1EDFC;
border-color: #E1D9F6;
color: #665099
}
.dreamz-fsm-subpage .shiftLegend {
display: flex;
gap: 13px;
font-size: 9px;
color: var(--muted);
margin-top: 12px;
flex-wrap: wrap
}
.dreamz-fsm-subpage .shiftLegend span {
display: flex;
gap: 5px;
align-items: center
}
.dreamz-fsm-subpage .shiftLegend i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
background: #70B599
}
.dreamz-fsm-subpage .shiftLegend .leave i {
background: #82C2E2
}
.dreamz-fsm-subpage .shiftLegend .off i {
background: #A891D2
}
.dreamz-fsm-subpage .shiftNote {
display: flex;
gap: 11px;
align-items: center;
background: #fff;
padding: 14px;
border: 1px solid var(--line);
border-left: 3px solid var(--yellow);
border-radius: 11px;
margin-top: 14px
}
.dreamz-fsm-subpage .shiftNote>.icon {
color: var(--navy);
width: 23px;
height: 23px
}
.dreamz-fsm-subpage .shiftNote strong {
font-size: 12px;
line-height: 1.4;
display: block;
color: var(--navy)
}
.dreamz-fsm-subpage .shiftNote p {
font-size: 10px;
line-height: 1.6;
margin-top: 4px
} .dreamz-fsm-subpage .visual {
box-shadow: none
}
.dreamz-fsm-subpage .featureCard:hover {
transform: none
}
.dreamz-fsm-subpage .outcome,
.dreamz-fsm-subpage .featureCard,
.dreamz-fsm-subpage .connectedCard,
.dreamz-fsm-subpage .review,
.dreamz-fsm-subpage .useCase {
box-shadow: none
}
.dreamz-fsm-subpage .aiMini {
align-items: stretch
}
.dreamz-fsm-subpage .aiMini span {
display: block
}
.dreamz-fsm-subpage .feature .fi {
align-items: flex-start
}
.dreamz-fsm-subpage .tick {
line-height: 1
}
.dreamz-fsm-subpage .faq summary {
min-height: 24px
}
.dreamz-fsm-subpage .connectedCard .smallTag {
font-size: 9px;
padding: 4px 7px;
border-radius: 5px;
background: var(--yellowsoft);
color: #745A13;
font-weight: 800;
margin-bottom: 9px
}
.dreamz-fsm-subpage .connectedFoot {
font-size: 13px;
color: var(--muted);
line-height: 1.65;
margin-top: 20px;
max-width: 970px
} @media(max-width:1100px) and (min-width:961px) {
.dreamz-fsm-subpage .heroGrid {
gap: 28px
}
.dreamz-fsm-subpage .hero .lead {
font-size: 17px
}
.dreamz-fsm-subpage .assetStage {
grid-template-columns: minmax(0, 1fr) 162px;
gap: 12px 10px
}
.dreamz-fsm-subpage .timeBoard {
margin-right: 16px
}
.dreamz-fsm-subpage .boardToolbar strong {
font-size: 14px
}
.dreamz-fsm-subpage .viewPills {
display: none
}
.dreamz-fsm-subpage .heroMetric {
padding: 9px
}
.dreamz-fsm-subpage .heroMetric strong {
font-size: 21px
}
.dreamz-fsm-subpage .heroMetric span {
font-size: 8px
}
.dreamz-fsm-subpage .timeTableHead,
.dreamz-fsm-subpage .timeTableRow {
padding: 8px;
gap: 5px;
grid-template-columns: minmax(0, 1fr) .7fr .6fr .95fr
}
.dreamz-fsm-subpage .timeTableRow strong {
font-size: 9px
}
.dreamz-fsm-subpage .timeTableRow>span {
font-size: 8px
}
.dreamz-fsm-subpage .boardFooter {
padding-right: 154px;
font-size: 8px
}
.dreamz-fsm-subpage .timeContext {
padding: 13px;
margin-left: 0
}
.dreamz-fsm-subpage .timeContext strong {
font-size: 11px
}
.dreamz-fsm-subpage .visual {
padding: 18px
}
.dreamz-fsm-subpage .entryScene {
grid-template-columns: 160px minmax(0, 1fr);
gap: 13px
}
.dreamz-fsm-subpage .reviewHead,
.dreamz-fsm-subpage .reviewRow {
padding: 11px;
gap: 7px
}
.dreamz-fsm-subpage .shiftHead,
.dreamz-fsm-subpage .shiftRow {
grid-template-columns: minmax(75px, 1.3fr) repeat(5, minmax(0, 1fr));
gap: 5px;
padding: 11px
}
}
@media(max-width:960px) {
.dreamz-fsm-subpage .heroGrid,
.dreamz-fsm-subpage .feature,
.dreamz-fsm-subpage .aiGrid,
.dreamz-fsm-subpage .final {
grid-template-columns: 1fr
}
.dreamz-fsm-subpage .heroGrid {
gap: 36px
}
.dreamz-fsm-subpage .hero h1 {
max-width: 800px
}
.dreamz-fsm-subpage .hero .lead {
max-width: 750px
}
.dreamz-fsm-subpage .heroVisual {
width: 100%;
max-width: 620px;
margin: 0 auto
}
.dreamz-fsm-subpage .assetStage {
margin: auto
}
.dreamz-fsm-subpage .feature.reverse .visual {
order: 0
}
.dreamz-fsm-subpage .feature {
gap: 30px
}
.dreamz-fsm-subpage .feature>div:first-child {
max-width: 800px
}
.dreamz-fsm-subpage .outcomes,
.dreamz-fsm-subpage .featureGrid,
.dreamz-fsm-subpage .connectedGrid,
.dreamz-fsm-subpage .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.dreamz-fsm-subpage .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.dreamz-fsm-subpage .reviews {
grid-template-columns: 1fr
}
.dreamz-fsm-subpage .ratingGrid {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.dreamz-fsm-subpage .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.dreamz-fsm-subpage .ratingItem:nth-child(2) {
border: 0
}
.dreamz-fsm-subpage .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.dreamz-fsm-subpage .final .btn {
min-width: 195px
}
.dreamz-fsm-subpage .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.dreamz-fsm-subpage .aiGrid {
gap: 30px
}
.dreamz-fsm-subpage .aiMini {
max-width: 760px
}
.dreamz-fsm-subpage .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.dreamz-fsm-subpage .wrap {
width: calc(100% - 24px)
}
.dreamz-fsm-subpage section {
padding: 56px 0
}
.dreamz-fsm-subpage .hero {
padding: 32px 0 42px
}
.dreamz-fsm-subpage h2 {
font-size: 34px
}
.dreamz-fsm-subpage .lead {
font-size: 17px
}
.dreamz-fsm-subpage .sectionHead p {
font-size: 16px
}
.dreamz-fsm-subpage .sectionHead {
margin-bottom: 28px
}
.dreamz-fsm-subpage .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.dreamz-fsm-subpage .heroGrid {
gap: 26px
}
.dreamz-fsm-subpage .hero .actions {
gap: 8px
}
.dreamz-fsm-subpage .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.dreamz-fsm-subpage .micro {
font-size: 11px
}
.dreamz-fsm-subpage .heroPills {
gap: 6px
}
.dreamz-fsm-subpage .heroPills span {
font-size: 9px
}
.dreamz-fsm-subpage .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.dreamz-fsm-subpage .assetStage {
grid-template-columns: minmax(0, 1fr) 162px;
gap: 12px 10px
}
.dreamz-fsm-subpage .assetTag {
font-size: 9px;
margin-left: 0
}
.dreamz-fsm-subpage .timeBoard {
margin-right: 12px
}
.dreamz-fsm-subpage .boardHeader {
padding: 13px
}
.dreamz-fsm-subpage .boardBrand {
font-size: 12px
}
.dreamz-fsm-subpage .sampleBadge {
font-size: 7px
}
.dreamz-fsm-subpage .boardToolbar {
padding: 13px 12px 11px
}
.dreamz-fsm-subpage .boardToolbar strong {
font-size: 13px
}
.dreamz-fsm-subpage .boardToolbar small {
font-size: 8px
}
.dreamz-fsm-subpage .viewPills {
display: none
}
.dreamz-fsm-subpage .heroMetrics {
gap: 7px;
margin: 0 12px 12px
}
.dreamz-fsm-subpage .heroMetric {
padding: 10px 8px
}
.dreamz-fsm-subpage .heroMetric strong {
font-size: 21px
}
.dreamz-fsm-subpage .heroMetric span {
font-size: 8px
}
.dreamz-fsm-subpage .timeTable {
margin: 0 12px 12px
}
.dreamz-fsm-subpage .timeTableHead,
.dreamz-fsm-subpage .timeTableRow {
padding: 8px;
gap: 5px;
grid-template-columns: minmax(0, 1fr) .8fr .65fr .95fr
}
.dreamz-fsm-subpage .timeTableHead {
font-size: 7px
}
.dreamz-fsm-subpage .timeTableRow strong {
font-size: 9px
}
.dreamz-fsm-subpage .timeTableRow>span {
font-size: 8px
}
.dreamz-fsm-subpage .timeTableRow .pill {
font-size: 7px;
padding: 4px 5px
}
.dreamz-fsm-subpage .boardFooter {
padding: 10px 151px 10px 12px;
font-size: 8px;
min-height: 50px
}
.dreamz-fsm-subpage .assetPhone {
margin-top: -43px;
border-radius: 24px
}
.dreamz-fsm-subpage .phoneScreen {
border-radius: 18px
}
.dreamz-fsm-subpage .phoneHead {
padding: 10px 9px
}
.dreamz-fsm-subpage .phoneHead strong {
font-size: 10px
}
.dreamz-fsm-subpage .phoneHead small {
font-size: 7px
}
.dreamz-fsm-subpage .phoneBody {
padding: 12px 9px
}
.dreamz-fsm-subpage .timerDigits {
font-size: 33px
}
.dreamz-fsm-subpage .phoneJobDetail {
padding: 9px
}
.dreamz-fsm-subpage .timeContext {
padding: 12px;
margin-left: 0;
gap: 7px
}
.dreamz-fsm-subpage .timeContext>.icon {
width: 17px;
height: 17px
}
.dreamz-fsm-subpage .timeContext strong {
font-size: 11px
}
.dreamz-fsm-subpage .timeContext p {
font-size: 9px
}
.dreamz-fsm-subpage .diagramCaption {
font-size: 9px
}
.dreamz-fsm-subpage .trust {
padding: 23px 0
}
.dreamz-fsm-subpage .trustLabel {
font-size: 12px
}
.dreamz-fsm-subpage .logos {
gap: 7px
}
.dreamz-fsm-subpage .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.dreamz-fsm-subpage .logo.dhl {
font-size: 19px
}
.dreamz-fsm-subpage .logo.adobe {
font-size: 17px
}
.dreamz-fsm-subpage .logo.golden {
font-size: 8px
}
.dreamz-fsm-subpage .fl,
.dreamz-fsm-subpage .outcomes,
.dreamz-fsm-subpage .featureGrid,
.dreamz-fsm-subpage .connectedGrid,
.dreamz-fsm-subpage .useCases {
grid-template-columns: 1fr
}
.dreamz-fsm-subpage .fi {
font-size: 14px
}
.dreamz-fsm-subpage .outcome {
padding: 21px
}
.dreamz-fsm-subpage .outcome strong {
margin-top: 12px
}
.dreamz-fsm-subpage .outcome span {
font-size: 14px
}
.dreamz-fsm-subpage .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.dreamz-fsm-subpage .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px;
align-items: flex-start
}
.dreamz-fsm-subpage .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.dreamz-fsm-subpage .uiSub {
font-size: 9px
}
.dreamz-fsm-subpage .entryScene {
grid-template-columns: 160px minmax(0, 1fr);
gap: 13px
}
.dreamz-fsm-subpage .entryFields {
padding: 12px 10px
}
.dreamz-fsm-subpage .entryField strong {
font-size: 9px
}
.dreamz-fsm-subpage .eventCard {
padding: 12px
}
.dreamz-fsm-subpage .eventTitle {
font-size: 10px
}
.dreamz-fsm-subpage .eventTitle .icon {
width: 16px;
height: 16px
}
.dreamz-fsm-subpage .eventCard>strong {
font-size: 21px
}
.dreamz-fsm-subpage .eventCard>p {
font-size: 10px
}
.dreamz-fsm-subpage .entryTotal {
padding: 12px
}
.dreamz-fsm-subpage .entryTotal strong {
font-size: 22px
}
.dreamz-fsm-subpage .entryTotal span {
font-size: 9px
}
.dreamz-fsm-subpage .reviewHead,
.dreamz-fsm-subpage .reviewRow {
padding: 11px 12px;
gap: 8px
}
.dreamz-fsm-subpage .reviewRow strong {
font-size: 10px
}
.dreamz-fsm-subpage .reviewRow small {
font-size: 8px
}
.dreamz-fsm-subpage .reviewRow>b {
font-size: 12px
}
.dreamz-fsm-subpage .otPanel {
padding: 13px
}
.dreamz-fsm-subpage .otGrid {
gap: 7px
}
.dreamz-fsm-subpage .otGrid>div {
padding: 9px
}
.dreamz-fsm-subpage .otGrid b {
font-size: 18px
}
.dreamz-fsm-subpage .otPanelHead strong {
font-size: 11px
}
.dreamz-fsm-subpage .otPanelHead small {
font-size: 8px
}
.dreamz-fsm-subpage .hoursSummary>div {
padding: 14px
}
.dreamz-fsm-subpage .jobReport {
padding: 15px
}
.dreamz-fsm-subpage .attendanceStats {
gap: 8px
}
.dreamz-fsm-subpage .attendanceStats>div {
padding: 13px 8px
}
.dreamz-fsm-subpage .attendanceStats strong {
font-size: 23px
}
.dreamz-fsm-subpage .attendanceStats small {
font-size: 8px
}
.dreamz-fsm-subpage .shiftHead,
.dreamz-fsm-subpage .shiftRow {
gap: 5px;
padding: 10px;
grid-template-columns: minmax(74px, 1.25fr) repeat(5, minmax(0, 1fr))
}
.dreamz-fsm-subpage .shiftRow>strong {
font-size: 9px
}
.dreamz-fsm-subpage .shiftCell {
font-size: 8px;
padding: 6px 0
}
.dreamz-fsm-subpage .shiftHead {
font-size: 8px
}
.dreamz-fsm-subpage .shiftNote {
padding: 12px
}
.dreamz-fsm-subpage .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.dreamz-fsm-subpage .aiMini div {
padding: 16px
}
.dreamz-fsm-subpage .aiMini strong {
font-size: 14px
}
.dreamz-fsm-subpage .aiMini span {
font-size: 13px
}
.dreamz-fsm-subpage .promptBox {
padding: 18px;
border-radius: 17px
}
.dreamz-fsm-subpage .prompt {
font-size: 13px;
padding: 13px
}
.dreamz-fsm-subpage .promptHead {
font-size: 19px
}
.dreamz-fsm-subpage .promptFoot {
font-size: 10px !important
}
.dreamz-fsm-subpage .connectedCard {
padding: 22px
}
.dreamz-fsm-subpage .connectedCard p,
.dreamz-fsm-subpage .featureCard p,
.dreamz-fsm-subpage .useCase p {
font-size: 14px
}
.dreamz-fsm-subpage .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.dreamz-fsm-subpage .connectedFoot {
font-size: 13px
}
.dreamz-fsm-subpage .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px
}
.dreamz-fsm-subpage .ratingItem {
border: 0
}
.dreamz-fsm-subpage .ratingLead {
margin-bottom: 3px
}
.dreamz-fsm-subpage .review p {
font-size: 14px
}
.dreamz-fsm-subpage .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.dreamz-fsm-subpage .ctaBtns {
width: 100%
}
.dreamz-fsm-subpage .ctaBtns .btn {
flex: 1
}
.dreamz-fsm-subpage .cta p {
font-size: 14px
}
.dreamz-fsm-subpage .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.dreamz-fsm-subpage .final h2 {
font-size: 32px
}
.dreamz-fsm-subpage .final p {
font-size: 15px
}
.dreamz-fsm-subpage .final .ctaBtns {
flex-direction: column
}
.dreamz-fsm-subpage .final .btn {
min-width: 0;
width: 100%
}
.dreamz-fsm-subpage .faq details {
padding: 16px
}
.dreamz-fsm-subpage .faq summary {
font-size: 14px
}
.dreamz-fsm-subpage .faq details p {
font-size: 14px
}
}
@media(max-width:380px) {
.dreamz-fsm-subpage .timeContext {
display: block
}
.dreamz-fsm-subpage .timeContext>.icon {
margin-bottom: 6px
}
.dreamz-fsm-subpage .timeContext strong {
font-size: 10px
}
.dreamz-fsm-subpage .entryScene {
grid-template-columns: minmax(0, 1fr)
}
.dreamz-fsm-subpage .entryPhone {
width: 190px;
max-width: 100%;
margin: auto
}
.dreamz-fsm-subpage .entryEvents {
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 3px
}
.dreamz-fsm-subpage .entryTotal {
grid-column: 1/-1;
display: flex;
gap: 10px;
align-items: center
}
.dreamz-fsm-subpage .entryTotal span {
margin-top: 0
}
.dreamz-fsm-subpage .otPanelHead {
align-items: flex-start;
flex-direction: column;
gap: 4px
}
.dreamz-fsm-subpage .timeTableHead,
.dreamz-fsm-subpage .timeTableRow {
grid-template-columns: minmax(0, 1fr) .7fr .6fr .95fr;
padding: 8px 6px;
gap: 4px
}
.dreamz-fsm-subpage .timeTableRow .pill {
padding: 4px;
font-size: 6.5px
}
}
@media(max-width:360px) {
.dreamz-fsm-subpage h2 {
font-size: 31px
}
.dreamz-fsm-subpage .assetStage {
grid-template-columns: minmax(0, 1fr) 145px;
gap: 10px 8px
}
.dreamz-fsm-subpage .heroMetric strong {
font-size: 19px
}
.dreamz-fsm-subpage .heroMetric span {
font-size: 7px
}
.dreamz-fsm-subpage .timeBoard {
margin-right: 0
}
.dreamz-fsm-subpage .timeTableHead,
.dreamz-fsm-subpage .timeTableRow {
gap: 4px
}
.dreamz-fsm-subpage .timeTableRow small {
font-size: 7px
}
.dreamz-fsm-subpage .boardFooter {
padding-right: 148px
}
.dreamz-fsm-subpage .phoneHead strong {
font-size: 9px
}
.dreamz-fsm-subpage .timerDigits {
font-size: 30px
}
.dreamz-fsm-subpage .timeContext {
padding: 10px
}
.dreamz-fsm-subpage .shiftHead,
.dreamz-fsm-subpage .shiftRow {
grid-template-columns: minmax(68px, 1.25fr) repeat(5, minmax(0, 1fr));
padding: 9px;
gap: 4px
}
.dreamz-fsm-subpage .shiftRow>strong {
font-size: 8px
}
.dreamz-fsm-subpage .shiftCell {
font-size: 8px
}
.dreamz-fsm-subpage .reviewHead,
.dreamz-fsm-subpage .reviewRow {
padding: 11px 9px;
gap: 6px
}
.dreamz-fsm-subpage .reviewRow>.pill {
font-size: 7px
}
.dreamz-fsm-subpage .otGrid {
gap: 5px
}
.dreamz-fsm-subpage .otGrid>div {
padding: 8px
}
.dreamz-fsm-subpage .otGrid small {
font-size: 7px
}
.dreamz-fsm-subpage .otGrid b {
font-size: 17px
}
}  .vehicle-gps-tracking .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.vehicle-gps-tracking .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.vehicle-gps-tracking .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.vehicle-gps-tracking .btn:hover {
transform: translateY(-2px)
}
.vehicle-gps-tracking .btn.black {
background: #0b0b0b;
color: #fff
}
.vehicle-gps-tracking .btn.black:hover {
background: #292929
}
.vehicle-gps-tracking .btn.yellow {
background: var(--yellow);
color: #000
}
.vehicle-gps-tracking .btn.yellow:hover {
background: #FFD454
}
.vehicle-gps-tracking .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.vehicle-gps-tracking .btn .icon {
width: 17px;
height: 17px
}
.vehicle-gps-tracking a:focus-visible,
.vehicle-gps-tracking summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.vehicle-gps-tracking .dark a:focus-visible,
.vehicle-gps-tracking .final a:focus-visible {
outline-color: var(--yellow)
}
.vehicle-gps-tracking .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.vehicle-gps-tracking .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.vehicle-gps-tracking .soft {
background: var(--sky2)
}
.vehicle-gps-tracking .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.vehicle-gps-tracking .dark h2,
.vehicle-gps-tracking .dark h3 {
color: #fff
}
.vehicle-gps-tracking .dark p {
color: #D6D6D6
}
.vehicle-gps-tracking .dark .ey {
background: var(--yellow)
}
.vehicle-gps-tracking .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.vehicle-gps-tracking .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.vehicle-gps-tracking .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.vehicle-gps-tracking .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.vehicle-gps-tracking .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.vehicle-gps-tracking .textLink .icon {
width: 16px;
height: 16px
}
.vehicle-gps-tracking .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.vehicle-gps-tracking .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.vehicle-gps-tracking .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.vehicle-gps-tracking .skipLink:focus {
top: 12px
}
.vehicle-gps-tracking .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.vehicle-gps-tracking .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.vehicle-gps-tracking .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.vehicle-gps-tracking .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.vehicle-gps-tracking .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.vehicle-gps-tracking .logo.adobe {
font-size: 20px
}
.vehicle-gps-tracking .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.vehicle-gps-tracking .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.vehicle-gps-tracking .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.vehicle-gps-tracking .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.vehicle-gps-tracking .outcome:nth-child(2):before {
background: var(--yellow)
}
.vehicle-gps-tracking .outcome:nth-child(3):before {
background: var(--green)
}
.vehicle-gps-tracking .outcome:nth-child(4):before {
background: var(--purple)
}
.vehicle-gps-tracking .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.vehicle-gps-tracking .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.vehicle-gps-tracking .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
}
.vehicle-gps-tracking .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.vehicle-gps-tracking .feature.reverse .visual {
order: -1
}
.vehicle-gps-tracking .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.vehicle-gps-tracking .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.vehicle-gps-tracking .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.vehicle-gps-tracking .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.vehicle-gps-tracking .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.vehicle-gps-tracking .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.vehicle-gps-tracking .visual>* {
position: relative;
z-index: 2
}
.vehicle-gps-tracking .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.vehicle-gps-tracking .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.vehicle-gps-tracking .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.vehicle-gps-tracking .uiHeading .icon {
width: 19px;
height: 19px
}
.vehicle-gps-tracking .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.vehicle-gps-tracking .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.vehicle-gps-tracking .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.vehicle-gps-tracking .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.vehicle-gps-tracking .pill.green {
background: var(--greenbg);
color: #116746
}
.vehicle-gps-tracking .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.vehicle-gps-tracking .pill.gray {
background: #F0F3F5;
color: #586C79
}
.vehicle-gps-tracking .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.vehicle-gps-tracking .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.vehicle-gps-tracking .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.vehicle-gps-tracking .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.vehicle-gps-tracking .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.vehicle-gps-tracking .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.vehicle-gps-tracking .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.vehicle-gps-tracking .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.vehicle-gps-tracking .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.vehicle-gps-tracking .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.vehicle-gps-tracking .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.vehicle-gps-tracking .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.vehicle-gps-tracking .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.vehicle-gps-tracking .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.vehicle-gps-tracking .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.vehicle-gps-tracking .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.vehicle-gps-tracking .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.vehicle-gps-tracking .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
}
.vehicle-gps-tracking .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.vehicle-gps-tracking .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.vehicle-gps-tracking .featureCard:hover {
transform: translateY(-3px)
}
.vehicle-gps-tracking .featureIcon,
.vehicle-gps-tracking .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.vehicle-gps-tracking .featureIcon .icon,
.vehicle-gps-tracking .useIcon .icon {
width: 22px;
height: 22px
}
.vehicle-gps-tracking .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.vehicle-gps-tracking .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.vehicle-gps-tracking .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.vehicle-gps-tracking .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.vehicle-gps-tracking .useCase h3 {
font-size: 20px
}
.vehicle-gps-tracking .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.vehicle-gps-tracking .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.vehicle-gps-tracking .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.vehicle-gps-tracking .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.vehicle-gps-tracking .review h3 {
font-size: 22px
}
.vehicle-gps-tracking .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.vehicle-gps-tracking .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.vehicle-gps-tracking .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.vehicle-gps-tracking .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.vehicle-gps-tracking .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.vehicle-gps-tracking .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.vehicle-gps-tracking .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.vehicle-gps-tracking .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.vehicle-gps-tracking .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.vehicle-gps-tracking .faq {
max-width: 900px
}
.vehicle-gps-tracking .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.vehicle-gps-tracking .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.vehicle-gps-tracking .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.vehicle-gps-tracking .faq summary::marker {
color: var(--navy)
}
.vehicle-gps-tracking .faq details[open] {
border-color: #A9D3E7
}
.vehicle-gps-tracking .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.vehicle-gps-tracking .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.vehicle-gps-tracking .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.vehicle-gps-tracking .cta h3 {
font-size: 19px
}
.vehicle-gps-tracking .cta.darkCta h3 {
color: #fff
}
.vehicle-gps-tracking .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.vehicle-gps-tracking .cta.darkCta p {
color: #D1D1D1
}
.vehicle-gps-tracking .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.vehicle-gps-tracking .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.vehicle-gps-tracking .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.vehicle-gps-tracking .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.vehicle-gps-tracking .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.vehicle-gps-tracking .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.vehicle-gps-tracking .reveal {
opacity: 1;
transform: none
}
.vehicle-gps-tracking  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.vehicle-gps-tracking #connected-tools.fsmTools *,
.vehicle-gps-tracking #connected-tools.fsmTools *::before,
.vehicle-gps-tracking #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.vehicle-gps-tracking #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.vehicle-gps-tracking #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.vehicle-gps-tracking #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.vehicle-gps-tracking #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.vehicle-gps-tracking #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__step::before,
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.vehicle-gps-tracking #connected-tools.fsmTools {
padding: 52px 0;
}
.vehicle-gps-tracking #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.vehicle-gps-tracking #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.vehicle-gps-tracking #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.vehicle-gps-tracking #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card,
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.vehicle-gps-tracking #connected-tools.fsmTools h2 {
font-size: 30px;
}
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.vehicle-gps-tracking #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.vehicle-gps-tracking  .hero {
padding: 52px 0 64px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 76%, rgba(255, 201, 40, .13), transparent 23%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.vehicle-gps-tracking .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.vehicle-gps-tracking .heroGrid>*,
.vehicle-gps-tracking .feature>*,
.vehicle-gps-tracking .aiGrid>* {
min-width: 0
}
.vehicle-gps-tracking .hero h1 {
max-width: 590px
}
.vehicle-gps-tracking .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.vehicle-gps-tracking .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.vehicle-gps-tracking .heroVisual {
position: relative;
min-width: 0
}
.vehicle-gps-tracking .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 174px;
gap: 13px 12px;
align-items: start;
max-width: 620px;
margin-left: auto
}
.vehicle-gps-tracking .assetStage:before {
content: "";
position: absolute;
inset: 55px -7px 18px 20px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .055) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.vehicle-gps-tracking .assetStage>* {
position: relative;
z-index: 1
}
.vehicle-gps-tracking .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #111;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px;
margin-left: 10px
}
.vehicle-gps-tracking .gpsBoard {
grid-column: 1/-1;
border: 1px solid #BEDDEB;
border-radius: 19px;
background: #fff;
overflow: hidden
}
.vehicle-gps-tracking .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 16px;
border-bottom: 1px solid var(--line)
}
.vehicle-gps-tracking .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.vehicle-gps-tracking .brandTile {
width: 28px;
height: 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.vehicle-gps-tracking .brandTile .icon {
width: 18px;
height: 18px
}
.vehicle-gps-tracking .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.vehicle-gps-tracking .boardToolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 12px 16px;
font-size: 12px;
font-weight: 800
}
.vehicle-gps-tracking .boardToolbar small {
font-size: 9px;
color: var(--muted);
font-weight: 500
}
.vehicle-gps-tracking .gpsMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0 14px 12px
}
.vehicle-gps-tracking .gpsMetric {
border: 1px solid var(--line);
border-radius: 9px;
padding: 8px 11px;
background: #F8FCFE
}
.vehicle-gps-tracking .gpsMetric>strong {
display: block;
font-size: 19px;
line-height: 1.2;
color: var(--navy)
}
.vehicle-gps-tracking .gpsMetric>span {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 4px
}
.vehicle-gps-tracking .gpsMetric:nth-child(2) {
background: #F3FAF6;
border-color: #D0E8DB
}
.vehicle-gps-tracking .gpsMap {
position: relative;
background: #ECF4F5;
border: 1px solid #D3E4E9;
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.vehicle-gps-tracking .gpsMap>svg {
display: block;
width: 100%;
height: auto
}
.vehicle-gps-tracking .gpsMap.heroMap {
margin: 0 14px 12px
}
.vehicle-gps-tracking .mapKey {
display: flex;
align-items: center;
gap: 13px;
padding: 9px 12px;
border-top: 1px solid #D3E4E9;
background: rgba(255, 255, 255, .93);
font-size: 8px;
color: #4F6E7D;
line-height: 1.4
}
.vehicle-gps-tracking .mapKey span {
display: inline-flex;
gap: 5px;
align-items: center
}
.vehicle-gps-tracking .mapKey i {
width: 6px;
height: 6px;
display: block;
border-radius: 50%;
background: #147CAC
}
.vehicle-gps-tracking .mapKey .green i {
background: var(--green)
}
.vehicle-gps-tracking .mapKey .gray i {
background: #718391
}
.vehicle-gps-tracking .mapChip {
position: absolute;
top: 12px;
left: 12px;
background: #fff;
border: 1px solid #C9DDE7;
border-radius: 7px;
padding: 6px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
font-weight: 800;
color: var(--navy)
}
.vehicle-gps-tracking .mapChip .icon {
width: 13px;
height: 13px
}
.vehicle-gps-tracking .boardFooter {
padding: 10px 180px 10px 15px;
min-height: 44px;
border-top: 1px solid var(--line);
font-size: 8px;
line-height: 1.55;
color: #4D697B;
background: var(--sky2)
}
.vehicle-gps-tracking .fleetContext {
grid-column: 1;
background: #102A3A;
border: 1px solid #294655;
border-radius: 15px;
padding: 15px;
color: #fff;
margin-left: 9px
}
.vehicle-gps-tracking .contextHead {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
margin-bottom: 8px
}
.vehicle-gps-tracking .contextHead>.icon {
color: var(--yellow);
width: 18px;
height: 18px
}
.vehicle-gps-tracking .fleetContext>strong {
display: block;
font-size: 17px;
line-height: 1.35
}
.vehicle-gps-tracking .fleetContext>p {
font-size: 10px;
line-height: 1.6;
color: #CDDFE9;
margin-top: 7px
}
.vehicle-gps-tracking .contextTrail {
font-size: 9px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #385261;
display: flex;
gap: 7px;
align-items: center;
color: #BDD7E6
}
.vehicle-gps-tracking .contextTrail .icon {
width: 13px;
height: 13px;
color: var(--yellow)
}
.vehicle-gps-tracking .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -44px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 27px;
padding: 6px;
z-index: 3
}
.vehicle-gps-tracking .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden
}
.vehicle-gps-tracking .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.vehicle-gps-tracking .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.vehicle-gps-tracking .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.vehicle-gps-tracking .phoneHead strong {
font-size: 11px;
display: block
}
.vehicle-gps-tracking .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.vehicle-gps-tracking .phoneBody {
padding: 11px 10px 12px
}
.vehicle-gps-tracking .phoneBody>strong {
display: block;
font-size: 12px;
line-height: 1.4;
color: var(--navy)
}
.vehicle-gps-tracking .phoneBody>p {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 5px
}
.vehicle-gps-tracking .etaValue {
font-size: 30px;
font-weight: 850;
line-height: 1.1;
letter-spacing: -.03em;
color: var(--navy);
margin: 13px 0 3px
}
.vehicle-gps-tracking .etaValue small {
font-size: 12px;
font-weight: 700;
letter-spacing: 0
}
.vehicle-gps-tracking .etaLabel {
display: block;
font-size: 8px;
color: var(--muted)
}
.vehicle-gps-tracking .phoneRoute {
display: flex;
gap: 6px;
margin: 13px 0;
padding: 8px;
background: #F2FAFE;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 8px;
line-height: 1.6;
color: #506C7D
}
.vehicle-gps-tracking .phoneRoute .icon {
width: 14px;
height: 14px;
color: var(--navy)
}
.vehicle-gps-tracking .mockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 7px;
background: var(--yellow);
color: #111;
border-radius: 7px;
font-size: 9px;
font-weight: 800;
text-align: center;
line-height: 1.4
}
.vehicle-gps-tracking .mockAction .icon {
width: 13px;
height: 13px
}
.vehicle-gps-tracking .phoneFine {
font-size: 7px;
text-align: center;
color: var(--muted);
margin-top: 7px;
display: block
}
.vehicle-gps-tracking .diagramCaption {
text-align: center;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 12px
}
.vehicle-gps-tracking .visual {
box-shadow: none
}
.vehicle-gps-tracking .gpsNote {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 13px;
padding: 12px 13px;
border: 1px solid #D0E5EE;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.6;
color: #4D6A7C
}
.vehicle-gps-tracking .gpsNote>.icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
color: var(--navy);
margin-top: 2px
}
.vehicle-gps-tracking .gpsNote strong {
color: var(--navy)
}
.vehicle-gps-tracking .gpsNote.yellow {
border-color: #ECDD9C;
background: #FFFBEB;
color: #6D5B21
}
.vehicle-gps-tracking .miniLabel {
font-size: 9px;
color: var(--muted);
font-weight: 750;
letter-spacing: .035em
}
.vehicle-gps-tracking .vehicleRoster {
display: grid;
gap: 9px;
margin-top: 12px
}
.vehicle-gps-tracking .vehicleRow {
display: grid;
grid-template-columns: 33px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 11px 12px
}
.vehicle-gps-tracking .vehicleBadge {
display: grid;
place-items: center;
width: 33px;
height: 33px;
border-radius: 9px;
background: var(--sky);
color: var(--navy)
}
.vehicle-gps-tracking .vehicleBadge .icon {
width: 21px;
height: 21px
}
.vehicle-gps-tracking .vehicleRow strong {
display: block;
font-size: 11px;
line-height: 1.4
}
.vehicle-gps-tracking .vehicleRow small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.vehicle-gps-tracking .vehicleRow .pill {
font-size: 8px
}
.vehicle-gps-tracking .gpsNote p {
font-size: 10px !important;
line-height: 1.6;
margin: 0 !important
}
.vehicle-gps-tracking .routeHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 15px;
background: #0D2637;
color: #fff;
border-radius: 11px;
margin-bottom: 13px
}
.vehicle-gps-tracking .routeHeader strong {
font-size: 12px
}
.vehicle-gps-tracking .routeHeader small {
font-size: 9px;
color: #CADFEA
}
.vehicle-gps-tracking .routeScene {
display: grid;
grid-template-columns: minmax(0, 1fr) 176px;
gap: 14px;
align-items: center
}
.vehicle-gps-tracking .routeStop {
display: flex;
align-items: flex-start;
gap: 10px;
position: relative;
padding: 0 0 20px
}
.vehicle-gps-tracking .routeStop:last-child {
padding-bottom: 0
}
.vehicle-gps-tracking .routeStop:not(:last-child):before {
content: "";
position: absolute;
left: 13px;
top: 31px;
bottom: 4px;
border-left: 1px dashed #9CBBCB
}
.vehicle-gps-tracking .stopNum {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 9px;
background: #fff;
border: 1px solid #BED8E6;
color: var(--navy);
font-size: 11px;
font-weight: 800
}
.vehicle-gps-tracking .routeStop.current .stopNum {
background: var(--yellow);
border-color: #E6B72B;
color: #111
}
.vehicle-gps-tracking .routeStop strong {
font-size: 12px;
line-height: 1.4;
display: block;
margin-top: 2px
}
.vehicle-gps-tracking .routeStop small {
display: block;
color: var(--muted);
font-size: 10px;
margin-top: 4px;
line-height: 1.55
}
.vehicle-gps-tracking .routeStop .pill {
font-size: 8px;
margin-top: 7px
}
.vehicle-gps-tracking .previewPhone {
padding: 6px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 25px
}
.vehicle-gps-tracking .messageBody {
padding: 12px 10px
}
.vehicle-gps-tracking .messageBubble {
padding: 11px;
background: #F0F8FC;
border: 1px solid #D5E7EF;
border-radius: 10px 10px 10px 3px;
font-size: 10px;
line-height: 1.6;
color: #34586D
}
.vehicle-gps-tracking .messageBubble strong {
display: block;
font-size: 11px;
margin-bottom: 7px;
color: var(--navy)
}
.vehicle-gps-tracking .arrivalCard {
border: 1px solid #D8E8F0;
background: #fff;
border-radius: 10px;
padding: 11px;
margin-top: 10px
}
.vehicle-gps-tracking .arrivalCard>small {
font-size: 8px;
color: var(--muted);
display: block
}
.vehicle-gps-tracking .arrivalCard>strong {
font-size: 22px;
display: block;
line-height: 1.3;
color: var(--navy);
margin: 5px 0
}
.vehicle-gps-tracking .arrivalCard>span {
font-size: 8px;
line-height: 1.5;
color: var(--muted);
display: block
}
.vehicle-gps-tracking .routeSummary {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 11px 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 9px;
margin-top: 14px;
font-size: 10px;
color: #4C6B7D
}
.vehicle-gps-tracking .routeSummary strong {
color: var(--navy)
}
.vehicle-gps-tracking .tripMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 13px
}
.vehicle-gps-tracking .tripMetric {
padding: 13px 11px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff
}
.vehicle-gps-tracking .tripMetric:nth-child(2) {
border-top: 3px solid var(--yellow);
padding-top: 11px
}
.vehicle-gps-tracking .tripMetric>strong {
font-size: 23px;
line-height: 1.3;
color: var(--navy);
display: block;
letter-spacing: -.025em
}
.vehicle-gps-tracking .tripMetric>span {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 5px
}
.vehicle-gps-tracking .tripLedger {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: #fff
}
.vehicle-gps-tracking .tripHead,
.vehicle-gps-tracking .tripRow {
display: grid;
grid-template-columns: 65px minmax(0, 1fr) 60px;
align-items: center;
gap: 10px;
padding: 12px 13px
}
.vehicle-gps-tracking .tripHead {
font-size: 9px;
color: #547183;
background: #F5FBFF;
font-weight: 750
}
.vehicle-gps-tracking .tripRow {
border-top: 1px solid #E4EDF3
}
.vehicle-gps-tracking .tripRow>span {
font-size: 10px;
color: var(--navy)
}
.vehicle-gps-tracking .tripRow strong {
font-size: 11px;
display: block
}
.vehicle-gps-tracking .tripRow small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-top: 3px
}
.vehicle-gps-tracking .tripRow>b {
font-size: 11px;
color: var(--navy);
text-align: right
}
.vehicle-gps-tracking .tripHead>span:last-child {
text-align: right
}
.vehicle-gps-tracking .eventPanel {
margin-top: 13px;
border: 1px solid #EBD998;
background: #FFFBEC;
border-radius: 11px;
padding: 13px
}
.vehicle-gps-tracking .eventTitle {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
color: #725717
}
.vehicle-gps-tracking .eventTitle .icon {
width: 17px;
height: 17px
}
.vehicle-gps-tracking .eventPanel>p {
font-size: 11px !important;
line-height: 1.6;
margin-top: 6px !important;
color: #6C5E37
}
.vehicle-gps-tracking .eventMeta {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 10px
}
.vehicle-gps-tracking .eventMeta span {
font-size: 8px;
background: #fff;
border: 1px solid #EADBAB;
border-radius: 5px;
padding: 4px 6px;
color: #6E602F
}
.vehicle-gps-tracking .integrationPair {
display: grid;
grid-template-columns: 1fr 25px 1fr;
gap: 12px;
align-items: center;
margin-bottom: 15px
}
.vehicle-gps-tracking .sourceSystem {
padding: 16px 13px;
text-align: center;
border: 1px solid #D1E3EB;
border-radius: 11px;
background: #fff
}
.vehicle-gps-tracking .sourceSystem:first-child {
background: #F3F9FC
}
.vehicle-gps-tracking .sourceSystem>strong {
display: block;
font-size: 14px;
color: var(--navy)
}
.vehicle-gps-tracking .sourceSystem>span {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 4px
}
.vehicle-gps-tracking .integrationPair>.icon {
width: 23px;
height: 23px;
color: var(--navy)
}
.vehicle-gps-tracking .diagnosticCard {
background: #fff;
border: 1px solid #D6E5EC;
border-radius: 12px;
overflow: hidden
}
.vehicle-gps-tracking .diagnosticHead {
padding: 13px 15px;
background: #F4FAFD;
border-bottom: 1px solid #D6E5EC;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px
}
.vehicle-gps-tracking .diagnosticHead>strong {
font-size: 12px;
color: var(--navy)
}
.vehicle-gps-tracking .diagnosticBody {
padding: 15px
}
.vehicle-gps-tracking .sensorRows {
display: grid;
gap: 9px
}
.vehicle-gps-tracking .sensorRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-bottom: 9px;
border-bottom: 1px solid #E4ECF2;
font-size: 10px;
color: var(--muted)
}
.vehicle-gps-tracking .sensorRow strong {
color: var(--navy);
font-size: 11px
}
.vehicle-gps-tracking .sensorRow:last-child {
border: 0;
padding: 0
}
.vehicle-gps-tracking .maintenanceAction {
margin-top: 14px;
background: #102A3A;
color: #fff;
border-radius: 12px;
padding: 15px;
display: flex;
gap: 11px;
align-items: flex-start
}
.vehicle-gps-tracking .maintenanceAction>.icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
color: var(--yellow);
margin-top: 1px
}
.vehicle-gps-tracking .maintenanceAction strong {
font-size: 13px;
line-height: 1.4;
display: block
}
.vehicle-gps-tracking .maintenanceAction p {
font-size: 11px !important;
color: #CFDFE9;
line-height: 1.6;
margin-top: 5px !important
}
.vehicle-gps-tracking .maintenanceAction small {
font-size: 9px;
color: #AFCADA;
display: block;
margin-top: 9px
} @media(max-width:1100px) and (min-width:961px) {
.vehicle-gps-tracking .heroGrid .heroGrid {
gap: 28px
} .hero .lead {
font-size: 17px
}
.assetStage {
grid-template-columns: minmax(0, 1fr) 156px;
gap: 11px 10px
}
.boardFooter {
padding-right: 167px
}
.fleetContext {
margin-left: 0;
padding: 13px
}
.fleetContext>strong {
font-size: 15px
}
.contextTrail {
font-size: 8px
}
.visual {
padding: 18px
}
.routeScene {
grid-template-columns: minmax(0, 1fr) 157px;
gap: 11px
}
.vehicleRow {
padding: 10px;
gap: 8px
}
.tripHead,
.tripRow {
grid-template-columns: 55px minmax(0, 1fr) 50px;
gap: 8px;
padding: 11px
}
.sourceSystem {
padding: 13px 10px
}
}
@media(max-width:960px) {
.vehicle-gps-tracking .heroGrid,
.vehicle-gps-tracking .feature,
.vehicle-gps-tracking .aiGrid,
.vehicle-gps-tracking .final {
grid-template-columns: 1fr
}
.vehicle-gps-tracking .heroGrid {
gap: 34px
}
.vehicle-gps-tracking .hero h1 {
max-width: 790px
}
.vehicle-gps-tracking .hero .lead {
max-width: 750px
}
.vehicle-gps-tracking .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.vehicle-gps-tracking .assetStage {
margin: auto
}
.vehicle-gps-tracking .feature.reverse .visual {
order: 0
}
.vehicle-gps-tracking .feature {
gap: 30px
}
.vehicle-gps-tracking .feature>div:first-child {
max-width: 800px
}
.vehicle-gps-tracking .outcomes,
.vehicle-gps-tracking .featureGrid,
.vehicle-gps-tracking .connectedGrid,
.vehicle-gps-tracking .useCases {
grid-template-columns: repeat(2, 1fr)
}
.vehicle-gps-tracking .logos {
grid-template-columns: repeat(3, 1fr)
}
.vehicle-gps-tracking .reviews {
grid-template-columns: 1fr
}
.vehicle-gps-tracking .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.vehicle-gps-tracking .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.vehicle-gps-tracking .ratingItem:nth-child(2) {
border: 0
}
.vehicle-gps-tracking .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.vehicle-gps-tracking .final .btn {
min-width: 195px
}
.vehicle-gps-tracking .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.vehicle-gps-tracking .aiGrid {
gap: 30px
}
.vehicle-gps-tracking .aiMini {
max-width: 760px
}
.vehicle-gps-tracking .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.vehicle-gps-tracking .wrap {
width: calc(100% - 24px)
}
.vehicle-gps-tracking section {
padding: 56px 0
}
.vehicle-gps-tracking .hero {
padding: 32px 0 42px
}
.vehicle-gps-tracking h1 {
font-size: 42px
}
.vehicle-gps-tracking h2 {
font-size: 34px
}
.vehicle-gps-tracking .lead {
font-size: 17px
}
.vehicle-gps-tracking .sectionHead p {
font-size: 16px
}
.vehicle-gps-tracking .sectionHead {
margin-bottom: 28px
}
.vehicle-gps-tracking .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.vehicle-gps-tracking .heroGrid {
gap: 25px
}
.vehicle-gps-tracking .hero .actions {
gap: 8px
}
.vehicle-gps-tracking .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.vehicle-gps-tracking .micro {
font-size: 11px
}
.vehicle-gps-tracking .heroPills {
gap: 6px
}
.vehicle-gps-tracking .heroPills span {
font-size: 9px
}
.vehicle-gps-tracking .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.vehicle-gps-tracking .assetStage {
grid-template-columns: minmax(0, 1fr) 153px;
gap: 11px 9px
}
.vehicle-gps-tracking .assetTag {
font-size: 9px;
margin-left: 0
}
.vehicle-gps-tracking .boardHeader {
padding: 12px
}
.vehicle-gps-tracking .boardBrand {
font-size: 12px
}
.vehicle-gps-tracking .sampleBadge {
font-size: 7px
}
.vehicle-gps-tracking .boardToolbar {
padding: 10px 12px;
font-size: 11px
}
.vehicle-gps-tracking .boardToolbar small {
font-size: 8px
}
.vehicle-gps-tracking .gpsMetrics {
margin: 0 11px 10px;
gap: 7px
}
.vehicle-gps-tracking .gpsMetric {
padding: 8px 9px
}
.vehicle-gps-tracking .gpsMetric>strong {
font-size: 17px
}
.vehicle-gps-tracking .gpsMap.heroMap {
margin: 0 11px 10px
}
.vehicle-gps-tracking .mapKey {
padding: 8px;
gap: 9px;
font-size: 7px
}
.vehicle-gps-tracking .boardFooter {
padding: 10px 160px 10px 12px;
font-size: 8px;
min-height: 48px
}
.vehicle-gps-tracking .assetPhone {
margin-top: -35px;
border-radius: 24px
}
.vehicle-gps-tracking .phoneScreen {
border-radius: 18px
}
.vehicle-gps-tracking .phoneHead {
padding: 10px 9px
}
.vehicle-gps-tracking .phoneHead strong {
font-size: 10px
}
.vehicle-gps-tracking .phoneHead small {
font-size: 7px
}
.vehicle-gps-tracking .phoneBody {
padding: 11px 9px
}
.vehicle-gps-tracking .phoneBody>strong {
font-size: 11px
}
.vehicle-gps-tracking .phoneBody>p {
font-size: 8px
}
.vehicle-gps-tracking .etaValue {
font-size: 28px
}
.vehicle-gps-tracking .phoneFine {
font-size: 7px
}
.vehicle-gps-tracking .fleetContext {
margin-left: 0;
padding: 12px
}
.vehicle-gps-tracking .contextHead {
font-size: 9px;
gap: 6px;
margin-bottom: 7px
}
.vehicle-gps-tracking .contextHead>.icon {
width: 15px;
height: 15px
}
.vehicle-gps-tracking .fleetContext>strong {
font-size: 13px
}
.vehicle-gps-tracking .fleetContext>p {
font-size: 10px
}
.vehicle-gps-tracking .contextTrail {
font-size: 8px;
line-height: 1.5;
gap: 5px;
flex-wrap: wrap
}
.vehicle-gps-tracking .diagramCaption {
font-size: 9px
}
.vehicle-gps-tracking .trust {
padding: 23px 0
}
.vehicle-gps-tracking .trustLabel {
font-size: 12px
}
.vehicle-gps-tracking .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.vehicle-gps-tracking .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.vehicle-gps-tracking .logo.dhl {
font-size: 19px
}
.vehicle-gps-tracking .logo.adobe {
font-size: 17px
}
.vehicle-gps-tracking .logo.golden {
font-size: 8px
}
.vehicle-gps-tracking .fl,
.vehicle-gps-tracking .outcomes,
.vehicle-gps-tracking .featureGrid,
.vehicle-gps-tracking .connectedGrid,
.vehicle-gps-tracking .useCases {
grid-template-columns: 1fr
}
.vehicle-gps-tracking .fi {
font-size: 14px
}
.vehicle-gps-tracking .outcome {
padding: 21px
}
.vehicle-gps-tracking .outcome strong {
margin-top: 12px
}
.vehicle-gps-tracking .outcome span {
font-size: 14px
}
.vehicle-gps-tracking .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.vehicle-gps-tracking .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.vehicle-gps-tracking .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.vehicle-gps-tracking .vehicleRow {
padding: 10px;
gap: 8px
}
.vehicle-gps-tracking .vehicleRow strong {
font-size: 10px
}
.vehicle-gps-tracking .vehicleRow small {
font-size: 8px
}
.vehicle-gps-tracking .vehicleRow .pill {
font-size: 7px;
padding: 4px 6px
}
.vehicle-gps-tracking .routeScene {
grid-template-columns: minmax(0, 1fr) 151px;
gap: 12px
}
.vehicle-gps-tracking .routeStop strong {
font-size: 11px
}
.vehicle-gps-tracking .routeStop small {
font-size: 9px
}
.vehicle-gps-tracking .routeStop {
gap: 8px
}
.vehicle-gps-tracking .routeHeader {
padding: 12px
}
.vehicle-gps-tracking .routeHeader strong {
font-size: 11px
}
.vehicle-gps-tracking .routeHeader small {
font-size: 8px
}
.vehicle-gps-tracking .routeSummary {
font-size: 9px;
padding: 10px;
gap: 8px
}
.vehicle-gps-tracking .tripMetrics {
gap: 7px
}
.vehicle-gps-tracking .tripMetric {
padding: 11px 9px
}
.vehicle-gps-tracking .tripMetric>strong {
font-size: 21px
}
.vehicle-gps-tracking .tripMetric>span {
font-size: 8px
}
.vehicle-gps-tracking .tripHead,
.vehicle-gps-tracking .tripRow {
grid-template-columns: 51px minmax(0, 1fr) 50px;
gap: 8px;
padding: 11px
}
.vehicle-gps-tracking .tripRow strong {
font-size: 10px
}
.vehicle-gps-tracking .tripRow small {
font-size: 8px
}
.vehicle-gps-tracking .eventPanel {
padding: 12px
}
.vehicle-gps-tracking .integrationPair {
gap: 8px;
grid-template-columns: 1fr 22px 1fr
}
.vehicle-gps-tracking .sourceSystem {
padding: 13px 10px
}
.vehicle-gps-tracking .sourceSystem>strong {
font-size: 12px
}
.vehicle-gps-tracking .sourceSystem>span {
font-size: 8px
}
.vehicle-gps-tracking .diagnosticBody {
padding: 13px
}
.vehicle-gps-tracking .maintenanceAction {
padding: 13px
}
.vehicle-gps-tracking .maintenanceAction strong {
font-size: 12px
}
.vehicle-gps-tracking .gpsNote {
padding: 11px
}
.vehicle-gps-tracking .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.vehicle-gps-tracking .aiMini div {
padding: 16px
}
.vehicle-gps-tracking .aiMini strong {
font-size: 14px
}
.vehicle-gps-tracking .aiMini span {
font-size: 13px
}
.vehicle-gps-tracking .promptBox {
padding: 18px;
border-radius: 17px
}
.vehicle-gps-tracking .prompt {
font-size: 13px;
padding: 13px
}
.vehicle-gps-tracking .promptHead {
font-size: 19px
}
.vehicle-gps-tracking .promptFoot {
font-size: 10px !important
}
.vehicle-gps-tracking .connectedCard {
padding: 22px
}
.vehicle-gps-tracking .connectedCard p,
.vehicle-gps-tracking .featureCard p,
.vehicle-gps-tracking .useCase p {
font-size: 14px
}
.vehicle-gps-tracking .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.vehicle-gps-tracking .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.vehicle-gps-tracking .ratingItem {
border: 0
}
.vehicle-gps-tracking .ratingLead {
margin-bottom: 3px
}
.vehicle-gps-tracking .review p {
font-size: 14px
}
.vehicle-gps-tracking .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.vehicle-gps-tracking .ctaBtns {
width: 100%
}
.vehicle-gps-tracking .ctaBtns .btn {
flex: 1
}
.vehicle-gps-tracking .cta p {
font-size: 14px
}
.vehicle-gps-tracking .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.vehicle-gps-tracking .final h2 {
font-size: 32px
}
.vehicle-gps-tracking .final p {
font-size: 15px
}
.vehicle-gps-tracking .final .ctaBtns {
flex-direction: column
}
.vehicle-gps-tracking .final .btn {
min-width: 0;
width: 100%
}
.vehicle-gps-tracking .faq details {
padding: 16px
}
.vehicle-gps-tracking .faq summary {
font-size: 14px
}
.vehicle-gps-tracking .faq details p {
font-size: 14px
}
}
@media(max-width:420px) {
.vehicle-gps-tracking .routeScene {
grid-template-columns: 1fr
}
.vehicle-gps-tracking .routeStops {
padding: 4px 4px 0
}
.vehicle-gps-tracking .previewPhone {
width: 196px;
margin: 0 auto
}
.vehicle-gps-tracking .routeStop {
padding-bottom: 18px
}
.vehicle-gps-tracking .routeStop strong {
font-size: 12px
}
.vehicle-gps-tracking .routeStop small {
font-size: 10px
}
.vehicle-gps-tracking .routeSummary {
font-size: 10px
}
.vehicle-gps-tracking .mapChip {
font-size: 8px;
padding: 5px 7px;
top: 9px;
left: 9px
}
}
@media(max-width:360px) {
.vehicle-gps-tracking .assetStage {
grid-template-columns: minmax(0, 1fr) 137px;
gap: 10px 8px
}
.vehicle-gps-tracking .fleetContext {
padding: 10px
}
.vehicle-gps-tracking .contextHead {
font-size: 8px
}
.vehicle-gps-tracking .fleetContext>strong {
font-size: 12px
}
.vehicle-gps-tracking .fleetContext>p {
font-size: 9px
}
.vehicle-gps-tracking .contextTrail {
font-size: 7px
}
.vehicle-gps-tracking .phoneHead strong {
font-size: 9px
}
.vehicle-gps-tracking .phoneBody>strong {
font-size: 10px
}
.vehicle-gps-tracking .phoneBody>p {
font-size: 8px
}
.vehicle-gps-tracking .phoneRoute {
font-size: 7px;
padding: 7px;
gap: 4px
}
.vehicle-gps-tracking .phoneRoute .icon {
width: 12px;
height: 12px
}
.vehicle-gps-tracking .mockAction {
font-size: 8px
}
.vehicle-gps-tracking .boardFooter {
padding-right: 144px;
font-size: 7px
}
.vehicle-gps-tracking .gpsMetric>span {
font-size: 7px
}
.vehicle-gps-tracking .tripMetric>strong {
font-size: 19px
}
.vehicle-gps-tracking .vehicleRow {
grid-template-columns: 29px minmax(0, 1fr) auto;
gap: 7px
}
.vehicle-gps-tracking .vehicleBadge {
width: 29px;
height: 29px
}
.vehicle-gps-tracking .vehicleRow .pill {
font-size: 7px
}
.vehicle-gps-tracking .tripHead,
.vehicle-gps-tracking .tripRow {
padding: 10px;
gap: 7px;
grid-template-columns: 44px minmax(0, 1fr) 45px
}
}  .field-service-reporting-software .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.field-service-reporting-software .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.field-service-reporting-software a:focus-visible,
.field-service-reporting-software summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.field-service-reporting-software .dark a:focus-visible,
.field-service-reporting-software .final a:focus-visible {
outline-color: var(--yellow)
}
.field-service-reporting-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.field-service-reporting-software .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.field-service-reporting-software .soft {
background: var(--sky2)
}
.field-service-reporting-software .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.field-service-reporting-software .dark h2,
.field-service-reporting-software .dark h3 {
color: #fff
}
.field-service-reporting-software .dark p {
color: #D6D6D6
}
.field-service-reporting-software .dark .ey {
background: var(--yellow)
}
.field-service-reporting-software .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.field-service-reporting-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.field-service-reporting-software .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.field-service-reporting-software .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin-bottom: 0;
background: transparent;
}
.field-service-reporting-software .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.field-service-reporting-software .textLink .icon {
width: 16px;
height: 16px
}
.field-service-reporting-software .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.field-service-reporting-software .skipLink:focus {
top: 12px
} .field-service-reporting-software .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.field-service-reporting-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.field-service-reporting-software .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.field-service-reporting-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.field-service-reporting-software .outcome:nth-child(3):before {
background: var(--green)
}
.field-service-reporting-software .outcome:nth-child(4):before {
background: var(--purple)
}
.field-service-reporting-software .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.field-service-reporting-software .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.field-service-reporting-software .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .field-service-reporting-software .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.field-service-reporting-software .feature.reverse .visual {
order: -1
}
.field-service-reporting-software .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.field-service-reporting-software .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.field-service-reporting-software .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.field-service-reporting-software .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.field-service-reporting-software .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.field-service-reporting-software .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.field-service-reporting-software .visual>* {
position: relative;
z-index: 2
}
.field-service-reporting-software .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.field-service-reporting-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.field-service-reporting-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.field-service-reporting-software .uiHeading .icon {
width: 19px;
height: 19px
}
.field-service-reporting-software .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.field-service-reporting-software .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.field-service-reporting-software .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.field-service-reporting-software .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.field-service-reporting-software .pill.green {
background: var(--greenbg);
color: #116746
}
.field-service-reporting-software .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.field-service-reporting-software .pill.gray {
background: #F0F3F5;
color: #586C79
}
.field-service-reporting-software .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .field-service-reporting-software .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.field-service-reporting-software .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.field-service-reporting-software .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.field-service-reporting-software .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.field-service-reporting-software .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.field-service-reporting-software .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.field-service-reporting-software .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.field-service-reporting-software .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.field-service-reporting-software .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.field-service-reporting-software .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .field-service-reporting-software .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.field-service-reporting-software .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.field-service-reporting-software .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.field-service-reporting-software .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.field-service-reporting-software .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.field-service-reporting-software .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.field-service-reporting-software .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .field-service-reporting-software .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.field-service-reporting-software .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.field-service-reporting-software .featureCard:hover {
transform: translateY(-3px)
}
.field-service-reporting-software .featureIcon,
.field-service-reporting-software .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.field-service-reporting-software .featureIcon .icon,
.field-service-reporting-software .useIcon .icon {
width: 22px;
height: 22px
}
.field-service-reporting-software .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.field-service-reporting-software .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .field-service-reporting-software .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.field-service-reporting-software .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.field-service-reporting-software .useCase h3 {
font-size: 20px
}
.field-service-reporting-software .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.field-service-reporting-software .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.field-service-reporting-software .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.field-service-reporting-software .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.field-service-reporting-software .review h3 {
font-size: 22px
}
.field-service-reporting-software .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.field-service-reporting-software .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.field-service-reporting-software .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.field-service-reporting-software .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.field-service-reporting-software .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.field-service-reporting-software .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.field-service-reporting-software .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.field-service-reporting-software .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.field-service-reporting-software .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.field-service-reporting-software .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.field-service-reporting-software .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.field-service-reporting-software .cta h3 {
font-size: 19px
}
.field-service-reporting-software .cta.darkCta h3 {
color: #fff
}
.field-service-reporting-software .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.field-service-reporting-software .cta.darkCta p {
color: #D1D1D1
}
.field-service-reporting-software .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.field-service-reporting-software .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.field-service-reporting-software .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.field-service-reporting-software .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.field-service-reporting-software .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.field-service-reporting-software .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.field-service-reporting-software .reveal {
opacity: 1;
transform: none
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .field-service-reporting-software .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE)
}
.field-service-reporting-software .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.field-service-reporting-software .heroGrid>*,
.field-service-reporting-software .feature>*,
.field-service-reporting-software .aiGrid>* {
min-width: 0
}
.field-service-reporting-software .hero h1 {
max-width: 600px
}
.field-service-reporting-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.field-service-reporting-software .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.field-service-reporting-software .heroVisual {
position: relative;
min-width: 0
}
.field-service-reporting-software .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 178px;
gap: 14px 12px;
align-items: start
}
.field-service-reporting-software .assetStage:before {
content: "";
position: absolute;
inset: 48px 0 18px 20px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 26px 26px
}
.field-service-reporting-software .assetStage>* {
position: relative;
z-index: 1
}
.field-service-reporting-software .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px;
margin-left: 14px
}
.field-service-reporting-software .reportBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 18px;
overflow: hidden;
margin-right: 30px
}
.field-service-reporting-software .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 15px 16px;
border-bottom: 1px solid var(--line)
}
.field-service-reporting-software .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850
}
.field-service-reporting-software .brandTile {
width: 28px;
height: 28px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.field-service-reporting-software .brandTile .icon {
width: 18px;
height: 18px
}
.field-service-reporting-software .sampleBadge {
font-size: 8px;
font-weight: 800;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.field-service-reporting-software .boardBody {
padding: 16px
}
.field-service-reporting-software .reportHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px
}
.field-service-reporting-software .reportHeading strong {
display: block;
font-size: 15px;
line-height: 1.3;
color: var(--navy)
}
.field-service-reporting-software .reportHeading small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
.field-service-reporting-software .filterChip {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 8px;
color: #4C697A;
white-space: nowrap
}
.field-service-reporting-software .filterChip .icon {
width: 13px;
height: 13px
}
.field-service-reporting-software .heroMetrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px
}
.field-service-reporting-software .reportMetric {
padding: 12px 10px;
background: #F5FBFF;
border: 1px solid #D4E8F3;
border-radius: 10px;
min-width: 0
}
.field-service-reporting-software .reportMetric strong {
display: block;
font-size: 24px;
line-height: 1.15;
letter-spacing: -.035em;
color: var(--navy)
}
.field-service-reporting-software .reportMetric span {
font-size: 9px;
line-height: 1.45;
display: block;
color: #536F81;
margin-top: 6px
}
.field-service-reporting-software .reportMetric.yellow {
background: #FFFCF0;
border-color: #EFDB96
}
.field-service-reporting-software .heroMetrics .reportMetric {
padding: 11px 9px
}
.field-service-reporting-software .heroMetrics .reportMetric span {
font-size: 8px
}
.field-service-reporting-software .heroMetrics .reportMetric strong {
font-size: 23px
}
.field-service-reporting-software .heroCharts {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 10px;
margin-top: 12px
}
.field-service-reporting-software .trendCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 11px
}
.field-service-reporting-software .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
line-height: 1.4
}
.field-service-reporting-software .chartTitle strong {
font-size: 11px;
color: var(--navy)
}
.field-service-reporting-software .chartTitle>span {
font-size: 8px;
color: var(--muted)
}
.field-service-reporting-software .reportBars {
height: 127px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-top: 13px
}
.field-service-reporting-software .reportBar {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 6px;
min-width: 0;
text-align: center
}
.field-service-reporting-software .barPlot {
display: flex;
align-items: flex-end;
justify-content: center;
border-bottom: 1px solid var(--line);
background: repeating-linear-gradient(to top, transparent 0, transparent 25px, #EFF5F9 25px, #EFF5F9 26px)
}
.field-service-reporting-software .barPlot i {
display: block;
position: relative;
height: var(--bar);
width: 80%;
background: #BCE8FA;
border: 1px solid #9BD9F2;
border-radius: 5px 5px 0 0;
min-height: 20px;
font-style: normal
}
.field-service-reporting-software .barPlot b {
display: block;
font-size: 8px;
font-weight: 750;
color: var(--navy);
margin-top: 5px
}
.field-service-reporting-software .reportBar:last-child i {
background: var(--yellow);
border-color: #E2B42A
}
.field-service-reporting-software .reportBar>span {
font-size: 9px;
color: var(--muted)
}
.field-service-reporting-software .balancePanel {
padding: 13px 11px;
background: #F7FBFD;
border: 1px solid var(--line);
border-radius: 11px
}
.field-service-reporting-software .balancePanel>span {
font-size: 10px;
color: var(--navy);
font-weight: 750
}
.field-service-reporting-software .balancePanel>strong {
display: block;
font-size: 25px;
color: var(--navy);
line-height: 1.2;
letter-spacing: -.03em;
margin-top: 14px
}
.field-service-reporting-software .balancePanel>small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 4px
}
.field-service-reporting-software .stackedBar {
height: 7px;
border-radius: 5px;
overflow: hidden;
display: flex;
background: #E7EFF3;
margin: 14px 0 11px
}
.field-service-reporting-software .stackedBar i:first-child {
background: var(--brand)
}
.field-service-reporting-software .stackedBar i:last-child {
background: var(--yellow)
}
.field-service-reporting-software .balanceKey {
display: grid;
gap: 8px;
font-size: 8px;
color: var(--muted)
}
.field-service-reporting-software .balanceKey>span {
display: flex;
justify-content: space-between;
gap: 5px
}
.field-service-reporting-software .balanceKey b {
color: var(--navy);
font-size: 9px
}
.field-service-reporting-software .boardFooter {
padding: 10px 185px 10px 15px;
background: #F5FBFF;
border-top: 1px solid var(--line);
font-size: 9px;
color: #577384;
display: flex;
gap: 7px;
align-items: center;
min-height: 44px;
line-height: 1.5
}
.field-service-reporting-software .boardFooter .icon {
width: 15px;
height: 15px;
color: var(--green)
}
.field-service-reporting-software .insightCard {
grid-column: 1;
background: #0D2637;
color: #fff;
border: 1px solid #2D4858;
border-radius: 14px;
padding: 16px;
display: flex;
gap: 11px;
align-items: flex-start;
margin-left: 12px
}
.field-service-reporting-software .insightIcon {
width: 29px;
height: 29px;
flex: 0 0 29px;
border-radius: 8px;
background: var(--yellow);
color: #142A37;
display: grid;
place-items: center
}
.field-service-reporting-software .insightIcon .icon {
height: 18px;
width: 18px
}
.field-service-reporting-software .insightCard strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.field-service-reporting-software .insightCard p {
font-size: 11px;
color: #D4E4ED;
line-height: 1.65;
margin-top: 6px
}
.field-service-reporting-software .insightCard span {
display: block;
font-size: 8px;
color: #AFCEDD;
margin-top: 9px
}
.field-service-reporting-software .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -48px;
border: 1px solid #344F60;
border-radius: 27px;
padding: 6px;
background: #0C1E2A;
z-index: 3
}
.field-service-reporting-software .phoneScreen {
border-radius: 21px;
background: #fff;
overflow: hidden
}
.field-service-reporting-software .phoneTop {
height: 16px;
background: #0C1E2A;
display: grid;
place-items: center
}
.field-service-reporting-software .notch {
width: 42px;
height: 4px;
border-radius: 4px;
background: #566C79
}
.field-service-reporting-software .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.field-service-reporting-software .phoneHead strong {
font-size: 11px;
display: block
}
.field-service-reporting-software .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 4px
}
.field-service-reporting-software .phoneBody {
padding: 14px 11px 12px;
text-align: center
}
.field-service-reporting-software .phoneLabel {
font-size: 8px;
color: #597382;
display: block
}
.field-service-reporting-software .phoneNumber {
font-size: 42px;
color: var(--navy);
display: block;
line-height: 1.2;
letter-spacing: -.04em;
margin: 6px 0 2px
}
.field-service-reporting-software .phoneRow {
margin-top: 9px;
padding: 9px 0;
border-bottom: 1px solid #E5EEF4;
display: flex;
justify-content: space-between;
gap: 6px;
font-size: 9px;
color: var(--muted)
}
.field-service-reporting-software .phoneRow b {
color: var(--navy);
font-size: 11px
}
.field-service-reporting-software .phoneNote {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
background: #EAF8F3;
color: #145D46;
border-radius: 7px;
padding: 8px 5px;
font-size: 7px;
line-height: 1.5;
margin-top: 12px
}
.field-service-reporting-software .phoneNote .icon {
width: 12px;
height: 12px
}
.field-service-reporting-software .diagramCaption {
font-size: 10px;
color: var(--muted);
text-align: center;
line-height: 1.6;
margin-top: 14px
}
.field-service-reporting-software .scopeNote {
font-size: 12px !important;
line-height: 1.7 !important;
color: #586F7E !important;
margin-top: 18px !important;
border-left: 3px solid #B6D8E9;
padding-left: 12px
} .field-service-reporting-software .operationsGrid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 12px;
align-items: stretch
}
.field-service-reporting-software .statusPanel {
display: flex;
gap: 13px;
align-items: center;
padding: 16px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
flex-wrap: wrap;
justify-content: center
}
.field-service-reporting-software .donut {
width: 112px;
height: 112px;
flex: 0 0 112px;
display: grid;
place-items: center;
border-radius: 50%;
background: conic-gradient(var(--brand) 0 80%, var(--yellow) 80% 95%, #D9E5EC 95% 100%)
}
.field-service-reporting-software .donut>div {
width: 84px;
height: 84px;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
.field-service-reporting-software .donut strong {
font-size: 26px;
color: var(--navy);
line-height: 1.2;
letter-spacing: -.03em
}
.field-service-reporting-software .donut small {
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.field-service-reporting-software .statusLegend {
display: grid;
gap: 8px;
font-size: 9px;
width: 100%;
max-width: 175px
}
.field-service-reporting-software .statusLegend>span {
display: flex;
align-items: center;
gap: 6px
}
.field-service-reporting-software .statusLegend b {
margin-left: auto;
font-size: 10px
}
.field-service-reporting-software .statusLegend i {
width: 7px;
height: 7px;
border-radius: 2px
}
.field-service-reporting-software .statusLegend .blue {
background: var(--brand)
}
.field-service-reporting-software .statusLegend .yellow {
background: var(--yellow)
}
.field-service-reporting-software .statusLegend .gray {
background: #D9E5EC
}
.field-service-reporting-software .exceptionPanel {
padding: 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: #F9FCFE
}
.field-service-reporting-software .panelCaption {
font-size: 10px;
color: var(--navy);
font-weight: 800;
margin-bottom: 9px
}
.field-service-reporting-software .exceptionRow {
padding: 11px 0;
border-top: 1px solid #DFEBF1
}
.field-service-reporting-software .exceptionRow strong {
font-size: 11px;
display: block
}
.field-service-reporting-software .exceptionRow small {
display: block;
font-size: 9px;
color: var(--muted);
margin: 4px 0 8px;
line-height: 1.5
}
.field-service-reporting-software .invoicePanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 13px;
padding: 14px
}
.field-service-reporting-software .billingGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 13px 0
}
.field-service-reporting-software .billingGrid span {
font-size: 9px;
color: var(--muted);
display: block
}
.field-service-reporting-software .billingGrid strong {
font-size: 19px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 4px;
letter-spacing: -.03em
}
.field-service-reporting-software .billingGrid>div:last-child strong {
color: #806016
}
.field-service-reporting-software .invoiceTable {
border: 1px solid #E0EAF0;
border-radius: 8px;
overflow: hidden
}
.field-service-reporting-software .invoiceTable>div {
display: grid;
grid-template-columns: 1.1fr .8fr 1fr;
gap: 8px;
align-items: center;
padding: 9px 10px;
border-bottom: 1px solid #E2ECF1;
font-size: 10px
}
.field-service-reporting-software .invoiceTable>div:last-child {
border-bottom: 0
}
.field-service-reporting-software .invoiceTable .invoiceTableHead {
background: #F5FBFF;
font-size: 8px;
color: #607487
}
.field-service-reporting-software .invoiceTable .pill {
justify-self: start;
font-size: 8px
} .field-service-reporting-software .projectSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
.field-service-reporting-software .projectCostPanel {
padding: 17px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
margin-top: 13px
}
.field-service-reporting-software .projectLine {
padding: 14px 0 11px;
border-bottom: 1px solid #E4EDF3
}
.field-service-reporting-software .projectLine>div:first-child {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center
}
.field-service-reporting-software .projectLine strong {
font-size: 11px;
line-height: 1.5
}
.field-service-reporting-software .projectLine span {
font-size: 10px;
white-space: nowrap;
color: var(--navy)
}
.field-service-reporting-software .projectTrack {
position: relative;
height: 10px;
background: #EFF5F8;
border-radius: 5px;
margin: 12px 0 7px
}
.field-service-reporting-software .projectTrack i {
display: block;
width: var(--progress);
height: 100%;
background: #89CDEB;
border-radius: 5px
}
.field-service-reporting-software .projectTrack b {
position: absolute;
left: var(--mark);
top: -4px;
height: 18px;
border-left: 2px solid #294F64
}
.field-service-reporting-software .projectLine.attention i {
background: #F6CC54
}
.field-service-reporting-software .projectLine small {
font-size: 9px;
color: #597182;
line-height: 1.5;
display: block
}
.field-service-reporting-software .projectLine.attention small {
color: #896517
}
.field-service-reporting-software .plotScale {
display: flex;
justify-content: space-between;
font-size: 8px;
color: var(--muted);
margin-top: 9px
}
.field-service-reporting-software .costLegend {
display: flex;
gap: 15px;
font-size: 9px;
color: var(--muted);
margin-top: 12px
}
.field-service-reporting-software .costLegend span {
display: flex;
align-items: center;
gap: 6px
}
.field-service-reporting-software .costLegend i {
height: 7px;
width: 13px;
background: #89CDEB;
border-radius: 2px
}
.field-service-reporting-software .costLegend b {
height: 11px;
border-left: 2px solid #294F64
}
.field-service-reporting-software .reportFoot {
font-size: 10px;
line-height: 1.65;
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 13px;
color: #536F80
}
.field-service-reporting-software .reportFoot .icon {
height: 16px;
width: 16px;
margin-top: 1px
} .field-service-reporting-software .powerTile {
height: 27px;
width: 27px;
display: grid;
place-items: center;
background: var(--yellow);
color: #372D09;
border-radius: 7px
}
.field-service-reporting-software .powerTile .icon {
height: 17px;
width: 17px
}
.field-service-reporting-software .analyticsWindow {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden
}
.field-service-reporting-software .analyticsFilters {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
background: #F9FCFE;
border-bottom: 1px solid var(--line)
}
.field-service-reporting-software .analyticsFilters span {
display: flex;
align-items: center;
gap: 9px;
font-size: 10px;
color: #476B80
}
.field-service-reporting-software .analyticsFilters .icon {
width: 14px;
height: 14px
}
.field-service-reporting-software .analyticsTabs {
padding: 0 14px;
display: flex;
gap: 17px;
border-bottom: 1px solid var(--line)
}
.field-service-reporting-software .analyticsTabs span {
font-size: 9px;
color: #5E7484;
padding: 12px 0 9px
}
.field-service-reporting-software .analyticsTabs .active {
font-weight: 800;
color: var(--navy);
border-bottom: 3px solid var(--yellow)
}
.field-service-reporting-software .analyticsMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 14px
}
.field-service-reporting-software .analyticsMetrics strong {
font-size: 22px
}
.field-service-reporting-software .analyticsMetrics span {
font-size: 8px
}
.field-service-reporting-software .analyticsMetrics .reportMetric {
padding: 11px 9px
}
.field-service-reporting-software .teamChart {
padding: 4px 15px 16px
}
.field-service-reporting-software .teamBar {
display: grid;
grid-template-columns: 42px 1fr 32px;
align-items: center;
gap: 10px;
margin-top: 17px;
font-size: 10px
}
.field-service-reporting-software .teamBar>div {
height: 12px;
border-radius: 4px;
background: #EFF5F8;
overflow: hidden
}
.field-service-reporting-software .teamBar i {
display: block;
height: 100%;
background: #A4DBF1;
border-radius: 4px
}
.field-service-reporting-software .teamBar:nth-of-type(3) i {
background: #81CBE8
}
.field-service-reporting-software .teamBar:nth-of-type(4) i {
background: #FFC928
}
.field-service-reporting-software .teamBar>span {
color: #527080
}
.field-service-reporting-software .teamBar b {
text-align: right;
font-size: 10px;
color: var(--navy)
}
.field-service-reporting-software .teamFoot {
font-size: 8px;
color: #5C7483;
margin-top: 12px;
line-height: 1.6
}
.field-service-reporting-software .analyticsFocus {
display: flex;
gap: 10px;
justify-content: space-between;
flex-wrap: wrap;
padding: 13px 14px;
border-top: 1px solid var(--line);
background: #F8FCFE
}
.field-service-reporting-software .analyticsFocus span {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
color: #496D80
}
.field-service-reporting-software .analyticsFocus .icon {
width: 13px;
height: 13px
} .field-service-reporting-software .libraryFilters {
display: flex;
gap: 9px;
margin-bottom: 12px
}
.field-service-reporting-software .libraryFilters>span {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
background: #fff;
border: 1px solid var(--line);
padding: 7px 10px;
border-radius: 7px
}
.field-service-reporting-software .libraryFilters .icon {
height: 14px;
width: 14px;
color: var(--navy)
}
.field-service-reporting-software .libraryLayout {
display: grid;
grid-template-columns: 145px minmax(0, 1fr);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: #fff
}
.field-service-reporting-software .libraryNav {
padding: 15px 10px;
background: #F5FBFF;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 6px
}
.field-service-reporting-software .libraryTitle {
font-size: 8px;
font-weight: 750;
color: #536F81;
padding: 2px 6px 7px;
line-height: 1.5
}
.field-service-reporting-software .libraryNav>span {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 8px;
border: 1px solid transparent;
border-radius: 7px;
font-size: 11px;
color: #557181
}
.field-service-reporting-software .libraryNav .active {
background: #fff;
border-color: #C2E2F2;
color: var(--navy);
font-weight: 800
}
.field-service-reporting-software .libraryNav .icon {
height: 16px;
width: 16px
}
.field-service-reporting-software .libraryDetail {
padding: 16px;
min-width: 0
}
.field-service-reporting-software .reportChoice {
padding-bottom: 13px;
border-bottom: 1px solid var(--line);
line-height: 1.5
}
.field-service-reporting-software .reportChoice strong {
font-size: 13px;
color: var(--navy);
display: block
}
.field-service-reporting-software .reportChoice small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.field-service-reporting-software .exportRow {
display: grid;
grid-template-columns: minmax(0, 1fr) 37px;
gap: 8px;
font-size: 10px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #E4EDF2
}
.field-service-reporting-software .exportRow>*:last-child {
text-align: right;
color: var(--navy)
}
.field-service-reporting-software .exportRow.exportHead {
font-size: 8px;
color: var(--muted);
padding: 10px 0
}
.field-service-reporting-software .exportRow.total {
font-size: 11px;
background: #F8FCFE;
padding: 10px 6px;
border-radius: 5px
}
.field-service-reporting-software .exportAction {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
background: var(--yellow);
color: #18262E;
border-radius: 7px;
padding: 10px;
font-size: 10px;
font-weight: 800;
margin-top: 14px
}
.field-service-reporting-software .exportAction .icon {
height: 15px;
width: 15px
}
.field-service-reporting-software .reportSteps {
display: flex;
gap: 11px;
justify-content: space-between;
margin-top: 14px
}
.field-service-reporting-software .reportSteps>span {
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
color: #516F81
}
.field-service-reporting-software .reportSteps b {
height: 22px;
width: 22px;
display: grid;
place-items: center;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
color: var(--navy)
} @media(max-width:1100px) and (min-width:961px) {
.field-service-reporting-software .heroGrid {
gap: 28px
}
.field-service-reporting-software .hero .lead {
font-size: 17px
}
.field-service-reporting-software .assetStage {
grid-template-columns: minmax(0, 1fr) 156px
}
.field-service-reporting-software .reportBoard {
margin-right: 15px
}
.field-service-reporting-software .boardBody {
padding: 13px
}
.field-service-reporting-software .boardFooter {
padding-right: 163px
}
.field-service-reporting-software .heroCharts {
grid-template-columns: 1.4fr 1fr
}
.field-service-reporting-software .trendCard {
padding: 11px
}
.field-service-reporting-software .reportBars {
gap: 8px
}
.field-service-reporting-software .heroMetrics {
gap: 6px
}
.field-service-reporting-software .heroMetrics .reportMetric {
padding: 10px 7px
}
.field-service-reporting-software .heroMetrics .reportMetric span {
font-size: 7px
}
.field-service-reporting-software .balancePanel {
padding: 12px 9px
}
.field-service-reporting-software .balancePanel>strong {
font-size: 23px
}
.field-service-reporting-software .balanceKey {
font-size: 7px
}
.field-service-reporting-software .balanceKey b {
font-size: 8px
}
.field-service-reporting-software .insightCard {
padding: 13px;
gap: 8px
}
.field-service-reporting-software .insightCard span {
display: none
}
.field-service-reporting-software .insightCard strong {
font-size: 11px
}
.field-service-reporting-software .insightCard p {
font-size: 10px
}
.field-service-reporting-software .visual {
padding: 18px
}
.field-service-reporting-software .libraryLayout {
grid-template-columns: 119px minmax(0, 1fr)
}
.field-service-reporting-software .libraryDetail {
padding: 13px
}
.field-service-reporting-software .operationsGrid {
gap: 9px
}
.field-service-reporting-software .exceptionPanel {
padding: 12px
}
.field-service-reporting-software .reportMetric strong {
font-size: 22px
}
.field-service-reporting-software .projectLine>div:first-child {
align-items: flex-start;
flex-direction: column;
gap: 2px
}
}
@media(max-width:960px) {
.field-service-reporting-software .heroGrid,
.field-service-reporting-software .feature,
.field-service-reporting-software .aiGrid,
.field-service-reporting-software .final {
grid-template-columns: 1fr
}
.field-service-reporting-software .heroGrid {
gap: 36px
}
.field-service-reporting-software .hero h1 {
max-width: 800px
}
.field-service-reporting-software .hero .lead {
max-width: 750px
}
.field-service-reporting-software .heroVisual {
width: 100%;
max-width: 640px;
margin: 0 auto
}
.field-service-reporting-software .feature.reverse .visual {
order: 0
}
.field-service-reporting-software .feature {
gap: 30px
}
.field-service-reporting-software .feature>div:first-child {
max-width: 800px
}
.field-service-reporting-software .outcomes,
.field-service-reporting-software .featureGrid,
.field-service-reporting-software .connectedGrid,
.field-service-reporting-software .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.field-service-reporting-software .logos {
grid-template-columns: repeat(3, 1fr)
}
.field-service-reporting-software .reviews {
grid-template-columns: 1fr
}
.field-service-reporting-software .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.field-service-reporting-software .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.field-service-reporting-software .ratingItem:nth-child(2) {
border: 0
}
.field-service-reporting-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.field-service-reporting-software .final .btn {
min-width: 195px
}
.field-service-reporting-software .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.field-service-reporting-software .aiGrid {
gap: 30px
}
.field-service-reporting-software .aiMini {
max-width: 760px
}
.field-service-reporting-software .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.field-service-reporting-software .wrap {
width: calc(100% - 24px)
}
.field-service-reporting-software section {
padding: 56px 0
}
.field-service-reporting-software .hero {
padding: 32px 0 42px
}
.field-service-reporting-software .lead {
font-size: 17px
}
.field-service-reporting-software .sectionHead p {
font-size: 16px
}
.field-service-reporting-software .sectionHead {
margin-bottom: 28px
}
.field-service-reporting-software .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.field-service-reporting-software .heroGrid {
gap: 26px
}
.field-service-reporting-software .hero .actions {
gap: 8px
}
.field-service-reporting-software .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.field-service-reporting-software .micro {
font-size: 11px
}
.field-service-reporting-software .heroPills {
gap: 6px
}
.field-service-reporting-software .heroPills span {
font-size: 9px
}
.field-service-reporting-software .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.field-service-reporting-software .assetStage {
grid-template-columns: minmax(0, 1fr) 157px;
gap: 12px 10px
}
.field-service-reporting-software .assetTag {
font-size: 9px;
margin-left: 0
}
.field-service-reporting-software .reportBoard {
margin: 0
}
.field-service-reporting-software .boardHeader {
padding: 13px
}
.field-service-reporting-software .boardBrand {
font-size: 12px
}
.field-service-reporting-software .sampleBadge {
font-size: 7px
}
.field-service-reporting-software .boardBody {
padding: 13px
}
.field-service-reporting-software .reportHeading strong {
font-size: 14px
}
.field-service-reporting-software .reportHeading small {
font-size: 8px
}
.field-service-reporting-software .filterChip {
font-size: 7px;
padding: 5px
}
.field-service-reporting-software .heroMetrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px
}
.field-service-reporting-software .heroMetrics .reportMetric {
padding: 10px 7px
}
.field-service-reporting-software .heroMetrics .reportMetric span {
font-size: 7px
}
.field-service-reporting-software .heroMetrics .reportMetric strong {
font-size: 22px
}
.field-service-reporting-software .heroCharts {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 8px
}
.field-service-reporting-software .trendCard {
padding: 11px 9px
}
.field-service-reporting-software .chartTitle {
align-items: flex-start
}
.field-service-reporting-software .chartTitle>span {
font-size: 7px
}
.field-service-reporting-software .chartTitle strong {
font-size: 10px
}
.field-service-reporting-software .trendCard .chartTitle {
flex-direction: column;
gap: 3px
}
.field-service-reporting-software .reportBars {
gap: 8px;
height: 123px
}
.field-service-reporting-software .reportBar>span {
font-size: 8px
}
.field-service-reporting-software .barPlot b {
font-size: 7px
}
.field-service-reporting-software .balancePanel {
padding: 12px 10px
}
.field-service-reporting-software .balancePanel>strong {
font-size: 24px;
margin-top: 20px
}
.field-service-reporting-software .balancePanel>span {
font-size: 9px
}
.field-service-reporting-software .balanceKey>span {
flex-wrap: wrap
}
.field-service-reporting-software .boardFooter {
padding: 10px 164px 10px 12px;
min-height: 54px;
font-size: 8px
}
.field-service-reporting-software .assetPhone {
margin-top: -43px;
border-radius: 24px
}
.field-service-reporting-software .phoneScreen {
border-radius: 18px
}
.field-service-reporting-software .phoneHead {
padding: 10px 9px
}
.field-service-reporting-software .phoneHead strong {
font-size: 10px
}
.field-service-reporting-software .phoneHead small {
font-size: 7px
}
.field-service-reporting-software .phoneBody {
padding: 13px 9px 11px
}
.field-service-reporting-software .phoneNote {
font-size: 7px
}
.field-service-reporting-software .insightCard {
margin-left: 0;
padding: 12px;
display: block
}
.field-service-reporting-software .insightIcon {
height: 26px;
width: 26px;
margin-bottom: 10px
}
.field-service-reporting-software .insightCard strong {
font-size: 12px
}
.field-service-reporting-software .insightCard p {
font-size: 10px
}
.field-service-reporting-software .insightCard span {
display: none
}
.field-service-reporting-software .diagramCaption {
font-size: 9px
}
.field-service-reporting-software .trust {
padding: 23px 0
}
.field-service-reporting-software .trustLabel {
font-size: 12px
}
.field-service-reporting-software .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.field-service-reporting-software .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.field-service-reporting-software .logo.dhl {
font-size: 19px
}
.field-service-reporting-software .logo.adobe {
font-size: 17px
}
.field-service-reporting-software .logo.golden {
font-size: 8px
}
.field-service-reporting-software .fl,
.field-service-reporting-software .outcomes,
.field-service-reporting-software .featureGrid,
.field-service-reporting-software .connectedGrid,
.field-service-reporting-software .useCases {
grid-template-columns: 1fr
}
.field-service-reporting-software .fi {
font-size: 14px
}
.field-service-reporting-software .outcome {
padding: 21px
}
.field-service-reporting-software .outcome strong {
margin-top: 12px
}
.field-service-reporting-software .outcome span {
font-size: 14px
}
.field-service-reporting-software .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.field-service-reporting-software .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.field-service-reporting-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.field-service-reporting-software .uiSub {
font-size: 9px
}
.field-service-reporting-software .operationsGrid {
grid-template-columns: 1fr 1fr;
gap: 9px
}
.field-service-reporting-software .statusPanel {
padding: 13px 10px
}
.field-service-reporting-software .exceptionPanel {
padding: 13px 11px
}
.field-service-reporting-software .donut {
width: 103px;
height: 103px;
flex-basis: 103px
}
.field-service-reporting-software .donut>div {
width: 78px;
height: 78px
}
.field-service-reporting-software .donut strong {
font-size: 25px
}
.field-service-reporting-software .invoicePanel {
padding: 13px
}
.field-service-reporting-software .billingGrid {
gap: 8px
}
.field-service-reporting-software .billingGrid strong {
font-size: 18px
}
.field-service-reporting-software .billingGrid span {
font-size: 8px
}
.field-service-reporting-software .invoiceTable>div {
font-size: 9px;
padding: 10px 8px;
gap: 6px
}
.field-service-reporting-software .invoiceTable .pill {
font-size: 7px;
padding: 4px 6px
}
.field-service-reporting-software .projectSummary {
gap: 9px
}
.field-service-reporting-software .projectSummary strong {
font-size: 23px
}
.field-service-reporting-software .projectSummary span {
font-size: 9px
}
.field-service-reporting-software .projectCostPanel {
padding: 14px
}
.field-service-reporting-software .projectLine>div:first-child {
flex-direction: column;
align-items: flex-start;
gap: 4px
}
.field-service-reporting-software .projectLine strong {
font-size: 12px
}
.field-service-reporting-software .projectLine span {
font-size: 11px
}
.field-service-reporting-software .projectLine small {
font-size: 10px
}
.field-service-reporting-software .plotScale {
font-size: 8px
}
.field-service-reporting-software .reportFoot {
font-size: 10px
}
.field-service-reporting-software .analyticsFilters {
padding: 12px
}
.field-service-reporting-software .analyticsFilters span {
font-size: 9px;
gap: 6px
}
.field-service-reporting-software .analyticsTabs {
gap: 14px;
padding: 0 12px
}
.field-service-reporting-software .analyticsTabs span {
font-size: 9px
}
.field-service-reporting-software .analyticsMetrics {
padding: 12px;
gap: 7px
}
.field-service-reporting-software .analyticsMetrics .reportMetric {
padding: 10px 8px
}
.field-service-reporting-software .analyticsMetrics strong {
font-size: 22px
}
.field-service-reporting-software .analyticsMetrics span {
font-size: 8px
}
.field-service-reporting-software .teamChart {
padding: 3px 12px 13px
}
.field-service-reporting-software .analyticsFocus {
padding: 12px;
gap: 9px
}
.field-service-reporting-software .analyticsFocus span {
font-size: 8px
}
.field-service-reporting-software .teamFoot {
font-size: 8px
}
.field-service-reporting-software .libraryLayout {
grid-template-columns: 109px minmax(0, 1fr)
}
.field-service-reporting-software .libraryNav {
padding: 12px 7px
}
.field-service-reporting-software .libraryNav>span {
padding: 9px 6px;
gap: 5px;
font-size: 10px
}
.field-service-reporting-software .libraryNav .icon {
height: 14px;
width: 14px
}
.field-service-reporting-software .libraryTitle {
font-size: 7px;
padding-left: 5px
}
.field-service-reporting-software .libraryDetail {
padding: 12px
}
.field-service-reporting-software .reportChoice strong {
font-size: 12px
}
.field-service-reporting-software .reportChoice small {
font-size: 8px
}
.field-service-reporting-software .exportRow {
font-size: 9px;
gap: 7px
}
.field-service-reporting-software .exportRow.total {
font-size: 10px
}
.field-service-reporting-software .exportAction {
font-size: 10px
}
.field-service-reporting-software .reportSteps {
gap: 7px
}
.field-service-reporting-software .reportSteps>span {
font-size: 8px;
gap: 5px
}
.field-service-reporting-software .reportSteps b {
height: 20px;
width: 20px;
flex: 0 0 20px
}
.field-service-reporting-software .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.field-service-reporting-software .aiMini div {
padding: 16px
}
.field-service-reporting-software .aiMini strong {
font-size: 14px
}
.field-service-reporting-software .aiMini span {
font-size: 13px
}
.field-service-reporting-software .promptBox {
padding: 18px;
border-radius: 17px
}
.field-service-reporting-software .prompt {
font-size: 13px;
padding: 13px
}
.field-service-reporting-software .promptHead {
font-size: 19px
}
.field-service-reporting-software .promptFoot {
font-size: 10px !important
}
.field-service-reporting-software .connectedCard {
padding: 22px
}
.field-service-reporting-software .connectedCard p,
.field-service-reporting-software .featureCard p,
.field-service-reporting-software .useCase p {
font-size: 14px
}
.field-service-reporting-software .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.field-service-reporting-software .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.field-service-reporting-software .ratingItem {
border: 0
}
.field-service-reporting-software .ratingLead {
margin-bottom: 3px
}
.field-service-reporting-software .review p {
font-size: 14px
}
.field-service-reporting-software .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.field-service-reporting-software .ctaBtns {
width: 100%
}
.field-service-reporting-software .ctaBtns .btn {
flex: 1
}
.field-service-reporting-software .cta p {
font-size: 14px
}
.field-service-reporting-software .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.field-service-reporting-software .final h2 {
font-size: 32px
}
.field-service-reporting-software .final p {
font-size: 15px
}
.field-service-reporting-software .final .ctaBtns {
flex-direction: column
}
.field-service-reporting-software .final .btn {
min-width: 0;
width: 100%
}
}
@media(max-width:360px) {
.field-service-reporting-software .assetStage {
grid-template-columns: minmax(0, 1fr) 141px;
gap: 10px 8px
}
.field-service-reporting-software .boardBody {
padding: 11px
}
.field-service-reporting-software .reportHeading {
gap: 7px
}
.field-service-reporting-software .reportHeading strong {
font-size: 13px
}
.field-service-reporting-software .heroMetrics .reportMetric {
padding: 9px 6px
}
.field-service-reporting-software .heroMetrics .reportMetric span {
font-size: 6.5px
}
.field-service-reporting-software .heroMetrics .reportMetric strong {
font-size: 20px
}
.field-service-reporting-software .heroCharts {
grid-template-columns: 1.25fr 1fr
}
.field-service-reporting-software .balancePanel {
padding: 11px 8px
}
.field-service-reporting-software .balancePanel>strong {
font-size: 21px
}
.field-service-reporting-software .balanceKey b {
font-size: 8px
}
.field-service-reporting-software .reportBars {
gap: 6px
}
.field-service-reporting-software .boardFooter {
padding-right: 150px;
font-size: 7px
}
.field-service-reporting-software .phoneHead strong {
font-size: 9px
}
.field-service-reporting-software .phoneBody {
padding: 12px 8px 10px
}
.field-service-reporting-software .phoneRow {
font-size: 8px
}
.field-service-reporting-software .phoneRow b {
font-size: 10px
}
.field-service-reporting-software .phoneNote {
font-size: 6px;
gap: 3px
}
.field-service-reporting-software .phoneNumber {
font-size: 38px
}
.field-service-reporting-software .insightCard {
padding: 10px
}
.field-service-reporting-software .insightCard strong {
font-size: 11px
}
.field-service-reporting-software .insightCard p {
font-size: 9px
}
.field-service-reporting-software .billingGrid strong {
font-size: 16px
}
.field-service-reporting-software .operationsGrid {
gap: 8px
}
.field-service-reporting-software .exceptionPanel {
padding: 11px 9px
}
.field-service-reporting-software .statusLegend {
font-size: 8px
}
.field-service-reporting-software .libraryLayout {
grid-template-columns: 1fr
}
.field-service-reporting-software .libraryNav {
border-right: 0;
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px
}
.field-service-reporting-software .libraryTitle {
grid-column: 1/-1
}
.field-service-reporting-software .libraryDetail {
padding: 14px
}
.field-service-reporting-software .exportRow {
font-size: 11px
}
.field-service-reporting-software .reportSteps>span {
font-size: 7px
}
.field-service-reporting-software .analyticsMetrics strong {
font-size: 19px
}
.field-service-reporting-software .analyticsMetrics .reportMetric {
padding: 9px 6px
}
.field-service-reporting-software .analyticsFilters span {
font-size: 8px
}
.field-service-reporting-software .teamFoot {
font-size: 7px
}
.field-service-reporting-software .projectSummary strong {
font-size: 21px
}
}  .jobsite-photo-app-field-service .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.jobsite-photo-app-field-service .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.jobsite-photo-app-field-service .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.jobsite-photo-app-field-service .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.jobsite-photo-app-field-service .soft {
background: var(--sky2)
}
.jobsite-photo-app-field-service .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.jobsite-photo-app-field-service .dark h2,
.jobsite-photo-app-field-service .dark h3 {
color: #fff
}
.jobsite-photo-app-field-service .dark p {
color: #D6D6D6
}
.jobsite-photo-app-field-service .dark .ey {
background: var(--yellow)
}
.jobsite-photo-app-field-service .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.jobsite-photo-app-field-service .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.jobsite-photo-app-field-service .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.jobsite-photo-app-field-service .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.jobsite-photo-app-field-service .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.jobsite-photo-app-field-service .textLink .icon {
width: 16px;
height: 16px
} .jobsite-photo-app-field-service .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.jobsite-photo-app-field-service .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.jobsite-photo-app-field-service .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.jobsite-photo-app-field-service .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.jobsite-photo-app-field-service .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.jobsite-photo-app-field-service .logo.adobe {
font-size: 20px
}
.jobsite-photo-app-field-service .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .jobsite-photo-app-field-service .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.jobsite-photo-app-field-service .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.jobsite-photo-app-field-service .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.jobsite-photo-app-field-service .outcome:nth-child(2):before {
background: var(--yellow)
}
.jobsite-photo-app-field-service .outcome:nth-child(3):before {
background: var(--green)
}
.jobsite-photo-app-field-service .outcome:nth-child(4):before {
background: var(--purple)
}
.jobsite-photo-app-field-service .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.jobsite-photo-app-field-service .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.jobsite-photo-app-field-service .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .jobsite-photo-app-field-service .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.jobsite-photo-app-field-service .feature.reverse .visual {
order: -1
}
.jobsite-photo-app-field-service .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.jobsite-photo-app-field-service .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.jobsite-photo-app-field-service .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.jobsite-photo-app-field-service .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.jobsite-photo-app-field-service .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.jobsite-photo-app-field-service .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.jobsite-photo-app-field-service .visual>* {
position: relative;
z-index: 2
}
.jobsite-photo-app-field-service .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.jobsite-photo-app-field-service .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.jobsite-photo-app-field-service .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.jobsite-photo-app-field-service .uiHeading .icon {
width: 19px;
height: 19px
}
.jobsite-photo-app-field-service .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.jobsite-photo-app-field-service .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.jobsite-photo-app-field-service .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.jobsite-photo-app-field-service .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.jobsite-photo-app-field-service .pill.green {
background: var(--greenbg);
color: #116746
}
.jobsite-photo-app-field-service .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.jobsite-photo-app-field-service .pill.gray {
background: #F0F3F5;
color: #586C79
}
.jobsite-photo-app-field-service .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .jobsite-photo-app-field-service .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.jobsite-photo-app-field-service .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.jobsite-photo-app-field-service .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.jobsite-photo-app-field-service .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.jobsite-photo-app-field-service .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.jobsite-photo-app-field-service .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.jobsite-photo-app-field-service .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.jobsite-photo-app-field-service .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.jobsite-photo-app-field-service .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.jobsite-photo-app-field-service .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .jobsite-photo-app-field-service .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.jobsite-photo-app-field-service .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.jobsite-photo-app-field-service .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.jobsite-photo-app-field-service .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.jobsite-photo-app-field-service .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.jobsite-photo-app-field-service .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.jobsite-photo-app-field-service .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .jobsite-photo-app-field-service .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.jobsite-photo-app-field-service .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.jobsite-photo-app-field-service .featureCard:hover {
transform: translateY(-3px)
}
.jobsite-photo-app-field-service .featureIcon,
.jobsite-photo-app-field-service .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.jobsite-photo-app-field-service .featureIcon .icon,
.jobsite-photo-app-field-service .useIcon .icon {
width: 22px;
height: 22px
}
.jobsite-photo-app-field-service .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.jobsite-photo-app-field-service .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .jobsite-photo-app-field-service .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.jobsite-photo-app-field-service .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.jobsite-photo-app-field-service .useCase h3 {
font-size: 20px
}
.jobsite-photo-app-field-service .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.jobsite-photo-app-field-service .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.jobsite-photo-app-field-service .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.jobsite-photo-app-field-service .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.jobsite-photo-app-field-service .review h3 {
font-size: 22px
}
.jobsite-photo-app-field-service .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.jobsite-photo-app-field-service .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.jobsite-photo-app-field-service .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.jobsite-photo-app-field-service .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.jobsite-photo-app-field-service .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.jobsite-photo-app-field-service .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.jobsite-photo-app-field-service .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.jobsite-photo-app-field-service .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.jobsite-photo-app-field-service .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .jobsite-photo-app-field-service .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.jobsite-photo-app-field-service .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.jobsite-photo-app-field-service .cta h3 {
font-size: 19px
}
.jobsite-photo-app-field-service .cta.darkCta h3 {
color: #fff
}
.jobsite-photo-app-field-service .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.jobsite-photo-app-field-service .cta.darkCta p {
color: #D1D1D1
}
.jobsite-photo-app-field-service .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.jobsite-photo-app-field-service .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.jobsite-photo-app-field-service .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.jobsite-photo-app-field-service .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.jobsite-photo-app-field-service .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.jobsite-photo-app-field-service .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.jobsite-photo-app-field-service .reveal {
opacity: 1;
transform: none
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .jobsite-photo-app-field-service .hero {
padding: 52px 0 64px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 29%), radial-gradient(circle at 94% 73%, rgba(255, 201, 40, .12), transparent 24%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.jobsite-photo-app-field-service .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.jobsite-photo-app-field-service .heroGrid>*,
.jobsite-photo-app-field-service .feature>*,
.jobsite-photo-app-field-service .aiGrid>* {
min-width: 0
}
.jobsite-photo-app-field-service .hero h1 {
max-width: 590px
}
.jobsite-photo-app-field-service .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.jobsite-photo-app-field-service .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.jobsite-photo-app-field-service .heroVisual {
position: relative;
min-width: 0
}
.jobsite-photo-app-field-service .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 172px;
gap: 13px 12px;
align-items: start;
max-width: 620px;
margin: auto
}
.jobsite-photo-app-field-service .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 20px 20px;
background: linear-gradient(rgba(0, 168, 248, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .055) 1px, transparent 1px);
background-size: 27px 27px;
border-radius: 30px
}
.jobsite-photo-app-field-service .assetStage>* {
position: relative;
z-index: 1
}
.jobsite-photo-app-field-service .assetTag {
grid-column: 1/-1;
justify-self: start;
padding: 6px 10px;
border-radius: 9px;
background: var(--yellow);
font-size: 10px;
font-weight: 850;
color: #111
}
.jobsite-photo-app-field-service .photoBoard {
grid-column: 1/-1;
background: #fff;
border: 1px solid #BDDDED;
border-radius: 18px;
overflow: hidden
}
.jobsite-photo-app-field-service .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 15px 16px;
border-bottom: 1px solid var(--line)
}
.jobsite-photo-app-field-service .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850
}
.jobsite-photo-app-field-service .brandTile {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.jobsite-photo-app-field-service .brandTile .icon {
width: 17px;
height: 17px
}
.jobsite-photo-app-field-service .sampleBadge {
border: 1px solid #D6E8F2;
background: #F5FBFF;
border-radius: 5px;
padding: 4px 6px;
font-size: 8px;
font-weight: 750;
color: #516D7E
}
.jobsite-photo-app-field-service .boardContent {
padding: 16px
}
.jobsite-photo-app-field-service .jobHeading {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
margin-bottom: 12px
}
.jobsite-photo-app-field-service .jobHeading strong {
display: block;
font-size: 14px;
line-height: 1.4
}
.jobsite-photo-app-field-service .jobHeading small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
.jobsite-photo-app-field-service .jobHeading .pill {
font-size: 8px
}
.jobsite-photo-app-field-service .galleryTabs {
display: flex;
align-items: center;
gap: 15px;
border-bottom: 1px solid #DFEAF0;
margin-bottom: 14px;
font-size: 10px;
color: var(--muted);
line-height: 1.5
}
.jobsite-photo-app-field-service .galleryTabs span {
padding-bottom: 9px
}
.jobsite-photo-app-field-service .galleryTabs .active {
color: var(--navy);
font-weight: 800;
border-bottom: 2px solid var(--brand)
}
.jobsite-photo-app-field-service .photoPair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px
}
.jobsite-photo-app-field-service .photoTile {
min-width: 0;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: #fff
}
.jobsite-photo-app-field-service .photoTile>img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1.6;
object-fit: cover;
background: #E9F0F2
}
.jobsite-photo-app-field-service .photoTileLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
padding: 8px 10px;
font-size: 10px;
font-weight: 800
}
.jobsite-photo-app-field-service .photoTileLabel .miniLabel {
font-weight: 500;
font-size: 8px;
color: var(--muted)
}
.jobsite-photo-app-field-service .photoTileNote {
padding: 0 10px 9px;
font-size: 9px;
color: var(--muted);
line-height: 1.5
}
.jobsite-photo-app-field-service .photoNote {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 10px;
color: #536D7C;
line-height: 1.6;
padding: 12px 0 0
}
.jobsite-photo-app-field-service .photoNote .icon {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 1px
}
.jobsite-photo-app-field-service .boardFooter {
padding: 11px 185px 11px 16px;
background: var(--sky2);
border-top: 1px solid var(--line);
font-size: 9px;
line-height: 1.6;
color: #516F81;
min-height: 48px
}
.jobsite-photo-app-field-service .contextCard {
grid-column: 1;
background: #0D2939;
border: 1px solid #284859;
border-radius: 14px;
padding: 15px;
color: #fff
}
.jobsite-photo-app-field-service .contextHead {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
font-weight: 750
}
.jobsite-photo-app-field-service .contextHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.jobsite-photo-app-field-service .contextCard>strong {
display: block;
font-size: 17px;
line-height: 1.4;
margin: 9px 0 6px
}
.jobsite-photo-app-field-service .contextCard>p {
font-size: 11px;
line-height: 1.6;
color: #CDDFE8
}
.jobsite-photo-app-field-service .contextTrail {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid #345160;
font-size: 9px;
color: #D4E4ED;
flex-wrap: wrap
}
.jobsite-photo-app-field-service .contextTrail .icon {
height: 12px;
width: 12px;
color: var(--yellow)
}
.jobsite-photo-app-field-service .assetPhone {
grid-column: 2;
grid-row: 3;
margin-top: -48px;
position: relative;
z-index: 3;
background: #0C1E2A;
border: 1px solid #344F60;
border-radius: 27px;
padding: 6px
}
.jobsite-photo-app-field-service .phoneScreen {
overflow: hidden;
background: #fff;
border-radius: 21px
}
.jobsite-photo-app-field-service .phoneTop {
height: 17px;
display: grid;
place-items: center;
background: #0C1E2A
}
.jobsite-photo-app-field-service .notch {
width: 42px;
height: 4px;
background: #617681;
border-radius: 20px
}
.jobsite-photo-app-field-service .phoneHead {
padding: 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF8DB);
border-bottom: 1px solid var(--line)
}
.jobsite-photo-app-field-service .phoneHead strong {
font-size: 11px;
line-height: 1.4;
display: block
}
.jobsite-photo-app-field-service .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
.jobsite-photo-app-field-service .phoneBody {
padding: 10px
}
.jobsite-photo-app-field-service .phonePhoto {
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid #DCE6EC;
background: #F1F6F8
}
.jobsite-photo-app-field-service .phonePhoto img {
display: block;
width: 100%;
height: 110px;
object-fit: cover
}
.jobsite-photo-app-field-service .captureCorners {
position: absolute;
inset: 14px;
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 4px
}
.jobsite-photo-app-field-service .photoMode {
display: flex;
justify-content: center;
gap: 12px;
font-size: 8px;
margin: 10px 0;
color: var(--muted)
}
.jobsite-photo-app-field-service .photoMode b {
color: var(--navy)
}
.jobsite-photo-app-field-service .captureControl {
width: 31px;
height: 31px;
margin: 0 auto 10px;
border: 3px solid #fff;
outline: 2px solid #BFD4E1;
border-radius: 50%;
background: var(--brand)
}
.jobsite-photo-app-field-service .mockAction {
padding: 8px;
border-radius: 7px;
background: var(--yellow);
color: #111;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
font-size: 9px;
line-height: 1.4;
font-weight: 850
}
.jobsite-photo-app-field-service .mockAction .icon {
width: 13px;
height: 13px
}
.jobsite-photo-app-field-service .phoneFine {
display: block;
font-size: 7px;
line-height: 1.5;
text-align: center;
color: var(--muted);
margin-top: 7px
}
.jobsite-photo-app-field-service .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 12px
} .jobsite-photo-app-field-service .captureScene {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 20px;
align-items: center
}
.jobsite-photo-app-field-service .captureDevice {
background: #102530;
border: 1px solid #345061;
border-radius: 25px;
padding: 6px;
max-width: 210px
}
.jobsite-photo-app-field-service .captureDevice .phonePhoto img {
height: 130px
}
.jobsite-photo-app-field-service .captureDevice .phoneBody {
padding: 12px
}
.jobsite-photo-app-field-service .captureDevice .phoneFine {
font-size: 8px
}
.jobsite-photo-app-field-service .captureDevice .phoneHead strong {
font-size: 12px
}
.jobsite-photo-app-field-service .captureDevice .phoneHead small {
font-size: 9px
}
.jobsite-photo-app-field-service .captureDevice .mockAction {
font-size: 10px
}
.jobsite-photo-app-field-service .captureSide {
display: grid;
gap: 12px
}
.jobsite-photo-app-field-service .attachmentRecord {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px
}
.jobsite-photo-app-field-service .attachmentRecord>strong {
font-size: 13px;
color: var(--navy);
display: block;
line-height: 1.4
}
.jobsite-photo-app-field-service .attachmentRecord>small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px
}
.jobsite-photo-app-field-service .miniFile {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
border-top: 1px solid #E5EDF2;
margin-top: 10px
}
.jobsite-photo-app-field-service .miniFile>.icon {
width: 21px;
height: 21px;
color: var(--navy)
}
.jobsite-photo-app-field-service .miniFile strong {
display: block;
font-size: 10px;
line-height: 1.4;
overflow-wrap: anywhere
}
.jobsite-photo-app-field-service .miniFile small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 2px
}
.jobsite-photo-app-field-service .miniFile+.miniFile {
margin-top: 0
}
.jobsite-photo-app-field-service .recordNote {
border-left: 3px solid var(--brand);
background: #fff;
border-radius: 0 10px 10px 0;
padding: 12px 13px
}
.jobsite-photo-app-field-service .recordNote strong {
font-size: 12px;
color: var(--navy);
display: block
}
.jobsite-photo-app-field-service .recordNote p {
font-size: 11px !important;
line-height: 1.6;
margin-top: 5px !important;
color: var(--muted)
} .jobsite-photo-app-field-service .checklistTop {
padding: 14px 16px;
background: #0D2939;
border-radius: 12px;
display: flex;
align-items: center;
gap: 10px;
color: #fff
}
.jobsite-photo-app-field-service .checklistTop>.icon {
color: var(--yellow);
width: 25px;
height: 25px
}
.jobsite-photo-app-field-service .checklistTop strong {
font-size: 14px;
display: block;
line-height: 1.4
}
.jobsite-photo-app-field-service .checklistTop small {
color: #C2D9E4;
font-size: 10px;
display: block;
margin-top: 3px
}
.jobsite-photo-app-field-service .taskStack {
display: grid;
gap: 10px;
margin-top: 14px
}
.jobsite-photo-app-field-service .taskRow {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
display: grid;
grid-template-columns: 25px minmax(0, 1fr) 74px;
align-items: center;
gap: 10px
}
.jobsite-photo-app-field-service .taskCheck {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 7px;
border: 1px solid #AFCDBF;
background: var(--greenbg);
color: var(--green)
}
.jobsite-photo-app-field-service .taskCheck .icon {
width: 14px;
height: 14px
}
.jobsite-photo-app-field-service .icon {
width: 14px;
height: 14px;
margin-bottom: 0;
background: transparent;
}
.jobsite-photo-app-field-service .taskCheck.pending {
border-color: #D7DDE2;
background: #F5F7F9;
margin: 0;
padding: 0;
color: #8D9DA8
}
.jobsite-photo-app-field-service .taskRow strong {
font-size: 12px;
line-height: 1.5;
display: block
}
.jobsite-photo-app-field-service .taskRow small {
font-size: 10px;
line-height: 1.5;
color: var(--muted);
display: block;
margin-top: 3px
}
.jobsite-photo-app-field-service .taskPhoto {
width: 74px;
height: 49px;
object-fit: cover;
border-radius: 7px;
border: 1px solid var(--line)
}
.jobsite-photo-app-field-service .taskRow .pill {
font-size: 8px;
white-space: normal;
text-align: center;
justify-content: center
}
.jobsite-photo-app-field-service .checklistFoot {
margin-top: 13px;
padding: 12px 13px;
border: 1px solid #E8D894;
background: #FFF9E3;
color: #796329;
border-radius: 10px;
font-size: 11px;
line-height: 1.6
} .jobsite-photo-app-field-service .galleryHeader {
padding: 14px 15px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 13px
}
.jobsite-photo-app-field-service .galleryHeader strong {
font-size: 13px;
color: var(--navy);
display: block
}
.jobsite-photo-app-field-service .galleryHeader small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px
}
.jobsite-photo-app-field-service .galleryHeader .pill {
font-size: 9px
}
.jobsite-photo-app-field-service .galleryScene .photoTile>img {
aspect-ratio: 1.28;
object-fit: cover
}
.jobsite-photo-app-field-service .galleryScene .photoTileLabel {
font-size: 12px
}
.jobsite-photo-app-field-service .galleryScene .miniLabel {
font-size: 9px
}
.jobsite-photo-app-field-service .galleryScene .photoTileNote {
font-size: 10px
}
.jobsite-photo-app-field-service .filmStrip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 12px
}
.jobsite-photo-app-field-service .filmItem {
border: 1px solid var(--line);
border-radius: 9px;
overflow: hidden;
background: #fff;
position: relative
}
.jobsite-photo-app-field-service .filmItem>img {
width: 100%;
height: 73px;
object-fit: cover;
display: block
}
.jobsite-photo-app-field-service .filmItem>span {
font-size: 9px;
display: block;
padding: 7px 8px;
color: #546D7E;
line-height: 1.4
}
.jobsite-photo-app-field-service .playBadge {
position: absolute;
right: 7px;
top: 8px;
border-radius: 50%;
background: #0D2939;
color: #fff;
display: grid;
place-items: center;
width: 25px;
height: 25px
}
.jobsite-photo-app-field-service .playBadge .icon {
width: 12px;
height: 12px
}
.jobsite-photo-app-field-service .galleryFoot {
display: flex;
gap: 8px;
align-items: center;
padding: 12px 0 0;
font-size: 10px;
color: var(--muted)
}
.jobsite-photo-app-field-service .galleryFoot .icon {
width: 16px;
height: 16px;
color: var(--navy)
} .jobsite-photo-app-field-service .sharePanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden
}
.jobsite-photo-app-field-service .shareTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
background: #F6FBFE
}
.jobsite-photo-app-field-service .shareTop strong {
font-size: 13px;
color: var(--navy)
}
.jobsite-photo-app-field-service .shareTop>.icon {
width: 20px;
height: 20px;
color: var(--navy)
}
.jobsite-photo-app-field-service .shareField {
padding: 11px 15px;
border-bottom: 1px solid #E6EDF1;
display: grid;
grid-template-columns: 48px 1fr;
gap: 10px;
font-size: 11px
}
.jobsite-photo-app-field-service .shareField small {
font-size: 10px;
color: var(--muted)
}
.jobsite-photo-app-field-service .shareField strong {
font-size: 11px;
font-weight: 600;
overflow-wrap: anywhere
}
.jobsite-photo-app-field-service .shareMessage {
padding: 15px
}
.jobsite-photo-app-field-service .shareMessage>p {
font-size: 12px !important;
line-height: 1.7;
margin: 0 0 12px !important;
color: #506B7C
}
.jobsite-photo-app-field-service .shareMessage .photoTile>img {
aspect-ratio: 1.9
}
.jobsite-photo-app-field-service .shareMessage .photoTileLabel {
font-size: 10px
}
.jobsite-photo-app-field-service .shareChannels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 13px
}
.jobsite-photo-app-field-service .shareChannel {
padding: 12px;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
color: var(--navy)
}
.jobsite-photo-app-field-service .shareChannel .icon {
width: 22px;
height: 22px
}
.jobsite-photo-app-field-service .shareChannel strong {
font-size: 11px;
display: block
}
.jobsite-photo-app-field-service .shareChannel small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.jobsite-photo-app-field-service .infoFoot {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 10px;
color: #577183;
margin-top: 12px;
line-height: 1.6
}
.jobsite-photo-app-field-service .infoFoot .icon {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 1px
}
.jobsite-photo-app-field-service .darkCta .btn.outline {
background: transparent;
color: #fff;
border-color: #555
}
.jobsite-photo-app-field-service .featureGrid,
.jobsite-photo-app-field-service .connectedGrid,
.jobsite-photo-app-field-service .outcomes,
.jobsite-photo-app-field-service .useCases {
align-items: stretch
}
.jobsite-photo-app-field-service .featureCard,
.jobsite-photo-app-field-service .connectedCard,
.jobsite-photo-app-field-service .outcome,
.jobsite-photo-app-field-service .useCase,
.jobsite-photo-app-field-service .review {
min-width: 0
}
.jobsite-photo-app-field-service .featureCard:hover {
box-shadow: none
}
.jobsite-photo-app-field-service .visual {
box-shadow: none
}
.jobsite-photo-app-field-service .feature .visual p {
margin-top: 0
}
.jobsite-photo-app-field-service .illustrationNote {
margin-top: 18px !important;
font-size: 12px !important;
line-height: 1.7 !important
} @media(max-width:1100px) and (min-width:961px) {
.jobsite-photo-app-field-service .heroGrid {
gap: 28px
}
.jobsite-photo-app-field-service .hero .lead {
font-size: 17px
}
.jobsite-photo-app-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 155px;
gap: 12px 10px
}
.jobsite-photo-app-field-service .boardFooter {
padding-right: 166px
}
.jobsite-photo-app-field-service .boardContent {
padding: 13px
}
.jobsite-photo-app-field-service .jobHeading strong {
font-size: 12px
}
.jobsite-photo-app-field-service .photoTileLabel {
padding: 8px;
font-size: 9px
}
.jobsite-photo-app-field-service .contextCard {
padding: 12px
}
.jobsite-photo-app-field-service .contextCard>strong {
font-size: 15px
}
.jobsite-photo-app-field-service .contextCard>p {
font-size: 10px
}
.jobsite-photo-app-field-service .visual {
padding: 18px
}
.jobsite-photo-app-field-service .captureScene {
grid-template-columns: 157px minmax(0, 1fr);
gap: 13px
}
.jobsite-photo-app-field-service .captureDevice .phonePhoto img {
height: 111px
}
.jobsite-photo-app-field-service .taskRow {
grid-template-columns: 23px minmax(0, 1fr) 64px;
gap: 8px
}
.jobsite-photo-app-field-service .taskPhoto {
width: 64px;
height: 45px
}
}
@media(max-width:960px) {
.jobsite-photo-app-field-service .heroGrid,
.jobsite-photo-app-field-service .feature,
.jobsite-photo-app-field-service .aiGrid,
.jobsite-photo-app-field-service .final {
grid-template-columns: 1fr
}
.jobsite-photo-app-field-service .heroGrid {
gap: 36px
}
.jobsite-photo-app-field-service .hero h1 {
max-width: 800px
}
.jobsite-photo-app-field-service .hero .lead {
max-width: 750px
}
.jobsite-photo-app-field-service .heroVisual {
width: 100%;
max-width: 620px;
margin: auto
}
.jobsite-photo-app-field-service .feature.reverse .visual {
order: 0
}
.jobsite-photo-app-field-service .feature {
gap: 30px
}
.jobsite-photo-app-field-service .outcomes,
.jobsite-photo-app-field-service .featureGrid,
.jobsite-photo-app-field-service .connectedGrid,
.jobsite-photo-app-field-service .useCases {
grid-template-columns: repeat(2, 1fr)
}
.jobsite-photo-app-field-service .logos {
grid-template-columns: repeat(3, 1fr)
}
.jobsite-photo-app-field-service .reviews {
grid-template-columns: 1fr
}
.jobsite-photo-app-field-service .visual {
max-width: 650px;
width: 100%;
margin: auto
}
.jobsite-photo-app-field-service .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.jobsite-photo-app-field-service .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.jobsite-photo-app-field-service .ratingItem:nth-child(2) {
border: 0
}
.jobsite-photo-app-field-service .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.jobsite-photo-app-field-service .final .btn {
min-width: 195px
}
.jobsite-photo-app-field-service .aiGrid {
gap: 30px
}
.jobsite-photo-app-field-service .promptBox {
width: 100%
}
.jobsite-photo-app-field-service .cta {
flex-wrap: wrap
}
}
@media(max-width:640px) {
.jobsite-photo-app-field-service .wrap {
width: calc(100% - 24px)
}
.jobsite-photo-app-field-service section {
padding: 56px 0
}
.jobsite-photo-app-field-service .hero {
padding: 32px 0 42px
}
.jobsite-photo-app-field-service .lead {
font-size: 17px
}
.jobsite-photo-app-field-service .sectionHead p {
font-size: 16px
}
.jobsite-photo-app-field-service .sectionHead {
margin-bottom: 28px
}
.jobsite-photo-app-field-service .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.jobsite-photo-app-field-service .heroGrid {
gap: 26px
}
.jobsite-photo-app-field-service .hero .actions {
gap: 8px
}
.jobsite-photo-app-field-service .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.jobsite-photo-app-field-service .micro {
font-size: 11px
}
.jobsite-photo-app-field-service .heroPills {
gap: 6px
}
.jobsite-photo-app-field-service .heroPills span {
font-size: 9px
}
.jobsite-photo-app-field-service .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.jobsite-photo-app-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 154px;
gap: 12px 10px
}
.jobsite-photo-app-field-service .assetTag {
font-size: 9px
}
.jobsite-photo-app-field-service .boardHeader {
padding: 12px
}
.jobsite-photo-app-field-service .boardBrand {
font-size: 12px
}
.jobsite-photo-app-field-service .sampleBadge {
font-size: 7px
}
.jobsite-photo-app-field-service .boardContent {
padding: 12px
}
.jobsite-photo-app-field-service .jobHeading strong {
font-size: 12px
}
.jobsite-photo-app-field-service .jobHeading small {
font-size: 9px
}
.jobsite-photo-app-field-service .jobHeading .pill {
font-size: 7px
}
.jobsite-photo-app-field-service .galleryTabs {
font-size: 9px;
gap: 13px;
margin-bottom: 11px
}
.jobsite-photo-app-field-service .photoPair {
gap: 8px
}
.jobsite-photo-app-field-service .photoTileLabel {
font-size: 9px;
padding: 8px
}
.jobsite-photo-app-field-service .photoTileLabel .miniLabel {
font-size: 7px
}
.jobsite-photo-app-field-service .photoTileNote {
font-size: 8px;
padding: 0 8px 8px
}
.jobsite-photo-app-field-service .photoNote {
font-size: 9px
}
.jobsite-photo-app-field-service .boardFooter {
padding: 10px 166px 10px 12px;
font-size: 8px
}
.jobsite-photo-app-field-service .contextCard {
padding: 12px
}
.jobsite-photo-app-field-service .contextHead {
font-size: 9px;
gap: 6px
}
.jobsite-photo-app-field-service .contextCard>strong {
font-size: 14px
}
.jobsite-photo-app-field-service .contextCard>p {
font-size: 10px
}
.jobsite-photo-app-field-service .contextTrail {
font-size: 8px;
gap: 5px;
margin-top: 9px;
padding-top: 9px
}
.jobsite-photo-app-field-service .assetPhone {
margin-top: -40px;
border-radius: 24px
}
.jobsite-photo-app-field-service .phoneScreen {
border-radius: 18px
}
.jobsite-photo-app-field-service .phoneHead {
padding: 9px
}
.jobsite-photo-app-field-service .phoneHead strong {
font-size: 10px
}
.jobsite-photo-app-field-service .phoneHead small {
font-size: 7px
}
.phoneBody {
padding: 9px
}
.jobsite-photo-app-field-service .phonePhoto img {
height: 94px
}
.jobsite-photo-app-field-service .mockAction {
font-size: 8px
}
.jobsite-photo-app-field-service .diagramCaption {
font-size: 9px
}
.jobsite-photo-app-field-service .trust {
padding: 23px 0
}
.jobsite-photo-app-field-service .trustLabel {
font-size: 12px
}
.jobsite-photo-app-field-service .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.jobsite-photo-app-field-service .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.jobsite-photo-app-field-service .logo.dhl {
font-size: 19px
}
.jobsite-photo-app-field-service .logo.adobe {
font-size: 17px
}
.jobsite-photo-app-field-service .logo.golden {
font-size: 8px
}
.jobsite-photo-app-field-service .fl,
.jobsite-photo-app-field-service .outcomes,
.jobsite-photo-app-field-service .featureGrid,
.jobsite-photo-app-field-service .connectedGrid,
.jobsite-photo-app-field-service .useCases {
grid-template-columns: 1fr
}
.jobsite-photo-app-field-service .fi {
font-size: 14px
}
.jobsite-photo-app-field-service .outcome {
padding: 21px
}
.jobsite-photo-app-field-service .outcome span {
font-size: 14px
}
.jobsite-photo-app-field-service .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.jobsite-photo-app-field-service .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.jobsite-photo-app-field-service .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.jobsite-photo-app-field-service .uiSub {
font-size: 9px
}
.jobsite-photo-app-field-service .captureScene {
grid-template-columns: 156px minmax(0, 1fr);
gap: 13px
}
.jobsite-photo-app-field-service .captureDevice .phoneBody {
padding: 10px
}
.jobsite-photo-app-field-service .captureDevice .phonePhoto img {
height: 110px
}
.jobsite-photo-app-field-service .captureDevice .phoneHead strong {
font-size: 11px
}
.jobsite-photo-app-field-service .captureDevice .phoneHead small {
font-size: 8px
}
.jobsite-photo-app-field-service .attachmentRecord {
padding: 11px
}
.jobsite-photo-app-field-service .attachmentRecord>strong {
font-size: 11px
}
.jobsite-photo-app-field-service .attachmentRecord>small {
font-size: 9px
}
.jobsite-photo-app-field-service .miniFile {
gap: 6px
}
.jobsite-photo-app-field-service .miniFile>.icon {
width: 17px;
height: 17px
}
.jobsite-photo-app-field-service .miniFile strong {
font-size: 9px
}
.jobsite-photo-app-field-service .miniFile small {
font-size: 8px
}
.jobsite-photo-app-field-service .recordNote {
padding: 11px
}
.jobsite-photo-app-field-service .recordNote strong {
font-size: 11px
}
.jobsite-photo-app-field-service .recordNote p {
font-size: 10px !important
}
.jobsite-photo-app-field-service .taskRow {
padding: 11px;
gap: 8px;
grid-template-columns: 23px minmax(0, 1fr) 63px
}
.jobsite-photo-app-field-service .taskRow strong {
font-size: 11px
}
.jobsite-photo-app-field-service .taskRow small {
font-size: 9px
}
.jobsite-photo-app-field-service .taskPhoto {
width: 63px;
height: 46px
}
.jobsite-photo-app-field-service .checklistTop {
padding: 13px
}
.jobsite-photo-app-field-service .checklistTop strong {
font-size: 13px
}
.jobsite-photo-app-field-service .checklistFoot {
font-size: 10px
}
.jobsite-photo-app-field-service .galleryHeader {
padding: 12px
}
.jobsite-photo-app-field-service .galleryHeader strong {
font-size: 12px
}
.jobsite-photo-app-field-service .galleryHeader small {
font-size: 9px
}
.jobsite-photo-app-field-service .galleryScene .photoTileLabel {
font-size: 11px
}
.jobsite-photo-app-field-service .galleryScene .miniLabel {
font-size: 8px
}
.jobsite-photo-app-field-service .galleryScene .photoTileNote {
font-size: 9px
}
.jobsite-photo-app-field-service .filmStrip {
gap: 7px
}
.jobsite-photo-app-field-service .filmItem>img {
height: 64px
}
.jobsite-photo-app-field-service .filmItem>span {
font-size: 8px;
padding: 6px
}
.jobsite-photo-app-field-service .shareMessage {
padding: 12px
}
.jobsite-photo-app-field-service .shareField {
padding: 10px 12px;
grid-template-columns: 43px 1fr
}
.jobsite-photo-app-field-service .shareMessage>p {
font-size: 11px !important
}
.jobsite-photo-app-field-service .shareChannel {
padding: 11px;
gap: 8px
}
.jobsite-photo-app-field-service .shareChannel strong {
font-size: 10px
}
.jobsite-photo-app-field-service .shareChannel small {
font-size: 8px
}
.jobsite-photo-app-field-service .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.jobsite-photo-app-field-service .aiMini div {
padding: 16px
}
.jobsite-photo-app-field-service .aiMini strong {
font-size: 14px
}
.jobsite-photo-app-field-service .aiMini span {
font-size: 13px
}
.jobsite-photo-app-field-service .promptBox {
padding: 18px;
border-radius: 17px
}
.jobsite-photo-app-field-service .prompt {
font-size: 13px;
padding: 13px
}
.jobsite-photo-app-field-service .promptHead {
font-size: 19px
}
.jobsite-photo-app-field-service .promptFoot {
font-size: 10px !important
}
.jobsite-photo-app-field-service .connectedCard {
padding: 22px
}
.jobsite-photo-app-field-service .connectedCard p,
.jobsite-photo-app-field-service .featureCard p,
.jobsite-photo-app-field-service .useCase p {
font-size: 14px
}
.jobsite-photo-app-field-service .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.jobsite-photo-app-field-service .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.jobsite-photo-app-field-service .ratingItem {
border: 0
}
.jobsite-photo-app-field-service .ratingLead {
margin-bottom: 3px
}
.jobsite-photo-app-field-service .review p {
font-size: 14px
}
.jobsite-photo-app-field-service .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.jobsite-photo-app-field-service .ctaBtns {
width: 100%
}
.jobsite-photo-app-field-service .ctaBtns .btn {
flex: 1
}
.jobsite-photo-app-field-service .cta p {
font-size: 14px
}
.jobsite-photo-app-field-service .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.jobsite-photo-app-field-service .final h2 {
font-size: 32px
}
.jobsite-photo-app-field-service .final p {
font-size: 15px
}
.jobsite-photo-app-field-service .final .ctaBtns {
flex-direction: column
}
.jobsite-photo-app-field-service .final .btn {
min-width: 0;
width: 100%
}
.jobsite-photo-app-field-service .faq details {
padding: 16px
}
.jobsite-photo-app-field-service .faq summary {
font-size: 14px
}
.jobsite-photo-app-field-service .faq details p {
font-size: 14px
}
}
@media(max-width:380px) {
.jobsite-photo-app-field-service .captureScene {
grid-template-columns: 1fr
}
.jobsite-photo-app-field-service .captureDevice {
width: 196px;
justify-self: center
}
.jobsite-photo-app-field-service .captureSide {
grid-template-columns: 1fr 1fr;
gap: 10px
}
.jobsite-photo-app-field-service .attachmentRecord>strong,
.jobsite-photo-app-field-service .recordNote strong {
font-size: 11px
}
.jobsite-photo-app-field-service .miniFile strong {
font-size: 9px
}
.jobsite-photo-app-field-service .recordNote {
border: 1px solid var(--line);
border-left: 3px solid var(--brand)
}
.jobsite-photo-app-field-service .captureDevice .phonePhoto img {
height: 136px
}
.jobsite-photo-app-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 138px;
gap: 10px 8px
}
.jobsite-photo-app-field-service .boardFooter {
padding-right: 147px
}
.jobsite-photo-app-field-service .contextCard {
padding: 10px
}
.jobsite-photo-app-field-service .contextCard>strong {
font-size: 13px
}
.jobsite-photo-app-field-service .contextCard>p {
font-size: 9px
}
.jobsite-photo-app-field-service .contextHead .icon {
width: 14px;
height: 14px
}
.jobsite-photo-app-field-service .contextHead {
font-size: 8px
}
.jobsite-photo-app-field-service .jobHeading .pill {
display: none
}
.jobsite-photo-app-field-service .galleryHeader .pill {
font-size: 8px
}
.jobsite-photo-app-field-service .filmItem>img {
height: 53px
}
.jobsite-photo-app-field-service .galleryScene .photoTileLabel {
font-size: 10px
}
.jobsite-photo-app-field-service .galleryScene .miniLabel {
font-size: 7px
}
.jobsite-photo-app-field-service .shareChannels {
gap: 8px
}
.jobsite-photo-app-field-service .shareChannel>.icon {
width: 18px;
height: 18px
}
}
@media(max-width:360px) {
.jobsite-photo-app-field-service .photoTileLabel {
font-size: 8px
}
.jobsite-photo-app-field-service .photoTileLabel .miniLabel {
font-size: 6.5px
}
.jobsite-photo-app-field-service .photoTileNote {
font-size: 8px
}
.jobsite-photo-app-field-service .photoPair {
gap: 6px
}
.jobsite-photo-app-field-service .phoneHead strong {
font-size: 9px
}
.jobsite-photo-app-field-service .phoneBody {
padding: 8px
}
.jobsite-photo-app-field-service .photoNote {
font-size: 8px
}
.jobsite-photo-app-field-service .galleryTabs {
font-size: 8px
}
.jobsite-photo-app-field-service .boardContent {
padding: 10px
}
.jobsite-photo-app-field-service .taskRow {
grid-template-columns: 21px minmax(0, 1fr) 56px;
gap: 7px
}
.jobsite-photo-app-field-service .taskPhoto {
width: 56px
}
.jobsite-photo-app-field-service .taskRow strong {
font-size: 10px
}
.jobsite-photo-app-field-service .taskRow small {
font-size: 8px
}
}  .jobs-pipeline-software-field-service .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.jobs-pipeline-software-field-service .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.jobs-pipeline-software-field-service a:focus-visible,
.jobs-pipeline-software-field-service summary:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.jobs-pipeline-software-field-service .dark a:focus-visible,
.jobs-pipeline-software-field-service .final a:focus-visible {
outline-color: var(--yellow)
}
.jobs-pipeline-software-field-service .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.jobs-pipeline-software-field-service .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.jobs-pipeline-software-field-service .soft {
background: var(--sky2)
}
.jobs-pipeline-software-field-service .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.jobs-pipeline-software-field-service .dark h2,
.jobs-pipeline-software-field-service .dark h3 {
color: #fff
}
.jobs-pipeline-software-field-service .dark p {
color: #D6D6D6
}
.jobs-pipeline-software-field-service .dark .ey {
background: var(--yellow)
}
.jobs-pipeline-software-field-service .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.jobs-pipeline-software-field-service .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.jobs-pipeline-software-field-service .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.jobs-pipeline-software-field-service .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0;
background: transparent;
}
.jobs-pipeline-software-field-service .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.jobs-pipeline-software-field-service .textLink .icon {
width: 16px;
height: 16px
}
.jobs-pipeline-software-field-service .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.jobs-pipeline-software-field-service .skipLink:focus {
top: 12px
} .jobs-pipeline-software-field-service .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.jobs-pipeline-software-field-service .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.jobs-pipeline-software-field-service .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.jobs-pipeline-software-field-service .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.jobs-pipeline-software-field-service .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.jobs-pipeline-software-field-service .logo.adobe {
font-size: 20px
}
.jobs-pipeline-software-field-service .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .jobs-pipeline-software-field-service .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.jobs-pipeline-software-field-service .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.jobs-pipeline-software-field-service .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.jobs-pipeline-software-field-service .outcome:nth-child(2):before {
background: var(--yellow)
}
.jobs-pipeline-software-field-service .outcome:nth-child(3):before {
background: var(--green)
}
.jobs-pipeline-software-field-service .outcome:nth-child(4):before {
background: var(--purple)
}
.jobs-pipeline-software-field-service .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.jobs-pipeline-software-field-service .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.jobs-pipeline-software-field-service .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .jobs-pipeline-software-field-service .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.jobs-pipeline-software-field-service .feature.reverse .visual {
order: -1
}
.jobs-pipeline-software-field-service .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.jobs-pipeline-software-field-service .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.jobs-pipeline-software-field-service .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.jobs-pipeline-software-field-service .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.jobs-pipeline-software-field-service .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.jobs-pipeline-software-field-service .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.jobs-pipeline-software-field-service .visual>* {
position: relative;
z-index: 2
}
.jobs-pipeline-software-field-service .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.jobs-pipeline-software-field-service .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.jobs-pipeline-software-field-service .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.jobs-pipeline-software-field-service .uiHeading .icon {
width: 19px;
height: 19px
}
.jobs-pipeline-software-field-service .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.jobs-pipeline-software-field-service .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.jobs-pipeline-software-field-service .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.jobs-pipeline-software-field-service .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.jobs-pipeline-software-field-service .pill.green {
background: var(--greenbg);
color: #116746
}
.jobs-pipeline-software-field-service .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.jobs-pipeline-software-field-service .pill.gray {
background: #F0F3F5;
color: #586C79
}
.jobs-pipeline-software-field-service .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .jobs-pipeline-software-field-service .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.jobs-pipeline-software-field-service .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.jobs-pipeline-software-field-service .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.jobs-pipeline-software-field-service .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.jobs-pipeline-software-field-service .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.jobs-pipeline-software-field-service .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.jobs-pipeline-software-field-service .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.jobs-pipeline-software-field-service .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.jobs-pipeline-software-field-service .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.jobs-pipeline-software-field-service .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .jobs-pipeline-software-field-service .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.jobs-pipeline-software-field-service .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.jobs-pipeline-software-field-service .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.jobs-pipeline-software-field-service .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.jobs-pipeline-software-field-service .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.jobs-pipeline-software-field-service .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.jobs-pipeline-software-field-service .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .jobs-pipeline-software-field-service .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.jobs-pipeline-software-field-service .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.jobs-pipeline-software-field-service .featureCard:hover {
transform: translateY(-3px)
}
.jobs-pipeline-software-field-service .featureIcon,
.jobs-pipeline-software-field-service .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.jobs-pipeline-software-field-service .featureIcon .icon,
.jobs-pipeline-software-field-service .useIcon .icon {
width: 22px;
height: 22px
}
.jobs-pipeline-software-field-service .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.jobs-pipeline-software-field-service .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .jobs-pipeline-software-field-service .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.jobs-pipeline-software-field-service .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.jobs-pipeline-software-field-service .useCase h3 {
font-size: 20px
}
.jobs-pipeline-software-field-service .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.jobs-pipeline-software-field-service .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.jobs-pipeline-software-field-service .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.jobs-pipeline-software-field-service .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.jobs-pipeline-software-field-service .review h3 {
font-size: 22px
}
.jobs-pipeline-software-field-service .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.jobs-pipeline-software-field-service .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.jobs-pipeline-software-field-service .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.jobs-pipeline-software-field-service .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.jobs-pipeline-software-field-service .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.jobs-pipeline-software-field-service .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.jobs-pipeline-software-field-service .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.jobs-pipeline-software-field-service .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.jobs-pipeline-software-field-service .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.jobs-pipeline-software-field-service .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.jobs-pipeline-software-field-service .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.jobs-pipeline-software-field-service .cta h3 {
font-size: 19px
}
.jobs-pipeline-software-field-service .cta.darkCta h3 {
color: #fff
}
.jobs-pipeline-software-field-service .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.jobs-pipeline-software-field-service .cta.darkCta p {
color: #D1D1D1
}
.jobs-pipeline-software-field-service .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.jobs-pipeline-software-field-service .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.jobs-pipeline-software-field-service .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.jobs-pipeline-software-field-service .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.jobs-pipeline-software-field-service .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.jobs-pipeline-software-field-service .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.jobs-pipeline-software-field-service .reveal {
opacity: 1;
transform: none
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #0076dd;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}  .jobs-pipeline-software-field-service .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .20), transparent 28%), radial-gradient(circle at 94% 75%, rgba(255, 201, 40, .14), transparent 22%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.jobs-pipeline-software-field-service .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.jobs-pipeline-software-field-service .heroGrid>*,
.jobs-pipeline-software-field-service .feature>*,
.jobs-pipeline-software-field-service .aiGrid>* {
min-width: 0
}
.jobs-pipeline-software-field-service .hero h1 {
max-width: 590px
}
.jobs-pipeline-software-field-service .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.jobs-pipeline-software-field-service .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.jobs-pipeline-software-field-service .heroVisual {
position: relative;
min-width: 0;
width: 100%;
max-width: 620px;
margin-left: auto
}
.jobs-pipeline-software-field-service .assetStage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 174px;
gap: 13px 12px;
align-items: start
}
.jobs-pipeline-software-field-service .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 20px 22px;
border-radius: 28px;
background: linear-gradient(rgba(0, 168, 248, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .055) 1px, transparent 1px);
background-size: 26px 26px;
z-index: 0
}
.jobs-pipeline-software-field-service .assetStage>* {
position: relative;
z-index: 1;
min-width: 0
}
.jobs-pipeline-software-field-service .assetTag {
grid-column: 1/-1;
justify-self: start;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 9px
}
.jobs-pipeline-software-field-service .pipelineBoard {
grid-column: 1/-1;
border: 1px solid #BCDCEA;
background: #fff;
border-radius: 18px;
overflow: hidden
}
.jobs-pipeline-software-field-service .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 16px;
border-bottom: 1px solid var(--line)
}
.jobs-pipeline-software-field-service .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
color: var(--ink)
}
.jobs-pipeline-software-field-service .brandTile {
width: 27px;
height: 27px;
background: var(--brand);
color: #fff;
border-radius: 8px;
display: grid;
place-items: center
}
.jobs-pipeline-software-field-service .brandTile .icon {
width: 17px;
height: 17px
}
.jobs-pipeline-software-field-service .sampleBadge {
display: inline-block;
font-size: 8px;
font-weight: 750;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px 6px;
white-space: nowrap
}
.jobs-pipeline-software-field-service .boardToolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 15px 11px;
font-size: 12px
}
.jobs-pipeline-software-field-service .miniView {
display: flex;
align-items: center;
gap: 4px;
font-size: 9px;
color: var(--muted)
}
.jobs-pipeline-software-field-service .miniView .icon {
width: 14px;
height: 14px
}
.jobs-pipeline-software-field-service .pipeGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 0 12px 14px;
align-items: stretch
}
.jobs-pipeline-software-field-service .pipeColumn {
background: #F5F9FC;
border: 1px solid #E0EBF2;
border-radius: 11px;
padding: 8px;
min-width: 0
}
.jobs-pipeline-software-field-service .pipeColHead {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 800;
line-height: 1.4;
padding: 1px 1px 9px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .pipeColHead b {
margin-left: auto;
border-radius: 5px;
background: #E7EFF5;
padding: 2px 5px;
font-size: 8px;
min-width: 15px;
text-align: center
}
.jobs-pipeline-software-field-service .stageDot {
display: block;
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: var(--brand)
}
.jobs-pipeline-software-field-service .stageDot.yellow {
background: #D9A500
}
.jobs-pipeline-software-field-service .stageDot.green {
background: var(--green)
}
.jobs-pipeline-software-field-service .pipeJob {
padding: 9px 8px;
background: #fff;
border: 1px solid #D8E6EE;
border-radius: 8px;
margin-top: 8px;
min-width: 0;
line-height: 1.45;
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 107px
}
.jobs-pipeline-software-field-service .pipeJob:first-of-type {
margin-top: 0
}
.jobs-pipeline-software-field-service .recordRef {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 600
}
.jobs-pipeline-software-field-service .pipeJob>strong {
display: block;
font-size: 11px;
line-height: 1.4;
letter-spacing: -.015em;
margin: 4px 0 8px;
min-height: 16px
}
.jobs-pipeline-software-field-service .pipeJob>.pill {
font-size: 7px;
padding: 3px 5px;
margin-top: auto;
white-space: normal
}
.jobs-pipeline-software-field-service .jobOwner {
display: flex;
align-items: center;
gap: 5px;
font-size: 8px;
color: #586E7D;
margin-top: 8px;
line-height: 1.5
}
.jobs-pipeline-software-field-service .miniAvatar {
display: grid;
place-items: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
background: #E7F5FC;
border-radius: 50%;
font-size: 7px;
font-weight: 800;
color: #276580
}
.jobs-pipeline-software-field-service .boardFooter {
display: flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
border-top: 1px solid var(--line);
background: var(--sky2);
color: #536F82;
font-size: 9px;
line-height: 1.6;
min-height: 42px
}
.jobs-pipeline-software-field-service .boardFooter .icon {
width: 14px;
height: 14px;
flex: 0 0 14px
}
.jobs-pipeline-software-field-service .pipelineContext {
grid-column: 1;
grid-row: 3;
border-radius: 15px;
background: #0D2C3E;
border: 1px solid #294C5E;
color: #fff;
overflow: hidden;
align-self: start
}
.jobs-pipeline-software-field-service .contextHead {
padding: 11px 13px;
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #2C4A5C
}
.jobs-pipeline-software-field-service .contextHead .icon {
width: 16px;
height: 16px;
color: var(--yellow)
}
.jobs-pipeline-software-field-service .contextBody {
padding: 13px
}
.jobs-pipeline-software-field-service .contextBody>strong {
display: block;
font-size: 17px;
line-height: 1.35;
letter-spacing: -.015em
}
.jobs-pipeline-software-field-service .contextBody>p {
font-size: 11px;
color: #CBDDE7;
line-height: 1.6;
margin-top: 7px
}
.jobs-pipeline-software-field-service .contextTrail {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 9px;
color: #D7E7F0;
margin-top: 14px
}
.jobs-pipeline-software-field-service .contextTrail .icon {
width: 12px;
height: 12px;
color: var(--yellow)
}
.jobs-pipeline-software-field-service .assetPhone {
grid-column: 2;
grid-row: 3;
align-self: start;
margin-top: -10px;
padding: 6px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 26px;
z-index: 3;
min-width: 0
}
.jobs-pipeline-software-field-service .phoneScreen {
background: #fff;
border-radius: 20px;
overflow: hidden;
min-width: 0
}
.jobs-pipeline-software-field-service .phoneTop {
height: 17px;
background: #0C1E2A;
display: grid;
place-items: center
}
.jobs-pipeline-software-field-service .notch {
height: 4px;
width: 42px;
border-radius: 8px;
background: #566C79
}
.jobs-pipeline-software-field-service .phoneHead {
padding: 11px 10px;
background: linear-gradient(135deg, #EAF8FF, #FFF7D6);
border-bottom: 1px solid var(--line)
}
.jobs-pipeline-software-field-service .phoneHead strong {
font-size: 11px;
display: block;
line-height: 1.45
}
.jobs-pipeline-software-field-service .phoneHead small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px;
line-height: 1.5
}
.jobs-pipeline-software-field-service .phoneBody {
padding: 12px 10px
}
.jobs-pipeline-software-field-service .phoneCustomer {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-bottom: 5px
}
.jobs-pipeline-software-field-service .phoneBody>strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.4;
margin-bottom: 9px
}
.jobs-pipeline-software-field-service .phoneBody>.pill {
font-size: 8px;
padding: 4px 6px
}
.jobs-pipeline-software-field-service .phoneFields {
display: grid;
gap: 8px;
margin-top: 12px
}
.jobs-pipeline-software-field-service .phoneFields>div {
display: flex;
flex-direction: column;
gap: 3px;
border-bottom: 1px solid #E6EEF3;
padding-bottom: 7px
}
.jobs-pipeline-software-field-service .phoneFields span {
font-size: 8px;
color: var(--muted)
}
.jobs-pipeline-software-field-service .phoneFields b {
font-size: 9px;
line-height: 1.45;
color: var(--ink)
}
.jobs-pipeline-software-field-service .phoneNote {
font-size: 9px;
color: #4D6778;
line-height: 1.6;
padding: 9px;
background: #F3F9FD;
border: 1px solid #DCEAF2;
border-radius: 7px;
margin-top: 10px
}
.jobs-pipeline-software-field-service .phoneNote b {
font-size: 9px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .mockButton {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 5px;
border-radius: 7px;
font-size: 9px;
font-weight: 800;
color: #101010;
background: var(--yellow);
margin-top: 11px;
text-align: center;
line-height: 1.4
}
.jobs-pipeline-software-field-service .mockButton .icon {
width: 13px;
height: 13px
}
.jobs-pipeline-software-field-service .phoneBottom {
border-top: 1px solid var(--line);
background: var(--sky2);
padding: 8px 7px;
color: #476B7E;
font-size: 8px;
line-height: 1.5;
text-align: center
}
.jobs-pipeline-software-field-service .diagramCaption {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
text-align: center;
margin-top: 12px
}
.jobs-pipeline-software-field-service .tick .icon {
width: 12px;
height: 12px
}
.jobs-pipeline-software-field-service .visual .uiHeading {
line-height: 1.4
}
.jobs-pipeline-software-field-service .uiHeading>span:first-child {
min-width: 0
} .jobs-pipeline-software-field-service .intakePanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.jobs-pipeline-software-field-service .panelBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 15px;
background: #F7FBFE;
border-bottom: 1px solid var(--line)
}
.jobs-pipeline-software-field-service .panelBar>strong {
font-size: 13px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .panelBar .pill {
font-size: 8px
}
.jobs-pipeline-software-field-service .intakeFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 14px 15px 0
}
.jobs-pipeline-software-field-service .mockField {
border: 1px solid #DBE6ED;
border-radius: 8px;
background: #fff;
min-width: 0;
padding: 9px 10px
}
.jobs-pipeline-software-field-service .mockField.wide {
grid-column: 1/-1
}
.jobs-pipeline-software-field-service .mockField>span {
display: block;
font-size: 9px;
color: var(--muted)
}
.jobs-pipeline-software-field-service .mockField>strong {
display: block;
font-size: 11px;
line-height: 1.5;
font-weight: 700;
margin-top: 3px;
overflow-wrap: anywhere
}
.jobs-pipeline-software-field-service .intakeDescription {
padding: 10px;
margin: 11px 15px 0;
background: #F5FBFF;
border: 1px solid var(--line);
border-radius: 8px
}
.jobs-pipeline-software-field-service .intakeDescription b {
display: block;
font-size: 9px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .intakeDescription span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
.jobs-pipeline-software-field-service .intakeOwner {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
padding: 13px 15px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .intakeOwner .miniPill {
margin-left: auto;
background: #FFF7D6;
font-size: 8px;
border-radius: 5px;
padding: 3px 6px
}
.jobs-pipeline-software-field-service .importCard {
display: flex;
align-items: center;
gap: 10px;
padding: 14px;
margin-top: 13px;
background: #fff;
border: 1px solid #C4DED2;
border-radius: 12px
}
.jobs-pipeline-software-field-service .importIcon {
background: var(--greenbg);
color: var(--green);
height: 36px;
width: 36px;
flex: 0 0 36px;
display: grid;
place-items: center;
border-radius: 10px
}
.jobs-pipeline-software-field-service .importIcon .icon {
width: 19px;
height: 19px
}
.jobs-pipeline-software-field-service .importCard>div {
flex: 1;
min-width: 0
}
.jobs-pipeline-software-field-service .importCard strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.jobs-pipeline-software-field-service .importCard p {
font-size: 10px !important;
line-height: 1.6;
margin: 4px 0 0 !important;
color: var(--muted)
}
.jobs-pipeline-software-field-service .excelType {
font-size: 8px;
font-weight: 800;
line-height: 1.7;
color: #216449;
background: #F2FAF5;
border-radius: 5px;
padding: 5px 7px
}
.jobs-pipeline-software-field-service .statusExamples {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 12px;
font-size: 8px
}
.jobs-pipeline-software-field-service .statusExamples>span {
color: var(--muted);
margin-right: 3px
}
.jobs-pipeline-software-field-service .statusExamples b {
font-size: 8px;
font-weight: 650;
padding: 4px 6px;
border: 1px solid var(--line);
background: #fff;
color: var(--navy);
border-radius: 5px
} .jobs-pipeline-software-field-service .viewTabs {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-size: 10px;
color: var(--muted)
}
.jobs-pipeline-software-field-service .viewTabs>span {
border-radius: 7px;
padding: 7px 10px;
background: #fff;
border: 1px solid var(--line)
}
.jobs-pipeline-software-field-service .viewTabs .selected {
background: var(--navy);
color: #fff;
border-color: var(--navy);
font-weight: 750
}
.jobs-pipeline-software-field-service .viewTabs small {
margin-left: auto;
font-size: 8px
}
.jobs-pipeline-software-field-service .kanbanScene {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px
}
.jobs-pipeline-software-field-service .kanbanLane {
background: #F3F8FB;
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
min-width: 0
}
.jobs-pipeline-software-field-service .laneTitle {
display: flex;
align-items: center;
gap: 6px;
padding-bottom: 8px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .laneTitle strong {
font-size: 11px;
line-height: 1.4
}
.jobs-pipeline-software-field-service .kanbanLane .pipeJob {
min-height: 145px;
margin-top: 0
}
.jobs-pipeline-software-field-service .kanbanLane .pipeJob>strong {
font-size: 12px;
min-height: 34px
}
.jobs-pipeline-software-field-service .kanbanLane .recordRef {
font-size: 9px
}
.jobs-pipeline-software-field-service .kanbanLane .pill {
font-size: 8px
}
.jobs-pipeline-software-field-service .kanbanLane .jobOwner {
font-size: 9px
}
.jobs-pipeline-software-field-service .boardHint {
display: flex;
align-items: flex-start;
gap: 8px;
color: #466B80;
font-size: 10px;
line-height: 1.6;
padding: 14px 2px
}
.jobs-pipeline-software-field-service .boardHint .icon {
width: 15px;
height: 15px;
flex: 0 0 15px;
margin-top: 1px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .opportunityStrip {
padding: 14px;
border-radius: 12px;
background: #0E2B3D;
color: #fff;
border: 1px solid #305063
}
.jobs-pipeline-software-field-service .opStripTitle {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 750
}
.jobs-pipeline-software-field-service .opStripTitle .icon {
width: 16px;
height: 16px;
color: var(--yellow)
}
.jobs-pipeline-software-field-service .opStripFields {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 15px
}
.jobs-pipeline-software-field-service .opStripFields>div {
border-left: 1px solid #35505F;
padding-left: 10px;
min-width: 0
}
.jobs-pipeline-software-field-service .opStripFields>div:first-child {
border-left: 0;
padding-left: 0
}
.jobs-pipeline-software-field-service .opStripFields span {
font-size: 8px;
color: #BED5E3;
display: block;
line-height: 1.4
}
.jobs-pipeline-software-field-service .opStripFields b {
display: block;
font-size: 12px;
font-weight: 750;
margin-top: 5px;
line-height: 1.4
} .jobs-pipeline-software-field-service .automationTitle {
display: flex;
align-items: center;
gap: 8px;
padding: 13px;
border: 1px solid #D0E3ED;
border-radius: 11px;
background: #fff;
font-size: 12px;
font-weight: 750;
color: var(--navy)
}
.jobs-pipeline-software-field-service .automationTitle>.icon {
width: 20px;
height: 20px
}
.jobs-pipeline-software-field-service .automationTitle>.sampleBadge {
margin-left: auto;
font-size: 7px
}
.jobs-pipeline-software-field-service .ruleFlow {
display: grid;
gap: 13px;
padding: 17px 2px;
position: relative
}
.jobs-pipeline-software-field-service .ruleFlow:before {
content: "";
position: absolute;
left: 19px;
top: 30px;
bottom: 35px;
border-left: 1px solid #A5C7D8
}
.jobs-pipeline-software-field-service .ruleStep {
position: relative;
display: flex;
gap: 12px;
align-items: flex-start
}
.jobs-pipeline-software-field-service .ruleNumber {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--yellow);
color: #111;
font-size: 11px;
font-weight: 850;
border: 1px solid #EEC044
}
.jobs-pipeline-software-field-service .ruleStep>div {
flex: 1;
border-radius: 10px;
border: 1px solid var(--line);
background: #fff;
padding: 11px 13px;
min-width: 0
}
.jobs-pipeline-software-field-service .ruleStep small {
display: block;
font-size: 8px;
color: #6C8090;
font-weight: 750;
letter-spacing: .06em
}
.jobs-pipeline-software-field-service .ruleStep strong {
display: block;
font-size: 12px;
line-height: 1.4;
margin-top: 4px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .ruleStep p {
font-size: 10px !important;
color: var(--muted);
line-height: 1.6;
margin: 4px 0 0 !important
}
.jobs-pipeline-software-field-service .taskRecord {
padding: 14px;
border: 1px solid #ECD68B;
background: #FFFCF1;
border-radius: 12px
}
.jobs-pipeline-software-field-service .taskTitle {
display: flex;
gap: 7px;
align-items: center;
color: #866819;
font-size: 10px;
font-weight: 750
}
.jobs-pipeline-software-field-service .taskTitle .icon {
width: 16px;
height: 16px
}
.jobs-pipeline-software-field-service .taskRecord>strong {
display: block;
color: var(--navy);
font-size: 13px;
line-height: 1.4;
margin-top: 10px
}
.jobs-pipeline-software-field-service .taskMeta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 8px;
font-size: 9px;
color: var(--muted)
}
.jobs-pipeline-software-field-service .taskMeta .pill {
font-size: 8px
}
.jobs-pipeline-software-field-service .taskRecord>p {
font-size: 10px !important;
line-height: 1.6;
color: #6F6245;
margin: 9px 0 0 !important
} .jobs-pipeline-software-field-service .mobileHandoff {
display: grid;
grid-template-columns: 185px minmax(0, 1fr);
gap: 22px;
align-items: center
}
.jobs-pipeline-software-field-service .fieldPhone {
padding: 6px;
background: #0C1E2A;
border: 1px solid #354D5C;
border-radius: 26px;
width: 100%;
max-width: 195px;
justify-self: center
}
.jobs-pipeline-software-field-service .handoffSteps {
display: grid;
gap: 20px
}
.jobs-pipeline-software-field-service .handoffStep {
display: flex;
gap: 10px;
align-items: flex-start
}
.jobs-pipeline-software-field-service .handoffNum {
display: grid;
place-items: center;
width: 29px;
height: 29px;
flex: 0 0 29px;
background: #fff;
border: 1px solid #C7DFEC;
border-radius: 9px;
color: var(--navy);
font-size: 11px;
font-weight: 850
}
.jobs-pipeline-software-field-service .handoffStep>div {
min-width: 0
}
.jobs-pipeline-software-field-service .handoffStep strong {
display: block;
font-size: 13px;
line-height: 1.4
}
.jobs-pipeline-software-field-service .handoffStep p {
font-size: 11px !important;
line-height: 1.65;
margin: 5px 0 0 !important;
color: var(--muted)
}
.jobs-pipeline-software-field-service .conversionRow {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid #D0E2EC;
font-size: 9px;
color: var(--muted)
}
.jobs-pipeline-software-field-service .conversionRow>b {
font-size: 8px;
font-weight: 750;
padding: 5px 7px;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--navy)
}
.jobs-pipeline-software-field-service .conversionRow>b:last-child {
background: var(--yellowsoft);
border-color: #E4CD7B
} @media(max-width:1100px) and (min-width:961px) {
.jobs-pipeline-software-field-service .heroGrid {
gap: 28px
}
.jobs-pipeline-software-field-service .hero .lead {
font-size: 17px
}
.jobs-pipeline-software-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 160px;
gap: 12px 10px
}
.jobs-pipeline-software-field-service .boardToolbar {
font-size: 11px;
padding: 12px
}
.jobs-pipeline-software-field-service .miniView {
display: none
}
.jobs-pipeline-software-field-service .pipeGrid {
gap: 7px;
padding: 0 9px 12px
}
.jobs-pipeline-software-field-service .pipeColumn {
padding: 6px
}
.jobs-pipeline-software-field-service .pipeJob {
padding: 8px 6px;
min-height: 118px
}
.jobs-pipeline-software-field-service .pipeJob>strong {
font-size: 10px
}
.jobs-pipeline-software-field-service .pipeJob .jobOwner {
font-size: 7px
}
.jobs-pipeline-software-field-service .contextBody>strong {
font-size: 15px
}
.jobs-pipeline-software-field-service .contextBody>p {
font-size: 10px
}
.jobs-pipeline-software-field-service .contextTrail {
gap: 6px;
font-size: 8px
}
.jobs-pipeline-software-field-service .visual {
padding: 18px
}
.jobs-pipeline-software-field-service .kanbanScene {
gap: 7px
}
.jobs-pipeline-software-field-service .kanbanLane {
padding: 7px
}
.jobs-pipeline-software-field-service .laneTitle strong {
font-size: 10px
}
.jobs-pipeline-software-field-service .kanbanLane .pipeJob>strong {
font-size: 11px
}
.jobs-pipeline-software-field-service .opStripFields {
gap: 7px
}
.jobs-pipeline-software-field-service .opStripFields>div {
padding-left: 7px
}
.jobs-pipeline-software-field-service .opStripFields b {
font-size: 11px
}
.jobs-pipeline-software-field-service .mobileHandoff {
grid-template-columns: 164px minmax(0, 1fr);
gap: 16px
}
.jobs-pipeline-software-field-service .handoffStep {
gap: 8px
}
.jobs-pipeline-software-field-service .handoffStep strong {
font-size: 12px
}
.jobs-pipeline-software-field-service .handoffStep p {
font-size: 10px !important
}
.jobs-pipeline-software-field-service .automationTitle>.sampleBadge {
display: none
}
}
@media(max-width:960px) {
.jobs-pipeline-software-field-service .heroGrid,
.jobs-pipeline-software-field-service .feature,
.jobs-pipeline-software-field-service .aiGrid,
.jobs-pipeline-software-field-service .final {
grid-template-columns: 1fr
}
.jobs-pipeline-software-field-service .heroGrid {
gap: 36px
}
.jobs-pipeline-software-field-service .hero h1 {
max-width: 800px
}
.jobs-pipeline-software-field-service .hero .lead {
max-width: 750px
}
.jobs-pipeline-software-field-service .heroVisual {
max-width: 600px;
margin: 0 auto
}
.jobs-pipeline-software-field-service .feature.reverse .visual {
order: 0
}
.jobs-pipeline-software-field-service .feature {
gap: 30px
}
.jobs-pipeline-software-field-service .feature>div:first-child {
max-width: 800px
}
.jobs-pipeline-software-field-service .outcomes,
.jobs-pipeline-software-field-service .featureGrid,
.jobs-pipeline-software-field-service .connectedGrid,
.jobs-pipeline-software-field-service .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.jobs-pipeline-software-field-service .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.jobs-pipeline-software-field-service .reviews {
grid-template-columns: 1fr
}
.jobs-pipeline-software-field-service .ratingGrid {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.jobs-pipeline-software-field-service .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.jobs-pipeline-software-field-service .ratingItem:nth-child(2) {
border: 0
}
.jobs-pipeline-software-field-service .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.jobs-pipeline-software-field-service .final .btn {
min-width: 195px
}
.jobs-pipeline-software-field-service .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.jobs-pipeline-software-field-service .aiGrid {
gap: 30px
}
.jobs-pipeline-software-field-service .aiMini {
max-width: 760px
}
.jobs-pipeline-software-field-service .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.jobs-pipeline-software-field-service .wrap {
width: calc(100% - 24px)
}
.jobs-pipeline-software-field-service .hero {
padding: 32px 0 42px
}
.jobs-pipeline-software-field-service .lead {
font-size: 17px
}
.jobs-pipeline-software-field-service .sectionHead p {
font-size: 16px
}
.jobs-pipeline-software-field-service .sectionHead {
margin-bottom: 28px
}
.jobs-pipeline-software-field-service .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.jobs-pipeline-software-field-service .heroGrid {
gap: 26px
}
.jobs-pipeline-software-field-service .hero .actions {
gap: 8px
}
.jobs-pipeline-software-field-service .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.jobs-pipeline-software-field-service .micro {
font-size: 11px
}
.jobs-pipeline-software-field-service .heroPills {
gap: 6px
}
.jobs-pipeline-software-field-service .heroPills span {
font-size: 9px
}
.jobs-pipeline-software-field-service .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.jobs-pipeline-software-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 160px;
gap: 12px 10px
}
.jobs-pipeline-software-field-service .assetTag {
font-size: 9px
}
.jobs-pipeline-software-field-service .boardHeader {
padding: 12px
}
.jobs-pipeline-software-field-service .boardBrand {
font-size: 12px
}
.jobs-pipeline-software-field-service .sampleBadge {
font-size: 7px
}
.jobs-pipeline-software-field-service .boardToolbar {
font-size: 10px;
padding: 12px 10px
}
.jobs-pipeline-software-field-service .miniView {
display: none
}
.jobs-pipeline-software-field-service .pipeGrid {
gap: 7px;
padding: 0 9px 12px
}
.jobs-pipeline-software-field-service .pipeColumn {
padding: 6px
}
.jobs-pipeline-software-field-service .pipeColHead {
font-size: 9px;
gap: 4px
}
.jobs-pipeline-software-field-service .pipeColHead b {
font-size: 7px;
padding: 2px 4px
}
.jobs-pipeline-software-field-service .pipeJob {
padding: 8px 6px;
min-height: 123px
}
.jobs-pipeline-software-field-service .pipeJob>strong {
font-size: 10px;
min-height: 28px
}
.jobs-pipeline-software-field-service .pipeJob>.pill {
font-size: 7px
}
.jobs-pipeline-software-field-service .recordRef {
font-size: 7px
}
.jobs-pipeline-software-field-service .jobOwner {
font-size: 7px;
gap: 4px
}
.jobs-pipeline-software-field-service .jobOwner .miniAvatar {
width: 17px;
height: 17px;
flex-basis: 17px;
font-size: 6px
}
.jobs-pipeline-software-field-service .boardFooter {
font-size: 8px;
padding: 10px 12px;
min-height: 44px
}
.jobs-pipeline-software-field-service .assetPhone {
border-radius: 24px;
margin-top: -5px
}
.jobs-pipeline-software-field-service .phoneScreen {
border-radius: 18px
}
.jobs-pipeline-software-field-service .phoneHead {
padding: 10px 9px
}
.jobs-pipeline-software-field-service .phoneHead strong {
font-size: 10px
}
.jobs-pipeline-software-field-service .phoneHead small {
font-size: 7px
}
.jobs-pipeline-software-field-service .phoneBody {
padding: 11px 9px
}
.jobs-pipeline-software-field-service .phoneBody>strong {
font-size: 11px
}
.jobs-pipeline-software-field-service .phoneCustomer {
font-size: 8px
}
.jobs-pipeline-software-field-service .phoneNote {
font-size: 8px;
padding: 8px
}
.jobs-pipeline-software-field-service .phoneFields b {
font-size: 9px
}
.jobs-pipeline-software-field-service .phoneFields span {
font-size: 7px
}
.jobs-pipeline-software-field-service .phoneBottom {
font-size: 7px
}
.jobs-pipeline-software-field-service .contextHead {
padding: 10px;
font-size: 9px;
gap: 7px
}
.jobs-pipeline-software-field-service .contextHead .icon {
width: 15px;
height: 15px
}
.jobs-pipeline-software-field-service .contextBody {
padding: 11px
}
.jobs-pipeline-software-field-service .contextBody>strong {
font-size: 14px
}
.jobs-pipeline-software-field-service .contextBody>p {
font-size: 10px
}
.jobs-pipeline-software-field-service .contextTrail {
gap: 6px;
font-size: 8px
}
.jobs-pipeline-software-field-service .diagramCaption {
font-size: 9px
}
.jobs-pipeline-software-field-service .trust {
padding: 23px 0
}
.jobs-pipeline-software-field-service .trustLabel {
font-size: 12px
}
.jobs-pipeline-software-field-service .logos {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px
}
.jobs-pipeline-software-field-service .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.jobs-pipeline-software-field-service .logo.dhl {
font-size: 19px
}
.jobs-pipeline-software-field-service .logo.adobe {
font-size: 17px
}
.jobs-pipeline-software-field-service .logo.golden {
font-size: 8px
}
.jobs-pipeline-software-field-service .fl,
.jobs-pipeline-software-field-service .outcomes,
.jobs-pipeline-software-field-service .featureGrid,
.jobs-pipeline-software-field-service .connectedGrid,
.jobs-pipeline-software-field-service .useCases {
grid-template-columns: 1fr
}
.jobs-pipeline-software-field-service .fi {
font-size: 14px
}
.jobs-pipeline-software-field-service .outcome {
padding: 21px
}
.jobs-pipeline-software-field-service .outcome strong {
margin-top: 12px
}
.jobs-pipeline-software-field-service .outcome span {
font-size: 14px
}
.jobs-pipeline-software-field-service .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.jobs-pipeline-software-field-service .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.jobs-pipeline-software-field-service .uiHeading>.sampleBadge {
display: none
}
.jobs-pipeline-software-field-service .intakeFields {
padding: 12px 12px 0;
gap: 8px
}
.jobs-pipeline-software-field-service .mockField {
padding: 8px
}
.jobs-pipeline-software-field-service .mockField>span {
font-size: 8px
}
.jobs-pipeline-software-field-service .mockField>strong {
font-size: 10px
}
.jobs-pipeline-software-field-service .intakeDescription {
margin: 10px 12px 0
}
.jobs-pipeline-software-field-service .intakeOwner {
padding: 12px;
font-size: 9px
}
.jobs-pipeline-software-field-service .panelBar {
padding: 12px
}
.jobs-pipeline-software-field-service .importCard {
padding: 12px;
gap: 8px
}
.jobs-pipeline-software-field-service .importCard strong {
font-size: 11px
}
.jobs-pipeline-software-field-service .importCard p {
font-size: 10px !important
}
.jobs-pipeline-software-field-service .statusExamples {
gap: 5px
}
.jobs-pipeline-software-field-service .viewTabs {
gap: 6px
}
.jobs-pipeline-software-field-service .viewTabs>span {
padding: 6px 8px;
font-size: 9px
}
.jobs-pipeline-software-field-service .viewTabs small {
font-size: 7px
}
.jobs-pipeline-software-field-service .kanbanScene {
gap: 7px
}
.jobs-pipeline-software-field-service .kanbanLane {
padding: 7px
}
.jobs-pipeline-software-field-service .laneTitle {
gap: 4px
}
.jobs-pipeline-software-field-service .laneTitle strong {
font-size: 9px
}
.jobs-pipeline-software-field-service .kanbanLane .pipeJob {
padding: 8px 6px;
min-height: 145px
}
.jobs-pipeline-software-field-service .kanbanLane .pipeJob>strong {
font-size: 10px;
min-height: 31px
}
.jobs-pipeline-software-field-service .kanbanLane .recordRef {
font-size: 8px
}
.jobs-pipeline-software-field-service .kanbanLane .pill {
font-size: 7px
}
.jobs-pipeline-software-field-service .kanbanLane .jobOwner {
font-size: 8px
}
.jobs-pipeline-software-field-service .opportunityStrip {
padding: 13px
}
.jobs-pipeline-software-field-service .opStripFields {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px
}
.jobs-pipeline-software-field-service .opStripFields>div:nth-child(3) {
padding-left: 0;
border-left: 0
}
.jobs-pipeline-software-field-service .opStripFields span {
font-size: 9px
}
.jobs-pipeline-software-field-service .opStripFields b {
font-size: 12px
}
.jobs-pipeline-software-field-service .automationTitle {
padding: 12px;
font-size: 11px
}
.jobs-pipeline-software-field-service .automationTitle>.sampleBadge {
display: none
}
.jobs-pipeline-software-field-service .ruleStep>div {
padding: 11px
}
.jobs-pipeline-software-field-service .ruleStep strong {
font-size: 12px
}
.jobs-pipeline-software-field-service .ruleStep p {
font-size: 10px !important
}
.jobs-pipeline-software-field-service .ruleStep {
gap: 10px
}
.jobs-pipeline-software-field-service .taskRecord {
padding: 13px
}
.jobs-pipeline-software-field-service .taskRecord>strong {
font-size: 12px
}
.jobs-pipeline-software-field-service .mobileHandoff {
grid-template-columns: 164px minmax(0, 1fr);
gap: 14px
}
.jobs-pipeline-software-field-service .handoffSteps {
gap: 16px
}
.jobs-pipeline-software-field-service .handoffStep {
gap: 7px
}
.jobs-pipeline-software-field-service .handoffNum {
width: 25px;
height: 25px;
flex-basis: 25px;
font-size: 10px
}
.jobs-pipeline-software-field-service .handoffStep strong {
font-size: 11px
}
.jobs-pipeline-software-field-service .handoffStep p {
font-size: 10px !important
}
.jobs-pipeline-software-field-service .conversionRow {
font-size: 8px;
gap: 5px
}
.jobs-pipeline-software-field-service .conversionRow>b {
font-size: 8px;
padding: 5px 6px
}
.jobs-pipeline-software-field-service .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.jobs-pipeline-software-field-service .aiMini div {
padding: 16px
}
.jobs-pipeline-software-field-service .aiMini strong {
font-size: 14px
}
.jobs-pipeline-software-field-service .aiMini span {
font-size: 13px
}
.jobs-pipeline-software-field-service .promptBox {
padding: 18px;
border-radius: 17px
}
.jobs-pipeline-software-field-service .prompt {
font-size: 13px;
padding: 13px
}
.jobs-pipeline-software-field-service .promptHead {
font-size: 19px
}
.jobs-pipeline-software-field-service .promptFoot {
font-size: 10px !important
}
.jobs-pipeline-software-field-service .connectedCard {
padding: 22px
}
.jobs-pipeline-software-field-service .connectedCard p,
.jobs-pipeline-software-field-service .featureCard p,
.jobs-pipeline-software-field-service .useCase p {
font-size: 14px
}
.jobs-pipeline-software-field-service .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.jobs-pipeline-software-field-service .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px
}
.jobs-pipeline-software-field-service .ratingItem {
border: 0
}
.jobs-pipeline-software-field-service .ratingLead {
margin-bottom: 3px
}
.jobs-pipeline-software-field-service .review p {
font-size: 14px
}
.jobs-pipeline-software-field-service .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.jobs-pipeline-software-field-service .ctaBtns {
width: 100%
}
.jobs-pipeline-software-field-service .ctaBtns .btn {
flex: 1
}
.jobs-pipeline-software-field-service .cta p {
font-size: 14px
}
.jobs-pipeline-software-field-service .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.jobs-pipeline-software-field-service .final h2 {
font-size: 32px
}
.jobs-pipeline-software-field-service .final p {
font-size: 15px
}
.jobs-pipeline-software-field-service .final .ctaBtns {
flex-direction: column
}
.jobs-pipeline-software-field-service .final .btn {
min-width: 0;
width: 100%
}
.jobs-pipeline-software-field-service .faq details {
padding: 16px
}
.jobs-pipeline-software-field-service .faq summary {
font-size: 14px
}
.jobs-pipeline-software-field-service .faq details p {
font-size: 14px
}
}
@media(max-width:380px) {
.jobs-pipeline-software-field-service .mobileHandoff {
grid-template-columns: 1fr;
gap: 23px
}
.jobs-pipeline-software-field-service .fieldPhone {
max-width: 185px
}
.jobs-pipeline-software-field-service .handoffSteps {
gap: 14px
}
.jobs-pipeline-software-field-service .handoffStep strong {
font-size: 12px
}
.jobs-pipeline-software-field-service .handoffStep p {
font-size: 11px !important
}
.jobs-pipeline-software-field-service .kanbanLane {
padding: 5px
}
.jobs-pipeline-software-field-service .kanbanScene {
gap: 5px
}
.jobs-pipeline-software-field-service .kanbanLane .pipeJob {
padding: 7px 5px
}
.jobs-pipeline-software-field-service .laneTitle strong {
font-size: 8px
}
.jobs-pipeline-software-field-service .laneTitle .stageDot {
width: 5px;
height: 5px;
flex-basis: 5px
}
.jobs-pipeline-software-field-service .kanbanLane .jobOwner .miniAvatar {
display: none
}
}
@media(max-width:360px) {
.jobs-pipeline-software-field-service .assetStage {
grid-template-columns: minmax(0, 1fr) 142px;
gap: 10px 8px
}
.jobs-pipeline-software-field-service .pipeGrid {
gap: 5px;
padding: 0 7px 10px
}
.jobs-pipeline-software-field-service .pipeColumn {
padding: 5px
}
.jobs-pipeline-software-field-service .pipeColHead {
font-size: 8px;
gap: 3px
}
.jobs-pipeline-software-field-service .pipeColHead .stageDot {
width: 5px;
height: 5px;
flex-basis: 5px
}
.jobs-pipeline-software-field-service .pipeJob {
padding: 7px 5px;
min-height: 128px
}
.jobs-pipeline-software-field-service .pipeJob>strong {
font-size: 9px;
min-height: 28px
}
.jobs-pipeline-software-field-service .pipeJob .miniAvatar {
display: none
}
.jobs-pipeline-software-field-service .jobOwner {
font-size: 7px
}
.jobs-pipeline-software-field-service .contextHead {
font-size: 8px;
padding: 9px;
gap: 5px
}
.jobs-pipeline-software-field-service .contextBody {
padding: 10px
}
.jobs-pipeline-software-field-service .contextBody>strong {
font-size: 12px
}
.jobs-pipeline-software-field-service .contextBody>p {
font-size: 9px
}
.jobs-pipeline-software-field-service .contextTrail {
gap: 5px;
font-size: 7px
}
.jobs-pipeline-software-field-service .contextTrail .icon {
width: 10px;
height: 10px
}
.jobs-pipeline-software-field-service .phoneHead strong {
font-size: 9px
}
.jobs-pipeline-software-field-service .phoneNote {
font-size: 8px
}
.jobs-pipeline-software-field-service .phoneFields b {
font-size: 8px
}
.jobs-pipeline-software-field-service .mockButton {
font-size: 8px
}
.jobs-pipeline-software-field-service .boardToolbar {
font-size: 9px
}
.jobs-pipeline-software-field-service .boardFooter {
font-size: 8px
}
.jobs-pipeline-software-field-service .intakeFields {
gap: 7px
}
.jobs-pipeline-software-field-service .mockField>strong {
font-size: 9px
}
}  .assetRfidPage {
--brand: #00A8F8;
--brand2: #0076dd;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--black2: #171717;
--red: #E25757;
--purple: #7C67E8;
--shadow: 0 18px 48px rgba(6, 59, 92, .09); --max: 1320px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
isolation: isolate;
overflow-wrap: break-word;
font-size: 16px
}
.assetRfidPage *,
.assetRfidPage *::before,
.assetRfidPage *::after {
box-sizing: border-box
}
.assetRfidPage :where(h1, h2, h3, p, figure, ul, ol, dl, dd) {
margin: 0
}
.assetRfidPage a {
color: inherit;
text-decoration: none
}
.assetRfidPage img {
display: block;
max-width: 100%;
height: auto
}
.assetRfidPage :where(a, summary):focus-visible {
outline: 3px solid #0076dd;
outline-offset: 5px
}
.assetRfidPage .ico {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle
}
.assetRfidPage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: auto
}
.assetRfidPage section {
padding: 76px 0;
scroll-margin-top: 30px
}
.assetRfidPage [id] {
scroll-margin-top: 28px
}  .assetRfidPage h2 {
font-size: clamp(31px, 3.35vw, 45px)
}
.assetRfidPage h3 {
font-size: 21px
}
.assetRfidPage p {
color: var(--muted)
}
.assetRfidPage .ey {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 12px;
font-weight: 800;
margin-bottom: 18px
}
.assetRfidPage .ey .ico {
width: 16px;
height: 16px
}
.assetRfidPage .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px;
line-height: 1.75
}
.assetRfidPage .btn {
display: inline-flex;
gap: 12px;
min-height: 49px;
padding: 11px 20px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: background .2s ease;
line-height: 1.45;
font-size: 14px;
text-align: center
}
.assetRfidPage .btn .ico {
width: 18px;
height: 18px
}
.assetRfidPage .btn.black {
background: var(--black);
color: #fff
}
.assetRfidPage .btn.black:hover {
background: #292929
}
.assetRfidPage .btn.yellow {
background: var(--yellow);
color: #000
}
.assetRfidPage .btn.yellow:hover {
background: #FFDA67
}
.assetRfidPage .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.assetRfidPage .btn.outline:hover {
background: var(--sky)
}
.assetRfidPage .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.assetRfidPage .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.assetRfidPage .soft {
background: var(--sky2)
}
.assetRfidPage .sectionHead {
max-width: 820px;
margin-bottom: 35px
}
.assetRfidPage .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.assetRfidPage .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.assetRfidPage .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.assetRfidPage .dark h2,
.assetRfidPage .dark h3 {
color: #fff
}
.assetRfidPage .dark p {
color: #D6D6D6
}
.assetRfidPage .dark .ey {
background: var(--yellow);
color: var(--black)
}
.assetRfidPage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
.assetRfidPage .skipLink {
position: absolute;
left: 20px;
top: -100px;
z-index: 99;
background: #fff;
padding: 12px 20px;
color: var(--navy)
}
.assetRfidPage .skipLink:focus {
top: 10px
} .assetRfidPage .hero {
padding: 30px 0 64px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .18), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .14), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.assetRfidPage .breadcrumb {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
font-size: 10px;
color: #536C7D;
margin-bottom: 31px
}
.assetRfidPage .breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px
}
.assetRfidPage .breadcrumb .ico {
width: 11px;
height: 11px
}
.assetRfidPage .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 38px;
align-items: center
}
.assetRfidPage .hero h1 span {
color: var(--brand2)
}
.assetRfidPage .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px
}
.assetRfidPage .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.assetRfidPage .heroVisual {
min-width: 0;
position: relative
}
.assetRfidPage .coldStage {
position: relative;
height: 560px;
max-width: 610px;
margin: auto
}
.assetRfidPage .coldScene {
position: absolute;
top: 13px;
left: -15px;
width: 100%;
height: 440px;
object-fit: contain
}
.assetRfidPage .stageLabel {
position: absolute;
left: 15px;
top: 3px;
background: #fff;
border: 1px solid #C6E5F3;
padding: 10px 13px;
border-radius: 10px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: var(--navy);
font-weight: 750
}
.assetRfidPage .stageLabel .ico {
width: 18px;
height: 18px;
color: var(--brand2)
}
.assetRfidPage .conditionPanel {
position: absolute;
right: -1px;
top: 85px;
width: 212px;
padding: 7px;
border-radius: 28px;
background: #102435;
border: 1px solid #254A62;
box-shadow: 0 14px 30px rgba(6, 59, 92, .14)
}
.assetRfidPage .phoneScreen {
background: #fff;
border-radius: 21px;
overflow: hidden;
min-height: 328px
}
.assetRfidPage .phoneNotch {
height: 20px;
background: #102435;
display: flex;
justify-content: center;
align-items: center
}
.assetRfidPage .phoneNotch:before {
content: "";
height: 5px;
width: 53px;
border-radius: 9px;
background: #3F5665
}
.assetRfidPage .phoneHead {
padding: 13px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.assetRfidPage .phoneHead strong {
font-size: 12px;
display: block
}
.assetRfidPage .phoneHead small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
.assetRfidPage .phoneBody {
padding: 12px
}
.assetRfidPage .phoneBody>.badge {
font-size: 9px
}
.assetRfidPage .scanStatus {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px
}
.assetRfidPage .scanStatus>.ico {
width: 31px;
height: 31px;
color: var(--brand2)
}
.assetRfidPage .scanStatus strong {
font-size: 29px;
line-height: 1;
display: block;
letter-spacing: -.03em
}
.assetRfidPage .scanStatus small {
font-size: 9px;
color: var(--muted)
}
.assetRfidPage .phoneLine {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 10px;
border-bottom: 1px solid var(--line);
padding: 9px 0
}
.assetRfidPage .phoneLine:last-child {
border: 0
}
.assetRfidPage .phoneAlert {
padding: 9px;
background: var(--yellowsoft);
border: 1px solid #F0DFAB;
border-radius: 7px;
font-size: 9px;
margin-top: 12px;
color: #66500F
}
.assetRfidPage .heroColdCard {
position: absolute;
left: 3px;
bottom: 2px;
width: 274px;
background: #111820;
border: 1px solid #263D4D;
color: #fff;
border-radius: 15px;
padding: 17px 18px
}
.assetRfidPage .stockCardHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
margin-bottom: 13px;
color: #D2DFE7
}
.assetRfidPage .stockCardHead .ico {
width: 18px;
height: 18px;
color: var(--yellow)
}
.assetRfidPage .stockCardMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px
}
.assetRfidPage .stockCardMetrics strong {
display: block;
font-size: 27px;
color: #fff;
line-height: 1.15;
letter-spacing: -.04em
}
.assetRfidPage .stockCardMetrics span {
font-size: 9px;
color: #B6CCD9
}
.assetRfidPage .stockCardMetrics>div+div {
border-left: 1px solid #395364;
padding-left: 18px
}
.assetRfidPage .stageTag {
position: absolute;
right: 8px;
bottom: 8px;
background: var(--yellow);
color: #0B0B0B;
border-radius: 9px;
padding: 8px 10px;
max-width: 208px;
font-size: 10px;
font-weight: 800
}
.assetRfidPage .stageTag .ico {
width: 15px;
height: 15px;
margin-right: 4px
}
.assetRfidPage .heroVisual figcaption {
font-size: 10px;
color: #536C7D;
text-align: center;
margin-top: 14px
}
.assetRfidPage .trust {
padding: 27px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.assetRfidPage .trustLabel {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-bottom: 19px;
color: #3D596C
}
.assetRfidPage .logos {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
align-items: center
}
.assetRfidPage .logo {
height: 60px;
display: grid;
place-items: center;
padding: 8px 10px;
border: 1px solid #E8F0F5;
border-radius: 11px;
background: #fff;
overflow: hidden
}
.assetRfidPage .clientLogo {
width: 100%;
height: 40px;
object-fit: contain;
display: block;
pointer-events: none
}
.assetRfidPage .logoFallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #445E6F;
font-weight: 800;
text-align: center;
line-height: 1.2
}
.assetRfidPage .quickNav {
display: flex;
justify-content: center;
gap: 6px 25px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12px;
color: #32617B
}
.assetRfidPage .quickNav a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #B7DCEB
}
.assetRfidPage .quickNav a:hover {
color: #005F94
} .assetRfidPage .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.assetRfidPage .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
position: relative;
overflow: hidden
}
.assetRfidPage .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.assetRfidPage .outcome:nth-child(2):before {
background: var(--yellow)
}
.assetRfidPage .outcome:nth-child(3):before {
background: var(--green)
}
.assetRfidPage .outcome:nth-child(4):before {
background: var(--purple)
}
.assetRfidPage .outcome>.ico {
width: 28px;
height: 28px;
color: var(--navy);
margin-bottom: 18px
}
.assetRfidPage .outcome h3 {
font-size: 20px;
margin-bottom: 10px
}
.assetRfidPage .outcome p {
font-size: 13px;
line-height: 1.75
}
.assetRfidPage .workflow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}
.assetRfidPage .flowStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 18px;
position: relative;
padding: 23px 20px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--line)
}
.assetRfidPage .flowNumber {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--yellow);
font-size: 14px;
font-weight: 850
}
.assetRfidPage .flowStep h3 {
font-size: 19px;
margin-bottom: 9px
}
.assetRfidPage .flowStep p {
font-size: 13px
}
.assetRfidPage .flowStep:not(:last-child):after {
content: "\2192";
position: absolute;
right: -20px;
top: 37px;
color: #0076dd;
font-size: 23px;
z-index: 2
}
.assetRfidPage .workflowSection {
padding-top: 62px;
padding-bottom: 65px
}
.assetRfidPage .workflowSection .sectionHead {
margin-bottom: 28px
} .assetRfidPage .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.assetRfidPage .feature.reverse .visual {
order: -1
}
.assetRfidPage .copy>p {
color: var(--muted);
font-size: 16px;
margin-top: 18px;
line-height: 1.8
}
.assetRfidPage .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 16px;
margin-top: 23px;
list-style: none;
padding: 0
}
.assetRfidPage .fl li {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.65;
align-items: flex-start;
min-width: 0
}
.assetRfidPage .tick {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--greenbg);
color: #0B7651;
display: grid;
place-items: center;
flex: 0 0 20px;
margin-top: 1px
}
.assetRfidPage .tick .ico {
width: 12px;
height: 12px;
stroke-width: 2.2
}
.assetRfidPage details.capabilityMore {
margin-top: 21px;
background: none;
border: 0;
padding: 0;
border-radius: 0
}
.assetRfidPage .capabilityMore summary {
display: inline-flex;
gap: 9px;
align-items: center;
color: #006FA9;
font-size: 13px;
font-weight: 800;
cursor: pointer;
list-style: none;
min-height: 33px
}
.assetRfidPage .capabilityMore summary::-webkit-details-marker {
display: none
}
.assetRfidPage .capabilityMore summary::after {
content: "+";
font-size: 20px;
font-weight: 500;
line-height: 1
}
.assetRfidPage .capabilityMore[open] summary::after {
content: "\2212"
}
.assetRfidPage .capabilityMore .fl {
margin-top: 14px
}
.assetRfidPage .dark .fl {
color: #E7E7E7
}
.assetRfidPage .dark .tick {
background: var(--yellow);
color: #000
}
.assetRfidPage .dark .capabilityMore summary {
color: var(--yellow)
}
.assetRfidPage .visual {
min-width: 0;
position: relative
}
.assetRfidPage .visualInner {
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .15), transparent 28%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 24px;
position: relative;
overflow: hidden
}
.assetRfidPage .visual figcaption {
font-size: 10px;
line-height: 1.65;
text-align: center;
margin-top: 11px;
color: #526C80
}
.assetRfidPage .appWindow {
background: #fff;
border: 1px solid #C5DDE9;
border-radius: 13px;
overflow: hidden
}
.assetRfidPage .appBar {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 14px;
background: #fff;
border-bottom: 1px solid var(--line);
min-width: 0
}
.assetRfidPage .appBar strong {
font-size: 11px;
color: #183C53
}
.assetRfidPage .appMark {
display: grid;
place-items: center;
background: var(--sky);
width: 25px;
height: 25px;
border-radius: 7px;
color: #007FC5
}
.assetRfidPage .appMark .ico {
width: 15px;
height: 15px
}
.assetRfidPage .windowDots {
margin-left: auto;
display: flex;
gap: 4px
}
.assetRfidPage .windowDots i {
width: 4px;
height: 4px;
background: #BCCFD9;
border-radius: 50%
}
.assetRfidPage .appBody {
padding: 18px
}
.assetRfidPage .appSub {
font-size: 10px;
color: #617A8C;
margin-bottom: 14px
}
.assetRfidPage .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
padding: 5px 7px;
border-radius: 6px;
background: #EEF5F9;
color: #375E75;
vertical-align: middle
}
.assetRfidPage .badge.green {
background: var(--greenbg);
color: #0B704D
}
.assetRfidPage .badge.yellow {
background: var(--yellowsoft);
color: #695000
}
.assetRfidPage .badge.blue {
background: #E4F6FF;
color: #006799
}
.assetRfidPage .badge.red {
background: #FFF0F0;
color: #A23D3D
}
.assetRfidPage .badge.darkBadge {
background: #203C4F;
color: #E4F3FC
}
.assetRfidPage .progress {
height: 7px;
background: #E4EEF4;
border-radius: 8px;
overflow: hidden;
margin: 14px 0
}
.assetRfidPage .progress span {
height: 100%;
background: var(--brand2);
display: block;
border-radius: inherit
}
.assetRfidPage .appHeading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
margin-bottom: 14px
}
.assetRfidPage .appHeading>strong {
font-size: 15px;
line-height: 1.3;
color: #143C55
}
.assetRfidPage .appHeading small {
font-size: 10px;
color: var(--muted);
display: block
}
.assetRfidPage .miniTabs {
display: flex;
gap: 17px;
font-size: 10px;
color: #597488;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
margin-bottom: 17px
}
.assetRfidPage .miniTabs .active {
color: #006FA9;
font-weight: 800;
position: relative
}
.assetRfidPage .miniTabs .active:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -11px;
border-bottom: 2px solid #007FC5
}
.assetRfidPage .lightNote {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #466B81;
background: #F3F9FC;
border: 1px solid #DCEAF2;
padding: 10px;
border-radius: 8px;
margin-top: 14px
}
.assetRfidPage .lightNote .ico {
width: 16px;
height: 16px;
color: #007FC5
}
.assetRfidPage .inlineNotice {
display: flex;
gap: 9px;
align-items: flex-start;
background: #FFF8E0;
border: 1px solid #F1E1AF;
border-radius: 9px;
padding: 11px;
font-size: 10px;
line-height: 1.65;
color: #665014;
margin-top: 14px
}
.assetRfidPage .inlineNotice .ico {
width: 17px;
height: 17px;
color: #8A680F;
margin-top: 1px
}
.assetRfidPage .subLabel {
font-size: 10px;
font-weight: 800;
color: #456579;
display: block;
margin-bottom: 10px
} .assetRfidPage .mapLabel {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
color: #4B6E84
}
.assetRfidPage .binGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px
}
.assetRfidPage .bin {
border: 1px solid #C8DEE9;
background: #F7FBFD;
border-radius: 8px;
padding: 12px 10px;
min-width: 0
}
.assetRfidPage .bin.selected {
border: 2px solid #008CCF;
background: #EAF8FF;
padding: 11px 9px
}
.assetRfidPage .bin strong {
font-size: 11px;
display: block;
color: #17455E
}
.assetRfidPage .bin small {
font-size: 9px;
color: #58758A;
display: block;
margin-top: 6px
}
.assetRfidPage .binStock {
display: flex;
gap: 4px;
align-items: flex-end;
height: 23px;
margin-top: 9px
}
.assetRfidPage .binStock span {
width: 14px;
height: 17px;
background: #A6D9F0;
border: 1px solid #6DB4D8;
border-radius: 2px;
position: relative
}
.assetRfidPage .binStock span:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: white;
top: 4px;
left: 4px
}
.assetRfidPage .bin.selected .binStock span {
background: #FFC928;
border-color: #D7AE36
}
.assetRfidPage .stockRecord {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 0 0;
margin-top: 15px;
border-top: 1px solid var(--line)
}
.assetRfidPage .stockRecord>.ico {
width: 37px;
height: 37px;
padding: 7px;
background: #EAF8FF;
border-radius: 9px;
color: #007FC5
}
.assetRfidPage .stockRecord strong {
font-size: 12px;
display: block
}
.assetRfidPage .stockRecord small {
font-size: 9px;
color: var(--muted);
display: block
}
.assetRfidPage .stockRecord>.badge {
margin-left: auto
}
.assetRfidPage .miniMeta {
display: flex;
gap: 17px;
flex-wrap: wrap;
margin-top: 13px;
font-size: 9px;
color: #587489
} .assetRfidPage .receivingPicture {
height: 167px;
position: relative;
margin: -18px -18px 16px;
border-bottom: 1px solid var(--line);
background: #F0F9FD
}
.assetRfidPage .receivingPicture img {
width: 100%;
height: 100%;
object-fit: contain
}
.assetRfidPage .metricsThree {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px
}
.assetRfidPage .metricBox {
border: 1px solid var(--line);
border-radius: 9px;
padding: 11px;
min-width: 0
}
.assetRfidPage .metricBox strong {
font-size: 25px;
letter-spacing: -.04em;
line-height: 1.1;
color: #0D3B55;
display: block
}
.assetRfidPage .metricBox span {
font-size: 9px;
color: #587487;
display: block;
margin-top: 6px
}
.assetRfidPage .metricBox.warn {
background: #FFF8E2;
border-color: #EDDDAA
}
.assetRfidPage .metricBox.warn strong {
color: #80600C
}
.assetRfidPage .miniTable {
width: 100%;
border-collapse: collapse;
font-size: 10px
}
.assetRfidPage .miniTable :where(th, td) {
text-align: left;
padding: 10px 6px;
border-bottom: 1px solid #E4EEF4;
vertical-align: middle
}
.assetRfidPage .miniTable th {
font-size: 9px;
color: #526F82;
font-weight: 700
}
.assetRfidPage .miniTable td {
color: #2B5067
}
.assetRfidPage .miniTable td:first-child {
font-weight: 700
}
.assetRfidPage .miniTable tr:last-child td {
border-bottom: 0
}
.assetRfidPage .miniTable small {
display: block;
color: #607A8D;
font-size: 8px;
font-weight: 400
}
.assetRfidPage .miniTable .badge {
font-size: 8px;
padding: 4px 5px
}
.assetRfidPage .auditLayout {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 13px;
align-items: center
}
.assetRfidPage .auditDevice {
min-width: 0;
overflow: hidden
}
.assetRfidPage .auditDevice img {
width: 175%;
max-width: none;
margin-left: -37%;
height: 295px;
object-fit: contain
}
.assetRfidPage .auditDevice span {
display: block;
text-align: center;
color: #44697E;
font-size: 10px;
font-weight: 700
}
.assetRfidPage .auditCard {
padding: 19px 15px;
border-radius: 13px;
border: 1px solid #BBD9E9;
background: #fff;
min-width: 0
}
.assetRfidPage .auditCard h3 {
font-size: 17px;
margin-top: 13px
}
.assetRfidPage .auditSubtitle {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px
}
.assetRfidPage .auditCount {
display: block;
font-size: 42px;
letter-spacing: -.04em;
color: var(--navy);
line-height: 1.1;
margin-top: 17px
}
.assetRfidPage .auditCount small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted)
}
.assetRfidPage .auditLine {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 10px;
border-bottom: 1px solid #E3EEF4;
padding: 9px 0
}
.assetRfidPage .auditLine:last-child {
border-bottom: 0
}
.assetRfidPage .auditLine span {
display: flex;
gap: 6px;
align-items: center
}
.assetRfidPage .miniDot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
background: #007FC5
}
.assetRfidPage .miniDot.amber {
background: #BC8F11
}
.assetRfidPage .miniDot.red {
background: #CB5E54
}
.assetRfidPage .locator {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
background: #fff;
border: 1px solid #CEE4EF;
border-radius: 11px;
padding: 14px
}
.assetRfidPage .locator .ico {
color: #0076dd;
width: 27px;
height: 27px
}
.assetRfidPage .locator strong {
display: block;
font-size: 11px
}
.assetRfidPage .locator small {
font-size: 9px;
display: block;
color: var(--muted)
}
.assetRfidPage .signal {
display: flex;
align-items: flex-end;
gap: 3px;
margin-left: auto;
height: 23px
}
.assetRfidPage .signal i {
width: 4px;
border-radius: 2px;
background: #007FC5
}
.assetRfidPage .signal i:nth-child(1) {
height: 7px
}
.assetRfidPage .signal i:nth-child(2) {
height: 11px
}
.assetRfidPage .signal i:nth-child(3) {
height: 16px
}
.assetRfidPage .signal i:nth-child(4) {
height: 21px
}
.assetRfidPage .signal i:nth-child(5) {
height: 23px;
background: #D3E5EF
} .assetRfidPage .transferRoute {
display: grid;
grid-template-columns: 1fr 49px 1fr;
gap: 9px;
align-items: center;
margin-bottom: 16px
}
.assetRfidPage .routeStop {
border: 1px solid #CBE0EB;
border-radius: 10px;
padding: 15px 9px;
text-align: center;
background: #F5FAFD
}
.assetRfidPage .routeStop>.ico {
width: 34px;
height: 34px;
color: #0076dd;
margin-bottom: 9px
}
.assetRfidPage .routeStop strong {
display: block;
font-size: 12px
}
.assetRfidPage .routeStop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
.assetRfidPage .routeArrow {
display: flex;
flex-direction: column;
align-items: center;
font-size: 8px;
color: #536E82;
gap: 6px
}
.assetRfidPage .routeArrow .ico {
width: 25px;
color: #007FC5
}
.assetRfidPage .timeline {
list-style: none;
padding: 0;
margin-top: 17px
}
.assetRfidPage .timeline li {
display: grid;
grid-template-columns: 23px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 17px;
position: relative;
font-size: 10px
}
.assetRfidPage .timeline li:not(:last-child):before {
content: "";
position: absolute;
border-left: 1px solid #BBD4E2;
left: 10px;
top: 24px;
bottom: 3px
}
.assetRfidPage .timeline .timelineDot {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--greenbg);
border-radius: 50%;
color: #0B7651
}
.assetRfidPage .timeline .timelineDot .ico {
width: 13px;
height: 13px
}
.assetRfidPage .timeline .timelineDot.pending {
color: #83650B;
background: #FFF3C9
}
.assetRfidPage .timeline strong {
font-size: 11px;
display: block
}
.assetRfidPage .timeline small {
font-size: 9px;
color: var(--muted);
display: block
}
.assetRfidPage .timeline time {
font-size: 9px;
color: var(--muted);
padding-top: 2px
}
.assetRfidPage .timeline li:last-child {
padding-bottom: 0
}
.assetRfidPage .levelChart {
padding: 18px;
border: 1px solid #D6E7F0;
border-radius: 10px;
background: #F7FBFD;
margin-top: 15px
}
.assetRfidPage .levelLabels {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 9px;
color: #607C8F;
margin-bottom: 13px
}
.assetRfidPage .stockLevel {
height: 27px;
border-radius: 5px;
background: #E4EFF5;
position: relative;
margin-bottom: 10px
}
.assetRfidPage .stockLevel>span {
display: block;
width: 36%;
height: 100%;
background: var(--yellow);
border-radius: 5px
}
.assetRfidPage .stockLevel:after {
content: "";
position: absolute;
left: 50%;
top: -5px;
bottom: -5px;
border-left: 2px dashed #174964
}
.assetRfidPage .stockLevelNote {
font-size: 9px;
color: #385D73;
line-height: 1.6
}
.assetRfidPage .purchaseRequest {
border: 1px solid #BBD9E9;
border-radius: 11px;
background: #fff;
padding: 15px;
margin-top: 16px;
display: grid;
grid-template-columns: 33px 1fr auto;
gap: 10px;
align-items: center
}
.assetRfidPage .purchaseRequest>.ico {
color: #0076dd;
background: #EAF8FF;
padding: 7px;
box-sizing: content-box;
width: 19px;
height: 19px;
border-radius: 9px
}
.assetRfidPage .purchaseRequest strong {
font-size: 11px;
display: block
}
.assetRfidPage .purchaseRequest small {
font-size: 9px;
color: var(--muted);
display: block
}
.assetRfidPage .purchaseRequest .qty {
font-size: 24px;
color: var(--navy);
letter-spacing: -.04em
}
.assetRfidPage .ownershipSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 17px
}
.assetRfidPage .ownerCard {
border: 1px solid #CDE2ED;
background: #F8FCFE;
border-radius: 10px;
padding: 14px
}
.assetRfidPage .ownerCard strong {
font-size: 26px;
line-height: 1.1;
letter-spacing: -.04em;
display: block;
color: var(--navy)
}
.assetRfidPage .ownerCard span {
display: block;
font-size: 9px;
margin-top: 6px;
color: var(--muted)
}
.assetRfidPage .ownerCard.vendor {
background: #FFF9E9;
border-color: #F0E0AF
}
.assetRfidPage .exportStrip {
display: flex;
gap: 6px;
align-items: center;
font-size: 9px;
color: #58788C;
border-top: 1px solid var(--line);
padding-top: 13px;
margin-top: 10px;
flex-wrap: wrap
}
.assetRfidPage .exportStrip .ico {
width: 14px;
height: 14px
}
.assetRfidPage .exportStrip span {
margin-left: auto
}
.assetRfidPage .exportStrip b {
font-weight: 600;
padding: 3px 6px;
background: #F5FAFD;
border: 1px solid #D3E6F1;
border-radius: 4px
} .assetRfidPage .aiGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 50px;
align-items: center
}
.assetRfidPage .aiGrid>.copy>p {
color: #D6D6D6
}
.assetRfidPage .promptBox {
border: 1px solid #354149;
border-radius: 18px;
background: #111920;
padding: 22px;
min-width: 0
}
.assetRfidPage .aiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px
}
.assetRfidPage .aiBrand {
display: flex;
align-items: center;
gap: 9px
}
.assetRfidPage .aiBrand>.ico {
color: var(--yellow);
width: 26px;
height: 26px
}
.assetRfidPage .aiBrand strong {
font-size: 16px;
letter-spacing: .02em
}
.assetRfidPage .aiTop>span {
font-size: 9px;
color: #BBCCD7
}
.assetRfidPage .question {
border: 1px solid #344653;
border-radius: 11px 11px 2px 11px;
background: #21303B;
padding: 14px;
margin-left: 33px;
color: #F1F5F8;
font-size: 13px
}
.assetRfidPage .aiAnswer {
background: #fff;
color: var(--ink);
padding: 19px;
border-radius: 12px;
margin-top: 15px
}
.assetRfidPage .aiAnswer .answerTitle {
font-size: 14px;
line-height: 1.45;
display: block;
color: #123C55;
margin-bottom: 8px
}
.assetRfidPage .aiAnswer p {
font-size: 11px;
color: #587387;
line-height: 1.7
}
.assetRfidPage .aiItem {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid #D6E5EF;
border-radius: 9px;
background: #F8FBFD;
padding: 12px;
margin-top: 13px
}
.assetRfidPage .aiItem strong {
display: block;
font-size: 12px
}
.assetRfidPage .aiItem small {
font-size: 9px;
color: #607789;
display: block;
margin-top: 3px
}
.assetRfidPage .aiItem>.badge {
font-size: 9px
}
.assetRfidPage .sourceChip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 7px;
border: 1px solid #D1E3ED;
border-radius: 5px;
font-size: 9px;
color: #456C83;
margin-top: 13px
}
.assetRfidPage .sourceChip .ico {
width: 12px;
height: 12px
}
.assetRfidPage .aiReview {
font-size: 10px !important;
color: #CCDAE4 !important;
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 16px
}
.assetRfidPage .aiReview .ico {
width: 16px;
height: 16px;
color: var(--yellow);
margin-top: 2px
}
.assetRfidPage .aiSample {
font-size: 10px;
color: #BDC9D3;
text-align: center;
margin-top: 12px
}
.assetRfidPage .aiScope {
font-size: 11px !important;
color: #B9C7D0 !important;
border-top: 1px solid #35434E;
padding-top: 16px;
margin-top: 22px !important;
line-height: 1.7 !important
} .assetRfidPage .cta {
margin-top: 30px;
padding: 24px 27px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.assetRfidPage .cta h3 {
font-size: 21px
}
.assetRfidPage .cta p {
font-size: 13px;
margin-top: 7px;
max-width: 660px
}
.assetRfidPage .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.assetRfidPage .ctaSection {
padding: 0 0 64px;
background: var(--sky2)
} .assetRfidPage .connectedGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px
}
.assetRfidPage .connectedCard {
background: #151515;
border: 1px solid #333;
border-radius: 15px;
padding: 24px
}
.assetRfidPage .connectedCard>.ico {
color: var(--yellow);
width: 27px;
height: 27px;
margin-bottom: 20px
}
.assetRfidPage .connectedCard h3 {
font-size: 21px;
margin-bottom: 11px;
color: #fff
}
.assetRfidPage .connectedCard p {
font-size: 13px;
line-height: 1.8;
color: #CFCFCF
}
.assetRfidPage .connectedCard a {
display: inline-block;
color: var(--yellow);
font-size: 12px;
font-weight: 750;
margin-top: 15px;
text-decoration: underline;
text-underline-offset: 4px
}
.assetRfidPage .hardwareGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}
.assetRfidPage .hardwareCard {
border: 1px solid #CDE3ED;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0
}
.assetRfidPage .hardwareImage {
width: 100%;
height: 195px;
object-fit: contain;
background: #F0F9FD;
border-bottom: 1px solid var(--line)
}
.assetRfidPage .hardwareCopy {
padding: 23px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column
}
.assetRfidPage .hardwareCopy h3 {
font-size: 21px;
margin: 13px 0 10px
}
.assetRfidPage .hardwareCopy p {
font-size: 13px;
line-height: 1.75
}
.assetRfidPage .hardwareCopy .bestFor {
font-size: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px;
color: #355971
}
.assetRfidPage .hardwareNote {
font-size: 12px;
line-height: 1.8;
margin-top: 22px;
padding: 18px 21px;
border: 1px solid #CDE3EE;
border-left: 4px solid var(--yellow);
border-radius: 11px;
background: #F7FBFD
}
.assetRfidPage .hardwareNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.assetRfidPage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.assetRfidPage .integration {
height: 87px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 10px;
color: #183E56;
min-width: 0;
line-height: 1.3
}
.assetRfidPage .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.assetRfidPage .integration small {
font-size: 9px;
color: #60788A;
margin-top: 6px;
font-weight: 500
}
.assetRfidPage .integrationFlow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
align-items: center;
gap: 13px;
background: #0C2333;
padding: 23px;
border-radius: 15px;
margin-top: 23px;
color: #fff
}
.assetRfidPage .integrationFlow>div {
min-width: 0
}
.assetRfidPage .integrationFlow strong {
font-size: 14px;
display: block;
line-height: 1.4;
color: #fff
}
.assetRfidPage .integrationFlow small {
font-size: 10px;
color: #C1D5E2;
display: block;
margin-top: 5px
}
.assetRfidPage .integrationFlow>.ico {
color: var(--yellow);
width: 26px;
height: 26px
}
.assetRfidPage .integrationNote {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 19px auto 0 !important;
max-width: 950px;
text-align: center
}
.assetRfidPage .integrationNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.assetRfidPage .rolloutGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 23px;
margin-top: 32px
}
.assetRfidPage .rolloutStep {
border-top: 1px solid #BAD7E8;
padding-top: 19px
}
.assetRfidPage .rolloutNumber {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--yellowsoft);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
margin-bottom: 17px
}
.assetRfidPage .rolloutStep h3 {
font-size: 20px;
margin-bottom: 11px
}
.assetRfidPage .rolloutStep p {
font-size: 13px;
line-height: 1.8
}
.assetRfidPage .pilotMeasures {
display: flex;
gap: 14px 23px;
align-items: center;
flex-wrap: wrap;
background: #EFF8FD;
border: 1px solid #CEE4F0;
border-radius: 11px;
padding: 17px 21px;
margin-top: 27px;
font-size: 11px;
color: #40677F
}
.assetRfidPage .pilotMeasures strong {
font-size: 12px;
color: #173F57
}
.assetRfidPage .pilotMeasures span {
display: flex;
align-items: center;
gap: 6px
}
.assetRfidPage .pilotMeasures .ico {
width: 14px;
height: 14px
} .assetRfidPage .faq {
max-width: 900px
}
.assetRfidPage .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.assetRfidPage .faq summary {
font-size: 15px;
font-weight: 800;
cursor: pointer;
color: var(--navy);
line-height: 1.65
}
.assetRfidPage .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 11px;
line-height: 1.85
}
.assetRfidPage .faq details p a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 3px
}
.assetRfidPage .faq details:last-child {
margin-bottom: 0
}
.assetRfidPage .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 43px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center
}
.assetRfidPage .final h2 {
color: #fff;
font-size: 39px
}
.assetRfidPage .final p {
color: #DDD;
margin-top: 15px;
max-width: 720px;
font-size: 16px
}
.assetRfidPage .final .ctaBtns {
flex-direction: column
}
.assetRfidPage .final .btn.outline {
background: transparent;
border-color: #666;
color: #fff
}
.assetRfidPage .final .btn.outline:hover {
background: #303030
}
.assetRfidPage .contactRow {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 23px;
font-size: 12px;
color: #5B7588;
align-items: center
}
.assetRfidPage .contactRow a {
color: #006FA9;
font-weight: 700;
display: flex;
gap: 7px;
align-items: center
}
.assetRfidPage .contactRow .ico {
width: 16px;
height: 16px
}
.assetRfidPage .pageFooter {
padding: 25px 0;
border-top: 1px solid var(--line);
background: #F7FBFD
}
.assetRfidPage .footerRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 11px;
flex-wrap: wrap;
color: #4E6D80
}
.assetRfidPage .footerRow strong {
font-size: 16px;
letter-spacing: -.03em;
color: #163F59
}
.assetRfidPage .footerLinks {
display: flex;
gap: 20px;
flex-wrap: wrap
}
.assetRfidPage .footerLinks a {
text-decoration: underline;
text-underline-offset: 4px
}
@media(min-width:1600px) { }
@media(max-width:1100px) {
.assetRfidPage .heroGrid {
gap: 27px;
grid-template-columns: 1fr 1fr
} .assetRfidPage .coldStage {
height: 540px
}
.assetRfidPage .conditionPanel {
width: 192px;
top: 91px
}
.assetRfidPage .heroColdCard {
width: 228px;
padding: 15px
}
.assetRfidPage .stageTag {
max-width: 182px;
font-size: 9px;
right: 0
}
.assetRfidPage .coldScene {
height: 397px
}
.assetRfidPage .feature,
.assetRfidPage .aiGrid {
gap: 33px
}
.assetRfidPage .visualInner {
padding: 18px
}
.assetRfidPage .logos {
gap: 8px
}
.assetRfidPage .logo {
padding: 8px
}
.assetRfidPage .outcome {
padding: 23px 19px
}
.assetRfidPage .hardwareCopy {
padding: 20px
}
.assetRfidPage .hardwareImage {
height: 172px
}
.assetRfidPage .flowStep {
grid-template-columns: 37px 1fr;
gap: 12px;
padding: 20px 17px
}
.assetRfidPage .flowNumber {
width: 34px;
height: 34px
}
.assetRfidPage .flowStep h3 {
font-size: 18px
}
.assetRfidPage .fl {
gap: 12px
}
.assetRfidPage .fl li {
font-size: 12px
}
.assetRfidPage .appBody {
padding: 15px
}
.assetRfidPage .receivingPicture {
margin: -15px -15px 15px
}
.assetRfidPage .auditCard {
padding: 17px 12px
}
.assetRfidPage .auditDevice img {
height: 270px
}
.assetRfidPage .auditCount {
font-size: 36px
}
.assetRfidPage .integration {
font-size: 13px
}
}
@media(max-width:960px) {
.assetRfidPage section {
padding: 63px 0
}
.assetRfidPage .hero {
padding: 25px 0 51px
}
.assetRfidPage .heroGrid,
.assetRfidPage .feature,
.assetRfidPage .aiGrid,
.assetRfidPage .final {
grid-template-columns: 1fr
}
.assetRfidPage .heroGrid {
gap: 31px
}
.assetRfidPage h1 { max-width: 780px
}
.assetRfidPage .lead {
max-width: 690px
}
.assetRfidPage .heroVisual {
width: 100%;
max-width: 610px;
margin: auto
}
.assetRfidPage .coldStage {
height: 560px
}
.assetRfidPage .coldScene {
height: 440px
}
.assetRfidPage .conditionPanel {
width: 224px;
top: 78px
}
.assetRfidPage .heroColdCard {
width: 279px
}
.assetRfidPage .stageTag {
max-width: none;
right: 7px;
font-size: 10px
}
.assetRfidPage .feature.reverse .visual {
order: 0
}
.assetRfidPage .feature>.visual {
max-width: 650px;
width: 100%;
margin: auto
}
.assetRfidPage .feature .copy {
max-width: 780px
}
.assetRfidPage .feature h2 {
max-width: 760px;
font-size: 40px
}
.assetRfidPage .visualInner {
padding: 26px
}
.assetRfidPage .fl li {
font-size: 13px
}
.assetRfidPage .fl {
max-width: 710px;
gap: 14px 20px
}
.assetRfidPage .feature,
.assetRfidPage .aiGrid {
gap: 32px
}
.assetRfidPage .appBody {
padding: 20px
}
.assetRfidPage .receivingPicture {
height: 185px;
margin: -20px -20px 17px
}
.assetRfidPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 12px
}
.assetRfidPage .outcomes {
grid-template-columns: repeat(2, 1fr)
}
.assetRfidPage .workflow {
gap: 16px
}
.assetRfidPage .flowStep {
grid-template-columns: 1fr;
padding: 20px
}
.assetRfidPage .flowStep:not(:last-child):after {
right: -16px;
top: 28px
}
.assetRfidPage .promptBox {
max-width: 660px;
width: 100%;
margin: auto;
padding: 25px
}
.assetRfidPage .aiVisual {
max-width: 660px;
width: 100%;
margin: auto
}
.assetRfidPage .aiScope {
max-width: 760px
}
.assetRfidPage .auditLayout {
grid-template-columns: .85fr 1.15fr;
gap: 20px
}
.assetRfidPage .auditDevice img {
height: 320px
}
.assetRfidPage .auditCard {
padding: 22px
}
.assetRfidPage .auditCount {
font-size: 45px
}
.assetRfidPage .auditLine {
font-size: 12px
}
.assetRfidPage .auditSubtitle {
font-size: 10px
}
.assetRfidPage .auditCard h3 {
font-size: 20px
}
.assetRfidPage .appBar strong {
font-size: 12px
}
.assetRfidPage .appHeading>strong {
font-size: 17px
}
.assetRfidPage .miniTable {
font-size: 11px
}
.assetRfidPage .miniTable th {
font-size: 10px
}
.assetRfidPage .bin strong {
font-size: 12px
}
.assetRfidPage .bin small {
font-size: 10px
}
.assetRfidPage .cta {
align-items: flex-start;
flex-direction: column
}
.assetRfidPage .connectedGrid {
gap: 12px
}
.assetRfidPage .connectedCard {
padding: 21px
}
.assetRfidPage .connectedCard h3 {
font-size: 19px
}
.assetRfidPage .hardwareGrid {
grid-template-columns: 1fr;
gap: 18px
}
.assetRfidPage .hardwareCard {
display: grid;
grid-template-columns: .85fr 1.15fr
}
.assetRfidPage .hardwareImage {
height: 100%;
min-height: 215px;
object-fit: contain;
border-right: 1px solid var(--line);
border-bottom: 0
}
.assetRfidPage .hardwareCopy {
padding: 24px
}
.assetRfidPage .integrationGrid {
grid-template-columns: repeat(3, 1fr)
}
.assetRfidPage .integration {
font-size: 15px
}
.assetRfidPage .rolloutGrid {
grid-template-columns: repeat(2, 1fr);
gap: 27px
}
.assetRfidPage .final .ctaBtns {
flex-direction: row
}
.assetRfidPage .final {
padding: 35px
}
.assetRfidPage .final h2 {
max-width: 690px
}
.assetRfidPage .quickNav {
margin-top: 23px
}
.assetRfidPage .trust {
padding: 26px 0
}
.assetRfidPage .hero .breadcrumb {
margin-bottom: 27px
}
}
@media(max-width:640px) {
.assetRfidPage {
font-size: 15px
}
.assetRfidPage .wrap {
width: calc(100% - 32px)
}
.assetRfidPage section {
padding: 52px 0
}
.assetRfidPage .hero {
padding: 22px 0 39px
} .assetRfidPage h2,
.assetRfidPage .feature h2 {
font-size: 33px;
line-height: 1.16
}
.assetRfidPage h3 {
font-size: 20px
}
.assetRfidPage .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.assetRfidPage .ey .ico {
width: 14px;
height: 14px
}
.assetRfidPage .lead {
font-size: 16px;
margin-top: 18px
}
.assetRfidPage .actions {
gap: 9px;
margin-top: 23px
}
.assetRfidPage .actions .btn {
font-size: 12px;
padding: 12px 14px;
gap: 7px
}
.assetRfidPage .actions .btn .ico {
width: 15px;
height: 15px
}
.assetRfidPage .heroPills {
gap: 6px;
margin-top: 17px
}
.assetRfidPage .heroPills span {
font-size: 9px;
padding: 5px 8px
}
.assetRfidPage .micro {
font-size: 10px;
margin-top: 13px
}
.assetRfidPage .breadcrumb {
font-size: 8px;
gap: 4px;
margin-bottom: 24px
}
.assetRfidPage .breadcrumb .ico {
width: 9px;
height: 9px
}
.assetRfidPage .heroGrid {
gap: 24px
}
.assetRfidPage .coldStage {
height: 530px;
max-width: 410px
}
.assetRfidPage .coldScene {
top: 10px;
left: -23px;
width: 110%;
max-width: none;
height: 340px
}
.assetRfidPage .stageLabel {
top: 0;
left: 0;
padding: 8px 10px;
font-size: 9px
}
.assetRfidPage .stageLabel .ico {
width: 15px;
height: 15px
}
.assetRfidPage .conditionPanel {
width: 175px;
top: 65px;
right: -1px;
border-radius: 23px;
padding: 6px
}
.assetRfidPage .phoneScreen {
min-height: 0;
border-radius: 17px
}
.assetRfidPage .phoneNotch {
height: 15px
}
.assetRfidPage .phoneHead {
padding: 10px
}
.assetRfidPage .phoneHead strong {
font-size: 10px
}
.assetRfidPage .phoneHead small {
font-size: 8px
}
.assetRfidPage .phoneBody {
padding: 10px
}
.assetRfidPage .phoneBody>.badge {
font-size: 8px
}
.assetRfidPage .scanStatus {
gap: 8px;
margin-top: 12px
}
.assetRfidPage .scanStatus>.ico {
width: 25px;
height: 25px
}
.assetRfidPage .scanStatus strong {
font-size: 25px
}
.assetRfidPage .scanStatus small {
font-size: 8px
}
.assetRfidPage .phoneLine {
font-size: 9px;
padding: 7px 0
}
.assetRfidPage .phoneAlert {
font-size: 8px;
padding: 7px;
margin-top: 10px
}
.assetRfidPage .phoneBody .progress {
margin: 10px 0;
height: 5px
}
.assetRfidPage .heroColdCard {
width: 184px;
padding: 13px;
bottom: 10px;
left: 0;
border-radius: 12px
}
.assetRfidPage .stockCardHead {
font-size: 8px;
margin-bottom: 11px
}
.assetRfidPage .stockCardHead .ico {
width: 15px;
height: 15px
}
.assetRfidPage .stockCardMetrics {
gap: 7px
}
.assetRfidPage .stockCardMetrics strong {
font-size: 24px
}
.assetRfidPage .stockCardMetrics span {
font-size: 8px
}
.assetRfidPage .stockCardMetrics>div+div {
padding-left: 12px
}
.assetRfidPage .stageTag {
right: 0;
bottom: 3px;
font-size: 8px;
max-width: 140px;
line-height: 1.7;
padding: 7px 9px
}
.assetRfidPage .stageTag .ico {
width: 12px;
height: 12px
}
.assetRfidPage .heroVisual figcaption {
font-size: 9px;
margin-top: 12px
}
.assetRfidPage .trustLabel {
font-size: 11px;
padding-inline: 10px
}
.assetRfidPage .logos {
grid-template-columns: repeat(4, 1fr);
gap: 8px
}
.assetRfidPage .logo {
height: 52px;
padding: 6px
}
.assetRfidPage .clientLogo {
height: 35px
}
.assetRfidPage .logoFallback {
font-size: 9px
}
.assetRfidPage .quickNav {
gap: 10px 17px;
font-size: 11px;
justify-content: flex-start;
line-height: 1.4;
margin-top: 24px
}
.assetRfidPage .outcomes {
gap: 12px
}
.assetRfidPage .outcome {
padding: 20px 16px
}
.assetRfidPage .outcome h3 {
font-size: 18px;
line-height: 1.18
}
.assetRfidPage .outcome p {
font-size: 12px;
line-height: 1.7
}
.assetRfidPage .outcome>.ico {
width: 25px;
height: 25px;
margin-bottom: 15px
}
.assetRfidPage .sectionHead {
margin-bottom: 28px
}
.assetRfidPage .sectionHead p {
font-size: 15px;
margin-top: 15px
}
.assetRfidPage .workflow {
grid-template-columns: 1fr;
gap: 12px
}
.assetRfidPage .flowStep {
grid-template-columns: 39px 1fr;
padding: 21px;
gap: 16px
}
.assetRfidPage .flowStep:not(:last-child):after {
display: none
}
.assetRfidPage .flowNumber {
width: 37px;
height: 37px;
font-size: 13px
}
.assetRfidPage .flowStep h3 {
font-size: 19px
}
.assetRfidPage .flowStep p {
font-size: 13px
}
.assetRfidPage .copy>p {
font-size: 15px;
line-height: 1.8;
margin-top: 16px
}
.assetRfidPage .fl {
gap: 13px 12px
}
.assetRfidPage .fl li {
font-size: 12px;
gap: 7px
}
.assetRfidPage .tick {
width: 18px;
height: 18px;
flex-basis: 18px;
margin-top: 1px
}
.assetRfidPage .tick .ico {
width: 10px;
height: 10px
}
.assetRfidPage .capabilityMore summary {
font-size: 12px;
min-height: 40px
}
.assetRfidPage .capabilityMore {
margin-top: 18px !important
}
.assetRfidPage .visualInner {
padding: 15px;
border-radius: 17px
}
.assetRfidPage .visual figcaption {
font-size: 9px;
margin-top: 9px
}
.assetRfidPage .feature {
gap: 25px
}
.assetRfidPage .appBar {
padding: 10px 11px;
gap: 7px
}
.assetRfidPage .appBar strong {
font-size: 10px
}
.assetRfidPage .appMark {
width: 23px;
height: 23px
}
.assetRfidPage .appMark .ico {
width: 13px;
height: 13px
}
.assetRfidPage .appBody {
padding: 14px
}
.assetRfidPage .appSub {
font-size: 9px;
margin-bottom: 12px
}
.assetRfidPage .appHeading {
gap: 7px;
margin-bottom: 12px
}
.assetRfidPage .appHeading>strong {
font-size: 14px
}
.assetRfidPage .badge {
font-size: 8px;
padding: 4px 6px
}
.assetRfidPage .miniTabs {
font-size: 9px;
gap: 14px;
margin-bottom: 14px
}
.assetRfidPage .mapLabel {
font-size: 9px;
margin-bottom: 10px
}
.assetRfidPage .binGrid {
gap: 7px
}
.assetRfidPage .bin {
padding: 10px 7px
}
.assetRfidPage .bin.selected {
padding: 9px 6px
}
.assetRfidPage .bin strong {
font-size: 10px
}
.assetRfidPage .bin small {
font-size: 8px
}
.assetRfidPage .binStock {
gap: 3px;
height: 20px;
margin-top: 7px
}
.assetRfidPage .binStock span {
width: 11px;
height: 15px
}
.assetRfidPage .binStock span:after {
left: 3px;
width: 3px;
height: 3px
}
.assetRfidPage .stockRecord {
gap: 9px;
flex-wrap: wrap
}
.assetRfidPage .stockRecord>.ico {
width: 30px;
height: 30px;
padding: 6px
}
.assetRfidPage .stockRecord strong {
font-size: 10px
}
.assetRfidPage .stockRecord small {
font-size: 8px
}
.assetRfidPage .stockRecord>.badge {
font-size: 8px
}
.assetRfidPage .miniMeta {
gap: 5px 12px;
font-size: 8px
}
.assetRfidPage .lightNote {
font-size: 9px;
gap: 7px;
padding: 9px
}
.assetRfidPage .lightNote .ico {
width: 14px;
height: 14px
}
.assetRfidPage .receivingPicture {
height: 149px;
margin: -14px -14px 14px
}
.assetRfidPage .metricsThree {
gap: 7px
}
.assetRfidPage .metricBox {
padding: 10px 8px
}
.assetRfidPage .metricBox strong {
font-size: 23px
}
.assetRfidPage .metricBox span {
font-size: 8px
}
.assetRfidPage .miniTable {
font-size: 9px;
line-height: 1.5
}
.assetRfidPage .miniTable th {
font-size: 8px
}
.assetRfidPage .miniTable :where(th, td) {
padding: 9px 4px
}
.assetRfidPage .miniTable small {
font-size: 8px
}
.assetRfidPage .miniTable .badge {
font-size: 7px;
padding: 3px 4px
}
.assetRfidPage .inlineNotice {
font-size: 9px;
padding: 10px;
gap: 7px
}
.assetRfidPage .inlineNotice .ico {
width: 15px;
height: 15px
}
.assetRfidPage .auditLayout {
gap: 10px;
grid-template-columns: .76fr 1.24fr
}
.assetRfidPage .auditDevice img {
height: 278px;
width: 195%;
margin-left: -50%
}
.assetRfidPage .auditDevice span {
font-size: 8px
}
.assetRfidPage .auditCard {
padding: 17px 12px
}
.assetRfidPage .auditCard h3 {
font-size: 16px;
margin-top: 12px
}
.assetRfidPage .auditCount {
font-size: 35px;
margin-top: 15px
}
.assetRfidPage .auditCount small {
font-size: 10px
}
.assetRfidPage .auditSubtitle {
font-size: 8px
}
.assetRfidPage .auditLine {
font-size: 9px;
padding: 8px 0
}
.assetRfidPage .locator {
gap: 9px;
padding: 12px;
margin-top: 13px
}
.assetRfidPage .locator>.ico {
width: 23px;
height: 23px
}
.assetRfidPage .locator strong {
font-size: 10px
}
.assetRfidPage .locator small {
font-size: 8px
}
.assetRfidPage .signal {
gap: 2px
}
.assetRfidPage .signal i {
width: 3px
}
.assetRfidPage .transferRoute {
grid-template-columns: 1fr 32px 1fr;
gap: 7px
}
.assetRfidPage .routeStop {
padding: 12px 7px
}
.assetRfidPage .routeStop>.ico {
width: 29px;
height: 29px;
margin-bottom: 8px
}
.assetRfidPage .routeStop strong {
font-size: 11px
}
.assetRfidPage .routeStop small {
font-size: 8px
}
.assetRfidPage .routeArrow {
font-size: 7px
}
.assetRfidPage .routeArrow .ico {
width: 20px;
height: 20px
}
.assetRfidPage .timeline {
margin-top: 15px
}
.assetRfidPage .timeline li {
gap: 7px;
grid-template-columns: 21px 1fr auto
}
.assetRfidPage .timeline strong {
font-size: 10px
}
.assetRfidPage .timeline small,
.assetRfidPage .timeline time {
font-size: 8px
}
.assetRfidPage .timelineDot {
width: 20px;
height: 20px
}
.assetRfidPage .levelChart {
padding: 14px
}
.assetRfidPage .purchaseRequest {
padding: 12px;
gap: 9px
}
.assetRfidPage .purchaseRequest strong {
font-size: 10px
}
.assetRfidPage .purchaseRequest small {
font-size: 8px
}
.assetRfidPage .purchaseRequest .qty {
font-size: 22px
}
.assetRfidPage .ownerCard {
padding: 12px
}
.assetRfidPage .ownerCard strong {
font-size: 25px
}
.assetRfidPage .ownerCard span {
font-size: 8px
}
.assetRfidPage .exportStrip {
font-size: 8px;
gap: 5px
}
.assetRfidPage .exportStrip span {
margin-left: 0
}
.assetRfidPage .promptBox {
padding: 18px;
border-radius: 15px
}
.assetRfidPage .aiTop {
margin-bottom: 17px;
gap: 8px
}
.assetRfidPage .aiBrand strong {
font-size: 15px
}
.assetRfidPage .aiTop>span {
font-size: 8px
}
.assetRfidPage .aiBrand>.ico {
width: 22px;
height: 22px
}
.assetRfidPage .question {
font-size: 12px;
padding: 12px;
margin-left: 20px
}
.assetRfidPage .aiAnswer {
padding: 15px
}
.assetRfidPage .aiAnswer .answerTitle {
font-size: 13px
}
.assetRfidPage .aiAnswer p {
font-size: 10px
}
.assetRfidPage .aiItem {
padding: 11px;
gap: 8px
}
.assetRfidPage .aiItem strong {
font-size: 11px
}
.assetRfidPage .aiItem small {
font-size: 8px
}
.assetRfidPage .sourceChip {
font-size: 8px
}
.assetRfidPage .aiReview {
font-size: 9px !important
}
.assetRfidPage .aiSample {
font-size: 9px
}
.assetRfidPage .aiScope {
font-size: 10px !important
}
.assetRfidPage .ctaSection {
padding: 0 0 48px
}
.assetRfidPage .cta {
padding: 22px;
margin-top: 0
}
.assetRfidPage .cta h3 {
font-size: 21px
}
.assetRfidPage .cta p {
font-size: 12px
}
.assetRfidPage .ctaBtns {
width: 100%
}
.assetRfidPage .ctaBtns .btn {
font-size: 12px;
padding: 12px 14px;
flex: 1
}
.assetRfidPage .connectedGrid {
grid-template-columns: 1fr;
gap: 12px
}
.assetRfidPage .connectedCard {
padding: 24px
}
.assetRfidPage .connectedCard h3 {
font-size: 21px
}
.assetRfidPage .connectedCard p {
font-size: 13px
}
.assetRfidPage .connectedCard>.ico {
margin-bottom: 16px
}
.assetRfidPage .hardwareCard {
display: flex
}
.assetRfidPage .hardwareImage {
height: 185px;
min-height: 0;
border-bottom: 1px solid var(--line);
border-right: 0
}
.assetRfidPage .hardwareCopy {
padding: 22px
}
.assetRfidPage .hardwareCopy h3 {
font-size: 21px
}
.assetRfidPage .hardwareCopy p {
font-size: 13px
}
.assetRfidPage .hardwareNote {
font-size: 11px;
padding: 17px
}
.assetRfidPage .integrationGrid {
grid-template-columns: repeat(2, 1fr);
gap: 10px
}
.assetRfidPage .integration {
height: 77px;
font-size: 14px
}
.assetRfidPage .integration:last-child {
grid-column: 1/-1
}
.assetRfidPage .integrationFlow {
grid-template-columns: 1fr;
padding: 23px;
gap: 13px
}
.assetRfidPage .integrationFlow>.ico {
transform: rotate(90deg);
width: 20px;
height: 20px;
margin-left: 7px
}
.assetRfidPage .integrationFlow strong {
font-size: 14px
}
.assetRfidPage .integrationFlow small {
font-size: 10px
}
.assetRfidPage .integrationNote {
text-align: left;
font-size: 11px !important
}
.assetRfidPage .rolloutGrid {
gap: 25px 20px
}
.assetRfidPage .rolloutStep h3 {
font-size: 18px
}
.assetRfidPage .rolloutStep p {
font-size: 12px
}
.assetRfidPage .pilotMeasures {
gap: 13px;
padding: 18px;
font-size: 10px
}
.assetRfidPage .pilotMeasures strong {
width: 100%
}
.assetRfidPage .faq details {
padding: 17px 16px;
margin-bottom: 10px
}
.assetRfidPage .faq summary {
font-size: 13px;
line-height: 1.6
}
.assetRfidPage .faq details p {
font-size: 13px;
line-height: 1.85
}
.assetRfidPage .final {
padding: 29px 24px;
border-radius: 19px;
gap: 24px
}
.assetRfidPage .final h2 {
font-size: 32px
}
.assetRfidPage .final p {
font-size: 14px
}
.assetRfidPage .final .ctaBtns {
flex-direction: column
}
.assetRfidPage .final .btn {
width: 100%;
min-height: 47px
}
.assetRfidPage .contactRow {
flex-direction: column;
align-items: flex-start;
font-size: 11px;
gap: 12px
}
.assetRfidPage .footerRow {
align-items: flex-start;
gap: 17px
}
.assetRfidPage .footerLinks {
gap: 10px 17px;
font-size: 10px
}
.assetRfidPage .pageFooter {
padding: 23px 0
}
}
@media(max-width:359px) { .assetRfidPage .actions {
flex-direction: column
}
.assetRfidPage .actions .btn {
width: 100%
}
.assetRfidPage .coldStage {
height: 530px
}
.assetRfidPage .conditionPanel {
width: 163px;
top: 67px
}
.assetRfidPage .heroColdCard {
width: 175px
}
.assetRfidPage .stageTag {
max-width: 103px;
font-size: 8px;
bottom: 7px
}
.assetRfidPage .stockCardMetrics strong {
font-size: 22px
}
.assetRfidPage .stockCardMetrics span {
font-size: 7px
}
.assetRfidPage .coldScene {
left: -22px;
width: 114%;
top: 18px;
height: 315px
}
.assetRfidPage .fl {
grid-template-columns: 1fr
}
.assetRfidPage .outcomes {
grid-template-columns: 1fr
}
.assetRfidPage .logos {
grid-template-columns: repeat(2, 1fr)
}
.assetRfidPage .logoFallback {
font-size: 11px
}
.assetRfidPage .visualInner {
padding: 12px
}
.assetRfidPage .appBody {
padding: 12px
}
.assetRfidPage .receivingPicture {
margin: -12px -12px 12px
}
.assetRfidPage .auditCard {
padding: 15px 10px
}
.assetRfidPage .auditCount {
font-size: 31px
}
.assetRfidPage .auditCard h3 {
font-size: 14px
}
.assetRfidPage .auditLayout {
gap: 7px
}
.assetRfidPage .rolloutGrid {
grid-template-columns: 1fr
}
.assetRfidPage .miniTable {
font-size: 8px
}
.assetRfidPage .ownerCard strong {
font-size: 23px
}
}  .assetRfidPage .assetStage {
height: 550px;
max-width: 610px;
position: relative;
margin: auto
}
.assetRfidPage .assetScene {
position: absolute;
top: 108px;
left: -35px;
width: 108%;
max-width: none;
height: 390px;
object-fit: contain
}
.assetRfidPage .stageLabel {
left: 0;
top: 3px
}
.assetRfidPage .recordPanel {
position: absolute;
top: 52px;
right: 0;
width: 236px;
border: 1px solid #B7D8E8;
border-radius: 15px;
background: #fff;
overflow: hidden
}
.assetRfidPage .recordPanelHead {
padding: 12px;
background: #F1FAFE;
border-bottom: 1px solid var(--line);
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between
}
.assetRfidPage .recordPanelHead strong {
display: flex;
gap: 7px;
align-items: center;
color: #174157;
font-size: 11px
}
.assetRfidPage .recordPanelHead .ico {
width: 18px;
height: 18px;
color: #007FC5
}
.assetRfidPage .recordPanelBody {
padding: 15px
}
.assetRfidPage .recordPanelBody>small {
font-size: 9px;
color: #607487;
display: block
}
.assetRfidPage .recordPanelBody>strong {
font-size: 21px;
color: var(--navy);
line-height: 1.25;
display: block;
margin: 6px 0 13px;
letter-spacing: -.025em
}
.assetRfidPage .recordPanelRow {
display: flex;
justify-content: space-between;
gap: 9px;
padding: 9px 0;
font-size: 9px;
border-top: 1px solid #E6EFF4;
color: #607487
}
.assetRfidPage .recordPanelRow b {
color: #214D67;
text-align: right;
font-size: 9px;
font-weight: 750
}
.assetRfidPage .recordPanelFoot {
font-size: 9px;
padding: 12px 14px;
background: #FFF7D6;
color: #715716;
line-height: 1.6;
border-top: 1px solid #F3E6BA
}
.assetRfidPage .heroAuditCard {
position: absolute;
bottom: 0;
left: 0;
background: #0C2637;
color: #fff;
padding: 17px 18px;
width: 246px;
border-radius: 15px;
border: 1px solid #294A5E
}
.assetRfidPage .stageTag {
bottom: 10px;
right: 0;
max-width: 210px
}
.assetRfidPage .parentLink {
font-size: 12px;
line-height: 1.7;
margin-top: 17px;
color: #527286
}
.assetRfidPage .parentLink a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 4px
}
.assetRfidPage .assetProfile {
display: grid;
grid-template-columns: 66px 1fr;
gap: 15px;
align-items: center;
margin-bottom: 18px
}
.assetRfidPage .assetGlyph {
width: 66px;
height: 66px;
display: grid;
place-items: center;
background: #EAF8FF;
border: 1px solid #C9E5F2;
border-radius: 13px;
color: #007FC5
}
.assetRfidPage .assetGlyph .ico {
width: 37px;
height: 37px
}
.assetRfidPage .assetProfile strong {
font-size: 19px;
line-height: 1.3;
display: block;
color: #153E56;
letter-spacing: -.025em
}
.assetRfidPage .assetProfile small {
font-size: 10px;
display: block;
margin-top: 5px;
color: #5A778A
}
.assetRfidPage .dataFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin: 15px 0
}
.assetRfidPage .dataFields>div {
border: 1px solid #D4E6F0;
background: #F7FBFD;
padding: 11px 12px;
border-radius: 9px;
min-width: 0
}
.assetRfidPage .dataFields small {
font-size: 9px;
color: #60788B;
display: block;
margin-bottom: 4px
}
.assetRfidPage .dataFields strong {
font-size: 11px;
line-height: 1.5;
color: #1C4962;
display: block
}
.assetRfidPage .hierarchyLine {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
background: #0C2637;
color: #D7E7F1;
border-radius: 9px;
padding: 12px;
font-size: 10px;
line-height: 1.6
}
.assetRfidPage .hierarchyLine .ico {
width: 12px;
height: 12px;
color: var(--yellow)
}
.assetRfidPage .tagStrip {
display: flex;
gap: 10px;
align-items: center;
padding: 12px;
border: 1px solid #D7E6EF;
border-radius: 9px;
margin-top: 14px;
background: #FFF
}
.assetRfidPage .tagStrip>.ico {
width: 28px;
height: 28px;
color: #007FC5
}
.assetRfidPage .tagStrip strong {
font-size: 11px;
display: block;
color: #21495F
}
.assetRfidPage .tagStrip small {
font-size: 9px;
color: #657D8D;
display: block;
margin-top: 3px
}
.assetRfidPage .readerAudit {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 12px;
align-items: center
}
.assetRfidPage .readerDrawing {
min-width: 0;
text-align: center
}
.assetRfidPage .readerDrawing img {
width: 100%;
height: 280px;
object-fit: contain;
max-width: 100%
}
.assetRfidPage .readerDrawing small {
display: block;
font-size: 10px;
color: #54758B;
margin-top: -15px
}
.assetRfidPage .countPanel {
background: #fff;
border: 1px solid #C5DFEC;
border-radius: 13px;
padding: 20px 17px;
min-width: 0
}
.assetRfidPage .countPanel h3 {
font-size: 19px;
margin: 12px 0 5px;
color: #123D56
}
.assetRfidPage .countPanel>small {
font-size: 10px;
color: #60788B;
display: block
}
.assetRfidPage .countValue {
display: block;
font-size: 40px;
color: #063B5C;
letter-spacing: -.05em;
line-height: 1.15;
margin-top: 18px
}
.assetRfidPage .countValue small {
font-size: 12px;
letter-spacing: 0;
font-weight: 500;
color: #617B8C
}
.assetRfidPage .countRow {
display: flex;
justify-content: space-between;
gap: 9px;
border-top: 1px solid #E2EDF3;
padding: 9px 0;
font-size: 11px;
color: #4D6E82
}
.assetRfidPage .countRow strong {
font-size: 12px;
color: #173F56
}
.assetRfidPage .countRow span {
display: flex;
gap: 7px;
align-items: center
}
.assetRfidPage .countFoot {
font-size: 10px;
color: #617B8D;
padding: 10px 12px;
background: #F5FAFD;
border: 1px solid #D7E8F1;
border-radius: 8px;
margin-top: 11px;
line-height: 1.6
}
.assetRfidPage .assetTransferPicture {
height: 191px;
margin: -18px -18px 17px;
background: #F0F9FD;
border-bottom: 1px solid #D1E7F0
}
.assetRfidPage .assetTransferPicture img {
width: 100%;
height: 100%;
object-fit: contain
}
.assetRfidPage .transferReference {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
margin-bottom: 17px
}
.assetRfidPage .transferReference strong {
display: block;
font-size: 15px;
color: #153E56
}
.assetRfidPage .transferReference small {
display: block;
font-size: 9px;
color: #657E8E;
margin-top: 4px
}
.assetRfidPage .linkedAsset {
display: flex;
align-items: center;
gap: 12px;
background: #F2F9FD;
border: 1px solid #D2E8F2;
border-radius: 11px;
padding: 15px;
margin-bottom: 17px
}
.assetRfidPage .linkedAsset>.ico {
width: 34px;
height: 34px;
color: #0076dd;
flex: 0 0 auto
}
.assetRfidPage .linkedAsset strong {
font-size: 14px;
display: block;
color: #173F57
}
.assetRfidPage .linkedAsset small {
font-size: 10px;
color: #607A8C;
display: block;
margin-top: 4px
}
.assetRfidPage .workHeader {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 9px
}
.assetRfidPage .workHeader>span:first-child {
font-size: 11px;
color: #547487;
font-weight: 750
}
.assetRfidPage .workTitle {
font-size: 22px;
letter-spacing: -.03em;
line-height: 1.25;
color: #153E56;
display: block;
margin-top: 11px
}
.assetRfidPage .workMeta {
display: flex;
gap: 9px 18px;
flex-wrap: wrap;
font-size: 10px;
color: #607487;
margin-top: 10px
}
.assetRfidPage .workChecks {
list-style: none;
padding: 0;
display: grid;
gap: 10px;
margin-top: 19px
}
.assetRfidPage .workChecks li {
display: flex;
align-items: center;
gap: 8px;
color: #32566E;
font-size: 11px
}
.assetRfidPage .workChecks .ico {
width: 17px;
height: 17px;
padding: 2px;
border-radius: 4px;
background: #EAF8F3;
color: #0B7651;
border: 1px solid #B9DCCD
}
.assetRfidPage .recordLinks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
border-top: 1px solid #DFEAF2;
padding-top: 17px;
margin-top: 18px
}
.assetRfidPage .recordLinks div {
min-width: 0;
border: 1px solid #D6E7F0;
border-radius: 8px;
padding: 11px 9px;
background: #F8FBFD
}
.assetRfidPage .recordLinks strong {
font-size: 13px;
display: block;
color: #123F57
}
.assetRfidPage .recordLinks small {
font-size: 9px;
display: block;
color: #607A8C;
margin-top: 4px
}
.assetRfidPage .findingTop {
border: 1px solid #CEE3EE;
border-radius: 11px;
background: #F3FAFE;
padding: 17px;
margin-bottom: 15px
}
.assetRfidPage .findingTop>small {
font-size: 10px;
color: #617A8C;
display: block
}
.assetRfidPage .findingTop>strong {
font-size: 26px;
line-height: 1.25;
display: block;
margin: 5px 0 13px;
color: #153E56;
letter-spacing: -.03em
}
.assetRfidPage .findingStamp {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 10px;
color: #51748B
}
.assetRfidPage .signalCard {
background: #fff;
border: 1px solid #D0E4EF;
border-radius: 10px;
padding: 15px;
display: flex;
gap: 12px;
align-items: center
}
.assetRfidPage .signalCard>.ico {
width: 28px;
height: 28px;
color: #007FC5
}
.assetRfidPage .signalCard strong {
display: block;
font-size: 13px;
color: #163F56
}
.assetRfidPage .signalCard small {
display: block;
font-size: 9px;
color: #617C8D;
margin-top: 4px
}
.assetRfidPage .exceptionLine {
display: flex;
gap: 10px;
align-items: flex-start;
background: #FFF8E2;
border: 1px solid #EEDCA7;
border-radius: 10px;
padding: 15px;
margin-top: 15px
}
.assetRfidPage .exceptionLine>.ico {
color: #83620B;
width: 22px;
height: 22px;
flex-shrink: 0
}
.assetRfidPage .exceptionLine strong {
font-size: 12px;
display: block;
color: #654B08
}
.assetRfidPage .exceptionLine small {
font-size: 10px;
color: #796433;
display: block;
line-height: 1.7;
margin-top: 5px
}
.assetRfidPage .costGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 15px
}
.assetRfidPage .costTile {
border: 1px solid #D3E5EE;
border-radius: 11px;
padding: 16px;
background: #F8FCFE;
min-width: 0
}
.assetRfidPage .costTile strong {
display: block;
font-size: 28px;
line-height: 1.2;
letter-spacing: -.04em;
color: #17465F
}
.assetRfidPage .costTile small {
font-size: 10px;
display: block;
color: #56758B;
margin-top: 6px
}
.assetRfidPage .costTile.emphasis {
background: #12374E;
border-color: #12374E
}
.assetRfidPage .costTile.emphasis strong {
color: #fff
}
.assetRfidPage .costTile.emphasis small {
color: #CBDDE8
}
.assetRfidPage .costTile.service {
background: #FFF8E1;
border-color: #EFDEAC
}
.assetRfidPage .costCalc {
font-size: 10px;
color: #57758A;
line-height: 1.8;
margin-top: 13px
}
.assetRfidPage .hardwareImage {
height: 212px
}
.assetRfidPage .planningNote {
font-size: 12px;
color: #557387;
line-height: 1.8;
margin-top: 20px
}
.assetRfidPage .planningNote a {
color: #006FA9;
text-decoration: underline;
text-underline-offset: 4px
}
@media(max-width:1100px) {
.assetRfidPage .assetStage {
height: 545px
}
.assetRfidPage .recordPanel {
width: 219px
}
.assetRfidPage .heroAuditCard {
width: 214px;
padding: 15px
}
.assetRfidPage .stageTag {
font-size: 9px;
max-width: 176px
}
.assetRfidPage .countValue {
font-size: 35px
}
.assetRfidPage .countPanel {
padding: 18px 13px
}
.assetRfidPage .countRow {
font-size: 10px
}
.assetRfidPage .recordPanelBody>strong {
font-size: 20px
}
.assetRfidPage .readerDrawing img {
height: 255px
}
}
@media(max-width:960px) { .assetRfidPage .assetStage {
height: 550px
}
.assetRfidPage .recordPanel {
width: 242px
}
.assetRfidPage .heroAuditCard {
width: 255px;
padding: 17px 18px
}
.assetRfidPage .stageTag {
font-size: 10px;
max-width: 210px
}
.assetRfidPage .assetScene {
left: -25px;
top: 101px;
height: 410px
}
.assetRfidPage .assetTransferPicture {
margin: -20px -20px 18px;
height: 205px
}
.assetRfidPage .readerDrawing img {
height: 308px
}
.assetRfidPage .countPanel {
padding: 24px
}
.assetRfidPage .countValue {
font-size: 46px
}
.assetRfidPage .countRow {
font-size: 12px
}
.assetRfidPage .hardwareImage {
height: 100%;
min-height: 215px
}
}
@media(max-width:640px) { .assetRfidPage .assetStage {
height: 537px;
max-width: 430px
}
.assetRfidPage .stageLabel {
font-size: 9px;
top: 0;
left: 0;
max-width: 100%
}
.assetRfidPage .assetScene {
top: 176px;
left: -23px;
width: 111%;
height: 296px
}
.assetRfidPage .recordPanel {
top: 48px;
width: 202px;
right: 0
}
.assetRfidPage .recordPanelHead {
padding: 10px
}
.assetRfidPage .recordPanelHead strong {
font-size: 10px
}
.assetRfidPage .recordPanelBody {
padding: 12px
}
.assetRfidPage .recordPanelBody>strong {
font-size: 19px;
margin: 5px 0 10px
}
.assetRfidPage .recordPanelRow {
font-size: 8px;
padding: 7px 0
}
.assetRfidPage .recordPanelRow b {
font-size: 8px
}
.assetRfidPage .recordPanelFoot {
padding: 10px 12px;
font-size: 8px
}
.assetRfidPage .heroAuditCard {
width: 181px;
padding: 13px;
bottom: 0
}
.assetRfidPage .stageTag {
font-size: 8px;
max-width: 135px;
bottom: 9px;
padding: 7px 9px
}
.assetRfidPage .parentLink {
font-size: 11px
}
.assetRfidPage .dataFields {
gap: 8px
}
.assetRfidPage .dataFields>div {
padding: 10px
}
.assetRfidPage .dataFields small {
font-size: 8px
}
.assetRfidPage .dataFields strong {
font-size: 10px
}
.assetRfidPage .assetProfile {
grid-template-columns: 51px 1fr;
gap: 11px
}
.assetRfidPage .assetGlyph {
width: 51px;
height: 51px
}
.assetRfidPage .assetGlyph .ico {
width: 30px;
height: 30px
}
.assetRfidPage .assetProfile strong {
font-size: 17px
}
.assetRfidPage .assetProfile small {
font-size: 9px
}
.assetRfidPage .hierarchyLine {
padding: 10px;
font-size: 9px
}
.assetRfidPage .readerAudit {
grid-template-columns: .73fr 1.27fr;
gap: 7px
}
.assetRfidPage .readerDrawing img {
height: 268px
}
.assetRfidPage .readerDrawing small {
font-size: 8px;
margin-top: -32px
}
.assetRfidPage .countPanel {
padding: 17px 12px
}
.assetRfidPage .countPanel h3 {
font-size: 16px
}
.assetRfidPage .countPanel>small {
font-size: 9px
}
.assetRfidPage .countValue {
font-size: 33px
}
.assetRfidPage .countValue small {
font-size: 10px
}
.assetRfidPage .countRow {
font-size: 9px;
gap: 6px
}
.assetRfidPage .countRow strong {
font-size: 10px
}
.assetRfidPage .countFoot {
font-size: 9px
}
.assetRfidPage .assetTransferPicture {
margin: -14px -14px 15px;
height: 157px
}
.assetRfidPage .transferReference strong {
font-size: 13px
}
.assetRfidPage .transferReference small {
font-size: 8px
}
.assetRfidPage .linkedAsset {
padding: 12px;
gap: 10px
}
.assetRfidPage .linkedAsset strong {
font-size: 12px
}
.assetRfidPage .linkedAsset small {
font-size: 9px
}
.assetRfidPage .workTitle {
font-size: 19px
}
.assetRfidPage .workChecks li {
font-size: 10px
}
.assetRfidPage .workMeta {
font-size: 9px;
gap: 7px 12px
}
.assetRfidPage .recordLinks {
gap: 6px
}
.assetRfidPage .recordLinks div {
padding: 10px 7px
}
.assetRfidPage .recordLinks strong {
font-size: 11px
}
.assetRfidPage .recordLinks small {
font-size: 8px
}
.assetRfidPage .findingTop {
padding: 14px
}
.assetRfidPage .findingTop>strong {
font-size: 24px
}
.assetRfidPage .findingStamp {
font-size: 9px
}
.assetRfidPage .signalCard {
padding: 12px;
gap: 9px
}
.assetRfidPage .signalCard strong {
font-size: 11px
}
.assetRfidPage .signalCard small {
font-size: 8px
}
.assetRfidPage .exceptionLine {
padding: 13px;
gap: 8px
}
.assetRfidPage .exceptionLine strong {
font-size: 11px
}
.assetRfidPage .exceptionLine small {
font-size: 9px
}
.assetRfidPage .costTile {
padding: 13px
}
.assetRfidPage .costTile strong {
font-size: 26px
}
.assetRfidPage .costTile small {
font-size: 9px
}
.assetRfidPage .costCalc {
font-size: 9px
}
.assetRfidPage .hardwareImage {
height: 200px;
min-height: 0
}
.assetRfidPage .planningNote {
font-size: 11px
}
}
@media(max-width:359px) { .assetRfidPage .assetStage {
height: 530px
}
.assetRfidPage .heroAuditCard {
width: 168px
}
.assetRfidPage .stageTag {
max-width: 108px;
font-size: 8px
}
.assetRfidPage .recordPanel {
width: 190px
}
.assetRfidPage .countValue {
font-size: 29px
}
.assetRfidPage .countPanel {
padding: 15px 10px
}
.assetRfidPage .costTile strong {
font-size: 24px
}
.assetRfidPage .assetTransferPicture {
margin: -12px -12px 14px
}
} .assetRfidPage .readerDrawing small {
margin-top: 8px
}
.assetRfidPage .costTile>span {
font-size: 10px;
color: #56758B;
display: block;
margin-bottom: 8px
}
.assetRfidPage .costTile.emphasis>span {
color: #C7DCE8
}
.assetRfidPage .costCalc {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap
}
@media(min-width:961px) {
.assetRfidPage .assetScene {
top: 91px
}
} .new-theme-design .awards__label {
font-size: 13px !important;
}
@media(max-width:390px) {
.new-theme-design .awards__list img {
height: 48px;
}
.new-theme-design .awards__list img.h-45 {
height: 32px;
}
} .rfid-workflow-automation .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.rfid-workflow-automation .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.rfid-workflow-automation .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.rfid-workflow-automation .btn:hover {
transform: translateY(-2px)
}
.rfid-workflow-automation .btn.black {
background: #0b0b0b;
color: #fff
}
.rfid-workflow-automation .btn.black:hover {
background: #292929
}
.rfid-workflow-automation .btn.yellow {
background: var(--yellow);
color: #000
}
.rfid-workflow-automation .btn.yellow:hover {
background: #FFD454
}
.rfid-workflow-automation .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.rfid-workflow-automation .btn .icon2 {
width: 17px;
height: 17px
}
.rfid-workflow-automation a:focus-visible,
.rfid-workflow-automation summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.rfid-workflow-automation .dark a:focus-visible,
.rfid-workflow-automation .final a:focus-visible {
outline-color: var(--yellow)
}
.rfid-workflow-automation .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.rfid-workflow-automation .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.rfid-workflow-automation .soft {
background: var(--sky2)
}
.rfid-workflow-automation .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.rfid-workflow-automation .dark h2,
.rfid-workflow-automation .dark h3 {
color: #fff
}
.rfid-workflow-automation .dark p {
color: #D6D6D6
}
.rfid-workflow-automation .dark .ey {
background: var(--yellow)
}
.rfid-workflow-automation .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.rfid-workflow-automation .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.rfid-workflow-automation .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.rfid-workflow-automation .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.rfid-workflow-automation .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.rfid-workflow-automation .textLink .icon2 {
width: 16px;
height: 16px
}
.rfid-workflow-automation .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.rfid-workflow-automation .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.rfid-workflow-automation .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.rfid-workflow-automation .skipLink:focus {
top: 12px
} .rfid-workflow-automation .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.rfid-workflow-automation .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.rfid-workflow-automation .heroGrid>*,
.rfid-workflow-automation .feature>*,
.rfid-workflow-automation .aiGrid>* {
min-width: 0
}
.rfid-workflow-automation .hero h1 {
max-width: 580px
}
.rfid-workflow-automation .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.rfid-workflow-automation .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.rfid-workflow-automation .heroVisual {
min-height: 555px;
position: relative
}
.rfid-workflow-automation .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.rfid-workflow-automation .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.rfid-workflow-automation .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.rfid-workflow-automation .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.rfid-workflow-automation .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.rfid-workflow-automation .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.rfid-workflow-automation .brandTile .icon2 {
width: 17px;
height: 17px
}
.rfid-workflow-automation .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.rfid-workflow-automation .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.rfid-workflow-automation .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.rfid-workflow-automation .viewPills span {
padding: 4px 7px
}
.rfid-workflow-automation .viewPills .active {
background: var(--navy);
color: #fff
}
.rfid-workflow-automation .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.rfid-workflow-automation .miniDates,
.rfid-workflow-automation .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.rfid-workflow-automation .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.rfid-workflow-automation .miniDates>div:last-child {
border: 0
}
.rfid-workflow-automation .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.rfid-workflow-automation .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.rfid-workflow-automation .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.rfid-workflow-automation .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.rfid-workflow-automation .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.rfid-workflow-automation .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.rfid-workflow-automation .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.rfid-workflow-automation .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.rfid-workflow-automation .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.rfid-workflow-automation .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.rfid-workflow-automation .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.rfid-workflow-automation .boardFooter strong {
color: var(--navy)
}
.rfid-workflow-automation .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.rfid-workflow-automation .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.rfid-workflow-automation .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.rfid-workflow-automation .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.rfid-workflow-automation .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.rfid-workflow-automation .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.rfid-workflow-automation .phoneHead small {
font-size: 9px;
color: #50697A
}
.rfid-workflow-automation .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.rfid-workflow-automation .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.rfid-workflow-automation .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.rfid-workflow-automation .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.rfid-workflow-automation .phoneJob.current {
background: var(--sky2)
}
.rfid-workflow-automation .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.rfid-workflow-automation .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.rfid-workflow-automation .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.rfid-workflow-automation .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.rfid-workflow-automation .lifecycleHead .icon2 {
color: var(--yellow);
width: 17px;
height: 17px
}
.rfid-workflow-automation .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.rfid-workflow-automation .lifecycleBody strong {
font-size: 12px
}
.rfid-workflow-automation .lifecycleBody span {
color: #CEDBE4
}
.rfid-workflow-automation .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.rfid-workflow-automation .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .rfid-workflow-automation .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.rfid-workflow-automation .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.rfid-workflow-automation .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.rfid-workflow-automation .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.rfid-workflow-automation .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.rfid-workflow-automation .logo.adobe {
font-size: 20px
}
.rfid-workflow-automation .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .rfid-workflow-automation .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.rfid-workflow-automation .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.rfid-workflow-automation .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.rfid-workflow-automation .outcome:nth-child(2):before {
background: var(--yellow)
}
.rfid-workflow-automation .outcome:nth-child(3):before {
background: var(--green)
}
.rfid-workflow-automation .outcome:nth-child(4):before {
background: var(--purple)
}
.rfid-workflow-automation .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.rfid-workflow-automation .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.rfid-workflow-automation .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
} .rfid-workflow-automation .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.rfid-workflow-automation .feature.reverse .visual {
order: -1
}
.rfid-workflow-automation .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.rfid-workflow-automation .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.rfid-workflow-automation .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.rfid-workflow-automation .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.rfid-workflow-automation .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.rfid-workflow-automation .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.rfid-workflow-automation .visual>* {
position: relative;
z-index: 2
}
.rfid-workflow-automation .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.rfid-workflow-automation .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.rfid-workflow-automation .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.rfid-workflow-automation .uiHeading .icon2 {
width: 19px;
height: 19px
}
.rfid-workflow-automation .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.rfid-workflow-automation .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.rfid-workflow-automation .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.rfid-workflow-automation .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.rfid-workflow-automation .pill.green {
background: var(--greenbg);
color: #116746
}
.rfid-workflow-automation .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.rfid-workflow-automation .pill.gray {
background: #F0F3F5;
color: #586C79
}
.rfid-workflow-automation .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .rfid-workflow-automation .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.rfid-workflow-automation .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.rfid-workflow-automation .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.rfid-workflow-automation .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.rfid-workflow-automation .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.rfid-workflow-automation .plannerRow:last-child {
border-bottom: 0
}
.rfid-workflow-automation .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.rfid-workflow-automation .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.rfid-workflow-automation .avatar.green {
background: var(--greenbg);
color: #116746
}
.rfid-workflow-automation .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.rfid-workflow-automation .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.rfid-workflow-automation .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.rfid-workflow-automation .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.rfid-workflow-automation .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.rfid-workflow-automation .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.rfid-workflow-automation .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.rfid-workflow-automation .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.rfid-workflow-automation .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.rfid-workflow-automation .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.rfid-workflow-automation .pending .icon2 {
width: 18px;
height: 18px;
color: var(--navy)
}
.rfid-workflow-automation .pending strong {
font-size: 11px;
color: var(--navy)
}
.rfid-workflow-automation .pending .pill {
margin-left: auto
}
.rfid-workflow-automation .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.rfid-workflow-automation .legend span {
display: flex;
align-items: center;
gap: 4px
}
.rfid-workflow-automation .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.rfid-workflow-automation .legend .green i {
background: var(--green)
}
.rfid-workflow-automation .legend .yellow i {
background: #D7A200
} .rfid-workflow-automation .roster {
display: grid;
gap: 10px
}
.rfid-workflow-automation .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.rfid-workflow-automation .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.rfid-workflow-automation .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.rfid-workflow-automation .rosterName {
flex: 1;
min-width: 0
}
.rfid-workflow-automation .rosterName strong {
display: block;
font-size: 11px
}
.rfid-workflow-automation .rosterName small {
color: var(--muted);
font-size: 9px
}
.rfid-workflow-automation .rosterTop .pill {
font-size: 8px
}
.rfid-workflow-automation .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.rfid-workflow-automation .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.rfid-workflow-automation .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.rfid-workflow-automation .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.rfid-workflow-automation .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.rfid-workflow-automation .rosterNote .icon2 {
width: 19px;
height: 19px
}
.rfid-workflow-automation .rosterNote strong {
display: block;
margin-bottom: 3px
} .rfid-workflow-automation .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.rfid-workflow-automation .ruleCard .uiLabel {
color: #9CBED1
}
.rfid-workflow-automation .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.rfid-workflow-automation .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.rfid-workflow-automation .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.rfid-workflow-automation .workCards {
display: grid;
gap: 9px
}
.rfid-workflow-automation .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.rfid-workflow-automation .workCard strong {
display: block;
font-size: 11px
}
.rfid-workflow-automation .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.rfid-workflow-automation .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.rfid-workflow-automation .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.rfid-workflow-automation .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.rfid-workflow-automation .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.rfid-workflow-automation .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.rfid-workflow-automation .modeRow .icon2 {
width: 14px;
height: 14px
} .rfid-workflow-automation .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.rfid-workflow-automation .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.rfid-workflow-automation .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.rfid-workflow-automation .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.rfid-workflow-automation .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.rfid-workflow-automation .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.rfid-workflow-automation .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.rfid-workflow-automation .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.rfid-workflow-automation .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.rfid-workflow-automation .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.rfid-workflow-automation .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.rfid-workflow-automation .lookupSide {
display: grid;
gap: 11px
}
.rfid-workflow-automation .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.rfid-workflow-automation .lookupCard .icon2 {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.rfid-workflow-automation .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.rfid-workflow-automation .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.rfid-workflow-automation .lookupCard.done {
border-left: 3px solid var(--green)
} .rfid-workflow-automation .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.rfid-workflow-automation .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.rfid-workflow-automation .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.rfid-workflow-automation .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.rfid-workflow-automation .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.rfid-workflow-automation .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.rfid-workflow-automation .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.rfid-workflow-automation .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.rfid-workflow-automation .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.rfid-workflow-automation .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .rfid-workflow-automation .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.rfid-workflow-automation .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.rfid-workflow-automation .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.rfid-workflow-automation .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.rfid-workflow-automation .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.rfid-workflow-automation .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.rfid-workflow-automation .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
} .rfid-workflow-automation .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.rfid-workflow-automation .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.rfid-workflow-automation .featureCard:hover {
transform: translateY(-3px)
}
.rfid-workflow-automation .featureIcon,
.rfid-workflow-automation .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.rfid-workflow-automation .featureIcon .icon2,
.rfid-workflow-automation .useIcon .icon2 {
width: 22px;
height: 22px
}
.rfid-workflow-automation .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.rfid-workflow-automation .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .rfid-workflow-automation .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.rfid-workflow-automation .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.rfid-workflow-automation .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.rfid-workflow-automation .integration:hover {
background: var(--sky2)
}
.rfid-workflow-automation .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.rfid-workflow-automation .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.rfid-workflow-automation .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.rfid-workflow-automation .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.rfid-workflow-automation .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.rfid-workflow-automation .stream>span[aria-hidden] {
color: #86B2C9
} .rfid-workflow-automation .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.rfid-workflow-automation .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.rfid-workflow-automation .useCase h3 {
font-size: 20px
}
.rfid-workflow-automation .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.rfid-workflow-automation .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.rfid-workflow-automation .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.rfid-workflow-automation .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.rfid-workflow-automation .review h3 {
font-size: 22px
}
.rfid-workflow-automation .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.rfid-workflow-automation .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.rfid-workflow-automation .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.rfid-workflow-automation .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.rfid-workflow-automation .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.rfid-workflow-automation .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.rfid-workflow-automation .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.rfid-workflow-automation .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.rfid-workflow-automation .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .rfid-workflow-automation .faq {
max-width: 900px
}
.rfid-workflow-automation .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.rfid-workflow-automation .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.rfid-workflow-automation .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.rfid-workflow-automation .faq summary::marker {
color: var(--navy)
}
.rfid-workflow-automation .faq details[open] {
border-color: #A9D3E7
}
.rfid-workflow-automation .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .rfid-workflow-automation .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.rfid-workflow-automation .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.rfid-workflow-automation .cta h3 {
font-size: 19px
}
.rfid-workflow-automation .cta.darkCta h3 {
color: #fff
}
.rfid-workflow-automation .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.rfid-workflow-automation .cta.darkCta p {
color: #D1D1D1
}
.rfid-workflow-automation .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.rfid-workflow-automation .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.rfid-workflow-automation .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.rfid-workflow-automation .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.rfid-workflow-automation .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.rfid-workflow-automation .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.rfid-workflow-automation .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.rfid-workflow-automation .heroGrid {
gap: 28px
}
.rfid-workflow-automation h1 {
font-size: 56px
}
.rfid-workflow-automation .hero .lead {
font-size: 17px
}
.rfid-workflow-automation .assetPhone {
width: 168px;
top: 235px
}
.rfid-workflow-automation .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.rfid-workflow-automation .scheduleBoard {
width: 96%;
left: 0
}
.rfid-workflow-automation .miniJob {
padding: 4px
}
.rfid-workflow-automation .heroVisual,
.rfid-workflow-automation .assetStage {
min-height: 555px
}
.rfid-workflow-automation .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.rfid-workflow-automation .visual {
padding: 17px
}
.rfid-workflow-automation .plannerTicks,
.rfid-workflow-automation .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.rfid-workflow-automation .plannerRow {
grid-template-columns: 75px 1fr
}
.rfid-workflow-automation .person {
font-size: 9px;
padding: 10px 5px
}
.rfid-workflow-automation .person .avatar {
display: none
}
}
@media(max-width:960px) {
.rfid-workflow-automation .heroGrid,
.rfid-workflow-automation .feature,
.rfid-workflow-automation .aiGrid,
.rfid-workflow-automation .final {
grid-template-columns: 1fr
}
.rfid-workflow-automation .heroGrid {
gap: 36px
}
.rfid-workflow-automation .hero h1 {
max-width: 760px
}
.rfid-workflow-automation .hero .lead {
max-width: 750px
}
.rfid-workflow-automation .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.rfid-workflow-automation .assetStage {
margin: auto
}
.rfid-workflow-automation .feature.reverse .visual {
order: 0
}
.rfid-workflow-automation .feature {
gap: 30px
}
.rfid-workflow-automation .feature>div:first-child {
max-width: 800px
}
.rfid-workflow-automation .outcomes,
.rfid-workflow-automation .featureGrid,
.rfid-workflow-automation .connectedGrid,
.rfid-workflow-automation .useCases {
grid-template-columns: repeat(2, 1fr)
}
.rfid-workflow-automation .logos {
grid-template-columns: repeat(3, 1fr)
}
.rfid-workflow-automation .integrations {
grid-template-columns: repeat(3, 1fr)
}
.rfid-workflow-automation .reviews {
grid-template-columns: 1fr
}
.rfid-workflow-automation .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.rfid-workflow-automation .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.rfid-workflow-automation .ratingItem:nth-child(2) {
border: 0
}
.rfid-workflow-automation .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.rfid-workflow-automation .final .btn {
min-width: 195px
}
.rfid-workflow-automation .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.rfid-workflow-automation .aiGrid {
gap: 30px
}
.rfid-workflow-automation .aiMini {
max-width: 760px
}
.rfid-workflow-automation .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.rfid-workflow-automation .wrap {
width: calc(100% - 24px)
}
.rfid-workflow-automation section {
padding: 56px 0
}
.rfid-workflow-automation .hero {
padding: 32px 0 42px
}
.rfid-workflow-automation h1 {
font-size: 42px
}
.rfid-workflow-automation h2 {
font-size: 34px
}
.rfid-workflow-automation .lead {
font-size: 17px
}
.rfid-workflow-automation .sectionHead p {
font-size: 16px
}
.rfid-workflow-automation .sectionHead {
margin-bottom: 28px
}
.rfid-workflow-automation .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.rfid-workflow-automation .heroGrid {
gap: 24px
}
.rfid-workflow-automation .hero .actions {
gap: 8px
}
.rfid-workflow-automation .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.rfid-workflow-automation .micro {
font-size: 11px
}
.rfid-workflow-automation .heroPills {
gap: 6px
}
.rfid-workflow-automation .heroPills span {
font-size: 9px
}
.rfid-workflow-automation .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.rfid-workflow-automation .heroVisual {
min-height: 525px
}
.rfid-workflow-automation .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.rfid-workflow-automation .assetStage:before {
inset: 38px 0 28px 10px
}
.rfid-workflow-automation .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.rfid-workflow-automation .boardHeader {
padding: 12px
}
.rfid-workflow-automation .boardBrand {
font-size: 12px
}
.rfid-workflow-automation .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.rfid-workflow-automation .miniCalendar {
margin: 0 10px 12px
}
.rfid-workflow-automation .miniDates,
.rfid-workflow-automation .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.rfid-workflow-automation .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.rfid-workflow-automation .miniPerson small {
font-size: 7px
}
.rfid-workflow-automation .miniCell {
padding: 4px 3px
}
.rfid-workflow-automation .miniDates>div {
font-size: 8px
}
.rfid-workflow-automation .miniDates small {
font-size: 7px
}
.rfid-workflow-automation .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.rfid-workflow-automation .miniJob b {
font-size: 7px
}
.rfid-workflow-automation .miniRow {
min-height: 57px
}
.rfid-workflow-automation .miniJob {
min-height: 48px
}
.rfid-workflow-automation .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.rfid-workflow-automation .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.rfid-workflow-automation .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.rfid-workflow-automation .phoneHead strong {
font-size: 11px
}
.rfid-workflow-automation .phoneHead small {
font-size: 8px
}
.rfid-workflow-automation .phoneAgenda {
padding: 8px;
gap: 6px
}
.rfid-workflow-automation .phoneJob {
padding: 7px;
font-size: 8px
}
.rfid-workflow-automation .phoneJob strong {
font-size: 9px
}
.rfid-workflow-automation .phoneJob small {
font-size: 7px
}
.rfid-workflow-automation .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.rfid-workflow-automation .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.rfid-workflow-automation .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.rfid-workflow-automation .lifecycleHead .icon2 {
width: 15px;
height: 15px
}
.rfid-workflow-automation .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.rfid-workflow-automation .lifecycleBody strong {
font-size: 10px
}
.rfid-workflow-automation .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.rfid-workflow-automation .diagramCaption {
font-size: 9px
}
.rfid-workflow-automation .trust {
padding: 23px 0
}
.rfid-workflow-automation .trustLabel {
font-size: 12px
}
.rfid-workflow-automation .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.rfid-workflow-automation .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.rfid-workflow-automation .logo.dhl {
font-size: 19px
}
.rfid-workflow-automation .logo.adobe {
font-size: 17px
}
.rfid-workflow-automation .logo.golden {
font-size: 8px
}
.rfid-workflow-automation .fl,
.rfid-workflow-automation .outcomes,
.rfid-workflow-automation .featureGrid,
.rfid-workflow-automation .connectedGrid,
.rfid-workflow-automation .useCases {
grid-template-columns: 1fr
}
.rfid-workflow-automation .fi {
font-size: 14px
}
.rfid-workflow-automation .outcome {
padding: 21px
}
.rfid-workflow-automation .outcome strong {
margin-top: 12px
}
.rfid-workflow-automation .outcome span {
font-size: 14px
}
.rfid-workflow-automation .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.rfid-workflow-automation .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.rfid-workflow-automation .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-workflow-automation .uiSub {
font-size: 9px
}
.rfid-workflow-automation .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.rfid-workflow-automation .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.rfid-workflow-automation .person {
font-size: 9px;
padding: 8px 6px
}
.rfid-workflow-automation .person .avatar {
display: none
}
.rfid-workflow-automation .person small {
font-size: 8px
}
.rfid-workflow-automation .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.rfid-workflow-automation .slot strong {
font-size: 8px
}
.rfid-workflow-automation .plannerHead {
font-size: 10px;
padding: 10px
}
.rfid-workflow-automation .plannerHead .pill {
font-size: 8px
}
.rfid-workflow-automation .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.rfid-workflow-automation .pending strong {
font-size: 10px
}
.rfid-workflow-automation .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-workflow-automation .rosterTop .pill {
font-size: 8px
}
.rfid-workflow-automation .rosterCard {
padding: 11px
}
.rfid-workflow-automation .rosterNote {
padding: 11px;
font-size: 10px
}
.rfid-workflow-automation .ruleCard {
padding: 14px
}
.rfid-workflow-automation .ruleCard strong {
font-size: 15px
}
.rfid-workflow-automation .workCard {
padding: 10px;
gap: 8px
}
.rfid-workflow-automation .workCard strong {
font-size: 10px
}
.rfid-workflow-automation .workCard small {
font-size: 8px
}
.rfid-workflow-automation .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-workflow-automation .modeRow span {
font-size: 8px;
padding: 7px
}
.rfid-workflow-automation .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.rfid-workflow-automation .phoneMockInner {
padding: 11px;
min-height: 288px
}
.rfid-workflow-automation .lookupCard {
padding: 10px
}
.rfid-workflow-automation .lookupCard strong {
font-size: 10px
}
.rfid-workflow-automation .lookupCard span {
font-size: 9px
}
.rfid-workflow-automation .lookupCard .icon2 {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.rfid-workflow-automation .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.rfid-workflow-automation .aiMini div {
padding: 16px
}
.rfid-workflow-automation .aiMini strong {
font-size: 14px
}
.rfid-workflow-automation .aiMini span {
font-size: 13px
}
.rfid-workflow-automation .promptBox {
padding: 18px;
border-radius: 17px
}
.rfid-workflow-automation .prompt {
font-size: 13px;
padding: 13px
}
.rfid-workflow-automation .promptHead {
font-size: 19px
}
.rfid-workflow-automation .promptFoot {
font-size: 10px !important
}
.rfid-workflow-automation .connectedCard {
padding: 22px
}
.rfid-workflow-automation .connectedCard p,
.rfid-workflow-automation .featureCard p,
.rfid-workflow-automation .useCase p {
font-size: 14px
}
.rfid-workflow-automation .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.rfid-workflow-automation .integrations {
grid-template-columns: repeat(2, 1fr)
}
.rfid-workflow-automation .integration:last-child {
grid-column: 1/-1
}
.rfid-workflow-automation .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.rfid-workflow-automation .stream>span[aria-hidden] {
display: none
}
.rfid-workflow-automation .streamStep {
min-height: 24px
}
.rfid-workflow-automation .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.rfid-workflow-automation .ratingItem {
border: 0
}
.rfid-workflow-automation .ratingLead {
margin-bottom: 3px
}
.rfid-workflow-automation .review p {
font-size: 14px
}
.rfid-workflow-automation .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.rfid-workflow-automation .ctaBtns {
width: 100%
}
.rfid-workflow-automation .ctaBtns .btn {
flex: 1
}
.rfid-workflow-automation .cta p {
font-size: 14px
}
.rfid-workflow-automation .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.rfid-workflow-automation .final h2 {
font-size: 32px
}
.rfid-workflow-automation .final p {
font-size: 15px
}
.rfid-workflow-automation .final .ctaBtns {
flex-direction: column
}
.rfid-workflow-automation .final .btn {
min-width: 0;
width: 100%
}
.rfid-workflow-automation .faq details {
padding: 16px
}
.rfid-workflow-automation .faq summary {
font-size: 14px
}
.rfid-workflow-automation .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.rfid-workflow-automation h1 {
font-size: 38px
}
.rfid-workflow-automation h2 {
font-size: 31px
}
.rfid-workflow-automation .heroVisual,
.rfid-workflow-automation .assetStage {
height: 520px;
min-height: 520px
}
.rfid-workflow-automation .assetPhone {
width: 152px;
top: 242px
}
.rfid-workflow-automation .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.rfid-workflow-automation .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.rfid-workflow-automation .lifecycleBody {
padding: 8px;
font-size: 8px
}
.rfid-workflow-automation .lifecycleBody strong {
font-size: 9px
}
.rfid-workflow-automation .boardBrand {
font-size: 11px
}
.rfid-workflow-automation .sampleBadge {
font-size: 8px
}
.rfid-workflow-automation .miniDates,
.rfid-workflow-automation .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.rfid-workflow-automation .miniDates small {
font-size: 6px
}
.rfid-workflow-automation .miniJob b {
font-size: 6.5px
}
.rfid-workflow-automation .boardFooter {
padding-right: 135px;
min-height: 45px
}
.rfid-workflow-automation .mobileLookup {
grid-template-columns: 1fr
}
.rfid-workflow-automation .phoneMock {
width: 200px;
margin: auto
}
.rfid-workflow-automation .lookupSide {
grid-template-columns: 1fr
}
.rfid-workflow-automation .lookupCard {
padding: 13px
}
.rfid-workflow-automation .lookupCard strong {
font-size: 12px
}
.rfid-workflow-automation .lookupCard span {
font-size: 11px
}
.rfid-workflow-automation .plannerHead {
gap: 5px
}
.rfid-workflow-automation .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.rfid-workflow-automation .plannerRow {
grid-template-columns: 61px 1fr
}
.rfid-workflow-automation .uiHeading>span:first-child {
gap: 5px
}
.rfid-workflow-automation .uiHeading .icon2 {
width: 17px;
height: 17px
}
}  .rfid-workflow-automation #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.rfid-workflow-automation #connected-tools.fsmTools *,
.rfid-workflow-automation #connected-tools.fsmTools *::before,
.rfid-workflow-automation #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.rfid-workflow-automation #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.rfid-workflow-automation #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.rfid-workflow-automation #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.rfid-workflow-automation #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.rfid-workflow-automation #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .rfid-workflow-automation #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__step::before,
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.rfid-workflow-automation #connected-tools.fsmTools {
padding: 52px 0;
}
.rfid-workflow-automation #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.rfid-workflow-automation #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.rfid-workflow-automation #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.rfid-workflow-automation #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.rfid-workflow-automation #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card,
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.rfid-workflow-automation #connected-tools.fsmTools h2 {
font-size: 30px;
}
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.rfid-workflow-automation #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}   .rfid-workflow-automation .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.rfid-workflow-automation .assetStage {
position: relative;
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.rfid-workflow-automation .assetStage:before {
content: none
}
.rfid-workflow-automation .workflowHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
.rfid-workflow-automation .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
.rfid-workflow-automation .wfReadout {
padding: 15px
}
.rfid-workflow-automation .wfReadoutHead {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.rfid-workflow-automation .wfGate {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: center;
padding: 18px 3px
}
.rfid-workflow-automation .wfPortalSvg {
display: block;
width: 100%;
height: auto;
max-width: 210px;
margin: auto;
aspect-ratio: 210 / 175
}
.rfid-workflow-automation .wfGateInfo {
display: grid;
gap: 8px;
font-size: 11px
}
.rfid-workflow-automation .wfGateInfo strong {
font-size: 14px;
color: var(--navy)
}
.rfid-workflow-automation .wfGateInfo span {
color: var(--muted);
line-height: 1.5
}
.rfid-workflow-automation .wfGateInfo .pill {
color: #116746;
justify-self: start;
font-size: 10px
}
.rfid-workflow-automation .wfEventRows {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.rfid-workflow-automation .wfEventRow {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
font-size: 11px;
border-bottom: 1px solid var(--line)
}
.rfid-workflow-automation .wfEventRow:last-child {
border: 0
}
.rfid-workflow-automation .wfEventRow time {
font-variant-numeric: tabular-nums;
color: var(--muted);
font-size: 10px
}
.rfid-workflow-automation .wfEventRow strong {
font-size: 11px
}
.rfid-workflow-automation .wfEventRow small {
display: block;
font-size: 9px;
color: var(--muted)
}
.rfid-workflow-automation .wfReaderModes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 13px
}
.rfid-workflow-automation .wfReaderModes span {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 7px;
font-size: 10px;
color: var(--navy)
}
.rfid-workflow-automation .wfReaderModes .icon2 {
width: 15px;
height: 15px
}
.rfid-workflow-automation .wfRuleSteps {
display: grid;
gap: 9px
}
.rfid-workflow-automation .wfRuleStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 12px;
align-items: center;
padding: 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px
}
.rfid-workflow-automation .wfRuleKey {
display: grid;
place-items: center;
min-height: 34px;
background: var(--sky);
border-radius: 7px;
color: var(--navy);
font-size: 10px;
font-weight: 850
}
.rfid-workflow-automation .wfRuleStep strong {
display: block;
font-size: 12px
}
.rfid-workflow-automation .wfRuleStep small {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 10px;
line-height: 1.5
}
.rfid-workflow-automation .wfRuleStep.then .wfRuleKey {
background: var(--greenbg);
color: #116746
}
.rfid-workflow-automation .wfRuleStep.else {
background: #FFFCF0;
border-color: #EDD98C
}
.rfid-workflow-automation .wfRuleStep.else .wfRuleKey {
background: var(--yellowsoft);
color: #745604
}
.rfid-workflow-automation .wfSyncSource {
display: flex;
align-items: center;
gap: 13px;
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.rfid-workflow-automation .wfSyncSource .featureIcon {
margin: 0;
flex: 0 0 42px;
background: var(--sky)
}
.rfid-workflow-automation .wfSyncSource strong {
font-size: 13px;
display: block
}
.rfid-workflow-automation .wfSyncSource small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 4px
}
.rfid-workflow-automation .wfSyncLine {
width: 1px;
height: 24px;
background: #99BFD2;
margin: auto;
position: relative
}
.rfid-workflow-automation .wfSyncLine:after {
content: "";
position: absolute;
bottom: 0;
left: -3px;
width: 7px;
height: 7px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg)
}
.rfid-workflow-automation .wfSyncHub {
background: #0D2535;
color: #fff;
border: 1px solid #294654;
border-radius: 12px;
padding: 16px;
text-align: center
}
.rfid-workflow-automation .wfSyncHub strong {
font-size: 17px;
display: block
}
.rfid-workflow-automation .wfSyncHub small {
font-size: 10px;
display: block;
margin-top: 4px;
color: #CEDBE4
}
.rfid-workflow-automation .wfSyncTargets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
.rfid-workflow-automation .wfSyncTarget {
padding: 15px 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
text-align: center;
font-size: 10px
}
.rfid-workflow-automation .wfSyncTarget .icon2 {
color: var(--navy);
width: 23px;
height: 23px;
margin-bottom: 8px
}
.rfid-workflow-automation .wfSyncTarget strong {
display: block;
font-size: 12px
}
.rfid-workflow-automation .wfSyncTarget small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px
}
.rfid-workflow-automation .wfSyncNote {
font-size: 10px;
color: var(--muted);
line-height: 1.5;
text-align: center;
margin-top: 12px
}
.rfid-workflow-automation .wfVerifyStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 13px
}
.rfid-workflow-automation .wfVerifyStat {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 13px 10px;
text-align: center
}
.rfid-workflow-automation .wfVerifyStat strong {
font-size: 25px;
font-weight: 850;
line-height: 1.2;
display: block;
color: var(--navy)
}
.rfid-workflow-automation .wfVerifyStat span {
font-size: 10px;
color: var(--muted)
}
.rfid-workflow-automation .wfVerifyStat.alert {
background: #FFF7D6;
border-color: #EDD98C
}
.rfid-workflow-automation .wfVerifyStat.alert strong {
color: #745604
}
.rfid-workflow-automation .wfAudit {
padding: 14px 15px
}
.rfid-workflow-automation .wfAuditItem {
display: grid;
grid-template-columns: 46px 1fr;
gap: 13px;
padding: 0 0 16px;
position: relative;
font-size: 11px
}
.rfid-workflow-automation .wfAuditItem:last-child {
padding-bottom: 0
}
.rfid-workflow-automation .wfAuditItem time {
font-size: 10px;
color: var(--muted);
padding-top: 1px;
font-variant-numeric: tabular-nums
}
.rfid-workflow-automation .wfAuditItem strong {
font-size: 12px;
display: block
}
.rfid-workflow-automation .wfAuditItem small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
line-height: 1.5
}
.rfid-workflow-automation .wfAuditItem .pill {
margin-top: 6px
}
.rfid-workflow-automation .wfFooterNote {
padding: 10px 13px;
border-top: 1px solid var(--line);
background: var(--sky2);
font-size: 10px;
line-height: 1.5;
color: var(--muted)
}
.rfid-workflow-automation .wfFooterNote strong {
color: var(--navy)
}
.rfid-workflow-automation .wfCheckList {
padding: 0;
margin: 0;
list-style: none
}
.rfid-workflow-automation .wfCheckList li {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.55
}
.rfid-workflow-automation .wfCheckList li:before {
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
background: var(--brand);
border-radius: 50%;
margin-top: 6px
}
.rfid-workflow-automation .wfScopeNote {
font-size: 12px;
line-height: 1.7;
margin-top: 18px;
color: var(--muted)
}
.rfid-workflow-automation .wfScopeNote a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.rfid-workflow-automation .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
.rfid-workflow-automation .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
.rfid-workflow-automation .heroVisual {
max-width: 480px
}
.rfid-workflow-automation .wfReadout {
padding: 12px
}
.rfid-workflow-automation .wfReadoutHead {
font-size: 11px;
gap: 8px;
flex-wrap: wrap
}
.rfid-workflow-automation .wfGate {
gap: 10px;
padding: 16px 0;
grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr)
}
.rfid-workflow-automation .wfGateInfo strong {
font-size: 12px
}
.rfid-workflow-automation .wfGateInfo span {
font-size: 10px
}
.rfid-workflow-automation .wfEventRow {
grid-template-columns: 38px minmax(0, 1fr) auto;
padding: 9px 8px;
gap: 6px
}
.rfid-workflow-automation .wfEventRow .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-workflow-automation .wfRuleStep {
gap: 9px;
padding: 11px;
grid-template-columns: 42px minmax(0, 1fr)
}
.rfid-workflow-automation .wfRuleStep strong {
font-size: 11px
}
.rfid-workflow-automation .wfSyncSource {
padding: 13px;
gap: 10px
}
.rfid-workflow-automation .wfSyncTargets {
gap: 6px
}
.rfid-workflow-automation .wfSyncTarget {
padding: 12px 5px
}
.rfid-workflow-automation .wfSyncTarget strong {
font-size: 11px
}
.rfid-workflow-automation .wfScopeNote {
font-size: 12px
}
}
@media(max-width:360px) {
.rfid-workflow-automation .wfEventRow {
grid-template-columns: 34px minmax(0, 1fr)
}
.rfid-workflow-automation .wfEventRow .pill {
grid-column: 2;
justify-self: start
}
.rfid-workflow-automation .wfGate {
grid-template-columns: 1fr
}
.rfid-workflow-automation .wfGateInfo {
grid-template-columns: 1fr 1fr;
gap: 6px 12px
}
.rfid-workflow-automation .wfGateInfo>strong {
grid-column: 1/-1
}
.rfid-workflow-automation .wfGateInfo .pill {
grid-column: 1/-1
}
.rfid-workflow-automation .wfSyncTargets {
grid-template-columns: 1fr
}
.rfid-workflow-automation .wfSyncTarget {
display: grid;
grid-template-columns: 25px 1fr;
gap: 3px 10px;
text-align: left;
padding: 11px
}
.rfid-workflow-automation .wfSyncTarget .icon2 {
grid-row: 1 / 3;
margin: 3px 0 0
}
.rfid-workflow-automation .wfSyncTarget small {
margin-top: 0
}
}  .rfid-readers-and-scanners .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.rfid-readers-and-scanners .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.rfid-readers-and-scanners .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.rfid-readers-and-scanners .btn:hover {
transform: translateY(-2px)
}
.rfid-readers-and-scanners .btn.black {
background: #0b0b0b;
color: #fff
}
.rfid-readers-and-scanners .btn.black:hover {
background: #292929
}
.rfid-readers-and-scanners .btn.yellow {
background: var(--yellow);
color: #000
}
.rfid-readers-and-scanners .btn.yellow:hover {
background: #FFD454
}
.rfid-readers-and-scanners .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.rfid-readers-and-scanners .btn .icon {
width: 17px;
height: 17px
}
.rfid-readers-and-scanners a:focus-visible,
.rfid-readers-and-scanners summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.rfid-readers-and-scanners .dark a:focus-visible,
.rfid-readers-and-scanners .final a:focus-visible {
outline-color: var(--yellow)
}
.rfid-readers-and-scanners .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.rfid-readers-and-scanners .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.rfid-readers-and-scanners .soft {
background: var(--sky2)
}
.rfid-readers-and-scanners .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.rfid-readers-and-scanners .dark h2,
.rfid-readers-and-scanners .dark h3 {
color: #fff
}
.rfid-readers-and-scanners .dark p {
color: #D6D6D6
}
.rfid-readers-and-scanners .dark .ey {
background: var(--yellow)
}
.rfid-readers-and-scanners .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.rfid-readers-and-scanners .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.rfid-readers-and-scanners .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.rfid-readers-and-scanners .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.rfid-readers-and-scanners .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.rfid-readers-and-scanners .textLink .icon {
width: 16px;
height: 16px
}
.rfid-readers-and-scanners .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.rfid-readers-and-scanners .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.rfid-readers-and-scanners .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.rfid-readers-and-scanners .skipLink:focus {
top: 12px
} .rfid-readers-and-scanners .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.rfid-readers-and-scanners .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.rfid-readers-and-scanners .heroGrid>*,
.rfid-readers-and-scanners .feature>*,
.rfid-readers-and-scanners .aiGrid>* {
min-width: 0
}
.rfid-readers-and-scanners .hero h1 {
max-width: 580px
}
.rfid-readers-and-scanners .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.rfid-readers-and-scanners .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.rfid-readers-and-scanners .heroVisual {
min-height: 555px;
position: relative
}
.rfid-readers-and-scanners .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.rfid-readers-and-scanners .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.rfid-readers-and-scanners .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.rfid-readers-and-scanners .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.rfid-readers-and-scanners .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.rfid-readers-and-scanners .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.rfid-readers-and-scanners .brandTile .icon {
width: 17px;
height: 17px
}
.rfid-readers-and-scanners .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.rfid-readers-and-scanners .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.rfid-readers-and-scanners .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.rfid-readers-and-scanners .viewPills span {
padding: 4px 7px
}
.rfid-readers-and-scanners .viewPills .active {
background: var(--navy);
color: #fff
}
.rfid-readers-and-scanners .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.rfid-readers-and-scanners .miniDates,
.rfid-readers-and-scanners .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.rfid-readers-and-scanners .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.rfid-readers-and-scanners .miniDates>div:last-child {
border: 0
}
.rfid-readers-and-scanners .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.rfid-readers-and-scanners .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.rfid-readers-and-scanners .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.rfid-readers-and-scanners .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.rfid-readers-and-scanners .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.rfid-readers-and-scanners .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.rfid-readers-and-scanners .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.rfid-readers-and-scanners .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.rfid-readers-and-scanners .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.rfid-readers-and-scanners .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.rfid-readers-and-scanners .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.rfid-readers-and-scanners .boardFooter strong {
color: var(--navy)
}
.rfid-readers-and-scanners .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.rfid-readers-and-scanners .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.rfid-readers-and-scanners .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.rfid-readers-and-scanners .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.rfid-readers-and-scanners .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.rfid-readers-and-scanners .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.rfid-readers-and-scanners .phoneHead small {
font-size: 9px;
color: #50697A
}
.rfid-readers-and-scanners .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.rfid-readers-and-scanners .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.rfid-readers-and-scanners .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.rfid-readers-and-scanners .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.rfid-readers-and-scanners .phoneJob.current {
background: var(--sky2)
}
.rfid-readers-and-scanners .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.rfid-readers-and-scanners .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.rfid-readers-and-scanners .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.rfid-readers-and-scanners .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.rfid-readers-and-scanners .lifecycleHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.rfid-readers-and-scanners .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.rfid-readers-and-scanners .lifecycleBody strong {
font-size: 12px
}
.rfid-readers-and-scanners .lifecycleBody span {
color: #CEDBE4
}
.rfid-readers-and-scanners .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.rfid-readers-and-scanners .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .rfid-readers-and-scanners .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.rfid-readers-and-scanners .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.rfid-readers-and-scanners .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.rfid-readers-and-scanners .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.rfid-readers-and-scanners .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.rfid-readers-and-scanners .logo.adobe {
font-size: 20px
}
.rfid-readers-and-scanners .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .rfid-readers-and-scanners .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.rfid-readers-and-scanners .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.rfid-readers-and-scanners .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.rfid-readers-and-scanners .outcome:nth-child(2):before {
background: var(--yellow)
}
.rfid-readers-and-scanners .outcome:nth-child(3):before {
background: var(--green)
}
.rfid-readers-and-scanners .outcome:nth-child(4):before {
background: var(--purple)
}
.rfid-readers-and-scanners .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.rfid-readers-and-scanners .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.rfid-readers-and-scanners .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .rfid-readers-and-scanners .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.rfid-readers-and-scanners .feature.reverse .visual {
order: -1
}
.rfid-readers-and-scanners .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.rfid-readers-and-scanners .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.rfid-readers-and-scanners .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.rfid-readers-and-scanners .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.rfid-readers-and-scanners .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.rfid-readers-and-scanners .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.rfid-readers-and-scanners .visual>* {
position: relative;
z-index: 2
}
.rfid-readers-and-scanners .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.rfid-readers-and-scanners .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.rfid-readers-and-scanners .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.rfid-readers-and-scanners .uiHeading .icon {
width: 19px;
height: 19px
}
.rfid-readers-and-scanners .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.rfid-readers-and-scanners .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.rfid-readers-and-scanners .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.rfid-readers-and-scanners .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.rfid-readers-and-scanners .pill.green {
background: var(--greenbg);
color: #116746
}
.rfid-readers-and-scanners .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.rfid-readers-and-scanners .pill.gray {
background: #F0F3F5;
color: #586C79
}
.rfid-readers-and-scanners .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .rfid-readers-and-scanners .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.rfid-readers-and-scanners .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.rfid-readers-and-scanners .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.rfid-readers-and-scanners .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.rfid-readers-and-scanners .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.rfid-readers-and-scanners .plannerRow:last-child {
border-bottom: 0
}
.rfid-readers-and-scanners .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.rfid-readers-and-scanners .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.rfid-readers-and-scanners .avatar.green {
background: var(--greenbg);
color: #116746
}
.rfid-readers-and-scanners .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.rfid-readers-and-scanners .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.rfid-readers-and-scanners .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.rfid-readers-and-scanners .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.rfid-readers-and-scanners .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.rfid-readers-and-scanners .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.rfid-readers-and-scanners .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.rfid-readers-and-scanners .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.rfid-readers-and-scanners .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.rfid-readers-and-scanners .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.rfid-readers-and-scanners .pending .icon {
width: 18px;
height: 18px;
color: var(--navy)
}
.rfid-readers-and-scanners .pending strong {
font-size: 11px;
color: var(--navy)
}
.rfid-readers-and-scanners .pending .pill {
margin-left: auto
}
.rfid-readers-and-scanners .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.rfid-readers-and-scanners .legend span {
display: flex;
align-items: center;
gap: 4px
}
.rfid-readers-and-scanners .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.rfid-readers-and-scanners .legend .green i {
background: var(--green)
}
.rfid-readers-and-scanners .legend .yellow i {
background: #D7A200
} .rfid-readers-and-scanners .roster {
display: grid;
gap: 10px
}
.rfid-readers-and-scanners .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.rfid-readers-and-scanners .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.rfid-readers-and-scanners .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.rfid-readers-and-scanners .rosterName {
flex: 1;
min-width: 0
}
.rfid-readers-and-scanners .rosterName strong {
display: block;
font-size: 11px
}
.rfid-readers-and-scanners .rosterName small {
color: var(--muted);
font-size: 9px
}
.rfid-readers-and-scanners .rosterTop .pill {
font-size: 8px
}
.rfid-readers-and-scanners .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.rfid-readers-and-scanners .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.rfid-readers-and-scanners .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.rfid-readers-and-scanners .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.rfid-readers-and-scanners .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.rfid-readers-and-scanners .rosterNote .icon {
width: 19px;
height: 19px
}
.rfid-readers-and-scanners .rosterNote strong {
display: block;
margin-bottom: 3px
} .rfid-readers-and-scanners .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.rfid-readers-and-scanners .ruleCard .uiLabel {
color: #9CBED1
}
.rfid-readers-and-scanners .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.rfid-readers-and-scanners .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.rfid-readers-and-scanners .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.rfid-readers-and-scanners .workCards {
display: grid;
gap: 9px
}
.rfid-readers-and-scanners .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.rfid-readers-and-scanners .workCard strong {
display: block;
font-size: 11px
}
.rfid-readers-and-scanners .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.rfid-readers-and-scanners .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.rfid-readers-and-scanners .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.rfid-readers-and-scanners .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.rfid-readers-and-scanners .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.rfid-readers-and-scanners .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.rfid-readers-and-scanners .modeRow .icon {
width: 14px;
height: 14px
} .rfid-readers-and-scanners .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.rfid-readers-and-scanners .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.rfid-readers-and-scanners .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.rfid-readers-and-scanners .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.rfid-readers-and-scanners .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.rfid-readers-and-scanners .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.rfid-readers-and-scanners .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.rfid-readers-and-scanners .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.rfid-readers-and-scanners .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.rfid-readers-and-scanners .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.rfid-readers-and-scanners .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.rfid-readers-and-scanners .lookupSide {
display: grid;
gap: 11px
}
.rfid-readers-and-scanners .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.rfid-readers-and-scanners .lookupCard .icon {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.rfid-readers-and-scanners .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.rfid-readers-and-scanners .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.rfid-readers-and-scanners .lookupCard.done {
border-left: 3px solid var(--green)
} .rfid-readers-and-scanners .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.rfid-readers-and-scanners .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.rfid-readers-and-scanners .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.rfid-readers-and-scanners .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.rfid-readers-and-scanners .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.rfid-readers-and-scanners .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.rfid-readers-and-scanners .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.rfid-readers-and-scanners .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.rfid-readers-and-scanners .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.rfid-readers-and-scanners .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .rfid-readers-and-scanners .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.rfid-readers-and-scanners .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.rfid-readers-and-scanners .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.rfid-readers-and-scanners .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.rfid-readers-and-scanners .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.rfid-readers-and-scanners .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.rfid-readers-and-scanners .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .rfid-readers-and-scanners .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.rfid-readers-and-scanners .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.rfid-readers-and-scanners .featureCard:hover {
transform: translateY(-3px)
}
.rfid-readers-and-scanners .featureIcon,
.rfid-readers-and-scanners .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.rfid-readers-and-scanners .featureIcon .icon,
.rfid-readers-and-scanners .useIcon .icon {
width: 22px;
height: 22px
}
.rfid-readers-and-scanners .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.rfid-readers-and-scanners .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .rfid-readers-and-scanners .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.rfid-readers-and-scanners .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.rfid-readers-and-scanners .integration .icon {
width: 21px;
height: 21px;
color: var(--navy)
}
.rfid-readers-and-scanners .integration:hover {
background: var(--sky2)
}
.rfid-readers-and-scanners .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.rfid-readers-and-scanners .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.rfid-readers-and-scanners .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.rfid-readers-and-scanners .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.rfid-readers-and-scanners .stream .icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
.rfid-readers-and-scanners .stream>span[aria-hidden] {
color: #86B2C9
} .rfid-readers-and-scanners .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.rfid-readers-and-scanners .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.rfid-readers-and-scanners .useCase h3 {
font-size: 20px
}
.rfid-readers-and-scanners .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.rfid-readers-and-scanners .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.rfid-readers-and-scanners .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.rfid-readers-and-scanners .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.rfid-readers-and-scanners .review h3 {
font-size: 22px
}
.rfid-readers-and-scanners .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.rfid-readers-and-scanners .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.rfid-readers-and-scanners .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.rfid-readers-and-scanners .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.rfid-readers-and-scanners .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.rfid-readers-and-scanners .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.rfid-readers-and-scanners .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.rfid-readers-and-scanners .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.rfid-readers-and-scanners .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .rfid-readers-and-scanners .faq {
max-width: 900px
}
.rfid-readers-and-scanners .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.rfid-readers-and-scanners .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.rfid-readers-and-scanners .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.rfid-readers-and-scanners .faq summary::marker {
color: var(--navy)
}
.rfid-readers-and-scanners .faq details[open] {
border-color: #A9D3E7
}
.rfid-readers-and-scanners .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .rfid-readers-and-scanners .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.rfid-readers-and-scanners .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.rfid-readers-and-scanners .cta h3 {
font-size: 19px
}
.rfid-readers-and-scanners .cta.darkCta h3 {
color: #fff
}
.rfid-readers-and-scanners .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.rfid-readers-and-scanners .cta.darkCta p {
color: #D1D1D1
}
.rfid-readers-and-scanners .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.rfid-readers-and-scanners .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.rfid-readers-and-scanners .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.rfid-readers-and-scanners .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.rfid-readers-and-scanners .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.rfid-readers-and-scanners .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.rfid-readers-and-scanners .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.rfid-readers-and-scanners .heroGrid {
gap: 28px
}
.rfid-readers-and-scanners h1 {
font-size: 56px
}
.rfid-readers-and-scanners .hero .lead {
font-size: 17px
}
.rfid-readers-and-scanners .assetPhone {
width: 168px;
top: 235px
}
.rfid-readers-and-scanners .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.rfid-readers-and-scanners .scheduleBoard {
width: 96%;
left: 0
}
.rfid-readers-and-scanners .miniJob {
padding: 4px
}
.rfid-readers-and-scanners .heroVisual,
.rfid-readers-and-scanners .assetStage {
min-height: 555px
}
.rfid-readers-and-scanners .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.rfid-readers-and-scanners .visual {
padding: 17px
}
.rfid-readers-and-scanners .plannerTicks,
.rfid-readers-and-scanners .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.rfid-readers-and-scanners .plannerRow {
grid-template-columns: 75px 1fr
}
.rfid-readers-and-scanners .person {
font-size: 9px;
padding: 10px 5px
}
.rfid-readers-and-scanners .person .avatar {
display: none
}
}
@media(max-width:960px) {
.rfid-readers-and-scanners .heroGrid,
.rfid-readers-and-scanners .feature,
.rfid-readers-and-scanners .aiGrid,
.rfid-readers-and-scanners .final {
grid-template-columns: 1fr
}
.rfid-readers-and-scanners .heroGrid {
gap: 36px
}
.rfid-readers-and-scanners .hero h1 {
max-width: 760px
}
.rfid-readers-and-scanners .hero .lead {
max-width: 750px
}
.rfid-readers-and-scanners .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.rfid-readers-and-scanners .assetStage {
margin: auto
}
.rfid-readers-and-scanners .feature.reverse .visual {
order: 0
}
.rfid-readers-and-scanners .feature {
gap: 30px
}
.rfid-readers-and-scanners .feature>div:first-child {
max-width: 800px
}
.rfid-readers-and-scanners .outcomes,
.rfid-readers-and-scanners .featureGrid,
.rfid-readers-and-scanners .connectedGrid,
.rfid-readers-and-scanners .useCases {
grid-template-columns: repeat(2, 1fr)
}
.rfid-readers-and-scanners .logos {
grid-template-columns: repeat(3, 1fr)
}
.rfid-readers-and-scanners .integrations {
grid-template-columns: repeat(3, 1fr)
}
.rfid-readers-and-scanners .reviews {
grid-template-columns: 1fr
}
.rfid-readers-and-scanners .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.rfid-readers-and-scanners .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.rfid-readers-and-scanners .ratingItem:nth-child(2) {
border: 0
}
.rfid-readers-and-scanners .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.rfid-readers-and-scanners .final .btn {
min-width: 195px
}
.rfid-readers-and-scanners .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.rfid-readers-and-scanners .aiGrid {
gap: 30px
}
.rfid-readers-and-scanners .aiMini {
max-width: 760px
}
.rfid-readers-and-scanners .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.rfid-readers-and-scanners .wrap {
width: calc(100% - 24px)
}
.rfid-readers-and-scanners .wrap.feature>div {
order: 2;
}
.rfid-readers-and-scanners section {
padding: 56px 0
}
.rfid-readers-and-scanners .hero {
padding: 32px 0 42px
}
.rfid-readers-and-scanners h1 {
font-size: 42px
}
.rfid-readers-and-scanners h2 {
font-size: 34px
}
.rfid-readers-and-scanners .lead {
font-size: 17px
}
.rfid-readers-and-scanners .sectionHead p {
font-size: 16px
}
.rfid-readers-and-scanners .sectionHead {
margin-bottom: 28px
}
.rfid-readers-and-scanners .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.rfid-readers-and-scanners .heroGrid {
gap: 24px
}
.rfid-readers-and-scanners .hero .actions {
gap: 8px
}
.rfid-readers-and-scanners .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.rfid-readers-and-scanners .micro {
font-size: 11px
}
.rfid-readers-and-scanners .heroPills {
gap: 6px
}
.rfid-readers-and-scanners .heroPills span {
font-size: 9px
}
.rfid-readers-and-scanners .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.rfid-readers-and-scanners .heroVisual {
min-height: 525px
}
.rfid-readers-and-scanners .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.rfid-readers-and-scanners .assetStage:before {
inset: 38px 0 28px 10px
}
.rfid-readers-and-scanners .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.rfid-readers-and-scanners .boardHeader {
padding: 12px
}
.rfid-readers-and-scanners .boardBrand {
font-size: 12px
}
.rfid-readers-and-scanners .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.rfid-readers-and-scanners .miniCalendar {
margin: 0 10px 12px
}
.rfid-readers-and-scanners .miniDates,
.rfid-readers-and-scanners .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.rfid-readers-and-scanners .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.rfid-readers-and-scanners .miniPerson small {
font-size: 7px
}
.rfid-readers-and-scanners .miniCell {
padding: 4px 3px
}
.rfid-readers-and-scanners .miniDates>div {
font-size: 8px
}
.rfid-readers-and-scanners .miniDates small {
font-size: 7px
}
.rfid-readers-and-scanners .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.rfid-readers-and-scanners .miniJob b {
font-size: 7px
}
.rfid-readers-and-scanners .miniRow {
min-height: 57px
}
.rfid-readers-and-scanners .miniJob {
min-height: 48px
}
.rfid-readers-and-scanners .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.rfid-readers-and-scanners .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.rfid-readers-and-scanners .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.rfid-readers-and-scanners .phoneHead strong {
font-size: 11px
}
.rfid-readers-and-scanners .phoneHead small {
font-size: 8px
}
.rfid-readers-and-scanners .phoneAgenda {
padding: 8px;
gap: 6px
}
.rfid-readers-and-scanners .phoneJob {
padding: 7px;
font-size: 8px
}
.rfid-readers-and-scanners .phoneJob strong {
font-size: 9px
}
.rfid-readers-and-scanners .phoneJob small {
font-size: 7px
}
.rfid-readers-and-scanners .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.rfid-readers-and-scanners .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.rfid-readers-and-scanners .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.rfid-readers-and-scanners .lifecycleHead .icon {
width: 15px;
height: 15px
}
.rfid-readers-and-scanners .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.rfid-readers-and-scanners .lifecycleBody strong {
font-size: 10px
}
.rfid-readers-and-scanners .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.rfid-readers-and-scanners .diagramCaption {
font-size: 9px
}
.rfid-readers-and-scanners .trust {
padding: 23px 0
}
.rfid-readers-and-scanners .trustLabel {
font-size: 12px
}
.rfid-readers-and-scanners .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.rfid-readers-and-scanners .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.rfid-readers-and-scanners .logo.dhl {
font-size: 19px
}
.rfid-readers-and-scanners .logo.adobe {
font-size: 17px
}
.rfid-readers-and-scanners .logo.golden {
font-size: 8px
}
.rfid-readers-and-scanners .fl,
.rfid-readers-and-scanners .outcomes,
.rfid-readers-and-scanners .featureGrid,
.rfid-readers-and-scanners .connectedGrid,
.rfid-readers-and-scanners .useCases {
grid-template-columns: 1fr
}
.rfid-readers-and-scanners .fi {
font-size: 14px
}
.rfid-readers-and-scanners .outcome {
padding: 21px
}
.rfid-readers-and-scanners .outcome strong {
margin-top: 12px
}
.rfid-readers-and-scanners .outcome span {
font-size: 14px
}
.rfid-readers-and-scanners .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.rfid-readers-and-scanners .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.rfid-readers-and-scanners .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-readers-and-scanners .uiSub {
font-size: 9px
}
.rfid-readers-and-scanners .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.rfid-readers-and-scanners .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.rfid-readers-and-scanners .person {
font-size: 9px;
padding: 8px 6px
}
.rfid-readers-and-scanners .person .avatar {
display: none
}
.rfid-readers-and-scanners .person small {
font-size: 8px
}
.rfid-readers-and-scanners .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.rfid-readers-and-scanners .slot strong {
font-size: 8px
}
.rfid-readers-and-scanners .plannerHead {
font-size: 10px;
padding: 10px
}
.rfid-readers-and-scanners .plannerHead .pill {
font-size: 8px
}
.rfid-readers-and-scanners .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.rfid-readers-and-scanners .pending strong {
font-size: 10px
}
.rfid-readers-and-scanners .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-readers-and-scanners .rosterTop .pill {
font-size: 8px
}
.rfid-readers-and-scanners .rosterCard {
padding: 11px
}
.rfid-readers-and-scanners .rosterNote {
padding: 11px;
font-size: 10px
}
.rfid-readers-and-scanners .ruleCard {
padding: 14px
}
.rfid-readers-and-scanners .ruleCard strong {
font-size: 15px
}
.rfid-readers-and-scanners .workCard {
padding: 10px;
gap: 8px
}
.rfid-readers-and-scanners .workCard strong {
font-size: 10px
}
.rfid-readers-and-scanners .workCard small {
font-size: 8px
}
.rfid-readers-and-scanners .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-readers-and-scanners .modeRow span {
font-size: 8px;
padding: 7px
}
.rfid-readers-and-scanners .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.rfid-readers-and-scanners .phoneMockInner {
padding: 11px;
min-height: 288px
}
.rfid-readers-and-scanners .lookupCard {
padding: 10px
}
.rfid-readers-and-scanners .lookupCard strong {
font-size: 10px
}
.rfid-readers-and-scanners .lookupCard span {
font-size: 9px
}
.rfid-readers-and-scanners .lookupCard .icon {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.rfid-readers-and-scanners .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.rfid-readers-and-scanners .aiMini div {
padding: 16px
}
.rfid-readers-and-scanners .aiMini strong {
font-size: 14px
}
.rfid-readers-and-scanners .aiMini span {
font-size: 13px
}
.rfid-readers-and-scanners .promptBox {
padding: 18px;
border-radius: 17px
}
.rfid-readers-and-scanners .prompt {
font-size: 13px;
padding: 13px
}
.rfid-readers-and-scanners .promptHead {
font-size: 19px
}
.rfid-readers-and-scanners .promptFoot {
font-size: 10px !important
}
.rfid-readers-and-scanners .connectedCard {
padding: 22px
}
.rfid-readers-and-scanners .connectedCard p,
.rfid-readers-and-scanners .featureCard p,
.rfid-readers-and-scanners .useCase p {
font-size: 14px
}
.rfid-readers-and-scanners .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.rfid-readers-and-scanners .integrations {
grid-template-columns: repeat(2, 1fr)
}
.rfid-readers-and-scanners .integration:last-child {
grid-column: 1/-1
}
.rfid-readers-and-scanners .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.rfid-readers-and-scanners .stream>span[aria-hidden] {
display: none
}
.rfid-readers-and-scanners .streamStep {
min-height: 24px
}
.rfid-readers-and-scanners .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.rfid-readers-and-scanners .ratingItem {
border: 0
}
.rfid-readers-and-scanners .ratingLead {
margin-bottom: 3px
}
.rfid-readers-and-scanners .review p {
font-size: 14px
}
.rfid-readers-and-scanners .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.rfid-readers-and-scanners .ctaBtns {
width: 100%
}
.rfid-readers-and-scanners .ctaBtns .btn {
flex: 1
}
.rfid-readers-and-scanners .cta p {
font-size: 14px
}
.rfid-readers-and-scanners .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.rfid-readers-and-scanners .final h2 {
font-size: 32px
}
.rfid-readers-and-scanners .final p {
font-size: 15px
}
.rfid-readers-and-scanners .final .ctaBtns {
flex-direction: column
}
.rfid-readers-and-scanners .final .btn {
min-width: 0;
width: 100%
}
.rfid-readers-and-scanners .faq details {
padding: 16px
}
.rfid-readers-and-scanners .faq summary {
font-size: 14px
}
.rfid-readers-and-scanners .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
h1 {
font-size: 38px
}
.rfid-readers-and-scanners h2 {
font-size: 31px
}
.rfid-readers-and-scanners .heroVisual,
.rfid-readers-and-scanners .assetStage {
height: 520px;
min-height: 520px
}
.rfid-readers-and-scanners .assetPhone {
width: 152px;
top: 242px
}
.rfid-readers-and-scanners .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.rfid-readers-and-scanners .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.rfid-readers-and-scanners .lifecycleBody {
padding: 8px;
font-size: 8px
}
.rfid-readers-and-scanners .lifecycleBody strong {
font-size: 9px
}
.rfid-readers-and-scanners .boardBrand {
font-size: 11px
}
.rfid-readers-and-scanners .sampleBadge {
font-size: 8px
}
.rfid-readers-and-scanners .miniDates,
.rfid-readers-and-scanners .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.rfid-readers-and-scanners .miniDates small {
font-size: 6px
}
.rfid-readers-and-scanners .miniJob b {
font-size: 6.5px
}
.rfid-readers-and-scanners .boardFooter {
padding-right: 135px;
min-height: 45px
}
.rfid-readers-and-scanners .mobileLookup {
grid-template-columns: 1fr
}
.rfid-readers-and-scanners .phoneMock {
width: 200px;
margin: auto
}
.rfid-readers-and-scanners .lookupSide {
grid-template-columns: 1fr
}
.rfid-readers-and-scanners .lookupCard {
padding: 13px
}
.rfid-readers-and-scanners .lookupCard strong {
font-size: 12px
}
.rfid-readers-and-scanners .lookupCard span {
font-size: 11px
}
.rfid-readers-and-scanners .plannerHead {
gap: 5px
}
.rfid-readers-and-scanners .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.rfid-readers-and-scanners .plannerRow {
grid-template-columns: 61px 1fr
}
.rfid-readers-and-scanners .uiHeading>span:first-child {
gap: 5px
}
.rfid-readers-and-scanners .uiHeading .icon {
width: 17px;
height: 17px
}
}  .rfid-readers-and-scanners #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.rfid-readers-and-scanners #connected-tools.fsmTools *,
.rfid-readers-and-scanners #connected-tools.fsmTools *::before,
.rfid-readers-and-scanners #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.rfid-readers-and-scanners #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.rfid-readers-and-scanners #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__step::before,
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
.rfid-readers-and-scanners #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.rfid-readers-and-scanners #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card,
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
.rfid-readers-and-scanners #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}   .rfid-readers-and-scanners .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.rfid-readers-and-scanners .assetStage {
position: relative;
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.rfid-readers-and-scanners .assetStage:before {
content: none
}
.rfid-readers-and-scanners .readersHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
.rfid-readers-and-scanners .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
.rfid-readers-and-scanners .wfReadout {
padding: 15px
}
.rfid-readers-and-scanners .wfReadoutHead {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.rfid-readers-and-scanners .wfGate {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: center;
padding: 18px 3px
}
.rfid-readers-and-scanners .wfPortalSvg {
display: block;
width: 100%;
height: auto;
max-width: 210px;
margin: auto;
aspect-ratio: 210 / 175
}
.rfid-readers-and-scanners .wfGateInfo {
display: grid;
gap: 8px;
font-size: 11px
}
.rfid-readers-and-scanners .wfGateInfo strong {
font-size: 14px;
color: var(--navy)
}
.rfid-readers-and-scanners .wfGateInfo span {
color: var(--muted);
line-height: 1.5
}
.rfid-readers-and-scanners .wfGateInfo .pill {
color: #116746;
justify-self: start;
font-size: 10px
}
.rfid-readers-and-scanners .wfEventRows {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.rfid-readers-and-scanners .wfEventRow {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
font-size: 11px;
border-bottom: 1px solid var(--line)
}
.rfid-readers-and-scanners .wfEventRow:last-child {
border: 0
}
.rfid-readers-and-scanners .wfEventRow time {
font-variant-numeric: tabular-nums;
color: var(--muted);
font-size: 10px
}
.rfid-readers-and-scanners .wfEventRow strong {
font-size: 11px
}
.rfid-readers-and-scanners .wfEventRow small {
display: block;
font-size: 9px;
color: var(--muted)
}
.rfid-readers-and-scanners .wfReaderModes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 13px
}
.rfid-readers-and-scanners .wfReaderModes span {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 7px;
font-size: 10px;
color: var(--navy)
}
.rfid-readers-and-scanners .wfReaderModes .icon {
width: 15px;
height: 15px
}
.rfid-readers-and-scanners .wfRuleSteps {
display: grid;
gap: 9px
}
.rfid-readers-and-scanners .wfRuleStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 12px;
align-items: center;
padding: 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px
}
.rfid-readers-and-scanners .wfRuleKey {
display: grid;
place-items: center;
min-height: 34px;
background: var(--sky);
border-radius: 7px;
color: var(--navy);
font-size: 10px;
font-weight: 850
}
.rfid-readers-and-scanners .wfRuleStep strong {
display: block;
font-size: 12px
}
.rfid-readers-and-scanners .wfRuleStep small {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 10px;
line-height: 1.5
}
.rfid-readers-and-scanners .wfRuleStep.then .wfRuleKey {
background: var(--greenbg);
color: #116746
}
.rfid-readers-and-scanners .wfRuleStep.else {
background: #FFFCF0;
border-color: #EDD98C
}
.rfid-readers-and-scanners .wfRuleStep.else .wfRuleKey {
background: var(--yellowsoft);
color: #745604
}
.rfid-readers-and-scanners .wfSyncSource {
display: flex;
align-items: center;
gap: 13px;
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.rfid-readers-and-scanners .wfSyncSource .featureIcon {
margin: 0;
flex: 0 0 42px;
background: var(--sky)
}
.rfid-readers-and-scanners .wfSyncSource strong {
font-size: 13px;
display: block
}
.rfid-readers-and-scanners .wfSyncSource small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 4px
}
.rfid-readers-and-scanners .wfSyncLine {
width: 1px;
height: 24px;
background: #99BFD2;
margin: auto;
position: relative
}
.rfid-readers-and-scanners .wfSyncLine:after {
content: "";
position: absolute;
bottom: 0;
left: -3px;
width: 7px;
height: 7px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg)
}
.rfid-readers-and-scanners .wfSyncHub {
background: #0D2535;
color: #fff;
border: 1px solid #294654;
border-radius: 12px;
padding: 16px;
text-align: center
}
.rfid-readers-and-scanners .wfSyncHub strong {
font-size: 17px;
display: block
}
.rfid-readers-and-scanners .wfSyncHub small {
font-size: 10px;
display: block;
margin-top: 4px;
color: #CEDBE4
}
.rfid-readers-and-scanners .wfSyncTargets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
.rfid-readers-and-scanners .wfSyncTarget {
padding: 15px 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
text-align: center;
font-size: 10px
}
.rfid-readers-and-scanners .wfSyncTarget .icon {
color: var(--navy);
width: 23px;
height: 23px;
margin-bottom: 8px
}
.rfid-readers-and-scanners .wfSyncTarget strong {
display: block;
font-size: 12px
}
.rfid-readers-and-scanners .wfSyncTarget small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px
}
.rfid-readers-and-scanners .wfSyncNote {
font-size: 10px;
color: var(--muted);
line-height: 1.5;
text-align: center;
margin-top: 12px
}
.rfid-readers-and-scanners .wfVerifyStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 13px
}
.rfid-readers-and-scanners .wfVerifyStat {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 13px 10px;
text-align: center
}
.rfid-readers-and-scanners .wfVerifyStat strong {
font-size: 25px;
font-weight: 850;
line-height: 1.2;
display: block;
color: var(--navy)
}
.rfid-readers-and-scanners .wfVerifyStat span {
font-size: 10px;
color: var(--muted)
}
.rfid-readers-and-scanners .wfVerifyStat.alert {
background: #FFF7D6;
border-color: #EDD98C
}
.rfid-readers-and-scanners .wfVerifyStat.alert strong {
color: #745604
}
.rfid-readers-and-scanners .wfAudit {
padding: 14px 15px
}
.rfid-readers-and-scanners .wfAuditItem {
display: grid;
grid-template-columns: 46px 1fr;
gap: 13px;
padding: 0 0 16px;
position: relative;
font-size: 11px
}
.rfid-readers-and-scanners .wfAuditItem:last-child {
padding-bottom: 0
}
.rfid-readers-and-scanners .wfAuditItem time {
font-size: 10px;
color: var(--muted);
padding-top: 1px;
font-variant-numeric: tabular-nums
}
.rfid-readers-and-scanners .wfAuditItem strong {
font-size: 12px;
display: block
}
.rfid-readers-and-scanners .wfAuditItem small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
line-height: 1.5
}
.rfid-readers-and-scanners .wfAuditItem .pill {
margin-top: 6px
}
.rfid-readers-and-scanners .wfFooterNote {
padding: 10px 13px;
border-top: 1px solid var(--line);
background: var(--sky2);
font-size: 10px;
line-height: 1.5;
color: var(--muted)
}
.rfid-readers-and-scanners .wfFooterNote strong {
color: var(--navy)
}
.rfid-readers-and-scanners .wfCheckList {
padding: 0;
margin: 0;
list-style: none
}
.rfid-readers-and-scanners .wfCheckList li {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.55
}
.rfid-readers-and-scanners .wfCheckList li:before {
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
background: var(--brand);
border-radius: 50%;
margin-top: 6px
}
.rfid-readers-and-scanners .wfScopeNote {
font-size: 12px;
line-height: 1.7;
margin-top: 18px;
color: var(--muted)
}
.rfid-readers-and-scanners .wfScopeNote a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.rfid-readers-and-scanners .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
.heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
.heroVisual {
max-width: 480px
}
.rfid-readers-and-scanners .wfReadout {
padding: 12px
}
.rfid-readers-and-scanners .wfReadoutHead {
font-size: 11px;
gap: 8px;
flex-wrap: wrap
}
.rfid-readers-and-scanners .wfGate {
gap: 10px;
padding: 16px 0;
grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr)
}
.rfid-readers-and-scanners .wfGateInfo strong {
font-size: 12px
}
.rfid-readers-and-scanners .wfGateInfo span {
font-size: 10px
}
.rfid-readers-and-scanners .wfEventRow {
grid-template-columns: 38px minmax(0, 1fr) auto;
padding: 9px 8px;
gap: 6px
}
.rfid-readers-and-scanners .wfEventRow .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-readers-and-scanners .wfRuleStep {
gap: 9px;
padding: 11px;
grid-template-columns: 42px minmax(0, 1fr)
}
.rfid-readers-and-scanners .wfRuleStep strong {
font-size: 11px
}
.rfid-readers-and-scanners .wfSyncSource {
padding: 13px;
gap: 10px
}
.rfid-readers-and-scanners .wfSyncTargets {
gap: 6px
}
.rfid-readers-and-scanners .wfSyncTarget {
padding: 12px 5px
}
.rfid-readers-and-scanners .wfSyncTarget strong {
font-size: 11px
}
.rfid-readers-and-scanners .wfScopeNote {
font-size: 12px
}
}
@media(max-width:360px) {
.wfEventRow {
grid-template-columns: 34px minmax(0, 1fr)
}
.rfid-readers-and-scanners .wfEventRow .pill {
grid-column: 2;
justify-self: start
}
.rfid-readers-and-scanners .wfGate {
grid-template-columns: 1fr
}
.rfid-readers-and-scanners .wfGateInfo {
grid-template-columns: 1fr 1fr;
gap: 6px 12px
}
.rfid-readers-and-scanners .wfGateInfo>strong {
grid-column: 1/-1
}
.rfid-readers-and-scanners .wfGateInfo .pill {
grid-column: 1/-1
}
.rfid-readers-and-scanners .wfSyncTargets {
grid-template-columns: 1fr
}
.rfid-readers-and-scanners .wfSyncTarget {
display: grid;
grid-template-columns: 25px 1fr;
gap: 3px 10px;
text-align: left;
padding: 11px
}
.rfid-readers-and-scanners .wfSyncTarget .icon {
grid-row: 1 / 3;
margin: 3px 0 0
}
.rfid-readers-and-scanners .wfSyncTarget small {
margin-top: 0
}
}  .rfid-readers-and-scanners .readerArt {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 240 / 220;
margin: auto
}
.rfid-readers-and-scanners .readerDeviceGrid {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 16px;
align-items: center
}
.rfid-readers-and-scanners .readerInfo {
display: grid;
gap: 11px
}
.rfid-readers-and-scanners .readerInfoItem {
padding: 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff
}
.rfid-readers-and-scanners .readerInfoItem strong {
font-size: 12px;
display: block;
color: var(--navy)
}
.rfid-readers-and-scanners .readerInfoItem span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 4px
}
.rfid-readers-and-scanners .readerProgress {
height: 7px;
background: #E2ECF2;
border-radius: 6px;
overflow: hidden;
margin: 10px 0 5px
}
.rfid-readers-and-scanners .readerProgress span {
display: block;
width: 88%;
height: 100%;
background: var(--brand);
margin: 0
}
.rfid-readers-and-scanners .readerZoneMap {
padding: 17px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 12px
}
.rfid-readers-and-scanners .readerZoneCols {
display: grid;
grid-template-columns: 1fr 1.3fr 1fr;
gap: 10px;
align-items: stretch
}
.rfid-readers-and-scanners .readerZone {
padding: 17px 8px;
text-align: center;
border: 1px solid #D9E8F1;
border-radius: 10px;
background: #F5F8FA;
min-width: 0
}
.rfid-readers-and-scanners .readerZone.active {
background: #EAF8FF;
border: 2px dashed #64B4D8
}
.rfid-readers-and-scanners .readerZone strong {
font-size: 12px;
display: block;
margin: 8px 0 4px;
color: var(--navy)
}
.rfid-readers-and-scanners .readerZone span {
font-size: 10px;
line-height: 1.5;
color: var(--muted);
display: block
}
.rfid-readers-and-scanners .readerZone .icon {
width: 25px;
height: 25px;
color: var(--navy)
}
.rfid-readers-and-scanners .readerTune {
display: grid;
gap: 9px
}
.rfid-readers-and-scanners .readerTuneRow {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff
}
.rfid-readers-and-scanners .readerTuneRow .icon {
color: var(--navy);
width: 20px;
height: 20px
}
.rfid-readers-and-scanners .readerTuneRow strong {
display: block;
font-size: 11px
}
.rfid-readers-and-scanners .readerTuneRow small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 2px
}
.rfid-readers-and-scanners .comparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
.rfid-readers-and-scanners .readerComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
line-height: 1.65;
font-size: 13px
}
.rfid-readers-and-scanners .readerComparison caption {
caption-side: top;
text-align: left;
padding: 18px 20px;
font-size: 15px;
font-weight: 800;
color: var(--navy);
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
.rfid-readers-and-scanners .readerComparison th,
.rfid-readers-and-scanners .readerComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
.rfid-readers-and-scanners .readerComparison thead th {
font-size: 12px;
color: var(--navy);
background: #F5FBFF;
border-bottom: 1px solid var(--line)
}
.rfid-readers-and-scanners .readerComparison tbody th {
width: 22%;
font-size: 14px;
color: var(--navy);
font-weight: 800
}
.rfid-readers-and-scanners .readerComparison tbody td {
color: var(--muted)
}
.rfid-readers-and-scanners .readerComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
.rfid-readers-and-scanners .review p:last-of-type {
margin-bottom: 16px
}
@media(max-width:640px) {
.readerDeviceGrid {
gap: 10px;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr)
}
.rfid-readers-and-scanners .readerInfoItem {
padding: 10px
}
.rfid-readers-and-scanners .readerInfoItem strong {
font-size: 11px
}
.rfid-readers-and-scanners .readerZoneMap {
padding: 10px
}
.rfid-readers-and-scanners .readerZoneCols {
gap: 6px;
grid-template-columns: 1fr 1.2fr 1fr
}
.rfid-readers-and-scanners .readerZone {
padding: 12px 5px
}
.rfid-readers-and-scanners .readerZone strong {
font-size: 11px
}
.rfid-readers-and-scanners .readerZone span {
font-size: 9px
}
.rfid-readers-and-scanners .readerTuneRow {
padding: 10px;
gap: 7px;
grid-template-columns: 25px minmax(0, 1fr) auto
}
.rfid-readers-and-scanners .readerTuneRow .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-readers-and-scanners .readerComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
.rfid-readers-and-scanners .readerComparison,
.rfid-readers-and-scanners .readerComparison caption,
.rfid-readers-and-scanners .readerComparison tbody,
.rfid-readers-and-scanners .readerComparison tr,
.rfid-readers-and-scanners .readerComparison th,
.rfid-readers-and-scanners .readerComparison td {
display: block;
width: 100%
}
.rfid-readers-and-scanners .readerComparison caption {
padding: 17px;
font-size: 15px
}
.rfid-readers-and-scanners .readerComparison tr {
padding: 17px
}
.rfid-readers-and-scanners .readerComparison tr+tr {
border-top: 1px solid var(--line)
}
.rfid-readers-and-scanners .readerComparison tbody th {
width: 100%;
padding: 0 0 12px;
font-size: 17px;
border: 0
}
.rfid-readers-and-scanners .readerComparison colgroup {
display: none
}
.rfid-readers-and-scanners .readerComparison tbody td {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: 12px;
padding: 8px 0;
border: 0;
font-size: 13px
}
.rfid-readers-and-scanners .readerComparison tbody td:before {
content: attr(data-label);
font-weight: 750;
color: var(--navy);
font-size: 12px
}
.rfid-readers-and-scanners .readerComparison tbody tr+tr>* {
border-top: 0
}
}
@media(max-width:360px) {
.readerDeviceGrid {
grid-template-columns: 1fr
}
.rfid-readers-and-scanners .readerArt {
max-width: 225px
}
.rfid-readers-and-scanners .readerInfo {
grid-template-columns: 1fr 1fr;
gap: 8px
}
.rfid-readers-and-scanners .readerInfoItem:last-child {
grid-column: 1/-1
}
.rfid-readers-and-scanners .readerTuneRow {
grid-template-columns: 25px minmax(0, 1fr)
}
.rfid-readers-and-scanners .readerTuneRow .pill {
grid-column: 2;
justify-self: start
}
}  .rfid-personnel-and-labor-tracking .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.rfid-personnel-and-labor-tracking .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.rfid-personnel-and-labor-tracking .btn:hover {
transform: translateY(-2px)
}
.rfid-personnel-and-labor-tracking .btn.black {
background: #0b0b0b;
color: #fff
}
.rfid-personnel-and-labor-tracking .btn.black:hover {
background: #292929
}
.rfid-personnel-and-labor-tracking .btn.yellow {
background: var(--yellow);
color: #000
}
.rfid-personnel-and-labor-tracking .btn.yellow:hover {
background: #FFD454
}
.rfid-personnel-and-labor-tracking .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .btn .icon2 {
width: 17px;
height: 17px
}
.rfid-personnel-and-labor-tracking a:focus-visible,
.rfid-personnel-and-labor-tracking summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.rfid-personnel-and-labor-tracking .dark a:focus-visible,
.rfid-personnel-and-labor-tracking .final a:focus-visible {
outline-color: var(--yellow)
}
.rfid-personnel-and-labor-tracking .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.rfid-personnel-and-labor-tracking .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.rfid-personnel-and-labor-tracking .soft {
background: var(--sky2)
}
.rfid-personnel-and-labor-tracking .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.rfid-personnel-and-labor-tracking .dark h2,
.rfid-personnel-and-labor-tracking .dark h3 {
color: #fff
}
.rfid-personnel-and-labor-tracking .dark p {
color: #D6D6D6
}
.rfid-personnel-and-labor-tracking .dark .ey {
background: var(--yellow)
}
.rfid-personnel-and-labor-tracking .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.rfid-personnel-and-labor-tracking .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.rfid-personnel-and-labor-tracking .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.rfid-personnel-and-labor-tracking .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.rfid-personnel-and-labor-tracking .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .textLink .icon2 {
width: 16px;
height: 16px
}
.rfid-personnel-and-labor-tracking .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.rfid-personnel-and-labor-tracking .skipLink:focus {
top: 12px
} .rfid-personnel-and-labor-tracking .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.rfid-personnel-and-labor-tracking .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.rfid-personnel-and-labor-tracking .heroGrid>*,
.rfid-personnel-and-labor-tracking .feature>*,
.rfid-personnel-and-labor-tracking .aiGrid>* {
min-width: 0
}
.rfid-personnel-and-labor-tracking .hero h1 {
max-width: 580px
}
.rfid-personnel-and-labor-tracking .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.rfid-personnel-and-labor-tracking .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.rfid-personnel-and-labor-tracking .heroVisual {
min-height: 555px;
position: relative
}
.rfid-personnel-and-labor-tracking .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.rfid-personnel-and-labor-tracking .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.rfid-personnel-and-labor-tracking .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.rfid-personnel-and-labor-tracking .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.rfid-personnel-and-labor-tracking .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.rfid-personnel-and-labor-tracking .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.rfid-personnel-and-labor-tracking .brandTile .icon2 {
width: 17px;
height: 17px
}
.rfid-personnel-and-labor-tracking .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.rfid-personnel-and-labor-tracking .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.rfid-personnel-and-labor-tracking .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.rfid-personnel-and-labor-tracking .viewPills span {
padding: 4px 7px
}
.rfid-personnel-and-labor-tracking .viewPills .active {
background: var(--navy);
color: #fff
}
.rfid-personnel-and-labor-tracking .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.rfid-personnel-and-labor-tracking .miniDates,
.rfid-personnel-and-labor-tracking .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.rfid-personnel-and-labor-tracking .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .miniDates>div:last-child {
border: 0
}
.rfid-personnel-and-labor-tracking .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.rfid-personnel-and-labor-tracking .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.rfid-personnel-and-labor-tracking .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.rfid-personnel-and-labor-tracking .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.rfid-personnel-and-labor-tracking .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.rfid-personnel-and-labor-tracking .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.rfid-personnel-and-labor-tracking .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.rfid-personnel-and-labor-tracking .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.rfid-personnel-and-labor-tracking .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.rfid-personnel-and-labor-tracking .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .boardFooter strong {
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.rfid-personnel-and-labor-tracking .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.rfid-personnel-and-labor-tracking .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.rfid-personnel-and-labor-tracking .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.rfid-personnel-and-labor-tracking .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.rfid-personnel-and-labor-tracking .phoneHead small {
font-size: 9px;
color: #50697A
}
.rfid-personnel-and-labor-tracking .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.rfid-personnel-and-labor-tracking .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.rfid-personnel-and-labor-tracking .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.rfid-personnel-and-labor-tracking .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.rfid-personnel-and-labor-tracking .phoneJob.current {
background: var(--sky2)
}
.rfid-personnel-and-labor-tracking .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.rfid-personnel-and-labor-tracking .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.rfid-personnel-and-labor-tracking .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.rfid-personnel-and-labor-tracking .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.rfid-personnel-and-labor-tracking .lifecycleHead .icon2 {
color: var(--yellow);
width: 17px;
height: 17px
}
.rfid-personnel-and-labor-tracking .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .lifecycleBody strong {
font-size: 12px
}
.rfid-personnel-and-labor-tracking .lifecycleBody span {
color: #CEDBE4
}
.rfid-personnel-and-labor-tracking .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.rfid-personnel-and-labor-tracking .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .rfid-personnel-and-labor-tracking .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.rfid-personnel-and-labor-tracking .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.rfid-personnel-and-labor-tracking .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.rfid-personnel-and-labor-tracking .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.rfid-personnel-and-labor-tracking .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.rfid-personnel-and-labor-tracking .logo.adobe {
font-size: 20px
}
.rfid-personnel-and-labor-tracking .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .rfid-personnel-and-labor-tracking .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.rfid-personnel-and-labor-tracking .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.rfid-personnel-and-labor-tracking .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.rfid-personnel-and-labor-tracking .outcome:nth-child(2):before {
background: var(--yellow)
}
.rfid-personnel-and-labor-tracking .outcome:nth-child(3):before {
background: var(--green)
}
.rfid-personnel-and-labor-tracking .outcome:nth-child(4):before {
background: var(--purple)
}
.rfid-personnel-and-labor-tracking .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.rfid-personnel-and-labor-tracking .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.rfid-personnel-and-labor-tracking .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
} .rfid-personnel-and-labor-tracking .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.rfid-personnel-and-labor-tracking .feature.reverse .visual {
order: -1
}
.rfid-personnel-and-labor-tracking .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.rfid-personnel-and-labor-tracking .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.rfid-personnel-and-labor-tracking .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.rfid-personnel-and-labor-tracking .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.rfid-personnel-and-labor-tracking .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.rfid-personnel-and-labor-tracking .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.rfid-personnel-and-labor-tracking .visual>* {
position: relative;
z-index: 2
}
.rfid-personnel-and-labor-tracking .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.rfid-personnel-and-labor-tracking .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.rfid-personnel-and-labor-tracking .uiHeading .icon2 {
width: 19px;
height: 19px
}
.rfid-personnel-and-labor-tracking .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.rfid-personnel-and-labor-tracking .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.rfid-personnel-and-labor-tracking .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.rfid-personnel-and-labor-tracking .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.rfid-personnel-and-labor-tracking .pill.green {
background: var(--greenbg);
color: #116746
}
.rfid-personnel-and-labor-tracking .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.rfid-personnel-and-labor-tracking .pill.gray {
background: #F0F3F5;
color: #586C79
}
.rfid-personnel-and-labor-tracking .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .rfid-personnel-and-labor-tracking .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.rfid-personnel-and-labor-tracking .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.rfid-personnel-and-labor-tracking .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.rfid-personnel-and-labor-tracking .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.rfid-personnel-and-labor-tracking .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .plannerRow:last-child {
border-bottom: 0
}
.rfid-personnel-and-labor-tracking .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.rfid-personnel-and-labor-tracking .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.rfid-personnel-and-labor-tracking .avatar.green {
background: var(--greenbg);
color: #116746
}
.rfid-personnel-and-labor-tracking .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.rfid-personnel-and-labor-tracking .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.rfid-personnel-and-labor-tracking .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.rfid-personnel-and-labor-tracking .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.rfid-personnel-and-labor-tracking .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.rfid-personnel-and-labor-tracking .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.rfid-personnel-and-labor-tracking .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.rfid-personnel-and-labor-tracking .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.rfid-personnel-and-labor-tracking .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .pending .icon2 {
width: 18px;
height: 18px;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .pending strong {
font-size: 11px;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .pending .pill {
margin-left: auto
}
.rfid-personnel-and-labor-tracking .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.rfid-personnel-and-labor-tracking .legend span {
display: flex;
align-items: center;
gap: 4px
}
.rfid-personnel-and-labor-tracking .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.rfid-personnel-and-labor-tracking .legend .green i {
background: var(--green)
}
.rfid-personnel-and-labor-tracking .legend .yellow i {
background: #D7A200
} .rfid-personnel-and-labor-tracking .roster {
display: grid;
gap: 10px
}
.rfid-personnel-and-labor-tracking .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.rfid-personnel-and-labor-tracking .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.rfid-personnel-and-labor-tracking .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.rfid-personnel-and-labor-tracking .rosterName {
flex: 1;
min-width: 0
}
.rfid-personnel-and-labor-tracking .rosterName strong {
display: block;
font-size: 11px
}
.rfid-personnel-and-labor-tracking .rosterName small {
color: var(--muted);
font-size: 9px
}
.rfid-personnel-and-labor-tracking .rosterTop .pill {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.rfid-personnel-and-labor-tracking .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.rfid-personnel-and-labor-tracking .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.rfid-personnel-and-labor-tracking .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.rfid-personnel-and-labor-tracking .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.rfid-personnel-and-labor-tracking .rosterNote .icon2 {
width: 19px;
height: 19px
}
.rfid-personnel-and-labor-tracking .rosterNote strong {
display: block;
margin-bottom: 3px
} .rfid-personnel-and-labor-tracking .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.rfid-personnel-and-labor-tracking .ruleCard .uiLabel {
color: #9CBED1
}
.rfid-personnel-and-labor-tracking .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.rfid-personnel-and-labor-tracking .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.rfid-personnel-and-labor-tracking .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.rfid-personnel-and-labor-tracking .workCards {
display: grid;
gap: 9px
}
.rfid-personnel-and-labor-tracking .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.rfid-personnel-and-labor-tracking .workCard strong {
display: block;
font-size: 11px
}
.rfid-personnel-and-labor-tracking .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.rfid-personnel-and-labor-tracking .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.rfid-personnel-and-labor-tracking .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.rfid-personnel-and-labor-tracking .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.rfid-personnel-and-labor-tracking .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.rfid-personnel-and-labor-tracking .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .modeRow .icon2 {
width: 14px;
height: 14px
} .rfid-personnel-and-labor-tracking .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.rfid-personnel-and-labor-tracking .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.rfid-personnel-and-labor-tracking .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.rfid-personnel-and-labor-tracking .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.rfid-personnel-and-labor-tracking .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.rfid-personnel-and-labor-tracking .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.rfid-personnel-and-labor-tracking .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.rfid-personnel-and-labor-tracking .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.rfid-personnel-and-labor-tracking .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.rfid-personnel-and-labor-tracking .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.rfid-personnel-and-labor-tracking .lookupSide {
display: grid;
gap: 11px
}
.rfid-personnel-and-labor-tracking .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.rfid-personnel-and-labor-tracking .lookupCard .icon2 {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.rfid-personnel-and-labor-tracking .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.rfid-personnel-and-labor-tracking .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.rfid-personnel-and-labor-tracking .lookupCard.done {
border-left: 3px solid var(--green)
} .rfid-personnel-and-labor-tracking .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.rfid-personnel-and-labor-tracking .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.rfid-personnel-and-labor-tracking .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.rfid-personnel-and-labor-tracking .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.rfid-personnel-and-labor-tracking .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.rfid-personnel-and-labor-tracking .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.rfid-personnel-and-labor-tracking .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.rfid-personnel-and-labor-tracking .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.rfid-personnel-and-labor-tracking .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.rfid-personnel-and-labor-tracking .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .rfid-personnel-and-labor-tracking .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.rfid-personnel-and-labor-tracking .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.rfid-personnel-and-labor-tracking .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.rfid-personnel-and-labor-tracking .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.rfid-personnel-and-labor-tracking .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.rfid-personnel-and-labor-tracking .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.rfid-personnel-and-labor-tracking .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
} .rfid-personnel-and-labor-tracking .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.rfid-personnel-and-labor-tracking .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.rfid-personnel-and-labor-tracking .featureCard:hover {
transform: translateY(-3px)
}
.rfid-personnel-and-labor-tracking .featureIcon,
.rfid-personnel-and-labor-tracking .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.rfid-personnel-and-labor-tracking .featureIcon .icon2,
.rfid-personnel-and-labor-tracking .useIcon .icon2 {
width: 22px;
height: 22px
}
.rfid-personnel-and-labor-tracking .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.rfid-personnel-and-labor-tracking .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .rfid-personnel-and-labor-tracking .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.rfid-personnel-and-labor-tracking .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.rfid-personnel-and-labor-tracking .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .integration:hover {
background: var(--sky2)
}
.rfid-personnel-and-labor-tracking .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.rfid-personnel-and-labor-tracking .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.rfid-personnel-and-labor-tracking .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.rfid-personnel-and-labor-tracking .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.rfid-personnel-and-labor-tracking .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.rfid-personnel-and-labor-tracking .stream>span[aria-hidden] {
color: #86B2C9
} .rfid-personnel-and-labor-tracking .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.rfid-personnel-and-labor-tracking .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.rfid-personnel-and-labor-tracking .useCase h3 {
font-size: 20px
}
.rfid-personnel-and-labor-tracking .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.rfid-personnel-and-labor-tracking .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.rfid-personnel-and-labor-tracking .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.rfid-personnel-and-labor-tracking .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.rfid-personnel-and-labor-tracking .review h3 {
font-size: 22px
}
.rfid-personnel-and-labor-tracking .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.rfid-personnel-and-labor-tracking .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.rfid-personnel-and-labor-tracking .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.rfid-personnel-and-labor-tracking .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.rfid-personnel-and-labor-tracking .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.rfid-personnel-and-labor-tracking .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.rfid-personnel-and-labor-tracking .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.rfid-personnel-and-labor-tracking .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .rfid-personnel-and-labor-tracking .faq {
max-width: 900px
}
.rfid-personnel-and-labor-tracking .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.rfid-personnel-and-labor-tracking .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.rfid-personnel-and-labor-tracking .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.rfid-personnel-and-labor-tracking .faq summary::marker {
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .faq details[open] {
border-color: #A9D3E7
}
.rfid-personnel-and-labor-tracking .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .rfid-personnel-and-labor-tracking .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.rfid-personnel-and-labor-tracking .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.rfid-personnel-and-labor-tracking .cta h3 {
font-size: 19px
}
.rfid-personnel-and-labor-tracking .cta.darkCta h3 {
color: #fff
}
.rfid-personnel-and-labor-tracking .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.rfid-personnel-and-labor-tracking .cta.darkCta p {
color: #D1D1D1
}
.rfid-personnel-and-labor-tracking .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.rfid-personnel-and-labor-tracking .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.rfid-personnel-and-labor-tracking .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.rfid-personnel-and-labor-tracking .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.rfid-personnel-and-labor-tracking .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.rfid-personnel-and-labor-tracking .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.rfid-personnel-and-labor-tracking .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.rfid-personnel-and-labor-tracking .heroGrid {
gap: 28px
}
.rfid-personnel-and-labor-tracking h1 {
font-size: 56px
}
.rfid-personnel-and-labor-tracking .hero .lead {
font-size: 17px
}
.rfid-personnel-and-labor-tracking .assetPhone {
width: 168px;
top: 235px
}
.rfid-personnel-and-labor-tracking .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.rfid-personnel-and-labor-tracking .scheduleBoard {
width: 96%;
left: 0
}
.rfid-personnel-and-labor-tracking .miniJob {
padding: 4px
}
.rfid-personnel-and-labor-tracking .heroVisual,
.rfid-personnel-and-labor-tracking .assetStage {
min-height: 555px
}
.rfid-personnel-and-labor-tracking .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.rfid-personnel-and-labor-tracking .visual {
padding: 17px
}
.rfid-personnel-and-labor-tracking .plannerTicks,
.rfid-personnel-and-labor-tracking .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.rfid-personnel-and-labor-tracking .plannerRow {
grid-template-columns: 75px 1fr
}
.rfid-personnel-and-labor-tracking .person {
font-size: 9px;
padding: 10px 5px
}
.rfid-personnel-and-labor-tracking .person .avatar {
display: none
}
}
@media(max-width:960px) {
.rfid-personnel-and-labor-tracking .heroGrid,
.rfid-personnel-and-labor-tracking .feature,
.rfid-personnel-and-labor-tracking .aiGrid,
.rfid-personnel-and-labor-tracking .final {
grid-template-columns: 1fr
}
.rfid-personnel-and-labor-tracking .heroGrid {
gap: 36px
}
.rfid-personnel-and-labor-tracking .hero h1 {
max-width: 760px
}
.rfid-personnel-and-labor-tracking .hero .lead {
max-width: 750px
}
.rfid-personnel-and-labor-tracking .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.rfid-personnel-and-labor-tracking .assetStage {
margin: auto
}
.rfid-personnel-and-labor-tracking .feature.reverse .visual {
order: 0
}
.rfid-personnel-and-labor-tracking .feature {
gap: 30px
}
.rfid-personnel-and-labor-tracking .feature>div:first-child {
max-width: 800px
}
.rfid-personnel-and-labor-tracking .outcomes,
.rfid-personnel-and-labor-tracking .featureGrid,
.rfid-personnel-and-labor-tracking .connectedGrid,
.rfid-personnel-and-labor-tracking .useCases {
grid-template-columns: repeat(2, 1fr)
}
.rfid-personnel-and-labor-tracking .logos {
grid-template-columns: repeat(3, 1fr)
}
.rfid-personnel-and-labor-tracking .integrations {
grid-template-columns: repeat(3, 1fr)
}
.rfid-personnel-and-labor-tracking .reviews {
grid-template-columns: 1fr
}
.rfid-personnel-and-labor-tracking .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.rfid-personnel-and-labor-tracking .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.rfid-personnel-and-labor-tracking .ratingItem:nth-child(2) {
border: 0
}
.rfid-personnel-and-labor-tracking .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.rfid-personnel-and-labor-tracking .final .btn {
min-width: 195px
}
.rfid-personnel-and-labor-tracking .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.rfid-personnel-and-labor-tracking .aiGrid {
gap: 30px
}
.rfid-personnel-and-labor-tracking .aiMini {
max-width: 760px
}
.rfid-personnel-and-labor-tracking .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.rfid-personnel-and-labor-tracking .wrap {
width: calc(100% - 24px)
}
.rfid-personnel-and-labor-tracking section {
padding: 56px 0
}
.rfid-personnel-and-labor-tracking .hero {
padding: 32px 0 42px
}
.rfid-personnel-and-labor-tracking h1 {
font-size: 42px
}
.rfid-personnel-and-labor-tracking h2 {
font-size: 34px
}
.rfid-personnel-and-labor-tracking .lead {
font-size: 17px
}
.rfid-personnel-and-labor-tracking .sectionHead p {
font-size: 16px
}
.rfid-personnel-and-labor-tracking .sectionHead {
margin-bottom: 28px
}
.rfid-personnel-and-labor-tracking .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.rfid-personnel-and-labor-tracking .heroGrid {
gap: 24px
}
.rfid-personnel-and-labor-tracking .hero .actions {
gap: 8px
}
.rfid-personnel-and-labor-tracking .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.rfid-personnel-and-labor-tracking .micro {
font-size: 11px
}
.rfid-personnel-and-labor-tracking .heroPills {
gap: 6px
}
.rfid-personnel-and-labor-tracking .heroPills span {
font-size: 9px
}
.rfid-personnel-and-labor-tracking .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.rfid-personnel-and-labor-tracking .heroVisual {
min-height: 525px
}
.rfid-personnel-and-labor-tracking .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.rfid-personnel-and-labor-tracking .assetStage:before {
inset: 38px 0 28px 10px
}
.rfid-personnel-and-labor-tracking .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.rfid-personnel-and-labor-tracking .boardHeader {
padding: 12px
}
.rfid-personnel-and-labor-tracking .boardBrand {
font-size: 12px
}
.rfid-personnel-and-labor-tracking .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.rfid-personnel-and-labor-tracking .miniCalendar {
margin: 0 10px 12px
}
.rfid-personnel-and-labor-tracking .miniDates,
.rfid-personnel-and-labor-tracking .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.rfid-personnel-and-labor-tracking .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.rfid-personnel-and-labor-tracking .miniPerson small {
font-size: 7px
}
.rfid-personnel-and-labor-tracking .miniCell {
padding: 4px 3px
}
.rfid-personnel-and-labor-tracking .miniDates>div {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .miniDates small {
font-size: 7px
}
.rfid-personnel-and-labor-tracking .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.rfid-personnel-and-labor-tracking .miniJob b {
font-size: 7px
}
.rfid-personnel-and-labor-tracking .miniRow {
min-height: 57px
}
.rfid-personnel-and-labor-tracking .miniJob {
min-height: 48px
}
.rfid-personnel-and-labor-tracking .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.rfid-personnel-and-labor-tracking .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.rfid-personnel-and-labor-tracking .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.rfid-personnel-and-labor-tracking .phoneHead strong {
font-size: 11px
}
.rfid-personnel-and-labor-tracking .phoneHead small {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .phoneAgenda {
padding: 8px;
gap: 6px
}
.rfid-personnel-and-labor-tracking .phoneJob {
padding: 7px;
font-size: 8px
}
.rfid-personnel-and-labor-tracking .phoneJob strong {
font-size: 9px
}
.rfid-personnel-and-labor-tracking .phoneJob small {
font-size: 7px
}
.rfid-personnel-and-labor-tracking .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.rfid-personnel-and-labor-tracking .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.rfid-personnel-and-labor-tracking .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.rfid-personnel-and-labor-tracking .lifecycleHead .icon2 {
width: 15px;
height: 15px
}
.rfid-personnel-and-labor-tracking .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.rfid-personnel-and-labor-tracking .lifecycleBody strong {
font-size: 10px
}
.rfid-personnel-and-labor-tracking .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.rfid-personnel-and-labor-tracking .diagramCaption {
font-size: 9px
}
.rfid-personnel-and-labor-tracking .trust {
padding: 23px 0
}
.rfid-personnel-and-labor-tracking .trustLabel {
font-size: 12px
}
.rfid-personnel-and-labor-tracking .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.rfid-personnel-and-labor-tracking .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.rfid-personnel-and-labor-tracking .logo.dhl {
font-size: 19px
}
.rfid-personnel-and-labor-tracking .logo.adobe {
font-size: 17px
}
.rfid-personnel-and-labor-tracking .logo.golden {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .fl,
.rfid-personnel-and-labor-tracking .outcomes,
.rfid-personnel-and-labor-tracking .featureGrid,
.rfid-personnel-and-labor-tracking .connectedGrid,
.rfid-personnel-and-labor-tracking .useCases {
grid-template-columns: 1fr
}
.rfid-personnel-and-labor-tracking .fi {
font-size: 14px
}
.rfid-personnel-and-labor-tracking .outcome {
padding: 21px
}
.rfid-personnel-and-labor-tracking .outcome strong {
margin-top: 12px
}
.rfid-personnel-and-labor-tracking .outcome span {
font-size: 14px
}
.rfid-personnel-and-labor-tracking .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.rfid-personnel-and-labor-tracking .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.rfid-personnel-and-labor-tracking .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-personnel-and-labor-tracking .uiSub {
font-size: 9px
}
.rfid-personnel-and-labor-tracking .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.rfid-personnel-and-labor-tracking .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.rfid-personnel-and-labor-tracking .person {
font-size: 9px;
padding: 8px 6px
}
.rfid-personnel-and-labor-tracking .person .avatar {
display: none
}
.rfid-personnel-and-labor-tracking .person small {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.rfid-personnel-and-labor-tracking .slot strong {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .plannerHead {
font-size: 10px;
padding: 10px
}
.rfid-personnel-and-labor-tracking .plannerHead .pill {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.rfid-personnel-and-labor-tracking .pending strong {
font-size: 10px
}
.rfid-personnel-and-labor-tracking .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-personnel-and-labor-tracking .rosterTop .pill {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .rosterCard {
padding: 11px
}
.rfid-personnel-and-labor-tracking .rosterNote {
padding: 11px;
font-size: 10px
}
.rfid-personnel-and-labor-tracking .ruleCard {
padding: 14px
}
.rfid-personnel-and-labor-tracking .ruleCard strong {
font-size: 15px
}
.rfid-personnel-and-labor-tracking .workCard {
padding: 10px;
gap: 8px
}
.rfid-personnel-and-labor-tracking .workCard strong {
font-size: 10px
}
.rfid-personnel-and-labor-tracking .workCard small {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-personnel-and-labor-tracking .modeRow span {
font-size: 8px;
padding: 7px
}
.rfid-personnel-and-labor-tracking .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.rfid-personnel-and-labor-tracking .phoneMockInner {
padding: 11px;
min-height: 288px
}
.rfid-personnel-and-labor-tracking .lookupCard {
padding: 10px
}
.rfid-personnel-and-labor-tracking .lookupCard strong {
font-size: 10px
}
.rfid-personnel-and-labor-tracking .lookupCard span {
font-size: 9px
}
.rfid-personnel-and-labor-tracking .lookupCard .icon2 {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.rfid-personnel-and-labor-tracking .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.rfid-personnel-and-labor-tracking .aiMini div {
padding: 16px
}
.rfid-personnel-and-labor-tracking .aiMini strong {
font-size: 14px
}
.rfid-personnel-and-labor-tracking .aiMini span {
font-size: 13px
}
.rfid-personnel-and-labor-tracking .promptBox {
padding: 18px;
border-radius: 17px
}
.rfid-personnel-and-labor-tracking .prompt {
font-size: 13px;
padding: 13px
}
.rfid-personnel-and-labor-tracking .promptHead {
font-size: 19px
}
.rfid-personnel-and-labor-tracking .promptFoot {
font-size: 10px !important
}
.rfid-personnel-and-labor-tracking .connectedCard {
padding: 22px
}
.rfid-personnel-and-labor-tracking .connectedCard p,
.rfid-personnel-and-labor-tracking .featureCard p,
.rfid-personnel-and-labor-tracking .useCase p {
font-size: 14px
}
.rfid-personnel-and-labor-tracking .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.rfid-personnel-and-labor-tracking .integrations {
grid-template-columns: repeat(2, 1fr)
}
.rfid-personnel-and-labor-tracking .integration:last-child {
grid-column: 1/-1
}
.rfid-personnel-and-labor-tracking .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.rfid-personnel-and-labor-tracking .stream>span[aria-hidden] {
display: none
}
.rfid-personnel-and-labor-tracking .streamStep {
min-height: 24px
}
.rfid-personnel-and-labor-tracking .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.rfid-personnel-and-labor-tracking .ratingItem {
border: 0
}
.rfid-personnel-and-labor-tracking .ratingLead {
margin-bottom: 3px
}
.rfid-personnel-and-labor-tracking .review p {
font-size: 14px
}
.rfid-personnel-and-labor-tracking .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.rfid-personnel-and-labor-tracking .ctaBtns {
width: 100%
}
.rfid-personnel-and-labor-tracking .ctaBtns .btn {
flex: 1
}
.rfid-personnel-and-labor-tracking .cta p {
font-size: 14px
}
.rfid-personnel-and-labor-tracking .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.rfid-personnel-and-labor-tracking .final h2 {
font-size: 32px
}
.rfid-personnel-and-labor-tracking .final p {
font-size: 15px
}
.rfid-personnel-and-labor-tracking .final .ctaBtns {
flex-direction: column
}
.rfid-personnel-and-labor-tracking .final .btn {
min-width: 0;
width: 100%
}
.rfid-personnel-and-labor-tracking .faq details {
padding: 16px
}
.rfid-personnel-and-labor-tracking .faq summary {
font-size: 14px
}
.rfid-personnel-and-labor-tracking .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.rfid-personnel-and-labor-tracking h1 {
font-size: 38px
}
.rfid-personnel-and-labor-tracking h2 {
font-size: 31px
}
.rfid-personnel-and-labor-tracking .heroVisual,
.rfid-personnel-and-labor-tracking .assetStage {
height: 520px;
min-height: 520px
}
.rfid-personnel-and-labor-tracking .assetPhone {
width: 152px;
top: 242px
}
.rfid-personnel-and-labor-tracking .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.rfid-personnel-and-labor-tracking .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.rfid-personnel-and-labor-tracking .lifecycleBody {
padding: 8px;
font-size: 8px
}
.rfid-personnel-and-labor-tracking .lifecycleBody strong {
font-size: 9px
}
.rfid-personnel-and-labor-tracking .boardBrand {
font-size: 11px
}
.rfid-personnel-and-labor-tracking .sampleBadge {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .miniDates,
.rfid-personnel-and-labor-tracking .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.rfid-personnel-and-labor-tracking .miniDates small {
font-size: 6px
}
.rfid-personnel-and-labor-tracking .miniJob b {
font-size: 6.5px
}
.rfid-personnel-and-labor-tracking .boardFooter {
padding-right: 135px;
min-height: 45px
}
.rfid-personnel-and-labor-tracking .mobileLookup {
grid-template-columns: 1fr
}
.rfid-personnel-and-labor-tracking .phoneMock {
width: 200px;
margin: auto
}
.rfid-personnel-and-labor-tracking .lookupSide {
grid-template-columns: 1fr
}
.rfid-personnel-and-labor-tracking .lookupCard {
padding: 13px
}
.rfid-personnel-and-labor-tracking .lookupCard strong {
font-size: 12px
}
.rfid-personnel-and-labor-tracking .lookupCard span {
font-size: 11px
}
.rfid-personnel-and-labor-tracking .plannerHead {
gap: 5px
}
.rfid-personnel-and-labor-tracking .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.rfid-personnel-and-labor-tracking .plannerRow {
grid-template-columns: 61px 1fr
}
.rfid-personnel-and-labor-tracking .uiHeading>span:first-child {
gap: 5px
}
.rfid-personnel-and-labor-tracking .uiHeading .icon2 {
width: 17px;
height: 17px
}
}  .rfid-personnel-and-labor-tracking #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools *,
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools *::before,
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__step::before,
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools {
padding: 52px 0;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card,
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools h2 {
font-size: 30px;
}
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.rfid-personnel-and-labor-tracking #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}   .rfid-personnel-and-labor-tracking .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.rfid-personnel-and-labor-tracking .assetStage {
position: relative;
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.rfid-personnel-and-labor-tracking .assetStage:before {
content: none
}
.rfid-personnel-and-labor-tracking .personnelHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
.rfid-personnel-and-labor-tracking .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
.rfid-personnel-and-labor-tracking .wfReadout {
padding: 15px
}
.rfid-personnel-and-labor-tracking .wfReadoutHead {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.rfid-personnel-and-labor-tracking .wfGate {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: center;
padding: 18px 3px
}
.rfid-personnel-and-labor-tracking .wfPortalSvg {
display: block;
width: 100%;
height: auto;
max-width: 210px;
margin: auto;
aspect-ratio: 210 / 175
}
.rfid-personnel-and-labor-tracking .wfGateInfo {
display: grid;
gap: 8px;
font-size: 11px
}
.rfid-personnel-and-labor-tracking .wfGateInfo strong {
font-size: 14px;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .wfGateInfo span {
color: var(--muted);
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .wfGateInfo .pill {
color: #116746;
justify-self: start;
font-size: 10px
}
.rfid-personnel-and-labor-tracking .wfEventRows {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.rfid-personnel-and-labor-tracking .wfEventRow {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
font-size: 11px;
border-bottom: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .wfEventRow:last-child {
border: 0
}
.rfid-personnel-and-labor-tracking .wfEventRow time {
font-variant-numeric: tabular-nums;
color: var(--muted);
font-size: 10px
}
.rfid-personnel-and-labor-tracking .wfEventRow strong {
font-size: 11px
}
.rfid-personnel-and-labor-tracking .wfEventRow small {
display: block;
font-size: 9px;
color: var(--muted)
}
.rfid-personnel-and-labor-tracking .wfReaderModes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 13px
}
.rfid-personnel-and-labor-tracking .wfReaderModes span {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 7px;
font-size: 10px;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .wfReaderModes .icon2 {
width: 15px;
height: 15px
}
.rfid-personnel-and-labor-tracking .wfRuleSteps {
display: grid;
gap: 9px
}
.rfid-personnel-and-labor-tracking .wfRuleStep {
display: grid;
grid-template-columns: 47px 1fr;
gap: 12px;
align-items: center;
padding: 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px
}
.rfid-personnel-and-labor-tracking .wfRuleKey {
display: grid;
place-items: center;
min-height: 34px;
background: var(--sky);
border-radius: 7px;
color: var(--navy);
font-size: 10px;
font-weight: 850
}
.rfid-personnel-and-labor-tracking .wfRuleStep strong {
display: block;
font-size: 12px
}
.rfid-personnel-and-labor-tracking .wfRuleStep small {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 10px;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .wfRuleStep.then .wfRuleKey {
background: var(--greenbg);
color: #116746
}
.rfid-personnel-and-labor-tracking .wfRuleStep.else {
background: #FFFCF0;
border-color: #EDD98C
}
.rfid-personnel-and-labor-tracking .wfRuleStep.else .wfRuleKey {
background: var(--yellowsoft);
color: #745604
}
.rfid-personnel-and-labor-tracking .wfSyncSource {
display: flex;
align-items: center;
gap: 13px;
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.rfid-personnel-and-labor-tracking .wfSyncSource .featureIcon {
margin: 0;
flex: 0 0 42px;
background: var(--sky)
}
.rfid-personnel-and-labor-tracking .wfSyncSource strong {
font-size: 13px;
display: block
}
.rfid-personnel-and-labor-tracking .wfSyncSource small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 4px
}
.rfid-personnel-and-labor-tracking .wfSyncLine {
width: 1px;
height: 24px;
background: #99BFD2;
margin: auto;
position: relative
}
.rfid-personnel-and-labor-tracking .wfSyncLine:after {
content: "";
position: absolute;
bottom: 0;
left: -3px;
width: 7px;
height: 7px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg)
}
.rfid-personnel-and-labor-tracking .wfSyncHub {
background: #0D2535;
color: #fff;
border: 1px solid #294654;
border-radius: 12px;
padding: 16px;
text-align: center
}
.rfid-personnel-and-labor-tracking .wfSyncHub strong {
font-size: 17px;
display: block
}
.rfid-personnel-and-labor-tracking .wfSyncHub small {
font-size: 10px;
display: block;
margin-top: 4px;
color: #CEDBE4
}
.rfid-personnel-and-labor-tracking .wfSyncTargets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
.rfid-personnel-and-labor-tracking .wfSyncTarget {
padding: 15px 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
text-align: center;
font-size: 10px
}
.rfid-personnel-and-labor-tracking .wfSyncTarget .icon2 {
color: var(--navy);
width: 23px;
height: 23px;
margin-bottom: 8px
}
.rfid-personnel-and-labor-tracking .wfSyncTarget strong {
display: block;
font-size: 12px
}
.rfid-personnel-and-labor-tracking .wfSyncTarget small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 5px
}
.rfid-personnel-and-labor-tracking .wfSyncNote {
font-size: 10px;
color: var(--muted);
line-height: 1.5;
text-align: center;
margin-top: 12px
}
.rfid-personnel-and-labor-tracking .wfVerifyStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 13px
}
.rfid-personnel-and-labor-tracking .wfVerifyStat {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 13px 10px;
text-align: center
}
.rfid-personnel-and-labor-tracking .wfVerifyStat strong {
font-size: 25px;
font-weight: 850;
line-height: 1.2;
display: block;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .wfVerifyStat span {
font-size: 10px;
color: var(--muted)
}
.rfid-personnel-and-labor-tracking .wfVerifyStat.alert {
background: #FFF7D6;
border-color: #EDD98C
}
.rfid-personnel-and-labor-tracking .wfVerifyStat.alert strong {
color: #745604
}
.rfid-personnel-and-labor-tracking .wfAudit {
padding: 14px 15px
}
.rfid-personnel-and-labor-tracking .wfAuditItem {
display: grid;
grid-template-columns: 46px 1fr;
gap: 13px;
padding: 0 0 16px;
position: relative;
font-size: 11px
}
.rfid-personnel-and-labor-tracking .wfAuditItem:last-child {
padding-bottom: 0
}
.rfid-personnel-and-labor-tracking .wfAuditItem time {
font-size: 10px;
color: var(--muted);
padding-top: 1px;
font-variant-numeric: tabular-nums
}
.rfid-personnel-and-labor-tracking .wfAuditItem strong {
font-size: 12px;
display: block
}
.rfid-personnel-and-labor-tracking .wfAuditItem small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .wfAuditItem .pill {
margin-top: 6px
}
.rfid-personnel-and-labor-tracking .wfFooterNote {
padding: 10px 13px;
border-top: 1px solid var(--line);
background: var(--sky2);
font-size: 10px;
line-height: 1.5;
color: var(--muted)
}
.rfid-personnel-and-labor-tracking .wfFooterNote strong {
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .wfCheckList {
padding: 0;
margin: 0;
list-style: none
}
.rfid-personnel-and-labor-tracking .wfCheckList li {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.55
}
.rfid-personnel-and-labor-tracking .wfCheckList li:before {
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
background: var(--brand);
border-radius: 50%;
margin-top: 6px
}
.rfid-personnel-and-labor-tracking .wfScopeNote {
font-size: 12px;
line-height: 1.7;
margin-top: 18px;
color: var(--muted)
}
.rfid-personnel-and-labor-tracking .wfScopeNote a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.rfid-personnel-and-labor-tracking .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
.rfid-personnel-and-labor-tracking .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
.rfid-personnel-and-labor-tracking .heroVisual {
max-width: 480px
}
.rfid-personnel-and-labor-tracking .wfReadout {
padding: 12px
}
.rfid-personnel-and-labor-tracking .wfReadoutHead {
font-size: 11px;
gap: 8px;
flex-wrap: wrap
}
.rfid-personnel-and-labor-tracking .wfGate {
gap: 10px;
padding: 16px 0;
grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr)
}
.rfid-personnel-and-labor-tracking .wfGateInfo strong {
font-size: 12px
}
.rfid-personnel-and-labor-tracking .wfGateInfo span {
font-size: 10px
}
.rfid-personnel-and-labor-tracking .wfEventRow {
grid-template-columns: 38px minmax(0, 1fr) auto;
padding: 9px 8px;
gap: 6px
}
.rfid-personnel-and-labor-tracking .wfEventRow .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-personnel-and-labor-tracking .wfRuleStep {
gap: 9px;
padding: 11px;
grid-template-columns: 42px minmax(0, 1fr)
}
.rfid-personnel-and-labor-tracking .wfRuleStep strong {
font-size: 11px
}
.rfid-personnel-and-labor-tracking .wfSyncSource {
padding: 13px;
gap: 10px
}
.rfid-personnel-and-labor-tracking .wfSyncTargets {
gap: 6px
}
.rfid-personnel-and-labor-tracking .wfSyncTarget {
padding: 12px 5px
}
.rfid-personnel-and-labor-tracking .wfSyncTarget strong {
font-size: 11px
}
.rfid-personnel-and-labor-tracking .wfScopeNote {
font-size: 12px
}
}
@media(max-width:360px) {
.rfid-personnel-and-labor-tracking .wfEventRow {
grid-template-columns: 34px minmax(0, 1fr)
}
.rfid-personnel-and-labor-tracking .wfEventRow .pill {
grid-column: 2;
justify-self: start
}
.rfid-personnel-and-labor-tracking .wfGate {
grid-template-columns: 1fr
}
.rfid-personnel-and-labor-tracking .wfGateInfo {
grid-template-columns: 1fr 1fr;
gap: 6px 12px
}
.rfid-personnel-and-labor-tracking .wfGateInfo>strong {
grid-column: 1/-1
}
.rfid-personnel-and-labor-tracking .wfGateInfo .pill {
grid-column: 1/-1
}
.rfid-personnel-and-labor-tracking .wfSyncTargets {
grid-template-columns: 1fr
}
.rfid-personnel-and-labor-tracking .wfSyncTarget {
display: grid;
grid-template-columns: 25px 1fr;
gap: 3px 10px;
text-align: left;
padding: 11px
}
.rfid-personnel-and-labor-tracking .wfSyncTarget .icon2 {
grid-row: 1 / 3;
margin: 3px 0 0
}
.rfid-personnel-and-labor-tracking .wfSyncTarget small {
margin-top: 0
}
}  .rfid-personnel-and-labor-tracking .personnelHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 620 / 555
}
.rfid-personnel-and-labor-tracking .personnelBadgeSvg {
display: block;
width: 100%;
max-width: 185px;
height: auto;
aspect-ratio: 200 / 220;
margin: auto
}
.rfid-personnel-and-labor-tracking .badgeSetup {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
gap: 20px;
align-items: center;
margin-bottom: 16px
}
.rfid-personnel-and-labor-tracking .personnelInfo {
display: grid;
gap: 10px
}
.rfid-personnel-and-labor-tracking .personnelInfoItem {
padding: 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font-size: 11px
}
.rfid-personnel-and-labor-tracking .personnelInfoItem strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .personnelInfoItem span {
display: block;
color: var(--muted);
margin-top: 3px;
line-height: 1.55
}
.rfid-personnel-and-labor-tracking .personnelZoneGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 13px
}
.rfid-personnel-and-labor-tracking .personnelZone {
padding: 16px 10px;
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 11px;
text-align: center;
min-width: 0
}
.rfid-personnel-and-labor-tracking .personnelZone:nth-child(2) {
border-top-color: var(--green)
}
.rfid-personnel-and-labor-tracking .personnelZone:nth-child(3) {
border-top-color: var(--yellow)
}
.rfid-personnel-and-labor-tracking .personnelZone .icon2 {
color: var(--navy);
margin-bottom: 9px
}
.rfid-personnel-and-labor-tracking .personnelZone strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.rfid-personnel-and-labor-tracking .personnelZone b {
display: block;
font-size: 27px;
color: var(--navy);
line-height: 1.3;
margin: 5px 0
}
.rfid-personnel-and-labor-tracking .personnelZone span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .personnelLog {
padding: 0 14px
}
.rfid-personnel-and-labor-tracking .personnelLogRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .personnelLogRow:last-child {
border: 0
}
.rfid-personnel-and-labor-tracking .personnelLogRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.rfid-personnel-and-labor-tracking .personnelLogRow strong {
display: block;
font-size: 11px;
color: var(--ink)
}
.rfid-personnel-and-labor-tracking .personnelLogRow small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-top: 2px
}
.rfid-personnel-and-labor-tracking .personnelTask {
padding: 17px
}
.rfid-personnel-and-labor-tracking .taskPerson {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 16px
}
.rfid-personnel-and-labor-tracking .taskPerson .avatar {
width: 36px;
height: 36px;
flex-basis: 36px;
font-size: 11px
}
.rfid-personnel-and-labor-tracking .taskPerson strong {
display: block;
font-size: 13px
}
.rfid-personnel-and-labor-tracking .taskPerson small {
display: block;
font-size: 10px;
color: var(--muted)
}
.rfid-personnel-and-labor-tracking .taskPerson .pill {
margin-left: auto
}
.rfid-personnel-and-labor-tracking .personnelTask h3 {
font-size: 18px;
letter-spacing: -.025em;
margin-bottom: 14px
}
.rfid-personnel-and-labor-tracking .taskMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 15px
}
.rfid-personnel-and-labor-tracking .taskMetric {
background: var(--sky2);
border: 1px solid var(--line);
padding: 12px 7px;
border-radius: 9px;
text-align: center
}
.rfid-personnel-and-labor-tracking .taskMetric span {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5
}
.rfid-personnel-and-labor-tracking .taskMetric strong {
font-size: 19px;
display: block;
line-height: 1.5;
color: var(--navy);
font-variant-numeric: tabular-nums
}
.rfid-personnel-and-labor-tracking .taskSummary {
display: grid;
gap: 8px;
font-size: 11px;
color: var(--muted);
line-height: 1.6
}
.rfid-personnel-and-labor-tracking .taskSummary>div {
display: flex;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--line);
padding-bottom: 8px
}
.rfid-personnel-and-labor-tracking .taskSummary>div:last-child {
border: 0;
padding-bottom: 0
}
.rfid-personnel-and-labor-tracking .taskSummary strong {
color: var(--navy);
font-size: 11px;
text-align: right
}
.rfid-personnel-and-labor-tracking .alertBanner {
display: flex;
gap: 12px;
align-items: center;
padding: 15px;
border-radius: 12px;
border: 1px solid #EDD98C;
background: var(--yellowsoft);
margin-bottom: 13px
}
.rfid-personnel-and-labor-tracking .alertBanner .icon2 {
color: #745604;
flex-shrink: 0
}
.rfid-personnel-and-labor-tracking .alertBanner strong {
display: block;
font-size: 14px;
color: #584106;
line-height: 1.4
}
.rfid-personnel-and-labor-tracking .alertBanner span {
display: block;
font-size: 10px;
color: #725A14;
line-height: 1.6;
margin-top: 3px
}
.rfid-personnel-and-labor-tracking .comparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
.rfid-personnel-and-labor-tracking .personnelComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
line-height: 1.65;
font-size: 13px
}
.rfid-personnel-and-labor-tracking .personnelComparison caption {
text-align: left;
padding: 18px 20px;
font-size: 15px;
font-weight: 800;
color: var(--navy);
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .personnelComparison th,
.rfid-personnel-and-labor-tracking .personnelComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
.rfid-personnel-and-labor-tracking .personnelComparison thead th {
font-size: 12px;
color: var(--navy);
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .personnelComparison tbody th {
font-size: 14px;
color: var(--navy);
font-weight: 800
}
.rfid-personnel-and-labor-tracking .personnelComparison tbody td {
color: var(--muted)
}
.rfid-personnel-and-labor-tracking .personnelComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .privacyNote {
margin-top: 22px;
padding: 20px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
color: var(--muted);
font-size: 13px;
line-height: 1.75
}
.rfid-personnel-and-labor-tracking .privacyNote strong {
color: var(--navy)
}
@media(max-width:640px) {
.rfid-personnel-and-labor-tracking .badgeSetup {
gap: 12px
}
.rfid-personnel-and-labor-tracking .personnelInfoItem {
padding: 10px;
font-size: 10px
}
.rfid-personnel-and-labor-tracking .personnelInfoItem strong {
font-size: 11px
}
.rfid-personnel-and-labor-tracking .personnelZoneGrid {
gap: 6px
}
.rfid-personnel-and-labor-tracking .personnelZone {
padding: 13px 5px
}
.rfid-personnel-and-labor-tracking .personnelZone strong {
font-size: 10px
}
.rfid-personnel-and-labor-tracking .personnelZone b {
font-size: 25px
}
.rfid-personnel-and-labor-tracking .personnelLog {
padding: 0 10px
}
.rfid-personnel-and-labor-tracking .personnelLogRow {
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 7px
}
.rfid-personnel-and-labor-tracking .personnelLogRow .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-personnel-and-labor-tracking .personnelTask {
padding: 13px
}
.rfid-personnel-and-labor-tracking .taskMetric strong {
font-size: 17px
}
.rfid-personnel-and-labor-tracking .taskMetric span {
font-size: 8px
}
.rfid-personnel-and-labor-tracking .taskPerson {
flex-wrap: wrap
}
.rfid-personnel-and-labor-tracking .personnelComparison,
.rfid-personnel-and-labor-tracking .personnelComparison tbody,
.rfid-personnel-and-labor-tracking .personnelComparison tr,
.rfid-personnel-and-labor-tracking .personnelComparison th,
.rfid-personnel-and-labor-tracking .personnelComparison td {
display: block;
width: 100%
}
.rfid-personnel-and-labor-tracking .personnelComparison colgroup {
display: none
}
.rfid-personnel-and-labor-tracking .personnelComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
.rfid-personnel-and-labor-tracking .personnelComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
.rfid-personnel-and-labor-tracking .personnelComparison th,
.rfid-personnel-and-labor-tracking .personnelComparison td {
padding: 10px 16px
}
.rfid-personnel-and-labor-tracking .personnelComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
.rfid-personnel-and-labor-tracking .personnelComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
color: var(--navy);
text-transform: uppercase;
letter-spacing: .035em;
margin-bottom: 4px
}
.rfid-personnel-and-labor-tracking .personnelComparison tbody tr+tr>* {
border: 0
}
.rfid-personnel-and-labor-tracking .personnelComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
.rfid-personnel-and-labor-tracking .personnelComparison tbody td:last-child {
padding-bottom: 18px
}
.rfid-personnel-and-labor-tracking .privacyNote {
padding: 18px;
font-size: 13px
}
}
@media(max-width:360px) {
.rfid-personnel-and-labor-tracking .badgeSetup {
grid-template-columns: 1fr
}
.rfid-personnel-and-labor-tracking .personnelBadgeSvg {
max-width: 170px
}
.rfid-personnel-and-labor-tracking .personnelInfo {
grid-template-columns: 1fr 1fr
}
.rfid-personnel-and-labor-tracking .personnelLogRow {
grid-template-columns: 34px minmax(0, 1fr)
}
.rfid-personnel-and-labor-tracking .personnelLogRow .pill {
grid-column: 2;
justify-self: start
}
.rfid-personnel-and-labor-tracking .uiHeading {
flex-wrap: wrap
}
}  .rfid-production-work-in-progress .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.rfid-production-work-in-progress .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.rfid-production-work-in-progress .dark a:focus-visible,
.rfid-production-work-in-progress .final a:focus-visible {
outline-color: var(--yellow)
}
.rfid-production-work-in-progress .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.rfid-production-work-in-progress .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.rfid-production-work-in-progress .soft {
background: var(--sky2)
}
.rfid-production-work-in-progress .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.rfid-production-work-in-progress .dark h2,
.rfid-production-work-in-progress .dark h3 {
color: #fff
}
.rfid-production-work-in-progress .dark p {
color: #D6D6D6
}
.rfid-production-work-in-progress .dark .ey {
background: var(--yellow)
}
.rfid-production-work-in-progress .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.rfid-production-work-in-progress .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.rfid-production-work-in-progress .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.rfid-production-work-in-progress .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.rfid-production-work-in-progress .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.rfid-production-work-in-progress .textLink .icon {
width: 16px;
height: 16px
}
.rfid-production-work-in-progress .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.rfid-production-work-in-progress .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.rfid-production-work-in-progress .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.rfid-production-work-in-progress .skipLink:focus {
top: 12px
} .rfid-production-work-in-progress .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.rfid-production-work-in-progress .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.rfid-production-work-in-progress .heroGrid>*,
.rfid-production-work-in-progress .feature>*,
.rfid-production-work-in-progress .aiGrid>* {
min-width: 0
}
.rfid-production-work-in-progress .hero h1 {
max-width: 580px
}
.rfid-production-work-in-progress .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.rfid-production-work-in-progress .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.rfid-production-work-in-progress .heroVisual {
min-height: 555px;
position: relative
}
.rfid-production-work-in-progress .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.rfid-production-work-in-progress .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.rfid-production-work-in-progress .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.rfid-production-work-in-progress .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.rfid-production-work-in-progress .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.rfid-production-work-in-progress .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.rfid-production-work-in-progress .brandTile .icon {
width: 17px;
height: 17px
}
.rfid-production-work-in-progress .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.rfid-production-work-in-progress .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.rfid-production-work-in-progress .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.rfid-production-work-in-progress .viewPills span {
padding: 4px 7px
}
.rfid-production-work-in-progress .viewPills .active {
background: var(--navy);
color: #fff
}
.rfid-production-work-in-progress .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.rfid-production-work-in-progress .miniDates,
.rfid-production-work-in-progress .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.rfid-production-work-in-progress .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.rfid-production-work-in-progress .miniDates>div:last-child {
border: 0
}
.rfid-production-work-in-progress .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.rfid-production-work-in-progress .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.rfid-production-work-in-progress .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.rfid-production-work-in-progress .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.rfid-production-work-in-progress .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.rfid-production-work-in-progress .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.rfid-production-work-in-progress .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.rfid-production-work-in-progress .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.rfid-production-work-in-progress .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.rfid-production-work-in-progress .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.rfid-production-work-in-progress .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.rfid-production-work-in-progress .boardFooter strong {
color: var(--navy)
}
.rfid-production-work-in-progress .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.rfid-production-work-in-progress .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.rfid-production-work-in-progress .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.rfid-production-work-in-progress .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.rfid-production-work-in-progress .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.rfid-production-work-in-progress .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.rfid-production-work-in-progress .phoneHead small {
font-size: 9px;
color: #50697A
}
.rfid-production-work-in-progress .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.rfid-production-work-in-progress .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.rfid-production-work-in-progress .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.rfid-production-work-in-progress .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.rfid-production-work-in-progress .phoneJob.current {
background: var(--sky2)
}
.rfid-production-work-in-progress .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.rfid-production-work-in-progress .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.rfid-production-work-in-progress .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.rfid-production-work-in-progress .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.rfid-production-work-in-progress .lifecycleHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.rfid-production-work-in-progress .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.rfid-production-work-in-progress .lifecycleBody strong {
font-size: 12px
}
.rfid-production-work-in-progress .lifecycleBody span {
color: #CEDBE4
}
.rfid-production-work-in-progress .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.rfid-production-work-in-progress .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .rfid-production-work-in-progress .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.rfid-production-work-in-progress .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.rfid-production-work-in-progress .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.rfid-production-work-in-progress .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.rfid-production-work-in-progress .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.rfid-production-work-in-progress .logo.adobe {
font-size: 20px
}
.rfid-production-work-in-progress .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .rfid-production-work-in-progress .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.rfid-production-work-in-progress .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.rfid-production-work-in-progress .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.rfid-production-work-in-progress .outcome:nth-child(2):before {
background: var(--yellow)
}
.rfid-production-work-in-progress .outcome:nth-child(3):before {
background: var(--green)
}
.rfid-production-work-in-progress .outcome:nth-child(4):before {
background: var(--purple)
}
.rfid-production-work-in-progress .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.rfid-production-work-in-progress .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.rfid-production-work-in-progress .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
}
.rfid-production-work-in-progress .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.rfid-production-work-in-progress .feature.reverse .visual {
order: -1
}
.rfid-production-work-in-progress .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.rfid-production-work-in-progress .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.rfid-production-work-in-progress .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.rfid-production-work-in-progress .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.rfid-production-work-in-progress .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.rfid-production-work-in-progress .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.rfid-production-work-in-progress .visual>* {
position: relative;
z-index: 2
}
.rfid-production-work-in-progress .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.rfid-production-work-in-progress .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.rfid-production-work-in-progress .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.rfid-production-work-in-progress .uiHeading .icon {
width: 19px;
height: 19px
}
.rfid-production-work-in-progress .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.rfid-production-work-in-progress .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.rfid-production-work-in-progress .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.rfid-production-work-in-progress .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.rfid-production-work-in-progress .pill.green {
background: var(--greenbg);
color: #116746
}
.rfid-production-work-in-progress .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.rfid-production-work-in-progress .pill.gray {
background: #F0F3F5;
color: #586C79
}
.rfid-production-work-in-progress .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .rfid-production-work-in-progress .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.rfid-production-work-in-progress .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.rfid-production-work-in-progress .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.rfid-production-work-in-progress .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.rfid-production-work-in-progress .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.rfid-production-work-in-progress .plannerRow:last-child {
border-bottom: 0
}
.rfid-production-work-in-progress .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.rfid-production-work-in-progress .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.rfid-production-work-in-progress .avatar.green {
background: var(--greenbg);
color: #116746
}
.rfid-production-work-in-progress .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.rfid-production-work-in-progress .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.rfid-production-work-in-progress .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.rfid-production-work-in-progress .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.rfid-production-work-in-progress .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.rfid-production-work-in-progress .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.rfid-production-work-in-progress .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.rfid-production-work-in-progress .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.rfid-production-work-in-progress .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.rfid-production-work-in-progress .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.rfid-production-work-in-progress .pending .icon {
width: 18px;
height: 18px;
color: var(--navy)
}
.rfid-production-work-in-progress .pending strong {
font-size: 11px;
color: var(--navy)
}
.rfid-production-work-in-progress .pending .pill {
margin-left: auto
}
.rfid-production-work-in-progress .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.rfid-production-work-in-progress .legend span {
display: flex;
align-items: center;
gap: 4px
}
.rfid-production-work-in-progress .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.rfid-production-work-in-progress .legend .green i {
background: var(--green)
}
.rfid-production-work-in-progress .legend .yellow i {
background: #D7A200
} .rfid-production-work-in-progress .roster {
display: grid;
gap: 10px
}
.rfid-production-work-in-progress .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.rfid-production-work-in-progress .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.rfid-production-work-in-progress .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.rfid-production-work-in-progress .rosterName {
flex: 1;
min-width: 0
}
.rfid-production-work-in-progress .rosterName strong {
display: block;
font-size: 11px
}
.rfid-production-work-in-progress .rosterName small {
color: var(--muted);
font-size: 9px
}
.rfid-production-work-in-progress .rosterTop .pill {
font-size: 8px
}
.rfid-production-work-in-progress .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.rfid-production-work-in-progress .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.rfid-production-work-in-progress .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.rfid-production-work-in-progress .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.rfid-production-work-in-progress .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.rfid-production-work-in-progress .rosterNote .icon {
width: 19px;
height: 19px
}
.rfid-production-work-in-progress .rosterNote strong {
display: block;
margin-bottom: 3px
} .rfid-production-work-in-progress .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.rfid-production-work-in-progress .ruleCard .uiLabel {
color: #9CBED1
}
.rfid-production-work-in-progress .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.rfid-production-work-in-progress .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.rfid-production-work-in-progress .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.rfid-production-work-in-progress .workCards {
display: grid;
gap: 9px
}
.rfid-production-work-in-progress .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.rfid-production-work-in-progress .workCard strong {
display: block;
font-size: 11px
}
.rfid-production-work-in-progress .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.rfid-production-work-in-progress .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.rfid-production-work-in-progress .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.rfid-production-work-in-progress .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.rfid-production-work-in-progress .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.rfid-production-work-in-progress .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.rfid-production-work-in-progress .modeRow .icon {
width: 14px;
height: 14px
} .rfid-production-work-in-progress .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.rfid-production-work-in-progress .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.rfid-production-work-in-progress .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.rfid-production-work-in-progress .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.rfid-production-work-in-progress .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.rfid-production-work-in-progress .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.rfid-production-work-in-progress .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.rfid-production-work-in-progress .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.rfid-production-work-in-progress .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.rfid-production-work-in-progress .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.rfid-production-work-in-progress .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.rfid-production-work-in-progress .lookupSide {
display: grid;
gap: 11px
}
.rfid-production-work-in-progress .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.rfid-production-work-in-progress .lookupCard .icon {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.rfid-production-work-in-progress .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.rfid-production-work-in-progress .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.rfid-production-work-in-progress .lookupCard.done {
border-left: 3px solid var(--green)
} .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.rfid-production-work-in-progress .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.rfid-production-work-in-progress .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.rfid-production-work-in-progress .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.rfid-production-work-in-progress .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.rfid-production-work-in-progress .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.rfid-production-work-in-progress .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.rfid-production-work-in-progress .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.rfid-production-work-in-progress .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.rfid-production-work-in-progress .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .rfid-production-work-in-progress .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.rfid-production-work-in-progress .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.rfid-production-work-in-progress .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.rfid-production-work-in-progress .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.rfid-production-work-in-progress .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.rfid-production-work-in-progress .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.rfid-production-work-in-progress .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .rfid-production-work-in-progress .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.rfid-production-work-in-progress .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.rfid-production-work-in-progress .featureCard:hover {
transform: translateY(-3px)
}
.rfid-production-work-in-progress .featureIcon,
.rfid-production-work-in-progress .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.rfid-production-work-in-progress .featureIcon .icon,
.rfid-production-work-in-progress .useIcon .icon {
width: 22px;
height: 22px
}
.rfid-production-work-in-progress .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.rfid-production-work-in-progress .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .rfid-production-work-in-progress .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.rfid-production-work-in-progress .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.rfid-production-work-in-progress .integration .icon {
width: 21px;
height: 21px;
color: var(--navy)
}
.rfid-production-work-in-progress .integration:hover {
background: var(--sky2)
}
.rfid-production-work-in-progress .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.rfid-production-work-in-progress .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.rfid-production-work-in-progress .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.rfid-production-work-in-progress .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.rfid-production-work-in-progress .stream .icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
.rfid-production-work-in-progress .stream>span[aria-hidden] {
color: #86B2C9
} .rfid-production-work-in-progress .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.rfid-production-work-in-progress .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.rfid-production-work-in-progress .useCase h3 {
font-size: 20px
}
.rfid-production-work-in-progress .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.rfid-production-work-in-progress .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.rfid-production-work-in-progress .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.rfid-production-work-in-progress .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.rfid-production-work-in-progress .review h3 {
font-size: 22px
}
.rfid-production-work-in-progress .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.rfid-production-work-in-progress .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.rfid-production-work-in-progress .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.rfid-production-work-in-progress .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.rfid-production-work-in-progress .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.rfid-production-work-in-progress .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.rfid-production-work-in-progress .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.rfid-production-work-in-progress .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.rfid-production-work-in-progress .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.rfid-production-work-in-progress .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.rfid-production-work-in-progress .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.rfid-production-work-in-progress .cta h3 {
font-size: 19px
}
.rfid-production-work-in-progress .cta.darkCta h3 {
color: #fff
}
.rfid-production-work-in-progress .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.rfid-production-work-in-progress .cta.darkCta p {
color: #D1D1D1
}
.rfid-production-work-in-progress .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.rfid-production-work-in-progress .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.rfid-production-work-in-progress .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.rfid-production-work-in-progress .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.rfid-production-work-in-progress .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.rfid-production-work-in-progress .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.rfid-production-work-in-progress .reveal {
opacity: 1;
transform: none
}
.rfid-production-work-in-progress .icon {
margin: 0 !important;
background: transparent !important;
} @media(max-width:1100px) and (min-width:961px) {
.rfid-production-work-in-progress .heroGrid {
gap: 28px
}
.rfid-production-work-in-progress .hero .lead {
font-size: 17px
}
.rfid-production-work-in-progress .assetPhone {
width: 168px;
top: 235px
}
.rfid-production-work-in-progress .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.rfid-production-work-in-progress .scheduleBoard {
width: 96%;
left: 0
}
.rfid-production-work-in-progress .miniJob {
padding: 4px
}
.rfid-production-work-in-progress .heroVisual,
.rfid-production-work-in-progress .assetStage {
min-height: 555px
}
.rfid-production-work-in-progress .rfid-production-work-in-progress .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.rfid-production-work-in-progress .visual {
padding: 17px
}
.rfid-production-work-in-progress .plannerTicks,
.rfid-production-work-in-progress .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.rfid-production-work-in-progress .plannerRow {
grid-template-columns: 75px 1fr
}
.rfid-production-work-in-progress .person {
font-size: 9px;
padding: 10px 5px
}
.rfid-production-work-in-progress .person .avatar {
display: none
}
}
@media(max-width:960px) {
.rfid-production-work-in-progress .heroGrid,
.rfid-production-work-in-progress .feature,
.rfid-production-work-in-progress .aiGrid,
.rfid-production-work-in-progress .final {
grid-template-columns: 1fr
}
.rfid-production-work-in-progress .heroGrid {
gap: 36px
}
.rfid-production-work-in-progress .hero h1 {
max-width: 760px
}
.rfid-production-work-in-progress .hero .lead {
max-width: 750px
}
.rfid-production-work-in-progress .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.rfid-production-work-in-progress .assetStage {
margin: auto
}
.rfid-production-work-in-progress .feature.reverse .visual {
order: 0
}
.rfid-production-work-in-progress .feature {
gap: 30px
}
.rfid-production-work-in-progress .feature>div:first-child {
max-width: 800px
}
.rfid-production-work-in-progress .outcomes,
.rfid-production-work-in-progress .featureGrid,
.rfid-production-work-in-progress .connectedGrid,
.rfid-production-work-in-progress .useCases {
grid-template-columns: repeat(2, 1fr)
}
.rfid-production-work-in-progress .logos {
grid-template-columns: repeat(3, 1fr)
}
.rfid-production-work-in-progress .integrations {
grid-template-columns: repeat(3, 1fr)
}
.rfid-production-work-in-progress .reviews {
grid-template-columns: 1fr
}
.rfid-production-work-in-progress .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.rfid-production-work-in-progress .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.rfid-production-work-in-progress .ratingItem:nth-child(2) {
border: 0
}
.rfid-production-work-in-progress .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.rfid-production-work-in-progress .final .btn {
min-width: 195px
}
.rfid-production-work-in-progress .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.rfid-production-work-in-progress .aiGrid {
gap: 30px
}
.rfid-production-work-in-progress .aiMini {
max-width: 760px
}
.rfid-production-work-in-progress .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.rfid-production-work-in-progress .wrap {
width: calc(100% - 24px)
}
.rfid-production-work-in-progress .hero {
padding: 32px 0 42px
}
.rfid-production-work-in-progress .lead {
font-size: 17px
}
.rfid-production-work-in-progress .sectionHead p {
font-size: 16px
}
.rfid-production-work-in-progress .sectionHead {
margin-bottom: 28px
}
.rfid-production-work-in-progress .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.rfid-production-work-in-progress .heroGrid {
gap: 24px
}
.rfid-production-work-in-progress .hero .actions {
gap: 8px
}
.rfid-production-work-in-progress .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.rfid-production-work-in-progress .micro {
font-size: 11px
}
.rfid-production-work-in-progress .heroPills {
gap: 6px
}
.rfid-production-work-in-progress .heroPills span {
font-size: 9px
}
.rfid-production-work-in-progress .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.rfid-production-work-in-progress .heroVisual {
min-height: 525px
}
.rfid-production-work-in-progress .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.rfid-production-work-in-progress .assetStage:before {
inset: 38px 0 28px 10px
}
.rfid-production-work-in-progress .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.rfid-production-work-in-progress .boardHeader {
padding: 12px
}
.rfid-production-work-in-progress .boardBrand {
font-size: 12px
}
.rfid-production-work-in-progress .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.rfid-production-work-in-progress .miniCalendar {
margin: 0 10px 12px
}
.rfid-production-work-in-progress .miniDates,
.rfid-production-work-in-progress .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.rfid-production-work-in-progress .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.rfid-production-work-in-progress .miniPerson small {
font-size: 7px
}
.rfid-production-work-in-progress .miniCell {
padding: 4px 3px
}
.rfid-production-work-in-progress .miniDates>div {
font-size: 8px
}
.rfid-production-work-in-progress .miniDates small {
font-size: 7px
}
.rfid-production-work-in-progress .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.rfid-production-work-in-progress .miniJob b {
font-size: 7px
}
.rfid-production-work-in-progress .miniRow {
min-height: 57px
}
.rfid-production-work-in-progress .miniJob {
min-height: 48px
}
.rfid-production-work-in-progress .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.rfid-production-work-in-progress .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.rfid-production-work-in-progress .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.rfid-production-work-in-progress .phoneHead strong {
font-size: 11px
}
.rfid-production-work-in-progress .phoneHead small {
font-size: 8px
}
.rfid-production-work-in-progress .phoneAgenda {
padding: 8px;
gap: 6px
}
.rfid-production-work-in-progress .phoneJob {
padding: 7px;
font-size: 8px
}
.rfid-production-work-in-progress .phoneJob strong {
font-size: 9px
}
.rfid-production-work-in-progress .phoneJob small {
font-size: 7px
}
.rfid-production-work-in-progress .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.rfid-production-work-in-progress .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.rfid-production-work-in-progress .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.rfid-production-work-in-progress .lifecycleHead .icon {
width: 15px;
height: 15px
}
.rfid-production-work-in-progress .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.rfid-production-work-in-progress .lifecycleBody strong {
font-size: 10px
}
.rfid-production-work-in-progress .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.rfid-production-work-in-progress .diagramCaption {
font-size: 9px
}
.rfid-production-work-in-progress .trust {
padding: 23px 0
}
.rfid-production-work-in-progress .trustLabel {
font-size: 12px
}
.rfid-production-work-in-progress .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.rfid-production-work-in-progress .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.rfid-production-work-in-progress .logo.dhl {
font-size: 19px
}
.rfid-production-work-in-progress .logo.adobe {
font-size: 17px
}
.rfid-production-work-in-progress .logo.golden {
font-size: 8px
}
.rfid-production-work-in-progress .fl,
.rfid-production-work-in-progress .outcomes,
.rfid-production-work-in-progress .featureGrid,
.rfid-production-work-in-progress .connectedGrid,
.rfid-production-work-in-progress .useCases {
grid-template-columns: 1fr
}
.rfid-production-work-in-progress .fi {
font-size: 14px
}
.rfid-production-work-in-progress .outcome {
padding: 21px
}
.rfid-production-work-in-progress .outcome strong {
margin-top: 12px
}
.rfid-production-work-in-progress .outcome span {
font-size: 14px
}
.rfid-production-work-in-progress .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.rfid-production-work-in-progress .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.rfid-production-work-in-progress .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-production-work-in-progress .uiSub {
font-size: 9px
}
.rfid-production-work-in-progress .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.rfid-production-work-in-progress .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.rfid-production-work-in-progress .person {
font-size: 9px;
padding: 8px 6px
}
.rfid-production-work-in-progress .person .avatar {
display: none
}
.rfid-production-work-in-progress .person small {
font-size: 8px
}
.rfid-production-work-in-progress .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.rfid-production-work-in-progress .slot strong {
font-size: 8px
}
.rfid-production-work-in-progress .plannerHead {
font-size: 10px;
padding: 10px
}
.rfid-production-work-in-progress .plannerHead .pill {
font-size: 8px
}
.rfid-production-work-in-progress .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.rfid-production-work-in-progress .pending strong {
font-size: 10px
}
.rfid-production-work-in-progress .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-production-work-in-progress .rosterTop .pill {
font-size: 8px
}
.rfid-production-work-in-progress .rosterCard {
padding: 11px
}
.rfid-production-work-in-progress .rosterNote {
padding: 11px;
font-size: 10px
}
.rfid-production-work-in-progress .ruleCard {
padding: 14px
}
.rfid-production-work-in-progress .ruleCard strong {
font-size: 15px
}
.rfid-production-work-in-progress .workCard {
padding: 10px;
gap: 8px
}
.rfid-production-work-in-progress .workCard strong {
font-size: 10px
}
.rfid-production-work-in-progress .workCard small {
font-size: 8px
}
.rfid-production-work-in-progress .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.rfid-production-work-in-progress .modeRow span {
font-size: 8px;
padding: 7px
}
.rfid-production-work-in-progress .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.rfid-production-work-in-progress .phoneMockInner {
padding: 11px;
min-height: 288px
}
.rfid-production-work-in-progress .lookupCard {
padding: 10px
}
.rfid-production-work-in-progress .lookupCard strong {
font-size: 10px
}
.rfid-production-work-in-progress .lookupCard span {
font-size: 9px
}
.rfid-production-work-in-progress .lookupCard .icon {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.rfid-production-work-in-progress .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.rfid-production-work-in-progress .aiMini div {
padding: 16px
}
.rfid-production-work-in-progress .aiMini strong {
font-size: 14px
}
.rfid-production-work-in-progress .aiMini span {
font-size: 13px
}
.rfid-production-work-in-progress .promptBox {
padding: 18px;
border-radius: 17px
}
.rfid-production-work-in-progress .prompt {
font-size: 13px;
padding: 13px
}
.rfid-production-work-in-progress .promptHead {
font-size: 19px
}
.rfid-production-work-in-progress .promptFoot {
font-size: 10px !important
}
.rfid-production-work-in-progress .connectedCard {
padding: 22px
}
.rfid-production-work-in-progress .connectedCard p,
.rfid-production-work-in-progress .featureCard p,
.rfid-production-work-in-progress .useCase p {
font-size: 14px
}
.rfid-production-work-in-progress .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.rfid-production-work-in-progress .integrations {
grid-template-columns: repeat(2, 1fr)
}
.rfid-production-work-in-progress .integration:last-child {
grid-column: 1/-1
}
.rfid-production-work-in-progress .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.rfid-production-work-in-progress .stream>span[aria-hidden] {
display: none
}
.rfid-production-work-in-progress .streamStep {
min-height: 24px
}
.rfid-production-work-in-progress .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.rfid-production-work-in-progress .ratingItem {
border: 0
}
.rfid-production-work-in-progress .ratingLead {
margin-bottom: 3px
}
.rfid-production-work-in-progress .review p {
font-size: 14px
}
.rfid-production-work-in-progress .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.rfid-production-work-in-progress .ctaBtns {
width: 100%
}
.rfid-production-work-in-progress .ctaBtns .btn {
flex: 1
}
.rfid-production-work-in-progress .cta p {
font-size: 14px
}
.rfid-production-work-in-progress .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.rfid-production-work-in-progress .final h2 {
font-size: 32px
}
.rfid-production-work-in-progress .final p {
font-size: 15px
}
.rfid-production-work-in-progress .final .ctaBtns {
flex-direction: column
}
.rfid-production-work-in-progress .final .btn {
min-width: 0;
width: 100%
}
}
@media(max-width:360px) {
.rfid-production-work-in-progress .heroVisual,
.rfid-production-work-in-progress .assetStage {
height: 520px;
min-height: 520px
}
.rfid-production-work-in-progress .assetPhone {
width: 152px;
top: 242px
}
.rfid-production-work-in-progress .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.rfid-production-work-in-progress .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.rfid-production-work-in-progress .lifecycleBody {
padding: 8px;
font-size: 8px
}
.rfid-production-work-in-progress .lifecycleBody strong {
font-size: 9px
}
.rfid-production-work-in-progress .boardBrand {
font-size: 11px
}
.rfid-production-work-in-progress .sampleBadge {
font-size: 8px
}
.rfid-production-work-in-progress .miniDates,
.rfid-production-work-in-progress .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.rfid-production-work-in-progress .miniDates small {
font-size: 6px
}
.rfid-production-work-in-progress .miniJob b {
font-size: 6.5px
}
.rfid-production-work-in-progress .boardFooter {
padding-right: 135px;
min-height: 45px
}
.rfid-production-work-in-progress .mobileLookup {
grid-template-columns: 1fr
}
.rfid-production-work-in-progress .phoneMock {
width: 200px;
margin: auto
}
.rfid-production-work-in-progress .lookupSide {
grid-template-columns: 1fr
}
.rfid-production-work-in-progress .lookupCard {
padding: 13px
}
.rfid-production-work-in-progress .lookupCard strong {
font-size: 12px
}
.rfid-production-work-in-progress .lookupCard span {
font-size: 11px
}
.rfid-production-work-in-progress .plannerHead {
gap: 5px
}
.rfid-production-work-in-progress .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.rfid-production-work-in-progress .plannerRow {
grid-template-columns: 61px 1fr
}
.rfid-production-work-in-progress .uiHeading>span:first-child {
gap: 5px
}
.rfid-production-work-in-progress .uiHeading .icon {
width: 17px;
height: 17px
}
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}   #wip-tracking-page .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
#wip-tracking-page .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
#wip-tracking-page .assetStage:before {
content: none
}
#wip-tracking-page .wipHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
#wip-tracking-page .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
#wip-tracking-page .ey {
max-width: 100%
}
#wip-tracking-page .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
#wip-tracking-page .uiHeading>span:first-child {
min-width: 0
}
#wip-tracking-page .uiHeading .icon {
flex-shrink: 0
}
#wip-tracking-page .wipPanel {
padding: 17px
}
#wip-tracking-page .wipRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
#wip-tracking-page .wipRecordHead>span:first-child {
min-width: 0
}
#wip-tracking-page .wipIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
#wip-tracking-page .wipCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
#wip-tracking-page .wipMeta {
display: grid;
gap: 8px
}
#wip-tracking-page .wipMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#wip-tracking-page .wipMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
#wip-tracking-page .wipMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#wip-tracking-page .wipRows {
padding: 0 14px
}
#wip-tracking-page .wipRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
#wip-tracking-page .wipRow:last-child {
border: 0
}
#wip-tracking-page .wipRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#wip-tracking-page .wipRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
#wip-tracking-page .wipRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
#wip-tracking-page .wipFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
#wip-tracking-page .wipFoot strong {
color: var(--navy)
}
#wip-tracking-page .wipAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
#wip-tracking-page .wipAlert>.icon {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
#wip-tracking-page .wipAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
#wip-tracking-page .wipAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
#wip-tracking-page .wipDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
#wip-tracking-page .wipDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
#wip-tracking-page .wipDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
#wip-tracking-page .wipDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
#wip-tracking-page .wipDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
#wip-tracking-page .wipDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
#wip-tracking-page .wipDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
#wip-tracking-page .wipDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
#wip-tracking-page .wipDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
#wip-tracking-page .wipDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
#wip-tracking-page .wipDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
#wip-tracking-page .wipDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
#wip-tracking-page .wipQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
#wip-tracking-page .wipQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#wip-tracking-page .wipQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
#wip-tracking-page .wipQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
#wip-tracking-page .wipQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
#wip-tracking-page .wipQueueBar span {
display: block;
height: 100%;
width: var(--wip-bar);
background: var(--brand);
border-radius: 6px
}
#wip-tracking-page .wipQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
#wip-tracking-page .wipTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
#wip-tracking-page .wipTraceHead .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
#wip-tracking-page .wipTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
#wip-tracking-page .wipTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
#wip-tracking-page .wipTraceHead .pill {
margin-left: auto
}
#wip-tracking-page .wipTimeline {
padding: 17px 15px
}
#wip-tracking-page .wipEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
#wip-tracking-page .wipEvent:last-child {
padding-bottom: 0
}
#wip-tracking-page .wipEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#wip-tracking-page .wipEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
#wip-tracking-page .wipEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
#wip-tracking-page .wipEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
#wip-tracking-page .wipEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
#wip-tracking-page .wipEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
#wip-tracking-page .wipNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
#wip-tracking-page .wipNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
#wip-tracking-page .wipSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
#wip-tracking-page .wipSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
#wip-tracking-page .wipSource .icon {
color: var(--navy);
margin-bottom: 8px
}
#wip-tracking-page .wipSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#wip-tracking-page .wipSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
#wip-tracking-page .wipConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
#wip-tracking-page .wipConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
#wip-tracking-page .wipHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
#wip-tracking-page .wipHub strong {
display: block;
font-size: 18px
}
#wip-tracking-page .wipHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
#wip-tracking-page .wipHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
#wip-tracking-page .wipHandoff>strong {
font-size: 13px;
color: var(--navy)
}
#wip-tracking-page .wipHandoff>span:not(.pill) {
color: var(--muted)
}
#wip-tracking-page .wipHandoff .wipHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
#wip-tracking-page .wipScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
#wip-tracking-page .wipScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
#wip-tracking-page .wipComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
#wip-tracking-page .wipComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
#wip-tracking-page .wipComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
#wip-tracking-page .wipComparison th,
#wip-tracking-page .wipComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
#wip-tracking-page .wipComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
#wip-tracking-page .wipComparison tbody th {
font-size: 14px;
color: var(--navy)
}
#wip-tracking-page .wipComparison tbody td {
color: var(--muted)
}
#wip-tracking-page .wipComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
#wip-tracking-page .wipNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
#wip-tracking-page .wipNote strong {
color: var(--navy)
}
#wip-tracking-page .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
#wip-tracking-page .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
#wip-tracking-page .heroVisual {
max-width: 480px
}
#wip-tracking-page .wipIdentity {
gap: 12px
}
#wip-tracking-page .wipMeta>div {
padding: 9px 10px
}
#wip-tracking-page .wipMeta strong {
font-size: 11px
}
#wip-tracking-page .wipRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
#wip-tracking-page .wipRows {
padding: 0 11px
}
#wip-tracking-page .wipRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
#wip-tracking-page .wipRow strong {
font-size: 11px
}
#wip-tracking-page .wipRow small {
font-size: 9px
}
#wip-tracking-page .wipRow .pill {
font-size: 8px;
padding: 4px 6px
}
#wip-tracking-page .wipDwell {
padding: 16px
}
#wip-tracking-page .wipDwellMetrics {
gap: 12px
}
#wip-tracking-page .wipDwellMetrics>div+div {
padding-left: 12px
}
#wip-tracking-page .wipDwellMetrics b {
font-size: 32px
}
#wip-tracking-page .wipDwellMetrics span {
font-size: 10px
}
#wip-tracking-page .wipQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
#wip-tracking-page .wipTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
#wip-tracking-page .wipTraceHead strong {
font-size: 12px
}
#wip-tracking-page .wipTraceHead .pill {
font-size: 8px
}
#wip-tracking-page .wipTimeline {
padding: 15px 12px
}
#wip-tracking-page .wipSources {
gap: 8px
}
#wip-tracking-page .wipSource {
padding: 12px
}
#wip-tracking-page .wipHandoff {
padding: 13px;
gap: 10px
}
#wip-tracking-page .wipHandoff>strong {
font-size: 12px
}
#wip-tracking-page .wipComparison,
#wip-tracking-page .wipComparison tbody,
#wip-tracking-page .wipComparison tr,
#wip-tracking-page .wipComparison th,
#wip-tracking-page .wipComparison td {
display: block;
width: 100%
}
#wip-tracking-page .wipComparison colgroup {
display: none
}
#wip-tracking-page .wipComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
#wip-tracking-page .wipComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
#wip-tracking-page .wipComparison th,
#wip-tracking-page .wipComparison td {
padding: 10px 16px
}
#wip-tracking-page .wipComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
#wip-tracking-page .wipComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
#wip-tracking-page .wipComparison tbody tr+tr>* {
border: 0
}
#wip-tracking-page .wipComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
#wip-tracking-page .wipComparison tbody td:last-child {
padding-bottom: 18px
}
#wip-tracking-page .wipNote {
padding: 17px
}
}
@media(max-width:360px) {
#wip-tracking-page .wipIdentity {
grid-template-columns: 1fr
}
#wip-tracking-page .wipCarrierSvg {
max-width: 170px
}
#wip-tracking-page .wipMeta {
grid-template-columns: 1fr 1fr
}
#wip-tracking-page .wipMeta>div:last-child {
grid-column: 1/-1
}
#wip-tracking-page .wipRow {
grid-template-columns: 33px minmax(0, 1fr)
}
#wip-tracking-page .wipRow .pill {
grid-column: 2;
justify-self: start
}
#wip-tracking-page .wipDwellLegend {
font-size: 8px
}
#wip-tracking-page .wipQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
#wip-tracking-page .wipTraceHead .pill {
margin-left: 47px
}
#wip-tracking-page .wipHandoff {
grid-template-columns: 1fr
}
#wip-tracking-page .wipHandoff .pill {
justify-self: start
}
}  .lead-opportunity-management .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.lead-opportunity-management .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.lead-opportunity-management .dark a:focus-visible,
.lead-opportunity-management .final a:focus-visible {
outline-color: var(--yellow)
}
.lead-opportunity-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.lead-opportunity-management .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.lead-opportunity-management .soft {
background: var(--sky2)
}
.lead-opportunity-management .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.lead-opportunity-management .dark h2,
.lead-opportunity-management .dark h3 {
color: #fff
}
.lead-opportunity-management .dark p {
color: #D6D6D6
}
.lead-opportunity-management .dark .ey {
background: var(--yellow)
}
.lead-opportunity-management .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.lead-opportunity-management .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.lead-opportunity-management .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.lead-opportunity-management .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
background: transparent;
margin-bottom: 0;
}
.lead-opportunity-management .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.lead-opportunity-management .textLink .icon {
width: 16px;
height: 16px
}
.lead-opportunity-management .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.lead-opportunity-management .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.lead-opportunity-management .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.lead-opportunity-management .skipLink:focus {
top: 12px
} .lead-opportunity-management .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.lead-opportunity-management .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.lead-opportunity-management .heroGrid>*,
.lead-opportunity-management .feature>*,
.lead-opportunity-management .aiGrid>* {
min-width: 0
}
.lead-opportunity-management .hero h1 {
max-width: 580px
}
.lead-opportunity-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.lead-opportunity-management .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.lead-opportunity-management .heroVisual {
min-height: 555px;
position: relative
}
.lead-opportunity-management .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.lead-opportunity-management .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.lead-opportunity-management .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.lead-opportunity-management .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.lead-opportunity-management .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.lead-opportunity-management .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.lead-opportunity-management .brandTile .icon {
width: 17px;
height: 17px
}
.lead-opportunity-management .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.lead-opportunity-management .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.lead-opportunity-management .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.lead-opportunity-management .viewPills span {
padding: 4px 7px
}
.lead-opportunity-management .viewPills .active {
background: var(--navy);
color: #fff
}
.lead-opportunity-management .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.lead-opportunity-management .miniDates,
.lead-opportunity-management .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.lead-opportunity-management .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.lead-opportunity-management .miniDates>div:last-child {
border: 0
}
.lead-opportunity-management .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.lead-opportunity-management .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.lead-opportunity-management .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.lead-opportunity-management .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.lead-opportunity-management .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.lead-opportunity-management .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.lead-opportunity-management .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.lead-opportunity-management .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.lead-opportunity-management .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.lead-opportunity-management .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.lead-opportunity-management .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.lead-opportunity-management .boardFooter strong {
color: var(--navy)
}
.lead-opportunity-management .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.lead-opportunity-management .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.lead-opportunity-management .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.lead-opportunity-management .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.lead-opportunity-management .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.lead-opportunity-management .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.lead-opportunity-management .phoneHead small {
font-size: 9px;
color: #50697A
}
.lead-opportunity-management .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.lead-opportunity-management .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.lead-opportunity-management .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.lead-opportunity-management .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.lead-opportunity-management .phoneJob.current {
background: var(--sky2)
}
.lead-opportunity-management .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.lead-opportunity-management .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.lead-opportunity-management .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.lead-opportunity-management .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.lead-opportunity-management .lifecycleHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.lead-opportunity-management .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.lead-opportunity-management .lifecycleBody strong {
font-size: 12px
}
.lead-opportunity-management .lifecycleBody span {
color: #CEDBE4
}
.lead-opportunity-management .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.lead-opportunity-management .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .lead-opportunity-management .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.lead-opportunity-management .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.lead-opportunity-management .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.lead-opportunity-management .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.lead-opportunity-management .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.lead-opportunity-management .logo.adobe {
font-size: 20px
}
.lead-opportunity-management .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .lead-opportunity-management .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.lead-opportunity-management .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.lead-opportunity-management .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.lead-opportunity-management .outcome:nth-child(2):before {
background: var(--yellow)
}
.lead-opportunity-management .outcome:nth-child(3):before {
background: var(--green)
}
.lead-opportunity-management .outcome:nth-child(4):before {
background: var(--purple)
}
.lead-opportunity-management .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.lead-opportunity-management .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.lead-opportunity-management .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .lead-opportunity-management .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.lead-opportunity-management .feature.reverse .visual {
order: -1
}
.lead-opportunity-management .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.lead-opportunity-management .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.lead-opportunity-management .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.lead-opportunity-management .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.lead-opportunity-management .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.lead-opportunity-management .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.lead-opportunity-management .visual>* {
position: relative;
z-index: 2
}
.lead-opportunity-management .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.lead-opportunity-management .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.lead-opportunity-management .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.lead-opportunity-management .uiHeading .icon {
width: 19px;
height: 19px
}
.lead-opportunity-management .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.lead-opportunity-management .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.lead-opportunity-management .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.lead-opportunity-management .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.lead-opportunity-management .pill.green {
background: var(--greenbg);
color: #116746
}
.lead-opportunity-management .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.lead-opportunity-management .pill.gray {
background: #F0F3F5;
color: #586C79
}
.lead-opportunity-management .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .lead-opportunity-management .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.lead-opportunity-management .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.lead-opportunity-management .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.lead-opportunity-management .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.lead-opportunity-management .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.lead-opportunity-management .plannerRow:last-child {
border-bottom: 0
}
.lead-opportunity-management .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.lead-opportunity-management .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.lead-opportunity-management .avatar.green {
background: var(--greenbg);
color: #116746
}
.lead-opportunity-management .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.lead-opportunity-management .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.lead-opportunity-management .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.lead-opportunity-management .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.lead-opportunity-management .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.lead-opportunity-management .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.lead-opportunity-management .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.lead-opportunity-management .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.lead-opportunity-management .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.lead-opportunity-management .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.lead-opportunity-management .pending .icon {
width: 18px;
height: 18px;
color: var(--navy)
}
.lead-opportunity-management .pending strong {
font-size: 11px;
color: var(--navy)
}
.lead-opportunity-management .pending .pill {
margin-left: auto
}
.lead-opportunity-management .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.lead-opportunity-management .legend span {
display: flex;
align-items: center;
gap: 4px
}
.lead-opportunity-management .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.lead-opportunity-management .legend .green i {
background: var(--green)
}
.lead-opportunity-management .legend .yellow i {
background: #D7A200
} .lead-opportunity-management .roster {
display: grid;
gap: 10px
}
.lead-opportunity-management .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.lead-opportunity-management .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.lead-opportunity-management .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.lead-opportunity-management .rosterName {
flex: 1;
min-width: 0
}
.lead-opportunity-management .rosterName strong {
display: block;
font-size: 11px
}
.lead-opportunity-management .rosterName small {
color: var(--muted);
font-size: 9px
}
.lead-opportunity-management .rosterTop .pill {
font-size: 8px
}
.lead-opportunity-management .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.lead-opportunity-management .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.lead-opportunity-management .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.lead-opportunity-management .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.lead-opportunity-management .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.lead-opportunity-management .rosterNote .icon {
width: 19px;
height: 19px
}
.lead-opportunity-management .rosterNote strong {
display: block;
margin-bottom: 3px
} .lead-opportunity-management .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.lead-opportunity-management .ruleCard .uiLabel {
color: #9CBED1
}
.lead-opportunity-management .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.lead-opportunity-management .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.lead-opportunity-management .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.lead-opportunity-management .workCards {
display: grid;
gap: 9px
}
.lead-opportunity-management .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.lead-opportunity-management .workCard strong {
display: block;
font-size: 11px
}
.lead-opportunity-management .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.lead-opportunity-management .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.lead-opportunity-management .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.lead-opportunity-management .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.lead-opportunity-management .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.lead-opportunity-management .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.lead-opportunity-management .modeRow .icon {
width: 14px;
height: 14px
} .lead-opportunity-management .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.lead-opportunity-management .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.lead-opportunity-management .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.lead-opportunity-management .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.lead-opportunity-management .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.lead-opportunity-management .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.lead-opportunity-management .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.lead-opportunity-management .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.lead-opportunity-management .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.lead-opportunity-management .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.lead-opportunity-management .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.lead-opportunity-management .lookupSide {
display: grid;
gap: 11px
}
.lead-opportunity-management .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.lead-opportunity-management .lookupCard .icon {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.lead-opportunity-management .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.lead-opportunity-management .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.lead-opportunity-management .lookupCard.done {
border-left: 3px solid var(--green)
} .lead-opportunity-management .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.lead-opportunity-management .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.lead-opportunity-management .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.lead-opportunity-management .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.lead-opportunity-management .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.lead-opportunity-management .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.lead-opportunity-management .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.lead-opportunity-management .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.lead-opportunity-management .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.lead-opportunity-management .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .lead-opportunity-management .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.lead-opportunity-management .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.lead-opportunity-management .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.lead-opportunity-management .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.lead-opportunity-management .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.lead-opportunity-management .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.lead-opportunity-management .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .lead-opportunity-management .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.lead-opportunity-management .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.lead-opportunity-management .featureCard:hover {
transform: translateY(-3px)
}
.lead-opportunity-management .featureIcon,
.lead-opportunity-management .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.lead-opportunity-management .featureIcon .icon,
.lead-opportunity-management .useIcon .icon {
width: 22px;
height: 22px
}
.lead-opportunity-management .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.lead-opportunity-management .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .lead-opportunity-management .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.lead-opportunity-management .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.lead-opportunity-management .integration .icon {
width: 21px;
height: 21px;
color: var(--navy)
}
.lead-opportunity-management .integration:hover {
background: var(--sky2)
}
.lead-opportunity-management .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.lead-opportunity-management .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.lead-opportunity-management .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.lead-opportunity-management .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.lead-opportunity-management .stream .icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
.lead-opportunity-management .stream>span[aria-hidden] {
color: #86B2C9
} .lead-opportunity-management .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.lead-opportunity-management .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.lead-opportunity-management .useCase h3 {
font-size: 20px
}
.lead-opportunity-management .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.lead-opportunity-management .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.lead-opportunity-management .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.lead-opportunity-management .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.lead-opportunity-management .review h3 {
font-size: 22px
}
.lead-opportunity-management .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.lead-opportunity-management .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.lead-opportunity-management .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.lead-opportunity-management .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.lead-opportunity-management .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.lead-opportunity-management .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.lead-opportunity-management .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.lead-opportunity-management .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.lead-opportunity-management .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .lead-opportunity-management .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.lead-opportunity-management .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.lead-opportunity-management .cta h3 {
font-size: 19px
}
.lead-opportunity-management .cta.darkCta h3 {
color: #fff
}
.lead-opportunity-management .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.lead-opportunity-management .cta.darkCta p {
color: #D1D1D1
}
.lead-opportunity-management .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.lead-opportunity-management .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.lead-opportunity-management .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.lead-opportunity-management .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.lead-opportunity-management .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.lead-opportunity-management .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.lead-opportunity-management .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.lead-opportunity-management .heroGrid {
gap: 28px
}
.lead-opportunity-management .hero .lead {
font-size: 17px
}
.lead-opportunity-management .assetPhone {
width: 168px;
top: 235px
}
.lead-opportunity-management .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.lead-opportunity-management .scheduleBoard {
width: 96%;
left: 0
}
.lead-opportunity-management .miniJob {
padding: 4px
}
.lead-opportunity-management .heroVisual,
.lead-opportunity-management .assetStage {
min-height: 555px
}
.mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.lead-opportunity-management .visual {
padding: 17px
}
.lead-opportunity-management .plannerTicks,
.lead-opportunity-management .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.lead-opportunity-management .plannerRow {
grid-template-columns: 75px 1fr
}
.lead-opportunity-management .person {
font-size: 9px;
padding: 10px 5px
}
.lead-opportunity-management .person .avatar {
display: none
}
}
@media(max-width:960px) {
.lead-opportunity-management .heroGrid,
.lead-opportunity-management .feature,
.lead-opportunity-management .aiGrid,
.lead-opportunity-management .final {
grid-template-columns: 1fr
}
.lead-opportunity-management .heroGrid {
gap: 36px
}
.lead-opportunity-management .hero h1 {
max-width: 760px
}
.lead-opportunity-management .hero .lead {
max-width: 750px
}
.lead-opportunity-management .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.lead-opportunity-management .assetStage {
margin: auto
}
.lead-opportunity-management .feature.reverse .visual {
order: 0
}
.lead-opportunity-management .feature {
gap: 30px
}
.lead-opportunity-management .feature>div:first-child {
max-width: 800px
}
.lead-opportunity-management .outcomes,
.lead-opportunity-management .featureGrid,
.lead-opportunity-management .connectedGrid,
.lead-opportunity-management .useCases {
grid-template-columns: repeat(2, 1fr)
}
.lead-opportunity-management .logos {
grid-template-columns: repeat(3, 1fr)
}
.lead-opportunity-management .integrations {
grid-template-columns: repeat(3, 1fr)
}
.lead-opportunity-management .reviews {
grid-template-columns: 1fr
}
.lead-opportunity-management .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.lead-opportunity-management .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.lead-opportunity-management .ratingItem:nth-child(2) {
border: 0
}
.lead-opportunity-management .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.lead-opportunity-management .final .btn {
min-width: 195px
}
.lead-opportunity-management .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.lead-opportunity-management .aiGrid {
gap: 30px
}
.lead-opportunity-management .aiMini {
max-width: 760px
}
.lead-opportunity-management .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.lead-opportunity-management .wrap {
width: calc(100% - 24px)
}
.lead-opportunity-management section {
padding: 56px 0
}
.lead-opportunity-management .hero {
padding: 32px 0 42px
}
.lead-opportunity-management .lead {
font-size: 17px
}
.lead-opportunity-management .sectionHead p {
font-size: 16px
}
.lead-opportunity-management .sectionHead {
margin-bottom: 28px
}
.lead-opportunity-management .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.lead-opportunity-management .heroGrid {
gap: 24px
}
.lead-opportunity-management .hero .actions {
gap: 8px
}
.lead-opportunity-management .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.lead-opportunity-management .micro {
font-size: 11px
}
.lead-opportunity-management .heroPills {
gap: 6px
}
.lead-opportunity-management .heroPills span {
font-size: 9px
}
.lead-opportunity-management .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.lead-opportunity-management .heroVisual {
min-height: 525px
}
.lead-opportunity-management .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.lead-opportunity-management .assetStage:before {
inset: 38px 0 28px 10px
}
.lead-opportunity-management .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.lead-opportunity-management .boardHeader {
padding: 12px
}
.lead-opportunity-management .boardBrand {
font-size: 12px
}
.lead-opportunity-management .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.lead-opportunity-management .miniCalendar {
margin: 0 10px 12px
}
.lead-opportunity-management .miniDates,
.lead-opportunity-management .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.lead-opportunity-management .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.lead-opportunity-management .miniPerson small {
font-size: 7px
}
.lead-opportunity-management .miniCell {
padding: 4px 3px
}
.lead-opportunity-management .miniDates>div {
font-size: 8px
}
.lead-opportunity-management .miniDates small {
font-size: 7px
}
.lead-opportunity-management .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.lead-opportunity-management .miniJob b {
font-size: 7px
}
.lead-opportunity-management .miniRow {
min-height: 57px
}
.lead-opportunity-management .miniJob {
min-height: 48px
}
.lead-opportunity-management .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.lead-opportunity-management .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.lead-opportunity-management .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.lead-opportunity-management .phoneHead strong {
font-size: 11px
}
.lead-opportunity-management .phoneHead small {
font-size: 8px
}
.lead-opportunity-management .phoneAgenda {
padding: 8px;
gap: 6px
}
.lead-opportunity-management .phoneJob {
padding: 7px;
font-size: 8px
}
.lead-opportunity-management .phoneJob strong {
font-size: 9px
}
.lead-opportunity-management .phoneJob small {
font-size: 7px
}
.lead-opportunity-management .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.lead-opportunity-management .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.lead-opportunity-management .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.lead-opportunity-management .lifecycleHead .icon {
width: 15px;
height: 15px
}
.lead-opportunity-management .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.lead-opportunity-management .lifecycleBody strong {
font-size: 10px
}
.lead-opportunity-management .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.lead-opportunity-management .diagramCaption {
font-size: 9px
}
.lead-opportunity-management .trust {
padding: 23px 0
}
.lead-opportunity-management .trustLabel {
font-size: 12px
}
.lead-opportunity-management .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.lead-opportunity-management .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.lead-opportunity-management .logo.dhl {
font-size: 19px
}
.lead-opportunity-management .logo.adobe {
font-size: 17px
}
.lead-opportunity-management .logo.golden {
font-size: 8px
}
.lead-opportunity-management .fl,
.lead-opportunity-management .outcomes,
.lead-opportunity-management .featureGrid,
.lead-opportunity-management .connectedGrid,
.lead-opportunity-management .useCases {
grid-template-columns: 1fr
}
.lead-opportunity-management .fi {
font-size: 14px
}
.lead-opportunity-management .outcome {
padding: 21px
}
.lead-opportunity-management .outcome strong {
margin-top: 12px
}
.lead-opportunity-management .outcome span {
font-size: 14px
}
.visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.lead-opportunity-management .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.lead-opportunity-management .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.lead-opportunity-management .lead-opportunity-management .uiSub {
font-size: 9px
}
.lead-opportunity-management .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.lead-opportunity-management .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.lead-opportunity-management .person {
font-size: 9px;
padding: 8px 6px
}
.lead-opportunity-management .person .avatar {
display: none
}
.lead-opportunity-management .person small {
font-size: 8px
}
.lead-opportunity-management .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.lead-opportunity-management .slot strong {
font-size: 8px
}
.lead-opportunity-management .plannerHead {
font-size: 10px;
padding: 10px
}
.lead-opportunity-management .plannerHead .pill {
font-size: 8px
}
.lead-opportunity-management .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.lead-opportunity-management .pending strong {
font-size: 10px
}
.lead-opportunity-management .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.lead-opportunity-management .rosterTop .pill {
font-size: 8px
}
.lead-opportunity-management .rosterCard {
padding: 11px
}
.lead-opportunity-management .rosterNote {
padding: 11px;
font-size: 10px
}
.lead-opportunity-management .ruleCard {
padding: 14px
}
.lead-opportunity-management .ruleCard strong {
font-size: 15px
}
.lead-opportunity-management .workCard {
padding: 10px;
gap: 8px
}
.lead-opportunity-management .workCard strong {
font-size: 10px
}
.lead-opportunity-management .workCard small {
font-size: 8px
}
.lead-opportunity-management .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.lead-opportunity-management .modeRow span {
font-size: 8px;
padding: 7px
}
.lead-opportunity-management .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.lead-opportunity-management .phoneMockInner {
padding: 11px;
min-height: 288px
}
.lead-opportunity-management .lookupCard {
padding: 10px
}
.lead-opportunity-management .lookupCard strong {
font-size: 10px
}
.lead-opportunity-management .lookupCard span {
font-size: 9px
}
.lead-opportunity-management .lookupCard .icon {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.lead-opportunity-management .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.lead-opportunity-management .aiMini div {
padding: 16px
}
.lead-opportunity-management .aiMini strong {
font-size: 14px
}
.lead-opportunity-management .aiMini span {
font-size: 13px
}
.lead-opportunity-management .promptBox {
padding: 18px;
border-radius: 17px
}
.lead-opportunity-management .prompt {
font-size: 13px;
padding: 13px
}
.lead-opportunity-management .promptHead {
font-size: 19px
}
.lead-opportunity-management .promptFoot {
font-size: 10px !important
}
.lead-opportunity-management .connectedCard {
padding: 22px
}
.lead-opportunity-management .connectedCard p,
.lead-opportunity-management .featureCard p,
.lead-opportunity-management .useCase p {
font-size: 14px
}
.lead-opportunity-management .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.lead-opportunity-management .integrations {
grid-template-columns: repeat(2, 1fr)
}
.lead-opportunity-management .integration:last-child {
grid-column: 1/-1
}
.lead-opportunity-management .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.lead-opportunity-management .stream>span[aria-hidden] {
display: none
}
.lead-opportunity-management .streamStep {
min-height: 24px
}
.lead-opportunity-management .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.lead-opportunity-management .ratingItem {
border: 0
}
.lead-opportunity-management .ratingLead {
margin-bottom: 3px
}
.lead-opportunity-management .review p {
font-size: 14px
}
.lead-opportunity-management .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.lead-opportunity-management .ctaBtns {
width: 100%
}
.lead-opportunity-management .ctaBtns .btn {
flex: 1
}
.lead-opportunity-management .cta p {
font-size: 14px
}
.lead-opportunity-management .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.lead-opportunity-management .final h2 {
font-size: 32px
}
.lead-opportunity-management .final p {
font-size: 15px
}
.lead-opportunity-management .final .ctaBtns {
flex-direction: column
}
.lead-opportunity-management .final .btn {
min-width: 0;
width: 100%
}
}
@media(max-width:360px) {
.lead-opportunity-management .heroVisual,
.lead-opportunity-management .assetStage {
height: 520px;
min-height: 520px
}
.lead-opportunity-management .assetPhone {
width: 152px;
top: 242px
}
.lead-opportunity-management .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.lead-opportunity-management .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.lead-opportunity-management .lifecycleBody {
padding: 8px;
font-size: 8px
}
.lead-opportunity-management .lifecycleBody strong {
font-size: 9px
}
.lead-opportunity-management .boardBrand {
font-size: 11px
}
.lead-opportunity-management .sampleBadge {
font-size: 8px
}
.lead-opportunity-management .miniDates,
.lead-opportunity-management .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.lead-opportunity-management .miniDates small {
font-size: 6px
}
.lead-opportunity-management .miniJob b {
font-size: 6.5px
}
.lead-opportunity-management .boardFooter {
padding-right: 135px;
min-height: 45px
}
.lead-opportunity-management .mobileLookup {
grid-template-columns: 1fr
}
.lead-opportunity-management .phoneMock {
width: 200px;
margin: auto
}
.lead-opportunity-management .lookupSide {
grid-template-columns: 1fr
}
.lead-opportunity-management .lookupCard {
padding: 13px
}
.lead-opportunity-management .lookupCard strong {
font-size: 12px
}
.lead-opportunity-management .lookupCard span {
font-size: 11px
}
.lead-opportunity-management .plannerHead {
gap: 5px
}
.lead-opportunity-management .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.lead-opportunity-management .plannerRow {
grid-template-columns: 61px 1fr
}
.lead-opportunity-management .uiHeading>span:first-child {
gap: 5px
}
.lead-opportunity-management .uiHeading .icon {
width: 17px;
height: 17px
}
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .fsmTools__card,
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}   #lead-opportunity-page .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
#lead-opportunity-page .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
#lead-opportunity-page .assetStage:before {
content: none
}
#lead-opportunity-page .salesHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
#lead-opportunity-page .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
#lead-opportunity-page .ey {
max-width: 100%
}
#lead-opportunity-page .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
#lead-opportunity-page .uiHeading>span:first-child {
min-width: 0
}
#lead-opportunity-page .uiHeading .icon {
flex-shrink: 0
}
#lead-opportunity-page .salesPanel {
padding: 17px
}
#lead-opportunity-page .salesRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
#lead-opportunity-page .salesRecordHead>span:first-child {
min-width: 0
}
#lead-opportunity-page .salesIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
#lead-opportunity-page .salesCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
#lead-opportunity-page .salesMeta {
display: grid;
gap: 8px
}
#lead-opportunity-page .salesMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#lead-opportunity-page .salesMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
#lead-opportunity-page .salesMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#lead-opportunity-page .salesRows {
padding: 0 14px
}
#lead-opportunity-page .salesRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
#lead-opportunity-page .salesRow:last-child {
border: 0
}
#lead-opportunity-page .salesRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#lead-opportunity-page .salesRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
#lead-opportunity-page .salesRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
#lead-opportunity-page .salesFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
#lead-opportunity-page .salesFoot strong {
color: var(--navy)
}
#lead-opportunity-page .salesAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
#lead-opportunity-page .salesAlert>.icon {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
#lead-opportunity-page .salesAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
#lead-opportunity-page .salesAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
#lead-opportunity-page .salesDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
#lead-opportunity-page .salesDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
#lead-opportunity-page .salesDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
#lead-opportunity-page .salesDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
#lead-opportunity-page .salesDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
#lead-opportunity-page .salesDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
#lead-opportunity-page .salesDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
#lead-opportunity-page .salesDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
#lead-opportunity-page .salesDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
#lead-opportunity-page .salesDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
#lead-opportunity-page .salesDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
#lead-opportunity-page .salesDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
#lead-opportunity-page .salesQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
#lead-opportunity-page .salesQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#lead-opportunity-page .salesQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
#lead-opportunity-page .salesQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
#lead-opportunity-page .salesQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
#lead-opportunity-page .salesQueueBar span {
display: block;
height: 100%;
width: var(--sales-bar);
background: var(--brand);
border-radius: 6px
}
#lead-opportunity-page .salesQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
#lead-opportunity-page .salesTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
#lead-opportunity-page .salesTraceHead .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
#lead-opportunity-page .salesTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
#lead-opportunity-page .salesTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
#lead-opportunity-page .salesTraceHead .pill {
margin-left: auto
}
#lead-opportunity-page .salesTimeline {
padding: 17px 15px
}
#lead-opportunity-page .salesEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
#lead-opportunity-page .salesEvent:last-child {
padding-bottom: 0
}
#lead-opportunity-page .salesEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#lead-opportunity-page .salesEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
#lead-opportunity-page .salesEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
#lead-opportunity-page .salesEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
#lead-opportunity-page .salesEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
#lead-opportunity-page .salesEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
#lead-opportunity-page .salesNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
#lead-opportunity-page .salesNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
#lead-opportunity-page .salesSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
#lead-opportunity-page .salesSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
#lead-opportunity-page .salesSource .icon {
color: var(--navy);
margin-bottom: 8px
}
#lead-opportunity-page .salesSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#lead-opportunity-page .salesSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
#lead-opportunity-page .salesConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
#lead-opportunity-page .salesConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
#lead-opportunity-page .salesHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
#lead-opportunity-page .salesHub strong {
display: block;
font-size: 18px
}
#lead-opportunity-page .salesHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
#lead-opportunity-page .salesHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
#lead-opportunity-page .salesHandoff>strong {
font-size: 13px;
color: var(--navy)
}
#lead-opportunity-page .salesHandoff>span:not(.pill) {
color: var(--muted)
}
#lead-opportunity-page .salesHandoff .salesHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
#lead-opportunity-page .salesScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
#lead-opportunity-page .salesScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
#lead-opportunity-page .salesComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
#lead-opportunity-page .salesComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
#lead-opportunity-page .salesComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
#lead-opportunity-page .salesComparison th,
#lead-opportunity-page .salesComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
#lead-opportunity-page .salesComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
#lead-opportunity-page .salesComparison tbody th {
font-size: 14px;
color: var(--navy)
}
#lead-opportunity-page .salesComparison tbody td {
color: var(--muted)
}
#lead-opportunity-page .salesComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
#lead-opportunity-page .salesNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
#lead-opportunity-page .salesNote strong {
color: var(--navy)
}
#lead-opportunity-page .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
#lead-opportunity-page .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
#lead-opportunity-page .heroVisual {
max-width: 480px
}
#lead-opportunity-page .salesIdentity {
gap: 12px
}
#lead-opportunity-page .salesMeta>div {
padding: 9px 10px
}
#lead-opportunity-page .salesMeta strong {
font-size: 11px
}
#lead-opportunity-page .salesRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
#lead-opportunity-page .salesRows {
padding: 0 11px
}
#lead-opportunity-page .salesRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
#lead-opportunity-page .salesRow strong {
font-size: 11px
}
#lead-opportunity-page .salesRow small {
font-size: 9px
}
#lead-opportunity-page .salesRow .pill {
font-size: 8px;
padding: 4px 6px
}
#lead-opportunity-page .salesDwell {
padding: 16px
}
#lead-opportunity-page .salesDwellMetrics {
gap: 12px
}
#lead-opportunity-page .salesDwellMetrics>div+div {
padding-left: 12px
}
#lead-opportunity-page .salesDwellMetrics b {
font-size: 32px
}
#lead-opportunity-page .salesDwellMetrics span {
font-size: 10px
}
#lead-opportunity-page .salesQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
#lead-opportunity-page .salesTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
#lead-opportunity-page .salesTraceHead strong {
font-size: 12px
}
#lead-opportunity-page .salesTraceHead .pill {
font-size: 8px
}
#lead-opportunity-page .salesTimeline {
padding: 15px 12px
}
#lead-opportunity-page .salesSources {
gap: 8px
}
#lead-opportunity-page .salesSource {
padding: 12px
}
#lead-opportunity-page .salesHandoff {
padding: 13px;
gap: 10px
}
#lead-opportunity-page .salesHandoff>strong {
font-size: 12px
}
#lead-opportunity-page .salesComparison,
#lead-opportunity-page .salesComparison tbody,
#lead-opportunity-page .salesComparison tr,
#lead-opportunity-page .salesComparison th,
#lead-opportunity-page .salesComparison td {
display: block;
width: 100%
}
#lead-opportunity-page .salesComparison colgroup {
display: none
}
#lead-opportunity-page .salesComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
#lead-opportunity-page .salesComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
#lead-opportunity-page .salesComparison th,
#lead-opportunity-page .salesComparison td {
padding: 10px 16px
}
#lead-opportunity-page .salesComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
#lead-opportunity-page .salesComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
#lead-opportunity-page .salesComparison tbody tr+tr>* {
border: 0
}
#lead-opportunity-page .salesComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
#lead-opportunity-page .salesComparison tbody td:last-child {
padding-bottom: 18px
}
#lead-opportunity-page .salesNote {
padding: 17px
}
}
@media(max-width:360px) {
#lead-opportunity-page .salesIdentity {
grid-template-columns: 1fr
}
#lead-opportunity-page .salesCarrierSvg {
max-width: 170px
}
#lead-opportunity-page .salesMeta {
grid-template-columns: 1fr 1fr
}
#lead-opportunity-page .salesMeta>div:last-child {
grid-column: 1/-1
}
#lead-opportunity-page .salesRow {
grid-template-columns: 33px minmax(0, 1fr)
}
#lead-opportunity-page .salesRow .pill {
grid-column: 2;
justify-self: start
}
#lead-opportunity-page .salesDwellLegend {
font-size: 8px
}
#lead-opportunity-page .salesQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
#lead-opportunity-page .salesTraceHead .pill {
margin-left: 47px
}
#lead-opportunity-page .salesHandoff {
grid-template-columns: 1fr
}
#lead-opportunity-page .salesHandoff .pill {
justify-self: start
}
}  .sales-order-management .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.sales-order-management .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.sales-order-management .dark a:focus-visible,
.sales-order-management .final a:focus-visible {
outline-color: var(--yellow)
}
.sales-order-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.sales-order-management .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.sales-order-management .soft {
background: var(--sky2)
}
.sales-order-management .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.sales-order-management .dark h2,
.sales-order-management .dark h3 {
color: #fff
}
.sales-order-management .dark p {
color: #D6D6D6
}
.sales-order-management .dark .ey {
background: var(--yellow)
}
.sales-order-management .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.sales-order-management .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.sales-order-management .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.sales-order-management .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.sales-order-management .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.sales-order-management .textLink .icon {
width: 16px;
height: 16px
}
.sales-order-management .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.sales-order-management .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.sales-order-management .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.sales-order-management .skipLink:focus {
top: 12px
}
.sales-order-management .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.sales-order-management .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.sales-order-management .heroGrid>*,
.sales-order-management .feature>*,
.sales-order-management .aiGrid>* {
min-width: 0
}
.sales-order-management .hero h1 {
max-width: 580px
}
.sales-order-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.sales-order-management .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.sales-order-management .heroVisual {
min-height: 555px;
position: relative
}
.sales-order-management .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.sales-order-management .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.sales-order-management .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.sales-order-management .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.sales-order-management .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.sales-order-management .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.sales-order-management .brandTile .icon {
width: 17px;
height: 17px
}
.sales-order-management .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.sales-order-management .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.sales-order-management .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.sales-order-management .viewPills span {
padding: 4px 7px
}
.sales-order-management .viewPills .active {
background: var(--navy);
color: #fff
}
.sales-order-management .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.sales-order-management .miniDates,
.sales-order-management .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.sales-order-management .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.sales-order-management .miniDates>div:last-child {
border: 0
}
.sales-order-management .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.sales-order-management .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.sales-order-management .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.sales-order-management .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.sales-order-management .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.sales-order-management .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.sales-order-management .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.sales-order-management .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.sales-order-management .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.sales-order-management .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.sales-order-management .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.sales-order-management .boardFooter strong {
color: var(--navy)
}
.sales-order-management .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.sales-order-management .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.sales-order-management .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.sales-order-management .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.sales-order-management .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.sales-order-management .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.sales-order-management .phoneHead small {
font-size: 9px;
color: #50697A
}
.sales-order-management .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.sales-order-management .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.sales-order-management .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.sales-order-management .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.sales-order-management .phoneJob.current {
background: var(--sky2)
}
.sales-order-management .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.sales-order-management .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.sales-order-management .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.sales-order-management .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.sales-order-management .lifecycleHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.sales-order-management .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.sales-order-management .lifecycleBody strong {
font-size: 12px
}
.sales-order-management .lifecycleBody span {
color: #CEDBE4
}
.sales-order-management .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.sales-order-management .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
}
.sales-order-management .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.sales-order-management .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.sales-order-management .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.sales-order-management .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.sales-order-management .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.sales-order-management .logo.adobe {
font-size: 20px
}
.sales-order-management .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.sales-order-management .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.sales-order-management .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.sales-order-management .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.sales-order-management .outcome:nth-child(2):before {
background: var(--yellow)
}
.sales-order-management .outcome:nth-child(3):before {
background: var(--green)
}
.sales-order-management .outcome:nth-child(4):before {
background: var(--purple)
}
.sales-order-management .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.sales-order-management .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.sales-order-management .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
}
.sales-order-management .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.sales-order-management .feature.reverse .visual {
order: -1
}
.sales-order-management .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.sales-order-management .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.sales-order-management .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.sales-order-management .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.sales-order-management .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.sales-order-management .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.sales-order-management .visual>* {
position: relative;
z-index: 2
}
.sales-order-management .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.sales-order-management .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.sales-order-management .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.sales-order-management .uiHeading .icon {
width: 19px;
height: 19px
}
.sales-order-management .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.sales-order-management .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.sales-order-management .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.sales-order-management .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.sales-order-management .pill.green {
background: var(--greenbg);
color: #116746
}
.sales-order-management .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.sales-order-management .pill.gray {
background: #F0F3F5;
color: #586C79
}
.sales-order-management .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.sales-order-management .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.sales-order-management .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.sales-order-management .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.sales-order-management .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.sales-order-management .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.sales-order-management .plannerRow:last-child {
border-bottom: 0
}
.sales-order-management .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.sales-order-management .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.sales-order-management .avatar.green {
background: var(--greenbg);
color: #116746
}
.sales-order-management .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.sales-order-management .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.sales-order-management .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.sales-order-management .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.sales-order-management .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.sales-order-management .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.sales-order-management .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.sales-order-management .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.sales-order-management .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.sales-order-management .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.sales-order-management .pending .icon {
width: 18px;
height: 18px;
color: var(--navy)
}
.sales-order-management .pending strong {
font-size: 11px;
color: var(--navy)
}
.sales-order-management .pending .pill {
margin-left: auto
}
.sales-order-management .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.sales-order-management .legend span {
display: flex;
align-items: center;
gap: 4px
}
.sales-order-management .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.sales-order-management .legend .green i {
background: var(--green)
}
.sales-order-management .legend .yellow i {
background: #D7A200
}
.sales-order-management .roster {
display: grid;
gap: 10px
}
.sales-order-management .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.sales-order-management .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.sales-order-management .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.sales-order-management .rosterName {
flex: 1;
min-width: 0
}
.sales-order-management .rosterName strong {
display: block;
font-size: 11px
}
.sales-order-management .rosterName small {
color: var(--muted);
font-size: 9px
}
.sales-order-management .rosterTop .pill {
font-size: 8px
}
.sales-order-management .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.sales-order-management .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.sales-order-management .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.sales-order-management .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.sales-order-management .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.sales-order-management .rosterNote .icon {
width: 19px;
height: 19px
}
.sales-order-management .rosterNote strong {
display: block;
margin-bottom: 3px
}
.sales-order-management .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.sales-order-management .ruleCard .uiLabel {
color: #9CBED1
}
.sales-order-management .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.sales-order-management .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.sales-order-management .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.sales-order-management .workCards {
display: grid;
gap: 9px
}
.sales-order-management .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.sales-order-management .workCard strong {
display: block;
font-size: 11px
}
.sales-order-management .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.sales-order-management .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.sales-order-management .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.sales-order-management .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.sales-order-management .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.sales-order-management .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.sales-order-management .modeRow .icon {
width: 14px;
height: 14px
}
.sales-order-management .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.sales-order-management .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.sales-order-management .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.sales-order-management .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.sales-order-management .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.sales-order-management .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.sales-order-management .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.sales-order-management .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.sales-order-management .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.sales-order-management .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.sales-order-management .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.sales-order-management .lookupSide {
display: grid;
gap: 11px
}
.sales-order-management .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.sales-order-management .lookupCard .icon {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.sales-order-management .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.sales-order-management .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.sales-order-management .lookupCard.done {
border-left: 3px solid var(--green)
}
.sales-order-management .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.sales-order-management .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.sales-order-management .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.sales-order-management .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.sales-order-management .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.sales-order-management .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.sales-order-management .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.sales-order-management .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.sales-order-management .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.sales-order-management .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.sales-order-management .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.sales-order-management .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.sales-order-management .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.sales-order-management .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.sales-order-management .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.sales-order-management .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.sales-order-management .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
}
.sales-order-management .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.sales-order-management .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.sales-order-management .featureCard:hover {
transform: translateY(-3px)
}
.sales-order-management .featureIcon,
.sales-order-management .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.sales-order-management .featureIcon .icon,
.sales-order-management .useIcon .icon {
width: 22px;
height: 22px;
margin-bottom: 0 !important;
;
background: transparent !important;
}
.sales-order-management .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.sales-order-management .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.sales-order-management .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.sales-order-management .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.sales-order-management .integration .icon {
width: 21px;
height: 21px;
color: var(--navy)
}
.sales-order-management .integration:hover {
background: var(--sky2)
}
.sales-order-management .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.sales-order-management .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.sales-order-management .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.sales-order-management .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.sales-order-management .stream .icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
.sales-order-management .stream>span[aria-hidden] {
color: #86B2C9
}
.sales-order-management .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.sales-order-management .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.sales-order-management .useCase h3 {
font-size: 20px
}
.sales-order-management .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.sales-order-management .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.sales-order-management .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.sales-order-management .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.sales-order-management .review h3 {
font-size: 22px
}
.sales-order-management .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.sales-order-management .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.sales-order-management .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.sales-order-management .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.sales-order-management .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.sales-order-management .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.sales-order-management .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.sales-order-management .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.sales-order-management .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.sales-order-management .faq {
max-width: 900px
}
.sales-order-management .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.sales-order-management .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.sales-order-management .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.sales-order-management .faq summary::marker {
color: var(--navy)
}
.sales-order-management .faq details[open] {
border-color: #A9D3E7
}
.sales-order-management .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.sales-order-management .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.sales-order-management .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.sales-order-management .cta h3 {
font-size: 19px
}
.sales-order-management .cta.darkCta h3 {
color: #fff
}
.sales-order-management .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.sales-order-management .cta.darkCta p {
color: #D1D1D1
}
.sales-order-management .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.sales-order-management .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.sales-order-management .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.sales-order-management .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.sales-order-management .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.sales-order-management .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.sales-order-management .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.sales-order-management .heroGrid {
gap: 28px
}
.sales-order-management h1 {
font-size: 56px
}
.sales-order-management .hero .lead {
font-size: 17px
}
.sales-order-management .assetPhone {
width: 168px;
top: 235px
}
.sales-order-management .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.sales-order-management .scheduleBoard {
width: 96%;
left: 0
}
.sales-order-management .miniJob {
padding: 4px
}
.sales-order-management .heroVisual,
.sales-order-management .assetStage {
min-height: 555px
}
.sales-order-management .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.sales-order-management .visual {
padding: 17px
}
.sales-order-management .plannerTicks,
.sales-order-management .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.sales-order-management .plannerRow {
grid-template-columns: 75px 1fr
}
.sales-order-management .person {
font-size: 9px;
padding: 10px 5px
}
.sales-order-management .person .avatar {
display: none
}
}
@media(max-width:960px) {
.sales-order-management .heroGrid,
.sales-order-management .feature,
.sales-order-management .aiGrid,
.sales-order-management .final {
grid-template-columns: 1fr
}
.sales-order-management .heroGrid {
gap: 36px
}
.sales-order-management .hero h1 {
max-width: 760px
}
.sales-order-management .hero .lead {
max-width: 750px
}
.sales-order-management .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.sales-order-management .assetStage {
margin: auto
}
.sales-order-management .feature.reverse .visual {
order: 0
}
.sales-order-management .feature {
gap: 30px
}
.sales-order-management .feature>div:first-child {
max-width: 800px
}
.sales-order-management .outcomes,
.sales-order-management .featureGrid,
.sales-order-management .connectedGrid,
.sales-order-management .useCases {
grid-template-columns: repeat(2, 1fr)
}
.sales-order-management .logos {
grid-template-columns: repeat(3, 1fr)
}
.sales-order-management .integrations {
grid-template-columns: repeat(3, 1fr)
}
.sales-order-management .reviews {
grid-template-columns: 1fr
}
.sales-order-management .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.sales-order-management .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.sales-order-management .ratingItem:nth-child(2) {
border: 0
}
.sales-order-management .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.sales-order-management .final .btn {
min-width: 195px
}
.sales-order-management .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.sales-order-management .aiGrid {
gap: 30px
}
.sales-order-management .aiMini {
max-width: 760px
}
.sales-order-management .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.sales-order-management .wrap {
width: calc(100% - 24px)
}
.sales-order-management section {
padding: 56px 0
}
.sales-order-management .hero {
padding: 32px 0 42px
}
.sales-order-management h1 {
font-size: 42px
}
.sales-order-management h2 {
font-size: 34px
}
.sales-order-management .lead {
font-size: 17px
}
.sales-order-management .sectionHead p {
font-size: 16px
}
.sales-order-management .sectionHead {
margin-bottom: 28px
}
.sales-order-management .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.sales-order-management .heroGrid {
gap: 24px
}
.sales-order-management .hero .actions {
gap: 8px
}
.sales-order-management .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.sales-order-management .micro {
font-size: 11px
}
.sales-order-management .heroPills {
gap: 6px
}
.sales-order-management .heroPills span {
font-size: 9px
}
.sales-order-management .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.sales-order-management .heroVisual {
min-height: 525px
}
.sales-order-management .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.sales-order-management .assetStage:before {
inset: 38px 0 28px 10px
}
.sales-order-management .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.sales-order-management .boardHeader {
padding: 12px
}
.sales-order-management .boardBrand {
font-size: 12px
}
.sales-order-management .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.sales-order-management .miniCalendar {
margin: 0 10px 12px
}
.sales-order-management .miniDates,
.sales-order-management .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.sales-order-management .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.sales-order-management .miniPerson small {
font-size: 7px
}
.sales-order-management .miniCell {
padding: 4px 3px
}
.sales-order-management .miniDates>div {
font-size: 8px
}
.sales-order-management .miniDates small {
font-size: 7px
}
.sales-order-management .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.sales-order-management .miniJob b {
font-size: 7px
}
.sales-order-management .miniRow {
min-height: 57px
}
.sales-order-management .miniJob {
min-height: 48px
}
.sales-order-management .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.sales-order-management .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.sales-order-management .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.sales-order-management .phoneHead strong {
font-size: 11px
}
.sales-order-management .phoneHead small {
font-size: 8px
}
.sales-order-management .phoneAgenda {
padding: 8px;
gap: 6px
}
.sales-order-management .phoneJob {
padding: 7px;
font-size: 8px
}
.sales-order-management .phoneJob strong {
font-size: 9px
}
.sales-order-management .phoneJob small {
font-size: 7px
}
.sales-order-management .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.sales-order-management .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.sales-order-management .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.sales-order-management .lifecycleHead .icon {
width: 15px;
height: 15px
}
.sales-order-management .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.sales-order-management .lifecycleBody strong {
font-size: 10px
}
.sales-order-management .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.sales-order-management .diagramCaption {
font-size: 9px
}
.sales-order-management .trust {
padding: 23px 0
}
.sales-order-management .trustLabel {
font-size: 12px
}
.sales-order-management .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.sales-order-management .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.sales-order-management .logo.dhl {
font-size: 19px
}
.sales-order-management .logo.adobe {
font-size: 17px
}
.sales-order-management .logo.golden {
font-size: 8px
}
.sales-order-management .fl,
.sales-order-management .outcomes,
.sales-order-management .featureGrid,
.sales-order-management .connectedGrid,
.sales-order-management .useCases {
grid-template-columns: 1fr
}
.sales-order-management .fi {
font-size: 14px
}
.sales-order-management .outcome {
padding: 21px
}
.sales-order-management .outcome strong {
margin-top: 12px
}
.sales-order-management .outcome span {
font-size: 14px
}
.sales-order-management .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.sales-order-management .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.sales-order-management .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.sales-order-management .uiSub {
font-size: 9px
}
.sales-order-management .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.sales-order-management .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.sales-order-management .person {
font-size: 9px;
padding: 8px 6px
}
.sales-order-management .person .avatar {
display: none
}
.sales-order-management .person small {
font-size: 8px
}
.sales-order-management .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.sales-order-management .slot strong {
font-size: 8px
}
.sales-order-management .plannerHead {
font-size: 10px;
padding: 10px
}
.sales-order-management .plannerHead .pill {
font-size: 8px
}
.sales-order-management .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.sales-order-management .pending strong {
font-size: 10px
}
.sales-order-management .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.sales-order-management .rosterTop .pill {
font-size: 8px
}
.sales-order-management .rosterCard {
padding: 11px
}
.sales-order-management .rosterNote {
padding: 11px;
font-size: 10px
}
.sales-order-management .ruleCard {
padding: 14px
}
.sales-order-management .ruleCard strong {
font-size: 15px
}
.sales-order-management .workCard {
padding: 10px;
gap: 8px
}
.sales-order-management .workCard strong {
font-size: 10px
}
.sales-order-management .workCard small {
font-size: 8px
}
.sales-order-management .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.sales-order-management .modeRow span {
font-size: 8px;
padding: 7px
}
.sales-order-management .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.sales-order-management .phoneMockInner {
padding: 11px;
min-height: 288px
}
.sales-order-management .lookupCard {
padding: 10px
}
.sales-order-management .lookupCard strong {
font-size: 10px
}
.sales-order-management .lookupCard span {
font-size: 9px
}
.sales-order-management .lookupCard .icon {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.sales-order-management .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.sales-order-management .aiMini div {
padding: 16px
}
.sales-order-management .aiMini strong {
font-size: 14px
}
.sales-order-management .aiMini span {
font-size: 13px
}
.sales-order-management .promptBox {
padding: 18px;
border-radius: 17px
}
.sales-order-management .prompt {
font-size: 13px;
padding: 13px
}
.sales-order-management .promptHead {
font-size: 19px
}
.sales-order-management .promptFoot {
font-size: 10px !important
}
.sales-order-management .connectedCard {
padding: 22px
}
.sales-order-management .connectedCard p,
.sales-order-management .featureCard p,
.sales-order-management .useCase p {
font-size: 14px
}
.sales-order-management .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.sales-order-management .integrations {
grid-template-columns: repeat(2, 1fr)
}
.sales-order-management .integration:last-child {
grid-column: 1/-1
}
.sales-order-management .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.sales-order-management .stream>span[aria-hidden] {
display: none
}
.sales-order-management .streamStep {
min-height: 24px
}
.sales-order-management .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.sales-order-management .ratingItem {
border: 0
}
.sales-order-management .ratingLead {
margin-bottom: 3px
}
.sales-order-management .review p {
font-size: 14px
}
.sales-order-management .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.sales-order-management .ctaBtns {
width: 100%
}
.sales-order-management .ctaBtns .btn {
flex: 1
}
.sales-order-management .cta p {
font-size: 14px
}
.sales-order-management .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.sales-order-management .final h2 {
font-size: 32px
}
.sales-order-management .final p {
font-size: 15px
}
.sales-order-management .final .ctaBtns {
flex-direction: column
}
.sales-order-management .final .btn {
min-width: 0;
width: 100%
}
.sales-order-management .faq details {
padding: 16px
}
.sales-order-management .faq summary {
font-size: 14px
}
.sales-order-management .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.sales-order-management h1 {
font-size: 38px
}
.sales-order-management h2 {
font-size: 31px
}
.sales-order-management .heroVisual,
.sales-order-management .assetStage {
height: 520px;
min-height: 520px
}
.sales-order-management .assetPhone {
width: 152px;
top: 242px
}
.sales-order-management .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.sales-order-management .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.sales-order-management .lifecycleBody {
padding: 8px;
font-size: 8px
}
.sales-order-management .lifecycleBody strong {
font-size: 9px
}
.sales-order-management .boardBrand {
font-size: 11px
}
.sales-order-management .sampleBadge {
font-size: 8px
}
.sales-order-management .miniDates,
.sales-order-management .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.sales-order-management .miniDates small {
font-size: 6px
}
.sales-order-management .miniJob b {
font-size: 6.5px
}
.sales-order-management .boardFooter {
padding-right: 135px;
min-height: 45px
}
.sales-order-management .mobileLookup {
grid-template-columns: 1fr
}
.sales-order-management .phoneMock {
width: 200px;
margin: auto
}
.sales-order-management .lookupSide {
grid-template-columns: 1fr
}
.sales-order-management .lookupCard {
padding: 13px
}
.sales-order-management .lookupCard strong {
font-size: 12px
}
.sales-order-management .lookupCard span {
font-size: 11px
}
.sales-order-management .plannerHead {
gap: 5px
}
.sales-order-management .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.sales-order-management .plannerRow {
grid-template-columns: 61px 1fr
}
.sales-order-management .uiHeading>span:first-child {
gap: 5px
}
.sales-order-management .uiHeading .icon {
width: 17px;
height: 17px
}
}
.sales-order-management #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.sales-order-management #connected-tools.fsmTools *,
.sales-order-management #connected-tools.fsmTools *::before,
.sales-order-management #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.sales-order-management #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.sales-order-management #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.sales-order-management #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.sales-order-management #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.sales-order-management #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.sales-order-management #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.sales-order-management #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__step::before,
.sales-order-management #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.sales-order-management #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.sales-order-management #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.sales-order-management #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.sales-order-management #connected-tools.fsmTools {
padding: 52px 0;
}
.sales-order-management #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.sales-order-management #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.sales-order-management #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.sales-order-management #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.sales-order-management #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card,
.sales-order-management #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.sales-order-management #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.sales-order-management #connected-tools.fsmTools h2 {
font-size: 30px;
}
.sales-order-management #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.sales-order-management #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
#sales-order-page .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
#sales-order-page .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
#sales-order-page .assetStage:before {
content: none
}
#sales-order-page .salesHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
#sales-order-page .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
#sales-order-page .ey {
max-width: 100%
}
#sales-order-page .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
#sales-order-page .uiHeading>span:first-child {
min-width: 0
}
#sales-order-page .uiHeading .icon {
flex-shrink: 0
}
#sales-order-page .salesPanel {
padding: 17px
}
#sales-order-page .salesRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
#sales-order-page .salesRecordHead>span:first-child {
min-width: 0
}
#sales-order-page .salesIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
#sales-order-page .salesCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
#sales-order-page .salesMeta {
display: grid;
gap: 8px
}
#sales-order-page .salesMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#sales-order-page .salesMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
#sales-order-page .salesMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#sales-order-page .salesRows {
padding: 0 14px
}
#sales-order-page .salesRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
#sales-order-page .salesRow:last-child {
border: 0
}
#sales-order-page .salesRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#sales-order-page .salesRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
#sales-order-page .salesRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
#sales-order-page .salesFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
#sales-order-page .salesFoot strong {
color: var(--navy)
}
#sales-order-page .salesAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
#sales-order-page .salesAlert>.icon {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
#sales-order-page .salesAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
#sales-order-page .salesAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
#sales-order-page .salesDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
#sales-order-page .salesDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
#sales-order-page .salesDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
#sales-order-page .salesDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
#sales-order-page .salesDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
#sales-order-page .salesDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
#sales-order-page .salesDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
#sales-order-page .salesDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
#sales-order-page .salesDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
#sales-order-page .salesDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
#sales-order-page .salesDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
#sales-order-page .salesDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
#sales-order-page .salesQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
#sales-order-page .salesQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#sales-order-page .salesQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
#sales-order-page .salesQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
#sales-order-page .salesQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
#sales-order-page .salesQueueBar span {
display: block;
height: 100%;
width: var(--sales-bar);
background: var(--brand);
border-radius: 6px
}
#sales-order-page .salesQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
#sales-order-page .salesTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
#sales-order-page .salesTraceHead .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
#sales-order-page .salesTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
#sales-order-page .salesTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
#sales-order-page .salesTraceHead .pill {
margin-left: auto
}
#sales-order-page .salesTimeline {
padding: 17px 15px
}
#sales-order-page .salesEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
#sales-order-page .salesEvent:last-child {
padding-bottom: 0
}
#sales-order-page .salesEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#sales-order-page .salesEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
#sales-order-page .salesEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
#sales-order-page .salesEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
#sales-order-page .salesEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
#sales-order-page .salesEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
#sales-order-page .salesNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
#sales-order-page .salesNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
#sales-order-page .salesSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
#sales-order-page .salesSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
#sales-order-page .salesSource .icon {
color: var(--navy);
margin-bottom: 8px
}
#sales-order-page .salesSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#sales-order-page .salesSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
#sales-order-page .salesConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
#sales-order-page .salesConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
#sales-order-page .salesHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
#sales-order-page .salesHub strong {
display: block;
font-size: 18px
}
#sales-order-page .salesHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
#sales-order-page .salesHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
#sales-order-page .salesHandoff>strong {
font-size: 13px;
color: var(--navy)
}
#sales-order-page .salesHandoff>span:not(.pill) {
color: var(--muted)
}
#sales-order-page .salesHandoff .salesHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
#sales-order-page .salesScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
#sales-order-page .salesScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
#sales-order-page .salesComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
#sales-order-page .salesComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
#sales-order-page .salesComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
#sales-order-page .salesComparison th,
#sales-order-page .salesComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
#sales-order-page .salesComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
#sales-order-page .salesComparison tbody th {
font-size: 14px;
color: var(--navy)
}
#sales-order-page .salesComparison tbody td {
color: var(--muted)
}
#sales-order-page .salesComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
#sales-order-page .salesNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
#sales-order-page .salesNote strong {
color: var(--navy)
}
#sales-order-page .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
#sales-order-page .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
#sales-order-page .heroVisual {
max-width: 480px
}
#sales-order-page .salesIdentity {
gap: 12px
}
#sales-order-page .salesMeta>div {
padding: 9px 10px
}
#sales-order-page .salesMeta strong {
font-size: 11px
}
#sales-order-page .salesRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
#sales-order-page .salesRows {
padding: 0 11px
}
#sales-order-page .salesRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
#sales-order-page .salesRow strong {
font-size: 11px
}
#sales-order-page .salesRow small {
font-size: 9px
}
#sales-order-page .salesRow .pill {
font-size: 8px;
padding: 4px 6px
}
#sales-order-page .salesDwell {
padding: 16px
}
#sales-order-page .salesDwellMetrics {
gap: 12px
}
#sales-order-page .salesDwellMetrics>div+div {
padding-left: 12px
}
#sales-order-page .salesDwellMetrics b {
font-size: 32px
}
#sales-order-page .salesDwellMetrics span {
font-size: 10px
}
#sales-order-page .salesQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
#sales-order-page .salesTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
#sales-order-page .salesTraceHead strong {
font-size: 12px
}
#sales-order-page .salesTraceHead .pill {
font-size: 8px
}
#sales-order-page .salesTimeline {
padding: 15px 12px
}
#sales-order-page .salesSources {
gap: 8px
}
#sales-order-page .salesSource {
padding: 12px
}
#sales-order-page .salesHandoff {
padding: 13px;
gap: 10px
}
#sales-order-page .salesHandoff>strong {
font-size: 12px
}
#sales-order-page .salesComparison,
#sales-order-page .salesComparison tbody,
#sales-order-page .salesComparison tr,
#sales-order-page .salesComparison th,
#sales-order-page .salesComparison td {
display: block;
width: 100%
}
#sales-order-page .salesComparison colgroup {
display: none
}
#sales-order-page .salesComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
#sales-order-page .salesComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
#sales-order-page .salesComparison th,
#sales-order-page .salesComparison td {
padding: 10px 16px
}
#sales-order-page .salesComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
#sales-order-page .salesComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
#sales-order-page .salesComparison tbody tr+tr>* {
border: 0
}
#sales-order-page .salesComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
#sales-order-page .salesComparison tbody td:last-child {
padding-bottom: 18px
}
#sales-order-page .salesNote {
padding: 17px
}
}
@media(max-width:360px) {
#sales-order-page .salesIdentity {
grid-template-columns: 1fr
}
#sales-order-page .salesCarrierSvg {
max-width: 170px
}
#sales-order-page .salesMeta {
grid-template-columns: 1fr 1fr
}
#sales-order-page .salesMeta>div:last-child {
grid-column: 1/-1
}
#sales-order-page .salesRow {
grid-template-columns: 33px minmax(0, 1fr)
}
#sales-order-page .salesRow .pill {
grid-column: 2;
justify-self: start
}
#sales-order-page .salesDwellLegend {
font-size: 8px
}
#sales-order-page .salesQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
#sales-order-page .salesTraceHead .pill {
margin-left: 47px
}
#sales-order-page .salesHandoff {
grid-template-columns: 1fr
}
#sales-order-page .salesHandoff .pill {
justify-self: start
}
}
#sales-order-page .orderMobileSvg {
display: block;
width: 100%;
max-width: 200px;
height: auto;
aspect-ratio: 210 / 290;
margin: auto
}
#sales-order-page .orderCaptureGrid {
display: grid;
grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
gap: 18px;
align-items: center
}
#sales-order-page .orderFacts {
display: grid;
gap: 10px
}
#sales-order-page .orderFact {
border: 1px solid var(--line);
background: #fff;
border-radius: 10px;
padding: 13px
}
#sales-order-page .orderFact small {
display: block;
color: var(--muted);
font-size: 9px;
letter-spacing: .02em;
margin-bottom: 4px
}
#sales-order-page .orderFact strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy)
}
#sales-order-page .orderFact span {
display: block;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
#sales-order-page .orderLine {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px 57px 61px;
gap: 10px;
padding: 13px 14px;
align-items: center;
font-size: 11px;
border-bottom: 1px solid var(--line);
color: var(--ink)
}
#sales-order-page .orderLine>span:not(:first-child) {
text-align: right;
font-variant-numeric: tabular-nums
}
#sales-order-page .orderLine strong {
display: block;
font-size: 12px;
line-height: 1.4;
color: var(--navy)
}
#sales-order-page .orderLine small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
#sales-order-page .orderLine.head {
font-size: 9px;
font-weight: 800;
background: var(--sky2);
color: var(--muted)
}
#sales-order-page .orderTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px;
font-size: 12px;
color: var(--navy)
}
#sales-order-page .orderTotal b {
font-size: 22px;
font-variant-numeric: tabular-nums
}
#sales-order-page .orderStock {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 13px
}
#sales-order-page .orderStock>div {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px
}
#sales-order-page .orderStock strong {
display: block;
color: var(--navy);
font-size: 12px
}
#sales-order-page .orderStock span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#sales-order-page .orderStock .pill {
display: inline-flex;
margin-top: 8px;
color: #116746;
font-size: 9px
}
#sales-order-page .orderPath {
display: grid;
gap: 10px;
margin-top: 13px
}
#sales-order-page .orderPathRow {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px
}
#sales-order-page .orderPathRow>b {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--sky);
color: var(--navy);
font-size: 12px
}
#sales-order-page .orderPathRow.done>b {
background: var(--greenbg);
color: var(--green)
}
#sales-order-page .orderPathRow strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--ink)
}
#sales-order-page .orderPathRow small {
display: block;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-top: 3px
}
#sales-order-page .orderReportSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px
}
#sales-order-page .orderReportSummary>div {
border: 1px solid #333;
border-radius: 11px;
padding: 13px;
background: #1B1B1B;
color: #fff
}
#sales-order-page .orderReportSummary strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: #FFC928
}
#sales-order-page .orderReportSummary span {
display: block;
font-size: 11px;
line-height: 1.6;
color: #CEDBE4;
margin-top: 5px
}
@media(max-width:640px) {
#sales-order-page .orderCaptureGrid {
gap: 11px;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
}
#sales-order-page .orderFact {
padding: 10px
}
#sales-order-page .orderFact strong {
font-size: 11px
}
#sales-order-page .orderLine {
grid-template-columns: minmax(0, 1fr) 23px 43px 48px;
gap: 6px;
padding: 12px 10px;
font-size: 10px
}
#sales-order-page .orderLine strong {
font-size: 11px
}
#sales-order-page .orderLine small {
font-size: 8px
}
#sales-order-page .orderStock {
gap: 8px
}
#sales-order-page .orderStock>div {
padding: 10px
}
#sales-order-page .orderPathRow {
gap: 9px;
padding: 11px;
grid-template-columns: 28px minmax(0, 1fr) auto
}
#sales-order-page .orderPathRow>b {
width: 28px;
height: 28px
}
#sales-order-page .orderPathRow strong {
font-size: 11px
}
#sales-order-page .orderPathRow .pill {
font-size: 8px;
padding: 4px 6px
}
}
@media(max-width:360px) {
#sales-order-page .orderCaptureGrid {
grid-template-columns: 1fr
}
#sales-order-page .orderMobileSvg {
max-width: 155px
}
#sales-order-page .orderFacts {
grid-template-columns: 1fr 1fr;
gap: 8px
}
#sales-order-page .orderFact:last-child {
grid-column: 1/-1
}
#sales-order-page .orderPathRow {
grid-template-columns: 28px minmax(0, 1fr)
}
#sales-order-page .orderPathRow .pill {
grid-column: 2;
justify-self: start
}
#sales-order-page .orderStock {
grid-template-columns: 1fr
}
}  .sales-team-location-tracking .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.sales-team-location-tracking .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.sales-team-location-tracking .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.sales-team-location-tracking .btn:hover {
transform: translateY(-2px)
}
.sales-team-location-tracking .btn.black {
background: #0b0b0b;
color: #fff
}
.sales-team-location-tracking .btn.black:hover {
background: #292929
}
.sales-team-location-tracking .btn.yellow {
background: var(--yellow);
color: #000
}
.sales-team-location-tracking .btn.yellow:hover {
background: #FFD454
}
.sales-team-location-tracking .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.sales-team-location-tracking .btn .icon2 {
width: 17px;
height: 17px
}
.sales-team-location-tracking a:focus-visible,
.sales-team-location-tracking summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.sales-team-location-tracking .dark a:focus-visible,
.sales-team-location-tracking .final a:focus-visible {
outline-color: var(--yellow)
}
.sales-team-location-tracking .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.sales-team-location-tracking .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.sales-team-location-tracking .soft {
background: var(--sky2)
}
.sales-team-location-tracking .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.sales-team-location-tracking .dark h2,
.sales-team-location-tracking .dark h3 {
color: #fff
}
.sales-team-location-tracking .dark p {
color: #D6D6D6
}
.sales-team-location-tracking .dark .ey {
background: var(--yellow)
}
.sales-team-location-tracking .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.sales-team-location-tracking .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.sales-team-location-tracking .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.sales-team-location-tracking .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.sales-team-location-tracking .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.sales-team-location-tracking .textLink .icon2 {
width: 16px;
height: 16px
}
.sales-team-location-tracking .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.sales-team-location-tracking .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.sales-team-location-tracking .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.sales-team-location-tracking .skipLink:focus {
top: 12px
}
.sales-team-location-tracking .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.sales-team-location-tracking .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.sales-team-location-tracking .heroGrid>*,
.sales-team-location-tracking .feature>*,
.sales-team-location-tracking .aiGrid>* {
min-width: 0
}
.sales-team-location-tracking .hero h1 {
max-width: 580px
}
.sales-team-location-tracking .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.sales-team-location-tracking .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.sales-team-location-tracking .heroVisual {
min-height: 555px;
position: relative
}
.sales-team-location-tracking .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.sales-team-location-tracking .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.sales-team-location-tracking .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.sales-team-location-tracking .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.sales-team-location-tracking .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.sales-team-location-tracking .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.sales-team-location-tracking .brandTile .icon2 {
width: 17px;
height: 17px
}
.sales-team-location-tracking .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.sales-team-location-tracking .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.sales-team-location-tracking .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.sales-team-location-tracking .viewPills span {
padding: 4px 7px
}
.sales-team-location-tracking .viewPills .active {
background: var(--navy);
color: #fff
}
.sales-team-location-tracking .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.sales-team-location-tracking .miniDates,
.sales-team-location-tracking .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.sales-team-location-tracking .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.sales-team-location-tracking .miniDates>div:last-child {
border: 0
}
.sales-team-location-tracking .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.sales-team-location-tracking .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.sales-team-location-tracking .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.sales-team-location-tracking .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.sales-team-location-tracking .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.sales-team-location-tracking .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.sales-team-location-tracking .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.sales-team-location-tracking .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.sales-team-location-tracking .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.sales-team-location-tracking .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.sales-team-location-tracking .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.sales-team-location-tracking .boardFooter strong {
color: var(--navy)
}
.sales-team-location-tracking .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.sales-team-location-tracking .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.sales-team-location-tracking .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.sales-team-location-tracking .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.sales-team-location-tracking .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.sales-team-location-tracking .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.sales-team-location-tracking .phoneHead small {
font-size: 9px;
color: #50697A
}
.sales-team-location-tracking .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.sales-team-location-tracking .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.sales-team-location-tracking .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.sales-team-location-tracking .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.sales-team-location-tracking .phoneJob.current {
background: var(--sky2)
}
.sales-team-location-tracking .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.sales-team-location-tracking .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.sales-team-location-tracking .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.sales-team-location-tracking .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.sales-team-location-tracking .lifecycleHead .icon2 {
color: var(--yellow);
width: 17px;
height: 17px
}
.sales-team-location-tracking .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.sales-team-location-tracking .lifecycleBody strong {
font-size: 12px
}
.sales-team-location-tracking .lifecycleBody span {
color: #CEDBE4
}
.sales-team-location-tracking .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.sales-team-location-tracking .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
}
.sales-team-location-tracking .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.sales-team-location-tracking .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.sales-team-location-tracking .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.sales-team-location-tracking .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.sales-team-location-tracking .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.sales-team-location-tracking .logo.adobe {
font-size: 20px
}
.sales-team-location-tracking .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.sales-team-location-tracking .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.sales-team-location-tracking .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.sales-team-location-tracking .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.sales-team-location-tracking .outcome:nth-child(2):before {
background: var(--yellow)
}
.sales-team-location-tracking .outcome:nth-child(3):before {
background: var(--green)
}
.sales-team-location-tracking .outcome:nth-child(4):before {
background: var(--purple)
}
.sales-team-location-tracking .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.sales-team-location-tracking .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.sales-team-location-tracking .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
}
.sales-team-location-tracking .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.sales-team-location-tracking .feature.reverse .visual {
order: -1
}
.sales-team-location-tracking .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.sales-team-location-tracking .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.sales-team-location-tracking .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.sales-team-location-tracking .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.sales-team-location-tracking .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.sales-team-location-tracking .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.sales-team-location-tracking .visual>* {
position: relative;
z-index: 2
}
.sales-team-location-tracking .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.sales-team-location-tracking .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.sales-team-location-tracking .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.sales-team-location-tracking .uiHeading .icon2 {
width: 19px;
height: 19px
}
.sales-team-location-tracking .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.sales-team-location-tracking .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.sales-team-location-tracking .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.sales-team-location-tracking .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.sales-team-location-tracking .pill.green {
background: var(--greenbg);
color: #116746
}
.sales-team-location-tracking .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.sales-team-location-tracking .pill.gray {
background: #F0F3F5;
color: #586C79
}
.sales-team-location-tracking .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.sales-team-location-tracking .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.sales-team-location-tracking .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.sales-team-location-tracking .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.sales-team-location-tracking .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.sales-team-location-tracking .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.sales-team-location-tracking .plannerRow:last-child {
border-bottom: 0
}
.sales-team-location-tracking .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.sales-team-location-tracking .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.sales-team-location-tracking .avatar.green {
background: var(--greenbg);
color: #116746
}
.sales-team-location-tracking .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.sales-team-location-tracking .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.sales-team-location-tracking .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.sales-team-location-tracking .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.sales-team-location-tracking .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.sales-team-location-tracking .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.sales-team-location-tracking .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.sales-team-location-tracking .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.sales-team-location-tracking .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.sales-team-location-tracking .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.sales-team-location-tracking .pending .icon2 {
width: 18px;
height: 18px;
color: var(--navy)
}
.sales-team-location-tracking .pending strong {
font-size: 11px;
color: var(--navy)
}
.sales-team-location-tracking .pending .pill {
margin-left: auto
}
.sales-team-location-tracking .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.sales-team-location-tracking .legend span {
display: flex;
align-items: center;
gap: 4px
}
.sales-team-location-tracking .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.sales-team-location-tracking .legend .green i {
background: var(--green)
}
.sales-team-location-tracking .legend .yellow i {
background: #D7A200
}
.sales-team-location-tracking .roster {
display: grid;
gap: 10px
}
.sales-team-location-tracking .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.sales-team-location-tracking .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.sales-team-location-tracking .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.sales-team-location-tracking .rosterName {
flex: 1;
min-width: 0
}
.sales-team-location-tracking .rosterName strong {
display: block;
font-size: 11px
}
.sales-team-location-tracking .rosterName small {
color: var(--muted);
font-size: 9px
}
.sales-team-location-tracking .rosterTop .pill {
font-size: 8px
}
.sales-team-location-tracking .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.sales-team-location-tracking .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.sales-team-location-tracking .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.sales-team-location-tracking .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.sales-team-location-tracking .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.sales-team-location-tracking .rosterNote .icon2 {
width: 19px;
height: 19px
}
.sales-team-location-tracking .rosterNote strong {
display: block;
margin-bottom: 3px
}
.sales-team-location-tracking .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.sales-team-location-tracking .ruleCard .uiLabel {
color: #9CBED1
}
.sales-team-location-tracking .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.sales-team-location-tracking .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.sales-team-location-tracking .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.sales-team-location-tracking .workCards {
display: grid;
gap: 9px
}
.sales-team-location-tracking .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.sales-team-location-tracking .workCard strong {
display: block;
font-size: 11px
}
.sales-team-location-tracking .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.sales-team-location-tracking .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.sales-team-location-tracking .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.sales-team-location-tracking .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.sales-team-location-tracking .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.sales-team-location-tracking .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.sales-team-location-tracking .modeRow .icon2 {
width: 14px;
height: 14px
}
.sales-team-location-tracking .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.sales-team-location-tracking .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.sales-team-location-tracking .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.sales-team-location-tracking .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.sales-team-location-tracking .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.sales-team-location-tracking .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.sales-team-location-tracking .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.sales-team-location-tracking .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.sales-team-location-tracking .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.sales-team-location-tracking .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.sales-team-location-tracking .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.sales-team-location-tracking .lookupSide {
display: grid;
gap: 11px
}
.sales-team-location-tracking .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.sales-team-location-tracking .lookupCard .icon2 {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.sales-team-location-tracking .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.sales-team-location-tracking .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.sales-team-location-tracking .lookupCard.done {
border-left: 3px solid var(--green)
}
.sales-team-location-tracking .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.sales-team-location-tracking .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.sales-team-location-tracking .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.sales-team-location-tracking .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.sales-team-location-tracking .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.sales-team-location-tracking .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.sales-team-location-tracking .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.sales-team-location-tracking .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.sales-team-location-tracking .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.sales-team-location-tracking .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.sales-team-location-tracking .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.sales-team-location-tracking .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.sales-team-location-tracking .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.sales-team-location-tracking .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.sales-team-location-tracking .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.sales-team-location-tracking .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.sales-team-location-tracking .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
}
.sales-team-location-tracking .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.sales-team-location-tracking .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.sales-team-location-tracking .featureCard:hover {
transform: translateY(-3px)
}
.sales-team-location-tracking .featureIcon,
.sales-team-location-tracking .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.sales-team-location-tracking .featureIcon .icon2,
.sales-team-location-tracking .useIcon .icon2 {
width: 22px;
height: 22px
}
.sales-team-location-tracking .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.sales-team-location-tracking .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.sales-team-location-tracking .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.sales-team-location-tracking .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.sales-team-location-tracking .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.sales-team-location-tracking .integration:hover {
background: var(--sky2)
}
.sales-team-location-tracking .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.sales-team-location-tracking .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.sales-team-location-tracking .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.sales-team-location-tracking .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.sales-team-location-tracking .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.sales-team-location-tracking .stream>span[aria-hidden] {
color: #86B2C9
}
.sales-team-location-tracking .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.sales-team-location-tracking .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.sales-team-location-tracking .useCase h3 {
font-size: 20px
}
.sales-team-location-tracking .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.sales-team-location-tracking .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.sales-team-location-tracking .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.sales-team-location-tracking .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.sales-team-location-tracking .review h3 {
font-size: 22px
}
.sales-team-location-tracking .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.sales-team-location-tracking .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.sales-team-location-tracking .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.sales-team-location-tracking .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.sales-team-location-tracking .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.sales-team-location-tracking .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.sales-team-location-tracking .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.sales-team-location-tracking .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.sales-team-location-tracking .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.sales-team-location-tracking .faq {
max-width: 900px
}
.sales-team-location-tracking .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.sales-team-location-tracking .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.sales-team-location-tracking .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.sales-team-location-tracking .faq summary::marker {
color: var(--navy)
}
.sales-team-location-tracking .faq details[open] {
border-color: #A9D3E7
}
.sales-team-location-tracking .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.sales-team-location-tracking .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.sales-team-location-tracking .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.sales-team-location-tracking .cta h3 {
font-size: 19px
}
.sales-team-location-tracking .cta.darkCta h3 {
color: #fff
}
.sales-team-location-tracking .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.sales-team-location-tracking .cta.darkCta p {
color: #D1D1D1
}
.sales-team-location-tracking .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.sales-team-location-tracking .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.sales-team-location-tracking .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.sales-team-location-tracking .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.sales-team-location-tracking .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.sales-team-location-tracking .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.sales-team-location-tracking .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.heroGrid {
gap: 28px
}
h1 {
font-size: 56px
}
.hero .lead {
font-size: 17px
}
.assetPhone {
width: 168px;
top: 235px
}
.lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.scheduleBoard {
width: 96%;
left: 0
}
.miniJob {
padding: 4px
}
.heroVisual,
.assetStage {
min-height: 555px
}
.mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.visual {
padding: 17px
}
.plannerTicks,
.plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.plannerRow {
grid-template-columns: 75px 1fr
}
.person {
font-size: 9px;
padding: 10px 5px
}
.person .avatar {
display: none
}
}
@media(max-width:960px) {
.sales-team-location-tracking .heroGrid,
.sales-team-location-tracking .feature,
.sales-team-location-tracking .aiGrid,
.sales-team-location-tracking .final {
grid-template-columns: 1fr
}
.sales-team-location-tracking .heroGrid {
gap: 36px
}
.sales-team-location-tracking .hero h1 {
max-width: 760px
}
.sales-team-location-tracking .hero .lead {
max-width: 750px
}
.sales-team-location-tracking .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.sales-team-location-tracking .assetStage {
margin: auto
}
.sales-team-location-tracking .feature.reverse .visual {
order: 0
}
.sales-team-location-tracking .feature {
gap: 30px
}
.sales-team-location-tracking .feature>div:first-child {
max-width: 800px
}
.sales-team-location-tracking .outcomes,
.sales-team-location-tracking .featureGrid,
.sales-team-location-tracking .connectedGrid,
.sales-team-location-tracking .useCases {
grid-template-columns: repeat(2, 1fr)
}
.sales-team-location-tracking .logos {
grid-template-columns: repeat(3, 1fr)
}
.sales-team-location-tracking .integrations {
grid-template-columns: repeat(3, 1fr)
}
.sales-team-location-tracking .reviews {
grid-template-columns: 1fr
}
.sales-team-location-tracking .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.sales-team-location-tracking .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.sales-team-location-tracking .ratingItem:nth-child(2) {
border: 0
}
.sales-team-location-tracking .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.sales-team-location-tracking .final .btn {
min-width: 195px
}
.sales-team-location-tracking .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.sales-team-location-tracking .aiGrid {
gap: 30px
}
.sales-team-location-tracking .aiMini {
max-width: 760px
}
.sales-team-location-tracking .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.sales-team-location-tracking .wrap {
width: calc(100% - 24px)
}
.sales-team-location-tracking section {
padding: 56px 0
}
.sales-team-location-tracking .hero {
padding: 32px 0 42px
}
.sales-team-location-tracking h1 {
font-size: 42px
}
.sales-team-location-tracking h2 {
font-size: 34px
}
.sales-team-location-tracking .lead {
font-size: 17px
}
.sales-team-location-tracking .sectionHead p {
font-size: 16px
}
.sales-team-location-tracking .sectionHead {
margin-bottom: 28px
}
.sales-team-location-tracking .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.sales-team-location-tracking .heroGrid {
gap: 24px
}
.sales-team-location-tracking .hero .actions {
gap: 8px
}
.sales-team-location-tracking .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.sales-team-location-tracking .micro {
font-size: 11px
}
.sales-team-location-tracking .heroPills {
gap: 6px
}
.sales-team-location-tracking .heroPills span {
font-size: 9px
}
.sales-team-location-tracking .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.sales-team-location-tracking .heroVisual {
min-height: 525px
}
.sales-team-location-tracking .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.sales-team-location-tracking .assetStage:before {
inset: 38px 0 28px 10px
}
.sales-team-location-tracking .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.sales-team-location-tracking .boardHeader {
padding: 12px
}
.sales-team-location-tracking .boardBrand {
font-size: 12px
}
.sales-team-location-tracking .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.sales-team-location-tracking .miniCalendar {
margin: 0 10px 12px
}
.sales-team-location-tracking .miniDates,
.sales-team-location-tracking .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.sales-team-location-tracking .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.sales-team-location-tracking .miniPerson small {
font-size: 7px
}
.sales-team-location-tracking .miniCell {
padding: 4px 3px
}
.sales-team-location-tracking .miniDates>div {
font-size: 8px
}
.sales-team-location-tracking .miniDates small {
font-size: 7px
}
.sales-team-location-tracking .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.sales-team-location-tracking .miniJob b {
font-size: 7px
}
.sales-team-location-tracking .miniRow {
min-height: 57px
}
.sales-team-location-tracking .miniJob {
min-height: 48px
}
.sales-team-location-tracking .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.sales-team-location-tracking .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.sales-team-location-tracking .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.sales-team-location-tracking .phoneHead strong {
font-size: 11px
}
.sales-team-location-tracking .phoneHead small {
font-size: 8px
}
.sales-team-location-tracking .phoneAgenda {
padding: 8px;
gap: 6px
}
.sales-team-location-tracking .phoneJob {
padding: 7px;
font-size: 8px
}
.sales-team-location-tracking .phoneJob strong {
font-size: 9px
}
.sales-team-location-tracking .phoneJob small {
font-size: 7px
}
.sales-team-location-tracking .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.sales-team-location-tracking .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.sales-team-location-tracking .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.sales-team-location-tracking .lifecycleHead .icon2 {
width: 15px;
height: 15px
}
.sales-team-location-tracking .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.sales-team-location-tracking .lifecycleBody strong {
font-size: 10px
}
.sales-team-location-tracking .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.sales-team-location-tracking .diagramCaption {
font-size: 9px
}
.sales-team-location-tracking .trust {
padding: 23px 0
}
.sales-team-location-tracking .trustLabel {
font-size: 12px
}
.sales-team-location-tracking .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.sales-team-location-tracking .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.sales-team-location-tracking .logo.dhl {
font-size: 19px
}
.sales-team-location-tracking .logo.adobe {
font-size: 17px
}
.sales-team-location-tracking .logo.golden {
font-size: 8px
}
.sales-team-location-tracking .fl,
.sales-team-location-tracking .outcomes,
.sales-team-location-tracking .featureGrid,
.sales-team-location-tracking .connectedGrid,
.sales-team-location-tracking .useCases {
grid-template-columns: 1fr
}
.sales-team-location-tracking .fi {
font-size: 14px
}
.sales-team-location-tracking .outcome {
padding: 21px
}
.sales-team-location-tracking .outcome strong {
margin-top: 12px
}
.sales-team-location-tracking .outcome span {
font-size: 14px
}
.sales-team-location-tracking .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.sales-team-location-tracking .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.sales-team-location-tracking .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.sales-team-location-tracking .uiSub {
font-size: 9px
}
.sales-team-location-tracking .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.sales-team-location-tracking .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.sales-team-location-tracking .person {
font-size: 9px;
padding: 8px 6px
}
.sales-team-location-tracking .person .avatar {
display: none
}
.sales-team-location-tracking .person small {
font-size: 8px
}
.sales-team-location-tracking .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.sales-team-location-tracking .slot strong {
font-size: 8px
}
.sales-team-location-tracking .plannerHead {
font-size: 10px;
padding: 10px
}
.sales-team-location-tracking .plannerHead .pill {
font-size: 8px
}
.sales-team-location-tracking .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.sales-team-location-tracking .pending strong {
font-size: 10px
}
.sales-team-location-tracking .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.sales-team-location-tracking .rosterTop .pill {
font-size: 8px
}
.sales-team-location-tracking .rosterCard {
padding: 11px
}
.sales-team-location-tracking .rosterNote {
padding: 11px;
font-size: 10px
}
.sales-team-location-tracking .ruleCard {
padding: 14px
}
.sales-team-location-tracking .ruleCard strong {
font-size: 15px
}
.sales-team-location-tracking .workCard {
padding: 10px;
gap: 8px
}
.sales-team-location-tracking .workCard strong {
font-size: 10px
}
.sales-team-location-tracking .workCard small {
font-size: 8px
}
.sales-team-location-tracking .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.sales-team-location-tracking .modeRow span {
font-size: 8px;
padding: 7px
}
.sales-team-location-tracking .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.sales-team-location-tracking .phoneMockInner {
padding: 11px;
min-height: 288px
}
.sales-team-location-tracking .lookupCard {
padding: 10px
}
.sales-team-location-tracking .lookupCard strong {
font-size: 10px
}
.sales-team-location-tracking .lookupCard span {
font-size: 9px
}
.sales-team-location-tracking .lookupCard .icon2 {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.sales-team-location-tracking .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.sales-team-location-tracking .aiMini div {
padding: 16px
}
.sales-team-location-tracking .aiMini strong {
font-size: 14px
}
.sales-team-location-tracking .aiMini span {
font-size: 13px
}
.sales-team-location-tracking .promptBox {
padding: 18px;
border-radius: 17px
}
.sales-team-location-tracking .prompt {
font-size: 13px;
padding: 13px
}
.sales-team-location-tracking .promptHead {
font-size: 19px
}
.sales-team-location-tracking .promptFoot {
font-size: 10px !important
}
.sales-team-location-tracking .connectedCard {
padding: 22px
}
.sales-team-location-tracking .connectedCard p,
.sales-team-location-tracking .featureCard p,
.sales-team-location-tracking .useCase p {
font-size: 14px
}
.sales-team-location-tracking .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.sales-team-location-tracking .integrations {
grid-template-columns: repeat(2, 1fr)
}
.sales-team-location-tracking .integration:last-child {
grid-column: 1/-1
}
.sales-team-location-tracking .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.sales-team-location-tracking .stream>span[aria-hidden] {
display: none
}
.sales-team-location-tracking .streamStep {
min-height: 24px
}
.sales-team-location-tracking .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.sales-team-location-tracking .ratingItem {
border: 0
}
.sales-team-location-tracking .ratingLead {
margin-bottom: 3px
}
.sales-team-location-tracking .review p {
font-size: 14px
}
.sales-team-location-tracking .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.sales-team-location-tracking .ctaBtns {
width: 100%
}
.sales-team-location-tracking .ctaBtns .btn {
flex: 1
}
.sales-team-location-tracking .cta p {
font-size: 14px
}
.sales-team-location-tracking .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.sales-team-location-tracking .final h2 {
font-size: 32px
}
.sales-team-location-tracking .final p {
font-size: 15px
}
.sales-team-location-tracking .final .ctaBtns {
flex-direction: column
}
.sales-team-location-tracking .final .btn {
min-width: 0;
width: 100%
}
.sales-team-location-tracking .faq details {
padding: 16px
}
.sales-team-location-tracking .faq summary {
font-size: 14px
}
.sales-team-location-tracking .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.sales-team-location-tracking h1 {
font-size: 38px
}
.sales-team-location-tracking h2 {
font-size: 31px
}
.sales-team-location-tracking .heroVisual,
.sales-team-location-tracking .assetStage {
height: 520px;
min-height: 520px
}
.sales-team-location-tracking .assetPhone {
width: 152px;
top: 242px
}
.sales-team-location-tracking .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.sales-team-location-tracking .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.sales-team-location-tracking .lifecycleBody {
padding: 8px;
font-size: 8px
}
.sales-team-location-tracking .lifecycleBody strong {
font-size: 9px
}
.sales-team-location-tracking .boardBrand {
font-size: 11px
}
.sales-team-location-tracking .sampleBadge {
font-size: 8px
}
.sales-team-location-tracking .miniDates,
.sales-team-location-tracking .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.sales-team-location-tracking .miniDates small {
font-size: 6px
}
.sales-team-location-tracking .miniJob b {
font-size: 6.5px
}
.sales-team-location-tracking .boardFooter {
padding-right: 135px;
min-height: 45px
}
.sales-team-location-tracking .mobileLookup {
grid-template-columns: 1fr
}
.sales-team-location-tracking .phoneMock {
width: 200px;
margin: auto
}
.sales-team-location-tracking .lookupSide {
grid-template-columns: 1fr
}
.sales-team-location-tracking .lookupCard {
padding: 13px
}
.sales-team-location-tracking .lookupCard strong {
font-size: 12px
}
.sales-team-location-tracking .lookupCard span {
font-size: 11px
}
.sales-team-location-tracking .plannerHead {
gap: 5px
}
.sales-team-location-tracking .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.sales-team-location-tracking .plannerRow {
grid-template-columns: 61px 1fr
}
.sales-team-location-tracking .uiHeading>span:first-child {
gap: 5px
}
.sales-team-location-tracking .uiHeading .icon2 {
width: 17px;
height: 17px
}
}
.sales-team-location-tracking #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.sales-team-location-tracking #connected-tools.fsmTools *,
.sales-team-location-tracking #connected-tools.fsmTools *::before,
.sales-team-location-tracking #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.sales-team-location-tracking #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.sales-team-location-tracking #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.sales-team-location-tracking #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.sales-team-location-tracking #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.sales-team-location-tracking #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__step::before,
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.sales-team-location-tracking #connected-tools.fsmTools {
padding: 52px 0;
}
.sales-team-location-tracking #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.sales-team-location-tracking #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.sales-team-location-tracking #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.sales-team-location-tracking #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.sales-team-location-tracking #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card,
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.sales-team-location-tracking #connected-tools.fsmTools h2 {
font-size: 30px;
}
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.sales-team-location-tracking #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.sales-team-location-tracking   .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.sales-team-location-tracking .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
.sales-team-location-tracking .assetStage:before {
content: none
}
.sales-team-location-tracking .salesHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
.sales-team-location-tracking .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
.sales-team-location-tracking .ey {
max-width: 100%
}
.sales-team-location-tracking .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
.sales-team-location-tracking .uiHeading>span:first-child {
min-width: 0
}
.sales-team-location-tracking .uiHeading .icon2 {
flex-shrink: 0
}
.sales-team-location-tracking .salesPanel {
padding: 17px
}
.sales-team-location-tracking .salesRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.sales-team-location-tracking .salesRecordHead>span:first-child {
min-width: 0
}
.sales-team-location-tracking .salesIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
.sales-team-location-tracking .salesCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
.sales-team-location-tracking .salesMeta {
display: grid;
gap: 8px
}
.sales-team-location-tracking .salesMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
.sales-team-location-tracking .salesMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
.sales-team-location-tracking .salesMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.sales-team-location-tracking .salesRows {
padding: 0 14px
}
.sales-team-location-tracking .salesRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
.sales-team-location-tracking .salesRow:last-child {
border: 0
}
.sales-team-location-tracking .salesRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.sales-team-location-tracking .salesRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
.sales-team-location-tracking .salesRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
.sales-team-location-tracking .salesFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
.sales-team-location-tracking .salesFoot strong {
color: var(--navy)
}
.sales-team-location-tracking .salesAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
.sales-team-location-tracking .salesAlert>.icon {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
.sales-team-location-tracking .salesAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
.sales-team-location-tracking .salesAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
.sales-team-location-tracking .salesDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
.sales-team-location-tracking .salesDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
.sales-team-location-tracking .salesDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
.sales-team-location-tracking .salesDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
.sales-team-location-tracking .salesDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
.sales-team-location-tracking .salesDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
.sales-team-location-tracking .salesDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
.sales-team-location-tracking .salesDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
.sales-team-location-tracking .salesDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
.sales-team-location-tracking .salesDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
.sales-team-location-tracking .salesDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
.sales-team-location-tracking .salesDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
.sales-team-location-tracking .salesQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
.sales-team-location-tracking .salesQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
.sales-team-location-tracking .salesQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
.sales-team-location-tracking .salesQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
.sales-team-location-tracking .salesQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
.sales-team-location-tracking .salesQueueBar span {
display: block;
height: 100%;
width: var(--sales-bar);
background: var(--brand);
border-radius: 6px
}
.sales-team-location-tracking .salesQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
.sales-team-location-tracking .salesTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
.sales-team-location-tracking .salesTraceHead .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
.sales-team-location-tracking .salesTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
.sales-team-location-tracking .salesTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
.sales-team-location-tracking .salesTraceHead .pill {
margin-left: auto
}
.sales-team-location-tracking .salesTimeline {
padding: 17px 15px
}
.sales-team-location-tracking .salesEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
.sales-team-location-tracking .salesEvent:last-child {
padding-bottom: 0
}
.sales-team-location-tracking .salesEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.sales-team-location-tracking .salesEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
.sales-team-location-tracking .salesEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
.sales-team-location-tracking .salesEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
.sales-team-location-tracking .salesEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
.sales-team-location-tracking .salesEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
.sales-team-location-tracking .salesNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
.sales-team-location-tracking .salesNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
.sales-team-location-tracking .salesSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
.sales-team-location-tracking .salesSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
.sales-team-location-tracking .salesSource .icon2 {
color: var(--navy);
margin-bottom: 8px
}
.sales-team-location-tracking .salesSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.sales-team-location-tracking .salesSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
.sales-team-location-tracking .salesConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
.sales-team-location-tracking .salesConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
.sales-team-location-tracking .salesHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
.sales-team-location-tracking .salesHub strong {
display: block;
font-size: 18px
}
.sales-team-location-tracking .salesHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
.sales-team-location-tracking .salesHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
.sales-team-location-tracking .salesHandoff>strong {
font-size: 13px;
color: var(--navy)
}
.sales-team-location-tracking .salesHandoff>span:not(.pill) {
color: var(--muted)
}
.sales-team-location-tracking .salesHandoff .salesHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
.sales-team-location-tracking .salesScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
.sales-team-location-tracking .salesScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
.sales-team-location-tracking .salesComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
.sales-team-location-tracking .salesComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
.sales-team-location-tracking .salesComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
.sales-team-location-tracking .salesComparison th,
.sales-team-location-tracking .salesComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
.sales-team-location-tracking .salesComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
.sales-team-location-tracking .salesComparison tbody th {
font-size: 14px;
color: var(--navy)
}
.sales-team-location-tracking .salesComparison tbody td {
color: var(--muted)
}
.sales-team-location-tracking .salesComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
.sales-team-location-tracking .salesNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
.sales-team-location-tracking .salesNote strong {
color: var(--navy)
}
.sales-team-location-tracking .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
.sales-team-location-tracking .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
.sales-team-location-tracking .heroVisual {
max-width: 480px
}
.sales-team-location-tracking .salesIdentity {
gap: 12px
}
.sales-team-location-tracking .salesMeta>div {
padding: 9px 10px
}
.sales-team-location-tracking .salesMeta strong {
font-size: 11px
}
.sales-team-location-tracking .salesRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
.sales-team-location-tracking .salesRows {
padding: 0 11px
}
.sales-team-location-tracking .salesRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
.sales-team-location-tracking .salesRow strong {
font-size: 11px
}
.sales-team-location-tracking .salesRow small {
font-size: 9px
}
.sales-team-location-tracking .salesRow .pill {
font-size: 8px;
padding: 4px 6px
}
.sales-team-location-tracking .salesDwell {
padding: 16px
}
.sales-team-location-tracking .salesDwellMetrics {
gap: 12px
}
.sales-team-location-tracking .salesDwellMetrics>div+div {
padding-left: 12px
}
.sales-team-location-tracking .salesDwellMetrics b {
font-size: 32px
}
.sales-team-location-tracking .salesDwellMetrics span {
font-size: 10px
}
.sales-team-location-tracking .salesQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
.sales-team-location-tracking .salesTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
.sales-team-location-tracking .salesTraceHead strong {
font-size: 12px
}
.sales-team-location-tracking .salesTraceHead .pill {
font-size: 8px
}
.sales-team-location-tracking .salesTimeline {
padding: 15px 12px
}
.sales-team-location-tracking .salesSources {
gap: 8px
}
.sales-team-location-tracking .salesSource {
padding: 12px
}
.sales-team-location-tracking .salesHandoff {
padding: 13px;
gap: 10px
}
.sales-team-location-tracking .salesHandoff>strong {
font-size: 12px
}
.sales-team-location-tracking .salesComparison,
.sales-team-location-tracking .salesComparison tbody,
.sales-team-location-tracking .salesComparison tr,
.sales-team-location-tracking .salesComparison th,
.sales-team-location-tracking .salesComparison td {
display: block;
width: 100%
}
.sales-team-location-tracking .salesComparison colgroup {
display: none
}
.sales-team-location-tracking .salesComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
.sales-team-location-tracking .salesComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
.sales-team-location-tracking .salesComparison th,
.sales-team-location-tracking .salesComparison td {
padding: 10px 16px
}
.sales-team-location-tracking .salesComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
.sales-team-location-tracking .salesComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
.sales-team-location-tracking .salesComparison tbody tr+tr>* {
border: 0
}
.sales-team-location-tracking .salesComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
.sales-team-location-tracking .salesComparison tbody td:last-child {
padding-bottom: 18px
}
.sales-team-location-tracking .salesNote {
padding: 17px
}
}
@media(max-width:360px) {
.sales-team-location-tracking .salesIdentity {
grid-template-columns: 1fr
}
.sales-team-location-tracking .salesCarrierSvg {
max-width: 170px
}
.sales-team-location-tracking .salesMeta {
grid-template-columns: 1fr 1fr
}
.sales-team-location-tracking .salesMeta>div:last-child {
grid-column: 1/-1
}
.sales-team-location-tracking .salesRow {
grid-template-columns: 33px minmax(0, 1fr)
}
.sales-team-location-tracking .salesRow .pill {
grid-column: 2;
justify-self: start
}
.sales-team-location-tracking .salesDwellLegend {
font-size: 8px
}
.sales-team-location-tracking .salesQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
.sales-team-location-tracking .salesTraceHead .pill {
margin-left: 47px
}
.sales-team-location-tracking .salesHandoff {
grid-template-columns: 1fr
}
.sales-team-location-tracking .salesHandoff .pill {
justify-self: start
}
} @media screen { .ey,
.ey * {
color: #0B0B0B !important;
-webkit-text-fill-color: currentColor !important;
}
.faq summary,
.faq summary * {
color: #063B5C !important;
-webkit-text-fill-color: currentColor !important;
}
.faq summary::marker {
color: #063B5C !important;
}
}
.sales-team-location-tracking  .locationMapSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 360 / 218
}
.sales-team-location-tracking .locationMapBox {
padding: 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 12px
}
.sales-team-location-tracking .locationRoster {
display: grid;
gap: 8px
}
.sales-team-location-tracking .locationRep {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff
}
.sales-team-location-tracking .locationRep .avatar {
width: 32px;
height: 32px;
font-size: 10px
}
.sales-team-location-tracking .locationRep strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy)
}
.sales-team-location-tracking .locationRep small {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted)
}
.sales-team-location-tracking .locationRep time {
font-size: 11px;
font-weight: 750;
font-variant-numeric: tabular-nums;
color: var(--navy)
}
.sales-team-location-tracking .locationLegend {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
font-size: 10px;
line-height: 1.5;
color: var(--muted)
}
.sales-team-location-tracking .locationLegend span {
display: flex;
align-items: center;
gap: 6px
}
.sales-team-location-tracking .locationLegend i {
display: block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand)
}
.sales-team-location-tracking .locationLegend i.green {
background: var(--green)
}
.sales-team-location-tracking .locationLegend i.yellow {
background: #B48B10
}
.sales-team-location-tracking .visitRoute {
display: grid;
gap: 9px
}
.sales-team-location-tracking .visitStop {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px
}
.sales-team-location-tracking .visitStop>b {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--sky);
color: var(--navy);
font-size: 12px
}
.sales-team-location-tracking .visitStop strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--ink)
}
.sales-team-location-tracking .visitStop small {
display: block;
font-size: 10px;
line-height: 1.55;
color: var(--muted);
margin-top: 3px
}
.sales-team-location-tracking .visitStop .pill {
font-size: 9px
}
.sales-team-location-tracking .locationPlanHead {
background: #0D2535;
color: #fff;
padding: 17px;
border-radius: 12px;
margin-bottom: 12px
}
.sales-team-location-tracking .locationPlanHead strong {
font-size: 16px;
line-height: 1.5;
display: block;
color: #fff
}
.sales-team-location-tracking .locationPlanHead small {
font-size: 11px;
line-height: 1.5;
display: block;
color: #CEDBE4;
margin-top: 3px
}
.sales-team-location-tracking .locationAssignment {
padding: 15px
}
.sales-team-location-tracking .assignmentFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-bottom: 13px
}
.sales-team-location-tracking .assignmentFacts>div {
padding: 12px;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 10px
}
.sales-team-location-tracking .assignmentFacts small {
display: block;
font-size: 9px;
color: var(--muted);
margin-bottom: 4px
}
.sales-team-location-tracking .assignmentFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy)
}
.sales-team-location-tracking .assignmentReview {
display: grid;
gap: 9px;
padding: 12px;
border: 1px dashed #BBD9E7;
border-radius: 10px;
background: #fff
}
.sales-team-location-tracking .assignmentReview>div {
display: flex;
align-items: flex-start;
gap: 8px;
color: var(--muted);
font-size: 11px;
line-height: 1.6
}
.sales-team-location-tracking .assignmentReview .icon2 {
width: 17px;
height: 17px;
color: var(--green);
margin-top: 1px
}
.sales-team-location-tracking .locationReportSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px
}
.sales-team-location-tracking .locationReportSummary>div {
border: 1px solid #333;
border-radius: 11px;
padding: 13px;
background: #1B1B1B
}
.sales-team-location-tracking .locationReportSummary strong {
display: block;
font-size: 12px;
color: var(--yellow);
line-height: 1.5
}
.sales-team-location-tracking .locationReportSummary span {
display: block;
font-size: 11px;
color: #CEDBE4;
line-height: 1.6;
margin-top: 5px
}
.sales-team-location-tracking .locationScope {
margin-top: 16px;
font-size: 12px;
line-height: 1.75;
color: var(--muted)
}
.sales-team-location-tracking .locationScope a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
@media(max-width:640px) {
.sales-team-location-tracking .locationMapBox {
padding: 9px
}
.sales-team-location-tracking .locationRep {
gap: 8px;
padding: 10px
}
.sales-team-location-tracking .locationRep strong {
font-size: 11px
}
.sales-team-location-tracking .locationRep small {
font-size: 9px
}
.sales-team-location-tracking .visitStop {
gap: 8px;
padding: 11px;
grid-template-columns: 28px minmax(0, 1fr) auto
}
.sales-team-location-tracking .visitStop>b {
width: 28px;
height: 28px
}
.sales-team-location-tracking .visitStop strong {
font-size: 11px
}
.sales-team-location-tracking .visitStop .pill {
font-size: 8px;
padding: 4px 6px
}
.sales-team-location-tracking .locationAssignment {
padding: 12px
}
.sales-team-location-tracking .assignmentFacts {
gap: 8px
}
.sales-team-location-tracking .assignmentFacts>div {
padding: 10px
}
.sales-team-location-tracking .assignmentFacts strong {
font-size: 11px
}
}
@media(max-width:360px) {
.sales-team-location-tracking .visitStop {
grid-template-columns: 28px minmax(0, 1fr)
}
.sales-team-location-tracking .visitStop .pill {
grid-column: 2;
justify-self: start
}
.sales-team-location-tracking .locationRep {
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 7px
}
.sales-team-location-tracking .locationRep .avatar {
width: 28px;
height: 28px
}
}  .customer-relationship-management .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.customer-relationship-management .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.customer-relationship-management .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.customer-relationship-management .btn:hover {
transform: translateY(-2px)
}
.customer-relationship-management .btn.black {
background: #0b0b0b;
color: #fff
}
.customer-relationship-management .btn.black:hover {
background: #292929
}
.customer-relationship-management .btn.yellow {
background: var(--yellow);
color: #000
}
.customer-relationship-management .btn.yellow:hover {
background: #FFD454
}
.customer-relationship-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.customer-relationship-management .btn .icon2 {
width: 17px;
height: 17px
}
.customer-relationship-management a:focus-visible,
.customer-relationship-management summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.customer-relationship-management .dark a:focus-visible,
.customer-relationship-management .final a:focus-visible {
outline-color: var(--yellow)
}
.customer-relationship-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.customer-relationship-management .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.customer-relationship-management .soft {
background: var(--sky2)
}
.customer-relationship-management .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.customer-relationship-management .dark h2,
.customer-relationship-management .dark h3 {
color: #fff
}
.customer-relationship-management .dark p {
color: #D6D6D6
}
.customer-relationship-management .dark .ey {
background: var(--yellow)
}
.customer-relationship-management .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.customer-relationship-management .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.customer-relationship-management .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.customer-relationship-management .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.customer-relationship-management .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.customer-relationship-management .textLink .icon2 {
width: 16px;
height: 16px
}
.customer-relationship-management .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.customer-relationship-management .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.customer-relationship-management .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.customer-relationship-management .skipLink:focus {
top: 12px
}
.customer-relationship-management .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.customer-relationship-management .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.customer-relationship-management .heroGrid>*,
.customer-relationship-management .feature>*,
.customer-relationship-management .aiGrid>* {
min-width: 0
}
.customer-relationship-management .hero h1 {
max-width: 580px
}
.customer-relationship-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.customer-relationship-management .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.customer-relationship-management .heroVisual {
min-height: 555px;
position: relative
}
.customer-relationship-management .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.customer-relationship-management .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.customer-relationship-management .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.customer-relationship-management .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.customer-relationship-management .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.customer-relationship-management .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.customer-relationship-management .brandTile .icon2 {
width: 17px;
height: 17px
}
.customer-relationship-management .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.customer-relationship-management .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.customer-relationship-management .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.customer-relationship-management .viewPills span {
padding: 4px 7px
}
.customer-relationship-management .viewPills .active {
background: var(--navy);
color: #fff
}
.customer-relationship-management .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.customer-relationship-management .miniDates,
.customer-relationship-management .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.customer-relationship-management .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.customer-relationship-management .miniDates>div:last-child {
border: 0
}
.customer-relationship-management .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.customer-relationship-management .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.customer-relationship-management .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.customer-relationship-management .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.customer-relationship-management .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.customer-relationship-management .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.customer-relationship-management .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.customer-relationship-management .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.customer-relationship-management .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.customer-relationship-management .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.customer-relationship-management .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.customer-relationship-management .boardFooter strong {
color: var(--navy)
}
.customer-relationship-management .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.customer-relationship-management .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.customer-relationship-management .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.customer-relationship-management .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.customer-relationship-management .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.customer-relationship-management .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.customer-relationship-management .phoneHead small {
font-size: 9px;
color: #50697A
}
.customer-relationship-management .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.customer-relationship-management .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.customer-relationship-management .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.customer-relationship-management .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.customer-relationship-management .phoneJob.current {
background: var(--sky2)
}
.customer-relationship-management .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.customer-relationship-management .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.customer-relationship-management .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.customer-relationship-management .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.customer-relationship-management .lifecycleHead .icon2 {
color: var(--yellow);
width: 17px;
height: 17px
}
.customer-relationship-management .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.customer-relationship-management .lifecycleBody strong {
font-size: 12px
}
.customer-relationship-management .lifecycleBody span {
color: #CEDBE4
}
.customer-relationship-management .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.customer-relationship-management .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
}
.customer-relationship-management .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.customer-relationship-management .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.customer-relationship-management .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.customer-relationship-management .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.customer-relationship-management .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.customer-relationship-management .logo.adobe {
font-size: 20px
}
.customer-relationship-management .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.customer-relationship-management .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.customer-relationship-management .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.customer-relationship-management .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.customer-relationship-management .outcome:nth-child(2):before {
background: var(--yellow)
}
.customer-relationship-management .outcome:nth-child(3):before {
background: var(--green)
}
.customer-relationship-management .outcome:nth-child(4):before {
background: var(--purple)
}
.customer-relationship-management .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.customer-relationship-management .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.customer-relationship-management .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
}
.customer-relationship-management .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.customer-relationship-management .feature.reverse .visual {
order: -1
}
.customer-relationship-management .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.customer-relationship-management .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.customer-relationship-management .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.customer-relationship-management .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.customer-relationship-management .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.customer-relationship-management .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.customer-relationship-management .visual>* {
position: relative;
z-index: 2
}
.customer-relationship-management .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.customer-relationship-management .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.customer-relationship-management .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.customer-relationship-management .uiHeading .icon2 {
width: 19px;
height: 19px
}
.customer-relationship-management .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.customer-relationship-management .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.customer-relationship-management .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.customer-relationship-management .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.customer-relationship-management .pill.green {
background: var(--greenbg);
color: #116746
}
.customer-relationship-management .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.customer-relationship-management .pill.gray {
background: #F0F3F5;
color: #586C79
}
.customer-relationship-management .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.customer-relationship-management .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.customer-relationship-management .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.customer-relationship-management .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.customer-relationship-management .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.customer-relationship-management .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.customer-relationship-management .plannerRow:last-child {
border-bottom: 0
}
.customer-relationship-management .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.customer-relationship-management .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.customer-relationship-management .avatar.green {
background: var(--greenbg);
color: #116746
}
.customer-relationship-management .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.customer-relationship-management .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.customer-relationship-management .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.customer-relationship-management .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.customer-relationship-management .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.customer-relationship-management .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.customer-relationship-management .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.customer-relationship-management .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.customer-relationship-management .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.customer-relationship-management .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.customer-relationship-management .pending .icon2 {
width: 18px;
height: 18px;
color: var(--navy)
}
.customer-relationship-management .pending strong {
font-size: 11px;
color: var(--navy)
}
.customer-relationship-management .pending .pill {
margin-left: auto
}
.customer-relationship-management .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.customer-relationship-management .legend span {
display: flex;
align-items: center;
gap: 4px
}
.customer-relationship-management .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.customer-relationship-management .legend .green i {
background: var(--green)
}
.customer-relationship-management .legend .yellow i {
background: #D7A200
}
.customer-relationship-management .roster {
display: grid;
gap: 10px
}
.customer-relationship-management .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.customer-relationship-management .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.customer-relationship-management .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.customer-relationship-management .rosterName {
flex: 1;
min-width: 0
}
.customer-relationship-management .rosterName strong {
display: block;
font-size: 11px
}
.customer-relationship-management .rosterName small {
color: var(--muted);
font-size: 9px
}
.customer-relationship-management .rosterTop .pill {
font-size: 8px
}
.customer-relationship-management .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.customer-relationship-management .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.customer-relationship-management .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.customer-relationship-management .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.customer-relationship-management .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.customer-relationship-management .rosterNote .icon2 {
width: 19px;
height: 19px
}
.customer-relationship-management .rosterNote strong {
display: block;
margin-bottom: 3px
}
.customer-relationship-management .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.customer-relationship-management .ruleCard .uiLabel {
color: #9CBED1
}
.customer-relationship-management .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.customer-relationship-management .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.customer-relationship-management .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.customer-relationship-management .workCards {
display: grid;
gap: 9px
}
.customer-relationship-management .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.customer-relationship-management .workCard strong {
display: block;
font-size: 11px
}
.customer-relationship-management .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.customer-relationship-management .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.customer-relationship-management .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.customer-relationship-management .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.customer-relationship-management .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.customer-relationship-management .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.customer-relationship-management .modeRow .icon2 {
width: 14px;
height: 14px
}
.customer-relationship-management .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.customer-relationship-management .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.customer-relationship-management .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.customer-relationship-management .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.customer-relationship-management .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.customer-relationship-management .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.customer-relationship-management .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.customer-relationship-management .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.customer-relationship-management .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.customer-relationship-management .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.customer-relationship-management .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.customer-relationship-management .lookupSide {
display: grid;
gap: 11px
}
.customer-relationship-management .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.customer-relationship-management .lookupCard .icon2 {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.customer-relationship-management .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.customer-relationship-management .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.customer-relationship-management .lookupCard.done {
border-left: 3px solid var(--green)
}
.customer-relationship-management .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.customer-relationship-management .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.customer-relationship-management .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.customer-relationship-management .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.customer-relationship-management .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.customer-relationship-management .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.customer-relationship-management .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.customer-relationship-management .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.customer-relationship-management .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.customer-relationship-management .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.customer-relationship-management .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.customer-relationship-management .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.customer-relationship-management .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.customer-relationship-management .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.customer-relationship-management .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.customer-relationship-management .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.customer-relationship-management .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
}
.customer-relationship-management .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.customer-relationship-management .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.customer-relationship-management .featureCard:hover {
transform: translateY(-3px)
}
.customer-relationship-management .featureIcon,
.customer-relationship-management .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.customer-relationship-management .featureIcon .icon2,
.customer-relationship-management .useIcon .icon2 {
width: 22px;
height: 22px
}
.customer-relationship-management .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.customer-relationship-management .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.customer-relationship-management .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.customer-relationship-management .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.customer-relationship-management .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.customer-relationship-management .integration:hover {
background: var(--sky2)
}
.customer-relationship-management .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.customer-relationship-management .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.customer-relationship-management .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.customer-relationship-management .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.customer-relationship-management .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.customer-relationship-management .stream>span[aria-hidden] {
color: #86B2C9
}
.customer-relationship-management .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.customer-relationship-management .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.customer-relationship-management .useCase h3 {
font-size: 20px
}
.customer-relationship-management .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.customer-relationship-management .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.customer-relationship-management .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.customer-relationship-management .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.customer-relationship-management .review h3 {
font-size: 22px
}
.customer-relationship-management .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.customer-relationship-management .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.customer-relationship-management .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.customer-relationship-management .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.customer-relationship-management .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.customer-relationship-management .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.customer-relationship-management .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.customer-relationship-management .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.customer-relationship-management .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.customer-relationship-management .faq {
max-width: 900px
}
.customer-relationship-management .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.customer-relationship-management .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.customer-relationship-management .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.customer-relationship-management .faq summary::marker {
color: var(--navy)
}
.customer-relationship-management .faq details[open] {
border-color: #A9D3E7
}
.customer-relationship-management .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.customer-relationship-management .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.customer-relationship-management .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.customer-relationship-management .cta h3 {
font-size: 19px
}
.customer-relationship-management .cta.darkCta h3 {
color: #fff
}
.customer-relationship-management .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.customer-relationship-management .cta.darkCta p {
color: #D1D1D1
}
.customer-relationship-management .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.customer-relationship-management .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.customer-relationship-management .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.customer-relationship-management .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.customer-relationship-management .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.customer-relationship-management .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.customer-relationship-management .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.heroGrid {
gap: 28px
}
h1 {
font-size: 56px
}
.hero .lead {
font-size: 17px
}
.assetPhone {
width: 168px;
top: 235px
}
.lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.scheduleBoard {
width: 96%;
left: 0
}
.miniJob {
padding: 4px
}
.heroVisual,
.assetStage {
min-height: 555px
}
.mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.visual {
padding: 17px
}
.plannerTicks,
.plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.plannerRow {
grid-template-columns: 75px 1fr
}
.person {
font-size: 9px;
padding: 10px 5px
}
.person .avatar {
display: none
}
}
@media(max-width:960px) {
.customer-relationship-management .heroGrid,
.customer-relationship-management .feature,
.customer-relationship-management .aiGrid,
.customer-relationship-management .final {
grid-template-columns: 1fr
}
.customer-relationship-management .heroGrid {
gap: 36px
}
.customer-relationship-management .hero h1 {
max-width: 760px
}
.customer-relationship-management .hero .lead {
max-width: 750px
}
.customer-relationship-management .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.customer-relationship-management .assetStage {
margin: auto
}
.customer-relationship-management .feature.reverse .visual {
order: 0
}
.customer-relationship-management .feature {
gap: 30px
}
.customer-relationship-management .feature>div:first-child {
max-width: 800px
}
.customer-relationship-management .outcomes,
.customer-relationship-management .featureGrid,
.customer-relationship-management .connectedGrid,
.customer-relationship-management .useCases {
grid-template-columns: repeat(2, 1fr)
}
.customer-relationship-management .logos {
grid-template-columns: repeat(3, 1fr)
}
.customer-relationship-management .integrations {
grid-template-columns: repeat(3, 1fr)
}
.customer-relationship-management .reviews {
grid-template-columns: 1fr
}
.customer-relationship-management .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.customer-relationship-management .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.customer-relationship-management .ratingItem:nth-child(2) {
border: 0
}
.customer-relationship-management .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.customer-relationship-management .final .btn {
min-width: 195px
}
.customer-relationship-management .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.customer-relationship-management .aiGrid {
gap: 30px
}
.customer-relationship-management .aiMini {
max-width: 760px
}
.customer-relationship-management .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.customer-relationship-management .wrap {
width: calc(100% - 24px)
}
.customer-relationship-management section {
padding: 56px 0
}
.customer-relationship-management .hero {
padding: 32px 0 42px
}
.customer-relationship-management h1 {
font-size: 42px
}
.customer-relationship-management h2 {
font-size: 34px
}
.customer-relationship-management .lead {
font-size: 17px
}
.customer-relationship-management .sectionHead p {
font-size: 16px
}
.customer-relationship-management .sectionHead {
margin-bottom: 28px
}
.customer-relationship-management .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.customer-relationship-management .heroGrid {
gap: 24px
}
.customer-relationship-management .hero .actions {
gap: 8px
}
.customer-relationship-management .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.customer-relationship-management .micro {
font-size: 11px
}
.customer-relationship-management .heroPills {
gap: 6px
}
.customer-relationship-management .heroPills span {
font-size: 9px
}
.customer-relationship-management .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.customer-relationship-management .heroVisual {
min-height: 525px
}
.customer-relationship-management .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.customer-relationship-management .assetStage:before {
inset: 38px 0 28px 10px
}
.customer-relationship-management .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.customer-relationship-management .boardHeader {
padding: 12px
}
.customer-relationship-management .boardBrand {
font-size: 12px
}
.customer-relationship-management .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.customer-relationship-management .miniCalendar {
margin: 0 10px 12px
}
.customer-relationship-management .miniDates,
.customer-relationship-management .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.customer-relationship-management .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.customer-relationship-management .miniPerson small {
font-size: 7px
}
.customer-relationship-management .miniCell {
padding: 4px 3px
}
.customer-relationship-management .miniDates>div {
font-size: 8px
}
.customer-relationship-management .miniDates small {
font-size: 7px
}
.customer-relationship-management .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.customer-relationship-management .miniJob b {
font-size: 7px
}
.customer-relationship-management .miniRow {
min-height: 57px
}
.customer-relationship-management .miniJob {
min-height: 48px
}
.customer-relationship-management .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.customer-relationship-management .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.customer-relationship-management .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.customer-relationship-management .phoneHead strong {
font-size: 11px
}
.customer-relationship-management .phoneHead small {
font-size: 8px
}
.customer-relationship-management .phoneAgenda {
padding: 8px;
gap: 6px
}
.customer-relationship-management .phoneJob {
padding: 7px;
font-size: 8px
}
.customer-relationship-management .phoneJob strong {
font-size: 9px
}
.customer-relationship-management .phoneJob small {
font-size: 7px
}
.customer-relationship-management .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.customer-relationship-management .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.customer-relationship-management .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.customer-relationship-management .lifecycleHead .icon2 {
width: 15px;
height: 15px
}
.customer-relationship-management .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.customer-relationship-management .lifecycleBody strong {
font-size: 10px
}
.customer-relationship-management .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.customer-relationship-management .diagramCaption {
font-size: 9px
}
.customer-relationship-management .trust {
padding: 23px 0
}
.customer-relationship-management .trustLabel {
font-size: 12px
}
.customer-relationship-management .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.customer-relationship-management .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.customer-relationship-management .logo.dhl {
font-size: 19px
}
.customer-relationship-management .logo.adobe {
font-size: 17px
}
.customer-relationship-management .logo.golden {
font-size: 8px
}
.customer-relationship-management .fl,
.customer-relationship-management .outcomes,
.customer-relationship-management .featureGrid,
.customer-relationship-management .connectedGrid,
.customer-relationship-management .useCases {
grid-template-columns: 1fr
}
.customer-relationship-management .fi {
font-size: 14px
}
.customer-relationship-management .outcome {
padding: 21px
}
.customer-relationship-management .outcome strong {
margin-top: 12px
}
.customer-relationship-management .outcome span {
font-size: 14px
}
.customer-relationship-management .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.customer-relationship-management .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.customer-relationship-management .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.customer-relationship-management .uiSub {
font-size: 9px
}
.customer-relationship-management .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.customer-relationship-management .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.customer-relationship-management .person {
font-size: 9px;
padding: 8px 6px
}
.customer-relationship-management .person .avatar {
display: none
}
.customer-relationship-management .person small {
font-size: 8px
}
.customer-relationship-management .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.customer-relationship-management .slot strong {
font-size: 8px
}
.customer-relationship-management .plannerHead {
font-size: 10px;
padding: 10px
}
.customer-relationship-management .plannerHead .pill {
font-size: 8px
}
.customer-relationship-management .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.customer-relationship-management .pending strong {
font-size: 10px
}
.customer-relationship-management .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.customer-relationship-management .rosterTop .pill {
font-size: 8px
}
.customer-relationship-management .rosterCard {
padding: 11px
}
.customer-relationship-management .rosterNote {
padding: 11px;
font-size: 10px
}
.customer-relationship-management .ruleCard {
padding: 14px
}
.customer-relationship-management .ruleCard strong {
font-size: 15px
}
.customer-relationship-management .workCard {
padding: 10px;
gap: 8px
}
.customer-relationship-management .workCard strong {
font-size: 10px
}
.customer-relationship-management .workCard small {
font-size: 8px
}
.customer-relationship-management .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.customer-relationship-management .modeRow span {
font-size: 8px;
padding: 7px
}
.customer-relationship-management .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.customer-relationship-management .phoneMockInner {
padding: 11px;
min-height: 288px
}
.customer-relationship-management .lookupCard {
padding: 10px
}
.customer-relationship-management .lookupCard strong {
font-size: 10px
}
.customer-relationship-management .lookupCard span {
font-size: 9px
}
.customer-relationship-management .lookupCard .icon2 {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.customer-relationship-management .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.customer-relationship-management .aiMini div {
padding: 16px
}
.customer-relationship-management .aiMini strong {
font-size: 14px
}
.customer-relationship-management .aiMini span {
font-size: 13px
}
.customer-relationship-management .promptBox {
padding: 18px;
border-radius: 17px
}
.customer-relationship-management .prompt {
font-size: 13px;
padding: 13px
}
.customer-relationship-management .promptHead {
font-size: 19px
}
.customer-relationship-management .promptFoot {
font-size: 10px !important
}
.customer-relationship-management .connectedCard {
padding: 22px
}
.customer-relationship-management .connectedCard p,
.customer-relationship-management .featureCard p,
.customer-relationship-management .useCase p {
font-size: 14px
}
.customer-relationship-management .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.customer-relationship-management .integrations {
grid-template-columns: repeat(2, 1fr)
}
.customer-relationship-management .integration:last-child {
grid-column: 1/-1
}
.customer-relationship-management .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.customer-relationship-management .stream>span[aria-hidden] {
display: none
}
.customer-relationship-management .streamStep {
min-height: 24px
}
.customer-relationship-management .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.customer-relationship-management .ratingItem {
border: 0
}
.customer-relationship-management .ratingLead {
margin-bottom: 3px
}
.customer-relationship-management .review p {
font-size: 14px
}
.customer-relationship-management .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.customer-relationship-management .ctaBtns {
width: 100%
}
.customer-relationship-management .ctaBtns .btn {
flex: 1
}
.customer-relationship-management .cta p {
font-size: 14px
}
.customer-relationship-management .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.customer-relationship-management .final h2 {
font-size: 32px
}
.customer-relationship-management .final p {
font-size: 15px
}
.customer-relationship-management .final .ctaBtns {
flex-direction: column
}
.customer-relationship-management .final .btn {
min-width: 0;
width: 100%
}
.customer-relationship-management .faq details {
padding: 16px
}
.customer-relationship-management .faq summary {
font-size: 14px
}
.customer-relationship-management .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.customer-relationship-management h1 {
font-size: 38px
}
.customer-relationship-management h2 {
font-size: 31px
}
.customer-relationship-management .heroVisual,
.customer-relationship-management .assetStage {
height: 520px;
min-height: 520px
}
.customer-relationship-management .assetPhone {
width: 152px;
top: 242px
}
.customer-relationship-management .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.customer-relationship-management .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.customer-relationship-management .lifecycleBody {
padding: 8px;
font-size: 8px
}
.customer-relationship-management .lifecycleBody strong {
font-size: 9px
}
.customer-relationship-management .boardBrand {
font-size: 11px
}
.customer-relationship-management .sampleBadge {
font-size: 8px
}
.customer-relationship-management .miniDates,
.customer-relationship-management .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.customer-relationship-management .miniDates small {
font-size: 6px
}
.customer-relationship-management .miniJob b {
font-size: 6.5px
}
.customer-relationship-management .boardFooter {
padding-right: 135px;
min-height: 45px
}
.customer-relationship-management .mobileLookup {
grid-template-columns: 1fr
}
.customer-relationship-management .phoneMock {
width: 200px;
margin: auto
}
.customer-relationship-management .lookupSide {
grid-template-columns: 1fr
}
.customer-relationship-management .lookupCard {
padding: 13px
}
.customer-relationship-management .lookupCard strong {
font-size: 12px
}
.customer-relationship-management .lookupCard span {
font-size: 11px
}
.customer-relationship-management .plannerHead {
gap: 5px
}
.customer-relationship-management .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.customer-relationship-management .plannerRow {
grid-template-columns: 61px 1fr
}
.customer-relationship-management .uiHeading>span:first-child {
gap: 5px
}
.customer-relationship-management .uiHeading .icon2 {
width: 17px;
height: 17px
}
}
.customer-relationship-management  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.customer-relationship-management #connected-tools.fsmTools *,
.customer-relationship-management #connected-tools.fsmTools *::before,
.customer-relationship-management #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.customer-relationship-management #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.customer-relationship-management #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.customer-relationship-management #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.customer-relationship-management #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.customer-relationship-management #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__step::before,
.customer-relationship-management #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.customer-relationship-management #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.customer-relationship-management #connected-tools.fsmTools {
padding: 52px 0;
}
.customer-relationship-management #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.customer-relationship-management #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.customer-relationship-management #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.customer-relationship-management #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.customer-relationship-management #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card,
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.customer-relationship-management #connected-tools.fsmTools h2 {
font-size: 30px;
}
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.customer-relationship-management #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.customer-relationship-management   .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.customer-relationship-management .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
.customer-relationship-management .assetStage:before {
content: none
}
.customer-relationship-management .salesHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
.customer-relationship-management .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
.customer-relationship-management .ey {
max-width: 100%
}
.customer-relationship-management .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
.customer-relationship-management .uiHeading>span:first-child {
min-width: 0
}
.customer-relationship-management .uiHeading .icon2 {
flex-shrink: 0
}
.customer-relationship-management .salesPanel {
padding: 17px
}
.customer-relationship-management .salesRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.customer-relationship-management .salesRecordHead>span:first-child {
min-width: 0
}
.customer-relationship-management .salesIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
.customer-relationship-management .salesCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
.customer-relationship-management .salesMeta {
display: grid;
gap: 8px
}
.customer-relationship-management .salesMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
.customer-relationship-management .salesMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
.customer-relationship-management .salesMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.customer-relationship-management .salesRows {
padding: 0 14px
}
.customer-relationship-management .salesRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
.customer-relationship-management .salesRow:last-child {
border: 0
}
.customer-relationship-management .salesRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.customer-relationship-management .salesRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
.customer-relationship-management .salesRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
.customer-relationship-management .salesFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
.customer-relationship-management .salesFoot strong {
color: var(--navy)
}
.customer-relationship-management .salesAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
.customer-relationship-management .salesAlert>.icon {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
.customer-relationship-management .salesAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
.customer-relationship-management .salesAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
.customer-relationship-management .salesDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
.customer-relationship-management .salesDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
.customer-relationship-management .salesDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
.customer-relationship-management .salesDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
.customer-relationship-management .salesDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
.customer-relationship-management .salesDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
.customer-relationship-management .salesDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
.customer-relationship-management .salesDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
.customer-relationship-management .salesDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
.customer-relationship-management .salesDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
.customer-relationship-management .salesDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
.customer-relationship-management .salesDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
.customer-relationship-management .salesQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
.customer-relationship-management .salesQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
.customer-relationship-management .salesQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
.customer-relationship-management .salesQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
.customer-relationship-management .salesQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
.customer-relationship-management .salesQueueBar span {
display: block;
height: 100%;
width: var(--sales-bar);
background: var(--brand);
border-radius: 6px
}
.customer-relationship-management .salesQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
.customer-relationship-management .salesTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
.customer-relationship-management .salesTraceHead .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
.customer-relationship-management .salesTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
.customer-relationship-management .salesTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
.customer-relationship-management .salesTraceHead .pill {
margin-left: auto
}
.customer-relationship-management .salesTimeline {
padding: 17px 15px
}
.customer-relationship-management .salesEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
.customer-relationship-management .salesEvent:last-child {
padding-bottom: 0
}
.customer-relationship-management .salesEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.customer-relationship-management .salesEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
.customer-relationship-management .salesEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
.customer-relationship-management .salesEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
.customer-relationship-management .salesEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
.customer-relationship-management .salesEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
.customer-relationship-management .salesNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
.customer-relationship-management .salesNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
.customer-relationship-management .salesSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
.customer-relationship-management .salesSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
.customer-relationship-management .salesSource .icon2 {
color: var(--navy);
margin-bottom: 8px
}
.customer-relationship-management .salesSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.customer-relationship-management .salesSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
.customer-relationship-management .salesConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
.customer-relationship-management .salesConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
.customer-relationship-management .salesHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
.customer-relationship-management .salesHub strong {
display: block;
font-size: 18px
}
.customer-relationship-management .salesHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
.customer-relationship-management .salesHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
.customer-relationship-management .salesHandoff>strong {
font-size: 13px;
color: var(--navy)
}
.customer-relationship-management .salesHandoff>span:not(.pill) {
color: var(--muted)
}
.customer-relationship-management .salesHandoff .salesHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
.customer-relationship-management .salesScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
.customer-relationship-management .salesScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
.customer-relationship-management .salesComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
.customer-relationship-management .salesComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
.customer-relationship-management .salesComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
.customer-relationship-management .salesComparison th,
.customer-relationship-management .salesComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
.customer-relationship-management .salesComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
.customer-relationship-management .salesComparison tbody th {
font-size: 14px;
color: var(--navy)
}
.customer-relationship-management .salesComparison tbody td {
color: var(--muted)
}
.customer-relationship-management .salesComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
.customer-relationship-management .salesNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
.customer-relationship-management .salesNote strong {
color: var(--navy)
}
.customer-relationship-management .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
.customer-relationship-management .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
.customer-relationship-management .heroVisual {
max-width: 480px
}
.customer-relationship-management .salesIdentity {
gap: 12px
}
.customer-relationship-management .salesMeta>div {
padding: 9px 10px
}
.customer-relationship-management .salesMeta strong {
font-size: 11px
}
.customer-relationship-management .salesRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
.customer-relationship-management .salesRows {
padding: 0 11px
}
.customer-relationship-management .salesRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
.customer-relationship-management .salesRow strong {
font-size: 11px
}
.customer-relationship-management .salesRow small {
font-size: 9px
}
.customer-relationship-management .salesRow .pill {
font-size: 8px;
padding: 4px 6px
}
.customer-relationship-management .salesDwell {
padding: 16px
}
.customer-relationship-management .salesDwellMetrics {
gap: 12px
}
.customer-relationship-management .salesDwellMetrics>div+div {
padding-left: 12px
}
.customer-relationship-management .salesDwellMetrics b {
font-size: 32px
}
.customer-relationship-management .salesDwellMetrics span {
font-size: 10px
}
.customer-relationship-management .salesQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
.customer-relationship-management .salesTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
.customer-relationship-management .salesTraceHead strong {
font-size: 12px
}
.customer-relationship-management .salesTraceHead .pill {
font-size: 8px
}
.customer-relationship-management .salesTimeline {
padding: 15px 12px
}
.customer-relationship-management .salesSources {
gap: 8px
}
.customer-relationship-management .salesSource {
padding: 12px
}
.customer-relationship-management .salesHandoff {
padding: 13px;
gap: 10px
}
.customer-relationship-management .salesHandoff>strong {
font-size: 12px
}
.customer-relationship-management .salesComparison,
.customer-relationship-management .salesComparison tbody,
.customer-relationship-management .salesComparison tr,
.customer-relationship-management .salesComparison th,
.customer-relationship-management .salesComparison td {
display: block;
width: 100%
}
.customer-relationship-management .salesComparison colgroup {
display: none
}
.customer-relationship-management .salesComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
.customer-relationship-management .salesComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
.customer-relationship-management .salesComparison th,
.customer-relationship-management .salesComparison td {
padding: 10px 16px
}
.customer-relationship-management .salesComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
.customer-relationship-management .salesComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
.customer-relationship-management .salesComparison tbody tr+tr>* {
border: 0
}
.customer-relationship-management .salesComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
.customer-relationship-management .salesComparison tbody td:last-child {
padding-bottom: 18px
}
.customer-relationship-management .salesNote {
padding: 17px
}
}
@media(max-width:360px) {
.customer-relationship-management .salesIdentity {
grid-template-columns: 1fr
}
.customer-relationship-management .salesCarrierSvg {
max-width: 170px
}
.customer-relationship-management .salesMeta {
grid-template-columns: 1fr 1fr
}
.customer-relationship-management .salesMeta>div:last-child {
grid-column: 1/-1
}
.customer-relationship-management .salesRow {
grid-template-columns: 33px minmax(0, 1fr)
}
.customer-relationship-management .salesRow .pill {
grid-column: 2;
justify-self: start
}
.customer-relationship-management .salesDwellLegend {
font-size: 8px
}
.customer-relationship-management .salesQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
.customer-relationship-management .salesTraceHead .pill {
margin-left: 47px
}
.customer-relationship-management .salesHandoff {
grid-template-columns: 1fr
}
.customer-relationship-management .salesHandoff .pill {
justify-self: start
}
} @media screen { .ey,
.ey * {
color: #0B0B0B !important;
-webkit-text-fill-color: currentColor !important;
}
.faq summary,
.faq summary * {
color: #063B5C !important;
-webkit-text-fill-color: currentColor !important;
}
.faq summary::marker {
color: #063B5C !important;
}
}
.customer-relationship-management  .crmHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 620 / 555
}
.customer-relationship-management .crmProfile {
padding: 17px
}
.customer-relationship-management .crmCompany {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
margin-bottom: 14px
}
.customer-relationship-management .crmCompany .avatar {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 16px;
border-radius: 13px
}
.customer-relationship-management .crmCompany strong {
display: block;
font-size: 18px;
line-height: 1.35;
color: var(--navy)
}
.customer-relationship-management .crmCompany small {
display: block;
margin-top: 4px;
font-size: 10px;
color: var(--muted)
}
.customer-relationship-management .crmFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px
}
.customer-relationship-management .crmFact {
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px;
background: var(--sky2);
min-width: 0
}
.customer-relationship-management .crmFact small {
display: block;
font-size: 9px;
letter-spacing: .025em;
color: var(--muted);
margin-bottom: 3px
}
.customer-relationship-management .crmFact strong {
font-size: 12px;
line-height: 1.55;
color: var(--navy);
display: block;
overflow-wrap: anywhere
}
.customer-relationship-management .crmImport {
display: flex;
gap: 10px;
align-items: center;
margin-top: 12px;
border: 1px dashed #B2D4E6;
border-radius: 10px;
padding: 13px;
background: #fff;
color: var(--navy)
}
.customer-relationship-management .crmImport .icon2 {
flex-shrink: 0;
color: var(--navy)
}
.customer-relationship-management .crmImport strong {
display: block;
font-size: 12px
}
.customer-relationship-management .crmImport span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 2px;
line-height: 1.55
}
.customer-relationship-management .crmRecordList {
padding: 0 15px
}
.customer-relationship-management .crmRecordRow {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--line)
}
.customer-relationship-management .crmRecordRow:last-child {
border-bottom: 0
}
.customer-relationship-management .crmRecordIcon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky2);
color: var(--navy)
}
.customer-relationship-management .crmRecordIcon .icon2 {
width: 19px;
height: 19px
}
.customer-relationship-management .crmRecordRow strong {
display: block;
font-size: 12px;
color: var(--ink)
}
.customer-relationship-management .crmRecordRow small {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 2px
}
.customer-relationship-management .crmMobileGrid {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
gap: 16px;
align-items: center
}
.customer-relationship-management .crmPhone {
max-width: 215px;
width: 100%;
margin: auto;
background: #132B3C;
border: 1px solid #0A263A;
border-radius: 25px;
padding: 7px
}
.customer-relationship-management .crmPhoneScreen {
padding: 12px;
border-radius: 19px;
background: #fff;
min-height: 300px
}
.customer-relationship-management .crmNotch {
width: 42px;
height: 4px;
margin: 0 auto 14px;
border-radius: 4px;
background: #476176
}
.customer-relationship-management .crmMobileTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.4;
color: var(--navy);
margin-top: 12px
}
.customer-relationship-management .crmMobileSub {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin: 4px 0 12px
}
.customer-relationship-management .crmMobileNote {
padding: 11px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky2);
margin-top: 9px
}
.customer-relationship-management .crmMobileNote small {
font-size: 8px;
color: var(--muted);
display: block;
margin-bottom: 5px
}
.customer-relationship-management .crmMobileNote strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: var(--ink)
}
.customer-relationship-management .crmMobileNote span {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 4px;
line-height: 1.5
}
.customer-relationship-management .crmMobileStatus {
padding: 8px;
border-radius: 7px;
background: var(--greenbg);
color: #116746;
font-size: 9px;
text-align: center;
line-height: 1.5;
font-weight: 750;
margin-top: 12px
}
.customer-relationship-management .crmTaskSteps {
display: grid;
gap: 10px
}
.customer-relationship-management .crmTaskStep {
padding: 13px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff
}
.customer-relationship-management .crmTaskStep strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.45
}
.customer-relationship-management .crmTaskStep span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 4px
}
.customer-relationship-management .crmPortalHead {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: var(--sky2)
}
.customer-relationship-management .crmPortalHead i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #BCD0DD
}
.customer-relationship-management .crmPortalHead span {
font-size: 10px;
font-weight: 750;
color: var(--navy);
margin-left: 7px
}
.customer-relationship-management .crmPortalBody {
padding: 17px
}
.customer-relationship-management .crmPortalTitle {
font-size: 20px;
font-weight: 850;
letter-spacing: -.025em;
line-height: 1.35;
color: var(--navy)
}
.customer-relationship-management .crmPortalSub {
font-size: 11px;
color: var(--muted);
line-height: 1.55;
margin: 5px 0 16px
}
.customer-relationship-management .crmPortalJobs {
display: grid;
gap: 10px
}
.customer-relationship-management .crmPortalJob {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
align-items: start;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px
}
.customer-relationship-management .crmPortalJob strong {
display: block;
color: var(--ink);
font-size: 12px;
line-height: 1.5
}
.customer-relationship-management .crmPortalJob small {
display: block;
color: var(--muted);
font-size: 10px;
line-height: 1.55;
margin-top: 3px
}
.customer-relationship-management .crmPortalFooter {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 13px;
padding-top: 12px;
border-top: 1px solid var(--line)
}
.customer-relationship-management .crmReportSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px
}
.customer-relationship-management .crmReportSummary>div {
border: 1px solid #333;
background: #1B1B1B;
border-radius: 11px;
padding: 13px
}
.customer-relationship-management .crmReportSummary strong {
display: block;
font-size: 12px;
color: var(--yellow);
line-height: 1.5
}
.customer-relationship-management .crmReportSummary span {
display: block;
font-size: 11px;
color: #CEDBE4;
line-height: 1.6;
margin-top: 5px
}
@media(max-width:640px) {
.customer-relationship-management .crmProfile,
.customer-relationship-management .crmPortalBody {
padding: 13px
}
.customer-relationship-management .crmCompany strong {
font-size: 16px
}
.customer-relationship-management .crmFact {
padding: 10px
}
.customer-relationship-management .crmFact strong {
font-size: 11px
}
.customer-relationship-management .crmRecordList {
padding: 0 11px
}
.customer-relationship-management .crmRecordRow {
gap: 8px;
grid-template-columns: 30px minmax(0, 1fr) auto
}
.customer-relationship-management .crmRecordIcon {
width: 30px;
height: 30px
}
.customer-relationship-management .crmRecordRow strong {
font-size: 11px
}
.customer-relationship-management .crmRecordRow small {
font-size: 9px
}
.customer-relationship-management .crmRecordRow .pill {
font-size: 8px;
padding: 4px 6px
}
.customer-relationship-management .crmMobileGrid {
gap: 11px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}
.customer-relationship-management .crmTaskStep {
padding: 11px
}
.customer-relationship-management .crmTaskStep strong {
font-size: 11px
}
.customer-relationship-management .crmPhoneScreen {
padding: 10px;
min-height: 296px
}
.customer-relationship-management .crmPortalJob {
padding: 11px
}
}
@media(max-width:380px) {
.customer-relationship-management .crmMobileGrid {
grid-template-columns: 1fr
}
.customer-relationship-management .crmPhone {
max-width: 220px
}
.customer-relationship-management .crmTaskSteps {
grid-template-columns: 1fr
}
.customer-relationship-management .crmRecordRow {
grid-template-columns: 30px minmax(0, 1fr)
}
.customer-relationship-management .crmRecordRow>.pill {
grid-column: 2;
justify-self: start
}
.customer-relationship-management .crmPortalJob {
grid-template-columns: 1fr
}
.customer-relationship-management .crmPortalJob>.pill {
justify-self: start
}
}  .linked-with-inventory .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.linked-with-inventory .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.linked-with-inventory .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.linked-with-inventory .btn:hover {
transform: translateY(-2px)
}
.linked-with-inventory .btn.black {
background: #0b0b0b;
color: #fff
}
.linked-with-inventory .btn.black:hover {
background: #292929
}
.linked-with-inventory .btn.yellow {
background: var(--yellow);
color: #000
}
.linked-with-inventory .btn.yellow:hover {
background: #FFD454
}
.linked-with-inventory .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.linked-with-inventory .btn .icon2 {
width: 17px;
height: 17px
}
.linked-with-inventory a:focus-visible,
.linked-with-inventory summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.linked-with-inventory .dark a:focus-visible,
.linked-with-inventory .final a:focus-visible {
outline-color: var(--yellow)
}
.linked-with-inventory .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.linked-with-inventory .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.linked-with-inventory .soft {
background: var(--sky2)
}
.linked-with-inventory .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.linked-with-inventory .dark h2,
.linked-with-inventory .dark h3 {
color: #fff
}
.linked-with-inventory .dark p {
color: #D6D6D6
}
.linked-with-inventory .dark .ey {
background: var(--yellow)
}
.linked-with-inventory .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.linked-with-inventory .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.linked-with-inventory .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.linked-with-inventory .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.linked-with-inventory .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.linked-with-inventory .textLink .icon2 {
width: 16px;
height: 16px
}
.linked-with-inventory .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.linked-with-inventory .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.linked-with-inventory .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.linked-with-inventory .skipLink:focus {
top: 12px
}
.linked-with-inventory .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.linked-with-inventory .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.linked-with-inventory .heroGrid>*,
.linked-with-inventory .feature>*,
.linked-with-inventory .aiGrid>* {
min-width: 0
}
.linked-with-inventory .hero h1 {
max-width: 580px
}
.linked-with-inventory .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.linked-with-inventory .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.linked-with-inventory .heroVisual {
min-height: 555px;
position: relative
}
.linked-with-inventory .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.linked-with-inventory .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.linked-with-inventory .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.linked-with-inventory .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.linked-with-inventory .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.linked-with-inventory .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.linked-with-inventory .brandTile .icon2 {
width: 17px;
height: 17px
}
.linked-with-inventory .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.linked-with-inventory .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.linked-with-inventory .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.linked-with-inventory .viewPills span {
padding: 4px 7px
}
.linked-with-inventory .viewPills .active {
background: var(--navy);
color: #fff
}
.linked-with-inventory .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.linked-with-inventory .miniDates,
.linked-with-inventory .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.linked-with-inventory .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.linked-with-inventory .miniDates>div:last-child {
border: 0
}
.linked-with-inventory .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.linked-with-inventory .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.linked-with-inventory .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.linked-with-inventory .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.linked-with-inventory .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.linked-with-inventory .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.linked-with-inventory .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.linked-with-inventory .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.linked-with-inventory .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.linked-with-inventory .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.linked-with-inventory .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.linked-with-inventory .boardFooter strong {
color: var(--navy)
}
.linked-with-inventory .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.linked-with-inventory .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.linked-with-inventory .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.linked-with-inventory .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.linked-with-inventory .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.linked-with-inventory .phoneHead small {
font-size: 9px;
color: #50697A
}
.linked-with-inventory .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.linked-with-inventory .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.linked-with-inventory .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.linked-with-inventory .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.linked-with-inventory .phoneJob.current {
background: var(--sky2)
}
.linked-with-inventory .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.linked-with-inventory .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.linked-with-inventory .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.linked-with-inventory .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.linked-with-inventory .lifecycleHead .icon2 {
color: var(--yellow);
width: 17px;
height: 17px
}
.linked-with-inventory .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.linked-with-inventory .lifecycleBody strong {
font-size: 12px
}
.linked-with-inventory .lifecycleBody span {
color: #CEDBE4
}
.linked-with-inventory .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.linked-with-inventory .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
}
.linked-with-inventory .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.linked-with-inventory .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.linked-with-inventory .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.linked-with-inventory .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.linked-with-inventory .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.linked-with-inventory .logo.adobe {
font-size: 20px
}
.linked-with-inventory .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
}
.linked-with-inventory .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.linked-with-inventory .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.linked-with-inventory .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.linked-with-inventory .outcome:nth-child(2):before {
background: var(--yellow)
}
.linked-with-inventory .outcome:nth-child(3):before {
background: var(--green)
}
.linked-with-inventory .outcome:nth-child(4):before {
background: var(--purple)
}
.linked-with-inventory .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.linked-with-inventory .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.linked-with-inventory .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
}
.linked-with-inventory .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.linked-with-inventory .feature.reverse .visual {
order: -1
}
.linked-with-inventory .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.linked-with-inventory .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.linked-with-inventory .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.linked-with-inventory .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.linked-with-inventory .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.linked-with-inventory .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.linked-with-inventory .visual>* {
position: relative;
z-index: 2
}
.linked-with-inventory .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.linked-with-inventory .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.linked-with-inventory .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.linked-with-inventory .uiHeading .icon2 {
width: 19px;
height: 19px
}
.linked-with-inventory .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.linked-with-inventory .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.linked-with-inventory .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.linked-with-inventory .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.linked-with-inventory .pill.green {
background: var(--greenbg);
color: #116746
}
.linked-with-inventory .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.linked-with-inventory .pill.gray {
background: #F0F3F5;
color: #586C79
}
.linked-with-inventory .pill.purple {
background: #F1EDFC;
color: #5F48A5
}
.linked-with-inventory .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.linked-with-inventory .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.linked-with-inventory .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.linked-with-inventory .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.linked-with-inventory .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .plannerRow:last-child {
border-bottom: 0
}
.linked-with-inventory .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.linked-with-inventory .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.linked-with-inventory .avatar.green {
background: var(--greenbg);
color: #116746
}
.linked-with-inventory .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.linked-with-inventory .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.linked-with-inventory .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.linked-with-inventory .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.linked-with-inventory .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.linked-with-inventory .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.linked-with-inventory .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.linked-with-inventory .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.linked-with-inventory .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.linked-with-inventory .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.linked-with-inventory .pending .icon2 {
width: 18px;
height: 18px;
color: var(--navy)
}
.linked-with-inventory .pending strong {
font-size: 11px;
color: var(--navy)
}
.linked-with-inventory .pending .pill {
margin-left: auto
}
.linked-with-inventory .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.linked-with-inventory .legend span {
display: flex;
align-items: center;
gap: 4px
}
.linked-with-inventory .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.linked-with-inventory .legend .green i {
background: var(--green)
}
.linked-with-inventory .legend .yellow i {
background: #D7A200
}
.linked-with-inventory .roster {
display: grid;
gap: 10px
}
.linked-with-inventory .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.linked-with-inventory .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.linked-with-inventory .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.linked-with-inventory .rosterName {
flex: 1;
min-width: 0
}
.linked-with-inventory .rosterName strong {
display: block;
font-size: 11px
}
.linked-with-inventory .rosterName small {
color: var(--muted);
font-size: 9px
}
.linked-with-inventory .rosterTop .pill {
font-size: 8px
}
.linked-with-inventory .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.linked-with-inventory .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.linked-with-inventory .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.linked-with-inventory .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.linked-with-inventory .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.linked-with-inventory .rosterNote .icon2 {
width: 19px;
height: 19px
}
.linked-with-inventory .rosterNote strong {
display: block;
margin-bottom: 3px
}
.linked-with-inventory .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.linked-with-inventory .ruleCard .uiLabel {
color: #9CBED1
}
.linked-with-inventory .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.linked-with-inventory .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.linked-with-inventory .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.linked-with-inventory .workCards {
display: grid;
gap: 9px
}
.linked-with-inventory .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.linked-with-inventory .workCard strong {
display: block;
font-size: 11px
}
.linked-with-inventory .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.linked-with-inventory .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.linked-with-inventory .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.linked-with-inventory .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.linked-with-inventory .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.linked-with-inventory .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.linked-with-inventory .modeRow .icon2 {
width: 14px;
height: 14px
}
.linked-with-inventory .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.linked-with-inventory .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.linked-with-inventory .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.linked-with-inventory .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.linked-with-inventory .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.linked-with-inventory .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.linked-with-inventory .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.linked-with-inventory .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.linked-with-inventory .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.linked-with-inventory .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.linked-with-inventory .lookupSide {
display: grid;
gap: 11px
}
.linked-with-inventory .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.linked-with-inventory .lookupCard .icon2 {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.linked-with-inventory .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.linked-with-inventory .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.linked-with-inventory .lookupCard.done {
border-left: 3px solid var(--green)
}
.linked-with-inventory .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.linked-with-inventory .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.linked-with-inventory .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.linked-with-inventory .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.linked-with-inventory .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.linked-with-inventory .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.linked-with-inventory .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.linked-with-inventory .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.linked-with-inventory .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.linked-with-inventory .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
}
.linked-with-inventory .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.linked-with-inventory .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.linked-with-inventory .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.linked-with-inventory .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.linked-with-inventory .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.linked-with-inventory .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.linked-with-inventory .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
}
.linked-with-inventory .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.linked-with-inventory .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.linked-with-inventory .featureCard:hover {
transform: translateY(-3px)
}
.linked-with-inventory .featureIcon,
.linked-with-inventory .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.linked-with-inventory .featureIcon .icon2,
.linked-with-inventory .useIcon .icon2 {
width: 22px;
height: 22px
}
.linked-with-inventory .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.linked-with-inventory .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
}
.linked-with-inventory .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.linked-with-inventory .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.linked-with-inventory .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.linked-with-inventory .integration:hover {
background: var(--sky2)
}
.linked-with-inventory .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.linked-with-inventory .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.linked-with-inventory .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.linked-with-inventory .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.linked-with-inventory .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.linked-with-inventory .stream>span[aria-hidden] {
color: #86B2C9
}
.linked-with-inventory .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.linked-with-inventory .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.linked-with-inventory .useCase h3 {
font-size: 20px
}
.linked-with-inventory .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.linked-with-inventory .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.linked-with-inventory .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.linked-with-inventory .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.linked-with-inventory .review h3 {
font-size: 22px
}
.linked-with-inventory .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.linked-with-inventory .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.linked-with-inventory .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.linked-with-inventory .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.linked-with-inventory .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.linked-with-inventory .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.linked-with-inventory .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.linked-with-inventory .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.linked-with-inventory .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
}
.linked-with-inventory .faq {
max-width: 900px
}
.linked-with-inventory .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.linked-with-inventory .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.linked-with-inventory .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.linked-with-inventory .faq summary::marker {
color: var(--navy)
}
.linked-with-inventory .faq details[open] {
border-color: #A9D3E7
}
.linked-with-inventory .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
}
.linked-with-inventory .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.linked-with-inventory .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.linked-with-inventory .cta h3 {
font-size: 19px
}
.linked-with-inventory .cta.darkCta h3 {
color: #fff
}
.linked-with-inventory .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.linked-with-inventory .cta.darkCta p {
color: #D1D1D1
}
.linked-with-inventory .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.linked-with-inventory .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.linked-with-inventory .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.linked-with-inventory .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.linked-with-inventory .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.linked-with-inventory .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.linked-with-inventory .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.heroGrid {
gap: 28px
}
h1 {
font-size: 56px
}
.hero .lead {
font-size: 17px
}
.assetPhone {
width: 168px;
top: 235px
}
.lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.scheduleBoard {
width: 96%;
left: 0
}
.miniJob {
padding: 4px
}
.heroVisual,
.assetStage {
min-height: 555px
}
.mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.visual {
padding: 17px
}
.plannerTicks,
.plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.plannerRow {
grid-template-columns: 75px 1fr
}
.person {
font-size: 9px;
padding: 10px 5px
}
.person .avatar {
display: none
}
}
@media(max-width:960px) {
.heroGrid,
.feature,
.aiGrid,
.final {
grid-template-columns: 1fr
}
.heroGrid {
gap: 36px
}
.hero h1 {
max-width: 760px
}
.hero .lead {
max-width: 750px
}
.heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.assetStage {
margin: auto
}
.feature.reverse .visual {
order: 0
}
.feature {
gap: 30px
}
.feature>div:first-child {
max-width: 800px
}
.outcomes,
.featureGrid,
.connectedGrid,
.useCases {
grid-template-columns: repeat(2, 1fr)
}
.logos {
grid-template-columns: repeat(3, 1fr)
}
.integrations {
grid-template-columns: repeat(3, 1fr)
}
.reviews {
grid-template-columns: 1fr
}
.ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.ratingItem:nth-child(2) {
border: 0
}
.final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.final .btn {
min-width: 195px
}
.visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.aiGrid {
gap: 30px
}
.aiMini {
max-width: 760px
}
.promptBox {
width: 100%
}
}
@media(max-width:640px) {
.wrap {
width: calc(100% - 24px)
}
section {
padding: 56px 0
}
.hero {
padding: 32px 0 42px
}
h1 {
font-size: 42px
}
h2 {
font-size: 34px
}
.lead {
font-size: 17px
}
.sectionHead p {
font-size: 16px
}
.sectionHead {
margin-bottom: 28px
}
.ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.heroGrid {
gap: 24px
}
.hero .actions {
gap: 8px
}
.hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.micro {
font-size: 11px
}
.heroPills {
gap: 6px
}
.heroPills span {
font-size: 9px
}
.breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.heroVisual {
min-height: 525px
}
.assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.assetStage:before {
inset: 38px 0 28px 10px
}
.scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.boardHeader {
padding: 12px
}
.boardBrand {
font-size: 12px
}
.boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.miniCalendar {
margin: 0 10px 12px
}
.miniDates,
.miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.miniPerson {
font-size: 8px;
padding: 9px 5px
}
.miniPerson small {
font-size: 7px
}
.miniCell {
padding: 4px 3px
}
.miniDates>div {
font-size: 8px
}
.miniDates small {
font-size: 7px
}
.miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.miniJob b {
font-size: 7px
}
.miniRow {
min-height: 57px
}
.miniJob {
min-height: 48px
}
.boardFooter {
font-size: 9px;
padding: 9px 12px
}
.assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.phoneScreen {
border-radius: 19px;
min-height: 274px
}
.phoneHead strong {
font-size: 11px
}
.phoneHead small {
font-size: 8px
}
.phoneAgenda {
padding: 8px;
gap: 6px
}
.phoneJob {
padding: 7px;
font-size: 8px
}
.phoneJob strong {
font-size: 9px
}
.phoneJob small {
font-size: 7px
}
.phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.lifecycleHead .icon2 {
width: 15px;
height: 15px
}
.lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.lifecycleBody strong {
font-size: 10px
}
.assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.diagramCaption {
font-size: 9px
}
.trust {
padding: 23px 0
}
.trustLabel {
font-size: 12px
}
.logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.logo.dhl {
font-size: 19px
}
.logo.adobe {
font-size: 17px
}
.logo.golden {
font-size: 8px
}
.fl,
.outcomes,
.featureGrid,
.connectedGrid,
.useCases {
grid-template-columns: 1fr
}
.fi {
font-size: 14px
}
.outcome {
padding: 21px
}
.outcome strong {
margin-top: 12px
}
.outcome span {
font-size: 14px
}
.visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.uiSub {
font-size: 9px
}
.plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.person {
font-size: 9px;
padding: 8px 6px
}
.person .avatar {
display: none
}
.person small {
font-size: 8px
}
.slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.slot strong {
font-size: 8px
}
.plannerHead {
font-size: 10px;
padding: 10px
}
.plannerHead .pill {
font-size: 8px
}
.pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.pending strong {
font-size: 10px
}
.pending .pill {
font-size: 8px;
padding: 4px 6px
}
.rosterTop .pill {
font-size: 8px
}
.rosterCard {
padding: 11px
}
.rosterNote {
padding: 11px;
font-size: 10px
}
.ruleCard {
padding: 14px
}
.ruleCard strong {
font-size: 15px
}
.workCard {
padding: 10px;
gap: 8px
}
.workCard strong {
font-size: 10px
}
.workCard small {
font-size: 8px
}
.workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.modeRow span {
font-size: 8px;
padding: 7px
}
.mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.phoneMockInner {
padding: 11px;
min-height: 288px
}
.lookupCard {
padding: 10px
}
.lookupCard strong {
font-size: 10px
}
.lookupCard span {
font-size: 9px
}
.lookupCard .icon2 {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.aiMini div {
padding: 16px
}
.aiMini strong {
font-size: 14px
}
.aiMini span {
font-size: 13px
}
.promptBox {
padding: 18px;
border-radius: 17px
}
.prompt {
font-size: 13px;
padding: 13px
}
.promptHead {
font-size: 19px
}
.promptFoot {
font-size: 10px !important
}
.connectedCard {
padding: 22px
}
.connectedCard p,
.featureCard p,
.useCase p {
font-size: 14px
}
.connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.integrations {
grid-template-columns: repeat(2, 1fr)
}
.integration:last-child {
grid-column: 1/-1
}
.stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.stream>span[aria-hidden] {
display: none
}
.streamStep {
min-height: 24px
}
.ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.ratingItem {
border: 0
}
.ratingLead {
margin-bottom: 3px
}
.review p {
font-size: 14px
}
.cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.ctaBtns {
width: 100%
}
.ctaBtns .btn {
flex: 1
}
.cta p {
font-size: 14px
}
.final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.final h2 {
font-size: 32px
}
.final p {
font-size: 15px
}
.final .ctaBtns {
flex-direction: column
}
.final .btn {
min-width: 0;
width: 100%
}
.faq details {
padding: 16px
}
.faq summary {
font-size: 14px
}
.faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
h1 {
font-size: 38px
}
h2 {
font-size: 31px
}
.heroVisual,
.assetStage {
height: 520px;
min-height: 520px
}
.assetPhone {
width: 152px;
top: 242px
}
.lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.lifecycleBody {
padding: 8px;
font-size: 8px
}
.lifecycleBody strong {
font-size: 9px
}
.boardBrand {
font-size: 11px
}
.sampleBadge {
font-size: 8px
}
.miniDates,
.miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.miniDates small {
font-size: 6px
}
.miniJob b {
font-size: 6.5px
}
.boardFooter {
padding-right: 135px;
min-height: 45px
}
.mobileLookup {
grid-template-columns: 1fr
}
.phoneMock {
width: 200px;
margin: auto
}
.lookupSide {
grid-template-columns: 1fr
}
.lookupCard {
padding: 13px
}
.lookupCard strong {
font-size: 12px
}
.lookupCard span {
font-size: 11px
}
.plannerHead {
gap: 5px
}
.plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.plannerRow {
grid-template-columns: 61px 1fr
}
.uiHeading>span:first-child {
gap: 5px
}
.uiHeading .icon2 {
width: 17px;
height: 17px
}
}
.linked-with-inventory  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.linked-with-inventory #connected-tools.fsmTools *,
.linked-with-inventory #connected-tools.fsmTools *::before,
.linked-with-inventory #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.linked-with-inventory #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.linked-with-inventory #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.linked-with-inventory #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.linked-with-inventory #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.linked-with-inventory #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__step::before,
.linked-with-inventory #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.linked-with-inventory #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.linked-with-inventory #connected-tools.fsmTools {
padding: 52px 0;
}
.linked-with-inventory #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.linked-with-inventory #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.linked-with-inventory #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.linked-with-inventory #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.linked-with-inventory #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card,
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.linked-with-inventory #connected-tools.fsmTools h2 {
font-size: 30px;
}
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.linked-with-inventory #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}
.linked-with-inventory   .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.linked-with-inventory .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
.linked-with-inventory .assetStage:before {
content: none
}
.linked-with-inventory .salesHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
.linked-with-inventory .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
.linked-with-inventory .ey {
max-width: 100%
}
.linked-with-inventory .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
.linked-with-inventory .uiHeading>span:first-child {
min-width: 0
}
.linked-with-inventory .uiHeading .icon2 {
flex-shrink: 0
}
.linked-with-inventory .salesPanel {
padding: 17px
}
.linked-with-inventory .salesRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.linked-with-inventory .salesRecordHead>span:first-child {
min-width: 0
}
.linked-with-inventory .salesIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
.linked-with-inventory .salesCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
.linked-with-inventory .salesMeta {
display: grid;
gap: 8px
}
.linked-with-inventory .salesMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
.linked-with-inventory .salesMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
.linked-with-inventory .salesMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.linked-with-inventory .salesRows {
padding: 0 14px
}
.linked-with-inventory .salesRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .salesRow:last-child {
border: 0
}
.linked-with-inventory .salesRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.linked-with-inventory .salesRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
.linked-with-inventory .salesRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
.linked-with-inventory .salesFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
.linked-with-inventory .salesFoot strong {
color: var(--navy)
}
.linked-with-inventory .salesAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
.linked-with-inventory .salesAlert>.icon {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
.linked-with-inventory .salesAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
.linked-with-inventory .salesAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
.linked-with-inventory .salesDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
.linked-with-inventory .salesDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
.linked-with-inventory .salesDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
.linked-with-inventory .salesDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
.linked-with-inventory .salesDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
.linked-with-inventory .salesDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
.linked-with-inventory .salesDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
.linked-with-inventory .salesDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
.linked-with-inventory .salesDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
.linked-with-inventory .salesDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
.linked-with-inventory .salesDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
.linked-with-inventory .salesDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
.linked-with-inventory .salesQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
.linked-with-inventory .salesQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
.linked-with-inventory .salesQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
.linked-with-inventory .salesQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
.linked-with-inventory .salesQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
.linked-with-inventory .salesQueueBar span {
display: block;
height: 100%;
width: var(--sales-bar);
background: var(--brand);
border-radius: 6px
}
.linked-with-inventory .salesQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
.linked-with-inventory .salesTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .salesTraceHead .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
.linked-with-inventory .salesTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
.linked-with-inventory .salesTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
.linked-with-inventory .salesTraceHead .pill {
margin-left: auto
}
.linked-with-inventory .salesTimeline {
padding: 17px 15px
}
.linked-with-inventory .salesEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
.linked-with-inventory .salesEvent:last-child {
padding-bottom: 0
}
.linked-with-inventory .salesEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.linked-with-inventory .salesEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
.linked-with-inventory .salesEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
.linked-with-inventory .salesEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
.linked-with-inventory .salesEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
.linked-with-inventory .salesEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
.linked-with-inventory .salesNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
.linked-with-inventory .salesNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
.linked-with-inventory .salesSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
.linked-with-inventory .salesSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
.linked-with-inventory .salesSource .icon2 {
color: var(--navy);
margin-bottom: 8px
}
.linked-with-inventory .salesSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.linked-with-inventory .salesSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
.linked-with-inventory .salesConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
.linked-with-inventory .salesConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
.linked-with-inventory .salesHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
.linked-with-inventory .salesHub strong {
display: block;
font-size: 18px
}
.linked-with-inventory .salesHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
.linked-with-inventory .salesHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
.linked-with-inventory .salesHandoff>strong {
font-size: 13px;
color: var(--navy)
}
.linked-with-inventory .salesHandoff>span:not(.pill) {
color: var(--muted)
}
.linked-with-inventory .salesHandoff .salesHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
.linked-with-inventory .salesScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
.linked-with-inventory .salesScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
.linked-with-inventory .salesComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
.linked-with-inventory .salesComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
.linked-with-inventory .salesComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .salesComparison th,
.linked-with-inventory .salesComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
.linked-with-inventory .salesComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .salesComparison tbody th {
font-size: 14px;
color: var(--navy)
}
.linked-with-inventory .salesComparison tbody td {
color: var(--muted)
}
.linked-with-inventory .salesComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
.linked-with-inventory .salesNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
.linked-with-inventory .salesNote strong {
color: var(--navy)
}
.linked-with-inventory .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
.heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
.heroVisual {
max-width: 480px
}
.salesIdentity {
gap: 12px
}
.salesMeta>div {
padding: 9px 10px
}
.salesMeta strong {
font-size: 11px
}
.salesRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
.salesRows {
padding: 0 11px
}
.salesRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
.salesRow strong {
font-size: 11px
}
.salesRow small {
font-size: 9px
}
.salesRow .pill {
font-size: 8px;
padding: 4px 6px
}
.salesDwell {
padding: 16px
}
.salesDwellMetrics {
gap: 12px
}
.salesDwellMetrics>div+div {
padding-left: 12px
}
.salesDwellMetrics b {
font-size: 32px
}
.salesDwellMetrics span {
font-size: 10px
}
.salesQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
.salesTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
.salesTraceHead strong {
font-size: 12px
}
.salesTraceHead .pill {
font-size: 8px
}
.salesTimeline {
padding: 15px 12px
}
.salesSources {
gap: 8px
}
.salesSource {
padding: 12px
}
.salesHandoff {
padding: 13px;
gap: 10px
}
.salesHandoff>strong {
font-size: 12px
}
.salesComparison,
.salesComparison tbody,
.salesComparison tr,
.salesComparison th,
.salesComparison td {
display: block;
width: 100%
}
.salesComparison colgroup {
display: none
}
.salesComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
.salesComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
.salesComparison th,
.salesComparison td {
padding: 10px 16px
}
.salesComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
.salesComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
.salesComparison tbody tr+tr>* {
border: 0
}
.salesComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
.salesComparison tbody td:last-child {
padding-bottom: 18px
}
.salesNote {
padding: 17px
}
}
@media(max-width:360px) {
.salesIdentity {
grid-template-columns: 1fr
}
.salesCarrierSvg {
max-width: 170px
}
.salesMeta {
grid-template-columns: 1fr 1fr
}
.salesMeta>div:last-child {
grid-column: 1/-1
}
.salesRow {
grid-template-columns: 33px minmax(0, 1fr)
}
.salesRow .pill {
grid-column: 2;
justify-self: start
}
.salesDwellLegend {
font-size: 8px
}
.salesQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
.salesTraceHead .pill {
margin-left: 47px
}
.salesHandoff {
grid-template-columns: 1fr
}
.salesHandoff .pill {
justify-self: start
}
} @media screen { .ey,
.ey * {
color: #0B0B0B !important;
-webkit-text-fill-color: currentColor !important;
}
.faq summary,
.faq summary * {
color: #063B5C !important;
-webkit-text-fill-color: currentColor !important;
}
.faq summary::marker {
color: #063B5C !important;
}
}
.linked-with-inventory  .crmHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 620 / 555
}
.linked-with-inventory .crmProfile {
padding: 17px
}
.linked-with-inventory .crmCompany {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
margin-bottom: 14px
}
.linked-with-inventory .crmCompany .avatar {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 16px;
border-radius: 13px
}
.linked-with-inventory .crmCompany strong {
display: block;
font-size: 18px;
line-height: 1.35;
color: var(--navy)
}
.linked-with-inventory .crmCompany small {
display: block;
margin-top: 4px;
font-size: 10px;
color: var(--muted)
}
.linked-with-inventory .crmFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px
}
.linked-with-inventory .crmFact {
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px;
background: var(--sky2);
min-width: 0
}
.linked-with-inventory .crmFact small {
display: block;
font-size: 9px;
letter-spacing: .025em;
color: var(--muted);
margin-bottom: 3px
}
.linked-with-inventory .crmFact strong {
font-size: 12px;
line-height: 1.55;
color: var(--navy);
display: block;
overflow-wrap: anywhere
}
.linked-with-inventory .crmImport {
display: flex;
gap: 10px;
align-items: center;
margin-top: 12px;
border: 1px dashed #B2D4E6;
border-radius: 10px;
padding: 13px;
background: #fff;
color: var(--navy)
}
.linked-with-inventory .crmImport .icon2 {
flex-shrink: 0;
color: var(--navy)
}
.linked-with-inventory .crmImport strong {
display: block;
font-size: 12px
}
.linked-with-inventory .crmImport span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 2px;
line-height: 1.55
}
.linked-with-inventory .crmRecordList {
padding: 0 15px
}
.linked-with-inventory .crmRecordRow {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .crmRecordRow:last-child {
border-bottom: 0
}
.linked-with-inventory .crmRecordIcon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky2);
color: var(--navy)
}
.linked-with-inventory .crmRecordIcon .icon2 {
width: 19px;
height: 19px
}
.linked-with-inventory .crmRecordRow strong {
display: block;
font-size: 12px;
color: var(--ink)
}
.linked-with-inventory .crmRecordRow small {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 2px
}
.linked-with-inventory .crmMobileGrid {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
gap: 16px;
align-items: center
}
.linked-with-inventory .crmPhone {
max-width: 215px;
width: 100%;
margin: auto;
background: #132B3C;
border: 1px solid #0A263A;
border-radius: 25px;
padding: 7px
}
.linked-with-inventory .crmPhoneScreen {
padding: 12px;
border-radius: 19px;
background: #fff;
min-height: 300px
}
.linked-with-inventory .crmNotch {
width: 42px;
height: 4px;
margin: 0 auto 14px;
border-radius: 4px;
background: #476176
}
.linked-with-inventory .crmMobileTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.4;
color: var(--navy);
margin-top: 12px
}
.linked-with-inventory .crmMobileSub {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin: 4px 0 12px
}
.linked-with-inventory .crmMobileNote {
padding: 11px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky2);
margin-top: 9px
}
.linked-with-inventory .crmMobileNote small {
font-size: 8px;
color: var(--muted);
display: block;
margin-bottom: 5px
}
.linked-with-inventory .crmMobileNote strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: var(--ink)
}
.linked-with-inventory .crmMobileNote span {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 4px;
line-height: 1.5
}
.linked-with-inventory .crmMobileStatus {
padding: 8px;
border-radius: 7px;
background: var(--greenbg);
color: #116746;
font-size: 9px;
text-align: center;
line-height: 1.5;
font-weight: 750;
margin-top: 12px
}
.linked-with-inventory .crmTaskSteps {
display: grid;
gap: 10px
}
.linked-with-inventory .crmTaskStep {
padding: 13px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff
}
.linked-with-inventory .crmTaskStep strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.45
}
.linked-with-inventory .crmTaskStep span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 4px
}
.linked-with-inventory .crmPortalHead {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: var(--sky2)
}
.linked-with-inventory .crmPortalHead i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #BCD0DD
}
.linked-with-inventory .crmPortalHead span {
font-size: 10px;
font-weight: 750;
color: var(--navy);
margin-left: 7px
}
.linked-with-inventory .crmPortalBody {
padding: 17px
}
.linked-with-inventory .crmPortalTitle {
font-size: 20px;
font-weight: 850;
letter-spacing: -.025em;
line-height: 1.35;
color: var(--navy)
}
.linked-with-inventory .crmPortalSub {
font-size: 11px;
color: var(--muted);
line-height: 1.55;
margin: 5px 0 16px
}
.linked-with-inventory .crmPortalJobs {
display: grid;
gap: 10px
}
.linked-with-inventory .crmPortalJob {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
align-items: start;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px
}
.linked-with-inventory .crmPortalJob strong {
display: block;
color: var(--ink);
font-size: 12px;
line-height: 1.5
}
.linked-with-inventory .crmPortalJob small {
display: block;
color: var(--muted);
font-size: 10px;
line-height: 1.55;
margin-top: 3px
}
.linked-with-inventory .crmPortalFooter {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 13px;
padding-top: 12px;
border-top: 1px solid var(--line)
}
.linked-with-inventory .crmReportSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px
}
.linked-with-inventory .crmReportSummary>div {
border: 1px solid #333;
background: #1B1B1B;
border-radius: 11px;
padding: 13px
}
.linked-with-inventory .crmReportSummary strong {
display: block;
font-size: 12px;
color: var(--yellow);
line-height: 1.5
}
.linked-with-inventory .crmReportSummary span {
display: block;
font-size: 11px;
color: #CEDBE4;
line-height: 1.6;
margin-top: 5px
}
@media(max-width:640px) {
.crmProfile,
.crmPortalBody {
padding: 13px
}
.crmCompany strong {
font-size: 16px
}
.crmFact {
padding: 10px
}
.crmFact strong {
font-size: 11px
}
.crmRecordList {
padding: 0 11px
}
.crmRecordRow {
gap: 8px;
grid-template-columns: 30px minmax(0, 1fr) auto
}
.crmRecordIcon {
width: 30px;
height: 30px
}
.crmRecordRow strong {
font-size: 11px
}
.crmRecordRow small {
font-size: 9px
}
.crmRecordRow .pill {
font-size: 8px;
padding: 4px 6px
}
.crmMobileGrid {
gap: 11px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}
.crmTaskStep {
padding: 11px
}
.crmTaskStep strong {
font-size: 11px
}
.crmPhoneScreen {
padding: 10px;
min-height: 296px
}
.crmPortalJob {
padding: 11px
}
}
@media(max-width:380px) {
.crmMobileGrid {
grid-template-columns: 1fr
}
.crmPhone {
max-width: 220px
}
.crmTaskSteps {
grid-template-columns: 1fr
}
.crmRecordRow {
grid-template-columns: 30px minmax(0, 1fr)
}
.crmRecordRow>.pill {
grid-column: 2;
justify-self: start
}
.crmPortalJob {
grid-template-columns: 1fr
}
.crmPortalJob>.pill {
justify-self: start
}
}
.linked-with-inventory .inventoryHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 620 / 555
}
.linked-with-inventory .inventoryPad {
padding: 16px
}
.linked-with-inventory .inventoryMeta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px
}
.linked-with-inventory .inventoryMeta>div {
padding: 11px 13px;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 10px;
min-width: 0
}
.linked-with-inventory .inventoryMeta small {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.5;
margin-bottom: 3px
}
.linked-with-inventory .inventoryMeta strong {
display: block;
color: var(--navy);
font-size: 12px;
line-height: 1.45
}
.linked-with-inventory .inventoryTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 11px;
line-height: 1.55
}
.linked-with-inventory .inventoryTable th {
background: var(--sky2);
color: var(--muted);
font-size: 9px;
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--line)
}
.linked-with-inventory .inventoryTable td {
padding: 12px;
border-bottom: 1px solid var(--line);
color: var(--ink);
vertical-align: middle
}
.linked-with-inventory .inventoryTable tr:last-child td {
border-bottom: 0
}
.linked-with-inventory .inventoryTable strong {
display: block;
font-size: 11px;
color: var(--navy)
}
.linked-with-inventory .inventoryTable small {
display: block;
font-size: 9px;
color: var(--muted)
}
.linked-with-inventory .inventoryTable .count {
font-weight: 850;
font-size: 18px;
color: var(--navy)
}
.linked-with-inventory .inventoryTable td:last-child {
text-align: right
}
.linked-with-inventory .inventoryTable .pill {
white-space: normal;
text-align: center
}
.linked-with-inventory .inventoryProduct {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: 16px;
align-items: center;
margin-bottom: 14px
}
.linked-with-inventory .inventoryProductSvg {
display: block;
width: 100%;
height: auto;
max-width: 215px;
aspect-ratio: 220 / 205;
margin: auto
}
.linked-with-inventory .inventoryFacts {
display: grid;
gap: 9px
}
.linked-with-inventory .inventoryFacts>div {
border: 1px solid var(--line);
border-radius: 9px;
background: #fff;
padding: 11px 12px
}
.linked-with-inventory .inventoryFacts small {
font-size: 9px;
color: var(--muted);
display: block;
margin-bottom: 3px
}
.linked-with-inventory .inventoryFacts strong {
font-size: 12px;
color: var(--navy);
display: block
}
.linked-with-inventory .inventoryItems {
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
overflow: hidden
}
.linked-with-inventory .inventoryLine {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 14px;
padding: 11px 13px;
font-size: 11px;
border-bottom: 1px solid var(--line);
align-items: center
}
.linked-with-inventory .inventoryLine:last-child {
border: 0;
background: var(--sky2)
}
.linked-with-inventory .inventoryLine strong {
color: var(--navy);
font-size: 12px
}
.linked-with-inventory .inventoryLine small {
display: block;
font-size: 9px;
color: var(--muted)
}
.linked-with-inventory .inventoryProcess {
display: grid;
gap: 10px
}
.linked-with-inventory .inventoryProcessStep {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 10px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
align-items: center
}
.linked-with-inventory .inventoryProcessStep>b {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--sky);
color: var(--navy);
font-size: 12px
}
.linked-with-inventory .inventoryProcessStep strong {
display: block;
font-size: 12px;
color: var(--ink);
line-height: 1.5
}
.linked-with-inventory .inventoryProcessStep small {
display: block;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-top: 3px
}
.linked-with-inventory .inventoryProcessStep.done {
border-color: #BBDCCF;
background: #F5FCF8
}
.linked-with-inventory .inventoryProcessStep.done>b {
background: var(--greenbg);
color: var(--green)
}
.linked-with-inventory .inventoryDelta {
display: grid;
grid-template-columns: 1fr 34px 1fr;
align-items: center;
margin-top: 13px;
padding: 16px;
border-radius: 12px;
background: #0D2535;
color: #fff;
text-align: center
}
.linked-with-inventory .inventoryDelta strong {
display: block;
font-size: 29px;
line-height: 1.3;
color: #FFC928
}
.linked-with-inventory .inventoryDelta span {
font-size: 10px;
line-height: 1.5;
color: #CEDBE4
}
.linked-with-inventory .inventoryDelta .icon2 {
width: 20px;
height: 20px;
margin: auto;
color: #B1CBDA
}
.linked-with-inventory .inventoryDelta small {
grid-column: 1/-1;
display: block;
margin-top: 12px;
border-top: 1px solid #2B485A;
padding-top: 10px;
font-size: 10px;
line-height: 1.6;
color: #CEDBE4
}
.linked-with-inventory .inventoryLow {
background: var(--yellowsoft);
border: 1px solid #E6D48C;
border-radius: 12px;
padding: 16px;
margin-bottom: 13px
}
.linked-with-inventory .inventoryLowHead {
display: flex;
align-items: center;
gap: 10px;
color: #654D0C;
font-size: 14px;
font-weight: 800
}
.linked-with-inventory .inventoryLow p {
font-size: 11px;
color: #765F1D;
margin: 8px 0 0;
line-height: 1.6
}
.linked-with-inventory .inventoryMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 14px 0 0
}
.linked-with-inventory .inventoryMetrics>div {
background: #fff;
border: 1px solid #E6D48C;
border-radius: 9px;
text-align: center;
padding: 12px 5px
}
.linked-with-inventory .inventoryMetrics strong {
display: block;
color: #654D0C;
font-size: 24px;
line-height: 1.3
}
.linked-with-inventory .inventoryMetrics span {
display: block;
font-size: 9px;
color: #765F1D;
line-height: 1.6;
margin-top: 3px
}
.linked-with-inventory .inventoryReview {
display: grid;
gap: 9px
}
.linked-with-inventory .inventoryReview>div {
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font-size: 11px;
color: var(--muted);
line-height: 1.6
}
.linked-with-inventory .inventoryReview strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 3px
}
.linked-with-inventory .inventoryReportSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px
}
.linked-with-inventory .inventoryReportSummary>div {
border: 1px solid #333;
background: #1B1B1B;
border-radius: 11px;
padding: 13px
}
.linked-with-inventory .inventoryReportSummary strong {
display: block;
font-size: 12px;
color: var(--yellow);
line-height: 1.5
}
.linked-with-inventory .inventoryReportSummary span {
display: block;
font-size: 11px;
color: #CEDBE4;
line-height: 1.6;
margin-top: 5px
}
@media(max-width:640px) {
.inventoryPad {
padding: 12px
}
.inventoryProduct {
gap: 10px
}
.inventoryFacts>div {
padding: 10px
}
.inventoryFacts strong {
font-size: 11px
}
.inventoryTable td,
.inventoryTable th {
padding: 10px 8px
}
.inventoryTable .count {
font-size: 16px
}
.inventoryTable .pill {
font-size: 8px;
padding: 4px 5px
}
.inventoryProcessStep {
padding: 11px;
gap: 8px;
grid-template-columns: 30px minmax(0, 1fr)
}
.inventoryProcessStep>.pill {
grid-column: 2;
justify-self: start
}
.inventoryProcessStep>b {
width: 28px;
height: 28px
}
.inventoryLine {
gap: 10px;
font-size: 10px;
padding: 10px
}
.inventoryLine strong {
font-size: 11px
}
}
@media(max-width:380px) {
.inventoryProduct {
grid-template-columns: 1fr
}
.inventoryProductSvg {
max-width: 175px
}
.inventoryFacts {
grid-template-columns: 1fr 1fr
}
.inventoryFacts>div:last-child {
grid-column: 1/-1
}
.inventoryLow {
padding: 12px
}
.inventoryMetrics {
gap: 5px
}
.inventoryMeta {
gap: 7px
}
.inventoryMeta>div {
padding: 9px
}
}  .quotation-on-the-go .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.quotation-on-the-go .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.quotation-on-the-go .dark a:focus-visible,
.quotation-on-the-go .final a:focus-visible {
outline-color: var(--yellow)
}
.quotation-on-the-go .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.quotation-on-the-go .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.quotation-on-the-go .soft {
background: var(--sky2)
}
.quotation-on-the-go .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.quotation-on-the-go .dark h2,
.quotation-on-the-go .dark h3 {
color: #fff
}
.quotation-on-the-go .dark p {
color: #D6D6D6
}
.quotation-on-the-go .dark .quotation-on-the-go .ey {
background: var(--yellow)
}
.quotation-on-the-go .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.quotation-on-the-go .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.quotation-on-the-go .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.quotation-on-the-go .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0 !important;
background: transparent !important;
}
.quotation-on-the-go .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.quotation-on-the-go .textLink .quotation-on-the-go .icon {
width: 16px;
height: 16px
}
.quotation-on-the-go .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.quotation-on-the-go .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.quotation-on-the-go .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.quotation-on-the-go .skipLink:focus {
top: 12px
} .quotation-on-the-go .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.quotation-on-the-go .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.quotation-on-the-go .heroGrid>*,
.quotation-on-the-go .feature>*,
.quotation-on-the-go .aiGrid>* {
min-width: 0
}
.quotation-on-the-go .hero h1 {
max-width: 580px
}
.quotation-on-the-go .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.quotation-on-the-go .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.quotation-on-the-go .heroVisual {
min-height: 555px;
position: relative
}
.quotation-on-the-go .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.quotation-on-the-go .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.quotation-on-the-go .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.quotation-on-the-go .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.quotation-on-the-go .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.quotation-on-the-go .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.quotation-on-the-go .brandTile .quotation-on-the-go .icon {
width: 17px;
height: 17px
}
.quotation-on-the-go .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.quotation-on-the-go .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.quotation-on-the-go .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.quotation-on-the-go .viewPills span {
padding: 4px 7px
}
.quotation-on-the-go .viewPills .quotation-on-the-go .active {
background: var(--navy);
color: #fff
}
.quotation-on-the-go .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.quotation-on-the-go .miniDates,
.quotation-on-the-go .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.quotation-on-the-go .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.quotation-on-the-go .miniDates>div:last-child {
border: 0
}
.quotation-on-the-go .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.quotation-on-the-go .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.quotation-on-the-go .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.quotation-on-the-go .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.quotation-on-the-go .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.quotation-on-the-go .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.quotation-on-the-go .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.quotation-on-the-go .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.quotation-on-the-go .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.quotation-on-the-go .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.quotation-on-the-go .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.quotation-on-the-go .boardFooter strong {
color: var(--navy)
}
.quotation-on-the-go .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.quotation-on-the-go .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.quotation-on-the-go .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.quotation-on-the-go .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.quotation-on-the-go .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.quotation-on-the-go .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.quotation-on-the-go .phoneHead small {
font-size: 9px;
color: #50697A
}
.quotation-on-the-go .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.quotation-on-the-go .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.quotation-on-the-go .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.quotation-on-the-go .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.quotation-on-the-go .phoneJob.current {
background: var(--sky2)
}
.quotation-on-the-go .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.quotation-on-the-go .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.quotation-on-the-go .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.quotation-on-the-go .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.quotation-on-the-go .lifecycleHead .quotation-on-the-go .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.quotation-on-the-go .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.quotation-on-the-go .lifecycleBody strong {
font-size: 12px
}
.quotation-on-the-go .lifecycleBody span {
color: #CEDBE4
}
.quotation-on-the-go .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.quotation-on-the-go .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .quotation-on-the-go .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.quotation-on-the-go .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.quotation-on-the-go .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.quotation-on-the-go .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.quotation-on-the-go .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.quotation-on-the-go .logo.adobe {
font-size: 20px
}
.quotation-on-the-go .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .quotation-on-the-go .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.quotation-on-the-go .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.quotation-on-the-go .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.quotation-on-the-go .outcome:nth-child(2):before {
background: var(--yellow)
}
.quotation-on-the-go .outcome:nth-child(3):before {
background: var(--green)
}
.quotation-on-the-go .outcome:nth-child(4):before {
background: var(--purple)
}
.quotation-on-the-go .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.quotation-on-the-go .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.quotation-on-the-go .outcome .quotation-on-the-go .icon {
color: var(--navy);
width: 24px;
height: 24px
} .quotation-on-the-go .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.quotation-on-the-go .feature.reverse .quotation-on-the-go .visual {
order: -1
}
.quotation-on-the-go .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.quotation-on-the-go .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.quotation-on-the-go .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.quotation-on-the-go .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.quotation-on-the-go .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.quotation-on-the-go .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.quotation-on-the-go .visual>* {
position: relative;
z-index: 2
}
.quotation-on-the-go .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.quotation-on-the-go .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.quotation-on-the-go .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.quotation-on-the-go .uiHeading .quotation-on-the-go .icon {
width: 19px;
height: 19px
}
.quotation-on-the-go .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.quotation-on-the-go .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.quotation-on-the-go .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.quotation-on-the-go .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.quotation-on-the-go .pill.green {
background: var(--greenbg);
color: #116746
}
.quotation-on-the-go .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.quotation-on-the-go .pill.gray {
background: #F0F3F5;
color: #586C79
}
.quotation-on-the-go .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .quotation-on-the-go .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.quotation-on-the-go .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.quotation-on-the-go .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.quotation-on-the-go .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.quotation-on-the-go .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.quotation-on-the-go .plannerRow:last-child {
border-bottom: 0
}
.quotation-on-the-go .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.quotation-on-the-go .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.quotation-on-the-go .avatar.green {
background: var(--greenbg);
color: #116746
}
.quotation-on-the-go .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.quotation-on-the-go .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.quotation-on-the-go .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.quotation-on-the-go .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.quotation-on-the-go .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.quotation-on-the-go .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.quotation-on-the-go .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.quotation-on-the-go .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.quotation-on-the-go .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.quotation-on-the-go .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.quotation-on-the-go .pending .quotation-on-the-go .icon {
width: 18px;
height: 18px;
color: var(--navy)
}
.quotation-on-the-go .pending strong {
font-size: 11px;
color: var(--navy)
}
.quotation-on-the-go .pending .quotation-on-the-go .pill {
margin-left: auto
}
.quotation-on-the-go .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.quotation-on-the-go .legend span {
display: flex;
align-items: center;
gap: 4px
}
.quotation-on-the-go .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.quotation-on-the-go .legend .quotation-on-the-go .green i {
background: var(--green)
}
.quotation-on-the-go .legend .quotation-on-the-go .yellow i {
background: #D7A200
} .quotation-on-the-go .roster {
display: grid;
gap: 10px
}
.quotation-on-the-go .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.quotation-on-the-go .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.quotation-on-the-go .rosterTop .quotation-on-the-go .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.quotation-on-the-go .rosterName {
flex: 1;
min-width: 0
}
.quotation-on-the-go .rosterName strong {
display: block;
font-size: 11px
}
.quotation-on-the-go .rosterName small {
color: var(--muted);
font-size: 9px
}
.quotation-on-the-go .rosterTop .quotation-on-the-go .pill {
font-size: 8px
}
.quotation-on-the-go .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.quotation-on-the-go .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.quotation-on-the-go .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.quotation-on-the-go .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.quotation-on-the-go .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.quotation-on-the-go .rosterNote .quotation-on-the-go .icon {
width: 19px;
height: 19px
}
.quotation-on-the-go .rosterNote strong {
display: block;
margin-bottom: 3px
} .quotation-on-the-go .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.quotation-on-the-go .ruleCard .quotation-on-the-go .uiLabel {
color: #9CBED1
}
.quotation-on-the-go .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.quotation-on-the-go .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.quotation-on-the-go .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.quotation-on-the-go .workCards {
display: grid;
gap: 9px
}
.quotation-on-the-go .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.quotation-on-the-go .workCard strong {
display: block;
font-size: 11px
}
.quotation-on-the-go .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.quotation-on-the-go .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.quotation-on-the-go .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.quotation-on-the-go .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.quotation-on-the-go .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.quotation-on-the-go .modeRow .quotation-on-the-go .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.quotation-on-the-go .modeRow .quotation-on-the-go .icon {
width: 14px;
height: 14px
} .quotation-on-the-go .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.quotation-on-the-go .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.quotation-on-the-go .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.quotation-on-the-go .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.quotation-on-the-go .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.quotation-on-the-go .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.quotation-on-the-go .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.quotation-on-the-go .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.quotation-on-the-go .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.quotation-on-the-go .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.quotation-on-the-go .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.quotation-on-the-go .lookupSide {
display: grid;
gap: 11px
}
.quotation-on-the-go .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.quotation-on-the-go .lookupCard .quotation-on-the-go .icon {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.quotation-on-the-go .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.quotation-on-the-go .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.quotation-on-the-go .lookupCard.done {
border-left: 3px solid var(--green)
} .quotation-on-the-go .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.quotation-on-the-go .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.quotation-on-the-go .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.quotation-on-the-go .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.quotation-on-the-go .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.quotation-on-the-go .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.quotation-on-the-go .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.quotation-on-the-go .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.quotation-on-the-go .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.quotation-on-the-go .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .quotation-on-the-go .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.quotation-on-the-go .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.quotation-on-the-go .connectedCard .quotation-on-the-go .icon {
color: var(--navy);
margin-bottom: 17px
}
.quotation-on-the-go .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.quotation-on-the-go .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.quotation-on-the-go .connectedCard .quotation-on-the-go .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.quotation-on-the-go .connectedCard .quotation-on-the-go .textLink .quotation-on-the-go .icon {
margin: 0;
width: 14px;
height: 14px
} .quotation-on-the-go .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.quotation-on-the-go .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.quotation-on-the-go .featureCard:hover {
transform: translateY(-3px)
}
.quotation-on-the-go .featureIcon,
.quotation-on-the-go .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.quotation-on-the-go .featureIcon .quotation-on-the-go .icon,
.quotation-on-the-go .useIcon .quotation-on-the-go .icon {
width: 22px;
height: 22px
}
.quotation-on-the-go .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.quotation-on-the-go .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .quotation-on-the-go .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.quotation-on-the-go .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.quotation-on-the-go .integration .quotation-on-the-go .icon {
width: 21px;
height: 21px;
color: var(--navy)
}
.quotation-on-the-go .integration:hover {
background: var(--sky2)
}
.quotation-on-the-go .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.quotation-on-the-go .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.quotation-on-the-go .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.quotation-on-the-go .stream .quotation-on-the-go .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.quotation-on-the-go .stream .quotation-on-the-go .icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
.quotation-on-the-go .stream>span[aria-hidden] {
color: #86B2C9
} .quotation-on-the-go .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.quotation-on-the-go .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.quotation-on-the-go .useCase h3 {
font-size: 20px
}
.quotation-on-the-go .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.quotation-on-the-go .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.quotation-on-the-go .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.quotation-on-the-go .review .quotation-on-the-go .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.quotation-on-the-go .review h3 {
font-size: 22px
}
.quotation-on-the-go .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.quotation-on-the-go .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.quotation-on-the-go .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.quotation-on-the-go .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.quotation-on-the-go .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.quotation-on-the-go .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.quotation-on-the-go .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.quotation-on-the-go .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.quotation-on-the-go .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .quotation-on-the-go .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.quotation-on-the-go .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.quotation-on-the-go .cta h3 {
font-size: 19px
}
.quotation-on-the-go .cta.darkCta h3 {
color: #fff
}
.quotation-on-the-go .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.quotation-on-the-go .cta.darkCta p {
color: #D1D1D1
}
.quotation-on-the-go .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.quotation-on-the-go .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.quotation-on-the-go .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.quotation-on-the-go .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.quotation-on-the-go .final .quotation-on-the-go .ctaBtns {
flex-direction: column;
align-items: stretch
}
.quotation-on-the-go .final .quotation-on-the-go .outline {
background: transparent;
color: #fff;
border-color: #555
}
.quotation-on-the-go .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.quotation-on-the-go .heroGrid {
gap: 28px
}
.quotation-on-the-go .hero .quotation-on-the-go .lead {
font-size: 17px
}
.quotation-on-the-go .assetPhone {
width: 168px;
top: 235px
}
.quotation-on-the-go .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.quotation-on-the-go .scheduleBoard {
width: 96%;
left: 0
}
.quotation-on-the-go .miniJob {
padding: 4px
}
.quotation-on-the-go .heroVisual,
.quotation-on-the-go .assetStage {
min-height: 555px
}
.quotation-on-the-go .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.quotation-on-the-go .visual {
padding: 17px
}
.quotation-on-the-go .plannerTicks,
.quotation-on-the-go .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.quotation-on-the-go .plannerRow {
grid-template-columns: 75px 1fr
}
.quotation-on-the-go .person {
font-size: 9px;
padding: 10px 5px
}
.quotation-on-the-go .person .quotation-on-the-go .avatar {
display: none
}
}
@media(max-width:960px) {
.quotation-on-the-go .heroGrid,
.quotation-on-the-go .feature,
.quotation-on-the-go .aiGrid,
.quotation-on-the-go .final {
grid-template-columns: 1fr
}
.quotation-on-the-go .heroGrid {
gap: 36px
}
.quotation-on-the-go .hero h1 {
max-width: 760px
}
.quotation-on-the-go .hero .quotation-on-the-go .lead {
max-width: 750px
}
.quotation-on-the-go .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.quotation-on-the-go .assetStage {
margin: auto
}
.quotation-on-the-go .feature.reverse .quotation-on-the-go .visual {
order: 0
}
.quotation-on-the-go .feature {
gap: 30px
}
.quotation-on-the-go .feature>div:first-child {
max-width: 800px
}
.quotation-on-the-go .outcomes,
.quotation-on-the-go .featureGrid,
.quotation-on-the-go .connectedGrid,
.quotation-on-the-go .useCases {
grid-template-columns: repeat(2, 1fr)
}
.quotation-on-the-go .logos {
grid-template-columns: repeat(3, 1fr)
}
.quotation-on-the-go .integrations {
grid-template-columns: repeat(3, 1fr)
}
.quotation-on-the-go .reviews {
grid-template-columns: 1fr
}
.quotation-on-the-go .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.quotation-on-the-go .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.quotation-on-the-go .ratingItem:nth-child(2) {
border: 0
}
.quotation-on-the-go .final .quotation-on-the-go .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.quotation-on-the-go .final .quotation-on-the-go .btn {
min-width: 195px
}
.quotation-on-the-go .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.quotation-on-the-go .aiGrid {
gap: 30px
}
.quotation-on-the-go .aiMini {
max-width: 760px
}
.quotation-on-the-go .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.quotation-on-the-go .wrap {
width: calc(100% - 24px)
}
section {
padding: 56px 0
}
.quotation-on-the-go .hero {
padding: 32px 0 42px
}
.quotation-on-the-go .lead {
font-size: 17px
}
.quotation-on-the-go .sectionHead p {
font-size: 16px
}
.quotation-on-the-go .sectionHead {
margin-bottom: 28px
}
.quotation-on-the-go .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.quotation-on-the-go .heroGrid {
gap: 24px
}
.quotation-on-the-go .hero .quotation-on-the-go .actions {
gap: 8px
}
.quotation-on-the-go .hero .quotation-on-the-go .actions .quotation-on-the-go .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.quotation-on-the-go .micro {
font-size: 11px
}
.quotation-on-the-go .heroPills {
gap: 6px
}
.quotation-on-the-go .heroPills span {
font-size: 9px
}
.quotation-on-the-go .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.quotation-on-the-go .heroVisual {
min-height: 525px
}
.quotation-on-the-go .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.quotation-on-the-go .assetStage:before {
inset: 38px 0 28px 10px
}
.quotation-on-the-go .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.quotation-on-the-go .boardHeader {
padding: 12px
}
.quotation-on-the-go .boardBrand {
font-size: 12px
}
.quotation-on-the-go .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.quotation-on-the-go .miniCalendar {
margin: 0 10px 12px
}
.quotation-on-the-go .miniDates,
.quotation-on-the-go .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.quotation-on-the-go .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.quotation-on-the-go .miniPerson small {
font-size: 7px
}
.quotation-on-the-go .miniCell {
padding: 4px 3px
}
.quotation-on-the-go .miniDates>div {
font-size: 8px
}
.quotation-on-the-go .miniDates small {
font-size: 7px
}
.quotation-on-the-go .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.quotation-on-the-go .miniJob b {
font-size: 7px
}
.quotation-on-the-go .miniRow {
min-height: 57px
}
.quotation-on-the-go .miniJob {
min-height: 48px
}
.quotation-on-the-go .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.quotation-on-the-go .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.quotation-on-the-go .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.quotation-on-the-go .phoneHead strong {
font-size: 11px
}
.quotation-on-the-go .phoneHead small {
font-size: 8px
}
.quotation-on-the-go .phoneAgenda {
padding: 8px;
gap: 6px
}
.quotation-on-the-go .phoneJob {
padding: 7px;
font-size: 8px
}
.quotation-on-the-go .phoneJob strong {
font-size: 9px
}
.quotation-on-the-go .phoneJob small {
font-size: 7px
}
.quotation-on-the-go .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.quotation-on-the-go .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.quotation-on-the-go .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.quotation-on-the-go .lifecycleHead .quotation-on-the-go .icon {
width: 15px;
height: 15px
}
.quotation-on-the-go .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.quotation-on-the-go .lifecycleBody strong {
font-size: 10px
}
.quotation-on-the-go .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.quotation-on-the-go .diagramCaption {
font-size: 9px
}
.quotation-on-the-go .trust {
padding: 23px 0
}
.quotation-on-the-go .trustLabel {
font-size: 12px
}
.quotation-on-the-go .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.quotation-on-the-go .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.quotation-on-the-go .logo.dhl {
font-size: 19px
}
.quotation-on-the-go .logo.adobe {
font-size: 17px
}
.quotation-on-the-go .logo.golden {
font-size: 8px
}
.quotation-on-the-go .fl,
.quotation-on-the-go .outcomes,
.quotation-on-the-go .featureGrid,
.quotation-on-the-go .connectedGrid,
.quotation-on-the-go .useCases {
grid-template-columns: 1fr
}
.quotation-on-the-go .fi {
font-size: 14px
}
.quotation-on-the-go .outcome {
padding: 21px
}
.quotation-on-the-go .outcome strong {
margin-top: 12px
}
.quotation-on-the-go .outcome span {
font-size: 14px
}
.quotation-on-the-go .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.quotation-on-the-go .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.quotation-on-the-go .uiHeading .quotation-on-the-go .pill {
font-size: 8px;
padding: 4px 6px
}
.quotation-on-the-go .uiSub {
font-size: 9px
}
.quotation-on-the-go .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.quotation-on-the-go .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.quotation-on-the-go .person {
font-size: 9px;
padding: 8px 6px
}
.quotation-on-the-go .person .quotation-on-the-go .avatar {
display: none
}
.quotation-on-the-go .person small {
font-size: 8px
}
.quotation-on-the-go .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.quotation-on-the-go .slot strong {
font-size: 8px
}
.quotation-on-the-go .plannerHead {
font-size: 10px;
padding: 10px
}
.quotation-on-the-go .plannerHead .quotation-on-the-go .pill {
font-size: 8px
}
.quotation-on-the-go .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.quotation-on-the-go .pending strong {
font-size: 10px
}
.quotation-on-the-go .pending .quotation-on-the-go .pill {
font-size: 8px;
padding: 4px 6px
}
.quotation-on-the-go .rosterTop .quotation-on-the-go .pill {
font-size: 8px
}
.quotation-on-the-go .rosterCard {
padding: 11px
}
.quotation-on-the-go .rosterNote {
padding: 11px;
font-size: 10px
}
.quotation-on-the-go .ruleCard {
padding: 14px
}
.quotation-on-the-go .ruleCard strong {
font-size: 15px
}
.quotation-on-the-go .workCard {
padding: 10px;
gap: 8px
}
.quotation-on-the-go .workCard strong {
font-size: 10px
}
.quotation-on-the-go .workCard small {
font-size: 8px
}
.quotation-on-the-go .workCard .quotation-on-the-go .pill {
font-size: 8px;
padding: 4px 6px
}
.quotation-on-the-go .modeRow span {
font-size: 8px;
padding: 7px
}
.quotation-on-the-go .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.quotation-on-the-go .phoneMockInner {
padding: 11px;
min-height: 288px
}
.quotation-on-the-go .lookupCard {
padding: 10px
}
.quotation-on-the-go .lookupCard strong {
font-size: 10px
}
.quotation-on-the-go .lookupCard span {
font-size: 9px
}
.quotation-on-the-go .lookupCard .quotation-on-the-go .icon {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.quotation-on-the-go .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.quotation-on-the-go .aiMini div {
padding: 16px
}
.quotation-on-the-go .aiMini strong {
font-size: 14px
}
.quotation-on-the-go .aiMini span {
font-size: 13px
}
.quotation-on-the-go .promptBox {
padding: 18px;
border-radius: 17px
}
.quotation-on-the-go .prompt {
font-size: 13px;
padding: 13px
}
.quotation-on-the-go .promptHead {
font-size: 19px
}
.quotation-on-the-go .promptFoot {
font-size: 10px !important
}
.quotation-on-the-go .connectedCard {
padding: 22px
}
.quotation-on-the-go .connectedCard p,
.quotation-on-the-go .featureCard p,
.quotation-on-the-go .useCase p {
font-size: 14px
}
.quotation-on-the-go .connectedCard .quotation-on-the-go .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.quotation-on-the-go .integrations {
grid-template-columns: repeat(2, 1fr)
}
.quotation-on-the-go .integration:last-child {
grid-column: 1/-1
}
.quotation-on-the-go .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.quotation-on-the-go .stream>span[aria-hidden] {
display: none
}
.quotation-on-the-go .streamStep {
min-height: 24px
}
.quotation-on-the-go .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.quotation-on-the-go .ratingItem {
border: 0
}
.quotation-on-the-go .ratingLead {
margin-bottom: 3px
}
.quotation-on-the-go .review p {
font-size: 14px
}
.quotation-on-the-go .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.quotation-on-the-go .ctaBtns {
width: 100%
}
.quotation-on-the-go .ctaBtns .quotation-on-the-go .btn {
flex: 1
}
.quotation-on-the-go .cta p {
font-size: 14px
}
.quotation-on-the-go .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.quotation-on-the-go .final h2 {
font-size: 32px
}
.quotation-on-the-go .final p {
font-size: 15px
}
.quotation-on-the-go .final .quotation-on-the-go .ctaBtns {
flex-direction: column
}
.quotation-on-the-go .final .quotation-on-the-go .btn {
min-width: 0;
width: 100%
}
}
@media(max-width:360px) {
.quotation-on-the-go .heroVisual,
.quotation-on-the-go .assetStage {
height: 520px;
min-height: 520px
}
.quotation-on-the-go .assetPhone {
width: 152px;
top: 242px
}
.quotation-on-the-go .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.quotation-on-the-go .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.quotation-on-the-go .lifecycleBody {
padding: 8px;
font-size: 8px
}
.quotation-on-the-go .lifecycleBody strong {
font-size: 9px
}
.quotation-on-the-go .boardBrand {
font-size: 11px
}
.quotation-on-the-go .sampleBadge {
font-size: 8px
}
.quotation-on-the-go .miniDates,
.quotation-on-the-go .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.quotation-on-the-go .miniDates small {
font-size: 6px
}
.quotation-on-the-go .miniJob b {
font-size: 6.5px
}
.quotation-on-the-go .boardFooter {
padding-right: 135px;
min-height: 45px
}
.quotation-on-the-go .mobileLookup {
grid-template-columns: 1fr
}
.quotation-on-the-go .phoneMock {
width: 200px;
margin: auto
}
.quotation-on-the-go .lookupSide {
grid-template-columns: 1fr
}
.quotation-on-the-go .lookupCard {
padding: 13px
}
.quotation-on-the-go .lookupCard strong {
font-size: 12px
}
.quotation-on-the-go .lookupCard span {
font-size: 11px
}
.quotation-on-the-go .plannerHead {
gap: 5px
}
.quotation-on-the-go .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.quotation-on-the-go .plannerRow {
grid-template-columns: 61px 1fr
}
.quotation-on-the-go .uiHeading>span:first-child {
gap: 5px
}
.quotation-on-the-go .uiHeading .quotation-on-the-go .icon {
width: 17px;
height: 17px
}
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.quotation-on-the-go .wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .quotation-on-the-go .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .quotation-on-the-go .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .quotation-on-the-go .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .quotation-on-the-go .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__step::before,
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.quotation-on-the-go .wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .quotation-on-the-go .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .quotation-on-the-go .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .quotation-on-the-go .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card,
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .quotation-on-the-go .fsmTools__card {
transition: none;
}
}   #quotation-page .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
#quotation-page .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
#quotation-page .assetStage:before {
content: none
}
#quotation-page .salesHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
#quotation-page .hero .quotation-on-the-go .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
#quotation-page .ey {
max-width: 100%
}
#quotation-page .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
#quotation-page .uiHeading>span:first-child {
min-width: 0
}
#quotation-page .uiHeading .quotation-on-the-go .icon {
flex-shrink: 0
}
#quotation-page .salesPanel {
padding: 17px
}
#quotation-page .salesRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
#quotation-page .salesRecordHead>span:first-child {
min-width: 0
}
#quotation-page .salesIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
#quotation-page .salesCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
#quotation-page .salesMeta {
display: grid;
gap: 8px
}
#quotation-page .salesMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#quotation-page .salesMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
#quotation-page .salesMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#quotation-page .salesRows {
padding: 0 14px
}
#quotation-page .salesRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
#quotation-page .salesRow:last-child {
border: 0
}
#quotation-page .salesRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#quotation-page .salesRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
#quotation-page .salesRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
#quotation-page .salesFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
#quotation-page .salesFoot strong {
color: var(--navy)
}
#quotation-page .salesAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
#quotation-page .salesAlert>.quotation-on-the-go .icon {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
#quotation-page .salesAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
#quotation-page .salesAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
#quotation-page .salesDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
#quotation-page .salesDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
#quotation-page .salesDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
#quotation-page .salesDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
#quotation-page .salesDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
#quotation-page .salesDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
#quotation-page .salesDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
#quotation-page .salesDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
#quotation-page .salesDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
#quotation-page .salesDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
#quotation-page .salesDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
#quotation-page .salesDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
#quotation-page .salesQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
#quotation-page .salesQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#quotation-page .salesQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
#quotation-page .salesQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
#quotation-page .salesQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
#quotation-page .salesQueueBar span {
display: block;
height: 100%;
width: var(--sales-bar);
background: var(--brand);
border-radius: 6px
}
#quotation-page .salesQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
#quotation-page .salesTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
#quotation-page .salesTraceHead .quotation-on-the-go .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
#quotation-page .salesTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
#quotation-page .salesTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
#quotation-page .salesTraceHead .quotation-on-the-go .pill {
margin-left: auto
}
#quotation-page .salesTimeline {
padding: 17px 15px
}
#quotation-page .salesEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
#quotation-page .salesEvent:last-child {
padding-bottom: 0
}
#quotation-page .salesEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#quotation-page .salesEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
#quotation-page .salesEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
#quotation-page .salesEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
#quotation-page .salesEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
#quotation-page .salesEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
#quotation-page .salesNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
#quotation-page .salesNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
#quotation-page .salesSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
#quotation-page .salesSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
#quotation-page .salesSource .quotation-on-the-go .icon {
color: var(--navy);
margin-bottom: 8px
}
#quotation-page .salesSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#quotation-page .salesSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
#quotation-page .salesConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
#quotation-page .salesConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
#quotation-page .salesHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
#quotation-page .salesHub strong {
display: block;
font-size: 18px
}
#quotation-page .salesHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
#quotation-page .salesHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
#quotation-page .salesHandoff>strong {
font-size: 13px;
color: var(--navy)
}
#quotation-page .salesHandoff>span:not(.quotation-on-the-go .pill) {
color: var(--muted)
}
#quotation-page .salesHandoff .quotation-on-the-go .salesHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
#quotation-page .salesScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
#quotation-page .salesScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
#quotation-page .salesComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
#quotation-page .salesComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
#quotation-page .salesComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
#quotation-page .salesComparison th,
#quotation-page .salesComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
#quotation-page .salesComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
#quotation-page .salesComparison tbody th {
font-size: 14px;
color: var(--navy)
}
#quotation-page .salesComparison tbody td {
color: var(--muted)
}
#quotation-page .salesComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
#quotation-page .salesNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
#quotation-page .salesNote strong {
color: var(--navy)
}
#quotation-page .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
#quotation-page .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
#quotation-page .heroVisual {
max-width: 480px
}
#quotation-page .salesIdentity {
gap: 12px
}
#quotation-page .salesMeta>div {
padding: 9px 10px
}
#quotation-page .salesMeta strong {
font-size: 11px
}
#quotation-page .salesRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
#quotation-page .salesRows {
padding: 0 11px
}
#quotation-page .salesRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
#quotation-page .salesRow strong {
font-size: 11px
}
#quotation-page .salesRow small {
font-size: 9px
}
#quotation-page .salesRow .quotation-on-the-go .pill {
font-size: 8px;
padding: 4px 6px
}
#quotation-page .salesDwell {
padding: 16px
}
#quotation-page .salesDwellMetrics {
gap: 12px
}
#quotation-page .salesDwellMetrics>div+div {
padding-left: 12px
}
#quotation-page .salesDwellMetrics b {
font-size: 32px
}
#quotation-page .salesDwellMetrics span {
font-size: 10px
}
#quotation-page .salesQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
#quotation-page .salesTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
#quotation-page .salesTraceHead strong {
font-size: 12px
}
#quotation-page .salesTraceHead .quotation-on-the-go .pill {
font-size: 8px
}
#quotation-page .salesTimeline {
padding: 15px 12px
}
#quotation-page .salesSources {
gap: 8px
}
#quotation-page .salesSource {
padding: 12px
}
#quotation-page .salesHandoff {
padding: 13px;
gap: 10px
}
#quotation-page .salesHandoff>strong {
font-size: 12px
}
#quotation-page .salesComparison,
#quotation-page .salesComparison tbody,
#quotation-page .salesComparison tr,
#quotation-page .salesComparison th,
#quotation-page .salesComparison td {
display: block;
width: 100%
}
#quotation-page .salesComparison colgroup {
display: none
}
#quotation-page .salesComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
#quotation-page .salesComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
#quotation-page .salesComparison th,
#quotation-page .salesComparison td {
padding: 10px 16px
}
#quotation-page .salesComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
#quotation-page .salesComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
#quotation-page .salesComparison tbody tr+tr>* {
border: 0
}
#quotation-page .salesComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
#quotation-page .salesComparison tbody td:last-child {
padding-bottom: 18px
}
#quotation-page .salesNote {
padding: 17px
}
}
@media(max-width:360px) {
#quotation-page .salesIdentity {
grid-template-columns: 1fr
}
#quotation-page .salesCarrierSvg {
max-width: 170px
}
#quotation-page .salesMeta {
grid-template-columns: 1fr 1fr
}
#quotation-page .salesMeta>div:last-child {
grid-column: 1/-1
}
#quotation-page .salesRow {
grid-template-columns: 33px minmax(0, 1fr)
}
#quotation-page .salesRow .quotation-on-the-go .pill {
grid-column: 2;
justify-self: start
}
#quotation-page .salesDwellLegend {
font-size: 8px
}
#quotation-page .salesQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
#quotation-page .salesTraceHead .quotation-on-the-go .pill {
margin-left: 47px
}
#quotation-page .salesHandoff {
grid-template-columns: 1fr
}
#quotation-page .salesHandoff .quotation-on-the-go .pill {
justify-self: start
}
}   #quotation-page .quotationHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555
}
#quotation-page .quotePhoneSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 220 / 310;
margin: auto
}
#quotation-page .quoteMobileGrid {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 18px;
align-items: center
}
#quotation-page .quoteInfo {
display: grid;
gap: 10px;
min-width: 0
}
#quotation-page .quoteInfoCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px
}
#quotation-page .quoteInfoCard small {
display: block;
font-size: 9px;
font-weight: 750;
letter-spacing: .025em;
color: var(--muted);
margin-bottom: 5px
}
#quotation-page .quoteInfoCard strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy)
}
#quotation-page .quoteInfoCard span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 4px
}
#quotation-page .quoteInfoCard.active {
background: var(--greenbg);
border-color: #C7E6D9
}
#quotation-page .quoteInfoCard.active strong {
color: #116746
}
#quotation-page .quoteTemplate {
display: flex;
gap: 13px;
align-items: center;
padding: 15px;
background: #0D2535;
color: #fff;
border: 1px solid #2A495A;
border-radius: 12px;
margin-bottom: 13px
}
#quotation-page .quoteTemplate>.quotation-on-the-go .icon {
color: var(--yellow);
flex-shrink: 0
}
#quotation-page .quoteTemplate strong {
display: block;
font-size: 14px;
line-height: 1.5
}
#quotation-page .quoteTemplate small {
display: block;
color: #CEDBE4;
font-size: 10px;
line-height: 1.5;
margin-top: 3px
}
#quotation-page .quoteItems {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: left;
font-size: 11px;
line-height: 1.55
}
#quotation-page .quoteItems th {
padding: 11px 10px;
background: var(--sky2);
font-size: 10px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
#quotation-page .quoteItems td {
padding: 14px 10px;
vertical-align: top;
border-bottom: 1px solid var(--line);
color: var(--ink);
font-variant-numeric: tabular-nums
}
#quotation-page .quoteItems th:first-child,
#quotation-page .quoteItems td:first-child {
padding-left: 15px
}
#quotation-page .quoteItems th:last-child,
#quotation-page .quoteItems td:last-child {
text-align: right;
padding-right: 15px
}
#quotation-page .quoteItems strong {
display: block;
font-size: 11px;
line-height: 1.5
}
#quotation-page .quoteItems small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 3px
}
#quotation-page .quoteSubtotal {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
padding: 15px;
background: #F3FAF7;
color: #116746;
font-size: 12px;
font-weight: 800
}
#quotation-page .quoteSubtotal strong {
font-size: 21px;
font-variant-numeric: tabular-nums
}
#quotation-page .quoteSubnote {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
padding: 11px 15px;
border-top: 1px solid var(--line);
background: #fff
}
#quotation-page .quotePreview {
padding: 17px;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px
}
#quotation-page .quotePreviewTop {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line)
}
#quotation-page .quotePreviewTop strong {
font-size: 16px;
line-height: 1.4;
display: block;
color: var(--navy)
}
#quotation-page .quotePreviewTop small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px
}
#quotation-page .quotePreviewBody {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding: 16px 0;
font-size: 11px;
line-height: 1.6;
color: var(--muted)
}
#quotation-page .quotePreviewBody strong {
color: var(--navy)
}
#quotation-page .quoteSignature {
display: flex;
align-items: center;
gap: 11px;
background: var(--sky2);
border: 1px dashed #BCD8E7;
border-radius: 9px;
padding: 12px;
font-size: 10px;
color: var(--muted)
}
#quotation-page .quoteSignature strong {
display: block;
font-size: 11px;
color: var(--navy);
margin-bottom: 3px
}
#quotation-page .quoteSignature>.quotation-on-the-go .icon {
color: var(--navy);
flex-shrink: 0
}
#quotation-page .quoteShareRows {
display: grid;
gap: 9px;
margin-top: 13px
}
#quotation-page .quoteShareRow {
display: flex;
align-items: center;
gap: 11px;
padding: 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px
}
#quotation-page .quoteShareRow>.quotation-on-the-go .icon {
color: var(--navy);
width: 20px;
height: 20px;
flex-shrink: 0
}
#quotation-page .quoteShareRow>div {
flex: 1;
min-width: 0
}
#quotation-page .quoteShareRow strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: var(--navy)
}
#quotation-page .quoteShareRow small {
display: block;
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 3px
}
#quotation-page .quoteSteps {
display: grid;
gap: 10px
}
#quotation-page .quoteStep {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px
}
#quotation-page .quoteStep>b {
display: grid;
place-items: center;
width: 32px;
height: 32px;
background: var(--sky);
color: var(--navy);
border-radius: 9px;
font-size: 11px
}
#quotation-page .quoteStep strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy)
}
#quotation-page .quoteStep small {
display: block;
font-size: 10px;
line-height: 1.55;
color: var(--muted);
margin-top: 3px
}
#quotation-page .quoteStep.done {
background: #F3FBF7;
border-color: #C1E3D2
}
#quotation-page .quoteStep.done>b {
background: #DBF0E5;
color: #116746
}
#quotation-page .quoteConversion {
margin-top: 13px;
padding: 15px;
border: 1px solid #2A495A;
border-radius: 11px;
background: #0D2535;
color: #fff;
font-size: 12px;
line-height: 1.6
}
#quotation-page .quoteConversion strong {
display: block;
color: var(--yellow);
font-size: 14px;
margin-bottom: 3px
}
#quotation-page .quoteConversion span {
font-size: 10px;
color: #CEDBE4
}
#quotation-page .quoteReportSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px;
margin-top: 15px
}
#quotation-page .quoteReportSummary>div {
padding: 13px;
background: #171717;
border: 1px solid #353535;
border-radius: 11px
}
#quotation-page .quoteReportSummary strong {
display: block;
color: var(--yellow);
font-size: 12px
}
#quotation-page .quoteReportSummary span {
display: block;
font-size: 10px;
line-height: 1.6;
color: #CFD6DC;
margin-top: 5px
}
#quotation-page .quoteReviewLead {
font-size: 13px;
color: #CEDBE4;
margin: -5px 0 10px;
line-height: 1.65
}
@media(max-width:640px) {
#quotation-page .quoteMobileGrid {
gap: 12px;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr)
}
#quotation-page .quoteInfoCard {
padding: 10px
}
#quotation-page .quoteInfoCard strong {
font-size: 11px
}
#quotation-page .quoteInfoCard small {
font-size: 8px
}
#quotation-page .quoteInfoCard span {
font-size: 9px
}
#quotation-page .quoteItems th,
#quotation-page .quoteItems td {
padding: 11px 7px
}
#quotation-page .quoteItems th:first-child,
#quotation-page .quoteItems td:first-child {
padding-left: 10px
}
#quotation-page .quoteItems th:last-child,
#quotation-page .quoteItems td:last-child {
padding-right: 10px
}
#quotation-page .quotePreview {
padding: 13px
}
#quotation-page .quoteStep {
grid-template-columns: 29px minmax(0, 1fr);
padding: 12px;
gap: 8px 11px
}
#quotation-page .quoteStep>b {
width: 29px;
height: 29px
}
#quotation-page .quoteStep>.quotation-on-the-go .pill {
grid-column: 2;
justify-self: start
}
#quotation-page .quoteShareRow {
gap: 8px;
padding: 11px
}
#quotation-page .quoteShareRow>.quotation-on-the-go .pill {
font-size: 8px;
padding: 4px 6px
}
#quotation-page .quoteTemplate {
padding: 13px
}
}
@media(max-width:360px) {
#quotation-page .quoteMobileGrid {
grid-template-columns: 1fr
}
#quotation-page .quotePhoneSvg {
max-width: 190px
}
#quotation-page .quoteInfo {
grid-template-columns: 1fr
}
#quotation-page .quoteInfoCard strong {
font-size: 12px
}
#quotation-page .quoteInfoCard span {
font-size: 10px
}
#quotation-page .quotePreviewTop {
flex-wrap: wrap
}
#quotation-page .quoteItems th,
#quotation-page .quoteItems td {
font-size: 10px;
padding-inline: 5px
}
#quotation-page .quoteItems strong {
font-size: 10px
}
#quotation-page .quoteItems small {
font-size: 8px
}
#quotation-page .quoteReportSummary {
grid-template-columns: 1fr
}
}  .smart-analytics-and-reports .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.smart-analytics-and-reports .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.smart-analytics-and-reports .btn {
display: inline-flex;
min-height: 48px;
padding: 12px 22px;
gap: 10px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
font-size: 14px;
line-height: 1.4;
transition: transform .2s, background .2s;
text-align: center
}
.smart-analytics-and-reports .btn:hover {
transform: translateY(-2px)
}
.smart-analytics-and-reports .btn.black {
background: #0b0b0b;
color: #fff
}
.smart-analytics-and-reports .btn.black:hover {
background: #292929
}
.smart-analytics-and-reports .btn.yellow {
background: var(--yellow);
color: #000
}
.smart-analytics-and-reports .btn.yellow:hover {
background: #FFD454
}
.smart-analytics-and-reports .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.smart-analytics-and-reports .btn .icon2 {
width: 17px;
height: 17px
}
.smart-analytics-and-reports a:focus-visible,
.smart-analytics-and-reports summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.smart-analytics-and-reports .dark a:focus-visible,
.smart-analytics-and-reports .final a:focus-visible {
outline-color: var(--yellow)
}
.smart-analytics-and-reports .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.smart-analytics-and-reports .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.smart-analytics-and-reports .soft {
background: var(--sky2)
}
.smart-analytics-and-reports .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.smart-analytics-and-reports .dark h2,
.smart-analytics-and-reports .dark h3 {
color: #fff
}
.smart-analytics-and-reports .dark p {
color: #D6D6D6
}
.smart-analytics-and-reports .dark .ey {
background: var(--yellow)
}
.smart-analytics-and-reports .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.smart-analytics-and-reports .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.smart-analytics-and-reports .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.smart-analytics-and-reports .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.smart-analytics-and-reports .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.smart-analytics-and-reports .textLink .icon2 {
width: 16px;
height: 16px
}
.smart-analytics-and-reports .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.smart-analytics-and-reports .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.smart-analytics-and-reports .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.smart-analytics-and-reports .skipLink:focus {
top: 12px
} .smart-analytics-and-reports .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.smart-analytics-and-reports .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.smart-analytics-and-reports .heroGrid>*,
.smart-analytics-and-reports .feature>*,
.smart-analytics-and-reports .aiGrid>* {
min-width: 0
}
.smart-analytics-and-reports .hero h1 {
max-width: 580px
}
.smart-analytics-and-reports .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.smart-analytics-and-reports .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.smart-analytics-and-reports .heroVisual {
min-height: 555px;
position: relative
}
.smart-analytics-and-reports .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.smart-analytics-and-reports .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.smart-analytics-and-reports .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.smart-analytics-and-reports .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.smart-analytics-and-reports .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.smart-analytics-and-reports .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.smart-analytics-and-reports .brandTile .icon2 {
width: 17px;
height: 17px
}
.smart-analytics-and-reports .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.smart-analytics-and-reports .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.smart-analytics-and-reports .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.smart-analytics-and-reports .viewPills span {
padding: 4px 7px
}
.smart-analytics-and-reports .viewPills .active {
background: var(--navy);
color: #fff
}
.smart-analytics-and-reports .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.smart-analytics-and-reports .miniDates,
.smart-analytics-and-reports .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.smart-analytics-and-reports .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.smart-analytics-and-reports .miniDates>div:last-child {
border: 0
}
.smart-analytics-and-reports .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.smart-analytics-and-reports .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.smart-analytics-and-reports .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.smart-analytics-and-reports .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.smart-analytics-and-reports .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.smart-analytics-and-reports .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.smart-analytics-and-reports .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.smart-analytics-and-reports .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.smart-analytics-and-reports .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.smart-analytics-and-reports .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.smart-analytics-and-reports .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.smart-analytics-and-reports .boardFooter strong {
color: var(--navy)
}
.smart-analytics-and-reports .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.smart-analytics-and-reports .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.smart-analytics-and-reports .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.smart-analytics-and-reports .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.smart-analytics-and-reports .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.smart-analytics-and-reports .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.smart-analytics-and-reports .phoneHead small {
font-size: 9px;
color: #50697A
}
.smart-analytics-and-reports .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.smart-analytics-and-reports .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.smart-analytics-and-reports .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.smart-analytics-and-reports .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.smart-analytics-and-reports .phoneJob.current {
background: var(--sky2)
}
.smart-analytics-and-reports .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.smart-analytics-and-reports .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.smart-analytics-and-reports .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.smart-analytics-and-reports .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.smart-analytics-and-reports .lifecycleHead .icon2 {
color: var(--yellow);
width: 17px;
height: 17px
}
.smart-analytics-and-reports .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.smart-analytics-and-reports .lifecycleBody strong {
font-size: 12px
}
.smart-analytics-and-reports .lifecycleBody span {
color: #CEDBE4
}
.smart-analytics-and-reports .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.smart-analytics-and-reports .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .smart-analytics-and-reports .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.smart-analytics-and-reports .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.smart-analytics-and-reports .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.smart-analytics-and-reports .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.smart-analytics-and-reports .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.smart-analytics-and-reports .logo.adobe {
font-size: 20px
}
.smart-analytics-and-reports .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .smart-analytics-and-reports .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.smart-analytics-and-reports .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.smart-analytics-and-reports .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.smart-analytics-and-reports .outcome:nth-child(2):before {
background: var(--yellow)
}
.smart-analytics-and-reports .outcome:nth-child(3):before {
background: var(--green)
}
.smart-analytics-and-reports .outcome:nth-child(4):before {
background: var(--purple)
}
.smart-analytics-and-reports .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.smart-analytics-and-reports .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.smart-analytics-and-reports .outcome .icon2 {
color: var(--navy);
width: 24px;
height: 24px
} .smart-analytics-and-reports .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.smart-analytics-and-reports .feature.reverse .visual {
order: -1
}
.smart-analytics-and-reports .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.smart-analytics-and-reports .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.smart-analytics-and-reports .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.smart-analytics-and-reports .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.smart-analytics-and-reports .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.smart-analytics-and-reports .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.smart-analytics-and-reports .visual>* {
position: relative;
z-index: 2
}
.smart-analytics-and-reports .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.smart-analytics-and-reports .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.smart-analytics-and-reports .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.smart-analytics-and-reports .uiHeading .icon2 {
width: 19px;
height: 19px
}
.smart-analytics-and-reports .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.smart-analytics-and-reports .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.smart-analytics-and-reports .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.smart-analytics-and-reports .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.smart-analytics-and-reports .pill.green {
background: var(--greenbg);
color: #116746
}
.smart-analytics-and-reports .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.smart-analytics-and-reports .pill.gray {
background: #F0F3F5;
color: #586C79
}
.smart-analytics-and-reports .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .smart-analytics-and-reports .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.smart-analytics-and-reports .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.smart-analytics-and-reports .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.smart-analytics-and-reports .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.smart-analytics-and-reports .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.smart-analytics-and-reports .plannerRow:last-child {
border-bottom: 0
}
.smart-analytics-and-reports .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.smart-analytics-and-reports .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.smart-analytics-and-reports .avatar.green {
background: var(--greenbg);
color: #116746
}
.smart-analytics-and-reports .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.smart-analytics-and-reports .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.smart-analytics-and-reports .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.smart-analytics-and-reports .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.smart-analytics-and-reports .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.smart-analytics-and-reports .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.smart-analytics-and-reports .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.smart-analytics-and-reports .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.smart-analytics-and-reports .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.smart-analytics-and-reports .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.smart-analytics-and-reports .pending .icon2 {
width: 18px;
height: 18px;
color: var(--navy)
}
.smart-analytics-and-reports .pending strong {
font-size: 11px;
color: var(--navy)
}
.smart-analytics-and-reports .pending .pill {
margin-left: auto
}
.smart-analytics-and-reports .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.smart-analytics-and-reports .legend span {
display: flex;
align-items: center;
gap: 4px
}
.smart-analytics-and-reports .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.smart-analytics-and-reports .legend .green i {
background: var(--green)
}
.smart-analytics-and-reports .legend .yellow i {
background: #D7A200
} .smart-analytics-and-reports .roster {
display: grid;
gap: 10px
}
.smart-analytics-and-reports .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.smart-analytics-and-reports .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.smart-analytics-and-reports .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.smart-analytics-and-reports .rosterName {
flex: 1;
min-width: 0
}
.smart-analytics-and-reports .rosterName strong {
display: block;
font-size: 11px
}
.smart-analytics-and-reports .rosterName small {
color: var(--muted);
font-size: 9px
}
.smart-analytics-and-reports .rosterTop .pill {
font-size: 8px
}
.smart-analytics-and-reports .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.smart-analytics-and-reports .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.smart-analytics-and-reports .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.smart-analytics-and-reports .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.smart-analytics-and-reports .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.smart-analytics-and-reports .rosterNote .icon2 {
width: 19px;
height: 19px
}
.smart-analytics-and-reports .rosterNote strong {
display: block;
margin-bottom: 3px
} .smart-analytics-and-reports .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.smart-analytics-and-reports .ruleCard .uiLabel {
color: #9CBED1
}
.smart-analytics-and-reports .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.smart-analytics-and-reports .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.smart-analytics-and-reports .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.smart-analytics-and-reports .workCards {
display: grid;
gap: 9px
}
.smart-analytics-and-reports .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.smart-analytics-and-reports .workCard strong {
display: block;
font-size: 11px
}
.smart-analytics-and-reports .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.smart-analytics-and-reports .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.smart-analytics-and-reports .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.smart-analytics-and-reports .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.smart-analytics-and-reports .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.smart-analytics-and-reports .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.smart-analytics-and-reports .modeRow .icon2 {
width: 14px;
height: 14px
} .smart-analytics-and-reports .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.smart-analytics-and-reports .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.smart-analytics-and-reports .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.smart-analytics-and-reports .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.smart-analytics-and-reports .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.smart-analytics-and-reports .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.smart-analytics-and-reports .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.smart-analytics-and-reports .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.smart-analytics-and-reports .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.smart-analytics-and-reports .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.smart-analytics-and-reports .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.smart-analytics-and-reports .lookupSide {
display: grid;
gap: 11px
}
.smart-analytics-and-reports .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.smart-analytics-and-reports .lookupCard .icon2 {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.smart-analytics-and-reports .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.smart-analytics-and-reports .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.smart-analytics-and-reports .lookupCard.done {
border-left: 3px solid var(--green)
} .smart-analytics-and-reports .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.smart-analytics-and-reports .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.smart-analytics-and-reports .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.smart-analytics-and-reports .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.smart-analytics-and-reports .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.smart-analytics-and-reports .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.smart-analytics-and-reports .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.smart-analytics-and-reports .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.smart-analytics-and-reports .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.smart-analytics-and-reports .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .smart-analytics-and-reports .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.smart-analytics-and-reports .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.smart-analytics-and-reports .connectedCard .icon2 {
color: var(--navy);
margin-bottom: 17px
}
.smart-analytics-and-reports .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.smart-analytics-and-reports .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.smart-analytics-and-reports .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.smart-analytics-and-reports .connectedCard .textLink .icon2 {
margin: 0;
width: 14px;
height: 14px
} .smart-analytics-and-reports .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.smart-analytics-and-reports .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.smart-analytics-and-reports .featureCard:hover {
transform: translateY(-3px)
}
.smart-analytics-and-reports .featureIcon,
.smart-analytics-and-reports .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.smart-analytics-and-reports .featureIcon .icon2,
.smart-analytics-and-reports .useIcon .icon2 {
width: 22px;
height: 22px
}
.smart-analytics-and-reports .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.smart-analytics-and-reports .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .smart-analytics-and-reports .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.smart-analytics-and-reports .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.smart-analytics-and-reports .integration .icon2 {
width: 21px;
height: 21px;
color: var(--navy)
}
.smart-analytics-and-reports .integration:hover {
background: var(--sky2)
}
.smart-analytics-and-reports .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.smart-analytics-and-reports .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.smart-analytics-and-reports .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.smart-analytics-and-reports .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.smart-analytics-and-reports .stream .icon2 {
width: 17px;
height: 17px;
color: var(--yellow)
}
.smart-analytics-and-reports .stream>span[aria-hidden] {
color: #86B2C9
} .smart-analytics-and-reports .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.smart-analytics-and-reports .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.smart-analytics-and-reports .useCase h3 {
font-size: 20px
}
.smart-analytics-and-reports .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.smart-analytics-and-reports .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.smart-analytics-and-reports .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.smart-analytics-and-reports .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.smart-analytics-and-reports .review h3 {
font-size: 22px
}
.smart-analytics-and-reports .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.smart-analytics-and-reports .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.smart-analytics-and-reports .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.smart-analytics-and-reports .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.smart-analytics-and-reports .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.smart-analytics-and-reports .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.smart-analytics-and-reports .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.smart-analytics-and-reports .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.smart-analytics-and-reports .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .smart-analytics-and-reports .faq {
max-width: 900px
}
.smart-analytics-and-reports .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.smart-analytics-and-reports .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.smart-analytics-and-reports .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.smart-analytics-and-reports .faq summary::marker {
color: var(--navy)
}
.smart-analytics-and-reports .faq details[open] {
border-color: #A9D3E7
}
.smart-analytics-and-reports .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .smart-analytics-and-reports .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.smart-analytics-and-reports .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.smart-analytics-and-reports .cta h3 {
font-size: 19px
}
.smart-analytics-and-reports .cta.darkCta h3 {
color: #fff
}
.smart-analytics-and-reports .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.smart-analytics-and-reports .cta.darkCta p {
color: #D1D1D1
}
.smart-analytics-and-reports .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.smart-analytics-and-reports .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.smart-analytics-and-reports .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.smart-analytics-and-reports .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.smart-analytics-and-reports .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.smart-analytics-and-reports .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.smart-analytics-and-reports .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.heroGrid {
gap: 28px
}
h1 {
font-size: 56px
}
.hero .lead {
font-size: 17px
}
.assetPhone {
width: 168px;
top: 235px
}
.lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.scheduleBoard {
width: 96%;
left: 0
}
.miniJob {
padding: 4px
}
.heroVisual,
.assetStage {
min-height: 555px
}
.mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.visual {
padding: 17px
}
.plannerTicks,
.plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.plannerRow {
grid-template-columns: 75px 1fr
}
.person {
font-size: 9px;
padding: 10px 5px
}
.person .avatar {
display: none
}
}
@media(max-width:960px) {
.smart-analytics-and-reports .heroGrid,
.smart-analytics-and-reports .feature,
.smart-analytics-and-reports .aiGrid,
.smart-analytics-and-reports .final {
grid-template-columns: 1fr
}
.smart-analytics-and-reports .heroGrid {
gap: 36px
}
.smart-analytics-and-reports .hero h1 {
max-width: 760px
}
.smart-analytics-and-reports .hero .lead {
max-width: 750px
}
.smart-analytics-and-reports .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.smart-analytics-and-reports .assetStage {
margin: auto
}
.smart-analytics-and-reports .feature.reverse .visual {
order: 0
}
.smart-analytics-and-reports .feature {
gap: 30px
}
.smart-analytics-and-reports .feature>div:first-child {
max-width: 800px
}
.smart-analytics-and-reports .outcomes,
.smart-analytics-and-reports .featureGrid,
.smart-analytics-and-reports .connectedGrid,
.smart-analytics-and-reports .useCases {
grid-template-columns: repeat(2, 1fr)
}
.smart-analytics-and-reports .logos {
grid-template-columns: repeat(3, 1fr)
}
.smart-analytics-and-reports .integrations {
grid-template-columns: repeat(3, 1fr)
}
.smart-analytics-and-reports .reviews {
grid-template-columns: 1fr
}
.smart-analytics-and-reports .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.smart-analytics-and-reports .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.smart-analytics-and-reports .ratingItem:nth-child(2) {
border: 0
}
.smart-analytics-and-reports .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.smart-analytics-and-reports .final .btn {
min-width: 195px
}
.smart-analytics-and-reports .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.smart-analytics-and-reports .aiGrid {
gap: 30px
}
.smart-analytics-and-reports .aiMini {
max-width: 760px
}
.smart-analytics-and-reports .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.smart-analytics-and-reports .wrap {
width: calc(100% - 24px)
}
.smart-analytics-and-reports section {
padding: 56px 0
}
.smart-analytics-and-reports .hero {
padding: 32px 0 42px
}
.smart-analytics-and-reports h1 {
font-size: 42px
}
.smart-analytics-and-reports h2 {
font-size: 34px
}
.smart-analytics-and-reports .lead {
font-size: 17px
}
.smart-analytics-and-reports .sectionHead p {
font-size: 16px
}
.smart-analytics-and-reports .sectionHead {
margin-bottom: 28px
}
.smart-analytics-and-reports .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.smart-analytics-and-reports .heroGrid {
gap: 24px
}
.smart-analytics-and-reports .hero .actions {
gap: 8px
}
.smart-analytics-and-reports .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.smart-analytics-and-reports .micro {
font-size: 11px
}
.smart-analytics-and-reports .heroPills {
gap: 6px
}
.smart-analytics-and-reports .heroPills span {
font-size: 9px
}
.smart-analytics-and-reports .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.smart-analytics-and-reports .heroVisual {
min-height: 525px
}
.smart-analytics-and-reports .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.smart-analytics-and-reports .assetStage:before {
inset: 38px 0 28px 10px
}
.smart-analytics-and-reports .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.smart-analytics-and-reports .boardHeader {
padding: 12px
}
.smart-analytics-and-reports .boardBrand {
font-size: 12px
}
.smart-analytics-and-reports .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.smart-analytics-and-reports .miniCalendar {
margin: 0 10px 12px
}
.smart-analytics-and-reports .miniDates,
.smart-analytics-and-reports .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.smart-analytics-and-reports .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.smart-analytics-and-reports .miniPerson small {
font-size: 7px
}
.smart-analytics-and-reports .miniCell {
padding: 4px 3px
}
.smart-analytics-and-reports .miniDates>div {
font-size: 8px
}
.smart-analytics-and-reports .miniDates small {
font-size: 7px
}
.smart-analytics-and-reports .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.smart-analytics-and-reports .miniJob b {
font-size: 7px
}
.smart-analytics-and-reports .miniRow {
min-height: 57px
}
.smart-analytics-and-reports .miniJob {
min-height: 48px
}
.smart-analytics-and-reports .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.smart-analytics-and-reports .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.smart-analytics-and-reports .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.smart-analytics-and-reports .phoneHead strong {
font-size: 11px
}
.smart-analytics-and-reports .phoneHead small {
font-size: 8px
}
.smart-analytics-and-reports .phoneAgenda {
padding: 8px;
gap: 6px
}
.smart-analytics-and-reports .phoneJob {
padding: 7px;
font-size: 8px
}
.smart-analytics-and-reports .phoneJob strong {
font-size: 9px
}
.smart-analytics-and-reports .phoneJob small {
font-size: 7px
}
.smart-analytics-and-reports .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.smart-analytics-and-reports .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.smart-analytics-and-reports .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.smart-analytics-and-reports .lifecycleHead .icon2 {
width: 15px;
height: 15px
}
.smart-analytics-and-reports .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.smart-analytics-and-reports .lifecycleBody strong {
font-size: 10px
}
.smart-analytics-and-reports .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.smart-analytics-and-reports .diagramCaption {
font-size: 9px
}
.smart-analytics-and-reports .trust {
padding: 23px 0
}
.smart-analytics-and-reports .trustLabel {
font-size: 12px
}
.smart-analytics-and-reports .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.smart-analytics-and-reports .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.smart-analytics-and-reports .logo.dhl {
font-size: 19px
}
.smart-analytics-and-reports .logo.adobe {
font-size: 17px
}
.smart-analytics-and-reports .logo.golden {
font-size: 8px
}
.smart-analytics-and-reports .fl,
.smart-analytics-and-reports .outcomes,
.smart-analytics-and-reports .featureGrid,
.smart-analytics-and-reports .connectedGrid,
.smart-analytics-and-reports .useCases {
grid-template-columns: 1fr
}
.smart-analytics-and-reports .fi {
font-size: 14px
}
.smart-analytics-and-reports .outcome {
padding: 21px
}
.smart-analytics-and-reports .outcome strong {
margin-top: 12px
}
.smart-analytics-and-reports .outcome span {
font-size: 14px
}
.smart-analytics-and-reports .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.smart-analytics-and-reports .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.smart-analytics-and-reports .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.smart-analytics-and-reports .uiSub {
font-size: 9px
}
.smart-analytics-and-reports .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.smart-analytics-and-reports .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.smart-analytics-and-reports .person {
font-size: 9px;
padding: 8px 6px
}
.smart-analytics-and-reports .person .avatar {
display: none
}
.smart-analytics-and-reports .person small {
font-size: 8px
}
.smart-analytics-and-reports .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.smart-analytics-and-reports .slot strong {
font-size: 8px
}
.smart-analytics-and-reports .plannerHead {
font-size: 10px;
padding: 10px
}
.smart-analytics-and-reports .plannerHead .pill {
font-size: 8px
}
.smart-analytics-and-reports .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.smart-analytics-and-reports .pending strong {
font-size: 10px
}
.smart-analytics-and-reports .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.smart-analytics-and-reports .rosterTop .pill {
font-size: 8px
}
.smart-analytics-and-reports .rosterCard {
padding: 11px
}
.smart-analytics-and-reports .rosterNote {
padding: 11px;
font-size: 10px
}
.smart-analytics-and-reports .ruleCard {
padding: 14px
}
.smart-analytics-and-reports .ruleCard strong {
font-size: 15px
}
.smart-analytics-and-reports .workCard {
padding: 10px;
gap: 8px
}
.smart-analytics-and-reports .workCard strong {
font-size: 10px
}
.smart-analytics-and-reports .workCard small {
font-size: 8px
}
.smart-analytics-and-reports .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.smart-analytics-and-reports .modeRow span {
font-size: 8px;
padding: 7px
}
.smart-analytics-and-reports .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.smart-analytics-and-reports .phoneMockInner {
padding: 11px;
min-height: 288px
}
.smart-analytics-and-reports .lookupCard {
padding: 10px
}
.smart-analytics-and-reports .lookupCard strong {
font-size: 10px
}
.smart-analytics-and-reports .lookupCard span {
font-size: 9px
}
.smart-analytics-and-reports .lookupCard .icon2 {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.smart-analytics-and-reports .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.smart-analytics-and-reports .aiMini div {
padding: 16px
}
.smart-analytics-and-reports .aiMini strong {
font-size: 14px
}
.smart-analytics-and-reports .aiMini span {
font-size: 13px
}
.smart-analytics-and-reports .promptBox {
padding: 18px;
border-radius: 17px
}
.smart-analytics-and-reports .prompt {
font-size: 13px;
padding: 13px
}
.smart-analytics-and-reports .promptHead {
font-size: 19px
}
.smart-analytics-and-reports .promptFoot {
font-size: 10px !important
}
.smart-analytics-and-reports .connectedCard {
padding: 22px
}
.smart-analytics-and-reports .connectedCard p,
.smart-analytics-and-reports .featureCard p,
.smart-analytics-and-reports .useCase p {
font-size: 14px
}
.smart-analytics-and-reports .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.smart-analytics-and-reports .integrations {
grid-template-columns: repeat(2, 1fr)
}
.smart-analytics-and-reports .integration:last-child {
grid-column: 1/-1
}
.smart-analytics-and-reports .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.smart-analytics-and-reports .stream>span[aria-hidden] {
display: none
}
.smart-analytics-and-reports .streamStep {
min-height: 24px
}
.smart-analytics-and-reports .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.smart-analytics-and-reports .ratingItem {
border: 0
}
.smart-analytics-and-reports .ratingLead {
margin-bottom: 3px
}
.smart-analytics-and-reports .review p {
font-size: 14px
}
.smart-analytics-and-reports .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.smart-analytics-and-reports .ctaBtns {
width: 100%
}
.smart-analytics-and-reports .ctaBtns .btn {
flex: 1
}
.smart-analytics-and-reports .cta p {
font-size: 14px
}
.smart-analytics-and-reports .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.smart-analytics-and-reports .final h2 {
font-size: 32px
}
.smart-analytics-and-reports .final p {
font-size: 15px
}
.smart-analytics-and-reports .final .ctaBtns {
flex-direction: column
}
.smart-analytics-and-reports .final .btn {
min-width: 0;
width: 100%
}
.smart-analytics-and-reports .faq details {
padding: 16px
}
.smart-analytics-and-reports .faq summary {
font-size: 14px
}
.smart-analytics-and-reports .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.smart-analytics-and-reports h1 {
font-size: 38px
}
.smart-analytics-and-reports h2 {
font-size: 31px
}
.smart-analytics-and-reports .heroVisual,
.smart-analytics-and-reports .assetStage {
height: 520px;
min-height: 520px
}
.smart-analytics-and-reports .assetPhone {
width: 152px;
top: 242px
}
.smart-analytics-and-reports .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.smart-analytics-and-reports .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.smart-analytics-and-reports .lifecycleBody {
padding: 8px;
font-size: 8px
}
.smart-analytics-and-reports .lifecycleBody strong {
font-size: 9px
}
.smart-analytics-and-reports .boardBrand {
font-size: 11px
}
.smart-analytics-and-reports .sampleBadge {
font-size: 8px
}
.smart-analytics-and-reports .miniDates,
.smart-analytics-and-reports .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.smart-analytics-and-reports .miniDates small {
font-size: 6px
}
.smart-analytics-and-reports .miniJob b {
font-size: 6.5px
}
.smart-analytics-and-reports .boardFooter {
padding-right: 135px;
min-height: 45px
}
.smart-analytics-and-reports .mobileLookup {
grid-template-columns: 1fr
}
.smart-analytics-and-reports .phoneMock {
width: 200px;
margin: auto
}
.smart-analytics-and-reports .lookupSide {
grid-template-columns: 1fr
}
.smart-analytics-and-reports .lookupCard {
padding: 13px
}
.smart-analytics-and-reports .lookupCard strong {
font-size: 12px
}
.smart-analytics-and-reports .lookupCard span {
font-size: 11px
}
.smart-analytics-and-reports .plannerHead {
gap: 5px
}
.smart-analytics-and-reports .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.smart-analytics-and-reports .plannerRow {
grid-template-columns: 61px 1fr
}
.smart-analytics-and-reports .uiHeading>span:first-child {
gap: 5px
}
.smart-analytics-and-reports .uiHeading .icon2 {
width: 17px;
height: 17px
}
}  .smart-analytics-and-reports #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
.smart-analytics-and-reports #connected-tools.fsmTools *,
.smart-analytics-and-reports #connected-tools.fsmTools *::before,
.smart-analytics-and-reports #connected-tools.fsmTools *::after {
box-sizing: border-box;
}
.smart-analytics-and-reports #connected-tools.fsmTools>.wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
.smart-analytics-and-reports #connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
.smart-analytics-and-reports #connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.smart-analytics-and-reports #connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
.smart-analytics-and-reports #connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:nth-child(2),
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} .smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__step::before,
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
.smart-analytics-and-reports #connected-tools.fsmTools {
padding: 52px 0;
}
.smart-analytics-and-reports #connected-tools.fsmTools>.wrap {
width: calc(100% - 32px);
}
.smart-analytics-and-reports #connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
.smart-analytics-and-reports #connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
.smart-analytics-and-reports #connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card,
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:nth-child(4),
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
.smart-analytics-and-reports #connected-tools.fsmTools h2 {
font-size: 30px;
}
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.smart-analytics-and-reports #connected-tools.fsmTools .fsmTools__card {
transition: none;
}
}   .smart-analytics-and-reports .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
.smart-analytics-and-reports .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
.smart-analytics-and-reports .assetStage:before {
content: none
}
.smart-analytics-and-reports .salesHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
.smart-analytics-and-reports .hero .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
.smart-analytics-and-reports .ey {
max-width: 100%
}
.smart-analytics-and-reports .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
.smart-analytics-and-reports .uiHeading>span:first-child {
min-width: 0
}
.smart-analytics-and-reports .uiHeading .icon2 {
flex-shrink: 0
}
.smart-analytics-and-reports .salesPanel {
padding: 17px
}
.smart-analytics-and-reports .salesRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.smart-analytics-and-reports .salesRecordHead>span:first-child {
min-width: 0
}
.smart-analytics-and-reports .salesIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
.smart-analytics-and-reports .salesCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
.smart-analytics-and-reports .salesMeta {
display: grid;
gap: 8px
}
.smart-analytics-and-reports .salesMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
.smart-analytics-and-reports .salesMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
.smart-analytics-and-reports .salesMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.smart-analytics-and-reports .salesRows {
padding: 0 14px
}
.smart-analytics-and-reports .salesRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
.smart-analytics-and-reports .salesRow:last-child {
border: 0
}
.smart-analytics-and-reports .salesRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.smart-analytics-and-reports .salesRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
.smart-analytics-and-reports .salesRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
.smart-analytics-and-reports .salesFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
.smart-analytics-and-reports .salesFoot strong {
color: var(--navy)
}
.smart-analytics-and-reports .salesAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
.smart-analytics-and-reports .salesAlert>.icon2 {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
.smart-analytics-and-reports .salesAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
.smart-analytics-and-reports .salesAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
.smart-analytics-and-reports .salesDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
.smart-analytics-and-reports .salesDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
.smart-analytics-and-reports .salesDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
.smart-analytics-and-reports .salesDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
.smart-analytics-and-reports .salesDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
.smart-analytics-and-reports .salesDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
.smart-analytics-and-reports .salesDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
.smart-analytics-and-reports .salesDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
.smart-analytics-and-reports .salesDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
.smart-analytics-and-reports .salesDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
.smart-analytics-and-reports .salesDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
.smart-analytics-and-reports .salesDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
.smart-analytics-and-reports .salesQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
.smart-analytics-and-reports .salesQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
.smart-analytics-and-reports .salesQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
.smart-analytics-and-reports .salesQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
.smart-analytics-and-reports .salesQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
.smart-analytics-and-reports .salesQueueBar span {
display: block;
height: 100%;
width: var(--sales-bar);
background: var(--brand);
border-radius: 6px
}
.smart-analytics-and-reports .salesQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
.smart-analytics-and-reports .salesTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
.smart-analytics-and-reports .salesTraceHead .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
.smart-analytics-and-reports .salesTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
.smart-analytics-and-reports .salesTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
.smart-analytics-and-reports .salesTraceHead .pill {
margin-left: auto
}
.smart-analytics-and-reports .salesTimeline {
padding: 17px 15px
}
.smart-analytics-and-reports .salesEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
.smart-analytics-and-reports .salesEvent:last-child {
padding-bottom: 0
}
.smart-analytics-and-reports .salesEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
.smart-analytics-and-reports .salesEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
.smart-analytics-and-reports .salesEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
.smart-analytics-and-reports .salesEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
.smart-analytics-and-reports .salesEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
.smart-analytics-and-reports .salesEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
.smart-analytics-and-reports .salesNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
.smart-analytics-and-reports .salesNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
.smart-analytics-and-reports .salesSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
.smart-analytics-and-reports .salesSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
.smart-analytics-and-reports .salesSource .icon2 {
color: var(--navy);
margin-bottom: 8px
}
.smart-analytics-and-reports .salesSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.smart-analytics-and-reports .salesSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
.smart-analytics-and-reports .salesConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
.smart-analytics-and-reports .salesConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
.smart-analytics-and-reports .salesHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
.smart-analytics-and-reports .salesHub strong {
display: block;
font-size: 18px
}
.smart-analytics-and-reports .salesHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
.smart-analytics-and-reports .salesHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
.smart-analytics-and-reports .salesHandoff>strong {
font-size: 13px;
color: var(--navy)
}
.smart-analytics-and-reports .salesHandoff>span:not(.pill) {
color: var(--muted)
}
.smart-analytics-and-reports .salesHandoff .salesHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
.smart-analytics-and-reports .salesScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
.smart-analytics-and-reports .salesScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
.smart-analytics-and-reports .salesComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
.smart-analytics-and-reports .salesComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
.smart-analytics-and-reports .salesComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
.smart-analytics-and-reports .salesComparison th,
.smart-analytics-and-reports .salesComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
.smart-analytics-and-reports .salesComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
.smart-analytics-and-reports .salesComparison tbody th {
font-size: 14px;
color: var(--navy)
}
.smart-analytics-and-reports .salesComparison tbody td {
color: var(--muted)
}
.smart-analytics-and-reports .salesComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
.smart-analytics-and-reports .salesNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
.smart-analytics-and-reports .salesNote strong {
color: var(--navy)
}
.smart-analytics-and-reports .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
.smart-analytics-and-reports .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
.smart-analytics-and-reports .heroVisual {
max-width: 480px
}
.smart-analytics-and-reports .salesIdentity {
gap: 12px
}
.smart-analytics-and-reports .salesMeta>div {
padding: 9px 10px
}
.smart-analytics-and-reports .salesMeta strong {
font-size: 11px
}
.smart-analytics-and-reports .salesRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
.smart-analytics-and-reports .salesRows {
padding: 0 11px
}
.smart-analytics-and-reports .salesRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
.smart-analytics-and-reports .salesRow strong {
font-size: 11px
}
.smart-analytics-and-reports .salesRow small {
font-size: 9px
}
.smart-analytics-and-reports .salesRow .pill {
font-size: 8px;
padding: 4px 6px
}
.smart-analytics-and-reports .salesDwell {
padding: 16px
}
.smart-analytics-and-reports .salesDwellMetrics {
gap: 12px
}
.smart-analytics-and-reports .salesDwellMetrics>div+div {
padding-left: 12px
}
.smart-analytics-and-reports .salesDwellMetrics b {
font-size: 32px
}
.smart-analytics-and-reports .salesDwellMetrics span {
font-size: 10px
}
.smart-analytics-and-reports .salesQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
.smart-analytics-and-reports .salesTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
.smart-analytics-and-reports .salesTraceHead strong {
font-size: 12px
}
.smart-analytics-and-reports .salesTraceHead .pill {
font-size: 8px
}
.smart-analytics-and-reports .salesTimeline {
padding: 15px 12px
}
.smart-analytics-and-reports .salesSources {
gap: 8px
}
.smart-analytics-and-reports .salesSource {
padding: 12px
}
.smart-analytics-and-reports .salesHandoff {
padding: 13px;
gap: 10px
}
.smart-analytics-and-reports .salesHandoff>strong {
font-size: 12px
}
.smart-analytics-and-reports .salesComparison,
.smart-analytics-and-reports .salesComparison tbody,
.smart-analytics-and-reports .salesComparison tr,
.smart-analytics-and-reports .salesComparison th,
.smart-analytics-and-reports .salesComparison td {
display: block;
width: 100%
}
.smart-analytics-and-reports .salesComparison colgroup {
display: none
}
.smart-analytics-and-reports .salesComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
.smart-analytics-and-reports .salesComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
.smart-analytics-and-reports .salesComparison th,
.smart-analytics-and-reports .salesComparison td {
padding: 10px 16px
}
.smart-analytics-and-reports .salesComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
.smart-analytics-and-reports .salesComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
.smart-analytics-and-reports .salesComparison tbody tr+tr>* {
border: 0
}
.smart-analytics-and-reports .salesComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
.smart-analytics-and-reports .salesComparison tbody td:last-child {
padding-bottom: 18px
}
.smart-analytics-and-reports .salesNote {
padding: 17px
}
}
@media(max-width:360px) {
.smart-analytics-and-reports .salesIdentity {
grid-template-columns: 1fr
}
.smart-analytics-and-reports .salesCarrierSvg {
max-width: 170px
}
.smart-analytics-and-reports .salesMeta {
grid-template-columns: 1fr 1fr
}
.smart-analytics-and-reports .salesMeta>div:last-child {
grid-column: 1/-1
}
.smart-analytics-and-reports .salesRow {
grid-template-columns: 33px minmax(0, 1fr)
}
.smart-analytics-and-reports .salesRow .pill {
grid-column: 2;
justify-self: start
}
.smart-analytics-and-reports .salesDwellLegend {
font-size: 8px
}
.smart-analytics-and-reports .salesQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
.smart-analytics-and-reports .salesTraceHead .pill {
margin-left: 47px
}
.smart-analytics-and-reports .salesHandoff {
grid-template-columns: 1fr
}
.smart-analytics-and-reports .salesHandoff .pill {
justify-self: start
}
} @media screen { .ey,
.ey * {
color: #0B0B0B !important;
-webkit-text-fill-color: currentColor !important;
}
.faq summary,
.faq summary * {
color: #063B5C !important;
-webkit-text-fill-color: currentColor !important;
}
.faq summary::marker {
color: #063B5C !important;
}
}  .smart-analytics-and-reports .analyticsHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 620 / 555;
overflow: visible
}
.smart-analytics-and-reports .analyticsChartSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 440 / 205
}
.smart-analytics-and-reports .analyticsPad {
padding: 16px
}
.smart-analytics-and-reports .analyticsStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 15px
}
.smart-analytics-and-reports .analyticsStat {
padding: 13px 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
text-align: center;
min-width: 0
}
.smart-analytics-and-reports .analyticsStat b {
font-size: 27px;
font-weight: 850;
line-height: 1.2;
color: var(--navy);
display: block;
font-variant-numeric: tabular-nums;
letter-spacing: -.035em
}
.smart-analytics-and-reports .analyticsStat span {
display: block;
margin-top: 5px;
font-size: 10px;
line-height: 1.45;
color: var(--muted)
}
.smart-analytics-and-reports .analyticsStat.green {
background: var(--greenbg);
border-color: #C5E6D8
}
.smart-analytics-and-reports .analyticsStat.green b {
color: #116746
}
.smart-analytics-and-reports .analyticsStat.yellow {
background: var(--yellowsoft);
border-color: #EDD98C
}
.smart-analytics-and-reports .analyticsStat.yellow b {
color: #745604
}
.smart-analytics-and-reports .analyticsCaption {
font-size: 10px;
line-height: 1.65;
color: var(--muted);
margin: 11px 0 0
}
.smart-analytics-and-reports .analyticsMiniTabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
background: var(--sky2)
}
.smart-analytics-and-reports .analyticsMiniTabs span {
font-size: 10px;
color: var(--navy);
font-weight: 750;
padding: 5px 9px;
border-radius: 6px;
border: 1px solid var(--line);
background: #fff
}
.smart-analytics-and-reports .analyticsMiniTabs .active {
background: var(--navy);
color: #fff;
border-color: var(--navy)
}
.smart-analytics-and-reports .analyticsPipeline {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 14px
}
.smart-analytics-and-reports .analyticsStage {
padding: 14px 11px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
background: #fff;
border-radius: 10px;
min-width: 0
}
.smart-analytics-and-reports .analyticsStage:nth-child(2) {
border-top-color: var(--yellow)
}
.smart-analytics-and-reports .analyticsStage:nth-child(3) {
border-top-color: var(--green)
}
.smart-analytics-and-reports .analyticsStage small {
font-size: 10px;
line-height: 1.5;
color: var(--muted);
display: block;
margin-bottom: 9px
}
.smart-analytics-and-reports .analyticsStage b {
font-size: 26px;
line-height: 1.2;
color: var(--navy);
display: block;
letter-spacing: -.035em
}
.smart-analytics-and-reports .analyticsStage span {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
display: block;
margin-top: 6px
}
.smart-analytics-and-reports .analyticsDeal {
padding: 16px
}
.smart-analytics-and-reports .analyticsDealName {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px
}
.smart-analytics-and-reports .analyticsDealName .avatar {
width: 36px;
height: 36px;
flex-basis: 36px;
font-size: 11px
}
.smart-analytics-and-reports .analyticsDealName strong {
display: block;
color: var(--navy);
font-size: 14px
}
.smart-analytics-and-reports .analyticsDealName small {
display: block;
color: var(--muted);
font-size: 10px;
margin-top: 3px
}
.smart-analytics-and-reports .analyticsDealFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px
}
.smart-analytics-and-reports .analyticsDealFacts>div {
border: 1px solid var(--line);
background: var(--sky2);
border-radius: 8px;
padding: 10px
}
.smart-analytics-and-reports .analyticsDealFacts small {
font-size: 9px;
color: var(--muted);
display: block
}
.smart-analytics-and-reports .analyticsDealFacts strong {
font-size: 12px;
color: var(--navy);
display: block;
margin-top: 4px;
line-height: 1.5
}
.smart-analytics-and-reports .analyticsTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 11px;
line-height: 1.6;
text-align: left
}
.smart-analytics-and-reports .analyticsTable th {
padding: 11px 9px;
background: var(--sky2);
color: var(--navy);
font-weight: 800;
border-bottom: 1px solid var(--line);
font-size: 10px
}
.smart-analytics-and-reports .analyticsTable td {
padding: 13px 9px;
border-bottom: 1px solid var(--line);
color: var(--ink);
vertical-align: middle;
overflow-wrap: anywhere
}
.smart-analytics-and-reports .analyticsTable tbody tr:last-child td {
border-bottom: 0
}
.smart-analytics-and-reports .analyticsTable strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.5
}
.smart-analytics-and-reports .analyticsTable small {
display: block;
color: var(--muted);
font-size: 9px;
margin-top: 3px;
line-height: 1.5
}
.smart-analytics-and-reports .analyticsTable .num {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 750;
color: var(--navy)
}
.smart-analytics-and-reports .analyticsLegend {
display: flex;
gap: 13px;
flex-wrap: wrap;
margin-top: 12px;
color: var(--muted);
font-size: 10px;
line-height: 1.5
}
.smart-analytics-and-reports .analyticsLegend span {
display: flex;
align-items: center;
gap: 6px
}
.smart-analytics-and-reports .analyticsLegend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.smart-analytics-and-reports .analyticsLegend .yellow i {
background: #D5A819
}
.smart-analytics-and-reports .analyticsLegend .green i {
background: var(--green)
}
.smart-analytics-and-reports .analyticsExport {
margin-top: 13px;
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
flex-wrap: wrap
}
.smart-analytics-and-reports .analyticsExport>.icon2 {
color: var(--navy);
flex-shrink: 0
}
.smart-analytics-and-reports .analyticsExport>div {
flex: 1;
min-width: 125px
}
.smart-analytics-and-reports .analyticsExport strong {
display: block;
color: var(--navy);
font-size: 12px
}
.smart-analytics-and-reports .analyticsExport small {
display: block;
color: var(--muted);
font-size: 10px;
margin-top: 2px
}
.smart-analytics-and-reports .analyticsFormats {
display: flex;
gap: 6px;
flex: 0 0 auto
}
.smart-analytics-and-reports .analyticsFormats span {
padding: 5px 9px;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--navy);
font-weight: 800;
font-size: 10px
}
.smart-analytics-and-reports .analyticsReportSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 16px
}
.smart-analytics-and-reports .analyticsReportSummary>div {
padding: 12px;
border: 1px solid #354047;
border-radius: 9px;
background: #172028
}
.smart-analytics-and-reports .analyticsReportSummary strong {
display: block;
color: #FFC928;
font-size: 12px;
line-height: 1.4
}
.smart-analytics-and-reports .analyticsReportSummary span {
display: block;
color: #D0DAE2;
font-size: 10px;
line-height: 1.5;
margin-top: 5px
}
.smart-analytics-and-reports .analyticsReportLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 15px;
color: var(--navy);
font-size: 11px
}
.smart-analytics-and-reports .analyticsReportLinks a {
text-decoration: underline;
text-underline-offset: 3px
}
.smart-analytics-and-reports .analyticsReportLinks a:hover {
color: var(--brand2)
}
.smart-analytics-and-reports .salesComparison td:before {
white-space: normal
}
@media(max-width:640px) {
.smart-analytics-and-reports .analyticsPad,
.smart-analytics-and-reports .analyticsDeal {
padding: 12px
}
.smart-analytics-and-reports .analyticsStats {
gap: 6px
}
.smart-analytics-and-reports .analyticsStat {
padding: 12px 5px
}
.smart-analytics-and-reports .analyticsStat b {
font-size: 24px
}
.smart-analytics-and-reports .analyticsStat span {
font-size: 9px
}
.smart-analytics-and-reports .analyticsPipeline {
gap: 6px
}
.smart-analytics-and-reports .analyticsStage {
padding: 12px 7px
}
.smart-analytics-and-reports .analyticsStage b {
font-size: 24px
}
.smart-analytics-and-reports .analyticsTable th,
.smart-analytics-and-reports .analyticsTable td {
padding: 10px 6px;
font-size: 10px
}
.smart-analytics-and-reports .analyticsTable th {
font-size: 9px
}
.smart-analytics-and-reports .analyticsTable strong {
font-size: 10px
}
.smart-analytics-and-reports .analyticsTable small {
font-size: 8px
}
.smart-analytics-and-reports .analyticsExport {
gap: 10px;
padding: 12px
}
.smart-analytics-and-reports .analyticsReportSummary {
grid-template-columns: 1fr
}
}
@media(max-width:360px) {
.smart-analytics-and-reports .analyticsDealFacts {
gap: 7px
}
.smart-analytics-and-reports .analyticsDealFacts>div {
padding: 9px 8px
}
.smart-analytics-and-reports .analyticsDealFacts strong {
font-size: 11px
}
.smart-analytics-and-reports .analyticsExport>.icon2 {
display: none
}
}  .invoicing-payment-collection .ey {
display: inline-flex;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 18px;
line-height: 1.5
}
.invoicing-payment-collection .lead {
font-size: 18px;
color: var(--muted);
margin-top: 20px;
max-width: 760px
}
.invoicing-payment-collection .dark a:focus-visible,
.invoicing-payment-collection .final a:focus-visible {
outline-color: var(--yellow)
}
.invoicing-payment-collection .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 27px
}
.invoicing-payment-collection .micro {
font-size: 12px;
color: var(--muted);
margin-top: 14px
}
.invoicing-payment-collection .soft {
background: var(--sky2)
}
.invoicing-payment-collection .dark {
background: linear-gradient(135deg, var(--black), var(--black2));
color: #fff;
border-top: 4px solid var(--yellow)
}
.invoicing-payment-collection .dark h2,
.invoicing-payment-collection .dark h3 {
color: #fff
}
.invoicing-payment-collection .dark p {
color: #D6D6D6
}
.invoicing-payment-collection .dark .ey {
background: var(--yellow)
}
.invoicing-payment-collection .sectionHead {
max-width: 830px;
margin-bottom: 38px
}
.invoicing-payment-collection .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.invoicing-payment-collection .sectionHead p {
color: var(--muted);
font-size: 17px;
margin-top: 15px
}
.invoicing-payment-collection .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0 !important;
background: transparent !important;
}
.invoicing-payment-collection .textLink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--navy);
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--yellow);
padding-bottom: 3px;
line-height: 1.5
}
.invoicing-payment-collection .textLink .icon {
width: 16px;
height: 16px
}
.invoicing-payment-collection .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.5
}
.invoicing-payment-collection .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.invoicing-payment-collection .skipLink {
position: absolute;
top: -80px;
left: 20px;
z-index: 100;
padding: 12px 18px;
background: #0B0B0B;
color: #fff;
border-radius: 8px
}
.invoicing-payment-collection .skipLink:focus {
top: 12px
} .invoicing-payment-collection .hero {
padding: 52px 0 68px;
background: radial-gradient(circle at 78% 18%, rgba(0, 168, 248, .22), transparent 28%), radial-gradient(circle at 93% 70%, rgba(255, 201, 40, .16), transparent 20%), linear-gradient(180deg, #fff, #EFF9FE);
overflow: hidden
}
.invoicing-payment-collection .heroGrid {
display: grid;
grid-template-columns: .96fr 1.04fr;
gap: 44px;
align-items: center
}
.invoicing-payment-collection .heroGrid>*,
.invoicing-payment-collection .feature>*,
.invoicing-payment-collection .aiGrid>* {
min-width: 0
}
.invoicing-payment-collection .hero h1 {
max-width: 580px
}
.invoicing-payment-collection .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 16px
}
.invoicing-payment-collection .heroPills span {
padding: 6px 9px;
border: 1px solid #C8E8F7;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
.invoicing-payment-collection .heroVisual {
min-height: 555px;
position: relative
}
.invoicing-payment-collection .assetStage {
height: 555px;
position: relative;
max-width: 620px;
margin-left: auto
}
.invoicing-payment-collection .assetStage:before {
content: "";
position: absolute;
inset: 50px 0 32px 28px;
border-radius: 34px;
background: linear-gradient(rgba(0, 168, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0
}
.invoicing-payment-collection .scheduleBoard {
position: absolute;
left: 0;
top: 45px;
width: 88%;
z-index: 2;
border: 1px solid #C4DDE9;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 32px rgba(6, 59, 92, .09);
overflow: hidden
}
.invoicing-payment-collection .boardHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 17px;
border-bottom: 1px solid var(--line);
background: #fff
}
.invoicing-payment-collection .boardBrand {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em
}
.invoicing-payment-collection .brandTile {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--brand);
color: #fff
}
.invoicing-payment-collection .brandTile .icon {
width: 17px;
height: 17px
}
.invoicing-payment-collection .sampleBadge {
font-size: 9px;
font-weight: 700;
color: #526776;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 6px
}
.invoicing-payment-collection .boardToolbar {
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800
}
.invoicing-payment-collection .viewPills {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-size: 9px;
font-weight: 700
}
.invoicing-payment-collection .viewPills span {
padding: 4px 7px
}
.invoicing-payment-collection .viewPills .active {
background: var(--navy);
color: #fff
}
.invoicing-payment-collection .miniCalendar {
margin: 0 14px 15px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden
}
.invoicing-payment-collection .miniDates,
.invoicing-payment-collection .miniRow {
display: grid;
grid-template-columns: 67px repeat(3, 1fr)
}
.invoicing-payment-collection .miniDates>div {
padding: 8px 3px;
text-align: center;
font-size: 9px;
font-weight: 800;
background: var(--sky2);
border-right: 1px solid var(--line)
}
.invoicing-payment-collection .miniDates>div:last-child {
border: 0
}
.invoicing-payment-collection .miniDates small {
display: block;
font-size: 8px;
font-weight: 500
}
.invoicing-payment-collection .miniRow {
min-height: 60px;
border-top: 1px solid var(--line)
}
.invoicing-payment-collection .miniPerson {
font-size: 9px;
font-weight: 800;
padding: 10px 6px;
line-height: 1.4;
background: #fff
}
.invoicing-payment-collection .miniPerson small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 2px
}
.invoicing-payment-collection .miniCell {
padding: 5px 4px;
border-left: 1px solid var(--line);
min-width: 0
}
.invoicing-payment-collection .miniJob {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 47px;
border-radius: 6px;
padding: 5px 5px;
border-left: 3px solid var(--brand);
background: #EAF8FF;
line-height: 1.4;
font-size: 8px;
color: #204C65
}
.invoicing-payment-collection .miniJob b {
font-size: 8px;
display: block;
letter-spacing: -.01em
}
.invoicing-payment-collection .miniJob.green {
background: var(--greenbg);
border-color: var(--green);
color: #145B44
}
.invoicing-payment-collection .miniJob.yellow {
background: var(--yellowsoft);
border-color: #DBAA14;
color: #6A5109
}
.invoicing-payment-collection .miniJob.gray {
background: #F3F4F6;
border-color: #98A5AF;
color: #5C6871
}
.invoicing-payment-collection .boardFooter {
background: var(--sky2);
font-size: 10px;
padding: 10px 15px;
color: var(--muted);
border-top: 1px solid var(--line)
}
.invoicing-payment-collection .boardFooter strong {
color: var(--navy)
}
.invoicing-payment-collection .assetPhone {
position: absolute;
right: 0;
top: 226px;
width: 192px;
z-index: 6;
background: #0C1D2A;
border: 1px solid #304858;
border-radius: 29px;
padding: 7px;
box-shadow: 0 12px 28px rgba(6, 59, 92, .15)
}
.invoicing-payment-collection .phoneScreen {
background: #fff;
border-radius: 22px;
overflow: hidden;
min-height: 286px
}
.invoicing-payment-collection .phoneTop {
height: 20px;
background: #0C1D2A;
display: flex;
align-items: center;
justify-content: center
}
.invoicing-payment-collection .notch {
width: 54px;
height: 5px;
border-radius: 99px;
background: #4E626F
}
.invoicing-payment-collection .phoneHead {
padding: 10px 11px;
background: linear-gradient(135deg, #E8F9FF, #FFF5D0);
border-bottom: 1px solid var(--line)
}
.invoicing-payment-collection .phoneHead strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.invoicing-payment-collection .phoneHead small {
font-size: 9px;
color: #50697A
}
.invoicing-payment-collection .phoneAgenda {
padding: 10px;
display: grid;
gap: 7px
}
.invoicing-payment-collection .phoneJob {
padding: 8px 9px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px;
font-size: 9px;
line-height: 1.5;
background: #fff
}
.invoicing-payment-collection .phoneJob strong {
display: block;
font-size: 10px;
color: var(--ink)
}
.invoicing-payment-collection .phoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.invoicing-payment-collection .phoneJob.current {
background: var(--sky2)
}
.invoicing-payment-collection .phoneState {
font-size: 8px;
font-weight: 800;
color: #117A55;
margin-bottom: 4px
}
.invoicing-payment-collection .phoneBottom {
margin: 0 10px 12px;
padding: 7px;
border-radius: 7px;
background: var(--greenbg);
color: #17654B;
text-align: center;
font-size: 8px;
font-weight: 750
}
.invoicing-payment-collection .lifecycleCard {
position: absolute;
left: 13px;
top: 423px;
width: 285px;
z-index: 5;
border-radius: 15px;
background: #111821;
color: #fff;
border: 1px solid #303B47;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
overflow: hidden
}
.invoicing-payment-collection .lifecycleHead {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid #303A46;
font-size: 10px;
font-weight: 800
}
.invoicing-payment-collection .lifecycleHead .icon {
color: var(--yellow);
width: 17px;
height: 17px
}
.invoicing-payment-collection .lifecycleBody {
padding: 10px 13px;
display: grid;
gap: 5px;
font-size: 10px;
line-height: 1.5
}
.invoicing-payment-collection .lifecycleBody strong {
font-size: 12px
}
.invoicing-payment-collection .lifecycleBody span {
color: #CEDBE4
}
.invoicing-payment-collection .assetTag {
position: absolute;
left: 18px;
top: 14px;
z-index: 4;
background: var(--yellow);
color: #000;
font-size: 10px;
font-weight: 850;
padding: 6px 10px;
border-radius: 8px
}
.invoicing-payment-collection .diagramCaption {
text-align: center;
font-size: 10px;
color: var(--muted);
margin: 9px 0 0;
line-height: 1.5
} .invoicing-payment-collection .trust {
padding: 26px 0;
border-bottom: 1px solid var(--line);
background: #fff
}
.invoicing-payment-collection .trustLabel {
text-align: center;
font-size: 13px;
font-weight: 750;
margin-bottom: 16px
}
.invoicing-payment-collection .logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 11px
}
.invoicing-payment-collection .logo {
height: 62px;
border: 1px solid #E2EBF0;
border-radius: 11px;
display: grid;
place-items: center;
color: #506578;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 1.2;
padding: 10px;
letter-spacing: -.02em
}
.invoicing-payment-collection .logo.dhl {
font-style: italic;
font-weight: 900;
font-size: 24px;
letter-spacing: 1px
}
.invoicing-payment-collection .logo.adobe {
font-size: 20px
}
.invoicing-payment-collection .logo.golden {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase
} .invoicing-payment-collection .outcomes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.invoicing-payment-collection .outcome {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
position: relative;
overflow: hidden
}
.invoicing-payment-collection .outcome:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--brand)
}
.invoicing-payment-collection .outcome:nth-child(2):before {
background: var(--yellow)
}
.invoicing-payment-collection .outcome:nth-child(3):before {
background: var(--green)
}
.invoicing-payment-collection .outcome:nth-child(4):before {
background: var(--purple)
}
.invoicing-payment-collection .outcome strong {
display: block;
font-size: 18px;
margin: 15px 0 8px;
line-height: 1.25;
letter-spacing: -.02em
}
.invoicing-payment-collection .outcome span {
font-size: 13px;
color: var(--muted);
display: block
}
.invoicing-payment-collection .outcome .icon {
color: var(--navy);
width: 24px;
height: 24px
} .invoicing-payment-collection .feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center
}
.invoicing-payment-collection .feature.reverse .visual {
order: -1
}
.invoicing-payment-collection .feature p {
color: var(--muted);
font-size: 16px;
margin-top: 15px
}
.invoicing-payment-collection .fl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 22px
}
.invoicing-payment-collection .fi {
display: flex;
gap: 9px;
font-size: 13px;
line-height: 1.6
}
.invoicing-payment-collection .tick {
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
display: grid;
place-items: center;
flex: 0 0 21px;
font-size: 10px;
font-weight: 900;
margin-top: 1px
}
.invoicing-payment-collection .visual {
min-height: 365px;
border-radius: 22px;
background: radial-gradient(circle at 90% 10%, rgba(255, 201, 40, .14), transparent 24%), linear-gradient(145deg, #fff, #EAF8FF);
border: 1px solid #C0E5F5;
box-shadow: var(--shadow);
padding: 22px;
position: relative;
overflow: hidden
}
.invoicing-payment-collection .visual:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 168, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 248, .035) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 75%)
}
.invoicing-payment-collection .visual>* {
position: relative;
z-index: 2
}
.invoicing-payment-collection .visual figcaption {
font-size: 10px;
color: var(--muted);
text-align: center;
margin-top: 15px;
line-height: 1.45
}
.invoicing-payment-collection .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 17px;
font-size: 13px;
font-weight: 850;
color: var(--navy)
}
.invoicing-payment-collection .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 8px
}
.invoicing-payment-collection .uiHeading .icon {
width: 19px;
height: 19px
}
.invoicing-payment-collection .uiSub {
color: var(--muted);
font-size: 10px;
font-weight: 500
}
.invoicing-payment-collection .uiPanel {
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
overflow: hidden
}
.invoicing-payment-collection .uiLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
color: var(--muted);
text-transform: uppercase
}
.invoicing-payment-collection .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1.3;
padding: 5px 8px;
border-radius: 999px;
background: var(--sky);
color: #165C80;
white-space: nowrap
}
.invoicing-payment-collection .pill.green {
background: var(--greenbg);
color: #116746
}
.invoicing-payment-collection .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.invoicing-payment-collection .pill.gray {
background: #F0F3F5;
color: #586C79
}
.invoicing-payment-collection .pill.purple {
background: #F1EDFC;
color: #5F48A5
} .invoicing-payment-collection .plannerHead {
padding: 11px 13px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
.invoicing-payment-collection .plannerTicks {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
background: var(--sky2);
border-bottom: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
color: var(--muted)
}
.invoicing-payment-collection .plannerTicks span {
text-align: center;
padding: 8px 3px
}
.invoicing-payment-collection .plannerTicks span:first-child {
text-align: left;
padding-left: 12px
}
.invoicing-payment-collection .plannerRow {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 62px;
border-bottom: 1px solid var(--line)
}
.invoicing-payment-collection .plannerRow:last-child {
border-bottom: 0
}
.invoicing-payment-collection .person {
padding: 11px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800
}
.invoicing-payment-collection .avatar {
width: 24px;
height: 24px;
background: #EAF8FF;
color: #17658A;
display: grid;
place-items: center;
flex: 0 0 24px;
border-radius: 50%;
font-size: 8px;
font-weight: 850
}
.invoicing-payment-collection .avatar.green {
background: var(--greenbg);
color: #116746
}
.invoicing-payment-collection .avatar.purple {
background: #F1EDFC;
color: #5F48A5
}
.invoicing-payment-collection .person small {
display: block;
font-size: 8px;
font-weight: 500;
color: var(--muted)
}
.invoicing-payment-collection .lane {
position: relative;
min-width: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E7EEF3 calc(25% - 1px), #E7EEF3 25%);
border-left: 1px solid var(--line)
}
.invoicing-payment-collection .slot {
position: absolute;
top: 8px;
bottom: 8px;
left: var(--start, 3%);
width: var(--length, 42%);
border: 1px solid #B7E2F5;
border-left: 3px solid var(--brand);
border-radius: 7px;
padding: 6px 7px;
background: var(--sky);
font-size: 8px;
color: #255F7E;
line-height: 1.45;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 0
}
.invoicing-payment-collection .slot strong {
display: block;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.invoicing-payment-collection .slot span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.invoicing-payment-collection .slot.green {
background: var(--greenbg);
border-color: #C9EBDD;
border-left-color: var(--green);
color: #1A644B
}
.invoicing-payment-collection .slot.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C;
border-left-color: #D8A50B;
color: #71550C
}
.invoicing-payment-collection .slot.gray {
background: #F2F4F6;
border-color: #D7DFE5;
border-left-color: #8A9EAC;
color: #586C79
}
.invoicing-payment-collection .pending {
margin-top: 13px;
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px dashed #BBDAE9;
background: #fff;
border-radius: 10px;
font-size: 10px;
line-height: 1.5
}
.invoicing-payment-collection .pending .invoicing-payment-collection .icon {
width: 18px;
height: 18px;
color: var(--navy)
}
.invoicing-payment-collection .pending strong {
font-size: 11px;
color: var(--navy)
}
.invoicing-payment-collection .pending .pill {
margin-left: auto
}
.invoicing-payment-collection .legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 9px;
color: var(--muted);
margin-top: 13px
}
.invoicing-payment-collection .legend span {
display: flex;
align-items: center;
gap: 4px
}
.invoicing-payment-collection .legend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--brand)
}
.invoicing-payment-collection .legend .green i {
background: var(--green)
}
.invoicing-payment-collection .legend .yellow i {
background: #D7A200
} .invoicing-payment-collection .roster {
display: grid;
gap: 10px
}
.invoicing-payment-collection .rosterCard {
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
.invoicing-payment-collection .rosterTop {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px
}
.invoicing-payment-collection .rosterTop .avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 10px
}
.invoicing-payment-collection .rosterName {
flex: 1;
min-width: 0
}
.invoicing-payment-collection .rosterName strong {
display: block;
font-size: 11px
}
.invoicing-payment-collection .rosterName small {
color: var(--muted);
font-size: 9px
}
.invoicing-payment-collection .rosterTop .pill {
font-size: 8px
}
.invoicing-payment-collection .capacity {
display: flex;
gap: 5px;
margin-top: 11px
}
.invoicing-payment-collection .capacity span {
height: 9px;
flex: 1;
background: #D7EFFA;
border-radius: 3px
}
.invoicing-payment-collection .capacity span.free {
background: #F2F6F9;
border: 1px dashed #BDCFD9
}
.invoicing-payment-collection .capacity span.blocked {
background: repeating-linear-gradient(-45deg, #E7ECF0 0, #E7ECF0 3px, #F7F9FA 3px, #F7F9FA 6px)
}
.invoicing-payment-collection .rosterNote {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 13px;
background: var(--yellowsoft);
border: 1px solid #EDD98C;
border-radius: 11px;
padding: 12px;
font-size: 10px;
line-height: 1.5;
color: #654D0C
}
.invoicing-payment-collection .rosterNote .icon {
width: 19px;
height: 19px
}
.invoicing-payment-collection .rosterNote strong {
display: block;
margin-bottom: 3px
} .invoicing-payment-collection .ruleCard {
padding: 16px;
background: #0D2535;
color: #fff;
border-radius: 12px;
margin-bottom: 13px
}
.invoicing-payment-collection .ruleCard .uiLabel {
color: #9CBED1
}
.invoicing-payment-collection .ruleCard strong {
font-size: 16px;
display: block;
margin: 4px 0 9px
}
.invoicing-payment-collection .ruleTags {
display: flex;
gap: 6px;
flex-wrap: wrap
}
.invoicing-payment-collection .ruleTags span {
font-size: 9px;
background: #234254;
padding: 4px 7px;
border: 1px solid #3D5F70;
border-radius: 5px;
color: #E0EDF4
}
.invoicing-payment-collection .workCards {
display: grid;
gap: 9px
}
.invoicing-payment-collection .workCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center
}
.invoicing-payment-collection .workCard strong {
display: block;
font-size: 11px
}
.invoicing-payment-collection .workCard small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 2px
}
.invoicing-payment-collection .dateTile {
display: grid;
place-items: center;
min-width: 37px;
padding: 5px;
background: var(--sky2);
border-radius: 7px;
color: var(--navy);
font-size: 15px;
font-weight: 900;
line-height: 1.1
}
.invoicing-payment-collection .dateTile span {
font-size: 8px;
font-weight: 700;
margin-bottom: 3px
}
.invoicing-payment-collection .modeRow {
display: flex;
gap: 8px;
margin-top: 12px
}
.invoicing-payment-collection .modeRow span {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 8px
}
.invoicing-payment-collection .modeRow .selected {
border-color: #8BBED6;
background: #F0FAFF;
font-weight: 800;
color: var(--navy)
}
.invoicing-payment-collection .modeRow .icon {
width: 14px;
height: 14px
} .invoicing-payment-collection .mobileLookup {
display: grid;
grid-template-columns: 185px 1fr;
gap: 16px;
align-items: center
}
.invoicing-payment-collection .phoneMock {
background: #101C25;
border-radius: 27px;
padding: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}
.invoicing-payment-collection .phoneMockInner {
background: #fff;
border-radius: 20px;
min-height: 295px;
padding: 13px
}
.invoicing-payment-collection .miniBrand {
font-size: 11px;
font-weight: 900;
color: var(--navy);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line)
}
.invoicing-payment-collection .bookingTitle {
font-size: 14px;
font-weight: 850;
line-height: 1.3;
margin: 12px 0 3px;
color: var(--ink)
}
.invoicing-payment-collection .fieldLabel {
font-size: 8px;
font-weight: 750;
color: var(--muted);
margin: 10px 0 3px
}
.invoicing-payment-collection .fieldValue {
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 9px;
line-height: 1.4;
background: var(--sky2)
}
.invoicing-payment-collection .timeOptions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}
.invoicing-payment-collection .timeOption {
font-size: 8px;
padding: 6px 2px;
border: 1px solid var(--line);
border-radius: 5px;
text-align: center
}
.invoicing-payment-collection .timeOption.selected {
color: #115575;
border-color: #67AED0;
background: #EAF8FF;
font-weight: 850
}
.invoicing-payment-collection .mockButton {
padding: 8px;
border-radius: 6px;
background: var(--yellow);
color: #000;
font-size: 9px;
text-align: center;
font-weight: 850;
margin-top: 11px
}
.invoicing-payment-collection .lookupSide {
display: grid;
gap: 11px
}
.invoicing-payment-collection .lookupCard {
padding: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
.invoicing-payment-collection .lookupCard .icon {
width: 18px;
height: 18px;
color: var(--navy);
margin-bottom: 8px
}
.invoicing-payment-collection .lookupCard strong {
display: block;
font-size: 11px;
line-height: 1.35
}
.invoicing-payment-collection .lookupCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
.invoicing-payment-collection .lookupCard.done {
border-left: 3px solid var(--green)
} .invoicing-payment-collection .aiGrid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 44px;
align-items: center
}
.invoicing-payment-collection .promptBox {
background: #111;
border: 1px solid #333;
border-radius: 20px;
padding: 23px
}
.invoicing-payment-collection .promptHead {
display: flex;
align-items: center;
gap: 11px;
font-size: 20px;
font-weight: 850;
margin-bottom: 18px
}
.invoicing-payment-collection .aiBadge {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 10px;
color: #0B0B0B;
background: var(--yellow);
font-size: 12px;
font-weight: 900
}
.invoicing-payment-collection .prompt {
background: #1B1B1B;
border: 1px solid #303030;
border-radius: 11px;
padding: 14px 15px;
margin-top: 10px;
font-size: 13px;
line-height: 1.6
}
.invoicing-payment-collection .promptFoot {
font-size: 10px !important;
color: #A5B4C0 !important;
margin-top: 14px
}
.invoicing-payment-collection .aiMini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-top: 24px
}
.invoicing-payment-collection .aiMini div {
background: #151515;
border: 1px solid #303030;
border-radius: 13px;
padding: 15px
}
.invoicing-payment-collection .aiMini strong {
display: block;
color: var(--yellow);
font-size: 13px;
margin-bottom: 6px;
line-height: 1.4
}
.invoicing-payment-collection .aiMini span {
font-size: 11px;
color: #CFCFCF;
line-height: 1.6;
display: block
} .invoicing-payment-collection .connectedGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.invoicing-payment-collection .connectedCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 15px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start
}
.invoicing-payment-collection .connectedCard .icon {
color: var(--navy);
margin-bottom: 17px
}
.invoicing-payment-collection .connectedCard h3 {
font-size: 18px;
line-height: 1.25
}
.invoicing-payment-collection .connectedCard p {
font-size: 13px;
color: var(--muted);
margin-top: 9px
}
.invoicing-payment-collection .connectedCard .textLink {
margin-top: auto;
padding-top: 15px;
font-size: 12px
}
.invoicing-payment-collection .connectedCard .textLink .icon {
margin: 0;
width: 14px;
height: 14px
} .invoicing-payment-collection .featureGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.invoicing-payment-collection .featureCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
transition: transform .2s
}
.invoicing-payment-collection .featureCard:hover {
transform: translateY(-3px)
}
.invoicing-payment-collection .featureIcon,
.invoicing-payment-collection .useIcon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--yellow);
display: grid;
place-items: center;
margin-bottom: 16px;
color: #101010
}
.invoicing-payment-collection .featureIcon .icon,
.invoicing-payment-collection .useIcon .icon {
width: 22px;
height: 22px
}
.invoicing-payment-collection .featureCard h3 {
font-size: 18px;
line-height: 1.28
}
.invoicing-payment-collection .featureCard p {
font-size: 13px;
color: var(--muted);
margin: 9px 0 0
} .invoicing-payment-collection .integrations {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px
}
.invoicing-payment-collection .integration {
min-height: 88px;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 12px
}
.invoicing-payment-collection .integration .icon {
width: 21px;
height: 21px;
color: var(--navy)
}
.invoicing-payment-collection .integration:hover {
background: var(--sky2)
}
.invoicing-payment-collection .integration:nth-child(2n) {
border-bottom-color: var(--yellow)
}
.invoicing-payment-collection .integration:nth-child(3n) {
border-bottom-color: var(--green)
}
.invoicing-payment-collection .stream {
margin-top: 20px;
background: #0C2333;
color: #fff;
border-radius: 15px;
padding: 15px 20px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 750
}
.invoicing-payment-collection .stream .streamStep {
display: flex;
align-items: center;
gap: 8px
}
.invoicing-payment-collection .stream .icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
.invoicing-payment-collection .stream>span[aria-hidden] {
color: #86B2C9
} .invoicing-payment-collection .useCases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px
}
.invoicing-payment-collection .useCase {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px
}
.invoicing-payment-collection .useCase h3 {
font-size: 20px
}
.invoicing-payment-collection .useCase p {
color: var(--muted);
font-size: 13px;
margin-top: 10px
}
.invoicing-payment-collection .reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.invoicing-payment-collection .review {
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
padding: 25px
}
.invoicing-payment-collection .review .roleNumber {
display: block;
color: var(--navy);
font-size: 11px;
font-weight: 850;
letter-spacing: .06em;
margin-bottom: 14px
}
.invoicing-payment-collection .review h3 {
font-size: 22px
}
.invoicing-payment-collection .review p {
font-size: 14px;
color: var(--muted);
margin: 12px 0
}
.invoicing-payment-collection .review strong {
font-size: 12px;
display: block;
color: var(--navy);
padding-top: 12px;
border-top: 1px solid var(--line)
}
.invoicing-payment-collection .ratingBand {
padding: 28px 0;
background: #0B0B0B;
color: #fff;
border-top: 4px solid var(--yellow)
}
.invoicing-payment-collection .ratingGrid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 12px;
align-items: center
}
.invoicing-payment-collection .ratingItem {
text-align: center;
border-left: 1px solid #2D2D2D;
padding: 6px 8px
}
.invoicing-payment-collection .ratingItem strong {
display: block;
color: var(--yellow);
font-size: 14px
}
.invoicing-payment-collection .ratingItem span {
font-size: 11px;
color: #CFD6DC
}
.invoicing-payment-collection .ratingLead strong {
font-size: 18px;
display: block;
line-height: 1.3
}
.invoicing-payment-collection .ratingLead span {
font-size: 11px;
color: #BCC8D0;
display: block;
margin-top: 6px
} .invoicing-payment-collection .faq {
max-width: 900px
}
.invoicing-payment-collection .faq details {
border: 1px solid var(--line);
border-radius: 13px;
padding: 18px 20px;
margin-bottom: 10px;
background: #fff
}
.invoicing-payment-collection .faq summary {
font-weight: 800;
cursor: pointer;
color: var(--navy);
font-size: 15px;
line-height: 1.6
}
.invoicing-payment-collection .faq details p {
color: var(--muted);
font-size: 14px;
margin-top: 10px;
line-height: 1.75
}
.invoicing-payment-collection .faq summary::marker {
color: var(--navy)
}
.invoicing-payment-collection .faq details[open] {
border-color: #A9D3E7
}
.invoicing-payment-collection .faq details a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px
} .invoicing-payment-collection .cta {
margin-top: 34px;
padding: 22px 24px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 17px;
background: #fff;
display: flex;
justify-content: space-between;
gap: 22px;
align-items: center
}
.invoicing-payment-collection .cta.darkCta {
background: #121212;
border-color: #303030;
border-left-color: var(--yellow);
color: #fff
}
.invoicing-payment-collection .cta h3 {
font-size: 19px
}
.invoicing-payment-collection .cta.darkCta h3 {
color: #fff
}
.invoicing-payment-collection .cta p {
color: var(--muted);
font-size: 13px;
margin-top: 7px;
max-width: 730px
}
.invoicing-payment-collection .cta.darkCta p {
color: #D1D1D1
}
.invoicing-payment-collection .ctaBtns {
display: flex;
gap: 9px;
flex-wrap: wrap;
flex: 0 0 auto
}
.invoicing-payment-collection .final {
background: linear-gradient(135deg, #0B0B0B, #202020);
border-top: 5px solid var(--yellow);
border-radius: 26px;
padding: 44px;
color: #fff;
display: grid;
grid-template-columns: 1fr 225px;
gap: 28px;
align-items: center
}
.invoicing-payment-collection .final h2 {
color: #fff;
font-size: clamp(29px, 3.4vw, 42px)
}
.invoicing-payment-collection .final p {
color: #DDD;
font-size: 16px;
margin-top: 16px;
max-width: 720px
}
.invoicing-payment-collection .final .ctaBtns {
flex-direction: column;
align-items: stretch
}
.invoicing-payment-collection .final .outline {
background: transparent;
color: #fff;
border-color: #555
}
.invoicing-payment-collection .reveal {
opacity: 1;
transform: none
} @media(max-width:1100px) and (min-width:961px) {
.invoicing-payment-collection .heroGrid {
gap: 28px
}
.invoicing-payment-collection .hero .lead {
font-size: 17px
}
.invoicing-payment-collection .assetPhone {
width: 168px;
top: 235px
}
.invoicing-payment-collection .lifecycleCard {
width: 225px;
left: 0;
top: 427px
}
.invoicing-payment-collection .scheduleBoard {
width: 96%;
left: 0
}
.invoicing-payment-collection .miniJob {
padding: 4px
}
.invoicing-payment-collection .heroVisual,
.invoicing-payment-collection .assetStage {
min-height: 555px
}
.invoicing-payment-collection .mobileLookup {
grid-template-columns: 155px 1fr;
gap: 10px
}
.invoicing-payment-collection .visual {
padding: 17px
}
.invoicing-payment-collection .plannerTicks,
.invoicing-payment-collection .plannerRow {
grid-template-columns: 75px repeat(4, 1fr)
}
.invoicing-payment-collection .plannerRow {
grid-template-columns: 75px 1fr
}
.invoicing-payment-collection .person {
font-size: 9px;
padding: 10px 5px
}
.invoicing-payment-collection .person .avatar {
display: none
}
}
@media(max-width:960px) {
.invoicing-payment-collection .heroGrid,
.invoicing-payment-collection .feature,
.invoicing-payment-collection .aiGrid,
.invoicing-payment-collection .final {
grid-template-columns: 1fr
}
.invoicing-payment-collection .heroGrid {
gap: 36px
}
.invoicing-payment-collection .hero h1 {
max-width: 760px
}
.invoicing-payment-collection .hero .lead {
max-width: 750px
}
.invoicing-payment-collection .heroVisual {
width: 100%;
max-width: 600px;
margin: 0 auto
}
.invoicing-payment-collection .assetStage {
margin: auto
}
.invoicing-payment-collection .feature.reverse .visual {
order: 0
}
.invoicing-payment-collection .feature {
gap: 30px
}
.invoicing-payment-collection .feature>div:first-child {
max-width: 800px
}
.invoicing-payment-collection .outcomes,
.invoicing-payment-collection .featureGrid,
.invoicing-payment-collection .connectedGrid,
.invoicing-payment-collection .useCases {
grid-template-columns: repeat(2, 1fr)
}
.invoicing-payment-collection .logos {
grid-template-columns: repeat(3, 1fr)
}
.invoicing-payment-collection .integrations {
grid-template-columns: repeat(3, 1fr)
}
.invoicing-payment-collection .reviews {
grid-template-columns: 1fr
}
.invoicing-payment-collection .ratingGrid {
grid-template-columns: repeat(4, 1fr)
}
.invoicing-payment-collection .ratingLead {
grid-column: 1/-1;
text-align: center;
margin-bottom: 10px
}
.invoicing-payment-collection .ratingItem:nth-child(2) {
border: 0
}
.invoicing-payment-collection .final .ctaBtns {
flex-direction: row;
justify-content: flex-start
}
.invoicing-payment-collection .final .btn {
min-width: 195px
}
.invoicing-payment-collection .visual {
max-width: 650px;
width: 100%;
margin: 0 auto
}
.invoicing-payment-collection .aiGrid {
gap: 30px
}
.invoicing-payment-collection .aiMini {
max-width: 760px
}
.invoicing-payment-collection .promptBox {
width: 100%
}
}
@media(max-width:640px) {
.invoicing-payment-collection .wrap {
width: calc(100% - 24px)
}
section {
padding: 56px 0
}
.invoicing-payment-collection .hero {
padding: 32px 0 42px
}
.invoicing-payment-collection .lead {
font-size: 17px
}
.invoicing-payment-collection .sectionHead p {
font-size: 16px
}
.invoicing-payment-collection .sectionHead {
margin-bottom: 28px
}
.invoicing-payment-collection .ey {
font-size: 12px;
padding: 7px 12px;
margin-bottom: 15px
}
.invoicing-payment-collection .heroGrid {
gap: 24px
}
.invoicing-payment-collection .hero .actions {
gap: 8px
}
.invoicing-payment-collection .hero .actions .btn {
flex: 1 1 150px;
padding: 12px 14px
}
.invoicing-payment-collection .micro {
font-size: 11px
}
.invoicing-payment-collection .heroPills {
gap: 6px
}
.invoicing-payment-collection .heroPills span {
font-size: 9px
}
.invoicing-payment-collection .breadcrumb {
font-size: 10px;
margin-bottom: 18px;
gap: 6px
}
.invoicing-payment-collection .heroVisual {
min-height: 525px
}
.invoicing-payment-collection .assetStage {
height: 525px;
min-height: 525px;
max-width: 410px
}
.invoicing-payment-collection .assetStage:before {
inset: 38px 0 28px 10px
}
.invoicing-payment-collection .scheduleBoard {
top: 42px;
width: 100%;
left: 0
}
.invoicing-payment-collection .boardHeader {
padding: 12px
}
.invoicing-payment-collection .boardBrand {
font-size: 12px
}
.invoicing-payment-collection .boardToolbar {
padding: 10px 12px;
font-size: 10px
}
.invoicing-payment-collection .miniCalendar {
margin: 0 10px 12px
}
.invoicing-payment-collection .miniDates,
.invoicing-payment-collection .miniRow {
grid-template-columns: 59px repeat(3, 1fr)
}
.invoicing-payment-collection .miniPerson {
font-size: 8px;
padding: 9px 5px
}
.invoicing-payment-collection .miniPerson small {
font-size: 7px
}
.invoicing-payment-collection .miniCell {
padding: 4px 3px
}
.invoicing-payment-collection .miniDates>div {
font-size: 8px
}
.invoicing-payment-collection .miniDates small {
font-size: 7px
}
.invoicing-payment-collection .miniJob {
font-size: 7px;
padding: 4px 3px;
border-left-width: 2px
}
.invoicing-payment-collection .miniJob b {
font-size: 7px
}
.invoicing-payment-collection .miniRow {
min-height: 57px
}
.invoicing-payment-collection .miniJob {
min-height: 48px
}
.invoicing-payment-collection .boardFooter {
font-size: 9px;
padding: 9px 12px
}
.invoicing-payment-collection .assetPhone {
width: 169px;
top: 231px;
right: 0;
border-radius: 25px;
padding: 6px
}
.invoicing-payment-collection .phoneScreen {
border-radius: 19px;
min-height: 274px
}
.invoicing-payment-collection .phoneHead strong {
font-size: 11px
}
.invoicing-payment-collection .phoneHead small {
font-size: 8px
}
.invoicing-payment-collection .phoneAgenda {
padding: 8px;
gap: 6px
}
.invoicing-payment-collection .phoneJob {
padding: 7px;
font-size: 8px
}
.invoicing-payment-collection .phoneJob strong {
font-size: 9px
}
.invoicing-payment-collection .phoneJob small {
font-size: 7px
}
.invoicing-payment-collection .phoneBottom {
font-size: 7px;
margin: 0 8px 9px
}
.invoicing-payment-collection .lifecycleCard {
width: calc(100% - 180px);
left: 0;
top: 387px;
border-radius: 12px
}
.invoicing-payment-collection .lifecycleHead {
padding: 9px;
font-size: 9px;
gap: 6px;
line-height: 1.4
}
.invoicing-payment-collection .lifecycleHead .icon {
width: 15px;
height: 15px
}
.invoicing-payment-collection .lifecycleBody {
padding: 9px;
font-size: 9px;
gap: 4px
}
.invoicing-payment-collection .lifecycleBody strong {
font-size: 10px
}
.invoicing-payment-collection .assetTag {
top: 8px;
left: 0;
font-size: 9px;
padding: 5px 9px
}
.invoicing-payment-collection .diagramCaption {
font-size: 9px
}
.invoicing-payment-collection .trust {
padding: 23px 0
}
.invoicing-payment-collection .trustLabel {
font-size: 12px
}
.invoicing-payment-collection .logos {
grid-template-columns: repeat(3, 1fr);
gap: 7px
}
.invoicing-payment-collection .logo {
height: 53px;
font-size: 10px;
padding: 7px
}
.invoicing-payment-collection .logo.dhl {
font-size: 19px
}
.invoicing-payment-collection .logo.adobe {
font-size: 17px
}
.invoicing-payment-collection .logo.golden {
font-size: 8px
}
.invoicing-payment-collection .fl,
.invoicing-payment-collection .outcomes,
.invoicing-payment-collection .featureGrid,
.invoicing-payment-collection .connectedGrid,
.invoicing-payment-collection .useCases {
grid-template-columns: 1fr
}
.invoicing-payment-collection .fi {
font-size: 14px
}
.invoicing-payment-collection .outcome {
padding: 21px
}
.invoicing-payment-collection .outcome strong {
margin-top: 12px
}
.invoicing-payment-collection .outcome span {
font-size: 14px
}
.invoicing-payment-collection .visual {
padding: 15px;
border-radius: 17px;
min-height: 0
}
.invoicing-payment-collection .uiHeading {
font-size: 12px;
gap: 7px;
margin-bottom: 13px
}
.invoicing-payment-collection .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.invoicing-payment-collection .uiSub {
font-size: 9px
}
.invoicing-payment-collection .plannerTicks {
grid-template-columns: 70px repeat(4, 1fr);
font-size: 8px
}
.invoicing-payment-collection .plannerRow {
grid-template-columns: 70px 1fr;
min-height: 61px
}
.invoicing-payment-collection .person {
font-size: 9px;
padding: 8px 6px
}
.invoicing-payment-collection .person .avatar {
display: none
}
.invoicing-payment-collection .person small {
font-size: 8px
}
.invoicing-payment-collection .slot {
padding: 5px;
font-size: 7px;
border-left-width: 2px
}
.invoicing-payment-collection .slot strong {
font-size: 8px
}
.invoicing-payment-collection .plannerHead {
font-size: 10px;
padding: 10px
}
.invoicing-payment-collection .plannerHead .pill {
font-size: 8px
}
.invoicing-payment-collection .pending {
font-size: 9px;
padding: 10px;
gap: 6px
}
.invoicing-payment-collection .pending strong {
font-size: 10px
}
.invoicing-payment-collection .pending .pill {
font-size: 8px;
padding: 4px 6px
}
.invoicing-payment-collection .rosterTop .pill {
font-size: 8px
}
.invoicing-payment-collection .rosterCard {
padding: 11px
}
.invoicing-payment-collection .rosterNote {
padding: 11px;
font-size: 10px
}
.invoicing-payment-collection .ruleCard {
padding: 14px
}
.invoicing-payment-collection .ruleCard strong {
font-size: 15px
}
.invoicing-payment-collection .workCard {
padding: 10px;
gap: 8px
}
.invoicing-payment-collection .workCard strong {
font-size: 10px
}
.invoicing-payment-collection .workCard small {
font-size: 8px
}
.invoicing-payment-collection .workCard .pill {
font-size: 8px;
padding: 4px 6px
}
.invoicing-payment-collection .modeRow span {
font-size: 8px;
padding: 7px
}
.invoicing-payment-collection .mobileLookup {
grid-template-columns: 164px 1fr;
gap: 11px
}
.invoicing-payment-collection .phoneMockInner {
padding: 11px;
min-height: 288px
}
.invoicing-payment-collection .lookupCard {
padding: 10px
}
.invoicing-payment-collection .lookupCard strong {
font-size: 10px
}
.invoicing-payment-collection .lookupCard span {
font-size: 9px
}
.invoicing-payment-collection .lookupCard .icon {
margin-bottom: 5px;
width: 16px;
height: 16px
}
.invoicing-payment-collection .aiMini {
grid-template-columns: 1fr;
gap: 10px
}
.invoicing-payment-collection .aiMini div {
padding: 16px
}
.invoicing-payment-collection .aiMini strong {
font-size: 14px
}
.invoicing-payment-collection .aiMini span {
font-size: 13px
}
.invoicing-payment-collection .promptBox {
padding: 18px;
border-radius: 17px
}
.invoicing-payment-collection .prompt {
font-size: 13px;
padding: 13px
}
.invoicing-payment-collection .promptHead {
font-size: 19px
}
.invoicing-payment-collection .promptFoot {
font-size: 10px !important
}
.invoicing-payment-collection .connectedCard {
padding: 22px
}
.invoicing-payment-collection .connectedCard p,
.invoicing-payment-collection .featureCard p,
.invoicing-payment-collection .useCase p {
font-size: 14px
}
.invoicing-payment-collection .connectedCard .textLink {
margin-top: 14px;
padding-top: 0;
font-size: 13px
}
.invoicing-payment-collection .integrations {
grid-template-columns: repeat(2, 1fr)
}
.invoicing-payment-collection .integration:last-child {
grid-column: 1/-1
}
.invoicing-payment-collection .stream {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
padding: 17px;
font-size: 12px
}
.invoicing-payment-collection .stream>span[aria-hidden] {
display: none
}
.invoicing-payment-collection .streamStep {
min-height: 24px
}
.invoicing-payment-collection .ratingGrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px
}
.invoicing-payment-collection .ratingItem {
border: 0
}
.invoicing-payment-collection .ratingLead {
margin-bottom: 3px
}
.invoicing-payment-collection .review p {
font-size: 14px
}
.invoicing-payment-collection .cta {
flex-direction: column;
align-items: flex-start;
padding: 22px;
gap: 17px;
margin-top: 28px
}
.invoicing-payment-collection .ctaBtns {
width: 100%
}
.invoicing-payment-collection .ctaBtns .btn {
flex: 1
}
.invoicing-payment-collection .cta p {
font-size: 14px
}
.invoicing-payment-collection .final {
padding: 30px 23px;
gap: 25px;
border-radius: 21px
}
.invoicing-payment-collection .final h2 {
font-size: 32px
}
.invoicing-payment-collection .final p {
font-size: 15px
}
.invoicing-payment-collection .final .ctaBtns {
flex-direction: column
}
.invoicing-payment-collection .final .btn {
min-width: 0;
width: 100%
}
.invoicing-payment-collection .faq details {
padding: 16px
}
.invoicing-payment-collection .faq summary {
font-size: 14px
}
.invoicing-payment-collection .faq details p {
font-size: 14px
}
}
@media(max-width:360px) {
.invoicing-payment-collection .heroVisual,
.invoicing-payment-collection .assetStage {
height: 520px;
min-height: 520px
}
.invoicing-payment-collection .assetPhone {
width: 152px;
top: 242px
}
.invoicing-payment-collection .lifecycleCard {
width: calc(100% - 161px);
top: 387px
}
.invoicing-payment-collection .lifecycleHead {
font-size: 8px;
padding: 8px;
gap: 5px
}
.invoicing-payment-collection .lifecycleBody {
padding: 8px;
font-size: 8px
}
.invoicing-payment-collection .lifecycleBody strong {
font-size: 9px
}
.invoicing-payment-collection .boardBrand {
font-size: 11px
}
.invoicing-payment-collection .sampleBadge {
font-size: 8px
}
.invoicing-payment-collection .miniDates,
.invoicing-payment-collection .miniRow {
grid-template-columns: 52px repeat(3, 1fr)
}
.invoicing-payment-collection .miniDates small {
font-size: 6px
}
.invoicing-payment-collection .miniJob b {
font-size: 6.5px
}
.invoicing-payment-collection .boardFooter {
padding-right: 135px;
min-height: 45px
}
.invoicing-payment-collection .mobileLookup {
grid-template-columns: 1fr
}
.invoicing-payment-collection .phoneMock {
width: 200px;
margin: auto
}
.invoicing-payment-collection .lookupSide {
grid-template-columns: 1fr
}
.invoicing-payment-collection .lookupCard {
padding: 13px
}
.invoicing-payment-collection .lookupCard strong {
font-size: 12px
}
.invoicing-payment-collection .lookupCard span {
font-size: 11px
}
.invoicing-payment-collection .plannerHead {
gap: 5px
}
.invoicing-payment-collection .plannerTicks {
grid-template-columns: 61px repeat(4, 1fr)
}
.invoicing-payment-collection .plannerRow {
grid-template-columns: 61px 1fr
}
.invoicing-payment-collection .uiHeading>span:first-child {
gap: 5px
}
.invoicing-payment-collection .uiHeading .icon {
width: 17px;
height: 17px
}
}  #connected-tools.fsmTools {
--tools-blue: #00A8F8;
--tools-navy: #063B5C;
--tools-ink: #11283A;
--tools-muted: #607487;
--tools-line: #D9E8F1;
--tools-yellow: #FFC928;
box-sizing: border-box;
width: 100%;
padding: 72px 0;
background: #FFFFFF;
color: var(--tools-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
#connected-tools.fsmTools *,
#connected-tools.fsmTools *::before,
#connected-tools.fsmTools *::after {
box-sizing: border-box;
}
#connected-tools.fsmTools>.invoicing-payment-collection .wrap {
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
}
#connected-tools.fsmTools .sectionHead {
width: 100%;
max-width: 840px;
margin: 0 auto 34px;
padding: 0;
text-align: center;
}
#connected-tools.fsmTools .ey {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 0 18px;
padding: 8px 14px;
border-radius: 999px;
background: #FFF7D6;
color: #0B0B0B;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
#connected-tools.fsmTools h2 {
margin: 0;
padding: 0;
color: #0B0B0B;
font-family: inherit;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 750;
line-height: 1.16;
letter-spacing: -.035em;
text-wrap: balance;
}
#connected-tools.fsmTools .sectionHead p {
max-width: 780px;
margin: 18px auto 0;
padding: 0;
color: var(--tools-muted);
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}
#connected-tools.fsmTools .fsmTools__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
margin: 0;
padding: 0;
}
#connected-tools.fsmTools .fsmTools__card {
--tool-accent: #00A8F8;
--tool-surface: #EAF8FF;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
grid-column: auto;
width: 100%;
min-width: 0;
height: 100%;
min-height: 142px;
margin: 0;
padding: 24px 14px;
border: 1px solid var(--tools-line);
border-bottom: 3px solid var(--tool-accent);
border-radius: 16px;
background: #FFFFFF;
color: var(--tools-ink);
font-family: inherit;
font-size: 15px;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none;
box-shadow: none;
overflow: visible;
transform: none;
transition: border-color .18s ease, background-color .18s ease;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(2),
#connected-tools.fsmTools .fsmTools__card:nth-child(4) {
--tool-accent: #FFC928;
--tool-surface: #FFF7D6;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(3) {
--tool-accent: #118A61;
--tool-surface: #EAF8F3;
}
#connected-tools.fsmTools .fsmTools__card:hover {
background: #F5FBFF;
border-color: var(--tool-accent);
color: var(--tools-navy);
box-shadow: none;
transform: none;
}
#connected-tools.fsmTools .fsmTools__card:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 4px;
}
#connected-tools.fsmTools .fsmTools__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 13px;
background: var(--tool-surface);
color: var(--tools-navy);
}
#connected-tools.fsmTools .fsmTools__icon svg {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
max-width: none;
margin: 0;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__label {
display: block;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
overflow-wrap: break-word;
} #connected-tools.fsmTools .fsmTools__flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 30px;
width: 100%;
min-height: 88px;
margin: 22px 0 0;
padding: 22px 26px;
border: 1px solid #18394B;
border-radius: 18px;
background: #0C2333;
color: #FFFFFF;
list-style: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
counter-reset: none;
}
#connected-tools.fsmTools .fsmTools__step {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 11px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
list-style: none;
}
#connected-tools.fsmTools .fsmTools__step::before,
#connected-tools.fsmTools .fsmTools__step::after {
content: none;
}
#connected-tools.fsmTools .fsmTools__stepIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border: 1px solid #294451;
border-radius: 11px;
background: #142F40;
color: var(--tools-yellow);
}
#connected-tools.fsmTools .fsmTools__stepIcon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
max-width: none;
color: inherit;
}
#connected-tools.fsmTools .fsmTools__stepLabel {
display: block;
min-width: 0;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
overflow-wrap: break-word;
}
#connected-tools.fsmTools .fsmTools__arrow {
display: block;
position: absolute;
top: 50%;
right: -25px;
width: 20px;
height: 20px;
max-width: none;
margin: 0;
color: #8FB5C9;
transform: translateY(-50%);
}
@media (max-width: 960px) {
#connected-tools.fsmTools .fsmTools__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#connected-tools.fsmTools .fsmTools__card {
grid-column: span 2;
}
#connected-tools.fsmTools .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .fsmTools__card:nth-child(5) {
grid-column: span 3;
}
#connected-tools.fsmTools .fsmTools__flow {
gap: 24px;
padding: 20px 16px;
font-size: 13px;
}
#connected-tools.fsmTools .fsmTools__step {
gap: 8px;
}
#connected-tools.fsmTools .fsmTools__arrow {
right: -22px;
}
}
@media (max-width: 640px) {
#connected-tools.fsmTools {
padding: 52px 0;
}
#connected-tools.fsmTools>.invoicing-payment-collection .wrap {
width: calc(100% - 32px);
}
#connected-tools.fsmTools .sectionHead {
margin-bottom: 26px;
}
#connected-tools.fsmTools .ey {
font-size: 12px;
margin-bottom: 16px;
}
#connected-tools.fsmTools h2 {
font-size: 32px;
line-height: 1.17;
}
#connected-tools.fsmTools .sectionHead p {
margin-top: 16px;
font-size: 16px;
line-height: 1.65;
}
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__card,
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__card:nth-child(4),
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__card:nth-child(5) {
grid-column: auto;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
min-height: 82px;
padding: 16px 18px;
border-bottom-width: 1px;
border-left: 3px solid var(--tool-accent);
border-radius: 14px;
font-size: 16px;
text-align: left;
}
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 11px;
}
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__flow {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding: 22px;
border-radius: 16px;
font-size: 15px;
}
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__step {
justify-content: flex-start;
gap: 14px;
min-height: 42px;
}
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__arrow {
top: auto;
right: auto;
bottom: -22px;
left: 10px;
width: 18px;
height: 18px;
transform: rotate(90deg);
}
}
@media (max-width: 360px) {
#connected-tools.fsmTools h2 {
font-size: 30px;
}
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__card {
padding: 15px;
gap: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#connected-tools.fsmTools .invoicing-payment-collection .fsmTools__card {
transition: none;
}
}   #invoicing-payment-page .heroVisual {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto
}
#invoicing-payment-page .assetStage {
width: 100%;
max-width: 620px;
height: auto;
min-height: 0;
margin-inline: auto;
position: relative
}
#invoicing-payment-page .assetStage:before {
content: none
}
#invoicing-payment-page .salesHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
#invoicing-payment-page .hero .invoicing-payment-collection .diagramCaption {
max-width: 560px;
margin: 12px auto 0
}
#invoicing-payment-page .ey {
max-width: 100%
}
#invoicing-payment-page .uiHeading {
flex-wrap: wrap;
row-gap: 8px
}
#invoicing-payment-page .uiHeading>span:first-child {
min-width: 0
}
#invoicing-payment-page .uiHeading .invoicing-payment-collection .icon {
flex-shrink: 0
}
#invoicing-payment-page .salesPanel {
padding: 17px
}
#invoicing-payment-page .salesRecordHead {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 800
}
#invoicing-payment-page .salesRecordHead>span:first-child {
min-width: 0
}
#invoicing-payment-page .salesIdentity {
display: grid;
grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
align-items: center;
gap: 17px;
margin-bottom: 16px
}
#invoicing-payment-page .salesCarrierSvg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 240 / 210;
margin: auto
}
#invoicing-payment-page .salesMeta {
display: grid;
gap: 8px
}
#invoicing-payment-page .salesMeta>div {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#invoicing-payment-page .salesMeta small {
display: block;
font-size: 9px;
letter-spacing: .02em;
color: var(--muted);
margin-bottom: 2px
}
#invoicing-payment-page .salesMeta strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#invoicing-payment-page .salesRows {
padding: 0 14px
}
#invoicing-payment-page .salesRow {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line)
}
#invoicing-payment-page .salesRow:last-child {
border: 0
}
#invoicing-payment-page .salesRow time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#invoicing-payment-page .salesRow strong {
font-size: 12px;
display: block;
color: var(--ink)
}
#invoicing-payment-page .salesRow small {
font-size: 10px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
#invoicing-payment-page .salesFoot {
padding: 10px 14px;
font-size: 10px;
line-height: 1.6;
background: var(--sky2);
border-top: 1px solid var(--line);
color: var(--muted)
}
#invoicing-payment-page .salesFoot strong {
color: var(--navy)
}
#invoicing-payment-page .salesAlert {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 15px;
border: 1px solid #EDD98C;
border-radius: 12px;
background: var(--yellowsoft);
color: #654D0C;
margin-top: 13px
}
#invoicing-payment-page .salesAlert>.invoicing-payment-collection .icon {
flex-shrink: 0;
color: #745604;
margin-top: 2px
}
#invoicing-payment-page .salesAlert strong {
display: block;
font-size: 13px;
line-height: 1.45
}
#invoicing-payment-page .salesAlert span {
display: block;
font-size: 10px;
line-height: 1.6;
margin-top: 4px
}
#invoicing-payment-page .salesDwell {
background: #0D2535;
color: #fff;
border: 1px solid #254352;
border-radius: 13px;
padding: 19px
}
#invoicing-payment-page .salesDwellTitle {
font-size: 13px;
font-weight: 800;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
#invoicing-payment-page .salesDwellTitle span {
font-size: 10px;
color: #A7C4D5;
font-weight: 600
}
#invoicing-payment-page .salesDwellMetrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 19px 0
}
#invoicing-payment-page .salesDwellMetrics>div+div {
border-left: 1px solid #3C5564;
padding-left: 20px
}
#invoicing-payment-page .salesDwellMetrics b {
display: block;
font-size: 36px;
letter-spacing: -.04em;
line-height: 1.1;
color: #FFC928;
font-variant-numeric: tabular-nums
}
#invoicing-payment-page .salesDwellMetrics b small {
font-size: 14px;
letter-spacing: 0
}
#invoicing-payment-page .salesDwellMetrics span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 7px
}
#invoicing-payment-page .salesDwellTrack {
height: 9px;
background: #304B5C;
border-radius: 10px;
position: relative;
margin: 5px 0 11px
}
#invoicing-payment-page .salesDwellTrack>span {
display: block;
width: 70%;
height: 100%;
background: #FFC928;
border-radius: 10px
}
#invoicing-payment-page .salesDwellTrack:after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 50%;
width: 2px;
background: #fff
}
#invoicing-payment-page .salesDwellLegend {
display: flex;
gap: 12px;
justify-content: space-between;
font-size: 9px;
color: #CEDBE4
}
#invoicing-payment-page .salesQueue {
margin-top: 14px;
display: grid;
gap: 8px
}
#invoicing-payment-page .salesQueueRow {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#invoicing-payment-page .salesQueueRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
#invoicing-payment-page .salesQueueRow small {
font-size: 9px;
display: block;
color: var(--muted)
}
#invoicing-payment-page .salesQueueBar {
height: 7px;
border-radius: 6px;
background: #E7F0F5;
overflow: hidden
}
#invoicing-payment-page .salesQueueBar span {
display: block;
height: 100%;
width: var(--sales-bar);
background: var(--brand);
border-radius: 6px
}
#invoicing-payment-page .salesQueueRow b {
font-size: 11px;
text-align: right;
color: var(--navy)
}
#invoicing-payment-page .salesTraceHead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--sky2);
border-bottom: 1px solid var(--line)
}
#invoicing-payment-page .salesTraceHead .invoicing-payment-collection .featureIcon {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 10px;
margin: 0;
background: #EAF8FF;
color: var(--navy)
}
#invoicing-payment-page .salesTraceHead strong {
display: block;
font-size: 13px;
color: var(--navy)
}
#invoicing-payment-page .salesTraceHead small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
#invoicing-payment-page .salesTraceHead .invoicing-payment-collection .pill {
margin-left: auto
}
#invoicing-payment-page .salesTimeline {
padding: 17px 15px
}
#invoicing-payment-page .salesEvent {
display: grid;
grid-template-columns: 42px 12px minmax(0, 1fr);
gap: 10px;
position: relative;
padding-bottom: 19px
}
#invoicing-payment-page .salesEvent:last-child {
padding-bottom: 0
}
#invoicing-payment-page .salesEvent time {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums
}
#invoicing-payment-page .salesEvent i {
height: 10px;
width: 10px;
border: 2px solid #78B9D6;
border-radius: 50%;
margin-top: 3px;
position: relative;
background: #fff
}
#invoicing-payment-page .salesEvent:not(:last-child):after {
content: "";
position: absolute;
top: 16px;
bottom: 2px;
left: 56px;
border-left: 1px solid #CEDFE9
}
#invoicing-payment-page .salesEvent strong {
display: block;
font-size: 12px;
color: var(--ink)
}
#invoicing-payment-page .salesEvent small {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
#invoicing-payment-page .salesEvent.hold i {
border-color: #BB930E;
background: #FFF7D6
}
#invoicing-payment-page .salesNext {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #FFF9E4;
color: #654D0C;
font-size: 11px;
line-height: 1.65
}
#invoicing-payment-page .salesNext strong {
display: block;
margin-bottom: 3px;
font-size: 12px
}
#invoicing-payment-page .salesSources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px
}
#invoicing-payment-page .salesSource {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
padding: 14px
}
#invoicing-payment-page .salesSource .invoicing-payment-collection .icon {
color: var(--navy);
margin-bottom: 8px
}
#invoicing-payment-page .salesSource strong {
display: block;
font-size: 12px;
color: var(--navy)
}
#invoicing-payment-page .salesSource span {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
#invoicing-payment-page .salesConnector {
height: 24px;
width: 1px;
background: #99BFD2;
margin: auto;
position: relative
}
#invoicing-payment-page .salesConnector:after {
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #729FB5;
border-bottom: 1px solid #729FB5;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: -3px
}
#invoicing-payment-page .salesHub {
padding: 15px;
border: 1px solid #2B4859;
border-radius: 12px;
background: #0D2535;
text-align: center;
color: #fff
}
#invoicing-payment-page .salesHub strong {
display: block;
font-size: 18px
}
#invoicing-payment-page .salesHub span {
display: block;
font-size: 11px;
color: #CEDBE4;
margin-top: 4px
}
#invoicing-payment-page .salesHandoff {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
font-size: 11px
}
#invoicing-payment-page .salesHandoff>strong {
font-size: 13px;
color: var(--navy)
}
#invoicing-payment-page .salesHandoff>span:not(.invoicing-payment-collection .pill) {
color: var(--muted)
}
#invoicing-payment-page .salesHandoff .invoicing-payment-collection .salesHandoffNote {
grid-column: 1/-1;
line-height: 1.6;
font-size: 10px;
border-top: 1px solid var(--line);
padding-top: 9px
}
#invoicing-payment-page .salesScopeNote {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
line-height: 1.75
}
#invoicing-payment-page .salesScopeNote a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--navy)
}
#invoicing-payment-page .salesComparisonFrame {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
margin-top: 24px
}
#invoicing-payment-page .salesComparison {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
font-size: 13px;
line-height: 1.7
}
#invoicing-payment-page .salesComparison caption {
caption-side: top;
padding: 18px 20px;
background: var(--sky2);
text-align: left;
font-size: 15px;
font-weight: 800;
color: var(--navy);
border-bottom: 1px solid var(--line)
}
#invoicing-payment-page .salesComparison th,
#invoicing-payment-page .salesComparison td {
padding: 17px 20px;
vertical-align: top;
overflow-wrap: break-word
}
#invoicing-payment-page .salesComparison thead th {
background: var(--sky2);
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line)
}
#invoicing-payment-page .salesComparison tbody th {
font-size: 14px;
color: var(--navy)
}
#invoicing-payment-page .salesComparison tbody td {
color: var(--muted)
}
#invoicing-payment-page .salesComparison tbody tr+tr>* {
border-top: 1px solid var(--line)
}
#invoicing-payment-page .salesNote {
margin-top: 22px;
padding: 19px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--sky2);
font-size: 13px;
line-height: 1.75;
color: var(--muted)
}
#invoicing-payment-page .salesNote strong {
color: var(--navy)
}
#invoicing-payment-page .connectedCard h3 {
overflow-wrap: break-word
}
@media(max-width:960px) {
#invoicing-payment-page .heroVisual {
max-width: 600px
}
}
@media(max-width:640px) {
#invoicing-payment-page .heroVisual {
max-width: 480px
}
#invoicing-payment-page .salesIdentity {
gap: 12px
}
#invoicing-payment-page .salesMeta>div {
padding: 9px 10px
}
#invoicing-payment-page .salesMeta strong {
font-size: 11px
}
#invoicing-payment-page .salesRecordHead {
padding: 12px;
font-size: 11px;
flex-wrap: wrap
}
#invoicing-payment-page .salesRows {
padding: 0 11px
}
#invoicing-payment-page .salesRow {
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 7px
}
#invoicing-payment-page .salesRow strong {
font-size: 11px
}
#invoicing-payment-page .salesRow small {
font-size: 9px
}
#invoicing-payment-page .salesRow .invoicing-payment-collection .pill {
font-size: 8px;
padding: 4px 6px
}
#invoicing-payment-page .salesDwell {
padding: 16px
}
#invoicing-payment-page .salesDwellMetrics {
gap: 12px
}
#invoicing-payment-page .salesDwellMetrics>div+div {
padding-left: 12px
}
#invoicing-payment-page .salesDwellMetrics b {
font-size: 32px
}
#invoicing-payment-page .salesDwellMetrics span {
font-size: 10px
}
#invoicing-payment-page .salesQueueRow {
grid-template-columns: 85px minmax(0, 1fr) 40px;
gap: 8px;
padding: 10px
}
#invoicing-payment-page .salesTraceHead {
gap: 9px;
padding: 12px;
flex-wrap: wrap
}
#invoicing-payment-page .salesTraceHead strong {
font-size: 12px
}
#invoicing-payment-page .salesTraceHead .invoicing-payment-collection .pill {
font-size: 8px
}
#invoicing-payment-page .salesTimeline {
padding: 15px 12px
}
#invoicing-payment-page .salesSources {
gap: 8px
}
#invoicing-payment-page .salesSource {
padding: 12px
}
#invoicing-payment-page .salesHandoff {
padding: 13px;
gap: 10px
}
#invoicing-payment-page .salesHandoff>strong {
font-size: 12px
}
#invoicing-payment-page .salesComparison,
#invoicing-payment-page .salesComparison tbody,
#invoicing-payment-page .salesComparison tr,
#invoicing-payment-page .salesComparison th,
#invoicing-payment-page .salesComparison td {
display: block;
width: 100%
}
#invoicing-payment-page .salesComparison colgroup {
display: none
}
#invoicing-payment-page .salesComparison thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
#invoicing-payment-page .salesComparison caption {
display: block;
padding: 16px;
font-size: 14px
}
#invoicing-payment-page .salesComparison th,
#invoicing-payment-page .salesComparison td {
padding: 10px 16px
}
#invoicing-payment-page .salesComparison tbody th {
padding-top: 18px;
background: var(--sky2);
font-size: 15px
}
#invoicing-payment-page .salesComparison td:before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 4px
}
#invoicing-payment-page .salesComparison tbody tr+tr>* {
border: 0
}
#invoicing-payment-page .salesComparison tbody tr+tr {
border-top: 1px solid var(--line)
}
#invoicing-payment-page .salesComparison tbody td:last-child {
padding-bottom: 18px
}
#invoicing-payment-page .salesNote {
padding: 17px
}
}
@media(max-width:360px) {
#invoicing-payment-page .salesIdentity {
grid-template-columns: 1fr
}
#invoicing-payment-page .salesCarrierSvg {
max-width: 170px
}
#invoicing-payment-page .salesMeta {
grid-template-columns: 1fr 1fr
}
#invoicing-payment-page .salesMeta>div:last-child {
grid-column: 1/-1
}
#invoicing-payment-page .salesRow {
grid-template-columns: 33px minmax(0, 1fr)
}
#invoicing-payment-page .salesRow .invoicing-payment-collection .pill {
grid-column: 2;
justify-self: start
}
#invoicing-payment-page .salesDwellLegend {
font-size: 8px
}
#invoicing-payment-page .salesQueueRow {
grid-template-columns: 82px minmax(0, 1fr) 37px;
gap: 6px
}
#invoicing-payment-page .salesTraceHead .invoicing-payment-collection .pill {
margin-left: 47px
}
#invoicing-payment-page .salesHandoff {
grid-template-columns: 1fr
}
#invoicing-payment-page .salesHandoff .invoicing-payment-collection .pill {
justify-self: start
}
}  #invoicing-payment-page .invoiceHeroSvg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 620 / 555;
overflow: visible
}
#invoicing-payment-page .invoiceDocSvg {
display: block;
width: 100%;
max-width: 215px;
height: auto;
aspect-ratio: 230 / 220;
margin: auto
}
#invoicing-payment-page .invIdentity {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: 15px;
align-items: center;
padding: 15px
}
#invoicing-payment-page .invFacts {
display: grid;
gap: 9px
}
#invoicing-payment-page .invFacts>div {
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky2)
}
#invoicing-payment-page .invFacts small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-bottom: 3px
}
#invoicing-payment-page .invFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.45
}
#invoicing-payment-page .invItemList {
padding: 0 15px 15px
}
#invoicing-payment-page .invItem {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
padding: 11px 0;
border-top: 1px solid var(--line);
font-size: 11px
}
#invoicing-payment-page .invItem strong {
display: block;
color: var(--navy);
font-size: 12px
}
#invoicing-payment-page .invItem small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 2px
}
#invoicing-payment-page .invItem b {
color: var(--navy);
font-variant-numeric: tabular-nums
}
#invoicing-payment-page .invTotal {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 9px;
background: var(--sky);
font-size: 12px;
color: var(--navy)
}
#invoicing-payment-page .invTotal b {
font-size: 17px;
font-variant-numeric: tabular-nums
}
#invoicing-payment-page .invPayGrid {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 17px;
align-items: center
}
#invoicing-payment-page .invPaymentPhone {
width: 100%;
max-width: 218px;
margin: auto;
padding: 7px;
background: #102635;
border: 1px solid #23495F;
border-radius: 28px
}
#invoicing-payment-page .invPaymentScreen {
background: #fff;
border-radius: 21px;
padding: 12px 12px 16px;
overflow: hidden;
min-width: 0
}
#invoicing-payment-page .invNotch {
width: 48px;
height: 5px;
background: #193746;
border-radius: 5px;
margin: 0 auto 17px
}
#invoicing-payment-page .invMobileBrand {
font-size: 11px;
color: var(--navy);
font-weight: 850;
padding-bottom: 11px;
border-bottom: 1px solid var(--line)
}
#invoicing-payment-page .invMobileTitle {
font-size: 18px;
color: var(--navy);
font-weight: 850;
line-height: 1.3;
margin: 14px 0 6px;
letter-spacing: -.025em
}
#invoicing-payment-page .invPaymentScreen>small {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6
}
#invoicing-payment-page .invPayAmount {
margin: 15px 0 12px;
padding: 13px 11px;
background: var(--sky2);
border: 1px solid var(--line);
border-radius: 10px
}
#invoicing-payment-page .invPayAmount span {
display: block;
font-size: 9px;
color: var(--muted)
}
#invoicing-payment-page .invPayAmount strong {
display: block;
font-size: 32px;
line-height: 1.25;
color: var(--navy);
font-variant-numeric: tabular-nums;
letter-spacing: -.035em
}
#invoicing-payment-page .invPayOption {
display: flex;
align-items: center;
gap: 7px;
padding: 10px 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
color: var(--navy);
font-size: 10px;
line-height: 1.5
}
#invoicing-payment-page .invPayOption .icon {
width: 17px;
height: 17px
}
#invoicing-payment-page .invMockButton {
display: block;
background: var(--yellow);
color: #0B0B0B;
border-radius: 8px;
text-align: center;
padding: 10px 6px;
font-size: 11px;
font-weight: 850;
margin-top: 11px
}
#invoicing-payment-page .invPhoneFoot {
font-size: 8px;
color: var(--muted);
text-align: center;
line-height: 1.55;
margin-top: 9px
}
#invoicing-payment-page .invPaySteps {
display: grid;
gap: 11px
}
#invoicing-payment-page .invPayStep {
padding: 13px 12px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff
}
#invoicing-payment-page .invPayStep>b {
display: inline-grid;
place-items: center;
width: 25px;
height: 25px;
background: var(--sky);
color: var(--navy);
border-radius: 7px;
font-size: 10px;
margin-bottom: 9px
}
#invoicing-payment-page .invPayStep strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.4
}
#invoicing-payment-page .invPayStep span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#invoicing-payment-page .invBalance {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 14px
}
#invoicing-payment-page .invMetric {
padding: 14px 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
text-align: center;
min-width: 0
}
#invoicing-payment-page .invMetric.green {
background: var(--greenbg);
border-color: #C5E5D9
}
#invoicing-payment-page .invMetric.yellow {
background: var(--yellowsoft);
border-color: #EEDB8C
}
#invoicing-payment-page .invMetric strong {
display: block;
font-size: 26px;
color: var(--navy);
line-height: 1.25;
letter-spacing: -.035em;
font-variant-numeric: tabular-nums
}
#invoicing-payment-page .invMetric span {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-top: 5px
}
#invoicing-payment-page .invReceipt {
padding: 16px
}
#invoicing-payment-page .invReceiptRow {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--line);
font-size: 11px;
line-height: 1.6
}
#invoicing-payment-page .invReceiptRow:first-child {
padding-top: 0
}
#invoicing-payment-page .invReceiptRow:last-child {
border: 0;
padding-bottom: 0
}
#invoicing-payment-page .invReceiptRow>span {
color: var(--muted)
}
#invoicing-payment-page .invReceiptRow>strong {
color: var(--navy);
text-align: right;
font-size: 11px
}
#invoicing-payment-page .invOutstanding {
display: grid;
gap: 10px
}
#invoicing-payment-page .invDueCard {
padding: 15px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px
}
#invoicing-payment-page .invDueTop {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
line-height: 1.45
}
#invoicing-payment-page .invDueTop strong {
display: block;
font-size: 13px;
color: var(--navy)
}
#invoicing-payment-page .invDueTop small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 3px
}
#invoicing-payment-page .invDueBottom {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--line);
padding-top: 11px;
margin-top: 11px
}
#invoicing-payment-page .invDueBottom span {
font-size: 10px;
color: var(--muted)
}
#invoicing-payment-page .invDueBottom b {
font-size: 22px;
line-height: 1.3;
color: var(--navy);
font-variant-numeric: tabular-nums
}
#invoicing-payment-page .invStatement {
margin-top: 13px;
padding: 15px;
background: #0D2535;
color: #fff;
border: 1px solid #264557;
border-radius: 12px;
display: flex;
gap: 12px;
align-items: flex-start
}
#invoicing-payment-page .invStatement .icon {
color: var(--yellow);
width: 22px;
height: 22px;
flex-shrink: 0
}
#invoicing-payment-page .invStatement strong {
font-size: 13px;
display: block;
color: #fff;
line-height: 1.5
}
#invoicing-payment-page .invStatement span {
font-size: 10px;
display: block;
color: #CEDBE4;
margin-top: 4px;
line-height: 1.65
}
#invoicing-payment-page .invReportSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 17px
}
#invoicing-payment-page .invReportSummary>div {
border: 1px solid #303B46;
background: #15212A;
border-radius: 10px;
padding: 13px
}
#invoicing-payment-page .invReportSummary strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: #FFC928
}
#invoicing-payment-page .invReportSummary span {
display: block;
font-size: 10px;
color: #CEDBE4;
line-height: 1.6;
margin-top: 4px
}
@media(max-width:640px) {
#invoicing-payment-page .invIdentity {
gap: 11px;
padding: 12px
}
#invoicing-payment-page .invFacts>div {
padding: 9px
}
#invoicing-payment-page .invFacts strong {
font-size: 11px
}
#invoicing-payment-page .invItemList {
padding: 0 12px 12px
}
#invoicing-payment-page .invPayGrid {
gap: 12px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}
#invoicing-payment-page .invPayStep {
padding: 11px 10px
}
#invoicing-payment-page .invPayStep strong {
font-size: 11px
}
#invoicing-payment-page .invPaymentScreen {
padding: 11px 9px 13px
}
#invoicing-payment-page .invMobileTitle {
font-size: 16px
}
#invoicing-payment-page .invPayAmount strong {
font-size: 28px
}
#invoicing-payment-page .invBalance {
gap: 6px
}
#invoicing-payment-page .invMetric {
padding: 12px 5px
}
#invoicing-payment-page .invMetric strong {
font-size: 23px
}
#invoicing-payment-page .invMetric span {
font-size: 9px
}
#invoicing-payment-page .invDueCard {
padding: 12px
}
#invoicing-payment-page .invDueTop {
gap: 8px
}
#invoicing-payment-page .invDueTop strong {
font-size: 12px
}
#invoicing-payment-page .invDueTop .pill {
font-size: 8px;
padding: 4px 6px
}
#invoicing-payment-page .invReceipt {
padding: 13px
}
#invoicing-payment-page .invReportSummary {
grid-template-columns: 1fr
}
}
@media(max-width:360px) {
#invoicing-payment-page .invIdentity {
grid-template-columns: 1fr
}
#invoicing-payment-page .invFacts {
grid-template-columns: 1fr 1fr
}
#invoicing-payment-page .invFacts>div:last-child {
grid-column: 1 / -1
}
#invoicing-payment-page .invPayGrid {
grid-template-columns: 1fr
}
#invoicing-payment-page .invPaymentPhone {
max-width: 218px
}
#invoicing-payment-page .invPaySteps {
grid-template-columns: 1fr
}
#invoicing-payment-page .invPayStep {
display: grid;
grid-template-columns: 27px 1fr;
gap: 4px 10px;
padding: 12px
}
#invoicing-payment-page .invPayStep>b {
grid-row: 1 / 3;
margin: 0
}
#invoicing-payment-page .invPayStep span {
margin: 0
}
#invoicing-payment-page .invDueTop {
flex-wrap: wrap
}
} .new-theme-design .sectionHead {
margin-bottom: 38px;
text-align: center;
}
.new-theme-design .awardBand .sectionHead {
text-align: left;
}
.new-theme-design.ai-powered-checklists .ey {
display: flex;
gap: 13px;
align-items: center;
font-size: 12px;
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.115em;
color: #ffad5b !important;
text-transform: uppercase;
margin: 0 0 26px;
background: transparent !important;
}
.new-theme-design.ai-powered-checklists .ey:before {
content: "";
width: 28px;
height: 2px;
flex: 0 0 28px;
background: #ffad5b;
} .field-sales-software .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
.field-sales-software .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.field-sales-software .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.field-sales-software .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: 0 8px 20px rgba(0, 168, 248, .23);
}
.field-sales-software .brand span {
color: var(--brand);
}
.field-sales-software .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.field-sales-software .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.field-sales-software .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: 0 10px 25px rgba(0, 168, 248, .25);
}
.field-sales-software .button.primary:hover {
background: var(--brand-dark);
}
.field-sales-software .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.field-sales-software .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.field-sales-software .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.field-sales-software .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.field-sales-software h1,
.field-sales-software h2,
.field-sales-software h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
} .field-sales-software h3 {
font-size: 23px;
color: var(--black);
}
.field-sales-software .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.field-sales-software .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.field-sales-software .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.field-sales-software .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: 0 10px 25px rgba(11, 11, 11, .18);
}
.field-sales-software .hero .button.primary:hover {
background: var(--black-soft);
}
.field-sales-software .hero .button.secondary {
border-color: var(--yellow);
box-shadow: inset 0 -3px 0 var(--yellow);
}
.field-sales-software .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: var(--shadow);
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.field-sales-software .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.field-sales-software .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.field-sales-software .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.field-sales-software .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.field-sales-software .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.field-sales-software .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.field-sales-software .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.field-sales-software .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.field-sales-software .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.field-sales-software .ratingLead strong {
display: block;
font-size: 20px;
}
.field-sales-software .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.field-sales-software .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.field-sales-software .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.field-sales-software .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.field-sales-software .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.field-sales-software .field-sales-software .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.field-sales-software .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.field-sales-software .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.field-sales-software .awardLead span {
color: var(--muted);
font-size: 13px;
}
.field-sales-software .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: 0 8px 22px rgba(11, 11, 11, .05);
}
.field-sales-software section {
padding: 88px 0;
}
.field-sales-software .sectionHead { text-align: left;
}
.field-sales-software .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.field-sales-software .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.field-sales-software .aiJourney h2 {
color: #fff;
}
.field-sales-software .aiJourney .sectionHead p {
color: #D7D7D7;
}
.field-sales-software .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.field-sales-software .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.field-sales-software .aiStep::after {
content: '→';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.field-sales-software .aiStep:last-child::after {
display: none;
}
.field-sales-software .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.field-sales-software .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.field-sales-software .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.field-sales-software .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.field-sales-software .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.field-sales-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.field-sales-software .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.field-sales-software .outcome span {
color: var(--muted);
font-size: 14px;
}
.field-sales-software .capability {
background: #fff;
}
.field-sales-software .capability.alt {
background: var(--sky-2);
}
.field-sales-software .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.field-sales-software .twoCol.reverse .visual {
order: 2;
}
.field-sales-software .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.field-sales-software .visual .placeholder {
min-height: 355px;
}
.field-sales-software .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.field-sales-software .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.field-sales-software details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.field-sales-software details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.field-sales-software details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.field-sales-software details.capabilityMore summary::after {
content: '+';
font-size: 18px;
line-height: 1;
}
.field-sales-software details.capabilityMore[open] summary::after {
content: '−';
}
.field-sales-software details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.field-sales-software .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.field-sales-software .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.field-sales-software .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.field-sales-software .darkSection h2,
.field-sales-software .darkSection h3 {
color: #fff;
}
.field-sales-software .darkSection .sectionHead p,
.field-sales-software .darkSection .copy p {
color: #D7D7D7;
}
.field-sales-software .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.field-sales-software .darkSection .featureItem {
color: #F7F7F7;
}
.field-sales-software .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.field-sales-software .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.field-sales-software .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.field-sales-software .darkSection .placeholder small {
color: #D0D0D0;
}
.field-sales-software .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.field-sales-software .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, .05);
}
.field-sales-software .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: 0 6px 14px rgba(255, 201, 40, .22);
}
.field-sales-software .card p {
color: var(--muted);
margin: 12px 0 0;
}
.field-sales-software .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.field-sales-software .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.field-sales-software .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.field-sales-software .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.field-sales-software .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.field-sales-software .benefitBand h2 {
color: #fff;
}
.field-sales-software .benefitBand .sectionHead p {
color: #D5D5D5;
}
.field-sales-software .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.field-sales-software .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.field-sales-software .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.field-sales-software .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.field-sales-software .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.field-sales-software .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.field-sales-software .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.field-sales-software .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.field-sales-software .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.field-sales-software .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.field-sales-software .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.field-sales-software .faq {
max-width: 900px;
}
.field-sales-software details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.field-sales-software summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
.field-sales-software details p {
color: var(--muted);
margin: 12px 0 0;
}
.field-sales-software .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: var(--shadow);
border-top: 5px solid var(--yellow);
}
.field-sales-software .ctaPanel h2 {
color: #fff;
}
.field-sales-software .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.field-sales-software .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.field-sales-software .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.field-sales-software .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.field-sales-software .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 10px 28px rgba(6, 59, 92, .06);
}
.field-sales-software .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.field-sales-software .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.field-sales-software .inlineCta.dark h3 {
color: #fff;
}
.field-sales-software .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.field-sales-software .inlineCta.dark p {
color: #D8D8D8;
}
.field-sales-software .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.field-sales-software .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.field-sales-software .button.yellow:hover {
background: #FFD84D;
}
.field-sales-software .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.field-sales-software .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.field-sales-software .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.field-sales-software .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.field-sales-software footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.field-sales-software .ratingSectionGrid {
grid-template-columns: 1fr;
}
.field-sales-software .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.field-sales-software .heroGrid,
.field-sales-software .twoCol,
.field-sales-software .ctaPanel {
grid-template-columns: 1fr;
}
.field-sales-software .twoCol.reverse .visual {
order: initial;
}
.field-sales-software .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.field-sales-software .ratingGrid,
.field-sales-software .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.field-sales-software .ratingLead,
.field-sales-software .awardLead {
grid-column: 1/-1;
text-align: center;
}
.field-sales-software .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.field-sales-software .aiStep:nth-child(3)::after,
.field-sales-software .aiStep:last-child::after {
display: none;
}
.field-sales-software .outcomeGrid,
.field-sales-software .challengeGrid,
.field-sales-software .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.field-sales-software .cards,
.field-sales-software .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.field-sales-software .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.field-sales-software .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.field-sales-software .awardProofGrid {
grid-template-columns: 1fr;
}
.field-sales-software .wrap {
width: min(var(--max), calc(100% - 24px));
}
.field-sales-software .hero {
padding: 58px 0 52px;
}
.field-sales-software section {
padding: 64px 0;
}
.field-sales-software h1 {
font-size: 44px;
}
.field-sales-software .aiFlow {
grid-template-columns: 1fr;
}
.field-sales-software .aiStep::after {
display: none;
}
.field-sales-software .logoRow,
.field-sales-software .ratingGrid,
.field-sales-software .awardGrid,
.field-sales-software .outcomeGrid,
.field-sales-software .challengeGrid,
.field-sales-software .benefitGrid,
.field-sales-software .cards,
.field-sales-software .proofCards,
.field-sales-software .integrationGrid,
.field-sales-software .featureList {
grid-template-columns: 1fr;
}
.field-sales-software .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.field-sales-software .ctaPanel {
padding: 34px 24px;
}
.field-sales-software .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.field-sales-software .inlineCtaActions {
width: 100%;
}
.field-sales-software .inlineCtaActions .button {
flex: 1;
}
}
.field-sales-software  :root {
--muted: #526A7C;
--shadow: 0 12px 30px rgba(6, 59, 92, .07);
}
.field-sales-software body.fieldSalesPage {
background: var(--sky-2);
}
.field-sales-software p {
margin-bottom: 0;
}
.field-sales-software [id] {
scroll-margin-top: 94px;
}
.field-sales-software svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.field-sales-software .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.field-sales-software .fieldSalesPage h1,
.field-sales-software .fieldSalesPage h2,
.field-sales-software .fieldSalesPage h3 {
color: var(--black);
}
.field-sales-software .fieldSalesPage .darkSection h2,
.field-sales-software .fieldSalesPage .darkSection h3,
.field-sales-software .fieldSalesPage .aiJourney h2,
.field-sales-software .fieldSalesPage .benefitBand h2,
.field-sales-software .fieldSalesPage .ctaPanel h2,
.field-sales-software .fieldSalesPage .inlineCta.dark h3 {
color: #fff;
}
.field-sales-software .wrap>*,
.field-sales-software .heroGrid>*,
.field-sales-software .twoCol>*,
.field-sales-software .ctaPanel>* {
min-width: 0;
}
.field-sales-software .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.field-sales-software .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.field-sales-software .skipLink:focus {
transform: none;
}
.field-sales-software a:focus-visible,
.field-sales-software summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.field-sales-software .darkSection a:focus-visible,
.field-sales-software .darkSection summary:focus-visible,
.field-sales-software .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.field-sales-software .topbar {
background: #fff;
backdrop-filter: none;
}
.field-sales-software .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.field-sales-software .brandName {
display: inline;
color: var(--navy) !important;
}
.field-sales-software .brandName>span {
color: var(--brand-dark);
}
.field-sales-software .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.field-sales-software .brandMark .icon2 {
width: 21px;
height: 21px;
}
.field-sales-software .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.field-sales-software .navlinks a:hover {
color: var(--brand-dark);
}
.field-sales-software .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.field-sales-software .button {
gap: 9px;
text-align: center;
box-shadow: none !important;
}
.field-sales-software .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.field-sales-software .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.field-sales-software .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.field-sales-software .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.field-sales-software .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.field-sales-software .heroVisual {
width: 100%;
min-width: 0;
}
.field-sales-software .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.field-sales-software .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.field-sales-software .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.field-sales-software .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.field-sales-software .clientBand {
padding: 27px 0;
}
.field-sales-software .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.field-sales-software .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.field-sales-software .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.field-sales-software .logoBox.wide {
font-size: 12px;
}
.field-sales-software .logoBox small {
display: block;
font-size: 10px;
}
.field-sales-software section {
padding: 80px 0;
} .field-sales-software .sectionHead {
margin-bottom: 36px;
}
.field-sales-software .eyebrow {
line-height: 1.5;
}
.field-sales-software .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.field-sales-software .aiStep {
min-height: 162px;
}
.field-sales-software .aiStep strong {
line-height: 1.35;
}
.field-sales-software .aiStep span {
line-height: 1.65;
}
.field-sales-software .aiCallout {
margin-top: 24px;
}
.field-sales-software .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.field-sales-software .outcome>.icon2 {
color: var(--navy);
}
.field-sales-software .awardBand {
padding: 42px 0;
}
.field-sales-software .awardBand .sectionHead {
margin-bottom: 26px;
}
.field-sales-software .awardBand .sectionHead h2 {
font-size: 36px;
}
.field-sales-software .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.field-sales-software .awardItem>.icon2 {
color: var(--navy);
}
.field-sales-software .awardItem:hover {
border-color: var(--brand-dark);
}
.field-sales-software .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.field-sales-software .twoCol.reverse .visual {
order: -1;
}
.field-sales-software .copy .eyebrow {
margin-bottom: 17px;
}
.field-sales-software .copy p {
font-size: 16px;
line-height: 1.85;
}
.field-sales-software .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.field-sales-software .featureList {
gap: 13px 18px;
}
.field-sales-software .featureItem {
font-size: 13px;
line-height: 1.6;
}
.field-sales-software .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.field-sales-software .check .icon2 {
width: 14px;
height: 14px;
}
.field-sales-software details.capabilityMore {
margin-bottom: 0;
}
.field-sales-software .capabilityMore summary {
min-height: 34px;
}
.field-sales-software .capabilityMore .moreGrid {
gap: 13px 18px;
}
.field-sales-software .textCta {
font-size: 14px;
}
.field-sales-software .visual {
min-width: 0;
}
.field-sales-software .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.field-sales-software .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.field-sales-software .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.field-sales-software .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.field-sales-software .panelBody {
padding: 20px;
}
.field-sales-software .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.field-sales-software .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.field-sales-software .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.field-sales-software .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.field-sales-software .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.field-sales-software .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.field-sales-software .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.field-sales-software .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.field-sales-software .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.field-sales-software .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.field-sales-software .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.field-sales-software .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.field-sales-software .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.field-sales-software .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.field-sales-software .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.field-sales-software .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.field-sales-software .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.field-sales-software .miniStats span {
font-size: 9px;
color: var(--muted);
}
.field-sales-software .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.field-sales-software .dataRow:last-child {
border-bottom: 0;
}
.field-sales-software .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.field-sales-software .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.field-sales-software .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.field-sales-software .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.field-sales-software .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.field-sales-software .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.field-sales-software .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.field-sales-software .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.field-sales-software .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.field-sales-software .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.field-sales-software .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.field-sales-software .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.field-sales-software .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.field-sales-software .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.field-sales-software .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.field-sales-software .mobileAccount {
text-align: center;
padding: 13px 0;
}
.field-sales-software .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.field-sales-software .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.field-sales-software .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.field-sales-software .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.field-sales-software .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.field-sales-software .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.field-sales-software .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.field-sales-software .phoneDevice .rowCopy strong {
font-size: 9px;
}
.field-sales-software .phoneDevice .rowCopy small {
font-size: 7px;
}
.field-sales-software .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.field-sales-software .mobileSide {
display: grid;
gap: 10px;
}
.field-sales-software .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.field-sales-software .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.field-sales-software .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.field-sales-software .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.field-sales-software .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.field-sales-software .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.field-sales-software .darkSection .panelHead>strong {
color: #fff;
}
.field-sales-software .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.field-sales-software .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.field-sales-software .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.field-sales-software .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.field-sales-software .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.field-sales-software .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.field-sales-software .promptList {
display: grid;
gap: 10px;
}
.field-sales-software .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.field-sales-software .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.field-sales-software .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.field-sales-software .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.field-sales-software .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.field-sales-software .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.field-sales-software .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.field-sales-software .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.field-sales-software .quoteTable th,
.field-sales-software .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.field-sales-software .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.field-sales-software .quoteTable td:first-child {
width: 64%;
}
.field-sales-software .quoteTable th:last-child,
.field-sales-software .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.field-sales-software .quoteTable strong {
font-size: 11px;
}
.field-sales-software .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.field-sales-software .quoteTable tfoot {
background: #F5FBFF;
}
.field-sales-software .quoteTable tfoot th {
font-size: 10px;
}
.field-sales-software .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.field-sales-software .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.field-sales-software .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.field-sales-software .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.field-sales-software .orderJourney {
margin: 20px 0;
}
.field-sales-software .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.field-sales-software .journeyRow:before {
content: '';
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.field-sales-software .journeyRow:last-child:before {
display: none;
}
.field-sales-software .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.field-sales-software .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.field-sales-software .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.field-sales-software .journeyRow strong {
font-size: 12px;
display: block;
}
.field-sales-software .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.field-sales-software .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.field-sales-software .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.field-sales-software .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.field-sales-software .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.field-sales-software .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.field-sales-software .inventoryIntro strong {
display: block;
font-size: 16px;
}
.field-sales-software .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.field-sales-software .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.field-sales-software .availabilityCard span {
font-size: 9px;
display: block;
}
.field-sales-software .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.field-sales-software .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.field-sales-software .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.field-sales-software .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.field-sales-software .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.field-sales-software .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.field-sales-software .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.field-sales-software .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.field-sales-software .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.field-sales-software .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.field-sales-software .customerTimeline .dataRow {
border-color: #353535;
}
.field-sales-software .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.field-sales-software .customerTimeline strong {
color: #fff;
}
.field-sales-software .customerTimeline small {
color: #BFBFBF;
}
.field-sales-software .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.field-sales-software .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.field-sales-software .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.field-sales-software .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.field-sales-software .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.field-sales-software .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.field-sales-software .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.field-sales-software .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.field-sales-software .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.field-sales-software .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.field-sales-software .chartTitle strong {
font-size: 12px;
}
.field-sales-software .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.field-sales-software .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.field-sales-software .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.field-sales-software .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.field-sales-software .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.field-sales-software .inlineCta {
margin-top: 0;
box-shadow: none;
}
.field-sales-software .inlineCtaActions {
max-width: 42%;
}
.field-sales-software .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.field-sales-software .inlineCta h3 {
line-height: 1.35;
}
.field-sales-software .card {
box-shadow: none;
}
.field-sales-software .cardIcon {
box-shadow: none;
}
.field-sales-software .card h3 {
font-size: 22px;
}
.field-sales-software .card p {
font-size: 14px;
line-height: 1.8;
}
.field-sales-software .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.field-sales-software .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.field-sales-software .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.field-sales-software .ratingBand {
padding: 34px 0;
}
.field-sales-software .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.field-sales-software .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.field-sales-software .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.field-sales-software .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.field-sales-software .ratingItem:first-child {
border-left: 0;
}
.field-sales-software .proofCard h3 {
font-size: 23px;
}
.field-sales-software .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.field-sales-software .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.field-sales-software .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.field-sales-software .integration {
min-height: 98px;
}
.field-sales-software .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.field-sales-software .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}     .field-sales-software .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.field-sales-software .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.field-sales-software .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.field-sales-software .finalActions {
display: grid;
gap: 11px;
}
.field-sales-software .finalActions .button {
white-space: nowrap;
}
.field-sales-software .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.field-sales-software .footerInner p {
margin: 0;
font-size: 12px;
}
.field-sales-software .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.field-sales-software .navlinks {
gap: 15px;
font-size: 12px;
}
.field-sales-software .heroGrid {
gap: 30px;
}
.field-sales-software .twoCol {
gap: 32px;
}
.field-sales-software .panelBody {
padding: 16px;
}
.field-sales-software .panelHead {
padding: 16px;
}
.field-sales-software .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.field-sales-software .pipelineColumns {
gap: 7px;
}
.field-sales-software .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.field-sales-software .heroGrid,
.field-sales-software .twoCol,
.field-sales-software .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.field-sales-software .heroGrid {
gap: 36px;
}
.field-sales-software .hero h1 {
max-width: 730px;
}
.field-sales-software .hero .lead {
max-width: 690px;
}
.field-sales-software .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.field-sales-software .twoCol {
gap: 34px;
}
.field-sales-software .twoCol.reverse .visual {
order: initial;
}
.field-sales-software .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.field-sales-software .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.field-sales-software .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.field-sales-software .awardItem {
font-size: 12px;
padding: 13px;
}
.field-sales-software .ratingSectionGrid {
gap: 20px;
}
.field-sales-software .inlineCta {
align-items: flex-start;
}
.field-sales-software .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.field-sales-software .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.field-sales-software .card {
padding: 22px;
}
.field-sales-software .card h3 {
font-size: 21px;
}
.field-sales-software .finalActions {
display: flex;
flex-wrap: wrap;
}
.field-sales-software .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.field-sales-software .cards,
.field-sales-software .proofCards {
grid-template-columns: 1fr;
}
.field-sales-software .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.field-sales-software .inlineCta {
flex-direction: column;
}
.field-sales-software .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.field-sales-software .inlineCtaActions .button {
flex: 1;
}
.field-sales-software .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.field-sales-software .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.field-sales-software .wrap {
width: calc(100% - 32px);
}
.field-sales-software [id] {
scroll-margin-top: 82px;
}
.field-sales-software .brand {
font-size: 20px;
gap: 7px;
}
.field-sales-software .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.field-sales-software .brandMark .icon2 {
width: 18px;
height: 18px;
}
.field-sales-software .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.field-sales-software section {
padding: 60px 0;
}
.field-sales-software .hero {
padding: 51px 0 48px;
}
.field-sales-software .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.field-sales-software .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.field-sales-software .heroActions {
gap: 10px;
margin-top: 25px;
}
.field-sales-software .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.field-sales-software .hero .microcopy {
font-size: 11px;
}
.field-sales-software .heroPills span {
font-size: 9px;
}
.field-sales-software .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.field-sales-software .sectionHead p {
font-size: 16px;
}
.field-sales-software .copy h2 {
font-size: 34px;
}
.field-sales-software .copy p {
font-size: 15px;
}
.field-sales-software .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.field-sales-software .logoBox {
min-height: 53px;
}
.field-sales-software .logoBox:last-child {
grid-column: 1/-1;
}
.field-sales-software .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-sales-software .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.field-sales-software .aiStep strong {
font-size: 13px;
}
.field-sales-software .aiStep span {
font-size: 11px;
}
.field-sales-software .aiStep::after {
display: none;
}
.field-sales-software .outcomeGrid,
.field-sales-software .challengeGrid,
.field-sales-software .benefitGrid {
grid-template-columns: 1fr;
}
.field-sales-software .outcome {
padding: 24px;
}
.field-sales-software .outcome strong {
font-size: 22px;
}
.field-sales-software .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-sales-software .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.field-sales-software .awardItem:last-child {
grid-column: 1/-1;
}
.field-sales-software .awardBand .sectionHead h2 {
font-size: 31px;
}
.field-sales-software .featureList,
.field-sales-software .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.field-sales-software .featureItem {
font-size: 13px;
}
.field-sales-software .inlineCta {
padding: 22px;
gap: 19px;
}
.field-sales-software .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.field-sales-software .panelHead {
padding: 15px 13px;
}
.field-sales-software .panelHead>strong {
font-size: 12px;
}
.field-sales-software .panelBody {
padding: 14px;
}
.field-sales-software .productPanel {
border-radius: 16px;
}
.field-sales-software .productPanel figcaption {
padding: 0 14px 13px;
}
.field-sales-software .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.field-sales-software .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.field-sales-software .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.field-sales-software .deal {
margin-top: 0;
padding: 10px;
}
.field-sales-software .deal strong {
font-size: 10px;
}
.field-sales-software .deal small {
font-size: 9px;
}
.field-sales-software .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.field-sales-software .mobileWorkspace {
gap: 12px;
}
.field-sales-software .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.field-sales-software .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.field-sales-software .sideTile {
padding: 10px;
}
.field-sales-software .sideTile strong {
font-size: 10px;
}
.field-sales-software .sideTile p {
font-size: 9px;
}
.field-sales-software .mobileHeader strong {
font-size: 15px;
}
.field-sales-software .mobileAccount strong {
font-size: 10px;
}
.field-sales-software .mobileAccount small {
font-size: 7px;
}
.field-sales-software .phoneDevice .rowIcon {
display: none;
}
.field-sales-software .quoteTable th,
.field-sales-software .quoteTable td {
padding: 12px 4px;
}
.field-sales-software .quoteTable strong {
font-size: 10px;
}
.field-sales-software .quoteTable small {
font-size: 8px;
}
.field-sales-software .quoteTable tfoot th {
font-size: 9px;
}
.field-sales-software .docHeader strong {
font-size: 17px;
}
.field-sales-software .miniFlow {
gap: 5px;
font-size: 9px;
}
.field-sales-software .miniFlow span {
padding: 6px;
}
.field-sales-software .rowCopy strong {
font-size: 10px;
}
.field-sales-software .rowCopy small {
font-size: 8px;
}
.field-sales-software .statusPill {
font-size: 7px;
padding: 5px;
}
.field-sales-software .miniStats {
gap: 7px;
}
.field-sales-software .miniStats>div {
padding: 9px;
}
.field-sales-software .miniStats strong {
font-size: 18px;
}
.field-sales-software .miniStats span {
font-size: 8px;
}
.field-sales-software .collectionStats>div {
padding: 13px;
}
.field-sales-software .collectionStats strong {
font-size: 24px;
}
.field-sales-software .customerHeader strong {
font-size: 17px;
}
.field-sales-software .customerFacts>div {
padding: 10px;
}
.field-sales-software .customerFacts strong {
font-size: 12px;
}
.field-sales-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-sales-software .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.field-sales-software .ratingItem:last-child {
grid-column: 1/-1;
}
.field-sales-software .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-sales-software .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.field-sales-software .integration small {
font-size: 9px;
}
.field-sales-software .faq details {
padding: 17px;
}
.field-sales-software .faq summary {
font-size: 14px;
gap: 14px;
}
.field-sales-software .faq details p {
font-size: 13px;
}
.field-sales-software .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.field-sales-software .ctaPanel p {
font-size: 15px;
}
.field-sales-software .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.field-sales-software .footerInner {
align-items: flex-start;
flex-direction: column;
}
.field-sales-software .contextSection {
padding: 0 0 24px;
}
.field-sales-software .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.field-sales-software .wrap {
width: calc(100% - 24px);
}
.field-sales-software .brand {
font-size: 18px;
}
.field-sales-software .brandMark {
width: 25px;
height: 25px;
}
.field-sales-software .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.field-sales-software .hero h1 {
font-size: 38px;
}
.field-sales-software .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.field-sales-software .copy h2 {
font-size: 31px;
}
.field-sales-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.field-sales-software .phoneDevice {
width: 210px;
}
.field-sales-software .phoneDevice .rowIcon {
display: grid;
}
.field-sales-software .mobileSide {
gap: 8px;
}
.field-sales-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.field-sales-software .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.field-sales-software .sideTile p {
margin: 0;
}
.field-sales-software .miniFlow span {
padding: 5px;
font-size: 8px;
}
.field-sales-software .collectionStats strong {
font-size: 21px;
}
.field-sales-software .inventoryIntro strong {
font-size: 14px;
}
.field-sales-software .dataRow {
gap: 7px;
}
.field-sales-software .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.field-sales-software .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
.field-sales-software *,
.field-sales-software *::before,
.field-sales-software *::after {
transition: none !important;
animation: none !important;
}
}  #construction-sales-page {
--brand: #00A8F8;
--brand2: #007FC5;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--purple: #7254C7;
--max: 1320px;
width: 100%;
margin: 0;
padding: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
isolation: isolate;
}
#construction-sales-page * {
box-sizing: border-box
}
#construction-sales-page a {
text-decoration: none
}
#construction-sales-page button,
#construction-sales-page input {
font: inherit
}
#construction-sales-page section {
scroll-margin-top: 24px
}
#construction-sales-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px;
}
#construction-sales-page .wrap.faq {
max-width: 900px;
}
#construction-sales-page h1 {
font-size: clamp(40px, 4.1vw, 54px)
}
#construction-sales-page h2 {
font-size: clamp(32px, 3.6vw, 46px)
}
#construction-sales-page h3 {
font-size: 20px;
letter-spacing: -.02em;
line-height: 1.28
}
#construction-sales-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#construction-sales-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0 !important;
background: transparent !important;
}
#construction-sales-page a:focus-visible,
#construction-sales-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#construction-sales-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#construction-sales-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
#construction-sales-page .btn .icon {
width: 17px;
height: 17px
}
#construction-sales-page .btn.black {
background: #0B0B0B;
color: #fff
}
#construction-sales-page .btn.black:hover {
background: #303030
}
#construction-sales-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#construction-sales-page .btn.yellow:hover {
background: #FFD454
}
#construction-sales-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#construction-sales-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#construction-sales-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#construction-sales-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#construction-sales-page .textLink .icon {
width: 17px;
height: 17px
}
#construction-sales-page .textLink:hover {
color: var(--brand2)
}
#construction-sales-page .soft {
background: var(--sky2)
}
#construction-sales-page .sectionHead { margin-bottom: 36px;
margin-left: auto;
margin-right: auto;
}
#construction-sales-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#construction-sales-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#construction-sales-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#construction-sales-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#construction-sales-page .heroGrid>*,
#construction-sales-page .feature>*,
#construction-sales-page .aiGrid>* {
min-width: 0
}
#construction-sales-page .heroCopy {
min-width: 0
}
#construction-sales-page .hero h1 {
max-width: 630px
}
#construction-sales-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#construction-sales-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#construction-sales-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#construction-sales-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#construction-sales-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#construction-sales-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#construction-sales-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#construction-sales-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#construction-sales-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#construction-sales-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#construction-sales-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#construction-sales-page .logos {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 11px
}
#construction-sales-page .logo {
min-height: 60px;
border: 1px solid #E2EBF0;
border-radius: 10px;
display: grid;
place-content: center;
text-align: center;
padding: 10px;
line-height: 1.25;
font-weight: 800;
font-size: 14px;
color: #506578;
letter-spacing: -.02em
}
#construction-sales-page .logo.dhl {
font-size: 24px;
font-style: italic;
font-weight: 900;
letter-spacing: 1px
}
#construction-sales-page .logo.adobe {
font-size: 21px
}
#construction-sales-page .logo.golden {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em
}
#construction-sales-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#construction-sales-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#construction-sales-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#construction-sales-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#construction-sales-page .outcome:nth-child(3):before {
background: var(--green)
}
#construction-sales-page .outcome:nth-child(4):before {
background: var(--purple)
}
#construction-sales-page .outcome>.icon {
color: var(--navy)
}
#construction-sales-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#construction-sales-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#construction-sales-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#construction-sales-page .feature.reverse .visual {
order: -1
}
#construction-sales-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#construction-sales-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#construction-sales-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#construction-sales-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#construction-sales-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#construction-sales-page .tick .icon {
height: 13px;
width: 13px
}
#construction-sales-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#construction-sales-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#construction-sales-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#construction-sales-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#construction-sales-page .uiHeading .icon {
height: 19px;
width: 19px
}
#construction-sales-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#construction-sales-page .pill.green {
background: var(--greenbg);
color: #116746
}
#construction-sales-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
#construction-sales-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#construction-sales-page .panelBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--line)
}
#construction-sales-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#construction-sales-page .tiny {
font-size: 9px;
line-height: 1.5
}
#construction-sales-page .muted {
color: var(--muted)
}
#construction-sales-page .kanban {
padding: 12px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
#construction-sales-page .lane {
min-width: 0;
background: #F5F9FC;
border-radius: 9px;
padding: 9px 7px 14px
}
#construction-sales-page .laneTitle {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 800;
color: #496C81;
margin-bottom: 10px
}
#construction-sales-page .laneTitle>span {
font-weight: 500;
font-size: 8px;
margin-left: auto;
color: #8193A1
}
#construction-sales-page .dot {
display: inline-block;
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: var(--brand)
}
#construction-sales-page .dot.amber {
background: #D8A610
}
#construction-sales-page .dot.green {
background: var(--green)
}
#construction-sales-page .deal {
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 8px;
min-height: 146px
}
#construction-sales-page .deal.featured {
border-color: #83C9EA;
border-top: 3px solid var(--brand);
padding-top: 8px
}
#construction-sales-page .deal strong {
display: block;
font-size: 12px;
line-height: 1.4;
margin: 8px 0 6px;
letter-spacing: -.02em
}
#construction-sales-page .deal p {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
min-height: 27px
}
#construction-sales-page .dealFoot {
border-top: 1px solid #E7EEF3;
margin-top: 12px;
padding-top: 9px;
display: flex;
align-items: center;
gap: 5px;
font-size: 8px;
color: #557386
}
#construction-sales-page .avatar {
display: grid;
place-items: center;
border-radius: 50%;
width: 22px;
height: 22px;
flex: none;
font-size: 7px;
font-weight: 800;
color: var(--navy);
background: #EAF4FA
}
#construction-sales-page .nextTask {
border: 1px solid var(--line);
background: #fff;
display: flex;
align-items: center;
gap: 10px;
padding: 14px;
border-radius: 11px;
margin-top: 13px
}
#construction-sales-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#construction-sales-page .nextTask .tileIcon {
width: 32px;
height: 32px;
flex-basis: 32px;
background: var(--yellowsoft);
color: #8B6C18
}
#construction-sales-page .nextTask .tileIcon .icon {
width: 19px;
height: 19px
}
#construction-sales-page .nextTask>div {
min-width: 0;
flex: 1
}
#construction-sales-page .nextTask strong {
font-size: 11px;
display: block;
line-height: 1.5
}
#construction-sales-page .nextTask>div>span {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
#construction-sales-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#construction-sales-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#construction-sales-page .sheetTop {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
border-bottom: 1px solid var(--line)
}
#construction-sales-page .sheetTop strong {
font-size: 18px;
color: var(--navy);
line-height: 1.4;
display: block;
letter-spacing: -.03em;
margin: 5px 0 3px
}
#construction-sales-page .sheetBadge {
width: 38px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid #D4E4ED;
border-radius: 7px;
background: #F5FBFF;
color: #4691B7
}
#construction-sales-page .estimateLines {
padding: 0 18px
}
#construction-sales-page .estimateLines>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #E6EEF3;
padding: 12px 0;
font-size: 11px;
line-height: 1.5
}
#construction-sales-page .estimateLines>div>span {
display: flex;
align-items: center;
gap: 8px
}
#construction-sales-page .estimateLines .icon {
width: 17px;
height: 17px;
color: var(--navy)
}
#construction-sales-page .estimateLines b {
font-size: 12px;
color: var(--navy)
}
#construction-sales-page .estimateLines .lineHeader {
font-size: 8px;
font-weight: 700;
color: var(--muted);
padding: 10px 0
}
#construction-sales-page .estimateLines .lineTotal {
font-weight: 750;
border-bottom: 0
}
#construction-sales-page .estimateLines .lineTotal b {
font-size: 17px
}
#construction-sales-page .priceReview {
background: #F2FAFE;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding: 14px 18px
}
#construction-sales-page .priceReview span {
display: block;
font-size: 9px;
color: var(--muted)
}
#construction-sales-page .priceReview strong {
display: block;
font-size: 23px;
color: var(--navy);
letter-spacing: -.04em;
margin-top: 5px;
line-height: 1.3
}
#construction-sales-page .sheetNote {
font-size: 8px;
line-height: 1.5;
color: var(--muted);
padding: 9px 18px
}
#construction-sales-page .optionRow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
font-size: 10px;
color: #496C81
}
#construction-sales-page .optionRow>span:first-child {
display: flex;
align-items: center;
gap: 6px;
margin-right: auto
}
#construction-sales-page .optionRow .icon {
width: 17px;
height: 17px
}
#construction-sales-page .optionPill {
padding: 6px 8px;
border: 1px solid #CEDFEA;
border-radius: 6px;
font-size: 9px;
background: #fff
}
#construction-sales-page .optionPill.selected {
background: var(--yellowsoft);
border-color: #EADA9A;
color: #755B0A
}
#construction-sales-page .vendorCards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 15px 13px
}
#construction-sales-page .vendorCard {
min-width: 0;
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px 10px
}
#construction-sales-page .vendorCard.preferred {
background: #FFFCF2;
border-color: #E9D797
}
#construction-sales-page .vendorCard>strong {
display: block;
font-size: 22px;
line-height: 1.3;
letter-spacing: -.04em;
color: var(--navy);
margin: 7px 0 16px
}
#construction-sales-page .vendorMeta {
display: grid;
gap: 11px;
margin-bottom: 15px
}
#construction-sales-page .vendorMeta>span {
display: block;
font-size: 8px;
color: var(--muted)
}
#construction-sales-page .vendorMeta b {
display: block;
font-size: 10px;
color: var(--ink);
font-weight: 650;
margin-top: 3px
}
#construction-sales-page .vendorCard .pill {
padding: 4px 6px;
font-size: 8px
}
#construction-sales-page .quoteCheck {
padding: 14px;
background: #F5FBFF;
border-top: 1px solid var(--line);
font-size: 10px;
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: 7px;
color: #496C81
}
#construction-sales-page .quoteCheck .icon {
width: 16px;
height: 16px;
margin-top: 1px
}
#construction-sales-page .miniFlow {
display: grid;
grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
align-items: center;
gap: 6px;
margin-top: 15px;
padding: 14px 9px;
background: #0D2939;
border-radius: 10px;
color: #fff
}
#construction-sales-page .miniFlow>span {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
text-align: center;
font-size: 9px;
line-height: 1.4
}
#construction-sales-page .miniFlow .icon {
color: var(--yellow);
width: 21px;
height: 21px
}
#construction-sales-page .miniFlow>.flowArrow {
width: 17px;
height: 17px;
color: #86AEC5
}
#construction-sales-page .approvalLayout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 13px
}
#construction-sales-page .proposalDoc {
border: 1px solid var(--line);
border-radius: 11px;
background: white;
padding: 18px
}
#construction-sales-page .docBrand {
display: flex;
align-items: center;
gap: 7px;
font-size: 7px;
line-height: 1.5;
letter-spacing: .04em;
font-weight: 800;
color: #41687E;
padding-bottom: 16px;
margin-bottom: 15px;
border-bottom: 1px solid var(--line)
}
#construction-sales-page .docBrand .icon {
width: 21px;
height: 21px
}
#construction-sales-page .proposalDoc h3 {
font-size: 20px;
margin-top: 8px;
color: var(--navy)
}
#construction-sales-page .proposalDoc>p {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 9px
}
#construction-sales-page .scopeLines {
display: grid;
gap: 11px;
margin: 22px 0
}
#construction-sales-page .scopeLines>span {
display: flex;
gap: 7px;
align-items: center;
font-size: 9px;
color: #41657B
}
#construction-sales-page .scopeLines .icon {
width: 14px;
height: 14px;
color: var(--green)
}
#construction-sales-page .docPrice {
border-top: 1px solid var(--line);
padding-top: 14px;
margin-bottom: 7px
}
#construction-sales-page .docPrice>span {
font-size: 9px;
color: var(--muted)
}
#construction-sales-page .docPrice>strong {
display: block;
color: var(--navy);
font-size: 29px;
font-weight: 750;
line-height: 1.3;
letter-spacing: -.04em;
margin-top: 4px
}
#construction-sales-page .approvalSide {
display: flex;
flex-direction: column;
gap: 12px
}
#construction-sales-page .approvalStamp {
background: #EAF8F3;
border: 1px solid #BFDFD0;
border-radius: 11px;
text-align: center;
padding: 19px 10px;
color: #147353
}
#construction-sales-page .approvalStamp>.icon {
height: 29px;
width: 29px;
margin-bottom: 9px
}
#construction-sales-page .approvalStamp strong {
display: block;
font-size: 12px;
line-height: 1.5
}
#construction-sales-page .approvalStamp>span {
display: block;
font-size: 9px;
color: #557F70;
margin-top: 5px;
line-height: 1.5
}
#construction-sales-page .signaturePanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px
}
#construction-sales-page .sampleSignature {
display: block;
color: #567D94;
font-size: 17px;
font-style: italic;
font-family: Georgia, serif;
white-space: normal;
line-height: 1.3;
border-bottom: 1px solid var(--line);
padding: 17px 0 10px;
margin-bottom: 5px
}
#construction-sales-page .reminderBox {
padding: 13px 12px;
border-radius: 10px;
background: var(--yellowsoft);
border: 1px solid #EADAA2;
display: flex;
align-items: center;
gap: 7px;
color: #7E6722;
font-size: 10px;
line-height: 1.5;
margin-top: auto
}
#construction-sales-page .reminderBox .icon {
width: 20px;
height: 20px
}
#construction-sales-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#construction-sales-page .dark h2,
#construction-sales-page .dark h3 {
color: white
}
#construction-sales-page .dark .ey {
background: var(--yellow);
color: #111
}
#construction-sales-page .dark .textLink {
color: #fff
}
#construction-sales-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#construction-sales-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#construction-sales-page .dark .sectionHead {
margin-bottom: 0
}
#construction-sales-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#construction-sales-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#construction-sales-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#construction-sales-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#construction-sales-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#construction-sales-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#construction-sales-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#construction-sales-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#construction-sales-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#construction-sales-page .takeoffPanel {
background: #fff;
border: 1px solid #405766;
border-radius: 17px;
overflow: hidden;
color: var(--ink)
}
#construction-sales-page .takeoffHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
padding: 19px;
border-bottom: 1px solid var(--line)
}
#construction-sales-page .takeoffHeader strong {
display: block;
font-size: 14px;
line-height: 1.5;
margin-top: 5px;
letter-spacing: -.02em
}
#construction-sales-page .takeoffBody {
padding: 17px
}
#construction-sales-page .planWrap {
border: 1px solid var(--line);
border-radius: 10px;
background: linear-gradient(#F3F8FB 1px, transparent 1px), linear-gradient(90deg, #F3F8FB 1px, transparent 1px);
background-size: 19px 19px;
padding: 6px
}
#construction-sales-page .planArt {
display: block;
width: 100%;
height: auto;
aspect-ratio: 360 / 245;
max-width: 390px;
margin: auto
}
#construction-sales-page .planCaption {
display: block;
font-size: 8px;
text-align: center;
color: #6B8594;
line-height: 1.4;
margin: 0 0 7px
}
#construction-sales-page .detectedItems {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px
}
#construction-sales-page .detectedItems>div {
padding: 11px;
background: #F5FBFF;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 9px;
display: flex;
align-items: center;
gap: 6px
}
#construction-sales-page .detectedItems b {
margin-left: auto;
font-size: 15px;
color: var(--navy)
}
#construction-sales-page .takeoffFooter {
padding: 15px 18px;
border-top: 1px solid var(--line);
background: #EAF8F3;
color: #217557;
font-size: 10px;
line-height: 1.6;
display: flex;
align-items: center;
gap: 8px
}
#construction-sales-page .takeoffFooter .icon {
width: 19px;
height: 19px
}
#construction-sales-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#construction-sales-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#construction-sales-page .connectedCard h3 {
margin: 18px 0 11px
}
#construction-sales-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#construction-sales-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#construction-sales-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#construction-sales-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#construction-sales-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#construction-sales-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#construction-sales-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#construction-sales-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#construction-sales-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#construction-sales-page .featureCard>.icon {
color: var(--navy)
}
#construction-sales-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#construction-sales-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-sales-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#construction-sales-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#construction-sales-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#construction-sales-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#construction-sales-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#construction-sales-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#construction-sales-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#construction-sales-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#construction-sales-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#construction-sales-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#construction-sales-page .sectionNote {
font-size: 12px;
line-height: 1.7;
color: var(--muted);
text-align: center;
margin: 20px auto 0;
max-width: 850px
}
#construction-sales-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#construction-sales-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#construction-sales-page .useCase>.icon {
color: var(--navy)
}
#construction-sales-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#construction-sales-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-sales-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#construction-sales-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#construction-sales-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#construction-sales-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#construction-sales-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#construction-sales-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#construction-sales-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-sales-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#construction-sales-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#construction-sales-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#construction-sales-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#construction-sales-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#construction-sales-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#construction-sales-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#construction-sales-page details {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 19px 21px
}   #construction-sales-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#construction-sales-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#construction-sales-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#construction-sales-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#construction-sales-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#construction-sales-page .ctaBtns .btn {
min-width: 219px
}
#construction-sales-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#construction-sales-page .btn.darkOutline:hover {
background: #252D33
}
#construction-sales-page .final a:focus-visible {
outline-color: var(--yellow)
}
#construction-sales-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#construction-sales-page .heroGrid {
gap: 28px
}
#construction-sales-page h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
#construction-sales-page .hero .lead {
font-size: 16px
}
#construction-sales-page .feature,
#construction-sales-page .aiGrid {
gap: 30px
}
#construction-sales-page .visual {
padding: 17px
}
#construction-sales-page .lane {
padding: 9px 5px
}
#construction-sales-page .kanban {
gap: 6px;
padding: 10px
}
#construction-sales-page .laneTitle {
font-size: 8px
}
#construction-sales-page .vendorCards {
padding: 12px 10px;
gap: 7px
}
#construction-sales-page .vendorCard {
padding: 11px 7px
}
#construction-sales-page .vendorCard>strong {
font-size: 20px
}
#construction-sales-page .approvalLayout {
gap: 10px
}
#construction-sales-page .proposalDoc {
padding: 14px
}
#construction-sales-page .proposalDoc h3 {
font-size: 18px
}
#construction-sales-page .nextTask .pill {
display: none
}
#construction-sales-page .toolCard {
padding: 21px 15px
}
#construction-sales-page .toolCard strong {
font-size: 14px
}
#construction-sales-page .handoffBand {
padding: 20px
}
#construction-sales-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#construction-sales-page section {
padding: 64px 0
}
#construction-sales-page .hero {
padding: 34px 0 42px
}
#construction-sales-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#construction-sales-page .heroCopy {
max-width: 790px
}
#construction-sales-page .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
#construction-sales-page .hero .lead {
max-width: 760px
}
#construction-sales-page .heroVisual {
max-width: 460px;
justify-self: center
}
#construction-sales-page .desktopBreak {
display: none
}
#construction-sales-page .feature,
#construction-sales-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#construction-sales-page .feature.reverse .visual {
order: 0
}
#construction-sales-page .featureCopy {
max-width: 790px
}
#construction-sales-page .visual {
max-width: 640px;
margin: 0 auto
}
#construction-sales-page .outcomes,
#construction-sales-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-sales-page .connectedGrid {
gap: 13px
}
#construction-sales-page .connectedCard {
padding: 22px
}
#construction-sales-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-sales-page .aiVisual {
max-width: 600px;
margin: auto
}
#construction-sales-page .aiMini {
max-width: 780px
}
#construction-sales-page .takeoffBody {
padding: 20px
}
#construction-sales-page .planArt {
max-width: 370px
}
#construction-sales-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#construction-sales-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#construction-sales-page .toolCard {
min-height: 145px
}
#construction-sales-page .roleGrid {
gap: 20px
}
#construction-sales-page .roleCard {
padding-right: 18px
}
#construction-sales-page .roleCard h3 {
font-size: 20px
}
#construction-sales-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#construction-sales-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#construction-sales-page .workflowLead br {
display: none
}
#construction-sales-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#construction-sales-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#construction-sales-page .final .btn {
min-width: 210px
}
#construction-sales-page .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#construction-sales-page .wrap {
width: calc(100% - 32px)
}
#construction-sales-page section {
padding: 49px 0
}
#construction-sales-page h2 {
font-size: 33px;
line-height: 1.15
}
#construction-sales-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#construction-sales-page .sectionHead {
margin-bottom: 27px
}
#construction-sales-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#construction-sales-page .hero {
padding: 25px 0 34px
}
#construction-sales-page .heroGrid {
gap: 21px
}
#construction-sales-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#construction-sales-page .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
#construction-sales-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#construction-sales-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#construction-sales-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#construction-sales-page .hero .micro {
font-size: 11px
}
#construction-sales-page .heroPills {
gap: 6px;
margin-top: 16px
}
#construction-sales-page .heroPills span {
font-size: 9px
}
#construction-sales-page .heroVisual {
max-width: 420px
}
#construction-sales-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#construction-sales-page .trust {
padding: 22px 0
}
#construction-sales-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#construction-sales-page .logos {
gap: 7px
}
#construction-sales-page .logo {
font-size: 11px;
min-height: 53px;
padding: 8px
}
#construction-sales-page .logo.dhl {
font-size: 21px
}
#construction-sales-page .logo.adobe {
font-size: 18px
}
#construction-sales-page .logo.golden {
font-size: 8px
}
#construction-sales-page .outcomes {
gap: 12px
}
#construction-sales-page .outcome {
padding: 19px
}
#construction-sales-page .outcome h3 {
font-size: 17px
}
#construction-sales-page .outcome p {
font-size: 13px
}
#construction-sales-page .feature {
gap: 27px
}
#construction-sales-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#construction-sales-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#construction-sales-page .fi {
font-size: 12px
}
#construction-sales-page .textLink {
font-size: 13px
}
#construction-sales-page .visual {
padding: 15px;
border-radius: 16px
}
#construction-sales-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#construction-sales-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#construction-sales-page .uiHeading .icon {
width: 18px;
height: 18px
}
#construction-sales-page .panelBar {
padding: 12px
}
#construction-sales-page .panelBar>.tiny {
font-size: 8px;
max-width: 120px;
text-align: right
}
#construction-sales-page .kanban {
padding: 10px;
gap: 7px
}
#construction-sales-page .lane {
padding: 8px 5px 11px
}
#construction-sales-page .laneTitle {
font-size: 8px;
gap: 4px
}
#construction-sales-page .laneTitle>span {
display: none
}
#construction-sales-page .deal {
padding: 9px 6px;
min-height: 148px
}
#construction-sales-page .deal strong {
font-size: 11px;
line-height: 1.45
}
#construction-sales-page .deal>.tiny {
font-size: 7px
}
#construction-sales-page .deal p {
font-size: 8px;
min-height: 30px
}
#construction-sales-page .dealFoot {
font-size: 7px;
gap: 4px
}
#construction-sales-page .avatar {
height: 18px;
width: 18px;
font-size: 6px
}
#construction-sales-page .nextTask {
padding: 12px;
gap: 8px
}
#construction-sales-page .nextTask strong {
font-size: 10px
}
#construction-sales-page .nextTask>div>span {
font-size: 8px
}
#construction-sales-page .nextTask .pill {
display: none
}
#construction-sales-page .uiFoot {
font-size: 9px
}
#construction-sales-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#construction-sales-page .sheetTop {
padding: 15px
}
#construction-sales-page .sheetTop strong {
font-size: 17px
}
#construction-sales-page .estimateLines {
padding: 0 15px
}
#construction-sales-page .estimateLines>div {
padding: 11px 0
}
#construction-sales-page .priceReview {
padding: 13px 15px;
gap: 10px
}
#construction-sales-page .priceReview strong {
font-size: 22px
}
#construction-sales-page .priceReview span {
font-size: 8px
}
#construction-sales-page .sheetNote {
padding: 8px 15px;
font-size: 7px
}
#construction-sales-page .optionRow {
gap: 6px
}
#construction-sales-page .optionRow>span:first-child {
width: 100%;
margin-bottom: 4px
}
#construction-sales-page .vendorCards {
gap: 7px;
padding: 12px 10px
}
#construction-sales-page .vendorCard {
padding: 11px 7px
}
#construction-sales-page .vendorCard>strong {
font-size: 20px;
margin-bottom: 13px
}
#construction-sales-page .vendorCard .pill {
font-size: 7px;
padding: 4px 5px
}
#construction-sales-page .vendorMeta {
gap: 10px
}
#construction-sales-page .vendorMeta b {
font-size: 9px
}
#construction-sales-page .quoteCheck {
font-size: 9px;
padding: 12px
}
#construction-sales-page .miniFlow {
padding: 13px 8px;
gap: 5px;
grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr)
}
#construction-sales-page .miniFlow>span {
font-size: 8px
}
#construction-sales-page .miniFlow>.flowArrow {
height: 13px;
width: 13px
}
#construction-sales-page .approvalLayout {
gap: 10px;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr)
}
#construction-sales-page .proposalDoc {
padding: 13px
}
#construction-sales-page .docBrand {
font-size: 6px;
gap: 5px
}
#construction-sales-page .docBrand .icon {
width: 18px;
height: 18px
}
#construction-sales-page .proposalDoc h3 {
font-size: 18px
}
#construction-sales-page .proposalDoc>p {
font-size: 9px
}
#construction-sales-page .scopeLines {
gap: 10px;
margin: 17px 0
}
#construction-sales-page .scopeLines>span {
font-size: 8px;
gap: 5px
}
#construction-sales-page .docPrice>strong {
font-size: 27px
}
#construction-sales-page .proposalDoc>.tiny {
font-size: 8px
}
#construction-sales-page .approvalStamp {
padding: 16px 9px
}
#construction-sales-page .approvalStamp strong {
font-size: 11px
}
#construction-sales-page .approvalStamp>span {
font-size: 8px
}
#construction-sales-page .signaturePanel {
padding: 12px
}
#construction-sales-page .sampleSignature {
font-size: 16px
}
#construction-sales-page .reminderBox {
font-size: 9px;
padding: 11px 9px
}
#construction-sales-page .reminderBox .icon {
width: 17px;
height: 17px
}
#construction-sales-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#construction-sales-page .aiMini {
gap: 11px;
margin-top: 23px
}
#construction-sales-page .aiMini article {
padding: 16px
}
#construction-sales-page .aiMini h3 {
font-size: 15px
}
#construction-sales-page .aiMini p {
font-size: 12px
}
#construction-sales-page .aiNote {
font-size: 10px
}
#construction-sales-page .takeoffHeader {
padding: 15px;
gap: 9px
}
#construction-sales-page .takeoffHeader strong {
font-size: 12px
}
#construction-sales-page .takeoffHeader .pill {
font-size: 8px
}
#construction-sales-page .takeoffBody {
padding: 13px
}
#construction-sales-page .detectedItems {
gap: 8px
}
#construction-sales-page .detectedItems>div {
font-size: 8px;
padding: 10px 8px;
gap: 5px
}
#construction-sales-page .detectedItems b {
font-size: 13px
}
#construction-sales-page .takeoffFooter {
padding: 13px;
font-size: 9px
}
#construction-sales-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#construction-sales-page .connectedCard {
padding: 23px
}
#construction-sales-page .connectedCard h3 {
margin: 15px 0 9px
}
#construction-sales-page .connectedCard p {
font-size: 14px
}
#construction-sales-page .handoffBand {
padding: 20px
}
#construction-sales-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#construction-sales-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#construction-sales-page .handoffBand small {
font-size: 11px
}
#construction-sales-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#construction-sales-page .featureGrid {
gap: 13px
}
#construction-sales-page .featureCard {
padding: 21px
}
#construction-sales-page .featureCard h3 {
font-size: 17px
}
#construction-sales-page .featureCard p {
font-size: 13px
}
#construction-sales-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#construction-sales-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#construction-sales-page .toolCard strong {
font-size: 15px
}
#construction-sales-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#construction-sales-page .toolCard:last-child .toolArrow {
top: 31px
}
#construction-sales-page .toolCard:last-child strong {
padding-right: 25px
}
#construction-sales-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#construction-sales-page .sectionNote {
font-size: 11px
}
#construction-sales-page .useCases {
gap: 13px
}
#construction-sales-page .useCase {
padding: 21px 18px
}
#construction-sales-page .useCase h3 {
font-size: 17px
}
#construction-sales-page .useCase p {
font-size: 13px
}
#construction-sales-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#construction-sales-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#construction-sales-page .roleCard:last-child {
padding-bottom: 0
}
#construction-sales-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#construction-sales-page .roleCard>strong {
font-size: 14px
}
#construction-sales-page .roleCard p {
font-size: 14px
}
#construction-sales-page .workflowBand {
padding: 28px 0
}
#construction-sales-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#construction-sales-page .workflowLead {
font-size: 18px
}
#construction-sales-page .workflowStep strong {
font-size: 14px
}
#construction-sales-page .workflowStep p {
font-size: 10px
}
#construction-sales-page details {
padding: 16px
}
#construction-sales-page summary {
font-size: 14px;
gap: 14px
}
#construction-sales-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#construction-sales-page .final h2 {
font-size: 32px
}
#construction-sales-page .final p {
font-size: 14px;
line-height: 1.8
}
#construction-sales-page .final .ey {
font-size: 9px
}
#construction-sales-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#construction-sales-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#construction-sales-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#construction-sales-page .outcomes,
#construction-sales-page .featureGrid,
#construction-sales-page .useCases {
grid-template-columns: 1fr
}
#construction-sales-page .outcome {
padding: 23px
}
#construction-sales-page .outcome h3 {
font-size: 18px
}
#construction-sales-page .outcome p {
font-size: 14px
}
#construction-sales-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#construction-sales-page .fi {
font-size: 13px
}
#construction-sales-page .kanban {
grid-template-columns: 1fr;
padding: 11px;
gap: 9px
}
#construction-sales-page .lane {
display: grid;
grid-template-columns: 73px minmax(0, 1fr);
align-items: center;
gap: 9px;
padding: 10px
}
#construction-sales-page .laneTitle {
font-size: 9px;
margin: 0
}
#construction-sales-page .deal {
min-height: 0;
padding: 10px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 8px;
align-items: center
}
#construction-sales-page .deal.featured {
border-top-width: 1px;
border-left: 3px solid var(--brand);
padding: 10px 10px 10px 8px
}
#construction-sales-page .deal>.tiny {
font-size: 8px;
grid-column: 1/-1
}
#construction-sales-page .deal strong {
font-size: 12px;
margin: 3px 0
}
#construction-sales-page .deal p {
min-height: 0;
font-size: 8px;
grid-column: 1/-1;
grid-row: 3
}
#construction-sales-page .dealFoot {
border: 0;
margin: 0;
padding: 0;
grid-column: 2;
grid-row: 2
}
#construction-sales-page .dealFoot>span:last-child {
display: none
}
#construction-sales-page .avatar {
height: 22px;
width: 22px;
font-size: 7px
}
#construction-sales-page .panelBar>.tiny {
display: none
}
#construction-sales-page .vendorCards {
grid-template-columns: 1fr;
padding: 12px;
gap: 10px
}
#construction-sales-page .vendorCard {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 9px;
padding: 12px
}
#construction-sales-page .vendorCard>strong {
margin: 0;
font-size: 23px;
grid-row: 1/3;
grid-column: 2
}
#construction-sales-page .vendorMeta {
grid-template-columns: 1fr 1fr;
grid-column: 1/-1;
margin: 9px 0 6px;
gap: 10px
}
#construction-sales-page .vendorMeta>span {
font-size: 9px
}
#construction-sales-page .vendorMeta b {
font-size: 11px
}
#construction-sales-page .vendorCard .pill {
justify-self: start;
font-size: 8px;
grid-column: 1/-1
}
#construction-sales-page .vendorCard>.tiny {
font-size: 10px
}
#construction-sales-page .approvalLayout {
grid-template-columns: 1fr
}
#construction-sales-page .proposalDoc {
padding: 18px
}
#construction-sales-page .proposalDoc h3 {
font-size: 21px
}
#construction-sales-page .docBrand {
font-size: 7px
}
#construction-sales-page .proposalDoc>p {
font-size: 11px
}
#construction-sales-page .scopeLines>span {
font-size: 11px
}
#construction-sales-page .scopeLines {
gap: 12px
}
#construction-sales-page .proposalDoc>.tiny {
font-size: 9px
}
#construction-sales-page .approvalSide {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px
}
#construction-sales-page .approvalStamp {
padding: 16px 10px
}
#construction-sales-page .signaturePanel {
padding: 13px;
display: flex;
flex-direction: column;
justify-content: center
}
#construction-sales-page .reminderBox {
grid-column: 1/-1;
margin: 0;
justify-content: center;
font-size: 10px
}
#construction-sales-page .sampleSignature {
padding-top: 14px;
font-size: 17px
}
#construction-sales-page .aiMini {
grid-template-columns: 1fr
}
#construction-sales-page .aiMini h3 {
font-size: 17px
}
#construction-sales-page .aiMini p {
font-size: 13px
}
#construction-sales-page .aiMini article {
padding: 19px
}
#construction-sales-page .takeoffHeader .pill {
display: none
}
#construction-sales-page .takeoffHeader strong {
font-size: 13px
}
#construction-sales-page .detectedItems>div {
font-size: 8px;
gap: 5px;
padding: 9px 7px
}
#construction-sales-page .detectedItems b {
font-size: 12px
}
#construction-sales-page .featureCard h3,
#construction-sales-page .useCase h3 {
font-size: 19px
}
#construction-sales-page .featureCard p,
#construction-sales-page .useCase p {
font-size: 14px
}
#construction-sales-page .toolsGrid {
grid-template-columns: 1fr
}
#construction-sales-page .toolCard,
#construction-sales-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#construction-sales-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#construction-sales-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#construction-sales-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#construction-sales-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#construction-sales-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#construction-sales-page .toolArrow,
#construction-sales-page .toolCard:last-child .toolArrow {
top: 30px
}
#construction-sales-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#construction-sales-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#construction-sales-page h2 {
font-size: 30px
}
#construction-sales-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#construction-sales-page .hero h1 {
font-size: 31px
}
#construction-sales-page .heroPills span {
font-size: 8px
}
#construction-sales-page .heroPills {
gap: 5px
}
#construction-sales-page .uiHeading {
font-size: 11px
}
#construction-sales-page .uiHeading>.pill {
font-size: 7px
}
#construction-sales-page .visual {
padding: 12px
}
#construction-sales-page .lane {
grid-template-columns: 67px minmax(0, 1fr);
gap: 6px;
padding: 8px
}
#construction-sales-page .laneTitle {
font-size: 8px
}
#construction-sales-page .deal strong {
font-size: 11px
}
#construction-sales-page .nextTask .tileIcon {
width: 28px;
height: 28px;
flex-basis: 28px
}
#construction-sales-page .nextTask .tileIcon .icon {
height: 17px;
width: 17px
}
#construction-sales-page .priceReview strong {
font-size: 21px
}
#construction-sales-page .detectedItems {
grid-template-columns: 1fr
}
#construction-sales-page .detectedItems>div {
font-size: 10px
}
#construction-sales-page .detectedItems b {
font-size: 15px
}
#construction-sales-page .final {
padding: 26px 20px
}
#construction-sales-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#construction-sales-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#construction-sales-page section {
padding: 24px 0
}
#construction-sales-page .hero,
#construction-sales-page .soft {
background: #fff
}
#construction-sales-page .dark,
#construction-sales-page .workflowBand,
#construction-sales-page .final {
background: #fff;
color: #11283A
}
#construction-sales-page .dark h2,
#construction-sales-page .dark h3,
#construction-sales-page .final h2 {
color: #11283A
}
#construction-sales-page .dark p,
#construction-sales-page .final p {
color: #52697C
}
#construction-sales-page .btn {
display: none
}
#construction-sales-page .visual,
#construction-sales-page .outcome,
#construction-sales-page .featureCard,
#construction-sales-page details {
break-inside: avoid
}
#construction-sales-page .heroImage {
max-width: 380px
}
#construction-sales-page .heroVisual {
justify-self: center
}
}
.constructionSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.constructionSkip:focus {
top: 12px
}  #construction-project-page {
--brand: #00A8F8;
--brand2: #007FC5;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--purple: #7254C7;
--max: 1320px;
width: 100%;
margin: 0;
padding: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
isolation: isolate;
}
#construction-project-page * {
box-sizing: border-box
}
#construction-project-page a {
text-decoration: none
}
#construction-project-page button,
#construction-project-page input {
font: inherit
} #construction-project-page section {
scroll-margin-top: 24px
}
#construction-project-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px;
}
#construction-project-page .wrap.faq {
max-width: 900px;
}  #construction-project-page h3 {
font-size: 20px;
letter-spacing: -.02em;
line-height: 1.28
}
#construction-project-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#construction-project-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0 !important;
background: transparent !important;
}
#construction-project-page a:focus-visible,
#construction-project-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#construction-project-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#construction-project-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
#construction-project-page .btn .icon {
width: 17px;
height: 17px
}
#construction-project-page .btn.black {
background: #0B0B0B;
color: #fff
}
#construction-project-page .btn.black:hover {
background: #303030
}
#construction-project-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#construction-project-page .btn.yellow:hover {
background: #FFD454
}
#construction-project-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#construction-project-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#construction-project-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#construction-project-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#construction-project-page .textLink .icon {
width: 17px;
height: 17px
}
#construction-project-page .textLink:hover {
color: var(--brand2)
}
#construction-project-page .soft {
background: var(--sky2)
}
#construction-project-page .sectionHead { margin-bottom: 36px
}
#construction-project-page .awardBand .sectionHead {
margin-bottom: 0;
}
#construction-project-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#construction-project-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#construction-project-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#construction-project-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#construction-project-page .heroGrid>*,
#construction-project-page .feature>*,
#construction-project-page .aiGrid>* {
min-width: 0
}
#construction-project-page .heroCopy {
min-width: 0
}
#construction-project-page .hero h1 {
max-width: 630px
}
#construction-project-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#construction-project-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#construction-project-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#construction-project-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#construction-project-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#construction-project-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#construction-project-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#construction-project-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#construction-project-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#construction-project-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#construction-project-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#construction-project-page .logos {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 11px
}
#construction-project-page .logo {
min-height: 60px;
border: 1px solid #E2EBF0;
border-radius: 10px;
display: grid;
place-content: center;
text-align: center;
padding: 10px;
line-height: 1.25;
font-weight: 800;
font-size: 14px;
color: #506578;
letter-spacing: -.02em
}
#construction-project-page .logo.dhl {
font-size: 24px;
font-style: italic;
font-weight: 900;
letter-spacing: 1px
}
#construction-project-page .logo.adobe {
font-size: 21px
}
#construction-project-page .logo.golden {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em
}
#construction-project-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#construction-project-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#construction-project-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#construction-project-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#construction-project-page .outcome:nth-child(3):before {
background: var(--green)
}
#construction-project-page .outcome:nth-child(4):before {
background: var(--purple)
}
#construction-project-page .outcome>.icon {
color: var(--navy)
}
#construction-project-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#construction-project-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#construction-project-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#construction-project-page .feature.reverse .visual {
order: -1
}
#construction-project-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#construction-project-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#construction-project-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#construction-project-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#construction-project-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#construction-project-page .tick .icon {
height: 13px;
width: 13px
}
#construction-project-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#construction-project-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#construction-project-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#construction-project-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#construction-project-page .uiHeading .icon {
height: 19px;
width: 19px
}
#construction-project-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#construction-project-page .pill.green {
background: var(--greenbg);
color: #116746
}
#construction-project-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
#construction-project-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#construction-project-page .panelBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--line)
}
#construction-project-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#construction-project-page .tiny {
font-size: 9px;
line-height: 1.5
}
#construction-project-page .muted {
color: var(--muted)
}
#construction-project-page .kanban {
padding: 12px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
#construction-project-page .lane {
min-width: 0;
background: #F5F9FC;
border-radius: 9px;
padding: 9px 7px 14px
}
#construction-project-page .laneTitle {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 800;
color: #496C81;
margin-bottom: 10px
}
#construction-project-page .laneTitle>span {
font-weight: 500;
font-size: 8px;
margin-left: auto;
color: #8193A1
}
#construction-project-page .dot {
display: inline-block;
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: var(--brand)
}
#construction-project-page .dot.amber {
background: #D8A610
}
#construction-project-page .dot.green {
background: var(--green)
}
#construction-project-page .deal {
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 8px;
min-height: 146px
}
#construction-project-page .deal.featured {
border-color: #83C9EA;
border-top: 3px solid var(--brand);
padding-top: 8px
}
#construction-project-page .deal strong {
display: block;
font-size: 12px;
line-height: 1.4;
margin: 8px 0 6px;
letter-spacing: -.02em
}
#construction-project-page .deal p {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
min-height: 27px
}
#construction-project-page .dealFoot {
border-top: 1px solid #E7EEF3;
margin-top: 12px;
padding-top: 9px;
display: flex;
align-items: center;
gap: 5px;
font-size: 8px;
color: #557386
}
#construction-project-page .avatar {
display: grid;
place-items: center;
border-radius: 50%;
width: 22px;
height: 22px;
flex: none;
font-size: 7px;
font-weight: 800;
color: var(--navy);
background: #EAF4FA
}
#construction-project-page .nextTask {
border: 1px solid var(--line);
background: #fff;
display: flex;
align-items: center;
gap: 10px;
padding: 14px;
border-radius: 11px;
margin-top: 13px
}
#construction-project-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#construction-project-page .nextTask .tileIcon {
width: 32px;
height: 32px;
flex-basis: 32px;
background: var(--yellowsoft);
color: #8B6C18
}
#construction-project-page .nextTask .tileIcon .icon {
width: 19px;
height: 19px
}
#construction-project-page .nextTask>div {
min-width: 0;
flex: 1
}
#construction-project-page .nextTask strong {
font-size: 11px;
display: block;
line-height: 1.5
}
#construction-project-page .nextTask>div>span {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
#construction-project-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#construction-project-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#construction-project-page .sheetTop {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
border-bottom: 1px solid var(--line)
}
#construction-project-page .sheetTop strong {
font-size: 18px;
color: var(--navy);
line-height: 1.4;
display: block;
letter-spacing: -.03em;
margin: 5px 0 3px
}
#construction-project-page .sheetBadge {
width: 38px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid #D4E4ED;
border-radius: 7px;
background: #F5FBFF;
color: #4691B7
}
#construction-project-page .estimateLines {
padding: 0 18px
}
#construction-project-page .estimateLines>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #E6EEF3;
padding: 12px 0;
font-size: 11px;
line-height: 1.5
}
#construction-project-page .estimateLines>div>span {
display: flex;
align-items: center;
gap: 8px
}
#construction-project-page .estimateLines .icon {
width: 17px;
height: 17px;
color: var(--navy)
}
#construction-project-page .estimateLines b {
font-size: 12px;
color: var(--navy)
}
#construction-project-page .estimateLines .lineHeader {
font-size: 8px;
font-weight: 700;
color: var(--muted);
padding: 10px 0
}
#construction-project-page .estimateLines .lineTotal {
font-weight: 750;
border-bottom: 0
}
#construction-project-page .estimateLines .lineTotal b {
font-size: 17px
}
#construction-project-page .priceReview {
background: #F2FAFE;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding: 14px 18px
}
#construction-project-page .priceReview span {
display: block;
font-size: 9px;
color: var(--muted)
}
#construction-project-page .priceReview strong {
display: block;
font-size: 23px;
color: var(--navy);
letter-spacing: -.04em;
margin-top: 5px;
line-height: 1.3
}
#construction-project-page .sheetNote {
font-size: 8px;
line-height: 1.5;
color: var(--muted);
padding: 9px 18px
}
#construction-project-page .optionRow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
font-size: 10px;
color: #496C81
}
#construction-project-page .optionRow>span:first-child {
display: flex;
align-items: center;
gap: 6px;
margin-right: auto
}
#construction-project-page .optionRow .icon {
width: 17px;
height: 17px
}
#construction-project-page .optionPill {
padding: 6px 8px;
border: 1px solid #CEDFEA;
border-radius: 6px;
font-size: 9px;
background: #fff
}
#construction-project-page .optionPill.selected {
background: var(--yellowsoft);
border-color: #EADA9A;
color: #755B0A
}
#construction-project-page .vendorCards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 15px 13px
}
#construction-project-page .vendorCard {
min-width: 0;
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px 10px
}
#construction-project-page .vendorCard.preferred {
background: #FFFCF2;
border-color: #E9D797
}
#construction-project-page .vendorCard>strong {
display: block;
font-size: 22px;
line-height: 1.3;
letter-spacing: -.04em;
color: var(--navy);
margin: 7px 0 16px
}
#construction-project-page .vendorMeta {
display: grid;
gap: 11px;
margin-bottom: 15px
}
#construction-project-page .vendorMeta>span {
display: block;
font-size: 8px;
color: var(--muted)
}
#construction-project-page .vendorMeta b {
display: block;
font-size: 10px;
color: var(--ink);
font-weight: 650;
margin-top: 3px
}
#construction-project-page .vendorCard .pill {
padding: 4px 6px;
font-size: 8px
}
#construction-project-page .quoteCheck {
padding: 14px;
background: #F5FBFF;
border-top: 1px solid var(--line);
font-size: 10px;
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: 7px;
color: #496C81
}
#construction-project-page .quoteCheck .icon {
width: 16px;
height: 16px;
margin-top: 1px
}
#construction-project-page .miniFlow {
display: grid;
grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
align-items: center;
gap: 6px;
margin-top: 15px;
padding: 14px 9px;
background: #0D2939;
border-radius: 10px;
color: #fff
}
#construction-project-page .miniFlow>span {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
text-align: center;
font-size: 9px;
line-height: 1.4
}
#construction-project-page .miniFlow .icon {
color: var(--yellow);
width: 21px;
height: 21px
}
#construction-project-page .miniFlow>.flowArrow {
width: 17px;
height: 17px;
color: #86AEC5
}
#construction-project-page .approvalLayout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 13px
}
#construction-project-page .proposalDoc {
border: 1px solid var(--line);
border-radius: 11px;
background: white;
padding: 18px
}
#construction-project-page .docBrand {
display: flex;
align-items: center;
gap: 7px;
font-size: 7px;
line-height: 1.5;
letter-spacing: .04em;
font-weight: 800;
color: #41687E;
padding-bottom: 16px;
margin-bottom: 15px;
border-bottom: 1px solid var(--line)
}
#construction-project-page .docBrand .icon {
width: 21px;
height: 21px
}
#construction-project-page .proposalDoc h3 {
font-size: 20px;
margin-top: 8px;
color: var(--navy)
}
#construction-project-page .proposalDoc>p {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 9px
}
#construction-project-page .scopeLines {
display: grid;
gap: 11px;
margin: 22px 0
}
#construction-project-page .scopeLines>span {
display: flex;
gap: 7px;
align-items: center;
font-size: 9px;
color: #41657B
}
#construction-project-page .scopeLines .icon {
width: 14px;
height: 14px;
color: var(--green)
}
#construction-project-page .docPrice {
border-top: 1px solid var(--line);
padding-top: 14px;
margin-bottom: 7px
}
#construction-project-page .docPrice>span {
font-size: 9px;
color: var(--muted)
}
#construction-project-page .docPrice>strong {
display: block;
color: var(--navy);
font-size: 29px;
font-weight: 750;
line-height: 1.3;
letter-spacing: -.04em;
margin-top: 4px
}
#construction-project-page .approvalSide {
display: flex;
flex-direction: column;
gap: 12px
}
#construction-project-page .approvalStamp {
background: #EAF8F3;
border: 1px solid #BFDFD0;
border-radius: 11px;
text-align: center;
padding: 19px 10px;
color: #147353
}
#construction-project-page .approvalStamp>.icon {
height: 29px;
width: 29px;
margin-bottom: 9px
}
#construction-project-page .approvalStamp strong {
display: block;
font-size: 12px;
line-height: 1.5
}
#construction-project-page .approvalStamp>span {
display: block;
font-size: 9px;
color: #557F70;
margin-top: 5px;
line-height: 1.5
}
#construction-project-page .signaturePanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px
}
#construction-project-page .sampleSignature {
display: block;
color: #567D94;
font-size: 17px;
font-style: italic;
font-family: Georgia, serif;
white-space: normal;
line-height: 1.3;
border-bottom: 1px solid var(--line);
padding: 17px 0 10px;
margin-bottom: 5px
}
#construction-project-page .reminderBox {
padding: 13px 12px;
border-radius: 10px;
background: var(--yellowsoft);
border: 1px solid #EADAA2;
display: flex;
align-items: center;
gap: 7px;
color: #7E6722;
font-size: 10px;
line-height: 1.5;
margin-top: auto
}
#construction-project-page .reminderBox .icon {
width: 20px;
height: 20px
}
#construction-project-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#construction-project-page .dark h2,
#construction-project-page .dark h3 {
color: white
}
#construction-project-page .dark .ey {
background: var(--yellow);
color: #111
}
#construction-project-page .dark .textLink {
color: #fff
}
#construction-project-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#construction-project-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#construction-project-page .dark .sectionHead {
margin-bottom: 0
}
#construction-project-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#construction-project-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#construction-project-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#construction-project-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#construction-project-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#construction-project-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#construction-project-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#construction-project-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#construction-project-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#construction-project-page .takeoffPanel {
background: #fff;
border: 1px solid #405766;
border-radius: 17px;
overflow: hidden;
color: var(--ink)
}
#construction-project-page .takeoffHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
padding: 19px;
border-bottom: 1px solid var(--line)
}
#construction-project-page .takeoffHeader strong {
display: block;
font-size: 14px;
line-height: 1.5;
margin-top: 5px;
letter-spacing: -.02em
}
#construction-project-page .takeoffBody {
padding: 17px
}
#construction-project-page .planWrap {
border: 1px solid var(--line);
border-radius: 10px;
background: linear-gradient(#F3F8FB 1px, transparent 1px), linear-gradient(90deg, #F3F8FB 1px, transparent 1px);
background-size: 19px 19px;
padding: 6px
}
#construction-project-page .planArt {
display: block;
width: 100%;
height: auto;
aspect-ratio: 360 / 245;
max-width: 390px;
margin: auto
}
#construction-project-page .planCaption {
display: block;
font-size: 8px;
text-align: center;
color: #6B8594;
line-height: 1.4;
margin: 0 0 7px
}
#construction-project-page .detectedItems {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px
}
#construction-project-page .detectedItems>div {
padding: 11px;
background: #F5FBFF;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 9px;
display: flex;
align-items: center;
gap: 6px
}
#construction-project-page .detectedItems b {
margin-left: auto;
font-size: 15px;
color: var(--navy)
}
#construction-project-page .takeoffFooter {
padding: 15px 18px;
border-top: 1px solid var(--line);
background: #EAF8F3;
color: #217557;
font-size: 10px;
line-height: 1.6;
display: flex;
align-items: center;
gap: 8px
}
#construction-project-page .takeoffFooter .icon {
width: 19px;
height: 19px
}
#construction-project-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#construction-project-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#construction-project-page .connectedCard h3 {
margin: 18px 0 11px
}
#construction-project-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#construction-project-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#construction-project-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#construction-project-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#construction-project-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#construction-project-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#construction-project-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#construction-project-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#construction-project-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#construction-project-page .featureCard>.icon {
color: var(--navy)
}
#construction-project-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#construction-project-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-project-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#construction-project-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#construction-project-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#construction-project-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#construction-project-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#construction-project-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#construction-project-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#construction-project-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#construction-project-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#construction-project-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#construction-project-page .sectionNote {
font-size: 12px;
line-height: 1.7;
color: var(--muted);
text-align: center;
margin: 20px auto 0;
max-width: 850px
}
#construction-project-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#construction-project-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#construction-project-page .useCase>.icon {
color: var(--navy)
}
#construction-project-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#construction-project-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-project-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#construction-project-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#construction-project-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#construction-project-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#construction-project-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#construction-project-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#construction-project-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-project-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#construction-project-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#construction-project-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#construction-project-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#construction-project-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#construction-project-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#construction-project-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#construction-project-page details {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 19px 21px
}
#construction-project-page summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
cursor: pointer;
list-style: none;
color: var(--ink);
font-size: 15px;
font-weight: 700;
line-height: 1.6
}
#construction-project-page summary::-webkit-details-marker {
display: none
}
#construction-project-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#construction-project-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#construction-project-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#construction-project-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#construction-project-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#construction-project-page .ctaBtns .btn {
min-width: 219px
}
#construction-project-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#construction-project-page .btn.darkOutline:hover {
background: #252D33
}
#construction-project-page .final a:focus-visible {
outline-color: var(--yellow)
}
#construction-project-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#construction-project-page .heroGrid {
gap: 28px
}
#construction-project-page .hero .lead {
font-size: 16px
}
#construction-project-page .feature,
#construction-project-page .aiGrid {
gap: 30px
}
#construction-project-page .visual {
padding: 17px
}
#construction-project-page .lane {
padding: 9px 5px
}
#construction-project-page .kanban {
gap: 6px;
padding: 10px
}
#construction-project-page .laneTitle {
font-size: 8px
}
#construction-project-page .vendorCards {
padding: 12px 10px;
gap: 7px
}
#construction-project-page .vendorCard {
padding: 11px 7px
}
#construction-project-page .vendorCard>strong {
font-size: 20px
}
#construction-project-page .approvalLayout {
gap: 10px
}
#construction-project-page .proposalDoc {
padding: 14px
}
#construction-project-page .proposalDoc h3 {
font-size: 18px
}
#construction-project-page .nextTask .pill {
display: none
}
#construction-project-page .toolCard {
padding: 21px 15px
}
#construction-project-page .toolCard strong {
font-size: 14px
}
#construction-project-page .handoffBand {
padding: 20px
}
#construction-project-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#construction-project-page section {
padding: 64px 0
}
#construction-project-page .hero {
padding: 34px 0 42px
}
#construction-project-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#construction-project-page .heroCopy {
max-width: 790px
}
#construction-project-page .hero h1 {
max-width: 800px;
}
#construction-project-page .hero .lead {
max-width: 760px
}
#construction-project-page .heroVisual {
max-width: 460px;
justify-self: center
}
#construction-project-page .desktopBreak {
display: none
}
#construction-project-page .feature,
#construction-project-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#construction-project-page .feature.reverse .visual {
order: 0
}
#construction-project-page .featureCopy {
max-width: 790px
}
#construction-project-page .visual {
max-width: 640px;
margin: 0 auto
}
#construction-project-page .outcomes,
#construction-project-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-project-page .connectedGrid {
gap: 13px
}
#construction-project-page .connectedCard {
padding: 22px
}
#construction-project-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-project-page .aiVisual {
max-width: 600px;
margin: auto
}
#construction-project-page .aiMini {
max-width: 780px
}
#construction-project-page .takeoffBody {
padding: 20px
}
#construction-project-page .planArt {
max-width: 370px
}
#construction-project-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#construction-project-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#construction-project-page .toolCard {
min-height: 145px
}
#construction-project-page .roleGrid {
gap: 20px
}
#construction-project-page .roleCard {
padding-right: 18px
}
#construction-project-page .roleCard h3 {
font-size: 20px
}
#construction-project-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#construction-project-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#construction-project-page .workflowLead br {
display: none
}
#construction-project-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#construction-project-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#construction-project-page .final .btn {
min-width: 210px
}
#construction-project-page .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#construction-project-page .wrap {
width: calc(100% - 32px)
}
#construction-project-page section {
padding: 49px 0
}
#construction-project-page h2 {
font-size: 33px;
line-height: 1.15
}
#construction-project-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#construction-project-page .sectionHead {
margin-bottom: 27px
}
#construction-project-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#construction-project-page .hero {
padding: 25px 0 34px
}
#construction-project-page .heroGrid {
gap: 21px
}
#construction-project-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#construction-project-page .hero h1 {
line-height: 1.12
}
#construction-project-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#construction-project-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#construction-project-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#construction-project-page .hero .micro {
font-size: 11px
}
#construction-project-page .heroPills {
gap: 6px;
margin-top: 16px
}
#construction-project-page .heroPills span {
font-size: 9px
}
#construction-project-page .heroVisual {
max-width: 420px
}
#construction-project-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#construction-project-page .trust {
padding: 22px 0
}
#construction-project-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#construction-project-page .logos {
gap: 7px
}
#construction-project-page .logo {
font-size: 11px;
min-height: 53px;
padding: 8px
}
#construction-project-page .logo.dhl {
font-size: 21px
}
#construction-project-page .logo.adobe {
font-size: 18px
}
#construction-project-page .logo.golden {
font-size: 8px
}
#construction-project-page .outcomes {
gap: 12px
}
#construction-project-page .outcome {
padding: 19px
}
#construction-project-page .outcome h3 {
font-size: 17px
}
#construction-project-page .outcome p {
font-size: 13px
}
#construction-project-page .feature {
gap: 27px
}
#construction-project-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#construction-project-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#construction-project-page .fi {
font-size: 12px
}
#construction-project-page .textLink {
font-size: 13px
}
#construction-project-page .visual {
padding: 15px;
border-radius: 16px
}
#construction-project-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#construction-project-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#construction-project-page .uiHeading .icon {
width: 18px;
height: 18px
}
#construction-project-page .panelBar {
padding: 12px
}
#construction-project-page .panelBar>.tiny {
font-size: 8px;
max-width: 120px;
text-align: right
}
#construction-project-page .kanban {
padding: 10px;
gap: 7px
}
#construction-project-page .lane {
padding: 8px 5px 11px
}
#construction-project-page .laneTitle {
font-size: 8px;
gap: 4px
}
#construction-project-page .laneTitle>span {
display: none
}
#construction-project-page .deal {
padding: 9px 6px;
min-height: 148px
}
#construction-project-page .deal strong {
font-size: 11px;
line-height: 1.45
}
#construction-project-page .deal>.tiny {
font-size: 7px
}
#construction-project-page .deal p {
font-size: 8px;
min-height: 30px
}
#construction-project-page .dealFoot {
font-size: 7px;
gap: 4px
}
#construction-project-page .avatar {
height: 18px;
width: 18px;
font-size: 6px
}
#construction-project-page .nextTask {
padding: 12px;
gap: 8px
}
#construction-project-page .nextTask strong {
font-size: 10px
}
#construction-project-page .nextTask>div>span {
font-size: 8px
}
#construction-project-page .nextTask .pill {
display: none
}
#construction-project-page .uiFoot {
font-size: 9px
}
#construction-project-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#construction-project-page .sheetTop {
padding: 15px
}
#construction-project-page .sheetTop strong {
font-size: 17px
}
#construction-project-page .estimateLines {
padding: 0 15px
}
#construction-project-page .estimateLines>div {
padding: 11px 0
}
#construction-project-page .priceReview {
padding: 13px 15px;
gap: 10px
}
#construction-project-page .priceReview strong {
font-size: 22px
}
#construction-project-page .priceReview span {
font-size: 8px
}
#construction-project-page .sheetNote {
padding: 8px 15px;
font-size: 7px
}
#construction-project-page .optionRow {
gap: 6px
}
#construction-project-page .optionRow>span:first-child {
width: 100%;
margin-bottom: 4px
}
#construction-project-page .vendorCards {
gap: 7px;
padding: 12px 10px
}
#construction-project-page .vendorCard {
padding: 11px 7px
}
#construction-project-page .vendorCard>strong {
font-size: 20px;
margin-bottom: 13px
}
#construction-project-page .vendorCard .pill {
font-size: 7px;
padding: 4px 5px
}
#construction-project-page .vendorMeta {
gap: 10px
}
#construction-project-page .vendorMeta b {
font-size: 9px
}
#construction-project-page .quoteCheck {
font-size: 9px;
padding: 12px
}
#construction-project-page .miniFlow {
padding: 13px 8px;
gap: 5px;
grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr)
}
#construction-project-page .miniFlow>span {
font-size: 8px
}
#construction-project-page .miniFlow>.flowArrow {
height: 13px;
width: 13px
}
#construction-project-page .approvalLayout {
gap: 10px;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr)
}
#construction-project-page .proposalDoc {
padding: 13px
}
#construction-project-page .docBrand {
font-size: 6px;
gap: 5px
}
#construction-project-page .docBrand .icon {
width: 18px;
height: 18px
}
#construction-project-page .proposalDoc h3 {
font-size: 18px
}
#construction-project-page .proposalDoc>p {
font-size: 9px
}
#construction-project-page .scopeLines {
gap: 10px;
margin: 17px 0
}
#construction-project-page .scopeLines>span {
font-size: 8px;
gap: 5px
}
#construction-project-page .docPrice>strong {
font-size: 27px
}
#construction-project-page .proposalDoc>.tiny {
font-size: 8px
}
#construction-project-page .approvalStamp {
padding: 16px 9px
}
#construction-project-page .approvalStamp strong {
font-size: 11px
}
#construction-project-page .approvalStamp>span {
font-size: 8px
}
#construction-project-page .signaturePanel {
padding: 12px
}
#construction-project-page .sampleSignature {
font-size: 16px
}
#construction-project-page .reminderBox {
font-size: 9px;
padding: 11px 9px
}
#construction-project-page .reminderBox .icon {
width: 17px;
height: 17px
}
#construction-project-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#construction-project-page .aiMini {
gap: 11px;
margin-top: 23px
}
#construction-project-page .aiMini article {
padding: 16px
}
#construction-project-page .aiMini h3 {
font-size: 15px
}
#construction-project-page .aiMini p {
font-size: 12px
}
#construction-project-page .aiNote {
font-size: 10px
}
#construction-project-page .takeoffHeader {
padding: 15px;
gap: 9px
}
#construction-project-page .takeoffHeader strong {
font-size: 12px
}
#construction-project-page .takeoffHeader .pill {
font-size: 8px
}
#construction-project-page .takeoffBody {
padding: 13px
}
#construction-project-page .detectedItems {
gap: 8px
}
#construction-project-page .detectedItems>div {
font-size: 8px;
padding: 10px 8px;
gap: 5px
}
#construction-project-page .detectedItems b {
font-size: 13px
}
#construction-project-page .takeoffFooter {
padding: 13px;
font-size: 9px
}
#construction-project-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#construction-project-page .connectedCard {
padding: 23px
}
#construction-project-page .connectedCard h3 {
margin: 15px 0 9px
}
#construction-project-page .connectedCard p {
font-size: 14px
}
#construction-project-page .handoffBand {
padding: 20px
}
#construction-project-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#construction-project-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#construction-project-page .handoffBand small {
font-size: 11px
}
#construction-project-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#construction-project-page .featureGrid {
gap: 13px
}
#construction-project-page .featureCard {
padding: 21px
}
#construction-project-page .featureCard h3 {
font-size: 17px
}
#construction-project-page .featureCard p {
font-size: 13px
}
#construction-project-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#construction-project-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#construction-project-page .toolCard strong {
font-size: 15px
}
#construction-project-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#construction-project-page .toolCard:last-child .toolArrow {
top: 31px
}
#construction-project-page .toolCard:last-child strong {
padding-right: 25px
}
#construction-project-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#construction-project-page .sectionNote {
font-size: 11px
}
#construction-project-page .useCases {
gap: 13px
}
#construction-project-page .useCase {
padding: 21px 18px
}
#construction-project-page .useCase h3 {
font-size: 17px
}
#construction-project-page .useCase p {
font-size: 13px
}
#construction-project-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#construction-project-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#construction-project-page .roleCard:last-child {
padding-bottom: 0
}
#construction-project-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#construction-project-page .roleCard>strong {
font-size: 14px
}
#construction-project-page .roleCard p {
font-size: 14px
}
#construction-project-page .workflowBand {
padding: 28px 0
}
#construction-project-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#construction-project-page .workflowLead {
font-size: 18px
}
#construction-project-page .workflowStep strong {
font-size: 14px
}
#construction-project-page .workflowStep p {
font-size: 10px
}
#construction-project-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#construction-project-page .final h2 {
font-size: 32px
}
#construction-project-page .final p {
font-size: 14px;
line-height: 1.8
}
#construction-project-page .final .ey {
font-size: 9px
}
#construction-project-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#construction-project-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#construction-project-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#construction-project-page .outcomes,
#construction-project-page .featureGrid,
#construction-project-page .useCases {
grid-template-columns: 1fr
}
#construction-project-page .outcome {
padding: 23px
}
#construction-project-page .outcome h3 {
font-size: 18px
}
#construction-project-page .outcome p {
font-size: 14px
}
#construction-project-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#construction-project-page .fi {
font-size: 13px
}
#construction-project-page .kanban {
grid-template-columns: 1fr;
padding: 11px;
gap: 9px
}
#construction-project-page .lane {
display: grid;
grid-template-columns: 73px minmax(0, 1fr);
align-items: center;
gap: 9px;
padding: 10px
}
#construction-project-page .laneTitle {
font-size: 9px;
margin: 0
}
#construction-project-page .deal {
min-height: 0;
padding: 10px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 8px;
align-items: center
}
#construction-project-page .deal.featured {
border-top-width: 1px;
border-left: 3px solid var(--brand);
padding: 10px 10px 10px 8px
}
#construction-project-page .deal>.tiny {
font-size: 8px;
grid-column: 1/-1
}
#construction-project-page .deal strong {
font-size: 12px;
margin: 3px 0
}
#construction-project-page .deal p {
min-height: 0;
font-size: 8px;
grid-column: 1/-1;
grid-row: 3
}
#construction-project-page .dealFoot {
border: 0;
margin: 0;
padding: 0;
grid-column: 2;
grid-row: 2
}
#construction-project-page .dealFoot>span:last-child {
display: none
}
#construction-project-page .avatar {
height: 22px;
width: 22px;
font-size: 7px
}
#construction-project-page .panelBar>.tiny {
display: none
}
#construction-project-page .vendorCards {
grid-template-columns: 1fr;
padding: 12px;
gap: 10px
}
#construction-project-page .vendorCard {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 9px;
padding: 12px
}
#construction-project-page .vendorCard>strong {
margin: 0;
font-size: 23px;
grid-row: 1/3;
grid-column: 2
}
#construction-project-page .vendorMeta {
grid-template-columns: 1fr 1fr;
grid-column: 1/-1;
margin: 9px 0 6px;
gap: 10px
}
#construction-project-page .vendorMeta>span {
font-size: 9px
}
#construction-project-page .vendorMeta b {
font-size: 11px
}
#construction-project-page .vendorCard .pill {
justify-self: start;
font-size: 8px;
grid-column: 1/-1
}
#construction-project-page .vendorCard>.tiny {
font-size: 10px
}
#construction-project-page .approvalLayout {
grid-template-columns: 1fr
}
#construction-project-page .proposalDoc {
padding: 18px
}
#construction-project-page .proposalDoc h3 {
font-size: 21px
}
#construction-project-page .docBrand {
font-size: 7px
}
#construction-project-page .proposalDoc>p {
font-size: 11px
}
#construction-project-page .scopeLines>span {
font-size: 11px
}
#construction-project-page .scopeLines {
gap: 12px
}
#construction-project-page .proposalDoc>.tiny {
font-size: 9px
}
#construction-project-page .approvalSide {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px
}
#construction-project-page .approvalStamp {
padding: 16px 10px
}
#construction-project-page .signaturePanel {
padding: 13px;
display: flex;
flex-direction: column;
justify-content: center
}
#construction-project-page .reminderBox {
grid-column: 1/-1;
margin: 0;
justify-content: center;
font-size: 10px
}
#construction-project-page .sampleSignature {
padding-top: 14px;
font-size: 17px
}
#construction-project-page .aiMini {
grid-template-columns: 1fr
}
#construction-project-page .aiMini h3 {
font-size: 17px
}
#construction-project-page .aiMini p {
font-size: 13px
}
#construction-project-page .aiMini article {
padding: 19px
}
#construction-project-page .takeoffHeader .pill {
display: none
}
#construction-project-page .takeoffHeader strong {
font-size: 13px
}
#construction-project-page .detectedItems>div {
font-size: 8px;
gap: 5px;
padding: 9px 7px
}
#construction-project-page .detectedItems b {
font-size: 12px
}
#construction-project-page .featureCard h3,
#construction-project-page .useCase h3 {
font-size: 19px
}
#construction-project-page .featureCard p,
#construction-project-page .useCase p {
font-size: 14px
}
#construction-project-page .toolsGrid {
grid-template-columns: 1fr
}
#construction-project-page .toolCard,
#construction-project-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#construction-project-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#construction-project-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#construction-project-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#construction-project-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#construction-project-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#construction-project-page .toolArrow,
#construction-project-page .toolCard:last-child .toolArrow {
top: 30px
}
#construction-project-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#construction-project-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#construction-project-page h2 {
font-size: 30px
}
#construction-project-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#construction-project-page .heroPills span {
font-size: 8px
}
#construction-project-page .heroPills {
gap: 5px
}
#construction-project-page .uiHeading {
font-size: 11px
}
#construction-project-page .uiHeading>.pill {
font-size: 7px
}
#construction-project-page .visual {
padding: 12px
}
#construction-project-page .lane {
grid-template-columns: 67px minmax(0, 1fr);
gap: 6px;
padding: 8px
}
#construction-project-page .laneTitle {
font-size: 8px
}
#construction-project-page .deal strong {
font-size: 11px
}
#construction-project-page .nextTask .tileIcon {
width: 28px;
height: 28px;
flex-basis: 28px
}
#construction-project-page .nextTask .tileIcon .icon {
height: 17px;
width: 17px
}
#construction-project-page .priceReview strong {
font-size: 21px
}
#construction-project-page .detectedItems {
grid-template-columns: 1fr
}
#construction-project-page .detectedItems>div {
font-size: 10px
}
#construction-project-page .detectedItems b {
font-size: 15px
}
#construction-project-page .final {
padding: 26px 20px
}
#construction-project-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#construction-project-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#construction-project-page section {
padding: 24px 0
}
#construction-project-page .hero,
#construction-project-page .soft {
background: #fff
}
#construction-project-page .dark,
#construction-project-page .workflowBand,
#construction-project-page .final {
background: #fff;
color: #11283A
}
#construction-project-page .dark h2,
#construction-project-page .dark h3,
#construction-project-page .final h2 {
color: #11283A
}
#construction-project-page .dark p,
#construction-project-page .final p {
color: #52697C
}
#construction-project-page .btn {
display: none
}
#construction-project-page .visual,
#construction-project-page .outcome,
#construction-project-page .featureCard,
#construction-project-page details {
break-inside: avoid
}
#construction-project-page .heroImage {
max-width: 380px
}
#construction-project-page .heroVisual {
justify-self: center
}
}
.constructionSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.constructionSkip:focus {
top: 12px
} #construction-project-page .pmPanelTitle {
display: block;
font-size: 16px;
line-height: 1.4;
color: var(--navy);
margin-top: 5px;
letter-spacing: -.02em
}
#construction-project-page .pmView {
font-size: 9px;
color: var(--navy);
background: #F2F9FD;
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 8px;
white-space: nowrap
}
#construction-project-page .pmGantt {
padding: 5px 12px 12px;
min-width: 0
}
#construction-project-page .pmGanttHead,
#construction-project-page .pmGanttRow {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 7px
}
#construction-project-page .pmGanttHead {
font-size: 8px;
font-weight: 750;
line-height: 1.5;
padding: 10px 0;
color: var(--muted);
border-bottom: 1px solid var(--line)
}
#construction-project-page .pmGanttHead>div {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
text-align: center;
gap: 2px
}
#construction-project-page .pmGanttRow {
min-height: 56px;
border-bottom: 1px solid #E9F0F4;
align-items: stretch
}
#construction-project-page .pmGanttRow>div:first-child {
padding: 11px 0;
align-self: center
}
#construction-project-page .pmGanttRow strong {
font-size: 11px;
line-height: 1.5;
display: block;
color: var(--ink)
}
#construction-project-page .pmGanttRow small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 3px;
line-height: 1.5
}
#construction-project-page .pmTrack {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #E4EEF4 calc(25% - 1px), #E4EEF4 25%);
padding: 0 2px
}
#construction-project-page .pmBar {
grid-column: var(--start)/span var(--span);
margin-right: 4px;
min-width: 0;
font-size: 8px;
line-height: 1.5;
border-radius: 5px;
background: #DFF3FD;
color: #135B80;
border-left: 3px solid #159EDB;
padding: 7px 5px;
font-weight: 750;
text-align: center;
overflow-wrap: anywhere
}
#construction-project-page .pmBar.green {
background: #E4F5EC;
color: #126C49;
border-color: #1B9267
}
#construction-project-page .pmBar.purple {
background: #F0EBFC;
color: #6951A6;
border-color: #8968CB
}
#construction-project-page .pmBar.gold {
background: #FFF6D6;
color: #715705;
border-color: #DDAE12
}
#construction-project-page .pmScheduleFoot {
display: flex;
gap: 9px;
align-items: center;
padding: 14px;
background: #F5FAFD;
color: var(--navy)
}
#construction-project-page .pmScheduleFoot>.icon {
width: 21px;
height: 21px;
color: var(--brand2)
}
#construction-project-page .pmScheduleFoot strong {
font-size: 10px;
line-height: 1.5;
display: block
}
#construction-project-page .pmScheduleFoot small {
font-size: 9px;
line-height: 1.6;
color: var(--muted);
display: block;
margin-top: 4px
}
#construction-project-page .pmResourceHead {
padding: 17px 15px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--line)
}
#construction-project-page .pmAvatar {
height: 37px;
width: 37px;
flex: 0 0 37px;
display: grid;
place-items: center;
background: #FFF4CF;
color: #745604;
border-radius: 50%;
font-size: 12px;
font-weight: 800
}
#construction-project-page .pmResourceHead strong {
font-size: 13px;
line-height: 1.5;
color: var(--navy);
display: block
}
#construction-project-page .pmResourceHead small {
font-size: 9px;
display: block;
line-height: 1.5;
color: var(--muted);
margin-top: 3px
}
#construction-project-page .pmDate {
margin-left: auto;
font-size: 9px;
font-weight: 650;
color: var(--muted);
white-space: nowrap
}
#construction-project-page .pmResourceRows {
padding: 0 15px
}
#construction-project-page .pmResourceRow {
padding: 14px 0;
display: grid;
grid-template-columns: 29px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
border-bottom: 1px solid #E5EDF2
}
#construction-project-page .pmRowIcon {
display: grid;
place-items: center;
height: 29px;
width: 29px;
flex: 0 0 29px;
background: #EFF8FD;
color: var(--navy);
border-radius: 8px
}
#construction-project-page .pmRowIcon>.icon {
width: 17px;
height: 17px
}
#construction-project-page .pmResourceRow strong {
font-size: 11px;
line-height: 1.5;
display: block
}
#construction-project-page .pmResourceRow small {
font-size: 9px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 3px
}
#construction-project-page .pmResourceRow .pill {
font-size: 8px
}
#construction-project-page .pmInstructions {
margin: 14px;
padding: 13px;
background: #F7FBFD;
border-radius: 8px;
border-left: 3px solid var(--brand)
}
#construction-project-page .pmInstructions p {
font-size: 10px;
color: #526C7E;
line-height: 1.75;
margin-top: 6px
}
#construction-project-page .pmNote {
display: flex;
gap: 8px;
align-items: center;
color: #3D6C83;
font-size: 10px;
line-height: 1.6;
margin-top: 14px
}
#construction-project-page .pmNote>.icon {
width: 18px;
height: 18px
}
#construction-project-page .pmCostMetrics {
padding: 15px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px
}
#construction-project-page .pmCostMetrics>div {
background: #F4FAFD;
border: 1px solid var(--line);
border-radius: 9px;
padding: 13px
}
#construction-project-page .pmCostMetrics>div:last-child {
background: #EEF8F2;
border-color: #CCE5D6
}
#construction-project-page .pmCostMetrics span {
display: block;
font-size: 10px;
line-height: 1.4;
color: var(--muted)
}
#construction-project-page .pmCostMetrics strong {
display: block;
font-size: 27px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -.045em;
margin-top: 6px
}
#construction-project-page .pmBudgetTable {
padding: 0 15px
}
#construction-project-page .pmBudgetHead,
#construction-project-page .pmBudgetRow {
display: grid;
grid-template-columns: minmax(0, 1.2fr) 1fr 1fr;
gap: 8px;
align-items: center
}
#construction-project-page .pmBudgetHead {
padding: 6px 0 10px;
font-size: 8px;
color: var(--muted);
font-weight: 750;
letter-spacing: .015em
}
#construction-project-page .pmBudgetHead>span:not(:first-child),
#construction-project-page .pmBudgetRow>*:not(:first-child) {
text-align: right
}
#construction-project-page .pmBudgetRow {
border-top: 1px solid #E1ECF2;
padding: 11px 0;
font-size: 11px;
line-height: 1.5
}
#construction-project-page .pmBudgetRow strong {
font-weight: 650
}
#construction-project-page .pmBudgetRow b {
color: var(--navy)
}
#construction-project-page .pmBudgetRow>span {
color: #607487
}
#construction-project-page .pmSpend {
padding: 14px 15px;
background: #F7FBFD;
border-top: 1px solid var(--line)
}
#construction-project-page .pmSpend>div:first-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 8px;
color: var(--muted);
line-height: 1.5
}
#construction-project-page .pmSpend strong {
font-size: 10px;
color: var(--navy)
}
#construction-project-page .pmSpendTrack {
height: 7px;
border-radius: 6px;
background: #E0ECF2;
margin: 9px 0
}
#construction-project-page .pmSpendTrack>span {
width: 60%;
height: 7px;
display: block;
background: var(--brand2);
border-radius: 6px
}
#construction-project-page .pmSpend>small {
font-size: 8px;
line-height: 1.5;
color: #607487;
display: block
}
#construction-project-page .pmChange {
display: flex;
align-items: center;
gap: 9px;
border: 1px solid #E8D99A;
background: #FFFCF1;
border-radius: 10px;
padding: 13px;
margin-top: 13px
}
#construction-project-page .pmChange>div {
flex: 1;
min-width: 0
}
#construction-project-page .pmChange strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: var(--navy)
}
#construction-project-page .pmChange small {
font-size: 9px;
color: #706647;
line-height: 1.6;
display: block;
margin-top: 4px
}
#construction-project-page .pmChange .pill {
font-size: 8px
}
#construction-project-page .pmProgressSummary {
padding: 20px 16px;
display: flex;
gap: 15px;
align-items: center;
background: #F5FBFE;
border-bottom: 1px solid var(--line)
}
#construction-project-page .pmProgressNumber {
font-size: 38px;
line-height: 1.1;
letter-spacing: -.035em;
font-weight: 800;
color: var(--navy)
}
#construction-project-page .pmProgressNumber>span {
font-size: 22px;
color: #7593A3
}
#construction-project-page .pmProgressSummary strong {
font-size: 13px;
line-height: 1.4;
display: block;
color: var(--navy)
}
#construction-project-page .pmProgressSummary small {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
margin-top: 5px
}
#construction-project-page .pmChecks {
padding: 3px 15px
}
#construction-project-page .pmCheck {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 0;
border-bottom: 1px solid #E4ECF2
}
#construction-project-page .pmCheck>span {
display: grid;
place-items: center;
height: 23px;
width: 23px;
flex: 0 0 23px;
border-radius: 50%;
background: var(--greenbg);
color: var(--green)
}
#construction-project-page .pmCheck .icon {
height: 14px;
width: 14px
}
#construction-project-page .pmCheck strong {
font-size: 11px;
line-height: 1.5;
font-weight: 650;
flex: 1;
min-width: 0
}
#construction-project-page .pmCheck small {
font-size: 8px;
color: #118A61;
line-height: 1.5
}
#construction-project-page .pmCheck.pending>span {
background: #FFF6D6;
color: #8C6B0A
}
#construction-project-page .pmCheck.pending small {
color: #896F15
}
#construction-project-page .pmFiles {
padding: 12px 15px;
display: flex;
gap: 10px;
flex-wrap: wrap
}
#construction-project-page .pmFiles>span {
display: flex;
gap: 5px;
align-items: center;
border: 1px solid var(--line);
background: #F9FCFE;
font-size: 9px;
border-radius: 6px;
padding: 7px;
color: var(--navy)
}
#construction-project-page .pmFiles .icon {
width: 14px;
height: 14px
}
#construction-project-page .pmSiteNote {
margin: 0 15px 15px;
padding: 13px;
background: #F5FAFD;
border-radius: 8px
}
#construction-project-page .pmSiteNote>strong {
font-size: 10px;
color: var(--navy);
line-height: 1.5;
display: block
}
#construction-project-page .pmSiteNote>p {
font-size: 10px;
color: var(--muted);
line-height: 1.75;
margin-top: 4px
}
#construction-project-page .dark .textLink {
color: #FFF1BD
}
#construction-project-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
#construction-project-page .pmAiPanel {
border-radius: 16px;
background: #fff;
border: 1px solid #455967;
overflow: hidden;
color: var(--ink)
}
#construction-project-page .pmAiHeader {
display: flex;
align-items: center;
gap: 12px;
padding: 17px;
border-bottom: 1px solid var(--line)
}
#construction-project-page .pmAiMark {
height: 36px;
width: 36px;
flex: 0 0 36px;
display: grid;
place-items: center;
border-radius: 10px;
background: #0D2939;
color: var(--yellow)
}
#construction-project-page .pmAiMark>.icon {
width: 21px;
height: 21px
}
#construction-project-page .pmAiHeader>div {
flex: 1;
min-width: 0
}
#construction-project-page .pmAiHeader strong {
color: var(--navy);
font-size: 15px;
line-height: 1.5;
display: block
}
#construction-project-page .pmAiHeader small {
color: var(--muted);
font-size: 9px;
line-height: 1.5;
display: block
}
#construction-project-page .pmAiBody {
padding: 18px
}
#construction-project-page .pmAiPrompt {
max-width: 92%;
margin-left: auto;
background: #EAF7FE;
border: 1px solid #D0E9F6;
border-radius: 12px 3px 12px 12px;
padding: 13px;
font-size: 12px;
line-height: 1.65;
color: #29566E
}
#construction-project-page .pmAiAnswer {
margin-top: 20px;
background: #F9FBFC;
border: 1px solid var(--line);
padding: 17px;
border-radius: 3px 12px 12px 12px
}
#construction-project-page .pmAiAnswer>strong {
font-size: 13px;
line-height: 1.5;
color: var(--navy);
display: block;
margin: 7px 0 14px
}
#construction-project-page .pmAiAnswer>div {
display: flex;
gap: 8px;
align-items: center;
font-size: 11px;
line-height: 1.7;
margin-top: 11px;
color: #3C5D70
}
#construction-project-page .pmAiAnswer>div>.icon {
height: 16px;
width: 16px;
color: #3686A5
}
#construction-project-page .pmAiSource {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 9px;
color: #607487;
line-height: 1.6;
margin: 13px 0
}
#construction-project-page .pmAiSource>.icon {
height: 14px;
width: 14px
}
#construction-project-page .pmAiReview {
padding: 11px;
border: 1px solid #E7DBA8;
background: #FFFAE8;
color: #756025;
display: flex;
align-items: center;
gap: 7px;
font-size: 9px;
line-height: 1.65;
border-radius: 8px
}
#construction-project-page .pmAiReview>.icon {
height: 18px;
width: 18px
}
@media(max-width:1100px) and (min-width:981px) {
#construction-project-page .pmGanttHead,
#construction-project-page .pmGanttRow {
grid-template-columns: 94px minmax(0, 1fr)
}
#construction-project-page .pmCostMetrics {
gap: 8px;
padding: 12px
}
#construction-project-page .pmCostMetrics>div {
padding: 11px
}
#construction-project-page .pmCostMetrics strong {
font-size: 25px
}
#construction-project-page .pmResourceRow {
gap: 8px
}
#construction-project-page .pmResourceRow small {
font-size: 8px
}
}
@media(max-width:640px) {
#construction-project-page .pmPanelTitle {
font-size: 14px
}
#construction-project-page .pmGantt {
padding: 3px 10px 10px
}
#construction-project-page .pmGanttHead,
#construction-project-page .pmGanttRow {
grid-template-columns: 92px minmax(0, 1fr);
gap: 5px
}
#construction-project-page .pmGanttHead {
font-size: 7px
}
#construction-project-page .pmGanttRow strong {
font-size: 10px
}
#construction-project-page .pmGanttRow small {
font-size: 7px
}
#construction-project-page .pmBar {
font-size: 7px;
padding: 7px 3px;
margin-right: 3px;
border-left-width: 2px
}
#construction-project-page .pmScheduleFoot {
padding: 12px;
gap: 7px
}
#construction-project-page .pmScheduleFoot strong {
font-size: 9px
}
#construction-project-page .pmScheduleFoot small {
font-size: 8px
}
#construction-project-page .pmResourceHead {
padding: 14px 12px;
gap: 8px
}
#construction-project-page .pmResourceRows {
padding: 0 12px
}
#construction-project-page .pmResourceRow {
gap: 7px;
grid-template-columns: 26px minmax(0, 1fr) auto
}
#construction-project-page .pmResourceRow strong {
font-size: 10px
}
#construction-project-page .pmResourceRow small {
font-size: 8px
}
#construction-project-page .pmResourceRow .pill {
font-size: 7px;
padding: 4px 6px
}
#construction-project-page .pmDate {
font-size: 8px
}
#construction-project-page .pmInstructions {
margin: 12px;
padding: 11px
}
#construction-project-page .pmCostMetrics {
padding: 12px;
gap: 8px
}
#construction-project-page .pmCostMetrics>div {
padding: 11px 9px
}
#construction-project-page .pmCostMetrics span {
font-size: 8px
}
#construction-project-page .pmCostMetrics strong {
font-size: 25px
}
#construction-project-page .pmBudgetTable {
padding: 0 12px
}
#construction-project-page .pmBudgetRow {
font-size: 10px
}
#construction-project-page .pmSpend {
padding: 12px
}
#construction-project-page .pmSpend>div:first-child {
align-items: flex-start;
flex-direction: column;
gap: 4px
}
#construction-project-page .pmSpend strong {
font-size: 10px
}
#construction-project-page .pmChange {
padding: 11px;
gap: 7px
}
#construction-project-page .pmChange strong {
font-size: 10px
}
#construction-project-page .pmChange small {
font-size: 8px
}
#construction-project-page .pmChange .pill {
font-size: 7px
}
#construction-project-page .pmProgressSummary {
padding: 16px 13px;
gap: 12px
}
#construction-project-page .pmProgressSummary strong {
font-size: 12px
}
#construction-project-page .pmProgressSummary small {
font-size: 9px
}
#construction-project-page .pmProgressNumber {
font-size: 33px
}
#construction-project-page .pmChecks {
padding: 3px 12px
}
#construction-project-page .pmCheck strong {
font-size: 10px
}
#construction-project-page .pmFiles {
padding: 12px;
gap: 7px
}
#construction-project-page .pmFiles>span {
font-size: 8px
}
#construction-project-page .pmSiteNote {
margin: 0 12px 12px;
padding: 11px
}
#construction-project-page .pmAiBody {
padding: 14px
}
#construction-project-page .pmAiHeader {
padding: 14px
}
#construction-project-page .pmAiPrompt {
font-size: 11px
}
#construction-project-page .pmAiAnswer {
padding: 14px
}
#construction-project-page .pmAiAnswer>strong {
font-size: 12px
}
#construction-project-page .pmAiAnswer>div {
font-size: 10px
}
#construction-project-page .pmAiReview {
font-size: 8px
}
}
@media(max-width:360px) {
#construction-project-page .pmGanttHead,
#construction-project-page .pmGanttRow {
grid-template-columns: 80px minmax(0, 1fr)
}
#construction-project-page .pmGanttRow strong {
font-size: 9px
}
#construction-project-page .pmBar {
font-size: 6px
}
#construction-project-page .pmCostMetrics strong {
font-size: 22px
}
#construction-project-page .pmDate {
display: none
}
#construction-project-page .pmResourceRow {
grid-template-columns: 25px minmax(0, 1fr)
}
#construction-project-page .pmResourceRow>.pill {
grid-column: 2;
justify-self: start;
margin-top: -1px
}
#construction-project-page .pmChange {
align-items: flex-start;
flex-wrap: wrap
}
#construction-project-page .pmChange>.pill {
margin-left: 36px
}
#construction-project-page .pmProgressSummary strong {
font-size: 11px
}
#construction-project-page .pmCheck strong {
font-size: 9px
}
}  .asset-and-maintenance-management svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
.asset-and-maintenance-management .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.asset-and-maintenance-management a:focus-visible,
.asset-and-maintenance-management summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.asset-and-maintenance-management .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.asset-and-maintenance-management .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.asset-and-maintenance-management .btn .icon2 {
width: 17px;
height: 17px
}
.asset-and-maintenance-management .btn.black {
background: #0B0B0B;
color: #fff
}
.asset-and-maintenance-management .btn.black:hover {
background: #303030
}
.asset-and-maintenance-management .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.asset-and-maintenance-management .btn.yellow:hover {
background: #FFD454
}
.asset-and-maintenance-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.asset-and-maintenance-management .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.asset-and-maintenance-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.asset-and-maintenance-management .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.asset-and-maintenance-management .textLink .icon2 {
width: 17px;
height: 17px
}
.asset-and-maintenance-management .textLink:hover {
color: var(--brand2)
}
.asset-and-maintenance-management .soft {
background: var(--sky2)
}
.asset-and-maintenance-management .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.asset-and-maintenance-management .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.asset-and-maintenance-management .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.asset-and-maintenance-management .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.asset-and-maintenance-management .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.asset-and-maintenance-management .heroGrid>*,
.asset-and-maintenance-management .feature>*,
.asset-and-maintenance-management .aiGrid>* {
min-width: 0
}
.asset-and-maintenance-management .heroCopy {
min-width: 0
}
.asset-and-maintenance-management .hero h1 {
max-width: 630px
}
.asset-and-maintenance-management .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.asset-and-maintenance-management .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.asset-and-maintenance-management .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.asset-and-maintenance-management .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.asset-and-maintenance-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.asset-and-maintenance-management .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.asset-and-maintenance-management .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.asset-and-maintenance-management .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.asset-and-maintenance-management .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.asset-and-maintenance-management .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.asset-and-maintenance-management .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.asset-and-maintenance-management .logos {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 11px
}
.asset-and-maintenance-management .logo {
min-height: 60px;
border: 1px solid #E2EBF0;
border-radius: 10px;
display: grid;
place-content: center;
text-align: center;
padding: 10px;
line-height: 1.25;
font-weight: 800;
font-size: 14px;
color: #506578;
letter-spacing: -.02em
}
.asset-and-maintenance-management .logo.dhl {
font-size: 24px;
font-style: italic;
font-weight: 900;
letter-spacing: 1px
}
.asset-and-maintenance-management .logo.adobe {
font-size: 21px
}
.asset-and-maintenance-management .logo.golden {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em
}
.asset-and-maintenance-management .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.asset-and-maintenance-management .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.asset-and-maintenance-management .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.asset-and-maintenance-management .outcome:nth-child(2):before {
background: var(--yellow)
}
.asset-and-maintenance-management .outcome:nth-child(3):before {
background: var(--green)
}
.asset-and-maintenance-management .outcome:nth-child(4):before {
background: var(--purple)
}
.asset-and-maintenance-management .outcome>.icon2 {
color: var(--navy)
}
.asset-and-maintenance-management .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.asset-and-maintenance-management .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.asset-and-maintenance-management .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.asset-and-maintenance-management .feature.reverse .visual {
order: -1
}
.asset-and-maintenance-management .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.asset-and-maintenance-management .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.asset-and-maintenance-management .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.asset-and-maintenance-management .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.asset-and-maintenance-management .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.asset-and-maintenance-management .tick .icon2 {
height: 13px;
width: 13px
}
.asset-and-maintenance-management .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.asset-and-maintenance-management .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.asset-and-maintenance-management .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.asset-and-maintenance-management .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.asset-and-maintenance-management .uiHeading .icon2 {
height: 19px;
width: 19px
}
.asset-and-maintenance-management .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.asset-and-maintenance-management .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.asset-and-maintenance-management .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.asset-and-maintenance-management .panelBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--line)
}
.asset-and-maintenance-management .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.asset-and-maintenance-management .tiny {
font-size: 9px;
line-height: 1.5
}
.asset-and-maintenance-management .muted {
color: var(--muted)
}
.asset-and-maintenance-management .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.asset-and-maintenance-management .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.asset-and-maintenance-management .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.asset-and-maintenance-management .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.asset-and-maintenance-management .dark h2,
.asset-and-maintenance-management .dark h3 {
color: white
}
.asset-and-maintenance-management .dark .ey {
background: var(--yellow);
color: #111
}
.asset-and-maintenance-management .dark .textLink {
color: #fff
}
.asset-and-maintenance-management .dark a:focus-visible {
outline-color: var(--yellow)
}
.asset-and-maintenance-management .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.asset-and-maintenance-management .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.asset-and-maintenance-management .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.asset-and-maintenance-management .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.asset-and-maintenance-management .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.asset-and-maintenance-management .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.asset-and-maintenance-management .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.asset-and-maintenance-management .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.asset-and-maintenance-management .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.asset-and-maintenance-management .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.asset-and-maintenance-management .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.asset-and-maintenance-management .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.asset-and-maintenance-management .connectedCard h3 {
margin: 18px 0 11px
}
.asset-and-maintenance-management .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.asset-and-maintenance-management .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.asset-and-maintenance-management .handoffBand>div {
display: flex;
align-items: center;
gap: 14px;
flex-direction: row;
}
.asset-and-maintenance-management .handoffBand>div>.icon2 {
color: var(--navy);
width: 29px;
height: 29px
}
.asset-and-maintenance-management .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.asset-and-maintenance-management .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.asset-and-maintenance-management .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.asset-and-maintenance-management .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.asset-and-maintenance-management .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.asset-and-maintenance-management .featureCard>.icon2 {
color: var(--navy)
}
.asset-and-maintenance-management .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.asset-and-maintenance-management .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.asset-and-maintenance-management .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.asset-and-maintenance-management .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.asset-and-maintenance-management .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.asset-and-maintenance-management .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.asset-and-maintenance-management .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.asset-and-maintenance-management .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.asset-and-maintenance-management .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.asset-and-maintenance-management .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.asset-and-maintenance-management .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.asset-and-maintenance-management .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.asset-and-maintenance-management .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.asset-and-maintenance-management .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.asset-and-maintenance-management .useCase>.icon2 {
color: var(--navy)
}
.asset-and-maintenance-management .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.asset-and-maintenance-management .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.asset-and-maintenance-management .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.asset-and-maintenance-management .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.asset-and-maintenance-management .roleCard:last-child {
border: 0;
padding-right: 0
}
.asset-and-maintenance-management .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.asset-and-maintenance-management .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.asset-and-maintenance-management .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.asset-and-maintenance-management .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.asset-and-maintenance-management .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.asset-and-maintenance-management .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.asset-and-maintenance-management .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.asset-and-maintenance-management .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.asset-and-maintenance-management .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.asset-and-maintenance-management .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.asset-and-maintenance-management .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
.asset-and-maintenance-management .faq {
max-width: 900px
}
.asset-and-maintenance-management .faq .sectionHead {
max-width: 800px
}
.asset-and-maintenance-management .faqList {
display: grid;
gap: 12px
}
.asset-and-maintenance-management details {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 19px 21px
}
.asset-and-maintenance-management summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
cursor: pointer;
list-style: none;
color: var(--ink);
font-size: 15px;
font-weight: 700;
line-height: 1.6
}
.asset-and-maintenance-management summary::-webkit-details-marker {
display: none
}
.asset-and-maintenance-management .faqPlus {
width: 18px;
height: 18px;
flex: 0 0 18px;
position: relative;
color: var(--navy)
}
.asset-and-maintenance-management .faqPlus:before,
.asset-and-maintenance-management .faqPlus:after {
content: "";
position: absolute;
top: 8px;
left: 2px;
width: 14px;
height: 2px;
background: currentColor;
border-radius: 2px
}
.asset-and-maintenance-management .faqPlus:after {
transform: rotate(90deg)
}
.asset-and-maintenance-management details[open] .faqPlus:after {
transform: none
}
.asset-and-maintenance-management .faqAnswer p {
color: var(--muted);
font-size: 14px;
line-height: 1.85;
margin-top: 15px;
padding-right: 32px
}
.asset-and-maintenance-management details[open] {
border-color: #A7CFE3
}
.asset-and-maintenance-management .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.asset-and-maintenance-management .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.asset-and-maintenance-management .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.asset-and-maintenance-management .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.asset-and-maintenance-management .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.asset-and-maintenance-management .ctaBtns .btn {
min-width: 219px
}
.asset-and-maintenance-management .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.asset-and-maintenance-management .btn.darkOutline:hover {
background: #252D33
}
.asset-and-maintenance-management .final a:focus-visible {
outline-color: var(--yellow)
}
.asset-and-maintenance-management .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.asset-and-maintenance-management .heroGrid {
gap: 28px
}
.asset-and-maintenance-management h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.asset-and-maintenance-management .hero .lead {
font-size: 16px
}
.asset-and-maintenance-management .feature,
.asset-and-maintenance-management .aiGrid {
gap: 30px
}
.asset-and-maintenance-management .visual {
padding: 17px
}
.asset-and-maintenance-management .toolCard {
padding: 21px 15px
}
.asset-and-maintenance-management .toolCard strong {
font-size: 14px
}
.asset-and-maintenance-management .handoffBand {
padding: 20px
}
.asset-and-maintenance-management .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.asset-and-maintenance-management section {
padding: 64px 0
}
.asset-and-maintenance-management .hero {
padding: 34px 0 42px
}
.asset-and-maintenance-management .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.asset-and-maintenance-management .heroCopy {
max-width: 790px
}
.asset-and-maintenance-management .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.asset-and-maintenance-management .hero .lead {
max-width: 760px
}
.asset-and-maintenance-management .heroVisual {
max-width: 460px;
justify-self: center
}
.asset-and-maintenance-management .desktopBreak {
display: none
}
.asset-and-maintenance-management .feature,
.asset-and-maintenance-management .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.asset-and-maintenance-management .feature.reverse .visual {
order: 0
}
.asset-and-maintenance-management .featureCopy {
max-width: 790px
}
.asset-and-maintenance-management .visual {
max-width: 640px;
margin: 0 auto
}
.asset-and-maintenance-management .outcomes,
.asset-and-maintenance-management .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.asset-and-maintenance-management .connectedGrid {
gap: 13px
}
.asset-and-maintenance-management .connectedCard {
padding: 22px
}
.asset-and-maintenance-management .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.asset-and-maintenance-management .aiVisual {
max-width: 600px;
margin: auto
}
.asset-and-maintenance-management .aiMini {
max-width: 780px
}
.asset-and-maintenance-management .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.asset-and-maintenance-management .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.asset-and-maintenance-management .toolCard {
min-height: 145px
}
.asset-and-maintenance-management .roleGrid {
gap: 20px
}
.asset-and-maintenance-management .roleCard {
padding-right: 18px
}
.asset-and-maintenance-management .roleCard h3 {
font-size: 20px
}
.asset-and-maintenance-management .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.asset-and-maintenance-management .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.asset-and-maintenance-management .workflowLead br {
display: none
}
.asset-and-maintenance-management .final {
grid-template-columns: 1fr;
gap: 27px
}
.asset-and-maintenance-management .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.asset-and-maintenance-management .final .btn {
min-width: 210px
}
.asset-and-maintenance-management .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.asset-and-maintenance-management .wrap {
width: calc(100% - 32px)
}
.asset-and-maintenance-management section {
padding: 49px 0
}
.asset-and-maintenance-management h2 {
font-size: 33px;
line-height: 1.15
}
.asset-and-maintenance-management .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.asset-and-maintenance-management .sectionHead {
margin-bottom: 27px
}
.asset-and-maintenance-management .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.asset-and-maintenance-management .hero {
padding: 25px 0 34px
}
.asset-and-maintenance-management .heroGrid {
gap: 21px
}
.asset-and-maintenance-management .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.asset-and-maintenance-management .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.asset-and-maintenance-management .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.asset-and-maintenance-management .hero .actions {
gap: 8px;
margin-top: 23px
}
.asset-and-maintenance-management .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.asset-and-maintenance-management .hero .micro {
font-size: 11px
}
.asset-and-maintenance-management .heroPills {
gap: 6px;
margin-top: 16px
}
.asset-and-maintenance-management .heroPills span {
font-size: 9px
}
.asset-and-maintenance-management .heroVisual {
max-width: 420px
}
.asset-and-maintenance-management .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.asset-and-maintenance-management .trust {
padding: 22px 0
}
.asset-and-maintenance-management .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.asset-and-maintenance-management .logos {
gap: 7px
}
.asset-and-maintenance-management .logo {
font-size: 11px;
min-height: 53px;
padding: 8px
}
.asset-and-maintenance-management .logo.dhl {
font-size: 21px
}
.asset-and-maintenance-management .logo.adobe {
font-size: 18px
}
.asset-and-maintenance-management .logo.golden {
font-size: 8px
}
.asset-and-maintenance-management .outcomes {
gap: 12px
}
.asset-and-maintenance-management .outcome {
padding: 19px
}
.asset-and-maintenance-management .outcome h3 {
font-size: 17px
}
.asset-and-maintenance-management .outcome p {
font-size: 13px
}
.asset-and-maintenance-management .feature {
gap: 27px
}
.asset-and-maintenance-management .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.asset-and-maintenance-management .fl {
gap: 11px 13px;
margin-top: 21px
}
.asset-and-maintenance-management .fi {
font-size: 12px
}
.asset-and-maintenance-management .textLink {
font-size: 13px
}
.asset-and-maintenance-management .visual {
padding: 15px;
border-radius: 16px
}
.asset-and-maintenance-management .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.asset-and-maintenance-management .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.asset-and-maintenance-management .uiHeading .icon2 {
width: 18px;
height: 18px
}
.asset-and-maintenance-management .panelBar {
padding: 12px
}
.asset-and-maintenance-management .uiFoot {
font-size: 9px
}
.asset-and-maintenance-management .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.asset-and-maintenance-management .aiLead {
font-size: 15px;
line-height: 1.8
}
.asset-and-maintenance-management .aiMini {
gap: 11px;
margin-top: 23px
}
.asset-and-maintenance-management .aiMini article {
padding: 16px
}
.asset-and-maintenance-management .aiMini h3 {
font-size: 15px
}
.asset-and-maintenance-management .aiMini p {
font-size: 12px
}
.asset-and-maintenance-management .aiNote {
font-size: 10px
}
.asset-and-maintenance-management .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.asset-and-maintenance-management .connectedCard {
padding: 23px
}
.asset-and-maintenance-management .connectedCard h3 {
margin: 15px 0 9px
}
.asset-and-maintenance-management .connectedCard p {
font-size: 14px
}
.asset-and-maintenance-management .handoffBand {
padding: 20px
}
.asset-and-maintenance-management .handoffBand>div {
align-items: flex-start;
gap: 10px;
}
.asset-and-maintenance-management .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.asset-and-maintenance-management .handoffBand small {
font-size: 11px
}
.asset-and-maintenance-management .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.asset-and-maintenance-management .featureGrid {
gap: 13px
}
.asset-and-maintenance-management .featureCard {
padding: 21px
}
.asset-and-maintenance-management .featureCard h3 {
font-size: 17px
}
.asset-and-maintenance-management .featureCard p {
font-size: 13px
}
.asset-and-maintenance-management .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.asset-and-maintenance-management .toolCard {
padding: 19px 15px;
min-height: 155px
}
.asset-and-maintenance-management .toolCard strong {
font-size: 15px
}
.asset-and-maintenance-management .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.asset-and-maintenance-management .toolCard:last-child .toolArrow {
top: 31px
}
.asset-and-maintenance-management .toolCard:last-child strong {
padding-right: 25px
}
.asset-and-maintenance-management .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.asset-and-maintenance-management .useCases {
gap: 13px
}
.asset-and-maintenance-management .useCase {
padding: 21px 18px
}
.asset-and-maintenance-management .useCase h3 {
font-size: 17px
}
.asset-and-maintenance-management .useCase p {
font-size: 13px
}
.asset-and-maintenance-management .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.asset-and-maintenance-management .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.asset-and-maintenance-management .roleCard:last-child {
padding-bottom: 0
}
.asset-and-maintenance-management .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.asset-and-maintenance-management .roleCard>strong {
font-size: 14px
}
.asset-and-maintenance-management .roleCard p {
font-size: 14px
}
.asset-and-maintenance-management .workflowBand {
padding: 28px 0
}
.asset-and-maintenance-management .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.asset-and-maintenance-management .workflowLead {
font-size: 18px
}
.asset-and-maintenance-management .workflowStep strong {
font-size: 14px
}
.asset-and-maintenance-management .workflowStep p {
font-size: 10px
}
.asset-and-maintenance-management .faq .sectionHead {
margin-bottom: 25px
}
.asset-and-maintenance-management details {
padding: 16px
}
.asset-and-maintenance-management .faqList {
gap: 10px
}
.asset-and-maintenance-management summary {
font-size: 14px;
gap: 14px
}
.asset-and-maintenance-management .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
.asset-and-maintenance-management .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.asset-and-maintenance-management .final h2 {
font-size: 32px
}
.asset-and-maintenance-management .final p {
font-size: 14px;
line-height: 1.8
}
.asset-and-maintenance-management .final .ey {
font-size: 9px
}
.asset-and-maintenance-management .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.asset-and-maintenance-management .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.asset-and-maintenance-management .footerNote {
font-size: 9px;
margin-top: 16px
}
.asset-and-maintenance-management .handoffBand>div a {
flex: 1;
}
.ctaBtns a {
flex: 1;
}
}
@media (max-width:420px) {
.asset-and-maintenance-management .outcomes,
.asset-and-maintenance-management .featureGrid,
.asset-and-maintenance-management .useCases {
grid-template-columns: 1fr
}
.asset-and-maintenance-management .outcome {
padding: 23px
}
.asset-and-maintenance-management .outcome h3 {
font-size: 18px
}
.asset-and-maintenance-management .outcome p {
font-size: 14px
}
.asset-and-maintenance-management .fl {
grid-template-columns: 1fr;
gap: 10px
}
.asset-and-maintenance-management .fi {
font-size: 13px
}
.asset-and-maintenance-management .aiMini {
grid-template-columns: 1fr
}
.asset-and-maintenance-management .aiMini h3 {
font-size: 17px
}
.asset-and-maintenance-management .aiMini p {
font-size: 13px
}
.asset-and-maintenance-management .aiMini article {
padding: 19px
}
.asset-and-maintenance-management .featureCard h3,
.asset-and-maintenance-management .useCase h3 {
font-size: 19px
}
.asset-and-maintenance-management .featureCard p,
.asset-and-maintenance-management .useCase p {
font-size: 14px
}
.asset-and-maintenance-management .toolsGrid {
grid-template-columns: 1fr
}
.asset-and-maintenance-management .toolCard,
.asset-and-maintenance-management .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.asset-and-maintenance-management .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.asset-and-maintenance-management .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.asset-and-maintenance-management .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.asset-and-maintenance-management .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.asset-and-maintenance-management .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.asset-and-maintenance-management .toolArrow,
.asset-and-maintenance-management .toolCard:last-child .toolArrow {
top: 30px
}
.asset-and-maintenance-management .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.asset-and-maintenance-management .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.asset-and-maintenance-management h2 {
font-size: 30px
}
.asset-and-maintenance-management .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.asset-and-maintenance-management .hero h1 {
font-size: 31px
}
.asset-and-maintenance-management .heroPills span {
font-size: 8px
}
.asset-and-maintenance-management .heroPills {
gap: 5px
}
.asset-and-maintenance-management .uiHeading {
font-size: 11px
}
.asset-and-maintenance-management .uiHeading>.pill {
font-size: 7px
}
.asset-and-maintenance-management .visual {
padding: 12px
}
.asset-and-maintenance-management .final {
padding: 26px 20px
}
.asset-and-maintenance-management .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.asset-and-maintenance-management * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.asset-and-maintenance-management section {
padding: 24px 0
}
.asset-and-maintenance-management .hero,
.asset-and-maintenance-management .soft {
background: #fff
}
.asset-and-maintenance-management .dark,
.asset-and-maintenance-management .workflowBand,
.asset-and-maintenance-management .final {
background: #fff;
color: #11283A
}
.asset-and-maintenance-management .dark h2,
.asset-and-maintenance-management .dark h3,
.asset-and-maintenance-management .final h2 {
color: #11283A
}
.asset-and-maintenance-management .dark p,
.asset-and-maintenance-management .final p {
color: #52697C
}
.asset-and-maintenance-management .btn {
display: none
}
.asset-and-maintenance-management .visual,
.asset-and-maintenance-management .outcome,
.asset-and-maintenance-management .featureCard,
.asset-and-maintenance-management details {
break-inside: avoid
}
.asset-and-maintenance-management .heroImage {
max-width: 380px
}
.asset-and-maintenance-management .heroVisual {
justify-self: center
}
}
.asset-and-maintenance-management .constructionAssetSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.asset-and-maintenance-management .constructionAssetSkip:focus {
top: 12px
}
.asset-and-maintenance-management .dark .textLink {
color: #FFF1BD
}
.asset-and-maintenance-management .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto
}
} .asset-and-maintenance-management .amPanelTitle {
display: block;
color: var(--navy);
font-size: 15px;
line-height: 1.5;
margin-top: 6px;
letter-spacing: -.02em
}
.asset-and-maintenance-management .amGlyph {
width: 53px;
height: 59px;
flex: 0 0 53px;
display: grid;
place-items: center;
border: 1px solid #E4DCA9;
border-radius: 11px;
background: var(--yellowsoft);
color: #84620A
}
.asset-and-maintenance-management .amGlyph .icon2 {
width: 29px;
height: 29px
}
.asset-and-maintenance-management .amSmallTile {
display: grid;
place-items: center;
width: 33px;
height: 33px;
flex: 0 0 33px;
border: 1px solid #D6E7F0;
border-radius: 9px;
background: #EDF8FD;
color: var(--navy)
}
.asset-and-maintenance-management .amSmallTile .icon2 {
width: 18px;
height: 18px
}
.asset-and-maintenance-management .amAssetIntro {
display: flex;
gap: 13px;
align-items: center;
padding: 20px
}
.asset-and-maintenance-management .amAssetIntro>div:nth-child(2) {
flex: 1;
min-width: 0
}
.asset-and-maintenance-management .amAssetIntro strong {
display: block;
font-size: 17px;
line-height: 1.4;
color: var(--navy);
margin: 5px 0 6px;
letter-spacing: -.02em
}
.asset-and-maintenance-management .amAssetTabs {
display: flex;
gap: 22px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 0 20px;
font-size: 10px;
color: var(--muted)
}
.asset-and-maintenance-management .amAssetTabs>span {
display: block;
padding: 11px 0;
line-height: 1.5
}
.asset-and-maintenance-management .amAssetTabs .active {
border-bottom: 2px solid var(--brand);
color: var(--navy);
font-weight: 800
}
.asset-and-maintenance-management .amAssetFields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 18px;
padding: 21px 20px
}
.asset-and-maintenance-management .amAssetFields span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.5
}
.asset-and-maintenance-management .amAssetFields b {
display: block;
font-size: 13px;
color: var(--navy);
line-height: 1.5;
margin-top: 5px;
font-weight: 700
}
.asset-and-maintenance-management .amDocuments {
display: flex;
gap: 12px;
flex-wrap: wrap;
padding: 14px 20px;
background: #F6FBFE;
border-top: 1px solid var(--line);
font-size: 9px;
color: #466C83
}
.asset-and-maintenance-management .amDocuments>span {
display: inline-flex;
gap: 6px;
align-items: center
}
.asset-and-maintenance-management .amDocuments .icon2 {
width: 15px;
height: 15px
}
.asset-and-maintenance-management .amLocationTrail {
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
margin-top: 13px
}
.asset-and-maintenance-management .amLocationTrail>div {
min-width: 0;
flex: 1
}
.asset-and-maintenance-management .amLocationTrail b {
font-size: 11px;
display: block;
color: var(--navy);
line-height: 1.5
}
.asset-and-maintenance-management .amLocationTrail>div>span {
display: flex;
align-items: center;
gap: 8px;
font-size: 9px;
color: var(--muted);
line-height: 1.7;
margin-top: 5px;
flex-wrap: wrap
}
.asset-and-maintenance-management .amLocationTrail>div>span .icon2 {
width: 14px;
height: 14px
}
.asset-and-maintenance-management .amMeterBody {
padding: 22px 20px 19px
}
.asset-and-maintenance-management .amReadings {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px
}
.asset-and-maintenance-management .amReadings>div:last-child {
text-align: right
}
.asset-and-maintenance-management .amReadings span {
font-size: 10px;
color: var(--muted);
display: block;
line-height: 1.5
}
.asset-and-maintenance-management .amReadings strong {
display: block;
color: var(--navy);
font-size: 38px;
letter-spacing: -.045em;
line-height: 1.3;
margin-top: 4px
}
.asset-and-maintenance-management .amReadings strong small {
font-size: 15px;
letter-spacing: 0
}
.asset-and-maintenance-management .amMeterBar {
height: 9px;
border-radius: 9px;
background: #E2EEF4;
margin: 17px 0 13px;
overflow: hidden
}
.asset-and-maintenance-management .amMeterBar>span {
display: block;
width: 96%;
height: 100%;
border-radius: 9px;
background: var(--brand)
}
.asset-and-maintenance-management .amMeterNote {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 9px;
color: var(--muted);
line-height: 1.5
}
.asset-and-maintenance-management .amMeterNote b {
font-size: 11px;
color: #806112
}
.asset-and-maintenance-management .amMeterNote span {
text-align: right
}
.asset-and-maintenance-management .amTrigger {
display: flex;
gap: 9px;
align-items: center;
justify-content: center;
padding: 15px 12px;
border-top: 1px solid #E6DCAE;
background: #FFFAE9;
color: #746018;
font-size: 10px;
line-height: 1.5
}
.asset-and-maintenance-management .amTrigger .icon2 {
width: 18px;
height: 18px
}
.asset-and-maintenance-management .amScheduleModes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 14px
}
.asset-and-maintenance-management .amScheduleModes article {
display: flex;
gap: 10px;
align-items: flex-start;
border: 1px solid var(--line);
background: #fff;
padding: 15px 12px;
border-radius: 10px
}
.asset-and-maintenance-management .amScheduleModes .icon2 {
width: 20px;
height: 20px;
color: var(--navy);
margin-top: 1px
}
.asset-and-maintenance-management .amScheduleModes b {
font-size: 11px;
display: block;
color: var(--navy);
line-height: 1.5
}
.asset-and-maintenance-management .amScheduleModes span {
font-size: 9px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 5px
}
.asset-and-maintenance-management p.amVisualNote {
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin: 13px 0 0
}
.asset-and-maintenance-management .amWorkBanner {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #E5D8B7;
background: #FFFBEF;
border-radius: 11px;
padding: 15px
}
.asset-and-maintenance-management .amWorkBanner>span:first-child {
color: #92701D;
flex: none
}
.asset-and-maintenance-management .amWorkBanner>span:first-child .icon2 {
width: 23px;
height: 23px
}
.asset-and-maintenance-management .amWorkBanner>div {
flex: 1;
min-width: 0
}
.asset-and-maintenance-management .amWorkBanner b {
font-size: 13px;
line-height: 1.5;
color: var(--navy);
display: block
}
.asset-and-maintenance-management .amWorkBanner small {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
display: block;
margin-top: 4px
}
.asset-and-maintenance-management .amPriority {
font-size: 8px;
line-height: 1.5;
background: #FFF0E9;
border: 1px solid #ECD3C7;
border-radius: 6px;
padding: 5px 7px;
color: #994D2F;
white-space: nowrap
}
.asset-and-maintenance-management .amWorkFlow {
display: grid;
grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) 15px minmax(0, 1fr);
align-items: center;
gap: 7px;
margin: 17px 0
}
.asset-and-maintenance-management .amWorkFlow article {
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
text-align: center;
padding: 13px 7px;
min-width: 0
}
.asset-and-maintenance-management .amWorkFlow article.active {
background: #ECF8FF;
border-color: #99CFE9
}
.asset-and-maintenance-management .amStepIndex {
display: grid;
place-items: center;
border: 1px solid #DCE9F1;
width: 25px;
height: 25px;
border-radius: 50%;
margin: 0 auto 8px;
font-size: 9px;
font-weight: 800;
background: #F3F9FD;
color: var(--navy)
}
.asset-and-maintenance-management .amWorkFlow article.active .amStepIndex {
background: #00A8F8;
color: #fff;
border-color: #00A8F8
}
.asset-and-maintenance-management .amWorkFlow article b {
font-size: 10px;
color: var(--navy);
line-height: 1.5
}
.asset-and-maintenance-management .amWorkFlow article p {
font-size: 8px;
line-height: 1.6;
color: var(--muted);
margin-top: 6px
}
.asset-and-maintenance-management .amWorkFlow>span {
display: grid;
place-items: center;
color: #7C9CAB
}
.asset-and-maintenance-management .amWorkFlow>span .icon2 {
width: 15px;
height: 15px
}
.asset-and-maintenance-management .amWorkDetails .panelBar {
font-size: 13px;
color: var(--navy);
background: #F8FCFE
}
.asset-and-maintenance-management .amDetailLine {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 12px;
align-items: start;
margin: 0 15px;
padding: 12px 0;
border-bottom: 1px solid #E8EFF4;
font-size: 10px;
line-height: 1.5
}
.asset-and-maintenance-management .amDetailLine:last-child {
border-bottom: 0
}
.asset-and-maintenance-management .amDetailLine>span {
color: var(--muted)
}
.asset-and-maintenance-management .amDetailLine>b {
font-size: 10px;
font-weight: 700;
text-align: right;
color: var(--navy)
}
.asset-and-maintenance-management .amMobileScene {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 19px;
align-items: center
}
.asset-and-maintenance-management .amDevice {
border: 6px solid #102938;
background: #fff;
border-radius: 29px;
overflow: hidden;
padding-bottom: 10px;
width: 100%;
max-width: 208px;
margin: auto;
color: var(--ink)
}
.asset-and-maintenance-management .amDeviceTop {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 8px;
padding: 10px 11px 8px;
font-weight: 700
}
.asset-and-maintenance-management .amDeviceTop>i {
width: 41px;
height: 10px;
display: block;
border-radius: 12px;
background: #102938
}
.asset-and-maintenance-management .amDeviceHead {
padding: 12px 11px;
background: #EEF8FE;
border-bottom: 1px solid var(--line)
}
.asset-and-maintenance-management .amDeviceHead b {
font-size: 13px;
color: var(--navy);
line-height: 1.4;
display: block
}
.asset-and-maintenance-management .amDeviceHead small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
margin-top: 5px
}
.asset-and-maintenance-management .amDeviceBody {
padding: 14px 11px 12px
}
.asset-and-maintenance-management .amProgressValue {
font-size: 31px;
color: var(--navy);
line-height: 1.2;
display: block;
margin: 9px 0 5px;
letter-spacing: -.04em
}
.asset-and-maintenance-management .amDeviceBody>.tiny {
display: block;
font-size: 8px
}
.asset-and-maintenance-management .amChecklist {
display: grid;
gap: 0;
margin-top: 14px;
border-top: 1px solid var(--line)
}
.asset-and-maintenance-management .amChecklist>span {
display: flex;
gap: 6px;
align-items: center;
padding: 9px 0;
border-bottom: 1px solid #E7EFF4;
font-size: 9px;
line-height: 1.5;
color: #45677A
}
.asset-and-maintenance-management .amChecklist .icon2 {
width: 13px;
height: 13px;
color: #118A61
}
.asset-and-maintenance-management .amMockAction {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
background: var(--yellow);
color: #11283A;
font-size: 9px;
font-weight: 800;
line-height: 1.5;
padding: 10px 6px;
border-radius: 7px;
margin-top: 13px
}
.asset-and-maintenance-management .amMockAction .icon2 {
width: 13px;
height: 13px
}
.asset-and-maintenance-management p.amDeviceNote {
font-size: 7px;
line-height: 1.6;
color: var(--muted);
text-align: center;
margin-top: 9px
}
.asset-and-maintenance-management .amHomebar {
height: 3px;
width: 49px;
background: #183A4C;
border-radius: 5px;
margin: auto
}
.asset-and-maintenance-management .amEvidence {
display: grid;
gap: 12px;
min-width: 0
}
.asset-and-maintenance-management .amEvidence article {
border: 1px solid var(--line);
border-radius: 11px;
padding: 17px 14px;
background: #fff;
min-width: 0
}
.asset-and-maintenance-management .amEvidence b {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.5;
margin-top: 12px
}
.asset-and-maintenance-management .amEvidence p {
font-size: 10px;
line-height: 1.75;
color: var(--muted);
margin-top: 7px
}
.asset-and-maintenance-management .amSyncNote {
display: flex;
gap: 7px;
align-items: flex-start;
font-size: 9px;
color: #4D7388;
line-height: 1.7;
padding: 2px 4px
}
.asset-and-maintenance-management .amSyncNote .icon2 {
width: 15px;
height: 15px;
margin-top: 1px
}
.asset-and-maintenance-management .amAiPanel {
border: 1px solid #405664;
border-radius: 17px;
overflow: hidden;
color: var(--ink);
background: #fff
}
.asset-and-maintenance-management .amAiHeader {
display: flex;
gap: 12px;
align-items: center;
padding: 19px;
border-bottom: 1px solid #DCE7EE
}
.asset-and-maintenance-management .amAiHeader>span:first-child {
display: grid;
place-items: center;
width: 37px;
height: 37px;
flex: 0 0 37px;
background: #FFC928;
color: #11283A;
border-radius: 10px
}
.asset-and-maintenance-management .amAiHeader>div {
flex: 1;
min-width: 0
}
.asset-and-maintenance-management .amAiHeader b {
display: block;
color: var(--navy);
font-size: 15px;
line-height: 1.5;
letter-spacing: .02em
}
.asset-and-maintenance-management .amAiHeader small {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.5;
margin-top: 2px
}
.asset-and-maintenance-management .amDraft {
font-size: 8px;
border: 1px solid var(--line);
padding: 5px 7px;
color: var(--muted);
border-radius: 5px
}
.asset-and-maintenance-management .amAiBody {
padding: 20px
}
.asset-and-maintenance-management .amPrompt {
font-size: 13px;
line-height: 1.7;
font-weight: 650;
color: var(--navy);
background: #EDF8FF;
border: 1px solid #CDE7F5;
border-radius: 11px 11px 2px 11px;
padding: 15px 17px;
margin-left: 19px
}
.asset-and-maintenance-management .amAiLabel {
display: block;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
font-size: 8px;
font-weight: 800;
line-height: 1.5;
margin: 22px 0 10px
}
.asset-and-maintenance-management .amSourceChips {
display: flex;
gap: 7px;
flex-wrap: wrap
}
.asset-and-maintenance-management .amSourceChips>span {
display: flex;
align-items: center;
gap: 5px;
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 8px;
background: #FAFCFD;
color: #516F81;
font-size: 8px;
line-height: 1.5
}
.asset-and-maintenance-management .amSourceChips .icon2 {
height: 13px;
width: 13px
}
.asset-and-maintenance-management .amAiAnswer {
border: 1px solid #DFE9F0;
border-radius: 11px;
padding: 18px;
margin-top: 17px;
background: #FAFCFD
}
.asset-and-maintenance-management .amAiAnswer>b {
font-size: 14px;
line-height: 1.5;
color: var(--navy);
display: block
}
.asset-and-maintenance-management .amAiAnswer>p {
font-size: 11px;
color: #597484;
line-height: 1.8;
margin-top: 10px
}
.asset-and-maintenance-management .amAiOutput {
display: grid;
gap: 11px;
margin-top: 17px;
border-top: 1px solid #E1EAF1;
padding-top: 16px
}
.asset-and-maintenance-management .amAiOutput>span {
display: flex;
gap: 7px;
align-items: center;
font-size: 10px;
line-height: 1.5;
color: #355D73
}
.asset-and-maintenance-management .amAiOutput .icon2 {
height: 14px;
width: 14px;
color: #128962
}
.asset-and-maintenance-management .amAiReview {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 13px;
background: #FFF9E5;
border: 1px solid #EADCA8;
border-radius: 9px;
color: #786115;
font-size: 10px;
line-height: 1.7;
margin-top: 16px
}
.asset-and-maintenance-management .amAiReview .icon2 {
height: 17px;
width: 17px;
margin-top: 1px
}
@media (min-width:981px) and (max-width:1150px) {
.asset-and-maintenance-management .amAssetIntro {
padding: 16px;
gap: 10px
}
.asset-and-maintenance-management .amAssetIntro>.pill {
display: none
}
.asset-and-maintenance-management .amAssetIntro strong {
font-size: 15px
}
.asset-and-maintenance-management .amMobileScene {
grid-template-columns: 174px minmax(0, 1fr);
gap: 13px
}
.asset-and-maintenance-management .amEvidence article {
padding: 14px 11px
}
.asset-and-maintenance-management .amEvidence b {
font-size: 11px
}
.asset-and-maintenance-management .amWorkBanner {
padding: 13px;
gap: 8px
}
.asset-and-maintenance-management .amWorkBanner b {
font-size: 11px
}
.asset-and-maintenance-management .amPriority {
font-size: 7px;
padding: 4px
}
.asset-and-maintenance-management .amScheduleModes {
gap: 9px
}
.asset-and-maintenance-management .amScheduleModes article {
padding: 13px 10px;
gap: 7px
}
.asset-and-maintenance-management .amLocationTrail>.pill {
display: none
}
}
@media (max-width:640px) {
.asset-and-maintenance-management .amAssetIntro {
padding: 15px 13px;
gap: 10px
}
.asset-and-maintenance-management .amGlyph {
width: 43px;
height: 49px;
flex-basis: 43px
}
.asset-and-maintenance-management .amGlyph .icon2 {
width: 24px;
height: 24px
}
.asset-and-maintenance-management .amAssetIntro strong {
font-size: 14px
}
.asset-and-maintenance-management .amAssetIntro>.pill {
display: none
}
.asset-and-maintenance-management .amAssetIntro .uiLabel {
font-size: 8px
}
.asset-and-maintenance-management .amAssetIntro .tiny {
font-size: 8px
}
.asset-and-maintenance-management .amAssetTabs {
padding: 0 14px;
gap: 17px;
font-size: 9px
}
.asset-and-maintenance-management .amAssetFields {
padding: 17px 14px;
gap: 17px 12px
}
.asset-and-maintenance-management .amAssetFields span {
font-size: 9px
}
.asset-and-maintenance-management .amAssetFields b {
font-size: 12px
}
.asset-and-maintenance-management .amDocuments {
padding: 13px 14px;
gap: 10px;
font-size: 8px
}
.asset-and-maintenance-management .amDocuments .icon2 {
height: 14px;
width: 14px
}
.asset-and-maintenance-management .amLocationTrail {
padding: 12px 10px;
gap: 8px
}
.asset-and-maintenance-management .amLocationTrail>.pill {
display: none
}
.asset-and-maintenance-management .amLocationTrail b {
font-size: 10px
}
.asset-and-maintenance-management .amLocationTrail>div>span {
font-size: 8px;
gap: 5px
}
.asset-and-maintenance-management .amPanelTitle {
font-size: 13px
}
.asset-and-maintenance-management .amMeterBody {
padding: 17px 14px
}
.asset-and-maintenance-management .amReadings strong {
font-size: 32px
}
.asset-and-maintenance-management .amReadings span {
font-size: 9px
}
.asset-and-maintenance-management .amMeterNote {
font-size: 8px;
gap: 9px
}
.asset-and-maintenance-management .amMeterNote b {
font-size: 10px
}
.asset-and-maintenance-management .amTrigger {
font-size: 9px;
gap: 6px;
padding: 13px 8px
}
.asset-and-maintenance-management .amTrigger .icon2 {
width: 15px;
height: 15px
}
.asset-and-maintenance-management .amScheduleModes {
gap: 9px
}
.asset-and-maintenance-management .amScheduleModes article {
padding: 13px 10px;
gap: 7px
}
.asset-and-maintenance-management .amScheduleModes .icon2 {
width: 18px;
height: 18px
}
.asset-and-maintenance-management .amScheduleModes b {
font-size: 10px
}
.asset-and-maintenance-management .amScheduleModes span {
font-size: 8px
}
.asset-and-maintenance-management .amWorkBanner {
padding: 13px 11px;
gap: 8px
}
.asset-and-maintenance-management .amWorkBanner b {
font-size: 11px
}
.asset-and-maintenance-management .amWorkBanner small {
font-size: 8px
}
.asset-and-maintenance-management .amPriority {
font-size: 7px;
padding: 4px 5px
}
.asset-and-maintenance-management .amWorkBanner>span:first-child .icon2 {
width: 20px;
height: 20px
}
.asset-and-maintenance-management .amWorkFlow {
gap: 5px;
grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr)
}
.asset-and-maintenance-management .amWorkFlow article {
padding: 12px 6px
}
.asset-and-maintenance-management .amWorkFlow article b {
font-size: 9px
}
.asset-and-maintenance-management .amWorkFlow article p {
font-size: 7px
}
.asset-and-maintenance-management .amWorkFlow>span .icon2 {
width: 12px;
height: 12px
}
.asset-and-maintenance-management .amDetailLine {
font-size: 9px;
margin: 0 12px;
gap: 10px
}
.asset-and-maintenance-management .amDetailLine>b {
font-size: 9px
}
.asset-and-maintenance-management .amMobileScene {
grid-template-columns: 170px minmax(0, 1fr);
gap: 12px
}
.asset-and-maintenance-management .amEvidence article {
padding: 14px 11px
}
.asset-and-maintenance-management .amEvidence b {
font-size: 11px
}
.asset-and-maintenance-management .amEvidence p {
font-size: 9px
}
.asset-and-maintenance-management .amDeviceHead b {
font-size: 12px
}
.asset-and-maintenance-management .amDeviceBody {
padding: 12px 10px
}
.asset-and-maintenance-management .amChecklist>span {
font-size: 8px
}
.asset-and-maintenance-management .amMockAction {
font-size: 8px
}
.asset-and-maintenance-management .amAiHeader {
padding: 16px 14px;
gap: 10px
}
.asset-and-maintenance-management .amAiBody {
padding: 15px
}
.asset-and-maintenance-management .amPrompt {
font-size: 12px;
padding: 13px;
margin-left: 10px
}
.asset-and-maintenance-management .amAiAnswer {
padding: 15px
}
.asset-and-maintenance-management .amAiAnswer>b {
font-size: 13px
}
.asset-and-maintenance-management .amAiAnswer>p {
font-size: 11px
}
.asset-and-maintenance-management .amAiReview {
font-size: 9px
}
}
@media (max-width:420px) {
.asset-and-maintenance-management .amMobileScene {
grid-template-columns: 1fr;
gap: 18px
}
.asset-and-maintenance-management .amDevice {
max-width: 212px
}
.asset-and-maintenance-management .amDeviceHead {
padding: 13px
}
.asset-and-maintenance-management .amDeviceHead b {
font-size: 14px
}
.asset-and-maintenance-management .amDeviceHead small {
font-size: 10px
}
.asset-and-maintenance-management .amDeviceBody {
padding: 15px 13px
}
.asset-and-maintenance-management .amDeviceBody>.tiny {
font-size: 10px
}
.asset-and-maintenance-management .amChecklist>span {
font-size: 10px
}
.asset-and-maintenance-management .amMockAction {
font-size: 10px
}
.asset-and-maintenance-management p.amDeviceNote {
font-size: 8px
}
.asset-and-maintenance-management .amEvidence {
grid-template-columns: 1fr 1fr;
gap: 10px
}
.asset-and-maintenance-management .amEvidence article {
padding: 14px 11px
}
.asset-and-maintenance-management .amEvidence b {
font-size: 11px
}
.asset-and-maintenance-management .amEvidence p {
font-size: 10px
}
.asset-and-maintenance-management .amSyncNote {
grid-column: 1/-1;
font-size: 10px
}
.asset-and-maintenance-management .amPriority {
display: none
}
.asset-and-maintenance-management .amWorkFlow {
grid-template-columns: 1fr;
gap: 6px
}
.asset-and-maintenance-management .amWorkFlow article {
display: grid;
grid-template-columns: 25px 67px minmax(0, 1fr);
gap: 8px;
align-items: center;
text-align: left;
padding: 12px 11px
}
.asset-and-maintenance-management .amStepIndex {
margin: 0
}
.asset-and-maintenance-management .amWorkFlow article b {
font-size: 10px
}
.asset-and-maintenance-management .amWorkFlow article p {
font-size: 9px;
margin: 0
}
.asset-and-maintenance-management .amWorkFlow>span .icon2 {
transform: rotate(90deg);
width: 14px;
height: 14px
}
.asset-and-maintenance-management .amDraft {
display: none
}
.asset-and-maintenance-management .amAiBody {
padding: 14px
}
.asset-and-maintenance-management .amPrompt {
margin-left: 0
}
.asset-and-maintenance-management .amSourceChips {
gap: 6px
}
.asset-and-maintenance-management .amSourceChips>span {
font-size: 8px;
padding: 5px 6px
}
.asset-and-maintenance-management .amAiOutput>span {
font-size: 10px
}
}
@media (max-width:360px) {
.asset-and-maintenance-management .amAssetTabs {
font-size: 8px;
gap: 15px;
padding: 0 12px
}
.asset-and-maintenance-management .amAssetIntro {
padding: 13px 11px
}
.asset-and-maintenance-management .amAssetIntro strong {
font-size: 13px
}
.asset-and-maintenance-management .amGlyph {
width: 35px;
flex-basis: 35px;
height: 43px
}
.asset-and-maintenance-management .amAssetIntro .uiLabel {
font-size: 7px
}
.asset-and-maintenance-management .amLocationTrail {
padding: 11px 9px
}
.asset-and-maintenance-management .amLocationTrail>div>span {
font-size: 7px
}
.asset-and-maintenance-management .amPanelTitle {
font-size: 12px
}
.asset-and-maintenance-management .amMeterNote {
align-items: flex-start;
flex-direction: column;
gap: 3px
}
.asset-and-maintenance-management .amMeterNote span {
text-align: left
}
.asset-and-maintenance-management .amTrigger {
font-size: 8px;
gap: 5px
}
.asset-and-maintenance-management .amTrigger .icon2 {
width: 13px;
height: 13px
}
.asset-and-maintenance-management .amScheduleModes {
grid-template-columns: 1fr
}
.asset-and-maintenance-management .amScheduleModes b {
font-size: 11px
}
.asset-and-maintenance-management .amScheduleModes span {
font-size: 10px
}
.asset-and-maintenance-management .amWorkFlow article {
grid-template-columns: 23px 62px minmax(0, 1fr);
gap: 6px;
padding: 11px 9px
}
.asset-and-maintenance-management .amStepIndex {
width: 23px;
height: 23px
}
.asset-and-maintenance-management .amWorkFlow article p {
font-size: 8px
}
.asset-and-maintenance-management .amDetailLine {
font-size: 8px
}
.asset-and-maintenance-management .amDetailLine>b {
font-size: 8px
}
.asset-and-maintenance-management .amEvidence {
grid-template-columns: 1fr
}
.asset-and-maintenance-management .amEvidence b {
font-size: 13px
}
.asset-and-maintenance-management .amEvidence p {
font-size: 11px
}
.asset-and-maintenance-management .amAiAnswer {
padding: 13px
}
.asset-and-maintenance-management .amAiAnswer>b {
font-size: 12px
}
}
.asset-and-maintenance-management .constructionAssetSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.asset-and-maintenance-management .constructionAssetSkip:focus {
top: 12px
}  .spare-parts-inventory-management svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
.spare-parts-inventory-management .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.spare-parts-inventory-management a:focus-visible,
.spare-parts-inventory-management summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.spare-parts-inventory-management .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.spare-parts-inventory-management .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.spare-parts-inventory-management .btn .icon2 {
width: 17px;
height: 17px
}
.spare-parts-inventory-management .btn.black {
background: #0B0B0B;
color: #fff
}
.spare-parts-inventory-management .btn.black:hover {
background: #303030
}
.spare-parts-inventory-management .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.spare-parts-inventory-management .btn.yellow:hover {
background: #FFD454
}
.spare-parts-inventory-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.spare-parts-inventory-management .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.spare-parts-inventory-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.spare-parts-inventory-management .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.spare-parts-inventory-management .textLink .icon2 {
width: 17px;
height: 17px
}
.spare-parts-inventory-management .textLink:hover {
color: var(--brand2)
}
.spare-parts-inventory-management .soft {
background: var(--sky2)
}
.spare-parts-inventory-management .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.spare-parts-inventory-management .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.spare-parts-inventory-management .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.spare-parts-inventory-management .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.spare-parts-inventory-management .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.spare-parts-inventory-management .heroGrid>*,
.spare-parts-inventory-management .feature>*,
.spare-parts-inventory-management .aiGrid>* {
min-width: 0
}
.spare-parts-inventory-management .heroCopy {
min-width: 0
}
.spare-parts-inventory-management .hero h1 {
max-width: 630px
}
.spare-parts-inventory-management .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.spare-parts-inventory-management .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.spare-parts-inventory-management .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.spare-parts-inventory-management .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.spare-parts-inventory-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.spare-parts-inventory-management .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.spare-parts-inventory-management .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.spare-parts-inventory-management .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.spare-parts-inventory-management .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.spare-parts-inventory-management .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.spare-parts-inventory-management .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.spare-parts-inventory-management .logos {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 11px
}
.spare-parts-inventory-management .logo {
min-height: 60px;
border: 1px solid #E2EBF0;
border-radius: 10px;
display: grid;
place-content: center;
text-align: center;
padding: 10px;
line-height: 1.25;
font-weight: 800;
font-size: 14px;
color: #506578;
letter-spacing: -.02em
}
.spare-parts-inventory-management .logo.dhl {
font-size: 24px;
font-style: italic;
font-weight: 900;
letter-spacing: 1px
}
.spare-parts-inventory-management .logo.adobe {
font-size: 21px
}
.spare-parts-inventory-management .logo.golden {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em
}
.spare-parts-inventory-management .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.spare-parts-inventory-management .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.spare-parts-inventory-management .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.spare-parts-inventory-management .outcome:nth-child(2):before {
background: var(--yellow)
}
.spare-parts-inventory-management .outcome:nth-child(3):before {
background: var(--green)
}
.spare-parts-inventory-management .outcome:nth-child(4):before {
background: var(--purple)
}
.spare-parts-inventory-management .outcome>.icon2 {
color: var(--navy)
}
.spare-parts-inventory-management .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.spare-parts-inventory-management .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.spare-parts-inventory-management .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.spare-parts-inventory-management .feature.reverse .visual {
order: -1
}
.spare-parts-inventory-management .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.spare-parts-inventory-management .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.spare-parts-inventory-management .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.spare-parts-inventory-management .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.spare-parts-inventory-management .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.spare-parts-inventory-management .tick .icon2 {
height: 13px;
width: 13px
}
.spare-parts-inventory-management .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.spare-parts-inventory-management .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.spare-parts-inventory-management .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.spare-parts-inventory-management .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.spare-parts-inventory-management .uiHeading .icon2 {
height: 19px;
width: 19px
}
.spare-parts-inventory-management .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.spare-parts-inventory-management .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
.spare-parts-inventory-management .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.spare-parts-inventory-management .panelBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--line)
}
.spare-parts-inventory-management .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.spare-parts-inventory-management .tiny {
font-size: 9px;
line-height: 1.5
}
.spare-parts-inventory-management .muted {
color: var(--muted)
}
.spare-parts-inventory-management .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.spare-parts-inventory-management .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.spare-parts-inventory-management .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.spare-parts-inventory-management .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.spare-parts-inventory-management .dark h2,
.spare-parts-inventory-management .dark h3 {
color: white
}
.spare-parts-inventory-management .dark .ey {
background: var(--yellow);
color: #111
}
.spare-parts-inventory-management .dark .textLink {
color: #fff
}
.spare-parts-inventory-management .dark a:focus-visible {
outline-color: var(--yellow)
}
.spare-parts-inventory-management .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.spare-parts-inventory-management .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.spare-parts-inventory-management .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.spare-parts-inventory-management .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.spare-parts-inventory-management .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.spare-parts-inventory-management .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.spare-parts-inventory-management .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.spare-parts-inventory-management .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.spare-parts-inventory-management .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.spare-parts-inventory-management .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.spare-parts-inventory-management .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.spare-parts-inventory-management .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.spare-parts-inventory-management .connectedCard h3 {
margin: 18px 0 11px
}
.spare-parts-inventory-management .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.spare-parts-inventory-management .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.spare-parts-inventory-management .handoffBand>div {
display: flex;
align-items: center;
gap: 14px;
flex-direction: row;
}
.spare-parts-inventory-management .handoffBand>div>.icon2 {
color: var(--navy);
width: 29px;
height: 29px
}
.spare-parts-inventory-management .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.spare-parts-inventory-management .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.spare-parts-inventory-management .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.spare-parts-inventory-management .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.spare-parts-inventory-management .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.spare-parts-inventory-management .featureCard>.icon2 {
color: var(--navy)
}
.spare-parts-inventory-management .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.spare-parts-inventory-management .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.spare-parts-inventory-management .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.spare-parts-inventory-management .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.spare-parts-inventory-management .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.spare-parts-inventory-management .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.spare-parts-inventory-management .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.spare-parts-inventory-management .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.spare-parts-inventory-management .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.spare-parts-inventory-management .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.spare-parts-inventory-management .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.spare-parts-inventory-management .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.spare-parts-inventory-management .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.spare-parts-inventory-management .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.spare-parts-inventory-management .useCase>.icon2 {
color: var(--navy)
}
.spare-parts-inventory-management .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.spare-parts-inventory-management .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.spare-parts-inventory-management .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.spare-parts-inventory-management .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.spare-parts-inventory-management .roleCard:last-child {
border: 0;
padding-right: 0
}
.spare-parts-inventory-management .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.spare-parts-inventory-management .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.spare-parts-inventory-management .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.spare-parts-inventory-management .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.spare-parts-inventory-management .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.spare-parts-inventory-management .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.spare-parts-inventory-management .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.spare-parts-inventory-management .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.spare-parts-inventory-management .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.spare-parts-inventory-management .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.spare-parts-inventory-management .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
.spare-parts-inventory-management .faq {
max-width: 900px
}
.spare-parts-inventory-management .faq .sectionHead {
max-width: 800px
}
.spare-parts-inventory-management .faqList {
display: grid;
gap: 12px
}
.spare-parts-inventory-management details {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 19px 21px
}
.spare-parts-inventory-management summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
cursor: pointer;
list-style: none;
color: var(--ink);
font-size: 15px;
font-weight: 700;
line-height: 1.6
}
.spare-parts-inventory-management summary::-webkit-details-marker {
display: none
}
.spare-parts-inventory-management .faqPlus {
width: 18px;
height: 18px;
flex: 0 0 18px;
position: relative;
color: var(--navy)
}
.spare-parts-inventory-management .faqPlus:before,
.spare-parts-inventory-management .faqPlus:after {
content: "";
position: absolute;
top: 8px;
left: 2px;
width: 14px;
height: 2px;
background: currentColor;
border-radius: 2px
}
.spare-parts-inventory-management .faqPlus:after {
transform: rotate(90deg)
}
.spare-parts-inventory-management details[open] .faqPlus:after {
transform: none
}
.spare-parts-inventory-management .faqAnswer p {
color: var(--muted);
font-size: 14px;
line-height: 1.85;
margin-top: 15px;
padding-right: 32px
}
.spare-parts-inventory-management details[open] {
border-color: #A7CFE3
}
.spare-parts-inventory-management .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.spare-parts-inventory-management .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.spare-parts-inventory-management .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.spare-parts-inventory-management .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.spare-parts-inventory-management .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.spare-parts-inventory-management .ctaBtns .btn {
min-width: 219px
}
.spare-parts-inventory-management .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.spare-parts-inventory-management .btn.darkOutline:hover {
background: #252D33
}
.spare-parts-inventory-management .final a:focus-visible {
outline-color: var(--yellow)
}
.spare-parts-inventory-management .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.spare-parts-inventory-management .heroGrid {
gap: 28px
}
.spare-parts-inventory-management h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.spare-parts-inventory-management .hero .lead {
font-size: 16px
}
.spare-parts-inventory-management .feature,
.spare-parts-inventory-management .aiGrid {
gap: 30px
}
.spare-parts-inventory-management .visual {
padding: 17px
}
.spare-parts-inventory-management .toolCard {
padding: 21px 15px
}
.spare-parts-inventory-management .toolCard strong {
font-size: 14px
}
.spare-parts-inventory-management .handoffBand {
padding: 20px
}
.spare-parts-inventory-management .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.spare-parts-inventory-management section {
padding: 64px 0
}
.spare-parts-inventory-management .hero {
padding: 34px 0 42px
}
.spare-parts-inventory-management .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.spare-parts-inventory-management .heroCopy {
max-width: 790px
}
.spare-parts-inventory-management .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.spare-parts-inventory-management .hero .lead {
max-width: 760px
}
.spare-parts-inventory-management .heroVisual {
max-width: 460px;
justify-self: center
}
.spare-parts-inventory-management .desktopBreak {
display: none
}
.spare-parts-inventory-management .feature,
.spare-parts-inventory-management .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.spare-parts-inventory-management .feature.reverse .visual {
order: 0
}
.spare-parts-inventory-management .featureCopy {
max-width: 790px
}
.spare-parts-inventory-management .visual {
max-width: 640px;
margin: 0 auto
}
.spare-parts-inventory-management .outcomes,
.spare-parts-inventory-management .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.spare-parts-inventory-management .connectedGrid {
gap: 13px
}
.spare-parts-inventory-management .connectedCard {
padding: 22px
}
.spare-parts-inventory-management .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.spare-parts-inventory-management .aiVisual {
max-width: 600px;
margin: auto
}
.spare-parts-inventory-management .aiMini {
max-width: 780px
}
.spare-parts-inventory-management .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.spare-parts-inventory-management .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.spare-parts-inventory-management .toolCard {
min-height: 145px
}
.spare-parts-inventory-management .roleGrid {
gap: 20px
}
.spare-parts-inventory-management .roleCard {
padding-right: 18px
}
.spare-parts-inventory-management .roleCard h3 {
font-size: 20px
}
.spare-parts-inventory-management .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.spare-parts-inventory-management .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.spare-parts-inventory-management .workflowLead br {
display: none
}
.spare-parts-inventory-management .final {
grid-template-columns: 1fr;
gap: 27px
}
.spare-parts-inventory-management .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.spare-parts-inventory-management .final .btn {
min-width: 210px
}
.spare-parts-inventory-management .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.spare-parts-inventory-management .wrap {
width: calc(100% - 32px)
}
.spare-parts-inventory-management section {
padding: 49px 0
}
.spare-parts-inventory-management h2 {
font-size: 33px;
line-height: 1.15
}
.spare-parts-inventory-management .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.spare-parts-inventory-management .sectionHead {
margin-bottom: 27px
}
.spare-parts-inventory-management .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.spare-parts-inventory-management .hero {
padding: 25px 0 34px
}
.spare-parts-inventory-management .heroGrid {
gap: 21px
}
.spare-parts-inventory-management .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.spare-parts-inventory-management .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.spare-parts-inventory-management .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.spare-parts-inventory-management .hero .actions {
gap: 8px;
margin-top: 23px
}
.spare-parts-inventory-management .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.spare-parts-inventory-management .hero .micro {
font-size: 11px
}
.spare-parts-inventory-management .heroPills {
gap: 6px;
margin-top: 16px
}
.spare-parts-inventory-management .heroPills span {
font-size: 9px
}
.spare-parts-inventory-management .heroVisual {
max-width: 420px
}
.spare-parts-inventory-management .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.spare-parts-inventory-management .trust {
padding: 22px 0
}
.spare-parts-inventory-management .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.spare-parts-inventory-management .logos {
gap: 7px
}
.spare-parts-inventory-management .logo {
font-size: 11px;
min-height: 53px;
padding: 8px
}
.spare-parts-inventory-management .logo.dhl {
font-size: 21px
}
.spare-parts-inventory-management .logo.adobe {
font-size: 18px
}
.spare-parts-inventory-management .logo.golden {
font-size: 8px
}
.spare-parts-inventory-management .outcomes {
gap: 12px
}
.spare-parts-inventory-management .outcome {
padding: 19px
}
.spare-parts-inventory-management .outcome h3 {
font-size: 17px
}
.spare-parts-inventory-management .outcome p {
font-size: 13px
}
.spare-parts-inventory-management .feature {
gap: 27px
}
.spare-parts-inventory-management .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.spare-parts-inventory-management .fl {
gap: 11px 13px;
margin-top: 21px
}
.spare-parts-inventory-management .fi {
font-size: 12px
}
.spare-parts-inventory-management .textLink {
font-size: 13px
}
.spare-parts-inventory-management .visual {
padding: 15px;
border-radius: 16px
}
.spare-parts-inventory-management .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.spare-parts-inventory-management .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.spare-parts-inventory-management .uiHeading .icon2 {
width: 18px;
height: 18px
}
.spare-parts-inventory-management .panelBar {
padding: 12px
}
.spare-parts-inventory-management .uiFoot {
font-size: 9px
}
.spare-parts-inventory-management .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.spare-parts-inventory-management .aiLead {
font-size: 15px;
line-height: 1.8
}
.spare-parts-inventory-management .aiMini {
gap: 11px;
margin-top: 23px
}
.spare-parts-inventory-management .aiMini article {
padding: 16px
}
.spare-parts-inventory-management .aiMini h3 {
font-size: 15px
}
.spare-parts-inventory-management .aiMini p {
font-size: 12px
}
.spare-parts-inventory-management .aiNote {
font-size: 10px
}
.spare-parts-inventory-management .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.spare-parts-inventory-management .connectedCard {
padding: 23px
}
.spare-parts-inventory-management .connectedCard h3 {
margin: 15px 0 9px
}
.spare-parts-inventory-management .connectedCard p {
font-size: 14px
}
.spare-parts-inventory-management .handoffBand {
padding: 20px
}
.spare-parts-inventory-management .handoffBand>div {
align-items: flex-start;
gap: 10px
}
.spare-parts-inventory-management .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.spare-parts-inventory-management .handoffBand small {
font-size: 11px
}
.spare-parts-inventory-management .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.spare-parts-inventory-management .featureGrid {
gap: 13px
}
.spare-parts-inventory-management .featureCard {
padding: 21px
}
.spare-parts-inventory-management .featureCard h3 {
font-size: 17px
}
.spare-parts-inventory-management .featureCard p {
font-size: 13px
}
.spare-parts-inventory-management .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.spare-parts-inventory-management .toolCard {
padding: 19px 15px;
min-height: 155px
}
.spare-parts-inventory-management .toolCard strong {
font-size: 15px
}
.spare-parts-inventory-management .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.spare-parts-inventory-management .toolCard:last-child .toolArrow {
top: 31px
}
.spare-parts-inventory-management .toolCard:last-child strong {
padding-right: 25px
}
.spare-parts-inventory-management .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.spare-parts-inventory-management .useCases {
gap: 13px
}
.spare-parts-inventory-management .useCase {
padding: 21px 18px
}
.spare-parts-inventory-management .useCase h3 {
font-size: 17px
}
.spare-parts-inventory-management .useCase p {
font-size: 13px
}
.spare-parts-inventory-management .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.spare-parts-inventory-management .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.spare-parts-inventory-management .roleCard:last-child {
padding-bottom: 0
}
.spare-parts-inventory-management .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.spare-parts-inventory-management .roleCard>strong {
font-size: 14px
}
.spare-parts-inventory-management .roleCard p {
font-size: 14px
}
.spare-parts-inventory-management .workflowBand {
padding: 28px 0
}
.spare-parts-inventory-management .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.spare-parts-inventory-management .workflowLead {
font-size: 18px
}
.spare-parts-inventory-management .workflowStep strong {
font-size: 14px
}
.spare-parts-inventory-management .workflowStep p {
font-size: 10px
}
.spare-parts-inventory-management .faq .sectionHead {
margin-bottom: 25px
}
.spare-parts-inventory-management details {
padding: 16px
}
.spare-parts-inventory-management .faqList {
gap: 10px
}
.spare-parts-inventory-management summary {
font-size: 14px;
gap: 14px
}
.spare-parts-inventory-management .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
.spare-parts-inventory-management .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.spare-parts-inventory-management .final h2 {
font-size: 32px
}
.spare-parts-inventory-management .final p {
font-size: 14px;
line-height: 1.8
}
.spare-parts-inventory-management .final .ey {
font-size: 9px
}
.spare-parts-inventory-management .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.spare-parts-inventory-management .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.spare-parts-inventory-management .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
.spare-parts-inventory-management .outcomes,
.spare-parts-inventory-management .featureGrid,
.spare-parts-inventory-management .useCases {
grid-template-columns: 1fr
}
.spare-parts-inventory-management .outcome {
padding: 23px
}
.spare-parts-inventory-management .outcome h3 {
font-size: 18px
}
.spare-parts-inventory-management .outcome p {
font-size: 14px
}
.spare-parts-inventory-management .fl {
grid-template-columns: 1fr;
gap: 10px
}
.spare-parts-inventory-management .fi {
font-size: 13px
}
.spare-parts-inventory-management .aiMini {
grid-template-columns: 1fr
}
.spare-parts-inventory-management .aiMini h3 {
font-size: 17px
}
.spare-parts-inventory-management .aiMini p {
font-size: 13px
}
.spare-parts-inventory-management .aiMini article {
padding: 19px
}
.spare-parts-inventory-management .featureCard h3,
.spare-parts-inventory-management .useCase h3 {
font-size: 19px
}
.spare-parts-inventory-management .featureCard p,
.spare-parts-inventory-management .useCase p {
font-size: 14px
}
.spare-parts-inventory-management .toolsGrid {
grid-template-columns: 1fr
}
.spare-parts-inventory-management .toolCard,
.spare-parts-inventory-management .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.spare-parts-inventory-management .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.spare-parts-inventory-management .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.spare-parts-inventory-management .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.spare-parts-inventory-management .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.spare-parts-inventory-management .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.spare-parts-inventory-management .toolArrow,
.spare-parts-inventory-management .toolCard:last-child .toolArrow {
top: 30px
}
.spare-parts-inventory-management .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.spare-parts-inventory-management .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.spare-parts-inventory-management h2 {
font-size: 30px
}
.spare-parts-inventory-management .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.spare-parts-inventory-management .hero h1 {
font-size: 31px
}
.spare-parts-inventory-management .heroPills span {
font-size: 8px
}
.spare-parts-inventory-management .heroPills {
gap: 5px
}
.spare-parts-inventory-management .uiHeading {
font-size: 11px
}
.spare-parts-inventory-management .uiHeading>.pill {
font-size: 7px
}
.spare-parts-inventory-management .visual {
padding: 12px
}
.spare-parts-inventory-management .final {
padding: 26px 20px
}
.spare-parts-inventory-management .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.spare-parts-inventory-management * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.spare-parts-inventory-management section {
padding: 24px 0
}
.spare-parts-inventory-management .hero,
.spare-parts-inventory-management .soft {
background: #fff
}
.spare-parts-inventory-management .dark,
.spare-parts-inventory-management .workflowBand,
.spare-parts-inventory-management .final {
background: #fff;
color: #11283A
}
.spare-parts-inventory-management .dark h2,
.spare-parts-inventory-management .dark h3,
.spare-parts-inventory-management .final h2 {
color: #11283A
}
.spare-parts-inventory-management .dark p,
.spare-parts-inventory-management .final p {
color: #52697C
}
.spare-parts-inventory-management .btn {
display: none
}
.spare-parts-inventory-management .visual,
.spare-parts-inventory-management .outcome,
.spare-parts-inventory-management .featureCard,
.spare-parts-inventory-management details {
break-inside: avoid
}
.spare-parts-inventory-management .heroImage {
max-width: 380px
}
.spare-parts-inventory-management .heroVisual {
justify-self: center
}
}
.spare-parts-inventory-management .constructionSparesSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.spare-parts-inventory-management .constructionSparesSkip:focus {
top: 12px
}
.spare-parts-inventory-management .dark .textLink {
color: #FFF1BD
}
.spare-parts-inventory-management .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
@media (prefers-reduced-motion:reduce) {}
.spare-parts-inventory-management .spPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.spare-parts-inventory-management .spTop {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
border-bottom: 1px solid var(--line)
}
.spare-parts-inventory-management .spTop>div {
min-width: 0;
flex: 1
}
.spare-parts-inventory-management .spTop strong {
display: block;
font-size: 15px;
line-height: 1.5;
color: var(--navy)
}
.spare-parts-inventory-management .spTop small {
display: block;
font-size: 10px;
line-height: 1.55;
color: var(--muted);
margin-top: 3px
}
.spare-parts-inventory-management .spGlyph {
width: 44px;
height: 44px;
display: grid;
place-items: center;
flex: 0 0 44px;
border-radius: 11px;
background: var(--sky);
color: var(--navy)
}
.spare-parts-inventory-management .spGlyph .icon2 {
width: 25px;
height: 25px
}
.spare-parts-inventory-management .spSearch {
margin: 14px 16px 0;
padding: 10px 12px;
display: flex;
gap: 8px;
align-items: center;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 10px;
color: var(--muted)
}
.spare-parts-inventory-management .spSearch .icon2 {
width: 15px;
height: 15px
}
.spare-parts-inventory-management .spNumbers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 16px
}
.spare-parts-inventory-management .spNumber {
background: #F6FBFE;
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px
}
.spare-parts-inventory-management .spNumber:last-child {
background: var(--greenbg);
border-color: #CBE6D9
}
.spare-parts-inventory-management .spNumber strong {
font-size: 27px;
line-height: 1.2;
letter-spacing: -.04em;
color: var(--navy);
display: block
}
.spare-parts-inventory-management .spNumber span {
font-size: 9px;
color: var(--muted);
line-height: 1.5;
display: block;
margin-top: 5px
}
.spare-parts-inventory-management .spTable {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 10px;
line-height: 1.5;
table-layout: fixed
}
.spare-parts-inventory-management .spTable th {
background: #F6FAFD;
font-size: 8px;
font-weight: 750;
color: #577184;
padding: 10px 12px
}
.spare-parts-inventory-management .spTable td {
border-top: 1px solid var(--line);
padding: 13px 12px;
color: var(--ink)
}
.spare-parts-inventory-management .spTable th:first-child {
width: 46%
}
.spare-parts-inventory-management .spTable td:not(:first-child),
.spare-parts-inventory-management .spTable th:not(:first-child) {
text-align: right
}
.spare-parts-inventory-management .spTable strong {
font-size: 11px;
display: block;
color: var(--navy)
}
.spare-parts-inventory-management .spTable small {
font-size: 8px;
display: block;
color: var(--muted);
margin-top: 3px
}
.spare-parts-inventory-management .spTable .emph {
color: #116746;
font-weight: 750
}
.spare-parts-inventory-management .spFoot {
display: flex;
align-items: flex-start;
gap: 7px;
padding: 12px 16px;
background: #F6FBFE;
border-top: 1px solid var(--line);
font-size: 9px;
line-height: 1.6;
color: #567184
}
.spare-parts-inventory-management .spFoot .icon2 {
width: 15px;
height: 15px;
flex: 0 0 15px;
margin-top: 1px;
color: #118A61
}
.spare-parts-inventory-management .spNotice {
border: 1px solid #E8D599;
background: #FFF9E5;
color: #705B16;
border-radius: 10px;
padding: 14px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px
}
.spare-parts-inventory-management .spNotice>.icon2 {
width: 23px;
height: 23px;
flex: none
}
.spare-parts-inventory-management .spNotice strong {
font-size: 12px;
line-height: 1.5;
display: block
}
.spare-parts-inventory-management .spNotice small {
font-size: 10px;
line-height: 1.5;
display: block;
margin-top: 3px
}
.spare-parts-inventory-management .spStockCompare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 16px
}
.spare-parts-inventory-management .spStockCompare>div {
background: #F6FBFE;
border: 1px solid var(--line);
border-radius: 9px;
padding: 13px
}
.spare-parts-inventory-management .spStockCompare>div:first-child {
background: #FFF9E5;
border-color: #E8D599
}
.spare-parts-inventory-management .spStockCompare strong {
font-size: 31px;
line-height: 1.15;
display: block;
letter-spacing: -.04em;
color: var(--navy)
}
.spare-parts-inventory-management .spStockCompare span {
font-size: 9px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 6px
}
.spare-parts-inventory-management .spRequest {
padding: 15px 16px;
border-top: 1px solid var(--line);
display: grid;
gap: 11px
}
.spare-parts-inventory-management .spRequest>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
font-size: 10px;
line-height: 1.5
}
.spare-parts-inventory-management .spRequest span {
color: var(--muted)
}
.spare-parts-inventory-management .spRequest b {
font-weight: 650;
color: var(--navy)
}
.spare-parts-inventory-management .spSteps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
margin-top: 13px
}
.spare-parts-inventory-management .spSteps>div {
border-radius: 8px;
background: #fff;
border: 1px solid var(--line);
padding: 10px 7px;
text-align: center;
font-size: 9px;
line-height: 1.5;
color: #547284
}
.spare-parts-inventory-management .spSteps b {
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0 auto 7px;
font-size: 10px;
background: #E7F6FE;
color: var(--navy)
}
.spare-parts-inventory-management .spSteps .current {
background: #FFF9E5;
border-color: #E8D599
}
.spare-parts-inventory-management .spSteps .current b {
background: var(--yellow)
}
.spare-parts-inventory-management .spWorkMeta {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 13px 16px;
border-bottom: 1px solid var(--line)
}
.spare-parts-inventory-management .spWorkMeta span {
font-size: 9px;
color: #557082;
border: 1px solid #DAE7EF;
padding: 5px 7px;
border-radius: 6px;
background: #F8FCFE
}
.spare-parts-inventory-management .spCostRows {
padding: 0 16px
}
.spare-parts-inventory-management .spCostRow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 17px 0;
border-bottom: 1px solid var(--line)
}
.spare-parts-inventory-management .spCostRow strong {
display: block;
font-size: 12px;
color: var(--navy)
}
.spare-parts-inventory-management .spCostRow small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 4px
}
.spare-parts-inventory-management .spCostRow>b {
font-size: 22px;
letter-spacing: -.03em;
color: var(--navy)
}
.spare-parts-inventory-management .spTotal {
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background: #EAF8F3;
color: #16694D
}
.spare-parts-inventory-management .spTotal b {
font-size: 11px;
display: block
}
.spare-parts-inventory-management .spTotal small {
display: block;
font-size: 9px;
line-height: 1.6;
color: #537E6C;
margin-top: 4px
}
.spare-parts-inventory-management .spTotal strong {
font-size: 30px;
letter-spacing: -.035em
}
.spare-parts-inventory-management .spUsed {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #C9E2D5;
border-radius: 9px;
background: #EFF9F3;
padding: 13px;
margin-top: 12px;
color: #216F52;
font-size: 10px;
line-height: 1.6
}
.spare-parts-inventory-management .spUsed .icon2 {
width: 21px;
height: 21px;
flex: none
}
.spare-parts-inventory-management .spTransfer {
padding: 17px
}
.spare-parts-inventory-management .spRoute {
display: grid;
grid-template-columns: 1fr 24px 1fr;
align-items: center;
gap: 10px
}
.spare-parts-inventory-management .spRoute>div {
border: 1px solid var(--line);
border-radius: 9px;
background: #F6FBFE;
padding: 12px
}
.spare-parts-inventory-management .spRoute small {
font-size: 8px;
color: var(--muted);
display: block;
line-height: 1.5
}
.spare-parts-inventory-management .spRoute strong {
font-size: 12px;
line-height: 1.5;
color: var(--navy);
display: block;
margin-top: 4px
}
.spare-parts-inventory-management .spRoute>.icon2 {
width: 20px;
height: 20px;
color: var(--brand2)
}
.spare-parts-inventory-management .spTransferLine {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
line-height: 1.6;
padding-top: 15px;
margin-top: 14px;
border-top: 1px solid var(--line)
}
.spare-parts-inventory-management .spTransferLine>b {
color: var(--navy)
}
.spare-parts-inventory-management .spTransferNote {
font-size: 9px;
line-height: 1.6;
color: #607487;
margin-top: 12px
}
.spare-parts-inventory-management .spCount {
margin-top: 13px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
padding: 16px
}
.spare-parts-inventory-management .spCountHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px
}
.spare-parts-inventory-management .spCountHead strong {
font-size: 12px;
color: var(--navy)
}
.spare-parts-inventory-management .spCountHead small {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
display: block;
margin-top: 4px
}
.spare-parts-inventory-management .spCountNumbers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 13px
}
.spare-parts-inventory-management .spCountNumbers>div {
background: #F6FBFE;
border-radius: 7px;
padding: 10px;
text-align: center
}
.spare-parts-inventory-management .spCountNumbers span {
font-size: 8px;
line-height: 1.5;
display: block;
color: var(--muted)
}
.spare-parts-inventory-management .spCountNumbers b {
font-size: 23px;
color: var(--navy);
display: block;
margin-top: 5px;
line-height: 1.3
}
.spare-parts-inventory-management .spCountNumbers>div:last-child {
background: #FFF5E3
}
.spare-parts-inventory-management .spCountNumbers>div:last-child b {
color: #835A0A
}
.spare-parts-inventory-management .spAiPanel {
border: 1px solid #3B4D5B;
border-radius: 17px;
overflow: hidden;
background: #fff;
color: var(--ink)
}
.spare-parts-inventory-management .spAiBar {
display: flex;
align-items: center;
gap: 10px;
padding: 17px;
background: #EAF8FF;
border-bottom: 1px solid #CFE5F0
}
.spare-parts-inventory-management .spAiBar>.icon2 {
color: #007FC5;
width: 26px;
height: 26px
}
.spare-parts-inventory-management .spAiBar strong {
font-size: 15px;
display: block;
color: var(--navy)
}
.spare-parts-inventory-management .spAiBar small {
font-size: 9px;
display: block;
line-height: 1.6;
margin-top: 3px;
color: var(--muted)
}
.spare-parts-inventory-management .spAiBody {
padding: 18px
}
.spare-parts-inventory-management .spQuestion {
background: #FFF5D3;
border: 1px solid #EADCAC;
padding: 13px;
border-radius: 11px 11px 3px 11px;
font-size: 12px;
line-height: 1.6;
color: #4C432C;
margin-left: 32px
}
.spare-parts-inventory-management .spReply {
margin-top: 18px;
font-size: 12px;
line-height: 1.8;
color: #426176
}
.spare-parts-inventory-management .spReply strong {
color: var(--navy);
font-size: 13px;
display: block;
margin-bottom: 7px
}
.spare-parts-inventory-management .spAiData {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 14px
}
.spare-parts-inventory-management .spAiData>div {
padding: 13px;
border-radius: 8px;
background: #F4F9FC;
border: 1px solid var(--line)
}
.spare-parts-inventory-management .spAiData small {
display: block;
font-size: 8px;
color: #607487;
line-height: 1.5
}
.spare-parts-inventory-management .spAiData b {
font-size: 22px;
color: var(--navy);
display: block;
margin-top: 5px
}
.spare-parts-inventory-management .spAiRecord {
display: flex;
align-items: center;
gap: 9px;
margin-top: 14px;
padding: 13px;
border: 1px solid var(--line);
border-radius: 9px;
font-size: 10px;
line-height: 1.6;
color: #607487
}
.spare-parts-inventory-management .spAiRecord .icon2 {
width: 20px;
height: 20px;
color: var(--navy);
flex: none
}
.spare-parts-inventory-management .spAiRecord strong {
display: block;
color: var(--navy);
font-size: 11px
}
.spare-parts-inventory-management .spAiFooter {
background: #EAF8F3;
color: #216B50;
font-size: 10px;
line-height: 1.7;
padding: 14px 18px;
border-top: 1px solid #CBE4D7;
display: flex;
gap: 9px;
align-items: flex-start
}
.spare-parts-inventory-management .spAiFooter>.icon2 {
width: 19px;
height: 19px;
flex: none;
margin-top: 1px
}
.spare-parts-inventory-management .workflowStep {
min-width: 0
}
.spare-parts-inventory-management .hero h1 {
max-width: 610px
}
.spare-parts-inventory-management .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.spare-parts-inventory-management .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px
}
.spare-parts-inventory-management .supportStrip .icon2 {
width: 19px;
height: 19px;
color: var(--navy);
flex: none
}
.spare-parts-inventory-management .featureCopy>p {
max-width: 580px
}
.spare-parts-inventory-management .toolCard strong {
padding-right: 12px
}
.spare-parts-inventory-management .dark .aiVisual {
align-self: center
}
.spare-parts-inventory-management .visual {
overflow: visible
}
@media(max-width:980px) {
.spare-parts-inventory-management .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media(max-width:640px) {
.spare-parts-inventory-management .spTop {
padding: 14px;
gap: 9px
}
.spare-parts-inventory-management .spTop strong {
font-size: 13px
}
.spare-parts-inventory-management .spTop small {
font-size: 9px
}
.spare-parts-inventory-management .spGlyph {
height: 36px;
width: 36px;
flex-basis: 36px
}
.spare-parts-inventory-management .spGlyph .icon2 {
height: 21px;
width: 21px
}
.spare-parts-inventory-management .spTop>.pill {
font-size: 7px;
padding: 4px 6px
}
.spare-parts-inventory-management .spSearch {
margin: 12px 12px 0;
font-size: 9px;
padding: 9px
}
.spare-parts-inventory-management .spNumbers {
padding: 12px;
gap: 7px
}
.spare-parts-inventory-management .spNumber {
padding: 10px 8px
}
.spare-parts-inventory-management .spNumber strong {
font-size: 25px
}
.spare-parts-inventory-management .spNumber span {
font-size: 8px
}
.spare-parts-inventory-management .spTable th,
.spare-parts-inventory-management .spTable td {
padding: 11px 9px
}
.spare-parts-inventory-management .spTable th {
font-size: 7px
}
.spare-parts-inventory-management .spTable td {
font-size: 10px
}
.spare-parts-inventory-management .spTable strong {
font-size: 10px
}
.spare-parts-inventory-management .spTable small {
font-size: 8px
}
.spare-parts-inventory-management .spFoot {
font-size: 9px;
padding: 12px
}
.spare-parts-inventory-management .spNotice {
padding: 12px
}
.spare-parts-inventory-management .spNotice strong {
font-size: 11px
}
.spare-parts-inventory-management .spNotice small {
font-size: 9px
}
.spare-parts-inventory-management .spStockCompare {
padding: 12px;
gap: 8px
}
.spare-parts-inventory-management .spStockCompare>div {
padding: 12px
}
.spare-parts-inventory-management .spRequest {
padding: 13px
}
.spare-parts-inventory-management .spRequest>div {
font-size: 9px
}
.spare-parts-inventory-management .spSteps {
gap: 5px
}
.spare-parts-inventory-management .spSteps>div {
font-size: 8px;
padding: 10px 5px
}
.spare-parts-inventory-management .spWorkMeta {
padding: 12px;
gap: 5px
}
.spare-parts-inventory-management .spWorkMeta span {
font-size: 8px
}
.spare-parts-inventory-management .spCostRows {
padding: 0 13px
}
.spare-parts-inventory-management .spCostRow {
padding: 14px 0
}
.spare-parts-inventory-management .spCostRow strong {
font-size: 11px
}
.spare-parts-inventory-management .spCostRow small {
font-size: 9px
}
.spare-parts-inventory-management .spCostRow>b {
font-size: 21px
}
.spare-parts-inventory-management .spTotal {
padding: 14px
}
.spare-parts-inventory-management .spTotal strong {
font-size: 28px
}
.spare-parts-inventory-management .spUsed {
padding: 12px;
font-size: 9px
}
.spare-parts-inventory-management .spTransfer {
padding: 13px
}
.spare-parts-inventory-management .spRoute {
grid-template-columns: 1fr 17px 1fr;
gap: 7px
}
.spare-parts-inventory-management .spRoute>div {
padding: 11px 8px
}
.spare-parts-inventory-management .spRoute strong {
font-size: 11px
}
.spare-parts-inventory-management .spRoute>.icon2 {
width: 17px;
height: 17px
}
.spare-parts-inventory-management .spTransferLine {
font-size: 9px;
gap: 7px
}
.spare-parts-inventory-management .spTransferNote {
font-size: 9px
}
.spare-parts-inventory-management .spCount {
padding: 13px
}
.spare-parts-inventory-management .spCountHead strong {
font-size: 11px
}
.spare-parts-inventory-management .spCountHead small {
font-size: 8px
}
.spare-parts-inventory-management .spCountHead .pill {
font-size: 8px
}
.spare-parts-inventory-management .spCountNumbers {
gap: 7px
}
.spare-parts-inventory-management .spCountNumbers>div {
padding: 10px 6px
}
.spare-parts-inventory-management .spCountNumbers b {
font-size: 22px
}
.spare-parts-inventory-management .spAiBody {
padding: 15px
}
.spare-parts-inventory-management .spQuestion {
font-size: 11px;
margin-left: 18px
}
.spare-parts-inventory-management .spReply {
font-size: 11px
}
.spare-parts-inventory-management .spReply strong {
font-size: 12px
}
.spare-parts-inventory-management .spAiBar {
padding: 14px
}
.spare-parts-inventory-management .spAiData>div {
padding: 11px
}
.spare-parts-inventory-management .spAiFooter {
font-size: 9px;
padding: 13px
}
.spare-parts-inventory-management .supportStrip {
gap: 7px
}
.spare-parts-inventory-management .supportStrip>span {
font-size: 10px;
gap: 6px;
padding: 9px 6px
}
.spare-parts-inventory-management .supportStrip .icon2 {
width: 16px;
height: 16px
}
.spare-parts-inventory-management .spNumber span {
line-height: 1.6
}
}
@media(max-width:360px) {
.spare-parts-inventory-management .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.spare-parts-inventory-management .spTable th,
.spare-parts-inventory-management .spTable td {
padding: 10px 6px
}
.spare-parts-inventory-management .spTable th:first-child {
width: 43%
}
.spare-parts-inventory-management .spTable strong {
font-size: 9px
}
.spare-parts-inventory-management .spTable small {
font-size: 7px
}
.spare-parts-inventory-management .spTop>.pill {
display: none
}
.spare-parts-inventory-management .spCountHead {
align-items: flex-start
}
.spare-parts-inventory-management .spCountHead .pill {
font-size: 7px
}
.spare-parts-inventory-management .spQuestion {
margin-left: 0
}
.spare-parts-inventory-management .spRequest>div {
font-size: 9px
}
.spare-parts-inventory-management .spAiData {
gap: 7px
}
}  .CPMS-smart-analytics-and-reports svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
.CPMS-smart-analytics-and-reports .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.CPMS-smart-analytics-and-reports a:focus-visible,
.CPMS-smart-analytics-and-reports summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.CPMS-smart-analytics-and-reports .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.CPMS-smart-analytics-and-reports .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.CPMS-smart-analytics-and-reports .btn .icon2 {
width: 17px;
height: 17px
}
.CPMS-smart-analytics-and-reports .btn.black {
background: #0B0B0B;
color: #fff
}
.CPMS-smart-analytics-and-reports .btn.black:hover {
background: #303030
}
.CPMS-smart-analytics-and-reports .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.CPMS-smart-analytics-and-reports .btn.yellow:hover {
background: #FFD454
}
.CPMS-smart-analytics-and-reports .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.CPMS-smart-analytics-and-reports .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.CPMS-smart-analytics-and-reports .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.CPMS-smart-analytics-and-reports .textLink .icon2 {
width: 17px;
height: 17px
}
.CPMS-smart-analytics-and-reports .textLink:hover {
color: var(--brand2)
}
.CPMS-smart-analytics-and-reports .soft {
background: var(--sky2)
}
.CPMS-smart-analytics-and-reports .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.CPMS-smart-analytics-and-reports .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.CPMS-smart-analytics-and-reports .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.CPMS-smart-analytics-and-reports .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.CPMS-smart-analytics-and-reports .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.CPMS-smart-analytics-and-reports .heroGrid>*,
.CPMS-smart-analytics-and-reports .feature>*,
.CPMS-smart-analytics-and-reports .aiGrid>* {
min-width: 0
}
.CPMS-smart-analytics-and-reports .heroCopy {
min-width: 0
}
.CPMS-smart-analytics-and-reports .hero h1 {
max-width: 630px
}
.CPMS-smart-analytics-and-reports .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.CPMS-smart-analytics-and-reports .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.CPMS-smart-analytics-and-reports .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.CPMS-smart-analytics-and-reports .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.CPMS-smart-analytics-and-reports .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.CPMS-smart-analytics-and-reports .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.CPMS-smart-analytics-and-reports .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.CPMS-smart-analytics-and-reports .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.CPMS-smart-analytics-and-reports .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.CPMS-smart-analytics-and-reports .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.CPMS-smart-analytics-and-reports .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.CPMS-smart-analytics-and-reports .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.CPMS-smart-analytics-and-reports .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.CPMS-smart-analytics-and-reports .outcome:nth-child(2):before {
background: var(--yellow)
}
.CPMS-smart-analytics-and-reports .outcome:nth-child(3):before {
background: var(--green)
}
.CPMS-smart-analytics-and-reports .outcome:nth-child(4):before {
background: var(--purple)
}
.CPMS-smart-analytics-and-reports .outcome>.icon2 {
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.CPMS-smart-analytics-and-reports .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.CPMS-smart-analytics-and-reports .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.CPMS-smart-analytics-and-reports .feature.reverse .visual {
order: -1
}
.CPMS-smart-analytics-and-reports .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.CPMS-smart-analytics-and-reports .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.CPMS-smart-analytics-and-reports .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.CPMS-smart-analytics-and-reports .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.CPMS-smart-analytics-and-reports .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.CPMS-smart-analytics-and-reports .tick .icon2 {
height: 13px;
width: 13px
}
.CPMS-smart-analytics-and-reports .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.CPMS-smart-analytics-and-reports .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.CPMS-smart-analytics-and-reports .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.CPMS-smart-analytics-and-reports .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.CPMS-smart-analytics-and-reports .uiHeading .icon2 {
height: 19px;
width: 19px
}
.CPMS-smart-analytics-and-reports .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.CPMS-smart-analytics-and-reports .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.CPMS-smart-analytics-and-reports .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.CPMS-smart-analytics-and-reports .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.CPMS-smart-analytics-and-reports .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.CPMS-smart-analytics-and-reports .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.CPMS-smart-analytics-and-reports .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.CPMS-smart-analytics-and-reports .dark h2,
.CPMS-smart-analytics-and-reports .dark h3 {
color: white
}
.CPMS-smart-analytics-and-reports .dark .ey {
background: var(--yellow);
color: #111
}
.CPMS-smart-analytics-and-reports .dark .textLink {
color: #fff
}
.CPMS-smart-analytics-and-reports .dark a:focus-visible {
outline-color: var(--yellow)
}
.CPMS-smart-analytics-and-reports .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.CPMS-smart-analytics-and-reports .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.CPMS-smart-analytics-and-reports .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.CPMS-smart-analytics-and-reports .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.CPMS-smart-analytics-and-reports .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.CPMS-smart-analytics-and-reports .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.CPMS-smart-analytics-and-reports .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.CPMS-smart-analytics-and-reports .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.CPMS-smart-analytics-and-reports .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.CPMS-smart-analytics-and-reports .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.CPMS-smart-analytics-and-reports .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.CPMS-smart-analytics-and-reports .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.CPMS-smart-analytics-and-reports .connectedCard h3 {
margin: 18px 0 11px
}
.CPMS-smart-analytics-and-reports .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.CPMS-smart-analytics-and-reports .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.CPMS-smart-analytics-and-reports .handoffBand>div {
display: flex;
align-items: center;
gap: 14px;
flex-direction: row;
}
.CPMS-smart-analytics-and-reports .handoffBand>div>.icon2 {
color: var(--navy);
width: 29px;
height: 29px
}
.CPMS-smart-analytics-and-reports .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.CPMS-smart-analytics-and-reports .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.CPMS-smart-analytics-and-reports .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.CPMS-smart-analytics-and-reports .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.CPMS-smart-analytics-and-reports .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.CPMS-smart-analytics-and-reports .featureCard>.icon2 {
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.CPMS-smart-analytics-and-reports .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.CPMS-smart-analytics-and-reports .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.CPMS-smart-analytics-and-reports .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.CPMS-smart-analytics-and-reports .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.CPMS-smart-analytics-and-reports .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.CPMS-smart-analytics-and-reports .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.CPMS-smart-analytics-and-reports .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.CPMS-smart-analytics-and-reports .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.CPMS-smart-analytics-and-reports .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.CPMS-smart-analytics-and-reports .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.CPMS-smart-analytics-and-reports .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.CPMS-smart-analytics-and-reports .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.CPMS-smart-analytics-and-reports .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.CPMS-smart-analytics-and-reports .useCase>.icon2 {
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.CPMS-smart-analytics-and-reports .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.CPMS-smart-analytics-and-reports .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.CPMS-smart-analytics-and-reports .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.CPMS-smart-analytics-and-reports .roleCard:last-child {
border: 0;
padding-right: 0
}
.CPMS-smart-analytics-and-reports .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.CPMS-smart-analytics-and-reports .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.CPMS-smart-analytics-and-reports .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.CPMS-smart-analytics-and-reports .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.CPMS-smart-analytics-and-reports .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.CPMS-smart-analytics-and-reports .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.CPMS-smart-analytics-and-reports .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.CPMS-smart-analytics-and-reports .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.CPMS-smart-analytics-and-reports .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.CPMS-smart-analytics-and-reports .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
.CPMS-smart-analytics-and-reports .faq {
max-width: 900px
}
.CPMS-smart-analytics-and-reports .faq .sectionHead {
max-width: 800px
}
.CPMS-smart-analytics-and-reports .faqList {
display: grid;
gap: 12px
}
.CPMS-smart-analytics-and-reports details {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 19px 21px
}
.CPMS-smart-analytics-and-reports summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
cursor: pointer;
list-style: none;
color: var(--ink);
font-size: 15px;
font-weight: 700;
line-height: 1.6
}
.CPMS-smart-analytics-and-reports summary::-webkit-details-marker {
display: none
}
.CPMS-smart-analytics-and-reports .faqPlus {
width: 18px;
height: 18px;
flex: 0 0 18px;
position: relative;
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .faqPlus:before,
.CPMS-smart-analytics-and-reports .faqPlus:after {
content: "";
position: absolute;
top: 8px;
left: 2px;
width: 14px;
height: 2px;
background: currentColor;
border-radius: 2px
}
.CPMS-smart-analytics-and-reports .faqPlus:after {
transform: rotate(90deg)
}
.CPMS-smart-analytics-and-reports details[open] .faqPlus:after {
transform: none
}
.CPMS-smart-analytics-and-reports .faqAnswer p {
color: var(--muted);
font-size: 14px;
line-height: 1.85;
margin-top: 15px;
padding-right: 32px
}
.CPMS-smart-analytics-and-reports details[open] {
border-color: #A7CFE3
}
.CPMS-smart-analytics-and-reports .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.CPMS-smart-analytics-and-reports .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.CPMS-smart-analytics-and-reports .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.CPMS-smart-analytics-and-reports .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.CPMS-smart-analytics-and-reports .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.CPMS-smart-analytics-and-reports .ctaBtns .btn {
min-width: 219px
}
.CPMS-smart-analytics-and-reports .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.CPMS-smart-analytics-and-reports .btn.darkOutline:hover {
background: #252D33
}
.CPMS-smart-analytics-and-reports .final a:focus-visible {
outline-color: var(--yellow)
}
.CPMS-smart-analytics-and-reports .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.CPMS-smart-analytics-and-reports .heroGrid {
gap: 28px
}
.CPMS-smart-analytics-and-reports h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.CPMS-smart-analytics-and-reports .hero .lead {
font-size: 16px
}
.CPMS-smart-analytics-and-reports .feature,
.CPMS-smart-analytics-and-reports .aiGrid {
gap: 30px
}
.CPMS-smart-analytics-and-reports .visual {
padding: 17px
}
.CPMS-smart-analytics-and-reports .toolCard {
padding: 21px 15px
}
.CPMS-smart-analytics-and-reports .toolCard strong {
font-size: 14px
}
.CPMS-smart-analytics-and-reports .handoffBand {
padding: 20px
}
.CPMS-smart-analytics-and-reports .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.CPMS-smart-analytics-and-reports section {
padding: 64px 0
}
.CPMS-smart-analytics-and-reports .hero {
padding: 34px 0 42px
}
.CPMS-smart-analytics-and-reports .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.CPMS-smart-analytics-and-reports .heroCopy {
max-width: 790px
}
.CPMS-smart-analytics-and-reports .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.CPMS-smart-analytics-and-reports .hero .lead {
max-width: 760px
}
.CPMS-smart-analytics-and-reports .heroVisual {
max-width: 460px;
justify-self: center
}
.CPMS-smart-analytics-and-reports .feature,
.CPMS-smart-analytics-and-reports .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.CPMS-smart-analytics-and-reports .feature.reverse .visual {
order: 0
}
.CPMS-smart-analytics-and-reports .featureCopy {
max-width: 790px
}
.CPMS-smart-analytics-and-reports .visual {
max-width: 640px;
margin: 0 auto
}
.CPMS-smart-analytics-and-reports .outcomes,
.CPMS-smart-analytics-and-reports .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.CPMS-smart-analytics-and-reports .connectedGrid {
gap: 13px
}
.CPMS-smart-analytics-and-reports .connectedCard {
padding: 22px
}
.CPMS-smart-analytics-and-reports .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.CPMS-smart-analytics-and-reports .aiVisual {
max-width: 600px;
margin: auto
}
.CPMS-smart-analytics-and-reports .aiMini {
max-width: 780px
}
.CPMS-smart-analytics-and-reports .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.CPMS-smart-analytics-and-reports .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.CPMS-smart-analytics-and-reports .toolCard {
min-height: 145px
}
.CPMS-smart-analytics-and-reports .roleGrid {
gap: 20px
}
.CPMS-smart-analytics-and-reports .roleCard {
padding-right: 18px
}
.CPMS-smart-analytics-and-reports .roleCard h3 {
font-size: 20px
}
.CPMS-smart-analytics-and-reports .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.CPMS-smart-analytics-and-reports .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.CPMS-smart-analytics-and-reports .workflowLead br {
display: none
}
.CPMS-smart-analytics-and-reports .final {
grid-template-columns: 1fr;
gap: 27px
}
.CPMS-smart-analytics-and-reports .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.CPMS-smart-analytics-and-reports .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
.CPMS-smart-analytics-and-reports .wrap {
width: calc(100% - 32px)
}
.CPMS-smart-analytics-and-reports section {
padding: 49px 0
}
.CPMS-smart-analytics-and-reports h2 {
font-size: 33px;
line-height: 1.15
}
.CPMS-smart-analytics-and-reports .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.CPMS-smart-analytics-and-reports .sectionHead {
margin-bottom: 27px
}
.CPMS-smart-analytics-and-reports .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.CPMS-smart-analytics-and-reports .hero {
padding: 25px 0 34px
}
.CPMS-smart-analytics-and-reports .heroGrid {
gap: 21px
}
.CPMS-smart-analytics-and-reports .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.CPMS-smart-analytics-and-reports .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.CPMS-smart-analytics-and-reports .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.CPMS-smart-analytics-and-reports .hero .actions {
gap: 8px;
margin-top: 23px
}
.CPMS-smart-analytics-and-reports .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.CPMS-smart-analytics-and-reports .hero .micro {
font-size: 11px
}
.CPMS-smart-analytics-and-reports .heroPills {
gap: 6px;
margin-top: 16px
}
.CPMS-smart-analytics-and-reports .heroPills span {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .heroVisual {
max-width: 420px
}
.CPMS-smart-analytics-and-reports .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.CPMS-smart-analytics-and-reports .trust {
padding: 22px 0
}
.CPMS-smart-analytics-and-reports .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.CPMS-smart-analytics-and-reports .outcomes {
gap: 12px
}
.CPMS-smart-analytics-and-reports .outcome {
padding: 19px
}
.CPMS-smart-analytics-and-reports .outcome h3 {
font-size: 17px
}
.CPMS-smart-analytics-and-reports .outcome p {
font-size: 13px
}
.CPMS-smart-analytics-and-reports .feature {
gap: 27px
}
.CPMS-smart-analytics-and-reports .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.CPMS-smart-analytics-and-reports .fl {
gap: 11px 13px;
margin-top: 21px
}
.CPMS-smart-analytics-and-reports .fi {
font-size: 12px
}
.CPMS-smart-analytics-and-reports .textLink {
font-size: 13px
}
.CPMS-smart-analytics-and-reports .visual {
padding: 15px;
border-radius: 16px
}
.CPMS-smart-analytics-and-reports .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.CPMS-smart-analytics-and-reports .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.CPMS-smart-analytics-and-reports .uiHeading .icon2 {
width: 18px;
height: 18px
}
.CPMS-smart-analytics-and-reports .uiFoot {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.CPMS-smart-analytics-and-reports .aiLead {
font-size: 15px;
line-height: 1.8
}
.CPMS-smart-analytics-and-reports .aiMini {
gap: 11px;
margin-top: 23px
}
.CPMS-smart-analytics-and-reports .aiMini article {
padding: 16px
}
.CPMS-smart-analytics-and-reports .aiMini h3 {
font-size: 15px
}
.CPMS-smart-analytics-and-reports .aiMini p {
font-size: 12px
}
.CPMS-smart-analytics-and-reports .aiNote {
font-size: 10px
}
.CPMS-smart-analytics-and-reports .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.CPMS-smart-analytics-and-reports .connectedCard {
padding: 23px
}
.CPMS-smart-analytics-and-reports .connectedCard h3 {
margin: 15px 0 9px
}
.CPMS-smart-analytics-and-reports .connectedCard p {
font-size: 14px
}
.CPMS-smart-analytics-and-reports .handoffBand {
padding: 20px
}
.CPMS-smart-analytics-and-reports .handoffBand>div {
align-items: flex-start;
gap: 10px
}
.CPMS-smart-analytics-and-reports .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.CPMS-smart-analytics-and-reports .handoffBand small {
font-size: 11px
}
.CPMS-smart-analytics-and-reports .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.CPMS-smart-analytics-and-reports .featureGrid {
gap: 13px
}
.CPMS-smart-analytics-and-reports .featureCard {
padding: 21px
}
.CPMS-smart-analytics-and-reports .featureCard h3 {
font-size: 17px
}
.CPMS-smart-analytics-and-reports .featureCard p {
font-size: 13px
}
.CPMS-smart-analytics-and-reports .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.CPMS-smart-analytics-and-reports .toolCard {
padding: 19px 15px;
min-height: 155px
}
.CPMS-smart-analytics-and-reports .toolCard strong {
font-size: 15px
}
.CPMS-smart-analytics-and-reports .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.CPMS-smart-analytics-and-reports .toolCard:last-child .toolArrow {
top: 31px
}
.CPMS-smart-analytics-and-reports .toolCard:last-child strong {
padding-right: 25px
}
.CPMS-smart-analytics-and-reports .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.CPMS-smart-analytics-and-reports .useCases {
gap: 13px
}
.CPMS-smart-analytics-and-reports .useCase {
padding: 21px 18px
}
.CPMS-smart-analytics-and-reports .useCase h3 {
font-size: 17px
}
.CPMS-smart-analytics-and-reports .useCase p {
font-size: 13px
}
.CPMS-smart-analytics-and-reports .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.CPMS-smart-analytics-and-reports .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.CPMS-smart-analytics-and-reports .roleCard:last-child {
padding-bottom: 0
}
.CPMS-smart-analytics-and-reports .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.CPMS-smart-analytics-and-reports .roleCard>strong {
font-size: 14px
}
.CPMS-smart-analytics-and-reports .roleCard p {
font-size: 14px
}
.CPMS-smart-analytics-and-reports .workflowBand {
padding: 28px 0
}
.CPMS-smart-analytics-and-reports .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.CPMS-smart-analytics-and-reports .workflowLead {
font-size: 18px
}
.CPMS-smart-analytics-and-reports .workflowStep strong {
font-size: 14px
}
.CPMS-smart-analytics-and-reports .workflowStep p {
font-size: 10px
}
.CPMS-smart-analytics-and-reports .faq .sectionHead {
margin-bottom: 25px
}
.CPMS-smart-analytics-and-reports details {
padding: 16px
}
.CPMS-smart-analytics-and-reports .faqList {
gap: 10px
}
.CPMS-smart-analytics-and-reports summary {
font-size: 14px;
gap: 14px
}
.CPMS-smart-analytics-and-reports .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
.CPMS-smart-analytics-and-reports .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.CPMS-smart-analytics-and-reports .final h2 {
font-size: 32px
}
.CPMS-smart-analytics-and-reports .final p {
font-size: 14px;
line-height: 1.8
}
.CPMS-smart-analytics-and-reports .final .ey {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.CPMS-smart-analytics-and-reports .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.CPMS-smart-analytics-and-reports .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
.CPMS-smart-analytics-and-reports .outcomes,
.CPMS-smart-analytics-and-reports .featureGrid,
.CPMS-smart-analytics-and-reports .useCases {
grid-template-columns: 1fr
}
.CPMS-smart-analytics-and-reports .outcome {
padding: 23px
}
.CPMS-smart-analytics-and-reports .outcome h3 {
font-size: 18px
}
.CPMS-smart-analytics-and-reports .outcome p {
font-size: 14px
}
.CPMS-smart-analytics-and-reports .fl {
grid-template-columns: 1fr;
gap: 10px
}
.CPMS-smart-analytics-and-reports .fi {
font-size: 13px
}
.CPMS-smart-analytics-and-reports .aiMini {
grid-template-columns: 1fr
}
.CPMS-smart-analytics-and-reports .aiMini h3 {
font-size: 17px
}
.CPMS-smart-analytics-and-reports .aiMini p {
font-size: 13px
}
.CPMS-smart-analytics-and-reports .aiMini article {
padding: 19px
}
.CPMS-smart-analytics-and-reports .featureCard h3,
.CPMS-smart-analytics-and-reports .useCase h3 {
font-size: 19px
}
.CPMS-smart-analytics-and-reports .featureCard p,
.CPMS-smart-analytics-and-reports .useCase p {
font-size: 14px
}
.CPMS-smart-analytics-and-reports .toolsGrid {
grid-template-columns: 1fr
}
.CPMS-smart-analytics-and-reports .toolCard,
.CPMS-smart-analytics-and-reports .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.CPMS-smart-analytics-and-reports .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.CPMS-smart-analytics-and-reports .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.CPMS-smart-analytics-and-reports .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.CPMS-smart-analytics-and-reports .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.CPMS-smart-analytics-and-reports .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.CPMS-smart-analytics-and-reports .toolArrow,
.CPMS-smart-analytics-and-reports .toolCard:last-child .toolArrow {
top: 30px
}
.CPMS-smart-analytics-and-reports .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.CPMS-smart-analytics-and-reports .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.CPMS-smart-analytics-and-reports h2 {
font-size: 30px
}
.CPMS-smart-analytics-and-reports .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.CPMS-smart-analytics-and-reports .hero h1 {
font-size: 31px
}
.CPMS-smart-analytics-and-reports .heroPills span {
font-size: 8px
}
.CPMS-smart-analytics-and-reports .heroPills {
gap: 5px
}
.CPMS-smart-analytics-and-reports .uiHeading {
font-size: 11px
}
.CPMS-smart-analytics-and-reports .uiHeading>.pill {
font-size: 7px
}
.CPMS-smart-analytics-and-reports .visual {
padding: 12px
}
.CPMS-smart-analytics-and-reports .final {
padding: 26px 20px
}
.CPMS-smart-analytics-and-reports .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.CPMS-smart-analytics-and-reports * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.CPMS-smart-analytics-and-reports section {
padding: 24px 0
}
.CPMS-smart-analytics-and-reports .hero,
.CPMS-smart-analytics-and-reports .soft {
background: #fff
}
.CPMS-smart-analytics-and-reports .dark,
.CPMS-smart-analytics-and-reports .workflowBand,
.CPMS-smart-analytics-and-reports .final {
background: #fff;
color: #11283A
}
.CPMS-smart-analytics-and-reports .dark h2,
.CPMS-smart-analytics-and-reports .dark h3,
.CPMS-smart-analytics-and-reports .final h2 {
color: #11283A
}
.CPMS-smart-analytics-and-reports .dark p,
.CPMS-smart-analytics-and-reports .final p {
color: #52697C
}
.CPMS-smart-analytics-and-reports .btn {
display: none
}
.CPMS-smart-analytics-and-reports .visual,
.CPMS-smart-analytics-and-reports .outcome,
.CPMS-smart-analytics-and-reports .featureCard,
.CPMS-smart-analytics-and-reports details {
break-inside: avoid
}
.CPMS-smart-analytics-and-reports .heroImage {
max-width: 380px
}
.CPMS-smart-analytics-and-reports .heroVisual {
justify-self: center
}
}
.CPMS-smart-analytics-and-reports .constructionAnalyticsSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.CPMS-smart-analytics-and-reports .constructionAnalyticsSkip:focus {
top: 12px
}
.CPMS-smart-analytics-and-reports .dark .textLink {
color: #FFF1BD
}
.CPMS-smart-analytics-and-reports .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
.CPMS-smart-analytics-and-reports .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.CPMS-smart-analytics-and-reports .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
.CPMS-smart-analytics-and-reports .supportStrip .icon2 {
width: 19px;
height: 19px;
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .workflowStep {
min-width: 0
}
.CPMS-smart-analytics-and-reports .featureCopy>p {
max-width: 580px
}
.CPMS-smart-analytics-and-reports .toolCard strong {
padding-right: 12px
}
.CPMS-smart-analytics-and-reports .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
.CPMS-smart-analytics-and-reports .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.CPMS-smart-analytics-and-reports .supportStrip {
gap: 7px
}
.CPMS-smart-analytics-and-reports .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
.CPMS-smart-analytics-and-reports .supportStrip .icon2 {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
.CPMS-smart-analytics-and-reports .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} .CPMS-smart-analytics-and-reports .anSrOnly {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important
}
.CPMS-smart-analytics-and-reports .anFilters {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 12px 14px;
background: #F7FBFD;
border-bottom: 1px solid var(--line);
font-size: 10px;
color: #43687E
}
.CPMS-smart-analytics-and-reports .anFilters>span {
display: flex;
gap: 6px;
align-items: center
}
.CPMS-smart-analytics-and-reports .anFilters .icon2 {
height: 14px;
width: 14px
}
.CPMS-smart-analytics-and-reports .anMetricGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 15px 15px 0
}
.CPMS-smart-analytics-and-reports .anMetricGrid>div {
padding: 13px 10px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F4F9FD
}
.CPMS-smart-analytics-and-reports .anMetricGrid span {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.4
}
.CPMS-smart-analytics-and-reports .anMetricGrid strong {
display: block;
font-size: 28px;
line-height: 1.3;
letter-spacing: -.04em;
color: var(--navy);
margin-top: 4px
}
.CPMS-smart-analytics-and-reports .anMetricGrid .anGood {
background: #F0FAF5;
border-color: #CDE5D9
}
.CPMS-smart-analytics-and-reports .anStatus {
padding: 18px 15px 12px
}
.CPMS-smart-analytics-and-reports .anStatusTitle {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: #365E77;
line-height: 1.5
}
.CPMS-smart-analytics-and-reports .anStatusTitle>span:not(.pill) {
font-size: 9px;
color: var(--muted)
}
.CPMS-smart-analytics-and-reports .anStack {
display: flex;
height: 11px;
background: #F3F7FA;
border-radius: 5px;
overflow: hidden;
margin-top: 12px;
gap: 2px
}
.CPMS-smart-analytics-and-reports .anStack i {
display: block;
background: #28A277
}
.CPMS-smart-analytics-and-reports .anStack i:nth-child(2) {
background: #239ACD
}
.CPMS-smart-analytics-and-reports .anStack i:last-child {
background: #B7C8D2
}
.CPMS-smart-analytics-and-reports .anLegend {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 7px;
margin-top: 9px;
font-size: 8px;
color: #516F81
}
.CPMS-smart-analytics-and-reports .anLegend>span {
display: flex;
gap: 5px;
align-items: center
}
.CPMS-smart-analytics-and-reports .anLegend i {
height: 6px;
width: 6px;
display: block;
background: #239ACD;
border-radius: 2px
}
.CPMS-smart-analytics-and-reports .anLegend .greenDot {
background: #28A277
}
.CPMS-smart-analytics-and-reports .anLegend .grayDot {
background: #B7C8D2
}
.CPMS-smart-analytics-and-reports .anProjectRows {
padding: 0 15px 8px
}
.CPMS-smart-analytics-and-reports .anProjectRows>div {
display: grid;
grid-template-columns: 31px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 11px 0;
border-top: 1px solid #E6EFF3
}
.CPMS-smart-analytics-and-reports .anProjectGlyph {
height: 31px;
width: 31px;
display: grid;
place-items: center;
background: #EFF7FC;
border-radius: 8px;
color: #28779F
}
.CPMS-smart-analytics-and-reports .anProjectGlyph .icon2 {
width: 18px;
height: 18px
}
.CPMS-smart-analytics-and-reports .anProjectRows strong {
display: block;
color: #234B65;
font-size: 11px;
line-height: 1.5
}
.CPMS-smart-analytics-and-reports .anProjectRows small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 2px
}
.CPMS-smart-analytics-and-reports .anProjectRows .pill {
font-size: 8px
}
.CPMS-smart-analytics-and-reports .anPanelFoot {
display: flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
background: #F5FAFD;
border-top: 1px solid var(--line);
font-size: 9px;
color: #587487;
line-height: 1.6
}
.CPMS-smart-analytics-and-reports .anPanelFoot .icon2 {
width: 14px;
height: 14px;
color: #377D9D
}
.CPMS-smart-analytics-and-reports .anCallout {
display: flex;
align-items: center;
gap: 10px;
margin-top: 13px;
padding: 13px 14px;
background: #FFF9E5;
border: 1px solid #EDDFAB;
border-radius: 11px;
color: #80611C
}
.CPMS-smart-analytics-and-reports .anCallout>.icon2 {
width: 22px;
height: 22px
}
.CPMS-smart-analytics-and-reports .anCallout strong {
font-size: 11px;
line-height: 1.5;
display: block
}
.CPMS-smart-analytics-and-reports .anCallout span {
font-size: 9px;
line-height: 1.6;
display: block;
margin-top: 3px
}
.CPMS-smart-analytics-and-reports .anCallout.anNeutral {
background: #F5FAFD;
border-color: #D4E5EE;
color: #41677F
}
.CPMS-smart-analytics-and-reports .anSheetTop {
padding: 18px
}
.CPMS-smart-analytics-and-reports .anSheetTop>strong {
font-size: 17px;
color: var(--navy);
line-height: 1.4;
display: block;
letter-spacing: -.025em;
margin-top: 6px
}
.CPMS-smart-analytics-and-reports .anSheetTop>p {
font-size: 10px;
color: var(--muted);
margin-top: 5px
}
.CPMS-smart-analytics-and-reports .anCostSummary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
margin: 0 18px 13px
}
.CPMS-smart-analytics-and-reports .anCostSummary>div {
border: 1px solid #D6E8F1;
border-radius: 9px;
padding: 13px;
background: #F0F8FD
}
.CPMS-smart-analytics-and-reports .anCostSummary>div:last-child {
background: #FFF9E6;
border-color: #EDDEAC
}
.CPMS-smart-analytics-and-reports .anCostSummary span {
font-size: 9px;
color: #61798A;
display: block
}
.CPMS-smart-analytics-and-reports .anCostSummary strong {
font-size: 27px;
font-weight: 750;
line-height: 1.35;
letter-spacing: -.04em;
color: var(--navy);
display: block;
margin-top: 5px
}
.CPMS-smart-analytics-and-reports .anTableWrap {
padding: 0 18px
}
.CPMS-smart-analytics-and-reports .anTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
border: 0;
margin: 0;
color: #3C6077;
font-size: 11px;
background: transparent
}
.CPMS-smart-analytics-and-reports .anTable th,
.CPMS-smart-analytics-and-reports .anTable td {
border: 0;
border-bottom: 1px solid #E3ECF2;
padding: 11px 3px;
text-align: right;
font-weight: 500;
line-height: 1.5;
overflow-wrap: break-word;
background: transparent
}
.CPMS-smart-analytics-and-reports .anTable th:first-child {
width: 42%;
text-align: left
}
.CPMS-smart-analytics-and-reports .anTable thead th {
color: #6A8292;
font-size: 9px;
font-weight: 700
}
.CPMS-smart-analytics-and-reports .anTable tbody th {
font-weight: 600
}
.CPMS-smart-analytics-and-reports .anTable td {
font-variant-numeric: tabular-nums
}
.CPMS-smart-analytics-and-reports .anTable tfoot th,
.CPMS-smart-analytics-and-reports .anTable tfoot td {
font-weight: 800;
color: var(--navy);
border: 0
}
.CPMS-smart-analytics-and-reports .anRemaining {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: #F7FBFD;
border-top: 1px solid var(--line);
font-size: 10px;
color: #526F82
}
.CPMS-smart-analytics-and-reports .anRemaining strong {
font-size: 22px;
line-height: 1.3;
letter-spacing: -.03em;
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .anHoursTop {
padding: 19px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--line)
}
.CPMS-smart-analytics-and-reports .anHoursTop strong {
font-size: 38px;
line-height: 1.3;
letter-spacing: -.045em;
display: block;
color: var(--navy);
margin: 7px 0 3px
}
.CPMS-smart-analytics-and-reports .anHoursTop small {
font-size: 14px;
letter-spacing: 0;
font-weight: 500
}
.CPMS-smart-analytics-and-reports .anHoursTop p {
font-size: 9px;
color: var(--muted)
}
.CPMS-smart-analytics-and-reports .anBigTile {
display: grid;
place-items: center;
width: 53px;
height: 53px;
flex: none;
background: #FFF6D5;
border: 1px solid #EFDFAB;
border-radius: 13px;
color: #9C7A1A
}
.CPMS-smart-analytics-and-reports .anBigTile .icon2 {
width: 29px;
height: 29px
}
.CPMS-smart-analytics-and-reports .anHoursList {
padding: 9px 19px 20px
}
.CPMS-smart-analytics-and-reports .anHoursRow {
margin-top: 17px
}
.CPMS-smart-analytics-and-reports .anHoursRow>div:first-child {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 11px;
line-height: 1.5;
margin-bottom: 8px;
color: #325A72
}
.CPMS-smart-analytics-and-reports .anHoursRow strong {
font-weight: 650
}
.CPMS-smart-analytics-and-reports .anHoursRow span {
font-weight: 750;
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .anHoursTrack {
background: #EDF5F9;
height: 9px;
border-radius: 5px;
overflow: hidden
}
.CPMS-smart-analytics-and-reports .anHoursTrack i {
background: #1A91C8;
height: 100%;
border-radius: 5px;
display: block
}
.CPMS-smart-analytics-and-reports .anHoursRow:nth-child(2) i {
background: #28A277
}
.CPMS-smart-analytics-and-reports .anHoursRow:nth-child(3) i {
background: #8B75C2
}
.CPMS-smart-analytics-and-reports .anHoursFooter {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 7px;
padding: 11px 16px;
background: #F6FBFD;
border-top: 1px solid var(--line);
font-size: 8px;
color: #5B798D
}
.CPMS-smart-analytics-and-reports .anHoursFooter span {
display: flex;
gap: 6px;
align-items: center
}
.CPMS-smart-analytics-and-reports .anHoursFooter .icon2 {
width: 13px;
height: 13px
}
.CPMS-smart-analytics-and-reports .anWorkload {
margin-top: 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 14px
}
.CPMS-smart-analytics-and-reports .anContextGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 15px
}
.CPMS-smart-analytics-and-reports .anContextGrid>div {
padding: 10px 8px;
background: #F4F9FC;
border-radius: 7px
}
.CPMS-smart-analytics-and-reports .anContextGrid .icon2 {
height: 19px;
width: 19px;
color: #3D7C9D
}
.CPMS-smart-analytics-and-reports .anContextGrid strong {
display: block;
font-size: 10px;
line-height: 1.5;
color: #2F5870;
margin-top: 7px
}
.CPMS-smart-analytics-and-reports .anContextGrid span {
display: block;
font-size: 8px;
line-height: 1.6;
color: #6D8493;
margin-top: 3px
}
.CPMS-smart-analytics-and-reports .anReportLibrary {
display: grid;
grid-template-columns: 132px minmax(0, 1fr)
}
.CPMS-smart-analytics-and-reports .anReportMenu {
padding: 15px 8px;
background: #F5FAFD;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 6px
}
.CPMS-smart-analytics-and-reports .anReportMenu>.uiLabel {
padding: 0 7px 8px;
font-size: 8px
}
.CPMS-smart-analytics-and-reports .anReportMenu>span:not(.uiLabel) {
font-size: 9px;
line-height: 1.6;
color: #4F7084;
padding: 11px 7px;
display: flex;
gap: 7px;
align-items: flex-start;
border-radius: 7px
}
.CPMS-smart-analytics-and-reports .anReportMenu .icon2 {
height: 15px;
width: 15px;
margin-top: 1px
}
.CPMS-smart-analytics-and-reports .anReportMenu>span.selected {
background: #E2F3FD;
color: #075C89;
font-weight: 750
}
.CPMS-smart-analytics-and-reports .anReportDetail {
padding: 18px;
min-width: 0
}
.CPMS-smart-analytics-and-reports .anReportDetail>strong {
display: block;
font-size: 17px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em;
margin-top: 8px
}
.CPMS-smart-analytics-and-reports .anReportDetail>small {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
display: block;
margin-top: 7px
}
.CPMS-smart-analytics-and-reports .anExportRows {
margin-top: 17px
}
.CPMS-smart-analytics-and-reports .anExportRows>div {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
padding: 12px 0;
border-top: 1px solid #E4EDF3;
font-size: 10px;
color: #577185;
line-height: 1.5
}
.CPMS-smart-analytics-and-reports .anExportRows b {
font-size: 11px;
color: #295370;
white-space: nowrap
}
.CPMS-smart-analytics-and-reports .anExportRows .total {
font-size: 10px;
font-weight: 700;
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .anExportRows .total b {
font-size: 14px
}
.CPMS-smart-analytics-and-reports .anMockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px;
background: var(--yellow);
color: #263A42;
border-radius: 7px;
font-size: 10px;
font-weight: 800;
margin-top: 14px
}
.CPMS-smart-analytics-and-reports .anMockAction .icon2 {
width: 16px;
height: 16px
}
.CPMS-smart-analytics-and-reports .anDistribution {
display: flex;
align-items: center;
gap: 11px;
border: 1px solid var(--line);
border-radius: 11px;
padding: 15px;
background: #fff;
margin-top: 13px
}
.CPMS-smart-analytics-and-reports .anDistribution strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: #295570
}
.CPMS-smart-analytics-and-reports .anDistribution p {
font-size: 10px;
line-height: 1.7;
color: var(--muted);
margin-top: 4px
}
.CPMS-smart-analytics-and-reports .anDistribution .tileIcon {
width: 37px;
height: 37px;
flex-basis: 37px
}
.CPMS-smart-analytics-and-reports .anDistribution .icon2 {
height: 20px;
width: 20px
}
.CPMS-smart-analytics-and-reports .anAiPanel {
border: 1px solid #455C6C;
border-radius: 17px;
background: #fff;
overflow: hidden;
color: var(--ink)
}
.CPMS-smart-analytics-and-reports .anAiHeader {
padding: 17px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--line)
}
.CPMS-smart-analytics-and-reports .anAiLogo {
width: 39px;
height: 39px;
flex: none;
border-radius: 11px;
background: #FFF6D5;
color: #8B6D19;
display: grid;
place-items: center
}
.CPMS-smart-analytics-and-reports .anAiHeader>div {
flex: 1;
min-width: 0
}
.CPMS-smart-analytics-and-reports .anAiHeader strong {
font-size: 16px;
display: block;
line-height: 1.5;
color: var(--navy)
}
.CPMS-smart-analytics-and-reports .anAiHeader small {
font-size: 9px;
display: block;
color: #637C8C;
line-height: 1.6
}
.CPMS-smart-analytics-and-reports .anAiBody {
padding: 19px
}
.CPMS-smart-analytics-and-reports .anPrompt {
font-size: 12px;
line-height: 1.75;
padding: 14px;
border: 1px solid #CBE4F2;
background: #EBF7FE;
border-radius: 11px 11px 2px 11px;
color: #2C5B76;
margin-left: 17px
}
.CPMS-smart-analytics-and-reports .anAnswer {
margin-top: 17px;
border: 1px solid var(--line);
background: #F9FCFD;
border-radius: 11px;
padding: 17px
}
.CPMS-smart-analytics-and-reports .anAnswerLabel {
display: flex;
align-items: center;
gap: 7px;
font-size: 8px;
letter-spacing: .06em;
font-weight: 800;
color: #7A631D
}
.CPMS-smart-analytics-and-reports .anAnswerLabel .icon2 {
height: 16px;
width: 16px;
color: #997711
}
.CPMS-smart-analytics-and-reports .anAnswer>strong {
display: block;
font-size: 18px;
letter-spacing: -.025em;
line-height: 1.45;
color: #174C6C;
margin-top: 13px
}
.CPMS-smart-analytics-and-reports .anAnswer>p {
font-size: 12px;
line-height: 1.8;
color: #577184;
margin-top: 11px
}
.CPMS-smart-analytics-and-reports .anAiEvidence {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px
}
.CPMS-smart-analytics-and-reports .anAiEvidence>span {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 7px;
font-size: 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
color: #53758B
}
.CPMS-smart-analytics-and-reports .anAiEvidence .icon2 {
height: 12px;
width: 12px
}
.CPMS-smart-analytics-and-reports .anReviewSteps {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-top: 19px;
font-size: 9px;
color: #4B7087
}
.CPMS-smart-analytics-and-reports .anReviewSteps>span {
display: flex;
align-items: center;
gap: 5px
}
.CPMS-smart-analytics-and-reports .anReviewSteps .icon2 {
height: 14px;
width: 14px;
color: #247457
}
.CPMS-smart-analytics-and-reports .anAiFoot {
display: flex;
align-items: center;
gap: 8px;
background: #EAF8F2;
border-top: 1px solid #CDE5D9;
padding: 14px 16px;
font-size: 10px;
line-height: 1.6;
color: #246B51
}
.CPMS-smart-analytics-and-reports .anAiFoot .icon2 {
height: 18px;
width: 18px
}
@media(max-width:1150px) and (min-width:981px) {
.CPMS-smart-analytics-and-reports .anReportLibrary {
grid-template-columns: 112px minmax(0, 1fr)
}
.CPMS-smart-analytics-and-reports .anReportDetail {
padding: 14px
}
.CPMS-smart-analytics-and-reports .anCostSummary {
margin-left: 14px;
margin-right: 14px
}
.CPMS-smart-analytics-and-reports .anCostSummary strong {
font-size: 24px
}
.CPMS-smart-analytics-and-reports .anCostSummary>div {
padding: 11px
}
.CPMS-smart-analytics-and-reports .anExportRows>div {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anReportMenu {
padding: 12px 6px
}
.CPMS-smart-analytics-and-reports .anReportMenu>span:not(.uiLabel) {
gap: 5px;
font-size: 8px
}
}
@media(max-width:640px) {
.CPMS-smart-analytics-and-reports .anMetricGrid {
gap: 7px;
padding: 12px 12px 0
}
.CPMS-smart-analytics-and-reports .anMetricGrid>div {
padding: 11px 8px
}
.CPMS-smart-analytics-and-reports .anMetricGrid span {
font-size: 8px
}
.CPMS-smart-analytics-and-reports .anMetricGrid strong {
font-size: 25px
}
.CPMS-smart-analytics-and-reports .anStatus {
padding: 15px 12px 11px
}
.CPMS-smart-analytics-and-reports .anProjectRows {
padding: 0 12px 7px
}
.CPMS-smart-analytics-and-reports .anProjectRows strong {
font-size: 10px
}
.CPMS-smart-analytics-and-reports .anCallout {
padding: 12px;
gap: 8px
}
.CPMS-smart-analytics-and-reports .anSheetTop {
padding: 15px
}
.CPMS-smart-analytics-and-reports .anSheetTop>strong {
font-size: 16px
}
.CPMS-smart-analytics-and-reports .anCostSummary {
margin: 0 14px 10px;
gap: 8px
}
.CPMS-smart-analytics-and-reports .anCostSummary>div {
padding: 10px
}
.CPMS-smart-analytics-and-reports .anCostSummary strong {
font-size: 24px
}
.CPMS-smart-analytics-and-reports .anTableWrap {
padding: 0 14px
}
.CPMS-smart-analytics-and-reports .anTable {
font-size: 10px
}
.CPMS-smart-analytics-and-reports .anTable th,
.CPMS-smart-analytics-and-reports .anTable td {
padding: 11px 2px
}
.CPMS-smart-analytics-and-reports .anRemaining {
padding: 13px 14px;
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anRemaining strong {
font-size: 20px
}
.CPMS-smart-analytics-and-reports .anPanelFoot {
font-size: 8px;
padding: 10px 12px
}
.CPMS-smart-analytics-and-reports .anHoursTop {
padding: 16px
}
.CPMS-smart-analytics-and-reports .anHoursTop strong {
font-size: 34px
}
.CPMS-smart-analytics-and-reports .anHoursList {
padding: 7px 16px 17px
}
.CPMS-smart-analytics-and-reports .anHoursRow>div:first-child {
font-size: 10px
}
.CPMS-smart-analytics-and-reports .anWorkload {
padding: 12px
}
.CPMS-smart-analytics-and-reports .anContextGrid {
gap: 7px
}
.CPMS-smart-analytics-and-reports .anContextGrid>div {
padding: 9px 7px
}
.CPMS-smart-analytics-and-reports .anContextGrid strong {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anReportLibrary {
grid-template-columns: 113px minmax(0, 1fr)
}
.CPMS-smart-analytics-and-reports .anReportMenu {
padding: 13px 6px
}
.CPMS-smart-analytics-and-reports .anReportMenu>span:not(.uiLabel) {
font-size: 8px;
gap: 5px;
padding: 10px 6px
}
.CPMS-smart-analytics-and-reports .anReportMenu .icon2 {
height: 13px;
width: 13px
}
.CPMS-smart-analytics-and-reports .anReportDetail {
padding: 14px
}
.CPMS-smart-analytics-and-reports .anReportDetail>strong {
font-size: 15px
}
.CPMS-smart-analytics-and-reports .anExportRows>div {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anExportRows b {
font-size: 10px
}
.CPMS-smart-analytics-and-reports .anDistribution {
padding: 12px;
gap: 9px
}
.CPMS-smart-analytics-and-reports .anDistribution p {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anAiHeader {
padding: 14px
}
.CPMS-smart-analytics-and-reports .anAiBody {
padding: 15px
}
.CPMS-smart-analytics-and-reports .anPrompt {
font-size: 11px;
padding: 12px;
margin-left: 9px
}
.CPMS-smart-analytics-and-reports .anAnswer {
padding: 14px
}
.CPMS-smart-analytics-and-reports .anAnswer>strong {
font-size: 17px
}
.CPMS-smart-analytics-and-reports .anAnswer>p {
font-size: 11px
}
.CPMS-smart-analytics-and-reports .anAiFoot {
padding: 12px;
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anReviewSteps {
font-size: 8px;
gap: 7px
}
}
@media(max-width:420px) {
.CPMS-smart-analytics-and-reports .anReportLibrary {
grid-template-columns: minmax(0, 1fr)
}
.CPMS-smart-analytics-and-reports .anReportMenu {
border-right: 0;
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 12px
}
.CPMS-smart-analytics-and-reports .anReportMenu>.uiLabel {
grid-column: 1/-1;
padding: 0 0 4px
}
.CPMS-smart-analytics-and-reports .anReportMenu>span:not(.uiLabel) {
padding: 8px 6px;
font-size: 8px;
gap: 5px;
flex-direction: column;
align-items: flex-start
}
.CPMS-smart-analytics-and-reports .anReportDetail {
padding: 17px
}
.CPMS-smart-analytics-and-reports .anReportDetail>strong {
font-size: 17px
}
.CPMS-smart-analytics-and-reports .anReportDetail>small {
font-size: 10px
}
.CPMS-smart-analytics-and-reports .anExportRows>div {
font-size: 11px
}
.CPMS-smart-analytics-and-reports .anExportRows b {
font-size: 12px
}
.CPMS-smart-analytics-and-reports .anMockAction {
font-size: 11px
}
.CPMS-smart-analytics-and-reports .anContextGrid {
grid-template-columns: 1fr
}
.CPMS-smart-analytics-and-reports .anContextGrid>div {
display: grid;
grid-template-columns: 20px 1fr;
gap: 2px 9px;
padding: 10px
}
.CPMS-smart-analytics-and-reports .anContextGrid .icon2 {
grid-row: 1/3;
margin-top: 3px
}
.CPMS-smart-analytics-and-reports .anContextGrid strong {
margin: 0;
font-size: 11px
}
.CPMS-smart-analytics-and-reports .anContextGrid span {
margin: 0;
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anHoursFooter {
font-size: 8px
}
.CPMS-smart-analytics-and-reports .anCostSummary strong {
font-size: 23px
}
.CPMS-smart-analytics-and-reports .anCostSummary span {
font-size: 8px
}
}
@media(max-width:360px) {
.CPMS-smart-analytics-and-reports .anCostSummary strong {
font-size: 21px
}
.CPMS-smart-analytics-and-reports .anCostSummary>div {
padding: 9px 7px
}
.CPMS-smart-analytics-and-reports .anMetricGrid span {
font-size: 7px
}
.CPMS-smart-analytics-and-reports .anMetricGrid strong {
font-size: 23px
}
.CPMS-smart-analytics-and-reports .anFilters {
font-size: 9px;
padding: 10px
}
.CPMS-smart-analytics-and-reports .anProjectRows>div {
gap: 7px;
grid-template-columns: 27px minmax(0, 1fr) auto
}
.CPMS-smart-analytics-and-reports .anProjectGlyph {
height: 27px;
width: 27px
}
.CPMS-smart-analytics-and-reports .anProjectRows strong {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anProjectRows .pill {
font-size: 7px;
padding: 4px 6px
}
.CPMS-smart-analytics-and-reports .anLegend {
font-size: 7px
}
.CPMS-smart-analytics-and-reports .anTable {
font-size: 9px
}
.CPMS-smart-analytics-and-reports .anTable thead th {
font-size: 8px
}
.CPMS-smart-analytics-and-reports .anHoursTop {
padding: 14px
}
.CPMS-smart-analytics-and-reports .anBigTile {
height: 43px;
width: 43px
}
.CPMS-smart-analytics-and-reports .anHoursTop .uiLabel {
font-size: 8px
}
.CPMS-smart-analytics-and-reports .anAnswer>strong {
font-size: 16px
}
} .in-app-chat-software-field-service .featureIcon .icon,
.in-app-chat-software-field-service .useIcon .icon,
.in-app-chat-software-field-service .connectedCard .icon {
margin: 0 !important;
background: transparent !important;
} #construction-energy-page {
--brand: #00A8F8;
--brand2: #007FC5;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--purple: #7254C7;
--max: 1320px;
width: 100%;
margin: 0;
padding: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
isolation: isolate;
}
#construction-energy-page * {
box-sizing: border-box
}
#construction-energy-page a {
text-decoration: none
}
#construction-energy-page figure,
#construction-energy-page p,
#construction-energy-page h1,
#construction-energy-page h2,
#construction-energy-page h3 {
margin: 0
}
#construction-energy-page section { scroll-margin-top: 24px
}
#construction-energy-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px
}
#construction-energy-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#construction-energy-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0;
background: transparent;
}
#construction-energy-page a:focus-visible,
#construction-energy-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#construction-energy-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#construction-energy-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
#construction-energy-page .btn .icon {
width: 17px;
height: 17px
}
#construction-energy-page .btn.black {
background: #0B0B0B;
color: #fff
}
#construction-energy-page .btn.black:hover {
background: #303030
}
#construction-energy-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#construction-energy-page .btn.yellow:hover {
background: #FFD454
}
#construction-energy-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#construction-energy-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#construction-energy-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#construction-energy-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#construction-energy-page .textLink .icon {
width: 17px;
height: 17px
}
#construction-energy-page .textLink:hover {
color: var(--brand2)
}
#construction-energy-page .soft {
background: var(--sky2)
}
#construction-energy-page .sectionHead { margin-bottom: 36px
}
#construction-energy-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#construction-energy-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#construction-energy-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#construction-energy-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#construction-energy-page .heroGrid>*,
#construction-energy-page .feature>*,
#construction-energy-page .aiGrid>* {
min-width: 0
}
#construction-energy-page .heroCopy {
min-width: 0
}
#construction-energy-page .hero h1 {
max-width: 630px
}
#construction-energy-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#construction-energy-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#construction-energy-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#construction-energy-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#construction-energy-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#construction-energy-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#construction-energy-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#construction-energy-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#construction-energy-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#construction-energy-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#construction-energy-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#construction-energy-page .logos {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 11px
}
#construction-energy-page .logo {
min-height: 60px;
border: 1px solid #E2EBF0;
border-radius: 10px;
display: grid;
place-content: center;
text-align: center;
padding: 10px;
line-height: 1.25;
font-weight: 800;
font-size: 14px;
color: #506578;
letter-spacing: -.02em
}
#construction-energy-page .logo.dhl {
font-size: 24px;
font-style: italic;
font-weight: 900;
letter-spacing: 1px
}
#construction-energy-page .logo.adobe {
font-size: 21px
}
#construction-energy-page .logo.golden {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em
}
#construction-energy-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#construction-energy-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#construction-energy-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#construction-energy-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#construction-energy-page .outcome:nth-child(3):before {
background: var(--green)
}
#construction-energy-page .outcome:nth-child(4):before {
background: var(--purple)
}
#construction-energy-page .outcome>.icon {
color: var(--navy)
}
#construction-energy-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#construction-energy-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#construction-energy-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#construction-energy-page .feature.reverse .visual {
order: -1
}
#construction-energy-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#construction-energy-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#construction-energy-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#construction-energy-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#construction-energy-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#construction-energy-page .tick .icon {
height: 13px;
width: 13px
}
#construction-energy-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#construction-energy-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#construction-energy-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#construction-energy-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#construction-energy-page .uiHeading .icon {
height: 19px;
width: 19px
}
#construction-energy-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#construction-energy-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
#construction-energy-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#construction-energy-page .panelBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--line)
}
#construction-energy-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#construction-energy-page .tiny {
font-size: 9px;
line-height: 1.5
}
#construction-energy-page .muted {
color: var(--muted)
}
#construction-energy-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#construction-energy-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#construction-energy-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#construction-energy-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#construction-energy-page .dark h2,
#construction-energy-page .dark h3 {
color: white
}
#construction-energy-page .dark .ey {
background: var(--yellow);
color: #111
}
#construction-energy-page .dark .textLink {
color: #fff
}
#construction-energy-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#construction-energy-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#construction-energy-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#construction-energy-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#construction-energy-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#construction-energy-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#construction-energy-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#construction-energy-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#construction-energy-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#construction-energy-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#construction-energy-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#construction-energy-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#construction-energy-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#construction-energy-page .connectedCard h3 {
margin: 18px 0 11px
}
#construction-energy-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#construction-energy-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#construction-energy-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#construction-energy-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#construction-energy-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#construction-energy-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#construction-energy-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#construction-energy-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#construction-energy-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#construction-energy-page .featureCard>.icon {
color: var(--navy)
}
#construction-energy-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#construction-energy-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-energy-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#construction-energy-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#construction-energy-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#construction-energy-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#construction-energy-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#construction-energy-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#construction-energy-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#construction-energy-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#construction-energy-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#construction-energy-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#construction-energy-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#construction-energy-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#construction-energy-page .useCase>.icon {
color: var(--navy)
}
#construction-energy-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#construction-energy-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-energy-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#construction-energy-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#construction-energy-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#construction-energy-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#construction-energy-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#construction-energy-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#construction-energy-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-energy-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#construction-energy-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#construction-energy-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#construction-energy-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#construction-energy-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#construction-energy-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#construction-energy-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#construction-energy-page details {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 19px 21px
}
#construction-energy-page summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
cursor: pointer;
list-style: none;
color: var(--ink);
font-size: 15px;
font-weight: 700;
line-height: 1.6
}
#construction-energy-page summary::-webkit-details-marker {
display: none
}
#construction-energy-page .faqPlus {
width: 18px;
height: 18px;
flex: 0 0 18px;
position: relative;
color: var(--navy)
}
#construction-energy-page .faqPlus:before,
#construction-energy-page .faqPlus:after {
content: "";
position: absolute;
top: 8px;
left: 2px;
width: 14px;
height: 2px;
background: currentColor;
border-radius: 2px
}
#construction-energy-page .faqPlus:after {
transform: rotate(90deg)
}
#construction-energy-page details[open] .faqPlus:after {
transform: none
}
#construction-energy-page .faqAnswer p {
color: var(--muted);
font-size: 14px;
line-height: 1.85;
margin-top: 15px;
padding-right: 32px
}
#construction-energy-page details[open] {
border-color: #A7CFE3
}
#construction-energy-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#construction-energy-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#construction-energy-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#construction-energy-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#construction-energy-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#construction-energy-page .ctaBtns .btn {
min-width: 219px
}
#construction-energy-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#construction-energy-page .btn.darkOutline:hover {
background: #252D33
}
#construction-energy-page .final a:focus-visible {
outline-color: var(--yellow)
}
#construction-energy-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#construction-energy-page .heroGrid {
gap: 28px
}
#construction-energy-page .hero .lead {
font-size: 16px
}
#construction-energy-page .feature,
#construction-energy-page .aiGrid {
gap: 30px
}
#construction-energy-page .visual {
padding: 17px
}
#construction-energy-page .toolCard {
padding: 21px 15px
}
#construction-energy-page .toolCard strong {
font-size: 14px
}
#construction-energy-page .handoffBand {
padding: 20px
}
#construction-energy-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#construction-energy-page section {
padding: 64px 0
}
#construction-energy-page .hero {
padding: 34px 0 42px
}
#construction-energy-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#construction-energy-page .heroCopy {
max-width: 790px
}
#construction-energy-page .hero h1 {
max-width: 800px;
}
#construction-energy-page .hero .lead {
max-width: 760px
}
#construction-energy-page .heroVisual {
max-width: 460px;
justify-self: center
}
#construction-energy-page .desktopBreak {
display: none
}
#construction-energy-page .feature,
#construction-energy-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#construction-energy-page .feature.reverse .visual {
order: 0
}
#construction-energy-page .featureCopy {
max-width: 790px
}
#construction-energy-page .visual {
max-width: 640px;
margin: 0 auto
}
#construction-energy-page .outcomes,
#construction-energy-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-energy-page .connectedGrid {
gap: 13px
}
#construction-energy-page .connectedCard {
padding: 22px
}
#construction-energy-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-energy-page .aiVisual {
max-width: 600px;
margin: auto
}
#construction-energy-page .aiMini {
max-width: 780px
}
#construction-energy-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#construction-energy-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#construction-energy-page .toolCard {
min-height: 145px
}
#construction-energy-page .roleGrid {
gap: 20px
}
#construction-energy-page .roleCard {
padding-right: 18px
}
#construction-energy-page .roleCard h3 {
font-size: 20px
}
#construction-energy-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#construction-energy-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#construction-energy-page .workflowLead br {
display: none
}
#construction-energy-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#construction-energy-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#construction-energy-page .final .btn {
min-width: 210px
}
#construction-energy-page .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#construction-energy-page .wrap {
width: calc(100% - 32px)
}
#construction-energy-page section {
padding: 49px 0
}
#construction-energy-page h2 {
font-size: 33px;
line-height: 1.15
}
#construction-energy-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#construction-energy-page .sectionHead {
margin-bottom: 27px
}
#construction-energy-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#construction-energy-page .hero {
padding: 25px 0 34px
}
#construction-energy-page .heroGrid {
gap: 21px
}
#construction-energy-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#construction-energy-page .hero h1 {
line-height: 1.12
}
#construction-energy-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#construction-energy-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#construction-energy-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#construction-energy-page .hero .micro {
font-size: 11px
}
#construction-energy-page .heroPills {
gap: 6px;
margin-top: 16px
}
#construction-energy-page .heroPills span {
font-size: 9px
}
#construction-energy-page .heroVisual {
max-width: 420px
}
#construction-energy-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#construction-energy-page .trust {
padding: 22px 0
}
#construction-energy-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#construction-energy-page .logos {
gap: 7px
}
#construction-energy-page .logo {
font-size: 11px;
min-height: 53px;
padding: 8px
}
#construction-energy-page .logo.dhl {
font-size: 21px
}
#construction-energy-page .logo.adobe {
font-size: 18px
}
#construction-energy-page .logo.golden {
font-size: 8px
}
#construction-energy-page .outcomes {
gap: 12px
}
#construction-energy-page .outcome {
padding: 19px
}
#construction-energy-page .outcome h3 {
font-size: 17px
}
#construction-energy-page .outcome p {
font-size: 13px
}
#construction-energy-page .feature {
gap: 27px
}
#construction-energy-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#construction-energy-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#construction-energy-page .fi {
font-size: 12px
}
#construction-energy-page .textLink {
font-size: 13px
}
#construction-energy-page .visual {
padding: 15px;
border-radius: 16px
}
#construction-energy-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#construction-energy-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#construction-energy-page .uiHeading .icon {
width: 18px;
height: 18px
}
#construction-energy-page .panelBar {
padding: 12px
}
#construction-energy-page .uiFoot {
font-size: 9px
}
#construction-energy-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#construction-energy-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#construction-energy-page .aiMini {
gap: 11px;
margin-top: 23px
}
#construction-energy-page .aiMini article {
padding: 16px
}
#construction-energy-page .aiMini h3 {
font-size: 15px
}
#construction-energy-page .aiMini p {
font-size: 12px
}
#construction-energy-page .aiNote {
font-size: 10px
}
#construction-energy-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#construction-energy-page .connectedCard {
padding: 23px
}
#construction-energy-page .connectedCard h3 {
margin: 15px 0 9px
}
#construction-energy-page .connectedCard p {
font-size: 14px
}
#construction-energy-page .handoffBand {
padding: 20px
}
#construction-energy-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#construction-energy-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#construction-energy-page .handoffBand small {
font-size: 11px
}
#construction-energy-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#construction-energy-page .featureGrid {
gap: 13px
}
#construction-energy-page .featureCard {
padding: 21px
}
#construction-energy-page .featureCard h3 {
font-size: 17px
}
#construction-energy-page .featureCard p {
font-size: 13px
}
#construction-energy-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#construction-energy-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#construction-energy-page .toolCard strong {
font-size: 15px
}
#construction-energy-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#construction-energy-page .toolCard:last-child .toolArrow {
top: 31px
}
#construction-energy-page .toolCard:last-child strong {
padding-right: 25px
}
#construction-energy-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#construction-energy-page .useCases {
gap: 13px
}
#construction-energy-page .useCase {
padding: 21px 18px
}
#construction-energy-page .useCase h3 {
font-size: 17px
}
#construction-energy-page .useCase p {
font-size: 13px
}
#construction-energy-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#construction-energy-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#construction-energy-page .roleCard:last-child {
padding-bottom: 0
}
#construction-energy-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#construction-energy-page .roleCard>strong {
font-size: 14px
}
#construction-energy-page .roleCard p {
font-size: 14px
}
#construction-energy-page .workflowBand {
padding: 28px 0
}
#construction-energy-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#construction-energy-page .workflowLead {
font-size: 18px
}
#construction-energy-page .workflowStep strong {
font-size: 14px
}
#construction-energy-page .workflowStep p {
font-size: 10px
}
#construction-energy-page .faq .sectionHead {
margin-bottom: 25px
}
#construction-energy-page details {
padding: 16px
}
#construction-energy-page .faqList {
gap: 10px
}
#construction-energy-page summary {
font-size: 14px;
gap: 14px
}
#construction-energy-page .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
#construction-energy-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#construction-energy-page .final h2 {
font-size: 32px
}
#construction-energy-page .final p {
font-size: 14px;
line-height: 1.8
}
#construction-energy-page .final .ey {
font-size: 9px
}
#construction-energy-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#construction-energy-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#construction-energy-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#construction-energy-page .outcomes,
#construction-energy-page .featureGrid,
#construction-energy-page .useCases {
grid-template-columns: 1fr
}
#construction-energy-page .outcome {
padding: 23px
}
#construction-energy-page .outcome h3 {
font-size: 18px
}
#construction-energy-page .outcome p {
font-size: 14px
}
#construction-energy-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#construction-energy-page .fi {
font-size: 13px
}
#construction-energy-page .aiMini {
grid-template-columns: 1fr
}
#construction-energy-page .aiMini h3 {
font-size: 17px
}
#construction-energy-page .aiMini p {
font-size: 13px
}
#construction-energy-page .aiMini article {
padding: 19px
}
#construction-energy-page .featureCard h3,
#construction-energy-page .useCase h3 {
font-size: 19px
}
#construction-energy-page .featureCard p,
#construction-energy-page .useCase p {
font-size: 14px
}
#construction-energy-page .toolsGrid {
grid-template-columns: 1fr
}
#construction-energy-page .toolCard,
#construction-energy-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#construction-energy-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#construction-energy-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#construction-energy-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#construction-energy-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#construction-energy-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#construction-energy-page .toolArrow,
#construction-energy-page .toolCard:last-child .toolArrow {
top: 30px
}
#construction-energy-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#construction-energy-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#construction-energy-page h2 {
font-size: 30px
}
#construction-energy-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#construction-energy-page .hero h1 {
font-size: 31px
}
#construction-energy-page .heroPills span {
font-size: 8px
}
#construction-energy-page .heroPills {
gap: 5px
}
#construction-energy-page .uiHeading {
font-size: 11px
}
#construction-energy-page .uiHeading>.pill {
font-size: 7px
}
#construction-energy-page .visual {
padding: 12px
}
#construction-energy-page .final {
padding: 26px 20px
}
#construction-energy-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#construction-energy-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#construction-energy-page section {
padding: 24px 0
}
#construction-energy-page .hero,
#construction-energy-page .soft {
background: #fff
}
#construction-energy-page .dark,
#construction-energy-page .workflowBand,
#construction-energy-page .final {
background: #fff;
color: #11283A
}
#construction-energy-page .dark h2,
#construction-energy-page .dark h3,
#construction-energy-page .final h2 {
color: #11283A
}
#construction-energy-page .dark p,
#construction-energy-page .final p {
color: #52697C
}
#construction-energy-page .btn {
display: none
}
#construction-energy-page .visual,
#construction-energy-page .outcome,
#construction-energy-page .featureCard,
#construction-energy-page details {
break-inside: avoid
}
#construction-energy-page .heroImage {
max-width: 380px
}
#construction-energy-page .heroVisual {
justify-self: center
}
}
.constructionEnergySkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.constructionEnergySkip:focus {
top: 12px
}
#construction-energy-page .dark .textLink {
color: #FFF1BD
}
#construction-energy-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
@media (prefers-reduced-motion:reduce) {} #construction-energy-page .srOnly {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap
}
#construction-energy-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#construction-energy-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#construction-energy-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy);
flex: none
}
#construction-energy-page .workflowStep,
#construction-energy-page .enTop>div {
min-width: 0
}
#construction-energy-page .featureCopy>p {
max-width: 580px
}
#construction-energy-page .toolCard strong {
padding-right: 12px
}
#construction-energy-page .sectionNote {
font-size: 12px;
line-height: 1.7;
color: var(--muted);
text-align: center;
margin: 20px auto 0;
max-width: 850px
}
#construction-energy-page .pill.green {
background: var(--greenbg);
color: #116746
}
#construction-energy-page .enTop {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
border-bottom: 1px solid var(--line)
}
#construction-energy-page .enTop>div {
flex: 1
}
#construction-energy-page .enTop strong {
display: block;
font-size: 15px;
color: var(--navy);
line-height: 1.4
}
#construction-energy-page .enTop small {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 4px
}
#construction-energy-page .enGlyph {
width: 41px;
height: 41px;
flex: 0 0 41px;
background: var(--yellowsoft);
color: #8A6805;
border-radius: 10px;
display: grid;
place-items: center
}
#construction-energy-page .enGlyph .icon {
width: 24px;
height: 24px
}
#construction-energy-page .enStats {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 11px;
padding: 17px
}
#construction-energy-page .enStats>div {
padding: 14px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
min-width: 0
}
#construction-energy-page .enStats>div:first-child {
background: #F0FAF5;
border-color: #D2E7DB
}
#construction-energy-page .enStats span {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.6
}
#construction-energy-page .enStats strong {
display: block;
font-size: 30px;
color: var(--navy);
line-height: 1.2;
letter-spacing: -.04em;
margin-top: 8px
}
#construction-energy-page .enStats small {
font-size: 12px;
letter-spacing: 0
}
#construction-energy-page .enTableWrap {
min-width: 0
}
#construction-energy-page .enTable {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size: 11px;
line-height: 1.45
}
#construction-energy-page .enTable th,
#construction-energy-page .enTable td {
padding: 13px 16px;
border-bottom: 1px solid #E4EDF3;
text-align: left;
vertical-align: middle
}
#construction-energy-page .enTable thead th {
font-size: 8px;
text-transform: uppercase;
letter-spacing: .04em;
color: #5F788A;
background: #F5F9FC
}
#construction-energy-page .enTable th:first-child {
width: 46%
}
#construction-energy-page .enTable th:nth-child(2) {
width: 22%
}
#construction-energy-page .enTable th:last-child {
width: 32%
}
#construction-energy-page .enTable tbody th {
font-weight: 400
}
#construction-energy-page .enTable strong {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--navy)
}
#construction-energy-page .enTable b {
font-size: 16px;
color: var(--navy);
line-height: 1.3
}
#construction-energy-page .enTable small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px
}
#construction-energy-page .enTable .pill {
font-size: 8px;
padding: 4px 7px
}
#construction-energy-page .enFoot {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 14px 17px;
background: #F6FBFE;
font-size: 10px;
color: #526F81;
line-height: 1.7
}
#construction-energy-page .enFoot .icon {
width: 16px;
height: 16px;
color: #168460;
margin-top: 1px
}
#construction-energy-page .enCallout {
display: flex;
align-items: center;
gap: 10px;
margin-top: 13px;
padding: 13px 15px;
border: 1px solid #D2E4ED;
border-radius: 10px;
background: #fff;
font-size: 10px;
color: #4D6A7D;
line-height: 1.7
}
#construction-energy-page .enCallout .icon {
width: 20px;
height: 20px;
color: var(--brand2)
}
#construction-energy-page .enChart {
padding: 17px 17px 2px
}
#construction-energy-page .enLegend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 9px;
color: var(--muted);
margin-bottom: 13px;
line-height: 1.5
}
#construction-energy-page .enLegend>span {
display: flex;
align-items: center;
gap: 6px
}
#construction-energy-page .enLegend i {
height: 3px;
width: 15px;
border-radius: 2px;
background: var(--brand2);
display: block
}
#construction-energy-page .enLegend .baseline i {
background: repeating-linear-gradient(90deg, #90A8B7 0, #90A8B7 4px, transparent 4px, transparent 6px)
}
#construction-energy-page .energyPlot {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/220;
max-width: 100%
}
#construction-energy-page .enCompare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 0 17px 17px
}
#construction-energy-page .enCompare>div {
padding: 13px;
border: 1px solid var(--line);
border-radius: 8px;
background: #F5FBFF
}
#construction-energy-page .enCompare>div:first-child {
background: #FFF9E5;
border-color: #E9DBA9
}
#construction-energy-page .enCompare span {
display: block;
font-size: 9px;
line-height: 1.5;
color: #5A7588
}
#construction-energy-page .enCompare strong {
font-size: 25px;
line-height: 1.3;
display: block;
color: var(--navy);
letter-spacing: -.035em;
margin-top: 6px
}
#construction-energy-page .enCompare small {
font-size: 11px;
letter-spacing: 0
}
#construction-energy-page .enAlert {
border: 1px solid #E9D490;
border-radius: 12px;
background: #fff;
overflow: hidden
}
#construction-energy-page .enAlertHead {
padding: 14px 16px;
display: flex;
align-items: center;
gap: 8px;
background: #FFF7D8;
border-bottom: 1px solid #EBD99D;
font-size: 11px;
font-weight: 750;
line-height: 1.5;
color: #745818
}
#construction-energy-page .enAlertHead>.icon {
width: 18px;
height: 18px
}
#construction-energy-page .enAlertHead>.pill {
margin-left: auto;
font-size: 8px;
flex: none;
border: 1px solid #E7D18B
}
#construction-energy-page .enAlertBody {
padding: 17px
}
#construction-energy-page .enAlertBody>strong {
font-size: 16px;
color: var(--navy);
line-height: 1.4
}
#construction-energy-page .enAlertBody>p {
font-size: 10px;
color: var(--muted);
margin-top: 5px
}
#construction-energy-page .enAlertValues {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
margin-top: 16px
}
#construction-energy-page .enAlertValues>div {
border-left: 3px solid var(--brand);
padding-left: 11px
}
#construction-energy-page .enAlertValues>div:first-child {
border-color: #D5A20C
}
#construction-energy-page .enAlertValues small {
font-size: 9px;
line-height: 1.5;
display: block;
color: var(--muted)
}
#construction-energy-page .enAlertValues b {
font-size: 24px;
line-height: 1.5;
color: var(--navy);
letter-spacing: -.04em
}
#construction-energy-page .enLinkStep {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #487288;
font-size: 10px;
margin: 13px 0;
line-height: 1.5
}
#construction-energy-page .enLinkStep .icon {
height: 17px;
width: 17px;
transform: rotate(90deg);
color: var(--brand2)
}
#construction-energy-page .enWorkRows {
padding: 0 17px
}
#construction-energy-page .enWorkRows>div {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 15px;
align-items: center;
font-size: 10px;
line-height: 1.6;
padding: 11px 0;
border-bottom: 1px solid var(--line)
}
#construction-energy-page .enWorkRows>div:last-child {
border-bottom: 0
}
#construction-energy-page .enWorkRows span {
color: var(--muted)
}
#construction-energy-page .enWorkRows b {
font-weight: 650;
color: var(--navy);
text-align: right
}
#construction-energy-page .enReportBody {
padding: 20px 18px
}
#construction-energy-page .enReportRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
font-size: 11px;
line-height: 1.5;
color: #527187;
margin-bottom: 18px
}
#construction-energy-page .enReportRow b {
color: var(--navy);
font-size: 12px
}
#construction-energy-page .enReportRow>div {
grid-column: 1/-1;
height: 16px;
background: #F0F5F8;
border-radius: 4px;
overflow: hidden
}
#construction-energy-page .enReportRow i {
display: block;
height: 100%;
background: #BCDDEA;
border-radius: 4px
}
#construction-energy-page .enReportRow.current i {
background: #007FC5
}
#construction-energy-page .enResult {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
border-top: 1px solid var(--line);
padding-top: 19px;
margin-top: 6px
}
#construction-energy-page .enResult>div {
padding: 13px 10px;
background: #EFF9F3;
border: 1px solid #D0E7D8;
border-radius: 9px
}
#construction-energy-page .enResult span {
font-size: 9px;
line-height: 1.55;
display: block;
color: #527C6B
}
#construction-energy-page .enResult strong {
font-size: 28px;
line-height: 1.2;
color: #146C4B;
display: block;
letter-spacing: -.04em;
margin-top: 7px
}
#construction-energy-page .enResult small {
font-size: 10px;
letter-spacing: 0;
display: block;
margin-top: 5px;
font-weight: 600
}
#construction-energy-page .enEvidence {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px 13px;
font-size: 9px;
color: var(--muted);
line-height: 1.5
}
#construction-energy-page .enEvidence>span {
display: flex;
gap: 5px;
align-items: center
}
#construction-energy-page .enEvidence .icon {
height: 13px;
width: 13px;
color: #148861
}
#construction-energy-page .enReportFooter {
display: flex;
align-items: center;
gap: 10px;
padding: 14px;
background: #0D2939;
border-radius: 11px;
color: #D1E3EC;
font-size: 10px;
line-height: 1.7;
margin-top: 13px
}
#construction-energy-page .enReportFooter .icon {
color: var(--yellow);
width: 23px;
height: 23px
}
#construction-energy-page .enAiPanel {
background: #fff;
color: var(--ink);
border: 1px solid #405B6B;
border-radius: 16px;
overflow: hidden
}
#construction-energy-page .enAiHead {
display: flex;
align-items: center;
gap: 11px;
padding: 18px;
background: #EAF8FF;
border-bottom: 1px solid #D1E8F3
}
#construction-energy-page .enAiHead>.icon {
color: var(--brand2);
width: 28px;
height: 28px
}
#construction-energy-page .enAiHead>div {
min-width: 0;
flex: 1
}
#construction-energy-page .enAiHead strong {
font-size: 15px;
color: var(--navy);
display: block;
line-height: 1.4
}
#construction-energy-page .enAiHead small {
font-size: 9px;
color: var(--muted);
line-height: 1.6;
display: block;
margin-top: 4px
}
#construction-energy-page .enAiBody {
padding: 20px
}
#construction-energy-page .enQuestion {
background: #FFF6D7;
border: 1px solid #EBDCA6;
color: #675326;
font-size: 12px;
line-height: 1.65;
border-radius: 11px 11px 3px 11px;
padding: 13px 15px;
margin-left: 28px
}
#construction-energy-page .enReply {
margin-top: 20px;
font-size: 12px;
line-height: 1.85;
color: #456579
}
#construction-energy-page .enReply>strong {
font-size: 13px;
color: var(--navy);
display: block;
margin-bottom: 7px
}
#construction-energy-page .enReply p {
color: #456579
}
#construction-energy-page .enAiRecord {
display: flex;
gap: 10px;
align-items: center;
padding: 13px;
border: 1px solid var(--line);
border-radius: 9px;
margin-top: 15px;
background: #F5FBFF
}
#construction-energy-page .enAiRecord .icon {
color: var(--navy);
width: 22px;
height: 22px
}
#construction-energy-page .enAiRecord strong {
display: block;
font-size: 11px;
line-height: 1.6;
color: var(--navy)
}
#construction-energy-page .enAiRecord span {
display: block;
font-size: 9px;
color: #57758B;
line-height: 1.7;
margin-top: 3px
}
#construction-energy-page .enDraft {
margin-top: 14px;
padding: 15px;
border: 1px solid var(--line);
border-radius: 10px
}
#construction-energy-page .enDraftLabel {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 750;
color: var(--navy);
line-height: 1.5
}
#construction-energy-page .enDraftLabel .icon {
height: 17px;
width: 17px
}
#construction-energy-page .enDraft p {
font-size: 11px;
color: #557084;
line-height: 1.85;
margin-top: 9px;
margin-bottom: 12px
}
#construction-energy-page .enAiFoot {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 15px 18px;
border-top: 1px solid #CFE4D8;
background: #EAF8F3;
color: #256A51;
font-size: 10px;
line-height: 1.7
}
#construction-energy-page .enAiFoot .icon {
width: 19px;
height: 19px;
margin-top: 1px
}
@media(max-width:980px) {
#construction-energy-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media(max-width:640px) {
#construction-energy-page .supportStrip {
gap: 7px
}
#construction-energy-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#construction-energy-page .supportStrip .icon {
width: 16px;
height: 16px
}
#construction-energy-page .enTop {
padding: 14px;
gap: 9px
}
#construction-energy-page .enTop strong {
font-size: 13px
}
#construction-energy-page .enTop small {
font-size: 9px
}
#construction-energy-page .enTop>.pill {
font-size: 7px;
padding: 4px 6px
}
#construction-energy-page .enGlyph {
height: 35px;
width: 35px;
flex-basis: 35px
}
#construction-energy-page .enGlyph .icon {
height: 20px;
width: 20px
}
#construction-energy-page .enStats {
padding: 12px;
gap: 8px;
grid-template-columns: 1.5fr 1fr
}
#construction-energy-page .enStats>div {
padding: 11px 9px
}
#construction-energy-page .enStats strong {
font-size: 26px
}
#construction-energy-page .enStats span {
font-size: 8px
}
#construction-energy-page .enStats small {
font-size: 10px
}
#construction-energy-page .enTable th,
#construction-energy-page .enTable td {
padding: 12px 9px
}
#construction-energy-page .enTable thead th {
font-size: 7px
}
#construction-energy-page .enTable strong {
font-size: 11px
}
#construction-energy-page .enTable small {
font-size: 8px
}
#construction-energy-page .enTable b {
font-size: 14px
}
#construction-energy-page .enTable .pill {
font-size: 7px;
padding: 4px 6px
}
#construction-energy-page .enFoot {
font-size: 9px;
padding: 12px;
gap: 8px
}
#construction-energy-page .enCallout {
font-size: 9px;
padding: 12px;
gap: 8px
}
#construction-energy-page .enChart {
padding: 14px 10px 2px
}
#construction-energy-page .enLegend {
font-size: 8px;
gap: 12px
}
#construction-energy-page .enCompare {
padding: 0 12px 12px;
gap: 8px
}
#construction-energy-page .enCompare>div {
padding: 11px
}
#construction-energy-page .enCompare span {
font-size: 8px
}
#construction-energy-page .enCompare strong {
font-size: 23px
}
#construction-energy-page .enAlertHead {
padding: 12px;
font-size: 10px;
gap: 7px
}
#construction-energy-page .enAlertHead>.pill {
font-size: 7px
}
#construction-energy-page .enAlertBody {
padding: 14px
}
#construction-energy-page .enAlertBody>strong {
font-size: 14px
}
#construction-energy-page .enAlertValues b {
font-size: 22px
}
#construction-energy-page .enLinkStep {
font-size: 9px;
gap: 7px
}
#construction-energy-page .enWorkRows {
padding: 0 13px
}
#construction-energy-page .enWorkRows>div {
font-size: 9px;
gap: 10px
}
#construction-energy-page .enReportBody {
padding: 17px 13px
}
#construction-energy-page .enReportRow {
font-size: 10px
}
#construction-energy-page .enReportRow b {
font-size: 11px
}
#construction-energy-page .enResult {
gap: 8px
}
#construction-energy-page .enResult>div {
padding: 11px 9px
}
#construction-energy-page .enResult span {
font-size: 8px
}
#construction-energy-page .enResult strong {
font-size: 27px
}
#construction-energy-page .enResult small {
font-size: 9px
}
#construction-energy-page .enEvidence {
font-size: 8px;
gap: 9px
}
#construction-energy-page .enReportFooter {
font-size: 9px;
padding: 12px
}
#construction-energy-page .enAiHead {
padding: 14px;
gap: 9px
}
#construction-energy-page .enAiHead strong {
font-size: 14px
}
#construction-energy-page .enAiBody {
padding: 15px
}
#construction-energy-page .enQuestion {
font-size: 11px;
margin-left: 18px;
padding: 12px
}
#construction-energy-page .enReply {
font-size: 11px
}
#construction-energy-page .enReply>strong {
font-size: 12px
}
#construction-energy-page .enAiRecord {
padding: 12px
}
#construction-energy-page .enAiRecord strong {
font-size: 10px
}
#construction-energy-page .enAiRecord span {
font-size: 8px
}
#construction-energy-page .enDraft {
padding: 13px
}
#construction-energy-page .enDraftLabel {
font-size: 10px
}
#construction-energy-page .enDraft p {
font-size: 10px
}
#construction-energy-page .enAiFoot {
font-size: 9px;
padding: 13px
}
}
@media(max-width:360px) {
#construction-energy-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-energy-page .enTable th,
#construction-energy-page .enTable td {
padding: 11px 7px
}
#construction-energy-page .enTable th:first-child {
width: 44%
}
#construction-energy-page .enTable th:nth-child(2) {
width: 23%
}
#construction-energy-page .enTable th:last-child {
width: 33%
}
#construction-energy-page .enTable strong {
font-size: 10px
}
#construction-energy-page .enTable small {
font-size: 7px
}
#construction-energy-page .enStats strong {
font-size: 24px
}
#construction-energy-page .enStats small {
font-size: 9px
}
#construction-energy-page .enTop>.pill {
display: none
}
#construction-energy-page .enQuestion {
margin-left: 0
}
#construction-energy-page .enAlertHead>.pill {
display: none
}
#construction-energy-page .enAlertHead {
font-size: 10px
}
#construction-energy-page .enAlertValues {
gap: 9px
}
#construction-energy-page .enLegend {
gap: 8px;
font-size: 7px
}
#construction-energy-page .enResult span {
min-height: 26px
}
}
.new-theme-design .awardBand .sectionHead {
margin-bottom: 0 !important;
}  #construction-remote-page {
--brand: #00A8F8;
--brand2: #007FC5;
--navy: #063B5C;
--navy2: #0A4E75;
--sky: #EAF8FF;
--sky2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--green: #118A61;
--greenbg: #EAF8F3;
--yellow: #FFC928;
--yellowsoft: #FFF7D6;
--black: #0B0B0B;
--purple: #7254C7;
--max: 1320px;
width: 100%;
margin: 0;
padding: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
isolation: isolate;
}
#construction-remote-page * {
box-sizing: border-box
}
#construction-remote-page a {
text-decoration: none
}
#construction-remote-page section {
scroll-margin-top: 24px
}
#construction-remote-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px
}
#construction-remote-page h1 {
font-size: clamp(40px, 4.1vw, 54px)
}
#construction-remote-page h2 {
font-size: clamp(32px, 3.6vw, 46px)
}
#construction-remote-page h3 {
font-size: 20px;
letter-spacing: -.02em;
line-height: 1.28
}
#construction-remote-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#construction-remote-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0;
background: transparent;
}
#construction-remote-page a:focus-visible,
#construction-remote-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#construction-remote-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#construction-remote-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
#construction-remote-page .btn .icon {
width: 17px;
height: 17px
}
#construction-remote-page .btn.black {
background: #0B0B0B;
color: #fff
}
#construction-remote-page .btn.black:hover {
background: #303030
}
#construction-remote-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#construction-remote-page .btn.yellow:hover {
background: #FFD454
}
#construction-remote-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#construction-remote-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#construction-remote-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#construction-remote-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#construction-remote-page .textLink .icon {
width: 17px;
height: 17px
}
#construction-remote-page .textLink:hover {
color: var(--brand2)
}
#construction-remote-page .soft {
background: var(--sky2)
}
#construction-remote-page .sectionHead {
margin-bottom: 36px
}
#construction-remote-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#construction-remote-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#construction-remote-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#construction-remote-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#construction-remote-page .heroGrid>*,
#construction-remote-page .feature>*,
#construction-remote-page .aiGrid>* {
min-width: 0
}
#construction-remote-page .heroCopy {
min-width: 0
}
#construction-remote-page .hero h1 {
max-width: 630px
}
#construction-remote-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#construction-remote-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#construction-remote-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#construction-remote-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#construction-remote-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#construction-remote-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#construction-remote-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#construction-remote-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#construction-remote-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#construction-remote-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#construction-remote-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#construction-remote-page .logos {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 11px
}
#construction-remote-page .logo {
min-height: 60px;
border: 1px solid #E2EBF0;
border-radius: 10px;
display: grid;
place-content: center;
text-align: center;
padding: 10px;
line-height: 1.25;
font-weight: 800;
font-size: 14px;
color: #506578;
letter-spacing: -.02em
}
#construction-remote-page .logo.dhl {
font-size: 24px;
font-style: italic;
font-weight: 900;
letter-spacing: 1px
}
#construction-remote-page .logo.adobe {
font-size: 21px
}
#construction-remote-page .logo.golden {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em
}
#construction-remote-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#construction-remote-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#construction-remote-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#construction-remote-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#construction-remote-page .outcome:nth-child(3):before {
background: var(--green)
}
#construction-remote-page .outcome:nth-child(4):before {
background: var(--purple)
}
#construction-remote-page .outcome>.icon {
color: var(--navy)
}
#construction-remote-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#construction-remote-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#construction-remote-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#construction-remote-page .feature.reverse .visual {
order: -1
}
#construction-remote-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#construction-remote-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#construction-remote-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#construction-remote-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#construction-remote-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#construction-remote-page .tick .icon {
height: 13px;
width: 13px
}
#construction-remote-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#construction-remote-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#construction-remote-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#construction-remote-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#construction-remote-page .uiHeading .icon {
height: 19px;
width: 19px
}
#construction-remote-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#construction-remote-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
#construction-remote-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#construction-remote-page .panelBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--line)
}
#construction-remote-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#construction-remote-page .tiny {
font-size: 9px;
line-height: 1.5
}
#construction-remote-page .muted {
color: var(--muted)
}
#construction-remote-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#construction-remote-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#construction-remote-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#construction-remote-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#construction-remote-page .dark h2,
#construction-remote-page .dark h3 {
color: white
}
#construction-remote-page .dark .ey {
background: var(--yellow);
color: #111
}
#construction-remote-page .dark .textLink {
color: #fff
}
#construction-remote-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#construction-remote-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#construction-remote-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#construction-remote-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#construction-remote-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#construction-remote-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#construction-remote-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#construction-remote-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#construction-remote-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#construction-remote-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#construction-remote-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#construction-remote-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#construction-remote-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#construction-remote-page .connectedCard h3 {
margin: 18px 0 11px
}
#construction-remote-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#construction-remote-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#construction-remote-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#construction-remote-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#construction-remote-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#construction-remote-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#construction-remote-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#construction-remote-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#construction-remote-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#construction-remote-page .featureCard>.icon {
color: var(--navy)
}
#construction-remote-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#construction-remote-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-remote-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#construction-remote-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#construction-remote-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#construction-remote-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#construction-remote-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#construction-remote-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#construction-remote-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#construction-remote-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#construction-remote-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#construction-remote-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#construction-remote-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#construction-remote-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#construction-remote-page .useCase>.icon {
color: var(--navy)
}
#construction-remote-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#construction-remote-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-remote-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#construction-remote-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#construction-remote-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#construction-remote-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#construction-remote-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#construction-remote-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#construction-remote-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#construction-remote-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#construction-remote-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#construction-remote-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#construction-remote-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#construction-remote-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#construction-remote-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#construction-remote-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#construction-remote-page summary::-webkit-details-marker {
display: none
}
#construction-remote-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#construction-remote-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#construction-remote-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#construction-remote-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#construction-remote-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#construction-remote-page .ctaBtns .btn {
min-width: 219px
}
#construction-remote-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#construction-remote-page .btn.darkOutline:hover {
background: #252D33
}
#construction-remote-page .final a:focus-visible {
outline-color: var(--yellow)
}
#construction-remote-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#construction-remote-page .heroGrid {
gap: 28px
}
#construction-remote-page h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
#construction-remote-page .hero .lead {
font-size: 16px
}
#construction-remote-page .feature,
#construction-remote-page .aiGrid {
gap: 30px
}
#construction-remote-page .visual {
padding: 17px
}
#construction-remote-page .toolCard {
padding: 21px 15px
}
#construction-remote-page .toolCard strong {
font-size: 14px
}
#construction-remote-page .handoffBand {
padding: 20px
}
#construction-remote-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#construction-remote-page section {
padding: 64px 0
}
#construction-remote-page .hero {
padding: 34px 0 42px
}
#construction-remote-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#construction-remote-page .heroCopy {
max-width: 790px
}
#construction-remote-page .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
#construction-remote-page .hero .lead {
max-width: 760px
}
#construction-remote-page .heroVisual {
max-width: 460px;
justify-self: center
}
#construction-remote-page .desktopBreak {
display: none
}
#construction-remote-page .feature,
#construction-remote-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#construction-remote-page .feature.reverse .visual {
order: 0
}
#construction-remote-page .featureCopy {
max-width: 790px
}
#construction-remote-page .visual {
max-width: 640px;
margin: 0 auto
}
#construction-remote-page .outcomes,
#construction-remote-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-remote-page .connectedGrid {
gap: 13px
}
#construction-remote-page .connectedCard {
padding: 22px
}
#construction-remote-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-remote-page .aiVisual {
max-width: 600px;
margin: auto
}
#construction-remote-page .aiMini {
max-width: 780px
}
#construction-remote-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#construction-remote-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#construction-remote-page .toolCard {
min-height: 145px
}
#construction-remote-page .roleGrid {
gap: 20px
}
#construction-remote-page .roleCard {
padding-right: 18px
}
#construction-remote-page .roleCard h3 {
font-size: 20px
}
#construction-remote-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#construction-remote-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#construction-remote-page .workflowLead br {
display: none
}
#construction-remote-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#construction-remote-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#construction-remote-page .final .btn {
min-width: 210px
}
#construction-remote-page .logos {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#construction-remote-page .wrap {
width: calc(100% - 32px)
}
#construction-remote-page section {
padding: 49px 0
}
#construction-remote-page h2 {
font-size: 33px;
line-height: 1.15
}
#construction-remote-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#construction-remote-page .sectionHead {
margin-bottom: 27px
}
#construction-remote-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#construction-remote-page .hero {
padding: 25px 0 34px
}
#construction-remote-page .heroGrid {
gap: 21px
}
#construction-remote-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#construction-remote-page .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
#construction-remote-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#construction-remote-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#construction-remote-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#construction-remote-page .hero .micro {
font-size: 11px
}
#construction-remote-page .heroPills {
gap: 6px;
margin-top: 16px
}
#construction-remote-page .heroPills span {
font-size: 9px
}
#construction-remote-page .heroVisual {
max-width: 420px
}
#construction-remote-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#construction-remote-page .trust {
padding: 22px 0
}
#construction-remote-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#construction-remote-page .logos {
gap: 7px
}
#construction-remote-page .logo {
font-size: 11px;
min-height: 53px;
padding: 8px
}
#construction-remote-page .logo.dhl {
font-size: 21px
}
#construction-remote-page .logo.adobe {
font-size: 18px
}
#construction-remote-page .logo.golden {
font-size: 8px
}
#construction-remote-page .outcomes {
gap: 12px
}
#construction-remote-page .outcome {
padding: 19px
}
#construction-remote-page .outcome h3 {
font-size: 17px
}
#construction-remote-page .outcome p {
font-size: 13px
}
#construction-remote-page .feature {
gap: 27px
}
#construction-remote-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#construction-remote-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#construction-remote-page .fi {
font-size: 12px
}
#construction-remote-page .textLink {
font-size: 13px
}
#construction-remote-page .visual {
padding: 15px;
border-radius: 16px
}
#construction-remote-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#construction-remote-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#construction-remote-page .uiHeading .icon {
width: 18px;
height: 18px
}
#construction-remote-page .panelBar {
padding: 12px
}
#construction-remote-page .uiFoot {
font-size: 9px
}
#construction-remote-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#construction-remote-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#construction-remote-page .aiMini {
gap: 11px;
margin-top: 23px
}
#construction-remote-page .aiMini article {
padding: 16px
}
#construction-remote-page .aiMini h3 {
font-size: 15px
}
#construction-remote-page .aiMini p {
font-size: 12px
}
#construction-remote-page .aiNote {
font-size: 10px
}
#construction-remote-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#construction-remote-page .connectedCard {
padding: 23px
}
#construction-remote-page .connectedCard h3 {
margin: 15px 0 9px
}
#construction-remote-page .connectedCard p {
font-size: 14px
}
#construction-remote-page .handoffBand {
padding: 20px
}
#construction-remote-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#construction-remote-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#construction-remote-page .handoffBand small {
font-size: 11px
}
#construction-remote-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#construction-remote-page .featureGrid {
gap: 13px
}
#construction-remote-page .featureCard {
padding: 21px
}
#construction-remote-page .featureCard h3 {
font-size: 17px
}
#construction-remote-page .featureCard p {
font-size: 13px
}
#construction-remote-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#construction-remote-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#construction-remote-page .toolCard strong {
font-size: 15px
}
#construction-remote-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#construction-remote-page .toolCard:last-child .toolArrow {
top: 31px
}
#construction-remote-page .toolCard:last-child strong {
padding-right: 25px
}
#construction-remote-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#construction-remote-page .useCases {
gap: 13px
}
#construction-remote-page .useCase {
padding: 21px 18px
}
#construction-remote-page .useCase h3 {
font-size: 17px
}
#construction-remote-page .useCase p {
font-size: 13px
}
#construction-remote-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#construction-remote-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#construction-remote-page .roleCard:last-child {
padding-bottom: 0
}
#construction-remote-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#construction-remote-page .roleCard>strong {
font-size: 14px
}
#construction-remote-page .roleCard p {
font-size: 14px
}
#construction-remote-page .workflowBand {
padding: 28px 0
}
#construction-remote-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#construction-remote-page .workflowLead {
font-size: 18px
}
#construction-remote-page .workflowStep strong {
font-size: 14px
}
#construction-remote-page .workflowStep p {
font-size: 10px
}
#construction-remote-page .faq .sectionHead {
margin-bottom: 25px
}
#construction-remote-page details {
padding: 16px
}
#construction-remote-page .faqList {
gap: 10px
}
#construction-remote-page summary {
font-size: 14px;
gap: 14px
}
#construction-remote-page .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
#construction-remote-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#construction-remote-page .final h2 {
font-size: 32px
}
#construction-remote-page .final p {
font-size: 14px;
line-height: 1.8
}
#construction-remote-page .final .ey {
font-size: 9px
}
#construction-remote-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#construction-remote-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#construction-remote-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#construction-remote-page .outcomes,
#construction-remote-page .featureGrid,
#construction-remote-page .useCases {
grid-template-columns: 1fr
}
#construction-remote-page .outcome {
padding: 23px
}
#construction-remote-page .outcome h3 {
font-size: 18px
}
#construction-remote-page .outcome p {
font-size: 14px
}
#construction-remote-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#construction-remote-page .fi {
font-size: 13px
}
#construction-remote-page .aiMini {
grid-template-columns: 1fr
}
#construction-remote-page .aiMini h3 {
font-size: 17px
}
#construction-remote-page .aiMini p {
font-size: 13px
}
#construction-remote-page .aiMini article {
padding: 19px
}
#construction-remote-page .featureCard h3,
#construction-remote-page .useCase h3 {
font-size: 19px
}
#construction-remote-page .featureCard p,
#construction-remote-page .useCase p {
font-size: 14px
}
#construction-remote-page .toolsGrid {
grid-template-columns: 1fr
}
#construction-remote-page .toolCard,
#construction-remote-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#construction-remote-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#construction-remote-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#construction-remote-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#construction-remote-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#construction-remote-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#construction-remote-page .toolArrow,
#construction-remote-page .toolCard:last-child .toolArrow {
top: 30px
}
#construction-remote-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#construction-remote-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#construction-remote-page h2 {
font-size: 30px
}
#construction-remote-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#construction-remote-page .hero h1 {
font-size: 31px
}
#construction-remote-page .heroPills span {
font-size: 8px
}
#construction-remote-page .heroPills {
gap: 5px
}
#construction-remote-page .uiHeading {
font-size: 11px
}
#construction-remote-page .uiHeading>.pill {
font-size: 7px
}
#construction-remote-page .visual {
padding: 12px
}
#construction-remote-page .final {
padding: 26px 20px
}
#construction-remote-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#construction-remote-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#construction-remote-page section {
padding: 24px 0
}
#construction-remote-page .hero,
#construction-remote-page .soft {
background: #fff
}
#construction-remote-page .dark,
#construction-remote-page .workflowBand,
#construction-remote-page .final {
background: #fff;
color: #11283A
}
#construction-remote-page .dark h2,
#construction-remote-page .dark h3,
#construction-remote-page .final h2 {
color: #11283A
}
#construction-remote-page .dark p,
#construction-remote-page .final p {
color: #52697C
}
#construction-remote-page .btn {
display: none
}
#construction-remote-page .visual,
#construction-remote-page .outcome,
#construction-remote-page .featureCard,
#construction-remote-page details {
break-inside: avoid
}
#construction-remote-page .heroImage {
max-width: 380px
}
#construction-remote-page .heroVisual {
justify-self: center
}
}
.constructionRemoteSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.constructionRemoteSkip:focus {
top: 12px
}
#construction-remote-page .dark .textLink {
color: #FFF1BD
}
#construction-remote-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
} #construction-remote-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#construction-remote-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#construction-remote-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy)
}
#construction-remote-page .workflowStep,
#construction-remote-page .rwTop>div,
#construction-remote-page .rwJob,
#construction-remote-page .rwPerson>div {
min-width: 0
}
#construction-remote-page .featureCopy>p {
max-width: 580px
}
#construction-remote-page .toolCard strong {
padding-right: 12px
}
#construction-remote-page .pill.green {
background: var(--greenbg);
color: #116746
}
#construction-remote-page .rwTop {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
border-bottom: 1px solid var(--line)
}
#construction-remote-page .rwTop>div {
flex: 1
}
#construction-remote-page .rwTop strong {
display: block;
font-size: 15px;
color: var(--navy);
line-height: 1.4
}
#construction-remote-page .rwTop small {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.65;
margin-top: 4px
}
#construction-remote-page .rwGlyph {
display: grid;
place-items: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
background: var(--yellowsoft);
color: #87680C;
border-radius: 10px
}
#construction-remote-page .rwFoot {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 14px 17px;
border-top: 1px solid var(--line);
background: #F5FBFF;
color: #557183;
font-size: 10px;
line-height: 1.7
}
#construction-remote-page .rwFoot .icon {
width: 16px;
height: 16px;
color: var(--green);
margin-top: 2px
}
#construction-remote-page .rwDispatch {
padding: 0 17px
}
#construction-remote-page .rwAssignment {
display: grid;
grid-template-columns: 1fr 1.2fr auto;
gap: 12px;
align-items: center;
padding: 19px 0;
border-bottom: 1px solid var(--line)
}
#construction-remote-page .rwAssignment:last-child {
border-bottom: 0
}
#construction-remote-page .rwPerson {
display: flex;
align-items: center;
gap: 8px;
min-width: 0
}
#construction-remote-page .rwAvatar {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
background: #EAF4FA;
border-radius: 50%;
font-size: 9px;
font-weight: 800;
color: #376981
}
#construction-remote-page .rwPerson strong,
#construction-remote-page .rwJob strong {
font-size: 11px;
line-height: 1.5;
display: block;
color: var(--navy)
}
#construction-remote-page .rwPerson small {
font-size: 9px;
line-height: 1.5;
display: block;
color: var(--muted);
margin-top: 3px
}
#construction-remote-page .rwJob small {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
line-height: 1.5;
color: #607A8B;
margin-top: 5px
}
#construction-remote-page .rwJob .icon {
width: 12px;
height: 12px
}
#construction-remote-page .rwCallout {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border: 1px solid #D2E7DB;
border-radius: 11px;
background: #F0FAF5;
margin-top: 14px
}
#construction-remote-page .rwCallout>.icon {
color: var(--green);
width: 24px;
height: 24px
}
#construction-remote-page .rwCallout strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: #176549
}
#construction-remote-page .rwCallout span {
display: block;
font-size: 10px;
color: #56796A;
line-height: 1.7;
margin-top: 4px
}
#construction-remote-page .rwMobileScene {
display: grid;
grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
gap: 20px;
align-items: center
}
#construction-remote-page .rwDevice {
width: 100%;
max-width: 200px;
background: #fff;
border: 6px solid #0C1E2A;
border-radius: 28px;
overflow: hidden;
position: relative;
padding-bottom: 23px;
min-width: 0
}
#construction-remote-page .rwDeviceStatus {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 8px;
color: #102E43;
padding: 10px 11px;
line-height: 1.4;
font-weight: 800
}
#construction-remote-page .rwDeviceStatus i {
display: block;
width: 40px;
height: 10px;
background: #0C1E2A;
border-radius: 8px
}
#construction-remote-page .rwDeviceHead {
padding: 13px 12px;
background: #EAF8FF;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line)
}
#construction-remote-page .rwDeviceHead>span {
font-size: 8px;
color: #347EA2;
font-weight: 750;
letter-spacing: .05em
}
#construction-remote-page .rwDeviceHead strong {
display: block;
font-size: 15px;
line-height: 1.4;
color: var(--navy);
margin-top: 4px
}
#construction-remote-page .rwDeviceHead small {
display: block;
font-size: 9px;
line-height: 1.5;
color: #5D7A8C;
margin-top: 5px
}
#construction-remote-page .rwDeviceBody {
padding: 13px 12px
}
#construction-remote-page .rwDeviceLabel {
font-size: 9px;
line-height: 1.5;
color: #365F76;
font-weight: 800
}
#construction-remote-page .rwDeviceBody p {
font-size: 10px;
color: #627D8C;
line-height: 1.7;
margin-top: 6px;
margin-bottom: 14px
}
#construction-remote-page .rwTask {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
line-height: 1.5;
color: #496B7D;
padding: 8px 0;
border-top: 1px solid var(--line)
}
#construction-remote-page .rwTask .icon {
width: 13px;
height: 13px;
color: #14835B
}
#construction-remote-page .rwMockAction {
padding: 10px 7px;
margin-top: 9px;
background: var(--yellow);
color: #143A4F;
border-radius: 7px;
font-size: 10px;
font-weight: 750;
text-align: center;
line-height: 1.5
}
#construction-remote-page .rwDeviceFine {
display: block;
text-align: center;
font-size: 7px;
line-height: 1.6;
color: var(--muted);
margin-top: 7px
}
#construction-remote-page .rwHomebar {
position: absolute;
bottom: 9px;
left: calc(50% - 25px);
width: 50px;
height: 3px;
border-radius: 5px;
background: #274D62
}
#construction-remote-page .rwContextStack {
display: grid;
gap: 13px;
min-width: 0
}
#construction-remote-page .rwContext {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 17px
}
#construction-remote-page .rwContext>.icon {
color: var(--navy);
width: 24px;
height: 24px;
margin-bottom: 12px
}
#construction-remote-page .rwContext strong {
display: block;
font-size: 13px;
line-height: 1.5;
color: var(--navy)
}
#construction-remote-page .rwContext p {
font-size: 11px;
color: #607B8C;
line-height: 1.7;
margin-top: 7px
}
#construction-remote-page .rwContextRef {
display: block;
margin-top: 11px;
border-top: 1px solid var(--line);
padding-top: 9px;
font-size: 10px;
line-height: 1.5;
font-weight: 700;
color: #267C9F
}
#construction-remote-page .rwFileTag {
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
line-height: 1.5;
color: #436D84;
background: #F2F8FC;
border-radius: 6px;
padding: 8px;
margin-top: 11px;
overflow-wrap: anywhere
}
#construction-remote-page .rwFileTag .icon {
width: 14px;
height: 14px
}
#construction-remote-page .rwSyncGrid {
display: grid;
grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
gap: 9px;
align-items: center
}
#construction-remote-page .rwSyncCard {
padding: 17px 14px;
border: 1px solid #E9D69E;
border-radius: 12px;
background: #FFFCF1;
min-width: 0
}
#construction-remote-page .rwSyncCard.online {
background: #F1FAF5;
border-color: #C9E4D5
}
#construction-remote-page .rwSyncTop {
display: flex;
gap: 7px;
align-items: center;
font-size: 9px;
line-height: 1.5;
font-weight: 700;
color: #816613;
margin-bottom: 16px
}
#construction-remote-page .online .rwSyncTop {
color: #217153
}
#construction-remote-page .rwSyncTop .icon {
width: 21px;
height: 21px
}
#construction-remote-page .rwSyncCard>strong {
font-size: 17px;
line-height: 1.4;
display: block;
color: #173E53;
letter-spacing: -.02em
}
#construction-remote-page .rwSyncCard>p {
font-size: 11px;
line-height: 1.75;
color: #637F8C;
margin-top: 10px;
margin-bottom: 15px
}
#construction-remote-page .rwSaved {
font-size: 10px;
line-height: 1.5;
color: #4D6A7A;
display: flex;
gap: 7px;
align-items: center;
margin-top: 10px
}
#construction-remote-page .rwSaved .icon {
width: 15px;
height: 15px;
color: #628498
}
#construction-remote-page .rwSyncCard>.pill {
margin-top: 21px
}
#construction-remote-page .rwSyncArrow {
display: grid;
place-items: center;
color: #6C92A5
}
#construction-remote-page .rwSyncArrow .icon {
width: 20px;
height: 20px
}
#construction-remote-page .rwConnectionNote {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 14px;
border-radius: 10px;
background: #0D2939;
color: #D8E8F0;
margin-top: 16px;
font-size: 10px;
line-height: 1.8
}
#construction-remote-page .rwConnectionNote .icon {
width: 18px;
height: 18px;
color: var(--yellow);
margin-top: 1px
}
#construction-remote-page .rwEvidenceBody {
padding: 17px
}
#construction-remote-page .rwTimeStrip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
background: #F3F9FC;
border: 1px solid var(--line);
border-radius: 9px;
padding: 13px 12px
}
#construction-remote-page .rwTimeStrip>div+div {
border-left: 1px solid var(--line);
padding-left: 12px
}
#construction-remote-page .rwTimeStrip span {
display: block;
font-size: 9px;
line-height: 1.5;
color: #5A7B8D
}
#construction-remote-page .rwTimeStrip strong {
font-size: 21px;
line-height: 1.3;
font-weight: 750;
display: block;
color: var(--navy);
margin-top: 6px;
letter-spacing: -.03em
}
#construction-remote-page .rwTimeStrip small {
font-size: 11px;
letter-spacing: 0
}
#construction-remote-page .rwRecordLabel {
font-size: 10px;
font-weight: 800;
color: #40677D;
line-height: 1.5;
margin-top: 20px;
margin-bottom: 8px
}
#construction-remote-page .rwWorkNote {
font-size: 11px;
line-height: 1.85;
color: #5B7788
}
#construction-remote-page .rwAttachments {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin: 15px 0
}
#construction-remote-page .rwAttachments>span {
padding: 13px 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: #F8FCFE;
font-size: 9px;
color: #4B758B;
line-height: 1.6;
display: flex;
gap: 7px;
align-items: center;
overflow-wrap: anywhere
}
#construction-remote-page .rwAttachments .icon {
width: 20px;
height: 20px;
color: #257BA6
}
#construction-remote-page .rwRecordRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding: 11px 0;
font-size: 10px;
line-height: 1.6
}
#construction-remote-page .rwRecordRow:last-child {
padding-bottom: 0
}
#construction-remote-page .rwRecordRow>span {
display: flex;
align-items: center;
gap: 7px;
color: #5A788B
}
#construction-remote-page .rwRecordRow .icon {
width: 15px;
height: 15px;
color: #377F9D
}
#construction-remote-page .rwRecordRow b {
font-size: 10px;
color: var(--navy);
font-weight: 650;
text-align: right
}
#construction-remote-page .rwAiPanel {
background: #fff;
border: 1px solid #345163;
border-radius: 16px;
overflow: hidden;
color: var(--ink)
}
#construction-remote-page .rwAiHead {
display: flex;
gap: 12px;
align-items: center;
padding: 20px;
background: #EAF8FF;
border-bottom: 1px solid #CCE5F2
}
#construction-remote-page .rwAiHead>.icon {
color: #007FC5;
width: 30px;
height: 30px
}
#construction-remote-page .rwAiHead strong {
display: block;
font-size: 15px;
color: var(--navy);
line-height: 1.5
}
#construction-remote-page .rwAiHead small {
display: block;
font-size: 10px;
color: #54788B;
line-height: 1.6;
margin-top: 3px
}
#construction-remote-page .rwAiBody {
padding: 23px
}
#construction-remote-page .rwPrompt {
margin-left: 24px;
padding: 15px;
border: 1px solid #E8D99E;
border-radius: 11px 11px 2px 11px;
background: #FFF8DC;
font-size: 12px;
color: #796229;
line-height: 1.85
}
#construction-remote-page .rwAiReply {
margin-top: 22px;
border: 1px solid var(--line);
background: #FAFDFE;
border-radius: 11px;
padding: 18px
}
#construction-remote-page .rwDraftLabel {
display: block;
font-size: 8px;
color: #856928;
font-weight: 750;
line-height: 1.6;
letter-spacing: .06em;
margin-bottom: 10px
}
#construction-remote-page .rwAiReply>strong {
display: block;
font-size: 16px;
line-height: 1.5;
color: var(--navy)
}
#construction-remote-page .rwAiReply p {
font-size: 12px;
color: #55768B;
line-height: 1.9;
margin-top: 9px
}
#construction-remote-page .rwAiEvidence {
display: flex;
gap: 8px;
align-items: center;
margin-top: 17px;
border-top: 1px solid var(--line);
padding-top: 12px;
font-size: 9px;
color: #57788A;
line-height: 1.65
}
#construction-remote-page .rwAiEvidence .icon {
width: 17px;
height: 17px;
color: #2D7E9E
}
#construction-remote-page .rwAiReview {
display: flex;
gap: 7px;
align-items: center;
font-size: 10px;
color: #56788B;
line-height: 1.8;
margin-top: 17px
}
#construction-remote-page .rwAiReview .icon {
width: 16px;
height: 16px;
color: #14815D
}
#construction-remote-page .rwAiFooter {
padding: 16px 20px;
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #276E54;
background: #EAF8F0;
border-top: 1px solid #C8E4D4;
line-height: 1.8
}
#construction-remote-page .rwAiFooter .icon {
width: 19px;
height: 19px
}
@media(max-width:1150px) and (min-width:981px) {
#construction-remote-page .rwAssignment {
grid-template-columns: 1fr 1.1fr;
gap: 8px
}
#construction-remote-page .rwAssignment>.pill {
grid-column: 2;
justify-self: start
}
#construction-remote-page .rwMobileScene {
grid-template-columns: minmax(0, 165px) minmax(0, 1fr);
gap: 13px
}
#construction-remote-page .rwContext {
padding: 13px
}
#construction-remote-page .rwSyncGrid {
gap: 6px;
grid-template-columns: 1fr 16px 1fr
}
#construction-remote-page .rwSyncCard {
padding: 15px 11px
}
#construction-remote-page .rwAttachments>span {
padding: 11px 8px;
font-size: 8px
}
}
@media(max-width:980px) {
#construction-remote-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#construction-remote-page .rwMobileScene {
grid-template-columns: minmax(0, 205px) minmax(0, 1fr);
gap: 25px
}
#construction-remote-page .rwContext p {
font-size: 12px
}
#construction-remote-page .rwContext strong {
font-size: 14px
}
}
@media(max-width:640px) {
#construction-remote-page .supportStrip {
gap: 7px
}
#construction-remote-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#construction-remote-page .supportStrip .icon {
width: 16px;
height: 16px
}
#construction-remote-page .rwTop {
padding: 14px;
gap: 9px
}
#construction-remote-page .rwTop strong {
font-size: 13px
}
#construction-remote-page .rwTop small {
font-size: 9px
}
#construction-remote-page .rwTop>.pill {
font-size: 7px;
padding: 4px 6px
}
#construction-remote-page .rwGlyph {
height: 34px;
width: 34px;
flex-basis: 34px
}
#construction-remote-page .rwGlyph .icon {
width: 21px;
height: 21px
}
#construction-remote-page .rwDispatch {
padding: 0 13px
}
#construction-remote-page .rwAssignment {
grid-template-columns: 1fr 1.1fr;
gap: 8px;
padding: 16px 0
}
#construction-remote-page .rwAssignment>.pill {
grid-column: 2;
justify-self: start
}
#construction-remote-page .rwPerson strong,
#construction-remote-page .rwJob strong {
font-size: 11px
}
#construction-remote-page .rwPerson small,
#construction-remote-page .rwJob small {
font-size: 9px
}
#construction-remote-page .rwAvatar {
width: 27px;
height: 27px;
flex-basis: 27px;
font-size: 8px
}
#construction-remote-page .rwCallout {
padding: 14px;
gap: 9px
}
#construction-remote-page .rwCallout strong {
font-size: 11px
}
#construction-remote-page .rwCallout span,
#construction-remote-page .rwFoot {
font-size: 9px
}
#construction-remote-page .rwMobileScene {
grid-template-columns: minmax(0, 164px) minmax(0, 1fr);
gap: 13px
}
#construction-remote-page .rwContext {
padding: 13px
}
#construction-remote-page .rwContext strong {
font-size: 12px
}
#construction-remote-page .rwContext p {
font-size: 10px
}
#construction-remote-page .rwFileTag {
font-size: 8px;
padding: 7px
}
#construction-remote-page .rwDeviceHead strong {
font-size: 13px
}
#construction-remote-page .rwDeviceHead small {
font-size: 8px
}
#construction-remote-page .rwDeviceBody {
padding: 11px 10px
}
#construction-remote-page .rwDeviceBody p {
font-size: 9px
}
#construction-remote-page .rwTask {
font-size: 8px
}
#construction-remote-page .rwSyncGrid {
grid-template-columns: 1fr;
gap: 11px
}
#construction-remote-page .rwSyncArrow {
transform: rotate(90deg);
height: 20px
}
#construction-remote-page .rwSyncCard {
padding: 18px
}
#construction-remote-page .rwSyncTop {
font-size: 10px;
margin-bottom: 10px
}
#construction-remote-page .rwSyncCard>strong {
font-size: 18px
}
#construction-remote-page .rwSyncCard>p {
font-size: 12px;
margin-bottom: 14px
}
#construction-remote-page .rwSaved {
font-size: 11px
}
#construction-remote-page .rwSyncCard>.pill {
font-size: 9px;
margin-top: 17px
}
#construction-remote-page .rwConnectionNote {
font-size: 10px
}
#construction-remote-page .rwEvidenceBody {
padding: 14px
}
#construction-remote-page .rwTimeStrip {
padding: 11px 9px;
gap: 8px
}
#construction-remote-page .rwTimeStrip>div+div {
padding-left: 8px
}
#construction-remote-page .rwTimeStrip strong {
font-size: 21px
}
#construction-remote-page .rwTimeStrip span {
font-size: 8px
}
#construction-remote-page .rwAttachments {
grid-template-columns: 1fr;
gap: 8px
}
#construction-remote-page .rwAttachments>span {
font-size: 10px;
padding: 11px
}
#construction-remote-page .rwRecordRow {
font-size: 9px;
gap: 8px
}
#construction-remote-page .rwRecordRow b {
font-size: 9px
}
#construction-remote-page .rwWorkNote {
font-size: 11px
}
#construction-remote-page .rwAiHead {
padding: 16px;
gap: 9px
}
#construction-remote-page .rwAiHead strong {
font-size: 13px
}
#construction-remote-page .rwAiHead small {
font-size: 9px
}
#construction-remote-page .rwAiBody {
padding: 16px
}
#construction-remote-page .rwPrompt {
margin-left: 16px;
padding: 12px;
font-size: 11px
}
#construction-remote-page .rwAiReply {
padding: 15px
}
#construction-remote-page .rwAiReply>strong {
font-size: 15px
}
#construction-remote-page .rwAiReply p {
font-size: 11px
}
#construction-remote-page .rwAiEvidence {
font-size: 8px
}
#construction-remote-page .rwAiReview {
font-size: 9px
}
#construction-remote-page .rwAiFooter {
font-size: 9px;
padding: 14px
}
}
@media(max-width:420px) {
#construction-remote-page .rwMobileScene {
grid-template-columns: 1fr;
gap: 16px
}
#construction-remote-page .rwDevice {
width: 210px;
max-width: 100%;
margin: auto
}
#construction-remote-page .rwDeviceHead strong {
font-size: 15px
}
#construction-remote-page .rwDeviceHead small {
font-size: 10px
}
#construction-remote-page .rwDeviceBody p {
font-size: 11px
}
#construction-remote-page .rwTask {
font-size: 10px
}
#construction-remote-page .rwContextStack {
grid-template-columns: 1fr 1fr;
gap: 10px
}
#construction-remote-page .rwContext {
padding: 12px
}
#construction-remote-page .rwContext strong {
font-size: 12px
}
#construction-remote-page .rwContext p {
font-size: 11px
}
#construction-remote-page .rwFileTag {
font-size: 8px;
display: block
}
#construction-remote-page .rwFileTag .icon {
display: none
}
}
@media(max-width:360px) {
#construction-remote-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#construction-remote-page .rwPerson {
gap: 6px
}
#construction-remote-page .rwPerson strong,
#construction-remote-page .rwJob strong {
font-size: 10px
}
#construction-remote-page .rwDispatch {
padding: 0 11px
}
#construction-remote-page .rwTop>.pill {
display: none
}
#construction-remote-page .rwAvatar {
display: none
}
#construction-remote-page .rwContextStack {
grid-template-columns: 1fr
}
#construction-remote-page .rwContext strong {
font-size: 13px
}
#construction-remote-page .rwContext p {
font-size: 12px
}
#construction-remote-page .rwFileTag {
font-size: 10px
}
#construction-remote-page .rwTimeStrip strong {
font-size: 19px
}
#construction-remote-page .rwTimeStrip span {
font-size: 7px
}
#construction-remote-page .rwAiBody {
padding: 13px
}
#construction-remote-page .rwPrompt {
margin-left: 0
}
}
@media (max-width: 767px) {
#construction-remote-page .heroVisual {
max-width: 420px;
display: none;
}
}  .construction-project-management-software { --brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: 0 18px 48px rgba(6, 59, 92, 0.11);
--radius: 20px;
--max: 1320px;
}
.construction-project-management-software .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
.construction-project-management-software .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.construction-project-management-software .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.construction-project-management-software .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: 0 8px 20px rgba(0, 168, 248, .23);
}
.construction-project-management-software .brand span {
color: var(--brand);
}
.construction-project-management-software .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.construction-project-management-software .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.construction-project-management-software .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: 0 10px 25px rgba(0, 168, 248, .25);
}
.construction-project-management-software .button.primary:hover {
background: var(--brand-dark);
}
.construction-project-management-software .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.construction-project-management-software .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.construction-project-management-software .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.construction-project-management-software .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.construction-project-management-software .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.construction-project-management-software .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.construction-project-management-software .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.construction-project-management-software .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: 0 10px 25px rgba(11, 11, 11, .18);
}
.construction-project-management-software .hero .button.primary:hover {
background: var(--black-soft);
}
.construction-project-management-software .hero .button.secondary {
border-color: var(--yellow);
box-shadow: inset 0 -3px 0 var(--yellow);
}
.construction-project-management-software .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: var(--shadow);
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.construction-project-management-software .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
} .construction-project-management-software .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.construction-project-management-software .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.construction-project-management-software .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.construction-project-management-software .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
} .construction-project-management-software .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.construction-project-management-software .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.construction-project-management-software .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.construction-project-management-software .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.construction-project-management-software .ratingLead strong {
display: block;
font-size: 20px;
}
.construction-project-management-software .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.construction-project-management-software .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.construction-project-management-software .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.construction-project-management-software .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.construction-project-management-software .ratingItem span {
color: #CFCFCF;
font-size: 11px;
} .construction-project-management-software .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.construction-project-management-software .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.construction-project-management-software .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.construction-project-management-software .aiJourney h2 {
color: #fff;
}
.construction-project-management-software .aiJourney .sectionHead p {
color: #D7D7D7;
}
.construction-project-management-software .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.construction-project-management-software .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.construction-project-management-software .aiStep::after {
content: '→';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.construction-project-management-software .aiStep:last-child::after {
display: none;
}
.construction-project-management-software .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.construction-project-management-software .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.construction-project-management-software .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.construction-project-management-software .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.construction-project-management-software .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.construction-project-management-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.construction-project-management-software .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.construction-project-management-software .outcome span {
color: var(--muted);
font-size: 14px;
}
.construction-project-management-software .capability {
background: #fff;
}
.construction-project-management-software .capability.alt {
background: var(--sky-2);
}
.construction-project-management-software .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.construction-project-management-software .twoCol.reverse .visual {
order: 2;
}
.construction-project-management-software .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.construction-project-management-software .visual .placeholder {
min-height: 355px;
}
.construction-project-management-software .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.construction-project-management-software .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.construction-project-management-software details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.construction-project-management-software details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.construction-project-management-software details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.construction-project-management-software details.capabilityMore summary::after {
content: '+';
font-size: 18px;
line-height: 1;
}
.construction-project-management-software details.capabilityMore[open] summary::after {
content: '−';
}
.construction-project-management-software details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.construction-project-management-software .construction-project-management-software .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.construction-project-management-software .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.construction-project-management-software .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.construction-project-management-software .darkSection h2,
.construction-project-management-software .darkSection h3 {
color: #fff;
}
.construction-project-management-software .darkSection .sectionHead p,
.construction-project-management-software .darkSection .copy p {
color: #D7D7D7;
}
.construction-project-management-software .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.construction-project-management-software .darkSection .featureItem {
color: #F7F7F7;
}
.construction-project-management-software .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.construction-project-management-software .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.construction-project-management-software .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.construction-project-management-software .darkSection .placeholder small {
color: #D0D0D0;
}
.construction-project-management-software .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.construction-project-management-software .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, .05);
}
.construction-project-management-software .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: 0 6px 14px rgba(255, 201, 40, .22);
}
.construction-project-management-software .card p {
color: var(--muted);
margin: 12px 0 0;
}
.construction-project-management-software .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.construction-project-management-software .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.construction-project-management-software .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.construction-project-management-software .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.construction-project-management-software .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.construction-project-management-software .benefitBand h2 {
color: #fff;
}
.construction-project-management-software .benefitBand .sectionHead p {
color: #D5D5D5;
}
.construction-project-management-software .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.construction-project-management-software .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.construction-project-management-software .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.construction-project-management-software .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.construction-project-management-software .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.construction-project-management-software .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.construction-project-management-software .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.construction-project-management-software .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.construction-project-management-software .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.construction-project-management-software .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.construction-project-management-software .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.construction-project-management-software .faq {
max-width: 900px;
}
.construction-project-management-software details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.construction-project-management-software .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: var(--shadow);
border-top: 5px solid var(--yellow);
}
.construction-project-management-software .ctaPanel h2 {
color: #fff;
}
.construction-project-management-software .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.construction-project-management-software .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.construction-project-management-software .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.construction-project-management-software .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
} .construction-project-management-software .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 10px 28px rgba(6, 59, 92, .06);
}
.construction-project-management-software .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.construction-project-management-software .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.construction-project-management-software .inlineCta.dark h3 {
color: #fff;
}
.construction-project-management-software .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.construction-project-management-software .inlineCta.dark p {
color: #D8D8D8;
}
.construction-project-management-software .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.construction-project-management-software .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.construction-project-management-software .button.yellow:hover {
background: #FFD84D;
}
.construction-project-management-software .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.construction-project-management-software .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.construction-project-management-software .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.construction-project-management-software .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
@media (max-width: 980px) {
.construction-project-management-software .ratingSectionGrid {
grid-template-columns: 1fr;
}
.construction-project-management-software .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.construction-project-management-software .heroGrid,
.construction-project-management-software .twoCol,
.construction-project-management-software .ctaPanel {
grid-template-columns: 1fr;
}
.construction-project-management-software .twoCol.reverse .visual {
order: initial;
}
.construction-project-management-software .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.construction-project-management-software .ratingGrid,
.construction-project-management-software .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.construction-project-management-software .ratingLead,
.construction-project-management-software .awardLead {
grid-column: 1/-1;
text-align: center;
}
.construction-project-management-software .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.construction-project-management-software .aiStep:nth-child(3)::after,
.construction-project-management-software .aiStep:last-child::after {
display: none;
}
.construction-project-management-software .outcomeGrid,
.construction-project-management-software .challengeGrid,
.construction-project-management-software .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.construction-project-management-software .cards,
.construction-project-management-software .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.construction-project-management-software .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.navlinks {
display: none;
}
}
@media (max-width: 640px) {
.construction-project-management-software .awardProofGrid {
grid-template-columns: 1fr;
}
.construction-project-management-software .wrap {
width: min(var(--max), calc(100% - 24px));
}
.construction-project-management-software .hero {
padding: 58px 0 52px;
}
.construction-project-management-software .aiFlow {
grid-template-columns: 1fr;
}
.construction-project-management-software .aiStep::after {
display: none;
}
.construction-project-management-software .logoRow,
.construction-project-management-software .ratingGrid,
.construction-project-management-software .awardGrid,
.construction-project-management-software .outcomeGrid,
.construction-project-management-software .challengeGrid,
.construction-project-management-software .benefitGrid,
.construction-project-management-software .cards,
.construction-project-management-software .proofCards,
.construction-project-management-software .integrationGrid,
.construction-project-management-software .featureList {
grid-template-columns: 1fr;
}
.construction-project-management-software .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.construction-project-management-software .ctaPanel {
padding: 34px 24px;
}
.construction-project-management-software .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.construction-project-management-software .inlineCtaActions {
width: 100%;
}
.construction-project-management-software .inlineCtaActions .button {
flex: 1;
}
}
.construction-project-management-software .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
.construction-project-management-software .constructionPage .darkSection h2,
.construction-project-management-software .constructionPage .darkSection h3,
.construction-project-management-software .constructionPage .aiJourney h2,
.construction-project-management-software .constructionPage .benefitBand h2,
.construction-project-management-software .constructionPage .ctaPanel h2,
.construction-project-management-software .constructionPage .inlineCta.dark h3 {
color: #fff;
}
.construction-project-management-software .wrap>*,
.construction-project-management-software .heroGrid>*,
.construction-project-management-software .twoCol>*,
.construction-project-management-software .ctaPanel>* {
min-width: 0;
}
.construction-project-management-software .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.construction-project-management-software .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.construction-project-management-software .skipLink:focus {
transform: none;
}
.construction-project-management-software a:focus-visible,
.construction-project-management-software summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.darkSection a:focus-visible,
.darkSection summary:focus-visible,
.ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.construction-project-management-software .topbar {
background: #fff;
backdrop-filter: none;
}
.construction-project-management-software .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.construction-project-management-software .brandName {
display: inline;
color: var(--navy) !important;
}
.construction-project-management-software .brandName>span {
color: var(--brand-dark);
}
.construction-project-management-software .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.construction-project-management-software .brandMark .icon {
width: 21px;
height: 21px;
}
.construction-project-management-software .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.construction-project-management-software .navlinks a:hover {
color: var(--brand-dark);
}
.construction-project-management-software .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.construction-project-management-software .button {
gap: 9px;
text-align: center;
box-shadow: none !important;
}
.construction-project-management-software .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.construction-project-management-software .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.construction-project-management-software .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.construction-project-management-software .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.construction-project-management-software .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.construction-project-management-software .heroVisual {
width: 100%;
min-width: 0;
}
.construction-project-management-software .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.construction-project-management-software .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.construction-project-management-software .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.construction-project-management-software .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.construction-project-management-software .clientBand {
padding: 27px 0;
}
.construction-project-management-software .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.construction-project-management-software .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.construction-project-management-software .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.construction-project-management-software .logoBox.wide {
font-size: 12px;
}
.construction-project-management-software .logoBox small {
display: block;
font-size: 10px;
}
.construction-project-management-software .sectionHead {
margin-bottom: 36px;
}
.construction-project-management-software .eyebrow {
line-height: 1.5;
}
.construction-project-management-software .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.construction-project-management-software .aiStep {
min-height: 162px;
}
.construction-project-management-software .aiStep strong {
line-height: 1.35;
}
.construction-project-management-software .aiStep span {
line-height: 1.65;
}
.construction-project-management-software .aiCallout {
margin-top: 24px;
}
.construction-project-management-software .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.construction-project-management-software .construction-project-management-software .outcome>.icon {
color: var(--navy);
} .construction-project-management-software .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.construction-project-management-software .awardItem>.icon {
color: var(--navy);
}
.construction-project-management-software .awardItem:hover {
border-color: var(--brand-dark);
}
.construction-project-management-software .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.construction-project-management-software .twoCol.reverse .visual {
order: -1;
}
.construction-project-management-software .copy .eyebrow {
margin-bottom: 17px;
}
.construction-project-management-software .copy p {
font-size: 16px;
line-height: 1.85;
}
.construction-project-management-software .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.construction-project-management-software .featureList {
gap: 13px 18px;
}
.construction-project-management-software .featureItem {
font-size: 13px;
line-height: 1.6;
}
.construction-project-management-software .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.construction-project-management-software .check .icon {
width: 14px;
height: 14px;
}
.construction-project-management-software details.capabilityMore {
margin-bottom: 0;
}
.construction-project-management-software .capabilityMore summary {
min-height: 34px;
}
.construction-project-management-software .capabilityMore .moreGrid {
gap: 13px 18px;
}
.construction-project-management-software .textCta {
font-size: 14px;
}
.construction-project-management-software .visual {
min-width: 0;
}
.construction-project-management-software .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.construction-project-management-software .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.construction-project-management-software .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.construction-project-management-software .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.construction-project-management-software .panelBody {
padding: 20px;
}
.construction-project-management-software .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.construction-project-management-software .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.construction-project-management-software .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.construction-project-management-software .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.construction-project-management-software .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.construction-project-management-software .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.construction-project-management-software .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.construction-project-management-software .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.construction-project-management-software .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.construction-project-management-software .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.construction-project-management-software .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.construction-project-management-software .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.construction-project-management-software .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.construction-project-management-software .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.construction-project-management-software .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.construction-project-management-software .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.construction-project-management-software .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.construction-project-management-software .miniStats span {
font-size: 9px;
color: var(--muted);
}
.construction-project-management-software .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.construction-project-management-software .dataRow:last-child {
border-bottom: 0;
}
.construction-project-management-software .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.construction-project-management-software .rowIcon .icon {
width: 19px;
height: 19px;
}
.construction-project-management-software .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.construction-project-management-software .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.construction-project-management-software .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.construction-project-management-software .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.construction-project-management-software .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.construction-project-management-software .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.construction-project-management-software .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.construction-project-management-software .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.construction-project-management-software .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.construction-project-management-software .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.construction-project-management-software .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.construction-project-management-software .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.construction-project-management-software .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.construction-project-management-software .mobileAccount {
text-align: center;
padding: 13px 0;
}
.construction-project-management-software .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.construction-project-management-software .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.construction-project-management-software .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.construction-project-management-software .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.construction-project-management-software .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.construction-project-management-software .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.construction-project-management-software .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
.construction-project-management-software .phoneDevice .rowCopy strong {
font-size: 9px;
}
.construction-project-management-software .phoneDevice .rowCopy small {
font-size: 7px;
}
.construction-project-management-software .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.construction-project-management-software .mobileSide {
display: grid;
gap: 10px;
}
.construction-project-management-software .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.construction-project-management-software .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.construction-project-management-software .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.construction-project-management-software .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.construction-project-management-software .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.construction-project-management-software .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.construction-project-management-software .darkSection .panelHead>strong {
color: #fff;
}
.construction-project-management-software .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.construction-project-management-software .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.construction-project-management-software .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.construction-project-management-software .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.construction-project-management-software .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.construction-project-management-software .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.construction-project-management-software .promptList {
display: grid;
gap: 10px;
}
.construction-project-management-software .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.construction-project-management-software .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.construction-project-management-software .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.construction-project-management-software .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.construction-project-management-software .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.construction-project-management-software .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.construction-project-management-software .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.construction-project-management-software .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.construction-project-management-software .quoteTable th,
.construction-project-management-software .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.construction-project-management-software .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.construction-project-management-software .quoteTable td:first-child {
width: 64%;
}
.construction-project-management-software .quoteTable th:last-child,
.construction-project-management-software .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.construction-project-management-software .quoteTable strong {
font-size: 11px;
}
.construction-project-management-software .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.construction-project-management-software .quoteTable tfoot {
background: #F5FBFF;
}
.construction-project-management-software .quoteTable tfoot th {
font-size: 10px;
}
.construction-project-management-software .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.construction-project-management-software .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.construction-project-management-software .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.construction-project-management-software .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.construction-project-management-software .orderJourney {
margin: 20px 0;
}
.construction-project-management-software .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.construction-project-management-software .journeyRow:before {
content: '';
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.construction-project-management-software .journeyRow:last-child:before {
display: none;
}
.construction-project-management-software .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.construction-project-management-software .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.construction-project-management-software .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.construction-project-management-software .journeyRow strong {
font-size: 12px;
display: block;
}
.construction-project-management-software .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.construction-project-management-software .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.construction-project-management-software .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.construction-project-management-software .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.construction-project-management-software .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.construction-project-management-software .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.construction-project-management-software .inventoryIntro strong {
display: block;
font-size: 16px;
}
.construction-project-management-software .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.construction-project-management-software .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.construction-project-management-software .availabilityCard span {
font-size: 9px;
display: block;
}
.construction-project-management-software .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.construction-project-management-software .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.construction-project-management-software .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.construction-project-management-software .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.construction-project-management-software .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.construction-project-management-software .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.construction-project-management-software .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.construction-project-management-software .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.construction-project-management-software .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.construction-project-management-software .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.construction-project-management-software .customerTimeline .dataRow {
border-color: #353535;
}
.construction-project-management-software .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.construction-project-management-software .customerTimeline strong {
color: #fff;
}
.construction-project-management-software .customerTimeline small {
color: #BFBFBF;
}
.construction-project-management-software .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.construction-project-management-software .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.construction-project-management-software .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.construction-project-management-software .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.construction-project-management-software .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.construction-project-management-software .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.construction-project-management-software .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.construction-project-management-software .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.construction-project-management-software .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.construction-project-management-software .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.construction-project-management-software .chartTitle strong {
font-size: 12px;
}
.construction-project-management-software .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.construction-project-management-software .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.construction-project-management-software .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.construction-project-management-software .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.construction-project-management-software .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.construction-project-management-software .inlineCta {
margin-top: 0;
box-shadow: none;
}
.construction-project-management-software .inlineCtaActions {
max-width: 42%;
}
.construction-project-management-software .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.construction-project-management-software .inlineCta h3 {
line-height: 1.35;
}
.construction-project-management-software .card {
box-shadow: none;
}
.construction-project-management-software .cardIcon {
box-shadow: none;
}
.construction-project-management-software .card h3 {
font-size: 22px;
}
.construction-project-management-software .card p {
font-size: 14px;
line-height: 1.8;
}
.construction-project-management-software .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.construction-project-management-software .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.construction-project-management-software .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.construction-project-management-software .ratingBand {
padding: 34px 0;
}
.construction-project-management-software .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.construction-project-management-software .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.construction-project-management-software .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.construction-project-management-software .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
.construction-project-management-software .ratingItem:first-child {
border-left: 0;
}
.construction-project-management-software .proofCard h3 {
font-size: 23px;
}
.construction-project-management-software .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.construction-project-management-software .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.construction-project-management-software .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.construction-project-management-software .integration {
min-height: 98px;
}
.construction-project-management-software .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.construction-project-management-software .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.construction-project-management-software .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.construction-project-management-software .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.construction-project-management-software .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.construction-project-management-software .finalActions {
display: grid;
gap: 11px;
}
.construction-project-management-software .finalActions .button {
white-space: nowrap;
}
@media (max-width:1100px) {
.construction-project-management-software .navlinks {
gap: 15px;
font-size: 12px;
}
.construction-project-management-software .heroGrid {
gap: 30px;
}
.construction-project-management-software .twoCol {
gap: 32px;
}
.construction-project-management-software .panelBody {
padding: 16px;
}
.construction-project-management-software .panelHead {
padding: 16px;
}
.construction-project-management-software .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.construction-project-management-software .pipelineColumns {
gap: 7px;
}
.construction-project-management-software .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.construction-project-management-software .heroGrid,
.construction-project-management-software .twoCol,
.construction-project-management-software .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.heroGrid {
gap: 36px;
}
.construction-project-management-software .hero h1 {
max-width: 730px;
}
.construction-project-management-software .hero .lead {
max-width: 690px;
}
.construction-project-management-software .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.construction-project-management-software .twoCol {
gap: 34px;
}
.construction-project-management-software .twoCol.reverse .visual {
order: initial;
}
.construction-project-management-software .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.construction-project-management-software .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.construction-project-management-software .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.construction-project-management-software .awardItem {
font-size: 12px;
padding: 13px;
}
.construction-project-management-software .ratingSectionGrid {
gap: 20px;
}
.construction-project-management-software .inlineCta {
align-items: flex-start;
}
.construction-project-management-software .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.construction-project-management-software .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.construction-project-management-software .card {
padding: 22px;
}
.construction-project-management-software .card h3 {
font-size: 21px;
}
.construction-project-management-software .finalActions {
display: flex;
flex-wrap: wrap;
}
.construction-project-management-software .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.construction-project-management-software .cards,
.construction-project-management-software .proofCards {
grid-template-columns: 1fr;
}
.construction-project-management-software .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.construction-project-management-software .inlineCta {
flex-direction: column;
}
.construction-project-management-software .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.construction-project-management-software .inlineCtaActions .button {
flex: 1;
}
.construction-project-management-software .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.construction-project-management-software .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.construction-project-management-software .wrap {
width: calc(100% - 32px);
}
.construction-project-management-software .brand {
font-size: 20px;
gap: 7px;
}
.construction-project-management-software .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.construction-project-management-software .brandMark .icon {
width: 18px;
height: 18px;
}
.construction-project-management-software .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.construction-project-management-software .hero {
padding: 51px 0 48px;
}
.construction-project-management-software .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.construction-project-management-software .heroActions {
gap: 10px;
margin-top: 25px;
}
.construction-project-management-software .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.construction-project-management-software .hero .microcopy {
font-size: 11px;
}
.construction-project-management-software .heroPills span {
font-size: 9px;
}
.construction-project-management-software .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.construction-project-management-software .sectionHead p {
font-size: 16px;
}
.construction-project-management-software .copy p {
font-size: 15px;
}
.construction-project-management-software .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.construction-project-management-software .logoBox {
min-height: 53px;
}
.construction-project-management-software .logoBox:last-child {
grid-column: 1/-1;
}
.construction-project-management-software .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.construction-project-management-software .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.construction-project-management-software .aiStep strong {
font-size: 13px;
}
.construction-project-management-software .aiStep span {
font-size: 11px;
}
.construction-project-management-software .aiStep::after {
display: none;
}
.construction-project-management-software .outcomeGrid,
.construction-project-management-software .challengeGrid,
.construction-project-management-software .benefitGrid {
grid-template-columns: 1fr;
}
.construction-project-management-software .outcome {
padding: 24px;
}
.construction-project-management-software .outcome strong {
font-size: 22px;
}
.construction-project-management-software .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.construction-project-management-software .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.construction-project-management-software .awardItem:last-child {
grid-column: 1/-1;
} .construction-project-management-software .featureList,
.construction-project-management-software .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.construction-project-management-software .featureItem {
font-size: 13px;
}
.construction-project-management-software .inlineCta {
padding: 22px;
gap: 19px;
}
.construction-project-management-software .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.construction-project-management-software .panelHead {
padding: 15px 13px;
}
.construction-project-management-software .panelHead>strong {
font-size: 12px;
}
.construction-project-management-software .panelBody {
padding: 14px;
}
.construction-project-management-software .productPanel {
border-radius: 16px;
}
.construction-project-management-software .productPanel figcaption {
padding: 0 14px 13px;
}
.construction-project-management-software .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.construction-project-management-software .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.construction-project-management-software .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.construction-project-management-software .deal {
margin-top: 0;
padding: 10px;
}
.construction-project-management-software .deal strong {
font-size: 10px;
}
.construction-project-management-software .deal small {
font-size: 9px;
}
.construction-project-management-software .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.construction-project-management-software .mobileWorkspace {
gap: 12px;
}
.construction-project-management-software .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.construction-project-management-software .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.construction-project-management-software .sideTile {
padding: 10px;
}
.construction-project-management-software .sideTile strong {
font-size: 10px;
}
.construction-project-management-software .sideTile p {
font-size: 9px;
}
.construction-project-management-software .mobileHeader strong {
font-size: 15px;
}
.construction-project-management-software .mobileAccount strong {
font-size: 10px;
}
.construction-project-management-software .mobileAccount small {
font-size: 7px;
}
.construction-project-management-software .phoneDevice .rowIcon {
display: none;
}
.construction-project-management-software .quoteTable th,
.construction-project-management-software .quoteTable td {
padding: 12px 4px;
}
.construction-project-management-software .quoteTable strong {
font-size: 10px;
}
.construction-project-management-software .quoteTable small {
font-size: 8px;
}
.construction-project-management-software .quoteTable tfoot th {
font-size: 9px;
}
.construction-project-management-software .docHeader strong {
font-size: 17px;
}
.construction-project-management-software .miniFlow {
gap: 5px;
font-size: 9px;
}
.construction-project-management-software .miniFlow span {
padding: 6px;
}
.construction-project-management-software .rowCopy strong {
font-size: 10px;
}
.construction-project-management-software .rowCopy small {
font-size: 8px;
}
.construction-project-management-software .statusPill {
font-size: 7px;
padding: 5px;
}
.construction-project-management-software .miniStats {
gap: 7px;
}
.construction-project-management-software .miniStats>div {
padding: 9px;
}
.construction-project-management-software .miniStats strong {
font-size: 18px;
}
.construction-project-management-software .miniStats span {
font-size: 8px;
}
.construction-project-management-software .collectionStats>div {
padding: 13px;
}
.construction-project-management-software .collectionStats strong {
font-size: 24px;
}
.construction-project-management-software .customerHeader strong {
font-size: 17px;
}
.construction-project-management-software .customerFacts>div {
padding: 10px;
}
.construction-project-management-software .customerFacts strong {
font-size: 12px;
}
.construction-project-management-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.construction-project-management-software .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.construction-project-management-software .ratingItem:last-child {
grid-column: 1/-1;
}
.construction-project-management-software .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.construction-project-management-software .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.construction-project-management-software .integration small {
font-size: 9px;
}
.construction-project-management-software .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.construction-project-management-software .ctaPanel p {
font-size: 15px;
}
.construction-project-management-software .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.construction-project-management-software .contextSection {
padding: 0 0 24px;
}
.construction-project-management-software .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.construction-project-management-software .wrap {
width: calc(100% - 24px);
}
.construction-project-management-software .brand {
font-size: 18px;
}
.construction-project-management-software .brandMark {
width: 25px;
height: 25px;
}
.construction-project-management-software .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.construction-project-management-software .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.construction-project-management-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.construction-project-management-software .phoneDevice {
width: 210px;
}
.construction-project-management-software .phoneDevice .rowIcon {
display: grid;
}
.construction-project-management-software .mobileSide {
gap: 8px;
}
.construction-project-management-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.construction-project-management-software .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.construction-project-management-software .sideTile p {
margin: 0;
}
.construction-project-management-software .miniFlow span {
padding: 5px;
font-size: 8px;
}
.construction-project-management-software .collectionStats strong {
font-size: 21px;
}
.construction-project-management-software .inventoryIntro strong {
font-size: 14px;
}
.construction-project-management-software .dataRow {
gap: 7px;
}
.construction-project-management-software .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.construction-project-management-software .inlineCtaActions {
flex-direction: column;
}
} .construction-project-management-software .constructionPage {
background: var(--sky-2);
}
.construction-project-management-software .constructionPage .hero .eyebrow {
max-width: 100%;
}
.construction-project-management-software .constructionPage .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.construction-project-management-software .ganttIllustration,
.construction-project-management-software .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.construction-project-management-software .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.construction-project-management-software .costIllustration {
aspect-ratio: 484/226;
}
.construction-project-management-software .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.construction-project-management-software .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.construction-project-management-software .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.construction-project-management-software .comparisonTable thead {
background: var(--black);
color: #fff;
}
.construction-project-management-software .comparisonTable thead th:last-child {
color: var(--yellow);
}
.construction-project-management-software .comparisonTable th,
.construction-project-management-software .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.construction-project-management-software .comparisonTable th:first-child {
width: 23%;
}
.construction-project-management-software .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.construction-project-management-software .comparisonTable tbody td {
color: var(--muted);
}
.construction-project-management-software .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.construction-project-management-software .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.construction-project-management-software .constructionPage .card,
.construction-project-management-software .constructionPage .proofCard,
.construction-project-management-software .constructionPage .productPanel,
.construction-project-management-software .constructionPage .outcome,
.construction-project-management-software .constructionPage .benefit {
box-shadow: none;
}
.construction-project-management-software .constructionPage .darkSection .featureNote {
color: #BABABA;
}
@media(max-width:640px) {
.construction-project-management-software .constructionPage .hero .eyebrow {
font-size: 10px;
}
.construction-project-management-software .constructionPage .comparisonTable {
font-size: 11px;
}
.construction-project-management-software .constructionPage .comparisonTable th,
.construction-project-management-software .constructionPage .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.construction-project-management-software .constructionPage .comparisonTable th:first-child {
width: 24%;
}
.construction-project-management-software .constructionPage .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.construction-project-management-software .constructionPage .summaryTotal strong {
font-size: 22px;
}
}
.new-theme-design .sectionHead {
margin-left: auto;
margin-right: auto;
}  .equipment-asset-rental-management-software .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.equipment-asset-rental-management-software .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: 0 8px 20px rgba(0, 168, 248, .23);
}
.equipment-asset-rental-management-software .brand span {
color: var(--brand);
}
.equipment-asset-rental-management-software .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.equipment-asset-rental-management-software .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.equipment-asset-rental-management-software .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.equipment-asset-rental-management-software .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.equipment-asset-rental-management-software .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.equipment-asset-rental-management-software .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.equipment-asset-rental-management-software .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.equipment-asset-rental-management-software .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: 0 10px 25px rgba(11, 11, 11, .18);
}
.equipment-asset-rental-management-software .hero .button.primary:hover {
background: var(--black-soft);
}
.equipment-asset-rental-management-software .hero .button.secondary {
border-color: var(--yellow);
box-shadow: inset 0 -3px 0 var(--yellow);
}
.equipment-asset-rental-management-software .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: var(--shadow);
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.equipment-asset-rental-management-software .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
} .equipment-asset-rental-management-software .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.equipment-asset-rental-management-software .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.equipment-asset-rental-management-software .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.equipment-asset-rental-management-software .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
} .equipment-asset-rental-management-software .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.equipment-asset-rental-management-software .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.equipment-asset-rental-management-software .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.equipment-asset-rental-management-software .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.equipment-asset-rental-management-software .ratingLead strong {
display: block;
font-size: 20px;
}
.equipment-asset-rental-management-software .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.equipment-asset-rental-management-software .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.equipment-asset-rental-management-software .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.equipment-asset-rental-management-software .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.equipment-asset-rental-management-software .ratingItem span {
color: #CFCFCF;
font-size: 11px;
} .equipment-asset-rental-management-software .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.equipment-asset-rental-management-software .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.equipment-asset-rental-management-software .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.equipment-asset-rental-management-software .aiJourney h2 {
color: #fff;
}
.equipment-asset-rental-management-software .aiJourney .sectionHead p {
color: #D7D7D7;
}
.equipment-asset-rental-management-software .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.equipment-asset-rental-management-software .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.equipment-asset-rental-management-software .aiStep::after {
content: '→';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.equipment-asset-rental-management-software .aiStep:last-child::after {
display: none;
}
.equipment-asset-rental-management-software .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.equipment-asset-rental-management-software .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.equipment-asset-rental-management-software .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.equipment-asset-rental-management-software .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.equipment-asset-rental-management-software .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.equipment-asset-rental-management-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.equipment-asset-rental-management-software .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.equipment-asset-rental-management-software .outcome span {
color: var(--muted);
font-size: 14px;
}
.equipment-asset-rental-management-software .capability {
background: #fff;
}
.equipment-asset-rental-management-software .capability.alt {
background: var(--sky-2);
}
.equipment-asset-rental-management-software .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.equipment-asset-rental-management-software .twoCol.reverse .visual {
order: 2;
}
.equipment-asset-rental-management-software .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.equipment-asset-rental-management-software .visual .placeholder {
min-height: 355px;
}
.equipment-asset-rental-management-software .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.equipment-asset-rental-management-software .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.equipment-asset-rental-management-software details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.equipment-asset-rental-management-software details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.equipment-asset-rental-management-software details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.equipment-asset-rental-management-software details.capabilityMore summary::after {
content: '+';
font-size: 18px;
line-height: 1;
}
.equipment-asset-rental-management-software details.capabilityMore[open] summary::after {
content: '−';
}
.equipment-asset-rental-management-software details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.equipment-asset-rental-management-software .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.equipment-asset-rental-management-software .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.equipment-asset-rental-management-software .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.equipment-asset-rental-management-software .darkSection h2,
.equipment-asset-rental-management-software .darkSection h3 {
color: #fff;
}
.equipment-asset-rental-management-software .darkSection .sectionHead p,
.equipment-asset-rental-management-software .darkSection .copy p {
color: #D7D7D7;
}
.equipment-asset-rental-management-software .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.equipment-asset-rental-management-software .darkSection .featureItem {
color: #F7F7F7;
}
.equipment-asset-rental-management-software .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.equipment-asset-rental-management-software .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.equipment-asset-rental-management-software .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.equipment-asset-rental-management-software .darkSection .placeholder small {
color: #D0D0D0;
}
.equipment-asset-rental-management-software .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.equipment-asset-rental-management-software .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: 0 8px 26px rgba(6, 59, 92, .05);
}
.equipment-asset-rental-management-software .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: 0 6px 14px rgba(255, 201, 40, .22);
}
.equipment-asset-rental-management-software .card p {
color: var(--muted);
margin: 12px 0 0;
}
.equipment-asset-rental-management-software .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.equipment-asset-rental-management-software .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.equipment-asset-rental-management-software .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.equipment-asset-rental-management-software .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.equipment-asset-rental-management-software .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.equipment-asset-rental-management-software .benefitBand h2 {
color: #fff;
}
.equipment-asset-rental-management-software .benefitBand .sectionHead p {
color: #D5D5D5;
}
.equipment-asset-rental-management-software .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.equipment-asset-rental-management-software .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.equipment-asset-rental-management-software .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.equipment-asset-rental-management-software .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.equipment-asset-rental-management-software .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.equipment-asset-rental-management-software .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.equipment-asset-rental-management-software .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.equipment-asset-rental-management-software .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.equipment-asset-rental-management-software .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.equipment-asset-rental-management-software .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.equipment-asset-rental-management-software .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.equipment-asset-rental-management-software .faq {
max-width: 900px;
}
.equipment-asset-rental-management-software details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.equipment-asset-rental-management-software summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
.equipment-asset-rental-management-software details p {
color: var(--muted);
margin: 12px 0 0;
}
.equipment-asset-rental-management-software .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: var(--shadow);
border-top: 5px solid var(--yellow);
}
.equipment-asset-rental-management-software .ctaPanel h2 {
color: #fff;
}
.equipment-asset-rental-management-software .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.equipment-asset-rental-management-software .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.equipment-asset-rental-management-software .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.equipment-asset-rental-management-software .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
} .equipment-asset-rental-management-software .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 10px 28px rgba(6, 59, 92, .06);
}
.equipment-asset-rental-management-software .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.equipment-asset-rental-management-software .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.equipment-asset-rental-management-software .inlineCta.dark h3 {
color: #fff;
}
.equipment-asset-rental-management-software .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.equipment-asset-rental-management-software .inlineCta.dark p {
color: #D8D8D8;
}
.equipment-asset-rental-management-software .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.equipment-asset-rental-management-software .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.equipment-asset-rental-management-software .button.yellow:hover {
background: #FFD84D;
}
.equipment-asset-rental-management-software .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.equipment-asset-rental-management-software .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.equipment-asset-rental-management-software .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
@media (max-width: 980px) {
.equipment-asset-rental-management-software .ratingSectionGrid {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.equipment-asset-rental-management-software .heroGrid,
.equipment-asset-rental-management-software .twoCol,
.equipment-asset-rental-management-software .ctaPanel {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .twoCol.reverse .visual {
order: initial;
}
.equipment-asset-rental-management-software .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.equipment-asset-rental-management-software .ratingGrid,
.equipment-asset-rental-management-software .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.equipment-asset-rental-management-software .ratingLead,
.equipment-asset-rental-management-software .awardLead {
grid-column: 1/-1;
text-align: center;
}
.equipment-asset-rental-management-software .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.equipment-asset-rental-management-software .aiStep:nth-child(3)::after,
.equipment-asset-rental-management-software .aiStep:last-child::after {
display: none;
}
.equipment-asset-rental-management-software .outcomeGrid,
.equipment-asset-rental-management-software .challengeGrid,
.equipment-asset-rental-management-software .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.equipment-asset-rental-management-software .cards,
.equipment-asset-rental-management-software .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.equipment-asset-rental-management-software .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.equipment-asset-rental-management-software .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.equipment-asset-rental-management-software .awardProofGrid {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .wrap {
width: min(var(--max), calc(100% - 24px));
}
.equipment-asset-rental-management-software .hero {
padding: 58px 0 52px;
}
.equipment-asset-rental-management-software .aiFlow {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .aiStep::after {
display: none;
}
.equipment-asset-rental-management-software .logoRow,
.equipment-asset-rental-management-software .ratingGrid,
.equipment-asset-rental-management-software .awardGrid,
.equipment-asset-rental-management-software .outcomeGrid,
.equipment-asset-rental-management-software .challengeGrid,
.equipment-asset-rental-management-software .benefitGrid,
.equipment-asset-rental-management-software .cards,
.equipment-asset-rental-management-software .proofCards,
.equipment-asset-rental-management-software .integrationGrid,
.equipment-asset-rental-management-software .featureList {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.equipment-asset-rental-management-software .ctaPanel {
padding: 34px 24px;
}
.equipment-asset-rental-management-software .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.equipment-asset-rental-management-software .inlineCtaActions {
width: 100%;
}
.equipment-asset-rental-management-software .inlineCtaActions .button {
flex: 1;
}
}
.equipment-asset-rental-management-software .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
.equipment-asset-rental-management-software .rentalPage h1,
.equipment-asset-rental-management-software .rentalPage h2,
.equipment-asset-rental-management-software .rentalPage h3 {
color: var(--black);
}
.equipment-asset-rental-management-software .rentalPage .darkSection h2,
.equipment-asset-rental-management-software .rentalPage .darkSection h3,
.equipment-asset-rental-management-software .rentalPage .aiJourney h2,
.equipment-asset-rental-management-software .rentalPage .benefitBand h2,
.equipment-asset-rental-management-software .rentalPage .ctaPanel h2,
.equipment-asset-rental-management-software .rentalPage .inlineCta.dark h3 {
color: #fff;
}
.equipment-asset-rental-management-software .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.equipment-asset-rental-management-software .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.equipment-asset-rental-management-software .skipLink:focus {
transform: none;
}
.equipment-asset-rental-management-software a:focus-visible,
.equipment-asset-rental-management-software summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.equipment-asset-rental-management-software .darkSection a:focus-visible,
.equipment-asset-rental-management-software .darkSection summary:focus-visible,
.equipment-asset-rental-management-software .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.equipment-asset-rental-management-software .topbar {
background: #fff;
backdrop-filter: none;
}
.equipment-asset-rental-management-software .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.equipment-asset-rental-management-software .brandName {
display: inline;
color: var(--navy) !important;
}
.equipment-asset-rental-management-software .brandName>span {
color: var(--brand-dark);
}
.equipment-asset-rental-management-software .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.equipment-asset-rental-management-software .brandMark .icon {
width: 21px;
height: 21px;
}
.equipment-asset-rental-management-software .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.equipment-asset-rental-management-software .navlinks a:hover {
color: var(--brand-dark);
}
.equipment-asset-rental-management-software .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.equipment-asset-rental-management-software .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.equipment-asset-rental-management-software .hero h1 { line-height: 1.06;
}
.equipment-asset-rental-management-software .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.equipment-asset-rental-management-software .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.equipment-asset-rental-management-software .heroVisual {
width: 100%;
min-width: 0;
}
.equipment-asset-rental-management-software .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.equipment-asset-rental-management-software .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.equipment-asset-rental-management-software .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.equipment-asset-rental-management-software .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.equipment-asset-rental-management-software .clientBand {
padding: 27px 0;
}
.equipment-asset-rental-management-software .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.equipment-asset-rental-management-software .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.equipment-asset-rental-management-software .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.equipment-asset-rental-management-software .logoBox.wide {
font-size: 12px;
}
.equipment-asset-rental-management-software .logoBox small {
display: block;
font-size: 10px;
}
.equipment-asset-rental-management-software .sectionHead {
margin-bottom: 36px;
}
.equipment-asset-rental-management-software .eyebrow {
line-height: 1.5;
}
.equipment-asset-rental-management-software .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.equipment-asset-rental-management-software .aiStep {
min-height: 162px;
}
.equipment-asset-rental-management-software .aiStep strong {
line-height: 1.35;
}
.equipment-asset-rental-management-software .aiStep span {
line-height: 1.65;
}
.equipment-asset-rental-management-software .aiCallout {
margin-top: 24px;
}
.equipment-asset-rental-management-software .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.equipment-asset-rental-management-software .outcome>.icon {
color: var(--navy);
}
.equipment-asset-rental-management-software .awardBand {
padding: 42px 0;
}
.equipment-asset-rental-management-software .awardBand .sectionHead {
margin-bottom: 26px;
}
.equipment-asset-rental-management-software .awardBand .sectionHead h2 {
font-size: 36px;
}
.equipment-asset-rental-management-software .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.equipment-asset-rental-management-software .awardItem>.icon {
color: var(--navy);
}
.equipment-asset-rental-management-software .awardItem:hover {
border-color: var(--brand-dark);
}
.equipment-asset-rental-management-software .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.equipment-asset-rental-management-software .twoCol.reverse .visual {
order: -1;
}
.equipment-asset-rental-management-software .copy .eyebrow {
margin-bottom: 17px;
}
.equipment-asset-rental-management-software .copy p {
font-size: 16px;
line-height: 1.85;
}
.equipment-asset-rental-management-software .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.equipment-asset-rental-management-software .featureList {
gap: 13px 18px;
}
.equipment-asset-rental-management-software .featureItem {
font-size: 13px;
line-height: 1.6;
}
.equipment-asset-rental-management-software .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.equipment-asset-rental-management-software .check .icon {
width: 14px;
height: 14px;
}
.equipment-asset-rental-management-software details.capabilityMore {
margin-bottom: 0;
}
.equipment-asset-rental-management-software .capabilityMore summary {
min-height: 34px;
}
.equipment-asset-rental-management-software .capabilityMore .moreGrid {
gap: 13px 18px;
}
.equipment-asset-rental-management-software .textCta {
font-size: 14px;
}
.equipment-asset-rental-management-software .visual {
min-width: 0;
}
.equipment-asset-rental-management-software .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.equipment-asset-rental-management-software .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.equipment-asset-rental-management-software .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.equipment-asset-rental-management-software .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.equipment-asset-rental-management-software .panelBody {
padding: 20px;
}
.equipment-asset-rental-management-software .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.equipment-asset-rental-management-software .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.equipment-asset-rental-management-software .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.equipment-asset-rental-management-software .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.equipment-asset-rental-management-software .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.equipment-asset-rental-management-software .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.equipment-asset-rental-management-software .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.equipment-asset-rental-management-software .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.equipment-asset-rental-management-software .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.equipment-asset-rental-management-software .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.equipment-asset-rental-management-software .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.equipment-asset-rental-management-software .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.equipment-asset-rental-management-software .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.equipment-asset-rental-management-software .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.equipment-asset-rental-management-software .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.equipment-asset-rental-management-software .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.equipment-asset-rental-management-software .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.equipment-asset-rental-management-software .miniStats span {
font-size: 9px;
color: var(--muted);
}
.equipment-asset-rental-management-software .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.equipment-asset-rental-management-software .dataRow:last-child {
border-bottom: 0;
}
.equipment-asset-rental-management-software .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.equipment-asset-rental-management-software .rowIcon .icon {
width: 19px;
height: 19px;
}
.equipment-asset-rental-management-software .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.equipment-asset-rental-management-software .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.equipment-asset-rental-management-software .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.equipment-asset-rental-management-software .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.equipment-asset-rental-management-software .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.equipment-asset-rental-management-software .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.equipment-asset-rental-management-software .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.equipment-asset-rental-management-software .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.equipment-asset-rental-management-software .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.equipment-asset-rental-management-software .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.equipment-asset-rental-management-software .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.equipment-asset-rental-management-software .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.equipment-asset-rental-management-software .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.equipment-asset-rental-management-software .mobileAccount {
text-align: center;
padding: 13px 0;
}
.equipment-asset-rental-management-software .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.equipment-asset-rental-management-software .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.equipment-asset-rental-management-software .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.equipment-asset-rental-management-software .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.equipment-asset-rental-management-software .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.equipment-asset-rental-management-software .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.equipment-asset-rental-management-software .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
.equipment-asset-rental-management-software .phoneDevice .rowCopy strong {
font-size: 9px;
}
.equipment-asset-rental-management-software .phoneDevice .rowCopy small {
font-size: 7px;
}
.equipment-asset-rental-management-software .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.equipment-asset-rental-management-software .mobileSide {
display: grid;
gap: 10px;
}
.equipment-asset-rental-management-software .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.equipment-asset-rental-management-software .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.equipment-asset-rental-management-software .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.equipment-asset-rental-management-software .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.equipment-asset-rental-management-software .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.equipment-asset-rental-management-software .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.equipment-asset-rental-management-software .darkSection .panelHead>strong {
color: #fff;
}
.equipment-asset-rental-management-software .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.equipment-asset-rental-management-software .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.equipment-asset-rental-management-software .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.equipment-asset-rental-management-software .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.equipment-asset-rental-management-software .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.equipment-asset-rental-management-software .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.equipment-asset-rental-management-software .promptList {
display: grid;
gap: 10px;
}
.equipment-asset-rental-management-software .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.equipment-asset-rental-management-software .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.equipment-asset-rental-management-software .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.equipment-asset-rental-management-software .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.equipment-asset-rental-management-software .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.equipment-asset-rental-management-software .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.equipment-asset-rental-management-software .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.equipment-asset-rental-management-software .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.equipment-asset-rental-management-software .quoteTable th,
.equipment-asset-rental-management-software .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.equipment-asset-rental-management-software .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.equipment-asset-rental-management-software .quoteTable td:first-child {
width: 64%;
}
.equipment-asset-rental-management-software .quoteTable th:last-child,
.equipment-asset-rental-management-software .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.equipment-asset-rental-management-software .quoteTable strong {
font-size: 11px;
}
.equipment-asset-rental-management-software .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.equipment-asset-rental-management-software .quoteTable tfoot {
background: #F5FBFF;
}
.equipment-asset-rental-management-software .quoteTable tfoot th {
font-size: 10px;
}
.equipment-asset-rental-management-software .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.equipment-asset-rental-management-software .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.equipment-asset-rental-management-software .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.equipment-asset-rental-management-software .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.equipment-asset-rental-management-software .orderJourney {
margin: 20px 0;
}
.equipment-asset-rental-management-software .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.equipment-asset-rental-management-software .journeyRow:before {
content: '';
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.equipment-asset-rental-management-software .journeyRow:last-child:before {
display: none;
}
.equipment-asset-rental-management-software .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.equipment-asset-rental-management-software .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.equipment-asset-rental-management-software .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.equipment-asset-rental-management-software .journeyRow strong {
font-size: 12px;
display: block;
}
.equipment-asset-rental-management-software .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.equipment-asset-rental-management-software .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.equipment-asset-rental-management-software .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.equipment-asset-rental-management-software .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.equipment-asset-rental-management-software .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.equipment-asset-rental-management-software .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.equipment-asset-rental-management-software .inventoryIntro strong {
display: block;
font-size: 16px;
}
.equipment-asset-rental-management-software .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.equipment-asset-rental-management-software .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.equipment-asset-rental-management-software .availabilityCard span {
font-size: 9px;
display: block;
}
.equipment-asset-rental-management-software .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.equipment-asset-rental-management-software .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.equipment-asset-rental-management-software .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.equipment-asset-rental-management-software .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.equipment-asset-rental-management-software .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.equipment-asset-rental-management-software .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.equipment-asset-rental-management-software .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.equipment-asset-rental-management-software .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.equipment-asset-rental-management-software .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.equipment-asset-rental-management-software .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.equipment-asset-rental-management-software .customerTimeline .dataRow {
border-color: #353535;
}
.equipment-asset-rental-management-software .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.equipment-asset-rental-management-software .customerTimeline strong {
color: #fff;
}
.equipment-asset-rental-management-software .customerTimeline small {
color: #BFBFBF;
}
.equipment-asset-rental-management-software .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.equipment-asset-rental-management-software .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.equipment-asset-rental-management-software .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.equipment-asset-rental-management-software .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.equipment-asset-rental-management-software .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.equipment-asset-rental-management-software .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.equipment-asset-rental-management-software .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.equipment-asset-rental-management-software .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.equipment-asset-rental-management-software .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.equipment-asset-rental-management-software .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.equipment-asset-rental-management-software .chartTitle strong {
font-size: 12px;
}
.equipment-asset-rental-management-software .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.equipment-asset-rental-management-software .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.equipment-asset-rental-management-software .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.equipment-asset-rental-management-software .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.equipment-asset-rental-management-software .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.equipment-asset-rental-management-software .inlineCta {
margin-top: 0;
box-shadow: none;
}
.equipment-asset-rental-management-software .inlineCtaActions {
max-width: 42%;
}
.equipment-asset-rental-management-software .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.equipment-asset-rental-management-software .inlineCta h3 {
line-height: 1.35;
}
.equipment-asset-rental-management-software .card {
box-shadow: none;
}
.equipment-asset-rental-management-software .cardIcon {
box-shadow: none;
}
.equipment-asset-rental-management-software .card h3 {
font-size: 22px;
}
.equipment-asset-rental-management-software .card p {
font-size: 14px;
line-height: 1.8;
}
.equipment-asset-rental-management-software .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.equipment-asset-rental-management-software .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.equipment-asset-rental-management-software .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.equipment-asset-rental-management-software .ratingBand {
padding: 34px 0;
}
.equipment-asset-rental-management-software .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.equipment-asset-rental-management-software .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.equipment-asset-rental-management-software .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
.equipment-asset-rental-management-software .ratingItem:first-child {
border-left: 0;
}
.equipment-asset-rental-management-software .proofCard h3 {
font-size: 23px;
}
.equipment-asset-rental-management-software .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.equipment-asset-rental-management-software .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.equipment-asset-rental-management-software .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.equipment-asset-rental-management-software .integration {
min-height: 98px;
}
.equipment-asset-rental-management-software .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.equipment-asset-rental-management-software .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.equipment-asset-rental-management-software .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.equipment-asset-rental-management-software .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.equipment-asset-rental-management-software .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.equipment-asset-rental-management-software .finalActions {
display: grid;
gap: 11px;
}
.equipment-asset-rental-management-software .finalActions .button {
white-space: nowrap;
}
.equipment-asset-rental-management-software .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.equipment-asset-rental-management-software .footerInner p {
margin: 0;
font-size: 12px;
}
@media (max-width:1100px) {
.equipment-asset-rental-management-software .heroGrid {
gap: 30px;
}
.equipment-asset-rental-management-software .twoCol {
gap: 32px;
}
.equipment-asset-rental-management-software .panelBody {
padding: 16px;
}
.equipment-asset-rental-management-software .panelHead {
padding: 16px;
}
.equipment-asset-rental-management-software .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.equipment-asset-rental-management-software .pipelineColumns {
gap: 7px;
}
.equipment-asset-rental-management-software .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.equipment-asset-rental-management-software .heroGrid,
.equipment-asset-rental-management-software .twoCol,
.equipment-asset-rental-management-software .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.equipment-asset-rental-management-software .heroGrid {
gap: 36px;
}
.equipment-asset-rental-management-software .hero h1 {
max-width: 730px;
}
.equipment-asset-rental-management-software .hero .lead {
max-width: 690px;
}
.equipment-asset-rental-management-software .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.equipment-asset-rental-management-software .twoCol {
gap: 34px;
}
.equipment-asset-rental-management-software .twoCol.reverse .visual {
order: initial;
}
.equipment-asset-rental-management-software .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.equipment-asset-rental-management-software .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .awardItem {
font-size: 12px;
padding: 13px;
}
.equipment-asset-rental-management-software .ratingSectionGrid {
gap: 20px;
}
.equipment-asset-rental-management-software .inlineCta {
align-items: flex-start;
}
.equipment-asset-rental-management-software .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.equipment-asset-rental-management-software .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .card {
padding: 22px;
}
.equipment-asset-rental-management-software .card h3 {
font-size: 21px;
}
.equipment-asset-rental-management-software .finalActions {
display: flex;
flex-wrap: wrap;
}
.equipment-asset-rental-management-software .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.equipment-asset-rental-management-software .cards,
.equipment-asset-rental-management-software .proofCards {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .inlineCta {
flex-direction: column;
}
.equipment-asset-rental-management-software .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.equipment-asset-rental-management-software .inlineCtaActions .button {
flex: 1;
}
.equipment-asset-rental-management-software .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.equipment-asset-rental-management-software .wrap {
width: calc(100% - 32px);
}
[id] {
scroll-margin-top: 82px;
}
.equipment-asset-rental-management-software .brand {
font-size: 20px;
gap: 7px;
}
.equipment-asset-rental-management-software .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.equipment-asset-rental-management-software .brandMark .icon {
width: 18px;
height: 18px;
}
.equipment-asset-rental-management-software .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.equipment-asset-rental-management-software .hero {
padding: 51px 0 48px;
}
.equipment-asset-rental-management-software .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.equipment-asset-rental-management-software .heroActions {
gap: 10px;
margin-top: 25px;
}
.equipment-asset-rental-management-software .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.equipment-asset-rental-management-software .hero .microcopy {
font-size: 11px;
}
.equipment-asset-rental-management-software .heroPills span {
font-size: 9px;
}
.equipment-asset-rental-management-software .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.equipment-asset-rental-management-software .sectionHead p {
font-size: 16px;
}
.equipment-asset-rental-management-software .copy h2 {
font-size: 34px;
}
.equipment-asset-rental-management-software .copy p {
font-size: 15px;
}
.equipment-asset-rental-management-software .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.equipment-asset-rental-management-software .logoBox {
min-height: 53px;
}
.equipment-asset-rental-management-software .logoBox:last-child {
grid-column: 1/-1;
}
.equipment-asset-rental-management-software .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.equipment-asset-rental-management-software .aiStep strong {
font-size: 13px;
}
.equipment-asset-rental-management-software .aiStep span {
font-size: 11px;
}
.equipment-asset-rental-management-software .aiStep::after {
display: none;
}
.equipment-asset-rental-management-software .outcomeGrid,
.equipment-asset-rental-management-software .challengeGrid,
.equipment-asset-rental-management-software .benefitGrid {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .outcome {
padding: 24px;
}
.equipment-asset-rental-management-software .outcome strong {
font-size: 22px;
}
.equipment-asset-rental-management-software .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.equipment-asset-rental-management-software .awardItem:last-child {
grid-column: 1/-1;
}
.equipment-asset-rental-management-software .awardBand .sectionHead h2 {
font-size: 31px;
}
.equipment-asset-rental-management-software .featureList,
.equipment-asset-rental-management-software .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .featureItem {
font-size: 13px;
}
.equipment-asset-rental-management-software .inlineCta {
padding: 22px;
gap: 19px;
}
.equipment-asset-rental-management-software .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.equipment-asset-rental-management-software .panelHead {
padding: 15px 13px;
}
.equipment-asset-rental-management-software .panelHead>strong {
font-size: 12px;
}
.equipment-asset-rental-management-software .panelBody {
padding: 14px;
}
.equipment-asset-rental-management-software .productPanel {
border-radius: 16px;
}
.equipment-asset-rental-management-software .productPanel figcaption {
padding: 0 14px 13px;
}
.equipment-asset-rental-management-software .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.equipment-asset-rental-management-software .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.equipment-asset-rental-management-software .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.equipment-asset-rental-management-software .deal {
margin-top: 0;
padding: 10px;
}
.equipment-asset-rental-management-software .deal strong {
font-size: 10px;
}
.equipment-asset-rental-management-software .deal small {
font-size: 9px;
}
.equipment-asset-rental-management-software .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.equipment-asset-rental-management-software .mobileWorkspace {
gap: 12px;
}
.equipment-asset-rental-management-software .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.equipment-asset-rental-management-software .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.equipment-asset-rental-management-software .sideTile {
padding: 10px;
}
.equipment-asset-rental-management-software .sideTile strong {
font-size: 10px;
}
.equipment-asset-rental-management-software .sideTile p {
font-size: 9px;
}
.equipment-asset-rental-management-software .mobileHeader strong {
font-size: 15px;
}
.equipment-asset-rental-management-software .mobileAccount strong {
font-size: 10px;
}
.equipment-asset-rental-management-software .mobileAccount small {
font-size: 7px;
}
.equipment-asset-rental-management-software .phoneDevice .rowIcon {
display: none;
}
.equipment-asset-rental-management-software .quoteTable th,
.equipment-asset-rental-management-software .quoteTable td {
padding: 12px 4px;
}
.equipment-asset-rental-management-software .quoteTable strong {
font-size: 10px;
}
.equipment-asset-rental-management-software .quoteTable small {
font-size: 8px;
}
.equipment-asset-rental-management-software .quoteTable tfoot th {
font-size: 9px;
}
.equipment-asset-rental-management-software .docHeader strong {
font-size: 17px;
}
.equipment-asset-rental-management-software .miniFlow {
gap: 5px;
font-size: 9px;
}
.equipment-asset-rental-management-software .miniFlow span {
padding: 6px;
}
.equipment-asset-rental-management-software .rowCopy strong {
font-size: 10px;
}
.equipment-asset-rental-management-software .rowCopy small {
font-size: 8px;
}
.equipment-asset-rental-management-software .statusPill {
font-size: 7px;
padding: 5px;
}
.equipment-asset-rental-management-software .miniStats {
gap: 7px;
}
.equipment-asset-rental-management-software .miniStats>div {
padding: 9px;
}
.equipment-asset-rental-management-software .miniStats strong {
font-size: 18px;
}
.equipment-asset-rental-management-software .miniStats span {
font-size: 8px;
}
.equipment-asset-rental-management-software .collectionStats>div {
padding: 13px;
}
.equipment-asset-rental-management-software .collectionStats strong {
font-size: 24px;
}
.equipment-asset-rental-management-software .customerHeader strong {
font-size: 17px;
}
.equipment-asset-rental-management-software .customerFacts>div {
padding: 10px;
}
.equipment-asset-rental-management-software .customerFacts strong {
font-size: 12px;
}
.equipment-asset-rental-management-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.equipment-asset-rental-management-software .ratingItem:last-child {
grid-column: 1/-1;
}
.equipment-asset-rental-management-software .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.equipment-asset-rental-management-software .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.equipment-asset-rental-management-software .integration small {
font-size: 9px;
}
.equipment-asset-rental-management-software .ctaPanel p {
font-size: 15px;
}
.equipment-asset-rental-management-software .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.contextSection {
padding: 0 0 24px;
}
.equipment-asset-rental-management-software .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.equipment-asset-rental-management-software .wrap {
width: calc(100% - 24px);
}
.equipment-asset-rental-management-software .brand {
font-size: 18px;
}
.equipment-asset-rental-management-software .brandMark {
width: 25px;
height: 25px;
}
.equipment-asset-rental-management-software .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.equipment-asset-rental-management-software .copy h2 {
font-size: 31px;
}
.equipment-asset-rental-management-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .phoneDevice {
width: 210px;
}
.equipment-asset-rental-management-software .phoneDevice .rowIcon {
display: grid;
}
.equipment-asset-rental-management-software .mobileSide {
gap: 8px;
}
.equipment-asset-rental-management-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.equipment-asset-rental-management-software .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.equipment-asset-rental-management-software .sideTile p {
margin: 0;
}
.equipment-asset-rental-management-software .miniFlow span {
padding: 5px;
font-size: 8px;
}
.equipment-asset-rental-management-software .collectionStats strong {
font-size: 21px;
}
.equipment-asset-rental-management-software .inventoryIntro strong {
font-size: 14px;
}
.equipment-asset-rental-management-software .dataRow {
gap: 7px;
}
.equipment-asset-rental-management-software .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.equipment-asset-rental-management-software .inlineCtaActions {
flex-direction: column;
}
} .equipment-asset-rental-management-software .rentalPage {
background: var(--sky-2);
}
.equipment-asset-rental-management-software .rentalPage .hero .eyebrow {
max-width: 100%;
}
.equipment-asset-rental-management-software .rentalPage .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.equipment-asset-rental-management-software .ganttIllustration,
.equipment-asset-rental-management-software .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.equipment-asset-rental-management-software .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.equipment-asset-rental-management-software .costIllustration {
aspect-ratio: 484/226;
}
.equipment-asset-rental-management-software .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.equipment-asset-rental-management-software .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.equipment-asset-rental-management-software .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.equipment-asset-rental-management-software .comparisonTable thead {
background: var(--black);
color: #fff;
}
.equipment-asset-rental-management-software .comparisonTable thead th:last-child {
color: var(--yellow);
}
.equipment-asset-rental-management-software .comparisonTable th,
.equipment-asset-rental-management-software .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.equipment-asset-rental-management-software .comparisonTable th:first-child {
width: 23%;
}
.equipment-asset-rental-management-software .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.equipment-asset-rental-management-software .comparisonTable tbody td {
color: var(--muted);
}
.equipment-asset-rental-management-software .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.equipment-asset-rental-management-software .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.equipment-asset-rental-management-software .rentalPage .card,
.equipment-asset-rental-management-software .rentalPage .proofCard,
.equipment-asset-rental-management-software .rentalPage .productPanel,
.equipment-asset-rental-management-software .rentalPage .outcome,
.equipment-asset-rental-management-software .rentalPage .benefit {
box-shadow: none;
}
.equipment-asset-rental-management-software .rentalPage .darkSection .featureNote {
color: #BABABA;
}
@media(max-width:640px) {
.equipment-asset-rental-management-software .rentalPage .hero .eyebrow {
font-size: 10px;
}
.equipment-asset-rental-management-software .rentalPage .comparisonTable {
font-size: 11px;
}
.equipment-asset-rental-management-software .rentalPage .comparisonTable th,
.equipment-asset-rental-management-software .rentalPage .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.equipment-asset-rental-management-software .rentalPage .comparisonTable th:first-child {
width: 24%;
}
.equipment-asset-rental-management-software .rentalPage .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.equipment-asset-rental-management-software .rentalPage .summaryTotal strong {
font-size: 22px;
}
}
@media(max-width:359px) {} .equipment-asset-rental-management-software .rentalPage .rentalScheduleIllustration,
.equipment-asset-rental-management-software .rentalPage .rentalAnalyticsIllustration,
.equipment-asset-rental-management-software .rentalPage .rentalIotIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.equipment-asset-rental-management-software .rentalPage .rentalScheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.equipment-asset-rental-management-software .rentalPage .rentalAnalyticsIllustration {
aspect-ratio: 484 / 202;
}
.equipment-asset-rental-management-software .rentalPage .rentalIotIllustration {
aspect-ratio: 484 / 178;
}
.equipment-asset-rental-management-software .rentalPage .miniStats strong {
font-variant-numeric: tabular-nums;
}
.equipment-asset-rental-management-software .rentalPage .quoteTable td:last-child {
white-space: nowrap;
}
.equipment-asset-rental-management-software .rentalPage .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.equipment-asset-rental-management-software .rentalPage .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.equipment-asset-rental-management-software .rentalPage .darkSection .textCta {
color: var(--yellow);
}
.equipment-asset-rental-management-software .rentalPage .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.equipment-asset-rental-management-software .rentalPage .secondaryLinks .textCta {
font-size: 12px;
}
.equipment-asset-rental-management-software .rentalPage .rentalFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.equipment-asset-rental-management-software .rentalPage .rentalFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.equipment-asset-rental-management-software .rentalPage .rentalFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.equipment-asset-rental-management-software .rentalPage .rentalFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.equipment-asset-rental-management-software .rentalPage .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.equipment-asset-rental-management-software .rentalPage .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
.equipment-asset-rental-management-software .rentalPage .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.equipment-asset-rental-management-software .rentalPage .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.equipment-asset-rental-management-software .rentalPage .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.equipment-asset-rental-management-software .rentalPage .returnFlag .icon {
flex: 0 0 24px;
}
.equipment-asset-rental-management-software .rentalPage .rentalCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.equipment-asset-rental-management-software .rentalPage .rentalCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.equipment-asset-rental-management-software .rentalPage .phoneDevice {
max-width: 100%;
}
.equipment-asset-rental-management-software .rentalPage .heroPills {
line-height: 1.55;
}
.equipment-asset-rental-management-software .rentalPage .productPanel [class*="Illustration"] {
overflow: visible;
}
@media(max-width:640px) {
.equipment-asset-rental-management-software .rentalPage .rentalFacts {
gap: 7px;
}
.equipment-asset-rental-management-software .rentalPage .rentalFacts>div {
padding: 9px;
}
.equipment-asset-rental-management-software .rentalPage .rentalFacts strong {
font-size: 11px;
}
.equipment-asset-rental-management-software .rentalPage .scanSummary {
padding: 12px;
}
.equipment-asset-rental-management-software .rentalPage .hero .microcopy {
font-size: 11px;
}
}
@media(max-width:420px) {
.equipment-asset-rental-management-software .rentalPage .mobileWorkspace {
grid-template-columns: 1fr;
}
.equipment-asset-rental-management-software .rentalPage .phoneDevice {
width: 224px;
margin: auto;
}
.equipment-asset-rental-management-software .rentalPage .phoneDevice .rowIcon {
display: grid;
}
.equipment-asset-rental-management-software .rentalPage .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.equipment-asset-rental-management-software .rentalPage .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.equipment-asset-rental-management-software .rentalPage .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.equipment-asset-rental-management-software .rentalPage .sideTile strong {
font-size: 12px;
}
.equipment-asset-rental-management-software .rentalPage .sideTile p {
margin: 0;
font-size: 11px;
}
}  #rental-bookings-page * {
box-sizing: border-box
}
#rental-bookings-page a {
color: inherit;
text-decoration: none
}
#rental-bookings-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#rental-bookings-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#rental-bookings-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
#rental-bookings-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#rental-bookings-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
#rental-bookings-page .btn .icon {
width: 17px;
height: 17px
}
#rental-bookings-page .btn.black {
background: #0B0B0B;
color: #fff
}
#rental-bookings-page .btn.black:hover {
background: #303030
}
#rental-bookings-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#rental-bookings-page .btn.yellow:hover {
background: #FFD454
}
#rental-bookings-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#rental-bookings-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#rental-bookings-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#rental-bookings-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#rental-bookings-page .textLink .icon {
width: 17px;
height: 17px
}
#rental-bookings-page .textLink:hover {
color: var(--brand2)
}
#rental-bookings-page .soft {
background: var(--sky2)
}
#rental-bookings-page .sectionHead { margin-bottom: 36px
}
#rental-bookings-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#rental-bookings-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#rental-bookings-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#rental-bookings-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#rental-bookings-page .heroGrid>*,
#rental-bookings-page .feature>*,
#rental-bookings-page .aiGrid>* {
min-width: 0
}
#rental-bookings-page .heroCopy {
min-width: 0
}
#rental-bookings-page .hero h1 {
max-width: 630px
}
#rental-bookings-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#rental-bookings-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#rental-bookings-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#rental-bookings-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#rental-bookings-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#rental-bookings-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#rental-bookings-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#rental-bookings-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#rental-bookings-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#rental-bookings-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#rental-bookings-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#rental-bookings-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#rental-bookings-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#rental-bookings-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#rental-bookings-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#rental-bookings-page .outcome:nth-child(3):before {
background: var(--green)
}
#rental-bookings-page .outcome:nth-child(4):before {
background: var(--purple)
}
#rental-bookings-page .outcome>.icon {
color: var(--navy)
}
#rental-bookings-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#rental-bookings-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#rental-bookings-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-bookings-page .feature.reverse .visual {
order: -1
}
#rental-bookings-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#rental-bookings-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#rental-bookings-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#rental-bookings-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#rental-bookings-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#rental-bookings-page .tick .icon {
height: 13px;
width: 13px
}
#rental-bookings-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#rental-bookings-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#rental-bookings-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#rental-bookings-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#rental-bookings-page .uiHeading .icon {
height: 19px;
width: 19px
}
#rental-bookings-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#rental-bookings-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#rental-bookings-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#rental-bookings-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#rental-bookings-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#rental-bookings-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#rental-bookings-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#rental-bookings-page .dark h2,
#rental-bookings-page .dark h3 {
color: white
}
#rental-bookings-page .dark .ey {
background: var(--yellow);
color: #111
}
#rental-bookings-page .dark .textLink {
color: #fff
}
#rental-bookings-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#rental-bookings-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-bookings-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#rental-bookings-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#rental-bookings-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#rental-bookings-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#rental-bookings-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#rental-bookings-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#rental-bookings-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#rental-bookings-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#rental-bookings-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#rental-bookings-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-bookings-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#rental-bookings-page .connectedCard h3 {
margin: 18px 0 11px
}
#rental-bookings-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#rental-bookings-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#rental-bookings-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#rental-bookings-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#rental-bookings-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#rental-bookings-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#rental-bookings-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#rental-bookings-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-bookings-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#rental-bookings-page .featureCard>.icon {
color: var(--navy)
}
#rental-bookings-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#rental-bookings-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-bookings-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#rental-bookings-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#rental-bookings-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#rental-bookings-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#rental-bookings-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#rental-bookings-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#rental-bookings-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#rental-bookings-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#rental-bookings-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#rental-bookings-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#rental-bookings-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#rental-bookings-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#rental-bookings-page .useCase>.icon {
color: var(--navy)
}
#rental-bookings-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#rental-bookings-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-bookings-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#rental-bookings-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#rental-bookings-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#rental-bookings-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#rental-bookings-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#rental-bookings-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#rental-bookings-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-bookings-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#rental-bookings-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#rental-bookings-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#rental-bookings-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#rental-bookings-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#rental-bookings-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#rental-bookings-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#rental-bookings-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#rental-bookings-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#rental-bookings-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#rental-bookings-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#rental-bookings-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#rental-bookings-page .ctaBtns .btn {
min-width: 219px
}
#rental-bookings-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#rental-bookings-page .btn.darkOutline:hover {
background: #252D33
}
#rental-bookings-page .final a:focus-visible {
outline-color: var(--yellow)
}
#rental-bookings-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#rental-bookings-page .heroGrid {
gap: 28px
}
#rental-bookings-page h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
#rental-bookings-page .hero .lead {
font-size: 16px
}
#rental-bookings-page .feature,
#rental-bookings-page .aiGrid {
gap: 30px
}
#rental-bookings-page .visual {
padding: 17px
}
#rental-bookings-page .toolCard {
padding: 21px 15px
}
#rental-bookings-page .toolCard strong {
font-size: 14px
}
#rental-bookings-page .handoffBand {
padding: 20px
}
#rental-bookings-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#rental-bookings-page section {
padding: 64px 0
}
#rental-bookings-page .hero {
padding: 34px 0 42px
}
#rental-bookings-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#rental-bookings-page .heroCopy {
max-width: 790px
}
#rental-bookings-page .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
#rental-bookings-page .hero .lead {
max-width: 760px
}
#rental-bookings-page .heroVisual {
max-width: 460px;
justify-self: center
}
#rental-bookings-page .feature,
#rental-bookings-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#rental-bookings-page .feature.reverse .visual {
order: 0
}
#rental-bookings-page .featureCopy {
max-width: 790px
}
#rental-bookings-page .visual {
max-width: 640px;
margin: 0 auto
}
#rental-bookings-page .outcomes,
#rental-bookings-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-bookings-page .connectedGrid {
gap: 13px
}
#rental-bookings-page .connectedCard {
padding: 22px
}
#rental-bookings-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-bookings-page .aiVisual {
max-width: 600px;
margin: auto
}
#rental-bookings-page .aiMini {
max-width: 780px
}
#rental-bookings-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#rental-bookings-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#rental-bookings-page .toolCard {
min-height: 145px
}
#rental-bookings-page .roleGrid {
gap: 20px
}
#rental-bookings-page .roleCard {
padding-right: 18px
}
#rental-bookings-page .roleCard h3 {
font-size: 20px
}
#rental-bookings-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#rental-bookings-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#rental-bookings-page .workflowLead br {
display: none
}
#rental-bookings-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#rental-bookings-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#rental-bookings-page .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
#rental-bookings-page .wrap {
width: calc(100% - 32px)
}
#rental-bookings-page section {
padding: 49px 0
}
#rental-bookings-page h2 {
font-size: 33px;
line-height: 1.15
}
#rental-bookings-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#rental-bookings-page .sectionHead {
margin-bottom: 27px
}
#rental-bookings-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#rental-bookings-page .hero {
padding: 25px 0 34px
}
#rental-bookings-page .heroGrid {
gap: 21px
}
#rental-bookings-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#rental-bookings-page .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
#rental-bookings-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#rental-bookings-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#rental-bookings-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#rental-bookings-page .hero .micro {
font-size: 11px
}
#rental-bookings-page .heroPills {
gap: 6px;
margin-top: 16px
}
#rental-bookings-page .heroPills span {
font-size: 9px
}
#rental-bookings-page .heroVisual {
max-width: 420px
}
#rental-bookings-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#rental-bookings-page .trust {
padding: 22px 0
}
#rental-bookings-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#rental-bookings-page .outcomes {
gap: 12px
}
#rental-bookings-page .outcome {
padding: 19px
}
#rental-bookings-page .outcome h3 {
font-size: 17px
}
#rental-bookings-page .outcome p {
font-size: 13px
}
#rental-bookings-page .feature {
gap: 27px
}
#rental-bookings-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#rental-bookings-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#rental-bookings-page .fi {
font-size: 12px
}
#rental-bookings-page .textLink {
font-size: 13px
}
#rental-bookings-page .visual {
padding: 15px;
border-radius: 16px
}
#rental-bookings-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#rental-bookings-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#rental-bookings-page .uiHeading .icon {
width: 18px;
height: 18px
}
#rental-bookings-page .uiFoot {
font-size: 9px
}
#rental-bookings-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#rental-bookings-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#rental-bookings-page .aiMini {
gap: 11px;
margin-top: 23px
}
#rental-bookings-page .aiMini article {
padding: 16px
}
#rental-bookings-page .aiMini h3 {
font-size: 15px
}
#rental-bookings-page .aiMini p {
font-size: 12px
}
#rental-bookings-page .aiNote {
font-size: 10px
}
#rental-bookings-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#rental-bookings-page .connectedCard {
padding: 23px
}
#rental-bookings-page .connectedCard h3 {
margin: 15px 0 9px
}
#rental-bookings-page .connectedCard p {
font-size: 14px
}
#rental-bookings-page .handoffBand {
padding: 20px
}
#rental-bookings-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#rental-bookings-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#rental-bookings-page .handoffBand small {
font-size: 11px
}
#rental-bookings-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#rental-bookings-page .featureGrid {
gap: 13px
}
#rental-bookings-page .featureCard {
padding: 21px
}
#rental-bookings-page .featureCard h3 {
font-size: 17px
}
#rental-bookings-page .featureCard p {
font-size: 13px
}
#rental-bookings-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#rental-bookings-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#rental-bookings-page .toolCard strong {
font-size: 15px
}
#rental-bookings-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#rental-bookings-page .toolCard:last-child .toolArrow {
top: 31px
}
#rental-bookings-page .toolCard:last-child strong {
padding-right: 25px
}
#rental-bookings-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#rental-bookings-page .useCases {
gap: 13px
}
#rental-bookings-page .useCase {
padding: 21px 18px
}
#rental-bookings-page .useCase h3 {
font-size: 17px
}
#rental-bookings-page .useCase p {
font-size: 13px
}
#rental-bookings-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#rental-bookings-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#rental-bookings-page .roleCard:last-child {
padding-bottom: 0
}
#rental-bookings-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#rental-bookings-page .roleCard>strong {
font-size: 14px
}
#rental-bookings-page .roleCard p {
font-size: 14px
}
#rental-bookings-page .workflowBand {
padding: 28px 0
}
#rental-bookings-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#rental-bookings-page .workflowLead {
font-size: 18px
}
#rental-bookings-page .workflowStep strong {
font-size: 14px
}
#rental-bookings-page .workflowStep p {
font-size: 10px
}
#rental-bookings-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#rental-bookings-page .final h2 {
font-size: 32px
}
#rental-bookings-page .final p {
font-size: 14px;
line-height: 1.8
}
#rental-bookings-page .final .ey {
font-size: 9px
}
#rental-bookings-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#rental-bookings-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#rental-bookings-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#rental-bookings-page .outcomes,
#rental-bookings-page .featureGrid,
#rental-bookings-page .useCases {
grid-template-columns: 1fr
}
#rental-bookings-page .outcome {
padding: 23px
}
#rental-bookings-page .outcome h3 {
font-size: 18px
}
#rental-bookings-page .outcome p {
font-size: 14px
}
#rental-bookings-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#rental-bookings-page .fi {
font-size: 13px
}
#rental-bookings-page .aiMini {
grid-template-columns: 1fr
}
#rental-bookings-page .aiMini h3 {
font-size: 17px
}
#rental-bookings-page .aiMini p {
font-size: 13px
}
#rental-bookings-page .aiMini article {
padding: 19px
}
#rental-bookings-page .featureCard h3,
#rental-bookings-page .useCase h3 {
font-size: 19px
}
#rental-bookings-page .featureCard p,
#rental-bookings-page .useCase p {
font-size: 14px
}
#rental-bookings-page .toolsGrid {
grid-template-columns: 1fr
}
#rental-bookings-page .toolCard,
#rental-bookings-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#rental-bookings-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#rental-bookings-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#rental-bookings-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#rental-bookings-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#rental-bookings-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#rental-bookings-page .toolArrow,
#rental-bookings-page .toolCard:last-child .toolArrow {
top: 30px
}
#rental-bookings-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#rental-bookings-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#rental-bookings-page h2 {
font-size: 30px
}
#rental-bookings-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#rental-bookings-page .hero h1 {
font-size: 31px
}
#rental-bookings-page .heroPills span {
font-size: 8px
}
#rental-bookings-page .heroPills {
gap: 5px
}
#rental-bookings-page .uiHeading {
font-size: 11px
}
#rental-bookings-page .uiHeading>.pill {
font-size: 7px
}
#rental-bookings-page .visual {
padding: 12px
}
#rental-bookings-page .final {
padding: 26px 20px
}
#rental-bookings-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#rental-bookings-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#rental-bookings-page section {
padding: 24px 0
}
#rental-bookings-page .hero,
#rental-bookings-page .soft {
background: #fff
}
#rental-bookings-page .dark,
#rental-bookings-page .workflowBand,
#rental-bookings-page .final {
background: #fff;
color: #11283A
}
#rental-bookings-page .dark h2,
#rental-bookings-page .dark h3,
#rental-bookings-page .final h2 {
color: #11283A
}
#rental-bookings-page .dark p,
#rental-bookings-page .final p {
color: #52697C
}
#rental-bookings-page .btn {
display: none
}
#rental-bookings-page .visual,
#rental-bookings-page .outcome,
#rental-bookings-page .featureCard,
#rental-bookings-page details {
break-inside: avoid
}
#rental-bookings-page .heroImage {
max-width: 380px
}
#rental-bookings-page .heroVisual {
justify-self: center
}
}
.rentalBookingsSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.rentalBookingsSkip:focus {
top: 12px
}
#rental-bookings-page .dark .textLink {
color: #FFF1BD
}
#rental-bookings-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
#rental-bookings-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#rental-bookings-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#rental-bookings-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy)
}
#rental-bookings-page .workflowStep {
min-width: 0
}
#rental-bookings-page .featureCopy>p {
max-width: 580px
}
#rental-bookings-page .toolCard strong {
padding-right: 12px
}
#rental-bookings-page .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
#rental-bookings-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#rental-bookings-page .supportStrip {
gap: 7px
}
#rental-bookings-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#rental-bookings-page .supportStrip .icon {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
#rental-bookings-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} #rental-bookings-page .rbToolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px;
background: #F7FBFD;
border-bottom: 1px solid var(--line);
font-size: 11px;
color: #41687E;
line-height: 1.5
}
#rental-bookings-page .rbToolbar>span {
display: flex;
align-items: center;
gap: 6px
}
#rental-bookings-page .rbToolbar .icon {
width: 15px;
height: 15px;
}
#rental-bookings-page .icon {
margin: 0 !important;
background: transparent;
}
#rental-bookings-page .rbCalendar {
padding: 12px 14px 15px
}
#rental-bookings-page .rbCalHead,
#rental-bookings-page .rbCalRow {
display: grid;
grid-template-columns: 95px repeat(7, minmax(0, 1fr));
align-items: center
}
#rental-bookings-page .rbCalHead {
height: 32px;
border-bottom: 1px solid var(--line);
color: #5B788C;
font-size: 9px;
text-align: center
}
#rental-bookings-page .rbCalHead>b {
text-align: left;
font-weight: 700
}
#rental-bookings-page .rbCalRow {
height: 65px;
border-bottom: 1px solid #E4EDF3;
background: linear-gradient(90deg, transparent 94px, #EAF0F4 95px, transparent 96px)
}
#rental-bookings-page .rbCalName {
grid-column: 1;
min-width: 0;
padding-right: 7px
}
#rental-bookings-page .rbCalName b {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.5
}
#rental-bookings-page .rbCalName small {
font-size: 8px;
display: block;
color: var(--muted);
margin-top: 2px
}
#rental-bookings-page .rbBooking {
display: flex;
align-items: center;
min-width: 0;
min-height: 29px;
line-height: 1.4;
padding: 7px 9px;
border: 1px solid #B9DCF0;
border-radius: 6px;
background: #E3F4FD;
color: #1B6385;
font-size: 9px;
font-weight: 750;
margin: 0 2px
}
#rental-bookings-page .rbBooking.rbService {
background: #FFF7D6;
border-color: #EBDBA3;
color: #7A5C0A
}
#rental-bookings-page .rbBooking.rbAvailable {
background: #EBF8F1;
border-color: #C3E3D0;
color: #1B7050
}
#rental-bookings-page .rbCalKey {
display: flex;
flex-wrap: wrap;
gap: 13px;
margin-top: 14px;
font-size: 8px;
color: #4F6F83;
line-height: 1.4
}
#rental-bookings-page .rbCalKey>span {
display: flex;
gap: 5px;
align-items: center
}
#rental-bookings-page .rbCalKey i {
display: block;
width: 7px;
height: 7px;
background: #4CACDB;
border-radius: 2px
}
#rental-bookings-page .rbCalKey .service {
background: #E6BF42
}
#rental-bookings-page .rbCalKey .available {
background: #61B28C
}
#rental-bookings-page .rbConflict {
border-top: 1px solid #EADDA9;
background: #FFFBEB;
padding: 14px;
display: flex;
align-items: center;
gap: 9px
}
#rental-bookings-page .rbConflict>.icon {
color: #8C6C12;
width: 20px;
height: 20px
}
#rental-bookings-page .rbConflict>div {
flex: 1;
min-width: 0
}
#rental-bookings-page .rbConflict strong {
font-size: 11px;
line-height: 1.5;
color: #5C4810;
display: block
}
#rental-bookings-page .rbConflict p {
font-size: 9px;
color: #7B6D40;
margin-top: 4px;
line-height: 1.6
}
#rental-bookings-page .rbResolution {
border: 1px solid #C5E1D1;
background: #F2FBF6;
border-radius: 11px;
padding: 14px;
margin-top: 13px;
display: flex;
gap: 10px;
align-items: center
}
#rental-bookings-page .rbResolution .tileIcon {
background: #E0F2E8;
color: #277C59;
width: 33px;
height: 33px;
flex-basis: 33px
}
#rental-bookings-page .rbResolution .icon {
width: 18px;
height: 18px
}
#rental-bookings-page .rbResolution strong {
font-size: 11px;
color: #245C45;
display: block;
line-height: 1.5
}
#rental-bookings-page .rbResolution p {
font-size: 9px;
color: #577766;
line-height: 1.65;
margin-top: 5px
}
#rental-bookings-page .rbQuoteHead {
padding: 19px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--line)
}
#rental-bookings-page .rbQuoteHead strong {
font-size: 19px;
line-height: 1.3;
letter-spacing: -.025em;
display: block;
color: var(--navy);
margin: 7px 0
}
#rental-bookings-page .rbQuoteHead p {
font-size: 9px;
color: var(--muted);
line-height: 1.5
}
#rental-bookings-page .rbDocIcon {
height: 46px;
width: 37px;
flex: none;
display: grid;
place-items: center;
border: 1px solid #D4E4EC;
background: #F6FBFE;
border-radius: 7px;
color: #4289AF
}
#rental-bookings-page .rbQuoteLines {
padding: 0 19px
}
#rental-bookings-page .rbQuoteLines>div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid #E5EEF3;
color: var(--navy)
}
#rental-bookings-page .rbQuoteLines>div:last-child {
border-bottom: 0
}
#rental-bookings-page .rbQuoteLines .rbQuoteColumns {
font-size: 9px;
color: var(--muted);
padding: 9px 0;
font-weight: 750
}
#rental-bookings-page .rbQuoteLines strong {
display: block;
font-size: 12px;
line-height: 1.5
}
#rental-bookings-page .rbQuoteLines small {
display: block;
font-size: 9px;
margin-top: 4px;
color: var(--muted);
line-height: 1.5
}
#rental-bookings-page .rbQuoteLines b {
font-size: 15px;
white-space: nowrap;
font-variant-numeric: tabular-nums
}
#rental-bookings-page .rbQuoteTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: #F0F9FE;
border-top: 1px solid var(--line);
padding: 15px 19px
}
#rental-bookings-page .rbQuoteTotal small {
font-size: 9px;
color: #58778A;
display: block
}
#rental-bookings-page .rbQuoteTotal strong {
font-size: 31px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -.04em;
display: block;
margin-top: 5px
}
#rental-bookings-page .rbQuoteTotal>span {
text-align: right;
font-size: 8px;
color: #6B8292;
line-height: 1.6
}
#rental-bookings-page .rbQuoteActions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 13px
}
#rental-bookings-page .rbQuoteActions>div {
display: flex;
gap: 8px;
align-items: flex-start;
padding: 13px 10px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#rental-bookings-page .rbQuoteActions .icon {
width: 18px;
height: 18px;
color: var(--navy);
margin-top: 1px
}
#rental-bookings-page .rbQuoteActions strong {
font-size: 10px;
line-height: 1.5;
color: var(--navy);
display: block
}
#rental-bookings-page .rbQuoteActions small {
font-size: 8px;
line-height: 1.6;
color: var(--muted);
display: block;
margin-top: 5px
}
#rental-bookings-page .rbProjectTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px;
border-bottom: 1px solid var(--line);
background: #F5FBFE
}
#rental-bookings-page .rbProjectTop strong {
display: block;
font-size: 18px;
color: var(--navy);
line-height: 1.3;
letter-spacing: -.025em;
margin: 6px 0
}
#rental-bookings-page .rbProjectTop p {
font-size: 9px;
color: var(--muted);
line-height: 1.5
}
#rental-bookings-page .rbAssignment {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 18px 15px;
border-bottom: 1px solid #E4EDF3
}
#rental-bookings-page .rbAssignment:last-child {
border: 0
}
#rental-bookings-page .rbAssignIcon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
background: #EAF6FC;
color: #237296;
border-radius: 9px
}
#rental-bookings-page .rbAssignIcon .icon {
height: 19px;
width: 19px
}
#rental-bookings-page .rbAssignment strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.4
}
#rental-bookings-page .rbAssignment small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#rental-bookings-page .rbAssignment>b {
font-size: 12px;
color: var(--navy);
white-space: nowrap
}
#rental-bookings-page .rbDispatchPlan {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 13px
}
#rental-bookings-page .rbDispatchPlan>div {
border: 1px solid var(--line);
border-radius: 10px;
background: white;
padding: 15px 13px
}
#rental-bookings-page .rbDispatchPlan span {
font-size: 9px;
color: var(--muted);
display: block
}
#rental-bookings-page .rbDispatchPlan strong {
font-size: 14px;
color: var(--navy);
letter-spacing: -.02em;
display: block;
margin-top: 6px;
line-height: 1.5
}
#rental-bookings-page .rbDispatchPlan small {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
display: block;
margin-top: 4px
}
#rental-bookings-page .rbMiniFlow {
display: grid;
grid-template-columns: minmax(0, 1fr) 19px minmax(0, 1fr) 19px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 17px 13px;
border-radius: 11px;
background: #0D2939;
margin-top: 13px;
color: white
}
#rental-bookings-page .rbMiniFlow>span {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 10px;
line-height: 1.5
}
#rental-bookings-page .rbMiniFlow .icon {
width: 18px;
height: 18px;
color: var(--yellow)
}
#rental-bookings-page .rbMiniFlow>.flowArrow {
width: 16px;
height: 16px;
color: #83ADC4
}
#rental-bookings-page .rbPortalScene {
display: grid;
grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
gap: 13px;
align-items: center
}
#rental-bookings-page .rbPortal {
border: 1px solid #BFD6E4;
border-radius: 13px;
background: #fff;
overflow: hidden;
min-width: 0
}
#rental-bookings-page .rbPortalHeader {
background: #063B5C;
color: white;
padding: 15px 11px;
font-size: 11px;
display: flex;
align-items: center;
gap: 7px;
font-weight: 700;
line-height: 1.4
}
#rental-bookings-page .rbPortalHeader .icon {
width: 18px;
height: 18px;
color: #8CD9FD
}
#rental-bookings-page .rbPortalBody {
padding: 16px 13px
}
#rental-bookings-page .rbPortalBody>strong {
font-size: 20px;
line-height: 1.2;
display: block;
color: var(--navy);
letter-spacing: -.025em;
margin: 7px 0 19px
}
#rental-bookings-page .rbMockField {
padding: 11px 9px;
background: #F7FBFD;
border: 1px solid var(--line);
border-radius: 7px;
margin-top: 10px
}
#rental-bookings-page .rbMockField small {
display: block;
font-size: 8px;
color: var(--muted);
line-height: 1.4
}
#rental-bookings-page .rbMockField span {
display: block;
font-size: 10px;
color: var(--navy);
line-height: 1.5;
margin-top: 5px;
font-weight: 650
}
#rental-bookings-page .rbDateFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px
}
#rental-bookings-page .rbMockSubmit {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 7px;
background: #FFC928;
font-size: 10px;
font-weight: 750;
padding: 11px 7px;
margin-top: 13px;
line-height: 1.4;
color: #10222B
}
#rental-bookings-page .rbMockSubmit .icon {
width: 14px;
height: 14px
}
#rental-bookings-page .rbFine {
font-size: 8px;
color: #718999;
line-height: 1.6;
margin-top: 9px;
text-align: center
}
#rental-bookings-page .rbRequestSteps {
display: grid;
gap: 0;
padding: 7px 0
}
#rental-bookings-page .rbRequestStep {
position: relative;
display: flex;
align-items: flex-start;
gap: 9px;
padding: 14px 0 17px
}
#rental-bookings-page .rbRequestStep:not(:last-child):before {
content: "";
position: absolute;
left: 12px;
top: 40px;
bottom: -13px;
border-left: 1px dashed #AEC9D9
}
#rental-bookings-page .rbRequestStep>span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
flex: 0 0 25px;
background: #EAF3F8;
color: #4F748A;
border: 1px solid #CEE0EB;
border-radius: 50%;
font-size: 10px;
font-weight: 750
}
#rental-bookings-page .rbRequestStep.done>span {
background: #E3F4E9;
color: #217A54;
border-color: #BFDCCA
}
#rental-bookings-page .rbRequestStep strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.4;
margin-top: 4px
}
#rental-bookings-page .rbRequestStep p {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
margin-top: 7px
}
#rental-bookings-page .rbAiPanel {
border: 1px solid #476072;
border-radius: 17px;
background: #fff;
overflow: hidden;
color: var(--ink)
}
#rental-bookings-page .rbAiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--line);
padding: 20px
}
#rental-bookings-page .rbAiTop>span:first-child {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 800;
color: var(--navy)
}
#rental-bookings-page .rbAiTop>span>.icon {
width: 22px;
height: 22px;
color: #1C88B9
}
#rental-bookings-page .rbAiPrompt {
border: 1px solid #CDE5F1;
border-radius: 11px 11px 2px 11px;
background: #EFF9FE;
color: #254E67;
font-size: 12px;
line-height: 1.7;
margin: 18px 18px 16px 39px;
padding: 14px
}
#rental-bookings-page .rbAiReply {
padding: 0 19px 19px
}
#rental-bookings-page .rbAiReply>strong {
font-size: 18px;
line-height: 1.4;
color: var(--navy);
display: block;
margin: 7px 0 13px;
letter-spacing: -.02em
}
#rental-bookings-page .rbSourceRecord {
display: flex;
gap: 8px;
align-items: center;
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F7FBFD
}
#rental-bookings-page .rbSourceRecord>.icon {
width: 20px;
height: 20px;
color: #337BA1
}
#rental-bookings-page .rbSourceRecord b {
font-size: 11px;
line-height: 1.5;
display: block;
color: #255B78
}
#rental-bookings-page .rbSourceRecord small {
display: block;
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px
}
#rental-bookings-page .rbAiReply>p {
color: #526E81;
font-size: 12px;
line-height: 1.75;
margin-top: 14px
}
#rental-bookings-page .rbAiDraft {
display: grid;
gap: 10px;
padding: 15px;
background: #F4F9FC;
border: 1px solid var(--line);
border-radius: 9px;
margin-top: 15px
}
#rental-bookings-page .rbAiDraft>b {
font-size: 11px;
color: var(--navy);
line-height: 1.5
}
#rental-bookings-page .rbAiDraft>span {
display: flex;
gap: 7px;
font-size: 10px;
line-height: 1.5;
color: #466980;
align-items: center
}
#rental-bookings-page .rbAiDraft .icon {
width: 14px;
height: 14px;
color: #2F8964
}
#rental-bookings-page .rbAiFoot {
display: flex;
align-items: center;
gap: 8px;
background: #EAF8F0;
color: #226C4D;
padding: 15px 19px;
font-size: 10px;
line-height: 1.7;
border-top: 1px solid #CAE3D6
}
#rental-bookings-page .rbAiFoot .icon {
width: 19px;
height: 19px
}
@media(min-width:981px) and (max-width:1150px) {
#rental-bookings-page .rbProjectTop {
padding: 14px
}
#rental-bookings-page .rbProjectTop>.pill {
display: none
}
#rental-bookings-page .rbProjectTop strong {
font-size: 16px
}
#rental-bookings-page .rbAssignment {
padding: 15px 12px;
gap: 8px
}
#rental-bookings-page .rbAssignment strong {
font-size: 11px
}
#rental-bookings-page .rbAssignment small {
font-size: 8px
}
#rental-bookings-page .rbPortalScene {
gap: 10px
}
#rental-bookings-page .rbRequestStep {
gap: 7px
}
#rental-bookings-page .rbRequestStep strong {
font-size: 11px
}
#rental-bookings-page .rbCalHead,
#rental-bookings-page .rbCalRow {
grid-template-columns: 80px repeat(7, minmax(0, 1fr))
}
#rental-bookings-page .rbCalRow {
background: none
}
#rental-bookings-page .rbBooking {
font-size: 8px;
padding: 6px
}
}
@media(max-width:640px) {
#rental-bookings-page .rbToolbar {
font-size: 10px;
padding: 12px
}
#rental-bookings-page .rbCalendar {
padding: 9px 11px 12px
}
#rental-bookings-page .rbCalHead,
#rental-bookings-page .rbCalRow {
grid-template-columns: 76px repeat(7, minmax(0, 1fr))
}
#rental-bookings-page .rbCalHead {
font-size: 8px
}
#rental-bookings-page .rbCalRow {
height: 60px;
background: none
}
#rental-bookings-page .rbCalName b {
font-size: 10px
}
#rental-bookings-page .rbCalName small {
font-size: 7px
}
#rental-bookings-page .rbBooking {
font-size: 8px;
padding: 6px 5px;
min-height: 27px
}
#rental-bookings-page .rbCalKey {
font-size: 7px;
gap: 10px
}
#rental-bookings-page .rbConflict {
padding: 12px 10px;
gap: 8px
}
#rental-bookings-page .rbConflict strong {
font-size: 10px
}
#rental-bookings-page .rbConflict p {
font-size: 8px
}
#rental-bookings-page .rbConflict>.pill {
display: none
}
#rental-bookings-page .rbResolution {
padding: 12px;
align-items: flex-start
}
#rental-bookings-page .rbResolution strong {
font-size: 10px
}
#rental-bookings-page .rbResolution p {
font-size: 9px
}
#rental-bookings-page .rbQuoteHead {
padding: 16px
}
#rental-bookings-page .rbQuoteHead strong {
font-size: 18px
}
#rental-bookings-page .rbQuoteLines {
padding: 0 16px
}
#rental-bookings-page .rbQuoteLines>div {
padding: 12px 0
}
#rental-bookings-page .rbQuoteLines strong {
font-size: 11px
}
#rental-bookings-page .rbQuoteLines small {
font-size: 8px
}
#rental-bookings-page .rbQuoteTotal {
padding: 14px 16px
}
#rental-bookings-page .rbQuoteTotal strong {
font-size: 29px
}
#rental-bookings-page .rbQuoteActions {
gap: 8px
}
#rental-bookings-page .rbQuoteActions>div {
padding: 12px 9px;
gap: 6px
}
#rental-bookings-page .rbQuoteActions strong {
font-size: 9px
}
#rental-bookings-page .rbProjectTop {
padding: 15px
}
#rental-bookings-page .rbProjectTop strong {
font-size: 17px
}
#rental-bookings-page .rbProjectTop>.pill {
display: none
}
#rental-bookings-page .rbAssignment {
padding: 15px 12px;
gap: 8px;
grid-template-columns: 29px minmax(0, 1fr) auto
}
#rental-bookings-page .rbAssignIcon {
height: 29px;
width: 29px
}
#rental-bookings-page .rbAssignIcon .icon {
height: 17px;
width: 17px
}
#rental-bookings-page .rbAssignment strong {
font-size: 11px
}
#rental-bookings-page .rbAssignment small {
font-size: 8px
}
#rental-bookings-page .rbAssignment>b {
font-size: 11px
}
#rental-bookings-page .rbAssignment>.pill {
font-size: 8px
}
#rental-bookings-page .rbDispatchPlan>div {
padding: 13px 10px
}
#rental-bookings-page .rbDispatchPlan strong {
font-size: 12px
}
#rental-bookings-page .rbDispatchPlan small {
font-size: 8px
}
#rental-bookings-page .rbMiniFlow {
gap: 5px;
padding: 15px 9px;
grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr)
}
#rental-bookings-page .rbMiniFlow>span {
font-size: 9px;
flex-direction: column
}
#rental-bookings-page .rbMiniFlow>.flowArrow {
width: 12px;
height: 12px
}
#rental-bookings-page .rbPortalScene {
gap: 11px
}
#rental-bookings-page .rbPortalHeader {
font-size: 10px;
padding: 13px 10px
}
#rental-bookings-page .rbPortalBody {
padding: 14px 11px
}
#rental-bookings-page .rbPortalBody>strong {
font-size: 18px
}
#rental-bookings-page .rbRequestStep strong {
font-size: 11px
}
#rental-bookings-page .rbRequestStep p {
font-size: 8px
}
#rental-bookings-page .rbAiTop {
padding: 16px
}
#rental-bookings-page .rbAiPrompt {
margin: 16px 15px 15px 27px;
font-size: 11px;
padding: 12px
}
#rental-bookings-page .rbAiReply {
padding: 0 15px 16px
}
#rental-bookings-page .rbAiReply>strong {
font-size: 18px
}
#rental-bookings-page .rbAiReply>p {
font-size: 11px
}
#rental-bookings-page .rbAiDraft {
padding: 12px
}
#rental-bookings-page .rbAiFoot {
padding: 13px 15px;
font-size: 9px
}
}
@media(max-width:420px) {
#rental-bookings-page .rbPortalScene {
grid-template-columns: 1fr;
gap: 12px
}
#rental-bookings-page .rbPortal {
max-width: 290px;
width: 100%;
margin: auto
}
#rental-bookings-page .rbPortalBody {
padding: 18px 16px
}
#rental-bookings-page .rbPortalHeader {
font-size: 12px;
padding: 14px 16px
}
#rental-bookings-page .rbPortalBody>strong {
font-size: 22px
}
#rental-bookings-page .rbMockField {
padding: 11px
}
#rental-bookings-page .rbMockField span {
font-size: 12px
}
#rental-bookings-page .rbMockField small {
font-size: 9px
}
#rental-bookings-page .rbMockSubmit {
font-size: 11px
}
#rental-bookings-page .rbRequestSteps {
padding: 0 9px
}
#rental-bookings-page .rbRequestStep strong {
font-size: 12px
}
#rental-bookings-page .rbRequestStep p {
font-size: 10px;
margin-top: 5px
}
#rental-bookings-page .rbRequestStep {
padding: 11px 0 15px
}
#rental-bookings-page .rbQuoteActions {
grid-template-columns: 1fr;
gap: 9px
}
#rental-bookings-page .rbQuoteActions>div {
padding: 13px;
gap: 9px
}
#rental-bookings-page .rbQuoteActions strong {
font-size: 11px
}
#rental-bookings-page .rbQuoteActions small {
font-size: 9px
}
#rental-bookings-page .rbAssignment>.pill {
display: none
}
#rental-bookings-page .rbAiTop>.pill {
font-size: 8px
}
#rental-bookings-page .rbSourceRecord {
padding: 10px;
gap: 7px
}
#rental-bookings-page .rbSourceRecord b {
font-size: 10px
}
#rental-bookings-page .rbSourceRecord small {
font-size: 8px
}
}
@media(max-width:360px) {
#rental-bookings-page .rbCalHead,
#rental-bookings-page .rbCalRow {
grid-template-columns: 67px repeat(7, minmax(0, 1fr))
}
#rental-bookings-page .rbBooking {
font-size: 7px;
padding: 5px 4px;
margin: 0 1px
}
#rental-bookings-page .rbCalendar {
padding: 8px
}
#rental-bookings-page .rbCalKey {
gap: 7px
}
#rental-bookings-page .rbCalName b {
font-size: 9px
}
#rental-bookings-page .rbToolbar {
font-size: 9px;
padding: 11px 8px;
gap: 7px
}
#rental-bookings-page .rbToolbar .icon {
height: 13px;
width: 13px
}
#rental-bookings-page .rbQuoteHead {
padding: 14px
}
#rental-bookings-page .rbQuoteHead strong {
font-size: 16px
}
#rental-bookings-page .rbQuoteHead p {
font-size: 8px
}
#rental-bookings-page .rbDocIcon {
height: 39px;
width: 31px
}
#rental-bookings-page .rbProjectTop strong {
font-size: 16px
}
#rental-bookings-page .rbAssignment {
gap: 7px;
padding: 14px 10px
}
#rental-bookings-page .rbAssignment strong {
font-size: 10px
}
#rental-bookings-page .rbDispatchPlan {
gap: 8px
}
#rental-bookings-page .rbDispatchPlan strong {
font-size: 11px
}
#rental-bookings-page .rbAiTop {
padding: 14px 12px
}
#rental-bookings-page .rbAiDraft>span {
font-size: 9px
}
} .rentalBookingsSkip:focus {
position: fixed;
top: 12px
}  .equipment-availability-scheduling-software .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.equipment-availability-scheduling-software .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.equipment-availability-scheduling-software .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.equipment-availability-scheduling-software .btn .icon2 {
width: 17px;
height: 17px
}
.equipment-availability-scheduling-software .btn.black {
background: #0B0B0B;
color: #fff
}
.equipment-availability-scheduling-software .btn.black:hover {
background: #303030
}
.equipment-availability-scheduling-software .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.equipment-availability-scheduling-software .btn.yellow:hover {
background: #FFD454
}
.equipment-availability-scheduling-software .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.equipment-availability-scheduling-software .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.equipment-availability-scheduling-software .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.equipment-availability-scheduling-software .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.equipment-availability-scheduling-software .textLink .icon2 {
width: 17px;
height: 17px
}
.equipment-availability-scheduling-software .textLink:hover {
color: var(--brand2)
}
.equipment-availability-scheduling-software .soft {
background: var(--sky2)
}
.equipment-availability-scheduling-software .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.equipment-availability-scheduling-software .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.equipment-availability-scheduling-software .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.equipment-availability-scheduling-software .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.equipment-availability-scheduling-software .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.equipment-availability-scheduling-software .heroGrid>*,
.equipment-availability-scheduling-software .feature>*,
.equipment-availability-scheduling-software .aiGrid>* {
min-width: 0
}
.equipment-availability-scheduling-software .heroCopy {
min-width: 0
}
.equipment-availability-scheduling-software .hero h1 {
max-width: 630px
}
.equipment-availability-scheduling-software .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.equipment-availability-scheduling-software .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.equipment-availability-scheduling-software .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.equipment-availability-scheduling-software .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.equipment-availability-scheduling-software .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.equipment-availability-scheduling-software .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.equipment-availability-scheduling-software .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.equipment-availability-scheduling-software .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.equipment-availability-scheduling-software .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.equipment-availability-scheduling-software .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.equipment-availability-scheduling-software .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.equipment-availability-scheduling-software .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.equipment-availability-scheduling-software .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.equipment-availability-scheduling-software .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.equipment-availability-scheduling-software .outcome:nth-child(2):before {
background: var(--yellow)
}
.equipment-availability-scheduling-software .outcome:nth-child(3):before {
background: var(--green)
}
.equipment-availability-scheduling-software .outcome:nth-child(4):before {
background: var(--purple)
}
.equipment-availability-scheduling-software .outcome>.icon2 {
color: var(--navy)
}
.equipment-availability-scheduling-software .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.equipment-availability-scheduling-software .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.equipment-availability-scheduling-software .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.equipment-availability-scheduling-software .feature.reverse .visual {
order: -1
}
.equipment-availability-scheduling-software .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.equipment-availability-scheduling-software .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.equipment-availability-scheduling-software .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.equipment-availability-scheduling-software .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.equipment-availability-scheduling-software .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.equipment-availability-scheduling-software .tick .icon2 {
height: 13px;
width: 13px
}
.equipment-availability-scheduling-software .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.equipment-availability-scheduling-software .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.equipment-availability-scheduling-software .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.equipment-availability-scheduling-software .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.equipment-availability-scheduling-software .uiHeading .icon2 {
height: 19px;
width: 19px
}
.equipment-availability-scheduling-software .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.equipment-availability-scheduling-software .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.equipment-availability-scheduling-software .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.equipment-availability-scheduling-software .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.equipment-availability-scheduling-software .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.equipment-availability-scheduling-software .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.equipment-availability-scheduling-software .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.equipment-availability-scheduling-software .dark h2,
.equipment-availability-scheduling-software .dark h3 {
color: white
}
.equipment-availability-scheduling-software .dark .ey {
background: var(--yellow);
color: #111
}
.equipment-availability-scheduling-software .dark .textLink {
color: #fff
}
.equipment-availability-scheduling-software .dark a:focus-visible {
outline-color: var(--yellow)
}
.equipment-availability-scheduling-software .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.equipment-availability-scheduling-software .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.equipment-availability-scheduling-software .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.equipment-availability-scheduling-software .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.equipment-availability-scheduling-software .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.equipment-availability-scheduling-software .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.equipment-availability-scheduling-software .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.equipment-availability-scheduling-software .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.equipment-availability-scheduling-software .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.equipment-availability-scheduling-software .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.equipment-availability-scheduling-software .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.equipment-availability-scheduling-software .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.equipment-availability-scheduling-software .connectedCard h3 {
margin: 18px 0 11px
}
.equipment-availability-scheduling-software .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.equipment-availability-scheduling-software .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.equipment-availability-scheduling-software .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
.equipment-availability-scheduling-software .handoffBand>div>.icon2 {
color: var(--navy);
width: 29px;
height: 29px
}
.equipment-availability-scheduling-software .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.equipment-availability-scheduling-software .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.equipment-availability-scheduling-software .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.equipment-availability-scheduling-software .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.equipment-availability-scheduling-software .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.equipment-availability-scheduling-software .featureCard>.icon2 {
color: var(--navy)
}
.equipment-availability-scheduling-software .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.equipment-availability-scheduling-software .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.equipment-availability-scheduling-software .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.equipment-availability-scheduling-software .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.equipment-availability-scheduling-software .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.equipment-availability-scheduling-software .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.equipment-availability-scheduling-software .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.equipment-availability-scheduling-software .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.equipment-availability-scheduling-software .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.equipment-availability-scheduling-software .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.equipment-availability-scheduling-software .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.equipment-availability-scheduling-software .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.equipment-availability-scheduling-software .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.equipment-availability-scheduling-software .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.equipment-availability-scheduling-software .useCase>.icon2 {
color: var(--navy)
}
.equipment-availability-scheduling-software .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.equipment-availability-scheduling-software .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.equipment-availability-scheduling-software .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.equipment-availability-scheduling-software .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.equipment-availability-scheduling-software .roleCard:last-child {
border: 0;
padding-right: 0
}
.equipment-availability-scheduling-software .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.equipment-availability-scheduling-software .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.equipment-availability-scheduling-software .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.equipment-availability-scheduling-software .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.equipment-availability-scheduling-software .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.equipment-availability-scheduling-software .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.equipment-availability-scheduling-software .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.equipment-availability-scheduling-software .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.equipment-availability-scheduling-software .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.equipment-availability-scheduling-software .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.equipment-availability-scheduling-software .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
.equipment-availability-scheduling-software .faq {
max-width: 900px
}
.equipment-availability-scheduling-software .faq .sectionHead {
max-width: 800px
}
.equipment-availability-scheduling-software .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.equipment-availability-scheduling-software .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.equipment-availability-scheduling-software .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.equipment-availability-scheduling-software .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.equipment-availability-scheduling-software .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.equipment-availability-scheduling-software .ctaBtns .btn {
min-width: 219px
}
.equipment-availability-scheduling-software .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.equipment-availability-scheduling-software .btn.darkOutline:hover {
background: #252D33
}
.equipment-availability-scheduling-software .final a:focus-visible {
outline-color: var(--yellow)
}
.equipment-availability-scheduling-software .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.equipment-availability-scheduling-software .heroGrid {
gap: 28px
}
.equipment-availability-scheduling-software h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.equipment-availability-scheduling-software .hero .lead {
font-size: 16px
}
.equipment-availability-scheduling-software .feature,
.equipment-availability-scheduling-software .aiGrid {
gap: 30px
}
.equipment-availability-scheduling-software .visual {
padding: 17px
}
.equipment-availability-scheduling-software .toolCard {
padding: 21px 15px
}
.equipment-availability-scheduling-software .toolCard strong {
font-size: 14px
}
.equipment-availability-scheduling-software .handoffBand {
padding: 20px
}
.equipment-availability-scheduling-software .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.equipment-availability-scheduling-software section {
padding: 64px 0
}
.equipment-availability-scheduling-software .hero {
padding: 34px 0 42px
}
.equipment-availability-scheduling-software .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.equipment-availability-scheduling-software .heroCopy {
max-width: 790px
}
.equipment-availability-scheduling-software .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.equipment-availability-scheduling-software .hero .lead {
max-width: 760px
}
.equipment-availability-scheduling-software .heroVisual {
max-width: 460px;
justify-self: center
}
.equipment-availability-scheduling-software .feature,
.equipment-availability-scheduling-software .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.equipment-availability-scheduling-software .feature.reverse .visual {
order: 0
}
.equipment-availability-scheduling-software .featureCopy {
max-width: 790px
}
.equipment-availability-scheduling-software .visual {
max-width: 640px;
margin: 0 auto
}
.equipment-availability-scheduling-software .outcomes,
.equipment-availability-scheduling-software .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.equipment-availability-scheduling-software .connectedGrid {
gap: 13px
}
.equipment-availability-scheduling-software .connectedCard {
padding: 22px
}
.equipment-availability-scheduling-software .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.equipment-availability-scheduling-software .aiVisual {
max-width: 600px;
margin: auto
}
.equipment-availability-scheduling-software .aiMini {
max-width: 780px
}
.equipment-availability-scheduling-software .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.equipment-availability-scheduling-software .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.equipment-availability-scheduling-software .toolCard {
min-height: 145px
}
.equipment-availability-scheduling-software .roleGrid {
gap: 20px
}
.equipment-availability-scheduling-software .roleCard {
padding-right: 18px
}
.equipment-availability-scheduling-software .roleCard h3 {
font-size: 20px
}
.equipment-availability-scheduling-software .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.equipment-availability-scheduling-software .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.equipment-availability-scheduling-software .workflowLead br {
display: none
}
.equipment-availability-scheduling-software .final {
grid-template-columns: 1fr;
gap: 27px
}
.equipment-availability-scheduling-software .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.equipment-availability-scheduling-software .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
.equipment-availability-scheduling-software .wrap {
width: calc(100% - 32px)
}
.equipment-availability-scheduling-software section {
padding: 49px 0
}
.equipment-availability-scheduling-software h2 {
font-size: 33px;
line-height: 1.15
}
.equipment-availability-scheduling-software .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.equipment-availability-scheduling-software .sectionHead {
margin-bottom: 27px
}
.equipment-availability-scheduling-software .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.equipment-availability-scheduling-software .hero {
padding: 25px 0 34px
}
.equipment-availability-scheduling-software .heroGrid {
gap: 21px
}
.equipment-availability-scheduling-software .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.equipment-availability-scheduling-software .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.equipment-availability-scheduling-software .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.equipment-availability-scheduling-software .hero .actions {
gap: 8px;
margin-top: 23px
}
.equipment-availability-scheduling-software .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.equipment-availability-scheduling-software .hero .micro {
font-size: 11px
}
.equipment-availability-scheduling-software .heroPills {
gap: 6px;
margin-top: 16px
}
.equipment-availability-scheduling-software .heroPills span {
font-size: 9px
}
.equipment-availability-scheduling-software .heroVisual {
max-width: 420px
}
.equipment-availability-scheduling-software .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.equipment-availability-scheduling-software .trust {
padding: 22px 0
}
.equipment-availability-scheduling-software .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.equipment-availability-scheduling-software .outcomes {
gap: 12px
}
.equipment-availability-scheduling-software .outcome {
padding: 19px
}
.equipment-availability-scheduling-software .outcome h3 {
font-size: 17px
}
.equipment-availability-scheduling-software .outcome p {
font-size: 13px
}
.equipment-availability-scheduling-software .feature {
gap: 27px
}
.equipment-availability-scheduling-software .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.equipment-availability-scheduling-software .fl {
gap: 11px 13px;
margin-top: 21px
}
.equipment-availability-scheduling-software .fi {
font-size: 12px
}
.equipment-availability-scheduling-software .textLink {
font-size: 13px
}
.equipment-availability-scheduling-software .visual {
padding: 15px;
border-radius: 16px
}
.equipment-availability-scheduling-software .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.equipment-availability-scheduling-software .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.equipment-availability-scheduling-software .uiHeading .icon2 {
width: 18px;
height: 18px
}
.equipment-availability-scheduling-software .uiFoot {
font-size: 9px
}
.equipment-availability-scheduling-software .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.equipment-availability-scheduling-software .aiLead {
font-size: 15px;
line-height: 1.8
}
.equipment-availability-scheduling-software .aiMini {
gap: 11px;
margin-top: 23px
}
.equipment-availability-scheduling-software .aiMini article {
padding: 16px
}
.equipment-availability-scheduling-software .aiMini h3 {
font-size: 15px
}
.equipment-availability-scheduling-software .aiMini p {
font-size: 12px
}
.equipment-availability-scheduling-software .aiNote {
font-size: 10px
}
.equipment-availability-scheduling-software .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.equipment-availability-scheduling-software .connectedCard {
padding: 23px
}
.equipment-availability-scheduling-software .connectedCard h3 {
margin: 15px 0 9px
}
.equipment-availability-scheduling-software .connectedCard p {
font-size: 14px
}
.equipment-availability-scheduling-software .handoffBand {
padding: 20px
}
.equipment-availability-scheduling-software .handoffBand>div {
align-items: flex-start;
gap: 10px
}
.equipment-availability-scheduling-software .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.equipment-availability-scheduling-software .handoffBand small {
font-size: 11px
}
.equipment-availability-scheduling-software .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.equipment-availability-scheduling-software .featureGrid {
gap: 13px
}
.equipment-availability-scheduling-software .featureCard {
padding: 21px
}
.equipment-availability-scheduling-software .featureCard h3 {
font-size: 17px
}
.equipment-availability-scheduling-software .featureCard p {
font-size: 13px
}
.equipment-availability-scheduling-software .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.equipment-availability-scheduling-software .toolCard {
padding: 19px 15px;
min-height: 155px
}
.equipment-availability-scheduling-software .toolCard strong {
font-size: 15px
}
.equipment-availability-scheduling-software .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.equipment-availability-scheduling-software .toolCard:last-child .toolArrow {
top: 31px
}
.equipment-availability-scheduling-software .toolCard:last-child strong {
padding-right: 25px
}
.equipment-availability-scheduling-software .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.equipment-availability-scheduling-software .useCases {
gap: 13px
}
.equipment-availability-scheduling-software .useCase {
padding: 21px 18px
}
.equipment-availability-scheduling-software .useCase h3 {
font-size: 17px
}
.equipment-availability-scheduling-software .useCase p {
font-size: 13px
}
.equipment-availability-scheduling-software .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.equipment-availability-scheduling-software .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.equipment-availability-scheduling-software .roleCard:last-child {
padding-bottom: 0
}
.equipment-availability-scheduling-software .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.equipment-availability-scheduling-software .roleCard>strong {
font-size: 14px
}
.equipment-availability-scheduling-software .roleCard p {
font-size: 14px
}
.equipment-availability-scheduling-software .workflowBand {
padding: 28px 0
}
.equipment-availability-scheduling-software .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.equipment-availability-scheduling-software .workflowLead {
font-size: 18px
}
.equipment-availability-scheduling-software .workflowStep strong {
font-size: 14px
}
.equipment-availability-scheduling-software .workflowStep p {
font-size: 10px
}
.equipment-availability-scheduling-software .faq .sectionHead {
margin-bottom: 25px
}
.equipment-availability-scheduling-software details {
padding: 16px
}
.equipment-availability-scheduling-software .faqList {
gap: 10px
}
.equipment-availability-scheduling-software summary {
font-size: 14px;
gap: 14px
}
.equipment-availability-scheduling-software .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
.equipment-availability-scheduling-software .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.equipment-availability-scheduling-software .final h2 {
font-size: 32px
}
.equipment-availability-scheduling-software .final p {
font-size: 14px;
line-height: 1.8
}
.equipment-availability-scheduling-software .final .ey {
font-size: 9px
}
.equipment-availability-scheduling-software .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.equipment-availability-scheduling-software .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.equipment-availability-scheduling-software .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
.equipment-availability-scheduling-software .outcomes,
.equipment-availability-scheduling-software .featureGrid,
.equipment-availability-scheduling-software .useCases {
grid-template-columns: 1fr
}
.equipment-availability-scheduling-software .outcome {
padding: 23px
}
.equipment-availability-scheduling-software .outcome h3 {
font-size: 18px
}
.equipment-availability-scheduling-software .outcome p {
font-size: 14px
}
.equipment-availability-scheduling-software .fl {
grid-template-columns: 1fr;
gap: 10px
}
.equipment-availability-scheduling-software .fi {
font-size: 13px
}
.equipment-availability-scheduling-software .aiMini {
grid-template-columns: 1fr
}
.equipment-availability-scheduling-software .aiMini h3 {
font-size: 17px
}
.equipment-availability-scheduling-software .aiMini p {
font-size: 13px
}
.equipment-availability-scheduling-software .aiMini article {
padding: 19px
}
.equipment-availability-scheduling-software .featureCard h3,
.equipment-availability-scheduling-software .useCase h3 {
font-size: 19px
}
.equipment-availability-scheduling-software .featureCard p,
.equipment-availability-scheduling-software .useCase p {
font-size: 14px
}
.equipment-availability-scheduling-software .toolsGrid {
grid-template-columns: 1fr
}
.equipment-availability-scheduling-software .toolCard,
.equipment-availability-scheduling-software .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.equipment-availability-scheduling-software .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.equipment-availability-scheduling-software .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.equipment-availability-scheduling-software .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.equipment-availability-scheduling-software .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.equipment-availability-scheduling-software .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.equipment-availability-scheduling-software .toolArrow,
.equipment-availability-scheduling-software .toolCard:last-child .toolArrow {
top: 30px
}
.equipment-availability-scheduling-software .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.equipment-availability-scheduling-software .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.equipment-availability-scheduling-software h2 {
font-size: 30px
}
.equipment-availability-scheduling-software .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.equipment-availability-scheduling-software .hero h1 {
font-size: 31px
}
.equipment-availability-scheduling-software .heroPills span {
font-size: 8px
}
.equipment-availability-scheduling-software .heroPills {
gap: 5px
}
.equipment-availability-scheduling-software .uiHeading {
font-size: 11px
}
.equipment-availability-scheduling-software .uiHeading>.pill {
font-size: 7px
}
.equipment-availability-scheduling-software .visual {
padding: 12px
}
.equipment-availability-scheduling-software .final {
padding: 26px 20px
}
.equipment-availability-scheduling-software .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.equipment-availability-scheduling-software * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.equipment-availability-scheduling-software section {
padding: 24px 0
}
.equipment-availability-scheduling-software .hero,
.equipment-availability-scheduling-software .soft {
background: #fff
}
.equipment-availability-scheduling-software .dark,
.equipment-availability-scheduling-software .workflowBand,
.equipment-availability-scheduling-software .final {
background: #fff;
color: #11283A
}
.equipment-availability-scheduling-software .dark h2,
.equipment-availability-scheduling-software .dark h3,
.equipment-availability-scheduling-software .final h2 {
color: #11283A
}
.equipment-availability-scheduling-software .dark p,
.equipment-availability-scheduling-software .final p {
color: #52697C
}
.equipment-availability-scheduling-software .btn {
display: none
}
.equipment-availability-scheduling-software .visual,
.equipment-availability-scheduling-software .outcome,
.equipment-availability-scheduling-software .featureCard,
.equipment-availability-scheduling-software details {
break-inside: avoid
}
.equipment-availability-scheduling-software .heroImage {
max-width: 380px
}
.equipment-availability-scheduling-software .heroVisual {
justify-self: center
}
}
.equipment-availability-scheduling-software .rentalAvailabilitySkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.equipment-availability-scheduling-software .rentalAvailabilitySkip:focus {
top: 12px
}
.equipment-availability-scheduling-software .dark .textLink {
color: #FFF1BD
}
.equipment-availability-scheduling-software .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
.equipment-availability-scheduling-software .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.equipment-availability-scheduling-software .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
.equipment-availability-scheduling-software .supportStrip .icon2 {
width: 19px;
height: 19px;
color: var(--navy)
}
.equipment-availability-scheduling-software .workflowStep {
min-width: 0
}
.equipment-availability-scheduling-software .featureCopy>p {
max-width: 580px
}
.equipment-availability-scheduling-software .toolCard strong {
padding-right: 12px
}
.equipment-availability-scheduling-software .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
.equipment-availability-scheduling-software .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.equipment-availability-scheduling-software .supportStrip {
gap: 7px
}
.equipment-availability-scheduling-software .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
.equipment-availability-scheduling-software .supportStrip .icon2 {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
.equipment-availability-scheduling-software .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} .eaTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;
padding: 15px;
background: #F7FBFD;
border-bottom: 1px solid var(--line);
font-size: 11px;
line-height: 1.5;
color: #466B80
}
.equipment-availability-scheduling-software .eaTop>span {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.equipment-availability-scheduling-software .eaTop .icon2 {
width: 16px;
height: 16px
}
.equipment-availability-scheduling-software .eaStats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
padding: 13px 14px
}
.equipment-availability-scheduling-software .eaStat {
border: 1px solid var(--line);
border-radius: 9px;
background: #F8FBFD;
padding: 11px 9px
}
.equipment-availability-scheduling-software .eaStat b {
display: block;
font-size: 24px;
line-height: 1.2;
letter-spacing: -.035em;
color: var(--navy)
}
.equipment-availability-scheduling-software .eaStat small {
display: block;
font-size: 8px;
line-height: 1.5;
color: #607487;
margin-top: 6px
}
.equipment-availability-scheduling-software .eaStat.ready {
background: #EFF9F3;
border-color: #CFE6D7
}
.equipment-availability-scheduling-software .eaStat.service {
background: #FFFBEE;
border-color: #ECE0B2
}
.equipment-availability-scheduling-software .eaList {
padding: 0 14px 13px
}
.equipment-availability-scheduling-software .eaListHead,
.equipment-availability-scheduling-software .eaListRow {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) auto;
gap: 8px;
align-items: center
}
.equipment-availability-scheduling-software .eaListHead {
font-size: 8px;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
padding: 9px 0;
border-bottom: 1px solid var(--line)
}
.equipment-availability-scheduling-software .eaListRow {
font-size: 10px;
padding: 12px 0;
border-bottom: 1px solid #E7EFF4;
color: #547489;
line-height: 1.4
}
.equipment-availability-scheduling-software .eaListRow:last-child {
border: 0
}
.equipment-availability-scheduling-software .eaListRow strong {
font-size: 11px;
display: block;
color: var(--navy)
}
.equipment-availability-scheduling-software .eaListRow small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 4px
}
.equipment-availability-scheduling-software .eaListRow .pill {
font-size: 8px
}
.equipment-availability-scheduling-software .eaInfo {
padding: 13px 15px;
border-top: 1px solid var(--line);
background: #F2FAFF;
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 10px;
color: #46697F;
line-height: 1.7
}
.equipment-availability-scheduling-software .eaInfo .icon2 {
width: 16px;
height: 16px;
color: #168665;
margin-top: 1px
}
.equipment-availability-scheduling-software .eaInfo b {
color: var(--navy)
}
.equipment-availability-scheduling-software .eaTimeline {
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
margin-top: 13px;
overflow: hidden
}
.equipment-availability-scheduling-software .eaTimelineTitle {
display: flex;
gap: 8px;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
font-size: 11px;
color: var(--navy);
border-bottom: 1px solid var(--line);
line-height: 1.5
}
.equipment-availability-scheduling-software .eaTimelineTitle span {
font-size: 8px;
color: var(--muted)
}
.equipment-availability-scheduling-software .eaDays,
.equipment-availability-scheduling-software .eaTrack {
display: grid;
grid-template-columns: 81px repeat(7, minmax(0, 1fr));
gap: 0;
align-items: center;
padding: 0 11px
}
.equipment-availability-scheduling-software .eaDays {
font-size: 8px;
height: 29px;
color: #678295;
text-align: center;
background: #F9FCFE
}
.equipment-availability-scheduling-software .eaDays>span:first-child {
text-align: left
}
.equipment-availability-scheduling-software .eaTrack {
height: 45px;
border-top: 1px solid #E7EFF4;
font-size: 9px
}
.equipment-availability-scheduling-software .eaTrack>b {
grid-column: 1;
grid-row: 1;
color: #416A81;
font-size: 9px
}
.equipment-availability-scheduling-software .eaSlot {
border-radius: 5px;
background: #E2F3FD;
border: 1px solid #B7DCF0;
color: #256D92;
display: flex;
align-items: center;
font-size: 8px;
font-weight: 700;
line-height: 1.4;
min-height: 26px;
padding: 5px 7px;
grid-row: 1;
margin: 0 2px
}
.equipment-availability-scheduling-software .eaSlot.ready {
background: #EDF9F1;
border-color: #C4E3CF;
color: #247552
}
.equipment-availability-scheduling-software .eaSlot.service {
background: #FFF6D6;
border-color: #EAD796;
color: #84651A
}
.equipment-availability-scheduling-software .eaSlot.request {
background: #FAEBEA;
border: 1px dashed #C76861;
color: #9D3932
}
.equipment-availability-scheduling-software .eaLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
padding: 12px 14px;
font-size: 8px;
color: #648095;
line-height: 1.5;
border-top: 1px solid #E7EFF4
}
.equipment-availability-scheduling-software .eaLegend span {
display: flex;
align-items: center;
gap: 5px
}
.equipment-availability-scheduling-software .eaLegend i {
width: 7px;
height: 7px;
border-radius: 2px;
background: #91CDEB;
display: block
}
.equipment-availability-scheduling-software .eaLegend .ready i {
background: #81C9A0
}
.equipment-availability-scheduling-software .eaLegend .service i {
background: #E4C161
}
.equipment-availability-scheduling-software .eaLegend .request i {
background: #CE847C
}
.equipment-availability-scheduling-software .eaConflict {
border: 1px solid #E8C0BA;
background: #FEF5F3;
border-radius: 11px;
padding: 14px;
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 14px
}
.equipment-availability-scheduling-software .eaConflict>.icon2 {
width: 22px;
height: 22px;
color: #AE5549;
flex: none
}
.equipment-availability-scheduling-software .eaConflict strong {
font-size: 12px;
line-height: 1.5;
color: #8C3A31;
display: block
}
.equipment-availability-scheduling-software .eaConflict p {
font-size: 10px;
line-height: 1.65;
color: #946057;
margin-top: 5px
}
.equipment-availability-scheduling-software .eaConflict .pill {
margin-left: auto;
background: #FAE3DE;
color: #973D33;
font-size: 8px
}
.equipment-availability-scheduling-software .eaDecision {
padding: 16px;
background: #fff;
border: 1px solid #CDE3D6;
border-radius: 11px;
margin-top: 14px
}
.equipment-availability-scheduling-software .eaDecisionHead {
display: flex;
gap: 9px;
align-items: center;
margin-bottom: 12px;
color: #176B50
}
.equipment-availability-scheduling-software .eaDecisionHead strong {
display: block;
font-size: 12px;
line-height: 1.5
}
.equipment-availability-scheduling-software .eaDecisionHead .icon2 {
width: 22px;
height: 22px
}
.equipment-availability-scheduling-software .eaDecisionRow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
font-size: 10px;
color: #5D7B8C;
line-height: 1.5
}
.equipment-availability-scheduling-software .eaDecisionRow b {
color: var(--navy);
font-size: 13px
}
.equipment-availability-scheduling-software .eaDecisionRow small {
grid-column: 1/-1;
font-size: 9px;
line-height: 1.7;
color: var(--muted)
}
.equipment-availability-scheduling-software .eaReview {
padding: 12px 14px;
margin-top: 12px;
border: 1px solid #D6E4EB;
border-radius: 9px;
background: #F4FAFE;
font-size: 10px;
line-height: 1.7;
color: #476B82
}
.equipment-availability-scheduling-software .eaDemand {
display: flex;
align-items: center;
gap: 12px;
background: #0D2939;
color: #fff;
padding: 16px;
border-radius: 11px;
margin-bottom: 14px
}
.equipment-availability-scheduling-software .eaDemand>.icon2 {
width: 25px;
height: 25px;
color: #FFC928
}
.equipment-availability-scheduling-software .eaDemand strong {
display: block;
font-size: 14px;
line-height: 1.4
}
.equipment-availability-scheduling-software .eaDemand p {
font-size: 10px;
color: #C5DCE8;
line-height: 1.6;
margin-top: 5px
}
.equipment-availability-scheduling-software .eaLocations {
display: grid;
grid-template-columns: minmax(0, 1fr) 27px minmax(0, 1fr);
gap: 10px;
align-items: center
}
.equipment-availability-scheduling-software .eaLocations>.icon2 {
width: 24px;
height: 24px;
color: #5B8CA8
}
.equipment-availability-scheduling-software .eaDepot {
padding: 17px 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
min-width: 0
}
.equipment-availability-scheduling-software .eaDepot>.icon2 {
width: 26px;
height: 26px;
color: #4386AB;
margin-bottom: 10px
}
.equipment-availability-scheduling-software .eaDepot h3 {
font-size: 16px;
color: var(--navy)
}
.equipment-availability-scheduling-software .eaDepot>small {
font-size: 9px;
color: var(--muted);
line-height: 1.5;
display: block;
margin-top: 5px
}
.equipment-availability-scheduling-software .eaDepot>strong {
font-size: 32px;
letter-spacing: -.04em;
color: var(--navy);
line-height: 1.2;
display: block;
margin: 12px 0 6px
}
.equipment-availability-scheduling-software .eaDepot>strong small {
font-size: 11px;
letter-spacing: 0;
font-weight: 500
}
.equipment-availability-scheduling-software .eaDepot .pill {
font-size: 8px
}
.equipment-availability-scheduling-software .eaTransfer {
margin-top: 14px;
background: #fff;
border: 1px solid #CADFEB;
border-radius: 11px;
padding: 15px
}
.equipment-availability-scheduling-software .eaTransferHeader {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 11px;
line-height: 1.6;
color: var(--navy)
}
.equipment-availability-scheduling-software .eaTransferHeader .pill {
font-size: 8px
}
.equipment-availability-scheduling-software .eaTransfer>p {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 7px
}
.equipment-availability-scheduling-software .eaProgress {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 14px
}
.equipment-availability-scheduling-software .eaProgress>span {
border-top: 3px solid #DDE8EE;
padding-top: 8px;
color: #6E8594;
font-size: 9px;
line-height: 1.5
}
.equipment-availability-scheduling-software .eaProgress>span.done {
border-top-color: #20966B;
color: #216C53;
font-weight: 750
}
.equipment-availability-scheduling-software .eaProgress b {
display: block;
font-size: 10px;
color: inherit
}
.equipment-availability-scheduling-software .eaServiceCard {
padding: 16px;
background: #FFF9E4;
border: 1px solid #E8DCA7;
border-radius: 11px
}
.equipment-availability-scheduling-software .eaServiceHead {
display: flex;
align-items: center;
gap: 9px;
justify-content: space-between;
color: #765E19;
font-size: 11px;
line-height: 1.5
}
.equipment-availability-scheduling-software .eaServiceHead>span {
display: flex;
align-items: center;
gap: 7px
}
.equipment-availability-scheduling-software .eaServiceHead .icon2 {
width: 20px;
height: 20px
}
.equipment-availability-scheduling-software .eaServiceCard>strong {
display: block;
font-size: 18px;
color: var(--navy);
line-height: 1.4;
margin: 12px 0 5px
}
.equipment-availability-scheduling-software .eaServiceCard>p {
font-size: 10px;
color: #887441;
line-height: 1.7
}
.equipment-availability-scheduling-software .eaKit {
border: 1px solid var(--line);
background: #fff;
border-radius: 11px;
margin-top: 14px;
overflow: hidden
}
.equipment-availability-scheduling-software .eaKitHead {
padding: 14px;
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
color: var(--navy);
font-size: 12px;
border-bottom: 1px solid var(--line);
line-height: 1.5
}
.equipment-availability-scheduling-software .eaKitHead>span {
display: flex;
align-items: center;
gap: 7px
}
.equipment-availability-scheduling-software .eaKitHead>.pill {
font-size: 8px
}
.equipment-availability-scheduling-software .eaKitHead .icon2 {
width: 18px;
height: 18px
}
.equipment-availability-scheduling-software .eaKitRow {
display: grid;
grid-template-columns: minmax(0, 1fr) 25px 88px;
align-items: center;
gap: 8px;
padding: 13px 14px;
border-bottom: 1px solid #E4EDF2;
font-size: 11px;
color: #54758B;
line-height: 1.4
}
.equipment-availability-scheduling-software .eaKitRow b {
font-size: 11px;
color: var(--navy)
}
.equipment-availability-scheduling-software .eaKitRow .pill {
font-size: 8px;
justify-self: end
}
.equipment-availability-scheduling-software .eaKitFoot {
padding: 12px 14px;
background: #F6FAFD;
color: #5B7688;
font-size: 9px;
line-height: 1.7
}
.equipment-availability-scheduling-software .eaAiPanel {
border: 1px solid #476072;
border-radius: 17px;
background: #fff;
overflow: hidden;
color: var(--ink)
}
.equipment-availability-scheduling-software .eaAiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--line);
padding: 19px
}
.equipment-availability-scheduling-software .eaAiTop>span:first-child {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 800;
color: var(--navy)
}
.equipment-availability-scheduling-software .eaAiTop .icon2 {
width: 22px;
height: 22px;
color: #1C88B9
}
.equipment-availability-scheduling-software .eaAiPrompt {
border: 1px solid #CDE5F1;
border-radius: 11px 11px 2px 11px;
background: #EFF9FE;
color: #254E67;
font-size: 12px;
line-height: 1.7;
margin: 18px 18px 16px 39px;
padding: 14px
}
.equipment-availability-scheduling-software .eaAiReply {
padding: 0 19px 19px
}
.equipment-availability-scheduling-software .eaAiReply>strong {
font-size: 18px;
line-height: 1.4;
color: var(--navy);
display: block;
margin: 7px 0 13px;
letter-spacing: -.02em
}
.equipment-availability-scheduling-software .eaSource {
display: flex;
gap: 8px;
align-items: center;
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F7FBFD
}
.equipment-availability-scheduling-software .eaSource>.icon2 {
width: 20px;
height: 20px;
color: #337BA1
}
.equipment-availability-scheduling-software .eaSource b {
font-size: 11px;
line-height: 1.5;
display: block;
color: #255B78
}
.equipment-availability-scheduling-software .eaSource small {
display: block;
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px
}
.equipment-availability-scheduling-software .eaAiReply>p {
color: #526E81;
font-size: 12px;
line-height: 1.75;
margin-top: 14px
}
.equipment-availability-scheduling-software .eaAiDraft {
display: grid;
gap: 10px;
padding: 15px;
background: #F4F9FC;
border: 1px solid var(--line);
border-radius: 9px;
margin-top: 15px
}
.equipment-availability-scheduling-software .eaAiDraft>b {
font-size: 11px;
color: var(--navy);
line-height: 1.5
}
.equipment-availability-scheduling-software .eaAiDraft>span {
display: flex;
gap: 7px;
font-size: 10px;
line-height: 1.5;
color: #466980;
align-items: center
}
.equipment-availability-scheduling-software .eaAiDraft .icon2 {
width: 14px;
height: 14px;
color: #2F8964
}
.equipment-availability-scheduling-software .eaAiFoot {
display: flex;
align-items: center;
gap: 8px;
background: #EAF8F0;
color: #226C4D;
padding: 15px 19px;
font-size: 10px;
line-height: 1.7;
border-top: 1px solid #CAE3D6
}
.equipment-availability-scheduling-software .eaAiFoot .icon2 {
width: 19px;
height: 19px
}
.equipment-availability-scheduling-software .sectionNote {
font-size: 12px;
line-height: 1.7;
color: var(--muted);
text-align: center;
margin: 20px auto 0;
max-width: 850px
}
.equipment-availability-scheduling-software .tileIcon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy)
}
.equipment-availability-scheduling-software .rentalAvailabilitySkip:focus {
position: fixed;
top: 12px
}
@media(max-width:1150px) and (min-width:981px) {
.equipment-availability-scheduling-software .eaStats {
padding: 12px 10px;
gap: 6px
}
.equipment-availability-scheduling-software .eaStat {
padding: 10px 7px
}
.equipment-availability-scheduling-software .eaStat b {
font-size: 23px
}
.equipment-availability-scheduling-software .eaConflict {
padding: 12px;
gap: 8px
}
.equipment-availability-scheduling-software .eaConflict .pill {
display: none
}
.equipment-availability-scheduling-software .eaKitRow {
grid-template-columns: minmax(0, 1fr) 19px 74px;
padding: 12px
}
.equipment-availability-scheduling-software .eaDepot {
padding: 14px 10px
}
.equipment-availability-scheduling-software .eaDepot h3 {
font-size: 15px
}
}
@media(max-width:640px) {
.equipment-availability-scheduling-software .eaTop {
font-size: 10px;
padding: 12px;
gap: 7px
}
.equipment-availability-scheduling-software .eaStats {
padding: 11px;
gap: 6px
}
.equipment-availability-scheduling-software .eaStat {
padding: 10px 7px
}
.equipment-availability-scheduling-software .eaStat b {
font-size: 23px
}
.equipment-availability-scheduling-software .eaStat small {
font-size: 7px
}
.equipment-availability-scheduling-software .eaList {
padding: 0 11px 10px
}
.equipment-availability-scheduling-software .eaListRow {
gap: 7px;
padding: 12px 0;
font-size: 9px
}
.equipment-availability-scheduling-software .eaListRow strong {
font-size: 10px
}
.equipment-availability-scheduling-software .eaListRow small {
font-size: 7px
}
.equipment-availability-scheduling-software .eaListRow .pill {
font-size: 7px;
padding: 5px 6px
}
.equipment-availability-scheduling-software .eaInfo {
font-size: 9px;
padding: 12px;
gap: 7px
}
.equipment-availability-scheduling-software .eaTimelineTitle {
font-size: 10px;
padding: 12px
}
.equipment-availability-scheduling-software .eaTimelineTitle span {
font-size: 7px
}
.equipment-availability-scheduling-software .eaDays,
.equipment-availability-scheduling-software .eaTrack {
grid-template-columns: 70px repeat(7, minmax(0, 1fr));
padding: 0 8px
}
.equipment-availability-scheduling-software .eaDays {
font-size: 7px
}
.equipment-availability-scheduling-software .eaTrack>b {
font-size: 8px
}
.equipment-availability-scheduling-software .eaSlot {
font-size: 7px;
padding: 5px;
min-height: 27px
}
.equipment-availability-scheduling-software .eaLegend {
font-size: 7px;
gap: 10px;
padding: 11px 10px
}
.equipment-availability-scheduling-software .eaConflict {
padding: 12px;
gap: 8px
}
.equipment-availability-scheduling-software .eaConflict .pill {
display: none
}
.equipment-availability-scheduling-software .eaConflict strong {
font-size: 11px
}
.equipment-availability-scheduling-software .eaConflict p {
font-size: 9px
}
.equipment-availability-scheduling-software .eaDecision {
padding: 14px
}
.equipment-availability-scheduling-software .eaDecisionHead strong {
font-size: 11px
}
.equipment-availability-scheduling-software .eaDecisionRow b {
font-size: 12px
}
.equipment-availability-scheduling-software .eaReview {
font-size: 9px;
padding: 11px
}
.equipment-availability-scheduling-software .eaDemand {
padding: 14px;
gap: 9px
}
.equipment-availability-scheduling-software .eaDemand strong {
font-size: 12px
}
.equipment-availability-scheduling-software .eaDemand p {
font-size: 9px
}
.equipment-availability-scheduling-software .eaLocations {
grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
gap: 8px
}
.equipment-availability-scheduling-software .eaLocations>.icon2 {
width: 20px;
height: 20px
}
.equipment-availability-scheduling-software .eaDepot {
padding: 14px 10px
}
.equipment-availability-scheduling-software .eaDepot h3 {
font-size: 14px
}
.equipment-availability-scheduling-software .eaDepot>small {
font-size: 8px
}
.equipment-availability-scheduling-software .eaDepot>strong {
font-size: 29px
}
.equipment-availability-scheduling-software .eaDepot>strong small {
font-size: 9px
}
.equipment-availability-scheduling-software .eaDepot .pill {
font-size: 7px
}
.equipment-availability-scheduling-software .eaTransfer {
padding: 13px
}
.equipment-availability-scheduling-software .eaTransferHeader {
font-size: 10px
}
.equipment-availability-scheduling-software .eaProgress>span {
font-size: 8px
}
.equipment-availability-scheduling-software .eaProgress b {
font-size: 9px
}
.equipment-availability-scheduling-software .eaServiceCard {
padding: 14px
}
.equipment-availability-scheduling-software .eaServiceHead {
font-size: 10px
}
.equipment-availability-scheduling-software .eaServiceHead .pill {
font-size: 8px
}
.equipment-availability-scheduling-software .eaServiceCard>strong {
font-size: 17px
}
.equipment-availability-scheduling-software .eaServiceCard>p {
font-size: 9px
}
.equipment-availability-scheduling-software .eaKitHead {
padding: 13px;
font-size: 11px;
gap: 7px
}
.equipment-availability-scheduling-software .eaKitHead>.pill {
font-size: 7px
}
.equipment-availability-scheduling-software .eaKitRow {
font-size: 10px;
grid-template-columns: minmax(0, 1fr) 20px 76px;
padding: 13px 12px;
gap: 7px
}
.equipment-availability-scheduling-software .eaKitRow b {
font-size: 10px
}
.equipment-availability-scheduling-software .eaKitRow .pill {
font-size: 7px
}
.equipment-availability-scheduling-software .eaKitFoot {
font-size: 8px
}
.equipment-availability-scheduling-software .eaAiTop {
padding: 15px
}
.equipment-availability-scheduling-software .eaAiPrompt {
margin: 15px 15px 15px 26px;
padding: 12px;
font-size: 11px
}
.equipment-availability-scheduling-software .eaAiReply {
padding: 0 15px 16px
}
.equipment-availability-scheduling-software .eaAiReply>p {
font-size: 11px
}
.equipment-availability-scheduling-software .eaAiDraft {
padding: 12px
}
.equipment-availability-scheduling-software .eaAiFoot {
padding: 13px 15px;
font-size: 9px
}
}
@media(max-width:360px) {
.equipment-availability-scheduling-software .eaStats {
gap: 5px;
padding: 9px
}
.equipment-availability-scheduling-software .eaStat {
padding: 9px 6px
}
.equipment-availability-scheduling-software .eaStat b {
font-size: 21px
}
.equipment-availability-scheduling-software .eaStat small {
font-size: 6.5px
}
.equipment-availability-scheduling-software .eaTop {
font-size: 9px;
padding: 10px;
gap: 5px
}
.equipment-availability-scheduling-software .eaTop .icon2 {
width: 13px;
height: 13px
}
.equipment-availability-scheduling-software .eaListRow {
grid-template-columns: minmax(0, 1.25fr) minmax(0, .72fr) auto;
gap: 5px;
font-size: 8px
}
.equipment-availability-scheduling-software .eaListRow strong {
font-size: 9px
}
.equipment-availability-scheduling-software .eaTimelineTitle {
align-items: flex-start;
flex-direction: column;
gap: 3px
}
.equipment-availability-scheduling-software .eaDays,
.equipment-availability-scheduling-software .eaTrack {
grid-template-columns: 60px repeat(7, minmax(0, 1fr));
padding: 0 6px
}
.equipment-availability-scheduling-software .eaSlot {
padding: 4px;
font-size: 6.5px;
margin: 0 1px
}
.equipment-availability-scheduling-software .eaServiceHead {
align-items: flex-start;
gap: 7px
}
.equipment-availability-scheduling-software .eaServiceHead .pill {
font-size: 7px
}
.equipment-availability-scheduling-software .eaKitHead>.pill {
display: none
}
.equipment-availability-scheduling-software .eaKitRow {
grid-template-columns: minmax(0, 1fr) 17px 70px;
font-size: 9px;
gap: 5px
}
.equipment-availability-scheduling-software .eaKitRow b {
font-size: 9px
}
.equipment-availability-scheduling-software .eaDepot {
padding: 12px 9px
}
.equipment-availability-scheduling-software .eaDepot h3 {
font-size: 13px
}
.equipment-availability-scheduling-software .eaDepot .pill {
font-size: 6.5px;
padding: 5px 6px
}
.equipment-availability-scheduling-software .eaLocations {
gap: 6px;
grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr)
}
.equipment-availability-scheduling-software .eaLocations>.icon2 {
width: 16px;
height: 16px
}
.equipment-availability-scheduling-software .eaAiTop {
padding: 14px 12px
}
.equipment-availability-scheduling-software .eaAiTop>.pill {
font-size: 8px
}
.equipment-availability-scheduling-software .eaSource {
padding: 10px;
gap: 7px
}
.equipment-availability-scheduling-software .eaSource b {
font-size: 10px
}
.equipment-availability-scheduling-software .eaSource small {
font-size: 8px
}
}  .maintenance-and-work-orders .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.maintenance-and-work-orders a:focus-visible,
.maintenance-and-work-orders summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.maintenance-and-work-orders .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.maintenance-and-work-orders .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.maintenance-and-work-orders .btn .icon2 {
width: 17px;
height: 17px
}
.maintenance-and-work-orders .btn.black {
background: #0B0B0B;
color: #fff
}
.maintenance-and-work-orders .btn.black:hover {
background: #303030
}
.maintenance-and-work-orders .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.maintenance-and-work-orders .btn.yellow:hover {
background: #FFD454
}
.maintenance-and-work-orders .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.maintenance-and-work-orders .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.maintenance-and-work-orders .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.maintenance-and-work-orders .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.maintenance-and-work-orders .textLink .icon2 {
width: 17px;
height: 17px
}
.maintenance-and-work-orders .textLink:hover {
color: var(--brand2)
}
.maintenance-and-work-orders .soft {
background: var(--sky2)
}
.maintenance-and-work-orders .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.maintenance-and-work-orders .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.maintenance-and-work-orders .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.maintenance-and-work-orders .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.maintenance-and-work-orders .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.maintenance-and-work-orders .heroGrid>*,
.maintenance-and-work-orders .feature>*,
.maintenance-and-work-orders .aiGrid>* {
min-width: 0
}
.maintenance-and-work-orders .heroCopy {
min-width: 0
}
.maintenance-and-work-orders .hero h1 {
max-width: 630px
}
.maintenance-and-work-orders .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.maintenance-and-work-orders .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.maintenance-and-work-orders .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.maintenance-and-work-orders .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.maintenance-and-work-orders .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.maintenance-and-work-orders .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.maintenance-and-work-orders .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.maintenance-and-work-orders .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.maintenance-and-work-orders .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.maintenance-and-work-orders .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.maintenance-and-work-orders .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.maintenance-and-work-orders .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.maintenance-and-work-orders .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.maintenance-and-work-orders .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.maintenance-and-work-orders .outcome:nth-child(2):before {
background: var(--yellow)
}
.maintenance-and-work-orders .outcome:nth-child(3):before {
background: var(--green)
}
.maintenance-and-work-orders .outcome:nth-child(4):before {
background: var(--purple)
}
.maintenance-and-work-orders .outcome>.icon2 {
color: var(--navy)
}
.maintenance-and-work-orders .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.maintenance-and-work-orders .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.maintenance-and-work-orders .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.maintenance-and-work-orders .feature.reverse .visual {
order: -1
}
.maintenance-and-work-orders .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.maintenance-and-work-orders .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.maintenance-and-work-orders .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.maintenance-and-work-orders .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.maintenance-and-work-orders .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.maintenance-and-work-orders .tick .icon2 {
height: 13px;
width: 13px
}
.maintenance-and-work-orders .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.maintenance-and-work-orders .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.maintenance-and-work-orders .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.maintenance-and-work-orders .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.maintenance-and-work-orders .uiHeading .icon2 {
height: 19px;
width: 19px
}
.maintenance-and-work-orders .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.maintenance-and-work-orders .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.maintenance-and-work-orders .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.maintenance-and-work-orders .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.maintenance-and-work-orders .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.maintenance-and-work-orders .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.maintenance-and-work-orders .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.maintenance-and-work-orders .dark h2,
.maintenance-and-work-orders .dark h3 {
color: white
}
.maintenance-and-work-orders .dark .ey {
background: var(--yellow);
color: #111
}
.maintenance-and-work-orders .dark .textLink {
color: #fff
}
.maintenance-and-work-orders .dark a:focus-visible {
outline-color: var(--yellow)
}
.maintenance-and-work-orders .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.maintenance-and-work-orders .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.maintenance-and-work-orders .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.maintenance-and-work-orders .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.maintenance-and-work-orders .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.maintenance-and-work-orders .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.maintenance-and-work-orders .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.maintenance-and-work-orders .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.maintenance-and-work-orders .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.maintenance-and-work-orders .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.maintenance-and-work-orders .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.maintenance-and-work-orders .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.maintenance-and-work-orders .connectedCard h3 {
margin: 18px 0 11px
}
.maintenance-and-work-orders .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.maintenance-and-work-orders .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.maintenance-and-work-orders .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
.maintenance-and-work-orders .handoffBand>div>.icon2 {
color: var(--navy);
width: 29px;
height: 29px
}
.maintenance-and-work-orders .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.maintenance-and-work-orders .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.maintenance-and-work-orders .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.maintenance-and-work-orders .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.maintenance-and-work-orders .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.maintenance-and-work-orders .featureCard>.icon2 {
color: var(--navy)
}
.maintenance-and-work-orders .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.maintenance-and-work-orders .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.maintenance-and-work-orders .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.maintenance-and-work-orders .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.maintenance-and-work-orders .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.maintenance-and-work-orders .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.maintenance-and-work-orders .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.maintenance-and-work-orders .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.maintenance-and-work-orders .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.maintenance-and-work-orders .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.maintenance-and-work-orders .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.maintenance-and-work-orders .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.maintenance-and-work-orders .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.maintenance-and-work-orders .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.maintenance-and-work-orders .useCase>.icon2 {
color: var(--navy)
}
.maintenance-and-work-orders .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.maintenance-and-work-orders .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.maintenance-and-work-orders .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.maintenance-and-work-orders .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.maintenance-and-work-orders .roleCard:last-child {
border: 0;
padding-right: 0
}
.maintenance-and-work-orders .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.maintenance-and-work-orders .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.maintenance-and-work-orders .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.maintenance-and-work-orders .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.maintenance-and-work-orders .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.maintenance-and-work-orders .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.maintenance-and-work-orders .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.maintenance-and-work-orders .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.maintenance-and-work-orders .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.maintenance-and-work-orders .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.maintenance-and-work-orders .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
.maintenance-and-work-orders .faq {
max-width: 900px
}
.maintenance-and-work-orders .faq .sectionHead {
max-width: 800px
}
.maintenance-and-work-orders .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.maintenance-and-work-orders .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.maintenance-and-work-orders .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.maintenance-and-work-orders .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.maintenance-and-work-orders .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.maintenance-and-work-orders .ctaBtns .btn {
min-width: 219px
}
.maintenance-and-work-orders .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.maintenance-and-work-orders .btn.darkOutline:hover {
background: #252D33
}
.maintenance-and-work-orders .final a:focus-visible {
outline-color: var(--yellow)
}
.maintenance-and-work-orders .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.maintenance-and-work-orders .heroGrid {
gap: 28px
}
.maintenance-and-work-orders h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.maintenance-and-work-orders .hero .lead {
font-size: 16px
}
.maintenance-and-work-orders .feature,
.maintenance-and-work-orders .aiGrid {
gap: 30px
}
.maintenance-and-work-orders .visual {
padding: 17px
}
.maintenance-and-work-orders .toolCard {
padding: 21px 15px
}
.maintenance-and-work-orders .toolCard strong {
font-size: 14px
}
.maintenance-and-work-orders .handoffBand {
padding: 20px
}
.maintenance-and-work-orders .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.maintenance-and-work-orders section {
padding: 64px 0
}
.maintenance-and-work-orders .hero {
padding: 34px 0 42px
}
.maintenance-and-work-orders .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.maintenance-and-work-orders .heroCopy {
max-width: 790px
}
.maintenance-and-work-orders .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.maintenance-and-work-orders .hero .lead {
max-width: 760px
}
.maintenance-and-work-orders .heroVisual {
max-width: 460px;
justify-self: center
}
.maintenance-and-work-orders .feature,
.maintenance-and-work-orders .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.maintenance-and-work-orders .feature.reverse .visual {
order: 0
}
.maintenance-and-work-orders .featureCopy {
max-width: 790px
}
.maintenance-and-work-orders .visual {
max-width: 640px;
margin: 0 auto
}
.maintenance-and-work-orders .outcomes,
.maintenance-and-work-orders .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.maintenance-and-work-orders .connectedGrid {
gap: 13px
}
.maintenance-and-work-orders .connectedCard {
padding: 22px
}
.maintenance-and-work-orders .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.maintenance-and-work-orders .aiVisual {
max-width: 600px;
margin: auto
}
.maintenance-and-work-orders .aiMini {
max-width: 780px
}
.maintenance-and-work-orders .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.maintenance-and-work-orders .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.maintenance-and-work-orders .toolCard {
min-height: 145px
}
.maintenance-and-work-orders .roleGrid {
gap: 20px
}
.maintenance-and-work-orders .roleCard {
padding-right: 18px
}
.maintenance-and-work-orders .roleCard h3 {
font-size: 20px
}
.maintenance-and-work-orders .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.maintenance-and-work-orders .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.maintenance-and-work-orders .workflowLead br {
display: none
}
.maintenance-and-work-orders .final {
grid-template-columns: 1fr;
gap: 27px
}
.maintenance-and-work-orders .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.maintenance-and-work-orders .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
.maintenance-and-work-orders .wrap {
width: calc(100% - 32px)
}
.maintenance-and-work-orders section {
padding: 49px 0
}
.maintenance-and-work-orders h2 {
font-size: 33px;
line-height: 1.15
}
.maintenance-and-work-orders .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.maintenance-and-work-orders .sectionHead {
margin-bottom: 27px
}
.maintenance-and-work-orders .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.maintenance-and-work-orders .hero {
padding: 25px 0 34px
}
.maintenance-and-work-orders .heroGrid {
gap: 21px
}
.maintenance-and-work-orders .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.maintenance-and-work-orders .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.maintenance-and-work-orders .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.maintenance-and-work-orders .hero .actions {
gap: 8px;
margin-top: 23px
}
.maintenance-and-work-orders .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.maintenance-and-work-orders .hero .micro {
font-size: 11px
}
.maintenance-and-work-orders .heroPills {
gap: 6px;
margin-top: 16px
}
.maintenance-and-work-orders .heroPills span {
font-size: 9px
}
.maintenance-and-work-orders .heroVisual {
max-width: 420px
}
.maintenance-and-work-orders .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.maintenance-and-work-orders .trust {
padding: 22px 0
}
.maintenance-and-work-orders .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.maintenance-and-work-orders .outcomes {
gap: 12px
}
.maintenance-and-work-orders .outcome {
padding: 19px
}
.maintenance-and-work-orders .outcome h3 {
font-size: 17px
}
.maintenance-and-work-orders .outcome p {
font-size: 13px
}
.maintenance-and-work-orders .feature {
gap: 27px
}
.maintenance-and-work-orders .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.maintenance-and-work-orders .fl {
gap: 11px 13px;
margin-top: 21px
}
.maintenance-and-work-orders .fi {
font-size: 12px
}
.maintenance-and-work-orders .textLink {
font-size: 13px
}
.maintenance-and-work-orders .visual {
padding: 15px;
border-radius: 16px
}
.maintenance-and-work-orders .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.maintenance-and-work-orders .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.maintenance-and-work-orders .uiHeading .icon2 {
width: 18px;
height: 18px
}
.maintenance-and-work-orders .uiFoot {
font-size: 9px
}
.maintenance-and-work-orders .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.maintenance-and-work-orders .aiLead {
font-size: 15px;
line-height: 1.8
}
.maintenance-and-work-orders .aiMini {
gap: 11px;
margin-top: 23px
}
.maintenance-and-work-orders .aiMini article {
padding: 16px
}
.maintenance-and-work-orders .aiMini h3 {
font-size: 15px
}
.maintenance-and-work-orders .aiMini p {
font-size: 12px
}
.maintenance-and-work-orders .aiNote {
font-size: 10px
}
.maintenance-and-work-orders .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.maintenance-and-work-orders .connectedCard {
padding: 23px
}
.maintenance-and-work-orders .connectedCard h3 {
margin: 15px 0 9px
}
.maintenance-and-work-orders .connectedCard p {
font-size: 14px
}
.maintenance-and-work-orders .handoffBand {
padding: 20px
}
.maintenance-and-work-orders .handoffBand>div {
align-items: flex-start;
gap: 10px
}
.maintenance-and-work-orders .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.maintenance-and-work-orders .handoffBand small {
font-size: 11px
}
.maintenance-and-work-orders .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.maintenance-and-work-orders .featureGrid {
gap: 13px
}
.maintenance-and-work-orders .featureCard {
padding: 21px
}
.maintenance-and-work-orders .featureCard h3 {
font-size: 17px
}
.maintenance-and-work-orders .featureCard p {
font-size: 13px
}
.maintenance-and-work-orders .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.maintenance-and-work-orders .toolCard {
padding: 19px 15px;
min-height: 155px
}
.maintenance-and-work-orders .toolCard strong {
font-size: 15px
}
.maintenance-and-work-orders .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.maintenance-and-work-orders .toolCard:last-child .toolArrow {
top: 31px
}
.maintenance-and-work-orders .toolCard:last-child strong {
padding-right: 25px
}
.maintenance-and-work-orders .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.maintenance-and-work-orders .useCases {
gap: 13px
}
.maintenance-and-work-orders .useCase {
padding: 21px 18px
}
.maintenance-and-work-orders .useCase h3 {
font-size: 17px
}
.maintenance-and-work-orders .useCase p {
font-size: 13px
}
.maintenance-and-work-orders .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.maintenance-and-work-orders .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.maintenance-and-work-orders .roleCard:last-child {
padding-bottom: 0
}
.maintenance-and-work-orders .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.maintenance-and-work-orders .roleCard>strong {
font-size: 14px
}
.maintenance-and-work-orders .roleCard p {
font-size: 14px
}
.maintenance-and-work-orders .workflowBand {
padding: 28px 0
}
.maintenance-and-work-orders .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.maintenance-and-work-orders .workflowLead {
font-size: 18px
}
.maintenance-and-work-orders .workflowStep strong {
font-size: 14px
}
.maintenance-and-work-orders .workflowStep p {
font-size: 10px
}
.maintenance-and-work-orders .faq .sectionHead {
margin-bottom: 25px
}
.maintenance-and-work-orders details {
padding: 16px
}
.maintenance-and-work-orders .faqList {
gap: 10px
}
.maintenance-and-work-orders summary {
font-size: 14px;
gap: 14px
}
.maintenance-and-work-orders .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
.maintenance-and-work-orders .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.maintenance-and-work-orders .final h2 {
font-size: 32px
}
.maintenance-and-work-orders .final p {
font-size: 14px;
line-height: 1.8
}
.maintenance-and-work-orders .final .ey {
font-size: 9px
}
.maintenance-and-work-orders .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.maintenance-and-work-orders .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.maintenance-and-work-orders .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
.maintenance-and-work-orders .outcomes,
.maintenance-and-work-orders .featureGrid,
.maintenance-and-work-orders .useCases {
grid-template-columns: 1fr
}
.maintenance-and-work-orders .outcome {
padding: 23px
}
.maintenance-and-work-orders .outcome h3 {
font-size: 18px
}
.maintenance-and-work-orders .outcome p {
font-size: 14px
}
.maintenance-and-work-orders .fl {
grid-template-columns: 1fr;
gap: 10px
}
.maintenance-and-work-orders .fi {
font-size: 13px
}
.maintenance-and-work-orders .aiMini {
grid-template-columns: 1fr
}
.maintenance-and-work-orders .aiMini h3 {
font-size: 17px
}
.maintenance-and-work-orders .aiMini p {
font-size: 13px
}
.maintenance-and-work-orders .aiMini article {
padding: 19px
}
.maintenance-and-work-orders .featureCard h3,
.maintenance-and-work-orders .useCase h3 {
font-size: 19px
}
.maintenance-and-work-orders .featureCard p,
.maintenance-and-work-orders .useCase p {
font-size: 14px
}
.maintenance-and-work-orders .toolsGrid {
grid-template-columns: 1fr
}
.maintenance-and-work-orders .toolCard,
.maintenance-and-work-orders .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.maintenance-and-work-orders .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.maintenance-and-work-orders .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.maintenance-and-work-orders .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.maintenance-and-work-orders .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.maintenance-and-work-orders .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.maintenance-and-work-orders .toolArrow,
.maintenance-and-work-orders .toolCard:last-child .toolArrow {
top: 30px
}
.maintenance-and-work-orders .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.maintenance-and-work-orders .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.maintenance-and-work-orders h2 {
font-size: 30px
}
.maintenance-and-work-orders .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.maintenance-and-work-orders .hero h1 {
font-size: 31px
}
.maintenance-and-work-orders .heroPills span {
font-size: 8px
}
.maintenance-and-work-orders .heroPills {
gap: 5px
}
.maintenance-and-work-orders .uiHeading {
font-size: 11px
}
.maintenance-and-work-orders .uiHeading>.pill {
font-size: 7px
}
.maintenance-and-work-orders .visual {
padding: 12px
}
.maintenance-and-work-orders .final {
padding: 26px 20px
}
.maintenance-and-work-orders .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.maintenance-and-work-orders * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.maintenance-and-work-orders section {
padding: 24px 0
}
.maintenance-and-work-orders .hero,
.maintenance-and-work-orders .soft {
background: #fff
}
.maintenance-and-work-orders .dark,
.maintenance-and-work-orders .workflowBand,
.maintenance-and-work-orders .final {
background: #fff;
color: #11283A
}
.maintenance-and-work-orders .dark h2,
.maintenance-and-work-orders .dark h3,
.maintenance-and-work-orders .final h2 {
color: #11283A
}
.maintenance-and-work-orders .dark p,
.maintenance-and-work-orders .final p {
color: #52697C
}
.maintenance-and-work-orders .btn {
display: none
}
.maintenance-and-work-orders .visual,
.maintenance-and-work-orders .outcome,
.maintenance-and-work-orders .featureCard,
.maintenance-and-work-orders details {
break-inside: avoid
}
.maintenance-and-work-orders .heroImage {
max-width: 380px
}
.maintenance-and-work-orders .heroVisual {
justify-self: center
}
}
.maintenance-and-work-orders .rentalMaintenanceSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.maintenance-and-work-orders .rentalMaintenanceSkip:focus {
top: 12px
}
.maintenance-and-work-orders .dark .textLink {
color: #FFF1BD
}
.maintenance-and-work-orders .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
.maintenance-and-work-orders .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.maintenance-and-work-orders .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
.maintenance-and-work-orders .supportStrip .icon2 {
width: 19px;
height: 19px;
color: var(--navy)
}
.maintenance-and-work-orders .workflowStep {
min-width: 0
}
.maintenance-and-work-orders .featureCopy>p {
max-width: 580px
}
.maintenance-and-work-orders .toolCard strong {
padding-right: 12px
}
.maintenance-and-work-orders .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
.maintenance-and-work-orders .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.maintenance-and-work-orders .supportStrip {
gap: 7px
}
.maintenance-and-work-orders .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
.maintenance-and-work-orders .supportStrip .icon2 {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
.maintenance-and-work-orders .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
.maintenance-and-work-orders .pill.yellow {
background: var(--yellowsoft);
color: #795D12
}
.maintenance-and-work-orders .pill.gray {
background: #F0F4F7;
color: #5D7281
}
.maintenance-and-work-orders .mwPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.maintenance-and-work-orders .mwTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 15px 16px;
background: #F7FBFE;
border-bottom: 1px solid var(--line);
font-size: 11px;
font-weight: 700;
line-height: 1.5;
color: var(--navy)
}
.maintenance-and-work-orders .mwTop>span:first-child {
display: flex;
align-items: center;
gap: 7px
}
.maintenance-and-work-orders .mwTop .icon2 {
width: 17px;
height: 17px
}
.maintenance-and-work-orders .mwFilters {
display: flex;
gap: 7px;
flex-wrap: wrap;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
color: #527084;
font-size: 9px
}
.maintenance-and-work-orders .mwFilters>span {
border: 1px solid #DCE8EF;
border-radius: 6px;
padding: 5px 8px;
background: #fff
}
.maintenance-and-work-orders .mwFilters>span.active {
background: #E8F7FE;
border-color: #B4DCEE;
color: #0A628C;
font-weight: 700
}
.maintenance-and-work-orders .mwQueue {
padding: 0 15px
}
.maintenance-and-work-orders .mwJob {
display: grid;
grid-template-columns: 33px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid #E2EDF3
}
.maintenance-and-work-orders .mwJob:last-child {
border-bottom: 0
}
.maintenance-and-work-orders .mwJobIcon {
display: grid;
place-items: center;
background: #EEF7FC;
color: #16749D;
border-radius: 9px;
height: 33px;
width: 33px
}
.maintenance-and-work-orders .mwJobIcon .icon2 {
width: 19px;
height: 19px
}
.maintenance-and-work-orders .mwJobIcon.amber {
background: #FFF7D9;
color: #876917
}
.maintenance-and-work-orders .mwJobIcon.green {
background: #EAF8F0;
color: #247B58
}
.maintenance-and-work-orders .mwJob strong {
font-size: 12px;
color: var(--navy);
display: block;
line-height: 1.45
}
.maintenance-and-work-orders .mwJob small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.6;
margin-top: 3px
}
.maintenance-and-work-orders .mwJob>.pill {
font-size: 8px
}
.maintenance-and-work-orders .mwDetails {
padding: 14px 16px;
background: #F6FBFE;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
border-top: 1px solid var(--line)
}
.maintenance-and-work-orders .mwDetails span {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block
}
.maintenance-and-work-orders .mwDetails b {
display: block;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
margin-top: 4px
}
.maintenance-and-work-orders .mwNote {
display: flex;
align-items: flex-start;
gap: 8px;
border: 1px solid #E8DCAA;
background: #FFFBEF;
padding: 13px 14px;
border-radius: 10px;
margin-top: 14px;
color: #755F27;
font-size: 10px;
line-height: 1.7
}
.maintenance-and-work-orders .mwNote .icon2 {
height: 18px;
width: 18px;
margin-top: 1px
}
.maintenance-and-work-orders .mwMeter {
padding: 18px
}
.maintenance-and-work-orders .mwMeterTitle {
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between
}
.maintenance-and-work-orders .mwMeterTitle strong {
font-size: 18px;
color: var(--navy);
display: block;
line-height: 1.4;
letter-spacing: -.025em
}
.maintenance-and-work-orders .mwMeterTitle small {
display: block;
color: var(--muted);
font-size: 10px;
line-height: 1.5;
margin-top: 4px
}
.maintenance-and-work-orders .mwMeterTitle .icon2 {
width: 35px;
height: 35px;
color: #2586B0
}
.maintenance-and-work-orders .mwMeterNumbers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 17px 0 13px
}
.maintenance-and-work-orders .mwMeterNumbers span {
display: block;
font-size: 9px;
line-height: 1.5;
color: var(--muted)
}
.maintenance-and-work-orders .mwMeterNumbers b {
display: block;
font-size: 31px;
line-height: 1.3;
letter-spacing: -.04em;
color: var(--navy);
margin-top: 5px
}
.maintenance-and-work-orders .mwMeterNumbers b small {
font-size: 12px;
letter-spacing: 0;
font-weight: 500
}
.maintenance-and-work-orders .mwMeterBar {
height: 9px;
position: relative;
border-radius: 99px;
background: #E7EFF4;
overflow: hidden
}
.maintenance-and-work-orders .mwMeterBar>span {
height: 100%;
display: block;
width: 98.4%;
background: #E1B026;
border-radius: 99px
}
.maintenance-and-work-orders .mwMeterCaption {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-top: 10px;
color: #688191;
font-size: 9px;
line-height: 1.5
}
.maintenance-and-work-orders .mwMeterCaption b {
font-size: 10px;
color: #8B6912
}
.maintenance-and-work-orders .mwSchedule {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 14px
}
.maintenance-and-work-orders .mwTrigger {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 15px 12px
}
.maintenance-and-work-orders .mwTrigger>.icon2 {
width: 21px;
height: 21px;
color: var(--navy);
margin-bottom: 11px
}
.maintenance-and-work-orders .mwTrigger strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.45
}
.maintenance-and-work-orders .mwTrigger p {
font-size: 9px;
color: var(--muted);
margin-top: 6px;
line-height: 1.65
}
.maintenance-and-work-orders .mwGenerate {
display: flex;
align-items: center;
gap: 9px;
padding: 14px 16px;
border-top: 1px solid #CCE5D9;
background: #F0FAF5;
color: #287450;
font-size: 10px;
line-height: 1.6
}
.maintenance-and-work-orders .mwGenerate .icon2 {
width: 18px;
height: 18px
}
.maintenance-and-work-orders .mwField {
display: grid;
grid-template-columns: 184px minmax(0, 1fr);
gap: 15px;
align-items: center
}
.maintenance-and-work-orders .mwPhone {
background: #0D2635;
padding: 6px;
border-radius: 26px;
border: 1px solid #324D5D;
max-width: 220px;
width: 100%;
min-width: 0
}
.maintenance-and-work-orders .mwScreen {
border-radius: 20px;
overflow: hidden;
background: #fff;
min-width: 0
}
.maintenance-and-work-orders .mwPhoneStatus {
height: 25px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px;
color: #234A62;
font-size: 7px;
font-weight: 750
}
.maintenance-and-work-orders .mwPhoneStatus i {
height: 5px;
width: 39px;
background: #102A3A;
border-radius: 9px
}
.maintenance-and-work-orders .mwPhoneHead {
background: #EBF8FE;
padding: 13px 11px;
border-block: 1px solid #D7EBF5
}
.maintenance-and-work-orders .mwPhoneHead strong {
display: block;
font-size: 13px;
line-height: 1.4;
color: var(--navy)
}
.maintenance-and-work-orders .mwPhoneHead small {
display: block;
font-size: 8px;
line-height: 1.5;
color: var(--muted);
margin-top: 5px
}
.maintenance-and-work-orders .mwPhoneBody {
padding: 12px 11px
}
.maintenance-and-work-orders .mwPhoneBody>strong {
font-size: 16px;
color: var(--navy);
display: block;
line-height: 1.4;
margin-bottom: 10px
}
.maintenance-and-work-orders .mwCheck {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 0;
border-bottom: 1px solid #E3EBF1;
font-size: 9px;
color: #466B81;
line-height: 1.55
}
.maintenance-and-work-orders .mwCheck .icon2 {
width: 14px;
height: 14px;
color: #24815A
}
.maintenance-and-work-orders .mwCheck.pending .icon2 {
color: #B18A21
}
.maintenance-and-work-orders .mwOffline {
display: flex;
gap: 5px;
align-items: center;
border-radius: 7px;
background: #FFF7DB;
border: 1px solid #EADBA7;
color: #7D6420;
font-size: 8px;
padding: 9px 7px;
margin-top: 12px;
line-height: 1.6
}
.maintenance-and-work-orders .mwOffline .icon2 {
width: 14px;
height: 14px
}
.maintenance-and-work-orders .mwPhoneBottom {
height: 20px;
display: grid;
place-items: center
}
.maintenance-and-work-orders .mwPhoneBottom:after {
content: '';
display: block;
width: 48px;
height: 4px;
background: #234C60;
border-radius: 8px
}
.maintenance-and-work-orders .mwFieldSide {
display: grid;
gap: 12px;
min-width: 0
}
.maintenance-and-work-orders .mwFieldCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 15px
}
.maintenance-and-work-orders .mwFieldCard>.icon2 {
color: #2285B0;
width: 22px;
height: 22px;
margin-bottom: 10px
}
.maintenance-and-work-orders .mwFieldCard strong {
font-size: 13px;
display: block;
line-height: 1.4;
color: var(--navy)
}
.maintenance-and-work-orders .mwFieldCard p {
font-size: 10px;
color: var(--muted);
line-height: 1.75;
margin-top: 7px
}
.maintenance-and-work-orders .mwProof {
display: flex;
gap: 6px;
align-items: center;
padding: 8px;
border: 1px solid #DCE9F0;
background: #F7FBFE;
border-radius: 7px;
font-size: 9px;
margin-top: 10px;
color: #496F84
}
.maintenance-and-work-orders .mwProof .icon2 {
width: 15px;
height: 15px
}
.maintenance-and-work-orders .mwCostHead {
padding: 18px;
border-bottom: 1px solid var(--line)
}
.maintenance-and-work-orders .mwCostHead strong {
display: block;
font-size: 20px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.03em;
margin-top: 5px
}
.maintenance-and-work-orders .mwCostHead small {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px
}
.maintenance-and-work-orders .mwCosts {
width: 100%;
border-collapse: collapse;
font-size: 11px;
color: #4A6A80
}
.maintenance-and-work-orders .mwCosts th {
font-size: 9px;
font-weight: 700;
color: var(--muted);
text-align: left;
padding: 11px 15px;
background: #F8FBFD;
border-bottom: 1px solid var(--line)
}
.maintenance-and-work-orders .mwCosts td {
padding: 13px 15px;
border-bottom: 1px solid #E2EBF1;
line-height: 1.5
}
.maintenance-and-work-orders .mwCosts td:first-child strong {
font-size: 11px;
color: var(--navy);
display: block
}
.maintenance-and-work-orders .mwCosts td small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 4px
}
.maintenance-and-work-orders .mwCosts th:last-child,
.maintenance-and-work-orders .mwCosts td:last-child {
text-align: right;
white-space: nowrap;
color: var(--navy)
}
.maintenance-and-work-orders .mwCostTotal {
padding: 16px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background: #EFF9FE;
color: var(--navy);
font-size: 11px
}
.maintenance-and-work-orders .mwCostTotal strong {
font-size: 29px;
letter-spacing: -.03em;
line-height: 1.3
}
.maintenance-and-work-orders .mwCostNote {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 11px 16px
}
.maintenance-and-work-orders .mwHistory {
display: flex;
align-items: center;
gap: 11px;
margin-top: 14px;
padding: 15px;
background: #0D2939;
color: #fff;
border: 1px solid #355060;
border-radius: 11px
}
.maintenance-and-work-orders .mwHistory>.icon2 {
color: var(--yellow);
width: 23px;
height: 23px
}
.maintenance-and-work-orders .mwHistory strong {
display: block;
font-size: 12px;
line-height: 1.4
}
.maintenance-and-work-orders .mwHistory small {
font-size: 9px;
line-height: 1.7;
color: #C2D8E5;
display: block;
margin-top: 5px
}
.maintenance-and-work-orders .mwAi {
background: #fff;
color: var(--ink);
border: 1px solid #456270;
border-radius: 17px;
overflow: hidden
}
.maintenance-and-work-orders .mwAiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px;
border-bottom: 1px solid var(--line)
}
.maintenance-and-work-orders .mwAiTop>span:first-child {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
color: var(--navy);
font-weight: 800
}
.maintenance-and-work-orders .mwAiTop .icon2 {
color: #2588B7;
width: 24px;
height: 24px
}
.maintenance-and-work-orders .mwAiPrompt {
background: #EFF9FE;
border: 1px solid #C6E3F1;
border-radius: 11px 11px 2px 11px;
color: #30566E;
padding: 14px;
margin: 18px 18px 14px 33px;
font-size: 12px;
line-height: 1.75
}
.maintenance-and-work-orders .mwAiResponse {
padding: 0 18px 18px
}
.maintenance-and-work-orders .mwAiResponse>strong {
display: block;
font-size: 18px;
line-height: 1.4;
letter-spacing: -.025em;
color: var(--navy);
margin: 9px 0 15px
}
.maintenance-and-work-orders .mwAiLine {
font-size: 11px;
line-height: 1.8;
color: #4A6B80;
padding: 11px 0;
border-top: 1px solid #E5EEF3
}
.maintenance-and-work-orders .mwAiLine b {
display: block;
color: #254F68;
font-size: 11px;
margin-bottom: 3px
}
.maintenance-and-work-orders .mwAiFoot {
display: flex;
align-items: center;
gap: 8px;
background: #EDF9F2;
color: #226C4D;
padding: 14px 18px;
border-top: 1px solid #CDE5D5;
font-size: 10px;
line-height: 1.7
}
.maintenance-and-work-orders .mwAiFoot .icon2 {
height: 18px;
width: 18px
}
.maintenance-and-work-orders .sectionNote {
font-size: 12px;
line-height: 1.7;
color: var(--muted);
text-align: center;
margin: 20px auto 0;
max-width: 850px
}
.maintenance-and-work-orders .rentalMaintenanceSkip:focus {
position: fixed;
top: 12px
}
@media(min-width:981px) and (max-width:1150px) {
.maintenance-and-work-orders .mwField {
grid-template-columns: 165px minmax(0, 1fr);
gap: 11px
}
.maintenance-and-work-orders .mwFieldCard {
padding: 12px
}
.maintenance-and-work-orders .mwJob {
gap: 8px
}
.maintenance-and-work-orders .mwJob strong {
font-size: 11px
}
}
@media(max-width:640px) {
.maintenance-and-work-orders .mwTop {
padding: 12px;
font-size: 10px
}
.maintenance-and-work-orders .mwFilters {
padding: 10px 12px;
font-size: 8px;
gap: 5px
}
.maintenance-and-work-orders .mwQueue {
padding: 0 12px
}
.maintenance-and-work-orders .mwJob {
gap: 8px;
grid-template-columns: 29px minmax(0, 1fr) auto;
padding: 14px 0
}
.maintenance-and-work-orders .mwJobIcon {
width: 29px;
height: 29px
}
.maintenance-and-work-orders .mwJobIcon .icon2 {
width: 17px;
height: 17px
}
.maintenance-and-work-orders .mwJob strong {
font-size: 11px
}
.maintenance-and-work-orders .mwJob small {
font-size: 8px
}
.maintenance-and-work-orders .mwJob>.pill {
font-size: 7px;
padding: 5px 6px
}
.maintenance-and-work-orders .mwDetails {
padding: 12px;
gap: 8px
}
.maintenance-and-work-orders .mwDetails b {
font-size: 10px
}
.maintenance-and-work-orders .mwNote {
font-size: 9px;
padding: 12px;
gap: 7px
}
.maintenance-and-work-orders .mwMeter {
padding: 15px
}
.maintenance-and-work-orders .mwMeterTitle strong {
font-size: 17px
}
.maintenance-and-work-orders .mwMeterTitle small {
font-size: 9px
}
.maintenance-and-work-orders .mwMeterNumbers b {
font-size: 28px
}
.maintenance-and-work-orders .mwMeterCaption {
font-size: 8px
}
.maintenance-and-work-orders .mwSchedule {
gap: 8px
}
.maintenance-and-work-orders .mwTrigger {
padding: 13px 10px
}
.maintenance-and-work-orders .mwTrigger strong {
font-size: 11px
}
.maintenance-and-work-orders .mwTrigger p {
font-size: 8px
}
.maintenance-and-work-orders .mwGenerate {
font-size: 9px;
padding: 12px 14px
}
.maintenance-and-work-orders .mwField {
grid-template-columns: 165px minmax(0, 1fr);
gap: 12px
}
.maintenance-and-work-orders .mwFieldCard {
padding: 12px
}
.maintenance-and-work-orders .mwFieldCard strong {
font-size: 12px
}
.maintenance-and-work-orders .mwFieldCard p {
font-size: 9px
}
.maintenance-and-work-orders .mwProof {
font-size: 8px;
padding: 7px;
gap: 4px
}
.maintenance-and-work-orders .mwCostHead {
padding: 15px
}
.maintenance-and-work-orders .mwCostHead strong {
font-size: 18px
}
.maintenance-and-work-orders .mwCosts th {
padding: 10px 11px;
font-size: 8px
}
.maintenance-and-work-orders .mwCosts td {
padding: 12px 11px;
font-size: 10px
}
.maintenance-and-work-orders .mwCosts td:first-child strong {
font-size: 10px
}
.maintenance-and-work-orders .mwCostTotal {
padding: 14px 15px;
font-size: 10px
}
.maintenance-and-work-orders .mwCostTotal strong {
font-size: 26px
}
.maintenance-and-work-orders .mwCostNote {
font-size: 8px;
padding: 10px 13px
}
.maintenance-and-work-orders .mwHistory {
padding: 13px;
gap: 9px
}
.maintenance-and-work-orders .mwHistory strong {
font-size: 11px
}
.maintenance-and-work-orders .mwHistory small {
font-size: 8px
}
.maintenance-and-work-orders .mwAiTop {
padding: 15px
}
.maintenance-and-work-orders .mwAiPrompt {
margin: 15px 15px 13px 25px;
font-size: 11px;
padding: 12px
}
.maintenance-and-work-orders .mwAiResponse {
padding: 0 15px 15px
}
.maintenance-and-work-orders .mwAiResponse>strong {
font-size: 17px
}
.maintenance-and-work-orders .mwAiFoot {
padding: 13px 15px;
font-size: 9px
}
}
@media(max-width:480px) {
.maintenance-and-work-orders .mwField {
grid-template-columns: minmax(0, 1fr)
}
.maintenance-and-work-orders .mwPhone {
width: 207px;
margin: 0 auto
}
.maintenance-and-work-orders .mwPhoneHead strong {
font-size: 14px
}
.maintenance-and-work-orders .mwPhoneHead small {
font-size: 9px
}
.maintenance-and-work-orders .mwPhoneBody {
padding: 13px
}
.maintenance-and-work-orders .mwCheck {
font-size: 10px
}
.maintenance-and-work-orders .mwOffline {
font-size: 9px
}
.maintenance-and-work-orders .mwFieldSide {
grid-template-columns: 1fr 1fr;
gap: 10px
}
.maintenance-and-work-orders .mwFieldCard p {
font-size: 10px
}
}
@media(max-width:360px) {
.maintenance-and-work-orders .mwJob {
grid-template-columns: 24px minmax(0, 1fr);
gap: 7px
}
.maintenance-and-work-orders .mwJobIcon {
width: 24px;
height: 27px
}
.maintenance-and-work-orders .mwJob>.pill {
grid-column: 2;
justify-self: start;
margin-top: 3px;
font-size: 8px
}
.maintenance-and-work-orders .mwJob strong {
font-size: 11px
}
.maintenance-and-work-orders .mwTop>.pill {
font-size: 7px
}
.maintenance-and-work-orders .mwSchedule {
grid-template-columns: minmax(0, 1fr)
}
.maintenance-and-work-orders .mwTrigger {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 1px 10px;
padding: 12px
}
.maintenance-and-work-orders .mwTrigger>.icon2 {
grid-row: 1/3;
margin: 0
}
.maintenance-and-work-orders .mwTrigger strong {
font-size: 12px
}
.maintenance-and-work-orders .mwTrigger p {
grid-column: 2;
font-size: 9px;
margin-top: 3px
}
.maintenance-and-work-orders .mwMeterTitle strong {
font-size: 15px
}
.maintenance-and-work-orders .mwMeterNumbers b {
font-size: 25px
}
.maintenance-and-work-orders .mwMeterCaption {
flex-direction: column;
align-items: flex-start;
gap: 4px
}
.maintenance-and-work-orders .mwFieldSide {
grid-template-columns: minmax(0, 1fr)
}
.maintenance-and-work-orders .mwCosts td,
.maintenance-and-work-orders .mwCosts th {
padding: 10px 9px
}
.maintenance-and-work-orders .mwCosts td {
font-size: 9px
}
}  #rental-transport-page * {
box-sizing: border-box
}
#rental-transport-page a {
text-decoration: none
}
#rental-transport-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#rental-transport-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#rental-transport-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0;
background: transparent;
}
#rental-transport-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#rental-transport-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
#rental-transport-page .btn .icon {
width: 17px;
height: 17px
}
#rental-transport-page .btn.black {
background: #0B0B0B;
color: #fff
}
#rental-transport-page .btn.black:hover {
background: #303030
}
#rental-transport-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#rental-transport-page .btn.yellow:hover {
background: #FFD454
}
#rental-transport-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#rental-transport-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#rental-transport-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#rental-transport-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#rental-transport-page .textLink .icon {
width: 17px;
height: 17px
}
#rental-transport-page .textLink:hover {
color: var(--brand2)
}
#rental-transport-page .soft {
background: var(--sky2)
}
#rental-transport-page .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
#rental-transport-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#rental-transport-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#rental-transport-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#rental-transport-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#rental-transport-page .heroGrid>*,
#rental-transport-page .feature>*,
#rental-transport-page .aiGrid>* {
min-width: 0
}
#rental-transport-page .heroCopy {
min-width: 0
}
#rental-transport-page .hero h1 {
max-width: 630px
}
#rental-transport-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#rental-transport-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#rental-transport-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#rental-transport-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#rental-transport-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#rental-transport-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#rental-transport-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#rental-transport-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#rental-transport-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#rental-transport-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#rental-transport-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#rental-transport-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#rental-transport-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#rental-transport-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#rental-transport-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#rental-transport-page .outcome:nth-child(3):before {
background: var(--green)
}
#rental-transport-page .outcome:nth-child(4):before {
background: var(--purple)
}
#rental-transport-page .outcome>.icon {
color: var(--navy)
}
#rental-transport-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#rental-transport-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#rental-transport-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-transport-page .feature.reverse .visual {
order: -1
}
#rental-transport-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#rental-transport-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#rental-transport-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#rental-transport-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#rental-transport-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#rental-transport-page .tick .icon {
height: 13px;
width: 13px
}
#rental-transport-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#rental-transport-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#rental-transport-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#rental-transport-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#rental-transport-page .uiHeading .icon {
height: 19px;
width: 19px
}
#rental-transport-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#rental-transport-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#rental-transport-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#rental-transport-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#rental-transport-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#rental-transport-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#rental-transport-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#rental-transport-page .dark h2,
#rental-transport-page .dark h3 {
color: white
}
#rental-transport-page .dark .ey {
background: var(--yellow);
color: #111
}
#rental-transport-page .dark .textLink {
color: #fff
}
#rental-transport-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#rental-transport-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-transport-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#rental-transport-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#rental-transport-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#rental-transport-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#rental-transport-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#rental-transport-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#rental-transport-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#rental-transport-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#rental-transport-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#rental-transport-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-transport-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#rental-transport-page .connectedCard h3 {
margin: 18px 0 11px
}
#rental-transport-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#rental-transport-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#rental-transport-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#rental-transport-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#rental-transport-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#rental-transport-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#rental-transport-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#rental-transport-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-transport-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#rental-transport-page .featureCard>.icon {
color: var(--navy)
}
#rental-transport-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#rental-transport-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-transport-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#rental-transport-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#rental-transport-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#rental-transport-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#rental-transport-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#rental-transport-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#rental-transport-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#rental-transport-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#rental-transport-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#rental-transport-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#rental-transport-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#rental-transport-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#rental-transport-page .useCase>.icon {
color: var(--navy)
}
#rental-transport-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#rental-transport-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-transport-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#rental-transport-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#rental-transport-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#rental-transport-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#rental-transport-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#rental-transport-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#rental-transport-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-transport-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#rental-transport-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#rental-transport-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#rental-transport-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#rental-transport-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#rental-transport-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#rental-transport-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#rental-transport-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#rental-transport-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#rental-transport-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#rental-transport-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#rental-transport-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#rental-transport-page .ctaBtns .btn {
min-width: 219px
}
#rental-transport-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#rental-transport-page .btn.darkOutline:hover {
background: #252D33
}
#rental-transport-page .final a:focus-visible {
outline-color: var(--yellow)
}
#rental-transport-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#rental-transport-page .heroGrid {
gap: 28px
}
#rental-transport-page .hero .lead {
font-size: 16px
}
#rental-transport-page .feature,
#rental-transport-page .aiGrid {
gap: 30px
}
#rental-transport-page .visual {
padding: 17px
}
#rental-transport-page .toolCard {
padding: 21px 15px
}
#rental-transport-page .toolCard strong {
font-size: 14px
}
#rental-transport-page .handoffBand {
padding: 20px
}
#rental-transport-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#rental-transport-page section {
padding: 64px 0
}
#rental-transport-page .hero {
padding: 34px 0 42px
}
#rental-transport-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#rental-transport-page .heroCopy {
max-width: 790px
}
#rental-transport-page .hero h1 {
max-width: 800px;
}
#rental-transport-page .hero .lead {
max-width: 760px
}
#rental-transport-page .heroVisual {
max-width: 460px;
justify-self: center
}
#rental-transport-page .feature,
#rental-transport-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#rental-transport-page .feature.reverse .visual {
order: 0
}
#rental-transport-page .featureCopy {
max-width: 790px
}
#rental-transport-page .visual {
max-width: 640px;
margin: 0 auto
}
#rental-transport-page .outcomes,
#rental-transport-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-transport-page .connectedGrid {
gap: 13px
}
#rental-transport-page .connectedCard {
padding: 22px
}
#rental-transport-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-transport-page .aiVisual {
max-width: 600px;
margin: auto
}
#rental-transport-page .aiMini {
max-width: 780px
}
#rental-transport-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#rental-transport-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#rental-transport-page .toolCard {
min-height: 145px
}
#rental-transport-page .roleGrid {
gap: 20px
}
#rental-transport-page .roleCard {
padding-right: 18px
}
#rental-transport-page .roleCard h3 {
font-size: 20px
}
#rental-transport-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#rental-transport-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#rental-transport-page .workflowLead br {
display: none
}
#rental-transport-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#rental-transport-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#rental-transport-page .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
#rental-transport-page .wrap {
width: calc(100% - 32px)
}
#rental-transport-page section {
padding: 49px 0
}
#rental-transport-page h2 {
font-size: 33px;
line-height: 1.15
}
#rental-transport-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#rental-transport-page .sectionHead {
margin-bottom: 27px
}
#rental-transport-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#rental-transport-page .hero {
padding: 25px 0 34px
}
#rental-transport-page .heroGrid {
gap: 21px
}
#rental-transport-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#rental-transport-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#rental-transport-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#rental-transport-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#rental-transport-page .hero .micro {
font-size: 11px
}
#rental-transport-page .heroPills {
gap: 6px;
margin-top: 16px
}
#rental-transport-page .heroPills span {
font-size: 9px
}
#rental-transport-page .heroVisual {
max-width: 420px
}
#rental-transport-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#rental-transport-page .trust {
padding: 22px 0
}
#rental-transport-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#rental-transport-page .outcomes {
gap: 12px
}
#rental-transport-page .outcome {
padding: 19px
}
#rental-transport-page .outcome h3 {
font-size: 17px
}
#rental-transport-page .outcome p {
font-size: 13px
}
#rental-transport-page .feature {
gap: 27px
}
#rental-transport-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#rental-transport-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#rental-transport-page .fi {
font-size: 12px
}
#rental-transport-page .textLink {
font-size: 13px
}
#rental-transport-page .visual {
padding: 15px;
border-radius: 16px
}
#rental-transport-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#rental-transport-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#rental-transport-page .uiHeading .icon {
width: 18px;
height: 18px
}
#rental-transport-page .uiFoot {
font-size: 9px
}
#rental-transport-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#rental-transport-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#rental-transport-page .aiMini {
gap: 11px;
margin-top: 23px
}
#rental-transport-page .aiMini article {
padding: 16px
}
#rental-transport-page .aiMini h3 {
font-size: 15px
}
#rental-transport-page .aiMini p {
font-size: 12px
}
#rental-transport-page .aiNote {
font-size: 10px
}
#rental-transport-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#rental-transport-page .connectedCard {
padding: 23px
}
#rental-transport-page .connectedCard h3 {
margin: 15px 0 9px
}
#rental-transport-page .connectedCard p {
font-size: 14px
}
#rental-transport-page .handoffBand {
padding: 20px
}
#rental-transport-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#rental-transport-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#rental-transport-page .handoffBand small {
font-size: 11px
}
#rental-transport-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#rental-transport-page .featureGrid {
gap: 13px
}
#rental-transport-page .featureCard {
padding: 21px
}
#rental-transport-page .featureCard h3 {
font-size: 17px
}
#rental-transport-page .featureCard p {
font-size: 13px
}
#rental-transport-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#rental-transport-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#rental-transport-page .toolCard strong {
font-size: 15px
}
#rental-transport-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#rental-transport-page .toolCard:last-child .toolArrow {
top: 31px
}
#rental-transport-page .toolCard:last-child strong {
padding-right: 25px
}
#rental-transport-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#rental-transport-page .useCases {
gap: 13px
}
#rental-transport-page .useCase {
padding: 21px 18px
}
#rental-transport-page .useCase h3 {
font-size: 17px
}
#rental-transport-page .useCase p {
font-size: 13px
}
#rental-transport-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#rental-transport-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#rental-transport-page .roleCard:last-child {
padding-bottom: 0
}
#rental-transport-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#rental-transport-page .roleCard>strong {
font-size: 14px
}
#rental-transport-page .roleCard p {
font-size: 14px
}
#rental-transport-page .workflowBand {
padding: 28px 0
}
#rental-transport-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#rental-transport-page .workflowLead {
font-size: 18px
}
#rental-transport-page .workflowStep strong {
font-size: 14px
}
#rental-transport-page .workflowStep p {
font-size: 10px
}
#rental-transport-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#rental-transport-page .final h2 {
font-size: 32px
}
#rental-transport-page .final p {
font-size: 14px;
line-height: 1.8
}
#rental-transport-page .final .ey {
font-size: 9px
}
#rental-transport-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#rental-transport-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#rental-transport-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#rental-transport-page .outcomes,
#rental-transport-page .featureGrid,
#rental-transport-page .useCases {
grid-template-columns: 1fr
}
#rental-transport-page .outcome {
padding: 23px
}
#rental-transport-page .outcome h3 {
font-size: 18px
}
#rental-transport-page .outcome p {
font-size: 14px
}
#rental-transport-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#rental-transport-page .fi {
font-size: 13px
}
#rental-transport-page .aiMini {
grid-template-columns: 1fr
}
#rental-transport-page .aiMini h3 {
font-size: 17px
}
#rental-transport-page .aiMini p {
font-size: 13px
}
#rental-transport-page .aiMini article {
padding: 19px
}
#rental-transport-page .featureCard h3,
#rental-transport-page .useCase h3 {
font-size: 19px
}
#rental-transport-page .featureCard p,
#rental-transport-page .useCase p {
font-size: 14px
}
#rental-transport-page .toolsGrid {
grid-template-columns: 1fr
}
#rental-transport-page .toolCard,
#rental-transport-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#rental-transport-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#rental-transport-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#rental-transport-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#rental-transport-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#rental-transport-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#rental-transport-page .toolArrow,
#rental-transport-page .toolCard:last-child .toolArrow {
top: 30px
}
#rental-transport-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#rental-transport-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#rental-transport-page h2 {
font-size: 30px
}
#rental-transport-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#rental-transport-page .heroPills span {
font-size: 8px
}
#rental-transport-page .heroPills {
gap: 5px
}
#rental-transport-page .uiHeading {
font-size: 11px
}
#rental-transport-page .uiHeading>.pill {
font-size: 7px
}
#rental-transport-page .visual {
padding: 12px
}
#rental-transport-page .final {
padding: 26px 20px
}
#rental-transport-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#rental-transport-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#rental-transport-page section {
padding: 24px 0
}
#rental-transport-page .hero,
#rental-transport-page .soft {
background: #fff
}
#rental-transport-page .dark,
#rental-transport-page .workflowBand,
#rental-transport-page .final {
background: #fff;
color: #11283A
}
#rental-transport-page .dark h2,
#rental-transport-page .dark h3,
#rental-transport-page .final h2 {
color: #11283A
}
#rental-transport-page .dark p,
#rental-transport-page .final p {
color: #52697C
}
#rental-transport-page .btn {
display: none
}
#rental-transport-page .visual,
#rental-transport-page .outcome,
#rental-transport-page .featureCard,
#rental-transport-page details {
break-inside: avoid
}
#rental-transport-page .heroImage {
max-width: 380px
}
#rental-transport-page .heroVisual {
justify-self: center
}
}
.rentalTransportSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.rentalTransportSkip:focus {
top: 12px
}
#rental-transport-page .dark .textLink {
color: #FFF1BD
}
#rental-transport-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
#rental-transport-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#rental-transport-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#rental-transport-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy)
}
#rental-transport-page .workflowStep {
min-width: 0
}
#rental-transport-page .featureCopy>p {
max-width: 580px
}
#rental-transport-page .toolCard strong {
padding-right: 12px
}
#rental-transport-page .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
#rental-transport-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#rental-transport-page .supportStrip {
gap: 7px
}
#rental-transport-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#rental-transport-page .supportStrip .icon {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
#rental-transport-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} #rental-transport-page .pill.yellow {
background: var(--yellowsoft);
color: #795D12
}
#rental-transport-page .pill.gray {
background: #F0F4F7;
color: #5D7281
}
#rental-transport-page .tcPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#rental-transport-page .tcTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 15px 16px;
background: #F7FBFE;
border-bottom: 1px solid var(--line);
font-size: 11px;
font-weight: 700;
line-height: 1.5;
color: var(--navy)
}
#rental-transport-page .tcTop>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#rental-transport-page .tcTop .icon {
width: 17px;
height: 17px
}
#rental-transport-page .tcFilters {
display: flex;
gap: 7px;
flex-wrap: wrap;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
font-size: 9px;
color: #527084
}
#rental-transport-page .tcFilters>span {
border: 1px solid #DCE8EF;
border-radius: 6px;
padding: 5px 8px;
background: #fff
}
#rental-transport-page .tcFilters>span.active {
background: #E8F7FE;
border-color: #B4DCEE;
color: #0A628C;
font-weight: 700
}
#rental-transport-page .tcCrewList {
padding: 0 16px
}
#rental-transport-page .tcCrewRow {
display: grid;
grid-template-columns: 31px minmax(0, 1fr) auto;
align-items: center;
gap: 9px 10px;
padding: 15px 0;
border-bottom: 1px solid #E6EEF3
}
#rental-transport-page .tcCrewRow:last-child {
border: 0
}
#rental-transport-page .tcAvatar {
width: 31px;
height: 31px;
border-radius: 50%;
display: grid;
place-items: center;
background: #EAF5FA;
color: #316D89;
font-size: 9px;
font-weight: 800
}
#rental-transport-page .tcPerson strong {
font-size: 12px;
line-height: 1.5;
display: block;
color: var(--navy)
}
#rental-transport-page .tcPerson small {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
display: block;
margin-top: 3px
}
#rental-transport-page .tcCrewRow>.pill {
font-size: 8px;
padding: 5px 7px
}
#rental-transport-page .tcShift {
grid-column: 2/-1;
display: grid;
grid-template-columns: 83px minmax(0, 1fr);
gap: 10px;
align-items: center
}
#rental-transport-page .tcShift>span {
font-size: 9px;
line-height: 1.4;
color: #597383;
font-variant-numeric: tabular-nums
}
#rental-transport-page .tcTrack {
height: 13px;
border-radius: 4px;
background: #F2F7FA;
overflow: hidden
}
#rental-transport-page .tcTrack i {
display: block;
height: 100%;
background: #8AD6B7;
border-radius: 4px
}
#rental-transport-page .tcTrack .yellow {
background: #F5D66C
}
#rental-transport-page .tcNotice {
display: flex;
gap: 9px;
align-items: center;
border-top: 1px solid #E8DFBD;
background: #FFFBEF;
padding: 13px 16px;
font-size: 10px;
color: #7B6420;
line-height: 1.6
}
#rental-transport-page .tcNotice .icon {
width: 18px;
height: 18px
}
#rental-transport-page .tcNotice strong {
display: block;
font-size: 10px
}
#rental-transport-page .tcSkills {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 14px;
color: #4C6F81;
font-size: 9px;
line-height: 1.5
}
#rental-transport-page .tcSkills span {
display: flex;
gap: 5px;
align-items: center
}
#rental-transport-page .tcSkills .icon {
width: 15px;
height: 15px;
color: var(--green)
}
#rental-transport-page .tcVehicle {
display: flex;
align-items: center;
gap: 12px;
padding: 19px 16px 15px
}
#rental-transport-page .tcVehicleIcon {
width: 52px;
height: 52px;
background: #EAF7FD;
border: 1px solid #D0E8F4;
border-radius: 12px;
display: grid;
place-items: center;
color: #2881A6;
flex: none
}
#rental-transport-page .tcVehicleIcon>.icon {
width: 31px;
height: 31px
}
#rental-transport-page .tcVehicle>div {
flex: 1;
min-width: 0
}
#rental-transport-page .tcVehicle strong {
font-size: 22px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 3px
}
#rental-transport-page .tcVehicle small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 4px
}
#rental-transport-page .tcCapacity {
padding: 0 16px 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 15px
}
#rental-transport-page .tcCapacity>div>span {
font-size: 9px;
color: var(--muted);
display: block
}
#rental-transport-page .tcCapacity strong {
display: block;
color: var(--navy);
font-size: 24px;
letter-spacing: -.03em;
line-height: 1.3;
margin-top: 4px
}
#rental-transport-page .tcCapacity strong small {
font-size: 11px;
font-weight: 500;
letter-spacing: 0
}
#rental-transport-page .tcLoadBar {
grid-column: 1/-1;
height: 10px;
border-radius: 9px;
background: #EDF4F8;
overflow: hidden;
margin-top: 2px
}
#rental-transport-page .tcLoadBar i {
height: 100%;
display: block;
background: #48ABDB;
border-radius: 9px
}
#rental-transport-page .tcCapacity p {
grid-column: 1/-1;
font-size: 8px;
line-height: 1.6;
color: var(--muted)
}
#rental-transport-page .tcStops {
padding: 4px 16px 9px;
border-top: 1px solid var(--line);
background: #FAFCFE
}
#rental-transport-page .tcStops>div {
display: flex;
align-items: center;
gap: 10px;
position: relative;
padding: 12px 0
}
#rental-transport-page .tcStops>div+div {
border-top: 1px solid #E8EFF4
}
#rental-transport-page .tcStop {
height: 26px;
width: 26px;
border-radius: 50%;
background: #E1F3FC;
color: var(--navy);
font-size: 10px;
font-weight: 800;
display: grid;
place-items: center;
flex: none
}
#rental-transport-page .tcStops>div>div {
flex: 1;
min-width: 0
}
#rental-transport-page .tcStops strong {
font-size: 11px;
line-height: 1.5;
display: block;
color: var(--navy)
}
#rental-transport-page .tcStops small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px
}
#rental-transport-page .tcStops .icon {
width: 19px;
height: 19px;
color: #718F9F
}
#rental-transport-page .tcMobileScene {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 18px;
align-items: center
}
#rental-transport-page .tcPhone {
width: 100%;
min-width: 0;
border: 5px solid #112C3B;
border-radius: 28px;
background: #fff;
overflow: hidden;
position: relative;
padding-bottom: 16px
}
#rental-transport-page .tcPhoneTop {
height: 25px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 7px;
line-height: 1;
padding: 0 11px;
font-weight: 700;
color: #183849
}
#rental-transport-page .tcPhoneTop i {
width: 45px;
height: 10px;
border-radius: 9px;
background: #112C3B
}
#rental-transport-page .tcPhoneHead {
padding: 12px;
background: #F0F9FE;
border-top: 1px solid #DEECF5;
border-bottom: 1px solid #D9E8F1
}
#rental-transport-page .tcPhoneHead>.icon {
width: 20px;
height: 20px;
color: #157EA9;
margin-bottom: 7px
}
#rental-transport-page .tcPhoneHead strong {
font-size: 14px;
display: block;
color: var(--navy);
line-height: 1.3
}
#rental-transport-page .tcPhoneHead small {
display: block;
font-size: 8px;
color: #57798A;
line-height: 1.5;
margin-top: 5px
}
#rental-transport-page .tcPhoneBody {
padding: 13px 12px 6px
}
#rental-transport-page .tcPhoneTitle {
font-size: 17px;
color: var(--navy);
line-height: 1.5;
display: block;
margin-top: 4px;
margin-bottom: 9px
}
#rental-transport-page .tcPhoneDetail {
display: flex;
gap: 6px;
align-items: center;
padding: 7px 0;
font-size: 9px;
border-bottom: 1px solid #E5EEF4;
color: #496D82;
line-height: 1.5
}
#rental-transport-page .tcPhoneDetail .icon {
width: 14px;
height: 14px;
color: #4697B9
}
#rental-transport-page .tcPhoneNote {
padding: 10px;
background: #FFFBEA;
border: 1px solid #EFE1B3;
border-radius: 7px;
font-size: 8px;
line-height: 1.6;
color: #7D692E;
margin-top: 12px
}
#rental-transport-page .tcPhoneNote strong {
display: block;
font-size: 8px;
margin-bottom: 4px
}
#rental-transport-page .tcFakeButtons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 12px
}
#rental-transport-page .tcFakeButtons>span {
padding: 7px 3px;
font-size: 9px;
font-weight: 750;
text-align: center;
background: var(--yellow);
color: #11283A;
border: 1px solid #E9C244;
border-radius: 6px
}
#rental-transport-page .tcFakeButtons>span+span {
background: #fff;
border-color: #D9E8F1;
color: #577083
}
#rental-transport-page .tcPhoneFine {
font-size: 7px !important;
line-height: 1.6 !important;
text-align: center;
color: var(--muted);
margin-top: 9px !important
}
#rental-transport-page .tcHomeBar {
width: 54px;
height: 3px;
border-radius: 9px;
margin: 9px auto -8px;
background: #1F4255
}
#rental-transport-page .tcReplyStack {
display: grid;
gap: 12px;
min-width: 0
}
#rental-transport-page .tcReplyCard {
padding: 15px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff
}
#rental-transport-page .tcSmallIcon {
width: 28px;
height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
background: #EAF8F0;
color: #228057;
margin-bottom: 10px
}
#rental-transport-page .tcSmallIcon .icon {
width: 17px;
height: 17px
}
#rental-transport-page .tcSmallIcon.amber {
background: #FFF7D8;
color: #997718
}
#rental-transport-page .tcReplyCard strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.4
}
#rental-transport-page .tcReplyCard p {
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin: 7px 0 11px
}
#rental-transport-page .tcReplyCard .pill {
font-size: 8px
}
#rental-transport-page .tcReplyNote {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 9px;
line-height: 1.7;
color: #4C7184
}
#rental-transport-page .tcReplyNote .icon {
height: 16px;
width: 16px;
margin-top: 2px
}
#rental-transport-page .tcHours {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 17px 16px 11px
}
#rental-transport-page .tcHours>div {
border: 1px solid #DCE9F0;
border-radius: 9px;
padding: 11px;
background: #F7FBFE
}
#rental-transport-page .tcHours>div:last-child {
background: #FFFBEF;
border-color: #EBDFAE
}
#rental-transport-page .tcHours span {
display: block;
font-size: 9px;
line-height: 1.5;
color: var(--muted)
}
#rental-transport-page .tcHours strong {
font-size: 29px;
color: var(--navy);
line-height: 1.3;
display: block;
letter-spacing: -.04em;
margin-top: 4px
}
#rental-transport-page .tcHours small {
font-size: 12px;
font-weight: 500;
letter-spacing: 0
}
#rental-transport-page .tcVariance {
display: flex;
gap: 7px;
align-items: center;
font-size: 9px;
line-height: 1.5;
color: #826D2C;
padding: 0 16px 15px
}
#rental-transport-page .tcVariance .icon {
width: 14px;
height: 14px
}
#rental-transport-page .tcTableWrap {
width: 100%;
min-width: 0
}
#rental-transport-page .tcCostTable {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
font-size: 11px;
line-height: 1.5;
font-variant-numeric: tabular-nums;
margin: 0;
border: 0;
color: var(--ink)
}
#rental-transport-page .tcCostTable th {
width: auto;
font-weight: 700;
vertical-align: middle
}
#rental-transport-page .tcCostTable thead th {
background: #F1F7FA;
font-size: 9px;
font-weight: 650;
color: #597687;
padding: 10px 12px;
border: 0;
border-top: 1px solid #DFE9F0;
border-bottom: 1px solid #DFE9F0;
text-align: right
}
#rental-transport-page .tcCostTable thead th:first-child {
width: 37%;
text-align: left
}
#rental-transport-page .tcCostTable tbody th {
text-align: left;
font-size: 11px;
color: var(--navy);
padding: 13px 12px;
border: 0;
border-bottom: 1px solid #E5EDF2
}
#rental-transport-page .tcCostTable td {
text-align: right;
padding: 13px 12px;
white-space: nowrap;
border: 0;
border-bottom: 1px solid #E5EDF2
}
#rental-transport-page .tcCostTable td:last-child {
font-weight: 750;
color: var(--navy)
}
#rental-transport-page .tcCostTable small {
display: block;
font-size: 8px;
color: var(--muted);
font-weight: 500;
margin-top: 3px
}
#rental-transport-page .tcCostTotal {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 16px;
background: #EDF9F3;
color: #217652;
font-size: 11px;
font-weight: 700
}
#rental-transport-page .tcCostTotal strong {
font-size: 30px;
letter-spacing: -.03em;
line-height: 1.3
}
#rental-transport-page .tcCostNote {
font-size: 8px;
line-height: 1.6;
padding: 11px 16px;
color: var(--muted)
}
#rental-transport-page .tcExport {
display: flex;
gap: 7px;
align-items: center;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#rental-transport-page .tcExport .icon {
width: 17px;
height: 17px;
color: var(--green)
}
#rental-transport-page .tcSrOnly {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
border: 0
}
#rental-transport-page .tcAiPanel {
background: #fff;
border: 1px solid #405B6B;
border-radius: 17px;
overflow: hidden;
color: var(--ink)
}
#rental-transport-page .tcAiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
padding: 18px;
background: #F7FBFE;
border-bottom: 1px solid var(--line)
}
#rental-transport-page .tcAiTop>span:first-child {
display: flex;
gap: 8px;
align-items: center;
font-size: 15px;
font-weight: 800;
color: var(--navy)
}
#rental-transport-page .tcAiTop .icon {
color: #C09411;
width: 22px;
height: 22px
}
#rental-transport-page .tcAiPrompt {
padding: 14px 15px;
border: 1px solid #C9E7F4;
border-radius: 12px 3px 12px 12px;
background: #EAF7FD;
color: #285E7A;
font-size: 12px;
line-height: 1.7;
margin: 19px 18px 16px 37px
}
#rental-transport-page .tcAiResponse {
padding: 0 20px 20px
}
#rental-transport-page .tcAiResponse>strong {
display: block;
font-size: 18px;
color: var(--navy);
line-height: 1.4;
margin-top: 8px
}
#rental-transport-page .tcAiResponse>p {
font-size: 11px;
color: #617C8C;
line-height: 1.6;
margin-top: 7px
}
#rental-transport-page .tcAiChecks {
display: grid;
gap: 12px;
margin-top: 18px
}
#rental-transport-page .tcAiChecks>span {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 11px;
line-height: 1.6;
color: #3B6379
}
#rental-transport-page .tcAiChecks .icon {
height: 15px;
width: 15px;
color: var(--green);
margin-top: 2px
}
#rental-transport-page .tcAiSources {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px
}
#rental-transport-page .tcAiSources span {
display: flex;
gap: 5px;
align-items: center;
font-size: 8px;
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
background: #F6FAFC;
color: #557185
}
#rental-transport-page .tcAiSources .icon {
height: 12px;
width: 12px
}
#rental-transport-page .tcAiFoot {
display: flex;
gap: 8px;
align-items: center;
padding: 15px 18px;
border-top: 1px solid #E9DEAE;
background: #FFFBEF;
color: #776321;
font-size: 10px;
line-height: 1.6
}
#rental-transport-page .tcAiFoot .icon {
width: 20px;
height: 20px
}
@media(min-width:981px) and (max-width:1150px) {
#rental-transport-page .tcTop {
padding: 13px;
font-size: 10px
}
#rental-transport-page .tcTop .pill {
font-size: 8px
}
#rental-transport-page .tcCrewList {
padding: 0 12px
}
#rental-transport-page .tcCrewRow {
gap: 8px;
grid-template-columns: 27px minmax(0, 1fr) auto
}
#rental-transport-page .tcAvatar {
width: 27px;
height: 27px
}
#rental-transport-page .tcCrewRow>.pill {
font-size: 7px
}
#rental-transport-page .tcMobileScene {
grid-template-columns: 173px minmax(0, 1fr);
gap: 12px
}
#rental-transport-page .tcReplyCard {
padding: 12px
}
#rental-transport-page .tcReplyCard strong {
font-size: 11px
}
#rental-transport-page .tcReplyCard p {
font-size: 9px
}
#rental-transport-page .tcCostTable th,
#rental-transport-page .tcCostTable td {
padding: 11px 9px
}
}
@media(max-width:640px) {
#rental-transport-page .tcTop {
padding: 12px;
font-size: 10px;
gap: 8px
}
#rental-transport-page .tcTop .pill {
font-size: 7px
}
#rental-transport-page .tcFilters {
padding: 10px 12px;
font-size: 8px
}
#rental-transport-page .tcCrewList {
padding: 0 12px
}
#rental-transport-page .tcCrewRow {
grid-template-columns: 27px minmax(0, 1fr) auto;
gap: 8px;
padding: 14px 0
}
#rental-transport-page .tcAvatar {
height: 27px;
width: 27px;
font-size: 8px
}
#rental-transport-page .tcPerson strong {
font-size: 11px
}
#rental-transport-page .tcPerson small {
font-size: 8px
}
#rental-transport-page .tcCrewRow>.pill {
font-size: 7px;
padding: 4px 6px
}
#rental-transport-page .tcShift {
grid-template-columns: 79px minmax(0, 1fr);
gap: 7px
}
#rental-transport-page .tcShift>span {
font-size: 8px
}
#rental-transport-page .tcTrack {
height: 11px
}
#rental-transport-page .tcNotice {
padding: 12px;
font-size: 9px
}
#rental-transport-page .tcNotice strong {
font-size: 9px
}
#rental-transport-page .tcSkills {
font-size: 8px;
gap: 8px
}
#rental-transport-page .tcVehicle {
padding: 15px 12px;
gap: 10px
}
#rental-transport-page .tcVehicleIcon {
height: 42px;
width: 42px
}
#rental-transport-page .tcVehicleIcon>.icon {
height: 26px;
width: 26px
}
#rental-transport-page .tcVehicle strong {
font-size: 21px
}
#rental-transport-page .tcVehicle .pill {
font-size: 8px
}
#rental-transport-page .tcCapacity {
padding: 0 12px 14px;
gap: 8px 13px
}
#rental-transport-page .tcCapacity strong {
font-size: 23px
}
#rental-transport-page .tcStops {
padding: 3px 12px 7px
}
#rental-transport-page .tcStops strong {
font-size: 11px
}
#rental-transport-page .tcMobileScene {
grid-template-columns: 175px minmax(0, 1fr);
gap: 12px
}
#rental-transport-page .tcPhoneHead {
padding: 11px
}
#rental-transport-page .tcPhoneHead strong {
font-size: 13px
}
#rental-transport-page .tcReplyCard {
padding: 12px
}
#rental-transport-page .tcReplyCard strong {
font-size: 11px
}
#rental-transport-page .tcReplyCard p {
font-size: 9px
}
#rental-transport-page .tcReplyNote {
font-size: 8px
}
#rental-transport-page .tcHours {
padding: 14px 12px 10px;
gap: 8px
}
#rental-transport-page .tcHours>div {
padding: 10px 9px
}
#rental-transport-page .tcHours span {
font-size: 8px
}
#rental-transport-page .tcHours strong {
font-size: 27px
}
#rental-transport-page .tcVariance {
padding: 0 12px 13px;
font-size: 8px
}
#rental-transport-page .tcCostTable thead th {
font-size: 8px;
padding: 10px 9px
}
#rental-transport-page .tcCostTable tbody th,
#rental-transport-page .tcCostTable td {
font-size: 10px;
padding: 12px 9px
}
#rental-transport-page .tcCostTotal {
padding: 14px 12px;
font-size: 10px
}
#rental-transport-page .tcCostTotal strong {
font-size: 27px
}
#rental-transport-page .tcCostNote {
font-size: 8px;
padding: 10px 12px
}
#rental-transport-page .tcExport {
font-size: 9px
}
#rental-transport-page .tcAiTop {
padding: 15px
}
#rental-transport-page .tcAiPrompt {
margin: 15px 15px 13px 25px;
font-size: 11px;
padding: 12px
}
#rental-transport-page .tcAiResponse {
padding: 0 15px 15px
}
#rental-transport-page .tcAiResponse>strong {
font-size: 17px
}
#rental-transport-page .tcAiFoot {
padding: 13px 15px;
font-size: 9px
}
}
@media(max-width:480px) {
#rental-transport-page .tcMobileScene {
grid-template-columns: minmax(0, 1fr);
gap: 19px
}
#rental-transport-page .tcPhone {
width: 207px;
margin: 0 auto
}
#rental-transport-page .tcPhoneHead strong {
font-size: 14px
}
#rental-transport-page .tcPhoneHead small {
font-size: 9px
}
#rental-transport-page .tcPhoneBody {
padding: 13px
}
#rental-transport-page .tcPhoneDetail {
font-size: 10px
}
#rental-transport-page .tcPhoneNote {
font-size: 9px
}
#rental-transport-page .tcReplyStack {
grid-template-columns: 1fr 1fr;
gap: 10px
}
#rental-transport-page .tcReplyNote {
grid-column: 1/-1;
font-size: 10px
}
#rental-transport-page .tcReplyCard strong {
font-size: 12px
}
#rental-transport-page .tcReplyCard p {
font-size: 10px
}
}
@media(max-width:360px) {
#rental-transport-page .tcCrewRow {
grid-template-columns: 24px minmax(0, 1fr);
gap: 7px
}
#rental-transport-page .tcAvatar {
width: 24px;
height: 24px;
font-size: 7px
}
#rental-transport-page .tcCrewRow>.pill {
grid-column: 2;
justify-self: start;
font-size: 8px
}
#rental-transport-page .tcShift {
grid-column: 2;
grid-template-columns: 1fr;
gap: 6px
}
#rental-transport-page .tcVehicle>.pill {
font-size: 7px;
padding: 4px 5px
}
#rental-transport-page .tcVehicle strong {
font-size: 19px
}
#rental-transport-page .tcHours span {
font-size: 7px
}
#rental-transport-page .tcCostTable thead th {
font-size: 7px
}
#rental-transport-page .tcCostTable tbody th,
#rental-transport-page .tcCostTable td {
font-size: 9px;
padding: 10px 7px
}
#rental-transport-page .tcCostTable small {
font-size: 7px
}
#rental-transport-page .tcAiTop>.pill {
font-size: 8px
}
}  .performance-and-analytics .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.performance-and-analytics .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.performance-and-analytics .btn .icon2 {
width: 17px;
height: 17px
}
.performance-and-analytics .btn.black {
background: #0B0B0B;
color: #fff
}
.performance-and-analytics .btn.black:hover {
background: #303030
}
.performance-and-analytics .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.performance-and-analytics .btn.yellow:hover {
background: #FFD454
}
.performance-and-analytics .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.performance-and-analytics .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.performance-and-analytics .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.performance-and-analytics .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.performance-and-analytics .textLink .icon2 {
width: 17px;
height: 17px
}
.performance-and-analytics .textLink:hover {
color: var(--brand2)
}
.performance-and-analytics .soft {
background: var(--sky2)
}
.performance-and-analytics .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.performance-and-analytics .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.performance-and-analytics .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.performance-and-analytics .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.performance-and-analytics .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.performance-and-analytics .heroGrid>*,
.performance-and-analytics .feature>*,
.performance-and-analytics .aiGrid>* {
min-width: 0
}
.performance-and-analytics .heroCopy {
min-width: 0
}
.performance-and-analytics .hero h1 {
max-width: 630px
}
.performance-and-analytics .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.performance-and-analytics .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.performance-and-analytics .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.performance-and-analytics .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.performance-and-analytics .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.performance-and-analytics .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.performance-and-analytics .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.performance-and-analytics .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.performance-and-analytics .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.performance-and-analytics .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.performance-and-analytics .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.performance-and-analytics .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.performance-and-analytics .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.performance-and-analytics .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.performance-and-analytics .outcome:nth-child(2):before {
background: var(--yellow)
}
.performance-and-analytics .outcome:nth-child(3):before {
background: var(--green)
}
.performance-and-analytics .outcome:nth-child(4):before {
background: var(--purple)
}
.performance-and-analytics .outcome>.icon {
color: var(--navy)
}
.performance-and-analytics .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.performance-and-analytics .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.performance-and-analytics .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.performance-and-analytics .feature.reverse .visual {
order: -1
}
.performance-and-analytics .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.performance-and-analytics .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.performance-and-analytics .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.performance-and-analytics .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.performance-and-analytics .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.performance-and-analytics .tick .icon2 {
height: 13px;
width: 13px
}
.performance-and-analytics .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.performance-and-analytics .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.performance-and-analytics .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.performance-and-analytics .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.performance-and-analytics .uiHeading .icon2 {
height: 19px;
width: 19px
}
.performance-and-analytics .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.performance-and-analytics .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.performance-and-analytics .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.performance-and-analytics .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.performance-and-analytics .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.performance-and-analytics .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.performance-and-analytics .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.performance-and-analytics .dark h2,
.performance-and-analytics .dark h3 {
color: white
}
.performance-and-analytics .dark .ey {
background: var(--yellow);
color: #111
}
.performance-and-analytics .dark .textLink {
color: #fff
}
.performance-and-analytics .dark a:focus-visible {
outline-color: var(--yellow)
}
.performance-and-analytics .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.performance-and-analytics .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.performance-and-analytics .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.performance-and-analytics .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.performance-and-analytics .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.performance-and-analytics .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.performance-and-analytics .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.performance-and-analytics .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.performance-and-analytics .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.performance-and-analytics .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.performance-and-analytics .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.performance-and-analytics .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.performance-and-analytics .connectedCard h3 {
margin: 18px 0 11px
}
.performance-and-analytics .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.performance-and-analytics .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.performance-and-analytics .handoffBand>div {
display: flex;
align-items: center;
gap: 14px;
flex-direction: row;
}
.performance-and-analytics .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
.performance-and-analytics .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.performance-and-analytics .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.performance-and-analytics .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.performance-and-analytics .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.performance-and-analytics .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.performance-and-analytics .featureCard>.icon {
color: var(--navy)
}
.performance-and-analytics .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.performance-and-analytics .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.performance-and-analytics .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.performance-and-analytics .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.performance-and-analytics .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.performance-and-analytics .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.performance-and-analytics .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.performance-and-analytics .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.performance-and-analytics .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.performance-and-analytics .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.performance-and-analytics .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.performance-and-analytics .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.performance-and-analytics .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.performance-and-analytics .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.performance-and-analytics .useCase>.icon {
color: var(--navy)
}
.performance-and-analytics .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.performance-and-analytics .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.performance-and-analytics .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.performance-and-analytics .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.performance-and-analytics .roleCard:last-child {
border: 0;
padding-right: 0
}
.performance-and-analytics .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.performance-and-analytics .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.performance-and-analytics .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.performance-and-analytics .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.performance-and-analytics .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.performance-and-analytics .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.performance-and-analytics .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.performance-and-analytics .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.performance-and-analytics .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.performance-and-analytics .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.performance-and-analytics .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
.performance-and-analytics .faq {
max-width: 900px
}
.performance-and-analytics .faq .sectionHead {
max-width: 800px
}
.performance-and-analytics .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.performance-and-analytics .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.performance-and-analytics .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.performance-and-analytics .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.performance-and-analytics .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.performance-and-analytics .ctaBtns .btn {
min-width: 219px
}
.performance-and-analytics .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.performance-and-analytics .btn.darkOutline:hover {
background: #252D33
}
.performance-and-analytics .final a:focus-visible {
outline-color: var(--yellow)
}
.performance-and-analytics .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.performance-and-analytics .heroGrid {
gap: 28px
}
.performance-and-analytics h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.performance-and-analytics .hero .lead {
font-size: 16px
}
.performance-and-analytics .feature,
.performance-and-analytics .aiGrid {
gap: 30px
}
.performance-and-analytics .visual {
padding: 17px
}
.performance-and-analytics .toolCard {
padding: 21px 15px
}
.performance-and-analytics .toolCard strong {
font-size: 14px
}
.performance-and-analytics .handoffBand {
padding: 20px
}
.performance-and-analytics .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.performance-and-analytics section {
padding: 64px 0
}
.performance-and-analytics .hero {
padding: 34px 0 42px
}
.performance-and-analytics .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.performance-and-analytics .heroCopy {
max-width: 790px
}
.performance-and-analytics .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.performance-and-analytics .hero .lead {
max-width: 760px
}
.performance-and-analytics .heroVisual {
max-width: 460px;
justify-self: center
}
.performance-and-analytics .feature,
.performance-and-analytics .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.performance-and-analytics .feature.reverse .visual {
order: 0
}
.performance-and-analytics .featureCopy {
max-width: 790px
}
.performance-and-analytics .visual {
max-width: 640px;
margin: 0 auto
}
.performance-and-analytics .outcomes,
.performance-and-analytics .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.performance-and-analytics .connectedGrid {
gap: 13px
}
.performance-and-analytics .connectedCard {
padding: 22px
}
.performance-and-analytics .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.performance-and-analytics .aiVisual {
max-width: 600px;
margin: auto
}
.performance-and-analytics .aiMini {
max-width: 780px
}
.performance-and-analytics .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.performance-and-analytics .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.performance-and-analytics .toolCard {
min-height: 145px
}
.performance-and-analytics .roleGrid {
gap: 20px
}
.performance-and-analytics .roleCard {
padding-right: 18px
}
.performance-and-analytics .roleCard h3 {
font-size: 20px
}
.performance-and-analytics .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.performance-and-analytics .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.performance-and-analytics .workflowLead br {
display: none
}
.performance-and-analytics .final {
grid-template-columns: 1fr;
gap: 27px
}
.performance-and-analytics .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.performance-and-analytics .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
.performance-and-analytics .wrap {
width: calc(100% - 32px)
}
.performance-and-analytics section {
padding: 49px 0
}
.performance-and-analytics h2 {
font-size: 33px;
line-height: 1.15
}
.performance-and-analytics .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.performance-and-analytics .sectionHead {
margin-bottom: 27px
}
.performance-and-analytics .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.performance-and-analytics .hero {
padding: 25px 0 34px
}
.performance-and-analytics .heroGrid {
gap: 21px
}
.performance-and-analytics .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.performance-and-analytics .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.performance-and-analytics .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.performance-and-analytics .hero .actions {
gap: 8px;
margin-top: 23px
}
.performance-and-analytics .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.performance-and-analytics .hero .micro {
font-size: 11px
}
.performance-and-analytics .heroPills {
gap: 6px;
margin-top: 16px
}
.performance-and-analytics .heroPills span {
font-size: 9px
}
.performance-and-analytics .heroVisual {
max-width: 420px
}
.performance-and-analytics .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.performance-and-analytics .trust {
padding: 22px 0
}
.performance-and-analytics .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.performance-and-analytics .outcomes {
gap: 12px
}
.performance-and-analytics .outcome {
padding: 19px
}
.performance-and-analytics .outcome h3 {
font-size: 17px
}
.performance-and-analytics .outcome p {
font-size: 13px
}
.performance-and-analytics .feature {
gap: 27px
}
.performance-and-analytics .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.performance-and-analytics .fl {
gap: 11px 13px;
margin-top: 21px
}
.performance-and-analytics .fi {
font-size: 12px
}
.performance-and-analytics .textLink {
font-size: 13px
}
.performance-and-analytics .visual {
padding: 15px;
border-radius: 16px
}
.performance-and-analytics .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.performance-and-analytics .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.performance-and-analytics .uiHeading .icon2 {
width: 18px;
height: 18px
}
.performance-and-analytics .uiFoot {
font-size: 9px
}
.performance-and-analytics .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.performance-and-analytics .aiLead {
font-size: 15px;
line-height: 1.8
}
.performance-and-analytics .aiMini {
gap: 11px;
margin-top: 23px
}
.performance-and-analytics .aiMini article {
padding: 16px
}
.performance-and-analytics .aiMini h3 {
font-size: 15px
}
.performance-and-analytics .aiMini p {
font-size: 12px
}
.performance-and-analytics .aiNote {
font-size: 10px
}
.performance-and-analytics .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.performance-and-analytics .connectedCard {
padding: 23px
}
.performance-and-analytics .connectedCard h3 {
margin: 15px 0 9px
}
.performance-and-analytics .connectedCard p {
font-size: 14px
}
.performance-and-analytics .handoffBand {
padding: 20px
}
.performance-and-analytics .handoffBand>div {
align-items: flex-start;
gap: 10px
}
.performance-and-analytics .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.performance-and-analytics .handoffBand small {
font-size: 11px
}
.performance-and-analytics .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.performance-and-analytics .featureGrid {
gap: 13px
}
.performance-and-analytics .featureCard {
padding: 21px
}
.performance-and-analytics .featureCard h3 {
font-size: 17px
}
.performance-and-analytics .featureCard p {
font-size: 13px
}
.performance-and-analytics .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.performance-and-analytics .toolCard {
padding: 19px 15px;
min-height: 155px
}
.performance-and-analytics .toolCard strong {
font-size: 15px
}
.performance-and-analytics .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.performance-and-analytics .toolCard:last-child .toolArrow {
top: 31px
}
.performance-and-analytics .toolCard:last-child strong {
padding-right: 25px
}
.performance-and-analytics .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.performance-and-analytics .useCases {
gap: 13px
}
.performance-and-analytics .useCase {
padding: 21px 18px
}
.performance-and-analytics .useCase h3 {
font-size: 17px
}
.performance-and-analytics .useCase p {
font-size: 13px
}
.performance-and-analytics .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.performance-and-analytics .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.performance-and-analytics .roleCard:last-child {
padding-bottom: 0
}
.performance-and-analytics .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.performance-and-analytics .roleCard>strong {
font-size: 14px
}
.performance-and-analytics .roleCard p {
font-size: 14px
}
.performance-and-analytics .workflowBand {
padding: 28px 0
}
.performance-and-analytics .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.performance-and-analytics .workflowLead {
font-size: 18px
}
.performance-and-analytics .workflowStep strong {
font-size: 14px
}
.performance-and-analytics .workflowStep p {
font-size: 10px
}
.performance-and-analytics .faq .sectionHead {
margin-bottom: 25px
}
.performance-and-analytics details {
padding: 16px
}
.performance-and-analytics .faqList {
gap: 10px
}
.performance-and-analytics summary {
font-size: 14px;
gap: 14px
}
.performance-and-analytics .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
.performance-and-analytics .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.performance-and-analytics .final h2 {
font-size: 32px
}
.performance-and-analytics .final p {
font-size: 14px;
line-height: 1.8
}
.performance-and-analytics .final .ey {
font-size: 9px
}
.performance-and-analytics .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.performance-and-analytics .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.performance-and-analytics .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
.performance-and-analytics .outcomes,
.performance-and-analytics .featureGrid,
.performance-and-analytics .useCases {
grid-template-columns: 1fr
}
.performance-and-analytics .outcome {
padding: 23px
}
.performance-and-analytics .outcome h3 {
font-size: 18px
}
.performance-and-analytics .outcome p {
font-size: 14px
}
.performance-and-analytics .fl {
grid-template-columns: 1fr;
gap: 10px
}
.performance-and-analytics .fi {
font-size: 13px
}
.performance-and-analytics .aiMini {
grid-template-columns: 1fr
}
.performance-and-analytics .aiMini h3 {
font-size: 17px
}
.performance-and-analytics .aiMini p {
font-size: 13px
}
.performance-and-analytics .aiMini article {
padding: 19px
}
.performance-and-analytics .featureCard h3,
.performance-and-analytics .useCase h3 {
font-size: 19px
}
.performance-and-analytics .featureCard p,
.performance-and-analytics .useCase p {
font-size: 14px
}
.performance-and-analytics .toolsGrid {
grid-template-columns: 1fr
}
.performance-and-analytics .toolCard,
.performance-and-analytics .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.performance-and-analytics .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.performance-and-analytics .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.performance-and-analytics .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.performance-and-analytics .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.performance-and-analytics .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.performance-and-analytics .toolArrow,
.performance-and-analytics .toolCard:last-child .toolArrow {
top: 30px
}
.performance-and-analytics .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.performance-and-analytics .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.performance-and-analytics h2 {
font-size: 30px
}
.performance-and-analytics .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.performance-and-analytics .hero h1 {
font-size: 31px
}
.performance-and-analytics .heroPills span {
font-size: 8px
}
.performance-and-analytics .heroPills {
gap: 5px
}
.performance-and-analytics .uiHeading {
font-size: 11px
}
.performance-and-analytics .uiHeading>.pill {
font-size: 7px
}
.performance-and-analytics .visual {
padding: 12px
}
.performance-and-analytics .final {
padding: 26px 20px
}
.performance-and-analytics .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.performance-and-analytics * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.performance-and-analytics section {
padding: 24px 0
}
.performance-and-analytics .hero,
.performance-and-analytics .soft {
background: #fff
}
.performance-and-analytics .dark,
.performance-and-analytics .workflowBand,
.performance-and-analytics .final {
background: #fff;
color: #11283A
}
.performance-and-analytics .dark h2,
.performance-and-analytics .dark h3,
.performance-and-analytics .final h2 {
color: #11283A
}
.performance-and-analytics .dark p,
.performance-and-analytics .final p {
color: #52697C
}
.performance-and-analytics .btn {
display: none
}
.performance-and-analytics .visual,
.performance-and-analytics .outcome,
.performance-and-analytics .featureCard,
.performance-and-analytics details {
break-inside: avoid
}
.performance-and-analytics .heroImage {
max-width: 380px
}
.performance-and-analytics .heroVisual {
justify-self: center
}
}
.performance-and-analytics .rentalAnalyticsSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.performance-and-analytics .rentalAnalyticsSkip:focus {
top: 12px
}
.performance-and-analytics .dark .textLink {
color: #FFF1BD
}
.performance-and-analytics .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
.performance-and-analytics .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.performance-and-analytics .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
.performance-and-analytics .supportStrip .icon2 {
width: 19px;
height: 19px;
color: var(--navy)
}
.performance-and-analytics .workflowStep {
min-width: 0
}
.performance-and-analytics .featureCopy>p {
max-width: 580px
}
.performance-and-analytics .toolCard strong {
padding-right: 12px
}
.performance-and-analytics .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
.performance-and-analytics .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.performance-and-analytics .supportStrip {
gap: 7px
}
.performance-and-analytics .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
.performance-and-analytics .supportStrip .icon2 {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
.performance-and-analytics .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} .performance-and-analytics .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.performance-and-analytics .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px solid var(--line);
border-radius: 10px;
padding: 15px 10px;
font-size: 12px;
color: #526D80;
font-weight: 700;
line-height: 1.4;
min-width: 0
}
.performance-and-analytics .supportStrip .icon2 {
width: 20px;
height: 20px;
color: var(--navy)
}
.performance-and-analytics .pill.green {
background: #EAF8F3;
color: #116746
}
.performance-and-analytics .pill.yellow {
background: #FFF7D6;
color: #745604
}
.performance-and-analytics .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0
}
.performance-and-analytics .paPanelTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 17px 16px;
border-bottom: 1px solid var(--line)
}
.performance-and-analytics .paPanelTop>div {
min-width: 0
}
.performance-and-analytics .paPanelTop strong {
font-size: 17px;
line-height: 1.4;
display: block;
color: var(--navy);
margin-top: 4px;
letter-spacing: -.02em
}
.performance-and-analytics .paMetrics {
display: grid;
gap: 9px;
padding: 15px
}
.performance-and-analytics .paMetrics.four {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.performance-and-analytics .paMetrics.three {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.performance-and-analytics .paMetrics.two {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.performance-and-analytics .paMetric {
min-width: 0;
border: 1px solid var(--line);
background: #F7FBFD;
border-radius: 9px;
padding: 12px 10px
}
.performance-and-analytics .paMetric>span {
font-size: 9px;
color: #516D80;
display: block;
line-height: 1.5
}
.performance-and-analytics .paMetric>strong {
display: block;
font-size: 27px;
color: var(--navy);
letter-spacing: -.04em;
line-height: 1.2;
margin-top: 7px
}
.performance-and-analytics .paMetric small {
display: block;
font-size: 8px;
line-height: 1.5;
color: #607487;
margin-top: 7px
}
.performance-and-analytics .paMetric.amber {
background: #FFFBED;
border-color: #E7DAB4
}
.performance-and-analytics .paMetric.green {
background: #F0FAF5;
border-color: #CEE6D9
}
.performance-and-analytics .paMetrics.four .paMetric>span {
min-height: 27px
}
.performance-and-analytics .paMetrics.four .paMetric>strong {
font-size: 23px
}
.performance-and-analytics .paDashboardSplit {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 11px;
padding: 0 15px 15px
}
.performance-and-analytics .paChartCard,
.performance-and-analytics .paCondition {
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
min-width: 0;
background: #fff
}
.performance-and-analytics .paChartHeading {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.4
}
.performance-and-analytics .paChartHeading strong {
font-size: 12px;
color: var(--navy)
}
.performance-and-analytics .paChartHeading>span {
font-size: 8px;
color: #607487
}
.performance-and-analytics .paBars {
display: flex;
align-items: stretch;
gap: 11px;
height: 175px;
margin-top: 12px
}
.performance-and-analytics .paBar {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 7px
}
.performance-and-analytics .paBarPlot {
flex: 1;
display: flex;
align-items: flex-end;
border-bottom: 1px solid var(--line);
background: repeating-linear-gradient(to top, #EEF4F8 0, #EEF4F8 1px, transparent 1px, transparent 34px)
}
.performance-and-analytics .paBarPlot>span {
display: flex;
justify-content: center;
align-items: flex-start;
background: #68C3EC;
border-radius: 5px 5px 0 0;
width: 100%;
position: relative;
min-height: 18px
}
.performance-and-analytics .paBar:last-child .paBarPlot>span {
background: #007FC5
}
.performance-and-analytics .paBarPlot b {
position: absolute;
top: -19px;
font-size: 9px;
line-height: 1.4;
color: #446E84
}
.performance-and-analytics .paBar>small {
text-align: center;
font-size: 9px;
color: #607487
}
.performance-and-analytics .paCondition {
display: flex;
align-items: center;
flex-direction: column
}
.performance-and-analytics .paCondition>.uiLabel {
text-align: center;
font-size: 8px
}
.performance-and-analytics .paDonut {
width: 103px;
height: 103px;
border-radius: 50%;
background: conic-gradient(#1596D2 0 93.333333%, #FFC928 93.333333% 100%);
display: grid;
place-items: center;
flex: none;
margin: 17px 0 13px
}
.performance-and-analytics .paDonut>div {
width: 77px;
height: 77px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
.performance-and-analytics .paDonut strong {
font-size: 26px;
line-height: 1.2;
color: var(--navy)
}
.performance-and-analytics .paDonut small {
font-size: 9px;
color: #607487
}
.performance-and-analytics .paLegend {
display: grid;
gap: 10px;
width: 100%;
font-size: 8px;
color: #567182
}
.performance-and-analytics .paLegend>span {
display: flex;
align-items: center;
gap: 5px
}
.performance-and-analytics .paLegend i {
height: 6px;
width: 6px;
background: #1596D2;
border-radius: 50%;
flex: none
}
.performance-and-analytics .paLegend i.amber {
background: #D5AA13
}
.performance-and-analytics .paLegend b {
margin-left: auto;
color: var(--navy)
}
.performance-and-analytics .paPanelFoot {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 15px;
font-size: 9px;
line-height: 1.6;
color: #4A6B7F;
background: #F5FBFF;
border-top: 1px solid var(--line)
}
.performance-and-analytics .paPanelFoot .icon2 {
width: 15px;
height: 15px;
color: #007FC5
}
.performance-and-analytics .paNotice {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 10px;
line-height: 1.6;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
color: #496B7F;
padding: 13px;
margin-top: 13px
}
.performance-and-analytics .paNotice>.icon {
width: 17px;
height: 17px;
color: #007FC5;
margin-top: 1px
}
.performance-and-analytics .paTableWrap {
padding: 0 15px
}
.performance-and-analytics .paTable {
width: 100%;
border-collapse: collapse;
font-size: 11px;
line-height: 1.5;
table-layout: fixed
}
.performance-and-analytics .paTable th,
.performance-and-analytics .paTable td {
padding: 12px 5px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
text-align: right
}
.performance-and-analytics .paTable th:first-child {
text-align: left;
width: 32%
}
.performance-and-analytics .paTable thead th {
font-size: 9px;
color: #607487;
font-weight: 700;
padding-top: 3px
}
.performance-and-analytics .paTable tbody th {
font-weight: 750;
color: var(--navy);
font-size: 11px
}
.performance-and-analytics .paTable small {
display: block;
font-size: 9px;
font-weight: 500;
color: #607487;
margin-top: 2px
}
.performance-and-analytics .paTable td {
font-variant-numeric: tabular-nums;
color: #41667C
}
.performance-and-analytics .paTable b {
color: var(--navy)
}
.performance-and-analytics .paBudget {
padding: 15px
}
.performance-and-analytics .paBudget>div:first-child {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 10px;
line-height: 1.5;
color: #41667C;
margin-bottom: 9px
}
.performance-and-analytics .paBudget b {
font-size: 12px;
color: var(--navy)
}
.performance-and-analytics .paTrack {
height: 8px;
border-radius: 10px;
background: #E9F1F6;
overflow: hidden;
min-width: 0
}
.performance-and-analytics .paTrack>span {
height: 100%;
display: block;
background: #129ACD;
border-radius: 10px
}
.performance-and-analytics .paTrack.green>span {
background: #118A61
}
.performance-and-analytics .paBudget>small {
display: block;
font-size: 9px;
color: #607487;
margin-top: 8px
}
.performance-and-analytics .paLoss {
background: #FFF9E7;
border: 1px solid #EADBAB;
border-radius: 11px;
padding: 14px;
margin-top: 13px
}
.performance-and-analytics .paLoss .uiLabel {
color: #72591A;
font-size: 8px
}
.performance-and-analytics .paLoss>div {
display: flex;
align-items: center;
gap: 14px;
margin-top: 8px
}
.performance-and-analytics .paLoss strong {
font-size: 25px;
line-height: 1.2;
color: #765A12;
letter-spacing: -.03em
}
.performance-and-analytics .paLoss>div>span {
font-size: 9px;
color: #745F28;
line-height: 1.5
}
.performance-and-analytics .paLoss p {
font-size: 9px;
color: #746A4C;
line-height: 1.6;
margin-top: 9px
}
.performance-and-analytics .paTabstrip {
display: flex;
gap: 21px;
align-items: center;
font-size: 10px;
line-height: 1.5;
padding: 0 15px;
border-bottom: 1px solid var(--line);
color: #657E8E
}
.performance-and-analytics .paTabstrip>span {
padding: 10px 0
}
.performance-and-analytics .paTabstrip .active {
font-weight: 750;
color: #063B5C;
border-bottom: 2px solid #00A8F8
}
.performance-and-analytics .paPM {
margin: 0 15px 16px;
border: 1px solid #CDE4D7;
background: #F4FBF7;
border-radius: 10px;
padding: 14px
}
.performance-and-analytics .paPMValue {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 11px
}
.performance-and-analytics .paPMValue b {
font-size: 11px;
color: #196148;
display: block
}
.performance-and-analytics .paPMValue small {
font-size: 8px;
line-height: 1.5;
color: #5D7C6C;
display: block;
margin-top: 3px
}
.performance-and-analytics .paPMValue>strong {
font-size: 28px;
line-height: 1.2;
color: #176447;
letter-spacing: -.03em
}
.performance-and-analytics .paPM>small {
display: block;
font-size: 9px;
color: #5D7C6C;
margin-top: 9px
}
.performance-and-analytics .paTeam {
padding: 0 15px 12px
}
.performance-and-analytics .paTeamHead {
display: flex;
justify-content: space-between;
gap: 7px;
align-items: center;
margin: 2px 0 5px
}
.performance-and-analytics .paTeamHead strong {
font-size: 10px;
color: var(--navy)
}
.performance-and-analytics .paTeamHead span {
font-size: 8px;
color: #607487;
text-align: right
}
.performance-and-analytics .paTeamRow {
display: grid;
grid-template-columns: 26px 51px minmax(0, 1fr) 44px;
gap: 9px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #E6EEF4;
font-size: 10px;
color: #496E83
}
.performance-and-analytics .paTeamRow:last-child {
border: 0
}
.performance-and-analytics .paInitials {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #EAF6FB;
color: #1D6E97;
font-size: 8px;
font-weight: 800
}
.performance-and-analytics .paTeamRow>strong {
text-align: right;
color: var(--navy);
font-size: 10px
}
.performance-and-analytics .paFilters {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 13px 14px;
border-bottom: 1px solid var(--line);
background: #F8FCFE
}
.performance-and-analytics .paFilters>span {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 8px;
border: 1px solid #D4E4EE;
border-radius: 6px;
background: #fff;
color: #4A6F82;
font-size: 9px;
line-height: 1.5
}
.performance-and-analytics .paFilters .icon2 {
width: 12px;
height: 12px
}
.performance-and-analytics .paReportLayout {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
min-width: 0
}
.performance-and-analytics .paReportNav {
display: flex;
flex-direction: column;
gap: 6px;
padding: 17px 9px;
background: #F5FAFD;
border-right: 1px solid var(--line)
}
.performance-and-analytics .paReportNav>.uiLabel {
font-size: 8px;
margin: 0 7px 5px
}
.performance-and-analytics .paReportNav>span:not(.uiLabel) {
display: flex;
gap: 7px;
align-items: center;
font-size: 10px;
color: #547487;
border-radius: 7px;
padding: 9px 8px;
line-height: 1.4
}
.performance-and-analytics .paReportNav>.active {
background: #DFEFF8;
color: var(--navy) !important;
font-weight: 750
}
.performance-and-analytics .paReportNav .icon2 {
width: 15px;
height: 15px
}
.performance-and-analytics .paReportContent {
padding: 18px;
min-width: 0
}
.performance-and-analytics .paReportContent>.uiLabel {
font-size: 8px
}
.performance-and-analytics .paReportContent>strong {
display: block;
font-size: 31px;
line-height: 1.3;
letter-spacing: -.04em;
color: var(--navy);
margin-top: 7px
}
.performance-and-analytics .paReportContent>p {
font-size: 9px;
line-height: 1.7;
color: #607487;
margin: 5px 0 12px
}
.performance-and-analytics .paReportRow {
display: flex;
justify-content: space-between;
gap: 9px;
font-size: 10px;
padding: 8px 0;
border-top: 1px solid #E1ECF2;
color: #56768A
}
.performance-and-analytics .paReportRow>b {
color: var(--navy)
}
.performance-and-analytics .paMockAction {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
border: 1px solid #E4BC3B;
border-radius: 7px;
padding: 9px;
background: var(--yellow);
font-size: 10px;
line-height: 1.5;
font-weight: 750;
color: #193B4C;
margin-top: 13px;
text-align: center
}
.performance-and-analytics .paMockAction .icon2 {
width: 15px;
height: 15px
}
.performance-and-analytics .paDelivery {
display: flex;
align-items: center;
gap: 11px;
padding: 15px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
margin-top: 13px
}
.performance-and-analytics .paDelivery>.tileIcon {
height: 32px;
width: 32px;
flex-basis: 32px;
background: #EAF8F3;
color: #147353;
border-radius: 9px
}
.performance-and-analytics .paDelivery>.tileIcon .icon2 {
width: 18px;
height: 18px
}
.performance-and-analytics .paDelivery>div {
min-width: 0;
flex: 1
}
.performance-and-analytics .paDelivery strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.5
}
.performance-and-analytics .paDelivery>div>span {
display: block;
font-size: 8px;
color: #607487;
line-height: 1.6;
margin-top: 5px
}
.performance-and-analytics .paDelivery small {
display: block;
font-size: 8px;
color: #607487;
line-height: 1.6;
margin-top: 4px
}
.performance-and-analytics .paAiPanel {
background: #fff;
border: 1px solid #506774;
border-radius: 18px;
color: var(--ink);
overflow: hidden
}
.performance-and-analytics .paAiHead {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
padding: 19px;
border-bottom: 1px solid var(--line)
}
.performance-and-analytics .paAiBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 21px;
line-height: 1.3;
font-weight: 800;
color: var(--navy)
}
.performance-and-analytics .paAiBrand .icon2 {
width: 25px;
height: 25px;
color: #B18800
}
.performance-and-analytics .paAiBody {
padding: 19px
}
.performance-and-analytics .paPrompt {
background: #EAF7FD;
border: 1px solid #CBE8F5;
border-radius: 12px 12px 3px 12px;
padding: 15px;
font-size: 13px;
line-height: 1.65;
color: #1D506B;
margin: 0 0 16px 27px
}
.performance-and-analytics .paReply {
border: 1px solid var(--line);
border-radius: 3px 12px 12px 12px;
padding: 18px;
background: #fff
}
.performance-and-analytics .paReply>strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.35;
margin: 12px 0;
letter-spacing: -.02em
}
.performance-and-analytics .paReply>p {
font-size: 12px;
line-height: 1.75;
color: #567183
}
.performance-and-analytics .paReply>p b {
color: var(--navy)
}
.performance-and-analytics .paAiCost {
padding: 13px;
margin: 15px 0;
background: #F5FAFD;
border: 1px solid var(--line);
border-radius: 9px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
font-size: 10px;
color: #57768A
}
.performance-and-analytics .paAiCost>b {
color: var(--navy);
font-size: 14px
}
.performance-and-analytics .paAiCost>.paTrack {
grid-column: 1/-1
}
.performance-and-analytics .paSourceChips {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px
}
.performance-and-analytics .paSourceChips>span {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 7px;
background: #F7FBFD;
border: 1px solid #DDEAF1;
color: #506D80;
border-radius: 6px;
font-size: 8px
}
.performance-and-analytics .paSourceChips .icon2 {
width: 12px;
height: 12px
}
.performance-and-analytics .paAiReview {
display: flex;
align-items: center;
gap: 9px;
padding: 13px;
border: 1px solid #CDE5D7;
background: #F0F9F4;
color: #27654D;
font-size: 10px;
line-height: 1.6;
border-radius: 9px;
margin-top: 15px
}
.performance-and-analytics .paAiReview .icon2 {
width: 19px;
height: 19px
}
@media(min-width:981px) and (max-width:1150px) {
.performance-and-analytics .supportStrip>span {
font-size: 10px;
padding: 14px 8px;
gap: 6px
}
.performance-and-analytics .paMetric {
padding: 10px 8px
}
.performance-and-analytics .paMetric>strong {
font-size: 24px
}
.performance-and-analytics .paMetrics.four .paMetric>strong {
font-size: 21px
}
.performance-and-analytics .paDashboardSplit {
gap: 9px;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr)
}
.performance-and-analytics .paChartCard,
.performance-and-analytics .paCondition {
padding: 11px
}
.performance-and-analytics .paBars {
gap: 8px
}
.performance-and-analytics .paDonut {
width: 88px;
height: 88px
}
.performance-and-analytics .paDonut>div {
width: 66px;
height: 66px
}
.performance-and-analytics .paReportLayout {
grid-template-columns: 122px minmax(0, 1fr)
}
.performance-and-analytics .paReportNav>span:not(.uiLabel) {
font-size: 9px;
padding: 8px 6px;
gap: 5px
}
.performance-and-analytics .paReportContent {
padding: 15px
}
.performance-and-analytics .paDelivery {
padding: 12px;
gap: 8px
}
.performance-and-analytics .paDelivery>.pill {
font-size: 8px
}
}
@media(max-width:980px) {
.performance-and-analytics .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.performance-and-analytics .paMetric>strong {
font-size: 30px
}
.performance-and-analytics .paMetrics.four .paMetric>strong {
font-size: 27px
}
.performance-and-analytics .paBars {
height: 190px
}
.performance-and-analytics .paTable {
font-size: 12px
}
.performance-and-analytics .paReportContent {
padding: 20px
}
.performance-and-analytics .paReply>p {
font-size: 13px
}
}
@media(max-width:640px) {
.performance-and-analytics .supportStrip {
gap: 8px
}
.performance-and-analytics .supportStrip>span {
gap: 6px;
font-size: 10px;
padding: 12px 8px
}
.performance-and-analytics .supportStrip .icon2 {
width: 16px;
height: 16px
}
.performance-and-analytics .paPanelTop {
padding: 14px 12px;
gap: 8px
}
.performance-and-analytics .paPanelTop strong {
font-size: 15px
}
.performance-and-analytics .paPanelTop>.pill {
font-size: 8px;
padding: 4px 6px
}
.performance-and-analytics .paPanelTop .uiLabel {
font-size: 8px
}
.performance-and-analytics .paMetrics {
padding: 12px;
gap: 7px
}
.performance-and-analytics .paMetric {
padding: 10px 8px
}
.performance-and-analytics .paMetric>strong {
font-size: 24px
}
.performance-and-analytics .paMetrics.four .paMetric>strong {
font-size: 21px
}
.performance-and-analytics .paMetric>span {
font-size: 8px
}
.performance-and-analytics .paMetric small {
font-size: 8px
}
.performance-and-analytics .paDashboardSplit {
padding: 0 12px 12px;
gap: 9px;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr)
}
.performance-and-analytics .paChartCard,
.performance-and-analytics .paCondition {
padding: 11px 9px
}
.performance-and-analytics .paChartHeading strong {
font-size: 11px
}
.performance-and-analytics .paBars {
height: 150px;
gap: 8px
}
.performance-and-analytics .paBar>small,
.performance-and-analytics .paBarPlot b {
font-size: 8px
}
.performance-and-analytics .paDonut {
width: 85px;
height: 85px;
margin: 17px 0 12px
}
.performance-and-analytics .paDonut>div {
width: 63px;
height: 63px
}
.performance-and-analytics .paDonut strong {
font-size: 23px
}
.performance-and-analytics .paDonut small {
font-size: 8px
}
.performance-and-analytics .paLegend {
font-size: 8px;
gap: 8px
}
.performance-and-analytics .paPanelFoot {
font-size: 9px;
padding: 11px 12px
}
.performance-and-analytics .paNotice {
font-size: 10px;
padding: 12px;
gap: 7px
}
.performance-and-analytics .paTableWrap {
padding: 0 12px
}
.performance-and-analytics .paTable {
font-size: 10px
}
.performance-and-analytics .paTable thead th {
font-size: 8px
}
.performance-and-analytics .paTable tbody th {
font-size: 10px
}
.performance-and-analytics .paTable small {
font-size: 8px
}
.performance-and-analytics .paTable th,
.performance-and-analytics .paTable td {
padding: 11px 3px
}
.performance-and-analytics .paBudget {
padding: 13px 12px
}
.performance-and-analytics .paLoss {
padding: 13px
}
.performance-and-analytics .paLoss strong {
font-size: 24px
}
.performance-and-analytics .paLoss>div {
gap: 11px
}
.performance-and-analytics .paLoss>div>span {
font-size: 9px
}
.performance-and-analytics .paPM {
margin: 0 12px 13px;
padding: 12px
}
.performance-and-analytics .paPMValue>strong {
font-size: 26px
}
.performance-and-analytics .paPMValue b {
font-size: 10px
}
.performance-and-analytics .paPM>small {
font-size: 8px
}
.performance-and-analytics .paTeam {
padding: 0 12px 10px
}
.performance-and-analytics .paTeamHead strong {
font-size: 9px
}
.performance-and-analytics .paTeamHead span {
font-size: 7px
}
.performance-and-analytics .paTeamRow {
grid-template-columns: 24px 40px minmax(0, 1fr) 39px;
gap: 7px;
font-size: 9px
}
.performance-and-analytics .paInitials {
width: 24px;
height: 24px;
font-size: 7px
}
.performance-and-analytics .paTeamRow>strong {
font-size: 9px
}
.performance-and-analytics .paFilters {
padding: 10px;
gap: 6px
}
.performance-and-analytics .paFilters>span {
font-size: 8px;
padding: 5px 6px
}
.performance-and-analytics .paReportLayout {
grid-template-columns: 115px minmax(0, 1fr)
}
.performance-and-analytics .paReportNav {
padding: 14px 7px
}
.performance-and-analytics .paReportNav>span:not(.uiLabel) {
font-size: 9px;
gap: 5px;
padding: 8px 6px
}
.performance-and-analytics .paReportNav .icon2 {
width: 13px;
height: 13px
}
.performance-and-analytics .paReportContent {
padding: 15px 13px
}
.performance-and-analytics .paReportContent>strong {
font-size: 28px
}
.performance-and-analytics .paMockAction {
font-size: 9px;
padding: 8px 6px
}
.performance-and-analytics .paDelivery {
padding: 12px;
gap: 9px;
flex-wrap: wrap
}
.performance-and-analytics .paDelivery strong {
font-size: 10px
}
.performance-and-analytics .paDelivery>.pill {
font-size: 8px
}
.performance-and-analytics .paAiHead {
padding: 15px
}
.performance-and-analytics .paAiBrand {
font-size: 20px
}
.performance-and-analytics .paAiHead>.pill {
font-size: 8px
}
.performance-and-analytics .paAiBody {
padding: 14px
}
.performance-and-analytics .paPrompt {
margin-left: 17px;
font-size: 12px;
padding: 13px
}
.performance-and-analytics .paReply {
padding: 14px
}
.performance-and-analytics .paReply>strong {
font-size: 17px
}
.performance-and-analytics .paReply>p {
font-size: 12px
}
.performance-and-analytics .paAiReview {
font-size: 9px;
padding: 12px
}
}
@media(max-width:420px) {
.performance-and-analytics .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.performance-and-analytics .supportStrip>span {
font-size: 11px;
justify-content: flex-start;
padding: 12px 10px;
gap: 8px
}
.performance-and-analytics .paMetrics.four {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.performance-and-analytics .paMetrics.four .paMetric>span {
min-height: 0;
font-size: 9px
}
.performance-and-analytics .paMetrics.four .paMetric>strong {
font-size: 25px
}
.performance-and-analytics .paDashboardSplit {
grid-template-columns: minmax(0, 1fr)
}
.performance-and-analytics .paChartCard {
padding: 16px 13px
}
.performance-and-analytics .paBars {
height: 160px;
gap: 15px
}
.performance-and-analytics .paBar>small,
.performance-and-analytics .paBarPlot b {
font-size: 10px
}
.performance-and-analytics .paChartHeading strong {
font-size: 13px
}
.performance-and-analytics .paChartHeading>span {
font-size: 9px
}
.performance-and-analytics .paCondition {
display: grid;
grid-template-columns: 91px minmax(0, 1fr);
gap: 7px 13px;
padding: 13px
}
.performance-and-analytics .paCondition>.uiLabel {
grid-column: 2;
grid-row: 1;
text-align: left;
font-size: 9px;
align-self: end
}
.performance-and-analytics .paDonut {
grid-column: 1;
grid-row: 1/3;
margin: 0
}
.performance-and-analytics .paLegend {
grid-column: 2;
grid-row: 2;
font-size: 10px;
align-self: start;
gap: 10px
}
.performance-and-analytics .paMetrics.three .paMetric {
padding: 10px 6px
}
.performance-and-analytics .paMetrics.three .paMetric>strong {
font-size: 21px
}
.performance-and-analytics .paMetrics.three .paMetric>span {
font-size: 8px;
min-height: 24px
}
.performance-and-analytics .paReportLayout {
grid-template-columns: minmax(0, 1fr)
}
.performance-and-analytics .paReportNav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 12px
}
.performance-and-analytics .paReportNav>.uiLabel {
grid-column: 1/-1
}
.performance-and-analytics .paReportNav>span:not(.uiLabel) {
font-size: 10px;
padding: 7px;
gap: 7px
}
.performance-and-analytics .paReportContent {
padding: 18px
}
.performance-and-analytics .paReportContent>.uiLabel {
font-size: 9px
}
.performance-and-analytics .paReportContent>p {
font-size: 11px
}
.performance-and-analytics .paReportRow {
font-size: 12px;
padding: 10px 0
}
.performance-and-analytics .paMockAction {
font-size: 11px;
padding: 10px
}
.performance-and-analytics .paDelivery>.pill {
margin-left: 41px
}
.performance-and-analytics .paDelivery>div {
min-width: 150px
}
.performance-and-analytics .paDelivery strong {
font-size: 11px
}
.performance-and-analytics .paSourceChips>span {
font-size: 8px;
padding: 5px 6px
}
}
@media(max-width:360px) {
.performance-and-analytics .paPanelTop {
align-items: flex-start
}
.performance-and-analytics .paPanelTop strong {
font-size: 14px
}
.performance-and-analytics .paPanelTop>.pill {
font-size: 7px;
white-space: normal;
text-align: center
}
.performance-and-analytics .paMetric>strong {
font-size: 22px
}
.performance-and-analytics .paMetrics.three {
gap: 5px;
padding: 10px
}
.performance-and-analytics .paMetrics.three .paMetric>strong {
font-size: 19px
}
.performance-and-analytics .paMetrics.three .paMetric>span {
font-size: 7px
}
.performance-and-analytics .paTable {
font-size: 9px
}
.performance-and-analytics .paTable tbody th {
font-size: 9px
}
.performance-and-analytics .paTable th:first-child {
width: 33%
}
.performance-and-analytics .paPMValue small {
font-size: 7px
}
.performance-and-analytics .paPMValue b {
font-size: 9px
}
.performance-and-analytics .paTeamHead {
align-items: flex-start;
flex-direction: column
}
.performance-and-analytics .paLoss>div {
align-items: flex-start;
flex-direction: column;
gap: 6px
}
.performance-and-analytics .paLoss>div>span {
font-size: 10px
}
.performance-and-analytics .paTabstrip {
gap: 16px;
font-size: 9px
}
.performance-and-analytics .paAiHead {
padding: 14px 12px
}
.performance-and-analytics .paAiBody {
padding: 12px
}
.performance-and-analytics .paReply {
padding: 13px
}
.performance-and-analytics .paAiCost {
padding: 11px;
font-size: 9px
}
}  .rental-inventory-and-asset-management svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
.rental-inventory-and-asset-management .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.rental-inventory-and-asset-management a:focus-visible,
.rental-inventory-and-asset-management summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.rental-inventory-and-asset-management .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.rental-inventory-and-asset-management .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.rental-inventory-and-asset-management .btn .icon2 {
width: 17px;
height: 17px
}
.rental-inventory-and-asset-management .btn.black {
background: #0B0B0B;
color: #fff
}
.rental-inventory-and-asset-management .btn.black:hover {
background: #303030
}
.rental-inventory-and-asset-management .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.rental-inventory-and-asset-management .btn.yellow:hover {
background: #FFD454
}
.rental-inventory-and-asset-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.rental-inventory-and-asset-management .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.rental-inventory-and-asset-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.rental-inventory-and-asset-management .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.rental-inventory-and-asset-management .textLink .icon2 {
width: 17px;
height: 17px
}
.rental-inventory-and-asset-management .textLink:hover {
color: var(--brand2)
}
.rental-inventory-and-asset-management .soft {
background: var(--sky2)
}
.rental-inventory-and-asset-management .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.rental-inventory-and-asset-management .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.rental-inventory-and-asset-management .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.rental-inventory-and-asset-management .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.rental-inventory-and-asset-management .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.rental-inventory-and-asset-management .heroGrid>*,
.rental-inventory-and-asset-management .feature>*,
.rental-inventory-and-asset-management .aiGrid>* {
min-width: 0
}
.rental-inventory-and-asset-management .heroCopy {
min-width: 0
}
.rental-inventory-and-asset-management .hero h1 {
max-width: 630px
}
.rental-inventory-and-asset-management .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.rental-inventory-and-asset-management .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.rental-inventory-and-asset-management .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.rental-inventory-and-asset-management .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.rental-inventory-and-asset-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.rental-inventory-and-asset-management .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.rental-inventory-and-asset-management .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.rental-inventory-and-asset-management .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.rental-inventory-and-asset-management .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.rental-inventory-and-asset-management .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.rental-inventory-and-asset-management .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.rental-inventory-and-asset-management .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.rental-inventory-and-asset-management .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.rental-inventory-and-asset-management .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.rental-inventory-and-asset-management .outcome:nth-child(2):before {
background: var(--yellow)
}
.rental-inventory-and-asset-management .outcome:nth-child(3):before {
background: var(--green)
}
.rental-inventory-and-asset-management .outcome:nth-child(4):before {
background: var(--purple)
}
.rental-inventory-and-asset-management .outcome>.icon2 {
color: var(--navy)
}
.rental-inventory-and-asset-management .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.rental-inventory-and-asset-management .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.rental-inventory-and-asset-management .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.rental-inventory-and-asset-management .feature.reverse .visual {
order: -1
}
.rental-inventory-and-asset-management .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.rental-inventory-and-asset-management .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.rental-inventory-and-asset-management .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.rental-inventory-and-asset-management .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.rental-inventory-and-asset-management .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.rental-inventory-and-asset-management .tick .icon2 {
height: 13px;
width: 13px
}
.rental-inventory-and-asset-management .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.rental-inventory-and-asset-management .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.rental-inventory-and-asset-management .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.rental-inventory-and-asset-management .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.rental-inventory-and-asset-management .uiHeading .icon2 {
height: 19px;
width: 19px
}
.rental-inventory-and-asset-management .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.rental-inventory-and-asset-management .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.rental-inventory-and-asset-management .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.rental-inventory-and-asset-management .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.rental-inventory-and-asset-management .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.rental-inventory-and-asset-management .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.rental-inventory-and-asset-management .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.rental-inventory-and-asset-management .dark h2,
.rental-inventory-and-asset-management .dark h3 {
color: white
}
.rental-inventory-and-asset-management .dark .ey {
background: var(--yellow);
color: #111
}
.rental-inventory-and-asset-management .dark .textLink {
color: #fff
}
.rental-inventory-and-asset-management .dark a:focus-visible {
outline-color: var(--yellow)
}
.rental-inventory-and-asset-management .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.rental-inventory-and-asset-management .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.rental-inventory-and-asset-management .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.rental-inventory-and-asset-management .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.rental-inventory-and-asset-management .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.rental-inventory-and-asset-management .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.rental-inventory-and-asset-management .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.rental-inventory-and-asset-management .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.rental-inventory-and-asset-management .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.rental-inventory-and-asset-management .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.rental-inventory-and-asset-management .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.rental-inventory-and-asset-management .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.rental-inventory-and-asset-management .connectedCard h3 {
margin: 18px 0 11px
}
.rental-inventory-and-asset-management .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.rental-inventory-and-asset-management .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.rental-inventory-and-asset-management .handoffBand>div {
display: flex;
align-items: center;
gap: 14px;
flex-direction: row;
}
.rental-inventory-and-asset-management .handoffBand>div>.icon2 {
color: var(--navy);
width: 29px;
height: 29px
}
.rental-inventory-and-asset-management .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.rental-inventory-and-asset-management .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.rental-inventory-and-asset-management .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.rental-inventory-and-asset-management .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.rental-inventory-and-asset-management .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.rental-inventory-and-asset-management .featureCard>.icon2 {
color: var(--navy)
}
.rental-inventory-and-asset-management .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.rental-inventory-and-asset-management .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.rental-inventory-and-asset-management .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.rental-inventory-and-asset-management .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.rental-inventory-and-asset-management .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.rental-inventory-and-asset-management .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.rental-inventory-and-asset-management .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.rental-inventory-and-asset-management .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.rental-inventory-and-asset-management .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.rental-inventory-and-asset-management .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.rental-inventory-and-asset-management .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.rental-inventory-and-asset-management .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.rental-inventory-and-asset-management .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.rental-inventory-and-asset-management .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.rental-inventory-and-asset-management .useCase>.icon2 {
color: var(--navy)
}
.rental-inventory-and-asset-management .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.rental-inventory-and-asset-management .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.rental-inventory-and-asset-management .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.rental-inventory-and-asset-management .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.rental-inventory-and-asset-management .roleCard:last-child {
border: 0;
padding-right: 0
}
.rental-inventory-and-asset-management .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.rental-inventory-and-asset-management .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.rental-inventory-and-asset-management .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.rental-inventory-and-asset-management .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.rental-inventory-and-asset-management .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.rental-inventory-and-asset-management .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.rental-inventory-and-asset-management .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.rental-inventory-and-asset-management .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.rental-inventory-and-asset-management .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.rental-inventory-and-asset-management .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.rental-inventory-and-asset-management .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
.rental-inventory-and-asset-management .faq {
max-width: 900px
}
.rental-inventory-and-asset-management .faq .sectionHead {
max-width: 800px
}
.rental-inventory-and-asset-management .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.rental-inventory-and-asset-management .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.rental-inventory-and-asset-management .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.rental-inventory-and-asset-management .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.rental-inventory-and-asset-management .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.rental-inventory-and-asset-management .ctaBtns .btn {
min-width: 219px
}
.rental-inventory-and-asset-management .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.rental-inventory-and-asset-management .btn.darkOutline:hover {
background: #252D33
}
.rental-inventory-and-asset-management .final a:focus-visible {
outline-color: var(--yellow)
}
.rental-inventory-and-asset-management .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.rental-inventory-and-asset-management .heroGrid {
gap: 28px
}
.rental-inventory-and-asset-management h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.rental-inventory-and-asset-management .hero .lead {
font-size: 16px
}
.rental-inventory-and-asset-management .feature,
.rental-inventory-and-asset-management .aiGrid {
gap: 30px
}
.rental-inventory-and-asset-management .visual {
padding: 17px
}
.rental-inventory-and-asset-management .toolCard {
padding: 21px 15px
}
.rental-inventory-and-asset-management .toolCard strong {
font-size: 14px
}
.rental-inventory-and-asset-management .handoffBand {
padding: 20px
}
.rental-inventory-and-asset-management .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.rental-inventory-and-asset-management section {
padding: 64px 0
}
.rental-inventory-and-asset-management .hero {
padding: 34px 0 42px
}
.rental-inventory-and-asset-management .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.rental-inventory-and-asset-management .heroCopy {
max-width: 790px
}
.rental-inventory-and-asset-management .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.rental-inventory-and-asset-management .hero .lead {
max-width: 760px
}
.rental-inventory-and-asset-management .heroVisual {
max-width: 460px;
justify-self: center
}
.rental-inventory-and-asset-management .feature,
.rental-inventory-and-asset-management .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.rental-inventory-and-asset-management .feature.reverse .visual {
order: 0
}
.rental-inventory-and-asset-management .featureCopy {
max-width: 790px
}
.rental-inventory-and-asset-management .visual {
max-width: 640px;
margin: 0 auto
}
.rental-inventory-and-asset-management .outcomes,
.rental-inventory-and-asset-management .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.rental-inventory-and-asset-management .connectedGrid {
gap: 13px
}
.rental-inventory-and-asset-management .connectedCard {
padding: 22px
}
.rental-inventory-and-asset-management .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.rental-inventory-and-asset-management .aiVisual {
max-width: 600px;
margin: auto
}
.rental-inventory-and-asset-management .aiMini {
max-width: 780px
}
.rental-inventory-and-asset-management .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.rental-inventory-and-asset-management .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.rental-inventory-and-asset-management .toolCard {
min-height: 145px
}
.rental-inventory-and-asset-management .roleGrid {
gap: 20px
}
.rental-inventory-and-asset-management .roleCard {
padding-right: 18px
}
.rental-inventory-and-asset-management .roleCard h3 {
font-size: 20px
}
.rental-inventory-and-asset-management .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.rental-inventory-and-asset-management .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.rental-inventory-and-asset-management .workflowLead br {
display: none
}
.rental-inventory-and-asset-management .final {
grid-template-columns: 1fr;
gap: 27px
}
.rental-inventory-and-asset-management .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.rental-inventory-and-asset-management .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
.rental-inventory-and-asset-management .wrap {
width: calc(100% - 32px)
}
.rental-inventory-and-asset-management section {
padding: 49px 0
}
.rental-inventory-and-asset-management h2 {
font-size: 33px;
line-height: 1.15
}
.rental-inventory-and-asset-management .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.rental-inventory-and-asset-management .sectionHead {
margin-bottom: 27px
}
.rental-inventory-and-asset-management .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.rental-inventory-and-asset-management .hero {
padding: 25px 0 34px
}
.rental-inventory-and-asset-management .heroGrid {
gap: 21px
}
.rental-inventory-and-asset-management .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.rental-inventory-and-asset-management .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.rental-inventory-and-asset-management .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.rental-inventory-and-asset-management .hero .actions {
gap: 8px;
margin-top: 23px
}
.rental-inventory-and-asset-management .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.rental-inventory-and-asset-management .hero .micro {
font-size: 11px
}
.rental-inventory-and-asset-management .heroPills {
gap: 6px;
margin-top: 16px
}
.rental-inventory-and-asset-management .heroPills span {
font-size: 9px
}
.rental-inventory-and-asset-management .heroVisual {
max-width: 420px
}
.rental-inventory-and-asset-management .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.rental-inventory-and-asset-management .trust {
padding: 22px 0
}
.rental-inventory-and-asset-management .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.rental-inventory-and-asset-management .outcomes {
gap: 12px
}
.rental-inventory-and-asset-management .outcome {
padding: 19px
}
.rental-inventory-and-asset-management .outcome h3 {
font-size: 17px
}
.rental-inventory-and-asset-management .outcome p {
font-size: 13px
}
.rental-inventory-and-asset-management .feature {
gap: 27px
}
.rental-inventory-and-asset-management .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.rental-inventory-and-asset-management .fl {
gap: 11px 13px;
margin-top: 21px
}
.rental-inventory-and-asset-management .fi {
font-size: 12px
}
.rental-inventory-and-asset-management .textLink {
font-size: 13px
}
.rental-inventory-and-asset-management .visual {
padding: 15px;
border-radius: 16px
}
.rental-inventory-and-asset-management .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.rental-inventory-and-asset-management .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.rental-inventory-and-asset-management .uiHeading .icon2 {
width: 18px;
height: 18px
}
.rental-inventory-and-asset-management .uiFoot {
font-size: 9px
}
.rental-inventory-and-asset-management .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.rental-inventory-and-asset-management .aiLead {
font-size: 15px;
line-height: 1.8
}
.rental-inventory-and-asset-management .aiMini {
gap: 11px;
margin-top: 23px
}
.rental-inventory-and-asset-management .aiMini article {
padding: 16px
}
.rental-inventory-and-asset-management .aiMini h3 {
font-size: 15px
}
.rental-inventory-and-asset-management .aiMini p {
font-size: 12px
}
.rental-inventory-and-asset-management .aiNote {
font-size: 10px
}
.rental-inventory-and-asset-management .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.rental-inventory-and-asset-management .connectedCard {
padding: 23px
}
.rental-inventory-and-asset-management .connectedCard h3 {
margin: 15px 0 9px
}
.rental-inventory-and-asset-management .connectedCard p {
font-size: 14px
}
.rental-inventory-and-asset-management .handoffBand {
padding: 20px
}
.rental-inventory-and-asset-management .handoffBand>div {
align-items: flex-start;
gap: 10px
}
.rental-inventory-and-asset-management .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.rental-inventory-and-asset-management .handoffBand small {
font-size: 11px
}
.rental-inventory-and-asset-management .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.rental-inventory-and-asset-management .featureGrid {
gap: 13px
}
.rental-inventory-and-asset-management .featureCard {
padding: 21px
}
.rental-inventory-and-asset-management .featureCard h3 {
font-size: 17px
}
.rental-inventory-and-asset-management .featureCard p {
font-size: 13px
}
.rental-inventory-and-asset-management .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.rental-inventory-and-asset-management .toolCard {
padding: 19px 15px;
min-height: 155px
}
.rental-inventory-and-asset-management .toolCard strong {
font-size: 15px
}
.rental-inventory-and-asset-management .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.rental-inventory-and-asset-management .toolCard:last-child .toolArrow {
top: 31px
}
.rental-inventory-and-asset-management .toolCard:last-child strong {
padding-right: 25px
}
.rental-inventory-and-asset-management .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.rental-inventory-and-asset-management .useCases {
gap: 13px
}
.rental-inventory-and-asset-management .useCase {
padding: 21px 18px
}
.rental-inventory-and-asset-management .useCase h3 {
font-size: 17px
}
.rental-inventory-and-asset-management .useCase p {
font-size: 13px
}
.rental-inventory-and-asset-management .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.rental-inventory-and-asset-management .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.rental-inventory-and-asset-management .roleCard:last-child {
padding-bottom: 0
}
.rental-inventory-and-asset-management .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.rental-inventory-and-asset-management .roleCard>strong {
font-size: 14px
}
.rental-inventory-and-asset-management .roleCard p {
font-size: 14px
}
.rental-inventory-and-asset-management .workflowBand {
padding: 28px 0
}
.rental-inventory-and-asset-management .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.rental-inventory-and-asset-management .workflowLead {
font-size: 18px
}
.rental-inventory-and-asset-management .workflowStep strong {
font-size: 14px
}
.rental-inventory-and-asset-management .workflowStep p {
font-size: 10px
}
.rental-inventory-and-asset-management .faq .sectionHead {
margin-bottom: 25px
}
.rental-inventory-and-asset-management details {
padding: 16px
}
.rental-inventory-and-asset-management .faqList {
gap: 10px
}
.rental-inventory-and-asset-management summary {
font-size: 14px;
gap: 14px
}
.rental-inventory-and-asset-management .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
.rental-inventory-and-asset-management .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.rental-inventory-and-asset-management .final h2 {
font-size: 32px
}
.rental-inventory-and-asset-management .final p {
font-size: 14px;
line-height: 1.8
}
.rental-inventory-and-asset-management .final .ey {
font-size: 9px
}
.rental-inventory-and-asset-management .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.rental-inventory-and-asset-management .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.rental-inventory-and-asset-management .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
.rental-inventory-and-asset-management .outcomes,
.rental-inventory-and-asset-management .featureGrid,
.rental-inventory-and-asset-management .useCases {
grid-template-columns: 1fr
}
.rental-inventory-and-asset-management .outcome {
padding: 23px
}
.rental-inventory-and-asset-management .outcome h3 {
font-size: 18px
}
.rental-inventory-and-asset-management .outcome p {
font-size: 14px
}
.rental-inventory-and-asset-management .fl {
grid-template-columns: 1fr;
gap: 10px
}
.rental-inventory-and-asset-management .fi {
font-size: 13px
}
.rental-inventory-and-asset-management .aiMini {
grid-template-columns: 1fr
}
.rental-inventory-and-asset-management .aiMini h3 {
font-size: 17px
}
.rental-inventory-and-asset-management .aiMini p {
font-size: 13px
}
.rental-inventory-and-asset-management .aiMini article {
padding: 19px
}
.rental-inventory-and-asset-management .featureCard h3,
.rental-inventory-and-asset-management .useCase h3 {
font-size: 19px
}
.rental-inventory-and-asset-management .featureCard p,
.rental-inventory-and-asset-management .useCase p {
font-size: 14px
}
.rental-inventory-and-asset-management .toolsGrid {
grid-template-columns: 1fr
}
.rental-inventory-and-asset-management .toolCard,
.rental-inventory-and-asset-management .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.rental-inventory-and-asset-management .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.rental-inventory-and-asset-management .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.rental-inventory-and-asset-management .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.rental-inventory-and-asset-management .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.rental-inventory-and-asset-management .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.rental-inventory-and-asset-management .toolArrow,
.rental-inventory-and-asset-management .toolCard:last-child .toolArrow {
top: 30px
}
.rental-inventory-and-asset-management .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.rental-inventory-and-asset-management .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.rental-inventory-and-asset-management h2 {
font-size: 30px
}
.rental-inventory-and-asset-management .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.rental-inventory-and-asset-management .hero h1 {
font-size: 31px
}
.rental-inventory-and-asset-management .heroPills span {
font-size: 8px
}
.rental-inventory-and-asset-management .heroPills {
gap: 5px
}
.rental-inventory-and-asset-management .uiHeading {
font-size: 11px
}
.rental-inventory-and-asset-management .uiHeading>.pill {
font-size: 7px
}
.rental-inventory-and-asset-management .visual {
padding: 12px
}
.rental-inventory-and-asset-management .final {
padding: 26px 20px
}
.rental-inventory-and-asset-management .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.rental-inventory-and-asset-management * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.rental-inventory-and-asset-management section {
padding: 24px 0
}
.rental-inventory-and-asset-management .hero,
.rental-inventory-and-asset-management .soft {
background: #fff
}
.rental-inventory-and-asset-management .dark,
.rental-inventory-and-asset-management .workflowBand,
.rental-inventory-and-asset-management .final {
background: #fff;
color: #11283A
}
.rental-inventory-and-asset-management .dark h2,
.rental-inventory-and-asset-management .dark h3,
.rental-inventory-and-asset-management .final h2 {
color: #11283A
}
.rental-inventory-and-asset-management .dark p,
.rental-inventory-and-asset-management .final p {
color: #52697C
}
.rental-inventory-and-asset-management .btn {
display: none
}
.rental-inventory-and-asset-management .visual,
.rental-inventory-and-asset-management .outcome,
.rental-inventory-and-asset-management .featureCard,
.rental-inventory-and-asset-management details {
break-inside: avoid
}
.rental-inventory-and-asset-management .heroImage {
max-width: 380px
}
.rental-inventory-and-asset-management .heroVisual {
justify-self: center
}
}
.rental-inventory-and-asset-management .rentalInventorySkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.rental-inventory-and-asset-management .rentalInventorySkip:focus {
top: 12px
}
.rental-inventory-and-asset-management .dark .textLink {
color: #FFF1BD
}
.rental-inventory-and-asset-management .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
.rental-inventory-and-asset-management .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.rental-inventory-and-asset-management .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
.rental-inventory-and-asset-management .supportStrip .icon2 {
width: 19px;
height: 19px;
color: var(--navy)
}
.rental-inventory-and-asset-management .workflowStep {
min-width: 0
}
.rental-inventory-and-asset-management .featureCopy>p {
max-width: 580px
}
.rental-inventory-and-asset-management .toolCard strong {
padding-right: 12px
}
.rental-inventory-and-asset-management .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
.rental-inventory-and-asset-management .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.rental-inventory-and-asset-management .supportStrip {
gap: 7px
}
.rental-inventory-and-asset-management .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
.rental-inventory-and-asset-management .supportStrip .icon2 {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
.rental-inventory-and-asset-management .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} .rental-inventory-and-asset-management .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0
}
.rental-inventory-and-asset-management .supportStrip>span {
min-width: 0
}
.rental-inventory-and-asset-management .riTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 17px 16px;
border-bottom: 1px solid var(--line)
}
.rental-inventory-and-asset-management .riTop>div {
min-width: 0
}
.rental-inventory-and-asset-management .riTop strong {
display: block;
font-size: 17px;
line-height: 1.4;
letter-spacing: -.025em;
color: var(--navy);
margin-top: 4px
}
.rental-inventory-and-asset-management .riMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 15px
}
.rental-inventory-and-asset-management .riMetrics>div {
border: 1px solid #CFE7DF;
background: #F0FAF5;
border-radius: 9px;
padding: 12px
}
.rental-inventory-and-asset-management .riMetrics>div:nth-child(2) {
background: #EDF8FE;
border-color: #CCE6F3
}
.rental-inventory-and-asset-management .riMetrics>div:nth-child(3) {
background: #FFFAE9;
border-color: #EADFAF
}
.rental-inventory-and-asset-management .riMetrics span {
display: block;
color: #506A7B;
font-size: 10px;
line-height: 1.4
}
.rental-inventory-and-asset-management .riMetrics strong {
display: block;
font-size: 30px;
line-height: 1.2;
margin-top: 5px;
letter-spacing: -.04em;
color: var(--navy)
}
.rental-inventory-and-asset-management .riTabs {
display: flex;
align-items: center;
gap: 22px;
border-bottom: 1px solid var(--line);
padding: 0 16px;
font-size: 10px;
color: var(--muted)
}
.rental-inventory-and-asset-management .riTabs>span {
padding: 8px 0 10px
}
.rental-inventory-and-asset-management .riTabs .active {
border-bottom: 2px solid var(--brand);
color: var(--navy);
font-weight: 750
}
.rental-inventory-and-asset-management .riRegister {
padding: 0 14px
}
.rental-inventory-and-asset-management .riAssetRow {
display: grid;
grid-template-columns: 31px minmax(0, 1fr) 82px auto;
gap: 9px;
align-items: center;
padding: 16px 0;
min-width: 0
}
.rental-inventory-and-asset-management .riAssetRow+.riAssetRow {
border-top: 1px solid #E7EEF3
}
.rental-inventory-and-asset-management .riAssetIcon {
width: 31px;
height: 34px;
border-radius: 8px;
display: grid;
place-items: center;
background: #F0F7FB;
color: #3E7998
}
.rental-inventory-and-asset-management .riAssetIcon .icon2 {
width: 20px;
height: 20px
}
.rental-inventory-and-asset-management .riAssetRow>div {
min-width: 0
}
.rental-inventory-and-asset-management .riAssetRow strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: var(--navy)
}
.rental-inventory-and-asset-management .riAssetRow small {
display: block;
font-size: 8px;
color: var(--muted);
line-height: 1.5;
margin-top: 3px
}
.rental-inventory-and-asset-management .riLocation {
font-size: 9px;
color: #5A7485;
line-height: 1.5
}
.rental-inventory-and-asset-management .riAssetRow>.pill {
font-size: 8px;
padding: 4px 7px
}
.rental-inventory-and-asset-management .riPanelFoot {
display: flex;
align-items: flex-start;
gap: 7px;
padding: 13px 16px;
border-top: 1px solid var(--line);
background: #F5FBFF;
font-size: 10px;
color: #516F83;
line-height: 1.6
}
.rental-inventory-and-asset-management .riPanelFoot .icon2 {
width: 16px;
height: 16px;
color: #307D9C;
margin-top: 1px
}
.rental-inventory-and-asset-management .riRecordChips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
margin-top: 16px
}
.rental-inventory-and-asset-management .riRecordChips>span {
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
color: #436D85;
padding: 7px 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
line-height: 1.5
}
.rental-inventory-and-asset-management .riRecordChips .icon2 {
width: 16px;
height: 16px
}
.rental-inventory-and-asset-management .riScanScene {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 18px;
align-items: center
}
.rental-inventory-and-asset-management .riDevice {
min-width: 0;
position: relative;
width: 100%;
border: 6px solid #0D2433;
background: #fff;
border-radius: 28px;
overflow: hidden;
padding-bottom: 15px
}
.rental-inventory-and-asset-management .riDeviceStatus {
height: 31px;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 8px;
font-weight: 750;
line-height: 1;
color: #183B4F
}
.rental-inventory-and-asset-management .riDeviceStatus i {
display: block;
width: 41px;
height: 11px;
background: #0D2433;
border-radius: 15px
}
.rental-inventory-and-asset-management .riDeviceHead {
padding: 12px 11px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #EDF8FE
}
.rental-inventory-and-asset-management .riDeviceHead .uiLabel {
font-size: 7px
}
.rental-inventory-and-asset-management .riDeviceHead strong {
font-size: 13px;
color: var(--navy);
display: block;
line-height: 1.4;
margin-top: 5px
}
.rental-inventory-and-asset-management .riDeviceHead small {
font-size: 8px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 4px
}
.rental-inventory-and-asset-management .riDeviceBody {
padding: 12px 11px 4px
}
.rental-inventory-and-asset-management .riScanTarget {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-direction: column;
min-height: 97px;
border: 1px solid #C7E3EF;
border-radius: 9px;
background: linear-gradient(135deg, #F2FAFF, #EAF6FC);
padding: 13px
}
.rental-inventory-and-asset-management .riScanTarget>.icon2 {
width: 48px;
height: 48px;
color: #195F86;
max-width: 100%
}
.rental-inventory-and-asset-management .riScanTarget>span {
font-size: 8px;
line-height: 1.4;
color: #48758B
}
.rental-inventory-and-asset-management .riDeviceLine {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
border-bottom: 1px solid #E4EDF3;
font-size: 8px;
color: #5F7B8C;
padding: 10px 0;
line-height: 1.5
}
.rental-inventory-and-asset-management .riDeviceLine b {
font-size: 9px;
color: var(--navy)
}
.rental-inventory-and-asset-management .riCondition {
display: flex;
align-items: center;
gap: 6px;
background: #FFF8DE;
border: 1px solid #EBDEAB;
border-radius: 7px;
padding: 10px 7px;
font-size: 9px;
font-weight: 700;
line-height: 1.5;
color: #7F6722;
margin-top: 12px
}
.rental-inventory-and-asset-management .riCondition .icon2 {
height: 15px;
width: 15px
}
.rental-inventory-and-asset-management .riMockAction {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 7px;
border: 1px solid #EABF35;
border-radius: 7px;
background: var(--yellow);
font-size: 9px;
line-height: 1.5;
font-weight: 750;
color: #12364A;
margin-top: 12px
}
.rental-inventory-and-asset-management .riMockAction .icon2 {
height: 14px;
width: 14px
}
.rental-inventory-and-asset-management .riDeviceFine {
font-size: 7px;
line-height: 1.6;
color: var(--muted);
text-align: center;
margin-top: 9px
}
.rental-inventory-and-asset-management .riDeviceHome {
position: absolute;
bottom: 6px;
left: calc(50% - 23px);
width: 46px;
height: 3px;
border-radius: 12px;
background: #274658
}
.rental-inventory-and-asset-management .riEvents {
border: 1px solid var(--line);
background: #fff;
border-radius: 12px;
padding: 17px 15px
}
.rental-inventory-and-asset-management .riEventsHead {
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
margin-bottom: 6px
}
.rental-inventory-and-asset-management .riEventsHead strong {
display: block;
color: var(--navy);
font-size: 16px;
line-height: 1.4;
letter-spacing: -.02em;
margin-top: 6px
}
.rental-inventory-and-asset-management .riEventsHead .uiLabel {
font-size: 8px
}
.rental-inventory-and-asset-management .riEvent {
position: relative;
display: grid;
grid-template-columns: 11px minmax(0, 1fr);
gap: 9px;
align-items: start;
padding: 14px 0
}
.rental-inventory-and-asset-management .riEvent:not(:nth-last-child(2)):after {
content: "";
width: 1px;
background: #D4E5EE;
position: absolute;
top: 24px;
bottom: -8px;
left: 5px
}
.rental-inventory-and-asset-management .riEventDot {
display: block;
position: relative;
z-index: 1;
height: 11px;
width: 11px;
border-radius: 50%;
border: 2px solid #B9DEE9;
background: #fff;
margin-top: 3px
}
.rental-inventory-and-asset-management .riEventDot.done {
background: var(--green);
border-color: #D8F0E5
}
.rental-inventory-and-asset-management .riEventDot.pending {
background: var(--yellow);
border-color: #F4E8B4
}
.rental-inventory-and-asset-management .riEvent strong {
font-size: 11px;
line-height: 1.5;
color: var(--navy);
display: block
}
.rental-inventory-and-asset-management .riEvent small {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
display: block;
margin-top: 4px
}
.rental-inventory-and-asset-management .riReviewBox {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 10px;
line-height: 1.7;
color: #7F6525;
background: #FFFAE7;
border: 1px solid #EADFAC;
padding: 12px;
border-radius: 8px;
margin-top: 5px
}
.rental-inventory-and-asset-management .riReviewBox .icon2 {
width: 16px;
height: 16px;
margin-top: 1px
}
.rental-inventory-and-asset-management .riDepotFlow {
display: grid;
grid-template-columns: minmax(0, 1fr) 79px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 18px 15px
}
.rental-inventory-and-asset-management .riDepot {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 10px;
background: #F5FBFE;
padding: 17px 10px;
text-align: center;
min-width: 0
}
.rental-inventory-and-asset-management .riDepot>.icon2 {
width: 30px;
height: 30px;
color: #3F7C9D;
margin-bottom: 8px
}
.rental-inventory-and-asset-management .riDepot small {
font-size: 8px;
color: var(--muted);
line-height: 1.5
}
.rental-inventory-and-asset-management .riDepot strong {
font-size: 13px;
color: var(--navy);
line-height: 1.5;
margin: 4px 0
}
.rental-inventory-and-asset-management .riDepot>span {
font-size: 9px;
color: #54768A;
line-height: 1.5
}
.rental-inventory-and-asset-management .riInTransit {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
gap: 5px;
color: #2C759C
}
.rental-inventory-and-asset-management .riInTransit>.icon2 {
width: 22px;
height: 22px
}
.rental-inventory-and-asset-management .riInTransit>.icon2:last-child {
width: 19px;
height: 19px;
color: #8CA8B8;
margin-top: 3px
}
.rental-inventory-and-asset-management .riInTransit b {
font-size: 12px;
color: var(--navy);
line-height: 1.4
}
.rental-inventory-and-asset-management .riInTransit span {
font-size: 8px;
line-height: 1.4;
color: var(--muted)
}
.rental-inventory-and-asset-management .riTransferStages {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 0 15px 18px
}
.rental-inventory-and-asset-management .riTransferStages>span {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
font-size: 9px;
color: #5E7F91;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
padding: 9px 5px;
line-height: 1.5
}
.rental-inventory-and-asset-management .riTransferStages .icon2 {
width: 17px;
height: 17px
}
.rental-inventory-and-asset-management .riTransferStages .current {
color: #836320;
border-color: #E9D78F;
background: #FFF8DE;
font-weight: 750
}
.rental-inventory-and-asset-management .riQuantityTable {
padding: 0 15px 16px
}
.rental-inventory-and-asset-management table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
border: 1px solid var(--line);
font-size: 10px;
line-height: 1.5;
color: #45677D;
margin: 0;
background: #fff
}
.rental-inventory-and-asset-management th,
.rental-inventory-and-asset-management td {
border: 0;
border-bottom: 1px solid var(--line);
text-align: right;
padding: 10px 8px
}
.rental-inventory-and-asset-management thead th {
font-size: 8px;
background: #F4F9FC;
color: #627C8C;
font-weight: 650
}
.rental-inventory-and-asset-management th:first-child {
width: 43%;
text-align: left
}
.rental-inventory-and-asset-management tbody th {
font-size: 10px;
font-weight: 650;
color: var(--navy)
}
.rental-inventory-and-asset-management tbody .current {
background: #FFFCF0
}
.rental-inventory-and-asset-management .riLifecycleMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 15px
}
.rental-inventory-and-asset-management .riLifecycleMetrics>div {
border: 1px solid var(--line);
border-radius: 9px;
background: #F6FBFE;
padding: 11px 9px
}
.rental-inventory-and-asset-management .riLifecycleMetrics>div:last-child {
background: #FFF9E4;
border-color: #E8DCAF
}
.rental-inventory-and-asset-management .riLifecycleMetrics span {
display: block;
min-height: 28px;
font-size: 9px;
line-height: 1.5;
color: #668091
}
.rental-inventory-and-asset-management .riLifecycleMetrics strong {
display: block;
font-size: 23px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -.04em;
margin-top: 5px
}
.rental-inventory-and-asset-management .riLifeTimeline {
padding: 0 16px
}
.rental-inventory-and-asset-management .riLifeTimeline>div {
display: grid;
grid-template-columns: 31px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
border-bottom: 1px solid #E7EEF2;
padding: 15px 0
}
.rental-inventory-and-asset-management .riLifeIcon {
width: 31px;
height: 33px;
display: grid;
place-items: center;
background: #EEF6FA;
color: #3E7B9C;
border-radius: 8px
}
.rental-inventory-and-asset-management .riLifeIcon .icon2 {
width: 19px;
height: 19px
}
.rental-inventory-and-asset-management .riLifeTimeline strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy)
}
.rental-inventory-and-asset-management .riLifeTimeline small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px
}
.rental-inventory-and-asset-management .riLifeTag {
padding: 5px 6px;
font-size: 8px;
border-radius: 6px;
color: #28789E;
background: #EAF6FC;
line-height: 1.4;
white-space: nowrap
}
.rental-inventory-and-asset-management .riLifeTag.amber {
background: var(--yellowsoft);
color: #826526
}
.rental-inventory-and-asset-management .riFileGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 17px 16px
}
.rental-inventory-and-asset-management .riFileGrid>span {
display: flex;
align-items: center;
gap: 7px;
font-size: 9px;
color: #526F82;
background: #F5FAFD;
border: 1px solid var(--line);
border-radius: 7px;
padding: 9px;
line-height: 1.5
}
.rental-inventory-and-asset-management .riFileGrid .icon2 {
width: 16px;
height: 16px;
color: #3A7C9D
}
.rental-inventory-and-asset-management .riAiPanel {
background: #fff;
border: 1px solid #3F5969;
border-radius: 17px;
color: var(--ink);
overflow: hidden
}
.rental-inventory-and-asset-management .riAiHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px;
border-bottom: 1px solid var(--line)
}
.rental-inventory-and-asset-management .riAiHead>span:first-child {
display: flex;
align-items: center;
gap: 9px;
font-size: 18px;
color: var(--navy);
font-weight: 800;
letter-spacing: -.02em
}
.rental-inventory-and-asset-management .riAiHead .icon2 {
width: 25px;
height: 25px;
color: #E2B522
}
.rental-inventory-and-asset-management .riAiBody {
padding: 19px 18px
}
.rental-inventory-and-asset-management .riPrompt {
margin-left: 36px;
padding: 15px 16px;
border-radius: 12px 3px 12px 12px;
background: #EAF7FE;
border: 1px solid #CAE7F4;
color: #295B75;
font-size: 13px;
line-height: 1.7
}
.rental-inventory-and-asset-management .riReply {
padding: 18px;
background: #F8FBFD;
border: 1px solid var(--line);
border-radius: 3px 12px 12px 12px;
margin-top: 16px
}
.rental-inventory-and-asset-management .riReply>strong {
display: block;
font-size: 19px;
color: var(--navy);
line-height: 1.4;
letter-spacing: -.025em;
margin-top: 9px
}
.rental-inventory-and-asset-management .riReply>p {
font-size: 12px;
color: #4E6D81;
line-height: 1.8;
margin-top: 12px
}
.rental-inventory-and-asset-management .riAiFacts {
display: grid;
gap: 8px;
margin-top: 16px
}
.rental-inventory-and-asset-management .riAiFacts>span {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
line-height: 1.5;
color: #4E7085;
border: 1px solid #DDEAF1;
border-radius: 8px;
background: #fff;
padding: 10px
}
.rental-inventory-and-asset-management .riAiFacts .icon2 {
width: 17px;
height: 17px;
color: #367B9E
}
.rental-inventory-and-asset-management .riAiFacts b {
margin-left: auto;
color: var(--navy);
font-size: 10px
}
.rental-inventory-and-asset-management .riSourceChips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 15px
}
.rental-inventory-and-asset-management .riSourceChips>span {
display: flex;
align-items: center;
gap: 5px;
font-size: 8px;
padding: 5px 7px;
color: #54768B;
border: 1px solid #DAE7EF;
border-radius: 5px;
background: #fff;
line-height: 1.5
}
.rental-inventory-and-asset-management .riSourceChips .icon2 {
width: 13px;
height: 13px
}
.rental-inventory-and-asset-management .riDraftAction {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
font-size: 11px;
color: #785D1C;
border: 1px solid #EBD99B;
background: #FFFAE5;
border-radius: 9px;
margin-top: 14px;
line-height: 1.6;
font-weight: 700
}
.rental-inventory-and-asset-management .riDraftAction .icon2 {
width: 18px;
height: 18px
}
.rental-inventory-and-asset-management .riAiReview {
display: flex;
align-items: center;
gap: 9px;
padding: 14px 18px;
font-size: 10px;
color: #1E7056;
background: #EDF8F2;
border-top: 1px solid #CDE9D9;
line-height: 1.7
}
.rental-inventory-and-asset-management .riAiReview .icon2 {
width: 20px;
height: 20px
}
@media(min-width:981px) and (max-width:1150px) {
.rental-inventory-and-asset-management .riTop {
padding: 14px
}
.rental-inventory-and-asset-management .riTop strong {
font-size: 15px
}
.rental-inventory-and-asset-management .riAssetRow {
grid-template-columns: 27px minmax(0, 1fr) 65px auto;
gap: 7px
}
.rental-inventory-and-asset-management .riAssetRow strong {
font-size: 10px
}
.rental-inventory-and-asset-management .riAssetIcon {
width: 27px;
height: 30px
}
.rental-inventory-and-asset-management .riAssetRow small {
font-size: 7px
}
.rental-inventory-and-asset-management .riLocation {
font-size: 8px
}
.rental-inventory-and-asset-management .riAssetRow>.pill {
font-size: 7px;
padding: 4px 5px
}
.rental-inventory-and-asset-management .riRegister {
padding: 0 12px
}
.rental-inventory-and-asset-management .riScanScene {
grid-template-columns: 168px minmax(0, 1fr);
gap: 12px
}
.rental-inventory-and-asset-management .riEvents {
padding: 14px 12px
}
.rental-inventory-and-asset-management .riEventsHead strong {
font-size: 14px
}
.rental-inventory-and-asset-management .riEventsHead .uiLabel {
font-size: 7px
}
.rental-inventory-and-asset-management .riEvent strong {
font-size: 10px
}
.rental-inventory-and-asset-management .riEvent small {
font-size: 8px
}
.rental-inventory-and-asset-management .riReviewBox {
font-size: 9px;
padding: 10px
}
.rental-inventory-and-asset-management .riDeviceHead strong {
font-size: 11px
}
.rental-inventory-and-asset-management .riDeviceLine {
font-size: 7px
}
.rental-inventory-and-asset-management .riDeviceLine b {
font-size: 8px
}
.rental-inventory-and-asset-management .riCondition {
font-size: 8px;
padding: 9px 6px
}
.rental-inventory-and-asset-management .riMockAction {
font-size: 8px
}
.rental-inventory-and-asset-management .riDepotFlow {
gap: 7px;
grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
padding: 15px 12px
}
.rental-inventory-and-asset-management .riDepot {
padding: 14px 7px
}
.rental-inventory-and-asset-management .riDepot strong {
font-size: 11px
}
.rental-inventory-and-asset-management .riDepot>span {
font-size: 8px
}
.rental-inventory-and-asset-management .riLifecycleMetrics {
padding: 12px;
gap: 7px
}
.rental-inventory-and-asset-management .riLifecycleMetrics strong {
font-size: 21px
}
.rental-inventory-and-asset-management .riLifecycleMetrics span {
font-size: 8px
}
.rental-inventory-and-asset-management .riLifeTimeline strong {
font-size: 11px
}
.rental-inventory-and-asset-management .riLifeTag {
font-size: 7px
}
.rental-inventory-and-asset-management .riLifeTimeline>div {
gap: 8px
}
.rental-inventory-and-asset-management .riLifeTimeline small {
font-size: 8px
}
}
@media(max-width:980px) {
.rental-inventory-and-asset-management .riScanScene {
grid-template-columns: 208px minmax(0, 1fr);
gap: 22px
}
.rental-inventory-and-asset-management .riDeviceHead strong {
font-size: 14px
}
.rental-inventory-and-asset-management .riDeviceLine {
font-size: 9px
}
.rental-inventory-and-asset-management .riDeviceLine b {
font-size: 10px
}
.rental-inventory-and-asset-management .riCondition,
.rental-inventory-and-asset-management .riMockAction {
font-size: 10px
}
.rental-inventory-and-asset-management .riEventsHead strong {
font-size: 18px
}
.rental-inventory-and-asset-management .riEvent strong {
font-size: 13px
}
.rental-inventory-and-asset-management .riEvent small {
font-size: 10px
}
.rental-inventory-and-asset-management .riReviewBox {
font-size: 11px
}
.rental-inventory-and-asset-management .riAssetRow strong {
font-size: 12px
}
.rental-inventory-and-asset-management .riLocation {
font-size: 10px
}
.rental-inventory-and-asset-management .riLifecycleMetrics span {
min-height: 15px
}
.rental-inventory-and-asset-management .riLifecycleMetrics strong {
font-size: 26px
}
.rental-inventory-and-asset-management .riLifeTimeline strong {
font-size: 13px
}
.rental-inventory-and-asset-management .riLifeTimeline small {
font-size: 10px
}
}
@media(max-width:640px) {
.rental-inventory-and-asset-management .riTop {
padding: 14px 12px;
gap: 9px
}
.rental-inventory-and-asset-management .riTop strong {
font-size: 15px
}
.rental-inventory-and-asset-management .riTop .uiLabel {
font-size: 8px
}
.rental-inventory-and-asset-management .riTop>.pill {
font-size: 8px;
padding: 4px 6px
}
.rental-inventory-and-asset-management .riMetrics {
padding: 12px;
gap: 7px
}
.rental-inventory-and-asset-management .riMetrics>div {
padding: 10px
}
.rental-inventory-and-asset-management .riMetrics strong {
font-size: 27px
}
.rental-inventory-and-asset-management .riMetrics span {
font-size: 9px
}
.rental-inventory-and-asset-management .riTabs {
gap: 20px;
font-size: 9px;
padding: 0 12px
}
.rental-inventory-and-asset-management .riRegister {
padding: 0 12px
}
.rental-inventory-and-asset-management .riAssetRow {
grid-template-columns: 28px minmax(0, 1fr) 65px auto;
gap: 7px;
padding: 14px 0
}
.rental-inventory-and-asset-management .riAssetIcon {
width: 28px;
height: 31px
}
.rental-inventory-and-asset-management .riAssetIcon .icon2 {
width: 18px;
height: 18px
}
.rental-inventory-and-asset-management .riAssetRow strong {
font-size: 11px
}
.rental-inventory-and-asset-management .riAssetRow small {
font-size: 8px
}
.rental-inventory-and-asset-management .riLocation {
font-size: 9px
}
.rental-inventory-and-asset-management .riAssetRow>.pill {
font-size: 7px;
padding: 4px 6px
}
.rental-inventory-and-asset-management .riPanelFoot {
padding: 12px;
font-size: 9px
}
.rental-inventory-and-asset-management .riRecordChips {
gap: 6px;
margin-top: 12px
}
.rental-inventory-and-asset-management .riRecordChips>span {
font-size: 8px;
padding: 6px 7px;
gap: 5px
}
.rental-inventory-and-asset-management .riRecordChips .icon2 {
width: 14px;
height: 14px
}
.rental-inventory-and-asset-management .riScanScene {
grid-template-columns: 176px minmax(0, 1fr);
gap: 13px
}
.rental-inventory-and-asset-management .riDeviceHead strong {
font-size: 12px
}
.rental-inventory-and-asset-management .riDeviceHead small {
font-size: 8px
}
.rental-inventory-and-asset-management .riDeviceLine {
font-size: 8px
}
.rental-inventory-and-asset-management .riDeviceLine b {
font-size: 9px
}
.rental-inventory-and-asset-management .riCondition,
.rental-inventory-and-asset-management .riMockAction {
font-size: 8px
}
.rental-inventory-and-asset-management .riEvents {
padding: 14px 12px
}
.rental-inventory-and-asset-management .riEventsHead strong {
font-size: 15px
}
.rental-inventory-and-asset-management .riEventsHead .uiLabel {
font-size: 7px
}
.rental-inventory-and-asset-management .riEvent strong {
font-size: 11px
}
.rental-inventory-and-asset-management .riEvent small {
font-size: 9px
}
.rental-inventory-and-asset-management .riReviewBox {
font-size: 9px;
padding: 10px
}
.rental-inventory-and-asset-management .riDepotFlow {
gap: 7px;
padding: 15px 12px;
grid-template-columns: minmax(0, 1fr) 67px minmax(0, 1fr)
}
.rental-inventory-and-asset-management .riDepot {
padding: 14px 7px
}
.rental-inventory-and-asset-management .riDepot strong {
font-size: 12px
}
.rental-inventory-and-asset-management .riDepot>span {
font-size: 8px
}
.rental-inventory-and-asset-management .riDepot>.icon2 {
height: 25px;
width: 25px
}
.rental-inventory-and-asset-management .riInTransit b {
font-size: 11px
}
.rental-inventory-and-asset-management .riInTransit span {
font-size: 7px
}
.rental-inventory-and-asset-management .riTransferStages {
margin: 0 12px 15px;
gap: 6px
}
.rental-inventory-and-asset-management .riTransferStages>span {
font-size: 8px;
padding: 8px 4px
}
.rental-inventory-and-asset-management .riQuantityTable {
padding: 0 12px 13px
}
.rental-inventory-and-asset-management th,
.rental-inventory-and-asset-management td {
padding: 9px 6px;
font-size: 10px
}
.rental-inventory-and-asset-management thead th {
font-size: 8px
}
.rental-inventory-and-asset-management tbody th {
font-size: 9px
}
.rental-inventory-and-asset-management .riLifecycleMetrics {
padding: 12px;
gap: 7px
}
.rental-inventory-and-asset-management .riLifecycleMetrics>div {
padding: 10px 8px
}
.rental-inventory-and-asset-management .riLifecycleMetrics strong {
font-size: 22px
}
.rental-inventory-and-asset-management .riLifecycleMetrics span {
font-size: 8px;
min-height: 24px
}
.rental-inventory-and-asset-management .riLifeTimeline {
padding: 0 12px
}
.rental-inventory-and-asset-management .riLifeTimeline>div {
gap: 8px;
grid-template-columns: 28px minmax(0, 1fr) auto;
padding: 13px 0
}
.rental-inventory-and-asset-management .riLifeIcon {
width: 28px;
height: 30px
}
.rental-inventory-and-asset-management .riLifeIcon .icon2 {
width: 17px;
height: 17px
}
.rental-inventory-and-asset-management .riLifeTimeline strong {
font-size: 11px
}
.rental-inventory-and-asset-management .riLifeTimeline small {
font-size: 9px
}
.rental-inventory-and-asset-management .riLifeTag {
font-size: 7px
}
.rental-inventory-and-asset-management .riFileGrid {
padding: 14px 12px;
gap: 7px
}
.rental-inventory-and-asset-management .riFileGrid>span {
font-size: 8px;
padding: 8px;
gap: 6px
}
.rental-inventory-and-asset-management .riFileGrid .icon2 {
width: 15px;
height: 15px
}
.rental-inventory-and-asset-management .riAiHead {
padding: 15px
}
.rental-inventory-and-asset-management .riAiHead>span:first-child {
font-size: 17px
}
.rental-inventory-and-asset-management .riAiHead>.pill {
font-size: 8px
}
.rental-inventory-and-asset-management .riAiBody {
padding: 15px
}
.rental-inventory-and-asset-management .riPrompt {
margin-left: 20px;
padding: 13px;
font-size: 12px
}
.rental-inventory-and-asset-management .riReply {
padding: 15px;
margin-top: 14px
}
.rental-inventory-and-asset-management .riReply>strong {
font-size: 18px
}
.rental-inventory-and-asset-management .riReply>p {
font-size: 12px
}
.rental-inventory-and-asset-management .riAiFacts>span {
padding: 9px;
font-size: 9px;
gap: 6px
}
.rental-inventory-and-asset-management .riAiFacts b {
font-size: 9px
}
.rental-inventory-and-asset-management .riAiReview {
padding: 13px 15px;
font-size: 9px
}
.rental-inventory-and-asset-management .riDraftAction {
font-size: 10px;
padding: 11px;
gap: 7px
}
}
@media(max-width:420px) {
.rental-inventory-and-asset-management .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.rental-inventory-and-asset-management .supportStrip>span {
justify-content: flex-start;
padding: 12px 10px;
font-size: 11px;
gap: 8px
}
.rental-inventory-and-asset-management .riAssetRow {
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 3px 8px;
padding: 13px 0
}
.rental-inventory-and-asset-management .riAssetIcon {
grid-column: 1;
grid-row: 1/3;
align-self: center
}
.rental-inventory-and-asset-management .riAssetRow>div {
grid-column: 2;
grid-row: 1
}
.rental-inventory-and-asset-management .riAssetRow strong {
font-size: 11px
}
.rental-inventory-and-asset-management .riAssetRow>.pill {
grid-column: 3;
grid-row: 1/3;
font-size: 8px;
align-self: center
}
.rental-inventory-and-asset-management .riLocation {
grid-column: 2;
grid-row: 2;
font-size: 9px
}
.rental-inventory-and-asset-management .riAssetRow small {
font-size: 8px
}
.rental-inventory-and-asset-management .riRecordChips {
justify-content: flex-start
}
.rental-inventory-and-asset-management .riRecordChips>span {
font-size: 9px
}
.rental-inventory-and-asset-management .riScanScene {
grid-template-columns: minmax(0, 1fr);
gap: 16px
}
.rental-inventory-and-asset-management .riDevice {
width: 208px;
max-width: 100%;
justify-self: center
}
.rental-inventory-and-asset-management .riDeviceHead strong {
font-size: 14px
}
.rental-inventory-and-asset-management .riDeviceHead .uiLabel {
font-size: 8px
}
.rental-inventory-and-asset-management .riDeviceHead small {
font-size: 9px
}
.rental-inventory-and-asset-management .riDeviceLine {
font-size: 9px
}
.rental-inventory-and-asset-management .riDeviceLine b {
font-size: 10px
}
.rental-inventory-and-asset-management .riCondition,
.rental-inventory-and-asset-management .riMockAction {
font-size: 10px
}
.rental-inventory-and-asset-management .riScanTarget>span {
font-size: 9px
}
.rental-inventory-and-asset-management .riDeviceFine {
font-size: 8px
}
.rental-inventory-and-asset-management .riEvents {
padding: 17px
}
.rental-inventory-and-asset-management .riEventsHead strong {
font-size: 17px
}
.rental-inventory-and-asset-management .riEventsHead .uiLabel {
font-size: 8px
}
.rental-inventory-and-asset-management .riEvent strong {
font-size: 12px
}
.rental-inventory-and-asset-management .riEvent small {
font-size: 10px
}
.rental-inventory-and-asset-management .riReviewBox {
font-size: 11px;
padding: 12px
}
.rental-inventory-and-asset-management .riLifecycleMetrics {
gap: 6px
}
.rental-inventory-and-asset-management .riLifecycleMetrics>div {
padding: 10px 7px
}
.rental-inventory-and-asset-management .riLifecycleMetrics strong {
font-size: 21px
}
.rental-inventory-and-asset-management .riLifeTimeline>div {
grid-template-columns: 28px minmax(0, 1fr);
gap: 4px 8px
}
.rental-inventory-and-asset-management .riLifeIcon {
grid-column: 1;
grid-row: 1/3
}
.rental-inventory-and-asset-management .riLifeTimeline>div>div {
grid-column: 2;
grid-row: 1
}
.rental-inventory-and-asset-management .riLifeTag {
grid-column: 2;
grid-row: 2;
justify-self: start;
font-size: 8px;
margin-top: 5px
}
.rental-inventory-and-asset-management .riLifeTimeline strong {
font-size: 12px
}
.rental-inventory-and-asset-management .riLifeTimeline small {
font-size: 10px
}
.rental-inventory-and-asset-management .riFileGrid>span {
font-size: 9px
}
}
@media(max-width:360px) {
.rental-inventory-and-asset-management .riTop {
align-items: flex-start;
gap: 7px
}
.rental-inventory-and-asset-management .riTop strong {
font-size: 14px
}
.rental-inventory-and-asset-management .riTop>.pill {
font-size: 7px;
padding: 4px 5px
}
.rental-inventory-and-asset-management .riMetrics {
gap: 6px;
padding: 10px
}
.rental-inventory-and-asset-management .riMetrics>div {
padding: 9px 7px
}
.rental-inventory-and-asset-management .riMetrics strong {
font-size: 25px
}
.rental-inventory-and-asset-management .riMetrics span {
font-size: 8px
}
.rental-inventory-and-asset-management .riRegister {
padding: 0 10px
}
.rental-inventory-and-asset-management .riAssetRow {
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 3px 6px
}
.rental-inventory-and-asset-management .riAssetIcon {
width: 24px;
height: 29px
}
.rental-inventory-and-asset-management .riAssetRow strong {
font-size: 10px
}
.rental-inventory-and-asset-management .riAssetRow small {
font-size: 7px
}
.rental-inventory-and-asset-management .riAssetRow>.pill {
font-size: 7px;
padding: 4px 5px
}
.rental-inventory-and-asset-management .riDepotFlow {
grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
padding: 13px 10px;
gap: 6px
}
.rental-inventory-and-asset-management .riDepot strong {
font-size: 10px
}
.rental-inventory-and-asset-management .riDepot>span {
font-size: 7px
}
.rental-inventory-and-asset-management .riDepot {
padding: 13px 5px
}
.rental-inventory-and-asset-management .riInTransit b {
font-size: 10px
}
.rental-inventory-and-asset-management .riInTransit span {
font-size: 7px
}
.rental-inventory-and-asset-management .riTransferStages {
margin: 0 10px 13px;
gap: 5px
}
.rental-inventory-and-asset-management .riTransferStages>span {
font-size: 7px
}
.rental-inventory-and-asset-management .riQuantityTable {
padding: 0 10px 12px
}
.rental-inventory-and-asset-management th,
.rental-inventory-and-asset-management td {
padding: 9px 5px;
font-size: 9px
}
.rental-inventory-and-asset-management thead th {
font-size: 7px
}
.rental-inventory-and-asset-management tbody th {
font-size: 8px
}
.rental-inventory-and-asset-management .riLifecycleMetrics {
padding: 10px;
gap: 5px
}
.rental-inventory-and-asset-management .riLifecycleMetrics strong {
font-size: 18px
}
.rental-inventory-and-asset-management .riLifecycleMetrics span {
font-size: 7px;
min-height: 23px
}
.rental-inventory-and-asset-management .riFileGrid>span {
font-size: 8px;
padding: 8px 6px
}
.rental-inventory-and-asset-management .riAiHead {
padding: 14px 12px
}
.rental-inventory-and-asset-management .riAiBody {
padding: 12px
}
.rental-inventory-and-asset-management .riReply {
padding: 13px
}
.rental-inventory-and-asset-management .riAiFacts>span {
font-size: 8px;
padding: 9px 7px;
gap: 5px
}
.rental-inventory-and-asset-management .riAiFacts b {
font-size: 8px
}
}  #rental-billing-page * {
box-sizing: border-box
}
#rental-billing-page a {
text-decoration: none
}
#rental-billing-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px
}
#rental-billing-page .faq.wrap {
max-width: 900px
}
#rental-billing-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#rental-billing-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0;
background: transparent;
}
#rental-billing-page a:focus-visible,
#rental-billing-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#rental-billing-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#rental-billing-page .btn .icon {
width: 17px;
height: 17px
}
#rental-billing-page .btn.black {
background: #0B0B0B;
color: #fff
}
#rental-billing-page .btn.black:hover {
background: #303030
}
#rental-billing-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#rental-billing-page .btn.yellow:hover {
background: #FFD454
}
#rental-billing-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#rental-billing-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#rental-billing-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#rental-billing-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#rental-billing-page .textLink .icon {
width: 17px;
height: 17px
}
#rental-billing-page .textLink:hover {
color: var(--brand2)
}
#rental-billing-page .soft {
background: var(--sky2)
}
#rental-billing-page .sectionHead { margin-bottom: 36px
}
#rental-billing-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#rental-billing-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#rental-billing-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#rental-billing-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#rental-billing-page .heroGrid>*,
#rental-billing-page .feature>*,
#rental-billing-page .aiGrid>* {
min-width: 0
}
#rental-billing-page .heroCopy {
min-width: 0
}
#rental-billing-page .hero h1 {
max-width: 630px
}
#rental-billing-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#rental-billing-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#rental-billing-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#rental-billing-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#rental-billing-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#rental-billing-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#rental-billing-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#rental-billing-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#rental-billing-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#rental-billing-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#rental-billing-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#rental-billing-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#rental-billing-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#rental-billing-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#rental-billing-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#rental-billing-page .outcome:nth-child(3):before {
background: var(--green)
}
#rental-billing-page .outcome:nth-child(4):before {
background: var(--purple)
}
#rental-billing-page .outcome>.icon {
color: var(--navy)
}
#rental-billing-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#rental-billing-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#rental-billing-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-billing-page .feature.reverse .visual {
order: -1
}
#rental-billing-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#rental-billing-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#rental-billing-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#rental-billing-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#rental-billing-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#rental-billing-page .tick .icon {
height: 13px;
width: 13px
}
#rental-billing-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#rental-billing-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#rental-billing-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#rental-billing-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#rental-billing-page .uiHeading .icon {
height: 19px;
width: 19px
}
#rental-billing-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#rental-billing-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#rental-billing-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#rental-billing-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#rental-billing-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#rental-billing-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#rental-billing-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#rental-billing-page .dark h2,
#rental-billing-page .dark h3 {
color: white
}
#rental-billing-page .dark .ey {
background: var(--yellow);
color: #111
}
#rental-billing-page .dark .textLink {
color: #fff
}
#rental-billing-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#rental-billing-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-billing-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#rental-billing-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#rental-billing-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#rental-billing-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#rental-billing-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#rental-billing-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#rental-billing-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#rental-billing-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#rental-billing-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#rental-billing-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-billing-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#rental-billing-page .connectedCard h3 {
margin: 18px 0 11px
}
#rental-billing-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#rental-billing-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#rental-billing-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#rental-billing-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#rental-billing-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#rental-billing-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#rental-billing-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#rental-billing-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-billing-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#rental-billing-page .featureCard>.icon {
color: var(--navy)
}
#rental-billing-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#rental-billing-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-billing-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#rental-billing-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#rental-billing-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#rental-billing-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#rental-billing-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#rental-billing-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#rental-billing-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#rental-billing-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#rental-billing-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#rental-billing-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#rental-billing-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#rental-billing-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#rental-billing-page .useCase>.icon {
color: var(--navy)
}
#rental-billing-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#rental-billing-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-billing-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#rental-billing-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#rental-billing-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#rental-billing-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#rental-billing-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#rental-billing-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#rental-billing-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-billing-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#rental-billing-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#rental-billing-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#rental-billing-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#rental-billing-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#rental-billing-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#rental-billing-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#rental-billing-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#rental-billing-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#rental-billing-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#rental-billing-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#rental-billing-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#rental-billing-page .ctaBtns .btn {
min-width: 219px
}
#rental-billing-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#rental-billing-page .btn.darkOutline:hover {
background: #252D33
}
#rental-billing-page .final a:focus-visible {
outline-color: var(--yellow)
}
#rental-billing-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#rental-billing-page .heroGrid {
gap: 28px
}
#rental-billing-page .hero .lead {
font-size: 16px
}
#rental-billing-page .feature,
#rental-billing-page .aiGrid {
gap: 30px
}
#rental-billing-page .visual {
padding: 17px
}
#rental-billing-page .toolCard {
padding: 21px 15px
}
#rental-billing-page .toolCard strong {
font-size: 14px
}
#rental-billing-page .handoffBand {
padding: 20px
}
#rental-billing-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#rental-billing-page section {
padding: 64px 0
}
#rental-billing-page .hero {
padding: 34px 0 42px
}
#rental-billing-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#rental-billing-page .heroCopy {
max-width: 790px
}
#rental-billing-page .hero h1 {
max-width: 800px;
}
#rental-billing-page .hero .lead {
max-width: 760px
}
#rental-billing-page .heroVisual {
max-width: 460px;
justify-self: center
}
#rental-billing-page .feature,
#rental-billing-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#rental-billing-page .feature.reverse .visual {
order: 0
}
#rental-billing-page .featureCopy {
max-width: 790px
}
#rental-billing-page .visual {
max-width: 640px;
margin: 0 auto
}
#rental-billing-page .outcomes,
#rental-billing-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-billing-page .connectedGrid {
gap: 13px
}
#rental-billing-page .connectedCard {
padding: 22px
}
#rental-billing-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-billing-page .aiVisual {
max-width: 600px;
margin: auto
}
#rental-billing-page .aiMini {
max-width: 780px
}
#rental-billing-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#rental-billing-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#rental-billing-page .toolCard {
min-height: 145px
}
#rental-billing-page .roleGrid {
gap: 20px
}
#rental-billing-page .roleCard {
padding-right: 18px
}
#rental-billing-page .roleCard h3 {
font-size: 20px
}
#rental-billing-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#rental-billing-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#rental-billing-page .workflowLead br {
display: none
}
#rental-billing-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#rental-billing-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#rental-billing-page .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
#rental-billing-page .wrap {
width: calc(100% - 32px)
}
#rental-billing-page section {
padding: 49px 0
}
#rental-billing-page h2 {
font-size: 33px;
line-height: 1.15
}
#rental-billing-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#rental-billing-page .sectionHead {
margin-bottom: 27px
}
#rental-billing-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#rental-billing-page .hero {
padding: 25px 0 34px
}
#rental-billing-page .heroGrid {
gap: 21px
}
#rental-billing-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#rental-billing-page .hero h1 {
line-height: 1.12
}
#rental-billing-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#rental-billing-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#rental-billing-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#rental-billing-page .hero .micro {
font-size: 11px
}
#rental-billing-page .heroPills {
gap: 6px;
margin-top: 16px
}
#rental-billing-page .heroPills span {
font-size: 9px
}
#rental-billing-page .heroVisual {
max-width: 420px
}
#rental-billing-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#rental-billing-page .trust {
padding: 22px 0
}
#rental-billing-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#rental-billing-page .outcomes {
gap: 12px
}
#rental-billing-page .outcome {
padding: 19px
}
#rental-billing-page .outcome h3 {
font-size: 17px
}
#rental-billing-page .outcome p {
font-size: 13px
}
#rental-billing-page .feature {
gap: 27px
}
#rental-billing-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#rental-billing-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#rental-billing-page .fi {
font-size: 12px
}
#rental-billing-page .textLink {
font-size: 13px
}
#rental-billing-page .visual {
padding: 15px;
border-radius: 16px
}
#rental-billing-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#rental-billing-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#rental-billing-page .uiHeading .icon {
width: 18px;
height: 18px
}
#rental-billing-page .uiFoot {
font-size: 9px
}
#rental-billing-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#rental-billing-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#rental-billing-page .aiMini {
gap: 11px;
margin-top: 23px
}
#rental-billing-page .aiMini article {
padding: 16px
}
#rental-billing-page .aiMini h3 {
font-size: 15px
}
#rental-billing-page .aiMini p {
font-size: 12px
}
#rental-billing-page .aiNote {
font-size: 10px
}
#rental-billing-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#rental-billing-page .connectedCard {
padding: 23px
}
#rental-billing-page .connectedCard h3 {
margin: 15px 0 9px
}
#rental-billing-page .connectedCard p {
font-size: 14px
}
#rental-billing-page .handoffBand {
padding: 20px
}
#rental-billing-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#rental-billing-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#rental-billing-page .handoffBand small {
font-size: 11px
}
#rental-billing-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#rental-billing-page .featureGrid {
gap: 13px
}
#rental-billing-page .featureCard {
padding: 21px
}
#rental-billing-page .featureCard h3 {
font-size: 17px
}
#rental-billing-page .featureCard p {
font-size: 13px
}
#rental-billing-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#rental-billing-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#rental-billing-page .toolCard strong {
font-size: 15px
}
#rental-billing-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#rental-billing-page .toolCard:last-child .toolArrow {
top: 31px
}
#rental-billing-page .toolCard:last-child strong {
padding-right: 25px
}
#rental-billing-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#rental-billing-page .useCases {
gap: 13px
}
#rental-billing-page .useCase {
padding: 21px 18px
}
#rental-billing-page .useCase h3 {
font-size: 17px
}
#rental-billing-page .useCase p {
font-size: 13px
}
#rental-billing-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#rental-billing-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#rental-billing-page .roleCard:last-child {
padding-bottom: 0
}
#rental-billing-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#rental-billing-page .roleCard>strong {
font-size: 14px
}
#rental-billing-page .roleCard p {
font-size: 14px
}
#rental-billing-page .workflowBand {
padding: 28px 0
}
#rental-billing-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#rental-billing-page .workflowLead {
font-size: 18px
}
#rental-billing-page .workflowStep strong {
font-size: 14px
}
#rental-billing-page .workflowStep p {
font-size: 10px
}
#rental-billing-page .faq .sectionHead {
margin-bottom: 25px
}
#rental-billing-page details {
padding: 16px
}
#rental-billing-page .faqList {
gap: 10px
}
#rental-billing-page summary {
font-size: 14px;
gap: 14px
}
#rental-billing-page .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
#rental-billing-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#rental-billing-page .final h2 {
font-size: 32px
}
#rental-billing-page .final p {
font-size: 14px;
line-height: 1.8
}
#rental-billing-page .final .ey {
font-size: 9px
}
#rental-billing-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#rental-billing-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#rental-billing-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#rental-billing-page .outcomes,
#rental-billing-page .featureGrid,
#rental-billing-page .useCases {
grid-template-columns: 1fr
}
#rental-billing-page .outcome {
padding: 23px
}
#rental-billing-page .outcome h3 {
font-size: 18px
}
#rental-billing-page .outcome p {
font-size: 14px
}
#rental-billing-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#rental-billing-page .fi {
font-size: 13px
}
#rental-billing-page .aiMini {
grid-template-columns: 1fr
}
#rental-billing-page .aiMini h3 {
font-size: 17px
}
#rental-billing-page .aiMini p {
font-size: 13px
}
#rental-billing-page .aiMini article {
padding: 19px
}
#rental-billing-page .featureCard h3,
#rental-billing-page .useCase h3 {
font-size: 19px
}
#rental-billing-page .featureCard p,
#rental-billing-page .useCase p {
font-size: 14px
}
#rental-billing-page .toolsGrid {
grid-template-columns: 1fr
}
#rental-billing-page .toolCard,
#rental-billing-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#rental-billing-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#rental-billing-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#rental-billing-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#rental-billing-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#rental-billing-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#rental-billing-page .toolArrow,
#rental-billing-page .toolCard:last-child .toolArrow {
top: 30px
}
#rental-billing-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#rental-billing-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#rental-billing-page h2 {
font-size: 30px
}
#rental-billing-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#rental-billing-page .heroPills span {
font-size: 8px
}
#rental-billing-page .heroPills {
gap: 5px
}
#rental-billing-page .uiHeading {
font-size: 11px
}
#rental-billing-page .uiHeading>.pill {
font-size: 7px
}
#rental-billing-page .visual {
padding: 12px
}
#rental-billing-page .final {
padding: 26px 20px
}
#rental-billing-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#rental-billing-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#rental-billing-page section {
padding: 24px 0
}
#rental-billing-page .hero,
#rental-billing-page .soft {
background: #fff
}
#rental-billing-page .dark,
#rental-billing-page .workflowBand,
#rental-billing-page .final {
background: #fff;
color: #11283A
}
#rental-billing-page .dark h2,
#rental-billing-page .dark h3,
#rental-billing-page .final h2 {
color: #11283A
}
#rental-billing-page .dark p,
#rental-billing-page .final p {
color: #52697C
}
#rental-billing-page .btn {
display: none
}
#rental-billing-page .visual,
#rental-billing-page .outcome,
#rental-billing-page .featureCard,
#rental-billing-page details {
break-inside: avoid
}
#rental-billing-page .heroImage {
max-width: 380px
}
#rental-billing-page .heroVisual {
justify-self: center
}
}
.rentalBillingSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.rentalBillingSkip:focus {
top: 12px
}
#rental-billing-page .dark .textLink {
color: #FFF1BD
}
#rental-billing-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
#rental-billing-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#rental-billing-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#rental-billing-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy)
}
#rental-billing-page .workflowStep {
min-width: 0
}
#rental-billing-page .featureCopy>p {
max-width: 580px
}
#rental-billing-page .toolCard strong {
padding-right: 12px
}
#rental-billing-page .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
#rental-billing-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#rental-billing-page .supportStrip {
gap: 7px
}
#rental-billing-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#rental-billing-page .supportStrip .icon {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
#rental-billing-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} #rental-billing-page .pill.yellow {
background: var(--yellowsoft);
color: #795D12
}
#rental-billing-page .pill.gray {
background: #F0F4F7;
color: #5D7281
}
#rental-billing-page .qiTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px;
border-bottom: 1px solid var(--line)
}
#rental-billing-page .qiTop>div {
min-width: 0
}
#rental-billing-page .qiTop strong {
display: block;
font-size: 18px;
color: var(--navy);
line-height: 1.35;
letter-spacing: -.025em;
margin-top: 6px
}
#rental-billing-page .qiTop small {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.6;
margin-top: 6px
}
#rental-billing-page .qiTop>.icon {
color: var(--navy)
}
#rental-billing-page .qiRateOptions {
display: flex;
gap: 8px;
align-items: center;
padding: 11px 18px;
font-size: 9px;
color: #58788B;
background: #F8FCFE;
border-bottom: 1px solid var(--line);
flex-wrap: wrap
}
#rental-billing-page .qiRateOptions>span:first-child {
margin-right: auto;
font-weight: 700
}
#rental-billing-page .qiRateOptions b {
background: #DDF2FC;
color: var(--navy);
padding: 5px 9px;
border-radius: 5px
}
#rental-billing-page .qiQuoteLines {
padding: 0 17px
}
#rental-billing-page .qiColumnHead,
#rental-billing-page .qiLine {
display: grid;
grid-template-columns: minmax(0, 1fr) 104px 65px;
gap: 9px;
align-items: center
}
#rental-billing-page .qiColumnHead {
font-size: 8px;
color: #678293;
font-weight: 700;
padding: 11px 0;
border-bottom: 1px solid var(--line)
}
#rental-billing-page .qiColumnHead>span:last-child {
text-align: right
}
#rental-billing-page .qiLine {
padding: 13px 0;
border-bottom: 1px solid #E6EEF3;
font-size: 10px;
color: #527488
}
#rental-billing-page .qiLine>span:first-child {
display: flex;
gap: 8px;
align-items: center;
min-width: 0
}
#rental-billing-page .qiLine .icon {
width: 18px;
height: 18px;
color: #247698
}
#rental-billing-page .qiLine strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: var(--navy)
}
#rental-billing-page .qiLine small {
display: block;
font-size: 8px;
line-height: 1.5;
margin-top: 3px
}
#rental-billing-page .qiLine>b {
text-align: right;
font-size: 12px;
color: var(--navy)
}
#rental-billing-page .qiTotals {
padding: 14px 18px;
background: #F8FCFE;
display: grid;
gap: 9px
}
#rental-billing-page .qiTotals>div {
display: flex;
justify-content: space-between;
gap: 15px;
font-size: 10px;
color: #527488
}
#rental-billing-page .qiTotals b {
color: var(--navy);
font-size: 11px
}
#rental-billing-page .qiTotals .qiGrand {
margin-top: 3px;
border-top: 1px solid var(--line);
padding-top: 12px;
align-items: center;
font-size: 12px;
font-weight: 750;
color: var(--navy)
}
#rental-billing-page .qiGrand strong {
font-size: 27px;
letter-spacing: -.04em;
line-height: 1.3
}
#rental-billing-page .qiDocFoot {
padding: 10px 16px;
border-top: 1px solid var(--line);
font-size: 8px;
color: #607D8F;
line-height: 1.6;
background: #fff
}
#rental-billing-page .qiNote {
display: flex;
align-items: flex-start;
gap: 9px;
border: 1px solid #D7E8F1;
background: #fff;
border-radius: 10px;
margin-top: 14px;
padding: 13px;
font-size: 10px;
line-height: 1.7;
color: #506F83
}
#rental-billing-page .qiNote>.icon {
width: 18px;
height: 18px;
color: #188461;
margin-top: 1px
}
#rental-billing-page .qiContractScene {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 13px
}
#rental-billing-page .qiContract {
padding: 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
min-width: 0
}
#rental-billing-page .qiDocBrand {
display: flex;
align-items: center;
gap: 7px;
font-size: 7px;
font-weight: 800;
letter-spacing: .035em;
color: #4D7285;
border-bottom: 1px solid var(--line);
padding-bottom: 14px;
margin-bottom: 17px
}
#rental-billing-page .qiDocBrand .icon {
width: 22px;
height: 22px;
color: #2480A4
}
#rental-billing-page .qiContract>strong {
font-size: 21px;
line-height: 1.3;
color: var(--navy);
display: block;
letter-spacing: -.03em;
margin-top: 8px
}
#rental-billing-page .qiContract>p {
font-size: 10px;
color: #5D7A8A;
margin-top: 6px;
line-height: 1.6
}
#rental-billing-page .qiContractFields {
display: grid;
gap: 12px;
margin-top: 20px
}
#rental-billing-page .qiContractFields>div {
display: grid;
gap: 4px
}
#rental-billing-page .qiContractFields span {
font-size: 8px;
color: #708798
}
#rental-billing-page .qiContractFields b {
font-size: 10px;
color: #335E77;
font-weight: 650;
line-height: 1.5
}
#rental-billing-page .qiSignature {
border-top: 1px solid var(--line);
padding-top: 14px;
margin-top: 18px
}
#rental-billing-page .qiSignature>span {
display: block;
font-size: 8px;
color: #607B8C
}
#rental-billing-page .qiSignature strong {
display: block;
font: italic 23px/1.5 Georgia, serif;
color: #487A93;
margin: 6px 0
}
#rental-billing-page .qiSignature small {
font-size: 8px;
color: #6E8A99;
line-height: 1.5
}
#rental-billing-page .qiApprovalSide {
display: flex;
flex-direction: column;
gap: 13px;
min-width: 0
}
#rental-billing-page .qiApprovalStamp {
padding: 24px 12px;
border: 1px solid #BDDCCD;
border-radius: 12px;
background: #EAF8F1;
color: #176F50;
text-align: center
}
#rental-billing-page .qiApprovalStamp>.icon {
width: 33px;
height: 33px
}
#rental-billing-page .qiApprovalStamp>strong {
display: block;
font-size: 13px;
margin: 12px 0 7px;
line-height: 1.5
}
#rental-billing-page .qiApprovalStamp>span {
font-size: 10px;
color: #4F7C68;
line-height: 1.7
}
#rental-billing-page .qiCarry {
padding: 17px 13px;
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
display: grid;
gap: 13px;
flex: 1;
align-content: center
}
#rental-billing-page .qiCarry>span:not(.uiLabel) {
font-size: 10px;
color: #52778A;
display: flex;
gap: 6px;
align-items: flex-start;
line-height: 1.6
}
#rental-billing-page .qiCarry .icon {
width: 14px;
height: 14px;
color: #19845E;
margin-top: 2px
}
#rental-billing-page .qiDocumentFlow {
display: grid;
grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
gap: 8px;
align-items: center;
padding: 16px 13px;
border-radius: 10px;
background: #0D2939;
color: #fff;
margin-top: 15px
}
#rental-billing-page .qiDocumentFlow>span {
text-align: center;
display: grid;
gap: 4px
}
#rental-billing-page .qiDocumentFlow b {
font-size: 12px
}
#rental-billing-page .qiDocumentFlow small {
font-size: 9px;
color: #BED6E3
}
#rental-billing-page .qiDocumentFlow>.icon {
width: 17px;
height: 17px;
color: var(--yellow)
}
#rental-billing-page .qiCycleList {
padding: 3px 18px
}
#rental-billing-page .qiCycle {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 70px;
gap: 11px;
align-items: center;
padding: 21px 0;
position: relative
}
#rental-billing-page .qiCycle+.qiCycle {
border-top: 1px solid var(--line)
}
#rental-billing-page .qiCycleDot {
width: 34px;
height: 34px;
border: 1px solid #CDDEE9;
border-radius: 50%;
display: grid;
place-items: center;
background: #F1F6F9;
color: #6E8A9A
}
#rental-billing-page .qiCycleDot .icon {
width: 17px;
height: 17px
}
#rental-billing-page .qiCycleDot.done {
background: #EAF8F1;
color: #16845D;
border-color: #C4E0D3
}
#rental-billing-page .qiCycleDot.current {
background: #FFF7DE;
color: #9A7816;
border-color: #EADBA8
}
#rental-billing-page .qiCycle strong {
font-size: 13px;
line-height: 1.5;
color: var(--navy);
display: block
}
#rental-billing-page .qiCycle small {
font-size: 9px;
color: #6A8291;
line-height: 1.6;
display: block;
margin-top: 5px
}
#rental-billing-page .qiCycle>div:last-child {
text-align: right
}
#rental-billing-page .qiCycle b {
display: block;
font-size: 17px;
letter-spacing: -.025em;
line-height: 1.5;
color: var(--navy);
margin-bottom: 6px
}
#rental-billing-page .qiCycle .pill {
font-size: 8px
}
#rental-billing-page .qiCycleSummary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 18px;
background: #F5FBFE;
border-top: 1px solid var(--line)
}
#rental-billing-page .qiCycleSummary>div {
min-width: 0
}
#rental-billing-page .qiCycleSummary span {
display: block;
font-size: 9px;
line-height: 1.5;
color: #58778A
}
#rental-billing-page .qiCycleSummary strong {
display: block;
font-size: 23px;
color: var(--navy);
line-height: 1.4;
margin-top: 5px;
letter-spacing: -.035em
}
#rental-billing-page .qiPaymentScene {
display: grid;
grid-template-columns: 187px minmax(0, 1fr);
gap: 17px;
align-items: start
}
#rental-billing-page .qiPhone {
border: 6px solid #0C2230;
border-radius: 28px;
background: #fff;
overflow: hidden;
min-width: 0
}
#rental-billing-page .qiPhoneStatus {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
height: 29px;
padding: 9px 10px;
font-size: 8px;
color: #244D63;
font-weight: 700
}
#rental-billing-page .qiPhoneStatus i {
width: 43px;
height: 11px;
background: #0C2230;
border-radius: 9px
}
#rental-billing-page .qiPhoneHeader {
padding: 14px 12px;
background: #E9F7FD;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line)
}
#rental-billing-page .qiPhoneHeader>.icon {
width: 21px;
height: 21px;
color: #3283A9
}
#rental-billing-page .qiPhoneHeader strong {
font-size: 15px;
color: var(--navy);
line-height: 1.4;
display: block;
margin-top: 7px
}
#rental-billing-page .qiPhoneHeader small {
font-size: 9px;
color: #5B7B8D;
display: block;
line-height: 1.5;
margin-top: 5px
}
#rental-billing-page .qiPhoneBody {
padding: 16px 12px 10px
}
#rental-billing-page .qiPhoneBody .uiLabel {
font-size: 8px
}
#rental-billing-page .qiPhoneAmount {
display: block;
font-size: 35px;
letter-spacing: -.04em;
color: var(--navy);
line-height: 1.25;
margin: 6px 0 11px
}
#rental-billing-page .qiPhoneRow {
display: flex;
justify-content: space-between;
gap: 6px;
padding: 10px 0;
border-bottom: 1px solid #E4EDF3;
font-size: 9px;
color: #59768A;
line-height: 1.4
}
#rental-billing-page .qiPhoneRow b {
color: #26536C
}
#rental-billing-page .qiPayAction {
display: flex;
gap: 6px;
align-items: center;
justify-content: center;
margin-top: 16px;
background: var(--yellow);
color: #0B0B0B;
border-radius: 8px;
padding: 11px 6px;
font-size: 10px;
font-weight: 750
}
#rental-billing-page .qiPayAction>.icon {
width: 15px;
height: 15px
}
#rental-billing-page .qiPhoneBody>p {
font-size: 8px;
line-height: 1.65;
color: #678192;
text-align: center;
margin-top: 11px
}
#rental-billing-page .qiHomebar {
width: 51px;
height: 4px;
border-radius: 8px;
background: #15364B;
margin: 10px auto 6px
}
#rental-billing-page .qiPaymentSide {
display: grid;
gap: 13px;
min-width: 0
}
#rental-billing-page .qiPaymentCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 11px;
padding: 17px 13px
}
#rental-billing-page .qiPaymentCard>.uiLabel {
font-size: 8px;
margin-bottom: 11px
}
#rental-billing-page .qiPaymentEvent {
display: grid;
grid-template-columns: 23px minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
padding: 13px 0
}
#rental-billing-page .qiPaymentEvent+.qiPaymentEvent {
border-top: 1px solid var(--line)
}
#rental-billing-page .qiEventIcon {
display: grid;
place-items: center;
background: #EAF8F0;
color: #0F8158;
width: 23px;
height: 23px;
border-radius: 50%
}
#rental-billing-page .qiEventIcon>.icon {
width: 13px;
height: 13px
}
#rental-billing-page .qiPaymentEvent strong {
font-size: 11px;
color: var(--navy);
display: block;
line-height: 1.4
}
#rental-billing-page .qiPaymentEvent small {
font-size: 8px;
color: #658393;
display: block;
margin-top: 4px;
line-height: 1.5
}
#rental-billing-page .qiPaymentEvent>b {
font-size: 13px;
color: var(--navy)
}
#rental-billing-page .qiReceived {
display: flex;
justify-content: space-between;
gap: 8px;
padding-top: 13px;
border-top: 1px solid var(--line);
font-size: 9px;
color: #527488;
align-items: center
}
#rental-billing-page .qiReceived strong {
font-size: 17px;
color: #18704F;
letter-spacing: -.03em
}
#rental-billing-page .qiBalanceCard {
padding: 16px;
background: #FFF9E6;
border: 1px solid #E8DDAF;
border-radius: 11px
}
#rental-billing-page .qiBalanceCard strong {
display: block;
font-size: 32px;
color: var(--navy);
line-height: 1.4;
letter-spacing: -.04em;
margin-top: 5px
}
#rental-billing-page .qiBalanceCard p {
font-size: 9px;
color: #7D724E;
line-height: 1.7;
margin-top: 4px
}
#rental-billing-page .qiReminder {
display: flex;
align-items: flex-start;
gap: 7px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px;
font-size: 10px;
line-height: 1.7;
color: #597789
}
#rental-billing-page .qiReminder>.icon {
color: #947520;
width: 17px;
height: 17px;
margin-top: 2px
}
#rental-billing-page .qiAiPanel {
background: #fff;
border: 1px solid #415765;
border-radius: 17px;
overflow: hidden;
color: var(--ink)
}
#rental-billing-page .qiAiTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 19px;
border-bottom: 1px solid var(--line)
}
#rental-billing-page .qiAiTop>span:first-child {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 800;
color: var(--navy)
}
#rental-billing-page .qiAiTop .icon {
color: #A47D08;
width: 22px;
height: 22px
}
#rental-billing-page .qiAiPrompt {
padding: 15px;
background: #EAF7FD;
border: 1px solid #C5E4F3;
border-radius: 12px 3px 12px 12px;
margin: 19px 18px 18px 38px;
font-size: 12px;
line-height: 1.7;
color: #315F78
}
#rental-billing-page .qiAiResponse {
padding: 0 20px 21px
}
#rental-billing-page .qiAiResponse>strong {
display: block;
font-size: 19px;
line-height: 1.4;
color: var(--navy);
margin-top: 8px
}
#rental-billing-page .qiAiResponse>p {
font-size: 12px;
line-height: 1.75;
color: #59778A;
margin-top: 8px
}
#rental-billing-page .qiEvidence {
display: grid;
gap: 15px;
margin-top: 20px
}
#rental-billing-page .qiEvidence>div {
display: flex;
gap: 10px;
align-items: flex-start
}
#rental-billing-page .qiEvidence .icon {
width: 19px;
height: 19px;
margin-top: 2px;
color: #16835C
}
#rental-billing-page .qiEvidence b {
font-size: 11px;
display: block;
color: #265A76;
line-height: 1.4
}
#rental-billing-page .qiEvidence small {
font-size: 10px;
display: block;
color: #668291;
line-height: 1.7;
margin-top: 4px
}
#rental-billing-page .qiSourceChips {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 20px
}
#rental-billing-page .qiSourceChips span {
border: 1px solid var(--line);
border-radius: 5px;
background: #F7FAFC;
padding: 6px 8px;
font-size: 8px;
line-height: 1.5;
color: #5A788A
}
#rental-billing-page .qiAiFoot {
display: flex;
align-items: center;
gap: 9px;
padding: 15px 18px;
background: #FFFBEF;
border-top: 1px solid #E8DDAF;
color: #776320;
font-size: 10px;
line-height: 1.6
}
#rental-billing-page .qiAiFoot>.icon {
width: 20px;
height: 20px
}
@media(min-width:981px) and (max-width:1150px) {
#rental-billing-page .qiTop {
padding: 14px
}
#rental-billing-page .qiTop strong {
font-size: 16px
}
#rental-billing-page .qiColumnHead,
#rental-billing-page .qiLine {
grid-template-columns: minmax(0, 1fr) 90px 54px;
gap: 7px
}
#rental-billing-page .qiLine .icon {
display: none
}
#rental-billing-page .qiPaymentScene {
grid-template-columns: 167px minmax(0, 1fr);
gap: 12px
}
#rental-billing-page .qiPhoneHeader strong {
font-size: 13px
}
#rental-billing-page .qiPaymentCard {
padding: 14px 10px
}
#rental-billing-page .qiPaymentEvent {
grid-template-columns: minmax(0, 1fr) auto
}
#rental-billing-page .qiEventIcon {
display: none
}
#rental-billing-page .qiReceived {
font-size: 8px
}
#rental-billing-page .qiReceived strong {
font-size: 16px
}
}
@media(max-width:640px) {
#rental-billing-page .qiTop {
padding: 14px;
gap: 8px
}
#rental-billing-page .qiTop strong {
font-size: 16px
}
#rental-billing-page .qiTop small {
font-size: 9px
}
#rental-billing-page .qiTop .pill {
font-size: 8px
}
#rental-billing-page .qiRateOptions {
padding: 10px 13px;
font-size: 8px
}
#rental-billing-page .qiQuoteLines {
padding: 0 13px
}
#rental-billing-page .qiColumnHead,
#rental-billing-page .qiLine {
grid-template-columns: minmax(0, 1fr) 93px 56px;
gap: 7px
}
#rental-billing-page .qiLine {
font-size: 9px
}
#rental-billing-page .qiLine strong {
font-size: 10px
}
#rental-billing-page .qiLine .icon {
width: 15px;
height: 15px
}
#rental-billing-page .qiLine>b {
font-size: 11px
}
#rental-billing-page .qiTotals {
padding: 13px
}
#rental-billing-page .qiGrand strong {
font-size: 25px
}
#rental-billing-page .qiDocFoot {
font-size: 8px;
padding: 10px 13px
}
#rental-billing-page .qiNote {
font-size: 9px;
padding: 12px
}
#rental-billing-page .qiContractScene {
gap: 10px;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr)
}
#rental-billing-page .qiContract {
padding: 13px
}
#rental-billing-page .qiDocBrand {
font-size: 6px;
gap: 5px
}
#rental-billing-page .qiDocBrand>.icon {
height: 18px;
width: 18px
}
#rental-billing-page .qiContract>strong {
font-size: 18px
}
#rental-billing-page .qiContractFields b {
font-size: 9px
}
#rental-billing-page .qiApprovalStamp {
padding: 20px 9px
}
#rental-billing-page .qiApprovalStamp>strong {
font-size: 12px
}
#rental-billing-page .qiApprovalStamp>span {
font-size: 9px
}
#rental-billing-page .qiCarry {
padding: 14px 10px
}
#rental-billing-page .qiCarry .uiLabel {
font-size: 8px
}
#rental-billing-page .qiCarry>span:not(.uiLabel) {
font-size: 9px;
gap: 5px
}
#rental-billing-page .qiDocumentFlow {
padding: 14px 10px;
gap: 6px
}
#rental-billing-page .qiDocumentFlow b {
font-size: 11px
}
#rental-billing-page .qiDocumentFlow small {
font-size: 8px
}
#rental-billing-page .qiCycleList {
padding: 0 13px
}
#rental-billing-page .qiCycle {
grid-template-columns: 29px minmax(0, 1fr) 62px;
gap: 8px;
padding: 18px 0
}
#rental-billing-page .qiCycleDot {
width: 29px;
height: 29px
}
#rental-billing-page .qiCycleDot>.icon {
width: 15px;
height: 15px
}
#rental-billing-page .qiCycle strong {
font-size: 11px
}
#rental-billing-page .qiCycle small {
font-size: 8px
}
#rental-billing-page .qiCycle b {
font-size: 15px
}
#rental-billing-page .qiCycleSummary {
padding: 14px 13px;
gap: 8px
}
#rental-billing-page .qiCycleSummary span {
font-size: 8px
}
#rental-billing-page .qiCycleSummary strong {
font-size: 21px
}
#rental-billing-page .qiPaymentScene {
grid-template-columns: 167px minmax(0, 1fr);
gap: 12px
}
#rental-billing-page .qiPhoneHeader {
padding: 12px 10px
}
#rental-billing-page .qiPhoneHeader strong {
font-size: 13px
}
#rental-billing-page .qiPhoneHeader small {
font-size: 8px
}
#rental-billing-page .qiPhoneBody {
padding: 13px 10px 8px
}
#rental-billing-page .qiPhoneAmount {
font-size: 32px
}
#rental-billing-page .qiPhoneRow {
font-size: 8px
}
#rental-billing-page .qiPaymentCard {
padding: 14px 10px
}
#rental-billing-page .qiPaymentEvent {
grid-template-columns: minmax(0, 1fr) auto
}
#rental-billing-page .qiEventIcon {
display: none
}
#rental-billing-page .qiPaymentEvent strong {
font-size: 10px
}
#rental-billing-page .qiPaymentEvent>b {
font-size: 12px
}
#rental-billing-page .qiReceived {
font-size: 8px
}
#rental-billing-page .qiReceived strong {
font-size: 16px
}
#rental-billing-page .qiBalanceCard {
padding: 13px
}
#rental-billing-page .qiBalanceCard strong {
font-size: 27px
}
#rental-billing-page .qiBalanceCard p {
font-size: 8px
}
#rental-billing-page .qiReminder {
font-size: 9px;
padding: 11px
}
#rental-billing-page .qiAiTop {
padding: 15px
}
#rental-billing-page .qiAiPrompt {
font-size: 11px;
margin: 16px 13px 16px 26px;
padding: 13px
}
#rental-billing-page .qiAiResponse {
padding: 0 15px 17px
}
#rental-billing-page .qiAiResponse>strong {
font-size: 17px
}
#rental-billing-page .qiAiResponse>p {
font-size: 11px
}
#rental-billing-page .qiAiFoot {
font-size: 9px;
padding: 13px
}
}
@media(max-width:460px) {
#rental-billing-page .qiPaymentScene {
grid-template-columns: 1fr;
gap: 16px
}
#rental-billing-page .qiPhone {
width: 205px;
max-width: 100%;
margin: auto
}
#rental-billing-page .qiPhoneHeader strong {
font-size: 15px
}
#rental-billing-page .qiPhoneBody {
padding: 15px 13px 10px
}
#rental-billing-page .qiPhoneRow {
font-size: 10px
}
#rental-billing-page .qiPhoneBody>p {
font-size: 9px
}
#rental-billing-page .qiPayAction {
font-size: 11px
}
#rental-billing-page .qiPaymentSide {
grid-template-columns: 1fr 1fr;
gap: 10px
}
#rental-billing-page .qiPaymentCard {
grid-column: 1/-1;
padding: 16px
}
#rental-billing-page .qiPaymentEvent {
grid-template-columns: 26px minmax(0, 1fr) auto
}
#rental-billing-page .qiEventIcon {
display: grid
}
#rental-billing-page .qiPaymentEvent strong {
font-size: 12px
}
#rental-billing-page .qiPaymentEvent small {
font-size: 9px
}
#rental-billing-page .qiPaymentEvent>b {
font-size: 14px
}
#rental-billing-page .qiReceived {
font-size: 10px
}
#rental-billing-page .qiReceived strong {
font-size: 20px
}
#rental-billing-page .qiReminder {
font-size: 10px;
flex-direction: column;
gap: 9px
}
#rental-billing-page .qiBalanceCard .uiLabel {
font-size: 8px
}
#rental-billing-page .qiColumnHead {
grid-template-columns: minmax(0, 1fr) 57px
}
#rental-billing-page .qiColumnHead>span:nth-child(2) {
display: none
}
#rental-billing-page .qiLine {
grid-template-columns: minmax(0, 1fr) 57px;
gap: 4px 8px
}
#rental-billing-page .qiLine>span:nth-child(2) {
grid-row: 2;
grid-column: 1;
font-size: 9px;
padding-left: 23px
}
#rental-billing-page .qiLine>b {
grid-column: 2;
grid-row: 1/3;
font-size: 12px
}
#rental-billing-page .qiLine strong {
font-size: 12px
}
#rental-billing-page .qiLine small {
font-size: 9px
}
#rental-billing-page .qiContractScene {
grid-template-columns: 1fr
}
#rental-billing-page .qiContract {
padding: 18px
}
#rental-billing-page .qiDocBrand {
font-size: 8px
}
#rental-billing-page .qiContract>strong {
font-size: 23px
}
#rental-billing-page .qiContractFields {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px
}
#rental-billing-page .qiContractFields span {
font-size: 9px
}
#rental-billing-page .qiContractFields b {
font-size: 10px
}
#rental-billing-page .qiApprovalSide {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px
}
#rental-billing-page .qiCarry {
gap: 10px
}
#rental-billing-page .qiCarry>span:not(.uiLabel) {
font-size: 9px
}
#rental-billing-page .qiNote {
font-size: 10px
}
}
@media(max-width:360px) {
#rental-billing-page .qiTop strong {
font-size: 15px
}
#rental-billing-page .qiTop .pill {
font-size: 7px;
padding: 4px 6px
}
#rental-billing-page .qiTop .uiLabel {
font-size: 8px
}
#rental-billing-page .qiTop small {
font-size: 8px
}
#rental-billing-page .qiCycle {
grid-template-columns: 26px minmax(0, 1fr) 56px;
gap: 6px
}
#rental-billing-page .qiCycleDot {
width: 26px;
height: 26px
}
#rental-billing-page .qiCycle strong {
font-size: 10px
}
#rental-billing-page .qiCycle b {
font-size: 14px
}
#rental-billing-page .qiCycle .pill {
font-size: 7px
}
#rental-billing-page .qiCycleSummary strong {
font-size: 19px
}
#rental-billing-page .qiCycleSummary span {
font-size: 7px
}
#rental-billing-page .qiCycleSummary {
gap: 7px
}
#rental-billing-page .qiBalanceCard strong {
font-size: 25px
}
#rental-billing-page .qiAiTop>.pill {
font-size: 8px
}
}  .equipment-lifecycle-management .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
.equipment-lifecycle-management a:focus-visible,
.equipment-lifecycle-management summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
.equipment-lifecycle-management .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.equipment-lifecycle-management .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.equipment-lifecycle-management .btn .icon2 {
width: 17px;
height: 17px
}
.equipment-lifecycle-management .btn.black {
background: #0B0B0B;
color: #fff
}
.equipment-lifecycle-management .btn.black:hover {
background: #303030
}
.equipment-lifecycle-management .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.equipment-lifecycle-management .btn.yellow:hover {
background: #FFD454
}
.equipment-lifecycle-management .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.equipment-lifecycle-management .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.equipment-lifecycle-management .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.equipment-lifecycle-management .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.equipment-lifecycle-management .textLink .icon2 {
width: 17px;
height: 17px
}
.equipment-lifecycle-management .textLink:hover {
color: var(--brand2)
}
.equipment-lifecycle-management .soft {
background: var(--sky2)
}
.equipment-lifecycle-management .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.equipment-lifecycle-management .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.equipment-lifecycle-management .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.equipment-lifecycle-management .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.equipment-lifecycle-management .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.equipment-lifecycle-management .heroGrid>*,
.equipment-lifecycle-management .feature>*,
.equipment-lifecycle-management .aiGrid>* {
min-width: 0
}
.equipment-lifecycle-management .heroCopy {
min-width: 0
}
.equipment-lifecycle-management .hero h1 {
max-width: 630px
}
.equipment-lifecycle-management .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.equipment-lifecycle-management .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.equipment-lifecycle-management .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.equipment-lifecycle-management .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.equipment-lifecycle-management .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.equipment-lifecycle-management .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.equipment-lifecycle-management .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.equipment-lifecycle-management .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.equipment-lifecycle-management .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.equipment-lifecycle-management .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.equipment-lifecycle-management .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.equipment-lifecycle-management .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.equipment-lifecycle-management .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.equipment-lifecycle-management .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.equipment-lifecycle-management .outcome:nth-child(2):before {
background: var(--yellow)
}
.equipment-lifecycle-management .outcome:nth-child(3):before {
background: var(--green)
}
.equipment-lifecycle-management .outcome:nth-child(4):before {
background: var(--purple)
}
.equipment-lifecycle-management .outcome>.icon2 {
color: var(--navy)
}
.equipment-lifecycle-management .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.equipment-lifecycle-management .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.equipment-lifecycle-management .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.equipment-lifecycle-management .feature.reverse .visual {
order: -1
}
.equipment-lifecycle-management .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.equipment-lifecycle-management .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.equipment-lifecycle-management .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.equipment-lifecycle-management .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.equipment-lifecycle-management .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.equipment-lifecycle-management .tick .icon2 {
height: 13px;
width: 13px
}
.equipment-lifecycle-management .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.equipment-lifecycle-management .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.equipment-lifecycle-management .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.equipment-lifecycle-management .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.equipment-lifecycle-management .uiHeading .icon2 {
height: 19px;
width: 19px
}
.equipment-lifecycle-management .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.equipment-lifecycle-management .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.equipment-lifecycle-management .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.equipment-lifecycle-management .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.equipment-lifecycle-management .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.equipment-lifecycle-management .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.equipment-lifecycle-management .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.equipment-lifecycle-management .dark h2,
.equipment-lifecycle-management .dark h3 {
color: white
}
.equipment-lifecycle-management .dark .ey {
background: var(--yellow);
color: #111
}
.equipment-lifecycle-management .dark .textLink {
color: #fff
}
.equipment-lifecycle-management .dark a:focus-visible {
outline-color: var(--yellow)
}
.equipment-lifecycle-management .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.equipment-lifecycle-management .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.equipment-lifecycle-management .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.equipment-lifecycle-management .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.equipment-lifecycle-management .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.equipment-lifecycle-management .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.equipment-lifecycle-management .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.equipment-lifecycle-management .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.equipment-lifecycle-management .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.equipment-lifecycle-management .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.equipment-lifecycle-management .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.equipment-lifecycle-management .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.equipment-lifecycle-management .connectedCard h3 {
margin: 18px 0 11px
}
.equipment-lifecycle-management .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.equipment-lifecycle-management .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.equipment-lifecycle-management .handoffBand>div {
display: flex;
align-items: center;
gap: 14px;
flex-direction: row;
}
.equipment-lifecycle-management .handoffBand>div>.icon2 {
color: var(--navy);
width: 29px;
height: 29px
}
.equipment-lifecycle-management .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.equipment-lifecycle-management .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.equipment-lifecycle-management .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.equipment-lifecycle-management .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.equipment-lifecycle-management .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.equipment-lifecycle-management .featureCard>.icon2 {
color: var(--navy)
}
.equipment-lifecycle-management .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.equipment-lifecycle-management .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.equipment-lifecycle-management .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.equipment-lifecycle-management .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.equipment-lifecycle-management .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.equipment-lifecycle-management .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.equipment-lifecycle-management .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.equipment-lifecycle-management .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.equipment-lifecycle-management .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.equipment-lifecycle-management .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.equipment-lifecycle-management .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.equipment-lifecycle-management .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.equipment-lifecycle-management .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.equipment-lifecycle-management .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.equipment-lifecycle-management .useCase>.icon2 {
color: var(--navy)
}
.equipment-lifecycle-management .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.equipment-lifecycle-management .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.equipment-lifecycle-management .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.equipment-lifecycle-management .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.equipment-lifecycle-management .roleCard:last-child {
border: 0;
padding-right: 0
}
.equipment-lifecycle-management .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.equipment-lifecycle-management .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.equipment-lifecycle-management .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.equipment-lifecycle-management .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.equipment-lifecycle-management .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.equipment-lifecycle-management .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.equipment-lifecycle-management .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.equipment-lifecycle-management .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.equipment-lifecycle-management .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.equipment-lifecycle-management .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.equipment-lifecycle-management .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
.equipment-lifecycle-management .faq {
max-width: 900px
}
.equipment-lifecycle-management .faq .sectionHead {
max-width: 800px
}
.equipment-lifecycle-management .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.equipment-lifecycle-management .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.equipment-lifecycle-management .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.equipment-lifecycle-management .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.equipment-lifecycle-management .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.equipment-lifecycle-management .ctaBtns .btn {
min-width: 219px
}
.equipment-lifecycle-management .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.equipment-lifecycle-management .btn.darkOutline:hover {
background: #252D33
}
.equipment-lifecycle-management .final a:focus-visible {
outline-color: var(--yellow)
}
.equipment-lifecycle-management .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.equipment-lifecycle-management .heroGrid {
gap: 28px
}
.equipment-lifecycle-management h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.equipment-lifecycle-management .hero .lead {
font-size: 16px
}
.equipment-lifecycle-management .feature,
.equipment-lifecycle-management .aiGrid {
gap: 30px
}
.equipment-lifecycle-management .visual {
padding: 17px
}
.equipment-lifecycle-management .toolCard {
padding: 21px 15px
}
.equipment-lifecycle-management .toolCard strong {
font-size: 14px
}
.equipment-lifecycle-management .handoffBand {
padding: 20px
}
.equipment-lifecycle-management .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.equipment-lifecycle-management section {
padding: 64px 0
}
.equipment-lifecycle-management .hero {
padding: 34px 0 42px
}
.equipment-lifecycle-management .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.equipment-lifecycle-management .heroCopy {
max-width: 790px
}
.equipment-lifecycle-management .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.equipment-lifecycle-management .hero .lead {
max-width: 760px
}
.equipment-lifecycle-management .heroVisual {
max-width: 460px;
justify-self: center
}
.equipment-lifecycle-management .feature,
.equipment-lifecycle-management .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.equipment-lifecycle-management .feature.reverse .visual {
order: 0
}
.equipment-lifecycle-management .featureCopy {
max-width: 790px
}
.equipment-lifecycle-management .visual {
max-width: 640px;
margin: 0 auto
}
.equipment-lifecycle-management .outcomes,
.equipment-lifecycle-management .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.equipment-lifecycle-management .connectedGrid {
gap: 13px
}
.equipment-lifecycle-management .connectedCard {
padding: 22px
}
.equipment-lifecycle-management .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.equipment-lifecycle-management .aiVisual {
max-width: 600px;
margin: auto
}
.equipment-lifecycle-management .aiMini {
max-width: 780px
}
.equipment-lifecycle-management .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.equipment-lifecycle-management .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.equipment-lifecycle-management .toolCard {
min-height: 145px
}
.equipment-lifecycle-management .roleGrid {
gap: 20px
}
.equipment-lifecycle-management .roleCard {
padding-right: 18px
}
.equipment-lifecycle-management .roleCard h3 {
font-size: 20px
}
.equipment-lifecycle-management .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.equipment-lifecycle-management .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.equipment-lifecycle-management .workflowLead br {
display: none
}
.equipment-lifecycle-management .final {
grid-template-columns: 1fr;
gap: 27px
}
.equipment-lifecycle-management .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.equipment-lifecycle-management .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
.equipment-lifecycle-management .wrap {
width: calc(100% - 32px)
}
.equipment-lifecycle-management section {
padding: 49px 0
}
.equipment-lifecycle-management h2 {
font-size: 33px;
line-height: 1.15
}
.equipment-lifecycle-management .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.equipment-lifecycle-management .sectionHead {
margin-bottom: 27px
}
.equipment-lifecycle-management .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.equipment-lifecycle-management .hero {
padding: 25px 0 34px
}
.equipment-lifecycle-management .heroGrid {
gap: 21px
}
.equipment-lifecycle-management .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.equipment-lifecycle-management .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.equipment-lifecycle-management .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.equipment-lifecycle-management .hero .actions {
gap: 8px;
margin-top: 23px
}
.equipment-lifecycle-management .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.equipment-lifecycle-management .hero .micro {
font-size: 11px
}
.equipment-lifecycle-management .heroPills {
gap: 6px;
margin-top: 16px
}
.equipment-lifecycle-management .heroPills span {
font-size: 9px
}
.equipment-lifecycle-management .heroVisual {
max-width: 420px
}
.equipment-lifecycle-management .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.equipment-lifecycle-management .trust {
padding: 22px 0
}
.equipment-lifecycle-management .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.equipment-lifecycle-management .outcomes {
gap: 12px
}
.equipment-lifecycle-management .outcome {
padding: 19px
}
.equipment-lifecycle-management .outcome h3 {
font-size: 17px
}
.equipment-lifecycle-management .outcome p {
font-size: 13px
}
.equipment-lifecycle-management .feature {
gap: 27px
}
.equipment-lifecycle-management .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.equipment-lifecycle-management .fl {
gap: 11px 13px;
margin-top: 21px
}
.equipment-lifecycle-management .fi {
font-size: 12px
}
.equipment-lifecycle-management .textLink {
font-size: 13px
}
.equipment-lifecycle-management .visual {
padding: 15px;
border-radius: 16px
}
.equipment-lifecycle-management .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.equipment-lifecycle-management .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.equipment-lifecycle-management .uiHeading .icon2 {
width: 18px;
height: 18px
}
.equipment-lifecycle-management .uiFoot {
font-size: 9px
}
.equipment-lifecycle-management .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.equipment-lifecycle-management .aiLead {
font-size: 15px;
line-height: 1.8
}
.equipment-lifecycle-management .aiMini {
gap: 11px;
margin-top: 23px
}
.equipment-lifecycle-management .aiMini article {
padding: 16px
}
.equipment-lifecycle-management .aiMini h3 {
font-size: 15px
}
.equipment-lifecycle-management .aiMini p {
font-size: 12px
}
.equipment-lifecycle-management .aiNote {
font-size: 10px
}
.equipment-lifecycle-management .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.equipment-lifecycle-management .connectedCard {
padding: 23px
}
.equipment-lifecycle-management .connectedCard h3 {
margin: 15px 0 9px
}
.equipment-lifecycle-management .connectedCard p {
font-size: 14px
}
.equipment-lifecycle-management .handoffBand {
padding: 20px
}
.equipment-lifecycle-management .handoffBand>div {
align-items: flex-start;
gap: 10px
}
.equipment-lifecycle-management .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.equipment-lifecycle-management .handoffBand small {
font-size: 11px
}
.equipment-lifecycle-management .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.equipment-lifecycle-management .featureGrid {
gap: 13px
}
.equipment-lifecycle-management .featureCard {
padding: 21px
}
.equipment-lifecycle-management .featureCard h3 {
font-size: 17px
}
.equipment-lifecycle-management .featureCard p {
font-size: 13px
}
.equipment-lifecycle-management .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.equipment-lifecycle-management .toolCard {
padding: 19px 15px;
min-height: 155px
}
.equipment-lifecycle-management .toolCard strong {
font-size: 15px
}
.equipment-lifecycle-management .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.equipment-lifecycle-management .toolCard:last-child .toolArrow {
top: 31px
}
.equipment-lifecycle-management .toolCard:last-child strong {
padding-right: 25px
}
.equipment-lifecycle-management .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.equipment-lifecycle-management .useCases {
gap: 13px
}
.equipment-lifecycle-management .useCase {
padding: 21px 18px
}
.equipment-lifecycle-management .useCase h3 {
font-size: 17px
}
.equipment-lifecycle-management .useCase p {
font-size: 13px
}
.equipment-lifecycle-management .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.equipment-lifecycle-management .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.equipment-lifecycle-management .roleCard:last-child {
padding-bottom: 0
}
.equipment-lifecycle-management .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.equipment-lifecycle-management .roleCard>strong {
font-size: 14px
}
.equipment-lifecycle-management .roleCard p {
font-size: 14px
}
.equipment-lifecycle-management .workflowBand {
padding: 28px 0
}
.equipment-lifecycle-management .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.equipment-lifecycle-management .workflowLead {
font-size: 18px
}
.equipment-lifecycle-management .workflowStep strong {
font-size: 14px
}
.equipment-lifecycle-management .workflowStep p {
font-size: 10px
}
.equipment-lifecycle-management .faq .sectionHead {
margin-bottom: 25px
}
.equipment-lifecycle-management details {
padding: 16px
}
.equipment-lifecycle-management .faqList {
gap: 10px
}
.equipment-lifecycle-management summary {
font-size: 14px;
gap: 14px
}
.equipment-lifecycle-management .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
.equipment-lifecycle-management .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.equipment-lifecycle-management .final h2 {
font-size: 32px
}
.equipment-lifecycle-management .final p {
font-size: 14px;
line-height: 1.8
}
.equipment-lifecycle-management .final .ey {
font-size: 9px
}
.equipment-lifecycle-management .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.equipment-lifecycle-management .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.equipment-lifecycle-management .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
.equipment-lifecycle-management .outcomes,
.equipment-lifecycle-management .featureGrid,
.equipment-lifecycle-management .useCases {
grid-template-columns: 1fr
}
.equipment-lifecycle-management .outcome {
padding: 23px
}
.equipment-lifecycle-management .outcome h3 {
font-size: 18px
}
.equipment-lifecycle-management .outcome p {
font-size: 14px
}
.equipment-lifecycle-management .fl {
grid-template-columns: 1fr;
gap: 10px
}
.equipment-lifecycle-management .fi {
font-size: 13px
}
.equipment-lifecycle-management .aiMini {
grid-template-columns: 1fr
}
.equipment-lifecycle-management .aiMini h3 {
font-size: 17px
}
.equipment-lifecycle-management .aiMini p {
font-size: 13px
}
.equipment-lifecycle-management .aiMini article {
padding: 19px
}
.equipment-lifecycle-management .featureCard h3,
.equipment-lifecycle-management .useCase h3 {
font-size: 19px
}
.equipment-lifecycle-management .featureCard p,
.equipment-lifecycle-management .useCase p {
font-size: 14px
}
.equipment-lifecycle-management .toolsGrid {
grid-template-columns: 1fr
}
.equipment-lifecycle-management .toolCard,
.equipment-lifecycle-management .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.equipment-lifecycle-management .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.equipment-lifecycle-management .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.equipment-lifecycle-management .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.equipment-lifecycle-management .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.equipment-lifecycle-management .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.equipment-lifecycle-management .toolArrow,
.equipment-lifecycle-management .toolCard:last-child .toolArrow {
top: 30px
}
.equipment-lifecycle-management .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.equipment-lifecycle-management .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.equipment-lifecycle-management h2 {
font-size: 30px
}
.equipment-lifecycle-management .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.equipment-lifecycle-management .hero h1 {
font-size: 31px
}
.equipment-lifecycle-management .heroPills span {
font-size: 8px
}
.equipment-lifecycle-management .heroPills {
gap: 5px
}
.equipment-lifecycle-management .uiHeading {
font-size: 11px
}
.equipment-lifecycle-management .uiHeading>.pill {
font-size: 7px
}
.equipment-lifecycle-management .visual {
padding: 12px
}
.equipment-lifecycle-management .final {
padding: 26px 20px
}
.equipment-lifecycle-management .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.equipment-lifecycle-management * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.equipment-lifecycle-management section {
padding: 24px 0
}
.equipment-lifecycle-management .hero,
.equipment-lifecycle-management .soft {
background: #fff
}
.equipment-lifecycle-management .dark,
.equipment-lifecycle-management .workflowBand,
.equipment-lifecycle-management .final {
background: #fff;
color: #11283A
}
.equipment-lifecycle-management .dark h2,
.equipment-lifecycle-management .dark h3,
.equipment-lifecycle-management .final h2 {
color: #11283A
}
.equipment-lifecycle-management .dark p,
.equipment-lifecycle-management .final p {
color: #52697C
}
.equipment-lifecycle-management .btn {
display: none
}
.equipment-lifecycle-management .visual,
.equipment-lifecycle-management .outcome,
.equipment-lifecycle-management .featureCard,
.equipment-lifecycle-management details {
break-inside: avoid
}
.equipment-lifecycle-management .heroImage {
max-width: 380px
}
.equipment-lifecycle-management .heroVisual {
justify-self: center
}
}
.equipment-lifecycle-management .rentalLifecycleSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.equipment-lifecycle-management .rentalLifecycleSkip:focus {
top: 12px
}
.equipment-lifecycle-management .dark .textLink {
color: #FFF1BD
}
.equipment-lifecycle-management .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
.equipment-lifecycle-management .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.equipment-lifecycle-management .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
.equipment-lifecycle-management .supportStrip .icon2 {
width: 19px;
height: 19px;
color: var(--navy)
}
.equipment-lifecycle-management .workflowStep {
min-width: 0
}
.equipment-lifecycle-management .featureCopy>p {
max-width: 580px
}
.equipment-lifecycle-management .toolCard strong {
padding-right: 12px
}
.equipment-lifecycle-management .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
.equipment-lifecycle-management .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.equipment-lifecycle-management .supportStrip {
gap: 7px
}
.equipment-lifecycle-management .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
.equipment-lifecycle-management .supportStrip .icon2 {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
.equipment-lifecycle-management .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} .equipment-lifecycle-management .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0
}
.equipment-lifecycle-management .supportStrip>span {
min-width: 0
}
.equipment-lifecycle-management .pill.amber {
background: #FFF7D6;
color: #745604
}
.equipment-lifecycle-management .pill.gray {
background: #EDF1F4;
color: #566A78
}
.equipment-lifecycle-management .lcHeader {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
border-bottom: 1px solid var(--line)
}
.equipment-lifecycle-management .lcHeader>div {
min-width: 0;
flex: 1
}
.equipment-lifecycle-management .lcHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
line-height: 1.4;
letter-spacing: -.025em
}
.equipment-lifecycle-management .lcHeader small {
display: block;
color: var(--muted);
font-size: 10px;
line-height: 1.5;
margin-top: 4px
}
.equipment-lifecycle-management .lcAssetIcon {
display: grid;
place-items: center;
flex: 0 0 45px;
width: 45px;
height: 50px;
border: 1px solid #CEE3ED;
border-radius: 10px;
background: #F0F8FC;
color: #23779D
}
.equipment-lifecycle-management .lcAssetIcon .icon2 {
width: 28px;
height: 28px
}
.equipment-lifecycle-management .lcTabs {
display: flex;
gap: 20px;
padding: 0 18px;
border-bottom: 1px solid var(--line);
font-size: 10px;
color: var(--muted)
}
.equipment-lifecycle-management .lcTabs>span {
padding: 11px 0
}
.equipment-lifecycle-management .lcTabs>.active {
border-bottom: 2px solid var(--brand);
color: var(--navy);
font-weight: 750
}
.equipment-lifecycle-management .lcFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 17px 20px;
padding: 18px
}
.equipment-lifecycle-management .lcFields>div {
min-width: 0
}
.equipment-lifecycle-management .lcFields span {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5
}
.equipment-lifecycle-management .lcFields b {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.5;
margin-top: 4px;
font-weight: 700
}
.equipment-lifecycle-management .lcFiles {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 13px 18px;
background: #F8FCFE;
border-top: 1px solid var(--line)
}
.equipment-lifecycle-management .lcFiles>span {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #D5E6EF;
border-radius: 7px;
background: white;
color: #446D84;
font-size: 9px;
line-height: 1.5;
padding: 7px 8px
}
.equipment-lifecycle-management .lcFiles .icon2 {
width: 16px;
height: 16px
}
.equipment-lifecycle-management .lcTimeline {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
margin-top: 13px
}
.equipment-lifecycle-management .lcTimeline>div {
position: relative;
min-width: 0;
padding: 12px 9px;
border: 1px solid #D7E6EE;
border-radius: 9px;
background: #fff;
color: #567487;
line-height: 1.5
}
.equipment-lifecycle-management .lcTimeline b {
font-size: 10px;
display: block;
color: var(--navy);
margin: 6px 0 4px
}
.equipment-lifecycle-management .lcTimeline small {
font-size: 8px;
display: block
}
.equipment-lifecycle-management .lcTimeline .icon2 {
height: 19px;
width: 19px;
color: #13815D
}
.equipment-lifecycle-management .lcTimeline .current {
border-color: #9ED3EB;
background: #EAF7FE
}
.equipment-lifecycle-management .lcTimeline .future {
background: #F9FBFC;
border-style: dashed
}
.equipment-lifecycle-management .lcTimeline .future .icon2 {
color: #899CA8
}
.equipment-lifecycle-management .lcMetricGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 15px
}
.equipment-lifecycle-management .lcMetricGrid>div {
border: 1px solid #D4E6F0;
border-radius: 9px;
background: #F0F9FE;
padding: 12px 10px;
min-width: 0
}
.equipment-lifecycle-management .lcMetricGrid>div:nth-child(2) {
background: #FFFBEF;
border-color: #EADFBA
}
.equipment-lifecycle-management .lcMetricGrid>div:nth-child(3) {
background: #EFF9F4;
border-color: #CDE5D8
}
.equipment-lifecycle-management .lcMetricGrid span {
font-size: 9px;
color: #607487;
line-height: 1.4;
display: block
}
.equipment-lifecycle-management .lcMetricGrid strong {
display: block;
color: var(--navy);
font-size: 27px;
letter-spacing: -.04em;
line-height: 1.3;
margin-top: 5px
}
.equipment-lifecycle-management .lcMeter {
margin: 0 15px 16px;
border: 1px solid #D0E4EE;
background: #F8FCFE;
border-radius: 10px;
padding: 15px
}
.equipment-lifecycle-management .lcMeterTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: #466A80;
font-size: 10px;
line-height: 1.5;
margin-bottom: 12px
}
.equipment-lifecycle-management .lcTrack {
height: 9px;
background: #E1EDF3;
border-radius: 99px;
overflow: hidden
}
.equipment-lifecycle-management .lcTrack>span {
display: block;
height: 100%;
width: 93%;
background: #00A8F8;
border-radius: 99px
}
.equipment-lifecycle-management .lcMeterLabels {
display: flex;
justify-content: space-between;
font-size: 8px;
color: #607487;
line-height: 1.5;
margin-top: 7px
}
.equipment-lifecycle-management .lcRows {
padding: 0 17px
}
.equipment-lifecycle-management .lcRow {
display: grid;
grid-template-columns: 29px minmax(0, 1fr) auto;
gap: 10px;
padding: 15px 0;
align-items: center;
min-width: 0;
border-top: 1px solid #E2EDF3
}
.equipment-lifecycle-management .lcRow>.icon2 {
width: 21px;
height: 21px;
color: #367D9F
}
.equipment-lifecycle-management .lcRow>div {
min-width: 0
}
.equipment-lifecycle-management .lcRow strong {
display: block;
font-size: 11px;
line-height: 1.5;
color: var(--navy)
}
.equipment-lifecycle-management .lcRow small {
display: block;
font-size: 9px;
color: #607487;
margin-top: 4px;
line-height: 1.5
}
.equipment-lifecycle-management .lcRow>b {
font-size: 12px;
color: var(--navy)
}
.equipment-lifecycle-management .lcFoot {
display: flex;
align-items: flex-start;
gap: 8px;
background: #F4FAFD;
border-top: 1px solid var(--line);
padding: 13px 17px;
font-size: 10px;
line-height: 1.65;
color: #4C6D81
}
.equipment-lifecycle-management .lcFoot .icon2 {
width: 16px;
height: 16px;
color: #168160;
margin-top: 2px
}
.equipment-lifecycle-management .lcNote {
background: #FFFBEF;
border: 1px solid #EADBAB;
border-radius: 10px;
padding: 13px 15px;
margin-top: 13px;
color: #79652F;
font-size: 10px;
line-height: 1.65
}
.equipment-lifecycle-management .lcNote b {
display: block;
margin-bottom: 4px
}
.equipment-lifecycle-management .lcConfig {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 15px 17px;
border-bottom: 1px solid var(--line);
background: #F7FBFE
}
.equipment-lifecycle-management .lcConfig>span {
font-size: 8px;
color: #637F90;
line-height: 1.5;
min-width: 0
}
.equipment-lifecycle-management .lcConfig b {
display: block;
color: var(--navy);
font-size: 12px;
margin-top: 3px
}
.equipment-lifecycle-management .lcChart {
padding: 20px 17px 16px
}
.equipment-lifecycle-management .lcChartTitle {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 16px;
font-size: 11px;
color: #244D64
}
.equipment-lifecycle-management .lcChartTitle small {
font-size: 8px;
color: var(--muted)
}
.equipment-lifecycle-management .lcBars {
height: 138px;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
align-items: end
}
.equipment-lifecycle-management .lcBar {
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
height: 100%;
gap: 7px;
font-size: 8px;
line-height: 1.4;
color: #607487;
min-width: 0
}
.equipment-lifecycle-management .lcBar b {
font-size: 9px;
color: #507082;
font-weight: 650;
white-space: nowrap
}
.equipment-lifecycle-management .lcBar i {
height: var(--bar);
display: block;
background: #CFE7F3;
width: 100%;
max-width: 41px;
border-radius: 5px 5px 0 0;
min-height: 8px
}
.equipment-lifecycle-management .lcBar.current i {
background: #00A8F8
}
.equipment-lifecycle-management .lcBar.current b {
color: #0077B1;
font-weight: 800
}
.equipment-lifecycle-management .lcValueSummary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 15px 17px;
background: #F0F9FD;
border-top: 1px solid #D1E6EF;
border-bottom: 1px solid #D1E6EF
}
.equipment-lifecycle-management .lcValueSummary span {
font-size: 9px;
line-height: 1.5;
color: #59798C
}
.equipment-lifecycle-management .lcValueSummary strong {
font-size: 26px;
display: block;
line-height: 1.3;
margin-top: 4px;
color: var(--navy);
letter-spacing: -.04em
}
.equipment-lifecycle-management .lcFormula {
font-size: 9px;
line-height: 1.7;
padding: 12px 17px;
color: #607487
}
.equipment-lifecycle-management .lcCostStrip {
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
background: #0D2939;
color: #fff;
border-radius: 11px;
margin-top: 13px
}
.equipment-lifecycle-management .lcCostStrip>.icon2 {
color: var(--yellow)
}
.equipment-lifecycle-management .lcCostStrip>div {
flex: 1;
min-width: 0
}
.equipment-lifecycle-management .lcCostStrip span {
font-size: 10px;
display: block;
line-height: 1.5
}
.equipment-lifecycle-management .lcCostStrip small {
font-size: 8px;
color: #BCD4E1;
line-height: 1.5;
display: block;
margin-top: 3px
}
.equipment-lifecycle-management .lcCostStrip>b {
font-size: 22px;
line-height: 1.3;
letter-spacing: -.035em
}
.equipment-lifecycle-management .lcReviewList {
padding: 14px 17px;
background: #F5FBF8;
border-bottom: 1px solid #D1E4DB;
display: grid;
gap: 9px
}
.equipment-lifecycle-management .lcReviewList>span {
font-size: 10px;
color: #3E6E5A;
display: flex;
align-items: center;
gap: 7px;
line-height: 1.5
}
.equipment-lifecycle-management .lcReviewList .icon2 {
height: 14px;
width: 14px;
color: #12815B
}
.equipment-lifecycle-management .lcLedger {
padding: 5px 17px
}
.equipment-lifecycle-management .lcLedger>div {
display: flex;
justify-content: space-between;
gap: 15px;
padding: 12px 0;
border-bottom: 1px solid #E3EDF3;
font-size: 10px;
color: #526F82;
line-height: 1.5
}
.equipment-lifecycle-management .lcLedger b {
font-size: 12px;
color: var(--navy)
}
.equipment-lifecycle-management .lcLedger>.total {
font-weight: 750;
border-bottom: 0
}
.equipment-lifecycle-management .lcLedger>.total b {
font-size: 22px;
letter-spacing: -.04em;
color: #14795B
}
.equipment-lifecycle-management .lcDisposalRef {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 17px;
background: #F1F8FC;
border-top: 1px solid var(--line);
font-size: 10px;
color: #46697F
}
.equipment-lifecycle-management .lcDisposalRef b {
color: var(--navy)
}
.equipment-lifecycle-management .lcAiPanel {
border: 1px solid #385467;
border-radius: 17px;
background: #fff;
color: #11283A;
overflow: hidden
}
.equipment-lifecycle-management .lcAiHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 18px;
border-bottom: 1px solid #D9E8F1
}
.equipment-lifecycle-management .lcAiHead>span:first-child {
display: flex;
gap: 8px;
align-items: center;
font-size: 17px;
font-weight: 800;
color: var(--navy)
}
.equipment-lifecycle-management .lcAiHead .icon2 {
color: #D6A800
}
.equipment-lifecycle-management .lcAiBody {
padding: 18px
}
.equipment-lifecycle-management .lcPrompt {
font-size: 13px;
line-height: 1.65;
color: #335B71;
background: #EAF7FE;
border: 1px solid #C8E2EF;
padding: 14px;
border-radius: 11px 11px 2px 11px;
margin: 0 0 17px 25px
}
.equipment-lifecycle-management .lcReply {
border: 1px solid #D9E8F1;
border-radius: 11px;
padding: 17px;
color: #426A80
}
.equipment-lifecycle-management .lcReply>strong {
font-size: 17px;
line-height: 1.45;
display: block;
color: var(--navy);
margin-top: 8px
}
.equipment-lifecycle-management .lcReply p {
font-size: 11px;
line-height: 1.8;
margin-top: 11px;
color: #607487
}
.equipment-lifecycle-management .lcAiFacts {
margin-top: 13px;
display: grid;
gap: 9px
}
.equipment-lifecycle-management .lcAiFacts>span {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
padding: 10px;
border: 1px solid #DAE8EE;
border-radius: 7px;
background: #F7FBFD
}
.equipment-lifecycle-management .lcAiFacts .icon2 {
height: 15px;
width: 15px
}
.equipment-lifecycle-management .lcAiFacts b {
margin-left: auto;
color: var(--navy)
}
.equipment-lifecycle-management .lcSourceChips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 14px
}
.equipment-lifecycle-management .lcSourceChips>span {
font-size: 8px;
color: #56798E;
background: #F3F8FB;
border: 1px solid #DCEAF0;
border-radius: 6px;
padding: 5px 7px;
display: flex;
align-items: center;
gap: 5px
}
.equipment-lifecycle-management .lcSourceChips .icon2 {
width: 13px;
height: 13px
}
.equipment-lifecycle-management .lcDraftAction {
margin-top: 14px;
border-radius: 9px;
background: #FFF7D6;
padding: 13px;
display: flex;
gap: 8px;
align-items: center;
color: #796324;
font-size: 11px;
line-height: 1.6;
font-weight: 650
}
.equipment-lifecycle-management .lcDraftAction .icon2 {
width: 17px;
height: 17px
}
.equipment-lifecycle-management .lcAiReview {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 15px 18px;
background: #EAF8F3;
border-top: 1px solid #CDDFD4;
font-size: 10px;
line-height: 1.6;
color: #2F7456
}
.equipment-lifecycle-management .lcAiReview .icon2 {
width: 17px;
height: 17px;
margin-top: 1px
}
@media (max-width:1150px) and (min-width:981px) {
.equipment-lifecycle-management .lcHeader {
padding: 14px;
gap: 9px
}
.equipment-lifecycle-management .lcHeader strong {
font-size: 16px
}
.equipment-lifecycle-management .lcMetricGrid strong {
font-size: 24px
}
.equipment-lifecycle-management .lcMetricGrid {
padding: 12px;
gap: 7px
}
.equipment-lifecycle-management .lcTimeline>div {
padding: 10px 7px
}
.equipment-lifecycle-management .lcTimeline b {
font-size: 9px
}
.equipment-lifecycle-management .lcChart {
padding: 18px 14px
}
.equipment-lifecycle-management .lcBars {
gap: 10px
}
}
@media(max-width:640px) {
.equipment-lifecycle-management .lcHeader {
padding: 14px;
gap: 9px
}
.equipment-lifecycle-management .lcHeader strong {
font-size: 16px
}
.equipment-lifecycle-management .lcHeader small {
font-size: 9px
}
.equipment-lifecycle-management .lcAssetIcon {
height: 43px;
width: 38px;
flex-basis: 38px
}
.equipment-lifecycle-management .lcAssetIcon .icon2 {
width: 24px;
height: 24px
}
.equipment-lifecycle-management .lcTabs {
padding: 0 13px;
gap: 17px;
font-size: 9px
}
.equipment-lifecycle-management .lcFields {
padding: 15px;
gap: 15px 12px
}
.equipment-lifecycle-management .lcFields b {
font-size: 11px
}
.equipment-lifecycle-management .lcFiles {
padding: 12px;
gap: 7px
}
.equipment-lifecycle-management .lcFiles>span {
font-size: 8px;
padding: 7px
}
.equipment-lifecycle-management .lcTimeline {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px
}
.equipment-lifecycle-management .lcTimeline>div {
padding: 13px
}
.equipment-lifecycle-management .lcTimeline b {
font-size: 11px
}
.equipment-lifecycle-management .lcTimeline small {
font-size: 9px
}
.equipment-lifecycle-management .lcMetricGrid {
padding: 12px;
gap: 7px
}
.equipment-lifecycle-management .lcMetricGrid>div {
padding: 10px 8px
}
.equipment-lifecycle-management .lcMetricGrid span {
font-size: 8px
}
.equipment-lifecycle-management .lcMetricGrid strong {
font-size: 23px
}
.equipment-lifecycle-management .lcMeter {
margin: 0 12px 12px;
padding: 13px
}
.equipment-lifecycle-management .lcMeterTitle {
font-size: 9px
}
.equipment-lifecycle-management .lcRows {
padding: 0 13px
}
.equipment-lifecycle-management .lcRow {
gap: 8px;
padding: 13px 0;
grid-template-columns: 23px minmax(0, 1fr) auto
}
.equipment-lifecycle-management .lcRow strong {
font-size: 10px
}
.equipment-lifecycle-management .lcRow small {
font-size: 8px
}
.equipment-lifecycle-management .lcFoot {
padding: 12px 13px;
font-size: 9px
}
.equipment-lifecycle-management .lcNote {
font-size: 9px;
padding: 12px
}
.equipment-lifecycle-management .lcConfig {
padding: 12px;
gap: 9px
}
.equipment-lifecycle-management .lcConfig b {
font-size: 11px
}
.equipment-lifecycle-management .lcChart {
padding: 16px 13px
}
.equipment-lifecycle-management .lcChartTitle {
font-size: 10px
}
.equipment-lifecycle-management .lcBars {
gap: 9px;
height: 124px
}
.equipment-lifecycle-management .lcBar b {
font-size: 8px
}
.equipment-lifecycle-management .lcValueSummary {
padding: 13px;
gap: 9px
}
.equipment-lifecycle-management .lcValueSummary strong {
font-size: 24px
}
.equipment-lifecycle-management .lcValueSummary span {
font-size: 8px
}
.equipment-lifecycle-management .lcFormula {
padding: 11px 13px;
font-size: 8px
}
.equipment-lifecycle-management .lcCostStrip {
padding: 13px;
gap: 8px
}
.equipment-lifecycle-management .lcCostStrip>b {
font-size: 21px
}
.equipment-lifecycle-management .lcReviewList {
padding: 13px
}
.equipment-lifecycle-management .lcLedger {
padding: 4px 13px
}
.equipment-lifecycle-management .lcDisposalRef {
padding: 13px
}
.equipment-lifecycle-management .lcAiHead {
padding: 15px
}
.equipment-lifecycle-management .lcAiHead .pill {
font-size: 8px
}
.equipment-lifecycle-management .lcAiBody {
padding: 14px
}
.equipment-lifecycle-management .lcPrompt {
font-size: 12px;
padding: 12px;
margin-left: 12px
}
.equipment-lifecycle-management .lcReply {
padding: 14px
}
.equipment-lifecycle-management .lcReply>strong {
font-size: 16px
}
.equipment-lifecycle-management .lcAiFacts>span {
font-size: 9px;
padding: 9px
}
.equipment-lifecycle-management .lcDraftAction {
font-size: 10px;
padding: 12px
}
.equipment-lifecycle-management .lcAiReview {
font-size: 9px;
padding: 13px 14px
}
}
@media(max-width:420px) {
.equipment-lifecycle-management .lcHeader>.pill {
font-size: 8px;
padding: 4px 6px
}
.equipment-lifecycle-management .lcMetricGrid strong {
font-size: 21px
}
.equipment-lifecycle-management .lcChartTitle {
align-items: flex-start;
flex-direction: column;
gap: 4px
}
.equipment-lifecycle-management .lcCostStrip {
flex-wrap: wrap
}
.equipment-lifecycle-management .lcCostStrip>b {
margin-left: 34px
}
.equipment-lifecycle-management .lcConfig {
grid-template-columns: 1fr 1fr
}
.equipment-lifecycle-management .lcConfig>span:first-child {
grid-column: 1/-1
}
.equipment-lifecycle-management .lcConfig b {
font-size: 12px
}
.equipment-lifecycle-management .lcConfig>span {
font-size: 9px
}
}
@media(max-width:360px) {
.equipment-lifecycle-management .lcHeader>.pill {
display: none
}
.equipment-lifecycle-management .lcHeader strong {
font-size: 15px
}
.equipment-lifecycle-management .lcMetricGrid {
gap: 5px;
padding: 10px
}
.equipment-lifecycle-management .lcMetricGrid>div {
padding: 9px 6px
}
.equipment-lifecycle-management .lcMetricGrid strong {
font-size: 20px
}
.equipment-lifecycle-management .lcMetricGrid span {
font-size: 7px
}
.equipment-lifecycle-management .lcValueSummary strong {
font-size: 23px
}
.equipment-lifecycle-management .lcBars {
gap: 7px
}
.equipment-lifecycle-management .lcBar {
font-size: 7px
}
.equipment-lifecycle-management .lcBar b {
font-size: 7px
}
.equipment-lifecycle-management .lcMeterTitle {
flex-wrap: wrap
}
.equipment-lifecycle-management .lcRow {
gap: 6px
}
.equipment-lifecycle-management .lcRow .pill {
font-size: 7px
}
.equipment-lifecycle-management .lcAiHead .pill {
font-size: 7px
}
.equipment-lifecycle-management .lcSourceChips>span {
font-size: 7px
}
}  #rental-tracking-page * {
box-sizing: border-box
}
#rental-tracking-page a {
text-decoration: none
}
#rental-tracking-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px
}
#rental-tracking-page .wrap.faq {
max-width: 900px
}
#rental-tracking-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#rental-tracking-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0;
background: transparent;
}
#rental-tracking-page a:focus-visible,
#rental-tracking-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#rental-tracking-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#rental-tracking-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
#rental-tracking-page .btn .icon {
width: 17px;
height: 17px
}
#rental-tracking-page .btn.black {
background: #0B0B0B;
color: #fff
}
#rental-tracking-page .btn.black:hover {
background: #303030
}
#rental-tracking-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#rental-tracking-page .btn.yellow:hover {
background: #FFD454
}
#rental-tracking-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#rental-tracking-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#rental-tracking-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#rental-tracking-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#rental-tracking-page .textLink .icon {
width: 17px;
height: 17px
}
#rental-tracking-page .textLink:hover {
color: var(--brand2)
}
#rental-tracking-page .soft {
background: var(--sky2)
}
#rental-tracking-page .sectionHead { margin-bottom: 36px
}
#rental-tracking-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#rental-tracking-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#rental-tracking-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#rental-tracking-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#rental-tracking-page .heroGrid>*,
#rental-tracking-page .feature>*,
#rental-tracking-page .aiGrid>* {
min-width: 0
}
#rental-tracking-page .heroCopy {
min-width: 0
}
#rental-tracking-page .hero h1 {
max-width: 630px
}
#rental-tracking-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#rental-tracking-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#rental-tracking-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#rental-tracking-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#rental-tracking-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#rental-tracking-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#rental-tracking-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#rental-tracking-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#rental-tracking-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#rental-tracking-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#rental-tracking-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#rental-tracking-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#rental-tracking-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#rental-tracking-page .outcome:nth-child(3):before {
background: var(--green)
}
#rental-tracking-page .outcome:nth-child(4):before {
background: var(--purple)
}
#rental-tracking-page .outcome>.icon {
color: var(--navy)
}
#rental-tracking-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#rental-tracking-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#rental-tracking-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-tracking-page .feature.reverse .visual {
order: -1
}
#rental-tracking-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#rental-tracking-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#rental-tracking-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#rental-tracking-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#rental-tracking-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#rental-tracking-page .tick .icon {
height: 13px;
width: 13px
}
#rental-tracking-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#rental-tracking-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#rental-tracking-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#rental-tracking-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#rental-tracking-page .uiHeading .icon {
height: 19px;
width: 19px
}
#rental-tracking-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#rental-tracking-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#rental-tracking-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#rental-tracking-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#rental-tracking-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#rental-tracking-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#rental-tracking-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#rental-tracking-page .dark h2,
#rental-tracking-page .dark h3 {
color: white
}
#rental-tracking-page .dark .ey {
background: var(--yellow);
color: #111
}
#rental-tracking-page .dark .textLink {
color: #fff
}
#rental-tracking-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#rental-tracking-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-tracking-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#rental-tracking-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#rental-tracking-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#rental-tracking-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#rental-tracking-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#rental-tracking-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#rental-tracking-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#rental-tracking-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#rental-tracking-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#rental-tracking-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-tracking-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#rental-tracking-page .connectedCard h3 {
margin: 18px 0 11px
}
#rental-tracking-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#rental-tracking-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#rental-tracking-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#rental-tracking-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#rental-tracking-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#rental-tracking-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#rental-tracking-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#rental-tracking-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-tracking-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#rental-tracking-page .featureCard>.icon {
color: var(--navy)
}
#rental-tracking-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#rental-tracking-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-tracking-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#rental-tracking-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#rental-tracking-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#rental-tracking-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#rental-tracking-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#rental-tracking-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#rental-tracking-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#rental-tracking-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#rental-tracking-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#rental-tracking-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#rental-tracking-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#rental-tracking-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#rental-tracking-page .useCase>.icon {
color: var(--navy)
}
#rental-tracking-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#rental-tracking-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-tracking-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#rental-tracking-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#rental-tracking-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#rental-tracking-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#rental-tracking-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#rental-tracking-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#rental-tracking-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-tracking-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#rental-tracking-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#rental-tracking-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#rental-tracking-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#rental-tracking-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#rental-tracking-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#rental-tracking-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#rental-tracking-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#rental-tracking-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#rental-tracking-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#rental-tracking-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#rental-tracking-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#rental-tracking-page .ctaBtns .btn {
min-width: 219px
}
#rental-tracking-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#rental-tracking-page .btn.darkOutline:hover {
background: #252D33
}
#rental-tracking-page .final a:focus-visible {
outline-color: var(--yellow)
}
#rental-tracking-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#rental-tracking-page .heroGrid {
gap: 28px
}
#rental-tracking-page h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
#rental-tracking-page .hero .lead {
font-size: 16px
}
#rental-tracking-page .feature,
#rental-tracking-page .aiGrid {
gap: 30px
}
#rental-tracking-page .visual {
padding: 17px
}
#rental-tracking-page .toolCard {
padding: 21px 15px
}
#rental-tracking-page .toolCard strong {
font-size: 14px
}
#rental-tracking-page .handoffBand {
padding: 20px
}
#rental-tracking-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#rental-tracking-page section {
padding: 64px 0
}
#rental-tracking-page .hero {
padding: 34px 0 42px
}
#rental-tracking-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#rental-tracking-page .heroCopy {
max-width: 790px
}
#rental-tracking-page .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
#rental-tracking-page .hero .lead {
max-width: 760px
}
#rental-tracking-page .heroVisual {
max-width: 460px;
justify-self: center
}
#rental-tracking-page .feature,
#rental-tracking-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#rental-tracking-page .feature.reverse .visual {
order: 0
}
#rental-tracking-page .featureCopy {
max-width: 790px
}
#rental-tracking-page .visual {
max-width: 640px;
margin: 0 auto
}
#rental-tracking-page .outcomes,
#rental-tracking-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-tracking-page .connectedGrid {
gap: 13px
}
#rental-tracking-page .connectedCard {
padding: 22px
}
#rental-tracking-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-tracking-page .aiVisual {
max-width: 600px;
margin: auto
}
#rental-tracking-page .aiMini {
max-width: 780px
}
#rental-tracking-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#rental-tracking-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#rental-tracking-page .toolCard {
min-height: 145px
}
#rental-tracking-page .roleGrid {
gap: 20px
}
#rental-tracking-page .roleCard {
padding-right: 18px
}
#rental-tracking-page .roleCard h3 {
font-size: 20px
}
#rental-tracking-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#rental-tracking-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#rental-tracking-page .workflowLead br {
display: none
}
#rental-tracking-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#rental-tracking-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#rental-tracking-page .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
#rental-tracking-page .wrap {
width: calc(100% - 32px)
}
#rental-tracking-page section {
padding: 49px 0
}
#rental-tracking-page h2 {
font-size: 33px;
line-height: 1.15
}
#rental-tracking-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#rental-tracking-page .sectionHead {
margin-bottom: 27px
}
#rental-tracking-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#rental-tracking-page .hero {
padding: 25px 0 34px
}
#rental-tracking-page .heroGrid {
gap: 21px
}
#rental-tracking-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#rental-tracking-page .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
#rental-tracking-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#rental-tracking-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#rental-tracking-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#rental-tracking-page .hero .micro {
font-size: 11px
}
#rental-tracking-page .heroPills {
gap: 6px;
margin-top: 16px
}
#rental-tracking-page .heroPills span {
font-size: 9px
}
#rental-tracking-page .heroVisual {
max-width: 420px
}
#rental-tracking-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#rental-tracking-page .trust {
padding: 22px 0
}
#rental-tracking-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#rental-tracking-page .outcomes {
gap: 12px
}
#rental-tracking-page .outcome {
padding: 19px
}
#rental-tracking-page .outcome h3 {
font-size: 17px
}
#rental-tracking-page .outcome p {
font-size: 13px
}
#rental-tracking-page .feature {
gap: 27px
}
#rental-tracking-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#rental-tracking-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#rental-tracking-page .fi {
font-size: 12px
}
#rental-tracking-page .textLink {
font-size: 13px
}
#rental-tracking-page .visual {
padding: 15px;
border-radius: 16px
}
#rental-tracking-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#rental-tracking-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#rental-tracking-page .uiHeading .icon {
width: 18px;
height: 18px
}
#rental-tracking-page .uiFoot {
font-size: 9px
}
#rental-tracking-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#rental-tracking-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#rental-tracking-page .aiMini {
gap: 11px;
margin-top: 23px
}
#rental-tracking-page .aiMini article {
padding: 16px
}
#rental-tracking-page .aiMini h3 {
font-size: 15px
}
#rental-tracking-page .aiMini p {
font-size: 12px
}
#rental-tracking-page .aiNote {
font-size: 10px
}
#rental-tracking-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#rental-tracking-page .connectedCard {
padding: 23px
}
#rental-tracking-page .connectedCard h3 {
margin: 15px 0 9px
}
#rental-tracking-page .connectedCard p {
font-size: 14px
}
#rental-tracking-page .handoffBand {
padding: 20px
}
#rental-tracking-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#rental-tracking-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#rental-tracking-page .handoffBand small {
font-size: 11px
}
#rental-tracking-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#rental-tracking-page .featureGrid {
gap: 13px
}
#rental-tracking-page .featureCard {
padding: 21px
}
#rental-tracking-page .featureCard h3 {
font-size: 17px
}
#rental-tracking-page .featureCard p {
font-size: 13px
}
#rental-tracking-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#rental-tracking-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#rental-tracking-page .toolCard strong {
font-size: 15px
}
#rental-tracking-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#rental-tracking-page .toolCard:last-child .toolArrow {
top: 31px
}
#rental-tracking-page .toolCard:last-child strong {
padding-right: 25px
}
#rental-tracking-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#rental-tracking-page .useCases {
gap: 13px
}
#rental-tracking-page .useCase {
padding: 21px 18px
}
#rental-tracking-page .useCase h3 {
font-size: 17px
}
#rental-tracking-page .useCase p {
font-size: 13px
}
#rental-tracking-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#rental-tracking-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#rental-tracking-page .roleCard:last-child {
padding-bottom: 0
}
#rental-tracking-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#rental-tracking-page .roleCard>strong {
font-size: 14px
}
#rental-tracking-page .roleCard p {
font-size: 14px
}
#rental-tracking-page .workflowBand {
padding: 28px 0
}
#rental-tracking-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#rental-tracking-page .workflowLead {
font-size: 18px
}
#rental-tracking-page .workflowStep strong {
font-size: 14px
}
#rental-tracking-page .workflowStep p {
font-size: 10px
}
#rental-tracking-page .faq .sectionHead {
margin-bottom: 25px
}
#rental-tracking-page details {
padding: 16px
}
#rental-tracking-page .faqList {
gap: 10px
}
#rental-tracking-page summary {
font-size: 14px;
gap: 14px
}
#rental-tracking-page .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
#rental-tracking-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#rental-tracking-page .final h2 {
font-size: 32px
}
#rental-tracking-page .final p {
font-size: 14px;
line-height: 1.8
}
#rental-tracking-page .final .ey {
font-size: 9px
}
#rental-tracking-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#rental-tracking-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#rental-tracking-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#rental-tracking-page .outcomes,
#rental-tracking-page .featureGrid,
#rental-tracking-page .useCases {
grid-template-columns: 1fr
}
#rental-tracking-page .outcome {
padding: 23px
}
#rental-tracking-page .outcome h3 {
font-size: 18px
}
#rental-tracking-page .outcome p {
font-size: 14px
}
#rental-tracking-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#rental-tracking-page .fi {
font-size: 13px
}
#rental-tracking-page .aiMini {
grid-template-columns: 1fr
}
#rental-tracking-page .aiMini h3 {
font-size: 17px
}
#rental-tracking-page .aiMini p {
font-size: 13px
}
#rental-tracking-page .aiMini article {
padding: 19px
}
#rental-tracking-page .featureCard h3,
#rental-tracking-page .useCase h3 {
font-size: 19px
}
#rental-tracking-page .featureCard p,
#rental-tracking-page .useCase p {
font-size: 14px
}
#rental-tracking-page .toolsGrid {
grid-template-columns: 1fr
}
#rental-tracking-page .toolCard,
#rental-tracking-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#rental-tracking-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#rental-tracking-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#rental-tracking-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#rental-tracking-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#rental-tracking-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#rental-tracking-page .toolArrow,
#rental-tracking-page .toolCard:last-child .toolArrow {
top: 30px
}
#rental-tracking-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#rental-tracking-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#rental-tracking-page h2 {
font-size: 30px
}
#rental-tracking-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#rental-tracking-page .hero h1 {
font-size: 31px
}
#rental-tracking-page .heroPills span {
font-size: 8px
}
#rental-tracking-page .heroPills {
gap: 5px
}
#rental-tracking-page .uiHeading {
font-size: 11px
}
#rental-tracking-page .uiHeading>.pill {
font-size: 7px
}
#rental-tracking-page .visual {
padding: 12px
}
#rental-tracking-page .final {
padding: 26px 20px
}
#rental-tracking-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#rental-tracking-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#rental-tracking-page section {
padding: 24px 0
}
#rental-tracking-page .hero,
#rental-tracking-page .soft {
background: #fff
}
#rental-tracking-page .dark,
#rental-tracking-page .workflowBand,
#rental-tracking-page .final {
background: #fff;
color: #11283A
}
#rental-tracking-page .dark h2,
#rental-tracking-page .dark h3,
#rental-tracking-page .final h2 {
color: #11283A
}
#rental-tracking-page .dark p,
#rental-tracking-page .final p {
color: #52697C
}
#rental-tracking-page .btn {
display: none
}
#rental-tracking-page .visual,
#rental-tracking-page .outcome,
#rental-tracking-page .featureCard,
#rental-tracking-page details {
break-inside: avoid
}
#rental-tracking-page .heroImage {
max-width: 380px
}
#rental-tracking-page .heroVisual {
justify-self: center
}
}
.rentalTrackingSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.rentalTrackingSkip:focus {
top: 12px
}
#rental-tracking-page .dark .textLink {
color: #FFF1BD
}
#rental-tracking-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
#rental-tracking-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#rental-tracking-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#rental-tracking-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy)
}
#rental-tracking-page .workflowStep {
min-width: 0
}
#rental-tracking-page .featureCopy>p {
max-width: 580px
}
#rental-tracking-page .toolCard strong {
padding-right: 12px
}
#rental-tracking-page .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
#rental-tracking-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#rental-tracking-page .supportStrip {
gap: 7px
}
#rental-tracking-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#rental-tracking-page .supportStrip .icon {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
#rental-tracking-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} #rental-tracking-page .supportStrip>span {
min-width: 0
}
#rental-tracking-page .visual .uiHeading {
flex-wrap: wrap
}
#rental-tracking-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
#rental-tracking-page .trackPad {
padding: 17px
}
#rental-tracking-page .panelTop {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid var(--line)
}
#rental-tracking-page .panelTop strong {
font-size: 14px;
line-height: 1.4;
color: var(--navy)
}
#rental-tracking-page .panelTop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
#rental-tracking-page .trackTitle {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px
}
#rental-tracking-page .trackTitle strong {
display: block;
font-size: 18px;
color: var(--navy);
line-height: 1.35
}
#rental-tracking-page .trackTitle small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px
}
#rental-tracking-page .trackSearch {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 12px;
background: #F7FBFD;
font-size: 10px;
color: #49687A
}
#rental-tracking-page .trackSearch .icon {
width: 16px;
height: 16px
}
#rental-tracking-page .identityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 146px;
gap: 13px;
margin-top: 14px
}
#rental-tracking-page .identityRecord {
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px
}
#rental-tracking-page .identityRecord>strong {
display: block;
color: var(--navy);
font-size: 15px;
margin: 7px 0 13px
}
#rental-tracking-page .recordRow {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
border-bottom: 1px solid #E5EEF3;
padding: 9px 0;
font-size: 10px;
line-height: 1.5
}
#rental-tracking-page .recordRow>span {
color: var(--muted)
}
#rental-tracking-page .recordRow b {
text-align: right;
color: var(--navy);
font-weight: 700
}
#rental-tracking-page .recordRow:last-child {
border-bottom: 0
}
#rental-tracking-page .tagCard {
padding: 13px;
border: 1px solid #C8E5F2;
background: #F1FAFE;
border-radius: 10px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
gap: 11px;
text-align: center
}
#rental-tracking-page .tagCard>.icon {
width: 49px;
height: 49px;
color: #147FAC
}
#rental-tracking-page .barcode {
width: 100%;
height: 41px;
background: repeating-linear-gradient(90deg, #173E54 0 2px, transparent 2px 5px, #173E54 5px 6px, transparent 6px 10px, #173E54 10px 13px, transparent 13px 16px);
border: 6px solid white;
border-radius: 2px
}
#rental-tracking-page .tagCard strong {
font-size: 10px;
color: var(--navy)
}
#rental-tracking-page .tagCard small {
font-size: 8px;
color: var(--muted);
line-height: 1.6
}
#rental-tracking-page .scanModes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px;
margin-top: 13px
}
#rental-tracking-page .scanMode {
border: 1px solid var(--line);
border-radius: 9px;
background: white;
padding: 13px
}
#rental-tracking-page .scanMode>span {
display: flex;
gap: 7px;
align-items: center;
color: var(--navy);
font-size: 11px;
font-weight: 750
}
#rental-tracking-page .scanMode .icon {
width: 18px;
height: 18px
}
#rental-tracking-page .scanMode p {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
margin-top: 7px
}
#rental-tracking-page .trackNote {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 13px;
background: #F2FAFE;
border-top: 1px solid var(--line);
color: #496A7D;
font-size: 10px;
line-height: 1.65
}
#rental-tracking-page .trackNote .icon {
width: 17px;
height: 17px;
flex: none;
margin-top: 1px;
color: #16779E
}
#rental-tracking-page .trackNote.amber {
background: #FFFBED;
color: #7C6419;
border-color: #E9DCA5
}
#rental-tracking-page .trackMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
#rental-tracking-page .trackMetric {
padding: 13px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F4FAFD;
min-width: 0
}
#rental-tracking-page .trackMetric span {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5
}
#rental-tracking-page .trackMetric strong {
font-size: 29px;
line-height: 1.3;
letter-spacing: -.04em;
color: var(--navy);
display: block;
margin-top: 5px
}
#rental-tracking-page .trackMetric small {
font-size: 8px;
color: #607487;
display: block;
margin-top: 4px;
line-height: 1.5
}
#rental-tracking-page .trackMetric.green {
background: #F0FAF5;
border-color: #CAE5D8
}
#rental-tracking-page .trackMetric.amber {
background: #FFFBED;
border-color: #E9DDA8
}
#rental-tracking-page .locationPath {
display: grid;
grid-template-columns: 1fr 20px 1fr 20px 1fr;
align-items: center;
gap: 6px;
padding: 17px 0
}
#rental-tracking-page .locationNode {
text-align: center;
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px 6px;
background: #fff;
min-width: 0
}
#rental-tracking-page .locationNode>.icon {
color: var(--navy);
width: 24px;
height: 24px
}
#rental-tracking-page .locationNode strong {
display: block;
color: var(--navy);
font-size: 10px;
line-height: 1.5;
margin: 7px 0 3px
}
#rental-tracking-page .locationNode small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block
}
#rental-tracking-page .locationNode.current {
border-color: #93CDAF;
background: #F0FAF5
}
#rental-tracking-page .locationPath>.icon {
width: 17px;
height: 17px;
color: #6A8BA0
}
#rental-tracking-page .movementLog {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: #fff
}
#rental-tracking-page .movementLog>div {
display: grid;
grid-template-columns: 45px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 12px
}
#rental-tracking-page .movementLog>div+div {
border-top: 1px solid var(--line)
}
#rental-tracking-page .movementLog time {
font-size: 10px;
color: var(--navy);
font-weight: 750
}
#rental-tracking-page .movementLog strong {
display: block;
font-size: 11px;
color: var(--ink);
line-height: 1.4
}
#rental-tracking-page .movementLog small {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5;
margin-top: 3px
}
#rental-tracking-page .movementLog .pill {
font-size: 8px
}
#rental-tracking-page .miniReview {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #C3DFED;
background: #fff;
border-radius: 10px;
padding: 14px;
margin-top: 14px;
color: #3E667D;
font-size: 10px;
line-height: 1.7
}
#rental-tracking-page .miniReview .icon {
color: #087857;
width: 22px;
height: 22px
}
#rental-tracking-page .miniReview strong {
color: var(--navy)
}
#rental-tracking-page .returnRows {
padding: 0 15px
}
#rental-tracking-page .returnRow {
display: grid;
grid-template-columns: minmax(0, 1fr) 96px 87px;
align-items: center;
gap: 9px;
padding: 12px 0;
font-size: 10px;
line-height: 1.6
}
#rental-tracking-page .returnRow+.returnRow {
border-top: 1px solid var(--line)
}
#rental-tracking-page .returnRow.header {
font-size: 8px;
letter-spacing: .03em;
color: var(--muted);
font-weight: 700;
text-transform: uppercase
}
#rental-tracking-page .returnRow strong {
font-size: 11px;
color: var(--navy);
display: block
}
#rental-tracking-page .returnRow small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 3px
}
#rental-tracking-page .returnRow>.pill {
justify-self: start;
font-size: 8px
}
#rental-tracking-page .returnProgress {
padding: 15px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
gap: 10px
}
#rental-tracking-page .returnProgress strong {
color: var(--navy)
}
#rental-tracking-page .returnProgress>span {
font-size: 9px;
color: var(--muted)
}
#rental-tracking-page .returnBar {
height: 6px;
display: flex;
margin: 0 15px 14px;
border-radius: 4px;
overflow: hidden;
background: #EDF3F7
}
#rental-tracking-page .returnBar span {
background: #118A61;
width: 66.66667%
}
#rental-tracking-page .processSteps {
display: grid;
grid-template-columns: 1fr 16px 1fr 16px 1fr;
gap: 6px;
align-items: center;
margin-top: 13px;
background: #0D2939;
border-radius: 10px;
padding: 15px 11px;
color: #fff
}
#rental-tracking-page .processSteps>span {
font-size: 9px;
text-align: center;
line-height: 1.5
}
#rental-tracking-page .processSteps b {
display: block;
font-size: 10px;
color: #fff;
margin-bottom: 3px
}
#rental-tracking-page .processSteps .icon {
width: 15px;
height: 15px;
color: #93B7CB
}
#rental-tracking-page .inquiryColumns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px
}
#rental-tracking-page .inquiryResult {
padding: 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
min-width: 0
}
#rental-tracking-page .inquiryResult>span {
display: block;
font-size: 9px;
font-weight: 700;
color: var(--muted);
margin-bottom: 9px
}
#rental-tracking-page .inquiryResult>strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy)
}
#rental-tracking-page .inquiryResult>small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 5px
}
#rental-tracking-page .locator {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #F4FAFD;
padding: 14px;
margin-top: 14px
}
#rental-tracking-page .locator>.icon {
width: 32px;
height: 32px;
color: #098460
}
#rental-tracking-page .locator strong {
font-size: 12px;
color: var(--navy);
display: block
}
#rental-tracking-page .locator small {
font-size: 9px;
line-height: 1.6;
display: block;
margin-top: 4px;
color: var(--muted)
}
#rental-tracking-page .exportLine {
padding: 14px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: #F6FBFE
}
#rental-tracking-page .exportLine>span {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
color: var(--navy);
font-weight: 750
}
#rental-tracking-page .exportLine .icon {
width: 16px;
height: 16px
}
#rental-tracking-page .exportLine small {
font-size: 8px;
color: var(--muted)
}
#rental-tracking-page .assistantPanel {
border: 1px solid #485B6A;
border-radius: 16px;
overflow: hidden;
background: #fff;
color: var(--ink)
}
#rental-tracking-page .assistantHead {
display: flex;
align-items: center;
gap: 11px;
padding: 19px;
border-bottom: 1px solid var(--line)
}
#rental-tracking-page .assistantHead>.icon {
width: 26px;
height: 26px;
color: #16799F
}
#rental-tracking-page .assistantHead strong {
font-size: 14px;
display: block;
color: var(--navy)
}
#rental-tracking-page .assistantHead small {
font-size: 9px;
display: block;
color: var(--muted);
margin-top: 4px
}
#rental-tracking-page .assistantHead>.pill {
margin-left: auto
}
#rental-tracking-page .assistantBody {
padding: 19px
}
#rental-tracking-page .assistantPrompt {
background: #F1F8FC;
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
font-size: 12px;
color: #28536D;
line-height: 1.7;
margin-bottom: 16px
}
#rental-tracking-page .assistantLabel {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 800;
color: #657B89;
display: block;
margin-bottom: 10px
}
#rental-tracking-page .assistantAnswer {
border: 1px solid var(--line);
border-radius: 10px;
padding: 15px
}
#rental-tracking-page .assistantAnswer h3 {
font-size: 16px !important;
color: var(--navy) !important;
line-height: 1.4
}
#rental-tracking-page .assistantAnswer p {
color: #527182 !important;
font-size: 11px;
line-height: 1.7;
margin-top: 9px
}
#rental-tracking-page .assistantTasks {
display: grid;
gap: 10px;
margin: 15px 0
}
#rental-tracking-page .assistantTasks>div {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
line-height: 1.6;
color: #355E74
}
#rental-tracking-page .assistantTasks .icon {
width: 16px;
height: 16px;
color: #08734E;
margin-top: 1px
}
#rental-tracking-page .assistantReview {
padding: 14px 18px;
background: #FFF9DF;
border-top: 1px solid #E7D99E;
color: #725A18;
font-size: 10px;
display: flex;
gap: 8px;
align-items: center;
line-height: 1.65
}
#rental-tracking-page .assistantReview .icon {
width: 20px;
height: 20px
}
#rental-tracking-page .connectedCard .textLink {
font-size: 13px
}
#rental-tracking-page .returnRows,
#rental-tracking-page .trackPad,
#rental-tracking-page .assistantBody {
min-width: 0
}
#rental-tracking-page .dark .assistantPanel .pill {
color: #165C80
}
#rental-tracking-page .trackNote p {
margin: 0
}
#rental-tracking-page .final .btn.darkOutline {
background: transparent;
color: #fff
}
#rental-tracking-page .trackingSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui;
text-decoration: none
}
#rental-tracking-page .trackingSkip:focus {
top: 12px
}
@media(max-width:1150px) and (min-width:981px) {
#rental-tracking-page .identityLayout {
grid-template-columns: minmax(0, 1fr) 116px;
gap: 10px
}
#rental-tracking-page .trackPad {
padding: 13px
}
#rental-tracking-page .identityRecord {
padding: 11px
}
#rental-tracking-page .recordRow {
font-size: 9px;
gap: 6px
}
#rental-tracking-page .returnRow {
grid-template-columns: minmax(0, 1fr) 80px 78px;
font-size: 9px
}
#rental-tracking-page .returnRow strong {
font-size: 10px
}
}
@media(max-width:640px) {
#rental-tracking-page .trackPad {
padding: 13px
}
#rental-tracking-page .panelTop {
padding: 13px;
gap: 8px
}
#rental-tracking-page .panelTop strong {
font-size: 12px
}
#rental-tracking-page .panelTop small {
font-size: 8px
}
#rental-tracking-page .panelTop .pill {
font-size: 8px
}
#rental-tracking-page .identityLayout {
grid-template-columns: minmax(0, 1fr) 112px;
gap: 10px
}
#rental-tracking-page .identityRecord {
padding: 11px
}
#rental-tracking-page .identityRecord>strong {
font-size: 13px
}
#rental-tracking-page .recordRow {
font-size: 9px;
gap: 7px
}
#rental-tracking-page .tagCard {
padding: 10px;
gap: 9px
}
#rental-tracking-page .tagCard>.icon {
width: 39px;
height: 39px
}
#rental-tracking-page .scanModes {
gap: 9px
}
#rental-tracking-page .scanMode {
padding: 11px
}
#rental-tracking-page .scanMode>span {
font-size: 10px
}
#rental-tracking-page .scanMode p {
font-size: 9px
}
#rental-tracking-page .trackMetric {
padding: 11px 9px
}
#rental-tracking-page .trackMetric strong {
font-size: 26px
}
#rental-tracking-page .trackMetric span {
font-size: 8px
}
#rental-tracking-page .trackMetric small {
font-size: 7px
}
#rental-tracking-page .locationPath {
gap: 4px;
grid-template-columns: 1fr 13px 1fr 13px 1fr
}
#rental-tracking-page .locationPath>.icon {
width: 13px;
height: 13px
}
#rental-tracking-page .locationNode {
padding: 11px 5px
}
#rental-tracking-page .locationNode strong {
font-size: 9px
}
#rental-tracking-page .locationNode small {
font-size: 7px
}
#rental-tracking-page .movementLog>div {
padding: 11px 9px;
gap: 7px;
grid-template-columns: 35px minmax(0, 1fr) auto
}
#rental-tracking-page .movementLog strong {
font-size: 10px
}
#rental-tracking-page .movementLog small {
font-size: 8px
}
#rental-tracking-page .movementLog time {
font-size: 9px
}
#rental-tracking-page .movementLog .pill {
font-size: 7px;
padding: 4px 6px
}
#rental-tracking-page .returnRow {
grid-template-columns: minmax(0, 1fr) 79px 73px;
gap: 6px;
font-size: 9px
}
#rental-tracking-page .returnRow strong {
font-size: 10px
}
#rental-tracking-page .returnRow.header {
font-size: 7px
}
#rental-tracking-page .returnRow>.pill {
font-size: 7px;
padding: 5px 6px
}
#rental-tracking-page .returnRows {
padding: 0 12px
}
#rental-tracking-page .returnProgress {
padding: 13px;
font-size: 10px
}
#rental-tracking-page .returnProgress>span {
font-size: 8px
}
#rental-tracking-page .processSteps {
gap: 4px;
padding: 13px 8px;
grid-template-columns: 1fr 12px 1fr 12px 1fr
}
#rental-tracking-page .processSteps>span {
font-size: 8px
}
#rental-tracking-page .processSteps b {
font-size: 9px
}
#rental-tracking-page .processSteps .icon {
width: 12px;
height: 12px
}
#rental-tracking-page .inquiryColumns {
gap: 10px
}
#rental-tracking-page .inquiryResult {
padding: 12px
}
#rental-tracking-page .trackNote {
font-size: 9px;
padding: 12px
}
#rental-tracking-page .assistantHead {
padding: 15px;
gap: 9px
}
#rental-tracking-page .assistantHead .pill {
font-size: 7px
}
#rental-tracking-page .assistantBody {
padding: 14px
}
#rental-tracking-page .assistantPrompt {
padding: 12px;
font-size: 11px
}
#rental-tracking-page .assistantAnswer {
padding: 13px
}
#rental-tracking-page .assistantAnswer h3 {
font-size: 15px !important
}
#rental-tracking-page .assistantReview {
padding: 13px;
font-size: 9px
}
}
@media(max-width:420px) {
#rental-tracking-page .identityLayout {
grid-template-columns: 1fr
}
#rental-tracking-page .tagCard {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 8px 13px;
text-align: left;
padding: 12px
}
#rental-tracking-page .tagCard>.icon {
grid-row: 1/4;
width: 34px;
height: 34px
}
#rental-tracking-page .barcode {
height: 30px
}
#rental-tracking-page .tagCard small {
font-size: 8px
}
#rental-tracking-page .recordRow {
font-size: 10px
}
#rental-tracking-page .identityRecord>strong {
font-size: 15px
}
#rental-tracking-page .scanModes {
grid-template-columns: 1fr
}
#rental-tracking-page .scanMode p {
font-size: 11px
}
#rental-tracking-page .scanMode>span {
font-size: 12px
}
#rental-tracking-page .returnRow {
grid-template-columns: minmax(0, 1fr) 73px;
gap: 5px
}
#rental-tracking-page .returnRow.header {
display: none
}
#rental-tracking-page .returnRow>.dueCell {
grid-column: 1;
grid-row: auto;
font-size: 8px
}
#rental-tracking-page .returnRow>.pill {
grid-column: 2;
grid-row: 1/3;
align-self: center
}
#rental-tracking-page .returnRow {
position: relative
}
#rental-tracking-page .returnRow strong {
font-size: 11px
}
#rental-tracking-page .inquiryColumns {
grid-template-columns: 1fr
}
#rental-tracking-page .inquiryResult>strong {
font-size: 13px
}
#rental-tracking-page .inquiryResult>small {
font-size: 10px
}
#rental-tracking-page .trackTitle strong {
font-size: 16px
}
#rental-tracking-page .trackTitle small {
font-size: 9px
}
#rental-tracking-page .miniReview {
padding: 12px;
font-size: 10px
}
#rental-tracking-page .assistantHead>.pill {
display: none
}
#rental-tracking-page .movementLog>div {
grid-template-columns: 33px minmax(0, 1fr)
}
#rental-tracking-page .movementLog .pill {
grid-column: 2;
justify-self: start
}
}
@media(max-width:360px) {
#rental-tracking-page .trackMetrics {
gap: 6px
}
#rental-tracking-page .trackMetric {
padding: 10px 7px
}
#rental-tracking-page .trackMetric strong {
font-size: 24px
}
#rental-tracking-page .panelTop>.pill {
font-size: 7px
}
#rental-tracking-page .locationNode strong {
font-size: 8px
}
#rental-tracking-page .locationNode small {
font-size: 7px
}
}  #rental-iot-page * {
box-sizing: border-box
}
#rental-iot-page a {
text-decoration: none
}
#rental-iot-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px
}
#rental-iot-page .wrap.faq {
max-width: 900px
}
#rental-iot-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#rental-iot-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0;
background: transparent;
}
#rental-iot-page a:focus-visible,
#rental-iot-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#rental-iot-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#rental-iot-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
#rental-iot-page .btn .icon {
width: 17px;
height: 17px
}
#rental-iot-page .btn.black {
background: #0B0B0B;
color: #fff
}
#rental-iot-page .btn.black:hover {
background: #303030
}
#rental-iot-page .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
#rental-iot-page .btn.yellow:hover {
background: #FFD454
}
#rental-iot-page .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
#rental-iot-page .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
#rental-iot-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#rental-iot-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#rental-iot-page .textLink .icon {
width: 17px;
height: 17px
}
#rental-iot-page .textLink:hover {
color: var(--brand2)
}
#rental-iot-page .soft {
background: var(--sky2)
}
#rental-iot-page .sectionHead {
margin-bottom: 36px
}
#rental-iot-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#rental-iot-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#rental-iot-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#rental-iot-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#rental-iot-page .heroGrid>*,
#rental-iot-page .feature>*,
#rental-iot-page .aiGrid>* {
min-width: 0
}
#rental-iot-page .heroCopy {
min-width: 0
}
#rental-iot-page .hero h1 {
max-width: 630px
}
#rental-iot-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#rental-iot-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#rental-iot-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#rental-iot-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#rental-iot-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#rental-iot-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#rental-iot-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#rental-iot-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#rental-iot-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#rental-iot-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#rental-iot-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#rental-iot-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#rental-iot-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#rental-iot-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#rental-iot-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#rental-iot-page .outcome:nth-child(3):before {
background: var(--green)
}
#rental-iot-page .outcome:nth-child(4):before {
background: var(--purple)
}
#rental-iot-page .outcome>.icon {
color: var(--navy)
}
#rental-iot-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#rental-iot-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#rental-iot-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-iot-page .feature.reverse .visual {
order: -1
}
#rental-iot-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#rental-iot-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#rental-iot-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#rental-iot-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#rental-iot-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#rental-iot-page .tick .icon {
height: 13px;
width: 13px
}
#rental-iot-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#rental-iot-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#rental-iot-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#rental-iot-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#rental-iot-page .uiHeading .icon {
height: 19px;
width: 19px
}
#rental-iot-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#rental-iot-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#rental-iot-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#rental-iot-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#rental-iot-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#rental-iot-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#rental-iot-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#rental-iot-page .dark h2,
#rental-iot-page .dark h3 {
color: white
}
#rental-iot-page .dark .ey {
background: var(--yellow);
color: #111
}
#rental-iot-page .dark .textLink {
color: #fff
}
#rental-iot-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#rental-iot-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-iot-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#rental-iot-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#rental-iot-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#rental-iot-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#rental-iot-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#rental-iot-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#rental-iot-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#rental-iot-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#rental-iot-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#rental-iot-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-iot-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#rental-iot-page .connectedCard h3 {
margin: 18px 0 11px
}
#rental-iot-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#rental-iot-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#rental-iot-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#rental-iot-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#rental-iot-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#rental-iot-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#rental-iot-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#rental-iot-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-iot-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#rental-iot-page .featureCard>.icon {
color: var(--navy)
}
#rental-iot-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#rental-iot-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-iot-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#rental-iot-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#rental-iot-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#rental-iot-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#rental-iot-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#rental-iot-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#rental-iot-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#rental-iot-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#rental-iot-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#rental-iot-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#rental-iot-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#rental-iot-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#rental-iot-page .useCase>.icon {
color: var(--navy)
}
#rental-iot-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#rental-iot-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-iot-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#rental-iot-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#rental-iot-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#rental-iot-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#rental-iot-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#rental-iot-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#rental-iot-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-iot-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#rental-iot-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#rental-iot-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#rental-iot-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#rental-iot-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#rental-iot-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#rental-iot-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#rental-iot-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#rental-iot-page .final h2 {
color: #fff
}
#rental-iot-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#rental-iot-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#rental-iot-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#rental-iot-page .ctaBtns .btn {
min-width: 219px
}
#rental-iot-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#rental-iot-page .btn.darkOutline:hover {
background: #252D33
}
#rental-iot-page .final a:focus-visible {
outline-color: var(--yellow)
}
#rental-iot-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#rental-iot-page .heroGrid {
gap: 28px
}
#rental-iot-page .hero .lead {
font-size: 16px
}
#rental-iot-page .feature,
#rental-iot-page .aiGrid {
gap: 30px
}
#rental-iot-page .visual {
padding: 17px
}
#rental-iot-page .toolCard {
padding: 21px 15px
}
#rental-iot-page .toolCard strong {
font-size: 14px
}
#rental-iot-page .handoffBand {
padding: 20px
}
#rental-iot-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#rental-iot-page section {
padding: 64px 0
}
#rental-iot-page .hero {
padding: 34px 0 42px
}
#rental-iot-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#rental-iot-page .heroCopy {
max-width: 790px
}
#rental-iot-page .hero h1 {
max-width: 800px;
}
#rental-iot-page .hero .lead {
max-width: 760px
}
#rental-iot-page .heroVisual {
max-width: 460px;
justify-self: center
}
#rental-iot-page .feature,
#rental-iot-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#rental-iot-page .feature.reverse .visual {
order: 0
}
#rental-iot-page .featureCopy {
max-width: 790px
}
#rental-iot-page .visual {
max-width: 640px;
margin: 0 auto
}
#rental-iot-page .outcomes,
#rental-iot-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-iot-page .connectedGrid {
gap: 13px
}
#rental-iot-page .connectedCard {
padding: 22px
}
#rental-iot-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-iot-page .aiVisual {
max-width: 600px;
margin: auto
}
#rental-iot-page .aiMini {
max-width: 780px
}
#rental-iot-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#rental-iot-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#rental-iot-page .toolCard {
min-height: 145px
}
#rental-iot-page .roleGrid {
gap: 20px
}
#rental-iot-page .roleCard {
padding-right: 18px
}
#rental-iot-page .roleCard h3 {
font-size: 20px
}
#rental-iot-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#rental-iot-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#rental-iot-page .workflowLead br {
display: none
}
#rental-iot-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#rental-iot-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#rental-iot-page .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
#rental-iot-page .wrap {
width: calc(100% - 32px)
}
#rental-iot-page section {
padding: 49px 0
}
#rental-iot-page h2 {
font-size: 33px;
line-height: 1.15
}
#rental-iot-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#rental-iot-page .sectionHead {
margin-bottom: 27px
}
#rental-iot-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#rental-iot-page .hero {
padding: 25px 0 34px
}
#rental-iot-page .heroGrid {
gap: 21px
}
#rental-iot-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#rental-iot-page .hero h1 {
line-height: 1.12
}
#rental-iot-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#rental-iot-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#rental-iot-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#rental-iot-page .hero .micro {
font-size: 11px
}
#rental-iot-page .heroPills {
gap: 6px;
margin-top: 16px
}
#rental-iot-page .heroPills span {
font-size: 9px
}
#rental-iot-page .heroVisual {
max-width: 420px
}
#rental-iot-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#rental-iot-page .trust {
padding: 22px 0
}
#rental-iot-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#rental-iot-page .outcomes {
gap: 12px
}
#rental-iot-page .outcome {
padding: 19px
}
#rental-iot-page .outcome h3 {
font-size: 17px
}
#rental-iot-page .outcome p {
font-size: 13px
}
#rental-iot-page .feature {
gap: 27px
}
#rental-iot-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#rental-iot-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#rental-iot-page .fi {
font-size: 12px
}
#rental-iot-page .textLink {
font-size: 13px
}
#rental-iot-page .visual {
padding: 15px;
border-radius: 16px
}
#rental-iot-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#rental-iot-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#rental-iot-page .uiHeading .icon {
width: 18px;
height: 18px
}
#rental-iot-page .uiFoot {
font-size: 9px
}
#rental-iot-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#rental-iot-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#rental-iot-page .aiMini {
gap: 11px;
margin-top: 23px
}
#rental-iot-page .aiMini article {
padding: 16px
}
#rental-iot-page .aiMini h3 {
font-size: 15px
}
#rental-iot-page .aiMini p {
font-size: 12px
}
#rental-iot-page .aiNote {
font-size: 10px
}
#rental-iot-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#rental-iot-page .connectedCard {
padding: 23px
}
#rental-iot-page .connectedCard h3 {
margin: 15px 0 9px
}
#rental-iot-page .connectedCard p {
font-size: 14px
}
#rental-iot-page .handoffBand {
padding: 20px
}
#rental-iot-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#rental-iot-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#rental-iot-page .handoffBand small {
font-size: 11px
}
#rental-iot-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#rental-iot-page .featureGrid {
gap: 13px
}
#rental-iot-page .featureCard {
padding: 21px
}
#rental-iot-page .featureCard h3 {
font-size: 17px
}
#rental-iot-page .featureCard p {
font-size: 13px
}
#rental-iot-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#rental-iot-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#rental-iot-page .toolCard strong {
font-size: 15px
}
#rental-iot-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#rental-iot-page .toolCard:last-child .toolArrow {
top: 31px
}
#rental-iot-page .toolCard:last-child strong {
padding-right: 25px
}
#rental-iot-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#rental-iot-page .useCases {
gap: 13px
}
#rental-iot-page .useCase {
padding: 21px 18px
}
#rental-iot-page .useCase h3 {
font-size: 17px
}
#rental-iot-page .useCase p {
font-size: 13px
}
#rental-iot-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#rental-iot-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#rental-iot-page .roleCard:last-child {
padding-bottom: 0
}
#rental-iot-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#rental-iot-page .roleCard>strong {
font-size: 14px
}
#rental-iot-page .roleCard p {
font-size: 14px
}
#rental-iot-page .workflowBand {
padding: 28px 0
}
#rental-iot-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#rental-iot-page .workflowLead {
font-size: 18px
}
#rental-iot-page .workflowStep strong {
font-size: 14px
}
#rental-iot-page .workflowStep p {
font-size: 10px
}
#rental-iot-page .faq .sectionHead {
margin-bottom: 25px
}
#rental-iot-page details {
padding: 16px
}
#rental-iot-page .faqList {
gap: 10px
}
#rental-iot-page summary {
font-size: 14px;
gap: 14px
}
#rental-iot-page .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
#rental-iot-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#rental-iot-page .final p {
font-size: 14px;
line-height: 1.8
}
#rental-iot-page .final .ey {
font-size: 9px
}
#rental-iot-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#rental-iot-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#rental-iot-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#rental-iot-page .outcomes,
#rental-iot-page .featureGrid,
#rental-iot-page .useCases {
grid-template-columns: 1fr
}
#rental-iot-page .outcome {
padding: 23px
}
#rental-iot-page .outcome h3 {
font-size: 18px
}
#rental-iot-page .outcome p {
font-size: 14px
}
#rental-iot-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#rental-iot-page .fi {
font-size: 13px
}
#rental-iot-page .aiMini {
grid-template-columns: 1fr
}
#rental-iot-page .aiMini h3 {
font-size: 17px
}
#rental-iot-page .aiMini p {
font-size: 13px
}
#rental-iot-page .aiMini article {
padding: 19px
}
#rental-iot-page .featureCard h3,
#rental-iot-page .useCase h3 {
font-size: 19px
}
#rental-iot-page .featureCard p,
#rental-iot-page .useCase p {
font-size: 14px
}
#rental-iot-page .toolsGrid {
grid-template-columns: 1fr
}
#rental-iot-page .toolCard,
#rental-iot-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#rental-iot-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#rental-iot-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#rental-iot-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#rental-iot-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#rental-iot-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#rental-iot-page .toolArrow,
#rental-iot-page .toolCard:last-child .toolArrow {
top: 30px
}
#rental-iot-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
}
@media (max-width:360px) {
#rental-iot-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#rental-iot-page .heroPills span {
font-size: 8px
}
#rental-iot-page .heroPills {
gap: 5px
}
#rental-iot-page .uiHeading {
font-size: 11px
}
#rental-iot-page .uiHeading>.pill {
font-size: 7px
}
#rental-iot-page .visual {
padding: 12px
}
#rental-iot-page .final {
padding: 26px 20px
}
}
@media (prefers-reduced-motion:reduce) {
#rental-iot-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#rental-iot-page section {
padding: 24px 0
}
#rental-iot-page .hero,
#rental-iot-page .soft {
background: #fff
}
#rental-iot-page .dark,
#rental-iot-page .workflowBand,
#rental-iot-page .final {
background: #fff;
color: #11283A
}
#rental-iot-page .dark h2,
#rental-iot-page .dark h3,
#rental-iot-page .final h2 {
color: #11283A
}
#rental-iot-page .dark p,
#rental-iot-page .final p {
color: #52697C
}
#rental-iot-page .btn {
display: none
}
#rental-iot-page .visual,
#rental-iot-page .outcome,
#rental-iot-page .featureCard,
#rental-iot-page details {
break-inside: avoid
}
#rental-iot-page .heroImage {
max-width: 380px
}
#rental-iot-page .heroVisual {
justify-self: center
}
}
#rental-iot-page .dark .textLink {
color: #FFF1BD
}
#rental-iot-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
#rental-iot-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#rental-iot-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#rental-iot-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy)
}
#rental-iot-page .workflowStep {
min-width: 0
}
#rental-iot-page .featureCopy>p {
max-width: 580px
}
#rental-iot-page .toolCard strong {
padding-right: 12px
}
#rental-iot-page .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
#rental-iot-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#rental-iot-page .supportStrip {
gap: 7px
}
#rental-iot-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#rental-iot-page .supportStrip .icon {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
#rental-iot-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
} #rental-iot-page .visual .uiHeading {
flex-wrap: wrap
}
#rental-iot-page .supportStrip>span {
min-width: 0
}
#rental-iot-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
#rental-iot-page .pill.gray {
background: #F0F3F6;
color: #5E7481
}
#rental-iot-page .iotPad {
padding: 18px;
min-width: 0
}
#rental-iot-page .iotTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 18px;
border-bottom: 1px solid var(--line)
}
#rental-iot-page .iotTop strong {
display: block;
font-size: 14px;
color: var(--navy);
line-height: 1.4
}
#rental-iot-page .iotTop small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
line-height: 1.5
}
#rental-iot-page .iotTitle {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 15px
}
#rental-iot-page .iotTitle strong {
display: block;
font-size: 21px;
color: var(--navy);
line-height: 1.3;
letter-spacing: -.03em
}
#rental-iot-page .iotTitle small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 5px;
line-height: 1.5
}
#rental-iot-page .iotTile {
background: #EAF8FF;
color: #0478A3;
border: 1px solid #C4E4F3;
border-radius: 10px;
padding: 11px;
display: grid;
place-items: center;
flex: none
}
#rental-iot-page .iotMetrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px
}
#rental-iot-page .iotMetric {
padding: 13px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #F7FBFD;
min-width: 0
}
#rental-iot-page .iotMetric.warn {
background: #FFFBEB;
border-color: #E9DCAA
}
#rental-iot-page .iotMetric>span {
display: flex;
align-items: center;
gap: 6px;
color: #607487;
font-size: 10px;
line-height: 1.5
}
#rental-iot-page .iotMetric .icon {
height: 15px;
width: 15px;
color: var(--navy)
}
#rental-iot-page .iotMetric>strong {
font-size: 27px;
line-height: 1.3;
letter-spacing: -.04em;
color: var(--navy);
display: block;
margin-top: 6px
}
#rental-iot-page .iotMetric strong small {
font-size: 12px;
letter-spacing: 0;
font-weight: 650
}
#rental-iot-page .iotMetric>small {
font-size: 9px;
color: var(--muted);
margin-top: 5px;
display: block;
line-height: 1.5
}
#rental-iot-page .iotSource {
padding: 12px 13px;
border: 1px solid var(--line);
background: white;
border-radius: 9px;
margin-top: 12px;
display: flex;
align-items: center;
gap: 9px
}
#rental-iot-page .iotSource .icon {
height: 20px;
width: 20px;
color: #057699
}
#rental-iot-page .iotSource strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.4
}
#rental-iot-page .iotSource small {
display: block;
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 3px
}
#rental-iot-page .iotSource .pill {
margin-left: auto
}
#rental-iot-page .iotNote {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 13px 15px;
border-radius: 9px;
border: 1px solid #D6E5EE;
background: #F5FBFF;
font-size: 10px;
color: #507083;
line-height: 1.7;
margin-top: 13px
}
#rental-iot-page .iotNote .icon {
width: 16px;
height: 16px;
margin-top: 1px;
color: var(--brand2)
}
#rental-iot-page .iotRule {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 15px;
border: 1px solid #E8DCAC;
border-radius: 11px;
background: #FFFBEC
}
#rental-iot-page .iotRule>span {
display: grid;
place-items: center;
background: #FFECA7;
border-radius: 9px;
width: 38px;
height: 38px;
color: #7F6421
}
#rental-iot-page .iotRule small {
font-size: 8px;
color: #8B702A;
letter-spacing: .06em;
font-weight: 750;
display: block
}
#rental-iot-page .iotRule strong {
display: block;
font-size: 18px;
color: var(--navy);
line-height: 1.4;
margin-top: 4px
}
#rental-iot-page .iotRule p {
font-size: 10px;
color: #6F755D;
line-height: 1.5;
margin-top: 4px
}
#rental-iot-page .iotFlow {
margin-top: 15px;
display: grid;
gap: 10px
}
#rental-iot-page .iotFlowRow {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #fff
}
#rental-iot-page .iotFlowRow>span:first-child {
width: 28px;
height: 28px;
display: grid;
place-items: center;
background: #EDF8FC;
color: #075879;
border-radius: 50%;
font-size: 11px;
font-weight: 750
}
#rental-iot-page .iotFlowRow strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.45
}
#rental-iot-page .iotFlowRow small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-top: 3px
}
#rental-iot-page .iotFlowRow .icon {
height: 18px;
width: 18px;
color: var(--green)
}
#rental-iot-page .iotReview {
display: flex;
gap: 8px;
align-items: center;
padding: 12px 15px;
background: #0D2939;
border: 1px solid #294A5A;
border-radius: 10px;
color: #D6E7F1;
font-size: 10px;
line-height: 1.6;
margin-top: 14px
}
#rental-iot-page .iotReview .icon {
color: var(--yellow);
height: 19px;
width: 19px
}
#rental-iot-page .iotChartBox {
padding: 15px 12px 8px;
background: #F8FCFE;
border: 1px solid var(--line);
border-radius: 10px
}
#rental-iot-page .iotChartHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
color: var(--navy);
margin: 0 4px 10px
}
#rental-iot-page .iotChartHead small {
font-size: 8px;
color: var(--muted)
}
#rental-iot-page .iotChart {
display: block;
width: 100%;
height: auto;
aspect-ratio: 420 / 195
}
#rental-iot-page .iotLegend {
display: flex;
align-items: center;
gap: 13px;
flex-wrap: wrap;
justify-content: center;
font-size: 8px;
color: #607487;
line-height: 1.5;
margin: 8px 0
}
#rental-iot-page .iotLegend span {
display: inline-flex;
gap: 5px;
align-items: center
}
#rental-iot-page .iotLegend i {
width: 16px;
height: 2px;
background: #007FC5;
display: block
}
#rental-iot-page .iotLegend .threshold {
height: 0;
background: transparent;
border-top: 2px dashed #AE8D2A
}
#rental-iot-page .iotPeriod {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 12px
}
#rental-iot-page .iotPeriod>div {
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px
}
#rental-iot-page .iotPeriod span {
font-size: 9px;
color: var(--muted);
display: block;
line-height: 1.5
}
#rental-iot-page .iotPeriod strong {
font-size: 20px;
line-height: 1.4;
display: block;
color: var(--navy);
margin-top: 4px
}
#rental-iot-page .iotPeriod strong small {
font-size: 10px;
font-weight: 600
}
#rental-iot-page .iotInsight {
border-left: 3px solid var(--brand);
background: #EAF8FF;
border-radius: 0 9px 9px 0;
padding: 13px;
margin-top: 13px
}
#rental-iot-page .iotInsight strong {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
color: var(--navy);
line-height: 1.5
}
#rental-iot-page .iotInsight strong .icon {
height: 17px;
width: 17px
}
#rental-iot-page .iotInsight p {
font-size: 10px;
line-height: 1.65;
color: #507083;
margin-top: 6px
}
#rental-iot-page .iotFleetMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 15px
}
#rental-iot-page .iotFleetMetrics>div {
padding: 12px 10px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF
}
#rental-iot-page .iotFleetMetrics>div:nth-child(2) {
background: #FFFBEB;
border-color: #E8DCAD
}
#rental-iot-page .iotFleetMetrics span {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5
}
#rental-iot-page .iotFleetMetrics strong {
display: block;
font-size: 25px;
line-height: 1.3;
color: var(--navy);
margin-top: 5px
}
#rental-iot-page .iotAssetRows {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: #fff
}
#rental-iot-page .iotAssetRow {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
gap: 9px;
align-items: center;
padding: 13px 12px;
border-bottom: 1px solid var(--line);
font-size: 10px;
color: #496D82
}
#rental-iot-page .iotAssetRow:last-child {
border: 0
}
#rental-iot-page .iotAssetRow strong {
display: block;
font-size: 12px;
color: var(--navy);
line-height: 1.4
}
#rental-iot-page .iotAssetRow small {
display: block;
font-size: 8px;
color: var(--muted);
line-height: 1.5;
margin-top: 4px
}
#rental-iot-page .iotAssetRow .pill {
font-size: 8px;
padding: 5px 7px
}
#rental-iot-page .iotCurrent {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 10px;
color: #4D6C80;
background: #fff;
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px;
margin-top: 12px
}
#rental-iot-page .iotCurrent>span {
display: flex;
align-items: center;
gap: 7px
}
#rental-iot-page .iotCurrent .icon {
width: 17px;
height: 17px;
color: #147CA2
}
#rental-iot-page .assistantPanel {
border: 1px solid #485B6A;
border-radius: 16px;
overflow: hidden;
background: #fff;
color: var(--ink)
}
#rental-iot-page .assistantHead {
display: flex;
align-items: center;
gap: 11px;
padding: 19px;
border-bottom: 1px solid var(--line)
}
#rental-iot-page .assistantHead>.icon {
width: 26px;
height: 26px;
color: #16799F
}
#rental-iot-page .assistantHead strong {
font-size: 14px;
display: block;
color: var(--navy)
}
#rental-iot-page .assistantHead small {
font-size: 9px;
display: block;
color: var(--muted);
margin-top: 4px
}
#rental-iot-page .assistantHead>.pill {
margin-left: auto
}
#rental-iot-page .assistantBody {
padding: 19px;
min-width: 0
}
#rental-iot-page .assistantPrompt {
background: #F1F8FC;
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
font-size: 12px;
color: #28536D;
line-height: 1.7;
margin-bottom: 16px
}
#rental-iot-page .assistantLabel {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 800;
color: #657B89;
display: block;
margin-bottom: 10px
}
#rental-iot-page .assistantAnswer {
border: 1px solid var(--line);
border-radius: 10px;
padding: 15px
}
#rental-iot-page .assistantAnswer h3 {
font-size: 16px;
color: var(--navy);
line-height: 1.4
}
#rental-iot-page .assistantAnswer p {
color: #527182;
font-size: 11px;
line-height: 1.7;
margin-top: 9px
}
#rental-iot-page .assistantTasks {
display: grid;
gap: 10px;
margin: 15px 0
}
#rental-iot-page .assistantTasks>div {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
line-height: 1.6;
color: #355E74
}
#rental-iot-page .assistantTasks .icon {
width: 16px;
height: 16px;
color: #08734E;
margin-top: 1px
}
#rental-iot-page .assistantReview {
padding: 14px 18px;
background: #FFF9DF;
border-top: 1px solid #E7D99E;
color: #725A18;
font-size: 10px;
display: flex;
gap: 8px;
align-items: center;
line-height: 1.65
}
#rental-iot-page .assistantReview .icon {
width: 20px;
height: 20px
}
#rental-iot-page .connectedCard .textLink {
font-size: 13px
}
#rental-iot-page .iotScopeNote {
font-size: 11px !important;
color: var(--muted);
line-height: 1.7 !important
}
#rental-iot-page .iotSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui;
text-decoration: none
}
#rental-iot-page .iotSkip:focus {
top: 12px
}
@media(max-width:1150px) and (min-width:981px) {
#rental-iot-page .iotPad {
padding: 14px
}
#rental-iot-page .iotAssetRow {
gap: 6px;
padding: 12px 10px;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto
}
#rental-iot-page .iotAssetRow .pill {
font-size: 7px
}
}
@media(max-width:640px) {
#rental-iot-page .iotPad {
padding: 13px
}
#rental-iot-page .iotTop {
padding: 13px;
gap: 8px
}
#rental-iot-page .iotTop strong {
font-size: 12px
}
#rental-iot-page .iotTop small {
font-size: 8px
}
#rental-iot-page .iotTitle strong {
font-size: 19px
}
#rental-iot-page .iotTitle small {
font-size: 9px
}
#rental-iot-page .iotMetrics {
gap: 8px
}
#rental-iot-page .iotMetric {
padding: 12px 10px
}
#rental-iot-page .iotMetric>strong {
font-size: 26px
}
#rental-iot-page .iotMetric>span {
font-size: 9px
}
#rental-iot-page .iotMetric>small {
font-size: 8px
}
#rental-iot-page .iotSource {
padding: 11px;
gap: 7px;
flex-wrap: wrap
}
#rental-iot-page .iotSource strong {
font-size: 10px
}
#rental-iot-page .iotSource small {
font-size: 8px
}
#rental-iot-page .iotSource .pill {
font-size: 8px
}
#rental-iot-page .iotNote {
font-size: 9px;
padding: 12px;
gap: 7px
}
#rental-iot-page .iotRule {
padding: 12px;
gap: 9px;
grid-template-columns: 33px minmax(0, 1fr)
}
#rental-iot-page .iotRule>span {
height: 33px;
width: 33px
}
#rental-iot-page .iotRule strong {
font-size: 16px
}
#rental-iot-page .iotRule p {
font-size: 9px
}
#rental-iot-page .iotFlowRow {
padding: 11px;
gap: 8px
}
#rental-iot-page .iotFlowRow strong {
font-size: 11px
}
#rental-iot-page .iotFlowRow small {
font-size: 8px
}
#rental-iot-page .iotFlowRow .pill {
font-size: 8px;
padding: 4px 6px
}
#rental-iot-page .iotReview {
padding: 11px;
font-size: 9px
}
#rental-iot-page .iotChartBox {
padding: 12px 8px 6px
}
#rental-iot-page .iotChartHead {
align-items: flex-start;
flex-direction: column;
gap: 4px
}
#rental-iot-page .iotPeriod {
gap: 8px
}
#rental-iot-page .iotPeriod>div {
padding: 11px 9px
}
#rental-iot-page .iotPeriod span {
font-size: 8px
}
#rental-iot-page .iotPeriod strong {
font-size: 19px
}
#rental-iot-page .iotInsight {
padding: 12px
}
#rental-iot-page .iotInsight p {
font-size: 10px
}
#rental-iot-page .iotFleetMetrics {
gap: 7px
}
#rental-iot-page .iotFleetMetrics>div {
padding: 10px 8px
}
#rental-iot-page .iotFleetMetrics span {
font-size: 8px;
min-height: 24px
}
#rental-iot-page .iotFleetMetrics strong {
font-size: 24px
}
#rental-iot-page .iotAssetRow {
padding: 12px 10px;
gap: 8px;
grid-template-columns: minmax(0, 1fr) auto
}
#rental-iot-page .iotAssetRow>span:nth-child(2) {
grid-column: 1;
grid-row: auto;
font-size: 9px
}
#rental-iot-page .iotAssetRow>.pill {
grid-column: 2;
grid-row: 1/3
}
#rental-iot-page .iotAssetRow strong {
font-size: 12px
}
#rental-iot-page .iotAssetRow small {
font-size: 8px
}
#rental-iot-page .iotCurrent {
font-size: 9px;
padding: 11px;
flex-wrap: wrap
}
#rental-iot-page .assistantHead {
padding: 15px;
gap: 8px;
flex-wrap: wrap
}
#rental-iot-page .assistantHead strong {
font-size: 12px
}
#rental-iot-page .assistantHead small {
font-size: 8px
}
#rental-iot-page .assistantHead>.pill {
font-size: 8px
}
#rental-iot-page .assistantBody {
padding: 14px
}
#rental-iot-page .assistantPrompt {
padding: 12px;
font-size: 11px
}
#rental-iot-page .assistantAnswer {
padding: 13px
}
#rental-iot-page .assistantAnswer h3 {
font-size: 15px
}
#rental-iot-page .assistantTasks>div {
font-size: 10px
}
#rental-iot-page .assistantReview {
padding: 12px 14px;
font-size: 9px
}
}
@media(max-width:360px) {
#rental-iot-page .iotPad {
padding: 11px
}
#rental-iot-page .iotMetric {
padding: 10px 8px
}
#rental-iot-page .iotMetric>strong {
font-size: 23px
}
#rental-iot-page .iotSource>.pill {
margin-left: 26px
}
#rental-iot-page .iotRule strong {
font-size: 15px
}
#rental-iot-page .iotFlowRow {
grid-template-columns: 25px minmax(0, 1fr) auto;
padding: 10px 8px;
gap: 7px
}
#rental-iot-page .iotFlowRow>span:first-child {
height: 25px;
width: 25px
}
#rental-iot-page .iotChartHead {
font-size: 9px
}
#rental-iot-page .iotAssetRow>.pill {
font-size: 7px
}
#rental-iot-page .iotFleetMetrics span {
font-size: 7px
}
#rental-iot-page .assistantHead>.pill {
margin-left: 34px
}
}
@media (max-width: 767px) {
.new-theme-design .heroVisual {
display: none;
}
.new-theme-design .featureCopy {
order: 2;
}
.new-theme-design .heroVisual {
display: none !important;
}
}  #rental-rfid-page * {
box-sizing: border-box
}
#rental-rfid-page a {
text-decoration: none
}
#rental-rfid-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px
}
#rental-rfid-page .wrap.faq {
max-width: 900px
}
#rental-rfid-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#rental-rfid-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
}
#rental-rfid-page a:focus-visible,
#rental-rfid-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#rental-rfid-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#rental-rfid-page .btn .icon {
width: 17px;
height: 17px;
}
#rental-rfid-page .icon {
margin: 0;
background: transparent;
}
#rental-rfid-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#rental-rfid-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#rental-rfid-page .textLink .icon {
width: 17px;
height: 17px
}
#rental-rfid-page .textLink:hover {
color: var(--brand2)
}
#rental-rfid-page .soft {
background: var(--sky2)
}
#rental-rfid-page .sectionHead {
margin-bottom: 36px
}
#rental-rfid-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#rental-rfid-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#rental-rfid-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#rental-rfid-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#rental-rfid-page .heroGrid>*,
#rental-rfid-page .feature>*,
#rental-rfid-page .aiGrid>* {
min-width: 0
}
#rental-rfid-page .heroCopy {
min-width: 0
}
#rental-rfid-page .hero h1 {
max-width: 630px
}
#rental-rfid-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#rental-rfid-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#rental-rfid-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#rental-rfid-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#rental-rfid-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#rental-rfid-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#rental-rfid-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#rental-rfid-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#rental-rfid-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#rental-rfid-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#rental-rfid-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#rental-rfid-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#rental-rfid-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#rental-rfid-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#rental-rfid-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#rental-rfid-page .outcome:nth-child(3):before {
background: var(--green)
}
#rental-rfid-page .outcome:nth-child(4):before {
background: var(--purple)
}
#rental-rfid-page .outcome>.icon {
color: var(--navy)
}
#rental-rfid-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#rental-rfid-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#rental-rfid-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-rfid-page .feature.reverse .visual {
order: -1
}
#rental-rfid-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#rental-rfid-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#rental-rfid-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#rental-rfid-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#rental-rfid-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#rental-rfid-page .tick .icon {
height: 13px;
width: 13px
}
#rental-rfid-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#rental-rfid-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#rental-rfid-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#rental-rfid-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#rental-rfid-page .uiHeading .icon {
height: 19px;
width: 19px
}
#rental-rfid-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#rental-rfid-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#rental-rfid-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#rental-rfid-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#rental-rfid-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#rental-rfid-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#rental-rfid-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#rental-rfid-page .dark h2,
#rental-rfid-page .dark h3 {
color: white
}
#rental-rfid-page .dark .ey {
background: var(--yellow);
color: #111
}
#rental-rfid-page .dark .textLink {
color: #fff
}
#rental-rfid-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#rental-rfid-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-rfid-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#rental-rfid-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#rental-rfid-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#rental-rfid-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#rental-rfid-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#rental-rfid-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#rental-rfid-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#rental-rfid-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#rental-rfid-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#rental-rfid-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-rfid-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#rental-rfid-page .connectedCard h3 {
margin: 18px 0 11px
}
#rental-rfid-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#rental-rfid-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#rental-rfid-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#rental-rfid-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#rental-rfid-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#rental-rfid-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#rental-rfid-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#rental-rfid-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-rfid-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#rental-rfid-page .featureCard>.icon {
color: var(--navy)
}
#rental-rfid-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#rental-rfid-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-rfid-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#rental-rfid-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#rental-rfid-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#rental-rfid-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#rental-rfid-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#rental-rfid-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#rental-rfid-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#rental-rfid-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#rental-rfid-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#rental-rfid-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#rental-rfid-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#rental-rfid-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#rental-rfid-page .useCase>.icon {
color: var(--navy)
}
#rental-rfid-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#rental-rfid-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-rfid-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#rental-rfid-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#rental-rfid-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#rental-rfid-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#rental-rfid-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#rental-rfid-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#rental-rfid-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-rfid-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#rental-rfid-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#rental-rfid-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#rental-rfid-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#rental-rfid-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#rental-rfid-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#rental-rfid-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#rental-rfid-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#rental-rfid-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#rental-rfid-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#rental-rfid-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#rental-rfid-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#rental-rfid-page .ctaBtns .btn {
min-width: 219px
}
#rental-rfid-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#rental-rfid-page .btn.darkOutline:hover {
background: #252D33
}
#rental-rfid-page .final a:focus-visible {
outline-color: var(--yellow)
}
#rental-rfid-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#rental-rfid-page .heroGrid {
gap: 28px
}
#rental-rfid-page .hero .lead {
font-size: 16px
}
#rental-rfid-page .feature,
#rental-rfid-page .aiGrid {
gap: 30px
}
#rental-rfid-page .visual {
padding: 17px
}
#rental-rfid-page .toolCard {
padding: 21px 15px
}
#rental-rfid-page .toolCard strong {
font-size: 14px
}
#rental-rfid-page .handoffBand {
padding: 20px
}
#rental-rfid-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#rental-rfid-page section {
padding: 64px 0
}
#rental-rfid-page .hero {
padding: 34px 0 42px
}
#rental-rfid-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#rental-rfid-page .heroCopy {
max-width: 790px
}
#rental-rfid-page .hero h1 {
max-width: 800px;
}
#rental-rfid-page .hero .lead {
max-width: 760px
}
#rental-rfid-page .heroVisual {
max-width: 460px;
justify-self: center
}
#rental-rfid-page .feature,
#rental-rfid-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#rental-rfid-page .feature.reverse .visual {
order: 0
}
#rental-rfid-page .featureCopy {
max-width: 790px
}
#rental-rfid-page .visual {
max-width: 640px;
margin: 0 auto
}
#rental-rfid-page .outcomes,
#rental-rfid-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-rfid-page .connectedGrid {
gap: 13px
}
#rental-rfid-page .connectedCard {
padding: 22px
}
#rental-rfid-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-rfid-page .aiVisual {
max-width: 600px;
margin: auto
}
#rental-rfid-page .aiMini {
max-width: 780px
}
#rental-rfid-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#rental-rfid-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#rental-rfid-page .toolCard {
min-height: 145px
}
#rental-rfid-page .roleGrid {
gap: 20px
}
#rental-rfid-page .roleCard {
padding-right: 18px
}
#rental-rfid-page .roleCard h3 {
font-size: 20px
}
#rental-rfid-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#rental-rfid-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#rental-rfid-page .workflowLead br {
display: none
}
#rental-rfid-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#rental-rfid-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#rental-rfid-page .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
#rental-rfid-page .wrap {
width: calc(100% - 32px)
}
#rental-rfid-page section {
padding: 49px 0
}
#rental-rfid-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#rental-rfid-page .sectionHead {
margin-bottom: 27px
}
#rental-rfid-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#rental-rfid-page .hero {
padding: 25px 0 34px
}
#rental-rfid-page .heroGrid {
gap: 21px
}
#rental-rfid-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#rental-rfid-page .hero h1 {
line-height: 1.12
}
#rental-rfid-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#rental-rfid-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#rental-rfid-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#rental-rfid-page .hero .micro {
font-size: 11px
}
#rental-rfid-page .heroPills {
gap: 6px;
margin-top: 16px
}
#rental-rfid-page .heroPills span {
font-size: 9px
}
#rental-rfid-page .heroVisual {
max-width: 420px
}
#rental-rfid-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#rental-rfid-page .trust {
padding: 22px 0
}
#rental-rfid-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#rental-rfid-page .outcomes {
gap: 12px
}
#rental-rfid-page .outcome {
padding: 19px
}
#rental-rfid-page .outcome h3 {
font-size: 17px
}
#rental-rfid-page .outcome p {
font-size: 13px
}
#rental-rfid-page .feature {
gap: 27px
}
#rental-rfid-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#rental-rfid-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#rental-rfid-page .fi {
font-size: 12px
}
#rental-rfid-page .textLink {
font-size: 13px
}
#rental-rfid-page .visual {
padding: 15px;
border-radius: 16px
}
#rental-rfid-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#rental-rfid-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#rental-rfid-page .uiHeading .icon {
width: 18px;
height: 18px
}
#rental-rfid-page .uiFoot {
font-size: 9px
}
#rental-rfid-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#rental-rfid-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#rental-rfid-page .aiMini {
gap: 11px;
margin-top: 23px
}
#rental-rfid-page .aiMini article {
padding: 16px
}
#rental-rfid-page .aiMini h3 {
font-size: 15px
}
#rental-rfid-page .aiMini p {
font-size: 12px
}
#rental-rfid-page .aiNote {
font-size: 10px
}
#rental-rfid-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#rental-rfid-page .connectedCard {
padding: 23px
}
#rental-rfid-page .connectedCard h3 {
margin: 15px 0 9px
}
#rental-rfid-page .connectedCard p {
font-size: 14px
}
#rental-rfid-page .handoffBand {
padding: 20px
}
#rental-rfid-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#rental-rfid-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#rental-rfid-page .handoffBand small {
font-size: 11px
}
#rental-rfid-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#rental-rfid-page .featureGrid {
gap: 13px
}
#rental-rfid-page .featureCard {
padding: 21px
}
#rental-rfid-page .featureCard h3 {
font-size: 17px
}
#rental-rfid-page .featureCard p {
font-size: 13px
}
#rental-rfid-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#rental-rfid-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#rental-rfid-page .toolCard strong {
font-size: 15px
}
#rental-rfid-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#rental-rfid-page .toolCard:last-child .toolArrow {
top: 31px
}
#rental-rfid-page .toolCard:last-child strong {
padding-right: 25px
}
#rental-rfid-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#rental-rfid-page .useCases {
gap: 13px
}
#rental-rfid-page .useCase {
padding: 21px 18px
}
#rental-rfid-page .useCase h3 {
font-size: 17px
}
#rental-rfid-page .useCase p {
font-size: 13px
}
#rental-rfid-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#rental-rfid-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#rental-rfid-page .roleCard:last-child {
padding-bottom: 0
}
#rental-rfid-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#rental-rfid-page .roleCard>strong {
font-size: 14px
}
#rental-rfid-page .roleCard p {
font-size: 14px
}
#rental-rfid-page .workflowBand {
padding: 28px 0
}
#rental-rfid-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#rental-rfid-page .workflowLead {
font-size: 18px
}
#rental-rfid-page .workflowStep strong {
font-size: 14px
}
#rental-rfid-page .workflowStep p {
font-size: 10px
}
#rental-rfid-page .faq .sectionHead {
margin-bottom: 25px
}
#rental-rfid-page details {
padding: 16px
}
#rental-rfid-page .faqList {
gap: 10px
}
#rental-rfid-page summary {
font-size: 14px;
gap: 14px
}
#rental-rfid-page .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
#rental-rfid-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#rental-rfid-page .final h2 {
font-size: 32px
}
#rental-rfid-page .final p {
font-size: 14px;
line-height: 1.8
}
#rental-rfid-page .final .ey {
font-size: 9px
}
#rental-rfid-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#rental-rfid-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#rental-rfid-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#rental-rfid-page .outcomes,
#rental-rfid-page .featureGrid,
#rental-rfid-page .useCases {
grid-template-columns: 1fr
}
#rental-rfid-page .outcome {
padding: 23px
}
#rental-rfid-page .outcome h3 {
font-size: 18px
}
#rental-rfid-page .outcome p {
font-size: 14px
}
#rental-rfid-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#rental-rfid-page .fi {
font-size: 13px
}
#rental-rfid-page .aiMini {
grid-template-columns: 1fr
}
#rental-rfid-page .aiMini h3 {
font-size: 17px
}
#rental-rfid-page .aiMini p {
font-size: 13px
}
#rental-rfid-page .aiMini article {
padding: 19px
}
#rental-rfid-page .featureCard h3,
#rental-rfid-page .useCase h3 {
font-size: 19px
}
#rental-rfid-page .featureCard p,
#rental-rfid-page .useCase p {
font-size: 14px
}
#rental-rfid-page .toolsGrid {
grid-template-columns: 1fr
}
#rental-rfid-page .toolCard,
#rental-rfid-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#rental-rfid-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#rental-rfid-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#rental-rfid-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#rental-rfid-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#rental-rfid-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#rental-rfid-page .toolArrow,
#rental-rfid-page .toolCard:last-child .toolArrow {
top: 30px
}
#rental-rfid-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#rental-rfid-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#rental-rfid-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#rental-rfid-page .heroPills span {
font-size: 8px
}
#rental-rfid-page .heroPills {
gap: 5px
}
#rental-rfid-page .uiHeading {
font-size: 11px
}
#rental-rfid-page .uiHeading>.pill {
font-size: 7px
}
#rental-rfid-page .visual {
padding: 12px
}
#rental-rfid-page .final {
padding: 26px 20px
}
#rental-rfid-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#rental-rfid-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#rental-rfid-page section {
padding: 24px 0
}
#rental-rfid-page .hero,
#rental-rfid-page .soft {
background: #fff
}
#rental-rfid-page .dark,
#rental-rfid-page .workflowBand,
#rental-rfid-page .final {
background: #fff;
color: #11283A
}
#rental-rfid-page .dark h2,
#rental-rfid-page .dark h3,
#rental-rfid-page .final h2 {
color: #11283A
}
#rental-rfid-page .dark p,
#rental-rfid-page .final p {
color: #52697C
}
#rental-rfid-page .btn {
display: none
}
#rental-rfid-page .visual,
#rental-rfid-page .outcome,
#rental-rfid-page .featureCard,
#rental-rfid-page details {
break-inside: avoid
}
#rental-rfid-page .heroImage {
max-width: 380px
}
#rental-rfid-page .heroVisual {
justify-self: center
}
}
#rental-rfid-page .dark .textLink {
color: #FFF1BD
}
#rental-rfid-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
#rental-rfid-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#rental-rfid-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#rental-rfid-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy)
}
#rental-rfid-page .workflowStep {
min-width: 0
}
#rental-rfid-page .featureCopy>p {
max-width: 580px
}
#rental-rfid-page .toolCard strong {
padding-right: 12px
}
#rental-rfid-page .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
#rental-rfid-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#rental-rfid-page .supportStrip {
gap: 7px
}
#rental-rfid-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#rental-rfid-page .supportStrip .icon {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
#rental-rfid-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
#rental-rfid-page .assistantPanel {
border: 1px solid #485B6A;
border-radius: 16px;
overflow: hidden;
background: #fff;
color: var(--ink)
}
#rental-rfid-page .assistantHead {
display: flex;
align-items: center;
gap: 11px;
padding: 19px;
border-bottom: 1px solid var(--line)
}
#rental-rfid-page .assistantHead>.icon {
width: 26px;
height: 26px;
color: #16799F
}
#rental-rfid-page .assistantHead strong {
font-size: 14px;
display: block;
color: var(--navy)
}
#rental-rfid-page .assistantHead small {
font-size: 9px;
display: block;
color: var(--muted);
margin-top: 4px
}
#rental-rfid-page .assistantHead>.pill {
margin-left: auto
}
#rental-rfid-page .assistantBody {
padding: 19px;
min-width: 0
}
#rental-rfid-page .assistantPrompt {
background: #F1F8FC;
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
font-size: 12px;
color: #28536D;
line-height: 1.7;
margin-bottom: 16px
}
#rental-rfid-page .assistantLabel {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 800;
color: #657B89;
display: block;
margin-bottom: 10px
}
#rental-rfid-page .assistantAnswer {
border: 1px solid var(--line);
border-radius: 10px;
padding: 15px
}
#rental-rfid-page .assistantAnswer h3 {
font-size: 16px;
color: var(--navy);
line-height: 1.4
}
#rental-rfid-page .assistantAnswer p {
color: #527182;
font-size: 11px;
line-height: 1.7;
margin-top: 9px
}
#rental-rfid-page .assistantTasks {
display: grid;
gap: 10px;
margin: 15px 0
}
#rental-rfid-page .assistantTasks>div {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
line-height: 1.6;
color: #355E74
}
#rental-rfid-page .assistantTasks .icon {
width: 16px;
height: 16px;
color: #08734E;
margin-top: 1px
}
#rental-rfid-page .assistantReview {
padding: 14px 18px;
background: #FFF9DF;
border-top: 1px solid #E7D99E;
color: #725A18;
font-size: 10px;
display: flex;
gap: 8px;
align-items: center;
line-height: 1.65
}
#rental-rfid-page .assistantReview .icon {
width: 20px;
height: 20px
}
#rental-rfid-page .assistantHead {
padding: 15px;
gap: 8px;
flex-wrap: wrap
}
#rental-rfid-page .assistantHead strong {
font-size: 12px
}
#rental-rfid-page .assistantHead small {
font-size: 8px
}
#rental-rfid-page .assistantHead>.pill {
font-size: 8px
}
#rental-rfid-page .assistantBody {
padding: 14px
}
#rental-rfid-page .assistantPrompt {
padding: 12px;
font-size: 11px
}
#rental-rfid-page .assistantAnswer {
padding: 13px
}
#rental-rfid-page .assistantAnswer h3 {
font-size: 15px
}
#rental-rfid-page .assistantTasks>div {
font-size: 10px
}
#rental-rfid-page .assistantReview {
padding: 12px 14px;
font-size: 9px
}
#rental-rfid-page .assistantHead>.pill {
margin-left: 34px
} #rental-rfid-page .visual .uiHeading {
flex-wrap: wrap
}
#rental-rfid-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
#rental-rfid-page .pill.gray {
background: #EEF3F6;
color: #567081
}
#rental-rfid-page .scanPad {
padding: 18px;
min-width: 0
}
#rental-rfid-page .scanTop {
padding: 15px 17px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px
}
#rental-rfid-page .scanTop strong {
font-size: 14px;
color: var(--navy);
display: block;
line-height: 1.45
}
#rental-rfid-page .scanTop small {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.5;
margin-top: 4px
}
#rental-rfid-page .scanNote {
margin-top: 13px;
padding: 13px 14px;
border: 1px solid #D1E5EF;
border-radius: 10px;
background: #F4FAFD;
color: #4B6A7E;
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 10px;
line-height: 1.7
}
#rental-rfid-page .scanNote .icon {
width: 17px;
height: 17px;
color: #137CA1;
margin-top: 1px
}
#rental-rfid-page .scanNote.navy {
background: #0D2939;
color: #CEE1EC;
border-color: #284858
}
#rental-rfid-page .scanNote.navy .icon {
color: var(--yellow)
}
#rental-rfid-page .labelGrid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px
}
#rental-rfid-page .labelPreview {
border: 1px solid #BBD3E1;
border-radius: 10px;
padding: 15px;
text-align: center;
background: #fff;
color: var(--navy)
}
#rental-rfid-page .labelPreview .uiLabel {
font-size: 8px
}
#rental-rfid-page .labelPreview>strong {
display: block;
font-size: 16px;
margin-top: 10px;
line-height: 1.4
}
#rental-rfid-page .barcodeArt {
display: block;
height: 47px;
width: 100%;
max-width: 145px;
margin: 9px auto 5px;
color: #143E56
}
#rental-rfid-page .labelPreview small {
display: block;
font-size: 8px;
color: #607487;
line-height: 1.5
}
#rental-rfid-page .tagChoices {
display: grid;
gap: 8px
}
#rental-rfid-page .tagChoice {
display: flex;
gap: 7px;
align-items: center;
padding: 11px;
border: 1px solid var(--line);
border-radius: 8px;
background: #F8FCFE;
font-size: 10px;
color: #355E74;
line-height: 1.5
}
#rental-rfid-page .tagChoice .icon {
height: 18px;
width: 18px;
color: var(--brand2)
}
#rental-rfid-page .tagChoice.active {
background: #FFFAE8;
border-color: #E8D695
}
#rental-rfid-page .identityTable {
margin-top: 14px;
border: 1px solid var(--line);
border-radius: 9px;
overflow: hidden
}
#rental-rfid-page .identityRow {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 9px;
align-items: center;
padding: 11px 12px;
background: #fff;
border-bottom: 1px solid var(--line);
font-size: 10px;
color: #456C82
}
#rental-rfid-page .identityRow:last-child {
border: 0
}
#rental-rfid-page .identityRow.head {
font-size: 8px;
background: #F5FBFF;
font-weight: 700;
color: #607487
}
#rental-rfid-page .identityRow strong {
font-size: 11px;
color: var(--navy)
}
#rental-rfid-page .identityRow .icon {
width: 15px;
height: 15px;
color: var(--green)
}
#rental-rfid-page .identityRow .tagId {
font-family: ui-monospace, monospace;
font-size: 9px;
overflow-wrap: anywhere
}
#rental-rfid-page .scanModes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#rental-rfid-page .modeCard {
min-width: 0;
border: 1px solid var(--line);
background: #fff;
border-radius: 12px;
padding: 15px
}
#rental-rfid-page .modeCard h3 {
font-size: 16px;
color: var(--navy);
line-height: 1.4;
margin: 6px 0
}
#rental-rfid-page .modeCard p {
font-size: 10px;
line-height: 1.7;
color: var(--muted);
margin: 0
}
#rental-rfid-page .modeCard>small {
display: block;
font-size: 9px;
color: #607487;
line-height: 1.6;
margin-top: 10px
}
#rental-rfid-page .readerStage {
height: 141px;
display: grid;
place-items: center;
margin: 13px 0;
background: #F2FAFE;
border: 1px solid #D6E9F3;
border-radius: 9px
}
#rental-rfid-page .readerArt {
display: block;
width: 132px;
height: 128px;
max-width: 100%
}
#rental-rfid-page .cameraStage {
height: 141px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 13px 0;
border: 1px solid #DFE8EF;
border-radius: 9px;
background: #F7FAFC;
position: relative;
padding: 15px
}
#rental-rfid-page .cameraStage:before {
content: "";
position: absolute;
inset: 13px;
border: 2px solid #5F9FBC;
border-radius: 9px
}
#rental-rfid-page .cameraStage .barcodeArt {
height: 39px;
max-width: 108px;
margin: 0
}
#rental-rfid-page .cameraStage small {
font-size: 8px;
line-height: 1.5;
color: #537489;
margin-top: 6px
}
#rental-rfid-page .miniMatches {
display: grid;
gap: 6px;
margin-top: 10px
}
#rental-rfid-page .miniMatches>span {
display: flex;
gap: 5px;
align-items: center;
font-size: 9px;
line-height: 1.5;
color: #41647A
}
#rental-rfid-page .miniMatches .icon {
height: 13px;
width: 13px;
color: #118A61
}
#rental-rfid-page .matchedRecord {
display: flex;
gap: 10px;
align-items: center;
padding: 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
margin-top: 12px
}
#rental-rfid-page .matchedRecord>.icon {
color: var(--navy);
width: 26px;
height: 26px
}
#rental-rfid-page .matchedRecord strong {
font-size: 12px;
color: var(--navy);
display: block
}
#rental-rfid-page .matchedRecord small {
font-size: 9px;
display: block;
color: var(--muted);
margin-top: 4px;
line-height: 1.55
}
#rental-rfid-page .movementSites {
display: grid;
grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
gap: 12px;
align-items: center;
margin-bottom: 14px
}
#rental-rfid-page .movementSites>.icon {
width: 22px;
height: 22px;
color: #367A9B
}
#rental-rfid-page .siteTile {
background: #F5FBFF;
border: 1px solid var(--line);
border-radius: 9px;
padding: 13px
}
#rental-rfid-page .siteTile strong {
display: block;
color: var(--navy);
font-size: 14px;
margin-top: 7px
}
#rental-rfid-page .siteTile small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-top: 3px
}
#rental-rfid-page .siteTile>.icon {
width: 22px;
height: 22px;
color: var(--brand2)
}
#rental-rfid-page .movementSteps {
display: grid;
gap: 10px
}
#rental-rfid-page .movementStep {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px;
background: #fff
}
#rental-rfid-page .stepNo {
display: grid;
place-items: center;
background: #EAF8F3;
color: #0E8057;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 11px;
font-weight: 750
}
#rental-rfid-page .movementStep.warn {
border-color: #E7D89C;
background: #FFFCF0
}
#rental-rfid-page .movementStep.warn .stepNo {
background: #FFF0B7;
color: #8A6818
}
#rental-rfid-page .movementStep strong {
font-size: 12px;
color: var(--navy);
display: block;
line-height: 1.5
}
#rental-rfid-page .movementStep small {
font-size: 9px;
color: #607487;
display: block;
line-height: 1.5;
margin-top: 3px
}
#rental-rfid-page .movementStep .pill {
font-size: 8px
}
#rental-rfid-page .pendingAsset {
display: flex;
align-items: center;
gap: 9px;
border-left: 3px solid #C3982B;
background: #FFF7DE;
border-radius: 0 8px 8px 0;
margin-top: 12px;
padding: 12px;
font-size: 10px;
color: #715D26;
line-height: 1.6
}
#rental-rfid-page .pendingAsset .icon {
width: 17px;
height: 17px
}
#rental-rfid-page .auditTotals {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px
}
#rental-rfid-page .auditTotal {
padding: 11px 9px;
border: 1px solid var(--line);
background: #F6FBFE;
border-radius: 9px;
min-width: 0
}
#rental-rfid-page .auditTotal strong {
display: block;
font-size: 25px;
line-height: 1.3;
color: var(--navy);
margin: 4px 0
}
#rental-rfid-page .auditTotal span {
display: block;
font-size: 8px;
color: var(--muted);
line-height: 1.5
}
#rental-rfid-page .auditTotal:nth-child(n+3) {
background: #FFFBEB;
border-color: #E5D9AF
}
#rental-rfid-page .auditStrip {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: space-between;
padding: 12px 0;
font-size: 9px;
color: #59768A;
border-bottom: 1px solid var(--line);
line-height: 1.5
}
#rental-rfid-page .auditItems {
display: grid;
gap: 9px;
margin-top: 13px
}
#rental-rfid-page .auditItem {
display: flex;
align-items: center;
gap: 8px;
padding: 11px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 10px;
color: #496D82
}
#rental-rfid-page .auditItem>span:first-child {
flex: 1
}
#rental-rfid-page .auditItem strong {
display: block;
color: var(--navy);
font-size: 11px
}
#rental-rfid-page .auditItem small {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.5;
margin-top: 3px
}
#rental-rfid-page .reportLinks {
border: 1px solid var(--line);
border-radius: 9px;
padding: 13px;
background: #fff;
margin-top: 13px
}
#rental-rfid-page .reportLinks>strong {
display: block;
color: var(--navy);
font-size: 11px;
margin-bottom: 8px
}
#rental-rfid-page .reportLinks>span {
display: flex;
align-items: center;
gap: 7px;
padding: 6px 0;
color: #4F7286;
font-size: 9px;
line-height: 1.55
}
#rental-rfid-page .reportLinks .icon {
height: 14px;
width: 14px
}
#rental-rfid-page .assistantHead>.pill {
white-space: normal;
text-align: center
}
#rental-rfid-page .connectedCard .textLink {
font-size: 13px
}
#rental-rfid-page .rentalSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui;
text-decoration: none
}
#rental-rfid-page .rentalSkip:focus {
top: 12px
}
@media(max-width:1150px) and (min-width:981px) {
#rental-rfid-page .scanPad {
padding: 14px
}
#rental-rfid-page .scanModes {
gap: 9px
}
#rental-rfid-page .modeCard {
padding: 12px
}
#rental-rfid-page .modeCard h3 {
font-size: 14px
}
#rental-rfid-page .labelGrid {
gap: 9px
}
#rental-rfid-page .tagChoice {
padding: 9px
}
#rental-rfid-page .labelPreview {
padding: 12px
}
}
@media(max-width:640px) {
#rental-rfid-page .scanPad {
padding: 13px
}
#rental-rfid-page .scanTop {
padding: 13px;
gap: 7px
}
#rental-rfid-page .scanTop strong {
font-size: 12px
}
#rental-rfid-page .scanTop small {
font-size: 8px
}
#rental-rfid-page .scanTop>.pill {
font-size: 8px
}
#rental-rfid-page .labelGrid {
gap: 9px
}
#rental-rfid-page .labelPreview {
padding: 12px 9px
}
#rental-rfid-page .labelPreview>strong {
font-size: 14px
}
#rental-rfid-page .tagChoice {
padding: 9px;
font-size: 9px
}
#rental-rfid-page .tagChoice .icon {
height: 15px;
width: 15px
}
#rental-rfid-page .identityRow {
padding: 10px 9px;
gap: 6px;
font-size: 9px
}
#rental-rfid-page .identityRow strong {
font-size: 10px
}
#rental-rfid-page .identityRow .tagId {
font-size: 8px
}
#rental-rfid-page .scanNote {
font-size: 9px;
padding: 12px
}
#rental-rfid-page .scanModes {
gap: 9px
}
#rental-rfid-page .modeCard {
padding: 12px 10px
}
#rental-rfid-page .modeCard h3 {
font-size: 14px
}
#rental-rfid-page .readerStage,
#rental-rfid-page .cameraStage {
height: 130px
}
#rental-rfid-page .readerArt {
height: 117px;
width: 120px
}
#rental-rfid-page .cameraStage {
padding: 11px
}
#rental-rfid-page .modeCard>small {
font-size: 8px
}
#rental-rfid-page .miniMatches>span {
font-size: 8px
}
#rental-rfid-page .movementSites {
gap: 8px
}
#rental-rfid-page .siteTile {
padding: 11px
}
#rental-rfid-page .siteTile strong {
font-size: 12px
}
#rental-rfid-page .movementStep {
padding: 11px;
gap: 8px
}
#rental-rfid-page .movementStep strong {
font-size: 11px
}
#rental-rfid-page .movementStep small {
font-size: 8px
}
#rental-rfid-page .movementStep .pill {
font-size: 7px
}
#rental-rfid-page .auditTotals {
gap: 6px
}
#rental-rfid-page .auditTotal {
padding: 10px 6px
}
#rental-rfid-page .auditTotal strong {
font-size: 22px
}
#rental-rfid-page .auditTotal span {
font-size: 7px
}
#rental-rfid-page .auditItem {
padding: 10px
}
#rental-rfid-page .reportLinks {
padding: 12px
}
#rental-rfid-page .assistantHead {
padding: 15px;
gap: 9px
}
#rental-rfid-page .assistantHead strong {
font-size: 12px
}
#rental-rfid-page .assistantHead small {
font-size: 8px
}
#rental-rfid-page .assistantBody {
padding: 14px
}
#rental-rfid-page .assistantPrompt {
font-size: 11px;
padding: 12px
}
#rental-rfid-page .assistantAnswer {
padding: 13px
}
#rental-rfid-page .assistantAnswer h3 {
font-size: 15px
}
#rental-rfid-page .assistantReview {
padding: 13px;
font-size: 9px
}
}
@media(max-width:420px) {
#rental-rfid-page .scanModes {
grid-template-columns: 1fr
}
#rental-rfid-page .modeCard {
display: grid;
grid-template-columns: 108px minmax(0, 1fr);
gap: 0 12px;
padding: 14px
}
#rental-rfid-page .modeCard>h3,
#rental-rfid-page .modeCard>p,
#rental-rfid-page .modeCard>.miniMatches,
#rental-rfid-page .modeCard>small {
grid-column: 2
}
#rental-rfid-page .modeCard>.readerStage,
#rental-rfid-page .modeCard>.cameraStage {
grid-column: 1;
grid-row: 1/5;
margin: 0;
height: 144px;
align-self: center
}
#rental-rfid-page .readerArt {
width: 100%;
height: 125px
}
#rental-rfid-page .modeCard h3 {
font-size: 15px;
margin-top: 0
}
#rental-rfid-page .modeCard>p {
font-size: 10px
}
#rental-rfid-page .modeCard>small {
font-size: 9px
}
#rental-rfid-page .miniMatches>span {
font-size: 9px
}
#rental-rfid-page .cameraStage .barcodeArt {
height: 32px
}
#rental-rfid-page .cameraStage small {
font-size: 7px
}
#rental-rfid-page .assistantHead>.pill {
display: none
}
#rental-rfid-page .movementStep {
grid-template-columns: 25px minmax(0, 1fr)
}
#rental-rfid-page .movementStep>.pill {
grid-column: 2;
justify-self: start;
font-size: 8px
}
#rental-rfid-page .stepNo {
height: 25px;
width: 25px
}
#rental-rfid-page .movementStep strong {
font-size: 12px
}
#rental-rfid-page .movementStep small {
font-size: 9px
}
}
@media(max-width:360px) {
#rental-rfid-page .labelGrid {
grid-template-columns: 1fr
}
#rental-rfid-page .tagChoices {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px
}
#rental-rfid-page .tagChoice {
flex-direction: column;
font-size: 8px;
text-align: center;
padding: 8px 4px
}
#rental-rfid-page .labelPreview {
padding: 12px
}
#rental-rfid-page .labelPreview>strong {
font-size: 16px
}
#rental-rfid-page .auditTotals {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-rfid-page .auditTotal span {
font-size: 9px
}
#rental-rfid-page .modeCard {
grid-template-columns: 90px minmax(0, 1fr);
gap: 0 10px
}
#rental-rfid-page .cameraStage:before {
inset: 8px
}
}  #rental-crew-page * {
box-sizing: border-box
}
#rental-crew-page a {
text-decoration: none
}
#rental-crew-page .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
max-width: 1320px
}
#rental-crew-page svg {
width: 24px;
height: 24px;
max-width: 100%;
flex: none;
vertical-align: middle
}
#rental-crew-page .icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle;
margin: 0;
background: transparent;
}
#rental-crew-page a:focus-visible,
#rental-crew-page summary:focus-visible {
outline: 3px solid #007FC5;
outline-offset: 5px
}
#rental-crew-page .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
#rental-crew-page .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
#rental-crew-page .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
#rental-crew-page .textLink .icon {
width: 17px;
height: 17px
}
#rental-crew-page .textLink:hover {
color: var(--brand2)
}
#rental-crew-page .soft {
background: var(--sky2)
}
#rental-crew-page .sectionHead {
margin-bottom: 36px
}
#rental-crew-page .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
#rental-crew-page .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
#rental-crew-page .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
#rental-crew-page .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
#rental-crew-page .heroGrid>*,
#rental-crew-page .feature>*,
#rental-crew-page .aiGrid>* {
min-width: 0
}
#rental-crew-page .heroCopy {
min-width: 0
}
#rental-crew-page .hero h1 {
max-width: 630px
}
#rental-crew-page .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
#rental-crew-page .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
#rental-crew-page .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
#rental-crew-page .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
#rental-crew-page .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
#rental-crew-page .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
#rental-crew-page .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
#rental-crew-page .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
#rental-crew-page .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
#rental-crew-page .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
#rental-crew-page .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
#rental-crew-page .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
#rental-crew-page .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
#rental-crew-page .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
#rental-crew-page .outcome:nth-child(2):before {
background: var(--yellow)
}
#rental-crew-page .outcome:nth-child(3):before {
background: var(--green)
}
#rental-crew-page .outcome:nth-child(4):before {
background: var(--purple)
}
#rental-crew-page .outcome>.icon {
color: var(--navy)
}
#rental-crew-page .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
#rental-crew-page .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
#rental-crew-page .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-crew-page .feature.reverse .visual {
order: -1
}
#rental-crew-page .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
#rental-crew-page .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
#rental-crew-page .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
#rental-crew-page .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
#rental-crew-page .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
#rental-crew-page .tick .icon {
height: 13px;
width: 13px
}
#rental-crew-page .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
#rental-crew-page .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
#rental-crew-page .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
#rental-crew-page .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
#rental-crew-page .uiHeading .icon {
height: 19px;
width: 19px
}
#rental-crew-page .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
#rental-crew-page .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
#rental-crew-page .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
#rental-crew-page .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
#rental-crew-page .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
#rental-crew-page .uiFoot .icon {
height: 15px;
width: 15px;
color: var(--green)
}
#rental-crew-page .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
#rental-crew-page .dark h2,
#rental-crew-page .dark h3 {
color: white
}
#rental-crew-page .dark .ey {
background: var(--yellow);
color: #111
}
#rental-crew-page .dark .textLink {
color: #fff
}
#rental-crew-page .dark a:focus-visible {
outline-color: var(--yellow)
}
#rental-crew-page .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
#rental-crew-page .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
#rental-crew-page .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
#rental-crew-page .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
#rental-crew-page .aiMini .icon {
color: var(--yellow);
width: 22px;
height: 22px
}
#rental-crew-page .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
#rental-crew-page .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
#rental-crew-page .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
#rental-crew-page .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
#rental-crew-page .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
#rental-crew-page .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-crew-page .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
#rental-crew-page .connectedCard h3 {
margin: 18px 0 11px
}
#rental-crew-page .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
#rental-crew-page .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
#rental-crew-page .handoffBand>div {
display: flex;
align-items: center;
gap: 14px
}
#rental-crew-page .handoffBand>div>.icon {
color: var(--navy);
width: 29px;
height: 29px
}
#rental-crew-page .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
#rental-crew-page .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
#rental-crew-page .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
#rental-crew-page .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
#rental-crew-page .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
#rental-crew-page .featureCard>.icon {
color: var(--navy)
}
#rental-crew-page .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
#rental-crew-page .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-crew-page .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
#rental-crew-page .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
#rental-crew-page .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
#rental-crew-page .toolCard:nth-child(3) {
border-top-color: var(--green)
}
#rental-crew-page .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
#rental-crew-page .toolCard:nth-child(5) {
border-top-color: #E19F41
}
#rental-crew-page .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
#rental-crew-page .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
#rental-crew-page .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
#rental-crew-page .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
#rental-crew-page .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
#rental-crew-page .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
#rental-crew-page .useCase>.icon {
color: var(--navy)
}
#rental-crew-page .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
#rental-crew-page .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-crew-page .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
#rental-crew-page .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
#rental-crew-page .roleCard:last-child {
border: 0;
padding-right: 0
}
#rental-crew-page .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
#rental-crew-page .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
#rental-crew-page .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
#rental-crew-page .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
#rental-crew-page .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
#rental-crew-page .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
#rental-crew-page .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
#rental-crew-page .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
#rental-crew-page .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
#rental-crew-page .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
#rental-crew-page .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}
#rental-crew-page .faq {
max-width: 900px
}
#rental-crew-page .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
#rental-crew-page .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
#rental-crew-page .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
#rental-crew-page .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
#rental-crew-page .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
#rental-crew-page .ctaBtns .btn {
min-width: 219px
}
#rental-crew-page .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
#rental-crew-page .btn.darkOutline:hover {
background: #252D33
}
#rental-crew-page .final a:focus-visible {
outline-color: var(--yellow)
}
#rental-crew-page .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
#rental-crew-page .heroGrid {
gap: 28px
}
#rental-crew-page .hero .lead {
font-size: 16px
}
#rental-crew-page .feature,
#rental-crew-page .aiGrid {
gap: 30px
}
#rental-crew-page .visual {
padding: 17px
}
#rental-crew-page .toolCard {
padding: 21px 15px
}
#rental-crew-page .toolCard strong {
font-size: 14px
}
#rental-crew-page .handoffBand {
padding: 20px
}
#rental-crew-page .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
#rental-crew-page section {
padding: 64px 0
}
#rental-crew-page .hero {
padding: 34px 0 42px
}
#rental-crew-page .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
#rental-crew-page .heroCopy {
max-width: 790px
}
#rental-crew-page .hero h1 {
max-width: 800px;
}
#rental-crew-page .hero .lead {
max-width: 760px
}
#rental-crew-page .heroVisual {
max-width: 460px;
justify-self: center
}
#rental-crew-page .feature,
#rental-crew-page .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
#rental-crew-page .feature.reverse .visual {
order: 0
}
#rental-crew-page .featureCopy {
max-width: 790px
}
#rental-crew-page .visual {
max-width: 640px;
margin: 0 auto
}
#rental-crew-page .outcomes,
#rental-crew-page .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-crew-page .connectedGrid {
gap: 13px
}
#rental-crew-page .connectedCard {
padding: 22px
}
#rental-crew-page .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#rental-crew-page .aiVisual {
max-width: 600px;
margin: auto
}
#rental-crew-page .aiMini {
max-width: 780px
}
#rental-crew-page .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
#rental-crew-page .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
#rental-crew-page .toolCard {
min-height: 145px
}
#rental-crew-page .roleGrid {
gap: 20px
}
#rental-crew-page .roleCard {
padding-right: 18px
}
#rental-crew-page .roleCard h3 {
font-size: 20px
}
#rental-crew-page .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
#rental-crew-page .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
#rental-crew-page .workflowLead br {
display: none
}
#rental-crew-page .final {
grid-template-columns: 1fr;
gap: 27px
}
#rental-crew-page .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
#rental-crew-page .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
#rental-crew-page .wrap {
width: calc(100% - 32px)
}
#rental-crew-page section {
padding: 49px 0
}
#rental-crew-page h2 {
font-size: 33px;
line-height: 1.15
}
#rental-crew-page .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
#rental-crew-page .sectionHead {
margin-bottom: 27px
}
#rental-crew-page .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
#rental-crew-page .hero {
padding: 25px 0 34px
}
#rental-crew-page .heroGrid {
gap: 21px
}
#rental-crew-page .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
#rental-crew-page .hero h1 {
line-height: 1.12
}
#rental-crew-page .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
#rental-crew-page .hero .actions {
gap: 8px;
margin-top: 23px
}
#rental-crew-page .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
#rental-crew-page .hero .micro {
font-size: 11px
}
#rental-crew-page .heroPills {
gap: 6px;
margin-top: 16px
}
#rental-crew-page .heroPills span {
font-size: 9px
}
#rental-crew-page .heroVisual {
max-width: 420px
}
#rental-crew-page .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
#rental-crew-page .trust {
padding: 22px 0
}
#rental-crew-page .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
#rental-crew-page .outcomes {
gap: 12px
}
#rental-crew-page .outcome {
padding: 19px
}
#rental-crew-page .outcome h3 {
font-size: 17px
}
#rental-crew-page .outcome p {
font-size: 13px
}
#rental-crew-page .feature {
gap: 27px
}
#rental-crew-page .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
#rental-crew-page .fl {
gap: 11px 13px;
margin-top: 21px
}
#rental-crew-page .fi {
font-size: 12px
}
#rental-crew-page .textLink {
font-size: 13px
}
#rental-crew-page .visual {
padding: 15px;
border-radius: 16px
}
#rental-crew-page .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
#rental-crew-page .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
#rental-crew-page .uiHeading .icon {
width: 18px;
height: 18px
}
#rental-crew-page .uiFoot {
font-size: 9px
}
#rental-crew-page .visual figcaption {
font-size: 8px;
line-height: 1.7
}
#rental-crew-page .aiLead {
font-size: 15px;
line-height: 1.8
}
#rental-crew-page .aiMini {
gap: 11px;
margin-top: 23px
}
#rental-crew-page .aiMini article {
padding: 16px
}
#rental-crew-page .aiMini h3 {
font-size: 15px
}
#rental-crew-page .aiMini p {
font-size: 12px
}
#rental-crew-page .aiNote {
font-size: 10px
}
#rental-crew-page .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
#rental-crew-page .connectedCard {
padding: 23px
}
#rental-crew-page .connectedCard h3 {
margin: 15px 0 9px
}
#rental-crew-page .connectedCard p {
font-size: 14px
}
#rental-crew-page .handoffBand {
padding: 20px
}
#rental-crew-page .handoffBand>div {
align-items: flex-start;
gap: 10px
}
#rental-crew-page .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
#rental-crew-page .handoffBand small {
font-size: 11px
}
#rental-crew-page .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
#rental-crew-page .featureGrid {
gap: 13px
}
#rental-crew-page .featureCard {
padding: 21px
}
#rental-crew-page .featureCard h3 {
font-size: 17px
}
#rental-crew-page .featureCard p {
font-size: 13px
}
#rental-crew-page .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
#rental-crew-page .toolCard {
padding: 19px 15px;
min-height: 155px
}
#rental-crew-page .toolCard strong {
font-size: 15px
}
#rental-crew-page .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
#rental-crew-page .toolCard:last-child .toolArrow {
top: 31px
}
#rental-crew-page .toolCard:last-child strong {
padding-right: 25px
}
#rental-crew-page .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
#rental-crew-page .useCases {
gap: 13px
}
#rental-crew-page .useCase {
padding: 21px 18px
}
#rental-crew-page .useCase h3 {
font-size: 17px
}
#rental-crew-page .useCase p {
font-size: 13px
}
#rental-crew-page .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
#rental-crew-page .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
#rental-crew-page .roleCard:last-child {
padding-bottom: 0
}
#rental-crew-page .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
#rental-crew-page .roleCard>strong {
font-size: 14px
}
#rental-crew-page .roleCard p {
font-size: 14px
}
#rental-crew-page .workflowBand {
padding: 28px 0
}
#rental-crew-page .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
#rental-crew-page .workflowLead {
font-size: 18px
}
#rental-crew-page .workflowStep strong {
font-size: 14px
}
#rental-crew-page .workflowStep p {
font-size: 10px
}
#rental-crew-page .faq .sectionHead {
margin-bottom: 25px
}
#rental-crew-page details {
padding: 16px
}
#rental-crew-page .faqList {
gap: 10px
}
#rental-crew-page summary {
font-size: 14px;
gap: 14px
}
#rental-crew-page .faqAnswer p {
font-size: 14px;
line-height: 1.8;
padding-right: 0;
margin-top: 13px
}
#rental-crew-page .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
#rental-crew-page .final h2 {
font-size: 32px
}
#rental-crew-page .final p {
font-size: 14px;
line-height: 1.8
}
#rental-crew-page .final .ey {
font-size: 9px
}
#rental-crew-page .final .ctaBtns {
flex-direction: column;
gap: 11px
}
#rental-crew-page .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
#rental-crew-page .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
#rental-crew-page .outcomes,
#rental-crew-page .featureGrid,
#rental-crew-page .useCases {
grid-template-columns: 1fr
}
#rental-crew-page .outcome {
padding: 23px
}
#rental-crew-page .outcome h3 {
font-size: 18px
}
#rental-crew-page .outcome p {
font-size: 14px
}
#rental-crew-page .fl {
grid-template-columns: 1fr;
gap: 10px
}
#rental-crew-page .fi {
font-size: 13px
}
#rental-crew-page .aiMini {
grid-template-columns: 1fr
}
#rental-crew-page .aiMini h3 {
font-size: 17px
}
#rental-crew-page .aiMini p {
font-size: 13px
}
#rental-crew-page .aiMini article {
padding: 19px
}
#rental-crew-page .featureCard h3,
#rental-crew-page .useCase h3 {
font-size: 19px
}
#rental-crew-page .featureCard p,
#rental-crew-page .useCase p {
font-size: 14px
}
#rental-crew-page .toolsGrid {
grid-template-columns: 1fr
}
#rental-crew-page .toolCard,
#rental-crew-page .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
#rental-crew-page .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
#rental-crew-page .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
#rental-crew-page .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
#rental-crew-page .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
#rental-crew-page .toolCard strong {
font-size: 15px;
padding-right: 20px
}
#rental-crew-page .toolArrow,
#rental-crew-page .toolCard:last-child .toolArrow {
top: 30px
}
#rental-crew-page .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
#rental-crew-page .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
#rental-crew-page h2 {
font-size: 30px
}
#rental-crew-page .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
#rental-crew-page .heroPills span {
font-size: 8px
}
#rental-crew-page .heroPills {
gap: 5px
}
#rental-crew-page .uiHeading {
font-size: 11px
}
#rental-crew-page .uiHeading>.pill {
font-size: 7px
}
#rental-crew-page .visual {
padding: 12px
}
#rental-crew-page .final {
padding: 26px 20px
}
#rental-crew-page .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
#rental-crew-page * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
#rental-crew-page section {
padding: 24px 0
}
#rental-crew-page .hero,
#rental-crew-page .soft {
background: #fff
}
#rental-crew-page .dark,
#rental-crew-page .workflowBand,
#rental-crew-page .final {
background: #fff;
color: #11283A
}
#rental-crew-page .dark h2,
#rental-crew-page .dark h3,
#rental-crew-page .final h2 {
color: #11283A
}
#rental-crew-page .dark p,
#rental-crew-page .final p {
color: #52697C
}
#rental-crew-page .btn {
display: none
}
#rental-crew-page .visual,
#rental-crew-page .outcome,
#rental-crew-page .featureCard,
#rental-crew-page details {
break-inside: avoid
}
#rental-crew-page .heroImage {
max-width: 380px
}
#rental-crew-page .heroVisual {
justify-self: center
}
}
#rental-crew-page .dark .textLink {
color: #FFF1BD
}
#rental-crew-page .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
#rental-crew-page .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
#rental-crew-page .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
#rental-crew-page .supportStrip .icon {
width: 19px;
height: 19px;
color: var(--navy)
}
#rental-crew-page .workflowStep {
min-width: 0
}
#rental-crew-page .featureCopy>p {
max-width: 580px
}
#rental-crew-page .toolCard strong {
padding-right: 12px
}
#rental-crew-page .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
#rental-crew-page .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
#rental-crew-page .supportStrip {
gap: 7px
}
#rental-crew-page .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
#rental-crew-page .supportStrip .icon {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
#rental-crew-page .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
#rental-crew-page .assistantPanel {
border: 1px solid #485B6A;
border-radius: 16px;
overflow: hidden;
background: #fff;
color: var(--ink)
}
#rental-crew-page .assistantHead {
display: flex;
align-items: center;
gap: 11px;
padding: 19px;
border-bottom: 1px solid var(--line)
}
#rental-crew-page .assistantHead>.icon {
width: 26px;
height: 26px;
color: #16799F
}
#rental-crew-page .assistantHead strong {
font-size: 14px;
display: block;
color: var(--navy)
}
#rental-crew-page .assistantHead small {
font-size: 9px;
display: block;
color: var(--muted);
margin-top: 4px
}
#rental-crew-page .assistantHead>.pill {
margin-left: auto
}
#rental-crew-page .assistantBody {
padding: 19px;
min-width: 0
}
#rental-crew-page .assistantPrompt {
background: #F1F8FC;
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
font-size: 12px;
color: #28536D;
line-height: 1.7;
margin-bottom: 16px
}
#rental-crew-page .assistantLabel {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 800;
color: #657B89;
display: block;
margin-bottom: 10px
}
#rental-crew-page .assistantAnswer {
border: 1px solid var(--line);
border-radius: 10px;
padding: 15px
}
#rental-crew-page .assistantAnswer h3 {
font-size: 16px;
color: var(--navy);
line-height: 1.4
}
#rental-crew-page .assistantAnswer p {
color: #527182;
font-size: 11px;
line-height: 1.7;
margin-top: 9px
}
#rental-crew-page .assistantTasks {
display: grid;
gap: 10px;
margin: 15px 0
}
#rental-crew-page .assistantTasks>div {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
line-height: 1.6;
color: #355E74
}
#rental-crew-page .assistantTasks .icon {
width: 16px;
height: 16px;
color: #08734E;
margin-top: 1px
}
#rental-crew-page .assistantReview {
padding: 14px 18px;
background: #FFF9DF;
border-top: 1px solid #E7D99E;
color: #725A18;
font-size: 10px;
display: flex;
gap: 8px;
align-items: center;
line-height: 1.65
}
#rental-crew-page .assistantReview .icon {
width: 20px;
height: 20px
}
#rental-crew-page .assistantHead {
padding: 15px;
gap: 8px;
flex-wrap: wrap
}
#rental-crew-page .assistantHead strong {
font-size: 12px
}
#rental-crew-page .assistantHead small {
font-size: 8px
}
#rental-crew-page .assistantHead>.pill {
font-size: 8px
}
#rental-crew-page .assistantBody {
padding: 14px
}
#rental-crew-page .assistantPrompt {
padding: 12px;
font-size: 11px
}
#rental-crew-page .assistantAnswer {
padding: 13px
}
#rental-crew-page .assistantAnswer h3 {
font-size: 15px
}
#rental-crew-page .assistantTasks>div {
font-size: 10px
}
#rental-crew-page .assistantReview {
padding: 12px 14px;
font-size: 9px
}
#rental-crew-page .assistantHead>.pill {
margin-left: 34px
} #rental-crew-page .rentalSkip {
position: absolute;
top: -90px;
left: 20px;
z-index: 1000;
background: #0B0B0B;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font: 14px/1.5 system-ui;
text-decoration: none
}
#rental-crew-page .rentalSkip:focus {
top: 12px
}
#rental-crew-page .pill.yellow {
background: var(--yellowsoft);
color: #745604
}
#rental-crew-page .pill.gray {
background: #EEF3F6;
color: #567081
}
#rental-crew-page .visual .uiHeading {
flex-wrap: wrap
}
#rental-crew-page .connectedCard .textLink {
font-size: 13px
}
#rental-crew-page .crewPanelHead {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--line)
}
#rental-crew-page .crewPanelHead strong {
display: block;
font-size: 15px;
color: var(--navy);
line-height: 1.4;
letter-spacing: -.02em
}
#rental-crew-page .crewPanelHead small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
line-height: 1.5
}
#rental-crew-page .crewPanelHead>.icon {
width: 19px;
height: 19px;
color: var(--brand2)
}
#rental-crew-page .filterTokens {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 12px 14px;
background: #F8FCFE;
border-bottom: 1px solid var(--line)
}
#rental-crew-page .filterTokens>span {
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
color: #496E82;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 8px
}
#rental-crew-page .filterTokens .icon {
width: 13px;
height: 13px
}
#rental-crew-page .profileList {
padding: 0 14px
}
#rental-crew-page .personRow {
display: grid;
grid-template-columns: 35px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 17px 0;
border-bottom: 1px solid var(--line)
}
#rental-crew-page .personRow:last-child {
border-bottom: 0
}
#rental-crew-page .personAvatar {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 50%;
background: #E5F5FD;
color: var(--navy);
font-size: 10px;
font-weight: 800
}
#rental-crew-page .personRow:nth-child(2) .personAvatar {
background: #FFF5D9
}
#rental-crew-page .personRow:nth-child(3) .personAvatar {
background: #EAF8F3
}
#rental-crew-page .personDetails {
min-width: 0
}
#rental-crew-page .personDetails strong {
font-size: 13px;
color: var(--navy);
display: block;
line-height: 1.4
}
#rental-crew-page .personDetails small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.5;
margin-top: 3px
}
#rental-crew-page .skillTag {
display: inline-block;
font-size: 8px;
color: #4A6980;
background: #F0F6FA;
border-radius: 5px;
padding: 4px 6px;
margin-top: 7px;
line-height: 1.4
}
#rental-crew-page .personAvailability {
text-align: right
}
#rental-crew-page .personAvailability .pill {
font-size: 8px
}
#rental-crew-page .personAvailability small {
font-size: 8px;
color: var(--muted);
display: block;
margin-top: 7px;
line-height: 1.5
}
#rental-crew-page .profileDocument {
display: flex;
gap: 10px;
align-items: center;
padding: 14px;
background: #F3FAFD;
border-top: 1px solid var(--line)
}
#rental-crew-page .profileDocument .icon {
color: var(--brand2);
width: 22px;
height: 22px
}
#rental-crew-page .profileDocument strong {
font-size: 11px;
color: var(--navy);
display: block;
line-height: 1.5
}
#rental-crew-page .profileDocument small {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 3px;
line-height: 1.6
}
#rental-crew-page .plannerGrid {
display: grid;
grid-template-columns: 72px repeat(5, minmax(0, 1fr));
padding: 11px 11px 0
}
#rental-crew-page .plannerCorner,
#rental-crew-page .plannerDay {
font-size: 9px;
color: #668191;
font-weight: 700;
padding: 7px 3px;
text-align: center;
border-bottom: 1px solid var(--line)
}
#rental-crew-page .plannerCorner {
text-align: left
}
#rental-crew-page .plannerPerson {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
font-size: 10px;
line-height: 1.4;
border-bottom: 1px solid #E2EDF2;
padding: 13px 4px
}
#rental-crew-page .plannerPerson b {
color: var(--navy)
}
#rental-crew-page .plannerPerson small {
font-size: 8px;
color: var(--muted)
}
#rental-crew-page .plannerCell {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 9px 3px;
border-left: 1px solid #E9F0F5;
border-bottom: 1px solid #E2EDF2
}
#rental-crew-page .shiftBlock {
width: 100%;
min-height: 43px;
display: flex;
flex-direction: column;
justify-content: center;
background: #E8F5FE;
border-left: 2px solid var(--brand);
color: #2F6382;
border-radius: 4px;
padding: 6px 4px;
font-size: 8px;
font-weight: 750;
line-height: 1.4
}
#rental-crew-page .shiftBlock small {
font-size: 7px;
margin-top: 4px;
font-weight: 500;
white-space: nowrap
}
#rental-crew-page .shiftBlock.green {
background: #EBF8F0;
border-color: #2E9B74;
color: #247153
}
#rental-crew-page .shiftBlock.amber {
background: #FFF5D5;
border-color: #DDA928;
color: #7B5E16
}
#rental-crew-page .openBlock {
font-size: 8px;
border: 1px dashed #B8CFDC;
border-radius: 5px;
padding: 10px 2px;
color: #7B8E9C;
text-align: center;
width: 100%
}
#rental-crew-page .recurrenceRow {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 14px;
color: #477184;
font-size: 9px;
line-height: 1.5
}
#rental-crew-page .recurrenceRow>.icon {
width: 15px;
height: 15px;
color: var(--brand2)
}
#rental-crew-page .recurrenceRow>span {
margin-left: auto;
font-size: 8px
}
#rental-crew-page .scheduleReview {
display: flex;
align-items: flex-start;
gap: 9px;
border: 1px solid #E5D89F;
background: #FFFAE6;
border-radius: 10px;
padding: 13px;
margin-top: 13px;
color: #775A16
}
#rental-crew-page .scheduleReview>.icon {
width: 19px;
height: 19px;
flex: none
}
#rental-crew-page .scheduleReview strong {
font-size: 11px;
display: block;
line-height: 1.5
}
#rental-crew-page .scheduleReview p {
font-size: 10px;
line-height: 1.7;
color: #807345;
margin-top: 4px
}
#rental-crew-page .quickOrder {
display: flex;
gap: 8px;
align-items: center;
color: #4A7086;
font-size: 9px;
line-height: 1.7;
margin-top: 13px
}
#rental-crew-page .quickOrder>.icon {
width: 17px;
height: 17px
}
#rental-crew-page .quickOrder b {
color: var(--navy)
}
#rental-crew-page .mobileScene {
display: grid;
grid-template-columns: 189px minmax(0, 1fr);
gap: 17px;
align-items: center
}
#rental-crew-page .crewPhone {
position: relative;
background: #fff;
border: 6px solid #132F40;
border-radius: 28px;
overflow: hidden;
max-width: 215px;
width: 100%;
margin: 0 auto;
padding-bottom: 20px
}
#rental-crew-page .deviceTop {
height: 29px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 11px;
font-size: 8px;
color: #264A5F
}
#rental-crew-page .deviceTop i {
width: 40px;
height: 10px;
border-radius: 8px;
background: #132F40
}
#rental-crew-page .mobileHead {
padding: 13px 12px;
background: #EDF8FD;
border-top: 1px solid #D2E8F3;
border-bottom: 1px solid #D2E8F3
}
#rental-crew-page .mobileHead>.icon {
width: 20px;
height: 20px;
color: var(--brand2);
display: block;
margin-bottom: 7px
}
#rental-crew-page .mobileHead strong {
display: block;
font-size: 13px;
line-height: 1.4;
color: var(--navy)
}
#rental-crew-page .mobileHead small {
font-size: 9px;
display: block;
color: var(--muted);
margin-top: 4px
}
#rental-crew-page .mobileBody {
padding: 13px 11px 8px
}
#rental-crew-page .mobileBody>.uiLabel {
font-size: 8px
}
#rental-crew-page .mobileBody h3 {
font-size: 18px;
line-height: 1.3;
color: var(--navy);
margin: 8px 0 12px
}
#rental-crew-page .mobileRow {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.5;
color: #426B82;
border-bottom: 1px solid #E7EFF4;
padding: 8px 0
}
#rental-crew-page .mobileRow>.icon {
width: 14px;
height: 14px;
color: var(--brand2)
}
#rental-crew-page .mobileJobNote {
padding: 9px;
background: #FFFBEA;
border: 1px solid #EBE0B6;
border-radius: 7px;
font-size: 9px;
line-height: 1.65;
color: #7D6A29;
margin-top: 12px
}
#rental-crew-page .mobileJobNote>b {
display: block;
margin-bottom: 3px
}
#rental-crew-page .demoActions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 12px
}
#rental-crew-page .demoActions>span {
text-align: center;
padding: 8px 5px;
font-size: 9px;
line-height: 1.5;
border: 1px solid var(--line);
border-radius: 6px;
color: #627885
}
#rental-crew-page .demoActions>span:first-child {
background: var(--yellow);
border-color: var(--yellow);
color: #1F271A;
font-weight: 800
}
#rental-crew-page .deviceNote {
display: block;
text-align: center;
font-size: 7px;
color: var(--muted);
line-height: 1.5;
margin-top: 9px
}
#rental-crew-page .deviceHome {
height: 4px;
width: 52px;
border-radius: 9px;
background: #183A4C;
position: absolute;
bottom: 7px;
left: calc(50% - 26px)
}
#rental-crew-page .confirmationStack {
display: grid;
gap: 13px;
min-width: 0
}
#rental-crew-page .responseCard {
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
background: #fff
}
#rental-crew-page .responseCard>strong {
font-size: 15px;
display: block;
color: var(--navy);
line-height: 1.4;
margin: 6px 0 11px
}
#rental-crew-page .responseLine {
display: flex;
justify-content: space-between;
align-items: center;
gap: 7px;
font-size: 10px;
color: #42687F;
padding: 11px 0;
border-top: 1px solid #E4EDF3
}
#rental-crew-page .responseLine .pill {
font-size: 7px;
padding: 4px 6px
}
#rental-crew-page .updateCard {
border: 1px solid #CEE3EF;
background: #EEF8FD;
border-radius: 12px;
padding: 15px
}
#rental-crew-page .updateCard>.icon {
color: var(--brand2);
width: 20px;
height: 20px
}
#rental-crew-page .updateCard strong {
display: block;
color: var(--navy);
font-size: 12px;
line-height: 1.45;
margin-top: 9px
}
#rental-crew-page .updateCard p {
font-size: 11px;
line-height: 1.7;
color: #60788A;
margin-top: 7px
}
#rental-crew-page .mobileStatusNote {
display: flex;
gap: 7px;
font-size: 9px;
line-height: 1.7;
color: #617F92
}
#rental-crew-page .mobileStatusNote>.icon {
height: 15px;
width: 15px;
margin-top: 2px
}
#rental-crew-page .hoursMetrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 15px
}
#rental-crew-page .hoursMetrics>div {
padding: 13px 10px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F4FAFD
}
#rental-crew-page .hoursMetrics>div:nth-child(2) {
background: #F0FAF5;
border-color: #CDE8D9
}
#rental-crew-page .hoursMetrics>div:last-child {
background: #FFF9E4;
border-color: #ECDDAD
}
#rental-crew-page .hoursMetrics span {
display: block;
font-size: 9px;
color: var(--muted)
}
#rental-crew-page .hoursMetrics strong {
display: block;
font-size: 28px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -.03em;
margin-top: 6px
}
#rental-crew-page .hoursTableWrap {
padding: 0 15px 6px
}
#rental-crew-page .hoursTable {
width: 100%;
border-collapse: collapse;
font-size: 12px;
text-align: left;
color: #365E75
}
#rental-crew-page .hoursTable th,
#rental-crew-page .hoursTable td {
border: 0;
border-bottom: 1px solid var(--line);
padding: 13px 8px;
line-height: 1.5
}
#rental-crew-page .hoursTable thead th {
font-size: 9px;
font-weight: 600;
background: #F7FBFD;
color: #617B8C
}
#rental-crew-page .hoursTable th:first-child {
width: 52%
}
#rental-crew-page .hoursTable th:not(:first-child),
#rental-crew-page .hoursTable td {
text-align: right;
white-space: nowrap
}
#rental-crew-page .hoursTable tbody th {
font-weight: 700;
color: var(--navy)
}
#rental-crew-page .hoursTable small {
display: block;
font-size: 9px;
font-weight: 500;
color: var(--muted);
margin-top: 3px;
white-space: normal
}
#rental-crew-page .hoursTable tfoot {
font-weight: 800;
color: var(--navy)
}
#rental-crew-page .hoursTable tfoot th,
#rental-crew-page .hoursTable tfoot td {
border-bottom: 0
}
#rental-crew-page .reviewHours {
padding: 15px;
border-top: 1px solid var(--line);
background: #F4FAFD;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px
}
#rental-crew-page .reviewHours strong {
font-size: 12px;
line-height: 1.5;
color: var(--navy);
display: block
}
#rental-crew-page .reviewHours small {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
margin-top: 4px
}
#rental-crew-page .reviewHours>.icon {
color: var(--brand2);
width: 20px;
height: 20px
}
#rental-crew-page .assistantHead>.pill {
margin-left: auto;
white-space: normal;
text-align: center
}
#rental-crew-page .assistantTasks>div {
font-size: 11px
}
#rental-crew-page .assistantHead {
padding: 18px
}
#rental-crew-page .assistantBody {
padding: 18px
}
@media(max-width:1150px) and (min-width:981px) {
#rental-crew-page .mobileScene {
grid-template-columns: 168px minmax(0, 1fr);
gap: 11px
}
#rental-crew-page .responseCard {
padding: 11px
}
#rental-crew-page .responseLine {
flex-direction: column;
align-items: flex-start;
gap: 4px
}
#rental-crew-page .personRow {
gap: 7px;
grid-template-columns: 29px minmax(0, 1fr) auto
}
#rental-crew-page .personAvatar {
height: 29px;
width: 29px
}
#rental-crew-page .personDetails strong {
font-size: 12px
}
#rental-crew-page .personDetails small {
font-size: 8px
}
#rental-crew-page .personAvailability small {
font-size: 7px
}
#rental-crew-page .plannerGrid {
grid-template-columns: 62px repeat(5, minmax(0, 1fr));
padding: 8px 8px 0
}
#rental-crew-page .shiftBlock {
font-size: 7px;
padding: 6px 3px
}
#rental-crew-page .plannerCell {
padding: 9px 2px
}
}
@media(max-width:640px) {
#rental-crew-page .crewPanelHead {
padding: 13px;
gap: 7px
}
#rental-crew-page .crewPanelHead strong {
font-size: 13px
}
#rental-crew-page .crewPanelHead small {
font-size: 8px
}
#rental-crew-page .crewPanelHead>.pill {
font-size: 8px
}
#rental-crew-page .filterTokens {
padding: 11px;
gap: 6px
}
#rental-crew-page .filterTokens>span {
font-size: 8px
}
#rental-crew-page .profileList {
padding: 0 11px
}
#rental-crew-page .personRow {
gap: 8px;
grid-template-columns: 29px minmax(0, 1fr) auto;
padding: 15px 0
}
#rental-crew-page .personAvatar {
width: 29px;
height: 29px;
font-size: 8px
}
#rental-crew-page .personDetails strong {
font-size: 12px
}
#rental-crew-page .personDetails small {
font-size: 8px
}
#rental-crew-page .skillTag {
font-size: 7px
}
#rental-crew-page .personAvailability small {
font-size: 7px
}
#rental-crew-page .personAvailability .pill {
font-size: 7px
}
#rental-crew-page .profileDocument {
padding: 12px;
gap: 8px
}
#rental-crew-page .profileDocument strong {
font-size: 10px
}
#rental-crew-page .profileDocument small {
font-size: 8px
}
#rental-crew-page .plannerGrid {
grid-template-columns: 61px repeat(5, minmax(0, 1fr));
padding: 10px 8px 0
}
#rental-crew-page .plannerCorner,
#rental-crew-page .plannerDay {
font-size: 8px
}
#rental-crew-page .plannerPerson {
font-size: 9px;
padding: 10px 3px
}
#rental-crew-page .plannerPerson small {
font-size: 7px
}
#rental-crew-page .plannerCell {
padding: 8px 2px
}
#rental-crew-page .shiftBlock {
font-size: 7px;
padding: 6px 3px;
min-height: 42px
}
#rental-crew-page .shiftBlock small {
font-size: 6px
}
#rental-crew-page .openBlock {
font-size: 7px
}
#rental-crew-page .recurrenceRow {
font-size: 8px;
padding: 11px;
gap: 5px
}
#rental-crew-page .recurrenceRow>span {
font-size: 7px
}
#rental-crew-page .scheduleReview {
padding: 12px;
gap: 8px
}
#rental-crew-page .scheduleReview strong {
font-size: 10px
}
#rental-crew-page .scheduleReview p {
font-size: 9px
}
#rental-crew-page .mobileScene {
grid-template-columns: 171px minmax(0, 1fr);
gap: 12px
}
#rental-crew-page .responseCard {
padding: 12px
}
#rental-crew-page .responseCard>strong {
font-size: 13px
}
#rental-crew-page .responseLine {
font-size: 9px;
flex-wrap: wrap
}
#rental-crew-page .updateCard {
padding: 12px
}
#rental-crew-page .updateCard p {
font-size: 10px
}
#rental-crew-page .mobileBody h3 {
font-size: 17px
}
#rental-crew-page .hoursMetrics {
padding: 12px;
gap: 7px
}
#rental-crew-page .hoursMetrics>div {
padding: 11px 8px
}
#rental-crew-page .hoursMetrics span {
font-size: 8px
}
#rental-crew-page .hoursMetrics strong {
font-size: 25px
}
#rental-crew-page .hoursTableWrap {
padding: 0 11px 4px
}
#rental-crew-page .hoursTable {
font-size: 11px
}
#rental-crew-page .hoursTable th,
#rental-crew-page .hoursTable td {
padding: 12px 6px
}
#rental-crew-page .hoursTable thead th {
font-size: 8px
}
#rental-crew-page .hoursTable small {
font-size: 8px
}
#rental-crew-page .reviewHours {
padding: 13px
}
#rental-crew-page .reviewHours strong {
font-size: 11px
}
#rental-crew-page .reviewHours small {
font-size: 9px
}
#rental-crew-page .assistantHead,
#rental-crew-page .assistantBody {
padding: 14px
}
}
@media(max-width:420px) {
#rental-crew-page .mobileScene {
grid-template-columns: 1fr;
gap: 18px
}
#rental-crew-page .crewPhone {
max-width: 212px
}
#rental-crew-page .mobileBody h3 {
font-size: 20px
}
#rental-crew-page .mobileHead strong {
font-size: 14px
}
#rental-crew-page .mobileRow {
font-size: 11px
}
#rental-crew-page .mobileJobNote {
font-size: 10px
}
#rental-crew-page .demoActions>span {
font-size: 10px
}
#rental-crew-page .confirmationStack {
grid-template-columns: 1fr 1fr;
gap: 10px
}
#rental-crew-page .responseCard>strong {
font-size: 13px
}
#rental-crew-page .responseLine {
flex-direction: column;
align-items: flex-start;
gap: 5px;
font-size: 10px
}
#rental-crew-page .responseLine .pill {
font-size: 8px
}
#rental-crew-page .mobileStatusNote {
grid-column: 1/-1;
font-size: 10px
}
#rental-crew-page .updateCard p {
font-size: 11px
}
#rental-crew-page .personRow {
grid-template-columns: 28px minmax(0, 1fr);
gap: 7px 8px
}
#rental-crew-page .personAvailability {
grid-column: 2;
display: flex;
align-items: center;
gap: 8px;
text-align: left
}
#rental-crew-page .personAvailability small {
margin: 0;
font-size: 8px
}
#rental-crew-page .personAvailability .pill {
font-size: 8px
}
#rental-crew-page .personDetails small {
font-size: 9px
}
#rental-crew-page .skillTag {
font-size: 8px
}
#rental-crew-page .personRow {
padding: 13px 0
}
#rental-crew-page .assistantHead>.pill {
margin-left: 34px
}
#rental-crew-page .recurrenceRow {
flex-wrap: wrap
}
#rental-crew-page .recurrenceRow>span {
margin-left: 0
}
}
@media(max-width:360px) {
#rental-crew-page .plannerGrid {
grid-template-columns: 53px repeat(5, minmax(0, 1fr));
padding: 7px 5px 0
}
#rental-crew-page .shiftBlock {
font-size: 6px;
padding: 5px 1px
}
#rental-crew-page .shiftBlock small {
font-size: 6px
}
#rental-crew-page .plannerDay {
font-size: 7px
}
#rental-crew-page .plannerPerson {
font-size: 8px
}
#rental-crew-page .plannerPerson small {
font-size: 6px
}
#rental-crew-page .hoursMetrics strong {
font-size: 23px
}
#rental-crew-page .hoursTable {
font-size: 10px
}
#rental-crew-page .hoursTable th,
#rental-crew-page .hoursTable td {
padding: 10px 4px
}
#rental-crew-page .hoursTable small {
font-size: 7px
}
#rental-crew-page .confirmationStack {
grid-template-columns: 1fr
}
#rental-crew-page .responseLine {
flex-direction: row;
align-items: center
}
#rental-crew-page .mobileStatusNote {
grid-column: auto
}
}  .time-and-productivity-tracking .icon2 {
width: 24px;
height: 24px;
flex: 0 0 auto;
vertical-align: middle
} .time-and-productivity-tracking .ey {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellowsoft);
color: #0B0B0B;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .01em;
margin-bottom: 18px
}
.time-and-productivity-tracking .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 21px;
border-radius: 11px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: center;
transition: background .2s, border-color .2s
}
.time-and-productivity-tracking .btn .icon2 {
width: 17px;
height: 17px
}
.time-and-productivity-tracking .btn.black {
background: #0B0B0B;
color: #fff
}
.time-and-productivity-tracking .btn.black:hover {
background: #303030
}
.time-and-productivity-tracking .btn.yellow {
background: var(--yellow);
color: #0B0B0B
}
.time-and-productivity-tracking .btn.yellow:hover {
background: #FFD454
}
.time-and-productivity-tracking .btn.outline {
background: #fff;
border-color: var(--line);
color: var(--navy)
}
.time-and-productivity-tracking .btn.outline:hover {
border-color: #8BBAD2;
background: #F5FBFF
}
.time-and-productivity-tracking .actions {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 25px
}
.time-and-productivity-tracking .textLink {
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--navy);
font-weight: 750;
font-size: 14px;
line-height: 1.5;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
margin-top: 22px
}
.time-and-productivity-tracking .textLink .icon2 {
width: 17px;
height: 17px
}
.time-and-productivity-tracking .textLink:hover {
color: var(--brand2)
}
.time-and-productivity-tracking .soft {
background: var(--sky2)
}
.time-and-productivity-tracking .sectionHead {
max-width: 860px;
margin-bottom: 36px
}
.time-and-productivity-tracking .sectionHead p {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-top: 17px
}
.time-and-productivity-tracking .center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.time-and-productivity-tracking .hero {
padding: 40px 0 48px;
min-height: 0;
height: auto;
background: linear-gradient(180deg, #fff 0%, #EFF9FE 100%);
overflow: visible
}
.time-and-productivity-tracking .heroGrid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: 40px;
align-items: center
}
.time-and-productivity-tracking .heroGrid>*,
.time-and-productivity-tracking .feature>*,
.time-and-productivity-tracking .aiGrid>* {
min-width: 0
}
.time-and-productivity-tracking .heroCopy {
min-width: 0
}
.time-and-productivity-tracking .hero h1 {
max-width: 630px
}
.time-and-productivity-tracking .breadcrumb {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 10px;
line-height: 1.6;
margin-bottom: 21px
}
.time-and-productivity-tracking .breadcrumb a:hover {
text-decoration: underline;
color: var(--navy)
}
.time-and-productivity-tracking .hero .lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 610px;
margin-top: 19px
}
.time-and-productivity-tracking .micro {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
margin-top: 14px
}
.time-and-productivity-tracking .heroPills {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 17px
}
.time-and-productivity-tracking .heroPills span {
font-size: 10px;
line-height: 1.4;
font-weight: 700;
border: 1px solid #C8E8F7;
background: #fff;
color: var(--navy);
border-radius: 99px;
padding: 6px 9px
}
.time-and-productivity-tracking .heroVisual {
display: block;
position: relative;
width: 100%;
max-width: 500px;
min-width: 0;
min-height: 0;
height: auto;
justify-self: end;
align-self: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none
}
.time-and-productivity-tracking .heroImage {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4/3;
object-fit: contain;
margin: 0;
padding: 0;
border: 0;
box-shadow: none
}
.time-and-productivity-tracking .heroVisual figcaption {
color: var(--muted);
text-align: center;
font-size: 9px;
line-height: 1.5;
margin-top: 10px
}
.time-and-productivity-tracking .trust {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 25px 0
}
.time-and-productivity-tracking .trustLabel {
font-size: 12px;
text-align: center;
font-weight: 700;
margin-bottom: 16px;
color: #52697C
}
.time-and-productivity-tracking .outcomes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px
}
.time-and-productivity-tracking .outcome {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 23px
}
.time-and-productivity-tracking .outcome:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--brand)
}
.time-and-productivity-tracking .outcome:nth-child(2):before {
background: var(--yellow)
}
.time-and-productivity-tracking .outcome:nth-child(3):before {
background: var(--green)
}
.time-and-productivity-tracking .outcome:nth-child(4):before {
background: var(--purple)
}
.time-and-productivity-tracking .outcome>.icon2 {
color: var(--navy)
}
.time-and-productivity-tracking .outcome h3 {
font-size: 18px;
margin: 15px 0 9px
}
.time-and-productivity-tracking .outcome p {
font-size: 13px;
color: var(--muted);
line-height: 1.65
}
.time-and-productivity-tracking .feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.time-and-productivity-tracking .feature.reverse .visual {
order: -1
}
.time-and-productivity-tracking .featureCopy>p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin-top: 18px
}
.time-and-productivity-tracking .featureCopy>p.smallNote {
font-size: 11px;
line-height: 1.6;
margin-top: 15px
}
.time-and-productivity-tracking .fl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 23px
}
.time-and-productivity-tracking .fi {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55
}
.time-and-productivity-tracking .tick {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--greenbg);
color: #08734E;
margin-top: 1px
}
.time-and-productivity-tracking .tick .icon2 {
height: 13px;
width: 13px
}
.time-and-productivity-tracking .visual {
min-width: 0;
width: 100%;
padding: 21px;
border: 1px solid #C6E5F3;
border-radius: 21px;
background: linear-gradient(145deg, #fff, #EAF8FF);
position: relative;
box-shadow: none;
overflow: visible
}
.time-and-productivity-tracking .visual figcaption {
font-size: 9px;
line-height: 1.5;
color: var(--muted);
margin-top: 16px;
text-align: center
}
.time-and-productivity-tracking .uiHeading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--navy);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
margin-bottom: 16px
}
.time-and-productivity-tracking .uiHeading>span:first-child {
display: flex;
align-items: center;
gap: 7px;
min-width: 0
}
.time-and-productivity-tracking .uiHeading .icon2 {
height: 19px;
width: 19px
}
.time-and-productivity-tracking .pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 750;
line-height: 1.4;
background: var(--sky);
color: #165C80;
border-radius: 99px;
padding: 5px 8px;
white-space: nowrap
}
.time-and-productivity-tracking .uiPanel {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-width: 0
}
.time-and-productivity-tracking .uiLabel {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 800;
color: #607487;
line-height: 1.5
}
.time-and-productivity-tracking .tileIcon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--sky);
color: var(--navy);
display: grid;
place-items: center
}
.time-and-productivity-tracking .uiFoot {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
line-height: 1.6;
color: #567386;
margin-top: 15px
}
.time-and-productivity-tracking .uiFoot .icon2 {
height: 15px;
width: 15px;
color: var(--green)
}
.time-and-productivity-tracking .dark {
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow)
}
.time-and-productivity-tracking .dark h2,
.time-and-productivity-tracking .dark h3 {
color: white
}
.time-and-productivity-tracking .dark .ey {
background: var(--yellow);
color: #111
}
.time-and-productivity-tracking .dark .textLink {
color: #fff
}
.time-and-productivity-tracking .dark a:focus-visible {
outline-color: var(--yellow)
}
.time-and-productivity-tracking .aiGrid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 50px;
align-items: center
}
.time-and-productivity-tracking .aiLead {
color: #D2D8DD;
font-size: 16px;
line-height: 1.7;
margin-top: 21px
}
.time-and-productivity-tracking .aiMini {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 27px
}
.time-and-productivity-tracking .aiMini article {
padding: 18px;
border: 1px solid #35404A;
border-radius: 12px;
background: #1B2127
}
.time-and-productivity-tracking .aiMini .icon2 {
color: var(--yellow);
width: 22px;
height: 22px
}
.time-and-productivity-tracking .aiMini h3 {
font-size: 16px;
margin: 13px 0 9px;
letter-spacing: -.01em
}
.time-and-productivity-tracking .aiMini p {
font-size: 12px;
line-height: 1.7;
color: #CBD5DB
}
.time-and-productivity-tracking .aiNote {
font-size: 11px;
line-height: 1.7;
color: #A5B7C4;
margin-top: 18px
}
.time-and-productivity-tracking .aiVisual {
min-width: 0;
width: 100%;
margin: 0
}
.time-and-productivity-tracking .aiVisual figcaption {
font-size: 9px;
color: #9AABB7;
text-align: center;
line-height: 1.6;
margin-top: 13px
}
.time-and-productivity-tracking .connectedGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.time-and-productivity-tracking .connectedCard {
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
padding: 26px
}
.time-and-productivity-tracking .connectedCard h3 {
margin: 18px 0 11px
}
.time-and-productivity-tracking .connectedCard p {
font-size: 15px;
line-height: 1.7;
color: var(--muted)
}
.time-and-productivity-tracking .handoffBand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 23px 26px;
background: #F5FBFF;
margin-top: 24px
}
.time-and-productivity-tracking .handoffBand>div {
display: flex;
align-items: center;
gap: 14px;
flex-direction: row;
}
.time-and-productivity-tracking .handoffBand>div>.icon2 {
color: var(--navy);
width: 29px;
height: 29px
}
.time-and-productivity-tracking .handoffBand strong {
font-size: 16px;
line-height: 1.5;
display: block
}
.time-and-productivity-tracking .handoffBand small {
display: block;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin-top: 5px
}
.time-and-productivity-tracking .handoffBand .btn {
flex-shrink: 0;
font-size: 12px;
padding: 11px 15px
}
.time-and-productivity-tracking .featureGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px
}
.time-and-productivity-tracking .featureCard {
border: 1px solid var(--line);
border-radius: 15px;
background: #fff;
padding: 25px
}
.time-and-productivity-tracking .featureCard>.icon2 {
color: var(--navy)
}
.time-and-productivity-tracking .featureCard h3 {
font-size: 18px;
margin: 15px 0 10px
}
.time-and-productivity-tracking .featureCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.time-and-productivity-tracking .toolsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px
}
.time-and-productivity-tracking .toolCard {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px 19px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 13px;
transition: background .2s, border-color .2s;
background: #fff;
min-width: 0
}
.time-and-productivity-tracking .toolCard:nth-child(2) {
border-top-color: var(--yellow)
}
.time-and-productivity-tracking .toolCard:nth-child(3) {
border-top-color: var(--green)
}
.time-and-productivity-tracking .toolCard:nth-child(4) {
border-top-color: var(--purple)
}
.time-and-productivity-tracking .toolCard:nth-child(5) {
border-top-color: #E19F41
}
.time-and-productivity-tracking .toolCard:hover {
background: #F5FBFF;
border-color: #8FBAD0
}
.time-and-productivity-tracking .toolCard strong {
font-size: 16px;
line-height: 1.4;
color: var(--navy);
letter-spacing: -.02em
}
.time-and-productivity-tracking .toolCard .tileIcon {
height: 39px;
width: 39px;
flex-basis: 39px
}
.time-and-productivity-tracking .toolArrow {
position: absolute;
top: 31px;
right: 17px;
width: 17px;
height: 17px;
color: #6E8A9D
}
.time-and-productivity-tracking .useCases {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px
}
.time-and-productivity-tracking .useCase {
padding: 24px 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 15px
}
.time-and-productivity-tracking .useCase>.icon2 {
color: var(--navy)
}
.time-and-productivity-tracking .useCase h3 {
font-size: 18px;
margin: 16px 0 12px
}
.time-and-productivity-tracking .useCase p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.time-and-productivity-tracking .roleGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px
}
.time-and-productivity-tracking .roleCard {
padding: 5px 24px 5px 0;
border-right: 1px solid var(--line)
}
.time-and-productivity-tracking .roleCard:last-child {
border: 0;
padding-right: 0
}
.time-and-productivity-tracking .roleNumber {
font-size: 12px;
letter-spacing: .07em;
color: #007AAB;
font-weight: 800
}
.time-and-productivity-tracking .roleCard h3 {
font-size: 22px;
margin: 13px 0 16px
}
.time-and-productivity-tracking .roleCard>strong {
font-size: 15px;
line-height: 1.6;
display: block;
margin-bottom: 8px;
color: var(--navy)
}
.time-and-productivity-tracking .roleCard p {
font-size: 14px;
line-height: 1.7;
color: var(--muted)
}
.time-and-productivity-tracking .workflowBand {
padding: 28px 0;
background: #0D2939;
color: #fff
}
.time-and-productivity-tracking .workflowGrid {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
gap: 23px;
align-items: center
}
.time-and-productivity-tracking .workflowLead {
font-size: 17px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.02em
}
.time-and-productivity-tracking .workflowStep {
display: flex;
gap: 9px;
align-items: flex-start
}
.time-and-productivity-tracking .workflowStep>span {
font-size: 11px;
line-height: 1.6;
color: var(--yellow);
font-weight: 800
}
.time-and-productivity-tracking .workflowStep strong {
font-size: 14px;
line-height: 1.5;
display: block
}
.time-and-productivity-tracking .workflowStep p {
font-size: 10px;
line-height: 1.7;
color: #B4CBDA;
margin-top: 5px
}      .time-and-productivity-tracking .final {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 35px;
align-items: center;
background: #101214;
color: #fff;
border-top: 4px solid var(--yellow);
border-radius: 22px;
padding: 44px
}
.time-and-productivity-tracking .final h2 {
font-size: clamp(32px, 3.4vw, 42px);
color: #fff
}
.time-and-productivity-tracking .final .ey {
background: #2B2C24;
color: var(--yellow);
font-size: 10px;
letter-spacing: .03em;
border: 1px solid #48472F
}
.time-and-productivity-tracking .final p {
font-size: 15px;
line-height: 1.75;
color: #D2D8DD;
max-width: 650px;
margin-top: 19px
}
.time-and-productivity-tracking .ctaBtns {
display: flex;
flex-direction: column;
gap: 12px
}
.time-and-productivity-tracking .ctaBtns .btn {
min-width: 219px
}
.time-and-productivity-tracking .btn.darkOutline {
color: white;
background: transparent;
border-color: #535E65
}
.time-and-productivity-tracking .btn.darkOutline:hover {
background: #252D33
}
.time-and-productivity-tracking .final a:focus-visible {
outline-color: var(--yellow)
}
.time-and-productivity-tracking .footerNote {
font-size: 10px;
line-height: 1.75;
text-align: center;
color: var(--muted);
max-width: 880px;
margin: 20px auto 0
}
@media (min-width:981px) and (max-width:1150px) {
.time-and-productivity-tracking .heroGrid {
gap: 28px
}
.time-and-productivity-tracking h1 {
font-size: clamp(40px, 4.25vw, 48px)
}
.time-and-productivity-tracking .hero .lead {
font-size: 16px
}
.time-and-productivity-tracking .feature,
.time-and-productivity-tracking .aiGrid {
gap: 30px
}
.time-and-productivity-tracking .visual {
padding: 17px
}
.time-and-productivity-tracking .toolCard {
padding: 21px 15px
}
.time-and-productivity-tracking .toolCard strong {
font-size: 14px
}
.time-and-productivity-tracking .handoffBand {
padding: 20px
}
.time-and-productivity-tracking .handoffBand strong {
font-size: 14px
}
}
@media (max-width:980px) {
.time-and-productivity-tracking section {
padding: 64px 0
}
.time-and-productivity-tracking .hero {
padding: 34px 0 42px
}
.time-and-productivity-tracking .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 26px
}
.time-and-productivity-tracking .heroCopy {
max-width: 790px
}
.time-and-productivity-tracking .hero h1 {
max-width: 800px;
font-size: clamp(38px, 5.5vw, 52px)
}
.time-and-productivity-tracking .hero .lead {
max-width: 760px
}
.time-and-productivity-tracking .heroVisual {
max-width: 460px;
justify-self: center
}
.time-and-productivity-tracking .feature,
.time-and-productivity-tracking .aiGrid {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.time-and-productivity-tracking .feature.reverse .visual {
order: 0
}
.time-and-productivity-tracking .featureCopy {
max-width: 790px
}
.time-and-productivity-tracking .visual {
max-width: 640px;
margin: 0 auto
}
.time-and-productivity-tracking .outcomes,
.time-and-productivity-tracking .useCases {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.time-and-productivity-tracking .connectedGrid {
gap: 13px
}
.time-and-productivity-tracking .connectedCard {
padding: 22px
}
.time-and-productivity-tracking .featureGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.time-and-productivity-tracking .aiVisual {
max-width: 600px;
margin: auto
}
.time-and-productivity-tracking .aiMini {
max-width: 780px
}
.time-and-productivity-tracking .handoffBand {
align-items: flex-start;
flex-direction: column;
gap: 18px
}
.time-and-productivity-tracking .toolsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.time-and-productivity-tracking .toolCard {
min-height: 145px
}
.time-and-productivity-tracking .roleGrid {
gap: 20px
}
.time-and-productivity-tracking .roleCard {
padding-right: 18px
}
.time-and-productivity-tracking .roleCard h3 {
font-size: 20px
}
.time-and-productivity-tracking .workflowGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.time-and-productivity-tracking .workflowLead {
grid-column: 1/-1;
text-align: center;
font-size: 19px
}
.time-and-productivity-tracking .workflowLead br {
display: none
}
.time-and-productivity-tracking .final {
grid-template-columns: 1fr;
gap: 27px
}
.time-and-productivity-tracking .final .ctaBtns {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap
}
.time-and-productivity-tracking .final .btn {
min-width: 210px
}
}
@media (max-width:640px) {
.time-and-productivity-tracking .wrap {
width: calc(100% - 32px)
}
.time-and-productivity-tracking section {
padding: 49px 0
}
.time-and-productivity-tracking h2 {
font-size: 33px;
line-height: 1.15
}
.time-and-productivity-tracking .ey {
font-size: 10px;
padding: 7px 11px;
margin-bottom: 16px
}
.time-and-productivity-tracking .sectionHead {
margin-bottom: 27px
}
.time-and-productivity-tracking .sectionHead p {
font-size: 15px;
line-height: 1.75;
margin-top: 15px
}
.time-and-productivity-tracking .hero {
padding: 25px 0 34px
}
.time-and-productivity-tracking .heroGrid {
gap: 21px
}
.time-and-productivity-tracking .breadcrumb {
font-size: 9px;
gap: 6px;
line-height: 1.7;
margin-bottom: 18px
}
.time-and-productivity-tracking .hero h1 {
font-size: clamp(31px, 8.8vw, 42px);
line-height: 1.12
}
.time-and-productivity-tracking .hero .lead {
font-size: 16px;
line-height: 1.7;
margin-top: 18px
}
.time-and-productivity-tracking .hero .actions {
gap: 8px;
margin-top: 23px
}
.time-and-productivity-tracking .hero .actions .btn {
flex: 1 1 141px;
padding: 12px 12px;
font-size: 13px
}
.time-and-productivity-tracking .hero .micro {
font-size: 11px
}
.time-and-productivity-tracking .heroPills {
gap: 6px;
margin-top: 16px
}
.time-and-productivity-tracking .heroPills span {
font-size: 9px
}
.time-and-productivity-tracking .heroVisual {
max-width: 420px
}
.time-and-productivity-tracking .heroVisual figcaption {
font-size: 8px;
margin-top: 6px
}
.time-and-productivity-tracking .trust {
padding: 22px 0
}
.time-and-productivity-tracking .trustLabel {
font-size: 11px;
margin-bottom: 12px
}
.time-and-productivity-tracking .outcomes {
gap: 12px
}
.time-and-productivity-tracking .outcome {
padding: 19px
}
.time-and-productivity-tracking .outcome h3 {
font-size: 17px
}
.time-and-productivity-tracking .outcome p {
font-size: 13px
}
.time-and-productivity-tracking .feature {
gap: 27px
}
.time-and-productivity-tracking .featureCopy>p {
font-size: 15px;
line-height: 1.8
}
.time-and-productivity-tracking .fl {
gap: 11px 13px;
margin-top: 21px
}
.time-and-productivity-tracking .fi {
font-size: 12px
}
.time-and-productivity-tracking .textLink {
font-size: 13px
}
.time-and-productivity-tracking .visual {
padding: 15px;
border-radius: 16px
}
.time-and-productivity-tracking .uiHeading {
font-size: 12px;
margin-bottom: 13px;
gap: 7px
}
.time-and-productivity-tracking .uiHeading .pill {
font-size: 8px;
padding: 4px 6px
}
.time-and-productivity-tracking .uiHeading .icon2 {
width: 18px;
height: 18px
}
.time-and-productivity-tracking .uiFoot {
font-size: 9px
}
.time-and-productivity-tracking .visual figcaption {
font-size: 8px;
line-height: 1.7
}
.time-and-productivity-tracking .aiLead {
font-size: 15px;
line-height: 1.8
}
.time-and-productivity-tracking .aiMini {
gap: 11px;
margin-top: 23px
}
.time-and-productivity-tracking .aiMini article {
padding: 16px
}
.time-and-productivity-tracking .aiMini h3 {
font-size: 15px
}
.time-and-productivity-tracking .aiMini p {
font-size: 12px
}
.time-and-productivity-tracking .aiNote {
font-size: 10px
}
.time-and-productivity-tracking .connectedGrid {
grid-template-columns: 1fr;
gap: 13px
}
.time-and-productivity-tracking .connectedCard {
padding: 23px
}
.time-and-productivity-tracking .connectedCard h3 {
margin: 15px 0 9px
}
.time-and-productivity-tracking .connectedCard p {
font-size: 14px
}
.time-and-productivity-tracking .handoffBand {
padding: 20px
}
.time-and-productivity-tracking .handoffBand>div {
align-items: flex-start;
gap: 10px
}
.time-and-productivity-tracking .handoffBand strong {
font-size: 15px;
line-height: 1.5
}
.time-and-productivity-tracking .handoffBand small {
font-size: 11px
}
.time-and-productivity-tracking .handoffBand .btn {
width: 100%;
font-size: 11px;
padding: 12px
}
.time-and-productivity-tracking .featureGrid {
gap: 13px
}
.time-and-productivity-tracking .featureCard {
padding: 21px
}
.time-and-productivity-tracking .featureCard h3 {
font-size: 17px
}
.time-and-productivity-tracking .featureCard p {
font-size: 13px
}
.time-and-productivity-tracking .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.time-and-productivity-tracking .toolCard {
padding: 19px 15px;
min-height: 155px
}
.time-and-productivity-tracking .toolCard strong {
font-size: 15px
}
.time-and-productivity-tracking .toolCard:last-child {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
min-height: 80px;
gap: 16px
}
.time-and-productivity-tracking .toolCard:last-child .toolArrow {
top: 31px
}
.time-and-productivity-tracking .toolCard:last-child strong {
padding-right: 25px
}
.time-and-productivity-tracking .toolArrow {
right: 14px;
width: 15px;
height: 15px
}
.time-and-productivity-tracking .useCases {
gap: 13px
}
.time-and-productivity-tracking .useCase {
padding: 21px 18px
}
.time-and-productivity-tracking .useCase h3 {
font-size: 17px
}
.time-and-productivity-tracking .useCase p {
font-size: 13px
}
.time-and-productivity-tracking .roleGrid {
grid-template-columns: 1fr;
gap: 21px
}
.time-and-productivity-tracking .roleCard {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0 0 22px
}
.time-and-productivity-tracking .roleCard:last-child {
padding-bottom: 0
}
.time-and-productivity-tracking .roleCard h3 {
font-size: 21px;
margin: 9px 0 12px
}
.time-and-productivity-tracking .roleCard>strong {
font-size: 14px
}
.time-and-productivity-tracking .roleCard p {
font-size: 14px
}
.time-and-productivity-tracking .workflowBand {
padding: 28px 0
}
.time-and-productivity-tracking .workflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 20px
}
.time-and-productivity-tracking .workflowLead {
font-size: 18px
}
.time-and-productivity-tracking .workflowStep strong {
font-size: 14px
}
.time-and-productivity-tracking .workflowStep p {
font-size: 10px
}     .time-and-productivity-tracking .final {
padding: 29px 23px;
border-radius: 18px;
gap: 24px
}
.time-and-productivity-tracking .final h2 {
font-size: 32px
}
.time-and-productivity-tracking .final p {
font-size: 14px;
line-height: 1.8
}
.time-and-productivity-tracking .final .ey {
font-size: 9px
}
.time-and-productivity-tracking .final .ctaBtns {
flex-direction: column;
gap: 11px
}
.time-and-productivity-tracking .final .btn {
width: 100%;
min-width: 0;
font-size: 13px
}
.time-and-productivity-tracking .footerNote {
font-size: 9px;
margin-top: 16px
}
}
@media (max-width:420px) {
.time-and-productivity-tracking .outcomes,
.time-and-productivity-tracking .featureGrid,
.time-and-productivity-tracking .useCases {
grid-template-columns: 1fr
}
.time-and-productivity-tracking .outcome {
padding: 23px
}
.time-and-productivity-tracking .outcome h3 {
font-size: 18px
}
.time-and-productivity-tracking .outcome p {
font-size: 14px
}
.time-and-productivity-tracking .fl {
grid-template-columns: 1fr;
gap: 10px
}
.time-and-productivity-tracking .fi {
font-size: 13px
}
.time-and-productivity-tracking .aiMini {
grid-template-columns: 1fr
}
.time-and-productivity-tracking .aiMini h3 {
font-size: 17px
}
.time-and-productivity-tracking .aiMini p {
font-size: 13px
}
.time-and-productivity-tracking .aiMini article {
padding: 19px
}
.time-and-productivity-tracking .featureCard h3,
.time-and-productivity-tracking .useCase h3 {
font-size: 19px
}
.time-and-productivity-tracking .featureCard p,
.time-and-productivity-tracking .useCase p {
font-size: 14px
}
.time-and-productivity-tracking .toolsGrid {
grid-template-columns: 1fr
}
.time-and-productivity-tracking .toolCard,
.time-and-productivity-tracking .toolCard:last-child {
min-height: 76px;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px;
border-top-width: 1px;
border-left: 3px solid var(--brand)
}
.time-and-productivity-tracking .toolCard:nth-child(2) {
border-top-color: var(--line);
border-left-color: var(--yellow)
}
.time-and-productivity-tracking .toolCard:nth-child(3) {
border-top-color: var(--line);
border-left-color: var(--green)
}
.time-and-productivity-tracking .toolCard:nth-child(4) {
border-top-color: var(--line);
border-left-color: var(--purple)
}
.time-and-productivity-tracking .toolCard:nth-child(5) {
border-top-color: var(--line);
border-left-color: #E19F41
}
.time-and-productivity-tracking .toolCard strong {
font-size: 15px;
padding-right: 20px
}
.time-and-productivity-tracking .toolArrow,
.time-and-productivity-tracking .toolCard:last-child .toolArrow {
top: 30px
}
.time-and-productivity-tracking .toolCard .tileIcon {
height: 36px;
width: 36px;
flex-basis: 36px
}
.time-and-productivity-tracking .final h2 {
font-size: 30px
}
}
@media (max-width:360px) {
.time-and-productivity-tracking h2 {
font-size: 30px
}
.time-and-productivity-tracking .hero .actions .btn {
flex-basis: 130px;
font-size: 12px
}
.time-and-productivity-tracking .hero h1 {
font-size: 31px
}
.time-and-productivity-tracking .heroPills span {
font-size: 8px
}
.time-and-productivity-tracking .heroPills {
gap: 5px
}
.time-and-productivity-tracking .uiHeading {
font-size: 11px
}
.time-and-productivity-tracking .uiHeading>.pill {
font-size: 7px
}
.time-and-productivity-tracking .visual {
padding: 12px
}
.time-and-productivity-tracking .final {
padding: 26px 20px
}
.time-and-productivity-tracking .final h2 {
font-size: 28px
}
}
@media (prefers-reduced-motion:reduce) {
.time-and-productivity-tracking * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important
}
}
@media print {
.time-and-productivity-tracking section {
padding: 24px 0
}
.time-and-productivity-tracking .hero,
.time-and-productivity-tracking .soft {
background: #fff
}
.time-and-productivity-tracking .dark,
.time-and-productivity-tracking .workflowBand,
.time-and-productivity-tracking .final {
background: #fff;
color: #11283A
}
.time-and-productivity-tracking .dark h2,
.time-and-productivity-tracking .dark h3,
.time-and-productivity-tracking .final h2 {
color: #11283A
}
.time-and-productivity-tracking .dark p,
.time-and-productivity-tracking .final p {
color: #52697C
}
.time-and-productivity-tracking .btn {
display: none
}
.time-and-productivity-tracking .visual,
.time-and-productivity-tracking .outcome,
.time-and-productivity-tracking .featureCard,
.time-and-productivity-tracking details {
break-inside: avoid
}
.time-and-productivity-tracking .heroImage {
max-width: 380px
}
.time-and-productivity-tracking .heroVisual {
justify-self: center
}
}
.time-and-productivity-tracking .dark .textLink {
color: #FFF1BD
}
.time-and-productivity-tracking .dark .textLink:focus-visible {
outline-color: var(--yellow)
}
.time-and-productivity-tracking .supportStrip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px
}
.time-and-productivity-tracking .supportStrip>span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #506B7E;
padding: 10px;
text-align: center;
line-height: 1.4
}
.time-and-productivity-tracking .supportStrip .icon2 {
width: 19px;
height: 19px;
color: var(--navy)
}
.time-and-productivity-tracking .workflowStep {
min-width: 0
}
.time-and-productivity-tracking .featureCopy>p {
max-width: 580px
}
.time-and-productivity-tracking .toolCard strong {
padding-right: 12px
}
.time-and-productivity-tracking .pill.green {
background: var(--greenbg);
color: #116746
}
@media (max-width:980px) {
.time-and-productivity-tracking .supportStrip {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media (max-width:640px) {
.time-and-productivity-tracking .supportStrip {
gap: 7px
}
.time-and-productivity-tracking .supportStrip>span {
font-size: 10px;
padding: 10px 6px;
gap: 5px
}
.time-and-productivity-tracking .supportStrip .icon2 {
width: 16px;
height: 16px
}
}
@media (max-width:360px) {
.time-and-productivity-tracking .supportStrip {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
.time-and-productivity-tracking .assistantPanel {
border: 1px solid #485B6A;
border-radius: 16px;
overflow: hidden;
background: #fff;
color: var(--ink)
}
.time-and-productivity-tracking .assistantHead {
display: flex;
align-items: center;
gap: 11px;
padding: 19px;
border-bottom: 1px solid var(--line)
}
.time-and-productivity-tracking .assistantHead>.icon2 {
width: 26px;
height: 26px;
color: #16799F
}
.time-and-productivity-tracking .assistantHead strong {
font-size: 14px;
display: block;
color: var(--navy)
}
.time-and-productivity-tracking .assistantHead small {
font-size: 9px;
display: block;
color: var(--muted);
margin-top: 4px
}
.time-and-productivity-tracking .assistantHead>.pill {
margin-left: auto
}
.time-and-productivity-tracking .assistantBody {
padding: 19px;
min-width: 0
}
.time-and-productivity-tracking .assistantPrompt {
background: #F1F8FC;
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
font-size: 12px;
color: #28536D;
line-height: 1.7;
margin-bottom: 16px
}
.time-and-productivity-tracking .assistantLabel {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 800;
color: #657B89;
display: block;
margin-bottom: 10px
}
.time-and-productivity-tracking .assistantAnswer {
border: 1px solid var(--line);
border-radius: 10px;
padding: 15px
}
.time-and-productivity-tracking .assistantAnswer h3 {
font-size: 16px;
color: var(--navy);
line-height: 1.4
}
.time-and-productivity-tracking .assistantAnswer p {
color: #527182;
font-size: 11px;
line-height: 1.7;
margin-top: 9px
}
.time-and-productivity-tracking .assistantTasks {
display: grid;
gap: 10px;
margin: 15px 0
}
.time-and-productivity-tracking .assistantTasks>div {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
line-height: 1.6;
color: #355E74
}
.time-and-productivity-tracking .assistantTasks .icon2 {
width: 16px;
height: 16px;
color: #08734E;
margin-top: 1px
}
.time-and-productivity-tracking .assistantReview {
padding: 14px 18px;
background: #FFF9DF;
border-top: 1px solid #E7D99E;
color: #725A18;
font-size: 10px;
display: flex;
gap: 8px;
align-items: center;
line-height: 1.65
}
.time-and-productivity-tracking .assistantReview .icon2 {
width: 20px;
height: 20px
}
.time-and-productivity-tracking .assistantHead {
padding: 15px;
gap: 8px;
flex-wrap: wrap
}
.time-and-productivity-tracking .assistantHead strong {
font-size: 12px
}
.time-and-productivity-tracking .assistantHead small {
font-size: 8px
}
.time-and-productivity-tracking .assistantHead>.pill {
font-size: 8px
}
.time-and-productivity-tracking .assistantBody {
padding: 14px
}
.time-and-productivity-tracking .assistantPrompt {
padding: 12px;
font-size: 11px
}
.time-and-productivity-tracking .assistantAnswer {
padding: 13px
}
.time-and-productivity-tracking .assistantAnswer h3 {
font-size: 15px
}
.time-and-productivity-tracking .assistantTasks>div {
font-size: 10px
}
.time-and-productivity-tracking .assistantReview {
padding: 12px 14px;
font-size: 9px
}
.time-and-productivity-tracking .assistantHead>.pill {
margin-left: 34px
}
.time-and-productivity-tracking .pill.green {
background: #EAF8F3;
color: #116746
}
.time-and-productivity-tracking .pill.yellow {
background: #FFF7D6;
color: #745604
}
.time-and-productivity-tracking .timePanelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 17px;
border-bottom: 1px solid var(--line)
}
.time-and-productivity-tracking .timePanelName {
display: flex;
align-items: center;
gap: 9px;
min-width: 0
}
.time-and-productivity-tracking .timePanelName>.icon2 {
color: #2089B4;
width: 22px;
height: 22px
}
.time-and-productivity-tracking .timePanelName strong {
display: block;
font-size: 14px;
line-height: 1.4;
color: var(--navy)
}
.time-and-productivity-tracking .timePanelName small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 4px
}
.time-and-productivity-tracking .timeEntryScene {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 19px;
align-items: center
}
.time-and-productivity-tracking .timePhone {
position: relative;
min-width: 0;
width: 100%;
max-width: 220px;
border: 6px solid #132F40;
border-radius: 27px;
background: #fff;
overflow: hidden;
padding-bottom: 15px;
margin: 0 auto
}
.time-and-productivity-tracking .timePhoneStatus {
height: 30px;
padding: 8px 11px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 8px;
font-weight: 750;
color: #203C4D
}
.time-and-productivity-tracking .timePhoneStatus i {
display: block;
width: 46px;
height: 10px;
border-radius: 99px;
background: #132F40
}
.time-and-productivity-tracking .timePhoneHead {
background: #EAF7FD;
padding: 13px;
border-top: 1px solid #D0E8F4;
border-bottom: 1px solid #D0E8F4
}
.time-and-productivity-tracking .timePhoneHead>.icon2 {
height: 20px;
width: 20px;
color: #1C89B6;
margin-bottom: 8px
}
.time-and-productivity-tracking .timePhoneHead strong {
display: block;
font-size: 15px;
line-height: 1.4;
color: var(--navy)
}
.time-and-productivity-tracking .timePhoneHead small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px
}
.time-and-productivity-tracking .timePhoneBody {
padding: 15px 12px 8px
}
.time-and-productivity-tracking .timeBig {
font-size: 40px;
line-height: 1.2;
display: block;
color: var(--navy);
letter-spacing: -.04em;
margin: 7px 0 17px
}
.time-and-productivity-tracking .timeBig small {
font-size: 18px;
letter-spacing: 0;
font-weight: 500;
color: #537788
}
.time-and-productivity-tracking .timeSession {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
padding: 9px 0;
border-top: 1px solid var(--line);
font-size: 10px;
color: #4F6C7E
}
.time-and-productivity-tracking .timeSession b {
color: var(--navy);
white-space: nowrap
}
.time-and-productivity-tracking .timePhoneJob {
border: 1px solid var(--line);
border-radius: 7px;
padding: 10px;
margin-top: 12px;
background: #F8FBFD
}
.time-and-productivity-tracking .timePhoneJob strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.5
}
.time-and-productivity-tracking .timePhoneJob small {
display: block;
font-size: 8px;
color: var(--muted);
margin-top: 4px;
line-height: 1.6
}
.time-and-productivity-tracking .timeSaved {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 9px;
font-weight: 700;
color: #176F50;
background: #ECF8F1;
border: 1px solid #CCE7D8;
border-radius: 7px;
padding: 9px 6px;
margin-top: 12px
}
.time-and-productivity-tracking .timeSaved .icon2 {
height: 14px;
width: 14px
}
.time-and-productivity-tracking .timeFine {
font-size: 8px;
color: var(--muted);
line-height: 1.6;
text-align: center;
display: block;
margin-top: 10px
}
.time-and-productivity-tracking .timeHome {
height: 4px;
width: 52px;
background: #1B394A;
border-radius: 99px;
margin: 9px auto 0
}
.time-and-productivity-tracking .timeContext {
display: grid;
gap: 13px;
min-width: 0
}
.time-and-productivity-tracking .timeContextCard {
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
background: #fff;
min-width: 0
}
.time-and-productivity-tracking .timeContextCard>strong {
display: block;
font-size: 19px;
line-height: 1.3;
color: var(--navy);
margin: 9px 0 13px;
letter-spacing: -.025em
}
.time-and-productivity-tracking .timeContextRow {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
border-top: 1px solid var(--line);
font-size: 11px;
color: #426B82;
line-height: 1.5
}
.time-and-productivity-tracking .timeContextRow .icon2 {
width: 17px;
height: 17px;
color: #2388B2
}
.time-and-productivity-tracking .timeContextCard p {
font-size: 11px;
line-height: 1.8;
color: #466D82;
margin-top: 7px
}
.time-and-productivity-tracking .timeNote {
background: #FFFCEF;
border-color: #E9DFAF
}
.time-and-productivity-tracking .timeSmall {
font-size: 10px;
line-height: 1.8;
color: #5B7686
}
.time-and-productivity-tracking .timeStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 15px
}
.time-and-productivity-tracking .timeStats>div {
padding: 11px 9px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F3F9FD;
min-width: 0
}
.time-and-productivity-tracking .timeStats>div:nth-child(2) {
background: #EDF8F2;
border-color: #CDE5D7
}
.time-and-productivity-tracking .timeStats>div:last-child {
background: #FFFBEE;
border-color: #EBDEAD
}
.time-and-productivity-tracking .timeStats span {
font-size: 9px;
color: #537184;
display: block;
line-height: 1.5
}
.time-and-productivity-tracking .timeStats strong {
display: block;
font-size: 26px;
color: var(--navy);
line-height: 1.35;
letter-spacing: -.04em;
margin-top: 4px;
white-space: nowrap
}
.time-and-productivity-tracking .timeTableWrap {
padding: 0 15px 7px
}
.time-and-productivity-tracking .timeTable {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 11px;
line-height: 1.5
}
.time-and-productivity-tracking .timeTable th,
.time-and-productivity-tracking .timeTable td {
padding: 13px 7px;
text-align: right;
border-bottom: 1px solid var(--line);
vertical-align: middle;
color: #3E637A
}
.time-and-productivity-tracking .timeTable th:first-child {
width: 44%;
text-align: left;
padding-left: 0
}
.time-and-productivity-tracking .timeTable th:last-child,
.time-and-productivity-tracking .timeTable td:last-child {
padding-right: 0
}
.time-and-productivity-tracking .timeTable thead th {
font-size: 8px;
font-weight: 700;
color: var(--muted)
}
.time-and-productivity-tracking .timeTable tbody th {
color: var(--navy);
font-size: 11px;
font-weight: 700
}
.time-and-productivity-tracking .timeTable small {
font-size: 8px;
line-height: 1.6;
display: block;
font-weight: 400;
color: #698293;
margin-top: 3px
}
.time-and-productivity-tracking .timeTable tfoot th,
.time-and-productivity-tracking .timeTable tfoot td {
font-weight: 800;
color: var(--navy);
border-bottom: 0;
padding-top: 11px;
padding-bottom: 11px
}
.time-and-productivity-tracking .timeReviewLine {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 13px 16px;
border-top: 1px solid var(--line);
background: #F5FBFF;
color: #527286;
font-size: 10px;
line-height: 1.65
}
.time-and-productivity-tracking .timeReviewLine .icon2 {
height: 16px;
width: 16px;
color: #288CB5;
margin-top: 1px
}
.time-and-productivity-tracking .timeSync {
background: #0D2939;
color: #fff;
border: 1px solid #2B4D5D;
border-radius: 12px;
padding: 15px 17px;
margin-top: 14px
}
.time-and-productivity-tracking .timeSync>div {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
line-height: 1.5
}
.time-and-productivity-tracking .timeSync .icon2 {
height: 20px;
width: 20px;
color: var(--yellow)
}
.time-and-productivity-tracking .timeSync p {
font-size: 11px;
color: #D2E5EE;
margin-top: 8px
}
.time-and-productivity-tracking .timeSync small {
font-size: 9px;
color: #B8D0DF;
display: block;
line-height: 1.7;
margin-top: 7px
}
.time-and-productivity-tracking .timeBars {
padding: 0 17px 17px;
display: grid;
gap: 18px
}
.time-and-productivity-tracking .timeBarGroup {
min-width: 0
}
.time-and-productivity-tracking .timeBarLabel {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 9px
}
.time-and-productivity-tracking .timeBarLabel strong {
font-size: 11px;
color: var(--navy)
}
.time-and-productivity-tracking .timeBarLabel>span {
font-size: 9px;
color: #60798A;
background: #F3F7FA;
border-radius: 5px;
padding: 3px 6px;
white-space: nowrap
}
.time-and-productivity-tracking .timeBarRow {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) 37px;
gap: 8px;
align-items: center;
margin: 7px 0 0;
font-size: 9px;
color: #627E8E
}
.time-and-productivity-tracking .timeBarRow>b {
text-align: right;
font-size: 10px;
color: #355B70;
white-space: nowrap
}
.time-and-productivity-tracking .timeBarTrack {
height: 9px;
border-radius: 3px;
background: #F0F5F8;
overflow: hidden
}
.time-and-productivity-tracking .timeBarTrack i {
display: block;
height: 100%;
background: #ABC6D8;
border-radius: 3px
}
.time-and-productivity-tracking .timeBarRow.actual .timeBarTrack i {
background: #00A8F8
}
.time-and-productivity-tracking .timeInsight {
display: flex;
align-items: flex-start;
gap: 11px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
padding: 16px;
margin-top: 14px
}
.time-and-productivity-tracking .timeInsightIcon {
display: grid;
place-items: center;
width: 33px;
height: 33px;
flex: 0 0 33px;
background: #FFF7D6;
border-radius: 9px;
color: #8B6B11
}
.time-and-productivity-tracking .timeInsightIcon .icon2 {
width: 20px;
height: 20px
}
.time-and-productivity-tracking .timeInsight strong {
font-size: 12px;
color: var(--navy);
line-height: 1.5;
display: block
}
.time-and-productivity-tracking .timeInsight p {
font-size: 10px;
color: var(--muted);
line-height: 1.7;
margin-top: 5px
}
.time-and-productivity-tracking .timeBillingHeader {
display: flex;
align-items: center;
gap: 10px;
background: #0D2939;
border: 1px solid #294959;
border-radius: 11px;
padding: 16px;
margin-bottom: 14px;
color: white
}
.time-and-productivity-tracking .timeBillingHeader>.icon2 {
color: #FFC928;
width: 24px;
height: 24px
}
.time-and-productivity-tracking .timeBillingHeader strong {
font-size: 13px;
display: block;
line-height: 1.5
}
.time-and-productivity-tracking .timeBillingHeader small {
font-size: 10px;
color: #BAD5E2;
display: block;
margin-top: 5px
}
.time-and-productivity-tracking .timeMoneyGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.time-and-productivity-tracking .timeMoneyCard {
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
padding: 17px;
min-width: 0
}
.time-and-productivity-tracking .timeMoneyCard.billing {
border-color: #E4D695;
background: #FFFCF2
}
.time-and-productivity-tracking .timeMoneyCard>.icon2 {
display: block;
height: 25px;
width: 25px;
color: #4294B7;
margin-top: 17px;
margin-bottom: 12px
}
.time-and-productivity-tracking .timeMoneyCard>strong {
font-size: 17px;
line-height: 1.5;
color: var(--navy);
display: block
}
.time-and-productivity-tracking .timeMoneyCard>strong>span {
font-size: 13px;
color: #5F7A8B;
font-weight: 500;
white-space: nowrap
}
.time-and-productivity-tracking .timeAmount {
font-size: 38px;
line-height: 1.3;
font-weight: 750;
color: var(--navy);
letter-spacing: -.04em;
margin: 9px 0
}
.time-and-productivity-tracking .timeMoneyCard>p {
font-size: 11px;
color: #5B7A8B;
line-height: 1.8
}
.time-and-productivity-tracking .timeTag {
display: inline-block;
font-size: 8px;
color: #58778B;
padding: 5px 7px;
border: 1px solid var(--line);
border-radius: 5px;
line-height: 1.5;
margin-top: 14px;
background: #fff
}
.time-and-productivity-tracking .timeFinanceFlow {
display: grid;
grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) 15px minmax(0, 1fr);
align-items: center;
gap: 7px;
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px 10px;
margin-top: 14px;
background: #fff;
color: #365F77
}
.time-and-productivity-tracking .timeFinanceFlow>div {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
text-align: center;
min-width: 0
}
.time-and-productivity-tracking .timeFinanceFlow strong {
font-size: 9px;
line-height: 1.5;
font-weight: 650
}
.time-and-productivity-tracking .timeFinanceFlow .icon2 {
height: 22px;
width: 22px;
color: #268BB5
}
.time-and-productivity-tracking .timeFinanceFlow .flowArrow {
height: 15px;
width: 15px;
color: #7894A4
}
.time-and-productivity-tracking .timeReviewLine.standalone {
margin-top: 14px;
background: #F7FBFD;
border: 1px solid var(--line);
border-radius: 9px
}
.time-and-productivity-tracking .assistantHead strong {
font-size: 14px
}
.time-and-productivity-tracking .assistantHead small {
font-size: 9px
}
.time-and-productivity-tracking .assistantHead {
padding: 18px
}
.time-and-productivity-tracking .assistantBody {
padding: 18px
}
.time-and-productivity-tracking .assistantPrompt {
font-size: 12px;
padding: 14px
}
.time-and-productivity-tracking .assistantAnswer {
padding: 16px
}
.time-and-productivity-tracking .assistantHead>.pill {
margin-left: auto;
white-space: normal;
text-align: center
}
@media(min-width:981px) and (max-width:1150px) {
.time-and-productivity-tracking .timeEntryScene {
grid-template-columns: 170px minmax(0, 1fr);
gap: 13px
}
.time-and-productivity-tracking .timeContextCard {
padding: 12px
}
.time-and-productivity-tracking .timeContextCard>strong {
font-size: 17px
}
.time-and-productivity-tracking .timeContextRow {
font-size: 10px
}
.time-and-productivity-tracking .timeStats {
padding: 12px;
gap: 7px
}
.time-and-productivity-tracking .timeStats strong {
font-size: 23px
}
.time-and-productivity-tracking .timeMoneyCard {
padding: 14px
}
.time-and-productivity-tracking .timeMoneyCard>strong {
font-size: 16px
}
}
@media(max-width:640px) {
.time-and-productivity-tracking .timePanelHead {
padding: 13px;
gap: 8px
}
.time-and-productivity-tracking .timePanelName {
gap: 7px
}
.time-and-productivity-tracking .timePanelName strong {
font-size: 12px
}
.time-and-productivity-tracking .timePanelName small {
font-size: 8px
}
.time-and-productivity-tracking .timePanelHead>.pill {
font-size: 8px
}
.time-and-productivity-tracking .timeEntryScene {
grid-template-columns: 175px minmax(0, 1fr);
gap: 13px
}
.time-and-productivity-tracking .timePhoneHead {
padding: 11px
}
.time-and-productivity-tracking .timePhoneHead strong {
font-size: 14px
}
.time-and-productivity-tracking .timePhoneBody {
padding: 13px 10px 7px
}
.time-and-productivity-tracking .timeContextCard {
padding: 13px
}
.time-and-productivity-tracking .timeContextCard>strong {
font-size: 17px
}
.time-and-productivity-tracking .timeContextRow {
font-size: 10px;
gap: 6px
}
.time-and-productivity-tracking .timeContextCard p {
font-size: 10px
}
.time-and-productivity-tracking .timeSmall {
font-size: 9px
}
.time-and-productivity-tracking .timeStats {
padding: 11px;
gap: 7px
}
.time-and-productivity-tracking .timeStats>div {
padding: 10px 7px
}
.time-and-productivity-tracking .timeStats span {
font-size: 8px
}
.time-and-productivity-tracking .timeStats strong {
font-size: 22px
}
.time-and-productivity-tracking .timeTableWrap {
padding: 0 11px 4px
}
.time-and-productivity-tracking .timeTable th,
.time-and-productivity-tracking .timeTable td {
padding: 11px 4px
}
.time-and-productivity-tracking .timeTable th:first-child {
width: 40%
}
.time-and-productivity-tracking .timeTable thead th {
font-size: 7px
}
.time-and-productivity-tracking .timeTable tbody th {
font-size: 10px
}
.time-and-productivity-tracking .timeTable {
font-size: 10px
}
.time-and-productivity-tracking .timeTable small {
font-size: 7px
}
.time-and-productivity-tracking .timeReviewLine {
font-size: 9px;
padding: 11px 12px;
gap: 7px
}
.time-and-productivity-tracking .timeSync {
padding: 14px
}
.time-and-productivity-tracking .timeSync small {
font-size: 9px
}
.time-and-productivity-tracking .timeBars {
padding: 0 13px 14px;
gap: 15px
}
.time-and-productivity-tracking .timeBarLabel strong {
font-size: 10px
}
.time-and-productivity-tracking .timeBarRow {
grid-template-columns: 44px minmax(0, 1fr) 33px;
gap: 6px;
font-size: 8px
}
.time-and-productivity-tracking .timeBarRow>b {
font-size: 9px
}
.time-and-productivity-tracking .timeInsight {
padding: 13px;
gap: 9px
}
.time-and-productivity-tracking .timeInsight strong {
font-size: 11px
}
.time-and-productivity-tracking .timeInsight p {
font-size: 9px
}
.time-and-productivity-tracking .timeBillingHeader {
padding: 14px
}
.time-and-productivity-tracking .timeBillingHeader strong {
font-size: 12px
}
.time-and-productivity-tracking .timeBillingHeader small {
font-size: 9px
}
.time-and-productivity-tracking .timeMoneyGrid {
gap: 10px
}
.time-and-productivity-tracking .timeMoneyCard {
padding: 13px
}
.time-and-productivity-tracking .timeMoneyCard .uiLabel {
font-size: 8px
}
.time-and-productivity-tracking .timeMoneyCard>strong {
font-size: 15px
}
.time-and-productivity-tracking .timeMoneyCard>strong>span {
font-size: 12px
}
.time-and-productivity-tracking .timeAmount {
font-size: 32px
}
.time-and-productivity-tracking .timeMoneyCard>p {
font-size: 10px
}
.time-and-productivity-tracking .timeTag {
font-size: 7px;
padding: 4px
}
.time-and-productivity-tracking .timeFinanceFlow {
gap: 5px;
padding: 14px 7px
}
.time-and-productivity-tracking .timeFinanceFlow strong {
font-size: 8px
}
.time-and-productivity-tracking .assistantHead,
.time-and-productivity-tracking .assistantBody {
padding: 14px
}
.time-and-productivity-tracking .assistantPrompt {
font-size: 11px
}
}
@media(max-width:460px) {
.time-and-productivity-tracking .timeEntryScene {
grid-template-columns: 1fr;
gap: 18px
}
.time-and-productivity-tracking .timePhone {
max-width: 214px
}
.time-and-productivity-tracking .timePhoneHead strong {
font-size: 15px
}
.time-and-productivity-tracking .timePhoneBody {
padding: 15px 13px 8px
}
.time-and-productivity-tracking .timeSession {
font-size: 11px
}
.time-and-productivity-tracking .timeFine {
font-size: 9px
}
.time-and-productivity-tracking .timePhoneJob small {
font-size: 9px
}
.time-and-productivity-tracking .timeSaved {
font-size: 10px
}
.time-and-productivity-tracking .timeContext {
gap: 11px
}
.time-and-productivity-tracking .timeContextCard {
padding: 16px
}
.time-and-productivity-tracking .timeContextCard>strong {
font-size: 18px
}
.time-and-productivity-tracking .timeContextCard>strong br {
display: none
}
.time-and-productivity-tracking .timeContextRow {
font-size: 11px
}
.time-and-productivity-tracking .timeContextCard p {
font-size: 12px
}
.time-and-productivity-tracking .timeSmall {
font-size: 10px
}
.time-and-productivity-tracking .timePanelHead {
flex-wrap: wrap
}
.time-and-productivity-tracking .timePanelName strong {
font-size: 12px
}
.time-and-productivity-tracking .timeMoneyGrid {
grid-template-columns: 1fr
}
.time-and-productivity-tracking .timeMoneyCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 12px;
padding: 18px
}
.time-and-productivity-tracking .timeMoneyCard>.uiLabel {
grid-column: 1/-1;
font-size: 9px
}
.time-and-productivity-tracking .timeMoneyCard>.icon2 {
grid-row: 2;
grid-column: 2;
margin: 0;
align-self: center
}
.time-and-productivity-tracking .timeMoneyCard>strong {
grid-row: 2;
grid-column: 1;
font-size: 18px
}
.time-and-productivity-tracking .timeAmount {
grid-column: 1/-1;
margin: 0;
font-size: 36px
}
.time-and-productivity-tracking .timeMoneyCard>p {
grid-column: 1/-1;
font-size: 12px
}
.time-and-productivity-tracking .timeTag {
grid-column: 1/-1;
justify-self: start;
font-size: 8px;
margin-top: 2px
}
.time-and-productivity-tracking .assistantHead>.pill {
margin-left: 34px
}
}
@media(max-width:360px) {
.time-and-productivity-tracking .timeStats {
padding: 9px;
gap: 5px
}
.time-and-productivity-tracking .timeStats>div {
padding: 9px 5px
}
.time-and-productivity-tracking .timeStats strong {
font-size: 20px
}
.time-and-productivity-tracking .timeStats span {
font-size: 7px
}
.time-and-productivity-tracking .timeTableWrap {
padding: 0 9px 4px
}
.time-and-productivity-tracking .timeTable th:first-child {
width: 40%
}
.time-and-productivity-tracking .timeTable th,
.time-and-productivity-tracking .timeTable td {
padding-left: 3px;
padding-right: 3px
}
.time-and-productivity-tracking .timeBarRow {
grid-template-columns: 42px minmax(0, 1fr) 30px;
gap: 5px
}
.time-and-productivity-tracking .timeBarLabel strong {
font-size: 10px
}
.time-and-productivity-tracking .timeSync>div {
font-size: 11px
}
.time-and-productivity-tracking .timeFinanceFlow {
gap: 4px;
grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr)
}
}
.time-and-productivity-tracking .rentalTimeSkip {
position: absolute;
top: -100px;
left: 20px;
z-index: 1000;
padding: 12px 18px;
border-radius: 8px;
background: #0B0B0B;
color: #fff;
font: 14px/1.5 system-ui, sans-serif;
text-decoration: none
}
.time-and-productivity-tracking .rentalTimeSkip:focus {
top: 12px;
outline: 3px solid #FFC928;
outline-offset: 3px
}
.time-and-productivity-tracking .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}  .manufacturing-automation-software .industryIntroHead.compact,
.manufacturing-automation-software .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.manufacturing-automation-software .featureMediaPanels {
position: relative;
min-height: 430px;
}
.manufacturing-automation-software .featureMediaPanels>.mediaPanel {
display: none;
}
.manufacturing-automation-software .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.manufacturing-automation-software .featureMediaPanels .spotlightMedia {
height: 100%;
}
.manufacturing-automation-software .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.manufacturing-automation-software .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.manufacturing-automation-software .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.manufacturing-automation-software .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.manufacturing-automation-software .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.manufacturing-automation-software .windowTop small {
font-size: 10px;
color: var(--muted);
}
.manufacturing-automation-software .windowDots {
display: flex;
gap: 5px;
}
.manufacturing-automation-software .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.manufacturing-automation-software .windowBody {
padding: 16px;
}
.manufacturing-automation-software .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.manufacturing-automation-software .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.manufacturing-automation-software .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.manufacturing-automation-software .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.manufacturing-automation-software .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.manufacturing-automation-software .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.manufacturing-automation-software .chartGridLine.l1 {
top: 34px;
}
.manufacturing-automation-software .chartGridLine.l2 {
top: 65px;
}
.manufacturing-automation-software .chartGridLine.l3 {
top: 96px;
}
.manufacturing-automation-software .chartGridLine.l4 {
top: 127px;
}
.manufacturing-automation-software .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.manufacturing-automation-software .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.manufacturing-automation-software .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.manufacturing-automation-software .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.manufacturing-automation-software .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.manufacturing-automation-software .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.manufacturing-automation-software .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.manufacturing-automation-software .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.manufacturing-automation-software .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.manufacturing-automation-software .spectrumNotes {
display: grid;
gap: 10px;
}
.manufacturing-automation-software .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.manufacturing-automation-software .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.manufacturing-automation-software .noteCard p,
.manufacturing-automation-software .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.manufacturing-automation-software .alertStack {
display: grid;
gap: 10px;
}
.manufacturing-automation-software .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.manufacturing-automation-software .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.manufacturing-automation-software .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.manufacturing-automation-software .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.manufacturing-automation-software .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.manufacturing-automation-software .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.manufacturing-automation-software .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.manufacturing-automation-software .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.manufacturing-automation-software .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.manufacturing-automation-software .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.manufacturing-automation-software .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.manufacturing-automation-software .scheduleBoard h4,
.manufacturing-automation-software .todoBoard h4,
.manufacturing-automation-software .siteBoard h4,
.manufacturing-automation-software .chatPanel h4,
.manufacturing-automation-software .lessonPanel h4,
.manufacturing-automation-software .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.manufacturing-automation-software .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.manufacturing-automation-software .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.manufacturing-automation-software .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.manufacturing-automation-software .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.manufacturing-automation-software .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.manufacturing-automation-software .taskRow:last-child {
border-bottom: 0;
}
.manufacturing-automation-software .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.manufacturing-automation-software .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.manufacturing-automation-software .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.manufacturing-automation-software .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.manufacturing-automation-software .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.manufacturing-automation-software .inventoryTable th,
.manufacturing-automation-software .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.manufacturing-automation-software .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.manufacturing-automation-software .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.manufacturing-automation-software .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.manufacturing-automation-software .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.manufacturing-automation-software .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.manufacturing-automation-software .phoneBody {
padding: 12px;
}
.manufacturing-automation-software .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.manufacturing-automation-software .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.manufacturing-automation-software .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.manufacturing-automation-software .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.manufacturing-automation-software .progressList {
display: grid;
gap: 10px;
}
.manufacturing-automation-software .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.manufacturing-automation-software .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.manufacturing-automation-software .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.manufacturing-automation-software .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.manufacturing-automation-software .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.manufacturing-automation-software .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.manufacturing-automation-software .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.manufacturing-automation-software .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.manufacturing-automation-software .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.manufacturing-automation-software .pin1 {
top: 56px;
left: 58px;
}
.manufacturing-automation-software .pin2 {
top: 88px;
right: 88px;
}
.manufacturing-automation-software .pin3 {
bottom: 54px;
right: 72px;
}
.manufacturing-automation-software .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.manufacturing-automation-software .siteRow:last-child {
border-bottom: 0;
}
.manufacturing-automation-software .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.manufacturing-automation-software .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.manufacturing-automation-software .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.manufacturing-automation-software .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.manufacturing-automation-software .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.manufacturing-automation-software .graphNodes:before,
.manufacturing-automation-software .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.manufacturing-automation-software .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.manufacturing-automation-software .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.manufacturing-automation-software .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.manufacturing-automation-software .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.manufacturing-automation-software .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.manufacturing-automation-software .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.manufacturing-automation-software .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.manufacturing-automation-software .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.manufacturing-automation-software .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.manufacturing-automation-software .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.manufacturing-automation-software .forecastList .taskRow strong {
font-size: 11px;
}
.manufacturing-automation-software .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.manufacturing-automation-software .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.manufacturing-automation-software .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.manufacturing-automation-software .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.manufacturing-automation-software .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.manufacturing-automation-software .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.manufacturing-automation-software .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.manufacturing-automation-software .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.manufacturing-automation-software .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.manufacturing-automation-software .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.manufacturing-automation-software .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.manufacturing-automation-software .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.manufacturing-automation-software .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.manufacturing-automation-software .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.manufacturing-automation-software .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.manufacturing-automation-software .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.manufacturing-automation-software .qualityRows {
display: grid;
gap: 10px;
}
.manufacturing-automation-software .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.manufacturing-automation-software .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.manufacturing-automation-software .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.manufacturing-automation-software .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.manufacturing-automation-software .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.manufacturing-automation-software #mfg-predictive-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.manufacturing-automation-software #mfg-predictive-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.manufacturing-automation-software #mfg-predictive-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.manufacturing-automation-software #mfg-predictive-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.manufacturing-automation-software #mfg-predictive-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.manufacturing-automation-software #mfg-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.manufacturing-automation-software #mfg-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.manufacturing-automation-software #mfg-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.manufacturing-automation-software #mfg-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.manufacturing-automation-software #mfg-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.manufacturing-automation-software #mfg-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.manufacturing-automation-software #mfg-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.manufacturing-automation-software #mfg-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.manufacturing-automation-software #mfg-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.manufacturing-automation-software #mfg-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.manufacturing-automation-software #mfg-predictive-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.manufacturing-automation-software #mfg-predictive-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.manufacturing-automation-software #mfg-predictive-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.manufacturing-automation-software #mfg-predictive-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.manufacturing-automation-software #mfg-predictive-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.manufacturing-automation-software #mfg-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.manufacturing-automation-software #mfg-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.manufacturing-automation-software #mfg-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.manufacturing-automation-software #mfg-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.manufacturing-automation-software #mfg-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.manufacturing-automation-software #mfg-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.manufacturing-automation-software #mfg-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.manufacturing-automation-software #mfg-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.manufacturing-automation-software #mfg-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.manufacturing-automation-software #mfg-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.manufacturing-automation-software .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.manufacturing-automation-software .featureMediaPanels {
min-height: 0;
}
.manufacturing-automation-software .inventorySplit,
.manufacturing-automation-software .forecastGrid,
.manufacturing-automation-software .siteGrid,
.manufacturing-automation-software .spectrumGrid,
.manufacturing-automation-software .scheduleGrid {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.manufacturing-automation-software .metricGrid,
.manufacturing-automation-software .lessonCards,
.manufacturing-automation-software .gaugeGrid {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.manufacturing-automation-software .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.manufacturing-automation-software * {
box-sizing: border-box;
}
.manufacturing-automation-software .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.manufacturing-automation-software .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.manufacturing-automation-software .brand span {
color: var(--brand);
}
.manufacturing-automation-software .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.manufacturing-automation-software .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
} .manufacturing-automation-software .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.manufacturing-automation-software .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.manufacturing-automation-software .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.manufacturing-automation-software .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.manufacturing-automation-software .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.manufacturing-automation-software .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.manufacturing-automation-software .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.manufacturing-automation-software .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.manufacturing-automation-software .hero .button.primary:hover {
background: var(--black-soft);
}
.manufacturing-automation-software .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.manufacturing-automation-software .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.manufacturing-automation-software .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.manufacturing-automation-software .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.manufacturing-automation-software .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.manufacturing-automation-software .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.manufacturing-automation-software .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.manufacturing-automation-software .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.manufacturing-automation-software .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.manufacturing-automation-software .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.manufacturing-automation-software .ratingLead strong {
display: block;
font-size: 20px;
}
.manufacturing-automation-software .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.manufacturing-automation-software .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.manufacturing-automation-software .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.manufacturing-automation-software .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.manufacturing-automation-software .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.manufacturing-automation-software section {
padding: 88px 0;
}
.manufacturing-automation-software .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.manufacturing-automation-software .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.manufacturing-automation-software .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.manufacturing-automation-software .aiJourney h2 {
color: #fff;
}
.manufacturing-automation-software .aiJourney .sectionHead p {
color: #D7D7D7;
}
.manufacturing-automation-software .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.manufacturing-automation-software .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.manufacturing-automation-software .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.manufacturing-automation-software .aiStep:last-child::after {
display: none;
}
.manufacturing-automation-software .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.manufacturing-automation-software .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.manufacturing-automation-software .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.manufacturing-automation-software .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.manufacturing-automation-software .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.manufacturing-automation-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.manufacturing-automation-software .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.manufacturing-automation-software .outcome span {
color: var(--muted);
font-size: 14px;
}
.manufacturing-automation-software .capability {
background: #fff;
}
.manufacturing-automation-software .capability.alt {
background: var(--sky-2);
}
.manufacturing-automation-software .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.manufacturing-automation-software .twoCol.reverse .visual {
order: 2;
}
.manufacturing-automation-software .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.manufacturing-automation-software .visual .placeholder {
min-height: 355px;
}
.manufacturing-automation-software .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.manufacturing-automation-software .featureList.primaryOnly .featureItem:nth-child(n +5) {
display: none;
}
.manufacturing-automation-software details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.manufacturing-automation-software details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.manufacturing-automation-software details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.manufacturing-automation-software details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.manufacturing-automation-software details.capabilityMore[open] summary::after {
content: "−";
}
.manufacturing-automation-software details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.manufacturing-automation-software .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.manufacturing-automation-software .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.manufacturing-automation-software .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.manufacturing-automation-software .darkSection h2,
.manufacturing-automation-software .darkSection h3 {
color: #fff;
}
.manufacturing-automation-software .darkSection .sectionHead p,
.manufacturing-automation-software .darkSection .copy p {
color: #D7D7D7;
}
.manufacturing-automation-software .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software .darkSection .featureItem {
color: #F7F7F7;
}
.manufacturing-automation-software .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.manufacturing-automation-software .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.manufacturing-automation-software .darkSection .placeholder small {
color: #D0D0D0;
}
.manufacturing-automation-software .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.manufacturing-automation-software .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.manufacturing-automation-software .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.manufacturing-automation-software .card p {
color: var(--muted);
margin: 12px 0 0;
}
.manufacturing-automation-software .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.manufacturing-automation-software .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.manufacturing-automation-software .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.manufacturing-automation-software .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.manufacturing-automation-software .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.manufacturing-automation-software .benefitBand h2 {
color: #fff;
}
.manufacturing-automation-software .benefitBand .sectionHead p {
color: #D5D5D5;
}
.manufacturing-automation-software .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.manufacturing-automation-software .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.manufacturing-automation-software .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.manufacturing-automation-software .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.manufacturing-automation-software .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.manufacturing-automation-software .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.manufacturing-automation-software .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.manufacturing-automation-software .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.manufacturing-automation-software .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.manufacturing-automation-software .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.manufacturing-automation-software .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.manufacturing-automation-software .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.manufacturing-automation-software .ctaPanel h2 {
color: #fff;
}
.manufacturing-automation-software .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.manufacturing-automation-software .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.manufacturing-automation-software .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.manufacturing-automation-software .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.manufacturing-automation-software .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.manufacturing-automation-software .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.manufacturing-automation-software .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.manufacturing-automation-software .inlineCta.dark h3 {
color: #fff;
}
.manufacturing-automation-software .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.manufacturing-automation-software .inlineCta.dark p {
color: #D8D8D8;
}
.manufacturing-automation-software .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.manufacturing-automation-software .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.manufacturing-automation-software .button.yellow:hover {
background: #FFD84D;
}
.manufacturing-automation-software .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.manufacturing-automation-software .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.manufacturing-automation-software .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.manufacturing-automation-software .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.manufacturing-automation-software footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.manufacturing-automation-software .ratingSectionGrid {
grid-template-columns: 1fr;
} .manufacturing-automation-software .heroGrid,
.manufacturing-automation-software .twoCol,
.manufacturing-automation-software .ctaPanel {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .twoCol.reverse .visual {
order: initial;
}
.manufacturing-automation-software .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.manufacturing-automation-software .ratingGrid,
.manufacturing-automation-software .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.manufacturing-automation-software .ratingLead,
.manufacturing-automation-software .awardLead {
grid-column: 1/-1;
text-align: center;
}
.manufacturing-automation-software .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.manufacturing-automation-software .aiStep:nth-child(3)::after,
.manufacturing-automation-software .aiStep:last-child::after {
display: none;
}
.manufacturing-automation-software .outcomeGrid,
.manufacturing-automation-software .challengeGrid,
.manufacturing-automation-software .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.manufacturing-automation-software .cards,
.manufacturing-automation-software .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.manufacturing-automation-software .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.manufacturing-automation-software .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.manufacturing-automation-software .awardProofGrid {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .wrap {
width: min(var(--max), calc(100% - 24px));
}
.manufacturing-automation-software .hero {
padding: 58px 0 52px;
}
.manufacturing-automation-software section {
padding: 64px 0;
}
.manufacturing-automation-software .aiFlow {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .aiStep::after {
display: none;
}
.manufacturing-automation-software .logoRow,
.manufacturing-automation-software .ratingGrid,
.manufacturing-automation-software .awardGrid,
.manufacturing-automation-software .outcomeGrid,
.manufacturing-automation-software .challengeGrid,
.manufacturing-automation-software .benefitGrid,
.manufacturing-automation-software .cards,
.manufacturing-automation-software .proofCards,
.manufacturing-automation-software .integrationGrid,
.manufacturing-automation-software .featureList {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.manufacturing-automation-software .ctaPanel {
padding: 34px 24px;
}
.manufacturing-automation-software .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.manufacturing-automation-software .inlineCtaActions {
width: 100%;
}
.manufacturing-automation-software .inlineCtaActions .button {
flex: 1;
}
}
.manufacturing-automation-software p {
margin-bottom: 0;
}
.manufacturing-automation-software [id] {
scroll-margin-top: 94px;
}
.manufacturing-automation-software svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.manufacturing-automation-software .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.manufacturing-automation-software .darkSection h2,
.manufacturing-automation-software .darkSection h3,
.manufacturing-automation-software .aiJourney h2,
.manufacturing-automation-software .benefitBand h2,
.manufacturing-automation-software .ctaPanel h2,
.manufacturing-automation-software .inlineCta.dark h3 {
color: #fff;
}
.manufacturing-automation-software .wrap>*,
.manufacturing-automation-software .heroGrid>*,
.manufacturing-automation-software .twoCol>*,
.manufacturing-automation-software .ctaPanel>* {
min-width: 0;
}
.manufacturing-automation-software .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.manufacturing-automation-software .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.manufacturing-automation-software .skipLink:focus {
transform: none;
}
.manufacturing-automation-software a:focus-visible,
.manufacturing-automation-software summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.manufacturing-automation-software .darkSection a:focus-visible,
.manufacturing-automation-software .darkSection summary:focus-visible,
.manufacturing-automation-software .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.manufacturing-automation-software .topbar {
background: #fff;
backdrop-filter: none;
}
.manufacturing-automation-software .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.manufacturing-automation-software .brandName {
display: inline;
color: var(--navy) !important;
}
.manufacturing-automation-software .brandName>span {
color: var(--brand-dark);
}
.manufacturing-automation-software .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.manufacturing-automation-software .brandMark .icon2 {
width: 21px;
height: 21px;
}
.manufacturing-automation-software .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.manufacturing-automation-software .navlinks a:hover {
color: var(--brand-dark);
}
.manufacturing-automation-software .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.manufacturing-automation-software .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.manufacturing-automation-software .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.manufacturing-automation-software .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.manufacturing-automation-software .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.manufacturing-automation-software .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.manufacturing-automation-software .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.manufacturing-automation-software .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.manufacturing-automation-software .heroVisual {
width: 100%;
min-width: 0;
}
.manufacturing-automation-software .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.manufacturing-automation-software .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.manufacturing-automation-software .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.manufacturing-automation-software .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.manufacturing-automation-software .clientBand {
padding: 27px 0;
}
.manufacturing-automation-software .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.manufacturing-automation-software .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.manufacturing-automation-software .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.manufacturing-automation-software .logoBox.wide {
font-size: 12px;
}
.manufacturing-automation-software .logoBox small {
display: block;
font-size: 10px;
}
.manufacturing-automation-software section {
padding: 80px 0;
}
.manufacturing-automation-software h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.manufacturing-automation-software .sectionHead {
margin-bottom: 36px;
}
.manufacturing-automation-software .eyebrow {
line-height: 1.5;
}
.manufacturing-automation-software .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.manufacturing-automation-software .aiStep {
min-height: 162px;
}
.manufacturing-automation-software .aiStep strong {
line-height: 1.35;
}
.manufacturing-automation-software .aiStep span {
line-height: 1.65;
}
.manufacturing-automation-software .aiCallout {
margin-top: 24px;
}
.manufacturing-automation-software .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.manufacturing-automation-software .outcome>.icon2 {
color: var(--navy);
}
.manufacturing-automation-software .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.manufacturing-automation-software .awardItem>.icon2 {
color: var(--navy);
}
.manufacturing-automation-software .awardItem:hover {
border-color: var(--brand-dark);
}
.manufacturing-automation-software .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.manufacturing-automation-software .twoCol.reverse .visual {
order: -1;
}
.manufacturing-automation-software .copy .eyebrow {
margin-bottom: 17px;
}
.manufacturing-automation-software .copy p {
font-size: 16px;
line-height: 1.85;
}
.manufacturing-automation-software .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.manufacturing-automation-software .featureList {
gap: 13px 18px;
}
.manufacturing-automation-software .featureItem {
font-size: 13px;
line-height: 1.6;
}
.manufacturing-automation-software .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.manufacturing-automation-software .check .icon2 {
width: 14px;
height: 14px;
}
.manufacturing-automation-software details.capabilityMore {
margin-bottom: 0;
}
.manufacturing-automation-software .capabilityMore summary {
min-height: 34px;
}
.manufacturing-automation-software .capabilityMore .moreGrid {
gap: 13px 18px;
}
.manufacturing-automation-software .textCta {
font-size: 14px;
}
.manufacturing-automation-software .visual {
min-width: 0;
}
.manufacturing-automation-software .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.manufacturing-automation-software .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.manufacturing-automation-software .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.manufacturing-automation-software .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.manufacturing-automation-software .panelBody {
padding: 20px;
}
.manufacturing-automation-software .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.manufacturing-automation-software .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.manufacturing-automation-software .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.manufacturing-automation-software .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.manufacturing-automation-software .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.manufacturing-automation-software .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.manufacturing-automation-software .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.manufacturing-automation-software .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.manufacturing-automation-software .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.manufacturing-automation-software .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.manufacturing-automation-software .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.manufacturing-automation-software .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.manufacturing-automation-software .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.manufacturing-automation-software .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.manufacturing-automation-software .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.manufacturing-automation-software .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.manufacturing-automation-software .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.manufacturing-automation-software .miniStats span {
font-size: 9px;
color: var(--muted);
}
.manufacturing-automation-software .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.manufacturing-automation-software .dataRow:last-child {
border-bottom: 0;
}
.manufacturing-automation-software .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.manufacturing-automation-software .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.manufacturing-automation-software .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.manufacturing-automation-software .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.manufacturing-automation-software .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.manufacturing-automation-software .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.manufacturing-automation-software .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.manufacturing-automation-software .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.manufacturing-automation-software .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.manufacturing-automation-software .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.manufacturing-automation-software .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.manufacturing-automation-software .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.manufacturing-automation-software .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.manufacturing-automation-software .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.manufacturing-automation-software .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.manufacturing-automation-software .mobileAccount {
text-align: center;
padding: 13px 0;
}
.manufacturing-automation-software .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.manufacturing-automation-software .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.manufacturing-automation-software .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.manufacturing-automation-software .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.manufacturing-automation-software .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.manufacturing-automation-software .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.manufacturing-automation-software .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.manufacturing-automation-software .phoneDevice .rowCopy strong {
font-size: 9px;
}
.manufacturing-automation-software .phoneDevice .rowCopy small {
font-size: 7px;
}
.manufacturing-automation-software .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.manufacturing-automation-software .mobileSide {
display: grid;
gap: 10px;
}
.manufacturing-automation-software .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.manufacturing-automation-software .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.manufacturing-automation-software .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.manufacturing-automation-software .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.manufacturing-automation-software .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.manufacturing-automation-software .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.manufacturing-automation-software .darkSection .panelHead>strong {
color: #fff;
}
.manufacturing-automation-software .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.manufacturing-automation-software .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.manufacturing-automation-software .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.manufacturing-automation-software .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.manufacturing-automation-software .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.manufacturing-automation-software .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.manufacturing-automation-software .promptList {
display: grid;
gap: 10px;
}
.manufacturing-automation-software .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.manufacturing-automation-software .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.manufacturing-automation-software .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.manufacturing-automation-software .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.manufacturing-automation-software .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.manufacturing-automation-software .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.manufacturing-automation-software .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.manufacturing-automation-software .quoteTable th,
.manufacturing-automation-software .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.manufacturing-automation-software .quoteTable td:first-child {
width: 64%;
}
.manufacturing-automation-software .quoteTable th:last-child,
.manufacturing-automation-software .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.manufacturing-automation-software .quoteTable strong {
font-size: 11px;
}
.manufacturing-automation-software .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.manufacturing-automation-software .quoteTable tfoot {
background: #F5FBFF;
}
.manufacturing-automation-software .quoteTable tfoot th {
font-size: 10px;
}
.manufacturing-automation-software .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.manufacturing-automation-software .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.manufacturing-automation-software .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.manufacturing-automation-software .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.manufacturing-automation-software .orderJourney {
margin: 20px 0;
}
.manufacturing-automation-software .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.manufacturing-automation-software .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.manufacturing-automation-software .journeyRow:last-child:before {
display: none;
}
.manufacturing-automation-software .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.manufacturing-automation-software .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.manufacturing-automation-software .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.manufacturing-automation-software .journeyRow strong {
font-size: 12px;
display: block;
}
.manufacturing-automation-software .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.manufacturing-automation-software .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.manufacturing-automation-software .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.manufacturing-automation-software .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.manufacturing-automation-software .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.manufacturing-automation-software .inventoryIntro strong {
display: block;
font-size: 16px;
}
.manufacturing-automation-software .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.manufacturing-automation-software .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.manufacturing-automation-software .availabilityCard span {
font-size: 9px;
display: block;
}
.manufacturing-automation-software .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.manufacturing-automation-software .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.manufacturing-automation-software .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.manufacturing-automation-software .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.manufacturing-automation-software .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.manufacturing-automation-software .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.manufacturing-automation-software .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.manufacturing-automation-software .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.manufacturing-automation-software .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.manufacturing-automation-software .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.manufacturing-automation-software .customerTimeline .dataRow {
border-color: #353535;
}
.manufacturing-automation-software .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.manufacturing-automation-software .customerTimeline strong {
color: #fff;
}
.manufacturing-automation-software .customerTimeline small {
color: #BFBFBF;
}
.manufacturing-automation-software .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.manufacturing-automation-software .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.manufacturing-automation-software .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.manufacturing-automation-software .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.manufacturing-automation-software .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.manufacturing-automation-software .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.manufacturing-automation-software .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.manufacturing-automation-software .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.manufacturing-automation-software .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.manufacturing-automation-software .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.manufacturing-automation-software .chartTitle strong {
font-size: 12px;
}
.manufacturing-automation-software .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.manufacturing-automation-software .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.manufacturing-automation-software .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.manufacturing-automation-software .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.manufacturing-automation-software .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.manufacturing-automation-software .inlineCta {
margin-top: 0;
box-shadow: none;
}
.manufacturing-automation-software .inlineCtaActions {
max-width: 42%;
}
.manufacturing-automation-software .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.manufacturing-automation-software .inlineCta h3 {
line-height: 1.35;
}
.manufacturing-automation-software .card {
box-shadow: none;
}
.manufacturing-automation-software .cardIcon {
box-shadow: none;
}
.manufacturing-automation-software .card h3 {
font-size: 22px;
}
.manufacturing-automation-software .card p {
font-size: 14px;
line-height: 1.8;
}
.manufacturing-automation-software .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.manufacturing-automation-software .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.manufacturing-automation-software .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.manufacturing-automation-software .ratingBand {
padding: 34px 0;
}
.manufacturing-automation-software .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.manufacturing-automation-software .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.manufacturing-automation-software .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.manufacturing-automation-software .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.manufacturing-automation-software .ratingItem:first-child {
border-left: 0;
}
.manufacturing-automation-software .proofCard h3 {
font-size: 23px;
}
.manufacturing-automation-software .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.manufacturing-automation-software .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.manufacturing-automation-software .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.manufacturing-automation-software .integration {
min-height: 98px;
}
.manufacturing-automation-software .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.manufacturing-automation-software .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.manufacturing-automation-software .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.manufacturing-automation-software .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.manufacturing-automation-software .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.manufacturing-automation-software .finalActions {
display: grid;
gap: 11px;
}
.manufacturing-automation-software .finalActions .button {
white-space: nowrap;
}
.manufacturing-automation-software .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.manufacturing-automation-software .footerInner p {
margin: 0;
font-size: 12px;
}
.manufacturing-automation-software .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.manufacturing-automation-software .navlinks {
gap: 15px;
font-size: 12px;
}
.manufacturing-automation-software .heroGrid {
gap: 30px;
}
.manufacturing-automation-software .twoCol {
gap: 32px;
}
.manufacturing-automation-software .panelBody {
padding: 16px;
}
.manufacturing-automation-software .panelHead {
padding: 16px;
}
.manufacturing-automation-software .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.manufacturing-automation-software .pipelineColumns {
gap: 7px;
}
.manufacturing-automation-software .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.manufacturing-automation-software .heroGrid,
.manufacturing-automation-software .twoCol,
.manufacturing-automation-software .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .heroGrid {
gap: 36px;
}
.manufacturing-automation-software .hero h1 {
max-width: 730px;
}
.manufacturing-automation-software .hero .lead {
max-width: 690px;
}
.manufacturing-automation-software .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.manufacturing-automation-software .twoCol {
gap: 34px;
}
.manufacturing-automation-software .twoCol.reverse .visual {
order: initial;
}
.manufacturing-automation-software .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.manufacturing-automation-software .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.manufacturing-automation-software .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.manufacturing-automation-software .awardItem {
font-size: 12px;
padding: 13px;
}
.manufacturing-automation-software .ratingSectionGrid {
gap: 20px;
}
.manufacturing-automation-software .inlineCta {
align-items: flex-start;
}
.manufacturing-automation-software .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.manufacturing-automation-software .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.manufacturing-automation-software .card {
padding: 22px;
}
.manufacturing-automation-software .card h3 {
font-size: 21px;
}
.manufacturing-automation-software .finalActions {
display: flex;
flex-wrap: wrap;
}
.manufacturing-automation-software .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.manufacturing-automation-software .cards,
.manufacturing-automation-software .proofCards {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.manufacturing-automation-software .inlineCta {
flex-direction: column;
}
.manufacturing-automation-software .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.manufacturing-automation-software .inlineCtaActions .button {
flex: 1;
}
.manufacturing-automation-software .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.manufacturing-automation-software .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.manufacturing-automation-software .wrap {
width: calc(100% - 32px);
}
.manufacturing-automation-software [id] {
scroll-margin-top: 82px;
}
.manufacturing-automation-software .brand {
font-size: 20px;
gap: 7px;
}
.manufacturing-automation-software .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.manufacturing-automation-software .brandMark .icon2 {
width: 18px;
height: 18px;
}
.manufacturing-automation-software .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.manufacturing-automation-software section {
padding: 60px 0;
}
.manufacturing-automation-software .hero {
padding: 51px 0 48px;
}
.manufacturing-automation-software .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.manufacturing-automation-software .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.manufacturing-automation-software .heroActions {
gap: 10px;
margin-top: 25px;
}
.manufacturing-automation-software .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.manufacturing-automation-software .hero .microcopy {
font-size: 11px;
}
.manufacturing-automation-software .heroPills span {
font-size: 9px;
}
.manufacturing-automation-software .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.manufacturing-automation-software .sectionHead p {
font-size: 16px;
}
.manufacturing-automation-software .copy h2 {
font-size: 34px;
}
.manufacturing-automation-software .copy p {
font-size: 15px;
}
.manufacturing-automation-software .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.manufacturing-automation-software .logoBox {
min-height: 53px;
}
.manufacturing-automation-software .logoBox:last-child {
grid-column: 1/-1;
}
.manufacturing-automation-software .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manufacturing-automation-software .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.manufacturing-automation-software .aiStep strong {
font-size: 13px;
}
.manufacturing-automation-software .aiStep span {
font-size: 11px;
}
.manufacturing-automation-software .aiStep::after {
display: none;
}
.manufacturing-automation-software .outcomeGrid,
.manufacturing-automation-software .challengeGrid,
.manufacturing-automation-software .benefitGrid {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .outcome {
padding: 24px;
}
.manufacturing-automation-software .outcome strong {
font-size: 22px;
}
.manufacturing-automation-software .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manufacturing-automation-software .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.manufacturing-automation-software .awardItem:last-child {
grid-column: 1/-1;
}
.manufacturing-automation-software .featureList,
.manufacturing-automation-software .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .featureItem {
font-size: 13px;
}
.manufacturing-automation-software .inlineCta {
padding: 22px;
gap: 19px;
}
.manufacturing-automation-software .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.manufacturing-automation-software .panelHead {
padding: 15px 13px;
}
.manufacturing-automation-software .panelHead>strong {
font-size: 12px;
}
.manufacturing-automation-software .panelBody {
padding: 14px;
}
.manufacturing-automation-software .productPanel {
border-radius: 16px;
}
.manufacturing-automation-software .productPanel figcaption {
padding: 0 14px 13px;
}
.manufacturing-automation-software .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.manufacturing-automation-software .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.manufacturing-automation-software .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.manufacturing-automation-software .deal {
margin-top: 0;
padding: 10px;
}
.manufacturing-automation-software .deal strong {
font-size: 10px;
}
.manufacturing-automation-software .deal small {
font-size: 9px;
}
.manufacturing-automation-software .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.manufacturing-automation-software .mobileWorkspace {
gap: 12px;
}
.manufacturing-automation-software .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.manufacturing-automation-software .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.manufacturing-automation-software .sideTile {
padding: 10px;
}
.manufacturing-automation-software .sideTile strong {
font-size: 10px;
}
.manufacturing-automation-software .sideTile p {
font-size: 9px;
}
.manufacturing-automation-software .mobileHeader strong {
font-size: 15px;
}
.manufacturing-automation-software .mobileAccount strong {
font-size: 10px;
}
.manufacturing-automation-software .mobileAccount small {
font-size: 7px;
}
.manufacturing-automation-software .phoneDevice .rowIcon {
display: none;
}
.manufacturing-automation-software .quoteTable th,
.manufacturing-automation-software .quoteTable td {
padding: 12px 4px;
}
.manufacturing-automation-software .quoteTable strong {
font-size: 10px;
}
.manufacturing-automation-software .quoteTable small {
font-size: 8px;
}
.manufacturing-automation-software .quoteTable tfoot th {
font-size: 9px;
}
.manufacturing-automation-software .docHeader strong {
font-size: 17px;
}
.manufacturing-automation-software .miniFlow {
gap: 5px;
font-size: 9px;
}
.manufacturing-automation-software .miniFlow span {
padding: 6px;
}
.manufacturing-automation-software .rowCopy strong {
font-size: 10px;
}
.manufacturing-automation-software .rowCopy small {
font-size: 8px;
}
.manufacturing-automation-software .statusPill {
font-size: 7px;
padding: 5px;
}
.manufacturing-automation-software .miniStats {
gap: 7px;
}
.manufacturing-automation-software .miniStats>div {
padding: 9px;
}
.manufacturing-automation-software .miniStats strong {
font-size: 18px;
}
.manufacturing-automation-software .miniStats span {
font-size: 8px;
}
.manufacturing-automation-software .collectionStats>div {
padding: 13px;
}
.manufacturing-automation-software .collectionStats strong {
font-size: 24px;
}
.manufacturing-automation-software .customerHeader strong {
font-size: 17px;
}
.manufacturing-automation-software .customerFacts>div {
padding: 10px;
}
.manufacturing-automation-software .customerFacts strong {
font-size: 12px;
}
.manufacturing-automation-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manufacturing-automation-software .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.manufacturing-automation-software .ratingItem:last-child {
grid-column: 1/-1;
}
.manufacturing-automation-software .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manufacturing-automation-software .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.manufacturing-automation-software .integration small {
font-size: 9px;
}
.manufacturing-automation-software .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.manufacturing-automation-software .ctaPanel p {
font-size: 15px;
}
.manufacturing-automation-software .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.manufacturing-automation-software .footerInner {
align-items: flex-start;
flex-direction: column;
}
.manufacturing-automation-software .contextSection {
padding: 0 0 24px;
}
.manufacturing-automation-software .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.manufacturing-automation-software .wrap {
width: calc(100% - 24px);
}
.manufacturing-automation-software .brand {
font-size: 18px;
}
.manufacturing-automation-software .brandMark {
width: 25px;
height: 25px;
}
.manufacturing-automation-software .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.manufacturing-automation-software .hero h1 {
font-size: 38px;
}
.manufacturing-automation-software .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.manufacturing-automation-software .copy h2 {
font-size: 31px;
}
.manufacturing-automation-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .phoneDevice {
width: 210px;
}
.manufacturing-automation-software .phoneDevice .rowIcon {
display: grid;
}
.manufacturing-automation-software .mobileSide {
gap: 8px;
}
.manufacturing-automation-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.manufacturing-automation-software .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.manufacturing-automation-software .sideTile p {
margin: 0;
}
.manufacturing-automation-software .miniFlow span {
padding: 5px;
font-size: 8px;
}
.manufacturing-automation-software .collectionStats strong {
font-size: 21px;
}
.manufacturing-automation-software .inventoryIntro strong {
font-size: 14px;
}
.manufacturing-automation-software .dataRow {
gap: 7px;
}
.manufacturing-automation-software .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.manufacturing-automation-software .inlineCtaActions {
flex-direction: column;
}
}
.manufacturing-automation-software .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
.manufacturing-automation-software .hero .eyebrow {
max-width: 100%;
}
.manufacturing-automation-software .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.manufacturing-automation-software .ganttIllustration,
.manufacturing-automation-software .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.manufacturing-automation-software .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.manufacturing-automation-software .costIllustration {
aspect-ratio: 484/226;
}
.manufacturing-automation-software .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.manufacturing-automation-software .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.manufacturing-automation-software .comparisonTable thead {
background: var(--black);
color: #fff;
}
.manufacturing-automation-software .comparisonTable thead th:last-child {
color: var(--yellow);
}
.manufacturing-automation-software .comparisonTable th,
.manufacturing-automation-software .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .comparisonTable th:first-child {
width: 23%;
}
.manufacturing-automation-software .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.manufacturing-automation-software .comparisonTable tbody td {
color: var(--muted);
}
.manufacturing-automation-software .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.manufacturing-automation-software .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.manufacturing-automation-software .card,
.manufacturing-automation-software .proofCard,
.manufacturing-automation-software .productPanel,
.manufacturing-automation-software .outcome,
.manufacturing-automation-software .benefit {
box-shadow: none;
}
.manufacturing-automation-software .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.manufacturing-automation-software .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.manufacturing-automation-software .hero .eyebrow {
font-size: 10px;
}
.manufacturing-automation-software .comparisonTable {
font-size: 11px;
}
.manufacturing-automation-software .comparisonTable th,
.manufacturing-automation-software .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.manufacturing-automation-software .comparisonTable th:first-child {
width: 24%;
}
.manufacturing-automation-software .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.manufacturing-automation-software .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.manufacturing-automation-software .hero h1 {
font-size: 38px;
}
}
.manufacturing-automation-software .scheduleIllustration,
.manufacturing-automation-software .analyticsIllustration,
.manufacturing-automation-software .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.manufacturing-automation-software .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.manufacturing-automation-software .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.manufacturing-automation-software .conditionIllustration {
aspect-ratio: 484 / 178;
}
.manufacturing-automation-software .miniStats strong {
font-variant-numeric: tabular-nums;
}
.manufacturing-automation-software .quoteTable td:last-child {
white-space: nowrap;
}
.manufacturing-automation-software .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.manufacturing-automation-software .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.manufacturing-automation-software .darkSection .textCta {
color: var(--yellow);
}
.manufacturing-automation-software .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.manufacturing-automation-software .secondaryLinks .textCta {
font-size: 12px;
}
.manufacturing-automation-software .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.manufacturing-automation-software .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.manufacturing-automation-software .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.manufacturing-automation-software .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.manufacturing-automation-software .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.manufacturing-automation-software .scanSummary>.icon2 {
color: var(--yellow);
flex: 0 0 24px;
}
.manufacturing-automation-software .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.manufacturing-automation-software .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.manufacturing-automation-software .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.manufacturing-automation-software .returnFlag .icon2 {
flex: 0 0 24px;
}
.manufacturing-automation-software .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.manufacturing-automation-software .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.manufacturing-automation-software .phoneDevice {
max-width: 100%;
}
.manufacturing-automation-software .heroPills {
line-height: 1.55;
}
.manufacturing-automation-software .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.manufacturing-automation-software .plantFacts {
gap: 7px;
}
.manufacturing-automation-software .plantFacts>div {
padding: 9px;
}
.manufacturing-automation-software .plantFacts strong {
font-size: 11px;
}
.manufacturing-automation-software .scanSummary {
padding: 12px;
}
.manufacturing-automation-software .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.manufacturing-automation-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .phoneDevice {
width: 224px;
margin: auto;
}
.manufacturing-automation-software .phoneDevice .rowIcon {
display: grid;
}
.manufacturing-automation-software .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.manufacturing-automation-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.manufacturing-automation-software .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.manufacturing-automation-software .sideTile strong {
font-size: 12px;
}
.manufacturing-automation-software .sideTile p {
margin: 0;
font-size: 11px;
}
}
.manufacturing-automation-software .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.manufacturing-automation-software .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.manufacturing-automation-software .heroAccent {
color: var(--black);
}
.manufacturing-automation-software .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.manufacturing-automation-software .heroActions {
gap: 10px;
margin-top: 24px;
}
.manufacturing-automation-software .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.manufacturing-automation-software .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.manufacturing-automation-software .microcopy {
margin-top: 14px;
}
.manufacturing-automation-software .heroPills {
margin-top: 13px;
}
.manufacturing-automation-software .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.manufacturing-automation-software .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.manufacturing-automation-software .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.manufacturing-automation-software .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.manufacturing-automation-software .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.manufacturing-automation-software .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.manufacturing-automation-software .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.manufacturing-automation-software .clientBand {
padding: 24px 0;
}
.manufacturing-automation-software .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.manufacturing-automation-software .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.manufacturing-automation-software .logoBox.wide {
font-size: 15px;
}
.manufacturing-automation-software .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.manufacturing-automation-software .sectionHead p {
margin: 17px 0 0;
}
.manufacturing-automation-software .copy p {
margin: 16px 0 0;
}
.manufacturing-automation-software .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.manufacturing-automation-software .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.manufacturing-automation-software .aiJourney {
background: var(--black);
}
.manufacturing-automation-software .aiStep {
min-height: 157px;
border-color: #353535;
}
.manufacturing-automation-software .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
.manufacturing-automation-software .productPanel {
border-radius: 18px;
}
.manufacturing-automation-software .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.manufacturing-automation-software .panelHead>strong {
font-size: 13px;
}
.manufacturing-automation-software .sampleTag {
font-size: 9px;
}
.manufacturing-automation-software .panelBody {
padding: 21px;
}
.manufacturing-automation-software .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.manufacturing-automation-software .docHeader {
padding-bottom: 16px;
}
.manufacturing-automation-software .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.manufacturing-automation-software .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.manufacturing-automation-software .smallLabel {
font-size: 9px;
}
.manufacturing-automation-software .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.manufacturing-automation-software .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.manufacturing-automation-software .dataRow {
padding: 14px 0;
}
.manufacturing-automation-software .statusPill {
font-size: 8px;
}
.manufacturing-automation-software .miniStats {
gap: 10px;
margin: 18px 0;
}
.manufacturing-automation-software .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.manufacturing-automation-software .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.manufacturing-automation-software .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.manufacturing-automation-software .contextNote {
font-size: 11px;
margin-top: 16px;
}
.manufacturing-automation-software .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.manufacturing-automation-software .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.manufacturing-automation-software .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.manufacturing-automation-software .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.manufacturing-automation-software .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.manufacturing-automation-software .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.manufacturing-automation-software .hierarchy strong {
color: var(--navy);
}
.manufacturing-automation-software .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.manufacturing-automation-software .conditionIllustration {
aspect-ratio: 484/201;
}
.manufacturing-automation-software .analyticsIllustration {
aspect-ratio: 484/206;
}
.manufacturing-automation-software .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.manufacturing-automation-software .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.manufacturing-automation-software .phoneDevice .rowCopy strong {
font-size: 10px;
}
.manufacturing-automation-software .phoneDevice .rowCopy small {
font-size: 9px;
}
.manufacturing-automation-software .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.manufacturing-automation-software .mobileAccount small {
font-size: 9px;
}
.manufacturing-automation-software .sideTile {
background: var(--sky-2);
padding: 14px;
}
.manufacturing-automation-software .sideTile strong {
font-size: 12px;
}
.manufacturing-automation-software .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.manufacturing-automation-software .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.manufacturing-automation-software .mobileAction {
font-size: 9px;
}
.manufacturing-automation-software .journeyRow strong {
font-size: 13px;
}
.manufacturing-automation-software .journeyRow small {
font-size: 11px;
}
.manufacturing-automation-software .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.manufacturing-automation-software .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.manufacturing-automation-software .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.manufacturing-automation-software .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.manufacturing-automation-software .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.manufacturing-automation-software .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.manufacturing-automation-software .utilityReadout small {
font-size: 12px;
}
.manufacturing-automation-software .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.manufacturing-automation-software .darkSection {
background: var(--black);
}
.manufacturing-automation-software .darkSection .panelHead {
background: var(--black-soft);
}
.manufacturing-automation-software .darkSection .productPanel {
background: var(--black-soft);
}
.manufacturing-automation-software .darkSection .copy .featureNote {
color: #CFCFCF;
}
.manufacturing-automation-software .darkSection .rowCopy strong {
color: #FFFFFF;
}
.manufacturing-automation-software .darkSection .rowCopy small {
color: #CFCFCF;
}
.manufacturing-automation-software .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.manufacturing-automation-software .assistantHead small {
font-size: 11px;
}
.manufacturing-automation-software .assistantNote {
font-size: 11px;
}
.manufacturing-automation-software .reportTags span {
font-size: 10px;
}
.manufacturing-automation-software .card p {
margin: 12px 0 0;
}
.manufacturing-automation-software .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.manufacturing-automation-software .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.manufacturing-automation-software .cards>.card {
display: flex;
flex-direction: column;
}
.manufacturing-automation-software .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.manufacturing-automation-software .cards>.card p {
padding-bottom: 22px;
}
.manufacturing-automation-software .benefitBand {
background: var(--black);
}
.manufacturing-automation-software .benefit {
background: var(--black-soft);
}
.manufacturing-automation-software .inlineCta h3 {
font-size: 20px;
}
.manufacturing-automation-software .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.manufacturing-automation-software .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.manufacturing-automation-software .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.manufacturing-automation-software .valueCtaSection {
padding: 32px 0;
}
.manufacturing-automation-software .proofCard p {
margin-top: 15px;
}
.manufacturing-automation-software .proofCard h3 {
font-size: 23px;
}
.manufacturing-automation-software .integrationNote {
margin-top: 23px;
}
.manufacturing-automation-software .ctaPanel {
background: var(--black);
}
.manufacturing-automation-software .ctaPanel p {
margin-top: 16px;
}
.manufacturing-automation-software .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.manufacturing-automation-software .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.manufacturing-automation-software a:hover {
text-decoration: none;
}
.manufacturing-automation-software .textCta:hover {
color: var(--navy);
}
.manufacturing-automation-software .darkSection .textCta:hover {
color: #FFFFFF;
}
@media (max-width:1100px) {
.manufacturing-automation-software .hero h1 {
font-size: 49px;
}
.manufacturing-automation-software .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.manufacturing-automation-software .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.manufacturing-automation-software .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.manufacturing-automation-software .hero h1 {
font-size: 58px;
}
.manufacturing-automation-software .heroVisual {
max-width: 548px;
}
.manufacturing-automation-software .hero .lead {
max-width: 700px;
}
.manufacturing-automation-software .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.manufacturing-automation-software .logoBox {
font-size: 18px;
border: 0 !important;
}
.manufacturing-automation-software .logoBox:last-child {
grid-column: auto;
}
.manufacturing-automation-software .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.manufacturing-automation-software .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.manufacturing-automation-software .inlineCtaActions .button {
flex: 1;
}
.manufacturing-automation-software .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.manufacturing-automation-software section {
padding: 55px 0;
}
.manufacturing-automation-software .hero {
padding: 28px 0 40px;
}
.manufacturing-automation-software .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.manufacturing-automation-software .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.manufacturing-automation-software .heroActions {
gap: 10px;
}
.manufacturing-automation-software .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.manufacturing-automation-software .breadcrumb {
margin-bottom: 21px;
}
.manufacturing-automation-software .hero .eyebrow {
font-size: 11px;
}
.manufacturing-automation-software .heroVisual {
max-width: 480px;
}
.manufacturing-automation-software .heroPills {
row-gap: 9px;
}
.manufacturing-automation-software .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.manufacturing-automation-software .heroPills span+span {
padding-left: 7px;
}
.manufacturing-automation-software .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.manufacturing-automation-software .logoBox:last-child {
grid-column: 1/-1;
}
.manufacturing-automation-software .clientBand {
padding: 25px 0;
}
.manufacturing-automation-software .copy h2 {
font-size: 33px;
}
.manufacturing-automation-software .panelBody {
padding: 16px;
}
.manufacturing-automation-software .panelHead {
padding: 15px;
}
.manufacturing-automation-software .panelHead>strong {
font-size: 12px;
}
.manufacturing-automation-software .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.manufacturing-automation-software .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.manufacturing-automation-software .docHeader strong {
font-size: 18px;
}
.manufacturing-automation-software .docHeader small {
font-size: 10px;
}
.manufacturing-automation-software .rowCopy strong {
font-size: 11px;
}
.manufacturing-automation-software .rowCopy small {
font-size: 10px;
}
.manufacturing-automation-software .miniStats {
gap: 7px;
}
.manufacturing-automation-software .miniStats strong {
font-size: 21px;
}
.manufacturing-automation-software .miniStats span {
font-size: 9px;
}
.manufacturing-automation-software .miniStats>div {
padding: 10px 8px;
}
.manufacturing-automation-software .plantFacts {
gap: 8px;
}
.manufacturing-automation-software .plantFacts>div {
padding: 10px;
}
.manufacturing-automation-software .plantFacts strong {
font-size: 11px;
}
.manufacturing-automation-software .contextNote {
font-size: 10px;
gap: 8px;
}
.manufacturing-automation-software .utilityReadout {
padding: 12px;
gap: 10px;
}
.manufacturing-automation-software .utilityReadout span {
font-size: 8px;
}
.manufacturing-automation-software .utilityReadout strong {
font-size: 24px;
}
.manufacturing-automation-software .utilityReadout .utilityScope {
font-size: 14px;
}
.manufacturing-automation-software .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.manufacturing-automation-software .comparisonTable {
font-size: 11px;
}
.manufacturing-automation-software .comparisonTable th,
.manufacturing-automation-software .comparisonTable td {
padding: 13px 9px;
}
.manufacturing-automation-software .contextSection {
padding: 0 0 22px;
}
.manufacturing-automation-software .valueCtaSection {
padding: 25px 0;
}
.manufacturing-automation-software .inlineCtaActions {
flex-direction: column;
}
.manufacturing-automation-software .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.manufacturing-automation-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .phoneDevice {
width: 222px;
}
.manufacturing-automation-software .phoneDevice .rowIcon {
display: grid;
}
.manufacturing-automation-software .mobileSide {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.manufacturing-automation-software .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0 0;
}
.manufacturing-automation-software .sideTile p {
margin: 0;
}
.manufacturing-automation-software .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.manufacturing-automation-software .dataRow {
gap: 8px;
}
.manufacturing-automation-software .statusPill {
font-size: 7px;
padding: 5px;
}
.manufacturing-automation-software .miniStats strong {
font-size: 19px;
}
.manufacturing-automation-software .heroActions {
flex-direction: column;
align-items: stretch;
}
.manufacturing-automation-software .heroActions .button {
width: 100%;
}
.manufacturing-automation-software .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.manufacturing-automation-software .aiFlow {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.manufacturing-automation-software .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.manufacturing-automation-software .aiStep strong {
margin: 0;
font-size: 15px;
}
.manufacturing-automation-software .aiStep span {
font-size: 13px;
}
.manufacturing-automation-software .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.manufacturing-automation-software .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.manufacturing-automation-software .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.manufacturing-automation-software .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.manufacturing-automation-software .navlinks {
gap: 20px;
font-size: 12px;
}
.manufacturing-automation-software .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.manufacturing-automation-software .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.manufacturing-automation-software .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.manufacturing-automation-software .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.manufacturing-automation-software .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.manufacturing-automation-software .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.manufacturing-automation-software .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.manufacturing-automation-software .industryIntro {
padding: 78px 0 66px;
}
.manufacturing-automation-software .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.manufacturing-automation-software .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.manufacturing-automation-software .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.manufacturing-automation-software .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.manufacturing-automation-software .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.manufacturing-automation-software .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.manufacturing-automation-software .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.manufacturing-automation-software .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.manufacturing-automation-software .industryPriority>.icon2 {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.manufacturing-automation-software .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.manufacturing-automation-software .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.manufacturing-automation-software .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.manufacturing-automation-software .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.manufacturing-automation-software .industryPriority:hover {
border-color: var(--brand-dark);
}
.manufacturing-automation-software .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.manufacturing-automation-software .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.manufacturing-automation-software .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.manufacturing-automation-software .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.manufacturing-automation-software .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.manufacturing-automation-software .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.manufacturing-automation-software .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.manufacturing-automation-software .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.manufacturing-automation-software .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.manufacturing-automation-software .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.manufacturing-automation-software .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.manufacturing-automation-software .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.manufacturing-automation-software .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.manufacturing-automation-software .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.manufacturing-automation-software .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.manufacturing-automation-software .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.manufacturing-automation-software .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.manufacturing-automation-software .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.manufacturing-automation-software .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.manufacturing-automation-software .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.manufacturing-automation-software .vedaMessage.assistant>small {
color: var(--yellow);
}
.manufacturing-automation-software .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.manufacturing-automation-software .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.manufacturing-automation-software .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.manufacturing-automation-software .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.manufacturing-automation-software .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.manufacturing-automation-software .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.manufacturing-automation-software .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.manufacturing-automation-software .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.manufacturing-automation-software .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.manufacturing-automation-software .manufacturingSpotlight {
padding: 73px 0;
}
.manufacturing-automation-software .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .rfidSpotlight {
background: #fff;
}
.manufacturing-automation-software .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.manufacturing-automation-software .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.manufacturing-automation-software .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.manufacturing-automation-software .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.manufacturing-automation-software .spotlightHead h2 span {
color: var(--brand-dark);
}
.manufacturing-automation-software .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.manufacturing-automation-software .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.manufacturing-automation-software .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.manufacturing-automation-software .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.manufacturing-automation-software .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.manufacturing-automation-software .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.manufacturing-automation-software .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.manufacturing-automation-software .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.manufacturing-automation-software .featureTab:hover {
border-color: var(--brand-dark);
}
.manufacturing-automation-software .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.manufacturing-automation-software .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.manufacturing-automation-software .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.manufacturing-automation-software .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.manufacturing-automation-software .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.manufacturing-automation-software .featurePanel {
display: none;
}
.manufacturing-automation-software .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.manufacturing-automation-software .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.manufacturing-automation-software .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.manufacturing-automation-software .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.manufacturing-automation-software .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.manufacturing-automation-software .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.manufacturing-automation-software .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.manufacturing-automation-software .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.manufacturing-automation-software .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.manufacturing-automation-software .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.manufacturing-automation-software .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.manufacturing-automation-software .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.manufacturing-automation-software .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.manufacturing-automation-software .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.manufacturing-automation-software .decisionSpotlight .textCta {
color: var(--yellow);
}
.manufacturing-automation-software .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.manufacturing-automation-software .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .mediaTitle>.icon2 {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.manufacturing-automation-software .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.manufacturing-automation-software .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.manufacturing-automation-software .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.manufacturing-automation-software .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.manufacturing-automation-software .signalFlow>.icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.manufacturing-automation-software .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.manufacturing-automation-software .rfidImageSurface {
background: #172029;
padding: 5px;
}
.manufacturing-automation-software .rfidImageSurface img {
width: 100%;
height: auto;
}
.manufacturing-automation-software .rfidMedia figcaption {
padding-top: 13px;
}
.manufacturing-automation-software .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.manufacturing-automation-software .aiReviewBody {
padding: 18px;
}
.manufacturing-automation-software .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.manufacturing-automation-software .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.manufacturing-automation-software .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.manufacturing-automation-software .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.manufacturing-automation-software .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.manufacturing-automation-software .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.manufacturing-automation-software .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.manufacturing-automation-software .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.manufacturing-automation-software .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.manufacturing-automation-software .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.manufacturing-automation-software .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.manufacturing-automation-software .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.manufacturing-automation-software .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.manufacturing-automation-software .aiReviewAction strong {
display: block;
font-size: 11px;
}
.manufacturing-automation-software .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.manufacturing-automation-software .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.manufacturing-automation-software .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.manufacturing-automation-software .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.manufacturing-automation-software .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.manufacturing-automation-software .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.manufacturing-automation-software .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.manufacturing-automation-software .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.manufacturing-automation-software .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.manufacturing-automation-software .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.manufacturing-automation-software .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.manufacturing-automation-software .workflowDetails summary::-webkit-details-marker {
display: none;
}
.manufacturing-automation-software .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.manufacturing-automation-software .workflowDetails[open] summary::after {
content: "−";
}
.manufacturing-automation-software .workflowDetails .featureList,
.manufacturing-automation-software .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.manufacturing-automation-software .workflowDetails .featureItem {
font-size: 11px;
}
.manufacturing-automation-software .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.manufacturing-automation-software .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.manufacturing-automation-software #mfg-connected-tools {
background: #fff;
}
.manufacturing-automation-software #mfg-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.manufacturing-automation-software .featureTab,
.manufacturing-automation-software .industryPriority,
.manufacturing-automation-software summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.manufacturing-automation-software .industryIntroHead {
gap: 30px;
}
.manufacturing-automation-software .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.manufacturing-automation-software .featureStage {
gap: 26px;
padding: 26px;
}
.manufacturing-automation-software .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.manufacturing-automation-software .factoryWorkflow {
padding: 22px;
}
.manufacturing-automation-software .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.manufacturing-automation-software .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manufacturing-automation-software .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.manufacturing-automation-software .industryPriorityGrid {
gap: 14px;
}
.manufacturing-automation-software .industryPriority {
padding: 22px 19px;
}
.manufacturing-automation-software .industryPriority h3 {
font-size: 21px;
}
.manufacturing-automation-software .industryPriority p {
font-size: 12px;
}
.manufacturing-automation-software .priorityLink {
font-size: 10px;
}
.manufacturing-automation-software .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.manufacturing-automation-software .vedaIndustryCopy h2 {
font-size: 39px;
}
.manufacturing-automation-software .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.manufacturing-automation-software .vedaUseCases>div {
display: block;
}
.manufacturing-automation-software .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.manufacturing-automation-software .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.manufacturing-automation-software .featureTabs {
gap: 8px;
}
.manufacturing-automation-software .featureTab {
min-height: 108px;
}
.manufacturing-automation-software .featureStage,
.manufacturing-automation-software .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.manufacturing-automation-software .rfidSpotlight .spotlightMedia,
.manufacturing-automation-software .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.manufacturing-automation-software .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.manufacturing-automation-software .featurePanel {
min-height: 0;
}
.manufacturing-automation-software .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.manufacturing-automation-software .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.manufacturing-automation-software .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.manufacturing-automation-software .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.manufacturing-automation-software .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.manufacturing-automation-software .clientBand {
padding: 22px 0;
}
.manufacturing-automation-software .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.manufacturing-automation-software .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.manufacturing-automation-software .clientBand .logoBox.wide {
font-size: 10px;
}
.manufacturing-automation-software .clientBand .logoBox:last-child {
grid-column: auto;
}
.manufacturing-automation-software .industryIntro {
padding: 53px 0;
}
.manufacturing-automation-software .industryIntroHead h2 {
font-size: 32px;
}
.manufacturing-automation-software .industryIntroHead>p {
font-size: 14px;
}
.manufacturing-automation-software .industryPriorityGrid {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .industryPriority {
padding: 23px;
}
.manufacturing-automation-software .industryPriority h3 {
font-size: 24px;
}
.manufacturing-automation-software .industryPriority>.icon2 {
margin: 5px 0 15px;
}
.manufacturing-automation-software .industryPriority p {
font-size: 13px;
}
.manufacturing-automation-software .priorityLink {
font-size: 11px;
}
.manufacturing-automation-software .vedaIndustry {
padding: 0 0 52px;
}
.manufacturing-automation-software .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.manufacturing-automation-software .vedaIndustryCopy h2 {
font-size: 32px;
}
.manufacturing-automation-software .vedaIndustryCopy>p {
font-size: 14px;
}
.manufacturing-automation-software .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.manufacturing-automation-software .vedaUseCases>div {
display: flex;
}
.manufacturing-automation-software .vedaConversationHead {
padding: 16px 13px;
}
.manufacturing-automation-software .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.manufacturing-automation-software .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.manufacturing-automation-software .vedaMessage.user {
margin-left: 25px;
}
.manufacturing-automation-software .vedaMessage.assistant {
margin-right: 14px;
}
.manufacturing-automation-software .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.manufacturing-automation-software .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.manufacturing-automation-software .manufacturingSpotlight {
padding: 54px 0;
}
.manufacturing-automation-software .spotlightHead h2 {
font-size: 32px;
}
.manufacturing-automation-software .spotlightHead>p {
font-size: 14px;
}
.manufacturing-automation-software .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.manufacturing-automation-software .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.manufacturing-automation-software .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.manufacturing-automation-software .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.manufacturing-automation-software .featurePanel h3 {
font-size: 24px;
}
.manufacturing-automation-software .featurePanel>p {
font-size: 13px;
}
.manufacturing-automation-software .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.manufacturing-automation-software .spotlightChecks>li {
font-size: 12px;
}
.manufacturing-automation-software .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.manufacturing-automation-software .spotlightActions .button {
width: 100%;
}
.manufacturing-automation-software .spotlightScope {
font-size: 10px;
}
.manufacturing-automation-software .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.manufacturing-automation-software .mediaTitle strong {
font-size: 11px;
}
.manufacturing-automation-software .mediaTitle div>span {
font-size: 8px;
}
.manufacturing-automation-software .mediaTitle>.icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.manufacturing-automation-software .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.manufacturing-automation-software .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.manufacturing-automation-software .rfidMedia figcaption {
padding-top: 12px;
}
.manufacturing-automation-software .aiReviewBody {
padding: 13px;
}
.manufacturing-automation-software .aiIssue {
padding: 13px;
}
.manufacturing-automation-software .aiIssue strong {
font-size: 14px;
}
.manufacturing-automation-software .aiEvidence {
gap: 6px;
}
.manufacturing-automation-software .aiEvidence>div {
padding: 10px 7px;
}
.manufacturing-automation-software .aiEvidence strong {
font-size: 9px;
}
.manufacturing-automation-software .aiEvidence span {
font-size: 7px;
}
.manufacturing-automation-software .exampleLabel {
font-size: 6px;
}
.manufacturing-automation-software .factoryWorkflows {
padding: 55px 0;
}
.manufacturing-automation-software .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.manufacturing-automation-software .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.manufacturing-automation-software .industryRibbonGrid {
gap: 12px;
}
.manufacturing-automation-software .industryRibbonGrid>div {
font-size: 10px;
}
.manufacturing-automation-software .spotlightHead h2 {
font-size: 29px;
}
.manufacturing-automation-software .featureStage {
padding: 19px 13px;
}
.manufacturing-automation-software .mediaTitle>.icon2 {
display: none;
}
.manufacturing-automation-software .exampleLabel {
display: none;
}
.manufacturing-automation-software .vedaBrand {
font-size: 27px;
}
}
.manufacturing-automation-software #mfg-predictive-features-1:checked~.featureTabs label[for="mfg-predictive-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-predictive-features-1:focus-visible~.featureTabs label[for="mfg-predictive-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-predictive-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.manufacturing-automation-software #mfg-predictive-features-2:checked~.featureTabs label[for="mfg-predictive-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-predictive-features-2:focus-visible~.featureTabs label[for="mfg-predictive-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-predictive-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.manufacturing-automation-software #mfg-predictive-features-3:checked~.featureTabs label[for="mfg-predictive-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-predictive-features-3:focus-visible~.featureTabs label[for="mfg-predictive-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-predictive-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.manufacturing-automation-software #mfg-predictive-features-4:checked~.featureTabs label[for="mfg-predictive-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-predictive-features-4:focus-visible~.featureTabs label[for="mfg-predictive-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-predictive-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.manufacturing-automation-software #mfg-predictive-features-5:checked~.featureTabs label[for="mfg-predictive-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-predictive-features-5:focus-visible~.featureTabs label[for="mfg-predictive-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-predictive-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.manufacturing-automation-software #mfg-rfid-features-1:checked~.featureTabs label[for="mfg-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-rfid-features-1:focus-visible~.featureTabs label[for="mfg-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.manufacturing-automation-software #mfg-rfid-features-2:checked~.featureTabs label[for="mfg-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-rfid-features-2:focus-visible~.featureTabs label[for="mfg-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.manufacturing-automation-software #mfg-rfid-features-3:checked~.featureTabs label[for="mfg-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-rfid-features-3:focus-visible~.featureTabs label[for="mfg-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.manufacturing-automation-software #mfg-rfid-features-4:checked~.featureTabs label[for="mfg-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-rfid-features-4:focus-visible~.featureTabs label[for="mfg-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.manufacturing-automation-software #mfg-rfid-features-5:checked~.featureTabs label[for="mfg-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-rfid-features-5:focus-visible~.featureTabs label[for="mfg-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.manufacturing-automation-software #mfg-ai-decisions-features-1:checked~.featureTabs label[for="mfg-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-ai-decisions-features-1:focus-visible~.featureTabs label[for="mfg-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.manufacturing-automation-software #mfg-ai-decisions-features-2:checked~.featureTabs label[for="mfg-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-ai-decisions-features-2:focus-visible~.featureTabs label[for="mfg-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.manufacturing-automation-software #mfg-ai-decisions-features-3:checked~.featureTabs label[for="mfg-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-ai-decisions-features-3:focus-visible~.featureTabs label[for="mfg-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.manufacturing-automation-software #mfg-ai-decisions-features-4:checked~.featureTabs label[for="mfg-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-ai-decisions-features-4:focus-visible~.featureTabs label[for="mfg-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.manufacturing-automation-software #mfg-ai-decisions-features-5:checked~.featureTabs label[for="mfg-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.manufacturing-automation-software #mfg-ai-decisions-features-5:focus-visible~.featureTabs label[for="mfg-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.manufacturing-automation-software #mfg-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.manufacturing-automation-software .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .featureMediaPanels {
min-width: 0;
}
.manufacturing-automation-software .featureMediaPanels .miniChart {
height: 178px;
}
.manufacturing-automation-software .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.manufacturing-automation-software .featureMediaPanels .windowTop strong,
.manufacturing-automation-software .featureMediaPanels .windowTop small {
display: block;
}
.manufacturing-automation-software .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.manufacturing-automation-software .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manufacturing-automation-software .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.manufacturing-automation-software .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.manufacturing-automation-software .featureMediaPanels .windowBody>*,
.manufacturing-automation-software .featureMediaPanels .spectrumGrid>*,
.manufacturing-automation-software .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.manufacturing-automation-software .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.manufacturing-automation-software .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.manufacturing-automation-software .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.manufacturing-automation-software .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.manufacturing-automation-software .featureMediaPanels .graphNodes {
min-height: 258px;
}
.manufacturing-automation-software .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.manufacturing-automation-software .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.manufacturing-automation-software .featureMediaPanels .mapPin {
box-shadow: none;
}
.manufacturing-automation-software .pin2 {
top: 88px;
right: 88px;
}
.manufacturing-automation-software .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.manufacturing-automation-software .featureMediaPanels .mediaShell {
padding: 10px;
}
.manufacturing-automation-software .featureMediaPanels .windowBody {
padding: 10px;
}
.manufacturing-automation-software .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .featureMediaPanels .alertBadge {
justify-self: start;
}
.manufacturing-automation-software .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.manufacturing-automation-software .featureMediaPanels .graphNodes .node.n1,
.manufacturing-automation-software .featureMediaPanels .graphNodes .node.n2,
.manufacturing-automation-software .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.manufacturing-automation-software .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.manufacturing-automation-software .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.manufacturing-automation-software .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.manufacturing-automation-software .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.manufacturing-automation-software .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.manufacturing-automation-software .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.manufacturing-automation-software .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.manufacturing-automation-software .freshGraphic * {
box-sizing: border-box;
}
.manufacturing-automation-software .rfPanel,
.manufacturing-automation-software .aiInsightCard,
.manufacturing-automation-software .forecastVisualCard,
.manufacturing-automation-software .forecastSuggestion,
.manufacturing-automation-software .knowledgeTile,
.manufacturing-automation-software .chatConversation,
.manufacturing-automation-software .trainingSummary,
.manufacturing-automation-software .moduleCard,
.manufacturing-automation-software .qualityHeatCard,
.manufacturing-automation-software .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.manufacturing-automation-software .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.manufacturing-automation-software .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.manufacturing-automation-software .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.manufacturing-automation-software .statusPill,
.manufacturing-automation-software .cardTag,
.manufacturing-automation-software .forecastSuggestion b,
.manufacturing-automation-software .moduleCard b,
.manufacturing-automation-software .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.manufacturing-automation-software .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.manufacturing-automation-software .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.manufacturing-automation-software .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.manufacturing-automation-software .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.manufacturing-automation-software .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.manufacturing-automation-software .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.manufacturing-automation-software .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.manufacturing-automation-software .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.manufacturing-automation-software .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.manufacturing-automation-software .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.manufacturing-automation-software .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.manufacturing-automation-software .dot.good {
background: #298EEC;
}
.manufacturing-automation-software .dot.warn {
background: #F4A62A;
}
.manufacturing-automation-software .dot.bad {
background: #EB6B53;
}
.manufacturing-automation-software .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.manufacturing-automation-software .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.manufacturing-automation-software .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.manufacturing-automation-software .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.manufacturing-automation-software .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.manufacturing-automation-software .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.manufacturing-automation-software .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.manufacturing-automation-software .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.manufacturing-automation-software .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.manufacturing-automation-software .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.manufacturing-automation-software .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.manufacturing-automation-software .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.manufacturing-automation-software .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.manufacturing-automation-software .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.manufacturing-automation-software .moveRow b {
color: #298EEC;
font-size: 9px;
}
.manufacturing-automation-software .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.manufacturing-automation-software .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.manufacturing-automation-software .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.manufacturing-automation-software .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.manufacturing-automation-software .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.manufacturing-automation-software .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.manufacturing-automation-software .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.manufacturing-automation-software .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.manufacturing-automation-software .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.manufacturing-automation-software .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.manufacturing-automation-software .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.manufacturing-automation-software .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.manufacturing-automation-software .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.manufacturing-automation-software .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.manufacturing-automation-software .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.manufacturing-automation-software .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.manufacturing-automation-software .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.manufacturing-automation-software .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.manufacturing-automation-software .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.manufacturing-automation-software .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.manufacturing-automation-software .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.manufacturing-automation-software .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.manufacturing-automation-software .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.manufacturing-automation-software .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.manufacturing-automation-software .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.manufacturing-automation-software .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.manufacturing-automation-software .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.manufacturing-automation-software .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.manufacturing-automation-software .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.manufacturing-automation-software .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.manufacturing-automation-software .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.manufacturing-automation-software .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.manufacturing-automation-software .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.manufacturing-automation-software .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.manufacturing-automation-software .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.manufacturing-automation-software .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.manufacturing-automation-software .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.manufacturing-automation-software .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.manufacturing-automation-software .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.manufacturing-automation-software .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.manufacturing-automation-software .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.manufacturing-automation-software .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.manufacturing-automation-software .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.manufacturing-automation-software .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.manufacturing-automation-software .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.manufacturing-automation-software .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.manufacturing-automation-software .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.manufacturing-automation-software .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.manufacturing-automation-software .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.manufacturing-automation-software .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.manufacturing-automation-software .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.manufacturing-automation-software .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.manufacturing-automation-software .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.manufacturing-automation-software .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.manufacturing-automation-software .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.manufacturing-automation-software .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.manufacturing-automation-software .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.manufacturing-automation-software .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.manufacturing-automation-software .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.manufacturing-automation-software .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.manufacturing-automation-software .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.manufacturing-automation-software .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.manufacturing-automation-software .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.manufacturing-automation-software .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.manufacturing-automation-software .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.manufacturing-automation-software .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.manufacturing-automation-software .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.manufacturing-automation-software .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.manufacturing-automation-software .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.manufacturing-automation-software .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.manufacturing-automation-software .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.manufacturing-automation-software .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.manufacturing-automation-software .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.manufacturing-automation-software .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.manufacturing-automation-software .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.manufacturing-automation-software .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.manufacturing-automation-software .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.manufacturing-automation-software .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.manufacturing-automation-software .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.manufacturing-automation-software .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.manufacturing-automation-software .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.manufacturing-automation-software .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.manufacturing-automation-software .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.manufacturing-automation-software .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.manufacturing-automation-software .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.manufacturing-automation-software .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.manufacturing-automation-software .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.manufacturing-automation-software .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.manufacturing-automation-software .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.manufacturing-automation-software .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.manufacturing-automation-software .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.manufacturing-automation-software .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.manufacturing-automation-software .chartLegend .sw.blue {
background: #298EEC;
}
.manufacturing-automation-software .chartLegend .sw.amber {
background: #F4A62A;
}
.manufacturing-automation-software .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.manufacturing-automation-software .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.manufacturing-automation-software .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.manufacturing-automation-software .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.manufacturing-automation-software .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.manufacturing-automation-software .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.manufacturing-automation-software .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.manufacturing-automation-software .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.manufacturing-automation-software .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.manufacturing-automation-software .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.manufacturing-automation-software .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.manufacturing-automation-software .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.manufacturing-automation-software .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.manufacturing-automation-software .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.manufacturing-automation-software .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.manufacturing-automation-software .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.manufacturing-automation-software .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.manufacturing-automation-software .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.manufacturing-automation-software .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.manufacturing-automation-software .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.manufacturing-automation-software .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.manufacturing-automation-software .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.manufacturing-automation-software .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.manufacturing-automation-software .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.manufacturing-automation-software .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.manufacturing-automation-software .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.manufacturing-automation-software .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.manufacturing-automation-software .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.manufacturing-automation-software .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.manufacturing-automation-software .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.manufacturing-automation-software .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.manufacturing-automation-software .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.manufacturing-automation-software .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.manufacturing-automation-software .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.manufacturing-automation-software .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.manufacturing-automation-software .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.manufacturing-automation-software .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.manufacturing-automation-software .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.manufacturing-automation-software .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.manufacturing-automation-software .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.manufacturing-automation-software .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.manufacturing-automation-software .freshGraphic {
height: auto;
min-height: 420px;
}
.manufacturing-automation-software .rfTrackLayout,
.manufacturing-automation-software .rfFlowLayout,
.manufacturing-automation-software .rfAlertGrid,
.manufacturing-automation-software .rfCycleLayout,
.manufacturing-automation-software .rfSitesLayout,
.manufacturing-automation-software .aiRootLayout,
.manufacturing-automation-software .aiForecastLayout,
.manufacturing-automation-software .aiChatLayout,
.manufacturing-automation-software .aiTrainingLayout,
.manufacturing-automation-software .aiQualityLayout,
.manufacturing-automation-software .trainingModuleGrid {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.manufacturing-automation-software .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.manufacturing-automation-software .rfAlertGrid {
grid-template-columns: 1fr;
}
.manufacturing-automation-software .qualityHeatGrid span {
min-height: 40px;
}
.manufacturing-automation-software .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.manufacturing-automation-software .aiLink {
display: none;
}
}
.manufacturing-automation-software .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.manufacturing-automation-software .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.manufacturing-automation-software .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 50%;
}
.manufacturing-automation-software .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(11, 11, 11, 0.96) 0%,
rgba(11, 11, 11, 0.86) 22%,
rgba(11, 11, 11, 0.68) 34%,
rgba(11, 11, 11, 0.34) 44%,
rgba(11, 11, 11, 0.08) 54%,
rgba(11, 11, 11, 0) 64%);
}
.manufacturing-automation-software .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.manufacturing-automation-software .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.manufacturing-automation-software .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.manufacturing-automation-software .mfgHeroBreadcrumb a {
color: inherit;
}
.manufacturing-automation-software .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.manufacturing-automation-software .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.manufacturing-automation-software .mfgHero h1 {
color: #fff;
}
.manufacturing-automation-software .mfgHero h1>span {
display: block;
} .manufacturing-automation-software .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.manufacturing-automation-software .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.manufacturing-automation-software .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.manufacturing-automation-software .mfgHeroActions .outline:hover {
background: #172029;
}
.manufacturing-automation-software .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.manufacturing-automation-software .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media(min-width:1800px) {
.manufacturing-automation-software .mfgHeroContent {
min-height: 700px;
}
}
@media(max-width:1180px) and (min-width:901px) {
.manufacturing-automation-software .mfgHeroContent {
min-height: 610px;
}
.manufacturing-automation-software .mfgHeroCopy {
width: 55%;
padding-right: 10px;
} .manufacturing-automation-software .mfgHeroLead {
font-size: 16px;
}
.manufacturing-automation-software .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
.manufacturing-automation-software .mfgHeroScene img {
object-position: 62% 50%;
}
.manufacturing-automation-software .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .97) 0%, rgba(11, 11, 11, .88) 28%, rgba(11, 11, 11, .72) 42%, rgba(11, 11, 11, .48) 51%, rgba(11, 11, 11, .12) 63%, rgba(11, 11, 11, 0) 76%);
}
}
@media(max-width:900px) {
.manufacturing-automation-software .mfgHero {
display: flex;
flex-direction: column;
}
.manufacturing-automation-software .mfgHeroContent {
order: 0;
min-height: 0;
}
.manufacturing-automation-software .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
} .manufacturing-automation-software .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.manufacturing-automation-software .mfgHeroScene img {
object-fit: cover;
object-position: 85% 45%;
}
.manufacturing-automation-software .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 7%, rgba(11, 11, 11, .15) 24%, rgba(11, 11, 11, 0) 45%);
}
.manufacturing-automation-software .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.manufacturing-automation-software .mfgHeroLead {
max-width: 620px;
}
}
@media(max-width:600px) {
.manufacturing-automation-software .mfgHeroCopy {
padding: 25px 0 20px;
}
.manufacturing-automation-software .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.manufacturing-automation-software .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
} .manufacturing-automation-software .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.manufacturing-automation-software .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.manufacturing-automation-software .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.manufacturing-automation-software .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.manufacturing-automation-software .mfgHeroScene {
height: 280px;
}
.manufacturing-automation-software .mfgHeroScene img {
object-position: 86% 50%;
}
}
.manufacturing-automation-software #mfg-rfid .featureStage,
.manufacturing-automation-software #mfg-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.manufacturing-automation-software .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.manufacturing-automation-software .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.manufacturing-automation-software .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.manufacturing-automation-software .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.manufacturing-automation-software .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.manufacturing-automation-software .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.manufacturing-automation-software .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.manufacturing-automation-software .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.manufacturing-automation-software .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.manufacturing-automation-software .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.manufacturing-automation-software .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.manufacturing-automation-software .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.manufacturing-automation-software .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.manufacturing-automation-software .mfgGallery .rfPanel {
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.manufacturing-automation-software .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.manufacturing-automation-software .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.manufacturing-automation-software .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .shelf span {
font-size: 11px;
}
.manufacturing-automation-software .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.manufacturing-automation-software .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.manufacturing-automation-software .mfgGallery .rfKpiGrid {
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.manufacturing-automation-software .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.manufacturing-automation-software .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.manufacturing-automation-software .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.manufacturing-automation-software .mfgGallery .rfScanCard span {
font-size: 9px;
}
.manufacturing-automation-software .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.manufacturing-automation-software .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.manufacturing-automation-software .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.manufacturing-automation-software .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.manufacturing-automation-software .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.manufacturing-automation-software .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.manufacturing-automation-software .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.manufacturing-automation-software .mfgGallery .flowArrow {
display: none;
}
.manufacturing-automation-software .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .railItem {
padding: 9px 7px;
}
.manufacturing-automation-software .mfgGallery .railItem b {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.manufacturing-automation-software .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.manufacturing-automation-software .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.manufacturing-automation-software .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.manufacturing-automation-software .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .reorderCard strong {
font-size: 13px;
}
.manufacturing-automation-software .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.manufacturing-automation-software .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.manufacturing-automation-software .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.manufacturing-automation-software .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.manufacturing-automation-software .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.manufacturing-automation-software .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.manufacturing-automation-software .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.manufacturing-automation-software .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.manufacturing-automation-software .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.manufacturing-automation-software .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.manufacturing-automation-software .mfgGallery .varianceCard {
padding: 12px;
}
.manufacturing-automation-software .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.manufacturing-automation-software .mfgGallery .varianceCard small {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.manufacturing-automation-software .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.manufacturing-automation-software .mfgGallery .deviceTop {
font-size: 11px;
}
.manufacturing-automation-software .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.manufacturing-automation-software .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.manufacturing-automation-software .mfgGallery .deviceMetric {
padding: 9px;
}
.manufacturing-automation-software .mfgGallery .deviceMetric span {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .deviceMetric b {
font-size: 12px;
}
.manufacturing-automation-software .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.manufacturing-automation-software .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.manufacturing-automation-software .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.manufacturing-automation-software .mfgGallery .siteNode.north {
top: 6px;
}
.manufacturing-automation-software .mfgGallery .siteNode.south {
bottom: 6px;
}
.manufacturing-automation-software .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.manufacturing-automation-software .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.manufacturing-automation-software .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.manufacturing-automation-software .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.manufacturing-automation-software .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.manufacturing-automation-software .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.manufacturing-automation-software .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.manufacturing-automation-software .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.manufacturing-automation-software .mfgGallery .siteSummary strong {
font-size: 12px;
}
.manufacturing-automation-software .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.manufacturing-automation-software .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.manufacturing-automation-software .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.manufacturing-automation-software .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.manufacturing-automation-software .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.manufacturing-automation-software .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.manufacturing-automation-software .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.manufacturing-automation-software .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.manufacturing-automation-software .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.manufacturing-automation-software .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.manufacturing-automation-software .mfgGallery .insightMeta {
gap: 6px;
}
.manufacturing-automation-software .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.manufacturing-automation-software .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .chartHeader span {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .chartHeader b {
font-size: 11px;
}
.manufacturing-automation-software .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.manufacturing-automation-software .mfgGallery .chartLegend {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.manufacturing-automation-software .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.manufacturing-automation-software .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.manufacturing-automation-software .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.manufacturing-automation-software .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.manufacturing-automation-software .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.manufacturing-automation-software .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.manufacturing-automation-software .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.manufacturing-automation-software .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.manufacturing-automation-software .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.manufacturing-automation-software .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.manufacturing-automation-software .mfgGallery .progressCenter strong {
font-size: 25px;
}
.manufacturing-automation-software .mfgGallery .trainingStatList {
gap: 9px;
}
.manufacturing-automation-software .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.manufacturing-automation-software .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.manufacturing-automation-software .mfgGallery .trainingStatList span {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.manufacturing-automation-software .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.manufacturing-automation-software .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.manufacturing-automation-software .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.manufacturing-automation-software .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.manufacturing-automation-software .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.manufacturing-automation-software .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.manufacturing-automation-software .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.manufacturing-automation-software .mfgGallery .qualityCaption span {
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.manufacturing-automation-software .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.manufacturing-automation-software .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.manufacturing-automation-software .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.manufacturing-automation-software .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media(max-width:1100px) {
.manufacturing-automation-software #mfg-rfid .featureStage,
.manufacturing-automation-software #mfg-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.manufacturing-automation-software #mfg-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.manufacturing-automation-software .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media(max-width:600px) {
.manufacturing-automation-software #mfg-rfid .featureStage,
.manufacturing-automation-software #mfg-ai-decisions .featureStage {
padding: 16px;
}
.manufacturing-automation-software .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.manufacturing-automation-software .mfgGallery .freshWindow {
height: auto;
}
.manufacturing-automation-software .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.manufacturing-automation-software .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .freshTop strong {
font-size: 13px;
}
.manufacturing-automation-software .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.manufacturing-automation-software .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.manufacturing-automation-software .mfgGallery .rfShelfPanel {
padding: 10px;
}
.manufacturing-automation-software .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.manufacturing-automation-software .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.manufacturing-automation-software .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.manufacturing-automation-software .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.manufacturing-automation-software .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.manufacturing-automation-software .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.manufacturing-automation-software .mfgGallery .flowNum {
grid-row: 1/3;
}
.manufacturing-automation-software .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.manufacturing-automation-software .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.manufacturing-automation-software .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manufacturing-automation-software .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.manufacturing-automation-software .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.manufacturing-automation-software .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.manufacturing-automation-software .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.manufacturing-automation-software .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.manufacturing-automation-software .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.manufacturing-automation-software .mfgGallery .rfActionStrip {
height: auto;
}
.manufacturing-automation-software .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .countPanel {
gap: 14px;
}
.manufacturing-automation-software .mfgGallery .handheldPanel {
padding: 15px;
}
.manufacturing-automation-software .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.manufacturing-automation-software .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.manufacturing-automation-software .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.manufacturing-automation-software .mfgGallery .siteNode.east {
right: 3%;
}
.manufacturing-automation-software .mfgGallery .siteNode.west {
left: 3%;
}
.manufacturing-automation-software .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.manufacturing-automation-software .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.manufacturing-automation-software .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.manufacturing-automation-software .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.manufacturing-automation-software .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.manufacturing-automation-software .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.manufacturing-automation-software .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.manufacturing-automation-software .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.manufacturing-automation-software .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.manufacturing-automation-software .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.manufacturing-automation-software .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.manufacturing-automation-software .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.manufacturing-automation-software .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.manufacturing-automation-software .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.manufacturing-automation-software .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.manufacturing-automation-software .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.manufacturing-automation-software .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.manufacturing-automation-software .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.manufacturing-automation-software .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.manufacturing-automation-software .mfgGallery .moduleCard {
padding: 10px;
}
.manufacturing-automation-software .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.manufacturing-automation-software .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.manufacturing-automation-software .mfgGallery .qualityAction strong {
font-size: 12px;
}
.manufacturing-automation-software .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.manufacturing-automation-software .mfgGallery .shelf i::after {
bottom: 0;
}  .building-material-manufacturing-maintenance-software .industryIntroHead.compact,
.building-material-manufacturing-maintenance-software .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels {
position: relative;
min-height: 430px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels>.mediaPanel {
display: none;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .spotlightMedia {
height: 100%;
}
.building-material-manufacturing-maintenance-software .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.building-material-manufacturing-maintenance-software .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.building-material-manufacturing-maintenance-software .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .windowTop small {
font-size: 10px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .windowDots {
display: flex;
gap: 5px;
}
.building-material-manufacturing-maintenance-software .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.building-material-manufacturing-maintenance-software .windowBody {
padding: 16px;
}
.building-material-manufacturing-maintenance-software .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.building-material-manufacturing-maintenance-software .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.building-material-manufacturing-maintenance-software .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.building-material-manufacturing-maintenance-software .chartGridLine.l1 {
top: 34px;
}
.building-material-manufacturing-maintenance-software .chartGridLine.l2 {
top: 65px;
}
.building-material-manufacturing-maintenance-software .chartGridLine.l3 {
top: 96px;
}
.building-material-manufacturing-maintenance-software .chartGridLine.l4 {
top: 127px;
}
.building-material-manufacturing-maintenance-software .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.building-material-manufacturing-maintenance-software .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.building-material-manufacturing-maintenance-software .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.building-material-manufacturing-maintenance-software .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.building-material-manufacturing-maintenance-software .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.building-material-manufacturing-maintenance-software .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.building-material-manufacturing-maintenance-software .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .spectrumNotes {
display: grid;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.building-material-manufacturing-maintenance-software .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.building-material-manufacturing-maintenance-software .noteCard p,
.building-material-manufacturing-maintenance-software .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.building-material-manufacturing-maintenance-software .alertStack {
display: grid;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.building-material-manufacturing-maintenance-software .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.building-material-manufacturing-maintenance-software .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.building-material-manufacturing-maintenance-software .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.building-material-manufacturing-maintenance-software .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.building-material-manufacturing-maintenance-software .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.building-material-manufacturing-maintenance-software .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.building-material-manufacturing-maintenance-software .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .scheduleBoard h4,
.building-material-manufacturing-maintenance-software .todoBoard h4,
.building-material-manufacturing-maintenance-software .siteBoard h4,
.building-material-manufacturing-maintenance-software .chatPanel h4,
.building-material-manufacturing-maintenance-software .lessonPanel h4,
.building-material-manufacturing-maintenance-software .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.building-material-manufacturing-maintenance-software .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.building-material-manufacturing-maintenance-software .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.building-material-manufacturing-maintenance-software .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.building-material-manufacturing-maintenance-software .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.building-material-manufacturing-maintenance-software .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.building-material-manufacturing-maintenance-software .taskRow:last-child {
border-bottom: 0;
}
.building-material-manufacturing-maintenance-software .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.building-material-manufacturing-maintenance-software .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.building-material-manufacturing-maintenance-software .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .inventoryTable th,
.building-material-manufacturing-maintenance-software .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.building-material-manufacturing-maintenance-software .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.building-material-manufacturing-maintenance-software .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.building-material-manufacturing-maintenance-software .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.building-material-manufacturing-maintenance-software .phoneBody {
padding: 12px;
}
.building-material-manufacturing-maintenance-software .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.building-material-manufacturing-maintenance-software .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.building-material-manufacturing-maintenance-software .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .progressList {
display: grid;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.building-material-manufacturing-maintenance-software .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.building-material-manufacturing-maintenance-software .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.building-material-manufacturing-maintenance-software .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.building-material-manufacturing-maintenance-software .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.building-material-manufacturing-maintenance-software .pin1 {
top: 56px;
left: 58px;
}
.building-material-manufacturing-maintenance-software .pin2 {
top: 88px;
right: 88px;
}
.building-material-manufacturing-maintenance-software .pin3 {
bottom: 54px;
right: 72px;
}
.building-material-manufacturing-maintenance-software .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.building-material-manufacturing-maintenance-software .siteRow:last-child {
border-bottom: 0;
}
.building-material-manufacturing-maintenance-software .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.building-material-manufacturing-maintenance-software .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.building-material-manufacturing-maintenance-software .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.building-material-manufacturing-maintenance-software .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .graphNodes:before,
.building-material-manufacturing-maintenance-software .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.building-material-manufacturing-maintenance-software .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.building-material-manufacturing-maintenance-software .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.building-material-manufacturing-maintenance-software .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.building-material-manufacturing-maintenance-software .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.building-material-manufacturing-maintenance-software .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.building-material-manufacturing-maintenance-software .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.building-material-manufacturing-maintenance-software .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.building-material-manufacturing-maintenance-software .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.building-material-manufacturing-maintenance-software .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .forecastList .taskRow strong {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.building-material-manufacturing-maintenance-software .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.building-material-manufacturing-maintenance-software .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.building-material-manufacturing-maintenance-software .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.building-material-manufacturing-maintenance-software .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.building-material-manufacturing-maintenance-software .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.building-material-manufacturing-maintenance-software .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.building-material-manufacturing-maintenance-software .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.building-material-manufacturing-maintenance-software .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.building-material-manufacturing-maintenance-software .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.building-material-manufacturing-maintenance-software .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.building-material-manufacturing-maintenance-software .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.building-material-manufacturing-maintenance-software .qualityRows {
display: grid;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.building-material-manufacturing-maintenance-software .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.building-material-manufacturing-maintenance-software .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.building-material-manufacturing-maintenance-software .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.building-material-manufacturing-maintenance-software #bm-predictive-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.building-material-manufacturing-maintenance-software #bm-predictive-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.building-material-manufacturing-maintenance-software #bm-predictive-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.building-material-manufacturing-maintenance-software #bm-predictive-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.building-material-manufacturing-maintenance-software #bm-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.building-material-manufacturing-maintenance-software #bm-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.building-material-manufacturing-maintenance-software #bm-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.building-material-manufacturing-maintenance-software #bm-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.building-material-manufacturing-maintenance-software #bm-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.building-material-manufacturing-maintenance-software #bm-predictive-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.building-material-manufacturing-maintenance-software #bm-predictive-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.building-material-manufacturing-maintenance-software #bm-predictive-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.building-material-manufacturing-maintenance-software #bm-predictive-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.building-material-manufacturing-maintenance-software #bm-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.building-material-manufacturing-maintenance-software #bm-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.building-material-manufacturing-maintenance-software #bm-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.building-material-manufacturing-maintenance-software #bm-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.building-material-manufacturing-maintenance-software #bm-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.building-material-manufacturing-maintenance-software .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.building-material-manufacturing-maintenance-software .featureMediaPanels {
min-height: 0;
}
.building-material-manufacturing-maintenance-software .inventorySplit,
.building-material-manufacturing-maintenance-software .forecastGrid,
.building-material-manufacturing-maintenance-software .siteGrid,
.building-material-manufacturing-maintenance-software .spectrumGrid,
.building-material-manufacturing-maintenance-software .scheduleGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.building-material-manufacturing-maintenance-software .metricGrid,
.building-material-manufacturing-maintenance-software .lessonCards,
.building-material-manufacturing-maintenance-software .gaugeGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.building-material-manufacturing-maintenance-software .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.building-material-manufacturing-maintenance-software .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.building-material-manufacturing-maintenance-software .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .brand span {
color: var(--brand);
}
.building-material-manufacturing-maintenance-software .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.building-material-manufacturing-maintenance-software .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .button.primary:hover {
background: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.building-material-manufacturing-maintenance-software .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.building-material-manufacturing-maintenance-software .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}  .building-material-manufacturing-maintenance-software h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
}
.building-material-manufacturing-maintenance-software h3 {
font-size: 23px;
color: var(--black);
}
.building-material-manufacturing-maintenance-software .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.building-material-manufacturing-maintenance-software .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.building-material-manufacturing-maintenance-software .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.building-material-manufacturing-maintenance-software .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .hero .button.primary:hover {
background: var(--black-soft);
}
.building-material-manufacturing-maintenance-software .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.building-material-manufacturing-maintenance-software .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.building-material-manufacturing-maintenance-software .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.building-material-manufacturing-maintenance-software .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.building-material-manufacturing-maintenance-software .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.building-material-manufacturing-maintenance-software .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.building-material-manufacturing-maintenance-software .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.building-material-manufacturing-maintenance-software .ratingLead strong {
display: block;
font-size: 20px;
}
.building-material-manufacturing-maintenance-software .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.building-material-manufacturing-maintenance-software .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.building-material-manufacturing-maintenance-software .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.building-material-manufacturing-maintenance-software .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.building-material-manufacturing-maintenance-software .awardLead span {
color: var(--muted);
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
.building-material-manufacturing-maintenance-software section {
padding: 88px 0;
}
.building-material-manufacturing-maintenance-software .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.building-material-manufacturing-maintenance-software .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.building-material-manufacturing-maintenance-software .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.building-material-manufacturing-maintenance-software .aiJourney h2 {
color: #fff;
}
.building-material-manufacturing-maintenance-software .aiJourney .sectionHead p {
color: #D7D7D7;
}
.building-material-manufacturing-maintenance-software .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.building-material-manufacturing-maintenance-software .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.building-material-manufacturing-maintenance-software .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.building-material-manufacturing-maintenance-software .aiStep:last-child::after {
display: none;
}
.building-material-manufacturing-maintenance-software .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.building-material-manufacturing-maintenance-software .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.building-material-manufacturing-maintenance-software .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.building-material-manufacturing-maintenance-software .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.building-material-manufacturing-maintenance-software .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.building-material-manufacturing-maintenance-software .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.building-material-manufacturing-maintenance-software .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.building-material-manufacturing-maintenance-software .outcome span {
color: var(--muted);
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .capability {
background: #fff;
}
.building-material-manufacturing-maintenance-software .capability.alt {
background: var(--sky-2);
}
.building-material-manufacturing-maintenance-software .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .twoCol.reverse .visual {
order: 2;
}
.building-material-manufacturing-maintenance-software .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.building-material-manufacturing-maintenance-software .visual .placeholder {
min-height: 355px;
}
.building-material-manufacturing-maintenance-software .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.building-material-manufacturing-maintenance-software .featureList.primaryOnly .featureItem:nth-child(n +5) {
display: none;
}
.building-material-manufacturing-maintenance-software details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.building-material-manufacturing-maintenance-software details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.building-material-manufacturing-maintenance-software details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.building-material-manufacturing-maintenance-software details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.building-material-manufacturing-maintenance-software details.capabilityMore[open] summary::after {
content: "−";
}
.building-material-manufacturing-maintenance-software details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.building-material-manufacturing-maintenance-software .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.building-material-manufacturing-maintenance-software .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.building-material-manufacturing-maintenance-software .darkSection h2,
.building-material-manufacturing-maintenance-software .darkSection h3 {
color: #fff;
}
.building-material-manufacturing-maintenance-software .darkSection .sectionHead p,
.building-material-manufacturing-maintenance-software .darkSection .copy p {
color: #D7D7D7;
}
.building-material-manufacturing-maintenance-software .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software .darkSection .featureItem {
color: #F7F7F7;
}
.building-material-manufacturing-maintenance-software .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.building-material-manufacturing-maintenance-software .darkSection .placeholder small {
color: #D0D0D0;
}
.building-material-manufacturing-maintenance-software .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.building-material-manufacturing-maintenance-software .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .card p {
color: var(--muted);
margin: 12px 0 0;
}
.building-material-manufacturing-maintenance-software .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.building-material-manufacturing-maintenance-software .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.building-material-manufacturing-maintenance-software .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.building-material-manufacturing-maintenance-software .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.building-material-manufacturing-maintenance-software .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.building-material-manufacturing-maintenance-software .benefitBand h2 {
color: #fff;
}
.building-material-manufacturing-maintenance-software .benefitBand .sectionHead p {
color: #D5D5D5;
}
.building-material-manufacturing-maintenance-software .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.building-material-manufacturing-maintenance-software .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.building-material-manufacturing-maintenance-software .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.building-material-manufacturing-maintenance-software .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.building-material-manufacturing-maintenance-software .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.building-material-manufacturing-maintenance-software .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.building-material-manufacturing-maintenance-software .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.building-material-manufacturing-maintenance-software .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.building-material-manufacturing-maintenance-software .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.building-material-manufacturing-maintenance-software .ctaPanel h2 {
color: #fff;
}
.building-material-manufacturing-maintenance-software .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.building-material-manufacturing-maintenance-software .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.building-material-manufacturing-maintenance-software .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.building-material-manufacturing-maintenance-software .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.building-material-manufacturing-maintenance-software .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.building-material-manufacturing-maintenance-software .inlineCta.dark h3 {
color: #fff;
}
.building-material-manufacturing-maintenance-software .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.building-material-manufacturing-maintenance-software .inlineCta.dark p {
color: #D8D8D8;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.building-material-manufacturing-maintenance-software .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .button.yellow:hover {
background: #FFD84D;
}
.building-material-manufacturing-maintenance-software .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.building-material-manufacturing-maintenance-software .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.building-material-manufacturing-maintenance-software .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.building-material-manufacturing-maintenance-software footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.building-material-manufacturing-maintenance-software .ratingSectionGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.building-material-manufacturing-maintenance-software .heroGrid,
.building-material-manufacturing-maintenance-software .twoCol,
.building-material-manufacturing-maintenance-software .ctaPanel {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .twoCol.reverse .visual {
order: initial;
}
.building-material-manufacturing-maintenance-software .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.building-material-manufacturing-maintenance-software .ratingGrid,
.building-material-manufacturing-maintenance-software .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.building-material-manufacturing-maintenance-software .ratingLead,
.building-material-manufacturing-maintenance-software .awardLead {
grid-column: 1/-1;
text-align: center;
}
.building-material-manufacturing-maintenance-software .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.building-material-manufacturing-maintenance-software .aiStep:nth-child(3)::after,
.building-material-manufacturing-maintenance-software .aiStep:last-child::after {
display: none;
}
.building-material-manufacturing-maintenance-software .outcomeGrid,
.building-material-manufacturing-maintenance-software .challengeGrid,
.building-material-manufacturing-maintenance-software .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.building-material-manufacturing-maintenance-software .cards,
.building-material-manufacturing-maintenance-software .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.building-material-manufacturing-maintenance-software .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.building-material-manufacturing-maintenance-software .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.building-material-manufacturing-maintenance-software .awardProofGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .wrap {
width: min(var(--max), calc(100% - 24px));
}
.building-material-manufacturing-maintenance-software .hero {
padding: 58px 0 52px;
}
.building-material-manufacturing-maintenance-software section {
padding: 64px 0;
} .building-material-manufacturing-maintenance-software .aiFlow {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .aiStep::after {
display: none;
}
.building-material-manufacturing-maintenance-software .logoRow,
.building-material-manufacturing-maintenance-software .ratingGrid,
.building-material-manufacturing-maintenance-software .awardGrid,
.building-material-manufacturing-maintenance-software .outcomeGrid,
.building-material-manufacturing-maintenance-software .challengeGrid,
.building-material-manufacturing-maintenance-software .benefitGrid,
.building-material-manufacturing-maintenance-software .cards,
.building-material-manufacturing-maintenance-software .proofCards,
.building-material-manufacturing-maintenance-software .integrationGrid,
.building-material-manufacturing-maintenance-software .featureList {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.building-material-manufacturing-maintenance-software .ctaPanel {
padding: 34px 24px;
}
.building-material-manufacturing-maintenance-software .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions {
width: 100%;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions .button {
flex: 1;
}
}
.building-material-manufacturing-maintenance-software .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.building-material-manufacturing-maintenance-software .wrap>*,
.building-material-manufacturing-maintenance-software .heroGrid>*,
.building-material-manufacturing-maintenance-software .twoCol>*,
.building-material-manufacturing-maintenance-software .ctaPanel>* {
min-width: 0;
}
.building-material-manufacturing-maintenance-software .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.building-material-manufacturing-maintenance-software .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.building-material-manufacturing-maintenance-software .skipLink:focus {
transform: none;
}
.building-material-manufacturing-maintenance-software a:focus-visible,
.building-material-manufacturing-maintenance-software summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.building-material-manufacturing-maintenance-software .darkSection a:focus-visible,
.building-material-manufacturing-maintenance-software .darkSection summary:focus-visible,
.building-material-manufacturing-maintenance-software .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .topbar {
background: #fff;
backdrop-filter: none;
}
.building-material-manufacturing-maintenance-software .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.building-material-manufacturing-maintenance-software .brandName {
display: inline;
color: var(--navy) !important;
}
.building-material-manufacturing-maintenance-software .brandName>span {
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.building-material-manufacturing-maintenance-software .brandMark .icon2 {
width: 21px;
height: 21px;
}
.building-material-manufacturing-maintenance-software .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.building-material-manufacturing-maintenance-software .navlinks a:hover {
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.building-material-manufacturing-maintenance-software .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.building-material-manufacturing-maintenance-software .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.building-material-manufacturing-maintenance-software .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.building-material-manufacturing-maintenance-software .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.building-material-manufacturing-maintenance-software .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.building-material-manufacturing-maintenance-software .heroVisual {
width: 100%;
min-width: 0;
}
.building-material-manufacturing-maintenance-software .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.building-material-manufacturing-maintenance-software .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.building-material-manufacturing-maintenance-software .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.building-material-manufacturing-maintenance-software .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .clientBand {
padding: 27px 0;
}
.building-material-manufacturing-maintenance-software .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.building-material-manufacturing-maintenance-software .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.building-material-manufacturing-maintenance-software .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.building-material-manufacturing-maintenance-software .logoBox.wide {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .logoBox small {
display: block;
font-size: 10px;
}
.building-material-manufacturing-maintenance-software section {
padding: 80px 0;
}
.building-material-manufacturing-maintenance-software h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.building-material-manufacturing-maintenance-software .sectionHead {
margin-bottom: 36px;
}
.building-material-manufacturing-maintenance-software .eyebrow {
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.building-material-manufacturing-maintenance-software .aiStep {
min-height: 162px;
}
.building-material-manufacturing-maintenance-software .aiStep strong {
line-height: 1.35;
}
.building-material-manufacturing-maintenance-software .aiStep span {
line-height: 1.65;
}
.building-material-manufacturing-maintenance-software .aiCallout {
margin-top: 24px;
}
.building-material-manufacturing-maintenance-software .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.building-material-manufacturing-maintenance-software .outcome>.icon2 {
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.building-material-manufacturing-maintenance-software .awardItem>.icon2 {
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .awardItem:hover {
border-color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .twoCol.reverse .visual {
order: -1;
}
.building-material-manufacturing-maintenance-software .copy .eyebrow {
margin-bottom: 17px;
}
.building-material-manufacturing-maintenance-software .copy p {
font-size: 16px;
line-height: 1.85;
}
.building-material-manufacturing-maintenance-software .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.building-material-manufacturing-maintenance-software .featureList {
gap: 13px 18px;
}
.building-material-manufacturing-maintenance-software .featureItem {
font-size: 13px;
line-height: 1.6;
}
.building-material-manufacturing-maintenance-software .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.building-material-manufacturing-maintenance-software .check .icon2 {
width: 14px;
height: 14px;
}
.building-material-manufacturing-maintenance-software details.capabilityMore {
margin-bottom: 0;
}
.building-material-manufacturing-maintenance-software .capabilityMore summary {
min-height: 34px;
}
.building-material-manufacturing-maintenance-software .capabilityMore .moreGrid {
gap: 13px 18px;
}
.building-material-manufacturing-maintenance-software .textCta {
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .visual {
min-width: 0;
}
.building-material-manufacturing-maintenance-software .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.building-material-manufacturing-maintenance-software .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.building-material-manufacturing-maintenance-software .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.building-material-manufacturing-maintenance-software .panelBody {
padding: 20px;
}
.building-material-manufacturing-maintenance-software .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.building-material-manufacturing-maintenance-software .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.building-material-manufacturing-maintenance-software .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.building-material-manufacturing-maintenance-software .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.building-material-manufacturing-maintenance-software .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.building-material-manufacturing-maintenance-software .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.building-material-manufacturing-maintenance-software .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.building-material-manufacturing-maintenance-software .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.building-material-manufacturing-maintenance-software .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.building-material-manufacturing-maintenance-software .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.building-material-manufacturing-maintenance-software .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.building-material-manufacturing-maintenance-software .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.building-material-manufacturing-maintenance-software .miniStats span {
font-size: 9px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.building-material-manufacturing-maintenance-software .dataRow:last-child {
border-bottom: 0;
}
.building-material-manufacturing-maintenance-software .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.building-material-manufacturing-maintenance-software .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.building-material-manufacturing-maintenance-software .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.building-material-manufacturing-maintenance-software .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.building-material-manufacturing-maintenance-software .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.building-material-manufacturing-maintenance-software .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.building-material-manufacturing-maintenance-software .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.building-material-manufacturing-maintenance-software .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.building-material-manufacturing-maintenance-software .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.building-material-manufacturing-maintenance-software .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.building-material-manufacturing-maintenance-software .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.building-material-manufacturing-maintenance-software .mobileAccount {
text-align: center;
padding: 13px 0;
}
.building-material-manufacturing-maintenance-software .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.building-material-manufacturing-maintenance-software .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowCopy strong {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowCopy small {
font-size: 7px;
}
.building-material-manufacturing-maintenance-software .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.building-material-manufacturing-maintenance-software .mobileSide {
display: grid;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.building-material-manufacturing-maintenance-software .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.building-material-manufacturing-maintenance-software .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.building-material-manufacturing-maintenance-software .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.building-material-manufacturing-maintenance-software .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.building-material-manufacturing-maintenance-software .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.building-material-manufacturing-maintenance-software .darkSection .panelHead>strong {
color: #fff;
}
.building-material-manufacturing-maintenance-software .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.building-material-manufacturing-maintenance-software .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.building-material-manufacturing-maintenance-software .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.building-material-manufacturing-maintenance-software .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.building-material-manufacturing-maintenance-software .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.building-material-manufacturing-maintenance-software .promptList {
display: grid;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.building-material-manufacturing-maintenance-software .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.building-material-manufacturing-maintenance-software .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.building-material-manufacturing-maintenance-software .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.building-material-manufacturing-maintenance-software .quoteTable th,
.building-material-manufacturing-maintenance-software .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.building-material-manufacturing-maintenance-software .quoteTable td:first-child {
width: 64%;
}
.building-material-manufacturing-maintenance-software .quoteTable th:last-child,
.building-material-manufacturing-maintenance-software .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.building-material-manufacturing-maintenance-software .quoteTable strong {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .quoteTable tfoot {
background: #F5FBFF;
}
.building-material-manufacturing-maintenance-software .quoteTable tfoot th {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.building-material-manufacturing-maintenance-software .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.building-material-manufacturing-maintenance-software .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.building-material-manufacturing-maintenance-software .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .orderJourney {
margin: 20px 0;
}
.building-material-manufacturing-maintenance-software .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.building-material-manufacturing-maintenance-software .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.building-material-manufacturing-maintenance-software .journeyRow:last-child:before {
display: none;
}
.building-material-manufacturing-maintenance-software .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.building-material-manufacturing-maintenance-software .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.building-material-manufacturing-maintenance-software .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.building-material-manufacturing-maintenance-software .journeyRow strong {
font-size: 12px;
display: block;
}
.building-material-manufacturing-maintenance-software .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.building-material-manufacturing-maintenance-software .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.building-material-manufacturing-maintenance-software .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.building-material-manufacturing-maintenance-software .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .inventoryIntro strong {
display: block;
font-size: 16px;
}
.building-material-manufacturing-maintenance-software .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.building-material-manufacturing-maintenance-software .availabilityCard span {
font-size: 9px;
display: block;
}
.building-material-manufacturing-maintenance-software .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.building-material-manufacturing-maintenance-software .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.building-material-manufacturing-maintenance-software .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.building-material-manufacturing-maintenance-software .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.building-material-manufacturing-maintenance-software .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.building-material-manufacturing-maintenance-software .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.building-material-manufacturing-maintenance-software .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.building-material-manufacturing-maintenance-software .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.building-material-manufacturing-maintenance-software .customerTimeline .dataRow {
border-color: #353535;
}
.building-material-manufacturing-maintenance-software .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .customerTimeline strong {
color: #fff;
}
.building-material-manufacturing-maintenance-software .customerTimeline small {
color: #BFBFBF;
}
.building-material-manufacturing-maintenance-software .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.building-material-manufacturing-maintenance-software .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.building-material-manufacturing-maintenance-software .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.building-material-manufacturing-maintenance-software .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.building-material-manufacturing-maintenance-software .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.building-material-manufacturing-maintenance-software .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.building-material-manufacturing-maintenance-software .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.building-material-manufacturing-maintenance-software .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.building-material-manufacturing-maintenance-software .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.building-material-manufacturing-maintenance-software .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.building-material-manufacturing-maintenance-software .chartTitle strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.building-material-manufacturing-maintenance-software .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.building-material-manufacturing-maintenance-software .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.building-material-manufacturing-maintenance-software .inlineCta {
margin-top: 0;
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions {
max-width: 42%;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.building-material-manufacturing-maintenance-software .inlineCta h3 {
line-height: 1.35;
}
.building-material-manufacturing-maintenance-software .card {
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .cardIcon {
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .card h3 {
font-size: 22px;
}
.building-material-manufacturing-maintenance-software .card p {
font-size: 14px;
line-height: 1.8;
}
.building-material-manufacturing-maintenance-software .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.building-material-manufacturing-maintenance-software .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.building-material-manufacturing-maintenance-software .ratingBand {
padding: 34px 0;
}
.building-material-manufacturing-maintenance-software .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.building-material-manufacturing-maintenance-software .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.building-material-manufacturing-maintenance-software .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.building-material-manufacturing-maintenance-software .ratingItem:first-child {
border-left: 0;
}
.building-material-manufacturing-maintenance-software .proofCard h3 {
font-size: 23px;
}
.building-material-manufacturing-maintenance-software .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.building-material-manufacturing-maintenance-software .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.building-material-manufacturing-maintenance-software .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .integration {
min-height: 98px;
}
.building-material-manufacturing-maintenance-software .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.building-material-manufacturing-maintenance-software .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.building-material-manufacturing-maintenance-software .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.building-material-manufacturing-maintenance-software .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.building-material-manufacturing-maintenance-software .finalActions {
display: grid;
gap: 11px;
}
.building-material-manufacturing-maintenance-software .finalActions .button {
white-space: nowrap;
}
.building-material-manufacturing-maintenance-software .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.building-material-manufacturing-maintenance-software .footerInner p {
margin: 0;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.building-material-manufacturing-maintenance-software .navlinks {
gap: 15px;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .heroGrid {
gap: 30px;
}
.building-material-manufacturing-maintenance-software .twoCol {
gap: 32px;
}
.building-material-manufacturing-maintenance-software .panelBody {
padding: 16px;
}
.building-material-manufacturing-maintenance-software .panelHead {
padding: 16px;
}
.building-material-manufacturing-maintenance-software .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.building-material-manufacturing-maintenance-software .pipelineColumns {
gap: 7px;
}
.building-material-manufacturing-maintenance-software .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.building-material-manufacturing-maintenance-software .heroGrid,
.building-material-manufacturing-maintenance-software .twoCol,
.building-material-manufacturing-maintenance-software .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .heroGrid {
gap: 36px;
}
.building-material-manufacturing-maintenance-software .hero h1 {
max-width: 730px;
}
.building-material-manufacturing-maintenance-software .hero .lead {
max-width: 690px;
}
.building-material-manufacturing-maintenance-software .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.building-material-manufacturing-maintenance-software .twoCol {
gap: 34px;
}
.building-material-manufacturing-maintenance-software .twoCol.reverse .visual {
order: initial;
}
.building-material-manufacturing-maintenance-software .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.building-material-manufacturing-maintenance-software .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .awardItem {
font-size: 12px;
padding: 13px;
}
.building-material-manufacturing-maintenance-software .ratingSectionGrid {
gap: 20px;
}
.building-material-manufacturing-maintenance-software .inlineCta {
align-items: flex-start;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.building-material-manufacturing-maintenance-software .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .card {
padding: 22px;
}
.building-material-manufacturing-maintenance-software .card h3 {
font-size: 21px;
}
.building-material-manufacturing-maintenance-software .finalActions {
display: flex;
flex-wrap: wrap;
}
.building-material-manufacturing-maintenance-software .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.building-material-manufacturing-maintenance-software .cards,
.building-material-manufacturing-maintenance-software .proofCards {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .inlineCta {
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions .button {
flex: 1;
}
.building-material-manufacturing-maintenance-software .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.building-material-manufacturing-maintenance-software .wrap {
width: calc(100% - 32px);
}
.building-material-manufacturing-maintenance-software [id] {
scroll-margin-top: 82px;
}
.building-material-manufacturing-maintenance-software .brand {
font-size: 20px;
gap: 7px;
}
.building-material-manufacturing-maintenance-software .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.building-material-manufacturing-maintenance-software .brandMark .icon2 {
width: 18px;
height: 18px;
}
.building-material-manufacturing-maintenance-software .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.building-material-manufacturing-maintenance-software section {
padding: 60px 0;
}
.building-material-manufacturing-maintenance-software .hero {
padding: 51px 0 48px;
}
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.building-material-manufacturing-maintenance-software .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.building-material-manufacturing-maintenance-software .heroActions {
gap: 10px;
margin-top: 25px;
}
.building-material-manufacturing-maintenance-software .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .hero .microcopy {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .heroPills span {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.building-material-manufacturing-maintenance-software .sectionHead p {
font-size: 16px;
}
.building-material-manufacturing-maintenance-software .copy h2 {
font-size: 34px;
}
.building-material-manufacturing-maintenance-software .copy p {
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.building-material-manufacturing-maintenance-software .logoBox {
min-height: 53px;
}
.building-material-manufacturing-maintenance-software .logoBox:last-child {
grid-column: 1/-1;
}
.building-material-manufacturing-maintenance-software .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.building-material-manufacturing-maintenance-software .aiStep strong {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .aiStep span {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .aiStep::after {
display: none;
}
.building-material-manufacturing-maintenance-software .outcomeGrid,
.building-material-manufacturing-maintenance-software .challengeGrid,
.building-material-manufacturing-maintenance-software .benefitGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .outcome {
padding: 24px;
}
.building-material-manufacturing-maintenance-software .outcome strong {
font-size: 22px;
}
.building-material-manufacturing-maintenance-software .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.building-material-manufacturing-maintenance-software .awardItem:last-child {
grid-column: 1/-1;
}
.building-material-manufacturing-maintenance-software .featureList,
.building-material-manufacturing-maintenance-software .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .featureItem {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .inlineCta {
padding: 22px;
gap: 19px;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.building-material-manufacturing-maintenance-software .panelHead {
padding: 15px 13px;
}
.building-material-manufacturing-maintenance-software .panelHead>strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .panelBody {
padding: 14px;
}
.building-material-manufacturing-maintenance-software .productPanel {
border-radius: 16px;
}
.building-material-manufacturing-maintenance-software .productPanel figcaption {
padding: 0 14px 13px;
}
.building-material-manufacturing-maintenance-software .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.building-material-manufacturing-maintenance-software .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .deal {
margin-top: 0;
padding: 10px;
}
.building-material-manufacturing-maintenance-software .deal strong {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .deal small {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.building-material-manufacturing-maintenance-software .mobileWorkspace {
gap: 12px;
}
.building-material-manufacturing-maintenance-software .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.building-material-manufacturing-maintenance-software .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.building-material-manufacturing-maintenance-software .sideTile {
padding: 10px;
}
.building-material-manufacturing-maintenance-software .sideTile strong {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .sideTile p {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .mobileHeader strong {
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .mobileAccount strong {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mobileAccount small {
font-size: 7px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowIcon {
display: none;
}
.building-material-manufacturing-maintenance-software .quoteTable th,
.building-material-manufacturing-maintenance-software .quoteTable td {
padding: 12px 4px;
}
.building-material-manufacturing-maintenance-software .quoteTable strong {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .quoteTable small {
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .quoteTable tfoot th {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .docHeader strong {
font-size: 17px;
}
.building-material-manufacturing-maintenance-software .miniFlow {
gap: 5px;
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .miniFlow span {
padding: 6px;
}
.building-material-manufacturing-maintenance-software .rowCopy strong {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .rowCopy small {
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .statusPill {
font-size: 7px;
padding: 5px;
}
.building-material-manufacturing-maintenance-software .miniStats {
gap: 7px;
}
.building-material-manufacturing-maintenance-software .miniStats>div {
padding: 9px;
}
.building-material-manufacturing-maintenance-software .miniStats strong {
font-size: 18px;
}
.building-material-manufacturing-maintenance-software .miniStats span {
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .collectionStats>div {
padding: 13px;
}
.building-material-manufacturing-maintenance-software .collectionStats strong {
font-size: 24px;
}
.building-material-manufacturing-maintenance-software .customerHeader strong {
font-size: 17px;
}
.building-material-manufacturing-maintenance-software .customerFacts>div {
padding: 10px;
}
.building-material-manufacturing-maintenance-software .customerFacts strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.building-material-manufacturing-maintenance-software .ratingItem:last-child {
grid-column: 1/-1;
}
.building-material-manufacturing-maintenance-software .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .integration small {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.building-material-manufacturing-maintenance-software .ctaPanel p {
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .footerInner {
align-items: flex-start;
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .contextSection {
padding: 0 0 24px;
}
.building-material-manufacturing-maintenance-software .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.building-material-manufacturing-maintenance-software .wrap {
width: calc(100% - 24px);
}
.building-material-manufacturing-maintenance-software .brand {
font-size: 18px;
}
.building-material-manufacturing-maintenance-software .brandMark {
width: 25px;
height: 25px;
}
.building-material-manufacturing-maintenance-software .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: 38px;
}
.building-material-manufacturing-maintenance-software .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.building-material-manufacturing-maintenance-software .copy h2 {
font-size: 31px;
}
.building-material-manufacturing-maintenance-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .phoneDevice {
width: 210px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowIcon {
display: grid;
}
.building-material-manufacturing-maintenance-software .mobileSide {
gap: 8px;
}
.building-material-manufacturing-maintenance-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.building-material-manufacturing-maintenance-software .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.building-material-manufacturing-maintenance-software .sideTile p {
margin: 0;
}
.building-material-manufacturing-maintenance-software .miniFlow span {
padding: 5px;
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .collectionStats strong {
font-size: 21px;
}
.building-material-manufacturing-maintenance-software .inventoryIntro strong {
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .dataRow {
gap: 7px;
}
.building-material-manufacturing-maintenance-software .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions {
flex-direction: column;
}
}
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
.building-material-manufacturing-maintenance-software .hero .eyebrow {
max-width: 100%;
}
.building-material-manufacturing-maintenance-software .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.building-material-manufacturing-maintenance-software .ganttIllustration,
.building-material-manufacturing-maintenance-software .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.building-material-manufacturing-maintenance-software .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.building-material-manufacturing-maintenance-software .costIllustration {
aspect-ratio: 484/226;
}
.building-material-manufacturing-maintenance-software .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.building-material-manufacturing-maintenance-software .comparisonTable thead {
background: var(--black);
color: #fff;
}
.building-material-manufacturing-maintenance-software .comparisonTable thead th:last-child {
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .comparisonTable th,
.building-material-manufacturing-maintenance-software .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .comparisonTable th:first-child {
width: 23%;
}
.building-material-manufacturing-maintenance-software .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.building-material-manufacturing-maintenance-software .comparisonTable tbody td {
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.building-material-manufacturing-maintenance-software .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.building-material-manufacturing-maintenance-software .card,
.building-material-manufacturing-maintenance-software .proofCard,
.building-material-manufacturing-maintenance-software .productPanel,
.building-material-manufacturing-maintenance-software .outcome,
.building-material-manufacturing-maintenance-software .benefit {
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.building-material-manufacturing-maintenance-software .hero .eyebrow {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .comparisonTable {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .comparisonTable th,
.building-material-manufacturing-maintenance-software .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.building-material-manufacturing-maintenance-software .comparisonTable th:first-child {
width: 24%;
}
.building-material-manufacturing-maintenance-software .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.building-material-manufacturing-maintenance-software .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: 38px;
}
}
.building-material-manufacturing-maintenance-software .scheduleIllustration,
.building-material-manufacturing-maintenance-software .analyticsIllustration,
.building-material-manufacturing-maintenance-software .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.building-material-manufacturing-maintenance-software .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.building-material-manufacturing-maintenance-software .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.building-material-manufacturing-maintenance-software .conditionIllustration {
aspect-ratio: 484 / 178;
}
.building-material-manufacturing-maintenance-software .miniStats strong {
font-variant-numeric: tabular-nums;
}
.building-material-manufacturing-maintenance-software .quoteTable td:last-child {
white-space: nowrap;
}
.building-material-manufacturing-maintenance-software .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.building-material-manufacturing-maintenance-software .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.building-material-manufacturing-maintenance-software .darkSection .textCta {
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.building-material-manufacturing-maintenance-software .secondaryLinks .textCta {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.building-material-manufacturing-maintenance-software .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.building-material-manufacturing-maintenance-software .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.building-material-manufacturing-maintenance-software .scanSummary>.icon2 {
color: var(--yellow);
flex: 0 0 24px;
}
.building-material-manufacturing-maintenance-software .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .returnFlag .icon2 {
flex: 0 0 24px;
}
.building-material-manufacturing-maintenance-software .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .phoneDevice {
max-width: 100%;
}
.building-material-manufacturing-maintenance-software .heroPills {
line-height: 1.55;
}
.building-material-manufacturing-maintenance-software .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.building-material-manufacturing-maintenance-software .plantFacts {
gap: 7px;
}
.building-material-manufacturing-maintenance-software .plantFacts>div {
padding: 9px;
}
.building-material-manufacturing-maintenance-software .plantFacts strong {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .scanSummary {
padding: 12px;
}
.building-material-manufacturing-maintenance-software .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.building-material-manufacturing-maintenance-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .phoneDevice {
width: 224px;
margin: auto;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowIcon {
display: grid;
}
.building-material-manufacturing-maintenance-software .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.building-material-manufacturing-maintenance-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.building-material-manufacturing-maintenance-software .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.building-material-manufacturing-maintenance-software .sideTile strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .sideTile p {
margin: 0;
font-size: 11px;
}
}
.building-material-manufacturing-maintenance-software .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.building-material-manufacturing-maintenance-software .heroAccent {
color: var(--black);
}
.building-material-manufacturing-maintenance-software .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.building-material-manufacturing-maintenance-software .heroActions {
gap: 10px;
margin-top: 24px;
}
.building-material-manufacturing-maintenance-software .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.building-material-manufacturing-maintenance-software .microcopy {
margin-top: 14px;
}
.building-material-manufacturing-maintenance-software .heroPills {
margin-top: 13px;
}
.building-material-manufacturing-maintenance-software .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.building-material-manufacturing-maintenance-software .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.building-material-manufacturing-maintenance-software .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.building-material-manufacturing-maintenance-software .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.building-material-manufacturing-maintenance-software .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.building-material-manufacturing-maintenance-software .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.building-material-manufacturing-maintenance-software .clientBand {
padding: 24px 0;
}
.building-material-manufacturing-maintenance-software .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.building-material-manufacturing-maintenance-software .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .logoBox.wide {
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .sectionHead p {
margin: 17px 0 0;
}
.building-material-manufacturing-maintenance-software .copy p {
margin: 16px 0 0;
}
.building-material-manufacturing-maintenance-software .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.building-material-manufacturing-maintenance-software .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.building-material-manufacturing-maintenance-software .aiJourney {
background: var(--black);
}
.building-material-manufacturing-maintenance-software .aiStep {
min-height: 157px;
border-color: #353535;
}
.building-material-manufacturing-maintenance-software .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .productPanel {
border-radius: 18px;
}
.building-material-manufacturing-maintenance-software .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.building-material-manufacturing-maintenance-software .panelHead>strong {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .sampleTag {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .panelBody {
padding: 21px;
}
.building-material-manufacturing-maintenance-software .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.building-material-manufacturing-maintenance-software .docHeader {
padding-bottom: 16px;
}
.building-material-manufacturing-maintenance-software .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.building-material-manufacturing-maintenance-software .smallLabel {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.building-material-manufacturing-maintenance-software .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.building-material-manufacturing-maintenance-software .dataRow {
padding: 14px 0;
}
.building-material-manufacturing-maintenance-software .statusPill {
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .miniStats {
gap: 10px;
margin: 18px 0;
}
.building-material-manufacturing-maintenance-software .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.building-material-manufacturing-maintenance-software .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.building-material-manufacturing-maintenance-software .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .contextNote {
font-size: 11px;
margin-top: 16px;
}
.building-material-manufacturing-maintenance-software .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.building-material-manufacturing-maintenance-software .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.building-material-manufacturing-maintenance-software .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.building-material-manufacturing-maintenance-software .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.building-material-manufacturing-maintenance-software .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .hierarchy strong {
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.building-material-manufacturing-maintenance-software .conditionIllustration {
aspect-ratio: 484/201;
}
.building-material-manufacturing-maintenance-software .analyticsIllustration {
aspect-ratio: 484/206;
}
.building-material-manufacturing-maintenance-software .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.building-material-manufacturing-maintenance-software .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowCopy strong {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowCopy small {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.building-material-manufacturing-maintenance-software .mobileAccount small {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .sideTile {
background: var(--sky-2);
padding: 14px;
}
.building-material-manufacturing-maintenance-software .sideTile strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.building-material-manufacturing-maintenance-software .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.building-material-manufacturing-maintenance-software .mobileAction {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .journeyRow strong {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .journeyRow small {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.building-material-manufacturing-maintenance-software .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.building-material-manufacturing-maintenance-software .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.building-material-manufacturing-maintenance-software .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.building-material-manufacturing-maintenance-software .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.building-material-manufacturing-maintenance-software .utilityReadout small {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.building-material-manufacturing-maintenance-software .darkSection {
background: var(--black);
}
.building-material-manufacturing-maintenance-software .darkSection .panelHead {
background: var(--black-soft);
}
.building-material-manufacturing-maintenance-software .darkSection .productPanel {
background: var(--black-soft);
}
.building-material-manufacturing-maintenance-software .darkSection .copy .featureNote {
color: #CFCFCF;
}
.building-material-manufacturing-maintenance-software .darkSection .rowCopy strong {
color: #FFFFFF;
}
.building-material-manufacturing-maintenance-software .darkSection .rowCopy small {
color: #CFCFCF;
}
.building-material-manufacturing-maintenance-software .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .assistantHead small {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .assistantNote {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .reportTags span {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .card p {
margin: 12px 0 0;
}
.building-material-manufacturing-maintenance-software .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.building-material-manufacturing-maintenance-software .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .cards>.card {
display: flex;
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.building-material-manufacturing-maintenance-software .cards>.card p {
padding-bottom: 22px;
}
.building-material-manufacturing-maintenance-software .benefitBand {
background: var(--black);
}
.building-material-manufacturing-maintenance-software .benefit {
background: var(--black-soft);
}
.building-material-manufacturing-maintenance-software .inlineCta h3 {
font-size: 20px;
}
.building-material-manufacturing-maintenance-software .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.building-material-manufacturing-maintenance-software .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.building-material-manufacturing-maintenance-software .valueCtaSection {
padding: 32px 0;
}
.building-material-manufacturing-maintenance-software .proofCard p {
margin-top: 15px;
}
.building-material-manufacturing-maintenance-software .proofCard h3 {
font-size: 23px;
}
.building-material-manufacturing-maintenance-software .integrationNote {
margin-top: 23px;
}
.building-material-manufacturing-maintenance-software .ctaPanel {
background: var(--black);
}
.building-material-manufacturing-maintenance-software .ctaPanel p {
margin-top: 16px;
}
.building-material-manufacturing-maintenance-software .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.building-material-manufacturing-maintenance-software .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.building-material-manufacturing-maintenance-software a:hover {
text-decoration: none;
}
.building-material-manufacturing-maintenance-software .textCta:hover {
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .darkSection .textCta:hover {
color: #FFFFFF;
}
.building-material-manufacturing-maintenance-software .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: 49px;
}
.building-material-manufacturing-maintenance-software .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.building-material-manufacturing-maintenance-software .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.building-material-manufacturing-maintenance-software .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: 58px;
}
.building-material-manufacturing-maintenance-software .heroVisual {
max-width: 548px;
}
.building-material-manufacturing-maintenance-software .hero .lead {
max-width: 700px;
}
.building-material-manufacturing-maintenance-software .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .logoBox {
font-size: 18px;
border: 0 !important;
}
.building-material-manufacturing-maintenance-software .logoBox:last-child {
grid-column: auto;
}
.building-material-manufacturing-maintenance-software .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.building-material-manufacturing-maintenance-software .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions .button {
flex: 1;
}
.building-material-manufacturing-maintenance-software .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.building-material-manufacturing-maintenance-software section {
padding: 55px 0;
}
.building-material-manufacturing-maintenance-software .hero {
padding: 28px 0 40px;
}
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.building-material-manufacturing-maintenance-software .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.building-material-manufacturing-maintenance-software .heroActions {
gap: 10px;
}
.building-material-manufacturing-maintenance-software .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.building-material-manufacturing-maintenance-software .breadcrumb {
margin-bottom: 21px;
}
.building-material-manufacturing-maintenance-software .hero .eyebrow {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .heroVisual {
max-width: 480px;
}
.building-material-manufacturing-maintenance-software .heroPills {
row-gap: 9px;
}
.building-material-manufacturing-maintenance-software .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .heroPills span+span {
padding-left: 7px;
}
.building-material-manufacturing-maintenance-software .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.building-material-manufacturing-maintenance-software .logoBox:last-child {
grid-column: 1/-1;
}
.building-material-manufacturing-maintenance-software .clientBand {
padding: 25px 0;
}
.building-material-manufacturing-maintenance-software .copy h2 {
font-size: 33px;
}
.building-material-manufacturing-maintenance-software .panelBody {
padding: 16px;
}
.building-material-manufacturing-maintenance-software .panelHead {
padding: 15px;
}
.building-material-manufacturing-maintenance-software .panelHead>strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.building-material-manufacturing-maintenance-software .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .docHeader strong {
font-size: 18px;
}
.building-material-manufacturing-maintenance-software .docHeader small {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .rowCopy strong {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .rowCopy small {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .miniStats {
gap: 7px;
}
.building-material-manufacturing-maintenance-software .miniStats strong {
font-size: 21px;
}
.building-material-manufacturing-maintenance-software .miniStats span {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .miniStats>div {
padding: 10px 8px;
}
.building-material-manufacturing-maintenance-software .plantFacts {
gap: 8px;
}
.building-material-manufacturing-maintenance-software .plantFacts>div {
padding: 10px;
}
.building-material-manufacturing-maintenance-software .plantFacts strong {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .contextNote {
font-size: 10px;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .utilityReadout {
padding: 12px;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .utilityReadout span {
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .utilityReadout strong {
font-size: 24px;
}
.building-material-manufacturing-maintenance-software .utilityReadout .utilityScope {
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.building-material-manufacturing-maintenance-software .comparisonTable {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .comparisonTable th,
.building-material-manufacturing-maintenance-software .comparisonTable td {
padding: 13px 9px;
}
.building-material-manufacturing-maintenance-software .contextSection {
padding: 0 0 22px;
}
.building-material-manufacturing-maintenance-software .valueCtaSection {
padding: 25px 0;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions {
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.building-material-manufacturing-maintenance-software .mobileWorkspace {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .phoneDevice {
width: 222px;
}
.building-material-manufacturing-maintenance-software .phoneDevice .rowIcon {
display: grid;
}
.building-material-manufacturing-maintenance-software .mobileSide {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.building-material-manufacturing-maintenance-software .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0 0;
}
.building-material-manufacturing-maintenance-software .sideTile p {
margin: 0;
}
.building-material-manufacturing-maintenance-software .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.building-material-manufacturing-maintenance-software .dataRow {
gap: 8px;
}
.building-material-manufacturing-maintenance-software .statusPill {
font-size: 7px;
padding: 5px;
}
.building-material-manufacturing-maintenance-software .miniStats strong {
font-size: 19px;
}
.building-material-manufacturing-maintenance-software .heroActions {
flex-direction: column;
align-items: stretch;
}
.building-material-manufacturing-maintenance-software .heroActions .button {
width: 100%;
}
.building-material-manufacturing-maintenance-software .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.building-material-manufacturing-maintenance-software .aiFlow {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.building-material-manufacturing-maintenance-software .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.building-material-manufacturing-maintenance-software .aiStep strong {
margin: 0;
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .aiStep span {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.building-material-manufacturing-maintenance-software .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.building-material-manufacturing-maintenance-software .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.building-material-manufacturing-maintenance-software .navlinks {
gap: 20px;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.building-material-manufacturing-maintenance-software .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.building-material-manufacturing-maintenance-software .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.building-material-manufacturing-maintenance-software .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.building-material-manufacturing-maintenance-software .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.building-material-manufacturing-maintenance-software .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.building-material-manufacturing-maintenance-software .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.building-material-manufacturing-maintenance-software .industryIntro {
padding: 78px 0 66px;
}
.building-material-manufacturing-maintenance-software .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.building-material-manufacturing-maintenance-software .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.building-material-manufacturing-maintenance-software .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.building-material-manufacturing-maintenance-software .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.building-material-manufacturing-maintenance-software .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.building-material-manufacturing-maintenance-software .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.building-material-manufacturing-maintenance-software .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.building-material-manufacturing-maintenance-software .industryPriority>.icon2 {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.building-material-manufacturing-maintenance-software .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.building-material-manufacturing-maintenance-software .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.building-material-manufacturing-maintenance-software .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.building-material-manufacturing-maintenance-software .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.building-material-manufacturing-maintenance-software .industryPriority:hover {
border-color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.building-material-manufacturing-maintenance-software .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.building-material-manufacturing-maintenance-software .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.building-material-manufacturing-maintenance-software .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.building-material-manufacturing-maintenance-software .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.building-material-manufacturing-maintenance-software .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.building-material-manufacturing-maintenance-software .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.building-material-manufacturing-maintenance-software .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.building-material-manufacturing-maintenance-software .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.building-material-manufacturing-maintenance-software .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.building-material-manufacturing-maintenance-software .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.building-material-manufacturing-maintenance-software .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.building-material-manufacturing-maintenance-software .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.building-material-manufacturing-maintenance-software .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .vedaMessage.assistant>small {
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.building-material-manufacturing-maintenance-software .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.building-material-manufacturing-maintenance-software .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.building-material-manufacturing-maintenance-software .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.building-material-manufacturing-maintenance-software .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.building-material-manufacturing-maintenance-software .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.building-material-manufacturing-maintenance-software .manufacturingSpotlight {
padding: 73px 0;
}
.building-material-manufacturing-maintenance-software .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .rfidSpotlight {
background: #fff;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.building-material-manufacturing-maintenance-software .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.building-material-manufacturing-maintenance-software .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.building-material-manufacturing-maintenance-software .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.building-material-manufacturing-maintenance-software .spotlightHead h2 span {
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.building-material-manufacturing-maintenance-software .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.building-material-manufacturing-maintenance-software .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.building-material-manufacturing-maintenance-software .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.building-material-manufacturing-maintenance-software .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.building-material-manufacturing-maintenance-software .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.building-material-manufacturing-maintenance-software .featureTab:hover {
border-color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.building-material-manufacturing-maintenance-software .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.building-material-manufacturing-maintenance-software .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.building-material-manufacturing-maintenance-software .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.building-material-manufacturing-maintenance-software .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.building-material-manufacturing-maintenance-software .featurePanel {
display: none;
}
.building-material-manufacturing-maintenance-software .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.building-material-manufacturing-maintenance-software .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.building-material-manufacturing-maintenance-software .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.building-material-manufacturing-maintenance-software .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.building-material-manufacturing-maintenance-software .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.building-material-manufacturing-maintenance-software .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.building-material-manufacturing-maintenance-software .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.building-material-manufacturing-maintenance-software .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .textCta {
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.building-material-manufacturing-maintenance-software .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .mediaTitle>.icon2 {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.building-material-manufacturing-maintenance-software .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.building-material-manufacturing-maintenance-software .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.building-material-manufacturing-maintenance-software .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.building-material-manufacturing-maintenance-software .signalFlow>.icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.building-material-manufacturing-maintenance-software .rfidImageSurface {
background: #172029;
padding: 5px;
}
.building-material-manufacturing-maintenance-software .rfidImageSurface img {
width: 100%;
height: auto;
}
.building-material-manufacturing-maintenance-software .rfidMedia figcaption {
padding-top: 13px;
}
.building-material-manufacturing-maintenance-software .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.building-material-manufacturing-maintenance-software .aiReviewBody {
padding: 18px;
}
.building-material-manufacturing-maintenance-software .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.building-material-manufacturing-maintenance-software .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.building-material-manufacturing-maintenance-software .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.building-material-manufacturing-maintenance-software .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.building-material-manufacturing-maintenance-software .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.building-material-manufacturing-maintenance-software .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.building-material-manufacturing-maintenance-software .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.building-material-manufacturing-maintenance-software .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.building-material-manufacturing-maintenance-software .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.building-material-manufacturing-maintenance-software .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.building-material-manufacturing-maintenance-software .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .aiReviewAction strong {
display: block;
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.building-material-manufacturing-maintenance-software .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.building-material-manufacturing-maintenance-software .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.building-material-manufacturing-maintenance-software .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.building-material-manufacturing-maintenance-software .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.building-material-manufacturing-maintenance-software .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.building-material-manufacturing-maintenance-software .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.building-material-manufacturing-maintenance-software .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.building-material-manufacturing-maintenance-software .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.building-material-manufacturing-maintenance-software .workflowDetails summary::-webkit-details-marker {
display: none;
}
.building-material-manufacturing-maintenance-software .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.building-material-manufacturing-maintenance-software .workflowDetails[open] summary::after {
content: "−";
}
.building-material-manufacturing-maintenance-software .workflowDetails .featureList,
.building-material-manufacturing-maintenance-software .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.building-material-manufacturing-maintenance-software .workflowDetails .featureItem {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.building-material-manufacturing-maintenance-software .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.building-material-manufacturing-maintenance-software #bm-connected-tools {
background: #fff;
}
.building-material-manufacturing-maintenance-software #bm-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.building-material-manufacturing-maintenance-software .featureTab,
.building-material-manufacturing-maintenance-software .industryPriority,
.building-material-manufacturing-maintenance-software summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.building-material-manufacturing-maintenance-software .industryIntroHead {
gap: 30px;
}
.building-material-manufacturing-maintenance-software .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.building-material-manufacturing-maintenance-software .featureStage {
gap: 26px;
padding: 26px;
}
.building-material-manufacturing-maintenance-software .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflow {
padding: 22px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.building-material-manufacturing-maintenance-software .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.building-material-manufacturing-maintenance-software .industryPriorityGrid {
gap: 14px;
}
.building-material-manufacturing-maintenance-software .industryPriority {
padding: 22px 19px;
}
.building-material-manufacturing-maintenance-software .industryPriority h3 {
font-size: 21px;
}
.building-material-manufacturing-maintenance-software .industryPriority p {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .priorityLink {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.building-material-manufacturing-maintenance-software .vedaIndustryCopy h2 {
font-size: 39px;
}
.building-material-manufacturing-maintenance-software .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.building-material-manufacturing-maintenance-software .vedaUseCases>div {
display: block;
}
.building-material-manufacturing-maintenance-software .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.building-material-manufacturing-maintenance-software .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.building-material-manufacturing-maintenance-software .featureTabs {
gap: 8px;
}
.building-material-manufacturing-maintenance-software .featureTab {
min-height: 108px;
}
.building-material-manufacturing-maintenance-software .featureStage,
.building-material-manufacturing-maintenance-software .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.building-material-manufacturing-maintenance-software .rfidSpotlight .spotlightMedia,
.building-material-manufacturing-maintenance-software .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.building-material-manufacturing-maintenance-software .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.building-material-manufacturing-maintenance-software .featurePanel {
min-height: 0;
}
.building-material-manufacturing-maintenance-software .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.building-material-manufacturing-maintenance-software .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.building-material-manufacturing-maintenance-software .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.building-material-manufacturing-maintenance-software .clientBand {
padding: 22px 0;
}
.building-material-manufacturing-maintenance-software .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.building-material-manufacturing-maintenance-software .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .clientBand .logoBox.wide {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .clientBand .logoBox:last-child {
grid-column: auto;
}
.building-material-manufacturing-maintenance-software .industryIntro {
padding: 53px 0;
}
.building-material-manufacturing-maintenance-software .industryIntroHead h2 {
font-size: 32px;
}
.building-material-manufacturing-maintenance-software .industryIntroHead>p {
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .industryPriorityGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .industryPriority {
padding: 23px;
}
.building-material-manufacturing-maintenance-software .industryPriority h3 {
font-size: 24px;
}
.building-material-manufacturing-maintenance-software .industryPriority>.icon2 {
margin: 5px 0 15px;
}
.building-material-manufacturing-maintenance-software .industryPriority p {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .priorityLink {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .vedaIndustry {
padding: 0 0 52px;
}
.building-material-manufacturing-maintenance-software .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.building-material-manufacturing-maintenance-software .vedaIndustryCopy h2 {
font-size: 32px;
}
.building-material-manufacturing-maintenance-software .vedaIndustryCopy>p {
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.building-material-manufacturing-maintenance-software .vedaUseCases>div {
display: flex;
}
.building-material-manufacturing-maintenance-software .vedaConversationHead {
padding: 16px 13px;
}
.building-material-manufacturing-maintenance-software .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.building-material-manufacturing-maintenance-software .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.building-material-manufacturing-maintenance-software .vedaMessage.user {
margin-left: 25px;
}
.building-material-manufacturing-maintenance-software .vedaMessage.assistant {
margin-right: 14px;
}
.building-material-manufacturing-maintenance-software .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .manufacturingSpotlight {
padding: 54px 0;
}
.building-material-manufacturing-maintenance-software .spotlightHead h2 {
font-size: 32px;
}
.building-material-manufacturing-maintenance-software .spotlightHead>p {
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.building-material-manufacturing-maintenance-software .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.building-material-manufacturing-maintenance-software .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.building-material-manufacturing-maintenance-software .featurePanel h3 {
font-size: 24px;
}
.building-material-manufacturing-maintenance-software .featurePanel>p {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.building-material-manufacturing-maintenance-software .spotlightChecks>li {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.building-material-manufacturing-maintenance-software .spotlightActions .button {
width: 100%;
}
.building-material-manufacturing-maintenance-software .spotlightScope {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mediaTitle strong {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .mediaTitle div>span {
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .mediaTitle>.icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.building-material-manufacturing-maintenance-software .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.building-material-manufacturing-maintenance-software .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.building-material-manufacturing-maintenance-software .rfidMedia figcaption {
padding-top: 12px;
}
.building-material-manufacturing-maintenance-software .aiReviewBody {
padding: 13px;
}
.building-material-manufacturing-maintenance-software .aiIssue {
padding: 13px;
}
.building-material-manufacturing-maintenance-software .aiIssue strong {
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .aiEvidence {
gap: 6px;
}
.building-material-manufacturing-maintenance-software .aiEvidence>div {
padding: 10px 7px;
}
.building-material-manufacturing-maintenance-software .aiEvidence strong {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .aiEvidence span {
font-size: 7px;
}
.building-material-manufacturing-maintenance-software .exampleLabel {
font-size: 6px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflows {
padding: 55px 0;
}
.building-material-manufacturing-maintenance-software .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.building-material-manufacturing-maintenance-software .industryRibbonGrid {
gap: 12px;
}
.building-material-manufacturing-maintenance-software .industryRibbonGrid>div {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .spotlightHead h2 {
font-size: 29px;
}
.building-material-manufacturing-maintenance-software .featureStage {
padding: 19px 13px;
}
.building-material-manufacturing-maintenance-software .mediaTitle>.icon2 {
display: none;
}
.building-material-manufacturing-maintenance-software .exampleLabel {
display: none;
}
.building-material-manufacturing-maintenance-software .vedaBrand {
font-size: 27px;
}
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-1:checked~.featureTabs label[for="bm-predictive-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-1:focus-visible~.featureTabs label[for="bm-predictive-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-2:checked~.featureTabs label[for="bm-predictive-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-2:focus-visible~.featureTabs label[for="bm-predictive-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-3:checked~.featureTabs label[for="bm-predictive-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-3:focus-visible~.featureTabs label[for="bm-predictive-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-4:checked~.featureTabs label[for="bm-predictive-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-4:focus-visible~.featureTabs label[for="bm-predictive-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-5:checked~.featureTabs label[for="bm-predictive-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-5:focus-visible~.featureTabs label[for="bm-predictive-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-1:checked~.featureTabs label[for="bm-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-1:focus-visible~.featureTabs label[for="bm-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-2:checked~.featureTabs label[for="bm-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-2:focus-visible~.featureTabs label[for="bm-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-3:checked~.featureTabs label[for="bm-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-3:focus-visible~.featureTabs label[for="bm-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-4:checked~.featureTabs label[for="bm-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-4:focus-visible~.featureTabs label[for="bm-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-5:checked~.featureTabs label[for="bm-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-5:focus-visible~.featureTabs label[for="bm-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-1:checked~.featureTabs label[for="bm-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-1:focus-visible~.featureTabs label[for="bm-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-2:checked~.featureTabs label[for="bm-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-2:focus-visible~.featureTabs label[for="bm-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-3:checked~.featureTabs label[for="bm-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-3:focus-visible~.featureTabs label[for="bm-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-4:checked~.featureTabs label[for="bm-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-4:focus-visible~.featureTabs label[for="bm-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-5:checked~.featureTabs label[for="bm-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-5:focus-visible~.featureTabs label[for="bm-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.building-material-manufacturing-maintenance-software .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .featureMediaPanels {
min-width: 0;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .miniChart {
height: 178px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .windowTop strong,
.building-material-manufacturing-maintenance-software .featureMediaPanels .windowTop small {
display: block;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .windowBody>*,
.building-material-manufacturing-maintenance-software .featureMediaPanels .spectrumGrid>*,
.building-material-manufacturing-maintenance-software .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes {
min-height: 258px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .mapPin {
box-shadow: none;
}
.building-material-manufacturing-maintenance-software .pin2 {
top: 88px;
right: 88px;
}
.building-material-manufacturing-maintenance-software .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.building-material-manufacturing-maintenance-software .featureMediaPanels .mediaShell {
padding: 10px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .windowBody {
padding: 10px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .alertBadge {
justify-self: start;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes .node.n1,
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes .node.n2,
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.building-material-manufacturing-maintenance-software .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.building-material-manufacturing-maintenance-software .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.building-material-manufacturing-maintenance-software .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.building-material-manufacturing-maintenance-software .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.building-material-manufacturing-maintenance-software .freshGraphic * {
box-sizing: border-box;
}
.building-material-manufacturing-maintenance-software .rfPanel,
.building-material-manufacturing-maintenance-software .aiInsightCard,
.building-material-manufacturing-maintenance-software .forecastVisualCard,
.building-material-manufacturing-maintenance-software .forecastSuggestion,
.building-material-manufacturing-maintenance-software .knowledgeTile,
.building-material-manufacturing-maintenance-software .chatConversation,
.building-material-manufacturing-maintenance-software .trainingSummary,
.building-material-manufacturing-maintenance-software .moduleCard,
.building-material-manufacturing-maintenance-software .qualityHeatCard,
.building-material-manufacturing-maintenance-software .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.building-material-manufacturing-maintenance-software .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.building-material-manufacturing-maintenance-software .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.building-material-manufacturing-maintenance-software .statusPill,
.building-material-manufacturing-maintenance-software .cardTag,
.building-material-manufacturing-maintenance-software .forecastSuggestion b,
.building-material-manufacturing-maintenance-software .moduleCard b,
.building-material-manufacturing-maintenance-software .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.building-material-manufacturing-maintenance-software .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.building-material-manufacturing-maintenance-software .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.building-material-manufacturing-maintenance-software .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.building-material-manufacturing-maintenance-software .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.building-material-manufacturing-maintenance-software .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.building-material-manufacturing-maintenance-software .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.building-material-manufacturing-maintenance-software .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.building-material-manufacturing-maintenance-software .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.building-material-manufacturing-maintenance-software .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.building-material-manufacturing-maintenance-software .dot.good {
background: #298EEC;
}
.building-material-manufacturing-maintenance-software .dot.warn {
background: #F4A62A;
}
.building-material-manufacturing-maintenance-software .dot.bad {
background: #EB6B53;
}
.building-material-manufacturing-maintenance-software .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.building-material-manufacturing-maintenance-software .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.building-material-manufacturing-maintenance-software .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.building-material-manufacturing-maintenance-software .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.building-material-manufacturing-maintenance-software .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.building-material-manufacturing-maintenance-software .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.building-material-manufacturing-maintenance-software .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.building-material-manufacturing-maintenance-software .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.building-material-manufacturing-maintenance-software .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.building-material-manufacturing-maintenance-software .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.building-material-manufacturing-maintenance-software .moveRow b {
color: #298EEC;
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.building-material-manufacturing-maintenance-software .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.building-material-manufacturing-maintenance-software .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.building-material-manufacturing-maintenance-software .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.building-material-manufacturing-maintenance-software .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.building-material-manufacturing-maintenance-software .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.building-material-manufacturing-maintenance-software .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.building-material-manufacturing-maintenance-software .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.building-material-manufacturing-maintenance-software .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.building-material-manufacturing-maintenance-software .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.building-material-manufacturing-maintenance-software .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.building-material-manufacturing-maintenance-software .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.building-material-manufacturing-maintenance-software .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.building-material-manufacturing-maintenance-software .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.building-material-manufacturing-maintenance-software .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.building-material-manufacturing-maintenance-software .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.building-material-manufacturing-maintenance-software .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.building-material-manufacturing-maintenance-software .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.building-material-manufacturing-maintenance-software .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.building-material-manufacturing-maintenance-software .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.building-material-manufacturing-maintenance-software .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.building-material-manufacturing-maintenance-software .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.building-material-manufacturing-maintenance-software .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.building-material-manufacturing-maintenance-software .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.building-material-manufacturing-maintenance-software .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.building-material-manufacturing-maintenance-software .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.building-material-manufacturing-maintenance-software .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.building-material-manufacturing-maintenance-software .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.building-material-manufacturing-maintenance-software .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.building-material-manufacturing-maintenance-software .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.building-material-manufacturing-maintenance-software .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.building-material-manufacturing-maintenance-software .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.building-material-manufacturing-maintenance-software .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.building-material-manufacturing-maintenance-software .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.building-material-manufacturing-maintenance-software .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.building-material-manufacturing-maintenance-software .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.building-material-manufacturing-maintenance-software .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.building-material-manufacturing-maintenance-software .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.building-material-manufacturing-maintenance-software .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.building-material-manufacturing-maintenance-software .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.building-material-manufacturing-maintenance-software .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.building-material-manufacturing-maintenance-software .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.building-material-manufacturing-maintenance-software .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.building-material-manufacturing-maintenance-software .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.building-material-manufacturing-maintenance-software .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.building-material-manufacturing-maintenance-software .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.building-material-manufacturing-maintenance-software .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.building-material-manufacturing-maintenance-software .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.building-material-manufacturing-maintenance-software .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.building-material-manufacturing-maintenance-software .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.building-material-manufacturing-maintenance-software .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.building-material-manufacturing-maintenance-software .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.building-material-manufacturing-maintenance-software .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.building-material-manufacturing-maintenance-software .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.building-material-manufacturing-maintenance-software .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.building-material-manufacturing-maintenance-software .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.building-material-manufacturing-maintenance-software .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.building-material-manufacturing-maintenance-software .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.building-material-manufacturing-maintenance-software .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.building-material-manufacturing-maintenance-software .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.building-material-manufacturing-maintenance-software .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.building-material-manufacturing-maintenance-software .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.building-material-manufacturing-maintenance-software .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.building-material-manufacturing-maintenance-software .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.building-material-manufacturing-maintenance-software .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.building-material-manufacturing-maintenance-software .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.building-material-manufacturing-maintenance-software .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.building-material-manufacturing-maintenance-software .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.building-material-manufacturing-maintenance-software .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.building-material-manufacturing-maintenance-software .chartLegend .sw.blue {
background: #298EEC;
}
.building-material-manufacturing-maintenance-software .chartLegend .sw.amber {
background: #F4A62A;
}
.building-material-manufacturing-maintenance-software .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.building-material-manufacturing-maintenance-software .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.building-material-manufacturing-maintenance-software .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.building-material-manufacturing-maintenance-software .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.building-material-manufacturing-maintenance-software .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.building-material-manufacturing-maintenance-software .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.building-material-manufacturing-maintenance-software .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.building-material-manufacturing-maintenance-software .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.building-material-manufacturing-maintenance-software .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.building-material-manufacturing-maintenance-software .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.building-material-manufacturing-maintenance-software .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.building-material-manufacturing-maintenance-software .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.building-material-manufacturing-maintenance-software .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.building-material-manufacturing-maintenance-software .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.building-material-manufacturing-maintenance-software .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.building-material-manufacturing-maintenance-software .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.building-material-manufacturing-maintenance-software .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.building-material-manufacturing-maintenance-software .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.building-material-manufacturing-maintenance-software .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.building-material-manufacturing-maintenance-software .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.building-material-manufacturing-maintenance-software .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.building-material-manufacturing-maintenance-software .freshGraphic {
height: auto;
min-height: 420px;
}
.building-material-manufacturing-maintenance-software .rfTrackLayout,
.building-material-manufacturing-maintenance-software .rfFlowLayout,
.building-material-manufacturing-maintenance-software .rfAlertGrid,
.building-material-manufacturing-maintenance-software .rfCycleLayout,
.building-material-manufacturing-maintenance-software .rfSitesLayout,
.building-material-manufacturing-maintenance-software .aiRootLayout,
.building-material-manufacturing-maintenance-software .aiForecastLayout,
.building-material-manufacturing-maintenance-software .aiChatLayout,
.building-material-manufacturing-maintenance-software .aiTrainingLayout,
.building-material-manufacturing-maintenance-software .aiQualityLayout,
.building-material-manufacturing-maintenance-software .trainingModuleGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.building-material-manufacturing-maintenance-software .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.building-material-manufacturing-maintenance-software .rfAlertGrid {
grid-template-columns: 1fr;
}
.building-material-manufacturing-maintenance-software .qualityHeatGrid span {
min-height: 40px;
}
.building-material-manufacturing-maintenance-software .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.building-material-manufacturing-maintenance-software .aiLink {
display: none;
}
}
.building-material-manufacturing-maintenance-software .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 50%;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(11, 11, 11, 0.96) 0%,
rgba(11, 11, 11, 0.86) 22%,
rgba(11, 11, 11, 0.68) 34%,
rgba(11, 11, 11, 0.34) 44%,
rgba(11, 11, 11, 0.08) 54%,
rgba(11, 11, 11, 0) 64%);
}
.building-material-manufacturing-maintenance-software .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.building-material-manufacturing-maintenance-software .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.building-material-manufacturing-maintenance-software .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .mfgHeroBreadcrumb a {
color: inherit;
}
.building-material-manufacturing-maintenance-software .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.building-material-manufacturing-maintenance-software .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.building-material-manufacturing-maintenance-software .mfgHero h1 {
color: #fff;
}
.building-material-manufacturing-maintenance-software .mfgHero h1>span {
display: block;
color: #fff;
}
.building-material-manufacturing-maintenance-software .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
.building-material-manufacturing-maintenance-software .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.building-material-manufacturing-maintenance-software .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.building-material-manufacturing-maintenance-software .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.building-material-manufacturing-maintenance-software .mfgHeroActions .outline:hover {
background: #172029;
}
.building-material-manufacturing-maintenance-software .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.building-material-manufacturing-maintenance-software .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media(min-width:1800px) {
.building-material-manufacturing-maintenance-software .mfgHeroContent {
min-height: 700px;
}
}
@media(max-width:1180px) and (min-width:901px) {
.building-material-manufacturing-maintenance-software .mfgHeroContent {
min-height: 610px;
}
.building-material-manufacturing-maintenance-software .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.building-material-manufacturing-maintenance-software .mfgHeroLead {
font-size: 16px;
}
.building-material-manufacturing-maintenance-software .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene img {
object-position: 62% 50%;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .97) 0%, rgba(11, 11, 11, .88) 28%, rgba(11, 11, 11, .72) 42%, rgba(11, 11, 11, .48) 51%, rgba(11, 11, 11, .12) 63%, rgba(11, 11, 11, 0) 76%);
}
}
@media(max-width:900px) {
.building-material-manufacturing-maintenance-software .mfgHero {
display: flex;
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .mfgHeroContent {
order: 0;
min-height: 0;
}
.building-material-manufacturing-maintenance-software .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene img {
object-fit: cover;
object-position: 85% 45%;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 7%, rgba(11, 11, 11, .15) 24%, rgba(11, 11, 11, 0) 45%);
}
.building-material-manufacturing-maintenance-software .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.building-material-manufacturing-maintenance-software .mfgHeroLead {
max-width: 620px;
}
}
@media(max-width:600px) {
.building-material-manufacturing-maintenance-software .mfgHeroCopy {
padding: 25px 0 20px;
}
.building-material-manufacturing-maintenance-software .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.building-material-manufacturing-maintenance-software .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.building-material-manufacturing-maintenance-software .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.building-material-manufacturing-maintenance-software .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.building-material-manufacturing-maintenance-software .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.building-material-manufacturing-maintenance-software .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene {
height: 280px;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene img {
object-position: 86% 50%;
}
}
.building-material-manufacturing-maintenance-software #bm-rfid .featureStage,
.building-material-manufacturing-maintenance-software #bm-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.building-material-manufacturing-maintenance-software .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.building-material-manufacturing-maintenance-software .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfPanel {
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .shelf span {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfKpiGrid {
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfScanCard span {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowArrow {
display: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .railItem {
padding: 9px 7px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .railItem b {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard strong {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .varianceCard {
padding: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .mfgGallery .varianceCard small {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceTop {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceMetric {
padding: 9px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceMetric span {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceMetric b {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode.north {
top: 6px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode.south {
bottom: 6px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteSummary strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.building-material-manufacturing-maintenance-software .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.building-material-manufacturing-maintenance-software .mfgGallery .insightMeta {
gap: 6px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .chartHeader span {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .chartHeader b {
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .chartLegend {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.building-material-manufacturing-maintenance-software .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.building-material-manufacturing-maintenance-software .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .progressCenter strong {
font-size: 25px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingStatList {
gap: 9px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingStatList span {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.building-material-manufacturing-maintenance-software .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityCaption span {
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media(max-width:1100px) {
.building-material-manufacturing-maintenance-software #bm-rfid .featureStage,
.building-material-manufacturing-maintenance-software #bm-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.building-material-manufacturing-maintenance-software #bm-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media(max-width:600px) {
.building-material-manufacturing-maintenance-software #bm-rfid .featureStage,
.building-material-manufacturing-maintenance-software #bm-ai-decisions .featureStage {
padding: 16px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshWindow {
height: auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .freshTop strong {
font-size: 13px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfShelfPanel {
padding: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowNum {
grid-row: 1/3;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.building-material-manufacturing-maintenance-software .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfActionStrip {
height: auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .countPanel {
gap: 14px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .handheldPanel {
padding: 15px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode.east {
right: 3%;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode.west {
left: 3%;
}
.building-material-manufacturing-maintenance-software .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.building-material-manufacturing-maintenance-software .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.building-material-manufacturing-maintenance-software .mfgGallery .moduleCard {
padding: 10px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityAction strong {
font-size: 12px;
}
.building-material-manufacturing-maintenance-software .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.building-material-manufacturing-maintenance-software .mfgGallery .shelf i::after {
bottom: 0;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene img {
object-position: 62% 56%;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99) 0%, rgba(11, 11, 11, .96) 22%, rgba(11, 11, 11, .89) 34%, rgba(11, 11, 11, .77) 42%, rgba(11, 11, 11, .48) 51%, rgba(11, 11, 11, .14) 62%, rgba(11, 11, 11, 0) 74%);
}
.building-material-manufacturing-maintenance-software .bmVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.building-material-manufacturing-maintenance-software .bmGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.building-material-manufacturing-maintenance-software .bmIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.building-material-manufacturing-maintenance-software .bmStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.building-material-manufacturing-maintenance-software .bmVisualGallery>.bmGraphic {
display: none;
}
.building-material-manufacturing-maintenance-software #bm-predictive .featureStage,
.building-material-manufacturing-maintenance-software #bm-rfid .featureStage,
.building-material-manufacturing-maintenance-software #bm-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.building-material-manufacturing-maintenance-software #bm-rfid .bmVisualGallery {
grid-column: 1;
grid-row: 1;
}
.building-material-manufacturing-maintenance-software #bm-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.building-material-manufacturing-maintenance-software .factoryWorkflow {
display: flex;
flex-direction: column;
}
.building-material-manufacturing-maintenance-software .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.building-material-manufacturing-maintenance-software .factoryWorkflow>p {
margin-bottom: 22px;
}
.building-material-manufacturing-maintenance-software .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media(max-width:1180px) and (min-width:901px) {
.building-material-manufacturing-maintenance-software .mfgHeroScene img {
object-position: 69% 54%;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .92) 35%, rgba(11, 11, 11, .74) 48%, rgba(11, 11, 11, .22) 64%, rgba(11, 11, 11, 0) 79%);
}
}
@media(max-width:1100px) {
.building-material-manufacturing-maintenance-software #bm-predictive .featureStage,
.building-material-manufacturing-maintenance-software #bm-rfid .featureStage,
.building-material-manufacturing-maintenance-software #bm-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.building-material-manufacturing-maintenance-software #bm-rfid .bmVisualGallery,
.building-material-manufacturing-maintenance-software #bm-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media(max-width:900px) {
.building-material-manufacturing-maintenance-software .mfgHeroScene img {
object-position: 64% 52%;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b, rgba(11, 11, 11, .66) 8%, rgba(11, 11, 11, .1) 26%, rgba(11, 11, 11, 0) 43%);
}
}
@media(max-width:600px) {
.building-material-manufacturing-maintenance-software .mfgHeroScene {
height: 290px;
}
.building-material-manufacturing-maintenance-software .mfgHeroScene img {
object-position: 64% 52%;
}
.building-material-manufacturing-maintenance-software #bm-predictive .featureStage,
.building-material-manufacturing-maintenance-software #bm-rfid .featureStage,
.building-material-manufacturing-maintenance-software #bm-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.building-material-manufacturing-maintenance-software .bmVisualGallery {
width: 100%;
}
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-1:checked~.featureStage .bmVisualGallery> :nth-child(1) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-2:checked~.featureStage .bmVisualGallery> :nth-child(2) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-3:checked~.featureStage .bmVisualGallery> :nth-child(3) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-4:checked~.featureStage .bmVisualGallery> :nth-child(4) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-predictive-features-5:checked~.featureStage .bmVisualGallery> :nth-child(5) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-1:checked~.featureStage .bmVisualGallery> :nth-child(1) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-2:checked~.featureStage .bmVisualGallery> :nth-child(2) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-3:checked~.featureStage .bmVisualGallery> :nth-child(3) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-4:checked~.featureStage .bmVisualGallery> :nth-child(4) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-rfid-features-5:checked~.featureStage .bmVisualGallery> :nth-child(5) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-1:checked~.featureStage .bmVisualGallery> :nth-child(1) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-2:checked~.featureStage .bmVisualGallery> :nth-child(2) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-3:checked~.featureStage .bmVisualGallery> :nth-child(3) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-4:checked~.featureStage .bmVisualGallery> :nth-child(4) {
display: block;
}
.building-material-manufacturing-maintenance-software #bm-ai-decisions-features-5:checked~.featureStage .bmVisualGallery> :nth-child(5) {
display: block;
}  #dreamz-food-beverage .industryIntroHead.compact,
#dreamz-food-beverage .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-food-beverage .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-food-beverage .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-food-beverage .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-food-beverage .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-food-beverage .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-food-beverage .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-food-beverage .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-food-beverage .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-food-beverage .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-food-beverage .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-food-beverage .windowDots {
display: flex;
gap: 5px;
}
#dreamz-food-beverage .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-food-beverage .windowBody {
padding: 16px;
}
#dreamz-food-beverage .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-food-beverage .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-food-beverage .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-food-beverage .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-food-beverage .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-food-beverage .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-food-beverage .chartGridLine.l1 {
top: 34px;
}
#dreamz-food-beverage .chartGridLine.l2 {
top: 65px;
}
#dreamz-food-beverage .chartGridLine.l3 {
top: 96px;
}
#dreamz-food-beverage .chartGridLine.l4 {
top: 127px;
}
#dreamz-food-beverage .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-food-beverage .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-food-beverage .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-food-beverage .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-food-beverage .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-food-beverage .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-food-beverage .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-food-beverage .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-food-beverage .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-food-beverage .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-food-beverage .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-food-beverage .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-food-beverage .noteCard p,
#dreamz-food-beverage .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-food-beverage .alertStack {
display: grid;
gap: 10px;
}
#dreamz-food-beverage .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-food-beverage .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-food-beverage .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-food-beverage .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-food-beverage .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-food-beverage .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-food-beverage .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-food-beverage .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-food-beverage .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-food-beverage .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-food-beverage .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-food-beverage .scheduleBoard h4,
#dreamz-food-beverage .todoBoard h4,
#dreamz-food-beverage .siteBoard h4,
#dreamz-food-beverage .chatPanel h4,
#dreamz-food-beverage .lessonPanel h4,
#dreamz-food-beverage .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-food-beverage .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-food-beverage .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-food-beverage .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-food-beverage .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-food-beverage .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-food-beverage .taskRow:last-child {
border-bottom: 0;
}
#dreamz-food-beverage .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-food-beverage .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-food-beverage .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-food-beverage .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-food-beverage .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-food-beverage .inventoryTable th,
#dreamz-food-beverage .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-food-beverage .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-food-beverage .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-food-beverage .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-food-beverage .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-food-beverage .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-food-beverage .phoneBody {
padding: 12px;
}
#dreamz-food-beverage .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-food-beverage .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-food-beverage .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-food-beverage .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-food-beverage .progressList {
display: grid;
gap: 10px;
}
#dreamz-food-beverage .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-food-beverage .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-food-beverage .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-food-beverage .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-food-beverage .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-food-beverage .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-food-beverage .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-food-beverage .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-food-beverage .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-food-beverage .pin1 {
top: 56px;
left: 58px;
}
#dreamz-food-beverage .pin2 {
top: 88px;
right: 88px;
}
#dreamz-food-beverage .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-food-beverage .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-food-beverage .siteRow:last-child {
border-bottom: 0;
}
#dreamz-food-beverage .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-food-beverage .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-food-beverage .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-food-beverage .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-food-beverage .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-food-beverage .graphNodes:before,
#dreamz-food-beverage .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-food-beverage .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-food-beverage .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-food-beverage .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-food-beverage .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-food-beverage .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-food-beverage .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-food-beverage .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-food-beverage .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-food-beverage .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-food-beverage .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-food-beverage .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-food-beverage .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-food-beverage .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-food-beverage .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-food-beverage .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-food-beverage .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-food-beverage .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-food-beverage .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-food-beverage .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-food-beverage .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-food-beverage .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-food-beverage .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-food-beverage .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-food-beverage .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-food-beverage .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-food-beverage .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-food-beverage .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-food-beverage .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-food-beverage .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-food-beverage .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-food-beverage .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-food-beverage .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-food-beverage .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-food-beverage #fb-predictive-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-food-beverage #fb-predictive-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-food-beverage #fb-predictive-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-food-beverage #fb-predictive-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-food-beverage #fb-predictive-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-food-beverage #fb-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-food-beverage #fb-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-food-beverage #fb-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-food-beverage #fb-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-food-beverage #fb-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-food-beverage #fb-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-food-beverage #fb-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-food-beverage #fb-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-food-beverage #fb-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-food-beverage #fb-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-food-beverage #fb-predictive-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-food-beverage #fb-predictive-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-food-beverage #fb-predictive-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-food-beverage #fb-predictive-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-food-beverage #fb-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-food-beverage #fb-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-food-beverage #fb-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-food-beverage #fb-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-food-beverage #fb-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-food-beverage #fb-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-food-beverage #fb-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-food-beverage #fb-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-food-beverage #fb-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-food-beverage #fb-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-food-beverage .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-food-beverage .featureMediaPanels {
min-height: 0;
}
#dreamz-food-beverage .inventorySplit,
#dreamz-food-beverage .forecastGrid,
#dreamz-food-beverage .siteGrid,
#dreamz-food-beverage .spectrumGrid,
#dreamz-food-beverage .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-food-beverage .metricGrid,
#dreamz-food-beverage .lessonCards,
#dreamz-food-beverage .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-food-beverage .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-food-beverage {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-food-beverage * {
box-sizing: border-box;
}
#dreamz-food-beverage {
scroll-behavior: smooth;
}
#dreamz-food-beverage {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-food-beverage a {
color: inherit;
text-decoration: none;
}
#dreamz-food-beverage .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-food-beverage .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-food-beverage .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-food-beverage .brand span {
color: var(--brand);
}
#dreamz-food-beverage .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-food-beverage .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-food-beverage .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-food-beverage .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-food-beverage .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-food-beverage .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-food-beverage .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-food-beverage .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-food-beverage h1,
#dreamz-food-beverage h2,
#dreamz-food-beverage h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
#dreamz-food-beverage h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
#dreamz-food-beverage h2 {
font-size: clamp(32px, 4.3vw, 50px);
}
#dreamz-food-beverage h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-food-beverage .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-food-beverage .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-food-beverage .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-food-beverage .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-food-beverage .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-food-beverage .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-food-beverage .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-food-beverage .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-food-beverage .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-food-beverage .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-food-beverage .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-food-beverage .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-food-beverage .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-food-beverage .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-food-beverage .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-food-beverage .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-food-beverage .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-food-beverage .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-food-beverage .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-food-beverage .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-food-beverage .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-food-beverage .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-food-beverage .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-food-beverage .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-food-beverage .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-food-beverage .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}  #dreamz-food-beverage .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-food-beverage .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-food-beverage .aiJourney h2 {
color: #fff;
}
#dreamz-food-beverage .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-food-beverage .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-food-beverage .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-food-beverage .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-food-beverage .aiStep:last-child::after {
display: none;
}
#dreamz-food-beverage .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-food-beverage .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-food-beverage .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-food-beverage .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-food-beverage .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-food-beverage .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-food-beverage .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-food-beverage .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-food-beverage .capability {
background: #fff;
}
#dreamz-food-beverage .capability.alt {
background: var(--sky-2);
}
#dreamz-food-beverage .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-food-beverage .twoCol.reverse .visual {
order: 2;
}
#dreamz-food-beverage .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-food-beverage .visual .placeholder {
min-height: 355px;
}
#dreamz-food-beverage .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-food-beverage .featureList.primaryOnly .featureItem:nth-child(n +5) {
display: none;
}
#dreamz-food-beverage details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-food-beverage details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-food-beverage details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-food-beverage details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-food-beverage details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-food-beverage details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-food-beverage .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-food-beverage .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-food-beverage .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-food-beverage .darkSection h2,
#dreamz-food-beverage .darkSection h3 {
color: #fff;
}
#dreamz-food-beverage .darkSection .sectionHead p,
#dreamz-food-beverage .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-food-beverage .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-food-beverage .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-food-beverage .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-food-beverage .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-food-beverage .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-food-beverage .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-food-beverage .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-food-beverage .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-food-beverage .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-food-beverage .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-food-beverage .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-food-beverage .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-food-beverage .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-food-beverage .benefitBand h2 {
color: #fff;
}
#dreamz-food-beverage .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-food-beverage .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-food-beverage .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-food-beverage .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-food-beverage .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-food-beverage .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-food-beverage .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-food-beverage .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-food-beverage .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-food-beverage .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-food-beverage .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-food-beverage .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-food-beverage .faq {
max-width: 900px;
}
#dreamz-food-beverage .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-food-beverage .ctaPanel h2 {
color: #fff;
}
#dreamz-food-beverage .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-food-beverage .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-food-beverage .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-food-beverage .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-food-beverage .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-food-beverage .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-food-beverage .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-food-beverage .inlineCta.dark h3 {
color: #fff;
}
#dreamz-food-beverage .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-food-beverage .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-food-beverage .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-food-beverage .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-food-beverage .button.yellow:hover {
background: #FFD84D;
}
#dreamz-food-beverage .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-food-beverage .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-food-beverage .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-food-beverage .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-food-beverage footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-food-beverage .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-food-beverage .heroGrid,
#dreamz-food-beverage .twoCol,
#dreamz-food-beverage .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .twoCol.reverse .visual {
order: initial;
}
#dreamz-food-beverage .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-food-beverage .ratingGrid,
#dreamz-food-beverage .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-food-beverage .ratingLead,
#dreamz-food-beverage .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-food-beverage .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-food-beverage .aiStep:nth-child(3)::after,
#dreamz-food-beverage .aiStep:last-child::after {
display: none;
}
#dreamz-food-beverage .outcomeGrid,
#dreamz-food-beverage .challengeGrid,
#dreamz-food-beverage .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-food-beverage .cards,
#dreamz-food-beverage .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-food-beverage .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-food-beverage .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-food-beverage .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-food-beverage .hero {
padding: 58px 0 52px;
}
#dreamz-food-beverage section {
padding: 64px 0;
}
#dreamz-food-beverage h1 {
font-size: 44px;
}
#dreamz-food-beverage .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .aiStep::after {
display: none;
}
#dreamz-food-beverage .logoRow,
#dreamz-food-beverage .ratingGrid,
#dreamz-food-beverage .awardGrid,
#dreamz-food-beverage .outcomeGrid,
#dreamz-food-beverage .challengeGrid,
#dreamz-food-beverage .benefitGrid,
#dreamz-food-beverage .cards,
#dreamz-food-beverage .proofCards,
#dreamz-food-beverage .integrationGrid,
#dreamz-food-beverage .featureList {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-food-beverage .ctaPanel {
padding: 34px 24px;
}
#dreamz-food-beverage .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-food-beverage .inlineCtaActions {
width: 100%;
}
#dreamz-food-beverage .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-food-beverage {
--muted: #526A7C;
--shadow: none;
}
#dreamz-food-beverage {
background: var(--sky-2);
}
#dreamz-food-beverage p {
margin-bottom: 0;
}
#dreamz-food-beverage [id] {
scroll-margin-top: 94px;
}
#dreamz-food-beverage svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-food-beverage .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-food-beverage .darkSection h2,
#dreamz-food-beverage .darkSection h3,
#dreamz-food-beverage .aiJourney h2,
#dreamz-food-beverage .benefitBand h2,
#dreamz-food-beverage .ctaPanel h2,
#dreamz-food-beverage .inlineCta.dark h3 {
color: #fff;
}
#dreamz-food-beverage .wrap>*,
#dreamz-food-beverage .heroGrid>*,
#dreamz-food-beverage .twoCol>*,
#dreamz-food-beverage .ctaPanel>* {
min-width: 0;
}
#dreamz-food-beverage .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-food-beverage .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-food-beverage .skipLink:focus {
transform: none;
}
#dreamz-food-beverage a:focus-visible,
#dreamz-food-beverage summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-food-beverage .darkSection a:focus-visible,
#dreamz-food-beverage .darkSection summary:focus-visible,
#dreamz-food-beverage .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-food-beverage .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-food-beverage .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-food-beverage .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-food-beverage .brandName>span {
color: var(--brand-dark);
}
#dreamz-food-beverage .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-food-beverage .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-food-beverage .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-food-beverage .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-food-beverage .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-food-beverage .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-food-beverage .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-food-beverage .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-food-beverage .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-food-beverage .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-food-beverage .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-food-beverage .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-food-beverage .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-food-beverage .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-food-beverage .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-food-beverage .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-food-beverage .clientBand {
padding: 27px 0;
}
#dreamz-food-beverage .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-food-beverage .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-food-beverage .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-food-beverage .logoBox.wide {
font-size: 12px;
}
#dreamz-food-beverage .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-food-beverage section {
padding: 80px 0;
}
#dreamz-food-beverage h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-food-beverage .sectionHead {
margin-bottom: 36px;
}
#dreamz-food-beverage .eyebrow {
line-height: 1.5;
}
#dreamz-food-beverage .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-food-beverage .aiStep {
min-height: 162px;
}
#dreamz-food-beverage .aiStep strong {
line-height: 1.35;
}
#dreamz-food-beverage .aiStep span {
line-height: 1.65;
}
#dreamz-food-beverage .aiCallout {
margin-top: 24px;
}
#dreamz-food-beverage .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-food-beverage .outcome>.icon {
color: var(--navy);
}
#dreamz-food-beverage .awardBand {
padding: 42px 0;
}
#dreamz-food-beverage .awardBand .sectionHead {
margin-bottom: 26px;
margin-left: 0;
}
#dreamz-food-beverage .awardBand .sectionHead h2 {
font-size: 36px;
}
#dreamz-food-beverage .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-food-beverage .awardItem>.icon {
color: var(--navy);
}
#dreamz-food-beverage .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-food-beverage .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-food-beverage .twoCol.reverse .visual {
order: -1;
}
#dreamz-food-beverage .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-food-beverage .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-food-beverage .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-food-beverage .featureList {
gap: 13px 18px;
}
#dreamz-food-beverage .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-food-beverage .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-food-beverage .check .icon {
width: 14px;
height: 14px;
}
#dreamz-food-beverage details.capabilityMore {
margin-bottom: 0;
}
#dreamz-food-beverage .capabilityMore summary {
min-height: 34px;
}
#dreamz-food-beverage .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-food-beverage .textCta {
font-size: 14px;
}
#dreamz-food-beverage .visual {
min-width: 0;
}
#dreamz-food-beverage .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-food-beverage .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-food-beverage .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-food-beverage .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-food-beverage .panelBody {
padding: 20px;
}
#dreamz-food-beverage .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-food-beverage .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-food-beverage .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-food-beverage .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-food-beverage .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-food-beverage .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-food-beverage .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-food-beverage .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-food-beverage .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-food-beverage .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-food-beverage .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-food-beverage .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-food-beverage .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-food-beverage .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-food-beverage .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-food-beverage .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-food-beverage .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-food-beverage .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-food-beverage .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-food-beverage .dataRow:last-child {
border-bottom: 0;
}
#dreamz-food-beverage .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-food-beverage .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-food-beverage .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-food-beverage .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-food-beverage .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-food-beverage .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-food-beverage .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-food-beverage .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-food-beverage .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-food-beverage .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-food-beverage .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-food-beverage .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-food-beverage .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-food-beverage .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-food-beverage .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-food-beverage .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-food-beverage .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-food-beverage .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-food-beverage .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-food-beverage .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-food-beverage .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-food-beverage .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-food-beverage .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-food-beverage .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-food-beverage .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-food-beverage .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-food-beverage .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-food-beverage .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-food-beverage .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-food-beverage .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-food-beverage .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-food-beverage .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-food-beverage .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-food-beverage .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-food-beverage .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-food-beverage .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-food-beverage .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-food-beverage .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-food-beverage .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-food-beverage .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-food-beverage .promptList {
display: grid;
gap: 10px;
}
#dreamz-food-beverage .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-food-beverage .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-food-beverage .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-food-beverage .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-food-beverage .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-food-beverage .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-food-beverage .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-food-beverage .quoteTable th,
#dreamz-food-beverage .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-food-beverage .quoteTable td:first-child {
width: 64%;
}
#dreamz-food-beverage .quoteTable th:last-child,
#dreamz-food-beverage .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-food-beverage .quoteTable strong {
font-size: 11px;
}
#dreamz-food-beverage .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-food-beverage .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-food-beverage .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-food-beverage .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-food-beverage .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-food-beverage .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-food-beverage .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-food-beverage .orderJourney {
margin: 20px 0;
}
#dreamz-food-beverage .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-food-beverage .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-food-beverage .journeyRow:last-child:before {
display: none;
}
#dreamz-food-beverage .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-food-beverage .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-food-beverage .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-food-beverage .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-food-beverage .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-food-beverage .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-food-beverage .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-food-beverage .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-food-beverage .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-food-beverage .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-food-beverage .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-food-beverage .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-food-beverage .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-food-beverage .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-food-beverage .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-food-beverage .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-food-beverage .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-food-beverage .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-food-beverage .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-food-beverage .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-food-beverage .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-food-beverage .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-food-beverage .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-food-beverage .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-food-beverage .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-food-beverage .customerTimeline strong {
color: #fff;
}
#dreamz-food-beverage .customerTimeline small {
color: #BFBFBF;
}
#dreamz-food-beverage .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-food-beverage .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-food-beverage .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-food-beverage .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-food-beverage .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-food-beverage .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-food-beverage .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-food-beverage .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-food-beverage .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-food-beverage .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-food-beverage .chartTitle strong {
font-size: 12px;
}
#dreamz-food-beverage .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-food-beverage .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-food-beverage .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-food-beverage .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-food-beverage .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-food-beverage .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-food-beverage .inlineCtaActions {
max-width: 42%;
}
#dreamz-food-beverage .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-food-beverage .inlineCta h3 {
line-height: 1.35;
}
#dreamz-food-beverage .card {
box-shadow: none;
}
#dreamz-food-beverage .cardIcon {
box-shadow: none;
}
#dreamz-food-beverage .card h3 {
font-size: 22px;
}
#dreamz-food-beverage .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-food-beverage .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-food-beverage .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-food-beverage .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-food-beverage .ratingBand {
padding: 34px 0;
}
#dreamz-food-beverage .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-food-beverage .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-food-beverage .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-food-beverage .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-food-beverage .ratingItem:first-child {
border-left: 0;
}
#dreamz-food-beverage .proofCard h3 {
font-size: 23px;
}
#dreamz-food-beverage .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-food-beverage .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-food-beverage .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-food-beverage .integration {
min-height: 98px;
}
#dreamz-food-beverage .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-food-beverage .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-food-beverage .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-food-beverage .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-food-beverage .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-food-beverage .finalActions {
display: grid;
gap: 11px;
}
#dreamz-food-beverage .finalActions .button {
white-space: nowrap;
}
#dreamz-food-beverage .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-food-beverage .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-food-beverage .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-food-beverage .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-food-beverage .heroGrid {
gap: 30px;
}
#dreamz-food-beverage .twoCol {
gap: 32px;
}
#dreamz-food-beverage .panelBody {
padding: 16px;
}
#dreamz-food-beverage .panelHead {
padding: 16px;
}
#dreamz-food-beverage .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-food-beverage .pipelineColumns {
gap: 7px;
}
#dreamz-food-beverage .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-food-beverage .heroGrid,
#dreamz-food-beverage .twoCol,
#dreamz-food-beverage .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .heroGrid {
gap: 36px;
}
#dreamz-food-beverage .hero h1 {
max-width: 730px;
}
#dreamz-food-beverage .hero .lead {
max-width: 690px;
}
#dreamz-food-beverage .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-food-beverage .twoCol {
gap: 34px;
}
#dreamz-food-beverage .twoCol.reverse .visual {
order: initial;
}
#dreamz-food-beverage .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-food-beverage .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-food-beverage .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-food-beverage .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-food-beverage .ratingSectionGrid {
gap: 20px;
}
#dreamz-food-beverage .inlineCta {
align-items: flex-start;
}
#dreamz-food-beverage .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-food-beverage .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-food-beverage .card {
padding: 22px;
}
#dreamz-food-beverage .card h3 {
font-size: 21px;
}
#dreamz-food-beverage .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-food-beverage .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-food-beverage .cards,
#dreamz-food-beverage .proofCards {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-food-beverage .inlineCta {
flex-direction: column;
}
#dreamz-food-beverage .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-food-beverage .inlineCtaActions .button {
flex: 1;
}
#dreamz-food-beverage .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-food-beverage .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-food-beverage .wrap {
width: calc(100% - 32px);
}
#dreamz-food-beverage [id] {
scroll-margin-top: 82px;
}
#dreamz-food-beverage .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-food-beverage .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-food-beverage .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-food-beverage section {
padding: 60px 0;
}
#dreamz-food-beverage .hero {
padding: 51px 0 48px;
}
#dreamz-food-beverage .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-food-beverage .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-food-beverage .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-food-beverage .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-food-beverage .hero .microcopy {
font-size: 11px;
}
#dreamz-food-beverage .heroPills span {
font-size: 9px;
}
#dreamz-food-beverage .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-food-beverage .sectionHead p {
font-size: 16px;
}
#dreamz-food-beverage .copy h2 {
font-size: 34px;
}
#dreamz-food-beverage .copy p {
font-size: 15px;
}
#dreamz-food-beverage .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-food-beverage .logoBox {
min-height: 53px;
}
#dreamz-food-beverage .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-food-beverage .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-food-beverage .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-food-beverage .aiStep strong {
font-size: 13px;
}
#dreamz-food-beverage .aiStep span {
font-size: 11px;
}
#dreamz-food-beverage .aiStep::after {
display: none;
}
#dreamz-food-beverage .outcomeGrid,
#dreamz-food-beverage .challengeGrid,
#dreamz-food-beverage .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .outcome {
padding: 24px;
}
#dreamz-food-beverage .outcome strong {
font-size: 22px;
}
#dreamz-food-beverage .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-food-beverage .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-food-beverage .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-food-beverage .awardBand .sectionHead h2 {
font-size: 31px;
}
#dreamz-food-beverage .featureList,
#dreamz-food-beverage .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .featureItem {
font-size: 13px;
}
#dreamz-food-beverage .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-food-beverage .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-food-beverage .panelHead {
padding: 15px 13px;
}
#dreamz-food-beverage .panelHead>strong {
font-size: 12px;
}
#dreamz-food-beverage .panelBody {
padding: 14px;
}
#dreamz-food-beverage .productPanel {
border-radius: 16px;
}
#dreamz-food-beverage .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-food-beverage .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-food-beverage .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-food-beverage .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-food-beverage .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-food-beverage .deal strong {
font-size: 10px;
}
#dreamz-food-beverage .deal small {
font-size: 9px;
}
#dreamz-food-beverage .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-food-beverage .mobileWorkspace {
gap: 12px;
}
#dreamz-food-beverage .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-food-beverage .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-food-beverage .sideTile {
padding: 10px;
}
#dreamz-food-beverage .sideTile strong {
font-size: 10px;
}
#dreamz-food-beverage .sideTile p {
font-size: 9px;
}
#dreamz-food-beverage .mobileHeader strong {
font-size: 15px;
}
#dreamz-food-beverage .mobileAccount strong {
font-size: 10px;
}
#dreamz-food-beverage .mobileAccount small {
font-size: 7px;
}
#dreamz-food-beverage .phoneDevice .rowIcon {
display: none;
}
#dreamz-food-beverage .quoteTable th,
#dreamz-food-beverage .quoteTable td {
padding: 12px 4px;
}
#dreamz-food-beverage .quoteTable strong {
font-size: 10px;
}
#dreamz-food-beverage .quoteTable small {
font-size: 8px;
}
#dreamz-food-beverage .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-food-beverage .docHeader strong {
font-size: 17px;
}
#dreamz-food-beverage .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-food-beverage .miniFlow span {
padding: 6px;
}
#dreamz-food-beverage .rowCopy strong {
font-size: 10px;
}
#dreamz-food-beverage .rowCopy small {
font-size: 8px;
}
#dreamz-food-beverage .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-food-beverage .miniStats {
gap: 7px;
}
#dreamz-food-beverage .miniStats>div {
padding: 9px;
}
#dreamz-food-beverage .miniStats strong {
font-size: 18px;
}
#dreamz-food-beverage .miniStats span {
font-size: 8px;
}
#dreamz-food-beverage .collectionStats>div {
padding: 13px;
}
#dreamz-food-beverage .collectionStats strong {
font-size: 24px;
}
#dreamz-food-beverage .customerHeader strong {
font-size: 17px;
}
#dreamz-food-beverage .customerFacts>div {
padding: 10px;
}
#dreamz-food-beverage .customerFacts strong {
font-size: 12px;
}
#dreamz-food-beverage .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-food-beverage .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-food-beverage .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-food-beverage .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-food-beverage .integration small {
font-size: 9px;
}
#dreamz-food-beverage .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-food-beverage .ctaPanel p {
font-size: 15px;
}
#dreamz-food-beverage .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-food-beverage .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-food-beverage .contextSection {
padding: 0 0 24px;
}
#dreamz-food-beverage .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-food-beverage .wrap {
width: calc(100% - 24px);
}
#dreamz-food-beverage .brand {
font-size: 18px;
}
#dreamz-food-beverage .brandMark {
width: 25px;
height: 25px;
}
#dreamz-food-beverage .hero h1 {
font-size: 38px;
}
#dreamz-food-beverage .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-food-beverage .copy h2 {
font-size: 31px;
}
#dreamz-food-beverage .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .phoneDevice {
width: 210px;
}
#dreamz-food-beverage .phoneDevice .rowIcon {
display: grid;
}
#dreamz-food-beverage .mobileSide {
gap: 8px;
}
#dreamz-food-beverage .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-food-beverage .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-food-beverage .sideTile p {
margin: 0;
}
#dreamz-food-beverage .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-food-beverage .collectionStats strong {
font-size: 21px;
}
#dreamz-food-beverage .inventoryIntro strong {
font-size: 14px;
}
#dreamz-food-beverage .dataRow {
gap: 7px;
}
#dreamz-food-beverage .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-food-beverage .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-food-beverage {
scroll-behavior: auto;
}
#dreamz-food-beverage *,
#dreamz-food-beverage *::before,
#dreamz-food-beverage *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-food-beverage {
background: var(--sky-2);
}
#dreamz-food-beverage .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-food-beverage .hero .eyebrow {
max-width: 100%;
}
#dreamz-food-beverage .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-food-beverage .ganttIllustration,
#dreamz-food-beverage .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-food-beverage .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-food-beverage .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-food-beverage .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-food-beverage .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-food-beverage .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-food-beverage .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-food-beverage .comparisonTable th,
#dreamz-food-beverage .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .comparisonTable th:first-child {
width: 23%;
}
#dreamz-food-beverage .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-food-beverage .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-food-beverage .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-food-beverage .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-food-beverage .card,
#dreamz-food-beverage .proofCard,
#dreamz-food-beverage .productPanel,
#dreamz-food-beverage .outcome,
#dreamz-food-beverage .benefit {
box-shadow: none;
}
#dreamz-food-beverage .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-food-beverage .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-food-beverage .hero .eyebrow {
font-size: 10px;
}
#dreamz-food-beverage .comparisonTable {
font-size: 11px;
}
#dreamz-food-beverage .comparisonTable th,
#dreamz-food-beverage .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-food-beverage .comparisonTable th:first-child {
width: 24%;
}
#dreamz-food-beverage .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-food-beverage .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-food-beverage .hero h1 {
font-size: 38px;
}
}
#dreamz-food-beverage .scheduleIllustration,
#dreamz-food-beverage .analyticsIllustration,
#dreamz-food-beverage .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-food-beverage .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-food-beverage .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-food-beverage .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-food-beverage .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-food-beverage .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-food-beverage .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-food-beverage .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-food-beverage .darkSection .textCta {
color: var(--yellow);
}
#dreamz-food-beverage .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-food-beverage .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-food-beverage .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-food-beverage .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-food-beverage .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-food-beverage .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-food-beverage .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-food-beverage .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-food-beverage .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-food-beverage .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-food-beverage .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-food-beverage .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-food-beverage .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-food-beverage .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-food-beverage .phoneDevice {
max-width: 100%;
}
#dreamz-food-beverage .heroPills {
line-height: 1.55;
}
#dreamz-food-beverage .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-food-beverage .plantFacts {
gap: 7px;
}
#dreamz-food-beverage .plantFacts>div {
padding: 9px;
}
#dreamz-food-beverage .plantFacts strong {
font-size: 11px;
}
#dreamz-food-beverage .scanSummary {
padding: 12px;
}
#dreamz-food-beverage .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-food-beverage .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-food-beverage .phoneDevice .rowIcon {
display: grid;
}
#dreamz-food-beverage .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-food-beverage .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-food-beverage .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-food-beverage .sideTile strong {
font-size: 12px;
}
#dreamz-food-beverage .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-food-beverage .topbar,
#dreamz-food-beverage .heroActions,
#dreamz-food-beverage .finalActions,
#dreamz-food-beverage .contextSection,
#dreamz-food-beverage .valueCtaSection {
display: none;
}
#dreamz-food-beverage section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-food-beverage .hero {
padding-top: 20px;
}
}
#dreamz-food-beverage {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-food-beverage h1,
#dreamz-food-beverage h2,
#dreamz-food-beverage h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
#dreamz-food-beverage p {
margin: 0;
}
#dreamz-food-beverage main {
display: block;
}
#dreamz-food-beverage section {
padding: 74px 0;
}
#dreamz-food-beverage .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-food-beverage .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-food-beverage .heroAccent {
color: var(--black);
}
#dreamz-food-beverage .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-food-beverage .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-food-beverage .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-food-beverage .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-food-beverage .microcopy {
margin-top: 14px;
}
#dreamz-food-beverage .heroPills {
margin-top: 13px;
}
#dreamz-food-beverage .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-food-beverage .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-food-beverage .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-food-beverage .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-food-beverage .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-food-beverage .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-food-beverage .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-food-beverage .clientBand {
padding: 24px 0;
}
#dreamz-food-beverage .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-food-beverage .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-food-beverage .logoBox.wide {
font-size: 15px;
}
#dreamz-food-beverage .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-food-beverage .sectionHead p {
margin: 17px 0 0;
}
#dreamz-food-beverage .copy p {
margin: 16px 0 0;
}
#dreamz-food-beverage .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-food-beverage .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-food-beverage .aiJourney {
background: var(--black);
}
#dreamz-food-beverage .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-food-beverage .awardBand .sectionHead h2 {
font-size: 36px;
}
#dreamz-food-beverage .awardBand .sectionHead p {
font-size: 16px;
}
#dreamz-food-beverage .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-food-beverage .productPanel {
border-radius: 18px;
}
#dreamz-food-beverage .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-food-beverage .panelHead>strong {
font-size: 13px;
}
#dreamz-food-beverage .sampleTag {
font-size: 9px;
}
#dreamz-food-beverage .panelBody {
padding: 21px;
}
#dreamz-food-beverage .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-food-beverage .docHeader {
padding-bottom: 16px;
}
#dreamz-food-beverage .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-food-beverage .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-food-beverage .smallLabel {
font-size: 9px;
}
#dreamz-food-beverage .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-food-beverage .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-food-beverage .dataRow {
padding: 14px 0;
}
#dreamz-food-beverage .statusPill {
font-size: 8px;
}
#dreamz-food-beverage .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-food-beverage .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-food-beverage .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-food-beverage .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-food-beverage .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-food-beverage .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-food-beverage .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-food-beverage .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-food-beverage .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-food-beverage .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-food-beverage .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-food-beverage .hierarchy strong {
color: var(--navy);
}
#dreamz-food-beverage .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-food-beverage .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-food-beverage .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-food-beverage .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-food-beverage .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-food-beverage .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-food-beverage .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-food-beverage .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-food-beverage .mobileAccount small {
font-size: 9px;
}
#dreamz-food-beverage .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-food-beverage .sideTile strong {
font-size: 12px;
}
#dreamz-food-beverage .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-food-beverage .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-food-beverage .mobileAction {
font-size: 9px;
}
#dreamz-food-beverage .journeyRow strong {
font-size: 13px;
}
#dreamz-food-beverage .journeyRow small {
font-size: 11px;
}
#dreamz-food-beverage .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-food-beverage .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-food-beverage .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-food-beverage .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-food-beverage .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-food-beverage .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-food-beverage .utilityReadout small {
font-size: 12px;
}
#dreamz-food-beverage .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-food-beverage .darkSection {
background: var(--black);
}
#dreamz-food-beverage .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-food-beverage .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-food-beverage .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-food-beverage .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-food-beverage .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-food-beverage .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-food-beverage .assistantHead small {
font-size: 11px;
}
#dreamz-food-beverage .assistantNote {
font-size: 11px;
}
#dreamz-food-beverage .reportTags span {
font-size: 10px;
}
#dreamz-food-beverage .card p {
margin: 12px 0 0;
}
#dreamz-food-beverage .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-food-beverage .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-food-beverage .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-food-beverage .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-food-beverage .cards>.card p {
padding-bottom: 22px;
}
#dreamz-food-beverage .benefitBand {
background: var(--black);
}
#dreamz-food-beverage .benefit {
background: var(--black-soft);
}
#dreamz-food-beverage .inlineCta h3 {
font-size: 20px;
}
#dreamz-food-beverage .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-food-beverage .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-food-beverage .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-food-beverage .valueCtaSection {
padding: 32px 0;
}
#dreamz-food-beverage .proofCard p {
margin-top: 15px;
}
#dreamz-food-beverage .proofCard h3 {
font-size: 23px;
}
#dreamz-food-beverage .integrationNote {
margin-top: 23px;
}
#dreamz-food-beverage .ctaPanel {
background: var(--black);
}
#dreamz-food-beverage .ctaPanel p {
margin-top: 16px;
}
#dreamz-food-beverage .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-food-beverage .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-food-beverage a:hover {
text-decoration: none;
}
#dreamz-food-beverage .textCta:hover {
color: var(--navy);
}
#dreamz-food-beverage .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-food-beverage .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-food-beverage .hero h1 {
font-size: 49px;
}
#dreamz-food-beverage .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-food-beverage .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-food-beverage .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-food-beverage .hero h1 {
font-size: 58px;
}
#dreamz-food-beverage .heroVisual {
max-width: 548px;
}
#dreamz-food-beverage .hero .lead {
max-width: 700px;
}
#dreamz-food-beverage .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-food-beverage .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-food-beverage .logoBox:last-child {
grid-column: auto;
}
#dreamz-food-beverage .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-food-beverage .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-food-beverage .inlineCtaActions .button {
flex: 1;
}
#dreamz-food-beverage .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-food-beverage section {
padding: 55px 0;
}
#dreamz-food-beverage .hero {
padding: 28px 0 40px;
}
#dreamz-food-beverage .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-food-beverage .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-food-beverage .heroActions {
gap: 10px;
}
#dreamz-food-beverage .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-food-beverage .breadcrumb {
margin-bottom: 21px;
}
#dreamz-food-beverage .hero .eyebrow {
font-size: 11px;
}
#dreamz-food-beverage .heroVisual {
max-width: 480px;
}
#dreamz-food-beverage .heroPills {
row-gap: 9px;
}
#dreamz-food-beverage .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-food-beverage .heroPills span+span {
padding-left: 7px;
}
#dreamz-food-beverage .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-food-beverage .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-food-beverage .clientBand {
padding: 25px 0;
}
#dreamz-food-beverage .awardBand {
padding: 36px 0;
}
#dreamz-food-beverage .awardBand .sectionHead h2 {
font-size: 32px;
}
#dreamz-food-beverage .copy h2 {
font-size: 33px;
}
#dreamz-food-beverage .panelBody {
padding: 16px;
}
#dreamz-food-beverage .panelHead {
padding: 15px;
}
#dreamz-food-beverage .panelHead>strong {
font-size: 12px;
}
#dreamz-food-beverage .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-food-beverage .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-food-beverage .docHeader strong {
font-size: 18px;
}
#dreamz-food-beverage .docHeader small {
font-size: 10px;
}
#dreamz-food-beverage .rowCopy strong {
font-size: 11px;
}
#dreamz-food-beverage .rowCopy small {
font-size: 10px;
}
#dreamz-food-beverage .miniStats {
gap: 7px;
}
#dreamz-food-beverage .miniStats strong {
font-size: 21px;
}
#dreamz-food-beverage .miniStats span {
font-size: 9px;
}
#dreamz-food-beverage .miniStats>div {
padding: 10px 8px;
}
#dreamz-food-beverage .plantFacts {
gap: 8px;
}
#dreamz-food-beverage .plantFacts>div {
padding: 10px;
}
#dreamz-food-beverage .plantFacts strong {
font-size: 11px;
}
#dreamz-food-beverage .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-food-beverage .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-food-beverage .utilityReadout span {
font-size: 8px;
}
#dreamz-food-beverage .utilityReadout strong {
font-size: 24px;
}
#dreamz-food-beverage .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-food-beverage .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-food-beverage .comparisonTable {
font-size: 11px;
}
#dreamz-food-beverage .comparisonTable th,
#dreamz-food-beverage .comparisonTable td {
padding: 13px 9px;
}
#dreamz-food-beverage .contextSection {
padding: 0 0 22px;
}
#dreamz-food-beverage .valueCtaSection {
padding: 25px 0;
}
#dreamz-food-beverage .inlineCtaActions {
flex-direction: column;
}
#dreamz-food-beverage .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-food-beverage .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .phoneDevice {
width: 222px;
}
#dreamz-food-beverage .phoneDevice .rowIcon {
display: grid;
}
#dreamz-food-beverage .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-food-beverage .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-food-beverage .sideTile p {
margin: 0;
}
#dreamz-food-beverage .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-food-beverage .dataRow {
gap: 8px;
}
#dreamz-food-beverage .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-food-beverage .miniStats strong {
font-size: 19px;
}
#dreamz-food-beverage .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-food-beverage .heroActions .button {
width: 100%;
}
#dreamz-food-beverage .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-food-beverage .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-food-beverage .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-food-beverage .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-food-beverage .aiStep span {
font-size: 13px;
}
#dreamz-food-beverage .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-food-beverage {
background: var(--white);
}
#dreamz-food-beverage img {
display: block;
max-width: 100%;
}
#dreamz-food-beverage h1,
#dreamz-food-beverage h2,
#dreamz-food-beverage h3 {
text-wrap: balance;
}
#dreamz-food-beverage .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-food-beverage .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-food-beverage .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-food-beverage .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-food-beverage .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-food-beverage .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-food-beverage .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-food-beverage .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-food-beverage .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-food-beverage .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-food-beverage .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-food-beverage .industryIntro {
padding: 78px 0 66px;
}
#dreamz-food-beverage .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-food-beverage .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-food-beverage .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-food-beverage .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-food-beverage .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-food-beverage .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-food-beverage .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-food-beverage .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-food-beverage .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-food-beverage .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-food-beverage .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-food-beverage .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-food-beverage .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-food-beverage .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-food-beverage .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-food-beverage .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-food-beverage .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-food-beverage .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-food-beverage .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-food-beverage .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-food-beverage .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-food-beverage .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-food-beverage .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-food-beverage .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-food-beverage .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-food-beverage .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-food-beverage .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-food-beverage .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-food-beverage .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-food-beverage .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-food-beverage .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-food-beverage .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-food-beverage .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-food-beverage .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-food-beverage .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-food-beverage .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-food-beverage .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-food-beverage .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-food-beverage .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-food-beverage .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-food-beverage .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-food-beverage .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-food-beverage .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-food-beverage .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-food-beverage .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-food-beverage .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .rfidSpotlight {
background: #fff;
}
#dreamz-food-beverage .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-food-beverage .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-food-beverage .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-food-beverage .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-food-beverage .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-food-beverage .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-food-beverage .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-food-beverage .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-food-beverage .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-food-beverage .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-food-beverage .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-food-beverage .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-food-beverage .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-food-beverage .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-food-beverage .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-food-beverage .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-food-beverage .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-food-beverage .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-food-beverage .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-food-beverage .featurePanel {
display: none;
}
#dreamz-food-beverage .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-food-beverage .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-food-beverage .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-food-beverage .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-food-beverage .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-food-beverage .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-food-beverage .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-food-beverage .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-food-beverage .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-food-beverage .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-food-beverage .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-food-beverage .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-food-beverage .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-food-beverage .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-food-beverage .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-food-beverage .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-food-beverage .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-food-beverage .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-food-beverage .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-food-beverage .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-food-beverage .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-food-beverage .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-food-beverage .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-food-beverage .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-food-beverage .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-food-beverage .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-food-beverage .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-food-beverage .aiReviewBody {
padding: 18px;
}
#dreamz-food-beverage .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-food-beverage .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-food-beverage .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-food-beverage .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-food-beverage .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-food-beverage .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-food-beverage .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-food-beverage .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-food-beverage .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-food-beverage .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-food-beverage .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-food-beverage .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-food-beverage .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-food-beverage .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-food-beverage .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-food-beverage .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-food-beverage .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-food-beverage .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-food-beverage .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-food-beverage .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-food-beverage .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-food-beverage .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-food-beverage .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-food-beverage .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-food-beverage .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-food-beverage .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-food-beverage .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-food-beverage .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-food-beverage .workflowDetails .featureList,
#dreamz-food-beverage .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-food-beverage .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-food-beverage .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-food-beverage .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-food-beverage #fb-connected-tools {
background: #fff;
}
#dreamz-food-beverage #fb-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-food-beverage .featureTab,
#dreamz-food-beverage .industryPriority,
#dreamz-food-beverage summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-food-beverage .industryIntroHead {
gap: 30px;
}
#dreamz-food-beverage .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-food-beverage .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-food-beverage .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-food-beverage .factoryWorkflow {
padding: 22px;
}
#dreamz-food-beverage .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-food-beverage .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-food-beverage .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-food-beverage .industryPriorityGrid {
gap: 14px;
}
#dreamz-food-beverage .industryPriority {
padding: 22px 19px;
}
#dreamz-food-beverage .industryPriority h3 {
font-size: 21px;
}
#dreamz-food-beverage .industryPriority p {
font-size: 12px;
}
#dreamz-food-beverage .priorityLink {
font-size: 10px;
}
#dreamz-food-beverage .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-food-beverage .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-food-beverage .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-food-beverage .vedaUseCases>div {
display: block;
}
#dreamz-food-beverage .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-food-beverage .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-food-beverage .featureTabs {
gap: 8px;
}
#dreamz-food-beverage .featureTab {
min-height: 108px;
}
#dreamz-food-beverage .featureStage,
#dreamz-food-beverage .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-food-beverage .rfidSpotlight .spotlightMedia,
#dreamz-food-beverage .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-food-beverage .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-food-beverage .featurePanel {
min-height: 0;
}
#dreamz-food-beverage .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-food-beverage .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-food-beverage .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-food-beverage .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-food-beverage .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-food-beverage .clientBand {
padding: 22px 0;
}
#dreamz-food-beverage .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-food-beverage .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-food-beverage .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-food-beverage .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-food-beverage .industryIntro {
padding: 53px 0;
}
#dreamz-food-beverage .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-food-beverage .industryIntroHead>p {
font-size: 14px;
}
#dreamz-food-beverage .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .industryPriority {
padding: 23px;
}
#dreamz-food-beverage .industryPriority h3 {
font-size: 24px;
}
#dreamz-food-beverage .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-food-beverage .industryPriority p {
font-size: 13px;
}
#dreamz-food-beverage .priorityLink {
font-size: 11px;
}
#dreamz-food-beverage .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-food-beverage .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-food-beverage .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-food-beverage .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-food-beverage .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-food-beverage .vedaUseCases>div {
display: flex;
}
#dreamz-food-beverage .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-food-beverage .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-food-beverage .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-food-beverage .vedaMessage.user {
margin-left: 25px;
}
#dreamz-food-beverage .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-food-beverage .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-food-beverage .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-food-beverage .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-food-beverage .spotlightHead h2 {
font-size: 32px;
}
#dreamz-food-beverage .spotlightHead>p {
font-size: 14px;
}
#dreamz-food-beverage .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-food-beverage .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-food-beverage .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-food-beverage .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-food-beverage .featurePanel h3 {
font-size: 24px;
}
#dreamz-food-beverage .featurePanel>p {
font-size: 13px;
}
#dreamz-food-beverage .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-food-beverage .spotlightChecks>li {
font-size: 12px;
}
#dreamz-food-beverage .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-food-beverage .spotlightActions .button {
width: 100%;
}
#dreamz-food-beverage .spotlightScope {
font-size: 10px;
}
#dreamz-food-beverage .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-food-beverage .mediaTitle strong {
font-size: 11px;
}
#dreamz-food-beverage .mediaTitle div>span {
font-size: 8px;
}
#dreamz-food-beverage .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-food-beverage .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-food-beverage .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-food-beverage .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-food-beverage .aiReviewBody {
padding: 13px;
}
#dreamz-food-beverage .aiIssue {
padding: 13px;
}
#dreamz-food-beverage .aiIssue strong {
font-size: 14px;
}
#dreamz-food-beverage .aiEvidence {
gap: 6px;
}
#dreamz-food-beverage .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-food-beverage .aiEvidence strong {
font-size: 9px;
}
#dreamz-food-beverage .aiEvidence span {
font-size: 7px;
}
#dreamz-food-beverage .exampleLabel {
font-size: 6px;
}
#dreamz-food-beverage .factoryWorkflows {
padding: 55px 0;
}
#dreamz-food-beverage .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-food-beverage .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-food-beverage .industryRibbonGrid {
gap: 12px;
}
#dreamz-food-beverage .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-food-beverage .spotlightHead h2 {
font-size: 29px;
}
#dreamz-food-beverage .featureStage {
padding: 19px 13px;
}
#dreamz-food-beverage .mediaTitle>.icon {
display: none;
}
#dreamz-food-beverage .exampleLabel {
display: none;
}
#dreamz-food-beverage .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-food-beverage .featureTabs {
display: none;
}
#dreamz-food-beverage .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-food-beverage .featureStage {
display: block;
}
#dreamz-food-beverage .featurePanel {
color: #000;
}
}
#dreamz-food-beverage #fb-predictive-features-1:checked~.featureTabs label[for="fb-predictive-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-predictive-features-1:focus-visible~.featureTabs label[for="fb-predictive-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-predictive-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-2:checked~.featureTabs label[for="fb-predictive-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-predictive-features-2:focus-visible~.featureTabs label[for="fb-predictive-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-predictive-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-3:checked~.featureTabs label[for="fb-predictive-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-predictive-features-3:focus-visible~.featureTabs label[for="fb-predictive-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-predictive-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-4:checked~.featureTabs label[for="fb-predictive-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-predictive-features-4:focus-visible~.featureTabs label[for="fb-predictive-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-predictive-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-5:checked~.featureTabs label[for="fb-predictive-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-predictive-features-5:focus-visible~.featureTabs label[for="fb-predictive-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-predictive-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-1:checked~.featureTabs label[for="fb-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-rfid-features-1:focus-visible~.featureTabs label[for="fb-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-2:checked~.featureTabs label[for="fb-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-rfid-features-2:focus-visible~.featureTabs label[for="fb-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-3:checked~.featureTabs label[for="fb-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-rfid-features-3:focus-visible~.featureTabs label[for="fb-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-4:checked~.featureTabs label[for="fb-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-rfid-features-4:focus-visible~.featureTabs label[for="fb-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-5:checked~.featureTabs label[for="fb-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-rfid-features-5:focus-visible~.featureTabs label[for="fb-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-1:checked~.featureTabs label[for="fb-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-ai-decisions-features-1:focus-visible~.featureTabs label[for="fb-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-2:checked~.featureTabs label[for="fb-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-ai-decisions-features-2:focus-visible~.featureTabs label[for="fb-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-3:checked~.featureTabs label[for="fb-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-ai-decisions-features-3:focus-visible~.featureTabs label[for="fb-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-4:checked~.featureTabs label[for="fb-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-ai-decisions-features-4:focus-visible~.featureTabs label[for="fb-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-5:checked~.featureTabs label[for="fb-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-food-beverage #fb-ai-decisions-features-5:focus-visible~.featureTabs label[for="fb-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-food-beverage #fb-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-food-beverage .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .featureMediaPanels {
min-width: 0;
}
#dreamz-food-beverage .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-food-beverage .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-food-beverage .featureMediaPanels .windowTop strong,
#dreamz-food-beverage .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-food-beverage .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-food-beverage .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-food-beverage .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-food-beverage .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-food-beverage .featureMediaPanels .windowBody>*,
#dreamz-food-beverage .featureMediaPanels .spectrumGrid>*,
#dreamz-food-beverage .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-food-beverage .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-food-beverage .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-food-beverage .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-food-beverage .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-food-beverage .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-food-beverage .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-food-beverage .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-food-beverage .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-food-beverage .pin2 {
top: 88px;
right: 88px;
}
#dreamz-food-beverage .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-food-beverage .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-food-beverage .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-food-beverage .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-food-beverage .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-food-beverage .featureMediaPanels .graphNodes .node.n1,
#dreamz-food-beverage .featureMediaPanels .graphNodes .node.n2,
#dreamz-food-beverage .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-food-beverage .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-food-beverage .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-food-beverage .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-food-beverage .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-food-beverage .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-food-beverage .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-food-beverage .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-food-beverage .freshGraphic * {
box-sizing: border-box;
}
#dreamz-food-beverage .rfPanel,
#dreamz-food-beverage .aiInsightCard,
#dreamz-food-beverage .forecastVisualCard,
#dreamz-food-beverage .forecastSuggestion,
#dreamz-food-beverage .knowledgeTile,
#dreamz-food-beverage .chatConversation,
#dreamz-food-beverage .trainingSummary,
#dreamz-food-beverage .moduleCard,
#dreamz-food-beverage .qualityHeatCard,
#dreamz-food-beverage .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-food-beverage .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-food-beverage .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-food-beverage .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-food-beverage .statusPill,
#dreamz-food-beverage .cardTag,
#dreamz-food-beverage .forecastSuggestion b,
#dreamz-food-beverage .moduleCard b,
#dreamz-food-beverage .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-food-beverage .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-food-beverage .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-food-beverage .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-food-beverage .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-food-beverage .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-food-beverage .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-food-beverage .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-food-beverage .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-food-beverage .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-food-beverage .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-food-beverage .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-food-beverage .dot.good {
background: #298EEC;
}
#dreamz-food-beverage .dot.warn {
background: #F4A62A;
}
#dreamz-food-beverage .dot.bad {
background: #EB6B53;
}
#dreamz-food-beverage .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-food-beverage .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-food-beverage .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-food-beverage .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-food-beverage .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-food-beverage .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-food-beverage .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-food-beverage .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-food-beverage .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-food-beverage .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-food-beverage .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-food-beverage .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-food-beverage .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-food-beverage .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-food-beverage .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-food-beverage .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-food-beverage .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-food-beverage .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-food-beverage .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-food-beverage .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-food-beverage .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-food-beverage .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-food-beverage .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-food-beverage .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-food-beverage .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-food-beverage .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-food-beverage .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-food-beverage .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-food-beverage .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-food-beverage .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-food-beverage .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-food-beverage .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-food-beverage .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-food-beverage .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-food-beverage .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-food-beverage .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-food-beverage .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-food-beverage .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-food-beverage .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-food-beverage .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-food-beverage .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-food-beverage .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-food-beverage .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-food-beverage .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-food-beverage .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-food-beverage .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-food-beverage .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-food-beverage .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-food-beverage .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-food-beverage .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-food-beverage .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-food-beverage .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-food-beverage .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-food-beverage .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-food-beverage .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-food-beverage .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-food-beverage .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-food-beverage .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-food-beverage .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-food-beverage .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-food-beverage .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-food-beverage .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-food-beverage .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-food-beverage .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-food-beverage .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-food-beverage .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-food-beverage .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-food-beverage .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-food-beverage .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-food-beverage .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-food-beverage .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-food-beverage .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-food-beverage .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-food-beverage .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-food-beverage .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-food-beverage .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-food-beverage .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-food-beverage .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-food-beverage .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-food-beverage .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-food-beverage .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-food-beverage .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-food-beverage .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-food-beverage .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-food-beverage .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-food-beverage .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-food-beverage .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-food-beverage .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-food-beverage .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-food-beverage .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-food-beverage .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-food-beverage .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-food-beverage .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-food-beverage .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-food-beverage .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-food-beverage .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-food-beverage .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-food-beverage .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-food-beverage .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-food-beverage .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-food-beverage .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-food-beverage .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-food-beverage .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-food-beverage .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-food-beverage .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-food-beverage .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-food-beverage .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-food-beverage .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-food-beverage .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-food-beverage .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-food-beverage .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-food-beverage .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-food-beverage .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-food-beverage .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-food-beverage .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-food-beverage .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-food-beverage .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-food-beverage .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-food-beverage .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-food-beverage .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-food-beverage .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-food-beverage .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-food-beverage .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-food-beverage .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-food-beverage .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-food-beverage .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-food-beverage .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-food-beverage .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-food-beverage .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-food-beverage .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-food-beverage .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-food-beverage .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-food-beverage .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-food-beverage .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-food-beverage .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-food-beverage .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-food-beverage .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-food-beverage .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-food-beverage .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-food-beverage .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-food-beverage .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-food-beverage .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-food-beverage .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-food-beverage .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-food-beverage .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-food-beverage .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-food-beverage .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-food-beverage .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-food-beverage .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-food-beverage .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-food-beverage .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-food-beverage .rfTrackLayout,
#dreamz-food-beverage .rfFlowLayout,
#dreamz-food-beverage .rfAlertGrid,
#dreamz-food-beverage .rfCycleLayout,
#dreamz-food-beverage .rfSitesLayout,
#dreamz-food-beverage .aiRootLayout,
#dreamz-food-beverage .aiForecastLayout,
#dreamz-food-beverage .aiChatLayout,
#dreamz-food-beverage .aiTrainingLayout,
#dreamz-food-beverage .aiQualityLayout,
#dreamz-food-beverage .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-food-beverage .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-food-beverage .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-food-beverage .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-food-beverage .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-food-beverage .aiLink {
display: none;
}
}
#dreamz-food-beverage .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-food-beverage .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-food-beverage .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-food-beverage .mfgHeroContent p {
color: #fff;
}
#dreamz-food-beverage .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-food-beverage .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-food-beverage .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-food-beverage .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-food-beverage .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-food-beverage .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-food-beverage .mfgHero h1>span {
display: block;
}
#dreamz-food-beverage .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-food-beverage .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-food-beverage .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-food-beverage .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-food-beverage .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-food-beverage .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-food-beverage .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-food-beverage .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-food-beverage .mfgHeroContent {
min-height: 610px;
}
#dreamz-food-beverage .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-food-beverage .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-food-beverage .mfgHeroLead {
font-size: 16px;
}
#dreamz-food-beverage .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-food-beverage .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-food-beverage .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-food-beverage .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-food-beverage .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-food-beverage .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-food-beverage .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-food-beverage .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-food-beverage .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-food-beverage .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-food-beverage .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-food-beverage .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-food-beverage .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-food-beverage .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-food-beverage .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-food-beverage .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-food-beverage .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-food-beverage .mfgHero {
background: #fff;
color: #000;
}
#dreamz-food-beverage .mfgHeroScene,
#dreamz-food-beverage .mfgHeroActions {
display: none;
}
#dreamz-food-beverage .mfgHeroContent {
min-height: 0;
}
#dreamz-food-beverage .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-food-beverage .mfgHero h1,
#dreamz-food-beverage .mfgHero h1 .mfgHeroAccent,
#dreamz-food-beverage .mfgHero p {
color: #000;
}
}
#dreamz-food-beverage #fb-rfid .featureStage,
#dreamz-food-beverage #fb-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-food-beverage .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-food-beverage .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-food-beverage .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-food-beverage .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-food-beverage .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-food-beverage .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-food-beverage .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-food-beverage .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-food-beverage .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-food-beverage .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-food-beverage .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-food-beverage .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-food-beverage .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-food-beverage .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-food-beverage .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-food-beverage .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-food-beverage .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-food-beverage .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-food-beverage .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-food-beverage .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-food-beverage .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-food-beverage .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-food-beverage .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-food-beverage .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-food-beverage .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-food-beverage .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-food-beverage .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-food-beverage .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-food-beverage .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-food-beverage .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-food-beverage .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-food-beverage .mfgGallery .flowArrow {
display: none;
}
#dreamz-food-beverage .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-food-beverage .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-food-beverage .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-food-beverage .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-food-beverage .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-food-beverage .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-food-beverage .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-food-beverage .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-food-beverage .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-food-beverage .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-food-beverage .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-food-beverage .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-food-beverage .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-food-beverage .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-food-beverage .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-food-beverage .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-food-beverage .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-food-beverage .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-food-beverage .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-food-beverage .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-food-beverage .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-food-beverage .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-food-beverage .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-food-beverage .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-food-beverage .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-food-beverage .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-food-beverage .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-food-beverage .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-food-beverage .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-food-beverage .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-food-beverage .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-food-beverage .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-food-beverage .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-food-beverage .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-food-beverage .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-food-beverage .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-food-beverage .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-food-beverage .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-food-beverage .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-food-beverage .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-food-beverage .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-food-beverage .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-food-beverage .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-food-beverage .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-food-beverage .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-food-beverage .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-food-beverage .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-food-beverage .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-food-beverage .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-food-beverage .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-food-beverage .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-food-beverage .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-food-beverage .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-food-beverage .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-food-beverage .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-food-beverage .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-food-beverage .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-food-beverage .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-food-beverage .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-food-beverage .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-food-beverage .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-food-beverage .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-food-beverage .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-food-beverage .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-food-beverage .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-food-beverage .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-food-beverage .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-food-beverage .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-food-beverage .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-food-beverage .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-food-beverage .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-food-beverage .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-food-beverage .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-food-beverage .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-food-beverage .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-food-beverage .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-food-beverage .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-food-beverage .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-food-beverage .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-food-beverage .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-food-beverage .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-food-beverage #fb-rfid .featureStage,
#dreamz-food-beverage #fb-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-food-beverage #fb-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-food-beverage .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-food-beverage #fb-rfid .featureStage,
#dreamz-food-beverage #fb-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-food-beverage .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-food-beverage .mfgGallery .freshWindow {
height: auto;
}
#dreamz-food-beverage .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-food-beverage .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-food-beverage .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-food-beverage .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-food-beverage .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-food-beverage .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-food-beverage .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-food-beverage .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-food-beverage .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-food-beverage .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-food-beverage .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-food-beverage .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-food-beverage .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-food-beverage .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-food-beverage .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-food-beverage .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-food-beverage .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-food-beverage .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-food-beverage .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-food-beverage .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-food-beverage .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-food-beverage .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-food-beverage .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-food-beverage .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-food-beverage .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-food-beverage .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-food-beverage .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-food-beverage .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-food-beverage .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-food-beverage .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-food-beverage .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-food-beverage .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-food-beverage .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-food-beverage .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-food-beverage .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-food-beverage .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-food-beverage .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-food-beverage .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-food-beverage .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-food-beverage .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-food-beverage .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-food-beverage .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-food-beverage .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-food-beverage .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-food-beverage .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-food-beverage .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-food-beverage .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-food-beverage .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-food-beverage .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-food-beverage .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-food-beverage .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-food-beverage .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-food-beverage .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-food-beverage .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-food-beverage .fbVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-food-beverage .fbGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-food-beverage .fbIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-food-beverage .fbStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-food-beverage .fbVisualGallery>.fbGraphic {
display: none;
}
#dreamz-food-beverage #fb-predictive .featureStage,
#dreamz-food-beverage #fb-rfid .featureStage,
#dreamz-food-beverage #fb-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-food-beverage #fb-rfid .fbVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-food-beverage #fb-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-food-beverage .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-food-beverage .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-food-beverage .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-food-beverage .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-food-beverage .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-food-beverage #fb-predictive .featureStage,
#dreamz-food-beverage #fb-rfid .featureStage,
#dreamz-food-beverage #fb-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-food-beverage #fb-rfid .fbVisualGallery,
#dreamz-food-beverage #fb-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-food-beverage .mfgHeroScene {
height: 290px;
}
#dreamz-food-beverage #fb-predictive .featureStage,
#dreamz-food-beverage #fb-rfid .featureStage,
#dreamz-food-beverage #fb-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-food-beverage .fbVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-food-beverage .fbVisualGallery>.fbGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-food-beverage #fb-predictive-features-1:checked~.featureStage .fbVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-2:checked~.featureStage .fbVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-3:checked~.featureStage .fbVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-4:checked~.featureStage .fbVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-food-beverage #fb-predictive-features-5:checked~.featureStage .fbVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-1:checked~.featureStage .fbVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-2:checked~.featureStage .fbVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-3:checked~.featureStage .fbVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-4:checked~.featureStage .fbVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-food-beverage #fb-rfid-features-5:checked~.featureStage .fbVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-1:checked~.featureStage .fbVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-2:checked~.featureStage .fbVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-3:checked~.featureStage .fbVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-4:checked~.featureStage .fbVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-food-beverage #fb-ai-decisions-features-5:checked~.featureStage .fbVisualGallery> :nth-child(5) {
display: block;
} #dreamz-food-beverage .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-food-beverage .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-food-beverage .fbIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-food-beverage .fbGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-food-beverage .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-food-beverage .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-food-beverage .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-food-beverage .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-food-beverage .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
@media(max-width:767px) {
#dreamz-food-beverage .featureContent {
order: 2;
}
#dreamz-food-beverage .mfgHeroScene {
display: none;
}
}
#dreamz-food-beverage .nav-link {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5) !important;
}  #dreamz-chemical .industryIntroHead.compact,
#dreamz-chemical .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-chemical .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-chemical .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-chemical .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-chemical .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-chemical .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-chemical .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-chemical .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-chemical .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-chemical .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-chemical .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-chemical .windowDots {
display: flex;
gap: 5px;
}
#dreamz-chemical .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-chemical .windowBody {
padding: 16px;
}
#dreamz-chemical .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-chemical .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-chemical .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-chemical .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-chemical .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-chemical .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-chemical .chartGridLine.l1 {
top: 34px;
}
#dreamz-chemical .chartGridLine.l2 {
top: 65px;
}
#dreamz-chemical .chartGridLine.l3 {
top: 96px;
}
#dreamz-chemical .chartGridLine.l4 {
top: 127px;
}
#dreamz-chemical .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-chemical .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-chemical .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-chemical .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-chemical .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-chemical .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-chemical .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-chemical .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-chemical .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-chemical .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-chemical .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-chemical .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-chemical .noteCard p,
#dreamz-chemical .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-chemical .alertStack {
display: grid;
gap: 10px;
}
#dreamz-chemical .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-chemical .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-chemical .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-chemical .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-chemical .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-chemical .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-chemical .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-chemical .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-chemical .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-chemical .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-chemical .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-chemical .scheduleBoard h4,
#dreamz-chemical .todoBoard h4,
#dreamz-chemical .siteBoard h4,
#dreamz-chemical .chatPanel h4,
#dreamz-chemical .lessonPanel h4,
#dreamz-chemical .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-chemical .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-chemical .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-chemical .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-chemical .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-chemical .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-chemical .taskRow:last-child {
border-bottom: 0;
}
#dreamz-chemical .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-chemical .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-chemical .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-chemical .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-chemical .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-chemical .inventoryTable th,
#dreamz-chemical .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-chemical .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-chemical .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-chemical .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-chemical .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-chemical .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-chemical .phoneBody {
padding: 12px;
}
#dreamz-chemical .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-chemical .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-chemical .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-chemical .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-chemical .progressList {
display: grid;
gap: 10px;
}
#dreamz-chemical .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-chemical .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-chemical .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-chemical .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-chemical .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-chemical .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-chemical .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-chemical .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-chemical .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-chemical .pin1 {
top: 56px;
left: 58px;
}
#dreamz-chemical .pin2 {
top: 88px;
right: 88px;
}
#dreamz-chemical .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-chemical .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-chemical .siteRow:last-child {
border-bottom: 0;
}
#dreamz-chemical .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-chemical .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-chemical .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-chemical .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-chemical .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-chemical .graphNodes:before,
#dreamz-chemical .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-chemical .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-chemical .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-chemical .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-chemical .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-chemical .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-chemical .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-chemical .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-chemical .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-chemical .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-chemical .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-chemical .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-chemical .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-chemical .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-chemical .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-chemical .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-chemical .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-chemical .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-chemical .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-chemical .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-chemical .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-chemical .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-chemical .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-chemical .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-chemical .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-chemical .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-chemical .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-chemical .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-chemical .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-chemical .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-chemical .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-chemical .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-chemical .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-chemical .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-chemical #ch-predictive-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-chemical #ch-predictive-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-chemical #ch-predictive-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-chemical #ch-predictive-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-chemical #ch-predictive-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-chemical #ch-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-chemical #ch-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-chemical #ch-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-chemical #ch-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-chemical #ch-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-chemical #ch-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-chemical #ch-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-chemical #ch-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-chemical #ch-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-chemical #ch-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-chemical #ch-predictive-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-chemical #ch-predictive-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-chemical #ch-predictive-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-chemical #ch-predictive-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-chemical #ch-predictive-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-chemical #ch-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-chemical #ch-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-chemical #ch-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-chemical #ch-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-chemical #ch-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-chemical #ch-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-chemical #ch-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-chemical #ch-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-chemical #ch-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-chemical #ch-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-chemical .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-chemical .featureMediaPanels {
min-height: 0;
}
#dreamz-chemical .inventorySplit,
#dreamz-chemical .forecastGrid,
#dreamz-chemical .siteGrid,
#dreamz-chemical .spectrumGrid,
#dreamz-chemical .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-chemical .metricGrid,
#dreamz-chemical .lessonCards,
#dreamz-chemical .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-chemical .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-chemical {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-chemical * {
box-sizing: border-box;
}
#dreamz-chemical {
scroll-behavior: smooth;
}
#dreamz-chemical {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-chemical a {
color: inherit;
text-decoration: none;
}
#dreamz-chemical .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-chemical .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-chemical .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-chemical .brand span {
color: var(--brand);
}
#dreamz-chemical .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-chemical .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-chemical .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-chemical .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-chemical .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-chemical .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-chemical .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-chemical .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-chemical h1,
#dreamz-chemical h2,
#dreamz-chemical h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
#dreamz-chemical h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
#dreamz-chemical h2 {
font-size: clamp(32px, 4.3vw, 50px);
}
#dreamz-chemical h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-chemical .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-chemical .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-chemical .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-chemical .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-chemical .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-chemical .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-chemical .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-chemical .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-chemical .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-chemical .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-chemical .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-chemical .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-chemical .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-chemical .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-chemical .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-chemical .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-chemical .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-chemical .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-chemical .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-chemical .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-chemical .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-chemical .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-chemical .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-chemical .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-chemical .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-chemical .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
} #dreamz-chemical .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-chemical .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-chemical .aiJourney h2 {
color: #fff;
}
#dreamz-chemical .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-chemical .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-chemical .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-chemical .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-chemical .aiStep:last-child::after {
display: none;
}
#dreamz-chemical .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-chemical .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-chemical .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-chemical .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-chemical .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-chemical .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-chemical .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-chemical .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-chemical .capability {
background: #fff;
}
#dreamz-chemical .capability.alt {
background: var(--sky-2);
}
#dreamz-chemical .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-chemical .twoCol.reverse .visual {
order: 2;
}
#dreamz-chemical .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-chemical .visual .placeholder {
min-height: 355px;
}
#dreamz-chemical .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-chemical .featureList.primaryOnly .featureItem:nth-child(n +5) {
display: none;
}
#dreamz-chemical details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-chemical details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-chemical details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-chemical details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-chemical details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-chemical details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-chemical .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-chemical .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-chemical .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-chemical .darkSection h2,
#dreamz-chemical .darkSection h3 {
color: #fff;
}
#dreamz-chemical .darkSection .sectionHead p,
#dreamz-chemical .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-chemical .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-chemical .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-chemical .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-chemical .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-chemical .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-chemical .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-chemical .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-chemical .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-chemical .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-chemical .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-chemical .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-chemical .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-chemical .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-chemical .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-chemical .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-chemical .benefitBand h2 {
color: #fff;
}
#dreamz-chemical .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-chemical .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-chemical .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-chemical .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-chemical .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-chemical .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-chemical .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-chemical .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-chemical .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-chemical .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-chemical .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-chemical .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-chemical .faq {
max-width: 900px;
}
#dreamz-chemical .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-chemical .ctaPanel h2 {
color: #fff;
}
#dreamz-chemical .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-chemical .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-chemical .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-chemical .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-chemical .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-chemical .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-chemical .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-chemical .inlineCta.dark h3 {
color: #fff;
}
#dreamz-chemical .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-chemical .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-chemical .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-chemical .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-chemical .button.yellow:hover {
background: #FFD84D;
}
#dreamz-chemical .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-chemical .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-chemical .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-chemical .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-chemical footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-chemical .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-chemical .heroGrid,
#dreamz-chemical .twoCol,
#dreamz-chemical .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-chemical .twoCol.reverse .visual {
order: initial;
}
#dreamz-chemical .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-chemical .ratingGrid,
#dreamz-chemical .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-chemical .ratingLead,
#dreamz-chemical .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-chemical .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-chemical .aiStep:nth-child(3)::after,
#dreamz-chemical .aiStep:last-child::after {
display: none;
}
#dreamz-chemical .outcomeGrid,
#dreamz-chemical .challengeGrid,
#dreamz-chemical .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-chemical .cards,
#dreamz-chemical .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-chemical .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-chemical .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-chemical .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-chemical .hero {
padding: 58px 0 52px;
}
#dreamz-chemical h1 {
font-size: 44px;
}
#dreamz-chemical .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-chemical .aiStep::after {
display: none;
}
#dreamz-chemical .logoRow,
#dreamz-chemical .ratingGrid,
#dreamz-chemical .awardGrid,
#dreamz-chemical .outcomeGrid,
#dreamz-chemical .challengeGrid,
#dreamz-chemical .benefitGrid,
#dreamz-chemical .cards,
#dreamz-chemical .proofCards,
#dreamz-chemical .integrationGrid,
#dreamz-chemical .featureList {
grid-template-columns: 1fr;
}
#dreamz-chemical .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-chemical .ctaPanel {
padding: 34px 24px;
}
#dreamz-chemical .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-chemical .inlineCtaActions {
width: 100%;
}
#dreamz-chemical .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-chemical {
--muted: #526A7C;
--shadow: none;
}
#dreamz-chemical {
background: var(--sky-2);
}
#dreamz-chemical p {
margin-bottom: 0;
}
#dreamz-chemical [id] {
scroll-margin-top: 94px;
}
#dreamz-chemical svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-chemical .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-chemical .darkSection h2,
#dreamz-chemical .darkSection h3,
#dreamz-chemical .aiJourney h2,
#dreamz-chemical .benefitBand h2,
#dreamz-chemical .ctaPanel h2,
#dreamz-chemical .inlineCta.dark h3 {
color: #fff;
}
#dreamz-chemical .wrap>*,
#dreamz-chemical .heroGrid>*,
#dreamz-chemical .twoCol>*,
#dreamz-chemical .ctaPanel>* {
min-width: 0;
}
#dreamz-chemical .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-chemical .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-chemical .skipLink:focus {
transform: none;
}
#dreamz-chemical a:focus-visible,
#dreamz-chemical summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-chemical .darkSection a:focus-visible,
#dreamz-chemical .darkSection summary:focus-visible,
#dreamz-chemical .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-chemical .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-chemical .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-chemical .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-chemical .brandName>span {
color: var(--brand-dark);
}
#dreamz-chemical .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-chemical .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-chemical .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-chemical .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-chemical .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-chemical .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-chemical .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-chemical .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-chemical .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-chemical .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-chemical .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-chemical .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-chemical .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-chemical .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-chemical .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-chemical .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-chemical .clientBand {
padding: 27px 0;
}
#dreamz-chemical .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-chemical .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-chemical .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-chemical .logoBox.wide {
font-size: 12px;
}
#dreamz-chemical .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-chemical h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-chemical .sectionHead {
margin-bottom: 36px;
}
#dreamz-chemical .eyebrow {
line-height: 1.5;
}
#dreamz-chemical .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-chemical .aiStep {
min-height: 162px;
}
#dreamz-chemical .aiStep strong {
line-height: 1.35;
}
#dreamz-chemical .aiStep span {
line-height: 1.65;
}
#dreamz-chemical .aiCallout {
margin-top: 24px;
}
#dreamz-chemical .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-chemical .outcome>.icon {
color: var(--navy);
}
#dreamz-chemical .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-chemical .awardItem>.icon {
color: var(--navy);
}
#dreamz-chemical .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-chemical .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-chemical .twoCol.reverse .visual {
order: -1;
}
#dreamz-chemical .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-chemical .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-chemical .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-chemical .featureList {
gap: 13px 18px;
}
#dreamz-chemical .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-chemical .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-chemical .check .icon {
width: 14px;
height: 14px;
}
#dreamz-chemical details.capabilityMore {
margin-bottom: 0;
}
#dreamz-chemical .capabilityMore summary {
min-height: 34px;
}
#dreamz-chemical .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-chemical .textCta {
font-size: 14px;
}
#dreamz-chemical .visual {
min-width: 0;
}
#dreamz-chemical .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-chemical .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-chemical .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-chemical .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-chemical .panelBody {
padding: 20px;
}
#dreamz-chemical .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-chemical .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-chemical .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-chemical .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-chemical .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-chemical .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-chemical .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-chemical .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-chemical .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-chemical .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-chemical .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-chemical .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-chemical .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-chemical .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-chemical .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-chemical .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-chemical .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-chemical .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-chemical .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-chemical .dataRow:last-child {
border-bottom: 0;
}
#dreamz-chemical .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-chemical .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-chemical .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-chemical .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-chemical .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-chemical .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-chemical .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-chemical .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-chemical .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-chemical .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-chemical .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-chemical .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-chemical .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-chemical .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-chemical .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-chemical .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-chemical .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-chemical .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-chemical .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-chemical .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-chemical .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-chemical .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-chemical .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-chemical .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-chemical .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-chemical .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-chemical .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-chemical .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-chemical .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-chemical .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-chemical .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-chemical .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-chemical .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-chemical .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-chemical .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-chemical .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-chemical .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-chemical .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-chemical .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-chemical .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-chemical .promptList {
display: grid;
gap: 10px;
}
#dreamz-chemical .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-chemical .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-chemical .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-chemical .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-chemical .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-chemical .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-chemical .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-chemical .quoteTable th,
#dreamz-chemical .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-chemical .quoteTable td:first-child {
width: 64%;
}
#dreamz-chemical .quoteTable th:last-child,
#dreamz-chemical .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-chemical .quoteTable strong {
font-size: 11px;
}
#dreamz-chemical .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-chemical .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-chemical .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-chemical .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-chemical .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-chemical .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-chemical .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-chemical .orderJourney {
margin: 20px 0;
}
#dreamz-chemical .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-chemical .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-chemical .journeyRow:last-child:before {
display: none;
}
#dreamz-chemical .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-chemical .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-chemical .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-chemical .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-chemical .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-chemical .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-chemical .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-chemical .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-chemical .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-chemical .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-chemical .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-chemical .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-chemical .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-chemical .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-chemical .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-chemical .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-chemical .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-chemical .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-chemical .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-chemical .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-chemical .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-chemical .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-chemical .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-chemical .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-chemical .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-chemical .customerTimeline strong {
color: #fff;
}
#dreamz-chemical .customerTimeline small {
color: #BFBFBF;
}
#dreamz-chemical .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-chemical .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-chemical .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-chemical .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-chemical .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-chemical .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-chemical .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-chemical .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-chemical .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-chemical .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-chemical .chartTitle strong {
font-size: 12px;
}
#dreamz-chemical .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-chemical .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-chemical .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-chemical .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-chemical .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-chemical .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-chemical .inlineCtaActions {
max-width: 42%;
}
#dreamz-chemical .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-chemical .inlineCta h3 {
line-height: 1.35;
}
#dreamz-chemical .card {
box-shadow: none;
}
#dreamz-chemical .cardIcon {
box-shadow: none;
}
#dreamz-chemical .card h3 {
font-size: 22px;
}
#dreamz-chemical .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-chemical .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-chemical .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-chemical .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-chemical .ratingBand {
padding: 34px 0;
}
#dreamz-chemical .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-chemical .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-chemical .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-chemical .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-chemical .ratingItem:first-child {
border-left: 0;
}
#dreamz-chemical .proofCard h3 {
font-size: 23px;
}
#dreamz-chemical .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-chemical .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-chemical .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-chemical .integration {
min-height: 98px;
}
#dreamz-chemical .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-chemical .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-chemical .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-chemical .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-chemical .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-chemical .finalActions {
display: grid;
gap: 11px;
}
#dreamz-chemical .finalActions .button {
white-space: nowrap;
}
#dreamz-chemical .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-chemical .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-chemical .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-chemical .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-chemical .heroGrid {
gap: 30px;
}
#dreamz-chemical .twoCol {
gap: 32px;
}
#dreamz-chemical .panelBody {
padding: 16px;
}
#dreamz-chemical .panelHead {
padding: 16px;
}
#dreamz-chemical .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-chemical .pipelineColumns {
gap: 7px;
}
#dreamz-chemical .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-chemical .heroGrid,
#dreamz-chemical .twoCol,
#dreamz-chemical .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .heroGrid {
gap: 36px;
}
#dreamz-chemical .hero h1 {
max-width: 730px;
}
#dreamz-chemical .hero .lead {
max-width: 690px;
}
#dreamz-chemical .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-chemical .twoCol {
gap: 34px;
}
#dreamz-chemical .twoCol.reverse .visual {
order: initial;
}
#dreamz-chemical .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-chemical .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-chemical .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-chemical .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-chemical .ratingSectionGrid {
gap: 20px;
}
#dreamz-chemical .inlineCta {
align-items: flex-start;
}
#dreamz-chemical .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-chemical .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-chemical .card {
padding: 22px;
}
#dreamz-chemical .card h3 {
font-size: 21px;
}
#dreamz-chemical .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-chemical .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-chemical .cards,
#dreamz-chemical .proofCards {
grid-template-columns: 1fr;
}
#dreamz-chemical .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-chemical .inlineCta {
flex-direction: column;
}
#dreamz-chemical .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-chemical .inlineCtaActions .button {
flex: 1;
}
#dreamz-chemical .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-chemical .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-chemical .wrap {
width: calc(100% - 32px);
}
#dreamz-chemical [id] {
scroll-margin-top: 82px;
}
#dreamz-chemical .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-chemical .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-chemical .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-chemical .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
#dreamz-chemical .hero {
padding: 51px 0 48px;
}
#dreamz-chemical .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-chemical .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-chemical .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-chemical .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-chemical .hero .microcopy {
font-size: 11px;
}
#dreamz-chemical .heroPills span {
font-size: 9px;
}
#dreamz-chemical .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-chemical .sectionHead p {
font-size: 16px;
}
#dreamz-chemical .copy h2 {
font-size: 34px;
}
#dreamz-chemical .copy p {
font-size: 15px;
}
#dreamz-chemical .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-chemical .logoBox {
min-height: 53px;
}
#dreamz-chemical .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-chemical .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-chemical .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-chemical .aiStep strong {
font-size: 13px;
}
#dreamz-chemical .aiStep span {
font-size: 11px;
}
#dreamz-chemical .aiStep::after {
display: none;
}
#dreamz-chemical .outcomeGrid,
#dreamz-chemical .challengeGrid,
#dreamz-chemical .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .outcome {
padding: 24px;
}
#dreamz-chemical .outcome strong {
font-size: 22px;
}
#dreamz-chemical .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-chemical .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-chemical .featureList,
#dreamz-chemical .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .featureItem {
font-size: 13px;
}
#dreamz-chemical .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-chemical .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-chemical .panelHead {
padding: 15px 13px;
}
#dreamz-chemical .panelHead>strong {
font-size: 12px;
}
#dreamz-chemical .panelBody {
padding: 14px;
}
#dreamz-chemical .productPanel {
border-radius: 16px;
}
#dreamz-chemical .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-chemical .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-chemical .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-chemical .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-chemical .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-chemical .deal strong {
font-size: 10px;
}
#dreamz-chemical .deal small {
font-size: 9px;
}
#dreamz-chemical .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-chemical .mobileWorkspace {
gap: 12px;
}
#dreamz-chemical .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-chemical .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-chemical .sideTile {
padding: 10px;
}
#dreamz-chemical .sideTile strong {
font-size: 10px;
}
#dreamz-chemical .sideTile p {
font-size: 9px;
}
#dreamz-chemical .mobileHeader strong {
font-size: 15px;
}
#dreamz-chemical .mobileAccount strong {
font-size: 10px;
}
#dreamz-chemical .mobileAccount small {
font-size: 7px;
}
#dreamz-chemical .phoneDevice .rowIcon {
display: none;
}
#dreamz-chemical .quoteTable th,
#dreamz-chemical .quoteTable td {
padding: 12px 4px;
}
#dreamz-chemical .quoteTable strong {
font-size: 10px;
}
#dreamz-chemical .quoteTable small {
font-size: 8px;
}
#dreamz-chemical .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-chemical .docHeader strong {
font-size: 17px;
}
#dreamz-chemical .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-chemical .miniFlow span {
padding: 6px;
}
#dreamz-chemical .rowCopy strong {
font-size: 10px;
}
#dreamz-chemical .rowCopy small {
font-size: 8px;
}
#dreamz-chemical .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-chemical .miniStats {
gap: 7px;
}
#dreamz-chemical .miniStats>div {
padding: 9px;
}
#dreamz-chemical .miniStats strong {
font-size: 18px;
}
#dreamz-chemical .miniStats span {
font-size: 8px;
}
#dreamz-chemical .collectionStats>div {
padding: 13px;
}
#dreamz-chemical .collectionStats strong {
font-size: 24px;
}
#dreamz-chemical .customerHeader strong {
font-size: 17px;
}
#dreamz-chemical .customerFacts>div {
padding: 10px;
}
#dreamz-chemical .customerFacts strong {
font-size: 12px;
}
#dreamz-chemical .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-chemical .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-chemical .ratingItem:last-child {
grid-column: 1/-1;
}
#dreamz-chemical .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-chemical .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-chemical .integration small {
font-size: 9px;
}
#dreamz-chemical .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-chemical .ctaPanel p {
font-size: 15px;
}
#dreamz-chemical .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-chemical .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-chemical .contextSection {
padding: 0 0 24px;
}
#dreamz-chemical .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-chemical .wrap {
width: calc(100% - 24px);
}
#dreamz-chemical .brand {
font-size: 18px;
}
#dreamz-chemical .brandMark {
width: 25px;
height: 25px;
}
#dreamz-chemical .hero h1 {
font-size: 38px;
}
#dreamz-chemical .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-chemical .copy h2 {
font-size: 31px;
}
#dreamz-chemical .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-chemical .phoneDevice {
width: 210px;
}
#dreamz-chemical .phoneDevice .rowIcon {
display: grid;
}
#dreamz-chemical .mobileSide {
gap: 8px;
}
#dreamz-chemical .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-chemical .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-chemical .sideTile p {
margin: 0;
}
#dreamz-chemical .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-chemical .collectionStats strong {
font-size: 21px;
}
#dreamz-chemical .inventoryIntro strong {
font-size: 14px;
}
#dreamz-chemical .dataRow {
gap: 7px;
}
#dreamz-chemical .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-chemical .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-chemical {
scroll-behavior: auto;
}
#dreamz-chemical *,
#dreamz-chemical *::before,
#dreamz-chemical *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-chemical {
background: var(--sky-2);
}
#dreamz-chemical .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-chemical .hero .eyebrow {
max-width: 100%;
}
#dreamz-chemical .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-chemical .ganttIllustration,
#dreamz-chemical .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-chemical .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-chemical .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-chemical .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-chemical .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-chemical .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-chemical .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-chemical .comparisonTable th,
#dreamz-chemical .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .comparisonTable th:first-child {
width: 23%;
}
#dreamz-chemical .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-chemical .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-chemical .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-chemical .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-chemical .card,
#dreamz-chemical .proofCard,
#dreamz-chemical .productPanel,
#dreamz-chemical .outcome,
#dreamz-chemical .benefit {
box-shadow: none;
}
#dreamz-chemical .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-chemical .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-chemical .hero .eyebrow {
font-size: 10px;
}
#dreamz-chemical .comparisonTable {
font-size: 11px;
}
#dreamz-chemical .comparisonTable th,
#dreamz-chemical .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-chemical .comparisonTable th:first-child {
width: 24%;
}
#dreamz-chemical .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-chemical .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-chemical .hero h1 {
font-size: 38px;
}
}
#dreamz-chemical .scheduleIllustration,
#dreamz-chemical .analyticsIllustration,
#dreamz-chemical .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-chemical .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-chemical .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-chemical .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-chemical .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-chemical .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-chemical .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-chemical .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-chemical .darkSection .textCta {
color: var(--yellow);
}
#dreamz-chemical .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-chemical .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-chemical .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-chemical .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-chemical .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-chemical .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-chemical .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-chemical .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-chemical .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-chemical .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-chemical .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-chemical .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-chemical .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-chemical .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-chemical .phoneDevice {
max-width: 100%;
}
#dreamz-chemical .heroPills {
line-height: 1.55;
}
#dreamz-chemical .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-chemical .plantFacts {
gap: 7px;
}
#dreamz-chemical .plantFacts>div {
padding: 9px;
}
#dreamz-chemical .plantFacts strong {
font-size: 11px;
}
#dreamz-chemical .scanSummary {
padding: 12px;
}
#dreamz-chemical .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-chemical .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-chemical .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-chemical .phoneDevice .rowIcon {
display: grid;
}
#dreamz-chemical .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-chemical .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-chemical .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-chemical .sideTile strong {
font-size: 12px;
}
#dreamz-chemical .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-chemical .topbar,
#dreamz-chemical .heroActions,
#dreamz-chemical .finalActions,
#dreamz-chemical .contextSection,
#dreamz-chemical .valueCtaSection {
display: none;
}
#dreamz-chemical section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-chemical .hero {
padding-top: 20px;
}
}
#dreamz-chemical {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-chemical h1,
#dreamz-chemical h2,
#dreamz-chemical h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
#dreamz-chemical p {
margin: 0;
}
#dreamz-chemical main {
display: block;
}
#dreamz-chemical .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-chemical .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-chemical .heroAccent {
color: var(--black);
}
#dreamz-chemical .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-chemical .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-chemical .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-chemical .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-chemical .microcopy {
margin-top: 14px;
}
#dreamz-chemical .heroPills {
margin-top: 13px;
}
#dreamz-chemical .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-chemical .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-chemical .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-chemical .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-chemical .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-chemical .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-chemical .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-chemical .clientBand {
padding: 24px 0;
}
#dreamz-chemical .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-chemical .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-chemical .logoBox.wide {
font-size: 15px;
}
#dreamz-chemical .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-chemical .sectionHead p {
margin: 17px 0 0;
}
#dreamz-chemical .copy p {
margin: 16px 0 0;
}
#dreamz-chemical .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-chemical .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-chemical .aiJourney {
background: var(--black);
}
#dreamz-chemical .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-chemical .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-chemical .productPanel {
border-radius: 18px;
}
#dreamz-chemical .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-chemical .panelHead>strong {
font-size: 13px;
}
#dreamz-chemical .sampleTag {
font-size: 9px;
}
#dreamz-chemical .panelBody {
padding: 21px;
}
#dreamz-chemical .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-chemical .docHeader {
padding-bottom: 16px;
}
#dreamz-chemical .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-chemical .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-chemical .smallLabel {
font-size: 9px;
}
#dreamz-chemical .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-chemical .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-chemical .dataRow {
padding: 14px 0;
}
#dreamz-chemical .statusPill {
font-size: 8px;
}
#dreamz-chemical .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-chemical .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-chemical .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-chemical .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-chemical .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-chemical .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-chemical .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-chemical .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-chemical .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-chemical .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-chemical .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-chemical .hierarchy strong {
color: var(--navy);
}
#dreamz-chemical .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-chemical .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-chemical .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-chemical .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-chemical .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-chemical .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-chemical .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-chemical .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-chemical .mobileAccount small {
font-size: 9px;
}
#dreamz-chemical .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-chemical .sideTile strong {
font-size: 12px;
}
#dreamz-chemical .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-chemical .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-chemical .mobileAction {
font-size: 9px;
}
#dreamz-chemical .journeyRow strong {
font-size: 13px;
}
#dreamz-chemical .journeyRow small {
font-size: 11px;
}
#dreamz-chemical .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-chemical .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-chemical .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-chemical .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-chemical .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-chemical .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-chemical .utilityReadout small {
font-size: 12px;
}
#dreamz-chemical .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-chemical .darkSection {
background: var(--black);
}
#dreamz-chemical .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-chemical .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-chemical .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-chemical .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-chemical .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-chemical .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-chemical .assistantHead small {
font-size: 11px;
}
#dreamz-chemical .assistantNote {
font-size: 11px;
}
#dreamz-chemical .reportTags span {
font-size: 10px;
}
#dreamz-chemical .card p {
margin: 12px 0 0;
}
#dreamz-chemical .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-chemical .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-chemical .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-chemical .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-chemical .cards>.card p {
padding-bottom: 22px;
}
#dreamz-chemical .benefitBand {
background: var(--black);
}
#dreamz-chemical .benefit {
background: var(--black-soft);
}
#dreamz-chemical .inlineCta h3 {
font-size: 20px;
}
#dreamz-chemical .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-chemical .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-chemical .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-chemical .valueCtaSection {
padding: 32px 0;
}
#dreamz-chemical .proofCard p {
margin-top: 15px;
}
#dreamz-chemical .proofCard h3 {
font-size: 23px;
}
#dreamz-chemical .integrationNote {
margin-top: 23px;
}
#dreamz-chemical .ctaPanel {
background: var(--black);
}
#dreamz-chemical .ctaPanel p {
margin-top: 16px;
}
#dreamz-chemical .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-chemical .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-chemical a:hover {
text-decoration: none;
}
#dreamz-chemical .textCta:hover {
color: var(--navy);
}
#dreamz-chemical .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-chemical .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-chemical .hero h1 {
font-size: 49px;
}
#dreamz-chemical .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-chemical .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-chemical .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-chemical .hero h1 {
font-size: 58px;
}
#dreamz-chemical .heroVisual {
max-width: 548px;
}
#dreamz-chemical .hero .lead {
max-width: 700px;
}
#dreamz-chemical .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-chemical .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-chemical .logoBox:last-child {
grid-column: auto;
}
#dreamz-chemical .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-chemical .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-chemical .inlineCtaActions .button {
flex: 1;
}
#dreamz-chemical .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-chemical .hero {
padding: 28px 0 40px;
}
#dreamz-chemical .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-chemical .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-chemical .heroActions {
gap: 10px;
}
#dreamz-chemical .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-chemical .breadcrumb {
margin-bottom: 21px;
}
#dreamz-chemical .hero .eyebrow {
font-size: 11px;
}
#dreamz-chemical .heroVisual {
max-width: 480px;
}
#dreamz-chemical .heroPills {
row-gap: 9px;
}
#dreamz-chemical .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-chemical .heroPills span+span {
padding-left: 7px;
}
#dreamz-chemical .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-chemical .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-chemical .clientBand {
padding: 25px 0;
}
#dreamz-chemical .copy h2 {
font-size: 33px;
}
#dreamz-chemical .panelBody {
padding: 16px;
}
#dreamz-chemical .panelHead {
padding: 15px;
}
#dreamz-chemical .panelHead>strong {
font-size: 12px;
}
#dreamz-chemical .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-chemical .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-chemical .docHeader strong {
font-size: 18px;
}
#dreamz-chemical .docHeader small {
font-size: 10px;
}
#dreamz-chemical .rowCopy strong {
font-size: 11px;
}
#dreamz-chemical .rowCopy small {
font-size: 10px;
}
#dreamz-chemical .miniStats {
gap: 7px;
}
#dreamz-chemical .miniStats strong {
font-size: 21px;
}
#dreamz-chemical .miniStats span {
font-size: 9px;
}
#dreamz-chemical .miniStats>div {
padding: 10px 8px;
}
#dreamz-chemical .plantFacts {
gap: 8px;
}
#dreamz-chemical .plantFacts>div {
padding: 10px;
}
#dreamz-chemical .plantFacts strong {
font-size: 11px;
}
#dreamz-chemical .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-chemical .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-chemical .utilityReadout span {
font-size: 8px;
}
#dreamz-chemical .utilityReadout strong {
font-size: 24px;
}
#dreamz-chemical .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-chemical .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-chemical .comparisonTable {
font-size: 11px;
}
#dreamz-chemical .comparisonTable th,
#dreamz-chemical .comparisonTable td {
padding: 13px 9px;
}
#dreamz-chemical .contextSection {
padding: 0 0 22px;
}
#dreamz-chemical .valueCtaSection {
padding: 25px 0;
}
#dreamz-chemical .inlineCtaActions {
flex-direction: column;
}
#dreamz-chemical .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-chemical .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-chemical .phoneDevice {
width: 222px;
}
#dreamz-chemical .phoneDevice .rowIcon {
display: grid;
}
#dreamz-chemical .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-chemical .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-chemical .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-chemical .sideTile p {
margin: 0;
}
#dreamz-chemical .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-chemical .dataRow {
gap: 8px;
}
#dreamz-chemical .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-chemical .miniStats strong {
font-size: 19px;
}
#dreamz-chemical .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-chemical .heroActions .button {
width: 100%;
}
#dreamz-chemical .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-chemical .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-chemical .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-chemical .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-chemical .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-chemical .aiStep span {
font-size: 13px;
}
#dreamz-chemical .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-chemical {
background: var(--white);
}
#dreamz-chemical img {
display: block;
max-width: 100%;
}
#dreamz-chemical h1,
#dreamz-chemical h2,
#dreamz-chemical h3 {
text-wrap: balance;
}
#dreamz-chemical .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-chemical .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-chemical .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-chemical .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-chemical .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-chemical .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-chemical .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-chemical .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-chemical .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-chemical .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-chemical .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-chemical .industryIntro {
padding: 78px 0 66px;
}
#dreamz-chemical .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-chemical .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-chemical .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-chemical .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-chemical .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-chemical .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-chemical .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-chemical .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-chemical .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-chemical .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-chemical .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-chemical .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-chemical .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-chemical .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-chemical .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-chemical .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-chemical .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-chemical .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-chemical .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-chemical .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-chemical .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-chemical .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-chemical .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-chemical .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-chemical .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-chemical .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-chemical .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-chemical .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-chemical .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-chemical .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-chemical .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-chemical .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-chemical .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-chemical .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-chemical .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-chemical .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-chemical .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-chemical .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-chemical .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-chemical .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-chemical .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-chemical .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-chemical .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-chemical .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-chemical .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-chemical .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .rfidSpotlight {
background: #fff;
}
#dreamz-chemical .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-chemical .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-chemical .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-chemical .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-chemical .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-chemical .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-chemical .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-chemical .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-chemical .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-chemical .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-chemical .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-chemical .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-chemical .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-chemical .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-chemical .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-chemical .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-chemical .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-chemical .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-chemical .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-chemical .featurePanel {
display: none;
}
#dreamz-chemical .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-chemical .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-chemical .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-chemical .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-chemical .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-chemical .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-chemical .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-chemical .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-chemical .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-chemical .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-chemical .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-chemical .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-chemical .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-chemical .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-chemical .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-chemical .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-chemical .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-chemical .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-chemical .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-chemical .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-chemical .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-chemical .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-chemical .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-chemical .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-chemical .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-chemical .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-chemical .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-chemical .aiReviewBody {
padding: 18px;
}
#dreamz-chemical .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-chemical .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-chemical .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-chemical .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-chemical .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-chemical .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-chemical .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-chemical .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-chemical .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-chemical .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-chemical .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-chemical .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-chemical .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-chemical .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-chemical .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-chemical .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-chemical .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-chemical .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-chemical .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-chemical .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-chemical .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-chemical .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-chemical .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-chemical .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-chemical .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-chemical .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-chemical .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-chemical .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-chemical .workflowDetails .featureList,
#dreamz-chemical .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-chemical .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-chemical .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-chemical .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-chemical #ch-connected-tools {
background: #fff;
}
#dreamz-chemical #ch-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-chemical .featureTab,
#dreamz-chemical .industryPriority,
#dreamz-chemical summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-chemical .industryIntroHead {
gap: 30px;
}
#dreamz-chemical .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-chemical .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-chemical .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-chemical .factoryWorkflow {
padding: 22px;
}
#dreamz-chemical .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-chemical .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-chemical .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-chemical .industryPriorityGrid {
gap: 14px;
}
#dreamz-chemical .industryPriority {
padding: 22px 19px;
}
#dreamz-chemical .industryPriority h3 {
font-size: 21px;
}
#dreamz-chemical .industryPriority p {
font-size: 12px;
}
#dreamz-chemical .priorityLink {
font-size: 10px;
}
#dreamz-chemical .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-chemical .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-chemical .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-chemical .vedaUseCases>div {
display: block;
}
#dreamz-chemical .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-chemical .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-chemical .featureTabs {
gap: 8px;
}
#dreamz-chemical .featureTab {
min-height: 108px;
}
#dreamz-chemical .featureStage,
#dreamz-chemical .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-chemical .rfidSpotlight .spotlightMedia,
#dreamz-chemical .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-chemical .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-chemical .featurePanel {
min-height: 0;
}
#dreamz-chemical .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-chemical .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-chemical .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-chemical .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-chemical .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-chemical .clientBand {
padding: 22px 0;
}
#dreamz-chemical .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-chemical .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-chemical .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-chemical .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-chemical .industryIntro {
padding: 53px 0;
}
#dreamz-chemical .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-chemical .industryIntroHead>p {
font-size: 14px;
}
#dreamz-chemical .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .industryPriority {
padding: 23px;
}
#dreamz-chemical .industryPriority h3 {
font-size: 24px;
}
#dreamz-chemical .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-chemical .industryPriority p {
font-size: 13px;
}
#dreamz-chemical .priorityLink {
font-size: 11px;
}
#dreamz-chemical .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-chemical .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-chemical .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-chemical .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-chemical .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-chemical .vedaUseCases>div {
display: flex;
}
#dreamz-chemical .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-chemical .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-chemical .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-chemical .vedaMessage.user {
margin-left: 25px;
}
#dreamz-chemical .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-chemical .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-chemical .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-chemical .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-chemical .spotlightHead h2 {
font-size: 32px;
}
#dreamz-chemical .spotlightHead>p {
font-size: 14px;
}
#dreamz-chemical .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-chemical .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-chemical .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-chemical .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-chemical .featurePanel h3 {
font-size: 24px;
}
#dreamz-chemical .featurePanel>p {
font-size: 13px;
}
#dreamz-chemical .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-chemical .spotlightChecks>li {
font-size: 12px;
}
#dreamz-chemical .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-chemical .spotlightActions .button {
width: 100%;
}
#dreamz-chemical .spotlightScope {
font-size: 10px;
}
#dreamz-chemical .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-chemical .mediaTitle strong {
font-size: 11px;
}
#dreamz-chemical .mediaTitle div>span {
font-size: 8px;
}
#dreamz-chemical .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-chemical .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-chemical .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-chemical .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-chemical .aiReviewBody {
padding: 13px;
}
#dreamz-chemical .aiIssue {
padding: 13px;
}
#dreamz-chemical .aiIssue strong {
font-size: 14px;
}
#dreamz-chemical .aiEvidence {
gap: 6px;
}
#dreamz-chemical .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-chemical .aiEvidence strong {
font-size: 9px;
}
#dreamz-chemical .aiEvidence span {
font-size: 7px;
}
#dreamz-chemical .exampleLabel {
font-size: 6px;
}
#dreamz-chemical .factoryWorkflows {
padding: 55px 0;
}
#dreamz-chemical .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-chemical .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-chemical .industryRibbonGrid {
gap: 12px;
}
#dreamz-chemical .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-chemical .spotlightHead h2 {
font-size: 29px;
}
#dreamz-chemical .featureStage {
padding: 19px 13px;
}
#dreamz-chemical .mediaTitle>.icon {
display: none;
}
#dreamz-chemical .exampleLabel {
display: none;
}
#dreamz-chemical .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-chemical .featureTabs {
display: none;
}
#dreamz-chemical .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-chemical .featureStage {
display: block;
}
#dreamz-chemical .featurePanel {
color: #000;
}
}
#dreamz-chemical #ch-predictive-features-1:checked~.featureTabs label[for="ch-predictive-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-predictive-features-1:focus-visible~.featureTabs label[for="ch-predictive-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-predictive-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-chemical #ch-predictive-features-2:checked~.featureTabs label[for="ch-predictive-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-predictive-features-2:focus-visible~.featureTabs label[for="ch-predictive-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-predictive-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-chemical #ch-predictive-features-3:checked~.featureTabs label[for="ch-predictive-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-predictive-features-3:focus-visible~.featureTabs label[for="ch-predictive-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-predictive-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-chemical #ch-predictive-features-4:checked~.featureTabs label[for="ch-predictive-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-predictive-features-4:focus-visible~.featureTabs label[for="ch-predictive-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-predictive-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-chemical #ch-predictive-features-5:checked~.featureTabs label[for="ch-predictive-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-predictive-features-5:focus-visible~.featureTabs label[for="ch-predictive-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-predictive-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-chemical #ch-rfid-features-1:checked~.featureTabs label[for="ch-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-rfid-features-1:focus-visible~.featureTabs label[for="ch-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-chemical #ch-rfid-features-2:checked~.featureTabs label[for="ch-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-rfid-features-2:focus-visible~.featureTabs label[for="ch-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-chemical #ch-rfid-features-3:checked~.featureTabs label[for="ch-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-rfid-features-3:focus-visible~.featureTabs label[for="ch-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-chemical #ch-rfid-features-4:checked~.featureTabs label[for="ch-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-rfid-features-4:focus-visible~.featureTabs label[for="ch-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-chemical #ch-rfid-features-5:checked~.featureTabs label[for="ch-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-rfid-features-5:focus-visible~.featureTabs label[for="ch-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-1:checked~.featureTabs label[for="ch-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-ai-decisions-features-1:focus-visible~.featureTabs label[for="ch-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-2:checked~.featureTabs label[for="ch-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-ai-decisions-features-2:focus-visible~.featureTabs label[for="ch-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-3:checked~.featureTabs label[for="ch-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-ai-decisions-features-3:focus-visible~.featureTabs label[for="ch-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-4:checked~.featureTabs label[for="ch-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-ai-decisions-features-4:focus-visible~.featureTabs label[for="ch-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-5:checked~.featureTabs label[for="ch-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-chemical #ch-ai-decisions-features-5:focus-visible~.featureTabs label[for="ch-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-chemical #ch-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-chemical .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .featureMediaPanels {
min-width: 0;
}
#dreamz-chemical .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-chemical .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-chemical .featureMediaPanels .windowTop strong,
#dreamz-chemical .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-chemical .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-chemical .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-chemical .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-chemical .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-chemical .featureMediaPanels .windowBody>*,
#dreamz-chemical .featureMediaPanels .spectrumGrid>*,
#dreamz-chemical .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-chemical .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-chemical .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-chemical .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-chemical .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-chemical .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-chemical .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-chemical .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-chemical .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-chemical .pin2 {
top: 88px;
right: 88px;
}
#dreamz-chemical .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-chemical .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-chemical .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-chemical .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-chemical .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-chemical .featureMediaPanels .graphNodes .node.n1,
#dreamz-chemical .featureMediaPanels .graphNodes .node.n2,
#dreamz-chemical .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-chemical .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-chemical .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-chemical .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-chemical .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-chemical .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-chemical .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-chemical .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-chemical .freshGraphic * {
box-sizing: border-box;
}
#dreamz-chemical .rfPanel,
#dreamz-chemical .aiInsightCard,
#dreamz-chemical .forecastVisualCard,
#dreamz-chemical .forecastSuggestion,
#dreamz-chemical .knowledgeTile,
#dreamz-chemical .chatConversation,
#dreamz-chemical .trainingSummary,
#dreamz-chemical .moduleCard,
#dreamz-chemical .qualityHeatCard,
#dreamz-chemical .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-chemical .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-chemical .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-chemical .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-chemical .statusPill,
#dreamz-chemical .cardTag,
#dreamz-chemical .forecastSuggestion b,
#dreamz-chemical .moduleCard b,
#dreamz-chemical .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-chemical .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-chemical .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-chemical .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-chemical .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-chemical .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-chemical .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-chemical .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-chemical .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-chemical .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-chemical .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-chemical .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-chemical .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-chemical .dot.good {
background: #298EEC;
}
#dreamz-chemical .dot.warn {
background: #F4A62A;
}
#dreamz-chemical .dot.bad {
background: #EB6B53;
}
#dreamz-chemical .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-chemical .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-chemical .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-chemical .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-chemical .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-chemical .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-chemical .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-chemical .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-chemical .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-chemical .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-chemical .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-chemical .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-chemical .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-chemical .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-chemical .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-chemical .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-chemical .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-chemical .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-chemical .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-chemical .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-chemical .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-chemical .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-chemical .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-chemical .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-chemical .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-chemical .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-chemical .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-chemical .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-chemical .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-chemical .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-chemical .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-chemical .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-chemical .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-chemical .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-chemical .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-chemical .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-chemical .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-chemical .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-chemical .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-chemical .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-chemical .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-chemical .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-chemical .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-chemical .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-chemical .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-chemical .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-chemical .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-chemical .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-chemical .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-chemical .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-chemical .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-chemical .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-chemical .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-chemical .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-chemical .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-chemical .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-chemical .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-chemical .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-chemical .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-chemical .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-chemical .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-chemical .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-chemical .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-chemical .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-chemical .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-chemical .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-chemical .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-chemical .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-chemical .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-chemical .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-chemical .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-chemical .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-chemical .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-chemical .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-chemical .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-chemical .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-chemical .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-chemical .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-chemical .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-chemical .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-chemical .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-chemical .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-chemical .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-chemical .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-chemical .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-chemical .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-chemical .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-chemical .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-chemical .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-chemical .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-chemical .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-chemical .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-chemical .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-chemical .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-chemical .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-chemical .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-chemical .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-chemical .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-chemical .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-chemical .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-chemical .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-chemical .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-chemical .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-chemical .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-chemical .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-chemical .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-chemical .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-chemical .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-chemical .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-chemical .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-chemical .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-chemical .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-chemical .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-chemical .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-chemical .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-chemical .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-chemical .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-chemical .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-chemical .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-chemical .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-chemical .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-chemical .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-chemical .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-chemical .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-chemical .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-chemical .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-chemical .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-chemical .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-chemical .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-chemical .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-chemical .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-chemical .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-chemical .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-chemical .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-chemical .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-chemical .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-chemical .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-chemical .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-chemical .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-chemical .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-chemical .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-chemical .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-chemical .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-chemical .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-chemical .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-chemical .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-chemical .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-chemical .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-chemical .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-chemical .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-chemical .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-chemical .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-chemical .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-chemical .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-chemical .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-chemical .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-chemical .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-chemical .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-chemical .rfTrackLayout,
#dreamz-chemical .rfFlowLayout,
#dreamz-chemical .rfAlertGrid,
#dreamz-chemical .rfCycleLayout,
#dreamz-chemical .rfSitesLayout,
#dreamz-chemical .aiRootLayout,
#dreamz-chemical .aiForecastLayout,
#dreamz-chemical .aiChatLayout,
#dreamz-chemical .aiTrainingLayout,
#dreamz-chemical .aiQualityLayout,
#dreamz-chemical .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-chemical .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-chemical .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-chemical .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-chemical .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-chemical .aiLink {
display: none;
}
}
#dreamz-chemical .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-chemical .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-chemical .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-chemical .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-chemical .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-chemical .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-chemical .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-chemical .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-chemical .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-chemical .mfgHero h1>span {
display: block;
}
#dreamz-chemical .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-chemical .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-chemical .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-chemical .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-chemical .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-chemical .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-chemical .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-chemical .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-chemical .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-chemical .mfgHeroContent {
min-height: 610px;
}
#dreamz-chemical .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-chemical .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-chemical .mfgHeroLead {
font-size: 16px;
}
#dreamz-chemical .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-chemical .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-chemical .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-chemical .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-chemical .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-chemical .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-chemical .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-chemical .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-chemical .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-chemical .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-chemical .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-chemical .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-chemical .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-chemical .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-chemical .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-chemical .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-chemical .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-chemical .mfgHero {
background: #fff;
color: #000;
}
#dreamz-chemical .mfgHeroScene,
#dreamz-chemical .mfgHeroActions {
display: none;
}
#dreamz-chemical .mfgHeroContent {
min-height: 0;
}
#dreamz-chemical .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-chemical .mfgHero h1,
#dreamz-chemical .mfgHero h1 .mfgHeroAccent,
#dreamz-chemical .mfgHero p {
color: #000;
}
}
#dreamz-chemical #ch-rfid .featureStage,
#dreamz-chemical #ch-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-chemical .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-chemical .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-chemical .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-chemical .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-chemical .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-chemical .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-chemical .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-chemical .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-chemical .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-chemical .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-chemical .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-chemical .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-chemical .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-chemical .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-chemical .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-chemical .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-chemical .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-chemical .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-chemical .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-chemical .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-chemical .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-chemical .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-chemical .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-chemical .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-chemical .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-chemical .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-chemical .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-chemical .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-chemical .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-chemical .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-chemical .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-chemical .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-chemical .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-chemical .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-chemical .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-chemical .mfgGallery .flowArrow {
display: none;
}
#dreamz-chemical .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-chemical .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-chemical .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-chemical .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-chemical .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-chemical .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-chemical .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-chemical .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-chemical .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-chemical .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-chemical .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-chemical .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-chemical .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-chemical .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-chemical .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-chemical .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-chemical .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-chemical .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-chemical .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-chemical .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-chemical .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-chemical .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-chemical .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-chemical .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-chemical .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-chemical .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-chemical .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-chemical .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-chemical .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-chemical .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-chemical .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-chemical .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-chemical .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-chemical .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-chemical .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-chemical .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-chemical .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-chemical .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-chemical .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-chemical .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-chemical .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-chemical .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-chemical .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-chemical .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-chemical .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-chemical .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-chemical .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-chemical .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-chemical .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-chemical .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-chemical .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-chemical .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-chemical .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-chemical .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-chemical .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-chemical .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-chemical .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-chemical .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-chemical .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-chemical .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-chemical .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-chemical .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-chemical .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-chemical .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-chemical .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-chemical .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-chemical .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-chemical .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-chemical .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-chemical .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-chemical .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-chemical .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-chemical .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-chemical .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-chemical .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-chemical .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-chemical .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-chemical .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-chemical .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-chemical .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-chemical .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-chemical .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-chemical .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-chemical .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-chemical .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-chemical .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-chemical .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-chemical #ch-rfid .featureStage,
#dreamz-chemical #ch-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-chemical #ch-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-chemical .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-chemical #ch-rfid .featureStage,
#dreamz-chemical #ch-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-chemical .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-chemical .mfgGallery .freshWindow {
height: auto;
}
#dreamz-chemical .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-chemical .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-chemical .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-chemical .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-chemical .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-chemical .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-chemical .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-chemical .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-chemical .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-chemical .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-chemical .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-chemical .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-chemical .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-chemical .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-chemical .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-chemical .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-chemical .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-chemical .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-chemical .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-chemical .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-chemical .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-chemical .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-chemical .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-chemical .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-chemical .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-chemical .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-chemical .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-chemical .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-chemical .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-chemical .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-chemical .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-chemical .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-chemical .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-chemical .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-chemical .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-chemical .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-chemical .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-chemical .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-chemical .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-chemical .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-chemical .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-chemical .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-chemical .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-chemical .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-chemical .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-chemical .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-chemical .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-chemical .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-chemical .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-chemical .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-chemical .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-chemical .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-chemical .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-chemical .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-chemical .chemVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-chemical .chemGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-chemical .chemIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-chemical .chemStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-chemical .chemVisualGallery>.chemGraphic {
display: none;
}
#dreamz-chemical #ch-predictive .featureStage,
#dreamz-chemical #ch-rfid .featureStage,
#dreamz-chemical #ch-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-chemical #ch-rfid .chemVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-chemical #ch-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-chemical .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-chemical .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-chemical .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-chemical .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-chemical .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-chemical #ch-predictive .featureStage,
#dreamz-chemical #ch-rfid .featureStage,
#dreamz-chemical #ch-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-chemical #ch-rfid .chemVisualGallery,
#dreamz-chemical #ch-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-chemical .mfgHeroScene {
height: 290px;
}
#dreamz-chemical #ch-predictive .featureStage,
#dreamz-chemical #ch-rfid .featureStage,
#dreamz-chemical #ch-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-chemical .chemVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-chemical .chemVisualGallery>.chemGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-chemical #ch-predictive-features-1:checked~.featureStage .chemVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-chemical #ch-predictive-features-2:checked~.featureStage .chemVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-chemical #ch-predictive-features-3:checked~.featureStage .chemVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-chemical #ch-predictive-features-4:checked~.featureStage .chemVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-chemical #ch-predictive-features-5:checked~.featureStage .chemVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-chemical #ch-rfid-features-1:checked~.featureStage .chemVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-chemical #ch-rfid-features-2:checked~.featureStage .chemVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-chemical #ch-rfid-features-3:checked~.featureStage .chemVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-chemical #ch-rfid-features-4:checked~.featureStage .chemVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-chemical #ch-rfid-features-5:checked~.featureStage .chemVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-1:checked~.featureStage .chemVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-2:checked~.featureStage .chemVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-3:checked~.featureStage .chemVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-4:checked~.featureStage .chemVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-chemical #ch-ai-decisions-features-5:checked~.featureStage .chemVisualGallery> :nth-child(5) {
display: block;
} #dreamz-chemical .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-chemical .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-chemical .chemIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-chemical .chemGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-chemical .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-chemical .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-chemical .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-chemical .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-chemical .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
@media(max-width:767px) {
#dreamz-chemical .featureContent {
order: 2;
}
#dreamz-chemical .mfgHeroScene {
display: none;
}
}
#dreamz-chemical .nav-link {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5) !important;
}  #dreamz-property .industryIntroHead.compact,
#dreamz-property .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-property .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-property .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-property .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-property .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-property .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-property .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-property .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-property .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-property .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-property .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-property .windowDots {
display: flex;
gap: 5px;
}
#dreamz-property .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-property .windowBody {
padding: 16px;
}
#dreamz-property .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-property .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-property .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-property .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-property .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-property .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-property .chartGridLine.l1 {
top: 34px;
}
#dreamz-property .chartGridLine.l2 {
top: 65px;
}
#dreamz-property .chartGridLine.l3 {
top: 96px;
}
#dreamz-property .chartGridLine.l4 {
top: 127px;
}
#dreamz-property .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-property .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-property .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-property .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-property .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-property .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-property .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-property .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-property .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-property .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-property .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-property .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-property .noteCard p,
#dreamz-property .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-property .alertStack {
display: grid;
gap: 10px;
}
#dreamz-property .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-property .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-property .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-property .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-property .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-property .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-property .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-property .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-property .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-property .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-property .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-property .scheduleBoard h4,
#dreamz-property .todoBoard h4,
#dreamz-property .siteBoard h4,
#dreamz-property .chatPanel h4,
#dreamz-property .lessonPanel h4,
#dreamz-property .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-property .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-property .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-property .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-property .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-property .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-property .taskRow:last-child {
border-bottom: 0;
}
#dreamz-property .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-property .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-property .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-property .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-property .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-property .inventoryTable th,
#dreamz-property .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-property .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-property .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-property .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-property .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-property .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-property .phoneBody {
padding: 12px;
}
#dreamz-property .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-property .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-property .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-property .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-property .progressList {
display: grid;
gap: 10px;
}
#dreamz-property .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-property .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-property .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-property .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-property .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-property .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-property .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-property .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-property .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-property .pin1 {
top: 56px;
left: 58px;
}
#dreamz-property .pin2 {
top: 88px;
right: 88px;
}
#dreamz-property .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-property .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-property .siteRow:last-child {
border-bottom: 0;
}
#dreamz-property .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-property .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-property .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-property .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-property .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-property .graphNodes:before,
#dreamz-property .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-property .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-property .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-property .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-property .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-property .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-property .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-property .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-property .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-property .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-property .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-property .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-property .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-property .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-property .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-property .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-property .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-property .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-property .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-property .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-property .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-property .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-property .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-property .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-property .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-property .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-property .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-property .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-property .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-property .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-property .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-property .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-property .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-property .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-property #property-maintenance-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-property #property-maintenance-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-property #property-maintenance-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-property #property-maintenance-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-property #property-maintenance-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-property #property-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-property #property-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-property #property-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-property #property-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-property #property-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-property #property-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-property #property-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-property #property-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-property #property-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-property #property-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-property #property-maintenance-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-property #property-maintenance-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-property #property-maintenance-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-property #property-maintenance-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-property #property-maintenance-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-property #property-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-property #property-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-property #property-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-property #property-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-property #property-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-property #property-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-property #property-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-property #property-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-property #property-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-property #property-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-property .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-property .featureMediaPanels {
min-height: 0;
}
#dreamz-property .inventorySplit,
#dreamz-property .forecastGrid,
#dreamz-property .siteGrid,
#dreamz-property .spectrumGrid,
#dreamz-property .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-property .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-property .metricGrid,
#dreamz-property .lessonCards,
#dreamz-property .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-property .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-property .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-property {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-property * {
box-sizing: border-box;
}
#dreamz-property {
scroll-behavior: smooth;
}
#dreamz-property {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-property a {
color: inherit;
text-decoration: none;
}
#dreamz-property .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-property .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-property .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-property .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-property .brand span {
color: var(--brand);
}
#dreamz-property .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-property .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-property .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-property .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-property .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-property .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-property .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-property .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-property h1,
#dreamz-property h2,
#dreamz-property h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
#dreamz-property h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
#dreamz-property h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
}
#dreamz-property h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-property .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-property .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-property .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-property .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-property .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-property .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-property .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-property .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-property .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-property .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-property .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-property .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-property .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-property .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-property .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-property .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-property .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-property .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-property .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-property .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-property .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-property .ratingItem span {
color: #CFCFCF;
font-size: 11px;
} #dreamz-property .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-property .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-property .aiJourney h2 {
color: #fff;
}
#dreamz-property .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-property .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-property .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-property .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-property .aiStep:last-child::after {
display: none;
}
#dreamz-property .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-property .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-property .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-property .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-property .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-property .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-property .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-property .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-property .capability {
background: #fff;
}
#dreamz-property .capability.alt {
background: var(--sky-2);
}
#dreamz-property .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-property .twoCol.reverse .visual {
order: 2;
}
#dreamz-property .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-property .visual .placeholder {
min-height: 355px;
}
#dreamz-property .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-property .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-property details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-property details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-property details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-property details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-property details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-property details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-property .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-property .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-property .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-property .darkSection h2,
#dreamz-property .darkSection h3 {
color: #fff;
}
#dreamz-property .darkSection .sectionHead p,
#dreamz-property .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-property .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-property .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-property .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-property .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-property .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-property .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-property .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-property .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-property .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-property .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-property .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-property .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-property .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-property .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-property .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-property .benefitBand h2 {
color: #fff;
}
#dreamz-property .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-property .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-property .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-property .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-property .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-property .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-property .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-property .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-property .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-property .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-property .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-property .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-property .faq {
max-width: 900px;
}
#dreamz-property details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
#dreamz-property summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
#dreamz-property details p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-property .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-property .ctaPanel h2 {
color: #fff;
}
#dreamz-property .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-property .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-property .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-property .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-property .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-property .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-property .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-property .inlineCta.dark h3 {
color: #fff;
}
#dreamz-property .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-property .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-property .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-property .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-property .button.yellow:hover {
background: #FFD84D;
}
#dreamz-property .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-property .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-property .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-property .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-property footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-property .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-property .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-property .heroGrid,
#dreamz-property .twoCol,
#dreamz-property .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-property .twoCol.reverse .visual {
order: initial;
}
#dreamz-property .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-property .ratingGrid,
#dreamz-property .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-property .ratingLead,
#dreamz-property .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-property .aiStep:nth-child(3)::after,
#dreamz-property .aiStep:last-child::after {
display: none;
}
#dreamz-property .outcomeGrid,
#dreamz-property .challengeGrid,
#dreamz-property .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-property .cards,
#dreamz-property .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-property .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-property .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-property .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-property .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-property .hero {
padding: 58px 0 52px;
}
#dreamz-property h1 {
font-size: 44px;
}
#dreamz-property .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-property .aiStep::after {
display: none;
}
#dreamz-property .logoRow,
#dreamz-property .ratingGrid,
#dreamz-property .awardGrid,
#dreamz-property .outcomeGrid,
#dreamz-property .challengeGrid,
#dreamz-property .benefitGrid,
#dreamz-property .cards,
#dreamz-property .proofCards,
#dreamz-property .integrationGrid,
#dreamz-property .featureList {
grid-template-columns: 1fr;
}
#dreamz-property .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-property .ctaPanel {
padding: 34px 24px;
}
#dreamz-property .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-property .inlineCtaActions {
width: 100%;
}
#dreamz-property .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-property {
--muted: #526A7C;
--shadow: none;
}
#dreamz-property {
background: var(--sky-2);
}
#dreamz-property p {
margin-bottom: 0;
}
#dreamz-property [id] {
scroll-margin-top: 94px;
}
#dreamz-property svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-property .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-property .darkSection h2,
#dreamz-property .darkSection h3,
#dreamz-property .aiJourney h2,
#dreamz-property .benefitBand h2,
#dreamz-property .ctaPanel h2,
#dreamz-property .inlineCta.dark h3 {
color: #fff;
}
#dreamz-property .wrap>*,
#dreamz-property .heroGrid>*,
#dreamz-property .twoCol>*,
#dreamz-property .ctaPanel>* {
min-width: 0;
}
#dreamz-property .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-property .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-property .skipLink:focus {
transform: none;
}
#dreamz-property a:focus-visible,
#dreamz-property summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-property .darkSection a:focus-visible,
#dreamz-property .darkSection summary:focus-visible,
#dreamz-property .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-property .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-property .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-property .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-property .brandName>span {
color: var(--brand-dark);
}
#dreamz-property .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-property .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-property .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-property .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-property .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-property .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-property .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-property .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-property .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-property .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-property .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-property .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-property .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-property .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-property .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-property .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-property .clientBand {
padding: 27px 0;
}
#dreamz-property .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-property .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-property .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-property .logoBox.wide {
font-size: 12px;
}
#dreamz-property .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-property h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-property .sectionHead {
margin-bottom: 36px;
}
#dreamz-property .eyebrow {
line-height: 1.5;
}
#dreamz-property .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-property .aiStep {
min-height: 162px;
}
#dreamz-property .aiStep strong {
line-height: 1.35;
}
#dreamz-property .aiStep span {
line-height: 1.65;
}
#dreamz-property .aiCallout {
margin-top: 24px;
}
#dreamz-property .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-property .outcome>.icon {
color: var(--navy);
}
#dreamz-property .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-property .awardItem>.icon {
color: var(--navy);
}
#dreamz-property .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-property .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-property .twoCol.reverse .visual {
order: -1;
}
#dreamz-property .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-property .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-property .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-property .featureList {
gap: 13px 18px;
}
#dreamz-property .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-property .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-property .check .icon {
width: 14px;
height: 14px;
}
#dreamz-property details.capabilityMore {
margin-bottom: 0;
}
#dreamz-property .capabilityMore summary {
min-height: 34px;
}
#dreamz-property .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-property .textCta {
font-size: 14px;
}
#dreamz-property .visual {
min-width: 0;
}
#dreamz-property .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-property .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-property .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-property .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-property .panelBody {
padding: 20px;
}
#dreamz-property .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-property .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-property .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-property .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-property .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-property .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-property .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-property .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-property .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-property .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-property .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-property .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-property .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-property .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-property .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-property .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-property .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-property .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-property .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-property .dataRow:last-child {
border-bottom: 0;
}
#dreamz-property .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-property .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-property .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-property .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-property .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-property .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-property .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-property .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-property .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-property .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-property .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-property .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-property .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-property .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-property .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-property .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-property .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-property .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-property .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-property .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-property .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-property .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-property .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-property .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-property .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-property .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-property .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-property .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-property .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-property .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-property .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-property .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-property .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-property .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-property .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-property .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-property .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-property .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-property .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-property .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-property .promptList {
display: grid;
gap: 10px;
}
#dreamz-property .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-property .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-property .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-property .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-property .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-property .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-property .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-property .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-property .quoteTable th,
#dreamz-property .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-property .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-property .quoteTable td:first-child {
width: 64%;
}
#dreamz-property .quoteTable th:last-child,
#dreamz-property .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-property .quoteTable strong {
font-size: 11px;
}
#dreamz-property .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-property .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-property .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-property .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-property .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-property .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-property .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-property .orderJourney {
margin: 20px 0;
}
#dreamz-property .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-property .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-property .journeyRow:last-child:before {
display: none;
}
#dreamz-property .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-property .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-property .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-property .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-property .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-property .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-property .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-property .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-property .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-property .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-property .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-property .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-property .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-property .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-property .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-property .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-property .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-property .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-property .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-property .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-property .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-property .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-property .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-property .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-property .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-property .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-property .customerTimeline strong {
color: #fff;
}
#dreamz-property .customerTimeline small {
color: #BFBFBF;
}
#dreamz-property .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-property .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-property .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-property .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-property .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-property .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-property .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-property .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-property .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-property .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-property .chartTitle strong {
font-size: 12px;
}
#dreamz-property .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-property .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-property .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-property .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-property .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-property .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-property .inlineCtaActions {
max-width: 42%;
}
#dreamz-property .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-property .inlineCta h3 {
line-height: 1.35;
}
#dreamz-property .card {
box-shadow: none;
}
#dreamz-property .cardIcon {
box-shadow: none;
}
#dreamz-property .card h3 {
font-size: 22px;
}
#dreamz-property .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-property .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-property .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-property .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-property .ratingBand {
padding: 34px 0;
}
#dreamz-property .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-property .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-property .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-property .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-property .ratingItem:first-child {
border-left: 0;
}
#dreamz-property .proofCard h3 {
font-size: 23px;
}
#dreamz-property .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-property .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-property .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-property .integration {
min-height: 98px;
}
#dreamz-property .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-property .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-property .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-property .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-property .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-property .finalActions {
display: grid;
gap: 11px;
}
#dreamz-property .finalActions .button {
white-space: nowrap;
}
#dreamz-property .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-property .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-property .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-property .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-property .heroGrid {
gap: 30px;
}
#dreamz-property .twoCol {
gap: 32px;
}
#dreamz-property .panelBody {
padding: 16px;
}
#dreamz-property .panelHead {
padding: 16px;
}
#dreamz-property .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-property .pipelineColumns {
gap: 7px;
}
#dreamz-property .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-property .heroGrid,
#dreamz-property .twoCol,
#dreamz-property .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .heroGrid {
gap: 36px;
}
#dreamz-property .hero h1 {
max-width: 730px;
}
#dreamz-property .hero .lead {
max-width: 690px;
}
#dreamz-property .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-property .twoCol {
gap: 34px;
}
#dreamz-property .twoCol.reverse .visual {
order: initial;
}
#dreamz-property .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-property .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-property .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-property .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-property .ratingSectionGrid {
gap: 20px;
}
#dreamz-property .inlineCta {
align-items: flex-start;
}
#dreamz-property .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-property .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-property .card {
padding: 22px;
}
#dreamz-property .card h3 {
font-size: 21px;
}
#dreamz-property .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-property .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-property .cards,
#dreamz-property .proofCards {
grid-template-columns: 1fr;
}
#dreamz-property .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-property .inlineCta {
flex-direction: column;
}
#dreamz-property .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-property .inlineCtaActions .button {
flex: 1;
}
#dreamz-property .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-property .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-property .wrap {
width: calc(100% - 32px);
}
#dreamz-property [id] {
scroll-margin-top: 82px;
}
#dreamz-property .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-property .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-property .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-property .hero {
padding: 51px 0 48px;
}
#dreamz-property .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-property .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-property .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-property .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-property .hero .microcopy {
font-size: 11px;
}
#dreamz-property .heroPills span {
font-size: 9px;
}
#dreamz-property .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-property .sectionHead p {
font-size: 16px;
}
#dreamz-property .copy h2 {
font-size: 34px;
}
#dreamz-property .copy p {
font-size: 15px;
}
#dreamz-property .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-property .logoBox {
min-height: 53px;
}
#dreamz-property .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-property .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-property .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-property .aiStep strong {
font-size: 13px;
}
#dreamz-property .aiStep span {
font-size: 11px;
}
#dreamz-property .aiStep::after {
display: none;
}
#dreamz-property .outcomeGrid,
#dreamz-property .challengeGrid,
#dreamz-property .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-property .outcome {
padding: 24px;
}
#dreamz-property .outcome strong {
font-size: 22px;
}
#dreamz-property .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-property .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-property .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-property .featureList,
#dreamz-property .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-property .featureItem {
font-size: 13px;
}
#dreamz-property .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-property .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-property .panelHead {
padding: 15px 13px;
}
#dreamz-property .panelHead>strong {
font-size: 12px;
}
#dreamz-property .panelBody {
padding: 14px;
}
#dreamz-property .productPanel {
border-radius: 16px;
}
#dreamz-property .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-property .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-property .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-property .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-property .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-property .deal strong {
font-size: 10px;
}
#dreamz-property .deal small {
font-size: 9px;
}
#dreamz-property .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-property .mobileWorkspace {
gap: 12px;
}
#dreamz-property .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-property .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-property .sideTile {
padding: 10px;
}
#dreamz-property .sideTile strong {
font-size: 10px;
}
#dreamz-property .sideTile p {
font-size: 9px;
}
#dreamz-property .mobileHeader strong {
font-size: 15px;
}
#dreamz-property .mobileAccount strong {
font-size: 10px;
}
#dreamz-property .mobileAccount small {
font-size: 7px;
}
#dreamz-property .phoneDevice .rowIcon {
display: none;
}
#dreamz-property .quoteTable th,
#dreamz-property .quoteTable td {
padding: 12px 4px;
}
#dreamz-property .quoteTable strong {
font-size: 10px;
}
#dreamz-property .quoteTable small {
font-size: 8px;
}
#dreamz-property .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-property .docHeader strong {
font-size: 17px;
}
#dreamz-property .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-property .miniFlow span {
padding: 6px;
}
#dreamz-property .rowCopy strong {
font-size: 10px;
}
#dreamz-property .rowCopy small {
font-size: 8px;
}
#dreamz-property .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-property .miniStats {
gap: 7px;
}
#dreamz-property .miniStats>div {
padding: 9px;
}
#dreamz-property .miniStats strong {
font-size: 18px;
}
#dreamz-property .miniStats span {
font-size: 8px;
}
#dreamz-property .collectionStats>div {
padding: 13px;
}
#dreamz-property .collectionStats strong {
font-size: 24px;
}
#dreamz-property .customerHeader strong {
font-size: 17px;
}
#dreamz-property .customerFacts>div {
padding: 10px;
}
#dreamz-property .customerFacts strong {
font-size: 12px;
}
#dreamz-property .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-property .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-property .ratingItem:last-child {
grid-column: 1/-1;
}
#dreamz-property .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-property .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-property .integration small {
font-size: 9px;
}
#dreamz-property .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-property .ctaPanel p {
font-size: 15px;
}
#dreamz-property .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-property .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-property .contextSection {
padding: 0 0 24px;
}
#dreamz-property .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-property .wrap {
width: calc(100% - 24px);
}
#dreamz-property .brand {
font-size: 18px;
}
#dreamz-property .brandMark {
width: 25px;
height: 25px;
}
#dreamz-property .hero h1 {
font-size: 38px;
}
#dreamz-property .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-property .copy h2 {
font-size: 31px;
}
#dreamz-property .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-property .phoneDevice {
width: 210px;
}
#dreamz-property .phoneDevice .rowIcon {
display: grid;
}
#dreamz-property .mobileSide {
gap: 8px;
}
#dreamz-property .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-property .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-property .sideTile p {
margin: 0;
}
#dreamz-property .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-property .collectionStats strong {
font-size: 21px;
}
#dreamz-property .inventoryIntro strong {
font-size: 14px;
}
#dreamz-property .dataRow {
gap: 7px;
}
#dreamz-property .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-property .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-property {
scroll-behavior: auto;
}
#dreamz-property *,
#dreamz-property *::before,
#dreamz-property *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-property {
background: var(--sky-2);
}
#dreamz-property .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-property .hero .eyebrow {
max-width: 100%;
}
#dreamz-property .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-property .ganttIllustration,
#dreamz-property .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-property .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-property .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-property .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-property .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-property .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-property .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-property .comparisonTable th,
#dreamz-property .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-property .comparisonTable th:first-child {
width: 23%;
}
#dreamz-property .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-property .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-property .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-property .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-property .card,
#dreamz-property .proofCard,
#dreamz-property .productPanel,
#dreamz-property .outcome,
#dreamz-property .benefit {
box-shadow: none;
}
#dreamz-property .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-property .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-property .hero .eyebrow {
font-size: 10px;
}
#dreamz-property .comparisonTable {
font-size: 11px;
}
#dreamz-property .comparisonTable th,
#dreamz-property .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-property .comparisonTable th:first-child {
width: 24%;
}
#dreamz-property .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-property .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-property .hero h1 {
font-size: 38px;
}
}
#dreamz-property .scheduleIllustration,
#dreamz-property .analyticsIllustration,
#dreamz-property .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-property .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-property .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-property .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-property .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-property .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-property .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-property .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-property .darkSection .textCta {
color: var(--yellow);
}
#dreamz-property .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-property .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-property .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-property .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-property .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-property .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-property .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-property .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-property .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-property .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-property .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-property .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-property .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-property .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-property .phoneDevice {
max-width: 100%;
}
#dreamz-property .heroPills {
line-height: 1.55;
}
#dreamz-property .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-property .plantFacts {
gap: 7px;
}
#dreamz-property .plantFacts>div {
padding: 9px;
}
#dreamz-property .plantFacts strong {
font-size: 11px;
}
#dreamz-property .scanSummary {
padding: 12px;
}
#dreamz-property .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-property .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-property .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-property .phoneDevice .rowIcon {
display: grid;
}
#dreamz-property .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-property .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-property .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-property .sideTile strong {
font-size: 12px;
}
#dreamz-property .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-property .topbar,
#dreamz-property .heroActions,
#dreamz-property .finalActions,
#dreamz-property .contextSection,
#dreamz-property .valueCtaSection {
display: none;
}
#dreamz-property section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-property .hero {
padding-top: 20px;
}
}
#dreamz-property {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-property h1,
#dreamz-property h2,
#dreamz-property h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
#dreamz-property p {
margin: 0;
}
#dreamz-property main {
display: block;
}
#dreamz-property .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-property .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-property .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-property .heroAccent {
color: var(--black);
}
#dreamz-property .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-property .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-property .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-property .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-property .microcopy {
margin-top: 14px;
}
#dreamz-property .heroPills {
margin-top: 13px;
}
#dreamz-property .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-property .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-property .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-property .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-property .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-property .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-property .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-property .clientBand {
padding: 24px 0;
}
#dreamz-property .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-property .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-property .logoBox.wide {
font-size: 15px;
}
#dreamz-property .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-property .sectionHead p {
margin: 17px 0 0;
}
#dreamz-property .copy p {
margin: 16px 0 0;
}
#dreamz-property .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-property .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-property .aiJourney {
background: var(--black);
}
#dreamz-property .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-property .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-property .productPanel {
border-radius: 18px;
}
#dreamz-property .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-property .panelHead>strong {
font-size: 13px;
}
#dreamz-property .sampleTag {
font-size: 9px;
}
#dreamz-property .panelBody {
padding: 21px;
}
#dreamz-property .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-property .docHeader {
padding-bottom: 16px;
}
#dreamz-property .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-property .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-property .smallLabel {
font-size: 9px;
}
#dreamz-property .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-property .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-property .dataRow {
padding: 14px 0;
}
#dreamz-property .statusPill {
font-size: 8px;
}
#dreamz-property .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-property .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-property .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-property .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-property .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-property .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-property .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-property .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-property .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-property .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-property .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-property .hierarchy strong {
color: var(--navy);
}
#dreamz-property .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-property .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-property .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-property .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-property .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-property .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-property .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-property .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-property .mobileAccount small {
font-size: 9px;
}
#dreamz-property .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-property .sideTile strong {
font-size: 12px;
}
#dreamz-property .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-property .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-property .mobileAction {
font-size: 9px;
}
#dreamz-property .journeyRow strong {
font-size: 13px;
}
#dreamz-property .journeyRow small {
font-size: 11px;
}
#dreamz-property .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-property .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-property .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-property .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-property .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-property .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-property .utilityReadout small {
font-size: 12px;
}
#dreamz-property .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-property .darkSection {
background: var(--black);
}
#dreamz-property .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-property .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-property .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-property .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-property .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-property .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-property .assistantHead small {
font-size: 11px;
}
#dreamz-property .assistantNote {
font-size: 11px;
}
#dreamz-property .reportTags span {
font-size: 10px;
}
#dreamz-property .card p {
margin: 12px 0 0;
}
#dreamz-property .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-property .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-property .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-property .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-property .cards>.card p {
padding-bottom: 22px;
}
#dreamz-property .benefitBand {
background: var(--black);
}
#dreamz-property .benefit {
background: var(--black-soft);
}
#dreamz-property .inlineCta h3 {
font-size: 20px;
}
#dreamz-property .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-property .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-property .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-property .valueCtaSection {
padding: 32px 0;
}
#dreamz-property .proofCard p {
margin-top: 15px;
}
#dreamz-property .proofCard h3 {
font-size: 23px;
}
#dreamz-property .integrationNote {
margin-top: 23px;
}
#dreamz-property .ctaPanel {
background: var(--black);
}
#dreamz-property .ctaPanel p {
margin-top: 16px;
}
#dreamz-property .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-property .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-property a:hover {
text-decoration: none;
}
#dreamz-property .textCta:hover {
color: var(--navy);
}
#dreamz-property .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-property .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-property .hero h1 {
font-size: 49px;
}
#dreamz-property .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-property .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-property .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-property .hero h1 {
font-size: 58px;
}
#dreamz-property .heroVisual {
max-width: 548px;
}
#dreamz-property .hero .lead {
max-width: 700px;
}
#dreamz-property .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-property .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-property .logoBox:last-child {
grid-column: auto;
}
#dreamz-property .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-property .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-property .inlineCtaActions .button {
flex: 1;
}
#dreamz-property .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-property .hero {
padding: 28px 0 40px;
}
#dreamz-property .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-property .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-property .heroActions {
gap: 10px;
}
#dreamz-property .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-property .breadcrumb {
margin-bottom: 21px;
}
#dreamz-property .hero .eyebrow {
font-size: 11px;
}
#dreamz-property .heroVisual {
max-width: 480px;
}
#dreamz-property .heroPills {
row-gap: 9px;
}
#dreamz-property .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-property .heroPills span+span {
padding-left: 7px;
}
#dreamz-property .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-property .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-property .clientBand {
padding: 25px 0;
}
#dreamz-property .copy h2 {
font-size: 33px;
}
#dreamz-property .panelBody {
padding: 16px;
}
#dreamz-property .panelHead {
padding: 15px;
}
#dreamz-property .panelHead>strong {
font-size: 12px;
}
#dreamz-property .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-property .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-property .docHeader strong {
font-size: 18px;
}
#dreamz-property .docHeader small {
font-size: 10px;
}
#dreamz-property .rowCopy strong {
font-size: 11px;
}
#dreamz-property .rowCopy small {
font-size: 10px;
}
#dreamz-property .miniStats {
gap: 7px;
}
#dreamz-property .miniStats strong {
font-size: 21px;
}
#dreamz-property .miniStats span {
font-size: 9px;
}
#dreamz-property .miniStats>div {
padding: 10px 8px;
}
#dreamz-property .plantFacts {
gap: 8px;
}
#dreamz-property .plantFacts>div {
padding: 10px;
}
#dreamz-property .plantFacts strong {
font-size: 11px;
}
#dreamz-property .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-property .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-property .utilityReadout span {
font-size: 8px;
}
#dreamz-property .utilityReadout strong {
font-size: 24px;
}
#dreamz-property .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-property .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-property .comparisonTable {
font-size: 11px;
}
#dreamz-property .comparisonTable th,
#dreamz-property .comparisonTable td {
padding: 13px 9px;
}
#dreamz-property .contextSection {
padding: 0 0 22px;
}
#dreamz-property .valueCtaSection {
padding: 25px 0;
}
#dreamz-property .inlineCtaActions {
flex-direction: column;
}
#dreamz-property .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-property .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-property .phoneDevice {
width: 222px;
}
#dreamz-property .phoneDevice .rowIcon {
display: grid;
}
#dreamz-property .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-property .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-property .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-property .sideTile p {
margin: 0;
}
#dreamz-property .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-property .dataRow {
gap: 8px;
}
#dreamz-property .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-property .miniStats strong {
font-size: 19px;
}
#dreamz-property .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-property .heroActions .button {
width: 100%;
}
#dreamz-property .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-property .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-property .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-property .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-property .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-property .aiStep span {
font-size: 13px;
}
#dreamz-property .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-property {
background: var(--white);
}
#dreamz-property img {
display: block;
max-width: 100%;
}
#dreamz-property h1,
#dreamz-property h2,
#dreamz-property h3 {
text-wrap: balance;
}
#dreamz-property .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-property .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-property .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-property .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-property .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-property .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-property .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-property .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-property .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-property .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-property .industryIntro {
padding: 78px 0 66px;
}
#dreamz-property .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-property .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-property .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-property .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-property .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-property .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-property .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-property .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-property .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-property .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-property .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-property .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-property .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-property .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-property .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-property .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-property .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-property .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-property .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-property .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-property .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-property .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-property .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-property .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-property .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-property .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-property .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-property .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-property .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-property .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-property .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-property .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-property .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-property .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-property .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-property .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-property .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-property .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-property .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-property .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-property .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-property .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-property .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-property .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-property .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-property .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-property .rfidSpotlight {
background: #fff;
}
#dreamz-property .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-property .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-property .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-property .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-property .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-property .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-property .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-property .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-property .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-property .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-property .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-property .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-property .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-property .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-property .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-property .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-property .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-property .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-property .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-property .featurePanel {
display: none;
}
#dreamz-property .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-property .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-property .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-property .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-property .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-property .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-property .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-property .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-property .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-property .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-property .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-property .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-property .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-property .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-property .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-property .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-property .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-property .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-property .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-property .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-property .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-property .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-property .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-property .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-property .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-property .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-property .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-property .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-property .aiReviewBody {
padding: 18px;
}
#dreamz-property .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-property .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-property .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-property .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-property .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-property .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-property .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-property .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-property .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-property .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-property .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-property .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-property .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-property .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-property .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-property .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-property .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-property .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-property .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-property .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-property .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-property .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-property .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-property .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-property .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-property .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-property .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-property .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-property .workflowDetails .featureList,
#dreamz-property .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-property .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-property .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-property .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-property #property-connected-tools {
background: #fff;
}
#dreamz-property #property-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-property .featureTab,
#dreamz-property .industryPriority,
#dreamz-property summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-property .industryIntroHead {
gap: 30px;
}
#dreamz-property .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-property .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-property .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-property .factoryWorkflow {
padding: 22px;
}
#dreamz-property .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-property .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-property .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-property .industryPriorityGrid {
gap: 14px;
}
#dreamz-property .industryPriority {
padding: 22px 19px;
}
#dreamz-property .industryPriority h3 {
font-size: 21px;
}
#dreamz-property .industryPriority p {
font-size: 12px;
}
#dreamz-property .priorityLink {
font-size: 10px;
}
#dreamz-property .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-property .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-property .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-property .vedaUseCases>div {
display: block;
}
#dreamz-property .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-property .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-property .featureTabs {
gap: 8px;
}
#dreamz-property .featureTab {
min-height: 108px;
}
#dreamz-property .featureStage,
#dreamz-property .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-property .rfidSpotlight .spotlightMedia,
#dreamz-property .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-property .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-property .featurePanel {
min-height: 0;
}
#dreamz-property .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-property .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-property .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-property .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-property .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-property .clientBand {
padding: 22px 0;
}
#dreamz-property .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-property .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-property .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-property .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-property .industryIntro {
padding: 53px 0;
}
#dreamz-property .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-property .industryIntroHead>p {
font-size: 14px;
}
#dreamz-property .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-property .industryPriority {
padding: 23px;
}
#dreamz-property .industryPriority h3 {
font-size: 24px;
}
#dreamz-property .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-property .industryPriority p {
font-size: 13px;
}
#dreamz-property .priorityLink {
font-size: 11px;
}
#dreamz-property .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-property .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-property .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-property .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-property .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-property .vedaUseCases>div {
display: flex;
}
#dreamz-property .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-property .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-property .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-property .vedaMessage.user {
margin-left: 25px;
}
#dreamz-property .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-property .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-property .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-property .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-property .spotlightHead h2 {
font-size: 32px;
}
#dreamz-property .spotlightHead>p {
font-size: 14px;
}
#dreamz-property .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-property .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-property .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-property .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-property .featurePanel h3 {
font-size: 24px;
}
#dreamz-property .featurePanel>p {
font-size: 13px;
}
#dreamz-property .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-property .spotlightChecks>li {
font-size: 12px;
}
#dreamz-property .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-property .spotlightActions .button {
width: 100%;
}
#dreamz-property .spotlightScope {
font-size: 10px;
}
#dreamz-property .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-property .mediaTitle strong {
font-size: 11px;
}
#dreamz-property .mediaTitle div>span {
font-size: 8px;
}
#dreamz-property .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-property .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-property .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-property .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-property .aiReviewBody {
padding: 13px;
}
#dreamz-property .aiIssue {
padding: 13px;
}
#dreamz-property .aiIssue strong {
font-size: 14px;
}
#dreamz-property .aiEvidence {
gap: 6px;
}
#dreamz-property .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-property .aiEvidence strong {
font-size: 9px;
}
#dreamz-property .aiEvidence span {
font-size: 7px;
}
#dreamz-property .exampleLabel {
font-size: 6px;
}
#dreamz-property .factoryWorkflows {
padding: 55px 0;
}
#dreamz-property .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-property .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-property .industryRibbonGrid {
gap: 12px;
}
#dreamz-property .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-property .spotlightHead h2 {
font-size: 29px;
}
#dreamz-property .featureStage {
padding: 19px 13px;
}
#dreamz-property .mediaTitle>.icon {
display: none;
}
#dreamz-property .exampleLabel {
display: none;
}
#dreamz-property .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-property .featureTabs {
display: none;
}
#dreamz-property .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-property .featureStage {
display: block;
}
#dreamz-property .featurePanel {
color: #000;
}
}
#dreamz-property #property-maintenance-features-1:checked~.featureTabs label[for="property-maintenance-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-maintenance-features-1:focus-visible~.featureTabs label[for="property-maintenance-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-maintenance-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-property #property-maintenance-features-2:checked~.featureTabs label[for="property-maintenance-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-maintenance-features-2:focus-visible~.featureTabs label[for="property-maintenance-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-maintenance-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-property #property-maintenance-features-3:checked~.featureTabs label[for="property-maintenance-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-maintenance-features-3:focus-visible~.featureTabs label[for="property-maintenance-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-maintenance-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-property #property-maintenance-features-4:checked~.featureTabs label[for="property-maintenance-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-maintenance-features-4:focus-visible~.featureTabs label[for="property-maintenance-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-maintenance-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-property #property-maintenance-features-5:checked~.featureTabs label[for="property-maintenance-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-maintenance-features-5:focus-visible~.featureTabs label[for="property-maintenance-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-maintenance-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-property #property-rfid-features-1:checked~.featureTabs label[for="property-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-rfid-features-1:focus-visible~.featureTabs label[for="property-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-property #property-rfid-features-2:checked~.featureTabs label[for="property-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-rfid-features-2:focus-visible~.featureTabs label[for="property-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-property #property-rfid-features-3:checked~.featureTabs label[for="property-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-rfid-features-3:focus-visible~.featureTabs label[for="property-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-property #property-rfid-features-4:checked~.featureTabs label[for="property-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-rfid-features-4:focus-visible~.featureTabs label[for="property-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-property #property-rfid-features-5:checked~.featureTabs label[for="property-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-rfid-features-5:focus-visible~.featureTabs label[for="property-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-property #property-ai-decisions-features-1:checked~.featureTabs label[for="property-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-ai-decisions-features-1:focus-visible~.featureTabs label[for="property-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-property #property-ai-decisions-features-2:checked~.featureTabs label[for="property-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-ai-decisions-features-2:focus-visible~.featureTabs label[for="property-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-property #property-ai-decisions-features-3:checked~.featureTabs label[for="property-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-ai-decisions-features-3:focus-visible~.featureTabs label[for="property-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-property #property-ai-decisions-features-4:checked~.featureTabs label[for="property-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-ai-decisions-features-4:focus-visible~.featureTabs label[for="property-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-property #property-ai-decisions-features-5:checked~.featureTabs label[for="property-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-property #property-ai-decisions-features-5:focus-visible~.featureTabs label[for="property-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-property #property-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-property .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .featureMediaPanels {
min-width: 0;
}
#dreamz-property .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-property .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-property .featureMediaPanels .windowTop strong,
#dreamz-property .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-property .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-property .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-property .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-property .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-property .featureMediaPanels .windowBody>*,
#dreamz-property .featureMediaPanels .spectrumGrid>*,
#dreamz-property .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-property .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-property .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-property .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-property .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-property .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-property .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-property .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-property .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-property .pin2 {
top: 88px;
right: 88px;
}
#dreamz-property .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-property .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-property .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-property .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-property .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-property .featureMediaPanels .graphNodes .node.n1,
#dreamz-property .featureMediaPanels .graphNodes .node.n2,
#dreamz-property .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-property .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-property .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-property .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-property .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-property .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-property .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-property .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-property .freshGraphic * {
box-sizing: border-box;
}
#dreamz-property .rfPanel,
#dreamz-property .aiInsightCard,
#dreamz-property .forecastVisualCard,
#dreamz-property .forecastSuggestion,
#dreamz-property .knowledgeTile,
#dreamz-property .chatConversation,
#dreamz-property .trainingSummary,
#dreamz-property .moduleCard,
#dreamz-property .qualityHeatCard,
#dreamz-property .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-property .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-property .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-property .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-property .statusPill,
#dreamz-property .cardTag,
#dreamz-property .forecastSuggestion b,
#dreamz-property .moduleCard b,
#dreamz-property .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-property .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-property .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-property .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-property .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-property .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-property .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-property .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-property .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-property .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-property .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-property .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-property .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-property .dot.good {
background: #298EEC;
}
#dreamz-property .dot.warn {
background: #F4A62A;
}
#dreamz-property .dot.bad {
background: #EB6B53;
}
#dreamz-property .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-property .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-property .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-property .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-property .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-property .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-property .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-property .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-property .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-property .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-property .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-property .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-property .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-property .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-property .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-property .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-property .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-property .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-property .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-property .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-property .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-property .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-property .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-property .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-property .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-property .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-property .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-property .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-property .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-property .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-property .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-property .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-property .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-property .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-property .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-property .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-property .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-property .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-property .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-property .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-property .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-property .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-property .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-property .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-property .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-property .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-property .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-property .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-property .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-property .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-property .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-property .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-property .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-property .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-property .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-property .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-property .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-property .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-property .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-property .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-property .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-property .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-property .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-property .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-property .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-property .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-property .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-property .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-property .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-property .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-property .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-property .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-property .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-property .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-property .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-property .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-property .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-property .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-property .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-property .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-property .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-property .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-property .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-property .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-property .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-property .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-property .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-property .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-property .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-property .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-property .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-property .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-property .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-property .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-property .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-property .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-property .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-property .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-property .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-property .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-property .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-property .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-property .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-property .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-property .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-property .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-property .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-property .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-property .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-property .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-property .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-property .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-property .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-property .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-property .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-property .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-property .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-property .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-property .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-property .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-property .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-property .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-property .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-property .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-property .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-property .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-property .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-property .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-property .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-property .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-property .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-property .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-property .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-property .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-property .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-property .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-property .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-property .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-property .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-property .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-property .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-property .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-property .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-property .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-property .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-property .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-property .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-property .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-property .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-property .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-property .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-property .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-property .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-property .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-property .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-property .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-property .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-property .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-property .rfTrackLayout,
#dreamz-property .rfFlowLayout,
#dreamz-property .rfAlertGrid,
#dreamz-property .rfCycleLayout,
#dreamz-property .rfSitesLayout,
#dreamz-property .aiRootLayout,
#dreamz-property .aiForecastLayout,
#dreamz-property .aiChatLayout,
#dreamz-property .aiTrainingLayout,
#dreamz-property .aiQualityLayout,
#dreamz-property .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-property .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-property .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-property .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-property .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-property .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-property .aiLink {
display: none;
}
}
#dreamz-property .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-property .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-property .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-property .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-property .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-property .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-property .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-property .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-property .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-property .mfgHero h1>span {
display: block;
}
#dreamz-property .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-property .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-property .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-property .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-property .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-property .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-property .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-property .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-property .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-property .mfgHeroContent {
min-height: 610px;
}
#dreamz-property .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-property .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-property .mfgHeroLead {
font-size: 16px;
}
#dreamz-property .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-property .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-property .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-property .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-property .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-property .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-property .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-property .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-property .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-property .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-property .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-property .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-property .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-property .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-property .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-property .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-property .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-property .mfgHero {
background: #fff;
color: #000;
}
#dreamz-property .mfgHeroScene,
#dreamz-property .mfgHeroActions {
display: none;
}
#dreamz-property .mfgHeroContent {
min-height: 0;
}
#dreamz-property .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-property .mfgHero h1,
#dreamz-property .mfgHero h1 .mfgHeroAccent,
#dreamz-property .mfgHero p {
color: #000;
}
}
#dreamz-property #property-rfid .featureStage,
#dreamz-property #property-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-property .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-property .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-property .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-property .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-property .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-property .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-property .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-property .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-property .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-property .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-property .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-property .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-property .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-property .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-property .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-property .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-property .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-property .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-property .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-property .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-property .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-property .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-property .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-property .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-property .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-property .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-property .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-property .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-property .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-property .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-property .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-property .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-property .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-property .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-property .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-property .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-property .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-property .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-property .mfgGallery .flowArrow {
display: none;
}
#dreamz-property .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-property .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-property .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-property .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-property .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-property .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-property .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-property .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-property .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-property .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-property .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-property .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-property .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-property .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-property .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-property .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-property .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-property .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-property .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-property .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-property .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-property .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-property .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-property .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-property .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-property .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-property .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-property .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-property .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-property .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-property .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-property .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-property .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-property .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-property .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-property .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-property .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-property .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-property .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-property .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-property .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-property .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-property .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-property .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-property .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-property .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-property .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-property .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-property .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-property .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-property .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-property .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-property .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-property .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-property .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-property .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-property .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-property .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-property .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-property .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-property .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-property .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-property .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-property .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-property .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-property .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-property .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-property .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-property .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-property .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-property .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-property .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-property .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-property .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-property .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-property .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-property .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-property .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-property .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-property .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-property .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-property .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-property .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-property .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-property .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-property .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-property .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-property .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-property .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-property .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-property .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-property .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-property .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-property .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-property .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-property .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-property .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-property .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-property .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-property .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-property .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-property .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-property .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-property .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-property .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-property .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-property .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-property #property-rfid .featureStage,
#dreamz-property #property-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-property #property-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-property .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-property #property-rfid .featureStage,
#dreamz-property #property-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-property .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-property .mfgGallery .freshWindow {
height: auto;
}
#dreamz-property .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-property .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-property .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-property .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-property .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-property .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-property .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-property .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-property .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-property .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-property .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-property .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-property .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-property .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-property .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-property .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-property .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-property .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-property .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-property .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-property .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-property .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-property .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-property .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-property .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-property .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-property .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-property .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-property .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-property .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-property .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-property .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-property .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-property .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-property .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-property .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-property .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-property .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-property .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-property .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-property .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-property .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-property .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-property .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-property .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-property .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-property .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-property .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-property .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-property .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-property .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-property .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-property .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-property .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-property .propertyVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-property .propertyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-property .propertyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-property .propertyStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-property .propertyVisualGallery>.propertyGraphic {
display: none;
}
#dreamz-property #property-maintenance .featureStage,
#dreamz-property #property-rfid .featureStage,
#dreamz-property #property-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-property #property-rfid .propertyVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-property #property-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-property .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-property .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-property .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-property .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-property .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-property #property-maintenance .featureStage,
#dreamz-property #property-rfid .featureStage,
#dreamz-property #property-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-property #property-rfid .propertyVisualGallery,
#dreamz-property #property-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-property .mfgHeroScene {
height: 290px;
}
#dreamz-property #property-maintenance .featureStage,
#dreamz-property #property-rfid .featureStage,
#dreamz-property #property-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-property .propertyVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-property .propertyVisualGallery>.propertyGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-property #property-maintenance-features-1:checked~.featureStage .propertyVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-property #property-maintenance-features-2:checked~.featureStage .propertyVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-property #property-maintenance-features-3:checked~.featureStage .propertyVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-property #property-maintenance-features-4:checked~.featureStage .propertyVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-property #property-maintenance-features-5:checked~.featureStage .propertyVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-property #property-rfid-features-1:checked~.featureStage .propertyVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-property #property-rfid-features-2:checked~.featureStage .propertyVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-property #property-rfid-features-3:checked~.featureStage .propertyVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-property #property-rfid-features-4:checked~.featureStage .propertyVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-property #property-rfid-features-5:checked~.featureStage .propertyVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-property #property-ai-decisions-features-1:checked~.featureStage .propertyVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-property #property-ai-decisions-features-2:checked~.featureStage .propertyVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-property #property-ai-decisions-features-3:checked~.featureStage .propertyVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-property #property-ai-decisions-features-4:checked~.featureStage .propertyVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-property #property-ai-decisions-features-5:checked~.featureStage .propertyVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-property .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-property .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-property .propertyIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-property .propertyGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-property .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-property .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-property .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-property .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-property .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-property .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-property .propertyIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
#dreamz-property .propertyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
#dreamz-property .propertyVisualGallery {
min-height: 0;
}
#dreamz-property .propertyIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
#dreamz-property .mfgHeroScene img {
object-position: 90% 50%;
}
}  .automotive-manufacturing .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.automotive-manufacturing .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.automotive-manufacturing .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.automotive-manufacturing .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.automotive-manufacturing .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.automotive-manufacturing .hero .button.primary:hover {
background: var(--black-soft);
}
.automotive-manufacturing .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.automotive-manufacturing .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.automotive-manufacturing .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.automotive-manufacturing .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.automotive-manufacturing .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.automotive-manufacturing .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.automotive-manufacturing .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.automotive-manufacturing .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.automotive-manufacturing .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.automotive-manufacturing .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.automotive-manufacturing .ratingLead strong {
display: block;
font-size: 20px;
}
.automotive-manufacturing .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.automotive-manufacturing .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.automotive-manufacturing .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.automotive-manufacturing .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.automotive-manufacturing .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.automotive-manufacturing .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.automotive-manufacturing .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.automotive-manufacturing .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.automotive-manufacturing .awardLead span {
color: var(--muted);
font-size: 13px;
}
.automotive-manufacturing .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
.automotive-manufacturing section {
padding: 88px 0;
}
.automotive-manufacturing .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.automotive-manufacturing .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.automotive-manufacturing .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.automotive-manufacturing .aiJourney h2 {
color: #fff;
}
.automotive-manufacturing .aiJourney .sectionHead p {
color: #D7D7D7;
}
.automotive-manufacturing .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.automotive-manufacturing .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.automotive-manufacturing .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.automotive-manufacturing .aiStep:last-child::after {
display: none;
}
.automotive-manufacturing .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.automotive-manufacturing .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.automotive-manufacturing .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.automotive-manufacturing .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.automotive-manufacturing .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.automotive-manufacturing .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.automotive-manufacturing .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.automotive-manufacturing .outcome span {
color: var(--muted);
font-size: 14px;
}
.automotive-manufacturing .capability {
background: #fff;
}
.automotive-manufacturing .capability.alt {
background: var(--sky-2);
}
.automotive-manufacturing .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.automotive-manufacturing .twoCol.reverse .visual {
order: 2;
}
.automotive-manufacturing .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.automotive-manufacturing .visual .placeholder {
min-height: 355px;
}
.automotive-manufacturing .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.automotive-manufacturing .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.automotive-manufacturing details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.automotive-manufacturing details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.automotive-manufacturing details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.automotive-manufacturing details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.automotive-manufacturing details.capabilityMore[open] summary::after {
content: "−";
}
.automotive-manufacturing details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.automotive-manufacturing .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.automotive-manufacturing .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.automotive-manufacturing .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.automotive-manufacturing .darkSection h2,
.automotive-manufacturing .darkSection h3 {
color: #fff;
}
.automotive-manufacturing .darkSection .sectionHead p,
.automotive-manufacturing .darkSection .copy p {
color: #D7D7D7;
}
.automotive-manufacturing .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.automotive-manufacturing .darkSection .featureItem {
color: #F7F7F7;
}
.automotive-manufacturing .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.automotive-manufacturing .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.automotive-manufacturing .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.automotive-manufacturing .darkSection .placeholder small {
color: #D0D0D0;
}
.automotive-manufacturing .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.automotive-manufacturing .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.automotive-manufacturing .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.automotive-manufacturing .card p {
color: var(--muted);
margin: 12px 0 0;
}
.automotive-manufacturing .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.automotive-manufacturing .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.automotive-manufacturing .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.automotive-manufacturing .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.automotive-manufacturing .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.automotive-manufacturing .benefitBand h2 {
color: #fff;
}
.automotive-manufacturing .benefitBand .sectionHead p {
color: #D5D5D5;
}
.automotive-manufacturing .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.automotive-manufacturing .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.automotive-manufacturing .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.automotive-manufacturing .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.automotive-manufacturing .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.automotive-manufacturing .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.automotive-manufacturing .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.automotive-manufacturing .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.automotive-manufacturing .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.automotive-manufacturing .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.automotive-manufacturing .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.automotive-manufacturing .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.automotive-manufacturing .ctaPanel h2 {
color: #fff;
}
.automotive-manufacturing .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.automotive-manufacturing .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.automotive-manufacturing .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.automotive-manufacturing .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.automotive-manufacturing .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.automotive-manufacturing .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.automotive-manufacturing .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.automotive-manufacturing .inlineCta.dark h3 {
color: #fff;
}
.automotive-manufacturing .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.automotive-manufacturing .inlineCta.dark p {
color: #D8D8D8;
}
.automotive-manufacturing .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.automotive-manufacturing .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.automotive-manufacturing .button.yellow:hover {
background: #FFD84D;
}
.automotive-manufacturing .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.automotive-manufacturing .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.automotive-manufacturing .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.automotive-manufacturing .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.automotive-manufacturing footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.automotive-manufacturing .ratingSectionGrid {
grid-template-columns: 1fr;
}
.automotive-manufacturing .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.automotive-manufacturing .heroGrid,
.automotive-manufacturing .twoCol,
.automotive-manufacturing .ctaPanel {
grid-template-columns: 1fr;
}
.automotive-manufacturing .twoCol.reverse .visual {
order: initial;
}
.automotive-manufacturing .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.automotive-manufacturing .ratingGrid,
.automotive-manufacturing .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.automotive-manufacturing .ratingLead,
.automotive-manufacturing .awardLead {
grid-column: 1/-1;
text-align: center;
}
.automotive-manufacturing .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.automotive-manufacturing .aiStep:nth-child(3)::after,
.automotive-manufacturing .aiStep:last-child::after {
display: none;
}
.automotive-manufacturing .outcomeGrid,
.automotive-manufacturing .challengeGrid,
.automotive-manufacturing .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.automotive-manufacturing .cards,
.automotive-manufacturing .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.automotive-manufacturing .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.automotive-manufacturing .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.automotive-manufacturing .awardProofGrid {
grid-template-columns: 1fr;
}
.automotive-manufacturing .wrap {
width: min(var(--max), calc(100% - 24px));
}
.automotive-manufacturing .hero {
padding: 58px 0 52px;
}
.automotive-manufacturing section {
padding: 64px 0;
}
.automotive-manufacturing h1 {
font-size: 44px;
}
.automotive-manufacturing .aiFlow {
grid-template-columns: 1fr;
}
.automotive-manufacturing .aiStep::after {
display: none;
}
.automotive-manufacturing .logoRow,
.automotive-manufacturing .ratingGrid,
.automotive-manufacturing .awardGrid,
.automotive-manufacturing .outcomeGrid,
.automotive-manufacturing .challengeGrid,
.automotive-manufacturing .benefitGrid,
.automotive-manufacturing .cards,
.automotive-manufacturing .proofCards,
.automotive-manufacturing .integrationGrid,
.automotive-manufacturing .featureList {
grid-template-columns: 1fr;
}
.automotive-manufacturing .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.automotive-manufacturing .ctaPanel {
padding: 34px 24px;
}
.automotive-manufacturing .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.automotive-manufacturing .inlineCtaActions {
width: 100%;
}
.automotive-manufacturing .inlineCtaActions .button {
flex: 1;
}
}
.automotive-manufacturing .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.automotive-manufacturing .darkSection a:focus-visible,
.automotive-manufacturing .darkSection summary:focus-visible,
.automotive-manufacturing .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.automotive-manufacturing .topbar {
background: #fff;
backdrop-filter: none;
}
.automotive-manufacturing .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.automotive-manufacturing .brandName {
display: inline;
color: var(--navy) !important;
}
.automotive-manufacturing .brandName>span {
color: var(--brand-dark);
}
.automotive-manufacturing .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.automotive-manufacturing .brandMark .icon {
width: 21px;
height: 21px;
}
.automotive-manufacturing .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.automotive-manufacturing .navlinks a:hover {
color: var(--brand-dark);
}
.automotive-manufacturing .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.automotive-manufacturing .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.automotive-manufacturing .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.automotive-manufacturing .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.automotive-manufacturing .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.automotive-manufacturing .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.automotive-manufacturing .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.automotive-manufacturing .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.automotive-manufacturing .heroVisual {
width: 100%;
min-width: 0;
}
.automotive-manufacturing .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.automotive-manufacturing .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.automotive-manufacturing .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.automotive-manufacturing .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.automotive-manufacturing .clientBand {
padding: 27px 0;
}
.automotive-manufacturing .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.automotive-manufacturing .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.automotive-manufacturing .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.automotive-manufacturing .logoBox.wide {
font-size: 12px;
}
.automotive-manufacturing .logoBox small {
display: block;
font-size: 10px;
}
.automotive-manufacturing section {
padding: 80px 0;
}
.automotive-manufacturing h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.automotive-manufacturing .sectionHead {
margin-bottom: 36px;
}
.automotive-manufacturing .eyebrow {
line-height: 1.5;
}
.automotive-manufacturing .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.automotive-manufacturing .aiStep {
min-height: 162px;
}
.automotive-manufacturing .aiStep strong {
line-height: 1.35;
}
.automotive-manufacturing .aiStep span {
line-height: 1.65;
}
.automotive-manufacturing .aiCallout {
margin-top: 24px;
}
.automotive-manufacturing .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.automotive-manufacturing .outcome>.icon {
color: var(--navy);
}
.automotive-manufacturing .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.automotive-manufacturing .awardItem>.icon {
color: var(--navy);
}
.automotive-manufacturing .awardItem:hover {
border-color: var(--brand-dark);
}
.automotive-manufacturing .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.automotive-manufacturing .twoCol.reverse .visual {
order: -1;
}
.automotive-manufacturing .copy .eyebrow {
margin-bottom: 17px;
}
.automotive-manufacturing .copy p {
font-size: 16px;
line-height: 1.85;
}
.automotive-manufacturing .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.automotive-manufacturing .featureList {
gap: 13px 18px;
}
.automotive-manufacturing .featureItem {
font-size: 13px;
line-height: 1.6;
}
.automotive-manufacturing .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.automotive-manufacturing .check .icon {
width: 14px;
height: 14px;
}
.automotive-manufacturing details.capabilityMore {
margin-bottom: 0;
}
.automotive-manufacturing .capabilityMore summary {
min-height: 34px;
}
.automotive-manufacturing .capabilityMore .moreGrid {
gap: 13px 18px;
}
.automotive-manufacturing .textCta {
font-size: 14px;
}
.automotive-manufacturing .visual {
min-width: 0;
}
.automotive-manufacturing .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.automotive-manufacturing .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.automotive-manufacturing .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.automotive-manufacturing .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.automotive-manufacturing .panelBody {
padding: 20px;
}
.automotive-manufacturing .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.automotive-manufacturing .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.automotive-manufacturing .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.automotive-manufacturing .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.automotive-manufacturing .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.automotive-manufacturing .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.automotive-manufacturing .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.automotive-manufacturing .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.automotive-manufacturing .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.automotive-manufacturing .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.automotive-manufacturing .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.automotive-manufacturing .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.automotive-manufacturing .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.automotive-manufacturing .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.automotive-manufacturing .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.automotive-manufacturing .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.automotive-manufacturing .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.automotive-manufacturing .miniStats span {
font-size: 9px;
color: var(--muted);
}
.automotive-manufacturing .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.automotive-manufacturing .dataRow:last-child {
border-bottom: 0;
}
.automotive-manufacturing .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.automotive-manufacturing .rowIcon .icon {
width: 19px;
height: 19px;
}
.automotive-manufacturing .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.automotive-manufacturing .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.automotive-manufacturing .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.automotive-manufacturing .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.automotive-manufacturing .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.automotive-manufacturing .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.automotive-manufacturing .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.automotive-manufacturing .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.automotive-manufacturing .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.automotive-manufacturing .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.automotive-manufacturing .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.automotive-manufacturing .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.automotive-manufacturing .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.automotive-manufacturing .mobileAccount {
text-align: center;
padding: 13px 0;
}
.automotive-manufacturing .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.automotive-manufacturing .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.automotive-manufacturing .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.automotive-manufacturing .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.automotive-manufacturing .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.automotive-manufacturing .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.automotive-manufacturing .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
.automotive-manufacturing .phoneDevice .rowCopy strong {
font-size: 9px;
}
.automotive-manufacturing .phoneDevice .rowCopy small {
font-size: 7px;
}
.automotive-manufacturing .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.automotive-manufacturing .mobileSide {
display: grid;
gap: 10px;
}
.automotive-manufacturing .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.automotive-manufacturing .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.automotive-manufacturing .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.automotive-manufacturing .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.automotive-manufacturing .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.automotive-manufacturing .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.automotive-manufacturing .darkSection .panelHead>strong {
color: #fff;
}
.automotive-manufacturing .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.automotive-manufacturing .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.automotive-manufacturing .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.automotive-manufacturing .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.automotive-manufacturing .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.automotive-manufacturing .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.automotive-manufacturing .promptList {
display: grid;
gap: 10px;
}
.automotive-manufacturing .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.automotive-manufacturing .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.automotive-manufacturing .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.automotive-manufacturing .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.automotive-manufacturing .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.automotive-manufacturing .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.automotive-manufacturing .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.automotive-manufacturing .quoteTable th,
.automotive-manufacturing .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.automotive-manufacturing .quoteTable td:first-child {
width: 64%;
}
.automotive-manufacturing .quoteTable th:last-child,
.automotive-manufacturing .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.automotive-manufacturing .quoteTable strong {
font-size: 11px;
}
.automotive-manufacturing .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.automotive-manufacturing .quoteTable tfoot {
background: #F5FBFF;
}
.automotive-manufacturing .quoteTable tfoot th {
font-size: 10px;
}
.automotive-manufacturing .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.automotive-manufacturing .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.automotive-manufacturing .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.automotive-manufacturing .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.automotive-manufacturing .orderJourney {
margin: 20px 0;
}
.automotive-manufacturing .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.automotive-manufacturing .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.automotive-manufacturing .journeyRow:last-child:before {
display: none;
}
.automotive-manufacturing .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.automotive-manufacturing .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.automotive-manufacturing .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.automotive-manufacturing .journeyRow strong {
font-size: 12px;
display: block;
}
.automotive-manufacturing .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.automotive-manufacturing .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.automotive-manufacturing .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.automotive-manufacturing .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.automotive-manufacturing .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.automotive-manufacturing .inventoryIntro strong {
display: block;
font-size: 16px;
}
.automotive-manufacturing .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.automotive-manufacturing .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.automotive-manufacturing .availabilityCard span {
font-size: 9px;
display: block;
}
.automotive-manufacturing .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.automotive-manufacturing .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.automotive-manufacturing .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.automotive-manufacturing .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.automotive-manufacturing .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.automotive-manufacturing .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.automotive-manufacturing .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.automotive-manufacturing .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.automotive-manufacturing .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.automotive-manufacturing .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.automotive-manufacturing .customerTimeline .dataRow {
border-color: #353535;
}
.automotive-manufacturing .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.automotive-manufacturing .customerTimeline strong {
color: #fff;
}
.automotive-manufacturing .customerTimeline small {
color: #BFBFBF;
}
.automotive-manufacturing .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.automotive-manufacturing .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.automotive-manufacturing .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.automotive-manufacturing .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.automotive-manufacturing .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.automotive-manufacturing .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.automotive-manufacturing .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.automotive-manufacturing .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.automotive-manufacturing .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.automotive-manufacturing .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.automotive-manufacturing .chartTitle strong {
font-size: 12px;
}
.automotive-manufacturing .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.automotive-manufacturing .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.automotive-manufacturing .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.automotive-manufacturing .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.automotive-manufacturing .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.automotive-manufacturing .inlineCta {
margin-top: 0;
box-shadow: none;
}
.automotive-manufacturing .inlineCtaActions {
max-width: 42%;
}
.automotive-manufacturing .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.automotive-manufacturing .inlineCta h3 {
line-height: 1.35;
}
.automotive-manufacturing .card {
box-shadow: none;
}
.automotive-manufacturing .cardIcon {
box-shadow: none;
}
.automotive-manufacturing .card h3 {
font-size: 22px;
}
.automotive-manufacturing .card p {
font-size: 14px;
line-height: 1.8;
}
.automotive-manufacturing .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.automotive-manufacturing .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.automotive-manufacturing .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.automotive-manufacturing .ratingBand {
padding: 34px 0;
}
.automotive-manufacturing .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.automotive-manufacturing .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.automotive-manufacturing .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.automotive-manufacturing .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
.automotive-manufacturing .ratingItem:first-child {
border-left: 0;
}
.automotive-manufacturing .proofCard h3 {
font-size: 23px;
}
.automotive-manufacturing .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.automotive-manufacturing .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.automotive-manufacturing .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.automotive-manufacturing .integration {
min-height: 98px;
}
.automotive-manufacturing .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.automotive-manufacturing .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.automotive-manufacturing .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.automotive-manufacturing .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.automotive-manufacturing .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.automotive-manufacturing .finalActions {
display: grid;
gap: 11px;
}
.automotive-manufacturing .finalActions .button {
white-space: nowrap;
}
.automotive-manufacturing .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.automotive-manufacturing .footerInner p {
margin: 0;
font-size: 12px;
}
.automotive-manufacturing .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.automotive-manufacturing .navlinks {
gap: 15px;
font-size: 12px;
}
.automotive-manufacturing .heroGrid {
gap: 30px;
}
.automotive-manufacturing .twoCol {
gap: 32px;
}
.automotive-manufacturing .panelBody {
padding: 16px;
}
.automotive-manufacturing .panelHead {
padding: 16px;
}
.automotive-manufacturing .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.automotive-manufacturing .pipelineColumns {
gap: 7px;
}
.automotive-manufacturing .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.automotive-manufacturing .heroGrid,
.automotive-manufacturing .twoCol,
.automotive-manufacturing .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .heroGrid {
gap: 36px;
}
.automotive-manufacturing .hero h1 {
max-width: 730px;
}
.automotive-manufacturing .hero .lead {
max-width: 690px;
}
.automotive-manufacturing .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.automotive-manufacturing .twoCol {
gap: 34px;
}
.automotive-manufacturing .twoCol.reverse .visual {
order: initial;
}
.automotive-manufacturing .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.automotive-manufacturing .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.automotive-manufacturing .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.automotive-manufacturing .awardItem {
font-size: 12px;
padding: 13px;
}
.automotive-manufacturing .ratingSectionGrid {
gap: 20px;
}
.automotive-manufacturing .inlineCta {
align-items: flex-start;
}
.automotive-manufacturing .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.automotive-manufacturing .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.automotive-manufacturing .card {
padding: 22px;
}
.automotive-manufacturing .card h3 {
font-size: 21px;
}
.automotive-manufacturing .finalActions {
display: flex;
flex-wrap: wrap;
}
.automotive-manufacturing .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.automotive-manufacturing .cards,
.automotive-manufacturing .proofCards {
grid-template-columns: 1fr;
}
.automotive-manufacturing .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.automotive-manufacturing .inlineCta {
flex-direction: column;
}
.automotive-manufacturing .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.automotive-manufacturing .inlineCtaActions .button {
flex: 1;
}
.automotive-manufacturing .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.automotive-manufacturing .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.automotive-manufacturing .wrap {
width: calc(100% - 32px);
}
.automotive-manufacturing [id] {
scroll-margin-top: 82px;
}
.automotive-manufacturing .brand {
font-size: 20px;
gap: 7px;
}
.automotive-manufacturing .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.automotive-manufacturing .brandMark .icon {
width: 18px;
height: 18px;
}
.automotive-manufacturing .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.automotive-manufacturing section {
padding: 60px 0;
}
.automotive-manufacturing .hero {
padding: 51px 0 48px;
}
.automotive-manufacturing .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.automotive-manufacturing .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.automotive-manufacturing .heroActions {
gap: 10px;
margin-top: 25px;
}
.automotive-manufacturing .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.automotive-manufacturing .hero .microcopy {
font-size: 11px;
}
.automotive-manufacturing .heroPills span {
font-size: 9px;
}
.automotive-manufacturing .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.automotive-manufacturing .sectionHead p {
font-size: 16px;
}
.automotive-manufacturing .copy h2 {
font-size: 34px;
}
.automotive-manufacturing .copy p {
font-size: 15px;
}
.automotive-manufacturing .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.automotive-manufacturing .logoBox {
min-height: 53px;
}
.automotive-manufacturing .logoBox:last-child {
grid-column: 1/-1;
}
.automotive-manufacturing .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.automotive-manufacturing .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.automotive-manufacturing .aiStep strong {
font-size: 13px;
}
.automotive-manufacturing .aiStep span {
font-size: 11px;
}
.automotive-manufacturing .aiStep::after {
display: none;
}
.automotive-manufacturing .outcomeGrid,
.automotive-manufacturing .challengeGrid,
.automotive-manufacturing .benefitGrid {
grid-template-columns: 1fr;
}
.automotive-manufacturing .outcome {
padding: 24px;
}
.automotive-manufacturing .outcome strong {
font-size: 22px;
}
.automotive-manufacturing .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.automotive-manufacturing .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.automotive-manufacturing .awardItem:last-child {
grid-column: 1/-1;
}
.automotive-manufacturing .featureList,
.automotive-manufacturing .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.automotive-manufacturing .featureItem {
font-size: 13px;
}
.automotive-manufacturing .inlineCta {
padding: 22px;
gap: 19px;
}
.automotive-manufacturing .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.automotive-manufacturing .panelHead {
padding: 15px 13px;
}
.automotive-manufacturing .panelHead>strong {
font-size: 12px;
}
.automotive-manufacturing .panelBody {
padding: 14px;
}
.automotive-manufacturing .productPanel {
border-radius: 16px;
}
.automotive-manufacturing .productPanel figcaption {
padding: 0 14px 13px;
}
.automotive-manufacturing .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.automotive-manufacturing .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.automotive-manufacturing .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.automotive-manufacturing .deal {
margin-top: 0;
padding: 10px;
}
.automotive-manufacturing .deal strong {
font-size: 10px;
}
.automotive-manufacturing .deal small {
font-size: 9px;
}
.automotive-manufacturing .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.automotive-manufacturing .mobileWorkspace {
gap: 12px;
}
.automotive-manufacturing .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.automotive-manufacturing .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.automotive-manufacturing .sideTile {
padding: 10px;
}
.automotive-manufacturing .sideTile strong {
font-size: 10px;
}
.automotive-manufacturing .sideTile p {
font-size: 9px;
}
.automotive-manufacturing .mobileHeader strong {
font-size: 15px;
}
.automotive-manufacturing .mobileAccount strong {
font-size: 10px;
}
.automotive-manufacturing .mobileAccount small {
font-size: 7px;
}
.automotive-manufacturing .phoneDevice .rowIcon {
display: none;
}
.automotive-manufacturing .quoteTable th,
.automotive-manufacturing .quoteTable td {
padding: 12px 4px;
}
.automotive-manufacturing .quoteTable strong {
font-size: 10px;
}
.automotive-manufacturing .quoteTable small {
font-size: 8px;
}
.automotive-manufacturing .quoteTable tfoot th {
font-size: 9px;
}
.automotive-manufacturing .docHeader strong {
font-size: 17px;
}
.automotive-manufacturing .miniFlow {
gap: 5px;
font-size: 9px;
}
.automotive-manufacturing .miniFlow span {
padding: 6px;
}
.automotive-manufacturing .rowCopy strong {
font-size: 10px;
}
.automotive-manufacturing .rowCopy small {
font-size: 8px;
}
.automotive-manufacturing .statusPill {
font-size: 7px;
padding: 5px;
}
.automotive-manufacturing .miniStats {
gap: 7px;
}
.automotive-manufacturing .miniStats>div {
padding: 9px;
}
.automotive-manufacturing .miniStats strong {
font-size: 18px;
}
.automotive-manufacturing .miniStats span {
font-size: 8px;
}
.automotive-manufacturing .collectionStats>div {
padding: 13px;
}
.automotive-manufacturing .collectionStats strong {
font-size: 24px;
}
.automotive-manufacturing .customerHeader strong {
font-size: 17px;
}
.automotive-manufacturing .customerFacts>div {
padding: 10px;
}
.automotive-manufacturing .customerFacts strong {
font-size: 12px;
}
.automotive-manufacturing .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.automotive-manufacturing .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.automotive-manufacturing .ratingItem:last-child {
grid-column: 1/-1;
}
.automotive-manufacturing .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.automotive-manufacturing .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.automotive-manufacturing .integration small {
font-size: 9px;
}
.automotive-manufacturing .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.automotive-manufacturing .ctaPanel p {
font-size: 15px;
}
.automotive-manufacturing .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.automotive-manufacturing .footerInner {
align-items: flex-start;
flex-direction: column;
}
.automotive-manufacturing .contextSection {
padding: 0 0 24px;
}
.automotive-manufacturing .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.automotive-manufacturing .wrap {
width: calc(100% - 24px);
}
.automotive-manufacturing .brand {
font-size: 18px;
}
.automotive-manufacturing .brandMark {
width: 25px;
height: 25px;
}
.automotive-manufacturing .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.automotive-manufacturing .hero h1 {
font-size: 38px;
}
.automotive-manufacturing .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.automotive-manufacturing .copy h2 {
font-size: 31px;
}
.automotive-manufacturing .mobileWorkspace {
grid-template-columns: 1fr;
}
.automotive-manufacturing .phoneDevice {
width: 210px;
}
.automotive-manufacturing .phoneDevice .rowIcon {
display: grid;
}
.automotive-manufacturing .mobileSide {
gap: 8px;
}
.automotive-manufacturing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.automotive-manufacturing .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.automotive-manufacturing .sideTile p {
margin: 0;
}
.automotive-manufacturing .miniFlow span {
padding: 5px;
font-size: 8px;
}
.automotive-manufacturing .collectionStats strong {
font-size: 21px;
}
.automotive-manufacturing .inventoryIntro strong {
font-size: 14px;
}
.automotive-manufacturing .dataRow {
gap: 7px;
}
.automotive-manufacturing .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.automotive-manufacturing .inlineCtaActions {
flex-direction: column;
}
}
.automotive-manufacturing .hero .eyebrow {
max-width: 100%;
}
.automotive-manufacturing .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.automotive-manufacturing .ganttIllustration,
.automotive-manufacturing .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.automotive-manufacturing .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.automotive-manufacturing .costIllustration {
aspect-ratio: 484/226;
}
.automotive-manufacturing .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.automotive-manufacturing .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.automotive-manufacturing .comparisonTable thead {
background: var(--black);
color: #fff;
}
.automotive-manufacturing .comparisonTable thead th:last-child {
color: var(--yellow);
}
.automotive-manufacturing .comparisonTable th,
.automotive-manufacturing .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .comparisonTable th:first-child {
width: 23%;
}
.automotive-manufacturing .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.automotive-manufacturing .comparisonTable tbody td {
color: var(--muted);
}
.automotive-manufacturing .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.automotive-manufacturing .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.automotive-manufacturing .card,
.automotive-manufacturing .proofCard,
.automotive-manufacturing .productPanel,
.automotive-manufacturing .outcome,
.automotive-manufacturing .benefit {
box-shadow: none;
}
.automotive-manufacturing .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.automotive-manufacturing .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.automotive-manufacturing .hero .eyebrow {
font-size: 10px;
}
.automotive-manufacturing .comparisonTable {
font-size: 11px;
}
.automotive-manufacturing .comparisonTable th,
.automotive-manufacturing .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.automotive-manufacturing .comparisonTable th:first-child {
width: 24%;
}
.automotive-manufacturing .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.automotive-manufacturing .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.automotive-manufacturing .hero h1 {
font-size: 38px;
}
}
.automotive-manufacturing .scheduleIllustration,
.automotive-manufacturing .analyticsIllustration,
.automotive-manufacturing .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.automotive-manufacturing .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.automotive-manufacturing .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.automotive-manufacturing .conditionIllustration {
aspect-ratio: 484 / 178;
}
.automotive-manufacturing .miniStats strong {
font-variant-numeric: tabular-nums;
}
.automotive-manufacturing .quoteTable td:last-child {
white-space: nowrap;
}
.automotive-manufacturing .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.automotive-manufacturing .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.automotive-manufacturing .darkSection .textCta {
color: var(--yellow);
}
.automotive-manufacturing .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.automotive-manufacturing .secondaryLinks .textCta {
font-size: 12px;
}
.automotive-manufacturing .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.automotive-manufacturing .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.automotive-manufacturing .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.automotive-manufacturing .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.automotive-manufacturing .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.automotive-manufacturing .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
.automotive-manufacturing .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.automotive-manufacturing .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.automotive-manufacturing .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.automotive-manufacturing .returnFlag .icon {
flex: 0 0 24px;
}
.automotive-manufacturing .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.automotive-manufacturing .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.automotive-manufacturing .phoneDevice {
max-width: 100%;
}
.automotive-manufacturing .heroPills {
line-height: 1.55;
}
.automotive-manufacturing .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.automotive-manufacturing .plantFacts {
gap: 7px;
}
.automotive-manufacturing .plantFacts>div {
padding: 9px;
}
.automotive-manufacturing .plantFacts strong {
font-size: 11px;
}
.automotive-manufacturing .scanSummary {
padding: 12px;
}
.automotive-manufacturing .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.automotive-manufacturing .mobileWorkspace {
grid-template-columns: 1fr;
}
.automotive-manufacturing .phoneDevice {
width: 224px;
margin: auto;
}
.automotive-manufacturing .phoneDevice .rowIcon {
display: grid;
}
.automotive-manufacturing .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.automotive-manufacturing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.automotive-manufacturing .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.automotive-manufacturing .sideTile strong {
font-size: 12px;
}
.automotive-manufacturing .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.automotive-manufacturing .topbar,
.automotive-manufacturing .heroActions,
.automotive-manufacturing .finalActions,
.automotive-manufacturing .contextSection,
.automotive-manufacturing .valueCtaSection {
display: none;
}
.automotive-manufacturing section {
break-inside: avoid;
padding: 28px 0;
}
.automotive-manufacturing .hero {
padding-top: 20px;
}
}
.automotive-manufacturing .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.automotive-manufacturing .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.automotive-manufacturing .heroAccent {
color: var(--black);
}
.automotive-manufacturing .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.automotive-manufacturing .heroActions {
gap: 10px;
margin-top: 24px;
}
.automotive-manufacturing .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.automotive-manufacturing .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.automotive-manufacturing .microcopy {
margin-top: 14px;
}
.automotive-manufacturing .heroPills {
margin-top: 13px;
}
.automotive-manufacturing .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.automotive-manufacturing .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.automotive-manufacturing .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.automotive-manufacturing .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.automotive-manufacturing .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.automotive-manufacturing .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.automotive-manufacturing .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.automotive-manufacturing .clientBand {
padding: 24px 0;
}
.automotive-manufacturing .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.automotive-manufacturing .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.automotive-manufacturing .logoBox.wide {
font-size: 15px;
}
.automotive-manufacturing .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.automotive-manufacturing .sectionHead p {
margin: 17px 0 0;
}
.automotive-manufacturing .copy p {
margin: 16px 0 0;
}
.automotive-manufacturing .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.automotive-manufacturing .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.automotive-manufacturing .aiJourney {
background: var(--black);
}
.automotive-manufacturing .aiStep {
min-height: 157px;
border-color: #353535;
}
.automotive-manufacturing .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
.automotive-manufacturing .productPanel {
border-radius: 18px;
}
.automotive-manufacturing .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.automotive-manufacturing .panelHead>strong {
font-size: 13px;
}
.automotive-manufacturing .sampleTag {
font-size: 9px;
}
.automotive-manufacturing .panelBody {
padding: 21px;
}
.automotive-manufacturing .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.automotive-manufacturing .docHeader {
padding-bottom: 16px;
}
.automotive-manufacturing .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.automotive-manufacturing .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.automotive-manufacturing .smallLabel {
font-size: 9px;
}
.automotive-manufacturing .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.automotive-manufacturing .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.automotive-manufacturing .dataRow {
padding: 14px 0;
}
.automotive-manufacturing .statusPill {
font-size: 8px;
}
.automotive-manufacturing .miniStats {
gap: 10px;
margin: 18px 0;
}
.automotive-manufacturing .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.automotive-manufacturing .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.automotive-manufacturing .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.automotive-manufacturing .contextNote {
font-size: 11px;
margin-top: 16px;
}
.automotive-manufacturing .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.automotive-manufacturing .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.automotive-manufacturing .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.automotive-manufacturing .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.automotive-manufacturing .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.automotive-manufacturing .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.automotive-manufacturing .hierarchy strong {
color: var(--navy);
}
.automotive-manufacturing .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.automotive-manufacturing .conditionIllustration {
aspect-ratio: 484/201;
}
.automotive-manufacturing .analyticsIllustration {
aspect-ratio: 484/206;
}
.automotive-manufacturing .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.automotive-manufacturing .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.automotive-manufacturing .phoneDevice .rowCopy strong {
font-size: 10px;
}
.automotive-manufacturing .phoneDevice .rowCopy small {
font-size: 9px;
}
.automotive-manufacturing .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.automotive-manufacturing .mobileAccount small {
font-size: 9px;
}
.automotive-manufacturing .sideTile {
background: var(--sky-2);
padding: 14px;
}
.automotive-manufacturing .sideTile strong {
font-size: 12px;
}
.automotive-manufacturing .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.automotive-manufacturing .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.automotive-manufacturing .mobileAction {
font-size: 9px;
}
.automotive-manufacturing .journeyRow strong {
font-size: 13px;
}
.automotive-manufacturing .journeyRow small {
font-size: 11px;
}
.automotive-manufacturing .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.automotive-manufacturing .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.automotive-manufacturing .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.automotive-manufacturing .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.automotive-manufacturing .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.automotive-manufacturing .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.automotive-manufacturing .utilityReadout small {
font-size: 12px;
}
.automotive-manufacturing .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.automotive-manufacturing .darkSection {
background: var(--black);
}
.automotive-manufacturing .darkSection .panelHead {
background: var(--black-soft);
}
.automotive-manufacturing .darkSection .productPanel {
background: var(--black-soft);
}
.automotive-manufacturing .darkSection .copy .featureNote {
color: #CFCFCF;
}
.automotive-manufacturing .darkSection .rowCopy strong {
color: #FFFFFF;
}
.automotive-manufacturing .darkSection .rowCopy small {
color: #CFCFCF;
}
.automotive-manufacturing .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.automotive-manufacturing .assistantHead small {
font-size: 11px;
}
.automotive-manufacturing .assistantNote {
font-size: 11px;
}
.automotive-manufacturing .reportTags span {
font-size: 10px;
}
.automotive-manufacturing .card p {
margin: 12px 0 0;
}
.automotive-manufacturing .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.automotive-manufacturing .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.automotive-manufacturing .cards>.card {
display: flex;
flex-direction: column;
}
.automotive-manufacturing .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.automotive-manufacturing .cards>.card p {
padding-bottom: 22px;
}
.automotive-manufacturing .benefitBand {
background: var(--black);
}
.automotive-manufacturing .benefit {
background: var(--black-soft);
}
.automotive-manufacturing .inlineCta h3 {
font-size: 20px;
}
.automotive-manufacturing .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.automotive-manufacturing .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.automotive-manufacturing .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.automotive-manufacturing .valueCtaSection {
padding: 32px 0;
}
.automotive-manufacturing .proofCard p {
margin-top: 15px;
}
.automotive-manufacturing .proofCard h3 {
font-size: 23px;
}
.automotive-manufacturing .integrationNote {
margin-top: 23px;
}
.automotive-manufacturing .ctaPanel {
background: var(--black);
}
.automotive-manufacturing .ctaPanel p {
margin-top: 16px;
}
.automotive-manufacturing .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.automotive-manufacturing .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.automotive-manufacturing a:hover {
text-decoration: none;
}
.automotive-manufacturing .textCta:hover {
color: var(--navy);
}
.automotive-manufacturing .darkSection .textCta:hover {
color: #FFFFFF;
}
.automotive-manufacturing .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.automotive-manufacturing .hero h1 {
font-size: 49px;
}
.automotive-manufacturing .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.automotive-manufacturing .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.automotive-manufacturing .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.automotive-manufacturing .hero h1 {
font-size: 58px;
}
.automotive-manufacturing .heroVisual {
max-width: 548px;
}
.automotive-manufacturing .hero .lead {
max-width: 700px;
}
.automotive-manufacturing .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.automotive-manufacturing .logoBox {
font-size: 18px;
border: 0 !important;
}
.automotive-manufacturing .logoBox:last-child {
grid-column: auto;
}
.automotive-manufacturing .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.automotive-manufacturing .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.automotive-manufacturing .inlineCtaActions .button {
flex: 1;
}
.automotive-manufacturing .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.automotive-manufacturing section {
padding: 55px 0;
}
.automotive-manufacturing .hero {
padding: 28px 0 40px;
}
.automotive-manufacturing .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.automotive-manufacturing .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.automotive-manufacturing .heroActions {
gap: 10px;
}
.automotive-manufacturing .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.automotive-manufacturing .breadcrumb {
margin-bottom: 21px;
}
.automotive-manufacturing .hero .eyebrow {
font-size: 11px;
}
.automotive-manufacturing .heroVisual {
max-width: 480px;
}
.automotive-manufacturing .heroPills {
row-gap: 9px;
}
.automotive-manufacturing .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.automotive-manufacturing .heroPills span+span {
padding-left: 7px;
}
.automotive-manufacturing .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.automotive-manufacturing .logoBox:last-child {
grid-column: 1/-1;
}
.automotive-manufacturing .clientBand {
padding: 25px 0;
}
.automotive-manufacturing .copy h2 {
font-size: 33px;
}
.automotive-manufacturing .panelBody {
padding: 16px;
}
.automotive-manufacturing .panelHead {
padding: 15px;
}
.automotive-manufacturing .panelHead>strong {
font-size: 12px;
}
.automotive-manufacturing .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.automotive-manufacturing .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.automotive-manufacturing .docHeader strong {
font-size: 18px;
}
.automotive-manufacturing .docHeader small {
font-size: 10px;
}
.automotive-manufacturing .rowCopy strong {
font-size: 11px;
}
.automotive-manufacturing .rowCopy small {
font-size: 10px;
}
.automotive-manufacturing .miniStats {
gap: 7px;
}
.automotive-manufacturing .miniStats strong {
font-size: 21px;
}
.automotive-manufacturing .miniStats span {
font-size: 9px;
}
.automotive-manufacturing .miniStats>div {
padding: 10px 8px;
}
.automotive-manufacturing .plantFacts {
gap: 8px;
}
.automotive-manufacturing .plantFacts>div {
padding: 10px;
}
.automotive-manufacturing .plantFacts strong {
font-size: 11px;
}
.automotive-manufacturing .contextNote {
font-size: 10px;
gap: 8px;
}
.automotive-manufacturing .utilityReadout {
padding: 12px;
gap: 10px;
}
.automotive-manufacturing .utilityReadout span {
font-size: 8px;
}
.automotive-manufacturing .utilityReadout strong {
font-size: 24px;
}
.automotive-manufacturing .utilityReadout .utilityScope {
font-size: 14px;
}
.automotive-manufacturing .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.automotive-manufacturing .comparisonTable {
font-size: 11px;
}
.automotive-manufacturing .comparisonTable th,
.automotive-manufacturing .comparisonTable td {
padding: 13px 9px;
}
.automotive-manufacturing .contextSection {
padding: 0 0 22px;
}
.automotive-manufacturing .valueCtaSection {
padding: 25px 0;
}
.automotive-manufacturing .inlineCtaActions {
flex-direction: column;
}
.automotive-manufacturing .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.automotive-manufacturing .mobileWorkspace {
grid-template-columns: 1fr;
}
.automotive-manufacturing .phoneDevice {
width: 222px;
}
.automotive-manufacturing .phoneDevice .rowIcon {
display: grid;
}
.automotive-manufacturing .mobileSide {
grid-template-columns: 1fr;
}
.automotive-manufacturing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.automotive-manufacturing .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
.automotive-manufacturing .sideTile p {
margin: 0;
}
.automotive-manufacturing .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.automotive-manufacturing .dataRow {
gap: 8px;
}
.automotive-manufacturing .statusPill {
font-size: 7px;
padding: 5px;
}
.automotive-manufacturing .miniStats strong {
font-size: 19px;
}
.automotive-manufacturing .heroActions {
flex-direction: column;
align-items: stretch;
}
.automotive-manufacturing .heroActions .button {
width: 100%;
}
.automotive-manufacturing .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.automotive-manufacturing .aiFlow {
grid-template-columns: 1fr;
}
.automotive-manufacturing .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.automotive-manufacturing .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.automotive-manufacturing .aiStep strong {
margin: 0;
font-size: 15px;
}
.automotive-manufacturing .aiStep span {
font-size: 13px;
}
.automotive-manufacturing .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.automotive-manufacturing .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.automotive-manufacturing .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.automotive-manufacturing .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.automotive-manufacturing .navlinks {
gap: 20px;
font-size: 12px;
}
.automotive-manufacturing .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.automotive-manufacturing .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.automotive-manufacturing .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.automotive-manufacturing .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.automotive-manufacturing .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.automotive-manufacturing .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.automotive-manufacturing .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.automotive-manufacturing .industryIntro {
padding: 78px 0 66px;
}
.automotive-manufacturing .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.automotive-manufacturing .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.automotive-manufacturing .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.automotive-manufacturing .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.automotive-manufacturing .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.automotive-manufacturing .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.automotive-manufacturing .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.automotive-manufacturing .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.automotive-manufacturing .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.automotive-manufacturing .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.automotive-manufacturing .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.automotive-manufacturing .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.automotive-manufacturing .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.automotive-manufacturing .industryPriority:hover {
border-color: var(--brand-dark);
}
.automotive-manufacturing .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.automotive-manufacturing .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.automotive-manufacturing .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.automotive-manufacturing .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.automotive-manufacturing .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.automotive-manufacturing .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.automotive-manufacturing .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.automotive-manufacturing .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.automotive-manufacturing .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.automotive-manufacturing .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.automotive-manufacturing .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.automotive-manufacturing .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.automotive-manufacturing .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.automotive-manufacturing .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.automotive-manufacturing .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.automotive-manufacturing .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.automotive-manufacturing .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.automotive-manufacturing .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.automotive-manufacturing .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.automotive-manufacturing .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.automotive-manufacturing .vedaMessage.assistant>small {
color: var(--yellow);
}
.automotive-manufacturing .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.automotive-manufacturing .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.automotive-manufacturing .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.automotive-manufacturing .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.automotive-manufacturing .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.automotive-manufacturing .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.automotive-manufacturing .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.automotive-manufacturing .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.automotive-manufacturing .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.automotive-manufacturing .manufacturingSpotlight {
padding: 73px 0;
}
.automotive-manufacturing .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .rfidSpotlight {
background: #fff;
}
.automotive-manufacturing .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.automotive-manufacturing .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.automotive-manufacturing .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.automotive-manufacturing .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.automotive-manufacturing .spotlightHead h2 span {
color: var(--brand-dark);
}
.automotive-manufacturing .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.automotive-manufacturing .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.automotive-manufacturing .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.automotive-manufacturing .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.automotive-manufacturing .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.automotive-manufacturing .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.automotive-manufacturing .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.automotive-manufacturing .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.automotive-manufacturing .featureTab:hover {
border-color: var(--brand-dark);
}
.automotive-manufacturing .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.automotive-manufacturing .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.automotive-manufacturing .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.automotive-manufacturing .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.automotive-manufacturing .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.automotive-manufacturing .featurePanel {
display: none;
}
.automotive-manufacturing .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.automotive-manufacturing .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.automotive-manufacturing .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.automotive-manufacturing .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.automotive-manufacturing .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.automotive-manufacturing .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.automotive-manufacturing .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.automotive-manufacturing .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.automotive-manufacturing .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.automotive-manufacturing .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.automotive-manufacturing .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.automotive-manufacturing .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.automotive-manufacturing .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
.automotive-manufacturing .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.automotive-manufacturing .decisionSpotlight .textCta {
color: var(--yellow);
}
.automotive-manufacturing .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.automotive-manufacturing .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.automotive-manufacturing .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.automotive-manufacturing .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.automotive-manufacturing .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.automotive-manufacturing .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.automotive-manufacturing .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.automotive-manufacturing .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.automotive-manufacturing .rfidImageSurface {
background: #172029;
padding: 5px;
}
.automotive-manufacturing .rfidImageSurface img {
width: 100%;
height: auto;
}
.automotive-manufacturing .rfidMedia figcaption {
padding-top: 13px;
}
.automotive-manufacturing .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.automotive-manufacturing .aiReviewBody {
padding: 18px;
}
.automotive-manufacturing .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.automotive-manufacturing .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.automotive-manufacturing .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.automotive-manufacturing .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.automotive-manufacturing .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.automotive-manufacturing .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.automotive-manufacturing .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.automotive-manufacturing .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.automotive-manufacturing .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.automotive-manufacturing .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.automotive-manufacturing .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.automotive-manufacturing .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.automotive-manufacturing .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.automotive-manufacturing .aiReviewAction strong {
display: block;
font-size: 11px;
}
.automotive-manufacturing .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.automotive-manufacturing .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.automotive-manufacturing .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.automotive-manufacturing .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.automotive-manufacturing .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.automotive-manufacturing .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.automotive-manufacturing .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.automotive-manufacturing .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.automotive-manufacturing .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.automotive-manufacturing .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.automotive-manufacturing .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.automotive-manufacturing .workflowDetails summary::-webkit-details-marker {
display: none;
}
.automotive-manufacturing .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.automotive-manufacturing .workflowDetails[open] summary::after {
content: "−";
}
.automotive-manufacturing .workflowDetails .featureList,
.automotive-manufacturing .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.automotive-manufacturing .workflowDetails .featureItem {
font-size: 11px;
}
.automotive-manufacturing .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.automotive-manufacturing .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.automotive-manufacturing #auto-connected-tools {
background: #fff;
}
.automotive-manufacturing #auto-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.automotive-manufacturing .featureTab,
.automotive-manufacturing .industryPriority,
.automotive-manufacturing summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.automotive-manufacturing .industryIntroHead {
gap: 30px;
}
.automotive-manufacturing .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.automotive-manufacturing .featureStage {
gap: 26px;
padding: 26px;
}
.automotive-manufacturing .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.automotive-manufacturing .factoryWorkflow {
padding: 22px;
}
.automotive-manufacturing .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.automotive-manufacturing .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.automotive-manufacturing .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.automotive-manufacturing .industryPriorityGrid {
gap: 14px;
}
.automotive-manufacturing .industryPriority {
padding: 22px 19px;
}
.automotive-manufacturing .industryPriority h3 {
font-size: 21px;
}
.automotive-manufacturing .industryPriority p {
font-size: 12px;
}
.automotive-manufacturing .priorityLink {
font-size: 10px;
}
.automotive-manufacturing .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.automotive-manufacturing .vedaIndustryCopy h2 {
font-size: 39px;
}
.automotive-manufacturing .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.automotive-manufacturing .vedaUseCases>div {
display: block;
}
.automotive-manufacturing .vedaUseCases .icon {
margin: 0 0 10px;
}
.automotive-manufacturing .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.automotive-manufacturing .featureTabs {
gap: 8px;
}
.automotive-manufacturing .featureTab {
min-height: 108px;
}
.automotive-manufacturing .featureStage,
.automotive-manufacturing .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.automotive-manufacturing .rfidSpotlight .spotlightMedia,
.automotive-manufacturing .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.automotive-manufacturing .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.automotive-manufacturing .featurePanel {
min-height: 0;
}
.automotive-manufacturing .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.automotive-manufacturing .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.automotive-manufacturing .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.automotive-manufacturing .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.automotive-manufacturing .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.automotive-manufacturing .clientBand {
padding: 22px 0;
}
.automotive-manufacturing .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.automotive-manufacturing .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.automotive-manufacturing .clientBand .logoBox.wide {
font-size: 10px;
}
.automotive-manufacturing .clientBand .logoBox:last-child {
grid-column: auto;
}
.automotive-manufacturing .industryIntro {
padding: 53px 0;
}
.automotive-manufacturing .industryIntroHead h2 {
font-size: 32px;
}
.automotive-manufacturing .industryIntroHead>p {
font-size: 14px;
}
.automotive-manufacturing .industryPriorityGrid {
grid-template-columns: 1fr;
}
.automotive-manufacturing .industryPriority {
padding: 23px;
}
.automotive-manufacturing .industryPriority h3 {
font-size: 24px;
}
.automotive-manufacturing .industryPriority>.icon {
margin: 5px 0 15px;
}
.automotive-manufacturing .industryPriority p {
font-size: 13px;
}
.automotive-manufacturing .priorityLink {
font-size: 11px;
}
.automotive-manufacturing .vedaIndustry {
padding: 0 0 52px;
}
.automotive-manufacturing .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.automotive-manufacturing .vedaIndustryCopy h2 {
font-size: 32px;
}
.automotive-manufacturing .vedaIndustryCopy>p {
font-size: 14px;
}
.automotive-manufacturing .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.automotive-manufacturing .vedaUseCases>div {
display: flex;
}
.automotive-manufacturing .vedaConversationHead {
padding: 16px 13px;
}
.automotive-manufacturing .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.automotive-manufacturing .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.automotive-manufacturing .vedaMessage.user {
margin-left: 25px;
}
.automotive-manufacturing .vedaMessage.assistant {
margin-right: 14px;
}
.automotive-manufacturing .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.automotive-manufacturing .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.automotive-manufacturing .manufacturingSpotlight {
padding: 54px 0;
}
.automotive-manufacturing .spotlightHead h2 {
font-size: 32px;
}
.automotive-manufacturing .spotlightHead>p {
font-size: 14px;
}
.automotive-manufacturing .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.automotive-manufacturing .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.automotive-manufacturing .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.automotive-manufacturing .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.automotive-manufacturing .featurePanel h3 {
font-size: 24px;
}
.automotive-manufacturing .featurePanel>p {
font-size: 13px;
}
.automotive-manufacturing .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.automotive-manufacturing .spotlightChecks>li {
font-size: 12px;
}
.automotive-manufacturing .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.automotive-manufacturing .spotlightActions .button {
width: 100%;
}
.automotive-manufacturing .spotlightScope {
font-size: 10px;
}
.automotive-manufacturing .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.automotive-manufacturing .mediaTitle strong {
font-size: 11px;
}
.automotive-manufacturing .mediaTitle div>span {
font-size: 8px;
}
.automotive-manufacturing .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.automotive-manufacturing .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.automotive-manufacturing .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.automotive-manufacturing .rfidMedia figcaption {
padding-top: 12px;
}
.automotive-manufacturing .aiReviewBody {
padding: 13px;
}
.automotive-manufacturing .aiIssue {
padding: 13px;
}
.automotive-manufacturing .aiIssue strong {
font-size: 14px;
}
.automotive-manufacturing .aiEvidence {
gap: 6px;
}
.automotive-manufacturing .aiEvidence>div {
padding: 10px 7px;
}
.automotive-manufacturing .aiEvidence strong {
font-size: 9px;
}
.automotive-manufacturing .aiEvidence span {
font-size: 7px;
}
.automotive-manufacturing .exampleLabel {
font-size: 6px;
}
.automotive-manufacturing .factoryWorkflows {
padding: 55px 0;
}
.automotive-manufacturing .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.automotive-manufacturing .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.automotive-manufacturing .industryRibbonGrid {
gap: 12px;
}
.automotive-manufacturing .industryRibbonGrid>div {
font-size: 10px;
}
.automotive-manufacturing .spotlightHead h2 {
font-size: 29px;
}
.automotive-manufacturing .featureStage {
padding: 19px 13px;
}
.automotive-manufacturing .mediaTitle>.icon {
display: none;
}
.automotive-manufacturing .exampleLabel {
display: none;
}
.automotive-manufacturing .vedaBrand {
font-size: 27px;
}
}
@media print {
.automotive-manufacturing .featureTabs {
display: none;
}
.automotive-manufacturing .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.automotive-manufacturing .featureStage {
display: block;
}
.automotive-manufacturing .featurePanel {
color: #000;
}
}
.automotive-manufacturing #auto-predictive-features-1:checked~.featureTabs label[for="auto-predictive-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-predictive-features-1:focus-visible~.featureTabs label[for="auto-predictive-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-predictive-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.automotive-manufacturing #auto-predictive-features-2:checked~.featureTabs label[for="auto-predictive-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-predictive-features-2:focus-visible~.featureTabs label[for="auto-predictive-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-predictive-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.automotive-manufacturing #auto-predictive-features-3:checked~.featureTabs label[for="auto-predictive-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-predictive-features-3:focus-visible~.featureTabs label[for="auto-predictive-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-predictive-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.automotive-manufacturing #auto-predictive-features-4:checked~.featureTabs label[for="auto-predictive-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-predictive-features-4:focus-visible~.featureTabs label[for="auto-predictive-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-predictive-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.automotive-manufacturing #auto-predictive-features-5:checked~.featureTabs label[for="auto-predictive-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-predictive-features-5:focus-visible~.featureTabs label[for="auto-predictive-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-predictive-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-1:checked~.featureTabs label[for="auto-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-rfid-features-1:focus-visible~.featureTabs label[for="auto-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-2:checked~.featureTabs label[for="auto-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-rfid-features-2:focus-visible~.featureTabs label[for="auto-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-3:checked~.featureTabs label[for="auto-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-rfid-features-3:focus-visible~.featureTabs label[for="auto-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-4:checked~.featureTabs label[for="auto-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-rfid-features-4:focus-visible~.featureTabs label[for="auto-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-5:checked~.featureTabs label[for="auto-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-rfid-features-5:focus-visible~.featureTabs label[for="auto-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-1:checked~.featureTabs label[for="auto-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-ai-decisions-features-1:focus-visible~.featureTabs label[for="auto-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-2:checked~.featureTabs label[for="auto-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-ai-decisions-features-2:focus-visible~.featureTabs label[for="auto-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-3:checked~.featureTabs label[for="auto-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-ai-decisions-features-3:focus-visible~.featureTabs label[for="auto-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-4:checked~.featureTabs label[for="auto-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-ai-decisions-features-4:focus-visible~.featureTabs label[for="auto-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-5:checked~.featureTabs label[for="auto-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.automotive-manufacturing #auto-ai-decisions-features-5:focus-visible~.featureTabs label[for="auto-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.automotive-manufacturing #auto-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.automotive-manufacturing .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .featureMediaPanels {
min-width: 0;
}
.automotive-manufacturing .featureMediaPanels .miniChart {
height: 178px;
}
.automotive-manufacturing .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.automotive-manufacturing .featureMediaPanels .windowTop strong,
.automotive-manufacturing .featureMediaPanels .windowTop small {
display: block;
}
.automotive-manufacturing .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.automotive-manufacturing .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.automotive-manufacturing .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.automotive-manufacturing .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.automotive-manufacturing .featureMediaPanels .windowBody>*,
.automotive-manufacturing .featureMediaPanels .spectrumGrid>*,
.automotive-manufacturing .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.automotive-manufacturing .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.automotive-manufacturing .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.automotive-manufacturing .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.automotive-manufacturing .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.automotive-manufacturing .featureMediaPanels .graphNodes {
min-height: 258px;
}
.automotive-manufacturing .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.automotive-manufacturing .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.automotive-manufacturing .featureMediaPanels .mapPin {
box-shadow: none;
}
.automotive-manufacturing .pin2 {
top: 88px;
right: 88px;
}
.automotive-manufacturing .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.automotive-manufacturing .featureMediaPanels .mediaShell {
padding: 10px;
}
.automotive-manufacturing .featureMediaPanels .windowBody {
padding: 10px;
}
.automotive-manufacturing .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .featureMediaPanels .alertBadge {
justify-self: start;
}
.automotive-manufacturing .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.automotive-manufacturing .featureMediaPanels .graphNodes .node.n1,
.automotive-manufacturing .featureMediaPanels .graphNodes .node.n2,
.automotive-manufacturing .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.automotive-manufacturing .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.automotive-manufacturing .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.automotive-manufacturing .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.automotive-manufacturing .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.automotive-manufacturing .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.automotive-manufacturing .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.automotive-manufacturing .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.automotive-manufacturing .freshGraphic * {
box-sizing: border-box;
}
.automotive-manufacturing .rfPanel,
.automotive-manufacturing .aiInsightCard,
.automotive-manufacturing .forecastVisualCard,
.automotive-manufacturing .forecastSuggestion,
.automotive-manufacturing .knowledgeTile,
.automotive-manufacturing .chatConversation,
.automotive-manufacturing .trainingSummary,
.automotive-manufacturing .moduleCard,
.automotive-manufacturing .qualityHeatCard,
.automotive-manufacturing .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.automotive-manufacturing .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.automotive-manufacturing .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.automotive-manufacturing .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.automotive-manufacturing .statusPill,
.automotive-manufacturing .cardTag,
.automotive-manufacturing .forecastSuggestion b,
.automotive-manufacturing .moduleCard b,
.automotive-manufacturing .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.automotive-manufacturing .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.automotive-manufacturing .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.automotive-manufacturing .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.automotive-manufacturing .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.automotive-manufacturing .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.automotive-manufacturing .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.automotive-manufacturing .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.automotive-manufacturing .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.automotive-manufacturing .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.automotive-manufacturing .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.automotive-manufacturing .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.automotive-manufacturing .dot.good {
background: #298EEC;
}
.automotive-manufacturing .dot.warn {
background: #F4A62A;
}
.automotive-manufacturing .dot.bad {
background: #EB6B53;
}
.automotive-manufacturing .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.automotive-manufacturing .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.automotive-manufacturing .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.automotive-manufacturing .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.automotive-manufacturing .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.automotive-manufacturing .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.automotive-manufacturing .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.automotive-manufacturing .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.automotive-manufacturing .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.automotive-manufacturing .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.automotive-manufacturing .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.automotive-manufacturing .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.automotive-manufacturing .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.automotive-manufacturing .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.automotive-manufacturing .moveRow b {
color: #298EEC;
font-size: 9px;
}
.automotive-manufacturing .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.automotive-manufacturing .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.automotive-manufacturing .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.automotive-manufacturing .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.automotive-manufacturing .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.automotive-manufacturing .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.automotive-manufacturing .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.automotive-manufacturing .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.automotive-manufacturing .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.automotive-manufacturing .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.automotive-manufacturing .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.automotive-manufacturing .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.automotive-manufacturing .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.automotive-manufacturing .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.automotive-manufacturing .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.automotive-manufacturing .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.automotive-manufacturing .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.automotive-manufacturing .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.automotive-manufacturing .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.automotive-manufacturing .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.automotive-manufacturing .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.automotive-manufacturing .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.automotive-manufacturing .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.automotive-manufacturing .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.automotive-manufacturing .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.automotive-manufacturing .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.automotive-manufacturing .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.automotive-manufacturing .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.automotive-manufacturing .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.automotive-manufacturing .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.automotive-manufacturing .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.automotive-manufacturing .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.automotive-manufacturing .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.automotive-manufacturing .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.automotive-manufacturing .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.automotive-manufacturing .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.automotive-manufacturing .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.automotive-manufacturing .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.automotive-manufacturing .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.automotive-manufacturing .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.automotive-manufacturing .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.automotive-manufacturing .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.automotive-manufacturing .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.automotive-manufacturing .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.automotive-manufacturing .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.automotive-manufacturing .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.automotive-manufacturing .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.automotive-manufacturing .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.automotive-manufacturing .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.automotive-manufacturing .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.automotive-manufacturing .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.automotive-manufacturing .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.automotive-manufacturing .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.automotive-manufacturing .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.automotive-manufacturing .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.automotive-manufacturing .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.automotive-manufacturing .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.automotive-manufacturing .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.automotive-manufacturing .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.automotive-manufacturing .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.automotive-manufacturing .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.automotive-manufacturing .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.automotive-manufacturing .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.automotive-manufacturing .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.automotive-manufacturing .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.automotive-manufacturing .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.automotive-manufacturing .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.automotive-manufacturing .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.automotive-manufacturing .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.automotive-manufacturing .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.automotive-manufacturing .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.automotive-manufacturing .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.automotive-manufacturing .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.automotive-manufacturing .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.automotive-manufacturing .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.automotive-manufacturing .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.automotive-manufacturing .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.automotive-manufacturing .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.automotive-manufacturing .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.automotive-manufacturing .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.automotive-manufacturing .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.automotive-manufacturing .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.automotive-manufacturing .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.automotive-manufacturing .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.automotive-manufacturing .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.automotive-manufacturing .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.automotive-manufacturing .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.automotive-manufacturing .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.automotive-manufacturing .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.automotive-manufacturing .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.automotive-manufacturing .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.automotive-manufacturing .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.automotive-manufacturing .chartLegend .sw.blue {
background: #298EEC;
}
.automotive-manufacturing .chartLegend .sw.amber {
background: #F4A62A;
}
.automotive-manufacturing .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.automotive-manufacturing .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.automotive-manufacturing .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.automotive-manufacturing .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.automotive-manufacturing .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.automotive-manufacturing .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.automotive-manufacturing .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.automotive-manufacturing .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.automotive-manufacturing .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.automotive-manufacturing .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.automotive-manufacturing .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.automotive-manufacturing .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.automotive-manufacturing .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.automotive-manufacturing .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.automotive-manufacturing .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.automotive-manufacturing .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.automotive-manufacturing .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.automotive-manufacturing .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.automotive-manufacturing .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.automotive-manufacturing .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.automotive-manufacturing .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.automotive-manufacturing .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.automotive-manufacturing .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.automotive-manufacturing .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.automotive-manufacturing .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.automotive-manufacturing .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.automotive-manufacturing .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.automotive-manufacturing .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.automotive-manufacturing .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.automotive-manufacturing .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.automotive-manufacturing .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.automotive-manufacturing .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.automotive-manufacturing .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.automotive-manufacturing .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.automotive-manufacturing .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.automotive-manufacturing .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.automotive-manufacturing .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.automotive-manufacturing .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.automotive-manufacturing .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.automotive-manufacturing .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.automotive-manufacturing .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.automotive-manufacturing .freshGraphic {
height: auto;
min-height: 420px;
}
.automotive-manufacturing .rfTrackLayout,
.automotive-manufacturing .rfFlowLayout,
.automotive-manufacturing .rfAlertGrid,
.automotive-manufacturing .rfCycleLayout,
.automotive-manufacturing .rfSitesLayout,
.automotive-manufacturing .aiRootLayout,
.automotive-manufacturing .aiForecastLayout,
.automotive-manufacturing .aiChatLayout,
.automotive-manufacturing .aiTrainingLayout,
.automotive-manufacturing .aiQualityLayout,
.automotive-manufacturing .trainingModuleGrid {
grid-template-columns: 1fr;
}
.automotive-manufacturing .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.automotive-manufacturing .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.automotive-manufacturing .rfAlertGrid {
grid-template-columns: 1fr;
}
.automotive-manufacturing .qualityHeatGrid span {
min-height: 40px;
}
.automotive-manufacturing .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.automotive-manufacturing .aiLink {
display: none;
}
}
.automotive-manufacturing .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.automotive-manufacturing .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.automotive-manufacturing .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.automotive-manufacturing .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.automotive-manufacturing .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.automotive-manufacturing .mfgHeroBreadcrumb a {
color: inherit;
}
.automotive-manufacturing .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.automotive-manufacturing .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.automotive-manufacturing .mfgHero h1 {
color: #fff;
}
.automotive-manufacturing .mfgHero h1>span {
display: block;
}
.automotive-manufacturing .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
.automotive-manufacturing .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.automotive-manufacturing .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.automotive-manufacturing .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.automotive-manufacturing .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.automotive-manufacturing .mfgHeroActions .outline:hover {
background: #172029;
}
.automotive-manufacturing .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.automotive-manufacturing .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.automotive-manufacturing .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.automotive-manufacturing .mfgHeroContent {
min-height: 610px;
}
.automotive-manufacturing .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.automotive-manufacturing .mfgHeroLead {
font-size: 16px;
}
.automotive-manufacturing .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.automotive-manufacturing .mfgHero {
display: flex;
flex-direction: column;
}
.automotive-manufacturing .mfgHeroContent {
order: 0;
min-height: 0;
}
.automotive-manufacturing .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.automotive-manufacturing .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.automotive-manufacturing .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.automotive-manufacturing .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.automotive-manufacturing .mfgHeroCopy {
padding: 25px 0 20px;
}
.automotive-manufacturing .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.automotive-manufacturing .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.automotive-manufacturing .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.automotive-manufacturing .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.automotive-manufacturing .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.automotive-manufacturing .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.automotive-manufacturing .mfgHeroScene {
height: 280px;
}
}
@media print {
.automotive-manufacturing .mfgHero {
background: #fff;
color: #000;
}
.automotive-manufacturing .mfgHeroScene,
.automotive-manufacturing .mfgHeroActions {
display: none;
}
.automotive-manufacturing .mfgHeroContent {
min-height: 0;
}
.automotive-manufacturing .mfgHeroCopy {
width: 100%;
max-width: none;
}
.automotive-manufacturing .mfgHero h1,
.automotive-manufacturing .mfgHero h1 .mfgHeroAccent,
.automotive-manufacturing .mfgHero p {
color: #000;
}
}
.automotive-manufacturing #auto-rfid .featureStage,
.automotive-manufacturing #auto-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.automotive-manufacturing .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.automotive-manufacturing .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.automotive-manufacturing .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.automotive-manufacturing .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.automotive-manufacturing .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.automotive-manufacturing .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.automotive-manufacturing .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.automotive-manufacturing .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.automotive-manufacturing .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.automotive-manufacturing .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.automotive-manufacturing .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.automotive-manufacturing .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.automotive-manufacturing .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.automotive-manufacturing .mfgGallery .rfPanel {
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.automotive-manufacturing .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.automotive-manufacturing .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.automotive-manufacturing .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.automotive-manufacturing .mfgGallery .shelf span {
font-size: 11px;
}
.automotive-manufacturing .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.automotive-manufacturing .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.automotive-manufacturing .mfgGallery .rfKpiGrid {
gap: 8px;
}
.automotive-manufacturing .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.automotive-manufacturing .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.automotive-manufacturing .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.automotive-manufacturing .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.automotive-manufacturing .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.automotive-manufacturing .mfgGallery .rfScanCard span {
font-size: 9px;
}
.automotive-manufacturing .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.automotive-manufacturing .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.automotive-manufacturing .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.automotive-manufacturing .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.automotive-manufacturing .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.automotive-manufacturing .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.automotive-manufacturing .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.automotive-manufacturing .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.automotive-manufacturing .mfgGallery .flowArrow {
display: none;
}
.automotive-manufacturing .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .railItem {
padding: 9px 7px;
}
.automotive-manufacturing .mfgGallery .railItem b {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.automotive-manufacturing .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.automotive-manufacturing .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.automotive-manufacturing .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.automotive-manufacturing .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.automotive-manufacturing .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .reorderCard strong {
font-size: 13px;
}
.automotive-manufacturing .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.automotive-manufacturing .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.automotive-manufacturing .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.automotive-manufacturing .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.automotive-manufacturing .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.automotive-manufacturing .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.automotive-manufacturing .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.automotive-manufacturing .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.automotive-manufacturing .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.automotive-manufacturing .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.automotive-manufacturing .mfgGallery .varianceCard {
padding: 12px;
}
.automotive-manufacturing .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.automotive-manufacturing .mfgGallery .varianceCard small {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.automotive-manufacturing .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.automotive-manufacturing .mfgGallery .deviceTop {
font-size: 11px;
}
.automotive-manufacturing .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.automotive-manufacturing .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.automotive-manufacturing .mfgGallery .deviceMetric {
padding: 9px;
}
.automotive-manufacturing .mfgGallery .deviceMetric span {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .deviceMetric b {
font-size: 12px;
}
.automotive-manufacturing .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.automotive-manufacturing .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.automotive-manufacturing .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.automotive-manufacturing .mfgGallery .siteNode.north {
top: 6px;
}
.automotive-manufacturing .mfgGallery .siteNode.south {
bottom: 6px;
}
.automotive-manufacturing .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.automotive-manufacturing .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.automotive-manufacturing .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.automotive-manufacturing .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.automotive-manufacturing .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.automotive-manufacturing .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.automotive-manufacturing .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.automotive-manufacturing .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.automotive-manufacturing .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.automotive-manufacturing .mfgGallery .siteSummary strong {
font-size: 12px;
}
.automotive-manufacturing .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.automotive-manufacturing .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.automotive-manufacturing .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.automotive-manufacturing .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.automotive-manufacturing .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.automotive-manufacturing .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.automotive-manufacturing .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.automotive-manufacturing .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.automotive-manufacturing .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.automotive-manufacturing .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.automotive-manufacturing .mfgGallery .insightMeta {
gap: 6px;
}
.automotive-manufacturing .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.automotive-manufacturing .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .chartHeader span {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .chartHeader b {
font-size: 11px;
}
.automotive-manufacturing .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.automotive-manufacturing .mfgGallery .chartLegend {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.automotive-manufacturing .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.automotive-manufacturing .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.automotive-manufacturing .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.automotive-manufacturing .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.automotive-manufacturing .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.automotive-manufacturing .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.automotive-manufacturing .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.automotive-manufacturing .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.automotive-manufacturing .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.automotive-manufacturing .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.automotive-manufacturing .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.automotive-manufacturing .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.automotive-manufacturing .mfgGallery .progressCenter strong {
font-size: 25px;
}
.automotive-manufacturing .mfgGallery .trainingStatList {
gap: 9px;
}
.automotive-manufacturing .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.automotive-manufacturing .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.automotive-manufacturing .mfgGallery .trainingStatList span {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.automotive-manufacturing .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.automotive-manufacturing .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.automotive-manufacturing .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.automotive-manufacturing .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.automotive-manufacturing .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.automotive-manufacturing .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.automotive-manufacturing .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.automotive-manufacturing .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.automotive-manufacturing .mfgGallery .qualityCaption span {
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.automotive-manufacturing .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.automotive-manufacturing .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.automotive-manufacturing .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.automotive-manufacturing .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.automotive-manufacturing #auto-rfid .featureStage,
.automotive-manufacturing #auto-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.automotive-manufacturing #auto-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.automotive-manufacturing .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.automotive-manufacturing #auto-rfid .featureStage,
.automotive-manufacturing #auto-ai-decisions .featureStage {
padding: 16px;
}
.automotive-manufacturing .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.automotive-manufacturing .mfgGallery .freshWindow {
height: auto;
}
.automotive-manufacturing .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.automotive-manufacturing .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .freshTop strong {
font-size: 13px;
}
.automotive-manufacturing .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.automotive-manufacturing .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.automotive-manufacturing .mfgGallery .rfShelfPanel {
padding: 10px;
}
.automotive-manufacturing .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.automotive-manufacturing .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.automotive-manufacturing .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.automotive-manufacturing .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.automotive-manufacturing .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.automotive-manufacturing .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.automotive-manufacturing .mfgGallery .flowNum {
grid-row: 1/3;
}
.automotive-manufacturing .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.automotive-manufacturing .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.automotive-manufacturing .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.automotive-manufacturing .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.automotive-manufacturing .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.automotive-manufacturing .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.automotive-manufacturing .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.automotive-manufacturing .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.automotive-manufacturing .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.automotive-manufacturing .mfgGallery .rfActionStrip {
height: auto;
}
.automotive-manufacturing .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .countPanel {
gap: 14px;
}
.automotive-manufacturing .mfgGallery .handheldPanel {
padding: 15px;
}
.automotive-manufacturing .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.automotive-manufacturing .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.automotive-manufacturing .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.automotive-manufacturing .mfgGallery .siteNode.east {
right: 3%;
}
.automotive-manufacturing .mfgGallery .siteNode.west {
left: 3%;
}
.automotive-manufacturing .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.automotive-manufacturing .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.automotive-manufacturing .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.automotive-manufacturing .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.automotive-manufacturing .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.automotive-manufacturing .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.automotive-manufacturing .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.automotive-manufacturing .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.automotive-manufacturing .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.automotive-manufacturing .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.automotive-manufacturing .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.automotive-manufacturing .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.automotive-manufacturing .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.automotive-manufacturing .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.automotive-manufacturing .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.automotive-manufacturing .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.automotive-manufacturing .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.automotive-manufacturing .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.automotive-manufacturing .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.automotive-manufacturing .mfgGallery .moduleCard {
padding: 10px;
}
.automotive-manufacturing .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.automotive-manufacturing .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.automotive-manufacturing .mfgGallery .qualityAction strong {
font-size: 12px;
}
.automotive-manufacturing .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.automotive-manufacturing .mfgGallery .shelf i::after {
bottom: 0;
}
.automotive-manufacturing .autoVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.automotive-manufacturing .autoGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.automotive-manufacturing .autoIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.automotive-manufacturing .autoStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.automotive-manufacturing .autoVisualGallery>.autoGraphic {
display: none;
}
.automotive-manufacturing #auto-predictive .featureStage,
.automotive-manufacturing #auto-rfid .featureStage,
.automotive-manufacturing #auto-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.automotive-manufacturing #auto-rfid .autoVisualGallery {
grid-column: 1;
grid-row: 1;
}
.automotive-manufacturing #auto-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.automotive-manufacturing .factoryWorkflow {
display: flex;
flex-direction: column;
}
.automotive-manufacturing .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.automotive-manufacturing .factoryWorkflow>p {
margin-bottom: 22px;
}
.automotive-manufacturing .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.automotive-manufacturing #auto-predictive .featureStage,
.automotive-manufacturing #auto-rfid .featureStage,
.automotive-manufacturing #auto-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.automotive-manufacturing #auto-rfid .autoVisualGallery,
.automotive-manufacturing #auto-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.automotive-manufacturing .mfgHeroScene {
height: 290px;
}
.automotive-manufacturing #auto-predictive .featureStage,
.automotive-manufacturing #auto-rfid .featureStage,
.automotive-manufacturing #auto-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.automotive-manufacturing .autoVisualGallery {
width: 100%;
}
}
@media print {
.automotive-manufacturing .autoVisualGallery>.autoGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.automotive-manufacturing #auto-predictive-features-1:checked~.featureStage .autoVisualGallery> :nth-child(1) {
display: block;
}
.automotive-manufacturing #auto-predictive-features-2:checked~.featureStage .autoVisualGallery> :nth-child(2) {
display: block;
}
.automotive-manufacturing #auto-predictive-features-3:checked~.featureStage .autoVisualGallery> :nth-child(3) {
display: block;
}
.automotive-manufacturing #auto-predictive-features-4:checked~.featureStage .autoVisualGallery> :nth-child(4) {
display: block;
}
.automotive-manufacturing #auto-predictive-features-5:checked~.featureStage .autoVisualGallery> :nth-child(5) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-1:checked~.featureStage .autoVisualGallery> :nth-child(1) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-2:checked~.featureStage .autoVisualGallery> :nth-child(2) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-3:checked~.featureStage .autoVisualGallery> :nth-child(3) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-4:checked~.featureStage .autoVisualGallery> :nth-child(4) {
display: block;
}
.automotive-manufacturing #auto-rfid-features-5:checked~.featureStage .autoVisualGallery> :nth-child(5) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-1:checked~.featureStage .autoVisualGallery> :nth-child(1) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-2:checked~.featureStage .autoVisualGallery> :nth-child(2) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-3:checked~.featureStage .autoVisualGallery> :nth-child(3) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-4:checked~.featureStage .autoVisualGallery> :nth-child(4) {
display: block;
}
.automotive-manufacturing #auto-ai-decisions-features-5:checked~.featureStage .autoVisualGallery> :nth-child(5) {
display: block;
}
.automotive-manufacturing .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.automotive-manufacturing .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.automotive-manufacturing .autoIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.automotive-manufacturing .autoGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.automotive-manufacturing .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.automotive-manufacturing .mfgHeroScene img {
object-position: 70% 50%;
}
.automotive-manufacturing .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.automotive-manufacturing .mfgHeroScene img {
object-position: 78% 50%;
}
.automotive-manufacturing .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.automotive-manufacturing .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}  .agribusiness-manufacturing .industryIntroHead.compact,
.agribusiness-manufacturing .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.agribusiness-manufacturing .featureMediaPanels {
position: relative;
min-height: 430px;
}
.agribusiness-manufacturing .featureMediaPanels>.mediaPanel {
display: none;
}
.agribusiness-manufacturing .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.agribusiness-manufacturing .featureMediaPanels .spotlightMedia {
height: 100%;
}
.agribusiness-manufacturing .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.agribusiness-manufacturing .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.agribusiness-manufacturing .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.agribusiness-manufacturing .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.agribusiness-manufacturing .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.agribusiness-manufacturing .windowTop small {
font-size: 10px;
color: var(--muted);
}
.agribusiness-manufacturing .windowDots {
display: flex;
gap: 5px;
}
.agribusiness-manufacturing .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.agribusiness-manufacturing .windowBody {
padding: 16px;
}
.agribusiness-manufacturing .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.agribusiness-manufacturing .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.agribusiness-manufacturing .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.agribusiness-manufacturing .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.agribusiness-manufacturing .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.agribusiness-manufacturing .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.agribusiness-manufacturing .chartGridLine.l1 {
top: 34px;
}
.agribusiness-manufacturing .chartGridLine.l2 {
top: 65px;
}
.agribusiness-manufacturing .chartGridLine.l3 {
top: 96px;
}
.agribusiness-manufacturing .chartGridLine.l4 {
top: 127px;
}
.agribusiness-manufacturing .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.agribusiness-manufacturing .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.agribusiness-manufacturing .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.agribusiness-manufacturing .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.agribusiness-manufacturing .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.agribusiness-manufacturing .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.agribusiness-manufacturing .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.agribusiness-manufacturing .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.agribusiness-manufacturing .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.agribusiness-manufacturing .spectrumNotes {
display: grid;
gap: 10px;
}
.agribusiness-manufacturing .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.agribusiness-manufacturing .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.agribusiness-manufacturing .noteCard p,
.agribusiness-manufacturing .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.agribusiness-manufacturing .alertStack {
display: grid;
gap: 10px;
}
.agribusiness-manufacturing .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.agribusiness-manufacturing .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.agribusiness-manufacturing .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.agribusiness-manufacturing .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.agribusiness-manufacturing .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.agribusiness-manufacturing .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.agribusiness-manufacturing .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.agribusiness-manufacturing .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.agribusiness-manufacturing .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.agribusiness-manufacturing .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.agribusiness-manufacturing .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.agribusiness-manufacturing .scheduleBoard h4,
.agribusiness-manufacturing .todoBoard h4,
.agribusiness-manufacturing .siteBoard h4,
.agribusiness-manufacturing .chatPanel h4,
.agribusiness-manufacturing .lessonPanel h4,
.agribusiness-manufacturing .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.agribusiness-manufacturing .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.agribusiness-manufacturing .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.agribusiness-manufacturing .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.agribusiness-manufacturing .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.agribusiness-manufacturing .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.agribusiness-manufacturing .taskRow:last-child {
border-bottom: 0;
}
.agribusiness-manufacturing .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.agribusiness-manufacturing .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.agribusiness-manufacturing .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.agribusiness-manufacturing .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.agribusiness-manufacturing .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.agribusiness-manufacturing .inventoryTable th,
.agribusiness-manufacturing .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.agribusiness-manufacturing .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.agribusiness-manufacturing .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.agribusiness-manufacturing .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.agribusiness-manufacturing .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.agribusiness-manufacturing .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.agribusiness-manufacturing .phoneBody {
padding: 12px;
}
.agribusiness-manufacturing .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.agribusiness-manufacturing .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.agribusiness-manufacturing .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.agribusiness-manufacturing .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.agribusiness-manufacturing .progressList {
display: grid;
gap: 10px;
}
.agribusiness-manufacturing .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.agribusiness-manufacturing .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.agribusiness-manufacturing .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.agribusiness-manufacturing .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.agribusiness-manufacturing .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.agribusiness-manufacturing .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.agribusiness-manufacturing .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.agribusiness-manufacturing .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.agribusiness-manufacturing .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.agribusiness-manufacturing .pin1 {
top: 56px;
left: 58px;
}
.agribusiness-manufacturing .pin2 {
top: 88px;
right: 88px;
}
.agribusiness-manufacturing .pin3 {
bottom: 54px;
right: 72px;
}
.agribusiness-manufacturing .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.agribusiness-manufacturing .siteRow:last-child {
border-bottom: 0;
}
.agribusiness-manufacturing .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.agribusiness-manufacturing .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.agribusiness-manufacturing .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.agribusiness-manufacturing .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.agribusiness-manufacturing .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.agribusiness-manufacturing .graphNodes:before,
.agribusiness-manufacturing .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.agribusiness-manufacturing .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.agribusiness-manufacturing .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.agribusiness-manufacturing .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.agribusiness-manufacturing .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.agribusiness-manufacturing .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.agribusiness-manufacturing .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.agribusiness-manufacturing .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.agribusiness-manufacturing .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.agribusiness-manufacturing .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.agribusiness-manufacturing .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.agribusiness-manufacturing .forecastList .taskRow strong {
font-size: 11px;
}
.agribusiness-manufacturing .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.agribusiness-manufacturing .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.agribusiness-manufacturing .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.agribusiness-manufacturing .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.agribusiness-manufacturing .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.agribusiness-manufacturing .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.agribusiness-manufacturing .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.agribusiness-manufacturing .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.agribusiness-manufacturing .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.agribusiness-manufacturing .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.agribusiness-manufacturing .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.agribusiness-manufacturing .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.agribusiness-manufacturing .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.agribusiness-manufacturing .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.agribusiness-manufacturing .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.agribusiness-manufacturing .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.agribusiness-manufacturing .qualityRows {
display: grid;
gap: 10px;
}
.agribusiness-manufacturing .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.agribusiness-manufacturing .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.agribusiness-manufacturing .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.agribusiness-manufacturing .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.agribusiness-manufacturing .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.agribusiness-manufacturing #agri-predictive-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.agribusiness-manufacturing #agri-predictive-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.agribusiness-manufacturing #agri-predictive-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.agribusiness-manufacturing #agri-predictive-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.agribusiness-manufacturing #agri-predictive-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.agribusiness-manufacturing #agri-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.agribusiness-manufacturing #agri-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.agribusiness-manufacturing #agri-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.agribusiness-manufacturing #agri-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.agribusiness-manufacturing #agri-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.agribusiness-manufacturing #agri-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.agribusiness-manufacturing #agri-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.agribusiness-manufacturing #agri-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.agribusiness-manufacturing #agri-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.agribusiness-manufacturing #agri-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.agribusiness-manufacturing #agri-predictive-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.agribusiness-manufacturing #agri-predictive-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.agribusiness-manufacturing #agri-predictive-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.agribusiness-manufacturing #agri-predictive-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.agribusiness-manufacturing #agri-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.agribusiness-manufacturing #agri-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.agribusiness-manufacturing #agri-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.agribusiness-manufacturing #agri-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.agribusiness-manufacturing #agri-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.agribusiness-manufacturing #agri-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.agribusiness-manufacturing #agri-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.agribusiness-manufacturing #agri-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.agribusiness-manufacturing #agri-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.agribusiness-manufacturing #agri-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.agribusiness-manufacturing .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.agribusiness-manufacturing .featureMediaPanels {
min-height: 0;
}
.agribusiness-manufacturing .inventorySplit,
.agribusiness-manufacturing .forecastGrid,
.agribusiness-manufacturing .siteGrid,
.agribusiness-manufacturing .spectrumGrid,
.agribusiness-manufacturing .scheduleGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.agribusiness-manufacturing .metricGrid,
.agribusiness-manufacturing .lessonCards,
.agribusiness-manufacturing .gaugeGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.agribusiness-manufacturing .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.agribusiness-manufacturing .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.agribusiness-manufacturing .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.agribusiness-manufacturing .button.primary:hover {
background: var(--brand-dark);
}
.agribusiness-manufacturing .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.agribusiness-manufacturing .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.agribusiness-manufacturing .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.agribusiness-manufacturing .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.agribusiness-manufacturing h1,
.agribusiness-manufacturing h2,
.agribusiness-manufacturing h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
.agribusiness-manufacturing .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.agribusiness-manufacturing .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.agribusiness-manufacturing .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.agribusiness-manufacturing .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.agribusiness-manufacturing .hero .button.primary:hover {
background: var(--black-soft);
}
.agribusiness-manufacturing .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.agribusiness-manufacturing .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.agribusiness-manufacturing .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.agribusiness-manufacturing .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.agribusiness-manufacturing .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.agribusiness-manufacturing .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.agribusiness-manufacturing .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.agribusiness-manufacturing .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.agribusiness-manufacturing .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.agribusiness-manufacturing .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.agribusiness-manufacturing .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.agribusiness-manufacturing .ratingLead strong {
display: block;
font-size: 20px;
}
.agribusiness-manufacturing .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.agribusiness-manufacturing .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.agribusiness-manufacturing .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.agribusiness-manufacturing .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.agribusiness-manufacturing .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.agribusiness-manufacturing .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.agribusiness-manufacturing .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.agribusiness-manufacturing .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.agribusiness-manufacturing .awardLead span {
color: var(--muted);
font-size: 13px;
}
.agribusiness-manufacturing .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
.agribusiness-manufacturing section {
padding: 88px 0;
}
.agribusiness-manufacturing .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.agribusiness-manufacturing .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.agribusiness-manufacturing .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.agribusiness-manufacturing .aiJourney h2 {
color: #fff;
}
.agribusiness-manufacturing .aiJourney .sectionHead p {
color: #D7D7D7;
}
.agribusiness-manufacturing .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.agribusiness-manufacturing .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.agribusiness-manufacturing .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.agribusiness-manufacturing .aiStep:last-child::after {
display: none;
}
.agribusiness-manufacturing .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.agribusiness-manufacturing .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.agribusiness-manufacturing .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.agribusiness-manufacturing .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.agribusiness-manufacturing .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.agribusiness-manufacturing .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.agribusiness-manufacturing .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.agribusiness-manufacturing .outcome span {
color: var(--muted);
font-size: 14px;
}
.agribusiness-manufacturing .capability {
background: #fff;
}
.agribusiness-manufacturing .capability.alt {
background: var(--sky-2);
}
.agribusiness-manufacturing .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.agribusiness-manufacturing .twoCol.reverse .visual {
order: 2;
}
.agribusiness-manufacturing .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.agribusiness-manufacturing .visual .placeholder {
min-height: 355px;
}
.agribusiness-manufacturing .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.agribusiness-manufacturing .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.agribusiness-manufacturing details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.agribusiness-manufacturing details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.agribusiness-manufacturing details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.agribusiness-manufacturing details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.agribusiness-manufacturing details.capabilityMore[open] summary::after {
content: "−";
}
.agribusiness-manufacturing details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.agribusiness-manufacturing .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.agribusiness-manufacturing .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.agribusiness-manufacturing .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.agribusiness-manufacturing .darkSection h2,
.agribusiness-manufacturing .darkSection h3 {
color: #fff;
}
.agribusiness-manufacturing .darkSection .sectionHead p,
.agribusiness-manufacturing .darkSection .copy p {
color: #D7D7D7;
}
.agribusiness-manufacturing .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing .darkSection .featureItem {
color: #F7F7F7;
}
.agribusiness-manufacturing .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.agribusiness-manufacturing .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.agribusiness-manufacturing .darkSection .placeholder small {
color: #D0D0D0;
}
.agribusiness-manufacturing .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.agribusiness-manufacturing .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.agribusiness-manufacturing .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.agribusiness-manufacturing .card p {
color: var(--muted);
margin: 12px 0 0;
}
.agribusiness-manufacturing .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.agribusiness-manufacturing .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.agribusiness-manufacturing .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.agribusiness-manufacturing .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.agribusiness-manufacturing .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.agribusiness-manufacturing .benefitBand h2 {
color: #fff;
}
.agribusiness-manufacturing .benefitBand .sectionHead p {
color: #D5D5D5;
}
.agribusiness-manufacturing .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.agribusiness-manufacturing .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.agribusiness-manufacturing .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.agribusiness-manufacturing .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.agribusiness-manufacturing .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.agribusiness-manufacturing .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.agribusiness-manufacturing .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.agribusiness-manufacturing .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.agribusiness-manufacturing .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.agribusiness-manufacturing .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.agribusiness-manufacturing .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.agribusiness-manufacturing .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.agribusiness-manufacturing .ctaPanel h2 {
color: #fff;
}
.agribusiness-manufacturing .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.agribusiness-manufacturing .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.agribusiness-manufacturing .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.agribusiness-manufacturing .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.agribusiness-manufacturing .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.agribusiness-manufacturing .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.agribusiness-manufacturing .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.agribusiness-manufacturing .inlineCta.dark h3 {
color: #fff;
}
.agribusiness-manufacturing .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.agribusiness-manufacturing .inlineCta.dark p {
color: #D8D8D8;
}
.agribusiness-manufacturing .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.agribusiness-manufacturing .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.agribusiness-manufacturing .button.yellow:hover {
background: #FFD84D;
}
.agribusiness-manufacturing .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.agribusiness-manufacturing .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.agribusiness-manufacturing .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.agribusiness-manufacturing .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.agribusiness-manufacturing footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.agribusiness-manufacturing .ratingSectionGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.agribusiness-manufacturing .heroGrid,
.agribusiness-manufacturing .twoCol,
.agribusiness-manufacturing .ctaPanel {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .twoCol.reverse .visual {
order: initial;
}
.agribusiness-manufacturing .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.agribusiness-manufacturing .ratingGrid,
.agribusiness-manufacturing .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.agribusiness-manufacturing .ratingLead,
.agribusiness-manufacturing .awardLead {
grid-column: 1/-1;
text-align: center;
}
.agribusiness-manufacturing .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.agribusiness-manufacturing .aiStep:nth-child(3)::after,
.agribusiness-manufacturing .aiStep:last-child::after {
display: none;
}
.agribusiness-manufacturing .outcomeGrid,
.agribusiness-manufacturing .challengeGrid,
.agribusiness-manufacturing .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.agribusiness-manufacturing .cards,
.agribusiness-manufacturing .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.agribusiness-manufacturing .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.agribusiness-manufacturing .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.agribusiness-manufacturing .awardProofGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .wrap {
width: min(var(--max), calc(100% - 24px));
}
.agribusiness-manufacturing .hero {
padding: 58px 0 52px;
}
.agribusiness-manufacturing section {
padding: 64px 0;
}
.agribusiness-manufacturing h1 {
font-size: 44px;
}
.agribusiness-manufacturing .aiFlow {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .aiStep::after {
display: none;
}
.agribusiness-manufacturing .logoRow,
.agribusiness-manufacturing .ratingGrid,
.agribusiness-manufacturing .awardGrid,
.agribusiness-manufacturing .outcomeGrid,
.agribusiness-manufacturing .challengeGrid,
.agribusiness-manufacturing .benefitGrid,
.agribusiness-manufacturing .cards,
.agribusiness-manufacturing .proofCards,
.agribusiness-manufacturing .integrationGrid,
.agribusiness-manufacturing .featureList {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.agribusiness-manufacturing .ctaPanel {
padding: 34px 24px;
}
.agribusiness-manufacturing .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.agribusiness-manufacturing .inlineCtaActions {
width: 100%;
}
.agribusiness-manufacturing .inlineCtaActions .button {
flex: 1;
}
}
.agribusiness-manufacturing .wrap>*,
.agribusiness-manufacturing .heroGrid>*,
.agribusiness-manufacturing .twoCol>*,
.agribusiness-manufacturing .ctaPanel>* {
min-width: 0;
}
.agribusiness-manufacturing .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.agribusiness-manufacturing .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.agribusiness-manufacturing .skipLink:focus {
transform: none;
}
.agribusiness-manufacturing a:focus-visible,
.agribusiness-manufacturing summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.agribusiness-manufacturing .darkSection a:focus-visible,
.agribusiness-manufacturing .darkSection summary:focus-visible,
.agribusiness-manufacturing .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.agribusiness-manufacturing .topbar {
background: #fff;
backdrop-filter: none;
}
.agribusiness-manufacturing .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.agribusiness-manufacturing .brandName {
display: inline;
color: var(--navy) !important;
}
.agribusiness-manufacturing .brandName>span {
color: var(--brand-dark);
}
.agribusiness-manufacturing .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.agribusiness-manufacturing .brandMark .icon2 {
width: 21px;
height: 21px;
}
.agribusiness-manufacturing .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.agribusiness-manufacturing .navlinks a:hover {
color: var(--brand-dark);
}
.agribusiness-manufacturing .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.agribusiness-manufacturing .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.agribusiness-manufacturing .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.agribusiness-manufacturing .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.agribusiness-manufacturing .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.agribusiness-manufacturing .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.agribusiness-manufacturing .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.agribusiness-manufacturing .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.agribusiness-manufacturing .heroVisual {
width: 100%;
min-width: 0;
}
.agribusiness-manufacturing .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.agribusiness-manufacturing .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.agribusiness-manufacturing .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.agribusiness-manufacturing .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.agribusiness-manufacturing .clientBand {
padding: 27px 0;
}
.agribusiness-manufacturing .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.agribusiness-manufacturing .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.agribusiness-manufacturing .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.agribusiness-manufacturing .logoBox.wide {
font-size: 12px;
}
.agribusiness-manufacturing .logoBox small {
display: block;
font-size: 10px;
}
.agribusiness-manufacturing section {
padding: 80px 0;
}
.agribusiness-manufacturing h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.agribusiness-manufacturing .sectionHead {
margin-bottom: 36px;
}
.agribusiness-manufacturing .eyebrow {
line-height: 1.5;
}
.agribusiness-manufacturing .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.agribusiness-manufacturing .aiStep {
min-height: 162px;
}
.agribusiness-manufacturing .aiStep strong {
line-height: 1.35;
}
.agribusiness-manufacturing .aiStep span {
line-height: 1.65;
}
.agribusiness-manufacturing .aiCallout {
margin-top: 24px;
}
.agribusiness-manufacturing .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.agribusiness-manufacturing .outcome>.icon2 {
color: var(--navy);
}
.agribusiness-manufacturing .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.agribusiness-manufacturing .awardItem>.icon2 {
color: var(--navy);
}
.agribusiness-manufacturing .awardItem:hover {
border-color: var(--brand-dark);
}
.agribusiness-manufacturing .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.agribusiness-manufacturing .twoCol.reverse .visual {
order: -1;
}
.agribusiness-manufacturing .copy .eyebrow {
margin-bottom: 17px;
}
.agribusiness-manufacturing .copy p {
font-size: 16px;
line-height: 1.85;
}
.agribusiness-manufacturing .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.agribusiness-manufacturing .featureList {
gap: 13px 18px;
}
.agribusiness-manufacturing .featureItem {
font-size: 13px;
line-height: 1.6;
}
.agribusiness-manufacturing .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.agribusiness-manufacturing .check .icon2 {
width: 14px;
height: 14px;
}
.agribusiness-manufacturing details.capabilityMore {
margin-bottom: 0;
}
.agribusiness-manufacturing .capabilityMore summary {
min-height: 34px;
}
.agribusiness-manufacturing .capabilityMore .moreGrid {
gap: 13px 18px;
}
.agribusiness-manufacturing .textCta {
font-size: 14px;
}
.agribusiness-manufacturing .visual {
min-width: 0;
}
.agribusiness-manufacturing .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.agribusiness-manufacturing .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.agribusiness-manufacturing .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.agribusiness-manufacturing .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.agribusiness-manufacturing .panelBody {
padding: 20px;
}
.agribusiness-manufacturing .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.agribusiness-manufacturing .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.agribusiness-manufacturing .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.agribusiness-manufacturing .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.agribusiness-manufacturing .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.agribusiness-manufacturing .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.agribusiness-manufacturing .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.agribusiness-manufacturing .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.agribusiness-manufacturing .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.agribusiness-manufacturing .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.agribusiness-manufacturing .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.agribusiness-manufacturing .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.agribusiness-manufacturing .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.agribusiness-manufacturing .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.agribusiness-manufacturing .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.agribusiness-manufacturing .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.agribusiness-manufacturing .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.agribusiness-manufacturing .miniStats span {
font-size: 9px;
color: var(--muted);
}
.agribusiness-manufacturing .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.agribusiness-manufacturing .dataRow:last-child {
border-bottom: 0;
}
.agribusiness-manufacturing .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.agribusiness-manufacturing .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.agribusiness-manufacturing .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.agribusiness-manufacturing .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.agribusiness-manufacturing .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.agribusiness-manufacturing .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.agribusiness-manufacturing .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.agribusiness-manufacturing .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.agribusiness-manufacturing .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.agribusiness-manufacturing .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.agribusiness-manufacturing .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.agribusiness-manufacturing .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.agribusiness-manufacturing .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.agribusiness-manufacturing .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.agribusiness-manufacturing .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.agribusiness-manufacturing .mobileAccount {
text-align: center;
padding: 13px 0;
}
.agribusiness-manufacturing .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.agribusiness-manufacturing .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.agribusiness-manufacturing .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.agribusiness-manufacturing .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.agribusiness-manufacturing .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.agribusiness-manufacturing .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.agribusiness-manufacturing .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.agribusiness-manufacturing .phoneDevice .rowCopy strong {
font-size: 9px;
}
.agribusiness-manufacturing .phoneDevice .rowCopy small {
font-size: 7px;
}
.agribusiness-manufacturing .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.agribusiness-manufacturing .mobileSide {
display: grid;
gap: 10px;
}
.agribusiness-manufacturing .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.agribusiness-manufacturing .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.agribusiness-manufacturing .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.agribusiness-manufacturing .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.agribusiness-manufacturing .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.agribusiness-manufacturing .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.agribusiness-manufacturing .darkSection .panelHead>strong {
color: #fff;
}
.agribusiness-manufacturing .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.agribusiness-manufacturing .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.agribusiness-manufacturing .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.agribusiness-manufacturing .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.agribusiness-manufacturing .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.agribusiness-manufacturing .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.agribusiness-manufacturing .promptList {
display: grid;
gap: 10px;
}
.agribusiness-manufacturing .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.agribusiness-manufacturing .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.agribusiness-manufacturing .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.agribusiness-manufacturing .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.agribusiness-manufacturing .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.agribusiness-manufacturing .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.agribusiness-manufacturing .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.agribusiness-manufacturing .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.agribusiness-manufacturing .quoteTable th,
.agribusiness-manufacturing .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.agribusiness-manufacturing .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.agribusiness-manufacturing .quoteTable td:first-child {
width: 64%;
}
.agribusiness-manufacturing .quoteTable th:last-child,
.agribusiness-manufacturing .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.agribusiness-manufacturing .quoteTable strong {
font-size: 11px;
}
.agribusiness-manufacturing .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.agribusiness-manufacturing .quoteTable tfoot {
background: #F5FBFF;
}
.agribusiness-manufacturing .quoteTable tfoot th {
font-size: 10px;
}
.agribusiness-manufacturing .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.agribusiness-manufacturing .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.agribusiness-manufacturing .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.agribusiness-manufacturing .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.agribusiness-manufacturing .orderJourney {
margin: 20px 0;
}
.agribusiness-manufacturing .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.agribusiness-manufacturing .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.agribusiness-manufacturing .journeyRow:last-child:before {
display: none;
}
.agribusiness-manufacturing .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.agribusiness-manufacturing .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.agribusiness-manufacturing .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.agribusiness-manufacturing .journeyRow strong {
font-size: 12px;
display: block;
}
.agribusiness-manufacturing .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.agribusiness-manufacturing .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.agribusiness-manufacturing .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.agribusiness-manufacturing .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.agribusiness-manufacturing .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.agribusiness-manufacturing .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.agribusiness-manufacturing .inventoryIntro strong {
display: block;
font-size: 16px;
}
.agribusiness-manufacturing .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.agribusiness-manufacturing .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.agribusiness-manufacturing .availabilityCard span {
font-size: 9px;
display: block;
}
.agribusiness-manufacturing .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.agribusiness-manufacturing .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.agribusiness-manufacturing .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.agribusiness-manufacturing .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.agribusiness-manufacturing .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.agribusiness-manufacturing .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.agribusiness-manufacturing .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.agribusiness-manufacturing .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.agribusiness-manufacturing .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.agribusiness-manufacturing .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.agribusiness-manufacturing .customerTimeline .dataRow {
border-color: #353535;
}
.agribusiness-manufacturing .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.agribusiness-manufacturing .customerTimeline strong {
color: #fff;
}
.agribusiness-manufacturing .customerTimeline small {
color: #BFBFBF;
}
.agribusiness-manufacturing .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.agribusiness-manufacturing .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.agribusiness-manufacturing .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.agribusiness-manufacturing .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.agribusiness-manufacturing .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.agribusiness-manufacturing .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.agribusiness-manufacturing .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.agribusiness-manufacturing .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.agribusiness-manufacturing .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.agribusiness-manufacturing .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.agribusiness-manufacturing .chartTitle strong {
font-size: 12px;
}
.agribusiness-manufacturing .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.agribusiness-manufacturing .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.agribusiness-manufacturing .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.agribusiness-manufacturing .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.agribusiness-manufacturing .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.agribusiness-manufacturing .inlineCta {
margin-top: 0;
box-shadow: none;
}
.agribusiness-manufacturing .inlineCtaActions {
max-width: 42%;
}
.agribusiness-manufacturing .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.agribusiness-manufacturing .inlineCta h3 {
line-height: 1.35;
}
.agribusiness-manufacturing .card {
box-shadow: none;
}
.agribusiness-manufacturing .cardIcon {
box-shadow: none;
}
.agribusiness-manufacturing .card h3 {
font-size: 22px;
}
.agribusiness-manufacturing .card p {
font-size: 14px;
line-height: 1.8;
}
.agribusiness-manufacturing .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.agribusiness-manufacturing .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.agribusiness-manufacturing .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.agribusiness-manufacturing .ratingBand {
padding: 34px 0;
}
.agribusiness-manufacturing .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.agribusiness-manufacturing .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.agribusiness-manufacturing .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.agribusiness-manufacturing .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.agribusiness-manufacturing .ratingItem:first-child {
border-left: 0;
}
.agribusiness-manufacturing .proofCard h3 {
font-size: 23px;
}
.agribusiness-manufacturing .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.agribusiness-manufacturing .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.agribusiness-manufacturing .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.agribusiness-manufacturing .integration {
min-height: 98px;
}
.agribusiness-manufacturing .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.agribusiness-manufacturing .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.agribusiness-manufacturing .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.agribusiness-manufacturing .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.agribusiness-manufacturing .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.agribusiness-manufacturing .finalActions {
display: grid;
gap: 11px;
}
.agribusiness-manufacturing .finalActions .button {
white-space: nowrap;
}
.agribusiness-manufacturing .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.agribusiness-manufacturing .footerInner p {
margin: 0;
font-size: 12px;
}
.agribusiness-manufacturing .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.agribusiness-manufacturing .navlinks {
gap: 15px;
font-size: 12px;
}
.agribusiness-manufacturing .heroGrid {
gap: 30px;
}
.agribusiness-manufacturing .twoCol {
gap: 32px;
}
.agribusiness-manufacturing .panelBody {
padding: 16px;
}
.agribusiness-manufacturing .panelHead {
padding: 16px;
}
.agribusiness-manufacturing .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.agribusiness-manufacturing .pipelineColumns {
gap: 7px;
}
.agribusiness-manufacturing .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.agribusiness-manufacturing .heroGrid,
.agribusiness-manufacturing .twoCol,
.agribusiness-manufacturing .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .heroGrid {
gap: 36px;
}
.agribusiness-manufacturing .hero h1 {
max-width: 730px;
}
.agribusiness-manufacturing .hero .lead {
max-width: 690px;
}
.agribusiness-manufacturing .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.agribusiness-manufacturing .twoCol {
gap: 34px;
}
.agribusiness-manufacturing .twoCol.reverse .visual {
order: initial;
}
.agribusiness-manufacturing .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.agribusiness-manufacturing .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.agribusiness-manufacturing .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.agribusiness-manufacturing .awardItem {
font-size: 12px;
padding: 13px;
}
.agribusiness-manufacturing .ratingSectionGrid {
gap: 20px;
}
.agribusiness-manufacturing .inlineCta {
align-items: flex-start;
}
.agribusiness-manufacturing .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.agribusiness-manufacturing .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.agribusiness-manufacturing .card {
padding: 22px;
}
.agribusiness-manufacturing .card h3 {
font-size: 21px;
}
.agribusiness-manufacturing .finalActions {
display: flex;
flex-wrap: wrap;
}
.agribusiness-manufacturing .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.agribusiness-manufacturing .cards,
.agribusiness-manufacturing .proofCards {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.agribusiness-manufacturing .inlineCta {
flex-direction: column;
}
.agribusiness-manufacturing .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.agribusiness-manufacturing .inlineCtaActions .button {
flex: 1;
}
.agribusiness-manufacturing .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.agribusiness-manufacturing .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.agribusiness-manufacturing .wrap {
width: calc(100% - 32px);
}
.agribusiness-manufacturing [id] {
scroll-margin-top: 82px;
}
.agribusiness-manufacturing .brand {
font-size: 20px;
gap: 7px;
}
.agribusiness-manufacturing .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.agribusiness-manufacturing .brandMark .icon2 {
width: 18px;
height: 18px;
}
.agribusiness-manufacturing .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.agribusiness-manufacturing section {
padding: 60px 0;
}
.agribusiness-manufacturing .hero {
padding: 51px 0 48px;
}
.agribusiness-manufacturing .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.agribusiness-manufacturing .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.agribusiness-manufacturing .heroActions {
gap: 10px;
margin-top: 25px;
}
.agribusiness-manufacturing .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.agribusiness-manufacturing .hero .microcopy {
font-size: 11px;
}
.agribusiness-manufacturing .heroPills span {
font-size: 9px;
}
.agribusiness-manufacturing .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.agribusiness-manufacturing .sectionHead p {
font-size: 16px;
}
.agribusiness-manufacturing .copy h2 {
font-size: 34px;
}
.agribusiness-manufacturing .copy p {
font-size: 15px;
}
.agribusiness-manufacturing .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.agribusiness-manufacturing .logoBox {
min-height: 53px;
}
.agribusiness-manufacturing .logoBox:last-child {
grid-column: 1/-1;
}
.agribusiness-manufacturing .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agribusiness-manufacturing .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.agribusiness-manufacturing .aiStep strong {
font-size: 13px;
}
.agribusiness-manufacturing .aiStep span {
font-size: 11px;
}
.agribusiness-manufacturing .aiStep::after {
display: none;
}
.agribusiness-manufacturing .outcomeGrid,
.agribusiness-manufacturing .challengeGrid,
.agribusiness-manufacturing .benefitGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .outcome {
padding: 24px;
}
.agribusiness-manufacturing .outcome strong {
font-size: 22px;
}
.agribusiness-manufacturing .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agribusiness-manufacturing .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.agribusiness-manufacturing .awardItem:last-child {
grid-column: 1/-1;
}
.agribusiness-manufacturing .featureList,
.agribusiness-manufacturing .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .featureItem {
font-size: 13px;
}
.agribusiness-manufacturing .inlineCta {
padding: 22px;
gap: 19px;
}
.agribusiness-manufacturing .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.agribusiness-manufacturing .panelHead {
padding: 15px 13px;
}
.agribusiness-manufacturing .panelHead>strong {
font-size: 12px;
}
.agribusiness-manufacturing .panelBody {
padding: 14px;
}
.agribusiness-manufacturing .productPanel {
border-radius: 16px;
}
.agribusiness-manufacturing .productPanel figcaption {
padding: 0 14px 13px;
}
.agribusiness-manufacturing .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.agribusiness-manufacturing .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.agribusiness-manufacturing .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.agribusiness-manufacturing .deal {
margin-top: 0;
padding: 10px;
}
.agribusiness-manufacturing .deal strong {
font-size: 10px;
}
.agribusiness-manufacturing .deal small {
font-size: 9px;
}
.agribusiness-manufacturing .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.agribusiness-manufacturing .mobileWorkspace {
gap: 12px;
}
.agribusiness-manufacturing .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.agribusiness-manufacturing .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.agribusiness-manufacturing .sideTile {
padding: 10px;
}
.agribusiness-manufacturing .sideTile strong {
font-size: 10px;
}
.agribusiness-manufacturing .sideTile p {
font-size: 9px;
}
.agribusiness-manufacturing .mobileHeader strong {
font-size: 15px;
}
.agribusiness-manufacturing .mobileAccount strong {
font-size: 10px;
}
.agribusiness-manufacturing .mobileAccount small {
font-size: 7px;
}
.agribusiness-manufacturing .phoneDevice .rowIcon {
display: none;
}
.agribusiness-manufacturing .quoteTable th,
.agribusiness-manufacturing .quoteTable td {
padding: 12px 4px;
}
.agribusiness-manufacturing .quoteTable strong {
font-size: 10px;
}
.agribusiness-manufacturing .quoteTable small {
font-size: 8px;
}
.agribusiness-manufacturing .quoteTable tfoot th {
font-size: 9px;
}
.agribusiness-manufacturing .docHeader strong {
font-size: 17px;
}
.agribusiness-manufacturing .miniFlow {
gap: 5px;
font-size: 9px;
}
.agribusiness-manufacturing .miniFlow span {
padding: 6px;
}
.agribusiness-manufacturing .rowCopy strong {
font-size: 10px;
}
.agribusiness-manufacturing .rowCopy small {
font-size: 8px;
}
.agribusiness-manufacturing .statusPill {
font-size: 7px;
padding: 5px;
}
.agribusiness-manufacturing .miniStats {
gap: 7px;
}
.agribusiness-manufacturing .miniStats>div {
padding: 9px;
}
.agribusiness-manufacturing .miniStats strong {
font-size: 18px;
}
.agribusiness-manufacturing .miniStats span {
font-size: 8px;
}
.agribusiness-manufacturing .collectionStats>div {
padding: 13px;
}
.agribusiness-manufacturing .collectionStats strong {
font-size: 24px;
}
.agribusiness-manufacturing .customerHeader strong {
font-size: 17px;
}
.agribusiness-manufacturing .customerFacts>div {
padding: 10px;
}
.agribusiness-manufacturing .customerFacts strong {
font-size: 12px;
}
.agribusiness-manufacturing .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agribusiness-manufacturing .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.agribusiness-manufacturing .ratingItem:last-child {
grid-column: 1/-1;
}
.agribusiness-manufacturing .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agribusiness-manufacturing .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.agribusiness-manufacturing .integration small {
font-size: 9px;
}
.agribusiness-manufacturing .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.agribusiness-manufacturing .ctaPanel p {
font-size: 15px;
}
.agribusiness-manufacturing .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .footerInner {
align-items: flex-start;
flex-direction: column;
}
.agribusiness-manufacturing .contextSection {
padding: 0 0 24px;
}
.agribusiness-manufacturing .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.agribusiness-manufacturing .wrap {
width: calc(100% - 24px);
}
.agribusiness-manufacturing .brand {
font-size: 18px;
}
.agribusiness-manufacturing .brandMark {
width: 25px;
height: 25px;
}
.agribusiness-manufacturing .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.agribusiness-manufacturing .hero h1 {
font-size: 38px;
}
.agribusiness-manufacturing .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.agribusiness-manufacturing .copy h2 {
font-size: 31px;
}
.agribusiness-manufacturing .mobileWorkspace {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .phoneDevice {
width: 210px;
}
.agribusiness-manufacturing .phoneDevice .rowIcon {
display: grid;
}
.agribusiness-manufacturing .mobileSide {
gap: 8px;
}
.agribusiness-manufacturing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.agribusiness-manufacturing .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.agribusiness-manufacturing .sideTile p {
margin: 0;
}
.agribusiness-manufacturing .miniFlow span {
padding: 5px;
font-size: 8px;
}
.agribusiness-manufacturing .collectionStats strong {
font-size: 21px;
}
.agribusiness-manufacturing .inventoryIntro strong {
font-size: 14px;
}
.agribusiness-manufacturing .dataRow {
gap: 7px;
}
.agribusiness-manufacturing .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.agribusiness-manufacturing .inlineCtaActions {
flex-direction: column;
}
}
.agribusiness-manufacturing .hero .eyebrow {
max-width: 100%;
}
.agribusiness-manufacturing .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.agribusiness-manufacturing .ganttIllustration,
.agribusiness-manufacturing .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.agribusiness-manufacturing .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.agribusiness-manufacturing .costIllustration {
aspect-ratio: 484/226;
}
.agribusiness-manufacturing .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.agribusiness-manufacturing .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.agribusiness-manufacturing .comparisonTable thead {
background: var(--black);
color: #fff;
}
.agribusiness-manufacturing .comparisonTable thead th:last-child {
color: var(--yellow);
}
.agribusiness-manufacturing .comparisonTable th,
.agribusiness-manufacturing .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.agribusiness-manufacturing .comparisonTable th:first-child {
width: 23%;
}
.agribusiness-manufacturing .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.agribusiness-manufacturing .comparisonTable tbody td {
color: var(--muted);
}
.agribusiness-manufacturing .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.agribusiness-manufacturing .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.agribusiness-manufacturing .card,
.agribusiness-manufacturing .proofCard,
.agribusiness-manufacturing .productPanel,
.agribusiness-manufacturing .outcome,
.agribusiness-manufacturing .benefit {
box-shadow: none;
}
.agribusiness-manufacturing .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.agribusiness-manufacturing .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.agribusiness-manufacturing .hero .eyebrow {
font-size: 10px;
}
.agribusiness-manufacturing .comparisonTable {
font-size: 11px;
}
.agribusiness-manufacturing .comparisonTable th,
.agribusiness-manufacturing .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.agribusiness-manufacturing .comparisonTable th:first-child {
width: 24%;
}
.agribusiness-manufacturing .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.agribusiness-manufacturing .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.agribusiness-manufacturing .hero h1 {
font-size: 38px;
}
}
.agribusiness-manufacturing .scheduleIllustration,
.agribusiness-manufacturing .analyticsIllustration,
.agribusiness-manufacturing .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.agribusiness-manufacturing .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.agribusiness-manufacturing .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.agribusiness-manufacturing .conditionIllustration {
aspect-ratio: 484 / 178;
}
.agribusiness-manufacturing .miniStats strong {
font-variant-numeric: tabular-nums;
}
.agribusiness-manufacturing .quoteTable td:last-child {
white-space: nowrap;
}
.agribusiness-manufacturing .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.agribusiness-manufacturing .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.agribusiness-manufacturing .darkSection .textCta {
color: var(--yellow);
}
.agribusiness-manufacturing .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.agribusiness-manufacturing .secondaryLinks .textCta {
font-size: 12px;
}
.agribusiness-manufacturing .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.agribusiness-manufacturing .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.agribusiness-manufacturing .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.agribusiness-manufacturing .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.agribusiness-manufacturing .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.agribusiness-manufacturing .scanSummary>.icon2 {
color: var(--yellow);
flex: 0 0 24px;
}
.agribusiness-manufacturing .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.agribusiness-manufacturing .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.agribusiness-manufacturing .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.agribusiness-manufacturing .returnFlag .icon2 {
flex: 0 0 24px;
}
.agribusiness-manufacturing .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.agribusiness-manufacturing .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.agribusiness-manufacturing .phoneDevice {
max-width: 100%;
}
.agribusiness-manufacturing .heroPills {
line-height: 1.55;
}
.agribusiness-manufacturing .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.agribusiness-manufacturing .plantFacts {
gap: 7px;
}
.agribusiness-manufacturing .plantFacts>div {
padding: 9px;
}
.agribusiness-manufacturing .plantFacts strong {
font-size: 11px;
}
.agribusiness-manufacturing .scanSummary {
padding: 12px;
}
.agribusiness-manufacturing .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.agribusiness-manufacturing .mobileWorkspace {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .phoneDevice {
width: 224px;
margin: auto;
}
.agribusiness-manufacturing .phoneDevice .rowIcon {
display: grid;
}
.agribusiness-manufacturing .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.agribusiness-manufacturing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.agribusiness-manufacturing .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.agribusiness-manufacturing .sideTile strong {
font-size: 12px;
}
.agribusiness-manufacturing .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.agribusiness-manufacturing .topbar,
.agribusiness-manufacturing .heroActions,
.agribusiness-manufacturing .finalActions,
.agribusiness-manufacturing .contextSection,
.agribusiness-manufacturing .valueCtaSection {
display: none;
}
.agribusiness-manufacturing section {
break-inside: avoid;
padding: 28px 0;
}
.agribusiness-manufacturing .hero {
padding-top: 20px;
}
}
.agribusiness-manufacturing .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.agribusiness-manufacturing .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.agribusiness-manufacturing .heroAccent {
color: var(--black);
}
.agribusiness-manufacturing .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.agribusiness-manufacturing .heroActions {
gap: 10px;
margin-top: 24px;
}
.agribusiness-manufacturing .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.agribusiness-manufacturing .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.agribusiness-manufacturing .microcopy {
margin-top: 14px;
}
.agribusiness-manufacturing .heroPills {
margin-top: 13px;
}
.agribusiness-manufacturing .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.agribusiness-manufacturing .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.agribusiness-manufacturing .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.agribusiness-manufacturing .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.agribusiness-manufacturing .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.agribusiness-manufacturing .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.agribusiness-manufacturing .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.agribusiness-manufacturing .clientBand {
padding: 24px 0;
}
.agribusiness-manufacturing .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.agribusiness-manufacturing .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.agribusiness-manufacturing .logoBox.wide {
font-size: 15px;
}
.agribusiness-manufacturing .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.agribusiness-manufacturing .sectionHead p {
margin: 17px 0 0;
}
.agribusiness-manufacturing .copy p {
margin: 16px 0 0;
}
.agribusiness-manufacturing .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.agribusiness-manufacturing .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.agribusiness-manufacturing .aiJourney {
background: var(--black);
}
.agribusiness-manufacturing .aiStep {
min-height: 157px;
border-color: #353535;
}
.agribusiness-manufacturing .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
.agribusiness-manufacturing .productPanel {
border-radius: 18px;
}
.agribusiness-manufacturing .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.agribusiness-manufacturing .panelHead>strong {
font-size: 13px;
}
.agribusiness-manufacturing .sampleTag {
font-size: 9px;
}
.agribusiness-manufacturing .panelBody {
padding: 21px;
}
.agribusiness-manufacturing .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.agribusiness-manufacturing .docHeader {
padding-bottom: 16px;
}
.agribusiness-manufacturing .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.agribusiness-manufacturing .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.agribusiness-manufacturing .smallLabel {
font-size: 9px;
}
.agribusiness-manufacturing .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.agribusiness-manufacturing .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.agribusiness-manufacturing .dataRow {
padding: 14px 0;
}
.agribusiness-manufacturing .statusPill {
font-size: 8px;
}
.agribusiness-manufacturing .miniStats {
gap: 10px;
margin: 18px 0;
}
.agribusiness-manufacturing .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.agribusiness-manufacturing .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.agribusiness-manufacturing .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.agribusiness-manufacturing .contextNote {
font-size: 11px;
margin-top: 16px;
}
.agribusiness-manufacturing .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.agribusiness-manufacturing .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.agribusiness-manufacturing .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.agribusiness-manufacturing .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.agribusiness-manufacturing .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.agribusiness-manufacturing .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.agribusiness-manufacturing .hierarchy strong {
color: var(--navy);
}
.agribusiness-manufacturing .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.agribusiness-manufacturing .conditionIllustration {
aspect-ratio: 484/201;
}
.agribusiness-manufacturing .analyticsIllustration {
aspect-ratio: 484/206;
}
.agribusiness-manufacturing .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.agribusiness-manufacturing .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.agribusiness-manufacturing .phoneDevice .rowCopy strong {
font-size: 10px;
}
.agribusiness-manufacturing .phoneDevice .rowCopy small {
font-size: 9px;
}
.agribusiness-manufacturing .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.agribusiness-manufacturing .mobileAccount small {
font-size: 9px;
}
.agribusiness-manufacturing .sideTile {
background: var(--sky-2);
padding: 14px;
}
.agribusiness-manufacturing .sideTile strong {
font-size: 12px;
}
.agribusiness-manufacturing .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.agribusiness-manufacturing .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.agribusiness-manufacturing .mobileAction {
font-size: 9px;
}
.agribusiness-manufacturing .journeyRow strong {
font-size: 13px;
}
.agribusiness-manufacturing .journeyRow small {
font-size: 11px;
}
.agribusiness-manufacturing .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.agribusiness-manufacturing .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.agribusiness-manufacturing .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.agribusiness-manufacturing .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.agribusiness-manufacturing .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.agribusiness-manufacturing .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.agribusiness-manufacturing .utilityReadout small {
font-size: 12px;
}
.agribusiness-manufacturing .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.agribusiness-manufacturing .darkSection {
background: var(--black);
}
.agribusiness-manufacturing .darkSection .panelHead {
background: var(--black-soft);
}
.agribusiness-manufacturing .darkSection .productPanel {
background: var(--black-soft);
}
.agribusiness-manufacturing .darkSection .copy .featureNote {
color: #CFCFCF;
}
.agribusiness-manufacturing .darkSection .rowCopy strong {
color: #FFFFFF;
}
.agribusiness-manufacturing .darkSection .rowCopy small {
color: #CFCFCF;
}
.agribusiness-manufacturing .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.agribusiness-manufacturing .assistantHead small {
font-size: 11px;
}
.agribusiness-manufacturing .assistantNote {
font-size: 11px;
}
.agribusiness-manufacturing .reportTags span {
font-size: 10px;
}
.agribusiness-manufacturing .card p {
margin: 12px 0 0;
}
.agribusiness-manufacturing .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.agribusiness-manufacturing .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.agribusiness-manufacturing .cards>.card {
display: flex;
flex-direction: column;
}
.agribusiness-manufacturing .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.agribusiness-manufacturing .cards>.card p {
padding-bottom: 22px;
}
.agribusiness-manufacturing .benefitBand {
background: var(--black);
}
.agribusiness-manufacturing .benefit {
background: var(--black-soft);
}
.agribusiness-manufacturing .inlineCta h3 {
font-size: 20px;
}
.agribusiness-manufacturing .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.agribusiness-manufacturing .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.agribusiness-manufacturing .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.agribusiness-manufacturing .valueCtaSection {
padding: 32px 0;
}
.agribusiness-manufacturing .proofCard p {
margin-top: 15px;
}
.agribusiness-manufacturing .proofCard h3 {
font-size: 23px;
}
.agribusiness-manufacturing .integrationNote {
margin-top: 23px;
}
.agribusiness-manufacturing .ctaPanel {
background: var(--black);
}
.agribusiness-manufacturing .ctaPanel p {
margin-top: 16px;
}
.agribusiness-manufacturing .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.agribusiness-manufacturing .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.agribusiness-manufacturing a:hover {
text-decoration: none;
}
.agribusiness-manufacturing .textCta:hover {
color: var(--navy);
}
.agribusiness-manufacturing .darkSection .textCta:hover {
color: #FFFFFF;
}
.agribusiness-manufacturing .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.agribusiness-manufacturing .hero h1 {
font-size: 49px;
}
.agribusiness-manufacturing .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.agribusiness-manufacturing .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.agribusiness-manufacturing .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.agribusiness-manufacturing .hero h1 {
font-size: 58px;
}
.agribusiness-manufacturing .heroVisual {
max-width: 548px;
}
.agribusiness-manufacturing .hero .lead {
max-width: 700px;
}
.agribusiness-manufacturing .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.agribusiness-manufacturing .logoBox {
font-size: 18px;
border: 0 !important;
}
.agribusiness-manufacturing .logoBox:last-child {
grid-column: auto;
}
.agribusiness-manufacturing .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.agribusiness-manufacturing .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.agribusiness-manufacturing .inlineCtaActions .button {
flex: 1;
}
.agribusiness-manufacturing .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.agribusiness-manufacturing section {
padding: 55px 0;
}
.agribusiness-manufacturing .hero {
padding: 28px 0 40px;
}
.agribusiness-manufacturing .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.agribusiness-manufacturing .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.agribusiness-manufacturing .heroActions {
gap: 10px;
}
.agribusiness-manufacturing .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.agribusiness-manufacturing .breadcrumb {
margin-bottom: 21px;
}
.agribusiness-manufacturing .hero .eyebrow {
font-size: 11px;
}
.agribusiness-manufacturing .heroVisual {
max-width: 480px;
}
.agribusiness-manufacturing .heroPills {
row-gap: 9px;
}
.agribusiness-manufacturing .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.agribusiness-manufacturing .heroPills span+span {
padding-left: 7px;
}
.agribusiness-manufacturing .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.agribusiness-manufacturing .logoBox:last-child {
grid-column: 1/-1;
}
.agribusiness-manufacturing .clientBand {
padding: 25px 0;
}
.agribusiness-manufacturing .copy h2 {
font-size: 33px;
}
.agribusiness-manufacturing .panelBody {
padding: 16px;
}
.agribusiness-manufacturing .panelHead {
padding: 15px;
}
.agribusiness-manufacturing .panelHead>strong {
font-size: 12px;
}
.agribusiness-manufacturing .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.agribusiness-manufacturing .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.agribusiness-manufacturing .docHeader strong {
font-size: 18px;
}
.agribusiness-manufacturing .docHeader small {
font-size: 10px;
}
.agribusiness-manufacturing .rowCopy strong {
font-size: 11px;
}
.agribusiness-manufacturing .rowCopy small {
font-size: 10px;
}
.agribusiness-manufacturing .miniStats {
gap: 7px;
}
.agribusiness-manufacturing .miniStats strong {
font-size: 21px;
}
.agribusiness-manufacturing .miniStats span {
font-size: 9px;
}
.agribusiness-manufacturing .miniStats>div {
padding: 10px 8px;
}
.agribusiness-manufacturing .plantFacts {
gap: 8px;
}
.agribusiness-manufacturing .plantFacts>div {
padding: 10px;
}
.agribusiness-manufacturing .plantFacts strong {
font-size: 11px;
}
.agribusiness-manufacturing .contextNote {
font-size: 10px;
gap: 8px;
}
.agribusiness-manufacturing .utilityReadout {
padding: 12px;
gap: 10px;
}
.agribusiness-manufacturing .utilityReadout span {
font-size: 8px;
}
.agribusiness-manufacturing .utilityReadout strong {
font-size: 24px;
}
.agribusiness-manufacturing .utilityReadout .utilityScope {
font-size: 14px;
}
.agribusiness-manufacturing .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.agribusiness-manufacturing .comparisonTable {
font-size: 11px;
}
.agribusiness-manufacturing .comparisonTable th,
.agribusiness-manufacturing .comparisonTable td {
padding: 13px 9px;
}
.agribusiness-manufacturing .contextSection {
padding: 0 0 22px;
}
.agribusiness-manufacturing .valueCtaSection {
padding: 25px 0;
}
.agribusiness-manufacturing .inlineCtaActions {
flex-direction: column;
}
.agribusiness-manufacturing .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.agribusiness-manufacturing .mobileWorkspace {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .phoneDevice {
width: 222px;
}
.agribusiness-manufacturing .phoneDevice .rowIcon {
display: grid;
}
.agribusiness-manufacturing .mobileSide {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.agribusiness-manufacturing .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0 0;
}
.agribusiness-manufacturing .sideTile p {
margin: 0;
}
.agribusiness-manufacturing .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.agribusiness-manufacturing .dataRow {
gap: 8px;
}
.agribusiness-manufacturing .statusPill {
font-size: 7px;
padding: 5px;
}
.agribusiness-manufacturing .miniStats strong {
font-size: 19px;
}
.agribusiness-manufacturing .heroActions {
flex-direction: column;
align-items: stretch;
}
.agribusiness-manufacturing .heroActions .button {
width: 100%;
}
.agribusiness-manufacturing .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.agribusiness-manufacturing .aiFlow {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.agribusiness-manufacturing .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.agribusiness-manufacturing .aiStep strong {
margin: 0;
font-size: 15px;
}
.agribusiness-manufacturing .aiStep span {
font-size: 13px;
}
.agribusiness-manufacturing .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.agribusiness-manufacturing .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.agribusiness-manufacturing .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.agribusiness-manufacturing .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.agribusiness-manufacturing .navlinks {
gap: 20px;
font-size: 12px;
}
.agribusiness-manufacturing .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.agribusiness-manufacturing .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.agribusiness-manufacturing .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.agribusiness-manufacturing .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.agribusiness-manufacturing .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.agribusiness-manufacturing .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.agribusiness-manufacturing .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.agribusiness-manufacturing .industryIntro {
padding: 78px 0 66px;
}
.agribusiness-manufacturing .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.agribusiness-manufacturing .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.agribusiness-manufacturing .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.agribusiness-manufacturing .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.agribusiness-manufacturing .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.agribusiness-manufacturing .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.agribusiness-manufacturing .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.agribusiness-manufacturing .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.agribusiness-manufacturing .industryPriority>.icon2 {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.agribusiness-manufacturing .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.agribusiness-manufacturing .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.agribusiness-manufacturing .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.agribusiness-manufacturing .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.agribusiness-manufacturing .industryPriority:hover {
border-color: var(--brand-dark);
}
.agribusiness-manufacturing .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.agribusiness-manufacturing .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.agribusiness-manufacturing .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.agribusiness-manufacturing .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.agribusiness-manufacturing .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.agribusiness-manufacturing .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.agribusiness-manufacturing .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.agribusiness-manufacturing .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.agribusiness-manufacturing .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.agribusiness-manufacturing .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.agribusiness-manufacturing .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.agribusiness-manufacturing .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.agribusiness-manufacturing .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.agribusiness-manufacturing .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.agribusiness-manufacturing .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.agribusiness-manufacturing .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.agribusiness-manufacturing .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.agribusiness-manufacturing .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.agribusiness-manufacturing .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.agribusiness-manufacturing .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.agribusiness-manufacturing .vedaMessage.assistant>small {
color: var(--yellow);
}
.agribusiness-manufacturing .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.agribusiness-manufacturing .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.agribusiness-manufacturing .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.agribusiness-manufacturing .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.agribusiness-manufacturing .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.agribusiness-manufacturing .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.agribusiness-manufacturing .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.agribusiness-manufacturing .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.agribusiness-manufacturing .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.agribusiness-manufacturing .manufacturingSpotlight {
padding: 73px 0;
}
.agribusiness-manufacturing .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.agribusiness-manufacturing .rfidSpotlight {
background: #fff;
}
.agribusiness-manufacturing .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.agribusiness-manufacturing .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.agribusiness-manufacturing .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.agribusiness-manufacturing .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.agribusiness-manufacturing .spotlightHead h2 span {
color: var(--brand-dark);
}
.agribusiness-manufacturing .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.agribusiness-manufacturing .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.agribusiness-manufacturing .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.agribusiness-manufacturing .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.agribusiness-manufacturing .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.agribusiness-manufacturing .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.agribusiness-manufacturing .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.agribusiness-manufacturing .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.agribusiness-manufacturing .featureTab:hover {
border-color: var(--brand-dark);
}
.agribusiness-manufacturing .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.agribusiness-manufacturing .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.agribusiness-manufacturing .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.agribusiness-manufacturing .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.agribusiness-manufacturing .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.agribusiness-manufacturing .featurePanel {
display: none;
}
.agribusiness-manufacturing .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.agribusiness-manufacturing .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.agribusiness-manufacturing .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.agribusiness-manufacturing .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.agribusiness-manufacturing .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.agribusiness-manufacturing .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.agribusiness-manufacturing .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.agribusiness-manufacturing .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.agribusiness-manufacturing .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.agribusiness-manufacturing .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.agribusiness-manufacturing .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.agribusiness-manufacturing .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.agribusiness-manufacturing .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.agribusiness-manufacturing .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.agribusiness-manufacturing .decisionSpotlight .textCta {
color: var(--yellow);
}
.agribusiness-manufacturing .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.agribusiness-manufacturing .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.agribusiness-manufacturing .mediaTitle>.icon2 {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.agribusiness-manufacturing .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.agribusiness-manufacturing .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.agribusiness-manufacturing .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.agribusiness-manufacturing .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.agribusiness-manufacturing .signalFlow>.icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.agribusiness-manufacturing .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.agribusiness-manufacturing .rfidImageSurface {
background: #172029;
padding: 5px;
}
.agribusiness-manufacturing .rfidImageSurface img {
width: 100%;
height: auto;
}
.agribusiness-manufacturing .rfidMedia figcaption {
padding-top: 13px;
}
.agribusiness-manufacturing .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.agribusiness-manufacturing .aiReviewBody {
padding: 18px;
}
.agribusiness-manufacturing .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.agribusiness-manufacturing .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.agribusiness-manufacturing .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.agribusiness-manufacturing .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.agribusiness-manufacturing .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.agribusiness-manufacturing .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.agribusiness-manufacturing .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.agribusiness-manufacturing .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.agribusiness-manufacturing .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.agribusiness-manufacturing .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.agribusiness-manufacturing .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.agribusiness-manufacturing .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.agribusiness-manufacturing .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.agribusiness-manufacturing .aiReviewAction strong {
display: block;
font-size: 11px;
}
.agribusiness-manufacturing .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.agribusiness-manufacturing .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.agribusiness-manufacturing .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.agribusiness-manufacturing .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.agribusiness-manufacturing .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.agribusiness-manufacturing .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.agribusiness-manufacturing .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.agribusiness-manufacturing .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.agribusiness-manufacturing .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.agribusiness-manufacturing .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.agribusiness-manufacturing .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.agribusiness-manufacturing .workflowDetails summary::-webkit-details-marker {
display: none;
}
.agribusiness-manufacturing .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.agribusiness-manufacturing .workflowDetails[open] summary::after {
content: "−";
}
.agribusiness-manufacturing .workflowDetails .featureList,
.agribusiness-manufacturing .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.agribusiness-manufacturing .workflowDetails .featureItem {
font-size: 11px;
}
.agribusiness-manufacturing .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.agribusiness-manufacturing .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.agribusiness-manufacturing #agri-connected-tools {
background: #fff;
}
.agribusiness-manufacturing #agri-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.agribusiness-manufacturing .featureTab,
.agribusiness-manufacturing .industryPriority,
.agribusiness-manufacturing summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.agribusiness-manufacturing .industryIntroHead {
gap: 30px;
}
.agribusiness-manufacturing .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.agribusiness-manufacturing .featureStage {
gap: 26px;
padding: 26px;
}
.agribusiness-manufacturing .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.agribusiness-manufacturing .factoryWorkflow {
padding: 22px;
}
.agribusiness-manufacturing .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.agribusiness-manufacturing .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agribusiness-manufacturing .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.agribusiness-manufacturing .industryPriorityGrid {
gap: 14px;
}
.agribusiness-manufacturing .industryPriority {
padding: 22px 19px;
}
.agribusiness-manufacturing .industryPriority h3 {
font-size: 21px;
}
.agribusiness-manufacturing .industryPriority p {
font-size: 12px;
}
.agribusiness-manufacturing .priorityLink {
font-size: 10px;
}
.agribusiness-manufacturing .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.agribusiness-manufacturing .vedaIndustryCopy h2 {
font-size: 39px;
}
.agribusiness-manufacturing .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.agribusiness-manufacturing .vedaUseCases>div {
display: block;
}
.agribusiness-manufacturing .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.agribusiness-manufacturing .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.agribusiness-manufacturing .featureTabs {
gap: 8px;
}
.agribusiness-manufacturing .featureTab {
min-height: 108px;
}
.agribusiness-manufacturing .featureStage,
.agribusiness-manufacturing .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.agribusiness-manufacturing .rfidSpotlight .spotlightMedia,
.agribusiness-manufacturing .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.agribusiness-manufacturing .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.agribusiness-manufacturing .featurePanel {
min-height: 0;
}
.agribusiness-manufacturing .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.agribusiness-manufacturing .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.agribusiness-manufacturing .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.agribusiness-manufacturing .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.agribusiness-manufacturing .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.agribusiness-manufacturing .clientBand {
padding: 22px 0;
}
.agribusiness-manufacturing .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.agribusiness-manufacturing .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.agribusiness-manufacturing .clientBand .logoBox.wide {
font-size: 10px;
}
.agribusiness-manufacturing .clientBand .logoBox:last-child {
grid-column: auto;
}
.agribusiness-manufacturing .industryIntro {
padding: 53px 0;
}
.agribusiness-manufacturing .industryIntroHead h2 {
font-size: 32px;
}
.agribusiness-manufacturing .industryIntroHead>p {
font-size: 14px;
}
.agribusiness-manufacturing .industryPriorityGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .industryPriority {
padding: 23px;
}
.agribusiness-manufacturing .industryPriority h3 {
font-size: 24px;
}
.agribusiness-manufacturing .industryPriority>.icon2 {
margin: 5px 0 15px;
}
.agribusiness-manufacturing .industryPriority p {
font-size: 13px;
}
.agribusiness-manufacturing .priorityLink {
font-size: 11px;
}
.agribusiness-manufacturing .vedaIndustry {
padding: 0 0 52px;
}
.agribusiness-manufacturing .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.agribusiness-manufacturing .vedaIndustryCopy h2 {
font-size: 32px;
}
.agribusiness-manufacturing .vedaIndustryCopy>p {
font-size: 14px;
}
.agribusiness-manufacturing .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.agribusiness-manufacturing .vedaUseCases>div {
display: flex;
}
.agribusiness-manufacturing .vedaConversationHead {
padding: 16px 13px;
}
.agribusiness-manufacturing .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.agribusiness-manufacturing .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.agribusiness-manufacturing .vedaMessage.user {
margin-left: 25px;
}
.agribusiness-manufacturing .vedaMessage.assistant {
margin-right: 14px;
}
.agribusiness-manufacturing .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.agribusiness-manufacturing .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.agribusiness-manufacturing .manufacturingSpotlight {
padding: 54px 0;
}
.agribusiness-manufacturing .spotlightHead h2 {
font-size: 32px;
}
.agribusiness-manufacturing .spotlightHead>p {
font-size: 14px;
}
.agribusiness-manufacturing .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.agribusiness-manufacturing .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.agribusiness-manufacturing .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.agribusiness-manufacturing .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.agribusiness-manufacturing .featurePanel h3 {
font-size: 24px;
}
.agribusiness-manufacturing .featurePanel>p {
font-size: 13px;
}
.agribusiness-manufacturing .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.agribusiness-manufacturing .spotlightChecks>li {
font-size: 12px;
}
.agribusiness-manufacturing .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.agribusiness-manufacturing .spotlightActions .button {
width: 100%;
}
.agribusiness-manufacturing .spotlightScope {
font-size: 10px;
}
.agribusiness-manufacturing .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.agribusiness-manufacturing .mediaTitle strong {
font-size: 11px;
}
.agribusiness-manufacturing .mediaTitle div>span {
font-size: 8px;
}
.agribusiness-manufacturing .mediaTitle>.icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.agribusiness-manufacturing .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.agribusiness-manufacturing .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.agribusiness-manufacturing .rfidMedia figcaption {
padding-top: 12px;
}
.agribusiness-manufacturing .aiReviewBody {
padding: 13px;
}
.agribusiness-manufacturing .aiIssue {
padding: 13px;
}
.agribusiness-manufacturing .aiIssue strong {
font-size: 14px;
}
.agribusiness-manufacturing .aiEvidence {
gap: 6px;
}
.agribusiness-manufacturing .aiEvidence>div {
padding: 10px 7px;
}
.agribusiness-manufacturing .aiEvidence strong {
font-size: 9px;
}
.agribusiness-manufacturing .aiEvidence span {
font-size: 7px;
}
.agribusiness-manufacturing .exampleLabel {
font-size: 6px;
}
.agribusiness-manufacturing .factoryWorkflows {
padding: 55px 0;
}
.agribusiness-manufacturing .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.agribusiness-manufacturing .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.agribusiness-manufacturing .industryRibbonGrid {
gap: 12px;
}
.agribusiness-manufacturing .industryRibbonGrid>div {
font-size: 10px;
}
.agribusiness-manufacturing .spotlightHead h2 {
font-size: 29px;
}
.agribusiness-manufacturing .featureStage {
padding: 19px 13px;
}
.agribusiness-manufacturing .mediaTitle>.icon2 {
display: none;
}
.agribusiness-manufacturing .exampleLabel {
display: none;
}
.agribusiness-manufacturing .vedaBrand {
font-size: 27px;
}
}
@media print {
.agribusiness-manufacturing .featureTabs {
display: none;
}
.agribusiness-manufacturing .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.agribusiness-manufacturing .featureStage {
display: block;
}
.agribusiness-manufacturing .featurePanel {
color: #000;
}
}
.agribusiness-manufacturing #agri-predictive-features-1:checked~.featureTabs label[for="agri-predictive-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-predictive-features-1:focus-visible~.featureTabs label[for="agri-predictive-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-predictive-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-2:checked~.featureTabs label[for="agri-predictive-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-predictive-features-2:focus-visible~.featureTabs label[for="agri-predictive-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-predictive-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-3:checked~.featureTabs label[for="agri-predictive-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-predictive-features-3:focus-visible~.featureTabs label[for="agri-predictive-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-predictive-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-4:checked~.featureTabs label[for="agri-predictive-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-predictive-features-4:focus-visible~.featureTabs label[for="agri-predictive-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-predictive-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-5:checked~.featureTabs label[for="agri-predictive-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-predictive-features-5:focus-visible~.featureTabs label[for="agri-predictive-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-predictive-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-1:checked~.featureTabs label[for="agri-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-rfid-features-1:focus-visible~.featureTabs label[for="agri-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-2:checked~.featureTabs label[for="agri-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-rfid-features-2:focus-visible~.featureTabs label[for="agri-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-3:checked~.featureTabs label[for="agri-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-rfid-features-3:focus-visible~.featureTabs label[for="agri-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-4:checked~.featureTabs label[for="agri-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-rfid-features-4:focus-visible~.featureTabs label[for="agri-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-5:checked~.featureTabs label[for="agri-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-rfid-features-5:focus-visible~.featureTabs label[for="agri-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-1:checked~.featureTabs label[for="agri-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-ai-decisions-features-1:focus-visible~.featureTabs label[for="agri-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-2:checked~.featureTabs label[for="agri-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-ai-decisions-features-2:focus-visible~.featureTabs label[for="agri-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-3:checked~.featureTabs label[for="agri-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-ai-decisions-features-3:focus-visible~.featureTabs label[for="agri-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-4:checked~.featureTabs label[for="agri-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-ai-decisions-features-4:focus-visible~.featureTabs label[for="agri-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-5:checked~.featureTabs label[for="agri-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.agribusiness-manufacturing #agri-ai-decisions-features-5:focus-visible~.featureTabs label[for="agri-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.agribusiness-manufacturing #agri-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.agribusiness-manufacturing .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .featureMediaPanels {
min-width: 0;
}
.agribusiness-manufacturing .featureMediaPanels .miniChart {
height: 178px;
}
.agribusiness-manufacturing .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.agribusiness-manufacturing .featureMediaPanels .windowTop strong,
.agribusiness-manufacturing .featureMediaPanels .windowTop small {
display: block;
}
.agribusiness-manufacturing .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.agribusiness-manufacturing .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agribusiness-manufacturing .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.agribusiness-manufacturing .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.agribusiness-manufacturing .featureMediaPanels .windowBody>*,
.agribusiness-manufacturing .featureMediaPanels .spectrumGrid>*,
.agribusiness-manufacturing .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes {
min-height: 258px;
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.agribusiness-manufacturing .featureMediaPanels .mapPin {
box-shadow: none;
}
.agribusiness-manufacturing .pin2 {
top: 88px;
right: 88px;
}
.agribusiness-manufacturing .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.agribusiness-manufacturing .featureMediaPanels .mediaShell {
padding: 10px;
}
.agribusiness-manufacturing .featureMediaPanels .windowBody {
padding: 10px;
}
.agribusiness-manufacturing .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .featureMediaPanels .alertBadge {
justify-self: start;
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.agribusiness-manufacturing .featureMediaPanels .graphNodes .node.n1,
.agribusiness-manufacturing .featureMediaPanels .graphNodes .node.n2,
.agribusiness-manufacturing .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.agribusiness-manufacturing .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.agribusiness-manufacturing .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.agribusiness-manufacturing .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.agribusiness-manufacturing .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.agribusiness-manufacturing .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.agribusiness-manufacturing .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.agribusiness-manufacturing .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.agribusiness-manufacturing .freshGraphic * {
box-sizing: border-box;
}
.agribusiness-manufacturing .rfPanel,
.agribusiness-manufacturing .aiInsightCard,
.agribusiness-manufacturing .forecastVisualCard,
.agribusiness-manufacturing .forecastSuggestion,
.agribusiness-manufacturing .knowledgeTile,
.agribusiness-manufacturing .chatConversation,
.agribusiness-manufacturing .trainingSummary,
.agribusiness-manufacturing .moduleCard,
.agribusiness-manufacturing .qualityHeatCard,
.agribusiness-manufacturing .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.agribusiness-manufacturing .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.agribusiness-manufacturing .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.agribusiness-manufacturing .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.agribusiness-manufacturing .statusPill,
.agribusiness-manufacturing .cardTag,
.agribusiness-manufacturing .forecastSuggestion b,
.agribusiness-manufacturing .moduleCard b,
.agribusiness-manufacturing .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.agribusiness-manufacturing .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.agribusiness-manufacturing .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.agribusiness-manufacturing .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.agribusiness-manufacturing .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.agribusiness-manufacturing .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.agribusiness-manufacturing .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.agribusiness-manufacturing .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.agribusiness-manufacturing .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.agribusiness-manufacturing .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.agribusiness-manufacturing .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.agribusiness-manufacturing .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.agribusiness-manufacturing .dot.good {
background: #298EEC;
}
.agribusiness-manufacturing .dot.warn {
background: #F4A62A;
}
.agribusiness-manufacturing .dot.bad {
background: #EB6B53;
}
.agribusiness-manufacturing .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.agribusiness-manufacturing .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.agribusiness-manufacturing .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.agribusiness-manufacturing .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.agribusiness-manufacturing .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.agribusiness-manufacturing .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.agribusiness-manufacturing .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.agribusiness-manufacturing .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.agribusiness-manufacturing .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.agribusiness-manufacturing .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.agribusiness-manufacturing .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.agribusiness-manufacturing .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.agribusiness-manufacturing .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.agribusiness-manufacturing .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.agribusiness-manufacturing .moveRow b {
color: #298EEC;
font-size: 9px;
}
.agribusiness-manufacturing .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.agribusiness-manufacturing .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.agribusiness-manufacturing .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.agribusiness-manufacturing .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.agribusiness-manufacturing .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.agribusiness-manufacturing .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.agribusiness-manufacturing .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.agribusiness-manufacturing .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.agribusiness-manufacturing .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.agribusiness-manufacturing .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.agribusiness-manufacturing .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.agribusiness-manufacturing .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.agribusiness-manufacturing .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.agribusiness-manufacturing .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.agribusiness-manufacturing .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.agribusiness-manufacturing .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.agribusiness-manufacturing .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.agribusiness-manufacturing .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.agribusiness-manufacturing .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.agribusiness-manufacturing .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.agribusiness-manufacturing .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.agribusiness-manufacturing .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.agribusiness-manufacturing .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.agribusiness-manufacturing .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.agribusiness-manufacturing .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.agribusiness-manufacturing .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.agribusiness-manufacturing .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.agribusiness-manufacturing .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.agribusiness-manufacturing .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.agribusiness-manufacturing .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.agribusiness-manufacturing .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.agribusiness-manufacturing .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.agribusiness-manufacturing .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.agribusiness-manufacturing .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.agribusiness-manufacturing .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.agribusiness-manufacturing .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.agribusiness-manufacturing .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.agribusiness-manufacturing .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.agribusiness-manufacturing .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.agribusiness-manufacturing .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.agribusiness-manufacturing .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.agribusiness-manufacturing .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.agribusiness-manufacturing .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.agribusiness-manufacturing .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.agribusiness-manufacturing .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.agribusiness-manufacturing .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.agribusiness-manufacturing .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.agribusiness-manufacturing .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.agribusiness-manufacturing .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.agribusiness-manufacturing .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.agribusiness-manufacturing .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.agribusiness-manufacturing .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.agribusiness-manufacturing .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.agribusiness-manufacturing .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.agribusiness-manufacturing .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.agribusiness-manufacturing .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.agribusiness-manufacturing .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.agribusiness-manufacturing .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.agribusiness-manufacturing .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.agribusiness-manufacturing .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.agribusiness-manufacturing .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.agribusiness-manufacturing .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.agribusiness-manufacturing .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.agribusiness-manufacturing .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.agribusiness-manufacturing .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.agribusiness-manufacturing .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.agribusiness-manufacturing .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.agribusiness-manufacturing .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.agribusiness-manufacturing .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.agribusiness-manufacturing .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.agribusiness-manufacturing .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.agribusiness-manufacturing .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.agribusiness-manufacturing .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.agribusiness-manufacturing .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.agribusiness-manufacturing .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.agribusiness-manufacturing .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.agribusiness-manufacturing .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.agribusiness-manufacturing .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.agribusiness-manufacturing .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.agribusiness-manufacturing .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.agribusiness-manufacturing .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.agribusiness-manufacturing .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.agribusiness-manufacturing .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.agribusiness-manufacturing .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.agribusiness-manufacturing .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.agribusiness-manufacturing .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.agribusiness-manufacturing .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.agribusiness-manufacturing .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.agribusiness-manufacturing .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.agribusiness-manufacturing .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.agribusiness-manufacturing .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.agribusiness-manufacturing .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.agribusiness-manufacturing .chartLegend .sw.blue {
background: #298EEC;
}
.agribusiness-manufacturing .chartLegend .sw.amber {
background: #F4A62A;
}
.agribusiness-manufacturing .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.agribusiness-manufacturing .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.agribusiness-manufacturing .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.agribusiness-manufacturing .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.agribusiness-manufacturing .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.agribusiness-manufacturing .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.agribusiness-manufacturing .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.agribusiness-manufacturing .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.agribusiness-manufacturing .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.agribusiness-manufacturing .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.agribusiness-manufacturing .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.agribusiness-manufacturing .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.agribusiness-manufacturing .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.agribusiness-manufacturing .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.agribusiness-manufacturing .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.agribusiness-manufacturing .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.agribusiness-manufacturing .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.agribusiness-manufacturing .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.agribusiness-manufacturing .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.agribusiness-manufacturing .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.agribusiness-manufacturing .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.agribusiness-manufacturing .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.agribusiness-manufacturing .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.agribusiness-manufacturing .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.agribusiness-manufacturing .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.agribusiness-manufacturing .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.agribusiness-manufacturing .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.agribusiness-manufacturing .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.agribusiness-manufacturing .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.agribusiness-manufacturing .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.agribusiness-manufacturing .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.agribusiness-manufacturing .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.agribusiness-manufacturing .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.agribusiness-manufacturing .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.agribusiness-manufacturing .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.agribusiness-manufacturing .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.agribusiness-manufacturing .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.agribusiness-manufacturing .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.agribusiness-manufacturing .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.agribusiness-manufacturing .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.agribusiness-manufacturing .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.agribusiness-manufacturing .freshGraphic {
height: auto;
min-height: 420px;
}
.agribusiness-manufacturing .rfTrackLayout,
.agribusiness-manufacturing .rfFlowLayout,
.agribusiness-manufacturing .rfAlertGrid,
.agribusiness-manufacturing .rfCycleLayout,
.agribusiness-manufacturing .rfSitesLayout,
.agribusiness-manufacturing .aiRootLayout,
.agribusiness-manufacturing .aiForecastLayout,
.agribusiness-manufacturing .aiChatLayout,
.agribusiness-manufacturing .aiTrainingLayout,
.agribusiness-manufacturing .aiQualityLayout,
.agribusiness-manufacturing .trainingModuleGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.agribusiness-manufacturing .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.agribusiness-manufacturing .rfAlertGrid {
grid-template-columns: 1fr;
}
.agribusiness-manufacturing .qualityHeatGrid span {
min-height: 40px;
}
.agribusiness-manufacturing .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.agribusiness-manufacturing .aiLink {
display: none;
}
}
.agribusiness-manufacturing .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.agribusiness-manufacturing .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.agribusiness-manufacturing .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.agribusiness-manufacturing .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.agribusiness-manufacturing .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.agribusiness-manufacturing .mfgHeroBreadcrumb a {
color: inherit;
}
.agribusiness-manufacturing .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.agribusiness-manufacturing .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.agribusiness-manufacturing .mfgHero h1 {
color: #fff;
}
.agribusiness-manufacturing .mfgHero h1>span {
display: block;
}
.agribusiness-manufacturing .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
.agribusiness-manufacturing .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.agribusiness-manufacturing .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.agribusiness-manufacturing .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.agribusiness-manufacturing .mfgHeroActions .outline:hover {
background: #172029;
}
.agribusiness-manufacturing .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.agribusiness-manufacturing .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.agribusiness-manufacturing .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.agribusiness-manufacturing .mfgHeroContent {
min-height: 610px;
}
.agribusiness-manufacturing .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.agribusiness-manufacturing .mfgHeroLead {
font-size: 16px;
}
.agribusiness-manufacturing .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.agribusiness-manufacturing .mfgHero {
display: flex;
flex-direction: column;
}
.agribusiness-manufacturing .mfgHeroContent {
order: 0;
min-height: 0;
}
.agribusiness-manufacturing .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.agribusiness-manufacturing .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.agribusiness-manufacturing .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.agribusiness-manufacturing .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.agribusiness-manufacturing .mfgHeroCopy {
padding: 25px 0 20px;
}
.agribusiness-manufacturing .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.agribusiness-manufacturing .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.agribusiness-manufacturing .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.agribusiness-manufacturing .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.agribusiness-manufacturing .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.agribusiness-manufacturing .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.agribusiness-manufacturing .mfgHeroScene {
height: 280px;
}
}
@media print {
.agribusiness-manufacturing .mfgHero {
background: #fff;
color: #000;
}
.agribusiness-manufacturing .mfgHeroScene,
.agribusiness-manufacturing .mfgHeroActions {
display: none;
}
.agribusiness-manufacturing .mfgHeroContent {
min-height: 0;
}
.agribusiness-manufacturing .mfgHeroCopy {
width: 100%;
max-width: none;
}
.agribusiness-manufacturing .mfgHero h1,
.agribusiness-manufacturing .mfgHero h1 .mfgHeroAccent,
.agribusiness-manufacturing .mfgHero p {
color: #000;
}
}
.agribusiness-manufacturing #agri-rfid .featureStage,
.agribusiness-manufacturing #agri-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.agribusiness-manufacturing .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.agribusiness-manufacturing .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.agribusiness-manufacturing .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.agribusiness-manufacturing .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.agribusiness-manufacturing .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.agribusiness-manufacturing .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.agribusiness-manufacturing .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.agribusiness-manufacturing .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.agribusiness-manufacturing .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.agribusiness-manufacturing .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.agribusiness-manufacturing .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.agribusiness-manufacturing .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.agribusiness-manufacturing .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.agribusiness-manufacturing .mfgGallery .rfPanel {
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.agribusiness-manufacturing .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.agribusiness-manufacturing .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.agribusiness-manufacturing .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .shelf span {
font-size: 11px;
}
.agribusiness-manufacturing .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.agribusiness-manufacturing .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.agribusiness-manufacturing .mfgGallery .rfKpiGrid {
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.agribusiness-manufacturing .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.agribusiness-manufacturing .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.agribusiness-manufacturing .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.agribusiness-manufacturing .mfgGallery .rfScanCard span {
font-size: 9px;
}
.agribusiness-manufacturing .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.agribusiness-manufacturing .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.agribusiness-manufacturing .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.agribusiness-manufacturing .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.agribusiness-manufacturing .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.agribusiness-manufacturing .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.agribusiness-manufacturing .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.agribusiness-manufacturing .mfgGallery .flowArrow {
display: none;
}
.agribusiness-manufacturing .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .railItem {
padding: 9px 7px;
}
.agribusiness-manufacturing .mfgGallery .railItem b {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.agribusiness-manufacturing .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.agribusiness-manufacturing .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.agribusiness-manufacturing .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.agribusiness-manufacturing .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .reorderCard strong {
font-size: 13px;
}
.agribusiness-manufacturing .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.agribusiness-manufacturing .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.agribusiness-manufacturing .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.agribusiness-manufacturing .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.agribusiness-manufacturing .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.agribusiness-manufacturing .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.agribusiness-manufacturing .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.agribusiness-manufacturing .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.agribusiness-manufacturing .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.agribusiness-manufacturing .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.agribusiness-manufacturing .mfgGallery .varianceCard {
padding: 12px;
}
.agribusiness-manufacturing .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.agribusiness-manufacturing .mfgGallery .varianceCard small {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.agribusiness-manufacturing .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.agribusiness-manufacturing .mfgGallery .deviceTop {
font-size: 11px;
}
.agribusiness-manufacturing .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.agribusiness-manufacturing .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.agribusiness-manufacturing .mfgGallery .deviceMetric {
padding: 9px;
}
.agribusiness-manufacturing .mfgGallery .deviceMetric span {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .deviceMetric b {
font-size: 12px;
}
.agribusiness-manufacturing .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.agribusiness-manufacturing .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.agribusiness-manufacturing .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.agribusiness-manufacturing .mfgGallery .siteNode.north {
top: 6px;
}
.agribusiness-manufacturing .mfgGallery .siteNode.south {
bottom: 6px;
}
.agribusiness-manufacturing .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.agribusiness-manufacturing .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.agribusiness-manufacturing .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.agribusiness-manufacturing .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.agribusiness-manufacturing .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.agribusiness-manufacturing .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.agribusiness-manufacturing .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.agribusiness-manufacturing .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.agribusiness-manufacturing .mfgGallery .siteSummary strong {
font-size: 12px;
}
.agribusiness-manufacturing .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.agribusiness-manufacturing .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.agribusiness-manufacturing .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.agribusiness-manufacturing .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.agribusiness-manufacturing .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.agribusiness-manufacturing .mfgGallery .insightMeta {
gap: 6px;
}
.agribusiness-manufacturing .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.agribusiness-manufacturing .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .chartHeader span {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .chartHeader b {
font-size: 11px;
}
.agribusiness-manufacturing .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.agribusiness-manufacturing .mfgGallery .chartLegend {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.agribusiness-manufacturing .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.agribusiness-manufacturing .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.agribusiness-manufacturing .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.agribusiness-manufacturing .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.agribusiness-manufacturing .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.agribusiness-manufacturing .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.agribusiness-manufacturing .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.agribusiness-manufacturing .mfgGallery .progressCenter strong {
font-size: 25px;
}
.agribusiness-manufacturing .mfgGallery .trainingStatList {
gap: 9px;
}
.agribusiness-manufacturing .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.agribusiness-manufacturing .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.agribusiness-manufacturing .mfgGallery .trainingStatList span {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.agribusiness-manufacturing .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.agribusiness-manufacturing .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.agribusiness-manufacturing .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.agribusiness-manufacturing .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.agribusiness-manufacturing .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.agribusiness-manufacturing .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.agribusiness-manufacturing .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.agribusiness-manufacturing .mfgGallery .qualityCaption span {
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.agribusiness-manufacturing .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.agribusiness-manufacturing .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.agribusiness-manufacturing .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.agribusiness-manufacturing .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.agribusiness-manufacturing #agri-rfid .featureStage,
.agribusiness-manufacturing #agri-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.agribusiness-manufacturing #agri-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.agribusiness-manufacturing .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.agribusiness-manufacturing #agri-rfid .featureStage,
.agribusiness-manufacturing #agri-ai-decisions .featureStage {
padding: 16px;
}
.agribusiness-manufacturing .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.agribusiness-manufacturing .mfgGallery .freshWindow {
height: auto;
}
.agribusiness-manufacturing .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.agribusiness-manufacturing .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .freshTop strong {
font-size: 13px;
}
.agribusiness-manufacturing .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.agribusiness-manufacturing .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.agribusiness-manufacturing .mfgGallery .rfShelfPanel {
padding: 10px;
}
.agribusiness-manufacturing .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.agribusiness-manufacturing .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.agribusiness-manufacturing .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.agribusiness-manufacturing .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.agribusiness-manufacturing .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.agribusiness-manufacturing .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.agribusiness-manufacturing .mfgGallery .flowNum {
grid-row: 1/3;
}
.agribusiness-manufacturing .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.agribusiness-manufacturing .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.agribusiness-manufacturing .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agribusiness-manufacturing .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.agribusiness-manufacturing .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.agribusiness-manufacturing .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.agribusiness-manufacturing .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.agribusiness-manufacturing .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.agribusiness-manufacturing .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.agribusiness-manufacturing .mfgGallery .rfActionStrip {
height: auto;
}
.agribusiness-manufacturing .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .countPanel {
gap: 14px;
}
.agribusiness-manufacturing .mfgGallery .handheldPanel {
padding: 15px;
}
.agribusiness-manufacturing .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.agribusiness-manufacturing .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.agribusiness-manufacturing .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.agribusiness-manufacturing .mfgGallery .siteNode.east {
right: 3%;
}
.agribusiness-manufacturing .mfgGallery .siteNode.west {
left: 3%;
}
.agribusiness-manufacturing .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.agribusiness-manufacturing .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.agribusiness-manufacturing .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.agribusiness-manufacturing .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.agribusiness-manufacturing .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.agribusiness-manufacturing .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.agribusiness-manufacturing .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.agribusiness-manufacturing .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.agribusiness-manufacturing .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.agribusiness-manufacturing .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.agribusiness-manufacturing .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.agribusiness-manufacturing .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.agribusiness-manufacturing .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.agribusiness-manufacturing .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.agribusiness-manufacturing .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.agribusiness-manufacturing .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.agribusiness-manufacturing .mfgGallery .moduleCard {
padding: 10px;
}
.agribusiness-manufacturing .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.agribusiness-manufacturing .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.agribusiness-manufacturing .mfgGallery .qualityAction strong {
font-size: 12px;
}
.agribusiness-manufacturing .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.agribusiness-manufacturing .mfgGallery .shelf i::after {
bottom: 0;
}
.agribusiness-manufacturing .agriVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.agribusiness-manufacturing .agriGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.agribusiness-manufacturing .agriIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.agribusiness-manufacturing .agriStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.agribusiness-manufacturing .agriVisualGallery>.agriGraphic {
display: none;
}
.agribusiness-manufacturing #agri-predictive .featureStage,
.agribusiness-manufacturing #agri-rfid .featureStage,
.agribusiness-manufacturing #agri-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.agribusiness-manufacturing #agri-rfid .agriVisualGallery {
grid-column: 1;
grid-row: 1;
}
.agribusiness-manufacturing #agri-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.agribusiness-manufacturing .factoryWorkflow {
display: flex;
flex-direction: column;
}
.agribusiness-manufacturing .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.agribusiness-manufacturing .factoryWorkflow>p {
margin-bottom: 22px;
}
.agribusiness-manufacturing .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.agribusiness-manufacturing #agri-predictive .featureStage,
.agribusiness-manufacturing #agri-rfid .featureStage,
.agribusiness-manufacturing #agri-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.agribusiness-manufacturing #agri-rfid .agriVisualGallery,
.agribusiness-manufacturing #agri-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.agribusiness-manufacturing .mfgHeroScene {
height: 290px;
}
.agribusiness-manufacturing #agri-predictive .featureStage,
.agribusiness-manufacturing #agri-rfid .featureStage,
.agribusiness-manufacturing #agri-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.agribusiness-manufacturing .agriVisualGallery {
width: 100%;
}
}
@media print {
.agribusiness-manufacturing .agriVisualGallery>.agriGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.agribusiness-manufacturing #agri-predictive-features-1:checked~.featureStage .agriVisualGallery> :nth-child(1) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-2:checked~.featureStage .agriVisualGallery> :nth-child(2) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-3:checked~.featureStage .agriVisualGallery> :nth-child(3) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-4:checked~.featureStage .agriVisualGallery> :nth-child(4) {
display: block;
}
.agribusiness-manufacturing #agri-predictive-features-5:checked~.featureStage .agriVisualGallery> :nth-child(5) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-1:checked~.featureStage .agriVisualGallery> :nth-child(1) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-2:checked~.featureStage .agriVisualGallery> :nth-child(2) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-3:checked~.featureStage .agriVisualGallery> :nth-child(3) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-4:checked~.featureStage .agriVisualGallery> :nth-child(4) {
display: block;
}
.agribusiness-manufacturing #agri-rfid-features-5:checked~.featureStage .agriVisualGallery> :nth-child(5) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-1:checked~.featureStage .agriVisualGallery> :nth-child(1) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-2:checked~.featureStage .agriVisualGallery> :nth-child(2) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-3:checked~.featureStage .agriVisualGallery> :nth-child(3) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-4:checked~.featureStage .agriVisualGallery> :nth-child(4) {
display: block;
}
.agribusiness-manufacturing #agri-ai-decisions-features-5:checked~.featureStage .agriVisualGallery> :nth-child(5) {
display: block;
}
.agribusiness-manufacturing .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.agribusiness-manufacturing .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.agribusiness-manufacturing .agriIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.agribusiness-manufacturing .agriGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.agribusiness-manufacturing .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.agribusiness-manufacturing .mfgHeroScene img {
object-position: 70% 50%;
}
.agribusiness-manufacturing .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.agribusiness-manufacturing .mfgHeroScene img {
object-position: 78% 50%;
}
.agribusiness-manufacturing .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}  .healthcare-and-hospital .industryIntroHead.compact,
.healthcare-and-hospital .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.healthcare-and-hospital .featureMediaPanels {
position: relative;
min-height: 430px;
}
.healthcare-and-hospital .featureMediaPanels>.mediaPanel {
display: none;
}
.healthcare-and-hospital .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.healthcare-and-hospital .featureMediaPanels .spotlightMedia {
height: 100%;
}
.healthcare-and-hospital .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.healthcare-and-hospital .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.healthcare-and-hospital .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.healthcare-and-hospital .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.healthcare-and-hospital .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.healthcare-and-hospital .windowTop small {
font-size: 10px;
color: var(--muted);
}
.healthcare-and-hospital .windowDots {
display: flex;
gap: 5px;
}
.healthcare-and-hospital .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.healthcare-and-hospital .windowBody {
padding: 16px;
}
.healthcare-and-hospital .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.healthcare-and-hospital .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.healthcare-and-hospital .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.healthcare-and-hospital .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.healthcare-and-hospital .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.healthcare-and-hospital .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.healthcare-and-hospital .chartGridLine.l1 {
top: 34px;
}
.healthcare-and-hospital .chartGridLine.l2 {
top: 65px;
}
.healthcare-and-hospital .chartGridLine.l3 {
top: 96px;
}
.healthcare-and-hospital .chartGridLine.l4 {
top: 127px;
}
.healthcare-and-hospital .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.healthcare-and-hospital .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.healthcare-and-hospital .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.healthcare-and-hospital .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.healthcare-and-hospital .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.healthcare-and-hospital .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.healthcare-and-hospital .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.healthcare-and-hospital .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.healthcare-and-hospital .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.healthcare-and-hospital .spectrumNotes {
display: grid;
gap: 10px;
}
.healthcare-and-hospital .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.healthcare-and-hospital .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.healthcare-and-hospital .noteCard p,
.healthcare-and-hospital .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.healthcare-and-hospital .alertStack {
display: grid;
gap: 10px;
}
.healthcare-and-hospital .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.healthcare-and-hospital .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.healthcare-and-hospital .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.healthcare-and-hospital .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.healthcare-and-hospital .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.healthcare-and-hospital .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.healthcare-and-hospital .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.healthcare-and-hospital .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.healthcare-and-hospital .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.healthcare-and-hospital .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.healthcare-and-hospital .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.healthcare-and-hospital .scheduleBoard h4,
.healthcare-and-hospital .todoBoard h4,
.healthcare-and-hospital .siteBoard h4,
.healthcare-and-hospital .chatPanel h4,
.healthcare-and-hospital .lessonPanel h4,
.healthcare-and-hospital .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.healthcare-and-hospital .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.healthcare-and-hospital .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.healthcare-and-hospital .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.healthcare-and-hospital .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.healthcare-and-hospital .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.healthcare-and-hospital .taskRow:last-child {
border-bottom: 0;
}
.healthcare-and-hospital .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.healthcare-and-hospital .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.healthcare-and-hospital .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.healthcare-and-hospital .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.healthcare-and-hospital .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.healthcare-and-hospital .inventoryTable th,
.healthcare-and-hospital .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.healthcare-and-hospital .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.healthcare-and-hospital .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.healthcare-and-hospital .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.healthcare-and-hospital .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.healthcare-and-hospital .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.healthcare-and-hospital .phoneBody {
padding: 12px;
}
.healthcare-and-hospital .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.healthcare-and-hospital .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.healthcare-and-hospital .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.healthcare-and-hospital .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.healthcare-and-hospital .progressList {
display: grid;
gap: 10px;
}
.healthcare-and-hospital .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.healthcare-and-hospital .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.healthcare-and-hospital .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.healthcare-and-hospital .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.healthcare-and-hospital .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.healthcare-and-hospital .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.healthcare-and-hospital .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.healthcare-and-hospital .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.healthcare-and-hospital .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.healthcare-and-hospital .pin1 {
top: 56px;
left: 58px;
}
.healthcare-and-hospital .pin2 {
top: 88px;
right: 88px;
}
.healthcare-and-hospital .pin3 {
bottom: 54px;
right: 72px;
}
.healthcare-and-hospital .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.healthcare-and-hospital .siteRow:last-child {
border-bottom: 0;
}
.healthcare-and-hospital .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.healthcare-and-hospital .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.healthcare-and-hospital .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.healthcare-and-hospital .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.healthcare-and-hospital .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.healthcare-and-hospital .graphNodes:before,
.healthcare-and-hospital .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.healthcare-and-hospital .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.healthcare-and-hospital .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.healthcare-and-hospital .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.healthcare-and-hospital .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.healthcare-and-hospital .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.healthcare-and-hospital .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.healthcare-and-hospital .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.healthcare-and-hospital .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.healthcare-and-hospital .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.healthcare-and-hospital .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.healthcare-and-hospital .forecastList .taskRow strong {
font-size: 11px;
}
.healthcare-and-hospital .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.healthcare-and-hospital .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.healthcare-and-hospital .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.healthcare-and-hospital .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.healthcare-and-hospital .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.healthcare-and-hospital .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.healthcare-and-hospital .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.healthcare-and-hospital .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.healthcare-and-hospital .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.healthcare-and-hospital .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.healthcare-and-hospital .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.healthcare-and-hospital .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.healthcare-and-hospital .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.healthcare-and-hospital .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.healthcare-and-hospital .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.healthcare-and-hospital .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.healthcare-and-hospital .qualityRows {
display: grid;
gap: 10px;
}
.healthcare-and-hospital .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.healthcare-and-hospital .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.healthcare-and-hospital .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.healthcare-and-hospital .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.healthcare-and-hospital .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.healthcare-and-hospital #healthcare-maintenance-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.healthcare-and-hospital #healthcare-maintenance-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.healthcare-and-hospital #healthcare-maintenance-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.healthcare-and-hospital #healthcare-maintenance-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.healthcare-and-hospital #healthcare-maintenance-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.healthcare-and-hospital #healthcare-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.healthcare-and-hospital #healthcare-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.healthcare-and-hospital #healthcare-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.healthcare-and-hospital #healthcare-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.healthcare-and-hospital #healthcare-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.healthcare-and-hospital #healthcare-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.healthcare-and-hospital #healthcare-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.healthcare-and-hospital #healthcare-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.healthcare-and-hospital #healthcare-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.healthcare-and-hospital #healthcare-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.healthcare-and-hospital #healthcare-maintenance-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.healthcare-and-hospital #healthcare-maintenance-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.healthcare-and-hospital #healthcare-maintenance-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.healthcare-and-hospital #healthcare-maintenance-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.healthcare-and-hospital #healthcare-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.healthcare-and-hospital #healthcare-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.healthcare-and-hospital #healthcare-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.healthcare-and-hospital #healthcare-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.healthcare-and-hospital #healthcare-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.healthcare-and-hospital #healthcare-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.healthcare-and-hospital #healthcare-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.healthcare-and-hospital #healthcare-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.healthcare-and-hospital #healthcare-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.healthcare-and-hospital #healthcare-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.healthcare-and-hospital .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.healthcare-and-hospital .featureMediaPanels {
min-height: 0;
}
.healthcare-and-hospital .inventorySplit,
.healthcare-and-hospital .forecastGrid,
.healthcare-and-hospital .siteGrid,
.healthcare-and-hospital .spectrumGrid,
.healthcare-and-hospital .scheduleGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.healthcare-and-hospital .metricGrid,
.healthcare-and-hospital .lessonCards,
.healthcare-and-hospital .gaugeGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.healthcare-and-hospital .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.healthcare-and-hospital .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.healthcare-and-hospital .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.healthcare-and-hospital .brand span {
color: var(--brand);
}
.healthcare-and-hospital .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.healthcare-and-hospital .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.healthcare-and-hospital .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.healthcare-and-hospital .button.primary:hover {
background: var(--brand-dark);
}
.healthcare-and-hospital .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.healthcare-and-hospital .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.healthcare-and-hospital .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.healthcare-and-hospital .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.healthcare-and-hospital .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.healthcare-and-hospital .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.healthcare-and-hospital .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.healthcare-and-hospital .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.healthcare-and-hospital .hero .button.primary:hover {
background: var(--black-soft);
}
.healthcare-and-hospital .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.healthcare-and-hospital .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.healthcare-and-hospital .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.healthcare-and-hospital .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.healthcare-and-hospital .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.healthcare-and-hospital .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.healthcare-and-hospital .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.healthcare-and-hospital .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.healthcare-and-hospital .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.healthcare-and-hospital .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.healthcare-and-hospital .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.healthcare-and-hospital .ratingLead strong {
display: block;
font-size: 20px;
}
.healthcare-and-hospital .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.healthcare-and-hospital .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.healthcare-and-hospital .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.healthcare-and-hospital .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.healthcare-and-hospital .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.healthcare-and-hospital .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.healthcare-and-hospital .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.healthcare-and-hospital .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.healthcare-and-hospital .aiJourney h2 {
color: #fff;
}
.healthcare-and-hospital .aiJourney .sectionHead p {
color: #D7D7D7;
}
.healthcare-and-hospital .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.healthcare-and-hospital .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.healthcare-and-hospital .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.healthcare-and-hospital .aiStep:last-child::after {
display: none;
}
.healthcare-and-hospital .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.healthcare-and-hospital .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.healthcare-and-hospital .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.healthcare-and-hospital .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.healthcare-and-hospital .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.healthcare-and-hospital .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.healthcare-and-hospital .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.healthcare-and-hospital .outcome span {
color: var(--muted);
font-size: 14px;
}
.healthcare-and-hospital .capability {
background: #fff;
}
.healthcare-and-hospital .capability.alt {
background: var(--sky-2);
}
.healthcare-and-hospital .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.healthcare-and-hospital .twoCol.reverse .visual {
order: 2;
}
.healthcare-and-hospital .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.healthcare-and-hospital .visual .placeholder {
min-height: 355px;
}
.healthcare-and-hospital .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.healthcare-and-hospital .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.healthcare-and-hospital details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.healthcare-and-hospital details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.healthcare-and-hospital details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.healthcare-and-hospital details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.healthcare-and-hospital details.capabilityMore[open] summary::after {
content: "−";
}
.healthcare-and-hospital details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.healthcare-and-hospital .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.healthcare-and-hospital .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.healthcare-and-hospital .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.healthcare-and-hospital .darkSection h2,
.healthcare-and-hospital .darkSection h3 {
color: #fff;
}
.healthcare-and-hospital .darkSection .sectionHead p,
.healthcare-and-hospital .darkSection .copy p {
color: #D7D7D7;
}
.healthcare-and-hospital .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital .darkSection .featureItem {
color: #F7F7F7;
}
.healthcare-and-hospital .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.healthcare-and-hospital .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.healthcare-and-hospital .darkSection .placeholder small {
color: #D0D0D0;
}
.healthcare-and-hospital .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.healthcare-and-hospital .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.healthcare-and-hospital .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.healthcare-and-hospital .card p {
color: var(--muted);
margin: 12px 0 0;
}
.healthcare-and-hospital .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.healthcare-and-hospital .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.healthcare-and-hospital .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.healthcare-and-hospital .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.healthcare-and-hospital .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.healthcare-and-hospital .benefitBand h2 {
color: #fff;
}
.healthcare-and-hospital .benefitBand .sectionHead p {
color: #D5D5D5;
}
.healthcare-and-hospital .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.healthcare-and-hospital .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.healthcare-and-hospital .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.healthcare-and-hospital .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.healthcare-and-hospital .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.healthcare-and-hospital .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.healthcare-and-hospital .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.healthcare-and-hospital .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.healthcare-and-hospital .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.healthcare-and-hospital .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.healthcare-and-hospital .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.healthcare-and-hospital .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.healthcare-and-hospital .ctaPanel h2 {
color: #fff;
}
.healthcare-and-hospital .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.healthcare-and-hospital .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.healthcare-and-hospital .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.healthcare-and-hospital .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.healthcare-and-hospital .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.healthcare-and-hospital .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.healthcare-and-hospital .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.healthcare-and-hospital .inlineCta.dark h3 {
color: #fff;
}
.healthcare-and-hospital .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.healthcare-and-hospital .inlineCta.dark p {
color: #D8D8D8;
}
.healthcare-and-hospital .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.healthcare-and-hospital .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.healthcare-and-hospital .button.yellow:hover {
background: #FFD84D;
}
.healthcare-and-hospital .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.healthcare-and-hospital .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.healthcare-and-hospital .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.healthcare-and-hospital .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.healthcare-and-hospital footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.healthcare-and-hospital .ratingSectionGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.healthcare-and-hospital .heroGrid,
.healthcare-and-hospital .twoCol,
.healthcare-and-hospital .ctaPanel {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .twoCol.reverse .visual {
order: initial;
}
.healthcare-and-hospital .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.healthcare-and-hospital .ratingGrid,
.healthcare-and-hospital .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.healthcare-and-hospital .ratingLead,
.healthcare-and-hospital .awardLead {
grid-column: 1/-1;
text-align: center;
}
.healthcare-and-hospital .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.healthcare-and-hospital .aiStep:nth-child(3)::after,
.healthcare-and-hospital .aiStep:last-child::after {
display: none;
}
.healthcare-and-hospital .outcomeGrid,
.healthcare-and-hospital .challengeGrid,
.healthcare-and-hospital .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.healthcare-and-hospital .cards,
.healthcare-and-hospital .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.healthcare-and-hospital .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.healthcare-and-hospital .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.healthcare-and-hospital .awardProofGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .wrap {
width: min(var(--max), calc(100% - 24px));
}
.healthcare-and-hospital .hero {
padding: 58px 0 52px;
}
.healthcare-and-hospital section {
padding: 64px 0;
}
.healthcare-and-hospital h1 {
font-size: 44px;
}
.healthcare-and-hospital .aiFlow {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .aiStep::after {
display: none;
}
.healthcare-and-hospital .logoRow,
.healthcare-and-hospital .ratingGrid,
.healthcare-and-hospital .awardGrid,
.healthcare-and-hospital .outcomeGrid,
.healthcare-and-hospital .challengeGrid,
.healthcare-and-hospital .benefitGrid,
.healthcare-and-hospital .cards,
.healthcare-and-hospital .proofCards,
.healthcare-and-hospital .integrationGrid,
.healthcare-and-hospital .featureList {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.healthcare-and-hospital .ctaPanel {
padding: 34px 24px;
}
.healthcare-and-hospital .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.healthcare-and-hospital .inlineCtaActions {
width: 100%;
}
.healthcare-and-hospital .inlineCtaActions .button {
flex: 1;
}
}
.healthcare-and-hospital .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.healthcare-and-hospital .darkSection h2,
.healthcare-and-hospital .darkSection h3,
.healthcare-and-hospital .aiJourney h2,
.healthcare-and-hospital .benefitBand h2,
.healthcare-and-hospital .ctaPanel h2,
.healthcare-and-hospital .inlineCta.dark h3 {
color: #fff;
}
.healthcare-and-hospital .wrap>*,
.healthcare-and-hospital .heroGrid>*,
.healthcare-and-hospital .twoCol>*,
.healthcare-and-hospital .ctaPanel>* {
min-width: 0;
}
.healthcare-and-hospital .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.healthcare-and-hospital .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.healthcare-and-hospital .skipLink:focus {
transform: none;
}
.healthcare-and-hospital a:focus-visible,
.healthcare-and-hospital summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.healthcare-and-hospital .darkSection a:focus-visible,
.healthcare-and-hospital .darkSection summary:focus-visible,
.healthcare-and-hospital .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.healthcare-and-hospital .topbar {
background: #fff;
backdrop-filter: none;
}
.healthcare-and-hospital .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.healthcare-and-hospital .brandName {
display: inline;
color: var(--navy) !important;
}
.healthcare-and-hospital .brandName>span {
color: var(--brand-dark);
}
.healthcare-and-hospital .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.healthcare-and-hospital .brandMark .icon2 {
width: 21px;
height: 21px;
}
.healthcare-and-hospital .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.healthcare-and-hospital .navlinks a:hover {
color: var(--brand-dark);
}
.healthcare-and-hospital .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.healthcare-and-hospital .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.healthcare-and-hospital .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.healthcare-and-hospital .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.healthcare-and-hospital .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.healthcare-and-hospital .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.healthcare-and-hospital .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.healthcare-and-hospital .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.healthcare-and-hospital .heroVisual {
width: 100%;
min-width: 0;
}
.healthcare-and-hospital .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.healthcare-and-hospital .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.healthcare-and-hospital .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.healthcare-and-hospital .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.healthcare-and-hospital .clientBand {
padding: 27px 0;
}
.healthcare-and-hospital .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.healthcare-and-hospital .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.healthcare-and-hospital .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.healthcare-and-hospital .logoBox.wide {
font-size: 12px;
}
.healthcare-and-hospital .logoBox small {
display: block;
font-size: 10px;
}
.healthcare-and-hospital section {
padding: 80px 0;
}
.healthcare-and-hospital h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.healthcare-and-hospital .sectionHead {
margin-bottom: 36px;
}
.healthcare-and-hospital .eyebrow {
line-height: 1.5;
}
.healthcare-and-hospital .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.healthcare-and-hospital .aiStep {
min-height: 162px;
}
.healthcare-and-hospital .aiStep strong {
line-height: 1.35;
}
.healthcare-and-hospital .aiStep span {
line-height: 1.65;
}
.healthcare-and-hospital .aiCallout {
margin-top: 24px;
}
.healthcare-and-hospital .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.healthcare-and-hospital .outcome>.icon2 {
color: var(--navy);
}
.healthcare-and-hospital .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.healthcare-and-hospital .twoCol.reverse .visual {
order: -1;
}
.healthcare-and-hospital .copy .eyebrow {
margin-bottom: 17px;
}
.healthcare-and-hospital .copy p {
font-size: 16px;
line-height: 1.85;
}
.healthcare-and-hospital .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.healthcare-and-hospital .featureList {
gap: 13px 18px;
}
.healthcare-and-hospital .featureItem {
font-size: 13px;
line-height: 1.6;
}
.healthcare-and-hospital .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.healthcare-and-hospital .check .icon2 {
width: 14px;
height: 14px;
}
.healthcare-and-hospital details.capabilityMore {
margin-bottom: 0;
}
.healthcare-and-hospital .capabilityMore summary {
min-height: 34px;
}
.healthcare-and-hospital .capabilityMore .moreGrid {
gap: 13px 18px;
}
.healthcare-and-hospital .textCta {
font-size: 14px;
}
.healthcare-and-hospital .visual {
min-width: 0;
}
.healthcare-and-hospital .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.healthcare-and-hospital .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.healthcare-and-hospital .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.healthcare-and-hospital .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.healthcare-and-hospital .panelBody {
padding: 20px;
}
.healthcare-and-hospital .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.healthcare-and-hospital .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.healthcare-and-hospital .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.healthcare-and-hospital .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.healthcare-and-hospital .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.healthcare-and-hospital .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.healthcare-and-hospital .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.healthcare-and-hospital .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.healthcare-and-hospital .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.healthcare-and-hospital .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.healthcare-and-hospital .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.healthcare-and-hospital .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.healthcare-and-hospital .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.healthcare-and-hospital .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.healthcare-and-hospital .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.healthcare-and-hospital .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.healthcare-and-hospital .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.healthcare-and-hospital .miniStats span {
font-size: 9px;
color: var(--muted);
}
.healthcare-and-hospital .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.healthcare-and-hospital .dataRow:last-child {
border-bottom: 0;
}
.healthcare-and-hospital .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.healthcare-and-hospital .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.healthcare-and-hospital .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.healthcare-and-hospital .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.healthcare-and-hospital .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.healthcare-and-hospital .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.healthcare-and-hospital .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.healthcare-and-hospital .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.healthcare-and-hospital .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.healthcare-and-hospital .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.healthcare-and-hospital .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.healthcare-and-hospital .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.healthcare-and-hospital .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.healthcare-and-hospital .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.healthcare-and-hospital .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.healthcare-and-hospital .mobileAccount {
text-align: center;
padding: 13px 0;
}
.healthcare-and-hospital .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.healthcare-and-hospital .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.healthcare-and-hospital .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.healthcare-and-hospital .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.healthcare-and-hospital .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.healthcare-and-hospital .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.healthcare-and-hospital .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.healthcare-and-hospital .phoneDevice .rowCopy strong {
font-size: 9px;
}
.healthcare-and-hospital .phoneDevice .rowCopy small {
font-size: 7px;
}
.healthcare-and-hospital .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.healthcare-and-hospital .mobileSide {
display: grid;
gap: 10px;
}
.healthcare-and-hospital .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.healthcare-and-hospital .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.healthcare-and-hospital .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.healthcare-and-hospital .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.healthcare-and-hospital .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.healthcare-and-hospital .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.healthcare-and-hospital .darkSection .panelHead>strong {
color: #fff;
}
.healthcare-and-hospital .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.healthcare-and-hospital .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.healthcare-and-hospital .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.healthcare-and-hospital .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.healthcare-and-hospital .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.healthcare-and-hospital .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.healthcare-and-hospital .promptList {
display: grid;
gap: 10px;
}
.healthcare-and-hospital .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.healthcare-and-hospital .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.healthcare-and-hospital .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.healthcare-and-hospital .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.healthcare-and-hospital .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.healthcare-and-hospital .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.healthcare-and-hospital .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.healthcare-and-hospital .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.healthcare-and-hospital .quoteTable th,
.healthcare-and-hospital .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.healthcare-and-hospital .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.healthcare-and-hospital .quoteTable td:first-child {
width: 64%;
}
.healthcare-and-hospital .quoteTable th:last-child,
.healthcare-and-hospital .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.healthcare-and-hospital .quoteTable strong {
font-size: 11px;
}
.healthcare-and-hospital .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.healthcare-and-hospital .quoteTable tfoot {
background: #F5FBFF;
}
.healthcare-and-hospital .quoteTable tfoot th {
font-size: 10px;
}
.healthcare-and-hospital .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.healthcare-and-hospital .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.healthcare-and-hospital .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.healthcare-and-hospital .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.healthcare-and-hospital .orderJourney {
margin: 20px 0;
}
.healthcare-and-hospital .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.healthcare-and-hospital .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.healthcare-and-hospital .journeyRow:last-child:before {
display: none;
}
.healthcare-and-hospital .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.healthcare-and-hospital .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.healthcare-and-hospital .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.healthcare-and-hospital .journeyRow strong {
font-size: 12px;
display: block;
}
.healthcare-and-hospital .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.healthcare-and-hospital .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.healthcare-and-hospital .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.healthcare-and-hospital .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.healthcare-and-hospital .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.healthcare-and-hospital .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.healthcare-and-hospital .inventoryIntro strong {
display: block;
font-size: 16px;
}
.healthcare-and-hospital .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.healthcare-and-hospital .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.healthcare-and-hospital .availabilityCard span {
font-size: 9px;
display: block;
}
.healthcare-and-hospital .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.healthcare-and-hospital .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.healthcare-and-hospital .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.healthcare-and-hospital .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.healthcare-and-hospital .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.healthcare-and-hospital .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.healthcare-and-hospital .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.healthcare-and-hospital .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.healthcare-and-hospital .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.healthcare-and-hospital .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.healthcare-and-hospital .customerTimeline .dataRow {
border-color: #353535;
}
.healthcare-and-hospital .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.healthcare-and-hospital .customerTimeline strong {
color: #fff;
}
.healthcare-and-hospital .customerTimeline small {
color: #BFBFBF;
}
.healthcare-and-hospital .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.healthcare-and-hospital .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.healthcare-and-hospital .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.healthcare-and-hospital .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.healthcare-and-hospital .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.healthcare-and-hospital .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.healthcare-and-hospital .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.healthcare-and-hospital .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.healthcare-and-hospital .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.healthcare-and-hospital .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.healthcare-and-hospital .chartTitle strong {
font-size: 12px;
}
.healthcare-and-hospital .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.healthcare-and-hospital .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.healthcare-and-hospital .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.healthcare-and-hospital .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.healthcare-and-hospital .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.healthcare-and-hospital .inlineCta {
margin-top: 0;
box-shadow: none;
}
.healthcare-and-hospital .inlineCtaActions {
max-width: 42%;
}
.healthcare-and-hospital .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.healthcare-and-hospital .inlineCta h3 {
line-height: 1.35;
}
.healthcare-and-hospital .card {
box-shadow: none;
}
.healthcare-and-hospital .cardIcon {
box-shadow: none;
}
.healthcare-and-hospital .card h3 {
font-size: 22px;
}
.healthcare-and-hospital .card p {
font-size: 14px;
line-height: 1.8;
}
.healthcare-and-hospital .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.healthcare-and-hospital .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.healthcare-and-hospital .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.healthcare-and-hospital .ratingBand {
padding: 34px 0;
}
.healthcare-and-hospital .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.healthcare-and-hospital .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.healthcare-and-hospital .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.healthcare-and-hospital .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.healthcare-and-hospital .ratingItem:first-child {
border-left: 0;
}
.healthcare-and-hospital .proofCard h3 {
font-size: 23px;
}
.healthcare-and-hospital .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.healthcare-and-hospital .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.healthcare-and-hospital .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.healthcare-and-hospital .integration {
min-height: 98px;
}
.healthcare-and-hospital .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.healthcare-and-hospital .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.healthcare-and-hospital .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.healthcare-and-hospital .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.healthcare-and-hospital .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.healthcare-and-hospital .finalActions {
display: grid;
gap: 11px;
}
.healthcare-and-hospital .finalActions .button {
white-space: nowrap;
}
.healthcare-and-hospital .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.healthcare-and-hospital .footerInner p {
margin: 0;
font-size: 12px;
}
.healthcare-and-hospital .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.healthcare-and-hospital .navlinks {
gap: 15px;
font-size: 12px;
}
.healthcare-and-hospital .heroGrid {
gap: 30px;
}
.healthcare-and-hospital .twoCol {
gap: 32px;
}
.healthcare-and-hospital .panelBody {
padding: 16px;
}
.healthcare-and-hospital .panelHead {
padding: 16px;
}
.healthcare-and-hospital .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.healthcare-and-hospital .pipelineColumns {
gap: 7px;
}
.healthcare-and-hospital .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.healthcare-and-hospital .heroGrid,
.healthcare-and-hospital .twoCol,
.healthcare-and-hospital .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .heroGrid {
gap: 36px;
}
.healthcare-and-hospital .hero h1 {
max-width: 730px;
}
.healthcare-and-hospital .hero .lead {
max-width: 690px;
}
.healthcare-and-hospital .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.healthcare-and-hospital .twoCol {
gap: 34px;
}
.healthcare-and-hospital .twoCol.reverse .visual {
order: initial;
}
.healthcare-and-hospital .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.healthcare-and-hospital .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.healthcare-and-hospital .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.healthcare-and-hospital .awardItem {
font-size: 12px;
padding: 13px;
}
.healthcare-and-hospital .ratingSectionGrid {
gap: 20px;
}
.healthcare-and-hospital .inlineCta {
align-items: flex-start;
}
.healthcare-and-hospital .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.healthcare-and-hospital .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.healthcare-and-hospital .card {
padding: 22px;
}
.healthcare-and-hospital .card h3 {
font-size: 21px;
}
.healthcare-and-hospital .finalActions {
display: flex;
flex-wrap: wrap;
}
.healthcare-and-hospital .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.healthcare-and-hospital .cards,
.healthcare-and-hospital .proofCards {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.healthcare-and-hospital .inlineCta {
flex-direction: column;
}
.healthcare-and-hospital .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.healthcare-and-hospital .inlineCtaActions .button {
flex: 1;
}
.healthcare-and-hospital .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.healthcare-and-hospital .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.healthcare-and-hospital .wrap {
width: calc(100% - 32px);
}
.healthcare-and-hospital [id] {
scroll-margin-top: 82px;
}
.healthcare-and-hospital .brand {
font-size: 20px;
gap: 7px;
}
.healthcare-and-hospital .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.healthcare-and-hospital .brandMark .icon2 {
width: 18px;
height: 18px;
}
.healthcare-and-hospital .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.healthcare-and-hospital section {
padding: 60px 0;
}
.healthcare-and-hospital .hero {
padding: 51px 0 48px;
}
.healthcare-and-hospital .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.healthcare-and-hospital .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.healthcare-and-hospital .heroActions {
gap: 10px;
margin-top: 25px;
}
.healthcare-and-hospital .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.healthcare-and-hospital .hero .microcopy {
font-size: 11px;
}
.healthcare-and-hospital .heroPills span {
font-size: 9px;
}
.healthcare-and-hospital .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.healthcare-and-hospital .sectionHead p {
font-size: 16px;
}
.healthcare-and-hospital .copy h2 {
font-size: 34px;
}
.healthcare-and-hospital .copy p {
font-size: 15px;
}
.healthcare-and-hospital .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.healthcare-and-hospital .logoBox {
min-height: 53px;
}
.healthcare-and-hospital .logoBox:last-child {
grid-column: 1/-1;
}
.healthcare-and-hospital .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.healthcare-and-hospital .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.healthcare-and-hospital .aiStep strong {
font-size: 13px;
}
.healthcare-and-hospital .aiStep span {
font-size: 11px;
}
.healthcare-and-hospital .aiStep::after {
display: none;
}
.healthcare-and-hospital .outcomeGrid,
.healthcare-and-hospital .challengeGrid,
.healthcare-and-hospital .benefitGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .outcome {
padding: 24px;
}
.healthcare-and-hospital .outcome strong {
font-size: 22px;
}
.healthcare-and-hospital .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.healthcare-and-hospital .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.healthcare-and-hospital .awardItem:last-child {
grid-column: 1/-1;
}
.healthcare-and-hospital .featureList,
.healthcare-and-hospital .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .featureItem {
font-size: 13px;
}
.healthcare-and-hospital .inlineCta {
padding: 22px;
gap: 19px;
}
.healthcare-and-hospital .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.healthcare-and-hospital .panelHead {
padding: 15px 13px;
}
.healthcare-and-hospital .panelHead>strong {
font-size: 12px;
}
.healthcare-and-hospital .panelBody {
padding: 14px;
}
.healthcare-and-hospital .productPanel {
border-radius: 16px;
}
.healthcare-and-hospital .productPanel figcaption {
padding: 0 14px 13px;
}
.healthcare-and-hospital .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.healthcare-and-hospital .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.healthcare-and-hospital .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.healthcare-and-hospital .deal {
margin-top: 0;
padding: 10px;
}
.healthcare-and-hospital .deal strong {
font-size: 10px;
}
.healthcare-and-hospital .deal small {
font-size: 9px;
}
.healthcare-and-hospital .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.healthcare-and-hospital .mobileWorkspace {
gap: 12px;
}
.healthcare-and-hospital .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.healthcare-and-hospital .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.healthcare-and-hospital .sideTile {
padding: 10px;
}
.healthcare-and-hospital .sideTile strong {
font-size: 10px;
}
.healthcare-and-hospital .sideTile p {
font-size: 9px;
}
.healthcare-and-hospital .mobileHeader strong {
font-size: 15px;
}
.healthcare-and-hospital .mobileAccount strong {
font-size: 10px;
}
.healthcare-and-hospital .mobileAccount small {
font-size: 7px;
}
.healthcare-and-hospital .phoneDevice .rowIcon {
display: none;
}
.healthcare-and-hospital .quoteTable th,
.healthcare-and-hospital .quoteTable td {
padding: 12px 4px;
}
.healthcare-and-hospital .quoteTable strong {
font-size: 10px;
}
.healthcare-and-hospital .quoteTable small {
font-size: 8px;
}
.healthcare-and-hospital .quoteTable tfoot th {
font-size: 9px;
}
.healthcare-and-hospital .docHeader strong {
font-size: 17px;
}
.healthcare-and-hospital .miniFlow {
gap: 5px;
font-size: 9px;
}
.healthcare-and-hospital .miniFlow span {
padding: 6px;
}
.healthcare-and-hospital .rowCopy strong {
font-size: 10px;
}
.healthcare-and-hospital .rowCopy small {
font-size: 8px;
}
.healthcare-and-hospital .statusPill {
font-size: 7px;
padding: 5px;
}
.healthcare-and-hospital .miniStats {
gap: 7px;
}
.healthcare-and-hospital .miniStats>div {
padding: 9px;
}
.healthcare-and-hospital .miniStats strong {
font-size: 18px;
}
.healthcare-and-hospital .miniStats span {
font-size: 8px;
}
.healthcare-and-hospital .collectionStats>div {
padding: 13px;
}
.healthcare-and-hospital .collectionStats strong {
font-size: 24px;
}
.healthcare-and-hospital .customerHeader strong {
font-size: 17px;
}
.healthcare-and-hospital .customerFacts>div {
padding: 10px;
}
.healthcare-and-hospital .customerFacts strong {
font-size: 12px;
}
.healthcare-and-hospital .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.healthcare-and-hospital .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.healthcare-and-hospital .ratingItem:last-child {
grid-column: 1/-1;
}
.healthcare-and-hospital .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.healthcare-and-hospital .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.healthcare-and-hospital .integration small {
font-size: 9px;
}
.healthcare-and-hospital .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.healthcare-and-hospital .ctaPanel p {
font-size: 15px;
}
.healthcare-and-hospital .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.healthcare-and-hospital .footerInner {
align-items: flex-start;
flex-direction: column;
}
.healthcare-and-hospital .contextSection {
padding: 0 0 24px;
}
.healthcare-and-hospital .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.healthcare-and-hospital .wrap {
width: calc(100% - 24px);
}
.healthcare-and-hospital .brand {
font-size: 18px;
}
.healthcare-and-hospital .brandMark {
width: 25px;
height: 25px;
}
.healthcare-and-hospital .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.healthcare-and-hospital .hero h1 {
font-size: 38px;
}
.healthcare-and-hospital .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.healthcare-and-hospital .copy h2 {
font-size: 31px;
}
.healthcare-and-hospital .mobileWorkspace {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .phoneDevice {
width: 210px;
}
.healthcare-and-hospital .phoneDevice .rowIcon {
display: grid;
}
.healthcare-and-hospital .mobileSide {
gap: 8px;
}
.healthcare-and-hospital .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.healthcare-and-hospital .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.healthcare-and-hospital .sideTile p {
margin: 0;
}
.healthcare-and-hospital .miniFlow span {
padding: 5px;
font-size: 8px;
}
.healthcare-and-hospital .collectionStats strong {
font-size: 21px;
}
.healthcare-and-hospital .inventoryIntro strong {
font-size: 14px;
}
.healthcare-and-hospital .dataRow {
gap: 7px;
}
.healthcare-and-hospital .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.healthcare-and-hospital .inlineCtaActions {
flex-direction: column;
}
}
.healthcare-and-hospital .hero .eyebrow {
max-width: 100%;
}
.healthcare-and-hospital .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.healthcare-and-hospital .ganttIllustration,
.healthcare-and-hospital .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.healthcare-and-hospital .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.healthcare-and-hospital .costIllustration {
aspect-ratio: 484/226;
}
.healthcare-and-hospital .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.healthcare-and-hospital .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.healthcare-and-hospital .comparisonTable thead {
background: var(--black);
color: #fff;
}
.healthcare-and-hospital .comparisonTable thead th:last-child {
color: var(--yellow);
}
.healthcare-and-hospital .comparisonTable th,
.healthcare-and-hospital .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.healthcare-and-hospital .comparisonTable th:first-child {
width: 23%;
}
.healthcare-and-hospital .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.healthcare-and-hospital .comparisonTable tbody td {
color: var(--muted);
}
.healthcare-and-hospital .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.healthcare-and-hospital .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.healthcare-and-hospital .card,
.healthcare-and-hospital .proofCard,
.healthcare-and-hospital .productPanel,
.healthcare-and-hospital .outcome,
.healthcare-and-hospital .benefit {
box-shadow: none;
}
.healthcare-and-hospital .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.healthcare-and-hospital .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.healthcare-and-hospital .hero .eyebrow {
font-size: 10px;
}
.healthcare-and-hospital .comparisonTable {
font-size: 11px;
}
.healthcare-and-hospital .comparisonTable th,
.healthcare-and-hospital .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.healthcare-and-hospital .comparisonTable th:first-child {
width: 24%;
}
.healthcare-and-hospital .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.healthcare-and-hospital .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.healthcare-and-hospital .hero h1 {
font-size: 38px;
}
}
.healthcare-and-hospital .scheduleIllustration,
.healthcare-and-hospital .analyticsIllustration,
.healthcare-and-hospital .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.healthcare-and-hospital .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.healthcare-and-hospital .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.healthcare-and-hospital .conditionIllustration {
aspect-ratio: 484 / 178;
}
.healthcare-and-hospital .miniStats strong {
font-variant-numeric: tabular-nums;
}
.healthcare-and-hospital .quoteTable td:last-child {
white-space: nowrap;
}
.healthcare-and-hospital .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.healthcare-and-hospital .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.healthcare-and-hospital .darkSection .textCta {
color: var(--yellow);
}
.healthcare-and-hospital .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.healthcare-and-hospital .secondaryLinks .textCta {
font-size: 12px;
}
.healthcare-and-hospital .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.healthcare-and-hospital .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.healthcare-and-hospital .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.healthcare-and-hospital .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.healthcare-and-hospital .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.healthcare-and-hospital .scanSummary>.icon2 {
color: var(--yellow);
flex: 0 0 24px;
}
.healthcare-and-hospital .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.healthcare-and-hospital .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.healthcare-and-hospital .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.healthcare-and-hospital .returnFlag .icon2 {
flex: 0 0 24px;
}
.healthcare-and-hospital .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.healthcare-and-hospital .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.healthcare-and-hospital .phoneDevice {
max-width: 100%;
}
.healthcare-and-hospital .heroPills {
line-height: 1.55;
}
.healthcare-and-hospital .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.healthcare-and-hospital .plantFacts {
gap: 7px;
}
.healthcare-and-hospital .plantFacts>div {
padding: 9px;
}
.healthcare-and-hospital .plantFacts strong {
font-size: 11px;
}
.healthcare-and-hospital .scanSummary {
padding: 12px;
}
.healthcare-and-hospital .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.healthcare-and-hospital .mobileWorkspace {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .phoneDevice {
width: 224px;
margin: auto;
}
.healthcare-and-hospital .phoneDevice .rowIcon {
display: grid;
}
.healthcare-and-hospital .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.healthcare-and-hospital .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.healthcare-and-hospital .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.healthcare-and-hospital .sideTile strong {
font-size: 12px;
}
.healthcare-and-hospital .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.healthcare-and-hospital .topbar,
.healthcare-and-hospital .heroActions,
.healthcare-and-hospital .finalActions,
.healthcare-and-hospital .contextSection,
.healthcare-and-hospital .valueCtaSection {
display: none;
}
.healthcare-and-hospital section {
break-inside: avoid;
padding: 28px 0;
}
.healthcare-and-hospital .hero {
padding-top: 20px;
}
}
.healthcare-and-hospital .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.healthcare-and-hospital .heroAccent {
color: var(--black);
}
.healthcare-and-hospital .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.healthcare-and-hospital .heroActions {
gap: 10px;
margin-top: 24px;
}
.healthcare-and-hospital .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.healthcare-and-hospital .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.healthcare-and-hospital .microcopy {
margin-top: 14px;
}
.healthcare-and-hospital .heroPills {
margin-top: 13px;
}
.healthcare-and-hospital .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.healthcare-and-hospital .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.healthcare-and-hospital .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.healthcare-and-hospital .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.healthcare-and-hospital .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.healthcare-and-hospital .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.healthcare-and-hospital .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.healthcare-and-hospital .clientBand {
padding: 24px 0;
}
.healthcare-and-hospital .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.healthcare-and-hospital .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.healthcare-and-hospital .logoBox.wide {
font-size: 15px;
}
.healthcare-and-hospital .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.healthcare-and-hospital .sectionHead p {
margin: 17px 0 0;
}
.healthcare-and-hospital .copy p {
margin: 16px 0 0;
}
.healthcare-and-hospital .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.healthcare-and-hospital .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.healthcare-and-hospital .aiJourney {
background: var(--black);
}
.healthcare-and-hospital .aiStep {
min-height: 157px;
border-color: #353535;
}
.healthcare-and-hospital .productPanel {
border-radius: 18px;
}
.healthcare-and-hospital .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.healthcare-and-hospital .panelHead>strong {
font-size: 13px;
}
.healthcare-and-hospital .sampleTag {
font-size: 9px;
}
.healthcare-and-hospital .panelBody {
padding: 21px;
}
.healthcare-and-hospital .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.healthcare-and-hospital .docHeader {
padding-bottom: 16px;
}
.healthcare-and-hospital .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.healthcare-and-hospital .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.healthcare-and-hospital .smallLabel {
font-size: 9px;
}
.healthcare-and-hospital .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.healthcare-and-hospital .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.healthcare-and-hospital .dataRow {
padding: 14px 0;
}
.healthcare-and-hospital .statusPill {
font-size: 8px;
}
.healthcare-and-hospital .miniStats {
gap: 10px;
margin: 18px 0;
}
.healthcare-and-hospital .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.healthcare-and-hospital .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.healthcare-and-hospital .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.healthcare-and-hospital .contextNote {
font-size: 11px;
margin-top: 16px;
}
.healthcare-and-hospital .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.healthcare-and-hospital .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.healthcare-and-hospital .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.healthcare-and-hospital .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.healthcare-and-hospital .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.healthcare-and-hospital .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.healthcare-and-hospital .hierarchy strong {
color: var(--navy);
}
.healthcare-and-hospital .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.healthcare-and-hospital .conditionIllustration {
aspect-ratio: 484/201;
}
.healthcare-and-hospital .analyticsIllustration {
aspect-ratio: 484/206;
}
.healthcare-and-hospital .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.healthcare-and-hospital .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.healthcare-and-hospital .phoneDevice .rowCopy strong {
font-size: 10px;
}
.healthcare-and-hospital .phoneDevice .rowCopy small {
font-size: 9px;
}
.healthcare-and-hospital .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.healthcare-and-hospital .mobileAccount small {
font-size: 9px;
}
.healthcare-and-hospital .sideTile {
background: var(--sky-2);
padding: 14px;
}
.healthcare-and-hospital .sideTile strong {
font-size: 12px;
}
.healthcare-and-hospital .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.healthcare-and-hospital .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.healthcare-and-hospital .mobileAction {
font-size: 9px;
}
.healthcare-and-hospital .journeyRow strong {
font-size: 13px;
}
.healthcare-and-hospital .journeyRow small {
font-size: 11px;
}
.healthcare-and-hospital .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.healthcare-and-hospital .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.healthcare-and-hospital .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.healthcare-and-hospital .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.healthcare-and-hospital .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.healthcare-and-hospital .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.healthcare-and-hospital .utilityReadout small {
font-size: 12px;
}
.healthcare-and-hospital .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.healthcare-and-hospital .darkSection {
background: var(--black);
}
.healthcare-and-hospital .darkSection .panelHead {
background: var(--black-soft);
}
.healthcare-and-hospital .darkSection .productPanel {
background: var(--black-soft);
}
.healthcare-and-hospital .darkSection .copy .featureNote {
color: #CFCFCF;
}
.healthcare-and-hospital .darkSection .rowCopy strong {
color: #FFFFFF;
}
.healthcare-and-hospital .darkSection .rowCopy small {
color: #CFCFCF;
}
.healthcare-and-hospital .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.healthcare-and-hospital .assistantHead small {
font-size: 11px;
}
.healthcare-and-hospital .assistantNote {
font-size: 11px;
}
.healthcare-and-hospital .reportTags span {
font-size: 10px;
}
.healthcare-and-hospital .card p {
margin: 12px 0 0;
}
.healthcare-and-hospital .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.healthcare-and-hospital .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.healthcare-and-hospital .cards>.card {
display: flex;
flex-direction: column;
}
.healthcare-and-hospital .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.healthcare-and-hospital .cards>.card p {
padding-bottom: 22px;
}
.healthcare-and-hospital .benefitBand {
background: var(--black);
}
.healthcare-and-hospital .benefit {
background: var(--black-soft);
}
.healthcare-and-hospital .inlineCta h3 {
font-size: 20px;
}
.healthcare-and-hospital .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.healthcare-and-hospital .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.healthcare-and-hospital .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.healthcare-and-hospital .valueCtaSection {
padding: 32px 0;
}
.healthcare-and-hospital .proofCard p {
margin-top: 15px;
}
.healthcare-and-hospital .proofCard h3 {
font-size: 23px;
}
.healthcare-and-hospital .integrationNote {
margin-top: 23px;
}
.healthcare-and-hospital .ctaPanel {
background: var(--black);
}
.healthcare-and-hospital .ctaPanel p {
margin-top: 16px;
}
.healthcare-and-hospital .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.healthcare-and-hospital .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.healthcare-and-hospital a:hover {
text-decoration: none;
}
.healthcare-and-hospital .textCta:hover {
color: var(--navy);
}
.healthcare-and-hospital .darkSection .textCta:hover {
color: #FFFFFF;
}
.healthcare-and-hospital .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.healthcare-and-hospital .hero h1 {
font-size: 49px;
}
.healthcare-and-hospital .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.healthcare-and-hospital .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.healthcare-and-hospital .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.healthcare-and-hospital .hero h1 {
font-size: 58px;
}
.healthcare-and-hospital .heroVisual {
max-width: 548px;
}
.healthcare-and-hospital .hero .lead {
max-width: 700px;
}
.healthcare-and-hospital .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.healthcare-and-hospital .logoBox {
font-size: 18px;
border: 0 !important;
}
.healthcare-and-hospital .logoBox:last-child {
grid-column: auto;
}
.healthcare-and-hospital .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.healthcare-and-hospital .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.healthcare-and-hospital .inlineCtaActions .button {
flex: 1;
}
.healthcare-and-hospital .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.healthcare-and-hospital section {
padding: 55px 0;
}
.healthcare-and-hospital .hero {
padding: 28px 0 40px;
}
.healthcare-and-hospital .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.healthcare-and-hospital .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.healthcare-and-hospital .heroActions {
gap: 10px;
}
.healthcare-and-hospital .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.healthcare-and-hospital .breadcrumb {
margin-bottom: 21px;
}
.healthcare-and-hospital .hero .eyebrow {
font-size: 11px;
}
.healthcare-and-hospital .heroVisual {
max-width: 480px;
}
.healthcare-and-hospital .heroPills {
row-gap: 9px;
}
.healthcare-and-hospital .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.healthcare-and-hospital .heroPills span+span {
padding-left: 7px;
}
.healthcare-and-hospital .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.healthcare-and-hospital .logoBox:last-child {
grid-column: 1/-1;
}
.healthcare-and-hospital .clientBand {
padding: 25px 0;
}
.healthcare-and-hospital .copy h2 {
font-size: 33px;
}
.healthcare-and-hospital .panelBody {
padding: 16px;
}
.healthcare-and-hospital .panelHead {
padding: 15px;
}
.healthcare-and-hospital .panelHead>strong {
font-size: 12px;
}
.healthcare-and-hospital .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.healthcare-and-hospital .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.healthcare-and-hospital .docHeader strong {
font-size: 18px;
}
.healthcare-and-hospital .docHeader small {
font-size: 10px;
}
.healthcare-and-hospital .rowCopy strong {
font-size: 11px;
}
.healthcare-and-hospital .rowCopy small {
font-size: 10px;
}
.healthcare-and-hospital .miniStats {
gap: 7px;
}
.healthcare-and-hospital .miniStats strong {
font-size: 21px;
}
.healthcare-and-hospital .miniStats span {
font-size: 9px;
}
.healthcare-and-hospital .miniStats>div {
padding: 10px 8px;
}
.healthcare-and-hospital .plantFacts {
gap: 8px;
}
.healthcare-and-hospital .plantFacts>div {
padding: 10px;
}
.healthcare-and-hospital .plantFacts strong {
font-size: 11px;
}
.healthcare-and-hospital .contextNote {
font-size: 10px;
gap: 8px;
}
.healthcare-and-hospital .utilityReadout {
padding: 12px;
gap: 10px;
}
.healthcare-and-hospital .utilityReadout span {
font-size: 8px;
}
.healthcare-and-hospital .utilityReadout strong {
font-size: 24px;
}
.healthcare-and-hospital .utilityReadout .utilityScope {
font-size: 14px;
}
.healthcare-and-hospital .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.healthcare-and-hospital .comparisonTable {
font-size: 11px;
}
.healthcare-and-hospital .comparisonTable th,
.healthcare-and-hospital .comparisonTable td {
padding: 13px 9px;
}
.healthcare-and-hospital .contextSection {
padding: 0 0 22px;
}
.healthcare-and-hospital .valueCtaSection {
padding: 25px 0;
}
.healthcare-and-hospital .inlineCtaActions {
flex-direction: column;
}
.healthcare-and-hospital .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.healthcare-and-hospital .mobileWorkspace {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .phoneDevice {
width: 222px;
}
.healthcare-and-hospital .phoneDevice .rowIcon {
display: grid;
}
.healthcare-and-hospital .mobileSide {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.healthcare-and-hospital .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0 0;
}
.healthcare-and-hospital .sideTile p {
margin: 0;
}
.healthcare-and-hospital .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.healthcare-and-hospital .dataRow {
gap: 8px;
}
.healthcare-and-hospital .statusPill {
font-size: 7px;
padding: 5px;
}
.healthcare-and-hospital .miniStats strong {
font-size: 19px;
}
.healthcare-and-hospital .heroActions {
flex-direction: column;
align-items: stretch;
}
.healthcare-and-hospital .heroActions .button {
width: 100%;
}
.healthcare-and-hospital .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.healthcare-and-hospital .aiFlow {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.healthcare-and-hospital .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.healthcare-and-hospital .aiStep strong {
margin: 0;
font-size: 15px;
}
.healthcare-and-hospital .aiStep span {
font-size: 13px;
}
.healthcare-and-hospital .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.healthcare-and-hospital .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.healthcare-and-hospital .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.healthcare-and-hospital .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.healthcare-and-hospital .navlinks {
gap: 20px;
font-size: 12px;
}
.healthcare-and-hospital .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.healthcare-and-hospital .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.healthcare-and-hospital .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.healthcare-and-hospital .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.healthcare-and-hospital .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.healthcare-and-hospital .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.healthcare-and-hospital .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.healthcare-and-hospital .industryIntro {
padding: 78px 0 66px;
}
.healthcare-and-hospital .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.healthcare-and-hospital .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.healthcare-and-hospital .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.healthcare-and-hospital .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.healthcare-and-hospital .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.healthcare-and-hospital .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.healthcare-and-hospital .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.healthcare-and-hospital .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.healthcare-and-hospital .industryPriority>.icon2 {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.healthcare-and-hospital .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.healthcare-and-hospital .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.healthcare-and-hospital .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.healthcare-and-hospital .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.healthcare-and-hospital .industryPriority:hover {
border-color: var(--brand-dark);
}
.healthcare-and-hospital .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.healthcare-and-hospital .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.healthcare-and-hospital .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.healthcare-and-hospital .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.healthcare-and-hospital .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.healthcare-and-hospital .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.healthcare-and-hospital .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.healthcare-and-hospital .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.healthcare-and-hospital .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.healthcare-and-hospital .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.healthcare-and-hospital .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.healthcare-and-hospital .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.healthcare-and-hospital .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.healthcare-and-hospital .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.healthcare-and-hospital .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.healthcare-and-hospital .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.healthcare-and-hospital .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.healthcare-and-hospital .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.healthcare-and-hospital .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.healthcare-and-hospital .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.healthcare-and-hospital .vedaMessage.assistant>small {
color: var(--yellow);
}
.healthcare-and-hospital .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.healthcare-and-hospital .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.healthcare-and-hospital .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.healthcare-and-hospital .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.healthcare-and-hospital .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.healthcare-and-hospital .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.healthcare-and-hospital .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.healthcare-and-hospital .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.healthcare-and-hospital .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.healthcare-and-hospital .manufacturingSpotlight {
padding: 73px 0;
}
.healthcare-and-hospital .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.healthcare-and-hospital .rfidSpotlight {
background: #fff;
}
.healthcare-and-hospital .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.healthcare-and-hospital .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.healthcare-and-hospital .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.healthcare-and-hospital .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.healthcare-and-hospital .spotlightHead h2 span {
color: var(--brand-dark);
}
.healthcare-and-hospital .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.healthcare-and-hospital .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.healthcare-and-hospital .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.healthcare-and-hospital .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.healthcare-and-hospital .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.healthcare-and-hospital .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.healthcare-and-hospital .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.healthcare-and-hospital .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.healthcare-and-hospital .featureTab:hover {
border-color: var(--brand-dark);
}
.healthcare-and-hospital .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.healthcare-and-hospital .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.healthcare-and-hospital .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.healthcare-and-hospital .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.healthcare-and-hospital .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.healthcare-and-hospital .featurePanel {
display: none;
}
.healthcare-and-hospital .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.healthcare-and-hospital .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.healthcare-and-hospital .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.healthcare-and-hospital .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.healthcare-and-hospital .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.healthcare-and-hospital .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.healthcare-and-hospital .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.healthcare-and-hospital .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.healthcare-and-hospital .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.healthcare-and-hospital .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.healthcare-and-hospital .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.healthcare-and-hospital .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.healthcare-and-hospital .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.healthcare-and-hospital .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.healthcare-and-hospital .decisionSpotlight .textCta {
color: var(--yellow);
}
.healthcare-and-hospital .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.healthcare-and-hospital .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.healthcare-and-hospital .mediaTitle>.icon2 {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.healthcare-and-hospital .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.healthcare-and-hospital .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.healthcare-and-hospital .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.healthcare-and-hospital .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.healthcare-and-hospital .signalFlow>.icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.healthcare-and-hospital .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.healthcare-and-hospital .rfidImageSurface {
background: #172029;
padding: 5px;
}
.healthcare-and-hospital .rfidImageSurface img {
width: 100%;
height: auto;
}
.healthcare-and-hospital .rfidMedia figcaption {
padding-top: 13px;
}
.healthcare-and-hospital .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.healthcare-and-hospital .aiReviewBody {
padding: 18px;
}
.healthcare-and-hospital .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.healthcare-and-hospital .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.healthcare-and-hospital .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.healthcare-and-hospital .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.healthcare-and-hospital .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.healthcare-and-hospital .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.healthcare-and-hospital .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.healthcare-and-hospital .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.healthcare-and-hospital .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.healthcare-and-hospital .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.healthcare-and-hospital .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.healthcare-and-hospital .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.healthcare-and-hospital .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.healthcare-and-hospital .aiReviewAction strong {
display: block;
font-size: 11px;
}
.healthcare-and-hospital .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.healthcare-and-hospital .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.healthcare-and-hospital .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.healthcare-and-hospital .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.healthcare-and-hospital .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.healthcare-and-hospital .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.healthcare-and-hospital .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.healthcare-and-hospital .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.healthcare-and-hospital .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.healthcare-and-hospital .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.healthcare-and-hospital .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.healthcare-and-hospital .workflowDetails summary::-webkit-details-marker {
display: none;
}
.healthcare-and-hospital .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.healthcare-and-hospital .workflowDetails[open] summary::after {
content: "−";
}
.healthcare-and-hospital .workflowDetails .featureList,
.healthcare-and-hospital .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.healthcare-and-hospital .workflowDetails .featureItem {
font-size: 11px;
}
.healthcare-and-hospital .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.healthcare-and-hospital .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.healthcare-and-hospital #healthcare-connected-tools {
background: #fff;
}
.healthcare-and-hospital #healthcare-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.healthcare-and-hospital .featureTab,
.healthcare-and-hospital .industryPriority,
.healthcare-and-hospital summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.healthcare-and-hospital .industryIntroHead {
gap: 30px;
}
.healthcare-and-hospital .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.healthcare-and-hospital .featureStage {
gap: 26px;
padding: 26px;
}
.healthcare-and-hospital .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.healthcare-and-hospital .factoryWorkflow {
padding: 22px;
}
.healthcare-and-hospital .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.healthcare-and-hospital .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.healthcare-and-hospital .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.healthcare-and-hospital .industryPriorityGrid {
gap: 14px;
}
.healthcare-and-hospital .industryPriority {
padding: 22px 19px;
}
.healthcare-and-hospital .industryPriority h3 {
font-size: 21px;
}
.healthcare-and-hospital .industryPriority p {
font-size: 12px;
}
.healthcare-and-hospital .priorityLink {
font-size: 10px;
}
.healthcare-and-hospital .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.healthcare-and-hospital .vedaIndustryCopy h2 {
font-size: 39px;
}
.healthcare-and-hospital .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.healthcare-and-hospital .vedaUseCases>div {
display: block;
}
.healthcare-and-hospital .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.healthcare-and-hospital .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.healthcare-and-hospital .featureTabs {
gap: 8px;
}
.healthcare-and-hospital .featureTab {
min-height: 108px;
}
.healthcare-and-hospital .featureStage,
.healthcare-and-hospital .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.healthcare-and-hospital .rfidSpotlight .spotlightMedia,
.healthcare-and-hospital .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.healthcare-and-hospital .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.healthcare-and-hospital .featurePanel {
min-height: 0;
}
.healthcare-and-hospital .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.healthcare-and-hospital .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.healthcare-and-hospital .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.healthcare-and-hospital .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.healthcare-and-hospital .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.healthcare-and-hospital .clientBand {
padding: 22px 0;
}
.healthcare-and-hospital .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.healthcare-and-hospital .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.healthcare-and-hospital .clientBand .logoBox.wide {
font-size: 10px;
}
.healthcare-and-hospital .clientBand .logoBox:last-child {
grid-column: auto;
}
.healthcare-and-hospital .industryIntro {
padding: 53px 0;
}
.healthcare-and-hospital .industryIntroHead h2 {
font-size: 32px;
}
.healthcare-and-hospital .industryIntroHead>p {
font-size: 14px;
}
.healthcare-and-hospital .industryPriorityGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .industryPriority {
padding: 23px;
}
.healthcare-and-hospital .industryPriority h3 {
font-size: 24px;
}
.healthcare-and-hospital .industryPriority>.icon2 {
margin: 5px 0 15px;
}
.healthcare-and-hospital .industryPriority p {
font-size: 13px;
}
.healthcare-and-hospital .priorityLink {
font-size: 11px;
}
.healthcare-and-hospital .vedaIndustry {
padding: 0 0 52px;
}
.healthcare-and-hospital .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.healthcare-and-hospital .vedaIndustryCopy h2 {
font-size: 32px;
}
.healthcare-and-hospital .vedaIndustryCopy>p {
font-size: 14px;
}
.healthcare-and-hospital .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.healthcare-and-hospital .vedaUseCases>div {
display: flex;
}
.healthcare-and-hospital .vedaConversationHead {
padding: 16px 13px;
}
.healthcare-and-hospital .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.healthcare-and-hospital .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.healthcare-and-hospital .vedaMessage.user {
margin-left: 25px;
}
.healthcare-and-hospital .vedaMessage.assistant {
margin-right: 14px;
}
.healthcare-and-hospital .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.healthcare-and-hospital .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.healthcare-and-hospital .manufacturingSpotlight {
padding: 54px 0;
}
.healthcare-and-hospital .spotlightHead h2 {
font-size: 32px;
}
.healthcare-and-hospital .spotlightHead>p {
font-size: 14px;
}
.healthcare-and-hospital .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.healthcare-and-hospital .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.healthcare-and-hospital .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.healthcare-and-hospital .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.healthcare-and-hospital .featurePanel h3 {
font-size: 24px;
}
.healthcare-and-hospital .featurePanel>p {
font-size: 13px;
}
.healthcare-and-hospital .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.healthcare-and-hospital .spotlightChecks>li {
font-size: 12px;
}
.healthcare-and-hospital .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.healthcare-and-hospital .spotlightActions .button {
width: 100%;
}
.healthcare-and-hospital .spotlightScope {
font-size: 10px;
}
.healthcare-and-hospital .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.healthcare-and-hospital .mediaTitle strong {
font-size: 11px;
}
.healthcare-and-hospital .mediaTitle div>span {
font-size: 8px;
}
.healthcare-and-hospital .mediaTitle>.icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.healthcare-and-hospital .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.healthcare-and-hospital .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.healthcare-and-hospital .rfidMedia figcaption {
padding-top: 12px;
}
.healthcare-and-hospital .aiReviewBody {
padding: 13px;
}
.healthcare-and-hospital .aiIssue {
padding: 13px;
}
.healthcare-and-hospital .aiIssue strong {
font-size: 14px;
}
.healthcare-and-hospital .aiEvidence {
gap: 6px;
}
.healthcare-and-hospital .aiEvidence>div {
padding: 10px 7px;
}
.healthcare-and-hospital .aiEvidence strong {
font-size: 9px;
}
.healthcare-and-hospital .aiEvidence span {
font-size: 7px;
}
.healthcare-and-hospital .exampleLabel {
font-size: 6px;
}
.healthcare-and-hospital .factoryWorkflows {
padding: 55px 0;
}
.healthcare-and-hospital .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.healthcare-and-hospital .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.healthcare-and-hospital .industryRibbonGrid {
gap: 12px;
}
.healthcare-and-hospital .industryRibbonGrid>div {
font-size: 10px;
}
.healthcare-and-hospital .spotlightHead h2 {
font-size: 29px;
}
.healthcare-and-hospital .featureStage {
padding: 19px 13px;
}
.healthcare-and-hospital .mediaTitle>.icon2 {
display: none;
}
.healthcare-and-hospital .exampleLabel {
display: none;
}
.healthcare-and-hospital .vedaBrand {
font-size: 27px;
}
}
@media print {
.healthcare-and-hospital .featureTabs {
display: none;
}
.healthcare-and-hospital .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.healthcare-and-hospital .featureStage {
display: block;
}
.healthcare-and-hospital .featurePanel {
color: #000;
}
}
.healthcare-and-hospital #healthcare-maintenance-features-1:checked~.featureTabs label[for="healthcare-maintenance-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-maintenance-features-1:focus-visible~.featureTabs label[for="healthcare-maintenance-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-maintenance-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-2:checked~.featureTabs label[for="healthcare-maintenance-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-maintenance-features-2:focus-visible~.featureTabs label[for="healthcare-maintenance-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-maintenance-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-3:checked~.featureTabs label[for="healthcare-maintenance-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-maintenance-features-3:focus-visible~.featureTabs label[for="healthcare-maintenance-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-maintenance-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-4:checked~.featureTabs label[for="healthcare-maintenance-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-maintenance-features-4:focus-visible~.featureTabs label[for="healthcare-maintenance-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-maintenance-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-5:checked~.featureTabs label[for="healthcare-maintenance-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-maintenance-features-5:focus-visible~.featureTabs label[for="healthcare-maintenance-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-maintenance-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-1:checked~.featureTabs label[for="healthcare-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-rfid-features-1:focus-visible~.featureTabs label[for="healthcare-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-2:checked~.featureTabs label[for="healthcare-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-rfid-features-2:focus-visible~.featureTabs label[for="healthcare-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-3:checked~.featureTabs label[for="healthcare-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-rfid-features-3:focus-visible~.featureTabs label[for="healthcare-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-4:checked~.featureTabs label[for="healthcare-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-rfid-features-4:focus-visible~.featureTabs label[for="healthcare-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-5:checked~.featureTabs label[for="healthcare-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-rfid-features-5:focus-visible~.featureTabs label[for="healthcare-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-1:checked~.featureTabs label[for="healthcare-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-ai-decisions-features-1:focus-visible~.featureTabs label[for="healthcare-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-2:checked~.featureTabs label[for="healthcare-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-ai-decisions-features-2:focus-visible~.featureTabs label[for="healthcare-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-3:checked~.featureTabs label[for="healthcare-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-ai-decisions-features-3:focus-visible~.featureTabs label[for="healthcare-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-4:checked~.featureTabs label[for="healthcare-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-ai-decisions-features-4:focus-visible~.featureTabs label[for="healthcare-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-5:checked~.featureTabs label[for="healthcare-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.healthcare-and-hospital #healthcare-ai-decisions-features-5:focus-visible~.featureTabs label[for="healthcare-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.healthcare-and-hospital .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .featureMediaPanels {
min-width: 0;
}
.healthcare-and-hospital .featureMediaPanels .miniChart {
height: 178px;
}
.healthcare-and-hospital .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.healthcare-and-hospital .featureMediaPanels .windowTop strong,
.healthcare-and-hospital .featureMediaPanels .windowTop small {
display: block;
}
.healthcare-and-hospital .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.healthcare-and-hospital .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.healthcare-and-hospital .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.healthcare-and-hospital .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.healthcare-and-hospital .featureMediaPanels .windowBody>*,
.healthcare-and-hospital .featureMediaPanels .spectrumGrid>*,
.healthcare-and-hospital .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.healthcare-and-hospital .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.healthcare-and-hospital .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.healthcare-and-hospital .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.healthcare-and-hospital .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.healthcare-and-hospital .featureMediaPanels .graphNodes {
min-height: 258px;
}
.healthcare-and-hospital .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.healthcare-and-hospital .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.healthcare-and-hospital .featureMediaPanels .mapPin {
box-shadow: none;
}
.healthcare-and-hospital .pin2 {
top: 88px;
right: 88px;
}
.healthcare-and-hospital .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.healthcare-and-hospital .featureMediaPanels .mediaShell {
padding: 10px;
}
.healthcare-and-hospital .featureMediaPanels .windowBody {
padding: 10px;
}
.healthcare-and-hospital .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .featureMediaPanels .alertBadge {
justify-self: start;
}
.healthcare-and-hospital .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.healthcare-and-hospital .featureMediaPanels .graphNodes .node.n1,
.healthcare-and-hospital .featureMediaPanels .graphNodes .node.n2,
.healthcare-and-hospital .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.healthcare-and-hospital .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.healthcare-and-hospital .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.healthcare-and-hospital .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.healthcare-and-hospital .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.healthcare-and-hospital .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.healthcare-and-hospital .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.healthcare-and-hospital .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.healthcare-and-hospital .freshGraphic * {
box-sizing: border-box;
}
.healthcare-and-hospital .rfPanel,
.healthcare-and-hospital .aiInsightCard,
.healthcare-and-hospital .forecastVisualCard,
.healthcare-and-hospital .forecastSuggestion,
.healthcare-and-hospital .knowledgeTile,
.healthcare-and-hospital .chatConversation,
.healthcare-and-hospital .trainingSummary,
.healthcare-and-hospital .moduleCard,
.healthcare-and-hospital .qualityHeatCard,
.healthcare-and-hospital .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.healthcare-and-hospital .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.healthcare-and-hospital .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.healthcare-and-hospital .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.healthcare-and-hospital .statusPill,
.healthcare-and-hospital .cardTag,
.healthcare-and-hospital .forecastSuggestion b,
.healthcare-and-hospital .moduleCard b,
.healthcare-and-hospital .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.healthcare-and-hospital .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.healthcare-and-hospital .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.healthcare-and-hospital .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.healthcare-and-hospital .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.healthcare-and-hospital .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.healthcare-and-hospital .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.healthcare-and-hospital .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.healthcare-and-hospital .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.healthcare-and-hospital .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.healthcare-and-hospital .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.healthcare-and-hospital .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.healthcare-and-hospital .dot.good {
background: #298EEC;
}
.healthcare-and-hospital .dot.warn {
background: #F4A62A;
}
.healthcare-and-hospital .dot.bad {
background: #EB6B53;
}
.healthcare-and-hospital .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.healthcare-and-hospital .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.healthcare-and-hospital .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.healthcare-and-hospital .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.healthcare-and-hospital .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.healthcare-and-hospital .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.healthcare-and-hospital .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.healthcare-and-hospital .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.healthcare-and-hospital .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.healthcare-and-hospital .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.healthcare-and-hospital .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.healthcare-and-hospital .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.healthcare-and-hospital .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.healthcare-and-hospital .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.healthcare-and-hospital .moveRow b {
color: #298EEC;
font-size: 9px;
}
.healthcare-and-hospital .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.healthcare-and-hospital .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.healthcare-and-hospital .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.healthcare-and-hospital .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.healthcare-and-hospital .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.healthcare-and-hospital .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.healthcare-and-hospital .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.healthcare-and-hospital .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.healthcare-and-hospital .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.healthcare-and-hospital .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.healthcare-and-hospital .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.healthcare-and-hospital .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.healthcare-and-hospital .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.healthcare-and-hospital .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.healthcare-and-hospital .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.healthcare-and-hospital .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.healthcare-and-hospital .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.healthcare-and-hospital .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.healthcare-and-hospital .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.healthcare-and-hospital .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.healthcare-and-hospital .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.healthcare-and-hospital .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.healthcare-and-hospital .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.healthcare-and-hospital .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.healthcare-and-hospital .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.healthcare-and-hospital .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.healthcare-and-hospital .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.healthcare-and-hospital .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.healthcare-and-hospital .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.healthcare-and-hospital .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.healthcare-and-hospital .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.healthcare-and-hospital .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.healthcare-and-hospital .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.healthcare-and-hospital .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.healthcare-and-hospital .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.healthcare-and-hospital .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.healthcare-and-hospital .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.healthcare-and-hospital .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.healthcare-and-hospital .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.healthcare-and-hospital .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.healthcare-and-hospital .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.healthcare-and-hospital .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.healthcare-and-hospital .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.healthcare-and-hospital .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.healthcare-and-hospital .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.healthcare-and-hospital .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.healthcare-and-hospital .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.healthcare-and-hospital .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.healthcare-and-hospital .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.healthcare-and-hospital .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.healthcare-and-hospital .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.healthcare-and-hospital .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.healthcare-and-hospital .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.healthcare-and-hospital .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.healthcare-and-hospital .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.healthcare-and-hospital .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.healthcare-and-hospital .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.healthcare-and-hospital .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.healthcare-and-hospital .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.healthcare-and-hospital .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.healthcare-and-hospital .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.healthcare-and-hospital .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.healthcare-and-hospital .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.healthcare-and-hospital .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.healthcare-and-hospital .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.healthcare-and-hospital .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.healthcare-and-hospital .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.healthcare-and-hospital .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.healthcare-and-hospital .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.healthcare-and-hospital .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.healthcare-and-hospital .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.healthcare-and-hospital .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.healthcare-and-hospital .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.healthcare-and-hospital .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.healthcare-and-hospital .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.healthcare-and-hospital .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.healthcare-and-hospital .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.healthcare-and-hospital .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.healthcare-and-hospital .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.healthcare-and-hospital .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.healthcare-and-hospital .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.healthcare-and-hospital .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.healthcare-and-hospital .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.healthcare-and-hospital .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.healthcare-and-hospital .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.healthcare-and-hospital .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.healthcare-and-hospital .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.healthcare-and-hospital .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.healthcare-and-hospital .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.healthcare-and-hospital .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.healthcare-and-hospital .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.healthcare-and-hospital .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.healthcare-and-hospital .chartLegend .sw.blue {
background: #298EEC;
}
.healthcare-and-hospital .chartLegend .sw.amber {
background: #F4A62A;
}
.healthcare-and-hospital .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.healthcare-and-hospital .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.healthcare-and-hospital .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.healthcare-and-hospital .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.healthcare-and-hospital .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.healthcare-and-hospital .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.healthcare-and-hospital .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.healthcare-and-hospital .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.healthcare-and-hospital .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.healthcare-and-hospital .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.healthcare-and-hospital .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.healthcare-and-hospital .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.healthcare-and-hospital .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.healthcare-and-hospital .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.healthcare-and-hospital .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.healthcare-and-hospital .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.healthcare-and-hospital .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.healthcare-and-hospital .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.healthcare-and-hospital .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.healthcare-and-hospital .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.healthcare-and-hospital .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.healthcare-and-hospital .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.healthcare-and-hospital .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.healthcare-and-hospital .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.healthcare-and-hospital .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.healthcare-and-hospital .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.healthcare-and-hospital .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.healthcare-and-hospital .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.healthcare-and-hospital .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.healthcare-and-hospital .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.healthcare-and-hospital .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.healthcare-and-hospital .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.healthcare-and-hospital .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.healthcare-and-hospital .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.healthcare-and-hospital .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.healthcare-and-hospital .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.healthcare-and-hospital .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.healthcare-and-hospital .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.healthcare-and-hospital .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.healthcare-and-hospital .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.healthcare-and-hospital .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.healthcare-and-hospital .freshGraphic {
height: auto;
min-height: 420px;
}
.healthcare-and-hospital .rfTrackLayout,
.healthcare-and-hospital .rfFlowLayout,
.healthcare-and-hospital .rfAlertGrid,
.healthcare-and-hospital .rfCycleLayout,
.healthcare-and-hospital .rfSitesLayout,
.healthcare-and-hospital .aiRootLayout,
.healthcare-and-hospital .aiForecastLayout,
.healthcare-and-hospital .aiChatLayout,
.healthcare-and-hospital .aiTrainingLayout,
.healthcare-and-hospital .aiQualityLayout,
.healthcare-and-hospital .trainingModuleGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.healthcare-and-hospital .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.healthcare-and-hospital .rfAlertGrid {
grid-template-columns: 1fr;
}
.healthcare-and-hospital .qualityHeatGrid span {
min-height: 40px;
}
.healthcare-and-hospital .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.healthcare-and-hospital .aiLink {
display: none;
}
}
.healthcare-and-hospital .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.healthcare-and-hospital .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.healthcare-and-hospital .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.healthcare-and-hospital .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.healthcare-and-hospital .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.healthcare-and-hospital .mfgHeroBreadcrumb a {
color: inherit;
}
.healthcare-and-hospital .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.healthcare-and-hospital .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.healthcare-and-hospital .mfgHero h1 {
color: #fff;
}
.healthcare-and-hospital .mfgHero h1>span {
display: block;
}
.healthcare-and-hospital .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.healthcare-and-hospital .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.healthcare-and-hospital .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.healthcare-and-hospital .mfgHeroActions .outline:hover {
background: #172029;
}
.healthcare-and-hospital .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.healthcare-and-hospital .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.healthcare-and-hospital .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.healthcare-and-hospital .mfgHeroContent {
min-height: 610px;
}
.healthcare-and-hospital .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.healthcare-and-hospital .mfgHeroLead {
font-size: 16px;
}
.healthcare-and-hospital .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.healthcare-and-hospital .mfgHero {
display: flex;
flex-direction: column;
}
.healthcare-and-hospital .mfgHeroContent {
order: 0;
min-height: 0;
}
.healthcare-and-hospital .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.healthcare-and-hospital .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.healthcare-and-hospital .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.healthcare-and-hospital .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.healthcare-and-hospital .mfgHeroCopy {
padding: 25px 0 20px;
}
.healthcare-and-hospital .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.healthcare-and-hospital .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.healthcare-and-hospital .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.healthcare-and-hospital .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.healthcare-and-hospital .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.healthcare-and-hospital .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.healthcare-and-hospital .mfgHeroScene {
height: 280px;
}
}
@media print {
.healthcare-and-hospital .mfgHero {
background: #fff;
color: #000;
}
.healthcare-and-hospital .mfgHeroScene,
.healthcare-and-hospital .mfgHeroActions {
display: none;
}
.healthcare-and-hospital .mfgHeroContent {
min-height: 0;
}
.healthcare-and-hospital .mfgHeroCopy {
width: 100%;
max-width: none;
}
.healthcare-and-hospital .mfgHero h1,
.healthcare-and-hospital .mfgHero h1 .mfgHeroAccent,
.healthcare-and-hospital .mfgHero p {
color: #000;
}
}
.healthcare-and-hospital #healthcare-rfid .featureStage,
.healthcare-and-hospital #healthcare-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.healthcare-and-hospital .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.healthcare-and-hospital .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.healthcare-and-hospital .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.healthcare-and-hospital .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.healthcare-and-hospital .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.healthcare-and-hospital .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.healthcare-and-hospital .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.healthcare-and-hospital .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.healthcare-and-hospital .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.healthcare-and-hospital .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.healthcare-and-hospital .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.healthcare-and-hospital .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.healthcare-and-hospital .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.healthcare-and-hospital .mfgGallery .rfPanel {
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.healthcare-and-hospital .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.healthcare-and-hospital .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.healthcare-and-hospital .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .shelf span {
font-size: 11px;
}
.healthcare-and-hospital .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.healthcare-and-hospital .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.healthcare-and-hospital .mfgGallery .rfKpiGrid {
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.healthcare-and-hospital .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.healthcare-and-hospital .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.healthcare-and-hospital .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.healthcare-and-hospital .mfgGallery .rfScanCard span {
font-size: 9px;
}
.healthcare-and-hospital .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.healthcare-and-hospital .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.healthcare-and-hospital .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.healthcare-and-hospital .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.healthcare-and-hospital .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.healthcare-and-hospital .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.healthcare-and-hospital .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.healthcare-and-hospital .mfgGallery .flowArrow {
display: none;
}
.healthcare-and-hospital .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .railItem {
padding: 9px 7px;
}
.healthcare-and-hospital .mfgGallery .railItem b {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.healthcare-and-hospital .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.healthcare-and-hospital .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.healthcare-and-hospital .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.healthcare-and-hospital .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .reorderCard strong {
font-size: 13px;
}
.healthcare-and-hospital .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.healthcare-and-hospital .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.healthcare-and-hospital .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.healthcare-and-hospital .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.healthcare-and-hospital .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.healthcare-and-hospital .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.healthcare-and-hospital .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.healthcare-and-hospital .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.healthcare-and-hospital .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.healthcare-and-hospital .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.healthcare-and-hospital .mfgGallery .varianceCard {
padding: 12px;
}
.healthcare-and-hospital .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.healthcare-and-hospital .mfgGallery .varianceCard small {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.healthcare-and-hospital .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.healthcare-and-hospital .mfgGallery .deviceTop {
font-size: 11px;
}
.healthcare-and-hospital .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.healthcare-and-hospital .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.healthcare-and-hospital .mfgGallery .deviceMetric {
padding: 9px;
}
.healthcare-and-hospital .mfgGallery .deviceMetric span {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .deviceMetric b {
font-size: 12px;
}
.healthcare-and-hospital .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.healthcare-and-hospital .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.healthcare-and-hospital .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.healthcare-and-hospital .mfgGallery .siteNode.north {
top: 6px;
}
.healthcare-and-hospital .mfgGallery .siteNode.south {
bottom: 6px;
}
.healthcare-and-hospital .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.healthcare-and-hospital .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.healthcare-and-hospital .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.healthcare-and-hospital .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.healthcare-and-hospital .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.healthcare-and-hospital .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.healthcare-and-hospital .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.healthcare-and-hospital .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.healthcare-and-hospital .mfgGallery .siteSummary strong {
font-size: 12px;
}
.healthcare-and-hospital .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.healthcare-and-hospital .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.healthcare-and-hospital .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.healthcare-and-hospital .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.healthcare-and-hospital .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.healthcare-and-hospital .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.healthcare-and-hospital .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.healthcare-and-hospital .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.healthcare-and-hospital .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.healthcare-and-hospital .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.healthcare-and-hospital .mfgGallery .insightMeta {
gap: 6px;
}
.healthcare-and-hospital .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.healthcare-and-hospital .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .chartHeader span {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .chartHeader b {
font-size: 11px;
}
.healthcare-and-hospital .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.healthcare-and-hospital .mfgGallery .chartLegend {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.healthcare-and-hospital .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.healthcare-and-hospital .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.healthcare-and-hospital .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.healthcare-and-hospital .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.healthcare-and-hospital .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.healthcare-and-hospital .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.healthcare-and-hospital .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.healthcare-and-hospital .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.healthcare-and-hospital .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.healthcare-and-hospital .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.healthcare-and-hospital .mfgGallery .progressCenter strong {
font-size: 25px;
}
.healthcare-and-hospital .mfgGallery .trainingStatList {
gap: 9px;
}
.healthcare-and-hospital .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.healthcare-and-hospital .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.healthcare-and-hospital .mfgGallery .trainingStatList span {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.healthcare-and-hospital .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.healthcare-and-hospital .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.healthcare-and-hospital .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.healthcare-and-hospital .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.healthcare-and-hospital .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.healthcare-and-hospital .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.healthcare-and-hospital .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.healthcare-and-hospital .mfgGallery .qualityCaption span {
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.healthcare-and-hospital .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.healthcare-and-hospital .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.healthcare-and-hospital .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.healthcare-and-hospital .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.healthcare-and-hospital #healthcare-rfid .featureStage,
.healthcare-and-hospital #healthcare-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.healthcare-and-hospital #healthcare-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.healthcare-and-hospital .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.healthcare-and-hospital #healthcare-rfid .featureStage,
.healthcare-and-hospital #healthcare-ai-decisions .featureStage {
padding: 16px;
}
.healthcare-and-hospital .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.healthcare-and-hospital .mfgGallery .freshWindow {
height: auto;
}
.healthcare-and-hospital .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.healthcare-and-hospital .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .freshTop strong {
font-size: 13px;
}
.healthcare-and-hospital .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.healthcare-and-hospital .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.healthcare-and-hospital .mfgGallery .rfShelfPanel {
padding: 10px;
}
.healthcare-and-hospital .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.healthcare-and-hospital .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.healthcare-and-hospital .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.healthcare-and-hospital .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.healthcare-and-hospital .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.healthcare-and-hospital .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.healthcare-and-hospital .mfgGallery .flowNum {
grid-row: 1/3;
}
.healthcare-and-hospital .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.healthcare-and-hospital .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.healthcare-and-hospital .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.healthcare-and-hospital .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.healthcare-and-hospital .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.healthcare-and-hospital .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.healthcare-and-hospital .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.healthcare-and-hospital .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.healthcare-and-hospital .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.healthcare-and-hospital .mfgGallery .rfActionStrip {
height: auto;
}
.healthcare-and-hospital .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .countPanel {
gap: 14px;
}
.healthcare-and-hospital .mfgGallery .handheldPanel {
padding: 15px;
}
.healthcare-and-hospital .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.healthcare-and-hospital .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.healthcare-and-hospital .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.healthcare-and-hospital .mfgGallery .siteNode.east {
right: 3%;
}
.healthcare-and-hospital .mfgGallery .siteNode.west {
left: 3%;
}
.healthcare-and-hospital .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.healthcare-and-hospital .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.healthcare-and-hospital .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.healthcare-and-hospital .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.healthcare-and-hospital .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.healthcare-and-hospital .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.healthcare-and-hospital .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.healthcare-and-hospital .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.healthcare-and-hospital .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.healthcare-and-hospital .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.healthcare-and-hospital .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.healthcare-and-hospital .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.healthcare-and-hospital .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.healthcare-and-hospital .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.healthcare-and-hospital .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.healthcare-and-hospital .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.healthcare-and-hospital .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.healthcare-and-hospital .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.healthcare-and-hospital .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.healthcare-and-hospital .mfgGallery .moduleCard {
padding: 10px;
}
.healthcare-and-hospital .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.healthcare-and-hospital .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.healthcare-and-hospital .mfgGallery .qualityAction strong {
font-size: 12px;
}
.healthcare-and-hospital .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.healthcare-and-hospital .mfgGallery .shelf i::after {
bottom: 0;
}
.healthcare-and-hospital .healthcareVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.healthcare-and-hospital .healthcareGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.healthcare-and-hospital .healthcareIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.healthcare-and-hospital .healthcareStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.healthcare-and-hospital .healthcareVisualGallery>.healthcareGraphic {
display: none;
}
.healthcare-and-hospital #healthcare-maintenance .featureStage,
.healthcare-and-hospital #healthcare-rfid .featureStage,
.healthcare-and-hospital #healthcare-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.healthcare-and-hospital #healthcare-rfid .healthcareVisualGallery {
grid-column: 1;
grid-row: 1;
}
.healthcare-and-hospital #healthcare-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.healthcare-and-hospital .factoryWorkflow {
display: flex;
flex-direction: column;
}
.healthcare-and-hospital .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.healthcare-and-hospital .factoryWorkflow>p {
margin-bottom: 22px;
}
.healthcare-and-hospital .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.healthcare-and-hospital #healthcare-maintenance .featureStage,
.healthcare-and-hospital #healthcare-rfid .featureStage,
.healthcare-and-hospital #healthcare-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.healthcare-and-hospital #healthcare-rfid .healthcareVisualGallery,
.healthcare-and-hospital #healthcare-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.healthcare-and-hospital .mfgHeroScene {
height: 290px;
}
.healthcare-and-hospital #healthcare-maintenance .featureStage,
.healthcare-and-hospital #healthcare-rfid .featureStage,
.healthcare-and-hospital #healthcare-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.healthcare-and-hospital .healthcareVisualGallery {
width: 100%;
}
}
@media print {
.healthcare-and-hospital .healthcareVisualGallery>.healthcareGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.healthcare-and-hospital #healthcare-maintenance-features-1:checked~.featureStage .healthcareVisualGallery> :nth-child(1) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-2:checked~.featureStage .healthcareVisualGallery> :nth-child(2) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-3:checked~.featureStage .healthcareVisualGallery> :nth-child(3) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-4:checked~.featureStage .healthcareVisualGallery> :nth-child(4) {
display: block;
}
.healthcare-and-hospital #healthcare-maintenance-features-5:checked~.featureStage .healthcareVisualGallery> :nth-child(5) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-1:checked~.featureStage .healthcareVisualGallery> :nth-child(1) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-2:checked~.featureStage .healthcareVisualGallery> :nth-child(2) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-3:checked~.featureStage .healthcareVisualGallery> :nth-child(3) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-4:checked~.featureStage .healthcareVisualGallery> :nth-child(4) {
display: block;
}
.healthcare-and-hospital #healthcare-rfid-features-5:checked~.featureStage .healthcareVisualGallery> :nth-child(5) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-1:checked~.featureStage .healthcareVisualGallery> :nth-child(1) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-2:checked~.featureStage .healthcareVisualGallery> :nth-child(2) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-3:checked~.featureStage .healthcareVisualGallery> :nth-child(3) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-4:checked~.featureStage .healthcareVisualGallery> :nth-child(4) {
display: block;
}
.healthcare-and-hospital #healthcare-ai-decisions-features-5:checked~.featureStage .healthcareVisualGallery> :nth-child(5) {
display: block;
}
.healthcare-and-hospital .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.healthcare-and-hospital .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.healthcare-and-hospital .healthcareIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.healthcare-and-hospital .healthcareGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.healthcare-and-hospital .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.healthcare-and-hospital .mfgHeroScene img {
object-position: 70% 50%;
}
.healthcare-and-hospital .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.healthcare-and-hospital .mfgHeroScene img {
object-position: 78% 50%;
}
.healthcare-and-hospital .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.healthcare-and-hospital .mfgHeroScene img {
object-position: 72% 50%;
}
.healthcare-and-hospital .healthcareIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
.healthcare-and-hospital .healthcareGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
.healthcare-and-hospital .healthcareVisualGallery {
min-height: 0;
}
.healthcare-and-hospital .healthcareIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
.healthcare-and-hospital .mfgHeroScene img {
object-position: 90% 50%;
}
}
.healthcare-and-hospital .healthcareIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
.healthcare-and-hospital .healthcareGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
.healthcare-and-hospital .healthcareVisualGallery {
min-height: 0;
}
.healthcare-and-hospital .mfgHeroScene img {
object-position: 72% 50%;
}
.healthcare-and-hospital .healthcareIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.healthcare-and-hospital .healthcareGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
.healthcare-and-hospital .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
.healthcare-and-hospital .mfgHeroScene img {
object-position: 80% 50%;
}
}  .casino-maintenance .industryIntroHead.compact,
.casino-maintenance .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.casino-maintenance .featureMediaPanels {
position: relative;
min-height: 430px;
}
.casino-maintenance .featureMediaPanels>.mediaPanel {
display: none;
}
.casino-maintenance .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.casino-maintenance .featureMediaPanels .spotlightMedia {
height: 100%;
}
.casino-maintenance .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.casino-maintenance .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.casino-maintenance .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.casino-maintenance .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.casino-maintenance .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.casino-maintenance .windowTop small {
font-size: 10px;
color: var(--muted);
}
.casino-maintenance .windowDots {
display: flex;
gap: 5px;
}
.casino-maintenance .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.casino-maintenance .windowBody {
padding: 16px;
}
.casino-maintenance .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.casino-maintenance .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.casino-maintenance .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.casino-maintenance .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.casino-maintenance .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.casino-maintenance .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.casino-maintenance .chartGridLine.l1 {
top: 34px;
}
.casino-maintenance .chartGridLine.l2 {
top: 65px;
}
.casino-maintenance .chartGridLine.l3 {
top: 96px;
}
.casino-maintenance .chartGridLine.l4 {
top: 127px;
}
.casino-maintenance .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.casino-maintenance .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.casino-maintenance .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.casino-maintenance .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.casino-maintenance .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.casino-maintenance .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.casino-maintenance .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.casino-maintenance .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.casino-maintenance .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.casino-maintenance .spectrumNotes {
display: grid;
gap: 10px;
}
.casino-maintenance .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.casino-maintenance .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.casino-maintenance .noteCard p,
.casino-maintenance .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.casino-maintenance .alertStack {
display: grid;
gap: 10px;
}
.casino-maintenance .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.casino-maintenance .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.casino-maintenance .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.casino-maintenance .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.casino-maintenance .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.casino-maintenance .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.casino-maintenance .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.casino-maintenance .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.casino-maintenance .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.casino-maintenance .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.casino-maintenance .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.casino-maintenance .scheduleBoard h4,
.casino-maintenance .todoBoard h4,
.casino-maintenance .siteBoard h4,
.casino-maintenance .chatPanel h4,
.casino-maintenance .lessonPanel h4,
.casino-maintenance .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.casino-maintenance .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.casino-maintenance .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.casino-maintenance .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.casino-maintenance .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.casino-maintenance .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.casino-maintenance .taskRow:last-child {
border-bottom: 0;
}
.casino-maintenance .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.casino-maintenance .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.casino-maintenance .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.casino-maintenance .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.casino-maintenance .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.casino-maintenance .inventoryTable th,
.casino-maintenance .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.casino-maintenance .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.casino-maintenance .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.casino-maintenance .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.casino-maintenance .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.casino-maintenance .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.casino-maintenance .phoneBody {
padding: 12px;
}
.casino-maintenance .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.casino-maintenance .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.casino-maintenance .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.casino-maintenance .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.casino-maintenance .progressList {
display: grid;
gap: 10px;
}
.casino-maintenance .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.casino-maintenance .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.casino-maintenance .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.casino-maintenance .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.casino-maintenance .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.casino-maintenance .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.casino-maintenance .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.casino-maintenance .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.casino-maintenance .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.casino-maintenance .pin1 {
top: 56px;
left: 58px;
}
.casino-maintenance .pin2 {
top: 88px;
right: 88px;
}
.casino-maintenance .pin3 {
bottom: 54px;
right: 72px;
}
.casino-maintenance .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.casino-maintenance .siteRow:last-child {
border-bottom: 0;
}
.casino-maintenance .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.casino-maintenance .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.casino-maintenance .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.casino-maintenance .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.casino-maintenance .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.casino-maintenance .graphNodes:before,
.casino-maintenance .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.casino-maintenance .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.casino-maintenance .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.casino-maintenance .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.casino-maintenance .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.casino-maintenance .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.casino-maintenance .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.casino-maintenance .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.casino-maintenance .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.casino-maintenance .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.casino-maintenance .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.casino-maintenance .forecastList .taskRow strong {
font-size: 11px;
}
.casino-maintenance .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.casino-maintenance .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.casino-maintenance .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.casino-maintenance .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.casino-maintenance .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.casino-maintenance .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.casino-maintenance .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.casino-maintenance .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.casino-maintenance .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.casino-maintenance .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.casino-maintenance .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.casino-maintenance .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.casino-maintenance .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.casino-maintenance .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.casino-maintenance .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.casino-maintenance .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.casino-maintenance .qualityRows {
display: grid;
gap: 10px;
}
.casino-maintenance .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.casino-maintenance .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.casino-maintenance .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.casino-maintenance .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.casino-maintenance .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.casino-maintenance #casino-maintenance-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.casino-maintenance #casino-maintenance-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.casino-maintenance #casino-maintenance-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.casino-maintenance #casino-maintenance-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.casino-maintenance #casino-maintenance-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.casino-maintenance #casino-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.casino-maintenance #casino-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.casino-maintenance #casino-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.casino-maintenance #casino-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.casino-maintenance #casino-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.casino-maintenance #casino-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.casino-maintenance #casino-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.casino-maintenance #casino-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.casino-maintenance #casino-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.casino-maintenance #casino-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.casino-maintenance #casino-maintenance-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.casino-maintenance #casino-maintenance-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.casino-maintenance #casino-maintenance-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.casino-maintenance #casino-maintenance-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.casino-maintenance #casino-maintenance-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.casino-maintenance #casino-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.casino-maintenance #casino-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.casino-maintenance #casino-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.casino-maintenance #casino-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.casino-maintenance #casino-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.casino-maintenance #casino-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.casino-maintenance #casino-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.casino-maintenance #casino-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.casino-maintenance #casino-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.casino-maintenance #casino-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.casino-maintenance .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.casino-maintenance .featureMediaPanels {
min-height: 0;
}
.casino-maintenance .inventorySplit,
.casino-maintenance .forecastGrid,
.casino-maintenance .siteGrid,
.casino-maintenance .spectrumGrid,
.casino-maintenance .scheduleGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.casino-maintenance .metricGrid,
.casino-maintenance .lessonCards,
.casino-maintenance .gaugeGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.casino-maintenance .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.casino-maintenance .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.casino-maintenance .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.casino-maintenance .brand span {
color: var(--brand);
}
.casino-maintenance .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.casino-maintenance .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.casino-maintenance .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.casino-maintenance .button.primary:hover {
background: var(--brand-dark);
}
.casino-maintenance .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.casino-maintenance .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.casino-maintenance .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.casino-maintenance .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.casino-maintenance .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.casino-maintenance .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.casino-maintenance .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.casino-maintenance .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.casino-maintenance .hero .button.primary:hover {
background: var(--black-soft);
}
.casino-maintenance .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.casino-maintenance .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.casino-maintenance .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.casino-maintenance .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.casino-maintenance .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.casino-maintenance .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.casino-maintenance .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.casino-maintenance .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.casino-maintenance .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.casino-maintenance .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.casino-maintenance .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.casino-maintenance .ratingLead strong {
display: block;
font-size: 20px;
}
.casino-maintenance .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.casino-maintenance .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.casino-maintenance .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.casino-maintenance .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.casino-maintenance .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.casino-maintenance .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.casino-maintenance .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.casino-maintenance .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.casino-maintenance .aiJourney h2 {
color: #fff;
}
.casino-maintenance .aiJourney .sectionHead p {
color: #D7D7D7;
}
.casino-maintenance .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.casino-maintenance .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.casino-maintenance .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.casino-maintenance .aiStep:last-child::after {
display: none;
}
.casino-maintenance .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.casino-maintenance .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.casino-maintenance .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.casino-maintenance .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.casino-maintenance .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.casino-maintenance .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.casino-maintenance .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.casino-maintenance .outcome span {
color: var(--muted);
font-size: 14px;
}
.casino-maintenance .capability {
background: #fff;
}
.casino-maintenance .capability.alt {
background: var(--sky-2);
}
.casino-maintenance .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.casino-maintenance .twoCol.reverse .visual {
order: 2;
}
.casino-maintenance .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.casino-maintenance .visual .placeholder {
min-height: 355px;
}
.casino-maintenance .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.casino-maintenance .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.casino-maintenance details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.casino-maintenance details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.casino-maintenance details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.casino-maintenance details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.casino-maintenance details.capabilityMore[open] summary::after {
content: "−";
}
.casino-maintenance details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.casino-maintenance .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.casino-maintenance .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.casino-maintenance .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.casino-maintenance .darkSection h2,
.casino-maintenance .darkSection h3 {
color: #fff;
}
.casino-maintenance .darkSection .sectionHead p,
.casino-maintenance .darkSection .copy p {
color: #D7D7D7;
}
.casino-maintenance .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.casino-maintenance .darkSection .featureItem {
color: #F7F7F7;
}
.casino-maintenance .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.casino-maintenance .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.casino-maintenance .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.casino-maintenance .darkSection .placeholder small {
color: #D0D0D0;
}
.casino-maintenance .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.casino-maintenance .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.casino-maintenance .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.casino-maintenance .card p {
color: var(--muted);
margin: 12px 0 0;
}
.casino-maintenance .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.casino-maintenance .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.casino-maintenance .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.casino-maintenance .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.casino-maintenance .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.casino-maintenance .benefitBand h2 {
color: #fff;
}
.casino-maintenance .benefitBand .sectionHead p {
color: #D5D5D5;
}
.casino-maintenance .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.casino-maintenance .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.casino-maintenance .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.casino-maintenance .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.casino-maintenance .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.casino-maintenance .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.casino-maintenance .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.casino-maintenance .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.casino-maintenance .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.casino-maintenance .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.casino-maintenance .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.casino-maintenance .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.casino-maintenance .ctaPanel h2 {
color: #fff;
}
.casino-maintenance .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.casino-maintenance .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.casino-maintenance .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.casino-maintenance .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.casino-maintenance .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.casino-maintenance .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.casino-maintenance .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.casino-maintenance .inlineCta.dark h3 {
color: #fff;
}
.casino-maintenance .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.casino-maintenance .inlineCta.dark p {
color: #D8D8D8;
}
.casino-maintenance .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.casino-maintenance .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.casino-maintenance .button.yellow:hover {
background: #FFD84D;
}
.casino-maintenance .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.casino-maintenance .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.casino-maintenance .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.casino-maintenance .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.casino-maintenance footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.casino-maintenance .ratingSectionGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.casino-maintenance .heroGrid,
.casino-maintenance .twoCol,
.casino-maintenance .ctaPanel {
grid-template-columns: 1fr;
}
.casino-maintenance .twoCol.reverse .visual {
order: initial;
}
.casino-maintenance .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.casino-maintenance .ratingGrid,
.casino-maintenance .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.casino-maintenance .ratingLead,
.casino-maintenance .awardLead {
grid-column: 1/-1;
text-align: center;
}
.casino-maintenance .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.casino-maintenance .aiStep:nth-child(3)::after,
.casino-maintenance .aiStep:last-child::after {
display: none;
}
.casino-maintenance .outcomeGrid,
.casino-maintenance .challengeGrid,
.casino-maintenance .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.casino-maintenance .cards,
.casino-maintenance .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.casino-maintenance .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.casino-maintenance .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.casino-maintenance .awardProofGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .wrap {
width: min(var(--max), calc(100% - 24px));
}
.casino-maintenance .hero {
padding: 58px 0 52px;
}
.casino-maintenance section {
padding: 64px 0;
}
.casino-maintenance h1 {
font-size: 44px;
}
.casino-maintenance .aiFlow {
grid-template-columns: 1fr;
}
.casino-maintenance .aiStep::after {
display: none;
}
.casino-maintenance .logoRow,
.casino-maintenance .ratingGrid,
.casino-maintenance .awardGrid,
.casino-maintenance .outcomeGrid,
.casino-maintenance .challengeGrid,
.casino-maintenance .benefitGrid,
.casino-maintenance .cards,
.casino-maintenance .proofCards,
.casino-maintenance .integrationGrid,
.casino-maintenance .featureList {
grid-template-columns: 1fr;
}
.casino-maintenance .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.casino-maintenance .ctaPanel {
padding: 34px 24px;
}
.casino-maintenance .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.casino-maintenance .inlineCtaActions {
width: 100%;
}
.casino-maintenance .inlineCtaActions .button {
flex: 1;
}
}
.casino-maintenance .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.casino-maintenance .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.casino-maintenance .skipLink:focus {
transform: none;
}
.casino-maintenance a:focus-visible,
.casino-maintenance summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.casino-maintenance .darkSection a:focus-visible,
.casino-maintenance .darkSection summary:focus-visible,
.casino-maintenance .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.casino-maintenance .topbar {
background: #fff;
backdrop-filter: none;
}
.casino-maintenance .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.casino-maintenance .brandName {
display: inline;
color: var(--navy) !important;
}
.casino-maintenance .brandName>span {
color: var(--brand-dark);
}
.casino-maintenance .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.casino-maintenance .brandMark .icon {
width: 21px;
height: 21px;
}
.casino-maintenance .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.casino-maintenance .navlinks a:hover {
color: var(--brand-dark);
}
.casino-maintenance .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.casino-maintenance .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.casino-maintenance .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.casino-maintenance .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.casino-maintenance .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.casino-maintenance .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.casino-maintenance .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.casino-maintenance .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.casino-maintenance .heroVisual {
width: 100%;
min-width: 0;
}
.casino-maintenance .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.casino-maintenance .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.casino-maintenance .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.casino-maintenance .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.casino-maintenance .clientBand {
padding: 27px 0;
}
.casino-maintenance .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.casino-maintenance .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.casino-maintenance .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.casino-maintenance .logoBox.wide {
font-size: 12px;
}
.casino-maintenance .logoBox small {
display: block;
font-size: 10px;
}
.casino-maintenance section {
padding: 80px 0;
}
.casino-maintenance h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.casino-maintenance .sectionHead {
margin-bottom: 36px;
}
.casino-maintenance .eyebrow {
line-height: 1.5;
}
.casino-maintenance .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.casino-maintenance .aiStep {
min-height: 162px;
}
.casino-maintenance .aiStep strong {
line-height: 1.35;
}
.casino-maintenance .aiStep span {
line-height: 1.65;
}
.casino-maintenance .aiCallout {
margin-top: 24px;
}
.casino-maintenance .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.casino-maintenance .outcome>.icon {
color: var(--navy);
}
.casino-maintenance .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.casino-maintenance .twoCol.reverse .visual {
order: -1;
}
.casino-maintenance .copy .eyebrow {
margin-bottom: 17px;
}
.casino-maintenance .copy p {
font-size: 16px;
line-height: 1.85;
}
.casino-maintenance .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.casino-maintenance .featureList {
gap: 13px 18px;
}
.casino-maintenance .featureItem {
font-size: 13px;
line-height: 1.6;
}
.casino-maintenance .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.casino-maintenance .check .icon {
width: 14px;
height: 14px;
}
.casino-maintenance details.capabilityMore {
margin-bottom: 0;
}
.casino-maintenance .capabilityMore summary {
min-height: 34px;
}
.casino-maintenance .capabilityMore .moreGrid {
gap: 13px 18px;
}
.casino-maintenance .textCta {
font-size: 14px;
}
.casino-maintenance .visual {
min-width: 0;
}
.casino-maintenance .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.casino-maintenance .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.casino-maintenance .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.casino-maintenance .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.casino-maintenance .panelBody {
padding: 20px;
}
.casino-maintenance .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.casino-maintenance .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.casino-maintenance .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.casino-maintenance .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.casino-maintenance .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.casino-maintenance .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.casino-maintenance .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.casino-maintenance .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.casino-maintenance .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.casino-maintenance .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.casino-maintenance .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.casino-maintenance .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.casino-maintenance .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.casino-maintenance .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.casino-maintenance .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.casino-maintenance .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.casino-maintenance .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.casino-maintenance .miniStats span {
font-size: 9px;
color: var(--muted);
}
.casino-maintenance .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.casino-maintenance .dataRow:last-child {
border-bottom: 0;
}
.casino-maintenance .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.casino-maintenance .rowIcon .icon {
width: 19px;
height: 19px;
}
.casino-maintenance .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.casino-maintenance .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.casino-maintenance .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.casino-maintenance .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.casino-maintenance .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.casino-maintenance .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.casino-maintenance .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.casino-maintenance .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.casino-maintenance .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.casino-maintenance .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.casino-maintenance .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.casino-maintenance .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.casino-maintenance .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.casino-maintenance .mobileAccount {
text-align: center;
padding: 13px 0;
}
.casino-maintenance .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.casino-maintenance .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.casino-maintenance .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.casino-maintenance .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.casino-maintenance .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.casino-maintenance .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.casino-maintenance .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
.casino-maintenance .phoneDevice .rowCopy strong {
font-size: 9px;
}
.casino-maintenance .phoneDevice .rowCopy small {
font-size: 7px;
}
.casino-maintenance .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.casino-maintenance .mobileSide {
display: grid;
gap: 10px;
}
.casino-maintenance .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.casino-maintenance .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.casino-maintenance .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.casino-maintenance .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.casino-maintenance .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.casino-maintenance .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.casino-maintenance .darkSection .panelHead>strong {
color: #fff;
}
.casino-maintenance .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.casino-maintenance .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.casino-maintenance .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.casino-maintenance .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.casino-maintenance .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.casino-maintenance .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.casino-maintenance .promptList {
display: grid;
gap: 10px;
}
.casino-maintenance .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.casino-maintenance .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.casino-maintenance .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.casino-maintenance .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.casino-maintenance .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.casino-maintenance .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.casino-maintenance .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.casino-maintenance .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.casino-maintenance .quoteTable th,
.casino-maintenance .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.casino-maintenance .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.casino-maintenance .quoteTable td:first-child {
width: 64%;
}
.casino-maintenance .quoteTable th:last-child,
.casino-maintenance .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.casino-maintenance .quoteTable strong {
font-size: 11px;
}
.casino-maintenance .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.casino-maintenance .quoteTable tfoot {
background: #F5FBFF;
}
.casino-maintenance .quoteTable tfoot th {
font-size: 10px;
}
.casino-maintenance .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.casino-maintenance .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.casino-maintenance .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.casino-maintenance .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.casino-maintenance .orderJourney {
margin: 20px 0;
}
.casino-maintenance .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.casino-maintenance .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.casino-maintenance .journeyRow:last-child:before {
display: none;
}
.casino-maintenance .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.casino-maintenance .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.casino-maintenance .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.casino-maintenance .journeyRow strong {
font-size: 12px;
display: block;
}
.casino-maintenance .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.casino-maintenance .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.casino-maintenance .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.casino-maintenance .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.casino-maintenance .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.casino-maintenance .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.casino-maintenance .inventoryIntro strong {
display: block;
font-size: 16px;
}
.casino-maintenance .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.casino-maintenance .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.casino-maintenance .availabilityCard span {
font-size: 9px;
display: block;
}
.casino-maintenance .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.casino-maintenance .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.casino-maintenance .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.casino-maintenance .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.casino-maintenance .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.casino-maintenance .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.casino-maintenance .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.casino-maintenance .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.casino-maintenance .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.casino-maintenance .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.casino-maintenance .customerTimeline .dataRow {
border-color: #353535;
}
.casino-maintenance .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.casino-maintenance .customerTimeline strong {
color: #fff;
}
.casino-maintenance .customerTimeline small {
color: #BFBFBF;
}
.casino-maintenance .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.casino-maintenance .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.casino-maintenance .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.casino-maintenance .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.casino-maintenance .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.casino-maintenance .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.casino-maintenance .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.casino-maintenance .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.casino-maintenance .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.casino-maintenance .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.casino-maintenance .chartTitle strong {
font-size: 12px;
}
.casino-maintenance .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.casino-maintenance .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.casino-maintenance .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.casino-maintenance .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.casino-maintenance .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.casino-maintenance .inlineCta {
margin-top: 0;
box-shadow: none;
}
.casino-maintenance .inlineCtaActions {
max-width: 42%;
}
.casino-maintenance .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.casino-maintenance .inlineCta h3 {
line-height: 1.35;
}
.casino-maintenance .card {
box-shadow: none;
}
.casino-maintenance .cardIcon {
box-shadow: none;
}
.casino-maintenance .card h3 {
font-size: 22px;
}
.casino-maintenance .card p {
font-size: 14px;
line-height: 1.8;
}
.casino-maintenance .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.casino-maintenance .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.casino-maintenance .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.casino-maintenance .ratingBand {
padding: 34px 0;
}
.casino-maintenance .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.casino-maintenance .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.casino-maintenance .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.casino-maintenance .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
.casino-maintenance .ratingItem:first-child {
border-left: 0;
}
.casino-maintenance .proofCard h3 {
font-size: 23px;
}
.casino-maintenance .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.casino-maintenance .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.casino-maintenance .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.casino-maintenance .integration {
min-height: 98px;
}
.casino-maintenance .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.casino-maintenance .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.casino-maintenance .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.casino-maintenance .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.casino-maintenance .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.casino-maintenance .finalActions {
display: grid;
gap: 11px;
}
.casino-maintenance .finalActions .button {
white-space: nowrap;
}
.casino-maintenance .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.casino-maintenance .footerInner p {
margin: 0;
font-size: 12px;
}
.casino-maintenance .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.casino-maintenance .navlinks {
gap: 15px;
font-size: 12px;
}
.casino-maintenance .heroGrid {
gap: 30px;
}
.casino-maintenance .twoCol {
gap: 32px;
}
.casino-maintenance .panelBody {
padding: 16px;
}
.casino-maintenance .panelHead {
padding: 16px;
}
.casino-maintenance .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.casino-maintenance .pipelineColumns {
gap: 7px;
}
.casino-maintenance .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.casino-maintenance .heroGrid,
.casino-maintenance .twoCol,
.casino-maintenance .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .heroGrid {
gap: 36px;
}
.casino-maintenance .hero h1 {
max-width: 730px;
}
.casino-maintenance .hero .lead {
max-width: 690px;
}
.casino-maintenance .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.casino-maintenance .twoCol {
gap: 34px;
}
.casino-maintenance .twoCol.reverse .visual {
order: initial;
}
.casino-maintenance .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.casino-maintenance .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.casino-maintenance .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.casino-maintenance .awardItem {
font-size: 12px;
padding: 13px;
}
.casino-maintenance .ratingSectionGrid {
gap: 20px;
}
.casino-maintenance .inlineCta {
align-items: flex-start;
}
.casino-maintenance .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.casino-maintenance .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.casino-maintenance .card {
padding: 22px;
}
.casino-maintenance .card h3 {
font-size: 21px;
}
.casino-maintenance .finalActions {
display: flex;
flex-wrap: wrap;
}
.casino-maintenance .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.casino-maintenance .cards,
.casino-maintenance .proofCards {
grid-template-columns: 1fr;
}
.casino-maintenance .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.casino-maintenance .inlineCta {
flex-direction: column;
}
.casino-maintenance .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.casino-maintenance .inlineCtaActions .button {
flex: 1;
}
.casino-maintenance .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.casino-maintenance .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.casino-maintenance .wrap {
width: calc(100% - 32px);
}
.casino-maintenance [id] {
scroll-margin-top: 82px;
}
.casino-maintenance .brand {
font-size: 20px;
gap: 7px;
}
.casino-maintenance .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.casino-maintenance .brandMark .icon {
width: 18px;
height: 18px;
}
.casino-maintenance .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.casino-maintenance section {
padding: 60px 0;
}
.casino-maintenance .hero {
padding: 51px 0 48px;
}
.casino-maintenance .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.casino-maintenance .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.casino-maintenance .heroActions {
gap: 10px;
margin-top: 25px;
}
.casino-maintenance .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.casino-maintenance .hero .microcopy {
font-size: 11px;
}
.casino-maintenance .heroPills span {
font-size: 9px;
}
.casino-maintenance .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.casino-maintenance .sectionHead p {
font-size: 16px;
}
.casino-maintenance .copy h2 {
font-size: 34px;
}
.casino-maintenance .copy p {
font-size: 15px;
}
.casino-maintenance .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.casino-maintenance .logoBox {
min-height: 53px;
}
.casino-maintenance .logoBox:last-child {
grid-column: 1/-1;
}
.casino-maintenance .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.casino-maintenance .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.casino-maintenance .aiStep strong {
font-size: 13px;
}
.casino-maintenance .aiStep span {
font-size: 11px;
}
.casino-maintenance .aiStep::after {
display: none;
}
.casino-maintenance .outcomeGrid,
.casino-maintenance .challengeGrid,
.casino-maintenance .benefitGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .outcome {
padding: 24px;
}
.casino-maintenance .outcome strong {
font-size: 22px;
}
.casino-maintenance .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.casino-maintenance .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.casino-maintenance .awardItem:last-child {
grid-column: 1/-1;
}
.casino-maintenance .featureList,
.casino-maintenance .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .featureItem {
font-size: 13px;
}
.casino-maintenance .inlineCta {
padding: 22px;
gap: 19px;
}
.casino-maintenance .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.casino-maintenance .panelHead {
padding: 15px 13px;
}
.casino-maintenance .panelHead>strong {
font-size: 12px;
}
.casino-maintenance .panelBody {
padding: 14px;
}
.casino-maintenance .productPanel {
border-radius: 16px;
}
.casino-maintenance .productPanel figcaption {
padding: 0 14px 13px;
}
.casino-maintenance .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.casino-maintenance .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.casino-maintenance .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.casino-maintenance .deal {
margin-top: 0;
padding: 10px;
}
.casino-maintenance .deal strong {
font-size: 10px;
}
.casino-maintenance .deal small {
font-size: 9px;
}
.casino-maintenance .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.casino-maintenance .mobileWorkspace {
gap: 12px;
}
.casino-maintenance .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.casino-maintenance .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.casino-maintenance .sideTile {
padding: 10px;
}
.casino-maintenance .sideTile strong {
font-size: 10px;
}
.casino-maintenance .sideTile p {
font-size: 9px;
}
.casino-maintenance .mobileHeader strong {
font-size: 15px;
}
.casino-maintenance .mobileAccount strong {
font-size: 10px;
}
.casino-maintenance .mobileAccount small {
font-size: 7px;
}
.casino-maintenance .phoneDevice .rowIcon {
display: none;
}
.casino-maintenance .quoteTable th,
.casino-maintenance .quoteTable td {
padding: 12px 4px;
}
.casino-maintenance .quoteTable strong {
font-size: 10px;
}
.casino-maintenance .quoteTable small {
font-size: 8px;
}
.casino-maintenance .quoteTable tfoot th {
font-size: 9px;
}
.casino-maintenance .docHeader strong {
font-size: 17px;
}
.casino-maintenance .miniFlow {
gap: 5px;
font-size: 9px;
}
.casino-maintenance .miniFlow span {
padding: 6px;
}
.casino-maintenance .rowCopy strong {
font-size: 10px;
}
.casino-maintenance .rowCopy small {
font-size: 8px;
}
.casino-maintenance .statusPill {
font-size: 7px;
padding: 5px;
}
.casino-maintenance .miniStats {
gap: 7px;
}
.casino-maintenance .miniStats>div {
padding: 9px;
}
.casino-maintenance .miniStats strong {
font-size: 18px;
}
.casino-maintenance .miniStats span {
font-size: 8px;
}
.casino-maintenance .collectionStats>div {
padding: 13px;
}
.casino-maintenance .collectionStats strong {
font-size: 24px;
}
.casino-maintenance .customerHeader strong {
font-size: 17px;
}
.casino-maintenance .customerFacts>div {
padding: 10px;
}
.casino-maintenance .customerFacts strong {
font-size: 12px;
}
.casino-maintenance .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.casino-maintenance .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.casino-maintenance .ratingItem:last-child {
grid-column: 1/-1;
}
.casino-maintenance .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.casino-maintenance .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.casino-maintenance .integration small {
font-size: 9px;
}
.casino-maintenance .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.casino-maintenance .ctaPanel p {
font-size: 15px;
}
.casino-maintenance .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.casino-maintenance .footerInner {
align-items: flex-start;
flex-direction: column;
}
.casino-maintenance .contextSection {
padding: 0 0 24px;
}
.casino-maintenance .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.casino-maintenance .wrap {
width: calc(100% - 24px);
}
.casino-maintenance .brand {
font-size: 18px;
}
.casino-maintenance .brandMark {
width: 25px;
height: 25px;
}
.casino-maintenance .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.casino-maintenance .hero h1 {
font-size: 38px;
}
.casino-maintenance .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.casino-maintenance .copy h2 {
font-size: 31px;
}
.casino-maintenance .mobileWorkspace {
grid-template-columns: 1fr;
}
.casino-maintenance .phoneDevice {
width: 210px;
}
.casino-maintenance .phoneDevice .rowIcon {
display: grid;
}
.casino-maintenance .mobileSide {
gap: 8px;
}
.casino-maintenance .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.casino-maintenance .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.casino-maintenance .sideTile p {
margin: 0;
}
.casino-maintenance .miniFlow span {
padding: 5px;
font-size: 8px;
}
.casino-maintenance .collectionStats strong {
font-size: 21px;
}
.casino-maintenance .inventoryIntro strong {
font-size: 14px;
}
.casino-maintenance .dataRow {
gap: 7px;
}
.casino-maintenance .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.casino-maintenance .inlineCtaActions {
flex-direction: column;
}
}
.casino-maintenance .hero .eyebrow {
max-width: 100%;
}
.casino-maintenance .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.casino-maintenance .ganttIllustration,
.casino-maintenance .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.casino-maintenance .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.casino-maintenance .costIllustration {
aspect-ratio: 484/226;
}
.casino-maintenance .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.casino-maintenance .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.casino-maintenance .comparisonTable thead {
background: var(--black);
color: #fff;
}
.casino-maintenance .comparisonTable thead th:last-child {
color: var(--yellow);
}
.casino-maintenance .comparisonTable th,
.casino-maintenance .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.casino-maintenance .comparisonTable th:first-child {
width: 23%;
}
.casino-maintenance .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.casino-maintenance .comparisonTable tbody td {
color: var(--muted);
}
.casino-maintenance .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.casino-maintenance .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.casino-maintenance .card,
.casino-maintenance .proofCard,
.casino-maintenance .productPanel,
.casino-maintenance .outcome,
.casino-maintenance .benefit {
box-shadow: none;
}
.casino-maintenance .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.casino-maintenance .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.casino-maintenance .hero .eyebrow {
font-size: 10px;
}
.casino-maintenance .comparisonTable {
font-size: 11px;
}
.casino-maintenance .comparisonTable th,
.casino-maintenance .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.casino-maintenance .comparisonTable th:first-child {
width: 24%;
}
.casino-maintenance .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.casino-maintenance .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.casino-maintenance .hero h1 {
font-size: 38px;
}
}
.casino-maintenance .scheduleIllustration,
.casino-maintenance .analyticsIllustration,
.casino-maintenance .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.casino-maintenance .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.casino-maintenance .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.casino-maintenance .conditionIllustration {
aspect-ratio: 484 / 178;
}
.casino-maintenance .miniStats strong {
font-variant-numeric: tabular-nums;
}
.casino-maintenance .quoteTable td:last-child {
white-space: nowrap;
}
.casino-maintenance .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.casino-maintenance .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.casino-maintenance .darkSection .textCta {
color: var(--yellow);
}
.casino-maintenance .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.casino-maintenance .secondaryLinks .textCta {
font-size: 12px;
}
.casino-maintenance .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.casino-maintenance .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.casino-maintenance .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.casino-maintenance .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.casino-maintenance .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.casino-maintenance .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
.casino-maintenance .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.casino-maintenance .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.casino-maintenance .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.casino-maintenance .returnFlag .icon {
flex: 0 0 24px;
}
.casino-maintenance .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.casino-maintenance .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.casino-maintenance .phoneDevice {
max-width: 100%;
}
.casino-maintenance .heroPills {
line-height: 1.55;
}
.casino-maintenance .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.casino-maintenance .plantFacts {
gap: 7px;
}
.casino-maintenance .plantFacts>div {
padding: 9px;
}
.casino-maintenance .plantFacts strong {
font-size: 11px;
}
.casino-maintenance .scanSummary {
padding: 12px;
}
.casino-maintenance .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.casino-maintenance .mobileWorkspace {
grid-template-columns: 1fr;
}
.casino-maintenance .phoneDevice {
width: 224px;
margin: auto;
}
.casino-maintenance .phoneDevice .rowIcon {
display: grid;
}
.casino-maintenance .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.casino-maintenance .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.casino-maintenance .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.casino-maintenance .sideTile strong {
font-size: 12px;
}
.casino-maintenance .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.casino-maintenance .topbar,
.casino-maintenance .heroActions,
.casino-maintenance .finalActions,
.casino-maintenance .contextSection,
.casino-maintenance .valueCtaSection {
display: none;
}
.casino-maintenance section {
break-inside: avoid;
padding: 28px 0;
}
.casino-maintenance .hero {
padding-top: 20px;
}
}
.casino-maintenance .heroAccent {
color: var(--black);
}
.casino-maintenance .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.casino-maintenance .heroActions {
gap: 10px;
margin-top: 24px;
}
.casino-maintenance .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.casino-maintenance .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.casino-maintenance .microcopy {
margin-top: 14px;
}
.casino-maintenance .heroPills {
margin-top: 13px;
}
.casino-maintenance .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.casino-maintenance .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.casino-maintenance .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.casino-maintenance .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.casino-maintenance .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.casino-maintenance .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.casino-maintenance .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.casino-maintenance .clientBand {
padding: 24px 0;
}
.casino-maintenance .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.casino-maintenance .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.casino-maintenance .logoBox.wide {
font-size: 15px;
}
.casino-maintenance .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.casino-maintenance .sectionHead p {
margin: 17px 0 0;
}
.casino-maintenance .copy p {
margin: 16px 0 0;
}
.casino-maintenance .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.casino-maintenance .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.casino-maintenance .aiJourney {
background: var(--black);
}
.casino-maintenance .aiStep {
min-height: 157px;
border-color: #353535;
}
.casino-maintenance .productPanel {
border-radius: 18px;
}
.casino-maintenance .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.casino-maintenance .panelHead>strong {
font-size: 13px;
}
.casino-maintenance .sampleTag {
font-size: 9px;
}
.casino-maintenance .panelBody {
padding: 21px;
}
.casino-maintenance .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.casino-maintenance .docHeader {
padding-bottom: 16px;
}
.casino-maintenance .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.casino-maintenance .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.casino-maintenance .smallLabel {
font-size: 9px;
}
.casino-maintenance .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.casino-maintenance .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.casino-maintenance .dataRow {
padding: 14px 0;
}
.casino-maintenance .statusPill {
font-size: 8px;
}
.casino-maintenance .miniStats {
gap: 10px;
margin: 18px 0;
}
.casino-maintenance .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.casino-maintenance .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.casino-maintenance .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.casino-maintenance .contextNote {
font-size: 11px;
margin-top: 16px;
}
.casino-maintenance .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.casino-maintenance .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.casino-maintenance .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.casino-maintenance .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.casino-maintenance .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.casino-maintenance .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.casino-maintenance .hierarchy strong {
color: var(--navy);
}
.casino-maintenance .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.casino-maintenance .conditionIllustration {
aspect-ratio: 484/201;
}
.casino-maintenance .analyticsIllustration {
aspect-ratio: 484/206;
}
.casino-maintenance .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.casino-maintenance .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.casino-maintenance .phoneDevice .rowCopy strong {
font-size: 10px;
}
.casino-maintenance .phoneDevice .rowCopy small {
font-size: 9px;
}
.casino-maintenance .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.casino-maintenance .mobileAccount small {
font-size: 9px;
}
.casino-maintenance .sideTile {
background: var(--sky-2);
padding: 14px;
}
.casino-maintenance .sideTile strong {
font-size: 12px;
}
.casino-maintenance .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.casino-maintenance .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.casino-maintenance .mobileAction {
font-size: 9px;
}
.casino-maintenance .journeyRow strong {
font-size: 13px;
}
.casino-maintenance .journeyRow small {
font-size: 11px;
}
.casino-maintenance .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.casino-maintenance .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.casino-maintenance .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.casino-maintenance .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.casino-maintenance .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.casino-maintenance .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.casino-maintenance .utilityReadout small {
font-size: 12px;
}
.casino-maintenance .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.casino-maintenance .darkSection {
background: var(--black);
}
.casino-maintenance .darkSection .panelHead {
background: var(--black-soft);
}
.casino-maintenance .darkSection .productPanel {
background: var(--black-soft);
}
.casino-maintenance .darkSection .copy .featureNote {
color: #CFCFCF;
}
.casino-maintenance .darkSection .rowCopy strong {
color: #FFFFFF;
}
.casino-maintenance .darkSection .rowCopy small {
color: #CFCFCF;
}
.casino-maintenance .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.casino-maintenance .assistantHead small {
font-size: 11px;
}
.casino-maintenance .assistantNote {
font-size: 11px;
}
.casino-maintenance .reportTags span {
font-size: 10px;
}
.casino-maintenance .card p {
margin: 12px 0 0;
}
.casino-maintenance .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.casino-maintenance .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.casino-maintenance .cards>.card {
display: flex;
flex-direction: column;
}
.casino-maintenance .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.casino-maintenance .cards>.card p {
padding-bottom: 22px;
}
.casino-maintenance .benefitBand {
background: var(--black);
}
.casino-maintenance .benefit {
background: var(--black-soft);
}
.casino-maintenance .inlineCta h3 {
font-size: 20px;
}
.casino-maintenance .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.casino-maintenance .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.casino-maintenance .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.casino-maintenance .valueCtaSection {
padding: 32px 0;
}
.casino-maintenance .proofCard p {
margin-top: 15px;
}
.casino-maintenance .proofCard h3 {
font-size: 23px;
}
.casino-maintenance .integrationNote {
margin-top: 23px;
}
.casino-maintenance .ctaPanel {
background: var(--black);
}
.casino-maintenance .ctaPanel p {
margin-top: 16px;
}
.casino-maintenance .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.casino-maintenance .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.casino-maintenance a:hover {
text-decoration: none;
}
.casino-maintenance .textCta:hover {
color: var(--navy);
}
.casino-maintenance .darkSection .textCta:hover {
color: #FFFFFF;
}
.casino-maintenance .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.casino-maintenance .hero h1 {
font-size: 49px;
}
.casino-maintenance .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.casino-maintenance .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.casino-maintenance .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.casino-maintenance .hero h1 {
font-size: 58px;
}
.casino-maintenance .heroVisual {
max-width: 548px;
}
.casino-maintenance .hero .lead {
max-width: 700px;
}
.casino-maintenance .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.casino-maintenance .logoBox {
font-size: 18px;
border: 0 !important;
}
.casino-maintenance .logoBox:last-child {
grid-column: auto;
}
.casino-maintenance .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.casino-maintenance .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.casino-maintenance .inlineCtaActions .button {
flex: 1;
}
.casino-maintenance .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.casino-maintenance section {
padding: 55px 0;
}
.casino-maintenance .hero {
padding: 28px 0 40px;
}
.casino-maintenance .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.casino-maintenance .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.casino-maintenance .heroActions {
gap: 10px;
}
.casino-maintenance .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.casino-maintenance .breadcrumb {
margin-bottom: 21px;
}
.casino-maintenance .hero .eyebrow {
font-size: 11px;
}
.casino-maintenance .heroVisual {
max-width: 480px;
}
.casino-maintenance .heroPills {
row-gap: 9px;
}
.casino-maintenance .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.casino-maintenance .heroPills span+span {
padding-left: 7px;
}
.casino-maintenance .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.casino-maintenance .logoBox:last-child {
grid-column: 1/-1;
}
.casino-maintenance .clientBand {
padding: 25px 0;
}
.casino-maintenance .copy h2 {
font-size: 33px;
}
.casino-maintenance .panelBody {
padding: 16px;
}
.casino-maintenance .panelHead {
padding: 15px;
}
.casino-maintenance .panelHead>strong {
font-size: 12px;
}
.casino-maintenance .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.casino-maintenance .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.casino-maintenance .docHeader strong {
font-size: 18px;
}
.casino-maintenance .docHeader small {
font-size: 10px;
}
.casino-maintenance .rowCopy strong {
font-size: 11px;
}
.casino-maintenance .rowCopy small {
font-size: 10px;
}
.casino-maintenance .miniStats {
gap: 7px;
}
.casino-maintenance .miniStats strong {
font-size: 21px;
}
.casino-maintenance .miniStats span {
font-size: 9px;
}
.casino-maintenance .miniStats>div {
padding: 10px 8px;
}
.casino-maintenance .plantFacts {
gap: 8px;
}
.casino-maintenance .plantFacts>div {
padding: 10px;
}
.casino-maintenance .plantFacts strong {
font-size: 11px;
}
.casino-maintenance .contextNote {
font-size: 10px;
gap: 8px;
}
.casino-maintenance .utilityReadout {
padding: 12px;
gap: 10px;
}
.casino-maintenance .utilityReadout span {
font-size: 8px;
}
.casino-maintenance .utilityReadout strong {
font-size: 24px;
}
.casino-maintenance .utilityReadout .utilityScope {
font-size: 14px;
}
.casino-maintenance .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.casino-maintenance .comparisonTable {
font-size: 11px;
}
.casino-maintenance .comparisonTable th,
.casino-maintenance .comparisonTable td {
padding: 13px 9px;
}
.casino-maintenance .contextSection {
padding: 0 0 22px;
}
.casino-maintenance .valueCtaSection {
padding: 25px 0;
}
.casino-maintenance .inlineCtaActions {
flex-direction: column;
}
.casino-maintenance .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.casino-maintenance .mobileWorkspace {
grid-template-columns: 1fr;
}
.casino-maintenance .phoneDevice {
width: 222px;
}
.casino-maintenance .phoneDevice .rowIcon {
display: grid;
}
.casino-maintenance .mobileSide {
grid-template-columns: 1fr;
}
.casino-maintenance .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.casino-maintenance .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
.casino-maintenance .sideTile p {
margin: 0;
}
.casino-maintenance .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.casino-maintenance .dataRow {
gap: 8px;
}
.casino-maintenance .statusPill {
font-size: 7px;
padding: 5px;
}
.casino-maintenance .miniStats strong {
font-size: 19px;
}
.casino-maintenance .heroActions {
flex-direction: column;
align-items: stretch;
}
.casino-maintenance .heroActions .button {
width: 100%;
}
.casino-maintenance .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.casino-maintenance .aiFlow {
grid-template-columns: 1fr;
}
.casino-maintenance .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.casino-maintenance .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.casino-maintenance .aiStep strong {
margin: 0;
font-size: 15px;
}
.casino-maintenance .aiStep span {
font-size: 13px;
}
.casino-maintenance .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.casino-maintenance .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.casino-maintenance .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.casino-maintenance .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.casino-maintenance .navlinks {
gap: 20px;
font-size: 12px;
}
.casino-maintenance .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.casino-maintenance .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.casino-maintenance .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.casino-maintenance .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.casino-maintenance .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.casino-maintenance .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.casino-maintenance .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.casino-maintenance .industryIntro {
padding: 78px 0 66px;
}
.casino-maintenance .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.casino-maintenance .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.casino-maintenance .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.casino-maintenance .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.casino-maintenance .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.casino-maintenance .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.casino-maintenance .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.casino-maintenance .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.casino-maintenance .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.casino-maintenance .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.casino-maintenance .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.casino-maintenance .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.casino-maintenance .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.casino-maintenance .industryPriority:hover {
border-color: var(--brand-dark);
}
.casino-maintenance .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.casino-maintenance .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.casino-maintenance .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.casino-maintenance .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.casino-maintenance .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.casino-maintenance .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.casino-maintenance .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.casino-maintenance .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.casino-maintenance .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.casino-maintenance .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.casino-maintenance .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.casino-maintenance .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.casino-maintenance .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.casino-maintenance .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.casino-maintenance .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.casino-maintenance .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.casino-maintenance .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.casino-maintenance .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.casino-maintenance .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.casino-maintenance .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.casino-maintenance .vedaMessage.assistant>small {
color: var(--yellow);
}
.casino-maintenance .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.casino-maintenance .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.casino-maintenance .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.casino-maintenance .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.casino-maintenance .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.casino-maintenance .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.casino-maintenance .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.casino-maintenance .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.casino-maintenance .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.casino-maintenance .manufacturingSpotlight {
padding: 73px 0;
}
.casino-maintenance .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.casino-maintenance .rfidSpotlight {
background: #fff;
}
.casino-maintenance .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.casino-maintenance .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.casino-maintenance .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.casino-maintenance .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.casino-maintenance .spotlightHead h2 span {
color: var(--brand-dark);
}
.casino-maintenance .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.casino-maintenance .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.casino-maintenance .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.casino-maintenance .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.casino-maintenance .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.casino-maintenance .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.casino-maintenance .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.casino-maintenance .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.casino-maintenance .featureTab:hover {
border-color: var(--brand-dark);
}
.casino-maintenance .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.casino-maintenance .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.casino-maintenance .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.casino-maintenance .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.casino-maintenance .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.casino-maintenance .featurePanel {
display: none;
}
.casino-maintenance .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.casino-maintenance .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.casino-maintenance .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.casino-maintenance .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.casino-maintenance .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.casino-maintenance .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.casino-maintenance .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.casino-maintenance .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.casino-maintenance .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.casino-maintenance .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.casino-maintenance .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.casino-maintenance .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.casino-maintenance .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
.casino-maintenance .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.casino-maintenance .decisionSpotlight .textCta {
color: var(--yellow);
}
.casino-maintenance .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.casino-maintenance .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.casino-maintenance .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.casino-maintenance .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.casino-maintenance .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.casino-maintenance .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.casino-maintenance .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.casino-maintenance .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.casino-maintenance .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.casino-maintenance .rfidImageSurface {
background: #172029;
padding: 5px;
}
.casino-maintenance .rfidImageSurface img {
width: 100%;
height: auto;
}
.casino-maintenance .rfidMedia figcaption {
padding-top: 13px;
}
.casino-maintenance .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.casino-maintenance .aiReviewBody {
padding: 18px;
}
.casino-maintenance .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.casino-maintenance .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.casino-maintenance .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.casino-maintenance .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.casino-maintenance .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.casino-maintenance .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.casino-maintenance .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.casino-maintenance .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.casino-maintenance .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.casino-maintenance .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.casino-maintenance .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.casino-maintenance .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.casino-maintenance .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.casino-maintenance .aiReviewAction strong {
display: block;
font-size: 11px;
}
.casino-maintenance .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.casino-maintenance .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.casino-maintenance .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.casino-maintenance .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.casino-maintenance .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.casino-maintenance .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.casino-maintenance .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.casino-maintenance .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.casino-maintenance .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.casino-maintenance .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.casino-maintenance .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.casino-maintenance .workflowDetails summary::-webkit-details-marker {
display: none;
}
.casino-maintenance .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.casino-maintenance .workflowDetails[open] summary::after {
content: "−";
}
.casino-maintenance .workflowDetails .featureList,
.casino-maintenance .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.casino-maintenance .workflowDetails .featureItem {
font-size: 11px;
}
.casino-maintenance .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.casino-maintenance .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.casino-maintenance #casino-connected-tools {
background: #fff;
}
.casino-maintenance #casino-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.casino-maintenance .featureTab,
.casino-maintenance .industryPriority,
.casino-maintenance summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.casino-maintenance .industryIntroHead {
gap: 30px;
}
.casino-maintenance .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.casino-maintenance .featureStage {
gap: 26px;
padding: 26px;
}
.casino-maintenance .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.casino-maintenance .factoryWorkflow {
padding: 22px;
}
.casino-maintenance .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.casino-maintenance .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.casino-maintenance .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.casino-maintenance .industryPriorityGrid {
gap: 14px;
}
.casino-maintenance .industryPriority {
padding: 22px 19px;
}
.casino-maintenance .industryPriority h3 {
font-size: 21px;
}
.casino-maintenance .industryPriority p {
font-size: 12px;
}
.casino-maintenance .priorityLink {
font-size: 10px;
}
.casino-maintenance .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.casino-maintenance .vedaIndustryCopy h2 {
font-size: 39px;
}
.casino-maintenance .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.casino-maintenance .vedaUseCases>div {
display: block;
}
.casino-maintenance .vedaUseCases .icon {
margin: 0 0 10px;
}
.casino-maintenance .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.casino-maintenance .featureTabs {
gap: 8px;
}
.casino-maintenance .featureTab {
min-height: 108px;
}
.casino-maintenance .featureStage,
.casino-maintenance .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.casino-maintenance .rfidSpotlight .spotlightMedia,
.casino-maintenance .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.casino-maintenance .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.casino-maintenance .featurePanel {
min-height: 0;
}
.casino-maintenance .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.casino-maintenance .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.casino-maintenance .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.casino-maintenance .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.casino-maintenance .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.casino-maintenance .clientBand {
padding: 22px 0;
}
.casino-maintenance .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.casino-maintenance .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.casino-maintenance .clientBand .logoBox.wide {
font-size: 10px;
}
.casino-maintenance .clientBand .logoBox:last-child {
grid-column: auto;
}
.casino-maintenance .industryIntro {
padding: 53px 0;
}
.casino-maintenance .industryIntroHead h2 {
font-size: 32px;
}
.casino-maintenance .industryIntroHead>p {
font-size: 14px;
}
.casino-maintenance .industryPriorityGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .industryPriority {
padding: 23px;
}
.casino-maintenance .industryPriority h3 {
font-size: 24px;
}
.casino-maintenance .industryPriority>.icon {
margin: 5px 0 15px;
}
.casino-maintenance .industryPriority p {
font-size: 13px;
}
.casino-maintenance .priorityLink {
font-size: 11px;
}
.casino-maintenance .vedaIndustry {
padding: 0 0 52px;
}
.casino-maintenance .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.casino-maintenance .vedaIndustryCopy h2 {
font-size: 32px;
}
.casino-maintenance .vedaIndustryCopy>p {
font-size: 14px;
}
.casino-maintenance .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.casino-maintenance .vedaUseCases>div {
display: flex;
}
.casino-maintenance .vedaConversationHead {
padding: 16px 13px;
}
.casino-maintenance .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.casino-maintenance .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.casino-maintenance .vedaMessage.user {
margin-left: 25px;
}
.casino-maintenance .vedaMessage.assistant {
margin-right: 14px;
}
.casino-maintenance .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.casino-maintenance .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.casino-maintenance .manufacturingSpotlight {
padding: 54px 0;
}
.casino-maintenance .spotlightHead h2 {
font-size: 32px;
}
.casino-maintenance .spotlightHead>p {
font-size: 14px;
}
.casino-maintenance .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.casino-maintenance .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.casino-maintenance .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.casino-maintenance .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.casino-maintenance .featurePanel h3 {
font-size: 24px;
}
.casino-maintenance .featurePanel>p {
font-size: 13px;
}
.casino-maintenance .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.casino-maintenance .spotlightChecks>li {
font-size: 12px;
}
.casino-maintenance .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.casino-maintenance .spotlightActions .button {
width: 100%;
}
.casino-maintenance .spotlightScope {
font-size: 10px;
}
.casino-maintenance .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.casino-maintenance .mediaTitle strong {
font-size: 11px;
}
.casino-maintenance .mediaTitle div>span {
font-size: 8px;
}
.casino-maintenance .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.casino-maintenance .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.casino-maintenance .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.casino-maintenance .rfidMedia figcaption {
padding-top: 12px;
}
.casino-maintenance .aiReviewBody {
padding: 13px;
}
.casino-maintenance .aiIssue {
padding: 13px;
}
.casino-maintenance .aiIssue strong {
font-size: 14px;
}
.casino-maintenance .aiEvidence {
gap: 6px;
}
.casino-maintenance .aiEvidence>div {
padding: 10px 7px;
}
.casino-maintenance .aiEvidence strong {
font-size: 9px;
}
.casino-maintenance .aiEvidence span {
font-size: 7px;
}
.casino-maintenance .exampleLabel {
font-size: 6px;
}
.casino-maintenance .factoryWorkflows {
padding: 55px 0;
}
.casino-maintenance .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.casino-maintenance .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.casino-maintenance .industryRibbonGrid {
gap: 12px;
}
.casino-maintenance .industryRibbonGrid>div {
font-size: 10px;
}
.casino-maintenance .spotlightHead h2 {
font-size: 29px;
}
.casino-maintenance .featureStage {
padding: 19px 13px;
}
.casino-maintenance .mediaTitle>.icon {
display: none;
}
.casino-maintenance .exampleLabel {
display: none;
}
.casino-maintenance .vedaBrand {
font-size: 27px;
}
}
@media print {
.casino-maintenance .featureTabs {
display: none;
}
.casino-maintenance .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.casino-maintenance .featureStage {
display: block;
}
.casino-maintenance .featurePanel {
color: #000;
}
}
.casino-maintenance #casino-maintenance-features-1:checked~.featureTabs label[for="casino-maintenance-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-maintenance-features-1:focus-visible~.featureTabs label[for="casino-maintenance-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-maintenance-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.casino-maintenance #casino-maintenance-features-2:checked~.featureTabs label[for="casino-maintenance-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-maintenance-features-2:focus-visible~.featureTabs label[for="casino-maintenance-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-maintenance-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.casino-maintenance #casino-maintenance-features-3:checked~.featureTabs label[for="casino-maintenance-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-maintenance-features-3:focus-visible~.featureTabs label[for="casino-maintenance-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-maintenance-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.casino-maintenance #casino-maintenance-features-4:checked~.featureTabs label[for="casino-maintenance-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-maintenance-features-4:focus-visible~.featureTabs label[for="casino-maintenance-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-maintenance-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.casino-maintenance #casino-maintenance-features-5:checked~.featureTabs label[for="casino-maintenance-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-maintenance-features-5:focus-visible~.featureTabs label[for="casino-maintenance-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-maintenance-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.casino-maintenance #casino-rfid-features-1:checked~.featureTabs label[for="casino-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-rfid-features-1:focus-visible~.featureTabs label[for="casino-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.casino-maintenance #casino-rfid-features-2:checked~.featureTabs label[for="casino-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-rfid-features-2:focus-visible~.featureTabs label[for="casino-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.casino-maintenance #casino-rfid-features-3:checked~.featureTabs label[for="casino-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-rfid-features-3:focus-visible~.featureTabs label[for="casino-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.casino-maintenance #casino-rfid-features-4:checked~.featureTabs label[for="casino-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-rfid-features-4:focus-visible~.featureTabs label[for="casino-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.casino-maintenance #casino-rfid-features-5:checked~.featureTabs label[for="casino-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-rfid-features-5:focus-visible~.featureTabs label[for="casino-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-1:checked~.featureTabs label[for="casino-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-ai-decisions-features-1:focus-visible~.featureTabs label[for="casino-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-2:checked~.featureTabs label[for="casino-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-ai-decisions-features-2:focus-visible~.featureTabs label[for="casino-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-3:checked~.featureTabs label[for="casino-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-ai-decisions-features-3:focus-visible~.featureTabs label[for="casino-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-4:checked~.featureTabs label[for="casino-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-ai-decisions-features-4:focus-visible~.featureTabs label[for="casino-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-5:checked~.featureTabs label[for="casino-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.casino-maintenance #casino-ai-decisions-features-5:focus-visible~.featureTabs label[for="casino-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.casino-maintenance #casino-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.casino-maintenance .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .featureMediaPanels {
min-width: 0;
}
.casino-maintenance .featureMediaPanels .miniChart {
height: 178px;
}
.casino-maintenance .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.casino-maintenance .featureMediaPanels .windowTop strong,
.casino-maintenance .featureMediaPanels .windowTop small {
display: block;
}
.casino-maintenance .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.casino-maintenance .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.casino-maintenance .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.casino-maintenance .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.casino-maintenance .featureMediaPanels .windowBody>*,
.casino-maintenance .featureMediaPanels .spectrumGrid>*,
.casino-maintenance .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.casino-maintenance .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.casino-maintenance .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.casino-maintenance .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.casino-maintenance .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.casino-maintenance .featureMediaPanels .graphNodes {
min-height: 258px;
}
.casino-maintenance .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.casino-maintenance .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.casino-maintenance .featureMediaPanels .mapPin {
box-shadow: none;
}
.casino-maintenance .pin2 {
top: 88px;
right: 88px;
}
.casino-maintenance .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.casino-maintenance .featureMediaPanels .mediaShell {
padding: 10px;
}
.casino-maintenance .featureMediaPanels .windowBody {
padding: 10px;
}
.casino-maintenance .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .featureMediaPanels .alertBadge {
justify-self: start;
}
.casino-maintenance .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.casino-maintenance .featureMediaPanels .graphNodes .node.n1,
.casino-maintenance .featureMediaPanels .graphNodes .node.n2,
.casino-maintenance .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.casino-maintenance .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.casino-maintenance .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.casino-maintenance .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.casino-maintenance .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.casino-maintenance .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.casino-maintenance .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.casino-maintenance .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.casino-maintenance .freshGraphic * {
box-sizing: border-box;
}
.casino-maintenance .rfPanel,
.casino-maintenance .aiInsightCard,
.casino-maintenance .forecastVisualCard,
.casino-maintenance .forecastSuggestion,
.casino-maintenance .knowledgeTile,
.casino-maintenance .chatConversation,
.casino-maintenance .trainingSummary,
.casino-maintenance .moduleCard,
.casino-maintenance .qualityHeatCard,
.casino-maintenance .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.casino-maintenance .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.casino-maintenance .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.casino-maintenance .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.casino-maintenance .statusPill,
.casino-maintenance .cardTag,
.casino-maintenance .forecastSuggestion b,
.casino-maintenance .moduleCard b,
.casino-maintenance .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.casino-maintenance .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.casino-maintenance .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.casino-maintenance .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.casino-maintenance .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.casino-maintenance .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.casino-maintenance .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.casino-maintenance .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.casino-maintenance .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.casino-maintenance .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.casino-maintenance .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.casino-maintenance .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.casino-maintenance .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.casino-maintenance .dot.good {
background: #298EEC;
}
.casino-maintenance .dot.warn {
background: #F4A62A;
}
.casino-maintenance .dot.bad {
background: #EB6B53;
}
.casino-maintenance .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.casino-maintenance .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.casino-maintenance .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.casino-maintenance .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.casino-maintenance .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.casino-maintenance .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.casino-maintenance .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.casino-maintenance .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.casino-maintenance .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.casino-maintenance .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.casino-maintenance .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.casino-maintenance .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.casino-maintenance .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.casino-maintenance .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.casino-maintenance .moveRow b {
color: #298EEC;
font-size: 9px;
}
.casino-maintenance .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.casino-maintenance .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.casino-maintenance .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.casino-maintenance .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.casino-maintenance .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.casino-maintenance .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.casino-maintenance .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.casino-maintenance .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.casino-maintenance .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.casino-maintenance .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.casino-maintenance .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.casino-maintenance .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.casino-maintenance .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.casino-maintenance .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.casino-maintenance .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.casino-maintenance .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.casino-maintenance .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.casino-maintenance .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.casino-maintenance .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.casino-maintenance .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.casino-maintenance .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.casino-maintenance .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.casino-maintenance .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.casino-maintenance .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.casino-maintenance .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.casino-maintenance .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.casino-maintenance .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.casino-maintenance .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.casino-maintenance .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.casino-maintenance .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.casino-maintenance .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.casino-maintenance .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.casino-maintenance .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.casino-maintenance .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.casino-maintenance .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.casino-maintenance .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.casino-maintenance .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.casino-maintenance .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.casino-maintenance .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.casino-maintenance .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.casino-maintenance .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.casino-maintenance .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.casino-maintenance .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.casino-maintenance .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.casino-maintenance .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.casino-maintenance .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.casino-maintenance .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.casino-maintenance .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.casino-maintenance .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.casino-maintenance .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.casino-maintenance .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.casino-maintenance .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.casino-maintenance .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.casino-maintenance .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.casino-maintenance .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.casino-maintenance .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.casino-maintenance .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.casino-maintenance .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.casino-maintenance .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.casino-maintenance .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.casino-maintenance .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.casino-maintenance .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.casino-maintenance .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.casino-maintenance .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.casino-maintenance .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.casino-maintenance .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.casino-maintenance .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.casino-maintenance .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.casino-maintenance .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.casino-maintenance .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.casino-maintenance .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.casino-maintenance .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.casino-maintenance .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.casino-maintenance .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.casino-maintenance .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.casino-maintenance .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.casino-maintenance .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.casino-maintenance .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.casino-maintenance .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.casino-maintenance .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.casino-maintenance .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.casino-maintenance .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.casino-maintenance .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.casino-maintenance .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.casino-maintenance .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.casino-maintenance .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.casino-maintenance .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.casino-maintenance .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.casino-maintenance .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.casino-maintenance .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.casino-maintenance .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.casino-maintenance .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.casino-maintenance .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.casino-maintenance .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.casino-maintenance .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.casino-maintenance .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.casino-maintenance .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.casino-maintenance .chartLegend .sw.blue {
background: #298EEC;
}
.casino-maintenance .chartLegend .sw.amber {
background: #F4A62A;
}
.casino-maintenance .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.casino-maintenance .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.casino-maintenance .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.casino-maintenance .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.casino-maintenance .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.casino-maintenance .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.casino-maintenance .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.casino-maintenance .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.casino-maintenance .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.casino-maintenance .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.casino-maintenance .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.casino-maintenance .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.casino-maintenance .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.casino-maintenance .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.casino-maintenance .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.casino-maintenance .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.casino-maintenance .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.casino-maintenance .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.casino-maintenance .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.casino-maintenance .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.casino-maintenance .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.casino-maintenance .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.casino-maintenance .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.casino-maintenance .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.casino-maintenance .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.casino-maintenance .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.casino-maintenance .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.casino-maintenance .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.casino-maintenance .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.casino-maintenance .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.casino-maintenance .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.casino-maintenance .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.casino-maintenance .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.casino-maintenance .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.casino-maintenance .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.casino-maintenance .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.casino-maintenance .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.casino-maintenance .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.casino-maintenance .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.casino-maintenance .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.casino-maintenance .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.casino-maintenance .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.casino-maintenance .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.casino-maintenance .freshGraphic {
height: auto;
min-height: 420px;
}
.casino-maintenance .rfTrackLayout,
.casino-maintenance .rfFlowLayout,
.casino-maintenance .rfAlertGrid,
.casino-maintenance .rfCycleLayout,
.casino-maintenance .rfSitesLayout,
.casino-maintenance .aiRootLayout,
.casino-maintenance .aiForecastLayout,
.casino-maintenance .aiChatLayout,
.casino-maintenance .aiTrainingLayout,
.casino-maintenance .aiQualityLayout,
.casino-maintenance .trainingModuleGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.casino-maintenance .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.casino-maintenance .rfAlertGrid {
grid-template-columns: 1fr;
}
.casino-maintenance .qualityHeatGrid span {
min-height: 40px;
}
.casino-maintenance .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.casino-maintenance .aiLink {
display: none;
}
}
.casino-maintenance .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.casino-maintenance .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.casino-maintenance .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.casino-maintenance .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.casino-maintenance .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.casino-maintenance .mfgHeroBreadcrumb a {
color: inherit;
}
.casino-maintenance .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.casino-maintenance .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.casino-maintenance .mfgHero h1 {
color: #fff;
}
.casino-maintenance .mfgHero h1>span {
display: block;
}
.casino-maintenance .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.casino-maintenance .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.casino-maintenance .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.casino-maintenance .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.casino-maintenance .mfgHeroActions .outline:hover {
background: #172029;
}
.casino-maintenance .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.casino-maintenance .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.casino-maintenance .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.casino-maintenance .mfgHeroContent {
min-height: 610px;
}
.casino-maintenance .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.casino-maintenance .mfgHeroLead {
font-size: 16px;
}
.casino-maintenance .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.casino-maintenance .mfgHero {
display: flex;
flex-direction: column;
}
.casino-maintenance .mfgHeroContent {
order: 0;
min-height: 0;
}
.casino-maintenance .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.casino-maintenance .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.casino-maintenance .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.casino-maintenance .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.casino-maintenance .mfgHeroCopy {
padding: 25px 0 20px;
}
.casino-maintenance .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.casino-maintenance .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.casino-maintenance .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.casino-maintenance .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.casino-maintenance .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.casino-maintenance .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.casino-maintenance .mfgHeroScene {
height: 280px;
}
}
@media print {
.casino-maintenance .mfgHero {
background: #fff;
color: #000;
}
.casino-maintenance .mfgHeroScene,
.casino-maintenance .mfgHeroActions {
display: none;
}
.casino-maintenance .mfgHeroContent {
min-height: 0;
}
.casino-maintenance .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
.casino-maintenance #casino-rfid .featureStage,
.casino-maintenance #casino-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.casino-maintenance .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.casino-maintenance .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.casino-maintenance .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.casino-maintenance .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.casino-maintenance .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.casino-maintenance .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.casino-maintenance .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.casino-maintenance .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.casino-maintenance .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.casino-maintenance .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.casino-maintenance .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.casino-maintenance .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.casino-maintenance .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.casino-maintenance .mfgGallery .rfPanel {
border-radius: 12px;
}
.casino-maintenance .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.casino-maintenance .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.casino-maintenance .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.casino-maintenance .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.casino-maintenance .mfgGallery .shelf span {
font-size: 11px;
}
.casino-maintenance .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.casino-maintenance .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.casino-maintenance .mfgGallery .rfKpiGrid {
gap: 8px;
}
.casino-maintenance .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.casino-maintenance .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.casino-maintenance .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.casino-maintenance .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.casino-maintenance .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.casino-maintenance .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.casino-maintenance .mfgGallery .rfScanCard span {
font-size: 9px;
}
.casino-maintenance .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.casino-maintenance .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.casino-maintenance .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.casino-maintenance .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.casino-maintenance .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.casino-maintenance .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.casino-maintenance .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.casino-maintenance .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.casino-maintenance .mfgGallery .flowArrow {
display: none;
}
.casino-maintenance .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .railItem {
padding: 9px 7px;
}
.casino-maintenance .mfgGallery .railItem b {
font-size: 10px;
}
.casino-maintenance .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.casino-maintenance .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.casino-maintenance .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.casino-maintenance .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.casino-maintenance .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.casino-maintenance .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.casino-maintenance .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .reorderCard strong {
font-size: 13px;
}
.casino-maintenance .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.casino-maintenance .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.casino-maintenance .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.casino-maintenance .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.casino-maintenance .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.casino-maintenance .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.casino-maintenance .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.casino-maintenance .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.casino-maintenance .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.casino-maintenance .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.casino-maintenance .mfgGallery .varianceCard {
padding: 12px;
}
.casino-maintenance .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.casino-maintenance .mfgGallery .varianceCard small {
font-size: 10px;
}
.casino-maintenance .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.casino-maintenance .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.casino-maintenance .mfgGallery .deviceTop {
font-size: 11px;
}
.casino-maintenance .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.casino-maintenance .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.casino-maintenance .mfgGallery .deviceMetric {
padding: 9px;
}
.casino-maintenance .mfgGallery .deviceMetric span {
font-size: 10px;
}
.casino-maintenance .mfgGallery .deviceMetric b {
font-size: 12px;
}
.casino-maintenance .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.casino-maintenance .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.casino-maintenance .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.casino-maintenance .mfgGallery .siteNode.north {
top: 6px;
}
.casino-maintenance .mfgGallery .siteNode.south {
bottom: 6px;
}
.casino-maintenance .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.casino-maintenance .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.casino-maintenance .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.casino-maintenance .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.casino-maintenance .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.casino-maintenance .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.casino-maintenance .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.casino-maintenance .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.casino-maintenance .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.casino-maintenance .mfgGallery .siteSummary strong {
font-size: 12px;
}
.casino-maintenance .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.casino-maintenance .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.casino-maintenance .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.casino-maintenance .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.casino-maintenance .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.casino-maintenance .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.casino-maintenance .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.casino-maintenance .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.casino-maintenance .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.casino-maintenance .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.casino-maintenance .mfgGallery .insightMeta {
gap: 6px;
}
.casino-maintenance .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.casino-maintenance .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .chartHeader span {
font-size: 10px;
}
.casino-maintenance .mfgGallery .chartHeader b {
font-size: 11px;
}
.casino-maintenance .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.casino-maintenance .mfgGallery .chartLegend {
font-size: 10px;
}
.casino-maintenance .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.casino-maintenance .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.casino-maintenance .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.casino-maintenance .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.casino-maintenance .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.casino-maintenance .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.casino-maintenance .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.casino-maintenance .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.casino-maintenance .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.casino-maintenance .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.casino-maintenance .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.casino-maintenance .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.casino-maintenance .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.casino-maintenance .mfgGallery .progressCenter strong {
font-size: 25px;
}
.casino-maintenance .mfgGallery .trainingStatList {
gap: 9px;
}
.casino-maintenance .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.casino-maintenance .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.casino-maintenance .mfgGallery .trainingStatList span {
font-size: 10px;
}
.casino-maintenance .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.casino-maintenance .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.casino-maintenance .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.casino-maintenance .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.casino-maintenance .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.casino-maintenance .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.casino-maintenance .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.casino-maintenance .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.casino-maintenance .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.casino-maintenance .mfgGallery .qualityCaption span {
font-size: 10px;
}
.casino-maintenance .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.casino-maintenance .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.casino-maintenance .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.casino-maintenance .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.casino-maintenance .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.casino-maintenance #casino-rfid .featureStage,
.casino-maintenance #casino-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.casino-maintenance #casino-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.casino-maintenance .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.casino-maintenance #casino-rfid .featureStage,
.casino-maintenance #casino-ai-decisions .featureStage {
padding: 16px;
}
.casino-maintenance .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.casino-maintenance .mfgGallery .freshWindow {
height: auto;
}
.casino-maintenance .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.casino-maintenance .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .freshTop strong {
font-size: 13px;
}
.casino-maintenance .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.casino-maintenance .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.casino-maintenance .mfgGallery .rfShelfPanel {
padding: 10px;
}
.casino-maintenance .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.casino-maintenance .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.casino-maintenance .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.casino-maintenance .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.casino-maintenance .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.casino-maintenance .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.casino-maintenance .mfgGallery .flowNum {
grid-row: 1/3;
}
.casino-maintenance .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.casino-maintenance .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.casino-maintenance .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.casino-maintenance .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.casino-maintenance .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.casino-maintenance .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.casino-maintenance .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.casino-maintenance .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.casino-maintenance .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.casino-maintenance .mfgGallery .rfActionStrip {
height: auto;
}
.casino-maintenance .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .countPanel {
gap: 14px;
}
.casino-maintenance .mfgGallery .handheldPanel {
padding: 15px;
}
.casino-maintenance .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.casino-maintenance .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.casino-maintenance .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.casino-maintenance .mfgGallery .siteNode.east {
right: 3%;
}
.casino-maintenance .mfgGallery .siteNode.west {
left: 3%;
}
.casino-maintenance .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.casino-maintenance .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.casino-maintenance .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.casino-maintenance .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.casino-maintenance .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.casino-maintenance .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.casino-maintenance .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.casino-maintenance .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.casino-maintenance .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.casino-maintenance .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.casino-maintenance .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.casino-maintenance .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.casino-maintenance .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.casino-maintenance .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.casino-maintenance .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.casino-maintenance .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.casino-maintenance .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.casino-maintenance .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.casino-maintenance .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.casino-maintenance .mfgGallery .moduleCard {
padding: 10px;
}
.casino-maintenance .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.casino-maintenance .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.casino-maintenance .mfgGallery .qualityAction strong {
font-size: 12px;
}
.casino-maintenance .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.casino-maintenance .mfgGallery .shelf i::after {
bottom: 0;
}
.casino-maintenance .casinoVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.casino-maintenance .casinoGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.casino-maintenance .casinoIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.casino-maintenance .casinoStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.casino-maintenance .casinoVisualGallery>.casinoGraphic {
display: none;
}
.casino-maintenance #casino-maintenance .featureStage,
.casino-maintenance #casino-rfid .featureStage,
.casino-maintenance #casino-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.casino-maintenance #casino-rfid .casinoVisualGallery {
grid-column: 1;
grid-row: 1;
}
.casino-maintenance #casino-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.casino-maintenance .factoryWorkflow {
display: flex;
flex-direction: column;
}
.casino-maintenance .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.casino-maintenance .factoryWorkflow>p {
margin-bottom: 22px;
}
.casino-maintenance .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.casino-maintenance #casino-maintenance .featureStage,
.casino-maintenance #casino-rfid .featureStage,
.casino-maintenance #casino-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.casino-maintenance #casino-rfid .casinoVisualGallery,
.casino-maintenance #casino-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.casino-maintenance .mfgHeroScene {
height: 290px;
}
.casino-maintenance #casino-maintenance .featureStage,
.casino-maintenance #casino-rfid .featureStage,
.casino-maintenance #casino-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.casino-maintenance .casinoVisualGallery {
width: 100%;
}
}
@media print {
.casino-maintenance .casinoVisualGallery>.casinoGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.casino-maintenance #casino-maintenance-features-1:checked~.featureStage .casinoVisualGallery> :nth-child(1) {
display: block;
}
.casino-maintenance #casino-maintenance-features-2:checked~.featureStage .casinoVisualGallery> :nth-child(2) {
display: block;
}
.casino-maintenance #casino-maintenance-features-3:checked~.featureStage .casinoVisualGallery> :nth-child(3) {
display: block;
}
.casino-maintenance #casino-maintenance-features-4:checked~.featureStage .casinoVisualGallery> :nth-child(4) {
display: block;
}
.casino-maintenance #casino-maintenance-features-5:checked~.featureStage .casinoVisualGallery> :nth-child(5) {
display: block;
}
.casino-maintenance #casino-rfid-features-1:checked~.featureStage .casinoVisualGallery> :nth-child(1) {
display: block;
}
.casino-maintenance #casino-rfid-features-2:checked~.featureStage .casinoVisualGallery> :nth-child(2) {
display: block;
}
.casino-maintenance #casino-rfid-features-3:checked~.featureStage .casinoVisualGallery> :nth-child(3) {
display: block;
}
.casino-maintenance #casino-rfid-features-4:checked~.featureStage .casinoVisualGallery> :nth-child(4) {
display: block;
}
.casino-maintenance #casino-rfid-features-5:checked~.featureStage .casinoVisualGallery> :nth-child(5) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-1:checked~.featureStage .casinoVisualGallery> :nth-child(1) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-2:checked~.featureStage .casinoVisualGallery> :nth-child(2) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-3:checked~.featureStage .casinoVisualGallery> :nth-child(3) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-4:checked~.featureStage .casinoVisualGallery> :nth-child(4) {
display: block;
}
.casino-maintenance #casino-ai-decisions-features-5:checked~.featureStage .casinoVisualGallery> :nth-child(5) {
display: block;
}
.casino-maintenance .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.casino-maintenance .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.casino-maintenance .casinoIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.casino-maintenance .casinoGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.casino-maintenance .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.mfgHeroScene img {
object-position: 70% 50%;
}
.mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.mfgHeroScene img {
object-position: 78% 50%;
}
.mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.casino-maintenance .mfgHeroScene img {
object-position: 72% 50%;
}
.casino-maintenance .casinoIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
.casino-maintenance .casinoGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
.casino-maintenance .casinoVisualGallery {
min-height: 0;
}
.casino-maintenance .casinoIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
.mfgHeroScene img {
object-position: 90% 50%;
}
}
.casino-maintenance .casinoIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
.casino-maintenance .casinoGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
.casino-maintenance .casinoVisualGallery {
min-height: 0;
}
.casino-maintenance .mfgHeroScene img {
object-position: 72% 50%;
}
.casino-maintenance .casinoIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.casino-maintenance .casinoGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
.casino-maintenance .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
.casino-maintenance .mfgHeroScene img {
object-position: 80% 50%;
}
}
.casino-maintenance .mfgHeroContent {
background: transparent;
}
.casino-maintenance .mfgHeroScene img {
object-position: 74% 50%;
}
.casino-maintenance .casinoIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.casino-maintenance .casinoGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.casino-maintenance .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.casino-maintenance .mfgHeroScene img {
object-position: 83% 50%;
}
}  #dreamz-restaurant .industryIntroHead.compact,
#dreamz-restaurant .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-restaurant .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-restaurant .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-restaurant .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-restaurant .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-restaurant .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-restaurant .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-restaurant .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-restaurant .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-restaurant .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-restaurant .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-restaurant .windowDots {
display: flex;
gap: 5px;
}
#dreamz-restaurant .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-restaurant .windowBody {
padding: 16px;
}
#dreamz-restaurant .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-restaurant .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-restaurant .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-restaurant .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-restaurant .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-restaurant .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-restaurant .chartGridLine.l1 {
top: 34px;
}
#dreamz-restaurant .chartGridLine.l2 {
top: 65px;
}
#dreamz-restaurant .chartGridLine.l3 {
top: 96px;
}
#dreamz-restaurant .chartGridLine.l4 {
top: 127px;
}
#dreamz-restaurant .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-restaurant .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-restaurant .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-restaurant .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-restaurant .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-restaurant .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-restaurant .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-restaurant .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-restaurant .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-restaurant .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-restaurant .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-restaurant .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-restaurant .noteCard p,
#dreamz-restaurant .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-restaurant .alertStack {
display: grid;
gap: 10px;
}
#dreamz-restaurant .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-restaurant .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-restaurant .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-restaurant .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-restaurant .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-restaurant .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-restaurant .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-restaurant .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-restaurant .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-restaurant .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-restaurant .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-restaurant .scheduleBoard h4,
#dreamz-restaurant .todoBoard h4,
#dreamz-restaurant .siteBoard h4,
#dreamz-restaurant .chatPanel h4,
#dreamz-restaurant .lessonPanel h4,
#dreamz-restaurant .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-restaurant .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-restaurant .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-restaurant .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-restaurant .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-restaurant .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-restaurant .taskRow:last-child {
border-bottom: 0;
}
#dreamz-restaurant .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-restaurant .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-restaurant .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-restaurant .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-restaurant .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-restaurant .inventoryTable th,
#dreamz-restaurant .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-restaurant .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-restaurant .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-restaurant .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-restaurant .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-restaurant .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-restaurant .phoneBody {
padding: 12px;
}
#dreamz-restaurant .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-restaurant .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-restaurant .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-restaurant .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-restaurant .progressList {
display: grid;
gap: 10px;
}
#dreamz-restaurant .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-restaurant .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-restaurant .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-restaurant .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-restaurant .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-restaurant .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-restaurant .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-restaurant .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-restaurant .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-restaurant .pin1 {
top: 56px;
left: 58px;
}
#dreamz-restaurant .pin2 {
top: 88px;
right: 88px;
}
#dreamz-restaurant .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-restaurant .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-restaurant .siteRow:last-child {
border-bottom: 0;
}
#dreamz-restaurant .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-restaurant .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-restaurant .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-restaurant .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-restaurant .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-restaurant .graphNodes:before,
#dreamz-restaurant .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-restaurant .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-restaurant .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-restaurant .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-restaurant .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-restaurant .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-restaurant .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-restaurant .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-restaurant .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-restaurant .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-restaurant .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-restaurant .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-restaurant .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-restaurant .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-restaurant .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-restaurant .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-restaurant .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-restaurant .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-restaurant .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-restaurant .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-restaurant .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-restaurant .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-restaurant .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-restaurant .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-restaurant .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-restaurant .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-restaurant .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-restaurant .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-restaurant .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-restaurant .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-restaurant .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-restaurant .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-restaurant .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-restaurant .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-restaurant #restaurant-maintenance-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-restaurant #restaurant-maintenance-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-restaurant #restaurant-maintenance-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-restaurant #restaurant-maintenance-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-restaurant #restaurant-maintenance-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-restaurant #restaurant-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-restaurant #restaurant-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-restaurant #restaurant-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-restaurant #restaurant-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-restaurant #restaurant-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-restaurant #restaurant-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-restaurant #restaurant-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-restaurant #restaurant-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-restaurant #restaurant-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-restaurant #restaurant-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-restaurant #restaurant-maintenance-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-restaurant #restaurant-maintenance-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-restaurant #restaurant-maintenance-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-restaurant #restaurant-maintenance-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-restaurant #restaurant-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-restaurant #restaurant-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-restaurant #restaurant-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-restaurant #restaurant-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-restaurant #restaurant-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-restaurant #restaurant-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-restaurant #restaurant-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-restaurant #restaurant-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-restaurant #restaurant-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-restaurant #restaurant-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-restaurant .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-restaurant .featureMediaPanels {
min-height: 0;
}
#dreamz-restaurant .inventorySplit,
#dreamz-restaurant .forecastGrid,
#dreamz-restaurant .siteGrid,
#dreamz-restaurant .spectrumGrid,
#dreamz-restaurant .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-restaurant .metricGrid,
#dreamz-restaurant .lessonCards,
#dreamz-restaurant .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-restaurant .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-restaurant {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-restaurant * {
box-sizing: border-box;
}
#dreamz-restaurant {
scroll-behavior: smooth;
}
#dreamz-restaurant {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-restaurant a {
color: inherit;
text-decoration: none;
}
#dreamz-restaurant .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-restaurant .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-restaurant .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-restaurant .brand span {
color: var(--brand);
}
#dreamz-restaurant .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-restaurant .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-restaurant .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-restaurant .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-restaurant .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-restaurant .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-restaurant .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-restaurant .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-restaurant h1,
#dreamz-restaurant h2,
#dreamz-restaurant h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
#dreamz-restaurant h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
#dreamz-restaurant h2 {
font-size: clamp(32px, 4.3vw, 50px);
}
#dreamz-restaurant h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-restaurant .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-restaurant .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-restaurant .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-restaurant .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-restaurant .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-restaurant .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-restaurant .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-restaurant .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-restaurant .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-restaurant .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-restaurant .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-restaurant .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-restaurant .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-restaurant .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-restaurant .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-restaurant .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-restaurant .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-restaurant .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-restaurant .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-restaurant .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-restaurant .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-restaurant .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-restaurant .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-restaurant .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-restaurant .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-restaurant .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-restaurant .sectionHead {
margin-bottom: 44px;
}
#dreamz-restaurant .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-restaurant .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-restaurant .aiJourney h2 {
color: #fff;
}
#dreamz-restaurant .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-restaurant .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-restaurant .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-restaurant .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-restaurant .aiStep:last-child::after {
display: none;
}
#dreamz-restaurant .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-restaurant .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-restaurant .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-restaurant .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-restaurant .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-restaurant .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-restaurant .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-restaurant .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-restaurant .capability {
background: #fff;
}
#dreamz-restaurant .capability.alt {
background: var(--sky-2);
}
#dreamz-restaurant .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-restaurant .twoCol.reverse .visual {
order: 2;
}
#dreamz-restaurant .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-restaurant .visual .placeholder {
min-height: 355px;
}
#dreamz-restaurant .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-restaurant .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-restaurant details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-restaurant details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-restaurant details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-restaurant details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-restaurant details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-restaurant details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-restaurant .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-restaurant .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-restaurant .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-restaurant .darkSection h2,
#dreamz-restaurant .darkSection h3 {
color: #fff;
}
#dreamz-restaurant .darkSection .sectionHead p,
#dreamz-restaurant .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-restaurant .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-restaurant .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-restaurant .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-restaurant .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-restaurant .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-restaurant .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-restaurant .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-restaurant .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-restaurant .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-restaurant .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-restaurant .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-restaurant .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-restaurant .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-restaurant .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-restaurant .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-restaurant .benefitBand h2 {
color: #fff;
}
#dreamz-restaurant .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-restaurant .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-restaurant .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-restaurant .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-restaurant .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-restaurant .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-restaurant .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-restaurant .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-restaurant .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-restaurant .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-restaurant .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-restaurant .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-restaurant .faq {
max-width: 900px;
}
#dreamz-restaurant .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-restaurant .ctaPanel h2 {
color: #fff;
}
#dreamz-restaurant .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-restaurant .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-restaurant .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-restaurant .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-restaurant .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-restaurant .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-restaurant .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-restaurant .inlineCta.dark h3 {
color: #fff;
}
#dreamz-restaurant .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-restaurant .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-restaurant .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-restaurant .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-restaurant .button.yellow:hover {
background: #FFD84D;
}
#dreamz-restaurant .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-restaurant .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-restaurant .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-restaurant .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-restaurant footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-restaurant .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-restaurant .heroGrid,
#dreamz-restaurant .twoCol,
#dreamz-restaurant .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-restaurant .twoCol.reverse .visual {
order: initial;
}
#dreamz-restaurant .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-restaurant .ratingGrid,
#dreamz-restaurant .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-restaurant .ratingLead,
#dreamz-restaurant .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-restaurant .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-restaurant .aiStep:nth-child(3)::after,
#dreamz-restaurant .aiStep:last-child::after {
display: none;
}
#dreamz-restaurant .outcomeGrid,
#dreamz-restaurant .challengeGrid,
#dreamz-restaurant .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-restaurant .cards,
#dreamz-restaurant .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-restaurant .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-restaurant .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-restaurant .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-restaurant .hero {
padding: 58px 0 52px;
}
#dreamz-restaurant h1 {
font-size: 44px;
}
#dreamz-restaurant .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-restaurant .aiStep::after {
display: none;
}
#dreamz-restaurant .logoRow,
#dreamz-restaurant .ratingGrid,
#dreamz-restaurant .awardGrid,
#dreamz-restaurant .outcomeGrid,
#dreamz-restaurant .challengeGrid,
#dreamz-restaurant .benefitGrid,
#dreamz-restaurant .cards,
#dreamz-restaurant .proofCards,
#dreamz-restaurant .integrationGrid,
#dreamz-restaurant .featureList {
grid-template-columns: 1fr;
}
#dreamz-restaurant .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-restaurant .ctaPanel {
padding: 34px 24px;
}
#dreamz-restaurant .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-restaurant .inlineCtaActions {
width: 100%;
}
#dreamz-restaurant .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-restaurant {
--muted: #526A7C;
--shadow: none;
}
#dreamz-restaurant {
background: var(--sky-2);
}
#dreamz-restaurant p {
margin-bottom: 0;
}
#dreamz-restaurant [id] {
scroll-margin-top: 94px;
}
#dreamz-restaurant svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-restaurant .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-restaurant .darkSection h2,
#dreamz-restaurant .darkSection h3,
#dreamz-restaurant .aiJourney h2,
#dreamz-restaurant .benefitBand h2,
#dreamz-restaurant .ctaPanel h2,
#dreamz-restaurant .inlineCta.dark h3 {
color: #fff;
}
#dreamz-restaurant .wrap>*,
#dreamz-restaurant .heroGrid>*,
#dreamz-restaurant .twoCol>*,
#dreamz-restaurant .ctaPanel>* {
min-width: 0;
}
#dreamz-restaurant .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-restaurant .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-restaurant .skipLink:focus {
transform: none;
}
#dreamz-restaurant a:focus-visible,
#dreamz-restaurant summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-restaurant .darkSection a:focus-visible,
#dreamz-restaurant .darkSection summary:focus-visible,
#dreamz-restaurant .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-restaurant .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-restaurant .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-restaurant .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-restaurant .brandName>span {
color: var(--brand-dark);
}
#dreamz-restaurant .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-restaurant .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-restaurant .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-restaurant .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-restaurant .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-restaurant .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-restaurant .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-restaurant .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-restaurant .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-restaurant .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-restaurant .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-restaurant .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-restaurant .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-restaurant .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-restaurant .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-restaurant .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-restaurant .clientBand {
padding: 27px 0;
}
#dreamz-restaurant .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-restaurant .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-restaurant .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-restaurant .logoBox.wide {
font-size: 12px;
}
#dreamz-restaurant .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-restaurant h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-restaurant .sectionHead {
margin-bottom: 36px;
}
#dreamz-restaurant .eyebrow {
line-height: 1.5;
}
#dreamz-restaurant .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-restaurant .aiStep {
min-height: 162px;
}
#dreamz-restaurant .aiStep strong {
line-height: 1.35;
}
#dreamz-restaurant .aiStep span {
line-height: 1.65;
}
#dreamz-restaurant .aiCallout {
margin-top: 24px;
}
#dreamz-restaurant .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-restaurant .outcome>.icon {
color: var(--navy);
}
#dreamz-restaurant .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-restaurant .awardItem>.icon {
color: var(--navy);
}
#dreamz-restaurant .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-restaurant .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-restaurant .twoCol.reverse .visual {
order: -1;
}
#dreamz-restaurant .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-restaurant .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-restaurant .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-restaurant .featureList {
gap: 13px 18px;
}
#dreamz-restaurant .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-restaurant .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-restaurant .check .icon {
width: 14px;
height: 14px;
}
#dreamz-restaurant details.capabilityMore {
margin-bottom: 0;
}
#dreamz-restaurant .capabilityMore summary {
min-height: 34px;
}
#dreamz-restaurant .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-restaurant .textCta {
font-size: 14px;
}
#dreamz-restaurant .visual {
min-width: 0;
}
#dreamz-restaurant .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-restaurant .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-restaurant .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-restaurant .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-restaurant .panelBody {
padding: 20px;
}
#dreamz-restaurant .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-restaurant .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-restaurant .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-restaurant .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-restaurant .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-restaurant .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-restaurant .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-restaurant .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-restaurant .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-restaurant .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-restaurant .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-restaurant .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-restaurant .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-restaurant .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-restaurant .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-restaurant .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-restaurant .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-restaurant .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-restaurant .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-restaurant .dataRow:last-child {
border-bottom: 0;
}
#dreamz-restaurant .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-restaurant .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-restaurant .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-restaurant .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-restaurant .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-restaurant .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-restaurant .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-restaurant .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-restaurant .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-restaurant .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-restaurant .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-restaurant .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-restaurant .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-restaurant .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-restaurant .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-restaurant .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-restaurant .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-restaurant .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-restaurant .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-restaurant .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-restaurant .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-restaurant .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-restaurant .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-restaurant .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-restaurant .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-restaurant .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-restaurant .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-restaurant .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-restaurant .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-restaurant .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-restaurant .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-restaurant .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-restaurant .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-restaurant .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-restaurant .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-restaurant .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-restaurant .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-restaurant .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-restaurant .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-restaurant .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-restaurant .promptList {
display: grid;
gap: 10px;
}
#dreamz-restaurant .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-restaurant .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-restaurant .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-restaurant .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-restaurant .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-restaurant .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-restaurant .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-restaurant .quoteTable th,
#dreamz-restaurant .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-restaurant .quoteTable td:first-child {
width: 64%;
}
#dreamz-restaurant .quoteTable th:last-child,
#dreamz-restaurant .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-restaurant .quoteTable strong {
font-size: 11px;
}
#dreamz-restaurant .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-restaurant .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-restaurant .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-restaurant .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-restaurant .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-restaurant .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-restaurant .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-restaurant .orderJourney {
margin: 20px 0;
}
#dreamz-restaurant .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-restaurant .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-restaurant .journeyRow:last-child:before {
display: none;
}
#dreamz-restaurant .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-restaurant .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-restaurant .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-restaurant .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-restaurant .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-restaurant .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-restaurant .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-restaurant .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-restaurant .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-restaurant .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-restaurant .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-restaurant .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-restaurant .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-restaurant .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-restaurant .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-restaurant .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-restaurant .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-restaurant .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-restaurant .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-restaurant .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-restaurant .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-restaurant .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-restaurant .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-restaurant .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-restaurant .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-restaurant .customerTimeline strong {
color: #fff;
}
#dreamz-restaurant .customerTimeline small {
color: #BFBFBF;
}
#dreamz-restaurant .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-restaurant .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-restaurant .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-restaurant .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-restaurant .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-restaurant .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-restaurant .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-restaurant .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-restaurant .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-restaurant .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-restaurant .chartTitle strong {
font-size: 12px;
}
#dreamz-restaurant .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-restaurant .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-restaurant .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-restaurant .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-restaurant .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-restaurant .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-restaurant .inlineCtaActions {
max-width: 42%;
}
#dreamz-restaurant .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-restaurant .inlineCta h3 {
line-height: 1.35;
}
#dreamz-restaurant .card {
box-shadow: none;
}
#dreamz-restaurant .cardIcon {
box-shadow: none;
}
#dreamz-restaurant .card h3 {
font-size: 22px;
}
#dreamz-restaurant .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-restaurant .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-restaurant .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-restaurant .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-restaurant .ratingBand {
padding: 34px 0;
}
#dreamz-restaurant .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-restaurant .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-restaurant .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-restaurant .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-restaurant .ratingItem:first-child {
border-left: 0;
}
#dreamz-restaurant .proofCard h3 {
font-size: 23px;
}
#dreamz-restaurant .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-restaurant .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-restaurant .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-restaurant .integration {
min-height: 98px;
}
#dreamz-restaurant .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-restaurant .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-restaurant .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-restaurant .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-restaurant .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-restaurant .finalActions {
display: grid;
gap: 11px;
}
#dreamz-restaurant .finalActions .button {
white-space: nowrap;
}
#dreamz-restaurant .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-restaurant .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-restaurant .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-restaurant .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-restaurant .heroGrid {
gap: 30px;
}
#dreamz-restaurant .twoCol {
gap: 32px;
}
#dreamz-restaurant .panelBody {
padding: 16px;
}
#dreamz-restaurant .panelHead {
padding: 16px;
}
#dreamz-restaurant .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-restaurant .pipelineColumns {
gap: 7px;
}
#dreamz-restaurant .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-restaurant .heroGrid,
#dreamz-restaurant .twoCol,
#dreamz-restaurant .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .heroGrid {
gap: 36px;
}
#dreamz-restaurant .hero h1 {
max-width: 730px;
}
#dreamz-restaurant .hero .lead {
max-width: 690px;
}
#dreamz-restaurant .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-restaurant .twoCol {
gap: 34px;
}
#dreamz-restaurant .twoCol.reverse .visual {
order: initial;
}
#dreamz-restaurant .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-restaurant .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-restaurant .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-restaurant .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-restaurant .ratingSectionGrid {
gap: 20px;
}
#dreamz-restaurant .inlineCta {
align-items: flex-start;
}
#dreamz-restaurant .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-restaurant .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-restaurant .card {
padding: 22px;
}
#dreamz-restaurant .card h3 {
font-size: 21px;
}
#dreamz-restaurant .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-restaurant .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-restaurant .cards,
#dreamz-restaurant .proofCards {
grid-template-columns: 1fr;
}
#dreamz-restaurant .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-restaurant .inlineCta {
flex-direction: column;
}
#dreamz-restaurant .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-restaurant .inlineCtaActions .button {
flex: 1;
}
#dreamz-restaurant .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-restaurant .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-restaurant .wrap {
width: calc(100% - 32px);
}
#dreamz-restaurant [id] {
scroll-margin-top: 82px;
}
#dreamz-restaurant .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-restaurant .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-restaurant .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-restaurant .hero {
padding: 51px 0 48px;
}
#dreamz-restaurant .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-restaurant .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-restaurant .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-restaurant .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-restaurant .hero .microcopy {
font-size: 11px;
}
#dreamz-restaurant .heroPills span {
font-size: 9px;
}
#dreamz-restaurant .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-restaurant .sectionHead p {
font-size: 16px;
}
#dreamz-restaurant .copy h2 {
font-size: 34px;
}
#dreamz-restaurant .copy p {
font-size: 15px;
}
#dreamz-restaurant .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-restaurant .logoBox {
min-height: 53px;
}
#dreamz-restaurant .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-restaurant .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-restaurant .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-restaurant .aiStep strong {
font-size: 13px;
}
#dreamz-restaurant .aiStep span {
font-size: 11px;
}
#dreamz-restaurant .aiStep::after {
display: none;
}
#dreamz-restaurant .outcomeGrid,
#dreamz-restaurant .challengeGrid,
#dreamz-restaurant .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .outcome {
padding: 24px;
}
#dreamz-restaurant .outcome strong {
font-size: 22px;
}
#dreamz-restaurant .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-restaurant .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-restaurant .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-restaurant .featureList,
#dreamz-restaurant .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .featureItem {
font-size: 13px;
}
#dreamz-restaurant .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-restaurant .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-restaurant .panelHead {
padding: 15px 13px;
}
#dreamz-restaurant .panelHead>strong {
font-size: 12px;
}
#dreamz-restaurant .panelBody {
padding: 14px;
}
#dreamz-restaurant .productPanel {
border-radius: 16px;
}
#dreamz-restaurant .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-restaurant .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-restaurant .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-restaurant .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-restaurant .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-restaurant .deal strong {
font-size: 10px;
}
#dreamz-restaurant .deal small {
font-size: 9px;
}
#dreamz-restaurant .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-restaurant .mobileWorkspace {
gap: 12px;
}
#dreamz-restaurant .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-restaurant .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-restaurant .sideTile {
padding: 10px;
}
#dreamz-restaurant .sideTile strong {
font-size: 10px;
}
#dreamz-restaurant .sideTile p {
font-size: 9px;
}
#dreamz-restaurant .mobileHeader strong {
font-size: 15px;
}
#dreamz-restaurant .mobileAccount strong {
font-size: 10px;
}
#dreamz-restaurant .mobileAccount small {
font-size: 7px;
}
#dreamz-restaurant .phoneDevice .rowIcon {
display: none;
}
#dreamz-restaurant .quoteTable th,
#dreamz-restaurant .quoteTable td {
padding: 12px 4px;
}
#dreamz-restaurant .quoteTable strong {
font-size: 10px;
}
#dreamz-restaurant .quoteTable small {
font-size: 8px;
}
#dreamz-restaurant .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-restaurant .docHeader strong {
font-size: 17px;
}
#dreamz-restaurant .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-restaurant .miniFlow span {
padding: 6px;
}
#dreamz-restaurant .rowCopy strong {
font-size: 10px;
}
#dreamz-restaurant .rowCopy small {
font-size: 8px;
}
#dreamz-restaurant .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-restaurant .miniStats {
gap: 7px;
}
#dreamz-restaurant .miniStats>div {
padding: 9px;
}
#dreamz-restaurant .miniStats strong {
font-size: 18px;
}
#dreamz-restaurant .miniStats span {
font-size: 8px;
}
#dreamz-restaurant .collectionStats>div {
padding: 13px;
}
#dreamz-restaurant .collectionStats strong {
font-size: 24px;
}
#dreamz-restaurant .customerHeader strong {
font-size: 17px;
}
#dreamz-restaurant .customerFacts>div {
padding: 10px;
}
#dreamz-restaurant .customerFacts strong {
font-size: 12px;
}
#dreamz-restaurant .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-restaurant .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-restaurant .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-restaurant .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-restaurant .integration small {
font-size: 9px;
}
#dreamz-restaurant .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-restaurant .ctaPanel p {
font-size: 15px;
}
#dreamz-restaurant .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-restaurant .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-restaurant .contextSection {
padding: 0 0 24px;
}
#dreamz-restaurant .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-restaurant .wrap {
width: calc(100% - 24px);
}
#dreamz-restaurant .brand {
font-size: 18px;
}
#dreamz-restaurant .brandMark {
width: 25px;
height: 25px;
}
#dreamz-restaurant .hero h1 {
font-size: 38px;
}
#dreamz-restaurant .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-restaurant .copy h2 {
font-size: 31px;
}
#dreamz-restaurant .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-restaurant .phoneDevice {
width: 210px;
}
#dreamz-restaurant .phoneDevice .rowIcon {
display: grid;
}
#dreamz-restaurant .mobileSide {
gap: 8px;
}
#dreamz-restaurant .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-restaurant .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-restaurant .sideTile p {
margin: 0;
}
#dreamz-restaurant .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-restaurant .collectionStats strong {
font-size: 21px;
}
#dreamz-restaurant .inventoryIntro strong {
font-size: 14px;
}
#dreamz-restaurant .dataRow {
gap: 7px;
}
#dreamz-restaurant .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-restaurant .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-restaurant {
scroll-behavior: auto;
}
#dreamz-restaurant *,
#dreamz-restaurant *::before,
#dreamz-restaurant *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-restaurant {
background: var(--sky-2);
}
#dreamz-restaurant .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-restaurant .hero .eyebrow {
max-width: 100%;
}
#dreamz-restaurant .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-restaurant .ganttIllustration,
#dreamz-restaurant .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-restaurant .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-restaurant .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-restaurant .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-restaurant .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-restaurant .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-restaurant .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-restaurant .comparisonTable th,
#dreamz-restaurant .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .comparisonTable th:first-child {
width: 23%;
}
#dreamz-restaurant .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-restaurant .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-restaurant .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-restaurant .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-restaurant .card,
#dreamz-restaurant .proofCard,
#dreamz-restaurant .productPanel,
#dreamz-restaurant .outcome,
#dreamz-restaurant .benefit {
box-shadow: none;
}
#dreamz-restaurant .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-restaurant .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-restaurant .hero .eyebrow {
font-size: 10px;
}
#dreamz-restaurant .comparisonTable {
font-size: 11px;
}
#dreamz-restaurant .comparisonTable th,
#dreamz-restaurant .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-restaurant .comparisonTable th:first-child {
width: 24%;
}
#dreamz-restaurant .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-restaurant .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-restaurant .hero h1 {
font-size: 38px;
}
}
#dreamz-restaurant .scheduleIllustration,
#dreamz-restaurant .analyticsIllustration,
#dreamz-restaurant .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-restaurant .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-restaurant .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-restaurant .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-restaurant .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-restaurant .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-restaurant .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-restaurant .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-restaurant .darkSection .textCta {
color: var(--yellow);
}
#dreamz-restaurant .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-restaurant .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-restaurant .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-restaurant .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-restaurant .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-restaurant .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-restaurant .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-restaurant .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-restaurant .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-restaurant .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-restaurant .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-restaurant .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-restaurant .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-restaurant .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-restaurant .phoneDevice {
max-width: 100%;
}
#dreamz-restaurant .heroPills {
line-height: 1.55;
}
#dreamz-restaurant .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-restaurant .plantFacts {
gap: 7px;
}
#dreamz-restaurant .plantFacts>div {
padding: 9px;
}
#dreamz-restaurant .plantFacts strong {
font-size: 11px;
}
#dreamz-restaurant .scanSummary {
padding: 12px;
}
#dreamz-restaurant .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-restaurant .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-restaurant .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-restaurant .phoneDevice .rowIcon {
display: grid;
}
#dreamz-restaurant .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-restaurant .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-restaurant .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-restaurant .sideTile strong {
font-size: 12px;
}
#dreamz-restaurant .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-restaurant .topbar,
#dreamz-restaurant .heroActions,
#dreamz-restaurant .finalActions,
#dreamz-restaurant .contextSection,
#dreamz-restaurant .valueCtaSection {
display: none;
}
#dreamz-restaurant section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-restaurant .hero {
padding-top: 20px;
}
}
#dreamz-restaurant {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-restaurant h1,
#dreamz-restaurant h2,
#dreamz-restaurant h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
#dreamz-restaurant p {
margin: 0;
}
#dreamz-restaurant main {
display: block;
}
#dreamz-restaurant .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-restaurant .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-restaurant .heroAccent {
color: var(--black);
}
#dreamz-restaurant .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-restaurant .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-restaurant .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-restaurant .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-restaurant .microcopy {
margin-top: 14px;
}
#dreamz-restaurant .heroPills {
margin-top: 13px;
}
#dreamz-restaurant .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-restaurant .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-restaurant .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-restaurant .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-restaurant .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-restaurant .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-restaurant .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-restaurant .clientBand {
padding: 24px 0;
}
#dreamz-restaurant .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-restaurant .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-restaurant .logoBox.wide {
font-size: 15px;
}
#dreamz-restaurant .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-restaurant .sectionHead p {
margin: 17px 0 0;
}
#dreamz-restaurant .copy p {
margin: 16px 0 0;
}
#dreamz-restaurant .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-restaurant .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-restaurant .aiJourney {
background: var(--black);
}
#dreamz-restaurant .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-restaurant .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-restaurant .productPanel {
border-radius: 18px;
}
#dreamz-restaurant .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-restaurant .panelHead>strong {
font-size: 13px;
}
#dreamz-restaurant .sampleTag {
font-size: 9px;
}
#dreamz-restaurant .panelBody {
padding: 21px;
}
#dreamz-restaurant .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-restaurant .docHeader {
padding-bottom: 16px;
}
#dreamz-restaurant .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-restaurant .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-restaurant .smallLabel {
font-size: 9px;
}
#dreamz-restaurant .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-restaurant .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-restaurant .dataRow {
padding: 14px 0;
}
#dreamz-restaurant .statusPill {
font-size: 8px;
}
#dreamz-restaurant .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-restaurant .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-restaurant .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-restaurant .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-restaurant .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-restaurant .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-restaurant .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-restaurant .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-restaurant .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-restaurant .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-restaurant .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-restaurant .hierarchy strong {
color: var(--navy);
}
#dreamz-restaurant .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-restaurant .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-restaurant .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-restaurant .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-restaurant .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-restaurant .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-restaurant .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-restaurant .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-restaurant .mobileAccount small {
font-size: 9px;
}
#dreamz-restaurant .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-restaurant .sideTile strong {
font-size: 12px;
}
#dreamz-restaurant .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-restaurant .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-restaurant .mobileAction {
font-size: 9px;
}
#dreamz-restaurant .journeyRow strong {
font-size: 13px;
}
#dreamz-restaurant .journeyRow small {
font-size: 11px;
}
#dreamz-restaurant .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-restaurant .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-restaurant .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-restaurant .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-restaurant .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-restaurant .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-restaurant .utilityReadout small {
font-size: 12px;
}
#dreamz-restaurant .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-restaurant .darkSection {
background: var(--black);
}
#dreamz-restaurant .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-restaurant .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-restaurant .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-restaurant .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-restaurant .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-restaurant .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-restaurant .assistantHead small {
font-size: 11px;
}
#dreamz-restaurant .assistantNote {
font-size: 11px;
}
#dreamz-restaurant .reportTags span {
font-size: 10px;
}
#dreamz-restaurant .card p {
margin: 12px 0 0;
}
#dreamz-restaurant .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-restaurant .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-restaurant .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-restaurant .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-restaurant .cards>.card p {
padding-bottom: 22px;
}
#dreamz-restaurant .benefitBand {
background: var(--black);
}
#dreamz-restaurant .benefit {
background: var(--black-soft);
}
#dreamz-restaurant .inlineCta h3 {
font-size: 20px;
}
#dreamz-restaurant .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-restaurant .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-restaurant .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-restaurant .valueCtaSection {
padding: 32px 0;
}
#dreamz-restaurant .proofCard p {
margin-top: 15px;
}
#dreamz-restaurant .proofCard h3 {
font-size: 23px;
}
#dreamz-restaurant .integrationNote {
margin-top: 23px;
}
#dreamz-restaurant .ctaPanel {
background: var(--black);
}
#dreamz-restaurant .ctaPanel p {
margin-top: 16px;
}
#dreamz-restaurant .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-restaurant .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-restaurant a:hover {
text-decoration: none;
}
#dreamz-restaurant .textCta:hover {
color: var(--navy);
}
#dreamz-restaurant .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-restaurant .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-restaurant .hero h1 {
font-size: 49px;
}
#dreamz-restaurant .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-restaurant .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-restaurant .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-restaurant .hero h1 {
font-size: 58px;
}
#dreamz-restaurant .heroVisual {
max-width: 548px;
}
#dreamz-restaurant .hero .lead {
max-width: 700px;
}
#dreamz-restaurant .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-restaurant .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-restaurant .logoBox:last-child {
grid-column: auto;
}
#dreamz-restaurant .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-restaurant .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-restaurant .inlineCtaActions .button {
flex: 1;
}
#dreamz-restaurant .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-restaurant .hero {
padding: 28px 0 40px;
}
#dreamz-restaurant .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-restaurant .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-restaurant .heroActions {
gap: 10px;
}
#dreamz-restaurant .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-restaurant .breadcrumb {
margin-bottom: 21px;
}
#dreamz-restaurant .hero .eyebrow {
font-size: 11px;
}
#dreamz-restaurant .heroVisual {
max-width: 480px;
}
#dreamz-restaurant .heroPills {
row-gap: 9px;
}
#dreamz-restaurant .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-restaurant .heroPills span+span {
padding-left: 7px;
}
#dreamz-restaurant .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-restaurant .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-restaurant .clientBand {
padding: 25px 0;
}
#dreamz-restaurant .copy h2 {
font-size: 33px;
}
#dreamz-restaurant .panelBody {
padding: 16px;
}
#dreamz-restaurant .panelHead {
padding: 15px;
}
#dreamz-restaurant .panelHead>strong {
font-size: 12px;
}
#dreamz-restaurant .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-restaurant .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-restaurant .docHeader strong {
font-size: 18px;
}
#dreamz-restaurant .docHeader small {
font-size: 10px;
}
#dreamz-restaurant .rowCopy strong {
font-size: 11px;
}
#dreamz-restaurant .rowCopy small {
font-size: 10px;
}
#dreamz-restaurant .miniStats {
gap: 7px;
}
#dreamz-restaurant .miniStats strong {
font-size: 21px;
}
#dreamz-restaurant .miniStats span {
font-size: 9px;
}
#dreamz-restaurant .miniStats>div {
padding: 10px 8px;
}
#dreamz-restaurant .plantFacts {
gap: 8px;
}
#dreamz-restaurant .plantFacts>div {
padding: 10px;
}
#dreamz-restaurant .plantFacts strong {
font-size: 11px;
}
#dreamz-restaurant .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-restaurant .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-restaurant .utilityReadout span {
font-size: 8px;
}
#dreamz-restaurant .utilityReadout strong {
font-size: 24px;
}
#dreamz-restaurant .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-restaurant .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-restaurant .comparisonTable {
font-size: 11px;
}
#dreamz-restaurant .comparisonTable th,
#dreamz-restaurant .comparisonTable td {
padding: 13px 9px;
}
#dreamz-restaurant .contextSection {
padding: 0 0 22px;
}
#dreamz-restaurant .valueCtaSection {
padding: 25px 0;
}
#dreamz-restaurant .inlineCtaActions {
flex-direction: column;
}
#dreamz-restaurant .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-restaurant .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-restaurant .phoneDevice {
width: 222px;
}
#dreamz-restaurant .phoneDevice .rowIcon {
display: grid;
}
#dreamz-restaurant .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-restaurant .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-restaurant .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-restaurant .sideTile p {
margin: 0;
}
#dreamz-restaurant .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-restaurant .dataRow {
gap: 8px;
}
#dreamz-restaurant .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-restaurant .miniStats strong {
font-size: 19px;
}
#dreamz-restaurant .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-restaurant .heroActions .button {
width: 100%;
}
#dreamz-restaurant .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-restaurant .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-restaurant .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-restaurant .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-restaurant .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-restaurant .aiStep span {
font-size: 13px;
}
#dreamz-restaurant .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-restaurant {
background: var(--white);
}
#dreamz-restaurant img {
display: block;
max-width: 100%;
}
#dreamz-restaurant h1,
#dreamz-restaurant h2,
#dreamz-restaurant h3 {
text-wrap: balance;
}
#dreamz-restaurant .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-restaurant .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-restaurant .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-restaurant .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-restaurant .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-restaurant .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-restaurant .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-restaurant .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-restaurant .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-restaurant .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-restaurant .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-restaurant .industryIntro {
padding: 78px 0 66px;
}
#dreamz-restaurant .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-restaurant .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-restaurant .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-restaurant .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-restaurant .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-restaurant .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-restaurant .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-restaurant .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-restaurant .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-restaurant .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-restaurant .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-restaurant .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-restaurant .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-restaurant .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-restaurant .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-restaurant .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-restaurant .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-restaurant .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-restaurant .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-restaurant .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-restaurant .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-restaurant .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-restaurant .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-restaurant .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-restaurant .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-restaurant .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-restaurant .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-restaurant .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-restaurant .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-restaurant .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-restaurant .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-restaurant .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-restaurant .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-restaurant .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-restaurant .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-restaurant .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-restaurant .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-restaurant .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-restaurant .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-restaurant .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-restaurant .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-restaurant .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-restaurant .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-restaurant .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-restaurant .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-restaurant .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .rfidSpotlight {
background: #fff;
}
#dreamz-restaurant .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-restaurant .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-restaurant .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-restaurant .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-restaurant .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-restaurant .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-restaurant .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-restaurant .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-restaurant .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-restaurant .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-restaurant .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-restaurant .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-restaurant .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-restaurant .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-restaurant .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-restaurant .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-restaurant .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-restaurant .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-restaurant .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-restaurant .featurePanel {
display: none;
}
#dreamz-restaurant .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-restaurant .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-restaurant .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-restaurant .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-restaurant .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-restaurant .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-restaurant .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-restaurant .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-restaurant .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-restaurant .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-restaurant .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-restaurant .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-restaurant .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-restaurant .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-restaurant .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-restaurant .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-restaurant .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-restaurant .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-restaurant .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-restaurant .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-restaurant .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-restaurant .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-restaurant .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-restaurant .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-restaurant .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-restaurant .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-restaurant .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-restaurant .aiReviewBody {
padding: 18px;
}
#dreamz-restaurant .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-restaurant .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-restaurant .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-restaurant .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-restaurant .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-restaurant .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-restaurant .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-restaurant .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-restaurant .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-restaurant .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-restaurant .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-restaurant .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-restaurant .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-restaurant .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-restaurant .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-restaurant .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-restaurant .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-restaurant .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-restaurant .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-restaurant .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-restaurant .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-restaurant .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-restaurant .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-restaurant .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-restaurant .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-restaurant .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-restaurant .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-restaurant .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-restaurant .workflowDetails .featureList,
#dreamz-restaurant .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-restaurant .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-restaurant .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-restaurant .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-restaurant #restaurant-connected-tools {
background: #fff;
}
#dreamz-restaurant #restaurant-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-restaurant .featureTab,
#dreamz-restaurant .industryPriority,
#dreamz-restaurant summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-restaurant .industryIntroHead {
gap: 30px;
}
#dreamz-restaurant .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-restaurant .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-restaurant .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-restaurant .factoryWorkflow {
padding: 22px;
}
#dreamz-restaurant .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-restaurant .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-restaurant .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-restaurant .industryPriorityGrid {
gap: 14px;
}
#dreamz-restaurant .industryPriority {
padding: 22px 19px;
}
#dreamz-restaurant .industryPriority h3 {
font-size: 21px;
}
#dreamz-restaurant .industryPriority p {
font-size: 12px;
}
#dreamz-restaurant .priorityLink {
font-size: 10px;
}
#dreamz-restaurant .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-restaurant .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-restaurant .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-restaurant .vedaUseCases>div {
display: block;
}
#dreamz-restaurant .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-restaurant .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-restaurant .featureTabs {
gap: 8px;
}
#dreamz-restaurant .featureTab {
min-height: 108px;
}
#dreamz-restaurant .featureStage,
#dreamz-restaurant .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-restaurant .rfidSpotlight .spotlightMedia,
#dreamz-restaurant .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-restaurant .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-restaurant .featurePanel {
min-height: 0;
}
#dreamz-restaurant .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-restaurant .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-restaurant .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-restaurant .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-restaurant .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-restaurant .clientBand {
padding: 22px 0;
}
#dreamz-restaurant .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-restaurant .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-restaurant .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-restaurant .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-restaurant .industryIntro {
padding: 53px 0;
}
#dreamz-restaurant .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-restaurant .industryIntroHead>p {
font-size: 14px;
}
#dreamz-restaurant .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .industryPriority {
padding: 23px;
}
#dreamz-restaurant .industryPriority h3 {
font-size: 24px;
}
#dreamz-restaurant .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-restaurant .industryPriority p {
font-size: 13px;
}
#dreamz-restaurant .priorityLink {
font-size: 11px;
}
#dreamz-restaurant .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-restaurant .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-restaurant .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-restaurant .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-restaurant .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-restaurant .vedaUseCases>div {
display: flex;
}
#dreamz-restaurant .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-restaurant .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-restaurant .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-restaurant .vedaMessage.user {
margin-left: 25px;
}
#dreamz-restaurant .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-restaurant .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-restaurant .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-restaurant .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-restaurant .spotlightHead h2 {
font-size: 32px;
}
#dreamz-restaurant .spotlightHead>p {
font-size: 14px;
}
#dreamz-restaurant .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-restaurant .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-restaurant .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-restaurant .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-restaurant .featurePanel h3 {
font-size: 24px;
}
#dreamz-restaurant .featurePanel>p {
font-size: 13px;
}
#dreamz-restaurant .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-restaurant .spotlightChecks>li {
font-size: 12px;
}
#dreamz-restaurant .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-restaurant .spotlightActions .button {
width: 100%;
}
#dreamz-restaurant .spotlightScope {
font-size: 10px;
}
#dreamz-restaurant .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-restaurant .mediaTitle strong {
font-size: 11px;
}
#dreamz-restaurant .mediaTitle div>span {
font-size: 8px;
}
#dreamz-restaurant .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-restaurant .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-restaurant .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-restaurant .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-restaurant .aiReviewBody {
padding: 13px;
}
#dreamz-restaurant .aiIssue {
padding: 13px;
}
#dreamz-restaurant .aiIssue strong {
font-size: 14px;
}
#dreamz-restaurant .aiEvidence {
gap: 6px;
}
#dreamz-restaurant .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-restaurant .aiEvidence strong {
font-size: 9px;
}
#dreamz-restaurant .aiEvidence span {
font-size: 7px;
}
#dreamz-restaurant .exampleLabel {
font-size: 6px;
}
#dreamz-restaurant .factoryWorkflows {
padding: 55px 0;
}
#dreamz-restaurant .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-restaurant .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-restaurant .industryRibbonGrid {
gap: 12px;
}
#dreamz-restaurant .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-restaurant .spotlightHead h2 {
font-size: 29px;
}
#dreamz-restaurant .featureStage {
padding: 19px 13px;
}
#dreamz-restaurant .mediaTitle>.icon {
display: none;
}
#dreamz-restaurant .exampleLabel {
display: none;
}
#dreamz-restaurant .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-restaurant .featureTabs {
display: none;
}
#dreamz-restaurant .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-restaurant .featureStage {
display: block;
}
#dreamz-restaurant .featurePanel {
color: #000;
}
}
#dreamz-restaurant #restaurant-maintenance-features-1:checked~.featureTabs label[for="restaurant-maintenance-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-maintenance-features-1:focus-visible~.featureTabs label[for="restaurant-maintenance-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-maintenance-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-2:checked~.featureTabs label[for="restaurant-maintenance-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-maintenance-features-2:focus-visible~.featureTabs label[for="restaurant-maintenance-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-maintenance-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-3:checked~.featureTabs label[for="restaurant-maintenance-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-maintenance-features-3:focus-visible~.featureTabs label[for="restaurant-maintenance-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-maintenance-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-4:checked~.featureTabs label[for="restaurant-maintenance-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-maintenance-features-4:focus-visible~.featureTabs label[for="restaurant-maintenance-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-maintenance-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-5:checked~.featureTabs label[for="restaurant-maintenance-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-maintenance-features-5:focus-visible~.featureTabs label[for="restaurant-maintenance-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-maintenance-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-1:checked~.featureTabs label[for="restaurant-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-rfid-features-1:focus-visible~.featureTabs label[for="restaurant-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-2:checked~.featureTabs label[for="restaurant-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-rfid-features-2:focus-visible~.featureTabs label[for="restaurant-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-3:checked~.featureTabs label[for="restaurant-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-rfid-features-3:focus-visible~.featureTabs label[for="restaurant-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-4:checked~.featureTabs label[for="restaurant-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-rfid-features-4:focus-visible~.featureTabs label[for="restaurant-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-5:checked~.featureTabs label[for="restaurant-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-rfid-features-5:focus-visible~.featureTabs label[for="restaurant-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-1:checked~.featureTabs label[for="restaurant-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-ai-decisions-features-1:focus-visible~.featureTabs label[for="restaurant-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-2:checked~.featureTabs label[for="restaurant-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-ai-decisions-features-2:focus-visible~.featureTabs label[for="restaurant-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-3:checked~.featureTabs label[for="restaurant-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-ai-decisions-features-3:focus-visible~.featureTabs label[for="restaurant-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-4:checked~.featureTabs label[for="restaurant-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-ai-decisions-features-4:focus-visible~.featureTabs label[for="restaurant-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-5:checked~.featureTabs label[for="restaurant-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-restaurant #restaurant-ai-decisions-features-5:focus-visible~.featureTabs label[for="restaurant-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-restaurant #restaurant-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-restaurant .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .featureMediaPanels {
min-width: 0;
}
#dreamz-restaurant .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-restaurant .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-restaurant .featureMediaPanels .windowTop strong,
#dreamz-restaurant .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-restaurant .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-restaurant .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-restaurant .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-restaurant .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-restaurant .featureMediaPanels .windowBody>*,
#dreamz-restaurant .featureMediaPanels .spectrumGrid>*,
#dreamz-restaurant .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-restaurant .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-restaurant .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-restaurant .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-restaurant .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-restaurant .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-restaurant .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-restaurant .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-restaurant .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-restaurant .pin2 {
top: 88px;
right: 88px;
}
#dreamz-restaurant .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-restaurant .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-restaurant .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-restaurant .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-restaurant .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-restaurant .featureMediaPanels .graphNodes .node.n1,
#dreamz-restaurant .featureMediaPanels .graphNodes .node.n2,
#dreamz-restaurant .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-restaurant .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-restaurant .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-restaurant .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-restaurant .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-restaurant .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-restaurant .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-restaurant .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-restaurant .freshGraphic * {
box-sizing: border-box;
}
#dreamz-restaurant .rfPanel,
#dreamz-restaurant .aiInsightCard,
#dreamz-restaurant .forecastVisualCard,
#dreamz-restaurant .forecastSuggestion,
#dreamz-restaurant .knowledgeTile,
#dreamz-restaurant .chatConversation,
#dreamz-restaurant .trainingSummary,
#dreamz-restaurant .moduleCard,
#dreamz-restaurant .qualityHeatCard,
#dreamz-restaurant .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-restaurant .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-restaurant .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-restaurant .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-restaurant .statusPill,
#dreamz-restaurant .cardTag,
#dreamz-restaurant .forecastSuggestion b,
#dreamz-restaurant .moduleCard b,
#dreamz-restaurant .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-restaurant .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-restaurant .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-restaurant .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-restaurant .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-restaurant .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-restaurant .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-restaurant .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-restaurant .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-restaurant .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-restaurant .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-restaurant .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-restaurant .dot.good {
background: #298EEC;
}
#dreamz-restaurant .dot.warn {
background: #F4A62A;
}
#dreamz-restaurant .dot.bad {
background: #EB6B53;
}
#dreamz-restaurant .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-restaurant .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-restaurant .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-restaurant .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-restaurant .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-restaurant .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-restaurant .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-restaurant .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-restaurant .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-restaurant .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-restaurant .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-restaurant .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-restaurant .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-restaurant .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-restaurant .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-restaurant .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-restaurant .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-restaurant .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-restaurant .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-restaurant .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-restaurant .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-restaurant .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-restaurant .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-restaurant .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-restaurant .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-restaurant .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-restaurant .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-restaurant .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-restaurant .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-restaurant .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-restaurant .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-restaurant .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-restaurant .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-restaurant .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-restaurant .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-restaurant .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-restaurant .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-restaurant .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-restaurant .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-restaurant .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-restaurant .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-restaurant .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-restaurant .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-restaurant .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-restaurant .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-restaurant .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-restaurant .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-restaurant .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-restaurant .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-restaurant .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-restaurant .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-restaurant .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-restaurant .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-restaurant .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-restaurant .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-restaurant .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-restaurant .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-restaurant .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-restaurant .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-restaurant .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-restaurant .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-restaurant .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-restaurant .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-restaurant .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-restaurant .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-restaurant .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-restaurant .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-restaurant .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-restaurant .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-restaurant .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-restaurant .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-restaurant .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-restaurant .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-restaurant .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-restaurant .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-restaurant .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-restaurant .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-restaurant .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-restaurant .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-restaurant .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-restaurant .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-restaurant .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-restaurant .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-restaurant .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-restaurant .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-restaurant .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-restaurant .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-restaurant .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-restaurant .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-restaurant .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-restaurant .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-restaurant .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-restaurant .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-restaurant .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-restaurant .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-restaurant .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-restaurant .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-restaurant .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-restaurant .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-restaurant .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-restaurant .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-restaurant .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-restaurant .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-restaurant .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-restaurant .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-restaurant .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-restaurant .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-restaurant .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-restaurant .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-restaurant .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-restaurant .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-restaurant .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-restaurant .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-restaurant .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-restaurant .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-restaurant .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-restaurant .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-restaurant .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-restaurant .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-restaurant .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-restaurant .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-restaurant .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-restaurant .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-restaurant .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-restaurant .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-restaurant .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-restaurant .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-restaurant .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-restaurant .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-restaurant .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-restaurant .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-restaurant .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-restaurant .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-restaurant .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-restaurant .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-restaurant .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-restaurant .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-restaurant .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-restaurant .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-restaurant .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-restaurant .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-restaurant .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-restaurant .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-restaurant .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-restaurant .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-restaurant .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-restaurant .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-restaurant .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-restaurant .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-restaurant .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-restaurant .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-restaurant .rfTrackLayout,
#dreamz-restaurant .rfFlowLayout,
#dreamz-restaurant .rfAlertGrid,
#dreamz-restaurant .rfCycleLayout,
#dreamz-restaurant .rfSitesLayout,
#dreamz-restaurant .aiRootLayout,
#dreamz-restaurant .aiForecastLayout,
#dreamz-restaurant .aiChatLayout,
#dreamz-restaurant .aiTrainingLayout,
#dreamz-restaurant .aiQualityLayout,
#dreamz-restaurant .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-restaurant .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-restaurant .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-restaurant .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-restaurant .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-restaurant .aiLink {
display: none;
}
}
#dreamz-restaurant .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-restaurant .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-restaurant .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-restaurant .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-restaurant .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-restaurant .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-restaurant .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-restaurant .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-restaurant .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-restaurant .mfgHero h1>span {
display: block;
}
#dreamz-restaurant .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-restaurant .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-restaurant .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-restaurant .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-restaurant .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-restaurant .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-restaurant .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-restaurant .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-restaurant .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-restaurant .mfgHeroContent {
min-height: 610px;
}
#dreamz-restaurant .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-restaurant .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-restaurant .mfgHeroLead {
font-size: 16px;
}
#dreamz-restaurant .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-restaurant .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-restaurant .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-restaurant .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-restaurant .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-restaurant .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-restaurant .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-restaurant .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-restaurant .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-restaurant .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-restaurant .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-restaurant .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-restaurant .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-restaurant .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-restaurant .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-restaurant .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-restaurant .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-restaurant .mfgHero {
background: #fff;
color: #000;
}
#dreamz-restaurant .mfgHeroScene,
#dreamz-restaurant .mfgHeroActions {
display: none;
}
#dreamz-restaurant .mfgHeroContent {
min-height: 0;
}
#dreamz-restaurant .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-restaurant .mfgHero h1,
#dreamz-restaurant .mfgHero h1 .mfgHeroAccent,
#dreamz-restaurant .mfgHero p {
color: #000;
}
}
#dreamz-restaurant #restaurant-rfid .featureStage,
#dreamz-restaurant #restaurant-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-restaurant .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-restaurant .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-restaurant .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-restaurant .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-restaurant .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-restaurant .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-restaurant .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-restaurant .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-restaurant .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-restaurant .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-restaurant .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-restaurant .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-restaurant .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-restaurant .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-restaurant .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-restaurant .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-restaurant .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-restaurant .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-restaurant .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-restaurant .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-restaurant .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-restaurant .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-restaurant .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-restaurant .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-restaurant .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-restaurant .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-restaurant .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-restaurant .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-restaurant .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-restaurant .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-restaurant .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-restaurant .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-restaurant .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-restaurant .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-restaurant .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-restaurant .mfgGallery .flowArrow {
display: none;
}
#dreamz-restaurant .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-restaurant .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-restaurant .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-restaurant .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-restaurant .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-restaurant .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-restaurant .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-restaurant .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-restaurant .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-restaurant .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-restaurant .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-restaurant .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-restaurant .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-restaurant .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-restaurant .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-restaurant .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-restaurant .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-restaurant .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-restaurant .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-restaurant .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-restaurant .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-restaurant .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-restaurant .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-restaurant .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-restaurant .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-restaurant .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-restaurant .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-restaurant .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-restaurant .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-restaurant .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-restaurant .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-restaurant .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-restaurant .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-restaurant .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-restaurant .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-restaurant .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-restaurant .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-restaurant .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-restaurant .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-restaurant .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-restaurant .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-restaurant .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-restaurant .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-restaurant .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-restaurant .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-restaurant .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-restaurant .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-restaurant .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-restaurant .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-restaurant .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-restaurant .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-restaurant .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-restaurant .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-restaurant .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-restaurant .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-restaurant .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-restaurant .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-restaurant .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-restaurant .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-restaurant .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-restaurant .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-restaurant .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-restaurant .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-restaurant .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-restaurant .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-restaurant .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-restaurant .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-restaurant .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-restaurant .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-restaurant .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-restaurant .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-restaurant .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-restaurant .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-restaurant .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-restaurant .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-restaurant .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-restaurant .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-restaurant .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-restaurant .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-restaurant .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-restaurant .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-restaurant .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-restaurant .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-restaurant .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-restaurant .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-restaurant .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-restaurant #restaurant-rfid .featureStage,
#dreamz-restaurant #restaurant-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-restaurant #restaurant-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-restaurant .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-restaurant #restaurant-rfid .featureStage,
#dreamz-restaurant #restaurant-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-restaurant .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-restaurant .mfgGallery .freshWindow {
height: auto;
}
#dreamz-restaurant .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-restaurant .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-restaurant .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-restaurant .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-restaurant .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-restaurant .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-restaurant .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-restaurant .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-restaurant .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-restaurant .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-restaurant .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-restaurant .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-restaurant .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-restaurant .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-restaurant .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-restaurant .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-restaurant .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-restaurant .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-restaurant .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-restaurant .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-restaurant .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-restaurant .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-restaurant .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-restaurant .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-restaurant .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-restaurant .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-restaurant .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-restaurant .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-restaurant .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-restaurant .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-restaurant .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-restaurant .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-restaurant .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-restaurant .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-restaurant .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-restaurant .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-restaurant .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-restaurant .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-restaurant .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-restaurant .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-restaurant .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-restaurant .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-restaurant .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-restaurant .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-restaurant .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-restaurant .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-restaurant .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-restaurant .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-restaurant .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-restaurant .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-restaurant .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-restaurant .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-restaurant .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-restaurant .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-restaurant .restaurantVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-restaurant .restaurantGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-restaurant .restaurantIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-restaurant .restaurantStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-restaurant .restaurantVisualGallery>.restaurantGraphic {
display: none;
}
#dreamz-restaurant #restaurant-maintenance .featureStage,
#dreamz-restaurant #restaurant-rfid .featureStage,
#dreamz-restaurant #restaurant-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-restaurant #restaurant-rfid .restaurantVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-restaurant #restaurant-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-restaurant .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-restaurant .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-restaurant .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-restaurant .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-restaurant .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-restaurant #restaurant-maintenance .featureStage,
#dreamz-restaurant #restaurant-rfid .featureStage,
#dreamz-restaurant #restaurant-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-restaurant #restaurant-rfid .restaurantVisualGallery,
#dreamz-restaurant #restaurant-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-restaurant .mfgHeroScene {
height: 290px;
}
#dreamz-restaurant #restaurant-maintenance .featureStage,
#dreamz-restaurant #restaurant-rfid .featureStage,
#dreamz-restaurant #restaurant-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-restaurant .restaurantVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-restaurant .restaurantVisualGallery>.restaurantGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-restaurant #restaurant-maintenance-features-1:checked~.featureStage .restaurantVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-2:checked~.featureStage .restaurantVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-3:checked~.featureStage .restaurantVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-4:checked~.featureStage .restaurantVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-restaurant #restaurant-maintenance-features-5:checked~.featureStage .restaurantVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-1:checked~.featureStage .restaurantVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-2:checked~.featureStage .restaurantVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-3:checked~.featureStage .restaurantVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-4:checked~.featureStage .restaurantVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-restaurant #restaurant-rfid-features-5:checked~.featureStage .restaurantVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-1:checked~.featureStage .restaurantVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-2:checked~.featureStage .restaurantVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-3:checked~.featureStage .restaurantVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-4:checked~.featureStage .restaurantVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-restaurant #restaurant-ai-decisions-features-5:checked~.featureStage .restaurantVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-restaurant .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-restaurant .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-restaurant .restaurantIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-restaurant .restaurantGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-restaurant .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-restaurant .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-restaurant .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-restaurant .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-restaurant .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-restaurant .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-restaurant .restaurantIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
#dreamz-restaurant .restaurantGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
#dreamz-restaurant .restaurantVisualGallery {
min-height: 0;
}
#dreamz-restaurant .restaurantIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
#dreamz-restaurant .mfgHeroScene img {
object-position: 90% 50%;
}
}
@media(max-width:767px) {
#dreamz-restaurant .featureContent {
order: 2;
}
#dreamz-restaurant .mfgHeroScene {
display: none;
}
}
#dreamz-restaurant .nav-link {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5) !important;
}  #dreamz-education .industryIntroHead.compact,
#dreamz-education .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-education .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-education .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-education .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-education .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-education .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-education .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-education .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-education .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-education .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-education .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-education .windowDots {
display: flex;
gap: 5px;
}
#dreamz-education .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-education .windowBody {
padding: 16px;
}
#dreamz-education .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-education .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-education .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-education .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-education .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-education .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-education .chartGridLine.l1 {
top: 34px;
}
#dreamz-education .chartGridLine.l2 {
top: 65px;
}
#dreamz-education .chartGridLine.l3 {
top: 96px;
}
#dreamz-education .chartGridLine.l4 {
top: 127px;
}
#dreamz-education .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-education .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-education .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-education .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-education .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-education .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-education .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-education .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-education .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-education .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-education .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-education .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-education .noteCard p,
#dreamz-education .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-education .alertStack {
display: grid;
gap: 10px;
}
#dreamz-education .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-education .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-education .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-education .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-education .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-education .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-education .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-education .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-education .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-education .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-education .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-education .scheduleBoard h4,
#dreamz-education .todoBoard h4,
#dreamz-education .siteBoard h4,
#dreamz-education .chatPanel h4,
#dreamz-education .lessonPanel h4,
#dreamz-education .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-education .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-education .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-education .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-education .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-education .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-education .taskRow:last-child {
border-bottom: 0;
}
#dreamz-education .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-education .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-education .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-education .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-education .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-education .inventoryTable th,
#dreamz-education .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-education .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-education .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-education .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-education .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-education .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-education .phoneBody {
padding: 12px;
}
#dreamz-education .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-education .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-education .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-education .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-education .progressList {
display: grid;
gap: 10px;
}
#dreamz-education .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-education .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-education .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-education .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-education .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-education .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-education .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-education .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-education .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-education .pin1 {
top: 56px;
left: 58px;
}
#dreamz-education .pin2 {
top: 88px;
right: 88px;
}
#dreamz-education .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-education .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-education .siteRow:last-child {
border-bottom: 0;
}
#dreamz-education .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-education .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-education .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-education .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-education .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-education .graphNodes:before,
#dreamz-education .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-education .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-education .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-education .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-education .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-education .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-education .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-education .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-education .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-education .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-education .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-education .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-education .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-education .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-education .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-education .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-education .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-education .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-education .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-education .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-education .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-education .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-education .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-education .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-education .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-education .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-education .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-education .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-education .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-education .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-education .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-education .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-education .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-education .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-education #education-maintenance-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-education #education-maintenance-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-education #education-maintenance-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-education #education-maintenance-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-education #education-maintenance-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-education #education-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-education #education-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-education #education-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-education #education-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-education #education-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-education #education-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-education #education-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-education #education-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-education #education-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-education #education-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-education #education-maintenance-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-education #education-maintenance-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-education #education-maintenance-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-education #education-maintenance-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-education #education-maintenance-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-education #education-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-education #education-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-education #education-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-education #education-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-education #education-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-education #education-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-education #education-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-education #education-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-education #education-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-education #education-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-education .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-education .featureMediaPanels {
min-height: 0;
}
#dreamz-education .inventorySplit,
#dreamz-education .forecastGrid,
#dreamz-education .siteGrid,
#dreamz-education .spectrumGrid,
#dreamz-education .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-education .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-education .metricGrid,
#dreamz-education .lessonCards,
#dreamz-education .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-education .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-education .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-education {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-education * {
box-sizing: border-box;
}
#dreamz-education {
scroll-behavior: smooth;
}
#dreamz-education {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-education a {
color: inherit;
text-decoration: none;
}
#dreamz-education .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-education .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-education .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-education .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-education .brand span {
color: var(--brand);
}
#dreamz-education .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-education .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-education .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-education .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-education .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-education .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-education .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-education .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-education .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-education .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-education .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-education .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-education .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-education .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-education .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-education .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-education .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-education .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-education .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-education .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-education .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-education .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-education .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-education .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-education .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-education .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-education .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-education .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-education .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-education .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-education .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-education .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-education .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-education .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-education .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-education .sectionHead {
margin-bottom: 44px;
}
#dreamz-education .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-education .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-education .aiJourney h2 {
color: #fff;
}
#dreamz-education .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-education .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-education .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-education .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-education .aiStep:last-child::after {
display: none;
}
#dreamz-education .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-education .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-education .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-education .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-education .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-education .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-education .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-education .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-education .capability {
background: #fff;
}
#dreamz-education .capability.alt {
background: var(--sky-2);
}
#dreamz-education .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-education .twoCol.reverse .visual {
order: 2;
}
#dreamz-education .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-education .visual .placeholder {
min-height: 355px;
}
#dreamz-education .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-education .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-education details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-education details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-education details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-education details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-education details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-education details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-education .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-education .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-education .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-education .darkSection h2,
#dreamz-education .darkSection h3 {
color: #fff;
}
#dreamz-education .darkSection .sectionHead p,
#dreamz-education .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-education .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-education .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-education .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-education .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-education .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-education .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-education .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-education .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-education .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-education .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-education .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-education .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-education .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-education .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-education .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-education .benefitBand h2 {
color: #fff;
}
#dreamz-education .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-education .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-education .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-education .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-education .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-education .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-education .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-education .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-education .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-education .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-education .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-education .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-education .faq {
max-width: 900px;
}
#dreamz-education details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
#dreamz-education summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
#dreamz-education details p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-education .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-education .ctaPanel h2 {
color: #fff;
}
#dreamz-education .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-education .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-education .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-education .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-education .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-education .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-education .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-education .inlineCta.dark h3 {
color: #fff;
}
#dreamz-education .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-education .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-education .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-education .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-education .button.yellow:hover {
background: #FFD84D;
}
#dreamz-education .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-education .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-education .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-education .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-education footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-education .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-education .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-education .heroGrid,
#dreamz-education .twoCol,
#dreamz-education .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-education .twoCol.reverse .visual {
order: initial;
}
#dreamz-education .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-education .ratingGrid,
#dreamz-education .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-education .ratingLead,
#dreamz-education .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-education .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-education .aiStep:nth-child(3)::after,
#dreamz-education .aiStep:last-child::after {
display: none;
}
#dreamz-education .outcomeGrid,
#dreamz-education .challengeGrid,
#dreamz-education .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-education .cards,
#dreamz-education .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-education .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-education .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-education .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-education .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-education .hero {
padding: 58px 0 52px;
}
#dreamz-education .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-education .aiStep::after {
display: none;
}
#dreamz-education .logoRow,
#dreamz-education .ratingGrid,
#dreamz-education .awardGrid,
#dreamz-education .outcomeGrid,
#dreamz-education .challengeGrid,
#dreamz-education .benefitGrid,
#dreamz-education .cards,
#dreamz-education .proofCards,
#dreamz-education .integrationGrid,
#dreamz-education .featureList {
grid-template-columns: 1fr;
}
#dreamz-education .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-education .ctaPanel {
padding: 34px 24px;
}
#dreamz-education .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-education .inlineCtaActions {
width: 100%;
}
#dreamz-education .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-education {
--muted: #526A7C;
--shadow: none;
}
#dreamz-education {
background: var(--sky-2);
}
#dreamz-education p {
margin-bottom: 0;
}
#dreamz-education [id] {
scroll-margin-top: 94px;
}
#dreamz-education svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-education .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-education .darkSection h2,
#dreamz-education .darkSection h3,
#dreamz-education .aiJourney h2,
#dreamz-education .benefitBand h2,
#dreamz-education .ctaPanel h2,
#dreamz-education .inlineCta.dark h3 {
color: #fff;
}
#dreamz-education .wrap>*,
#dreamz-education .heroGrid>*,
#dreamz-education .twoCol>*,
#dreamz-education .ctaPanel>* {
min-width: 0;
}
#dreamz-education .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-education .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-education .skipLink:focus {
transform: none;
}
#dreamz-education a:focus-visible,
#dreamz-education summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-education .darkSection a:focus-visible,
#dreamz-education .darkSection summary:focus-visible,
#dreamz-education .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-education .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-education .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-education .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-education .brandName>span {
color: var(--brand-dark);
}
#dreamz-education .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-education .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-education .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-education .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-education .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-education .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-education .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-education .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-education .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-education .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-education .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-education .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-education .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-education .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-education .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-education .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-education .clientBand {
padding: 27px 0;
}
#dreamz-education .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-education .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-education .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-education .logoBox.wide {
font-size: 12px;
}
#dreamz-education .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-education h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-education .sectionHead {
margin-bottom: 36px;
}
#dreamz-education .eyebrow {
line-height: 1.5;
}
#dreamz-education .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-education .aiStep {
min-height: 162px;
}
#dreamz-education .aiStep strong {
line-height: 1.35;
}
#dreamz-education .aiStep span {
line-height: 1.65;
}
#dreamz-education .aiCallout {
margin-top: 24px;
}
#dreamz-education .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-education .outcome>.icon {
color: var(--navy);
}
#dreamz-education .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-education .twoCol.reverse .visual {
order: -1;
}
#dreamz-education .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-education .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-education .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-education .featureList {
gap: 13px 18px;
}
#dreamz-education .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-education .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-education .check .icon {
width: 14px;
height: 14px;
}
#dreamz-education details.capabilityMore {
margin-bottom: 0;
}
#dreamz-education .capabilityMore summary {
min-height: 34px;
}
#dreamz-education .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-education .textCta {
font-size: 14px;
}
#dreamz-education .visual {
min-width: 0;
}
#dreamz-education .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-education .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-education .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-education .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-education .panelBody {
padding: 20px;
}
#dreamz-education .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-education .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-education .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-education .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-education .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-education .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-education .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-education .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-education .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-education .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-education .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-education .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-education .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-education .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-education .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-education .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-education .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-education .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-education .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-education .dataRow:last-child {
border-bottom: 0;
}
#dreamz-education .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-education .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-education .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-education .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-education .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-education .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-education .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-education .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-education .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-education .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-education .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-education .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-education .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-education .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-education .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-education .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-education .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-education .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-education .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-education .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-education .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-education .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-education .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-education .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-education .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-education .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-education .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-education .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-education .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-education .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-education .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-education .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-education .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-education .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-education .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-education .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-education .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-education .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-education .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-education .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-education .promptList {
display: grid;
gap: 10px;
}
#dreamz-education .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-education .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-education .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-education .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-education .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-education .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-education .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-education .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-education .quoteTable th,
#dreamz-education .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-education .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-education .quoteTable td:first-child {
width: 64%;
}
#dreamz-education .quoteTable th:last-child,
#dreamz-education .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-education .quoteTable strong {
font-size: 11px;
}
#dreamz-education .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-education .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-education .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-education .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-education .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-education .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-education .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-education .orderJourney {
margin: 20px 0;
}
#dreamz-education .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-education .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-education .journeyRow:last-child:before {
display: none;
}
#dreamz-education .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-education .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-education .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-education .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-education .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-education .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-education .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-education .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-education .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-education .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-education .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-education .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-education .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-education .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-education .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-education .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-education .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-education .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-education .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-education .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-education .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-education .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-education .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-education .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-education .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-education .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-education .customerTimeline strong {
color: #fff;
}
#dreamz-education .customerTimeline small {
color: #BFBFBF;
}
#dreamz-education .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-education .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-education .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-education .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-education .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-education .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-education .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-education .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-education .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-education .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-education .chartTitle strong {
font-size: 12px;
}
#dreamz-education .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-education .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-education .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-education .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-education .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-education .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-education .inlineCtaActions {
max-width: 42%;
}
#dreamz-education .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-education .inlineCta h3 {
line-height: 1.35;
}
#dreamz-education .card {
box-shadow: none;
}
#dreamz-education .cardIcon {
box-shadow: none;
}
#dreamz-education .card h3 {
font-size: 22px;
}
#dreamz-education .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-education .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-education .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-education .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-education .ratingBand {
padding: 34px 0;
}
#dreamz-education .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-education .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-education .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-education .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-education .ratingItem:first-child {
border-left: 0;
}
#dreamz-education .proofCard h3 {
font-size: 23px;
}
#dreamz-education .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-education .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-education .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-education .integration {
min-height: 98px;
}
#dreamz-education .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-education .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-education .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-education .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-education .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-education .finalActions {
display: grid;
gap: 11px;
}
#dreamz-education .finalActions .button {
white-space: nowrap;
}
#dreamz-education .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-education .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-education .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-education .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-education .heroGrid {
gap: 30px;
}
#dreamz-education .twoCol {
gap: 32px;
}
#dreamz-education .panelBody {
padding: 16px;
}
#dreamz-education .panelHead {
padding: 16px;
}
#dreamz-education .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-education .pipelineColumns {
gap: 7px;
}
#dreamz-education .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-education .heroGrid,
#dreamz-education .twoCol,
#dreamz-education .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .heroGrid {
gap: 36px;
}
#dreamz-education .hero h1 {
max-width: 730px;
}
#dreamz-education .hero .lead {
max-width: 690px;
}
#dreamz-education .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-education .twoCol {
gap: 34px;
}
#dreamz-education .twoCol.reverse .visual {
order: initial;
}
#dreamz-education .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-education .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-education .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-education .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-education .ratingSectionGrid {
gap: 20px;
}
#dreamz-education .inlineCta {
align-items: flex-start;
}
#dreamz-education .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-education .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-education .card {
padding: 22px;
}
#dreamz-education .card h3 {
font-size: 21px;
}
#dreamz-education .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-education .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-education .cards,
#dreamz-education .proofCards {
grid-template-columns: 1fr;
}
#dreamz-education .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-education .inlineCta {
flex-direction: column;
}
#dreamz-education .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-education .inlineCtaActions .button {
flex: 1;
}
#dreamz-education .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-education .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-education .wrap {
width: calc(100% - 32px);
}
#dreamz-education [id] {
scroll-margin-top: 82px;
}
#dreamz-education .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-education .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-education .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-education .hero {
padding: 51px 0 48px;
}
#dreamz-education .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-education .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-education .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-education .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-education .hero .microcopy {
font-size: 11px;
}
#dreamz-education .heroPills span {
font-size: 9px;
}
#dreamz-education .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-education .sectionHead p {
font-size: 16px;
}
#dreamz-education .copy h2 {
font-size: 34px;
}
#dreamz-education .copy p {
font-size: 15px;
}
#dreamz-education .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-education .logoBox {
min-height: 53px;
}
#dreamz-education .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-education .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-education .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-education .aiStep strong {
font-size: 13px;
}
#dreamz-education .aiStep span {
font-size: 11px;
}
#dreamz-education .aiStep::after {
display: none;
}
#dreamz-education .outcomeGrid,
#dreamz-education .challengeGrid,
#dreamz-education .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-education .outcome {
padding: 24px;
}
#dreamz-education .outcome strong {
font-size: 22px;
}
#dreamz-education .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-education .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-education .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-education .featureList,
#dreamz-education .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-education .featureItem {
font-size: 13px;
}
#dreamz-education .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-education .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-education .panelHead {
padding: 15px 13px;
}
#dreamz-education .panelHead>strong {
font-size: 12px;
}
#dreamz-education .panelBody {
padding: 14px;
}
#dreamz-education .productPanel {
border-radius: 16px;
}
#dreamz-education .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-education .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-education .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-education .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-education .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-education .deal strong {
font-size: 10px;
}
#dreamz-education .deal small {
font-size: 9px;
}
#dreamz-education .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-education .mobileWorkspace {
gap: 12px;
}
#dreamz-education .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-education .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-education .sideTile {
padding: 10px;
}
#dreamz-education .sideTile strong {
font-size: 10px;
}
#dreamz-education .sideTile p {
font-size: 9px;
}
#dreamz-education .mobileHeader strong {
font-size: 15px;
}
#dreamz-education .mobileAccount strong {
font-size: 10px;
}
#dreamz-education .mobileAccount small {
font-size: 7px;
}
#dreamz-education .phoneDevice .rowIcon {
display: none;
}
#dreamz-education .quoteTable th,
#dreamz-education .quoteTable td {
padding: 12px 4px;
}
#dreamz-education .quoteTable strong {
font-size: 10px;
}
#dreamz-education .quoteTable small {
font-size: 8px;
}
#dreamz-education .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-education .docHeader strong {
font-size: 17px;
}
#dreamz-education .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-education .miniFlow span {
padding: 6px;
}
#dreamz-education .rowCopy strong {
font-size: 10px;
}
#dreamz-education .rowCopy small {
font-size: 8px;
}
#dreamz-education .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-education .miniStats {
gap: 7px;
}
#dreamz-education .miniStats>div {
padding: 9px;
}
#dreamz-education .miniStats strong {
font-size: 18px;
}
#dreamz-education .miniStats span {
font-size: 8px;
}
#dreamz-education .collectionStats>div {
padding: 13px;
}
#dreamz-education .collectionStats strong {
font-size: 24px;
}
#dreamz-education .customerHeader strong {
font-size: 17px;
}
#dreamz-education .customerFacts>div {
padding: 10px;
}
#dreamz-education .customerFacts strong {
font-size: 12px;
}
#dreamz-education .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-education .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-education .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-education .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-education .integration small {
font-size: 9px;
}
#dreamz-education .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-education .ctaPanel p {
font-size: 15px;
}
#dreamz-education .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-education .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-education .contextSection {
padding: 0 0 24px;
}
#dreamz-education .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-education .wrap {
width: calc(100% - 24px);
}
#dreamz-education .brand {
font-size: 18px;
}
#dreamz-education .brandMark {
width: 25px;
height: 25px;
}
#dreamz-education .hero h1 {
font-size: 38px;
}
#dreamz-education .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-education .copy h2 {
font-size: 31px;
}
#dreamz-education .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-education .phoneDevice {
width: 210px;
}
#dreamz-education .phoneDevice .rowIcon {
display: grid;
}
#dreamz-education .mobileSide {
gap: 8px;
}
#dreamz-education .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-education .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-education .sideTile p {
margin: 0;
}
#dreamz-education .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-education .collectionStats strong {
font-size: 21px;
}
#dreamz-education .inventoryIntro strong {
font-size: 14px;
}
#dreamz-education .dataRow {
gap: 7px;
}
#dreamz-education .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-education .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-education {
scroll-behavior: auto;
}
#dreamz-education *,
#dreamz-education *::before,
#dreamz-education *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-education {
background: var(--sky-2);
}
#dreamz-education .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-education .hero .eyebrow {
max-width: 100%;
}
#dreamz-education .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-education .ganttIllustration,
#dreamz-education .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-education .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-education .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-education .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-education .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-education .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-education .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-education .comparisonTable th,
#dreamz-education .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-education .comparisonTable th:first-child {
width: 23%;
}
#dreamz-education .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-education .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-education .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-education .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-education .card,
#dreamz-education .proofCard,
#dreamz-education .productPanel,
#dreamz-education .outcome,
#dreamz-education .benefit {
box-shadow: none;
}
#dreamz-education .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-education .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-education .hero .eyebrow {
font-size: 10px;
}
#dreamz-education .comparisonTable {
font-size: 11px;
}
#dreamz-education .comparisonTable th,
#dreamz-education .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-education .comparisonTable th:first-child {
width: 24%;
}
#dreamz-education .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-education .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-education .hero h1 {
font-size: 38px;
}
}
#dreamz-education .scheduleIllustration,
#dreamz-education .analyticsIllustration,
#dreamz-education .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-education .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-education .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-education .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-education .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-education .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-education .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-education .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-education .darkSection .textCta {
color: var(--yellow);
}
#dreamz-education .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-education .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-education .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-education .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-education .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-education .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-education .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-education .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-education .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-education .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-education .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-education .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-education .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-education .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-education .phoneDevice {
max-width: 100%;
}
#dreamz-education .heroPills {
line-height: 1.55;
}
#dreamz-education .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-education .plantFacts {
gap: 7px;
}
#dreamz-education .plantFacts>div {
padding: 9px;
}
#dreamz-education .plantFacts strong {
font-size: 11px;
}
#dreamz-education .scanSummary {
padding: 12px;
}
#dreamz-education .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-education .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-education .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-education .phoneDevice .rowIcon {
display: grid;
}
#dreamz-education .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-education .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-education .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-education .sideTile strong {
font-size: 12px;
}
#dreamz-education .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-education .topbar,
#dreamz-education .heroActions,
#dreamz-education .finalActions,
#dreamz-education .contextSection,
#dreamz-education .valueCtaSection {
display: none;
}
#dreamz-education section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-education .hero {
padding-top: 20px;
}
}
#dreamz-education {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-education p {
margin: 0;
}
#dreamz-education main {
display: block;
}
#dreamz-education .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-education .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-education .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-education .heroAccent {
color: var(--black);
}
#dreamz-education .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-education .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-education .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-education .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-education .microcopy {
margin-top: 14px;
}
#dreamz-education .heroPills {
margin-top: 13px;
}
#dreamz-education .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-education .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-education .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-education .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-education .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-education .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-education .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-education .clientBand {
padding: 24px 0;
}
#dreamz-education .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-education .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-education .logoBox.wide {
font-size: 15px;
}
#dreamz-education .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-education .sectionHead p {
margin: 17px 0 0;
}
#dreamz-education .copy p {
margin: 16px 0 0;
}
#dreamz-education .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-education .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-education .aiJourney {
background: var(--black);
}
#dreamz-education .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-education .productPanel {
border-radius: 18px;
}
#dreamz-education .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-education .panelHead>strong {
font-size: 13px;
}
#dreamz-education .sampleTag {
font-size: 9px;
}
#dreamz-education .panelBody {
padding: 21px;
}
#dreamz-education .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-education .docHeader {
padding-bottom: 16px;
}
#dreamz-education .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-education .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-education .smallLabel {
font-size: 9px;
}
#dreamz-education .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-education .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-education .dataRow {
padding: 14px 0;
}
#dreamz-education .statusPill {
font-size: 8px;
}
#dreamz-education .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-education .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-education .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-education .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-education .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-education .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-education .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-education .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-education .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-education .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-education .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-education .hierarchy strong {
color: var(--navy);
}
#dreamz-education .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-education .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-education .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-education .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-education .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-education .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-education .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-education .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-education .mobileAccount small {
font-size: 9px;
}
#dreamz-education .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-education .sideTile strong {
font-size: 12px;
}
#dreamz-education .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-education .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-education .mobileAction {
font-size: 9px;
}
#dreamz-education .journeyRow strong {
font-size: 13px;
}
#dreamz-education .journeyRow small {
font-size: 11px;
}
#dreamz-education .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-education .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-education .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-education .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-education .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-education .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-education .utilityReadout small {
font-size: 12px;
}
#dreamz-education .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-education .darkSection {
background: var(--black);
}
#dreamz-education .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-education .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-education .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-education .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-education .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-education .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-education .assistantHead small {
font-size: 11px;
}
#dreamz-education .assistantNote {
font-size: 11px;
}
#dreamz-education .reportTags span {
font-size: 10px;
}
#dreamz-education .card p {
margin: 12px 0 0;
}
#dreamz-education .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-education .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-education .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-education .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-education .cards>.card p {
padding-bottom: 22px;
}
#dreamz-education .benefitBand {
background: var(--black);
}
#dreamz-education .benefit {
background: var(--black-soft);
}
#dreamz-education .inlineCta h3 {
font-size: 20px;
}
#dreamz-education .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-education .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-education .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-education .valueCtaSection {
padding: 32px 0;
}
#dreamz-education .proofCard p {
margin-top: 15px;
}
#dreamz-education .proofCard h3 {
font-size: 23px;
}
#dreamz-education .integrationNote {
margin-top: 23px;
}
#dreamz-education .ctaPanel {
background: var(--black);
}
#dreamz-education .ctaPanel p {
margin-top: 16px;
}
#dreamz-education .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-education .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-education a:hover {
text-decoration: none;
}
#dreamz-education .textCta:hover {
color: var(--navy);
}
#dreamz-education .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-education .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-education .hero h1 {
font-size: 49px;
}
#dreamz-education .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-education .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-education .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-education .hero h1 {
font-size: 58px;
}
#dreamz-education .heroVisual {
max-width: 548px;
}
#dreamz-education .hero .lead {
max-width: 700px;
}
#dreamz-education .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-education .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-education .logoBox:last-child {
grid-column: auto;
}
#dreamz-education .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-education .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-education .inlineCtaActions .button {
flex: 1;
}
#dreamz-education .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-education .hero {
padding: 28px 0 40px;
}
#dreamz-education .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-education .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-education .heroActions {
gap: 10px;
}
#dreamz-education .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-education .breadcrumb {
margin-bottom: 21px;
}
#dreamz-education .hero .eyebrow {
font-size: 11px;
}
#dreamz-education .heroVisual {
max-width: 480px;
}
#dreamz-education .heroPills {
row-gap: 9px;
}
#dreamz-education .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-education .heroPills span+span {
padding-left: 7px;
}
#dreamz-education .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-education .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-education .clientBand {
padding: 25px 0;
}
#dreamz-education .copy h2 {
font-size: 33px;
}
#dreamz-education .panelBody {
padding: 16px;
}
#dreamz-education .panelHead {
padding: 15px;
}
#dreamz-education .panelHead>strong {
font-size: 12px;
}
#dreamz-education .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-education .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-education .docHeader strong {
font-size: 18px;
}
#dreamz-education .docHeader small {
font-size: 10px;
}
#dreamz-education .rowCopy strong {
font-size: 11px;
}
#dreamz-education .rowCopy small {
font-size: 10px;
}
#dreamz-education .miniStats {
gap: 7px;
}
#dreamz-education .miniStats strong {
font-size: 21px;
}
#dreamz-education .miniStats span {
font-size: 9px;
}
#dreamz-education .miniStats>div {
padding: 10px 8px;
}
#dreamz-education .plantFacts {
gap: 8px;
}
#dreamz-education .plantFacts>div {
padding: 10px;
}
#dreamz-education .plantFacts strong {
font-size: 11px;
}
#dreamz-education .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-education .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-education .utilityReadout span {
font-size: 8px;
}
#dreamz-education .utilityReadout strong {
font-size: 24px;
}
#dreamz-education .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-education .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-education .comparisonTable {
font-size: 11px;
}
#dreamz-education .comparisonTable th,
#dreamz-education .comparisonTable td {
padding: 13px 9px;
}
#dreamz-education .contextSection {
padding: 0 0 22px;
}
#dreamz-education .valueCtaSection {
padding: 25px 0;
}
#dreamz-education .inlineCtaActions {
flex-direction: column;
}
#dreamz-education .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-education .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-education .phoneDevice {
width: 222px;
}
#dreamz-education .phoneDevice .rowIcon {
display: grid;
}
#dreamz-education .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-education .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-education .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-education .sideTile p {
margin: 0;
}
#dreamz-education .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-education .dataRow {
gap: 8px;
}
#dreamz-education .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-education .miniStats strong {
font-size: 19px;
}
#dreamz-education .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-education .heroActions .button {
width: 100%;
}
#dreamz-education .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-education .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-education .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-education .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-education .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-education .aiStep span {
font-size: 13px;
}
#dreamz-education .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-education {
background: var(--white);
}
#dreamz-education img {
display: block;
max-width: 100%;
}
#dreamz-education h1,
#dreamz-education h2,
#dreamz-education h3 {
text-wrap: balance;
}
#dreamz-education .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-education .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-education .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-education .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-education .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-education .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-education .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-education .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-education .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-education .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-education .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-education .industryIntro {
padding: 78px 0 66px;
}
#dreamz-education .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-education .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-education .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-education .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-education .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-education .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-education .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-education .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-education .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-education .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-education .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-education .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-education .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-education .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-education .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-education .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-education .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-education .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-education .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-education .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-education .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-education .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-education .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-education .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-education .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-education .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-education .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-education .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-education .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-education .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-education .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-education .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-education .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-education .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-education .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-education .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-education .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-education .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-education .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-education .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-education .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-education .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-education .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-education .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-education .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-education .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-education .rfidSpotlight {
background: #fff;
}
#dreamz-education .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-education .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-education .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-education .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-education .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-education .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-education .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-education .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-education .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-education .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-education .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-education .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-education .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-education .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-education .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-education .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-education .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-education .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-education .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-education .featurePanel {
display: none;
}
#dreamz-education .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-education .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-education .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-education .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-education .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-education .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-education .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-education .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-education .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-education .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-education .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-education .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-education .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-education .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-education .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-education .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-education .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-education .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-education .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-education .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-education .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-education .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-education .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-education .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-education .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-education .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-education .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-education .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-education .aiReviewBody {
padding: 18px;
}
#dreamz-education .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-education .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-education .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-education .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-education .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-education .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-education .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-education .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-education .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-education .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-education .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-education .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-education .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-education .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-education .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-education .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-education .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-education .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-education .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-education .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-education .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-education .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-education .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-education .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-education .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-education .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-education .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-education .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-education .workflowDetails .featureList,
#dreamz-education .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-education .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-education .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-education .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-education #education-connected-tools {
background: #fff;
}
#dreamz-education #education-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-education .featureTab,
#dreamz-education .industryPriority,
#dreamz-education summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-education .industryIntroHead {
gap: 30px;
}
#dreamz-education .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-education .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-education .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-education .factoryWorkflow {
padding: 22px;
}
#dreamz-education .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-education .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-education .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-education .industryPriorityGrid {
gap: 14px;
}
#dreamz-education .industryPriority {
padding: 22px 19px;
}
#dreamz-education .industryPriority h3 {
font-size: 21px;
}
#dreamz-education .industryPriority p {
font-size: 12px;
}
#dreamz-education .priorityLink {
font-size: 10px;
}
#dreamz-education .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-education .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-education .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-education .vedaUseCases>div {
display: block;
}
#dreamz-education .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-education .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-education .featureTabs {
gap: 8px;
}
#dreamz-education .featureTab {
min-height: 108px;
}
#dreamz-education .featureStage,
#dreamz-education .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-education .rfidSpotlight .spotlightMedia,
#dreamz-education .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-education .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-education .featurePanel {
min-height: 0;
}
#dreamz-education .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-education .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-education .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-education .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-education .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-education .clientBand {
padding: 22px 0;
}
#dreamz-education .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-education .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-education .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-education .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-education .industryIntro {
padding: 53px 0;
}
#dreamz-education .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-education .industryIntroHead>p {
font-size: 14px;
}
#dreamz-education .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-education .industryPriority {
padding: 23px;
}
#dreamz-education .industryPriority h3 {
font-size: 24px;
}
#dreamz-education .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-education .industryPriority p {
font-size: 13px;
}
#dreamz-education .priorityLink {
font-size: 11px;
}
#dreamz-education .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-education .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-education .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-education .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-education .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-education .vedaUseCases>div {
display: flex;
}
#dreamz-education .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-education .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-education .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-education .vedaMessage.user {
margin-left: 25px;
}
#dreamz-education .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-education .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-education .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-education .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-education .spotlightHead h2 {
font-size: 32px;
}
#dreamz-education .spotlightHead>p {
font-size: 14px;
}
#dreamz-education .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-education .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-education .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-education .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-education .featurePanel h3 {
font-size: 24px;
}
#dreamz-education .featurePanel>p {
font-size: 13px;
}
#dreamz-education .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-education .spotlightChecks>li {
font-size: 12px;
}
#dreamz-education .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-education .spotlightActions .button {
width: 100%;
}
#dreamz-education .spotlightScope {
font-size: 10px;
}
#dreamz-education .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-education .mediaTitle strong {
font-size: 11px;
}
#dreamz-education .mediaTitle div>span {
font-size: 8px;
}
#dreamz-education .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-education .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-education .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-education .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-education .aiReviewBody {
padding: 13px;
}
#dreamz-education .aiIssue {
padding: 13px;
}
#dreamz-education .aiIssue strong {
font-size: 14px;
}
#dreamz-education .aiEvidence {
gap: 6px;
}
#dreamz-education .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-education .aiEvidence strong {
font-size: 9px;
}
#dreamz-education .aiEvidence span {
font-size: 7px;
}
#dreamz-education .exampleLabel {
font-size: 6px;
}
#dreamz-education .factoryWorkflows {
padding: 55px 0;
}
#dreamz-education .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-education .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-education .industryRibbonGrid {
gap: 12px;
}
#dreamz-education .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-education .spotlightHead h2 {
font-size: 29px;
}
#dreamz-education .featureStage {
padding: 19px 13px;
}
#dreamz-education .mediaTitle>.icon {
display: none;
}
#dreamz-education .exampleLabel {
display: none;
}
#dreamz-education .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-education .featureTabs {
display: none;
}
#dreamz-education .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-education .featureStage {
display: block;
}
#dreamz-education .featurePanel {
color: #000;
}
}
#dreamz-education #education-maintenance-features-1:checked~.featureTabs label[for="education-maintenance-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-maintenance-features-1:focus-visible~.featureTabs label[for="education-maintenance-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-maintenance-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-education #education-maintenance-features-2:checked~.featureTabs label[for="education-maintenance-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-maintenance-features-2:focus-visible~.featureTabs label[for="education-maintenance-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-maintenance-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-education #education-maintenance-features-3:checked~.featureTabs label[for="education-maintenance-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-maintenance-features-3:focus-visible~.featureTabs label[for="education-maintenance-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-maintenance-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-education #education-maintenance-features-4:checked~.featureTabs label[for="education-maintenance-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-maintenance-features-4:focus-visible~.featureTabs label[for="education-maintenance-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-maintenance-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-education #education-maintenance-features-5:checked~.featureTabs label[for="education-maintenance-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-maintenance-features-5:focus-visible~.featureTabs label[for="education-maintenance-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-maintenance-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-education #education-rfid-features-1:checked~.featureTabs label[for="education-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-rfid-features-1:focus-visible~.featureTabs label[for="education-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-education #education-rfid-features-2:checked~.featureTabs label[for="education-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-rfid-features-2:focus-visible~.featureTabs label[for="education-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-education #education-rfid-features-3:checked~.featureTabs label[for="education-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-rfid-features-3:focus-visible~.featureTabs label[for="education-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-education #education-rfid-features-4:checked~.featureTabs label[for="education-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-rfid-features-4:focus-visible~.featureTabs label[for="education-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-education #education-rfid-features-5:checked~.featureTabs label[for="education-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-rfid-features-5:focus-visible~.featureTabs label[for="education-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-education #education-ai-decisions-features-1:checked~.featureTabs label[for="education-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-ai-decisions-features-1:focus-visible~.featureTabs label[for="education-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-education #education-ai-decisions-features-2:checked~.featureTabs label[for="education-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-ai-decisions-features-2:focus-visible~.featureTabs label[for="education-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-education #education-ai-decisions-features-3:checked~.featureTabs label[for="education-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-ai-decisions-features-3:focus-visible~.featureTabs label[for="education-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-education #education-ai-decisions-features-4:checked~.featureTabs label[for="education-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-ai-decisions-features-4:focus-visible~.featureTabs label[for="education-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-education #education-ai-decisions-features-5:checked~.featureTabs label[for="education-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-education #education-ai-decisions-features-5:focus-visible~.featureTabs label[for="education-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-education #education-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-education .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .featureMediaPanels {
min-width: 0;
}
#dreamz-education .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-education .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-education .featureMediaPanels .windowTop strong,
#dreamz-education .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-education .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-education .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-education .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-education .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-education .featureMediaPanels .windowBody>*,
#dreamz-education .featureMediaPanels .spectrumGrid>*,
#dreamz-education .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-education .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-education .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-education .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-education .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-education .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-education .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-education .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-education .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-education .pin2 {
top: 88px;
right: 88px;
}
#dreamz-education .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-education .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-education .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-education .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-education .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-education .featureMediaPanels .graphNodes .node.n1,
#dreamz-education .featureMediaPanels .graphNodes .node.n2,
#dreamz-education .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-education .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-education .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-education .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-education .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-education .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-education .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-education .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-education .freshGraphic * {
box-sizing: border-box;
}
#dreamz-education .rfPanel,
#dreamz-education .aiInsightCard,
#dreamz-education .forecastVisualCard,
#dreamz-education .forecastSuggestion,
#dreamz-education .knowledgeTile,
#dreamz-education .chatConversation,
#dreamz-education .trainingSummary,
#dreamz-education .moduleCard,
#dreamz-education .qualityHeatCard,
#dreamz-education .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-education .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-education .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-education .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-education .statusPill,
#dreamz-education .cardTag,
#dreamz-education .forecastSuggestion b,
#dreamz-education .moduleCard b,
#dreamz-education .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-education .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-education .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-education .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-education .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-education .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-education .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-education .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-education .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-education .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-education .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-education .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-education .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-education .dot.good {
background: #298EEC;
}
#dreamz-education .dot.warn {
background: #F4A62A;
}
#dreamz-education .dot.bad {
background: #EB6B53;
}
#dreamz-education .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-education .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-education .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-education .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-education .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-education .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-education .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-education .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-education .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-education .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-education .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-education .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-education .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-education .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-education .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-education .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-education .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-education .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-education .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-education .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-education .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-education .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-education .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-education .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-education .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-education .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-education .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-education .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-education .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-education .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-education .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-education .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-education .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-education .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-education .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-education .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-education .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-education .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-education .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-education .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-education .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-education .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-education .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-education .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-education .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-education .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-education .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-education .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-education .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-education .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-education .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-education .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-education .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-education .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-education .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-education .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-education .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-education .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-education .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-education .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-education .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-education .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-education .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-education .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-education .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-education .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-education .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-education .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-education .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-education .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-education .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-education .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-education .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-education .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-education .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-education .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-education .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-education .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-education .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-education .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-education .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-education .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-education .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-education .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-education .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-education .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-education .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-education .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-education .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-education .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-education .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-education .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-education .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-education .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-education .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-education .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-education .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-education .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-education .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-education .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-education .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-education .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-education .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-education .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-education .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-education .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-education .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-education .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-education .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-education .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-education .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-education .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-education .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-education .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-education .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-education .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-education .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-education .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-education .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-education .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-education .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-education .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-education .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-education .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-education .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-education .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-education .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-education .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-education .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-education .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-education .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-education .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-education .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-education .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-education .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-education .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-education .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-education .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-education .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-education .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-education .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-education .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-education .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-education .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-education .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-education .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-education .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-education .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-education .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-education .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-education .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-education .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-education .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-education .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-education .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-education .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-education .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-education .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-education .rfTrackLayout,
#dreamz-education .rfFlowLayout,
#dreamz-education .rfAlertGrid,
#dreamz-education .rfCycleLayout,
#dreamz-education .rfSitesLayout,
#dreamz-education .aiRootLayout,
#dreamz-education .aiForecastLayout,
#dreamz-education .aiChatLayout,
#dreamz-education .aiTrainingLayout,
#dreamz-education .aiQualityLayout,
#dreamz-education .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-education .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-education .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-education .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-education .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-education .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-education .aiLink {
display: none;
}
}
#dreamz-education .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-education .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-education .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-education .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-education .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-education .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-education .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-education .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-education .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-education .mfgHero h1>span {
display: block;
}
#dreamz-education .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-education .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-education .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-education .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-education .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-education .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-education .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-education .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-education .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-education .mfgHeroContent {
min-height: 610px;
}
#dreamz-education .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-education .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-education .mfgHeroLead {
font-size: 16px;
}
#dreamz-education .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-education .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-education .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-education .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-education .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-education .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-education .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-education .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-education .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-education .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-education .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-education .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-education .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-education .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-education .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-education .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-education .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-education .mfgHero {
background: #fff;
color: #000;
}
#dreamz-education .mfgHeroScene,
#dreamz-education .mfgHeroActions {
display: none;
}
#dreamz-education .mfgHeroContent {
min-height: 0;
}
#dreamz-education .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-education .mfgHero h1,
#dreamz-education .mfgHero h1 .mfgHeroAccent,
#dreamz-education .mfgHero p {
color: #000;
}
}
#dreamz-education #education-rfid .featureStage,
#dreamz-education #education-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-education .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-education .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-education .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-education .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-education .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-education .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-education .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-education .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-education .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-education .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-education .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-education .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-education .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-education .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-education .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-education .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-education .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-education .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-education .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-education .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-education .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-education .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-education .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-education .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-education .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-education .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-education .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-education .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-education .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-education .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-education .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-education .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-education .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-education .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-education .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-education .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-education .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-education .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-education .mfgGallery .flowArrow {
display: none;
}
#dreamz-education .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-education .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-education .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-education .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-education .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-education .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-education .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-education .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-education .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-education .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-education .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-education .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-education .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-education .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-education .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-education .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-education .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-education .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-education .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-education .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-education .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-education .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-education .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-education .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-education .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-education .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-education .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-education .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-education .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-education .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-education .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-education .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-education .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-education .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-education .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-education .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-education .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-education .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-education .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-education .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-education .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-education .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-education .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-education .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-education .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-education .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-education .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-education .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-education .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-education .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-education .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-education .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-education .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-education .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-education .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-education .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-education .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-education .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-education .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-education .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-education .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-education .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-education .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-education .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-education .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-education .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-education .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-education .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-education .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-education .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-education .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-education .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-education .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-education .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-education .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-education .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-education .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-education .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-education .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-education .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-education .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-education .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-education .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-education .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-education .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-education .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-education .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-education .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-education .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-education .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-education .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-education .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-education .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-education .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-education .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-education .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-education .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-education .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-education .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-education .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-education .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-education .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-education .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-education .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-education .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-education .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-education .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-education #education-rfid .featureStage,
#dreamz-education #education-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-education #education-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-education .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-education #education-rfid .featureStage,
#dreamz-education #education-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-education .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-education .mfgGallery .freshWindow {
height: auto;
}
#dreamz-education .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-education .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-education .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-education .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-education .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-education .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-education .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-education .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-education .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-education .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-education .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-education .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-education .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-education .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-education .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-education .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-education .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-education .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-education .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-education .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-education .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-education .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-education .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-education .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-education .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-education .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-education .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-education .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-education .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-education .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-education .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-education .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-education .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-education .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-education .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-education .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-education .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-education .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-education .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-education .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-education .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-education .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-education .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-education .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-education .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-education .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-education .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-education .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-education .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-education .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-education .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-education .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-education .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-education .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-education .educationVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-education .educationGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-education .educationIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-education .educationStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-education .educationVisualGallery>.educationGraphic {
display: none;
}
#dreamz-education #education-maintenance .featureStage,
#dreamz-education #education-rfid .featureStage,
#dreamz-education #education-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-education #education-rfid .educationVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-education #education-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-education .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-education .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-education .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-education .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-education .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-education #education-maintenance .featureStage,
#dreamz-education #education-rfid .featureStage,
#dreamz-education #education-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-education #education-rfid .educationVisualGallery,
#dreamz-education #education-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-education .mfgHeroScene {
height: 290px;
}
#dreamz-education #education-maintenance .featureStage,
#dreamz-education #education-rfid .featureStage,
#dreamz-education #education-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-education .educationVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-education .educationVisualGallery>.educationGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-education #education-maintenance-features-1:checked~.featureStage .educationVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-education #education-maintenance-features-2:checked~.featureStage .educationVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-education #education-maintenance-features-3:checked~.featureStage .educationVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-education #education-maintenance-features-4:checked~.featureStage .educationVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-education #education-maintenance-features-5:checked~.featureStage .educationVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-education #education-rfid-features-1:checked~.featureStage .educationVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-education #education-rfid-features-2:checked~.featureStage .educationVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-education #education-rfid-features-3:checked~.featureStage .educationVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-education #education-rfid-features-4:checked~.featureStage .educationVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-education #education-rfid-features-5:checked~.featureStage .educationVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-education #education-ai-decisions-features-1:checked~.featureStage .educationVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-education #education-ai-decisions-features-2:checked~.featureStage .educationVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-education #education-ai-decisions-features-3:checked~.featureStage .educationVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-education #education-ai-decisions-features-4:checked~.featureStage .educationVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-education #education-ai-decisions-features-5:checked~.featureStage .educationVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-education .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-education .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-education .educationIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-education .educationGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-education .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-education .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-education .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-education .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-education .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
#dreamz-education .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-education .educationIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
#dreamz-education .educationGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
#dreamz-education .educationVisualGallery {
min-height: 0;
}
#dreamz-education .educationIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
#dreamz-education .mfgHeroScene img {
object-position: 90% 50%;
}
}
#dreamz-education .educationIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
#dreamz-education .educationGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
#dreamz-education .educationVisualGallery {
min-height: 0;
}
#dreamz-education .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-education .educationIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-education .educationGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
#dreamz-education .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
#dreamz-education .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-education .mfgHeroContent {
background: transparent;
}
#dreamz-education .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-education .educationIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-education .educationGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-education .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-education .mfgHeroScene img {
object-position: 83% 50%;
}
} #dreamz-education .mfgHeroContent {
background: transparent;
}
#dreamz-education .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-education .educationIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-education .educationGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-education .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-education .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:767px) {
#dreamz-education .featureContent {
order: 2;
}
#dreamz-education .mfgHeroScene {
display: none;
}
}
#dreamz-education .nav-link {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5) !important;
}
.new-theme-design .textLink .icon,
.new-theme-design .outline .icon {
color: #fff !important;
}
.new-theme-design .outline,
.new-theme-design .outline:hover {
text-decoration: none !important;
}
.new-theme-design .featureCopy .textLink .icon,
.new-theme-design .visual-content .textLink .icon {
color: #000 !important;
}
.new-theme-design .awardBand .sectionHead,
#dreamz-education .awardBand .sectionHead {
margin-left: 0 !important;
}  .retail-and-distribution .industryIntroHead.compact,
.retail-and-distribution .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.retail-and-distribution .featureMediaPanels {
position: relative;
min-height: 430px;
}
.retail-and-distribution .featureMediaPanels>.mediaPanel {
display: none;
}
.retail-and-distribution .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.retail-and-distribution .featureMediaPanels .spotlightMedia {
height: 100%;
}
.retail-and-distribution .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.retail-and-distribution .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.retail-and-distribution .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.retail-and-distribution .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.retail-and-distribution .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.retail-and-distribution .windowTop small {
font-size: 10px;
color: var(--muted);
}
.retail-and-distribution .windowDots {
display: flex;
gap: 5px;
}
.retail-and-distribution .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.retail-and-distribution .windowBody {
padding: 16px;
}
.retail-and-distribution .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.retail-and-distribution .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.retail-and-distribution .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.retail-and-distribution .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.retail-and-distribution .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.retail-and-distribution .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.retail-and-distribution .chartGridLine.l1 {
top: 34px;
}
.retail-and-distribution .chartGridLine.l2 {
top: 65px;
}
.retail-and-distribution .chartGridLine.l3 {
top: 96px;
}
.retail-and-distribution .chartGridLine.l4 {
top: 127px;
}
.retail-and-distribution .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.retail-and-distribution .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.retail-and-distribution .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.retail-and-distribution .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.retail-and-distribution .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.retail-and-distribution .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.retail-and-distribution .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.retail-and-distribution .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.retail-and-distribution .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.retail-and-distribution .spectrumNotes {
display: grid;
gap: 10px;
}
.retail-and-distribution .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.retail-and-distribution .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.retail-and-distribution .noteCard p,
.retail-and-distribution .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.retail-and-distribution .alertStack {
display: grid;
gap: 10px;
}
.retail-and-distribution .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.retail-and-distribution .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.retail-and-distribution .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.retail-and-distribution .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.retail-and-distribution .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.retail-and-distribution .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.retail-and-distribution .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.retail-and-distribution .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.retail-and-distribution .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.retail-and-distribution .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.retail-and-distribution .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.retail-and-distribution .scheduleBoard h4,
.retail-and-distribution .todoBoard h4,
.retail-and-distribution .siteBoard h4,
.retail-and-distribution .chatPanel h4,
.retail-and-distribution .lessonPanel h4,
.retail-and-distribution .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.retail-and-distribution .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.retail-and-distribution .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.retail-and-distribution .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.retail-and-distribution .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.retail-and-distribution .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.retail-and-distribution .taskRow:last-child {
border-bottom: 0;
}
.retail-and-distribution .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.retail-and-distribution .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.retail-and-distribution .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.retail-and-distribution .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.retail-and-distribution .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.retail-and-distribution .inventoryTable th,
.retail-and-distribution .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.retail-and-distribution .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.retail-and-distribution .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.retail-and-distribution .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.retail-and-distribution .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.retail-and-distribution .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.retail-and-distribution .phoneBody {
padding: 12px;
}
.retail-and-distribution .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.retail-and-distribution .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.retail-and-distribution .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.retail-and-distribution .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.retail-and-distribution .progressList {
display: grid;
gap: 10px;
}
.retail-and-distribution .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.retail-and-distribution .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.retail-and-distribution .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.retail-and-distribution .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.retail-and-distribution .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.retail-and-distribution .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.retail-and-distribution .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.retail-and-distribution .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.retail-and-distribution .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.retail-and-distribution .pin1 {
top: 56px;
left: 58px;
}
.retail-and-distribution .pin2 {
top: 88px;
right: 88px;
}
.retail-and-distribution .pin3 {
bottom: 54px;
right: 72px;
}
.retail-and-distribution .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.retail-and-distribution .siteRow:last-child {
border-bottom: 0;
}
.retail-and-distribution .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.retail-and-distribution .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.retail-and-distribution .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.retail-and-distribution .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.retail-and-distribution .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.retail-and-distribution .graphNodes:before,
.retail-and-distribution .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.retail-and-distribution .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.retail-and-distribution .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.retail-and-distribution .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.retail-and-distribution .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.retail-and-distribution .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.retail-and-distribution .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.retail-and-distribution .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.retail-and-distribution .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.retail-and-distribution .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.retail-and-distribution .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.retail-and-distribution .forecastList .taskRow strong {
font-size: 11px;
}
.retail-and-distribution .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.retail-and-distribution .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.retail-and-distribution .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.retail-and-distribution .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.retail-and-distribution .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.retail-and-distribution .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.retail-and-distribution .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.retail-and-distribution .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.retail-and-distribution .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.retail-and-distribution .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.retail-and-distribution .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.retail-and-distribution .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.retail-and-distribution .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.retail-and-distribution .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.retail-and-distribution .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.retail-and-distribution .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.retail-and-distribution .qualityRows {
display: grid;
gap: 10px;
}
.retail-and-distribution .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.retail-and-distribution .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.retail-and-distribution .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.retail-and-distribution .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.retail-and-distribution .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.retail-and-distribution #retail-sales-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.retail-and-distribution #retail-sales-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.retail-and-distribution #retail-sales-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.retail-and-distribution #retail-sales-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.retail-and-distribution #retail-sales-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.retail-and-distribution #retail-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.retail-and-distribution #retail-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.retail-and-distribution #retail-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.retail-and-distribution #retail-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.retail-and-distribution #retail-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.retail-and-distribution #retail-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.retail-and-distribution #retail-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.retail-and-distribution #retail-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.retail-and-distribution #retail-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.retail-and-distribution #retail-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.retail-and-distribution #retail-sales-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.retail-and-distribution #retail-sales-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.retail-and-distribution #retail-sales-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.retail-and-distribution #retail-sales-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.retail-and-distribution #retail-sales-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.retail-and-distribution #retail-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.retail-and-distribution #retail-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.retail-and-distribution #retail-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.retail-and-distribution #retail-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.retail-and-distribution #retail-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.retail-and-distribution #retail-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.retail-and-distribution #retail-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.retail-and-distribution #retail-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.retail-and-distribution #retail-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.retail-and-distribution #retail-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.retail-and-distribution .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.retail-and-distribution .featureMediaPanels {
min-height: 0;
}
.retail-and-distribution .inventorySplit,
.retail-and-distribution .forecastGrid,
.retail-and-distribution .siteGrid,
.retail-and-distribution .spectrumGrid,
.retail-and-distribution .scheduleGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.retail-and-distribution .metricGrid,
.retail-and-distribution .lessonCards,
.retail-and-distribution .gaugeGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.retail-and-distribution .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.retail-and-distribution .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.retail-and-distribution .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.retail-and-distribution .brand span {
color: var(--brand);
}
.retail-and-distribution .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.retail-and-distribution .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.retail-and-distribution .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.retail-and-distribution .button.primary:hover {
background: var(--brand-dark);
}
.retail-and-distribution .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.retail-and-distribution .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.retail-and-distribution .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.retail-and-distribution .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.retail-and-distribution h1,
.retail-and-distribution h2,
.retail-and-distribution h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
.retail-and-distribution h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
}
.retail-and-distribution h3 {
font-size: 23px;
color: var(--black);
}
.retail-and-distribution .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.retail-and-distribution .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.retail-and-distribution .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.retail-and-distribution .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.retail-and-distribution .hero .button.primary:hover {
background: var(--black-soft);
}
.retail-and-distribution .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.retail-and-distribution .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.retail-and-distribution .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.retail-and-distribution .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.retail-and-distribution .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.retail-and-distribution .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.retail-and-distribution .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.retail-and-distribution .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.retail-and-distribution .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.retail-and-distribution .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.retail-and-distribution .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.retail-and-distribution .ratingLead strong {
display: block;
font-size: 20px;
}
.retail-and-distribution .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.retail-and-distribution .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.retail-and-distribution .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.retail-and-distribution .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.retail-and-distribution .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.retail-and-distribution .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.retail-and-distribution .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.retail-and-distribution .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.retail-and-distribution .awardLead span {
color: var(--muted);
font-size: 13px;
}
.retail-and-distribution .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
.retail-and-distribution section {
padding: 88px 0;
}
.retail-and-distribution .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.retail-and-distribution .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.retail-and-distribution .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.retail-and-distribution .aiJourney h2 {
color: #fff;
}
.retail-and-distribution .aiJourney .sectionHead p {
color: #D7D7D7;
}
.retail-and-distribution .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.retail-and-distribution .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.retail-and-distribution .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.retail-and-distribution .aiStep:last-child::after {
display: none;
}
.retail-and-distribution .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.retail-and-distribution .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.retail-and-distribution .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.retail-and-distribution .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.retail-and-distribution .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.retail-and-distribution .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.retail-and-distribution .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.retail-and-distribution .outcome span {
color: var(--muted);
font-size: 14px;
}
.retail-and-distribution .capability {
background: #fff;
}
.retail-and-distribution .capability.alt {
background: var(--sky-2);
}
.retail-and-distribution .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.retail-and-distribution .twoCol.reverse .visual {
order: 2;
}
.retail-and-distribution .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.retail-and-distribution .visual .placeholder {
min-height: 355px;
}
.retail-and-distribution .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.retail-and-distribution .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.retail-and-distribution details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.retail-and-distribution details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.retail-and-distribution details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.retail-and-distribution details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.retail-and-distribution details.capabilityMore[open] summary::after {
content: "−";
}
.retail-and-distribution details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.retail-and-distribution .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.retail-and-distribution .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.retail-and-distribution .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.retail-and-distribution .darkSection h2,
.retail-and-distribution .darkSection h3 {
color: #fff;
}
.retail-and-distribution .darkSection .sectionHead p,
.retail-and-distribution .darkSection .copy p {
color: #D7D7D7;
}
.retail-and-distribution .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.retail-and-distribution .darkSection .featureItem {
color: #F7F7F7;
}
.retail-and-distribution .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.retail-and-distribution .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.retail-and-distribution .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.retail-and-distribution .darkSection .placeholder small {
color: #D0D0D0;
}
.retail-and-distribution .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.retail-and-distribution .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.retail-and-distribution .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.retail-and-distribution .card p {
color: var(--muted);
margin: 12px 0 0;
}
.retail-and-distribution .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.retail-and-distribution .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.retail-and-distribution .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.retail-and-distribution .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.retail-and-distribution .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.retail-and-distribution .benefitBand h2 {
color: #fff;
}
.retail-and-distribution .benefitBand .sectionHead p {
color: #D5D5D5;
}
.retail-and-distribution .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.retail-and-distribution .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.retail-and-distribution .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.retail-and-distribution .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.retail-and-distribution .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.retail-and-distribution .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.retail-and-distribution .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.retail-and-distribution .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.retail-and-distribution .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.retail-and-distribution .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.retail-and-distribution .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.retail-and-distribution .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.retail-and-distribution .ctaPanel h2 {
color: #fff;
}
.retail-and-distribution .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.retail-and-distribution .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.retail-and-distribution .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.retail-and-distribution .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.retail-and-distribution .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.retail-and-distribution .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.retail-and-distribution .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.retail-and-distribution .inlineCta.dark h3 {
color: #fff;
}
.retail-and-distribution .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.retail-and-distribution .inlineCta.dark p {
color: #D8D8D8;
}
.retail-and-distribution .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.retail-and-distribution .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.retail-and-distribution .button.yellow:hover {
background: #FFD84D;
}
.retail-and-distribution .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.retail-and-distribution .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.retail-and-distribution .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.retail-and-distribution .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.retail-and-distribution footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.retail-and-distribution .ratingSectionGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.retail-and-distribution .heroGrid,
.retail-and-distribution .twoCol,
.retail-and-distribution .ctaPanel {
grid-template-columns: 1fr;
}
.retail-and-distribution .twoCol.reverse .visual {
order: initial;
}
.retail-and-distribution .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.retail-and-distribution .ratingGrid,
.retail-and-distribution .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.retail-and-distribution .ratingLead,
.retail-and-distribution .awardLead {
grid-column: 1/-1;
text-align: center;
}
.retail-and-distribution .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.retail-and-distribution .aiStep:nth-child(3)::after,
.retail-and-distribution .aiStep:last-child::after {
display: none;
}
.retail-and-distribution .outcomeGrid,
.retail-and-distribution .challengeGrid,
.retail-and-distribution .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.retail-and-distribution .cards,
.retail-and-distribution .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.retail-and-distribution .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.retail-and-distribution .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.retail-and-distribution .awardProofGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .wrap {
width: min(var(--max), calc(100% - 24px));
}
.retail-and-distribution .hero {
padding: 58px 0 52px;
}
.retail-and-distribution section {
padding: 64px 0;
}
.retail-and-distribution .aiFlow {
grid-template-columns: 1fr;
}
.retail-and-distribution .aiStep::after {
display: none;
}
.retail-and-distribution .logoRow,
.retail-and-distribution .ratingGrid,
.retail-and-distribution .awardGrid,
.retail-and-distribution .outcomeGrid,
.retail-and-distribution .challengeGrid,
.retail-and-distribution .benefitGrid,
.retail-and-distribution .cards,
.retail-and-distribution .proofCards,
.retail-and-distribution .integrationGrid,
.retail-and-distribution .featureList {
grid-template-columns: 1fr;
}
.retail-and-distribution .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.retail-and-distribution .ctaPanel {
padding: 34px 24px;
}
.retail-and-distribution .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.retail-and-distribution .inlineCtaActions {
width: 100%;
}
.retail-and-distribution .inlineCtaActions .button {
flex: 1;
}
}
.retail-and-distribution .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.retail-and-distribution .darkSection h2,
.retail-and-distribution .darkSection h3,
.retail-and-distribution .aiJourney h2,
.retail-and-distribution .benefitBand h2,
.retail-and-distribution .ctaPanel h2,
.retail-and-distribution .inlineCta.dark h3 {
color: #fff;
}
.retail-and-distribution .wrap>*,
.retail-and-distribution .heroGrid>*,
.retail-and-distribution .twoCol>*,
.retail-and-distribution .ctaPanel>* {
min-width: 0;
}
.retail-and-distribution .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.retail-and-distribution .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.retail-and-distribution .skipLink:focus {
transform: none;
}
.retail-and-distribution a:focus-visible,
.retail-and-distribution summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.retail-and-distribution .darkSection a:focus-visible,
.retail-and-distribution .darkSection summary:focus-visible,
.retail-and-distribution .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.retail-and-distribution .topbar {
background: #fff;
backdrop-filter: none;
}
.retail-and-distribution .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.retail-and-distribution .brandName {
display: inline;
color: var(--navy) !important;
}
.retail-and-distribution .brandName>span {
color: var(--brand-dark);
}
.retail-and-distribution .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.retail-and-distribution .brandMark .icon2 {
width: 21px;
height: 21px;
}
.retail-and-distribution .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.retail-and-distribution .navlinks a:hover {
color: var(--brand-dark);
}
.retail-and-distribution .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.retail-and-distribution .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.retail-and-distribution .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.retail-and-distribution .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.retail-and-distribution .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.retail-and-distribution .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.retail-and-distribution .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.retail-and-distribution .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.retail-and-distribution .heroVisual {
width: 100%;
min-width: 0;
}
.retail-and-distribution .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.retail-and-distribution .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.retail-and-distribution .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.retail-and-distribution .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.retail-and-distribution .clientBand {
padding: 27px 0;
}
.retail-and-distribution .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.retail-and-distribution .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.retail-and-distribution .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.retail-and-distribution .logoBox.wide {
font-size: 12px;
}
.retail-and-distribution .logoBox small {
display: block;
font-size: 10px;
}
.retail-and-distribution section {
padding: 80px 0;
}
.retail-and-distribution h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.retail-and-distribution .sectionHead {
margin-bottom: 36px;
}
.retail-and-distribution .eyebrow {
line-height: 1.5;
}
.retail-and-distribution .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.retail-and-distribution .aiStep {
min-height: 162px;
}
.retail-and-distribution .aiStep strong {
line-height: 1.35;
}
.retail-and-distribution .aiStep span {
line-height: 1.65;
}
.retail-and-distribution .aiCallout {
margin-top: 24px;
}
.retail-and-distribution .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.retail-and-distribution .outcome>.icon {
color: var(--navy);
}
.retail-and-distribution .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.retail-and-distribution .awardItem>.icon {
color: var(--navy);
}
.retail-and-distribution .awardItem:hover {
border-color: var(--brand-dark);
}
.retail-and-distribution .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.retail-and-distribution .twoCol.reverse .visual {
order: -1;
}
.retail-and-distribution .copy .eyebrow {
margin-bottom: 17px;
}
.retail-and-distribution .copy p {
font-size: 16px;
line-height: 1.85;
}
.retail-and-distribution .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.retail-and-distribution .featureList {
gap: 13px 18px;
}
.retail-and-distribution .featureItem {
font-size: 13px;
line-height: 1.6;
}
.retail-and-distribution .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.retail-and-distribution .check .icon2 {
width: 14px;
height: 14px;
}
.retail-and-distribution details.capabilityMore {
margin-bottom: 0;
}
.retail-and-distribution .capabilityMore summary {
min-height: 34px;
}
.retail-and-distribution .capabilityMore .moreGrid {
gap: 13px 18px;
}
.retail-and-distribution .textCta {
font-size: 14px;
}
.retail-and-distribution .visual {
min-width: 0;
}
.retail-and-distribution .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.retail-and-distribution .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.retail-and-distribution .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.retail-and-distribution .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.retail-and-distribution .panelBody {
padding: 20px;
}
.retail-and-distribution .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.retail-and-distribution .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.retail-and-distribution .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.retail-and-distribution .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.retail-and-distribution .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.retail-and-distribution .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.retail-and-distribution .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.retail-and-distribution .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.retail-and-distribution .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.retail-and-distribution .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.retail-and-distribution .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.retail-and-distribution .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.retail-and-distribution .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.retail-and-distribution .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.retail-and-distribution .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.retail-and-distribution .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.retail-and-distribution .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.retail-and-distribution .miniStats span {
font-size: 9px;
color: var(--muted);
}
.retail-and-distribution .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.retail-and-distribution .dataRow:last-child {
border-bottom: 0;
}
.retail-and-distribution .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.retail-and-distribution .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.retail-and-distribution .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.retail-and-distribution .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.retail-and-distribution .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.retail-and-distribution .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.retail-and-distribution .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.retail-and-distribution .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.retail-and-distribution .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.retail-and-distribution .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.retail-and-distribution .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.retail-and-distribution .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.retail-and-distribution .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.retail-and-distribution .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.retail-and-distribution .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.retail-and-distribution .mobileAccount {
text-align: center;
padding: 13px 0;
}
.retail-and-distribution .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.retail-and-distribution .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.retail-and-distribution .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.retail-and-distribution .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.retail-and-distribution .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.retail-and-distribution .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.retail-and-distribution .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.retail-and-distribution .phoneDevice .rowCopy strong {
font-size: 9px;
}
.retail-and-distribution .phoneDevice .rowCopy small {
font-size: 7px;
}
.retail-and-distribution .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.retail-and-distribution .mobileSide {
display: grid;
gap: 10px;
}
.retail-and-distribution .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.retail-and-distribution .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.retail-and-distribution .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.retail-and-distribution .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.retail-and-distribution .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.retail-and-distribution .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.retail-and-distribution .darkSection .panelHead>strong {
color: #fff;
}
.retail-and-distribution .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.retail-and-distribution .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.retail-and-distribution .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.retail-and-distribution .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.retail-and-distribution .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.retail-and-distribution .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.retail-and-distribution .promptList {
display: grid;
gap: 10px;
}
.retail-and-distribution .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.retail-and-distribution .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.retail-and-distribution .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.retail-and-distribution .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.retail-and-distribution .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.retail-and-distribution .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.retail-and-distribution .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.retail-and-distribution .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.retail-and-distribution .quoteTable th,
.retail-and-distribution .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.retail-and-distribution .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.retail-and-distribution .quoteTable td:first-child {
width: 64%;
}
.retail-and-distribution .quoteTable th:last-child,
.retail-and-distribution .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.retail-and-distribution .quoteTable strong {
font-size: 11px;
}
.retail-and-distribution .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.retail-and-distribution .quoteTable tfoot {
background: #F5FBFF;
}
.retail-and-distribution .quoteTable tfoot th {
font-size: 10px;
}
.retail-and-distribution .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.retail-and-distribution .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.retail-and-distribution .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.retail-and-distribution .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.retail-and-distribution .orderJourney {
margin: 20px 0;
}
.retail-and-distribution .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.retail-and-distribution .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.retail-and-distribution .journeyRow:last-child:before {
display: none;
}
.retail-and-distribution .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.retail-and-distribution .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.retail-and-distribution .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.retail-and-distribution .journeyRow strong {
font-size: 12px;
display: block;
}
.retail-and-distribution .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.retail-and-distribution .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.retail-and-distribution .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.retail-and-distribution .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.retail-and-distribution .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.retail-and-distribution .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.retail-and-distribution .inventoryIntro strong {
display: block;
font-size: 16px;
}
.retail-and-distribution .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.retail-and-distribution .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.retail-and-distribution .availabilityCard span {
font-size: 9px;
display: block;
}
.retail-and-distribution .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.retail-and-distribution .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.retail-and-distribution .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.retail-and-distribution .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.retail-and-distribution .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.retail-and-distribution .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.retail-and-distribution .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.retail-and-distribution .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.retail-and-distribution .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.retail-and-distribution .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.retail-and-distribution .customerTimeline .dataRow {
border-color: #353535;
}
.retail-and-distribution .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.retail-and-distribution .customerTimeline strong {
color: #fff;
}
.retail-and-distribution .customerTimeline small {
color: #BFBFBF;
}
.retail-and-distribution .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.retail-and-distribution .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.retail-and-distribution .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.retail-and-distribution .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.retail-and-distribution .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.retail-and-distribution .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.retail-and-distribution .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.retail-and-distribution .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.retail-and-distribution .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.retail-and-distribution .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.retail-and-distribution .chartTitle strong {
font-size: 12px;
}
.retail-and-distribution .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.retail-and-distribution .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.retail-and-distribution .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.retail-and-distribution .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.retail-and-distribution .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.retail-and-distribution .inlineCta {
margin-top: 0;
box-shadow: none;
}
.retail-and-distribution .inlineCtaActions {
max-width: 42%;
}
.retail-and-distribution .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.retail-and-distribution .inlineCta h3 {
line-height: 1.35;
}
.retail-and-distribution .card {
box-shadow: none;
}
.retail-and-distribution .cardIcon {
box-shadow: none;
}
.retail-and-distribution .card h3 {
font-size: 22px;
}
.retail-and-distribution .card p {
font-size: 14px;
line-height: 1.8;
}
.retail-and-distribution .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.retail-and-distribution .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.retail-and-distribution .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.retail-and-distribution .ratingBand {
padding: 34px 0;
}
.retail-and-distribution .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.retail-and-distribution .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.retail-and-distribution .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.retail-and-distribution .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.retail-and-distribution .ratingItem:first-child {
border-left: 0;
}
.retail-and-distribution .proofCard h3 {
font-size: 23px;
}
.retail-and-distribution .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.retail-and-distribution .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.retail-and-distribution .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.retail-and-distribution .integration {
min-height: 98px;
}
.retail-and-distribution .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.retail-and-distribution .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.retail-and-distribution .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.retail-and-distribution .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.retail-and-distribution .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.retail-and-distribution .finalActions {
display: grid;
gap: 11px;
}
.retail-and-distribution .finalActions .button {
white-space: nowrap;
}
.retail-and-distribution .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.retail-and-distribution .footerInner p {
margin: 0;
font-size: 12px;
}
.retail-and-distribution .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.retail-and-distribution .navlinks {
gap: 15px;
font-size: 12px;
}
.retail-and-distribution .heroGrid {
gap: 30px;
}
.retail-and-distribution .twoCol {
gap: 32px;
}
.retail-and-distribution .panelBody {
padding: 16px;
}
.retail-and-distribution .panelHead {
padding: 16px;
}
.retail-and-distribution .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.retail-and-distribution .pipelineColumns {
gap: 7px;
}
.retail-and-distribution .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.retail-and-distribution .heroGrid,
.retail-and-distribution .twoCol,
.retail-and-distribution .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .heroGrid {
gap: 36px;
}
.retail-and-distribution .hero h1 {
max-width: 730px;
}
.retail-and-distribution .hero .lead {
max-width: 690px;
}
.retail-and-distribution .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.retail-and-distribution .twoCol {
gap: 34px;
}
.retail-and-distribution .twoCol.reverse .visual {
order: initial;
}
.retail-and-distribution .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.retail-and-distribution .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.retail-and-distribution .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.retail-and-distribution .awardItem {
font-size: 12px;
padding: 13px;
}
.retail-and-distribution .ratingSectionGrid {
gap: 20px;
}
.retail-and-distribution .inlineCta {
align-items: flex-start;
}
.retail-and-distribution .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.retail-and-distribution .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.retail-and-distribution .card {
padding: 22px;
}
.retail-and-distribution .card h3 {
font-size: 21px;
}
.retail-and-distribution .finalActions {
display: flex;
flex-wrap: wrap;
}
.retail-and-distribution .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.retail-and-distribution .cards,
.retail-and-distribution .proofCards {
grid-template-columns: 1fr;
}
.retail-and-distribution .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.retail-and-distribution .inlineCta {
flex-direction: column;
}
.retail-and-distribution .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.retail-and-distribution .inlineCtaActions .button {
flex: 1;
}
.retail-and-distribution .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.retail-and-distribution .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.retail-and-distribution .wrap {
width: calc(100% - 32px);
}
.retail-and-distribution [id] {
scroll-margin-top: 82px;
}
.retail-and-distribution .brand {
font-size: 20px;
gap: 7px;
}
.retail-and-distribution .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.retail-and-distribution .brandMark .icon2 {
width: 18px;
height: 18px;
}
.retail-and-distribution .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.retail-and-distribution section {
padding: 60px 0;
}
.retail-and-distribution .hero {
padding: 51px 0 48px;
}
.retail-and-distribution .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.retail-and-distribution .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.retail-and-distribution .heroActions {
gap: 10px;
margin-top: 25px;
}
.retail-and-distribution .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.retail-and-distribution .hero .microcopy {
font-size: 11px;
}
.retail-and-distribution .heroPills span {
font-size: 9px;
}
.retail-and-distribution .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.retail-and-distribution .sectionHead p {
font-size: 16px;
}
.retail-and-distribution .copy h2 {
font-size: 34px;
}
.retail-and-distribution .copy p {
font-size: 15px;
}
.retail-and-distribution .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.retail-and-distribution .logoBox {
min-height: 53px;
}
.retail-and-distribution .logoBox:last-child {
grid-column: 1/-1;
}
.retail-and-distribution .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.retail-and-distribution .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.retail-and-distribution .aiStep strong {
font-size: 13px;
}
.retail-and-distribution .aiStep span {
font-size: 11px;
}
.retail-and-distribution .aiStep::after {
display: none;
}
.retail-and-distribution .outcomeGrid,
.retail-and-distribution .challengeGrid,
.retail-and-distribution .benefitGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .outcome {
padding: 24px;
}
.retail-and-distribution .outcome strong {
font-size: 22px;
}
.retail-and-distribution .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.retail-and-distribution .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.retail-and-distribution .awardItem:last-child {
grid-column: 1/-1;
}
.retail-and-distribution .featureList,
.retail-and-distribution .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .featureItem {
font-size: 13px;
}
.retail-and-distribution .inlineCta {
padding: 22px;
gap: 19px;
}
.retail-and-distribution .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.retail-and-distribution .panelHead {
padding: 15px 13px;
}
.retail-and-distribution .panelHead>strong {
font-size: 12px;
}
.retail-and-distribution .panelBody {
padding: 14px;
}
.retail-and-distribution .productPanel {
border-radius: 16px;
}
.retail-and-distribution .productPanel figcaption {
padding: 0 14px 13px;
}
.retail-and-distribution .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.retail-and-distribution .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.retail-and-distribution .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.retail-and-distribution .deal {
margin-top: 0;
padding: 10px;
}
.retail-and-distribution .deal strong {
font-size: 10px;
}
.retail-and-distribution .deal small {
font-size: 9px;
}
.retail-and-distribution .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.retail-and-distribution .mobileWorkspace {
gap: 12px;
}
.retail-and-distribution .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.retail-and-distribution .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.retail-and-distribution .sideTile {
padding: 10px;
}
.retail-and-distribution .sideTile strong {
font-size: 10px;
}
.retail-and-distribution .sideTile p {
font-size: 9px;
}
.retail-and-distribution .mobileHeader strong {
font-size: 15px;
}
.retail-and-distribution .mobileAccount strong {
font-size: 10px;
}
.retail-and-distribution .mobileAccount small {
font-size: 7px;
}
.retail-and-distribution .phoneDevice .rowIcon {
display: none;
}
.retail-and-distribution .quoteTable th,
.retail-and-distribution .quoteTable td {
padding: 12px 4px;
}
.retail-and-distribution .quoteTable strong {
font-size: 10px;
}
.retail-and-distribution .quoteTable small {
font-size: 8px;
}
.retail-and-distribution .quoteTable tfoot th {
font-size: 9px;
}
.retail-and-distribution .docHeader strong {
font-size: 17px;
}
.retail-and-distribution .miniFlow {
gap: 5px;
font-size: 9px;
}
.retail-and-distribution .miniFlow span {
padding: 6px;
}
.retail-and-distribution .rowCopy strong {
font-size: 10px;
}
.retail-and-distribution .rowCopy small {
font-size: 8px;
}
.retail-and-distribution .statusPill {
font-size: 7px;
padding: 5px;
}
.retail-and-distribution .miniStats {
gap: 7px;
}
.retail-and-distribution .miniStats>div {
padding: 9px;
}
.retail-and-distribution .miniStats strong {
font-size: 18px;
}
.retail-and-distribution .miniStats span {
font-size: 8px;
}
.retail-and-distribution .collectionStats>div {
padding: 13px;
}
.retail-and-distribution .collectionStats strong {
font-size: 24px;
}
.retail-and-distribution .customerHeader strong {
font-size: 17px;
}
.retail-and-distribution .customerFacts>div {
padding: 10px;
}
.retail-and-distribution .customerFacts strong {
font-size: 12px;
}
.retail-and-distribution .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.retail-and-distribution .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.retail-and-distribution .ratingItem:last-child {
grid-column: 1/-1;
}
.retail-and-distribution .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.retail-and-distribution .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.retail-and-distribution .integration small {
font-size: 9px;
}
.retail-and-distribution .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.retail-and-distribution .ctaPanel p {
font-size: 15px;
}
.retail-and-distribution .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.retail-and-distribution .footerInner {
align-items: flex-start;
flex-direction: column;
}
.retail-and-distribution .contextSection {
padding: 0 0 24px;
}
.retail-and-distribution .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.retail-and-distribution .wrap {
width: calc(100% - 24px);
}
.retail-and-distribution .brand {
font-size: 18px;
}
.retail-and-distribution .brandMark {
width: 25px;
height: 25px;
}
.retail-and-distribution .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.retail-and-distribution .hero h1 {
font-size: 38px;
}
.retail-and-distribution .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.retail-and-distribution .copy h2 {
font-size: 31px;
}
.retail-and-distribution .mobileWorkspace {
grid-template-columns: 1fr;
}
.retail-and-distribution .phoneDevice {
width: 210px;
}
.retail-and-distribution .phoneDevice .rowIcon {
display: grid;
}
.retail-and-distribution .mobileSide {
gap: 8px;
}
.retail-and-distribution .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.retail-and-distribution .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.retail-and-distribution .sideTile p {
margin: 0;
}
.retail-and-distribution .miniFlow span {
padding: 5px;
font-size: 8px;
}
.retail-and-distribution .collectionStats strong {
font-size: 21px;
}
.retail-and-distribution .inventoryIntro strong {
font-size: 14px;
}
.retail-and-distribution .dataRow {
gap: 7px;
}
.retail-and-distribution .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.retail-and-distribution .inlineCtaActions {
flex-direction: column;
}
}
.retail-and-distribution .hero .eyebrow {
max-width: 100%;
}
.retail-and-distribution .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.retail-and-distribution .ganttIllustration,
.retail-and-distribution .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.retail-and-distribution .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.retail-and-distribution .costIllustration {
aspect-ratio: 484/226;
}
.retail-and-distribution .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.retail-and-distribution .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.retail-and-distribution .comparisonTable thead {
background: var(--black);
color: #fff;
}
.retail-and-distribution .comparisonTable thead th:last-child {
color: var(--yellow);
}
.retail-and-distribution .comparisonTable th,
.retail-and-distribution .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.retail-and-distribution .comparisonTable th:first-child {
width: 23%;
}
.retail-and-distribution .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.retail-and-distribution .comparisonTable tbody td {
color: var(--muted);
}
.retail-and-distribution .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.retail-and-distribution .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.retail-and-distribution .card,
.retail-and-distribution .proofCard,
.retail-and-distribution .productPanel,
.retail-and-distribution .outcome,
.retail-and-distribution .benefit {
box-shadow: none;
}
.retail-and-distribution .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.retail-and-distribution .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.retail-and-distribution .hero .eyebrow {
font-size: 10px;
}
.retail-and-distribution .comparisonTable {
font-size: 11px;
}
.retail-and-distribution .comparisonTable th,
.retail-and-distribution .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.retail-and-distribution .comparisonTable th:first-child {
width: 24%;
}
.retail-and-distribution .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.retail-and-distribution .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.retail-and-distribution .hero h1 {
font-size: 38px;
}
}
.retail-and-distribution .scheduleIllustration,
.retail-and-distribution .analyticsIllustration,
.retail-and-distribution .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.retail-and-distribution .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.retail-and-distribution .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.retail-and-distribution .conditionIllustration {
aspect-ratio: 484 / 178;
}
.retail-and-distribution .miniStats strong {
font-variant-numeric: tabular-nums;
}
.retail-and-distribution .quoteTable td:last-child {
white-space: nowrap;
}
.retail-and-distribution .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.retail-and-distribution .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.retail-and-distribution .darkSection .textCta {
color: var(--yellow);
}
.retail-and-distribution .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.retail-and-distribution .secondaryLinks .textCta {
font-size: 12px;
}
.retail-and-distribution .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.retail-and-distribution .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.retail-and-distribution .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.retail-and-distribution .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.retail-and-distribution .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.retail-and-distribution .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
.retail-and-distribution .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.retail-and-distribution .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.retail-and-distribution .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.retail-and-distribution .returnFlag .icon2 {
flex: 0 0 24px;
}
.retail-and-distribution .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.retail-and-distribution .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.retail-and-distribution .phoneDevice {
max-width: 100%;
}
.retail-and-distribution .heroPills {
line-height: 1.55;
}
.retail-and-distribution .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.retail-and-distribution .plantFacts {
gap: 7px;
}
.retail-and-distribution .plantFacts>div {
padding: 9px;
}
.retail-and-distribution .plantFacts strong {
font-size: 11px;
}
.retail-and-distribution .scanSummary {
padding: 12px;
}
.retail-and-distribution .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.retail-and-distribution .mobileWorkspace {
grid-template-columns: 1fr;
}
.retail-and-distribution .phoneDevice {
width: 224px;
margin: auto;
}
.retail-and-distribution .phoneDevice .rowIcon {
display: grid;
}
.retail-and-distribution .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.retail-and-distribution .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.retail-and-distribution .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.retail-and-distribution .sideTile strong {
font-size: 12px;
}
.retail-and-distribution .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.retail-and-distribution .topbar,
.retail-and-distribution .heroActions,
.retail-and-distribution .finalActions,
.retail-and-distribution .contextSection,
.retail-and-distribution .valueCtaSection {
display: none;
}
.retail-and-distribution section {
break-inside: avoid;
padding: 28px 0;
}
.retail-and-distribution .hero {
padding-top: 20px;
}
}
.retail-and-distribution .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.retail-and-distribution .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.retail-and-distribution .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.retail-and-distribution .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.retail-and-distribution .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.retail-and-distribution .clientBand {
padding: 24px 0;
}
.retail-and-distribution .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.retail-and-distribution .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.retail-and-distribution .logoBox.wide {
font-size: 15px;
}
.retail-and-distribution .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.retail-and-distribution .sectionHead p {
margin: 17px 0 0;
}
.retail-and-distribution .copy p {
margin: 16px 0 0;
}
.retail-and-distribution .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.retail-and-distribution .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.retail-and-distribution .aiJourney {
background: var(--black);
}
.retail-and-distribution .aiStep {
min-height: 157px;
border-color: #353535;
}
.retail-and-distribution .productPanel {
border-radius: 18px;
}
.retail-and-distribution .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.retail-and-distribution .panelHead>strong {
font-size: 13px;
}
.retail-and-distribution .sampleTag {
font-size: 9px;
}
.retail-and-distribution .panelBody {
padding: 21px;
}
.retail-and-distribution .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.retail-and-distribution .docHeader {
padding-bottom: 16px;
}
.retail-and-distribution .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.retail-and-distribution .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.retail-and-distribution .smallLabel {
font-size: 9px;
}
.retail-and-distribution .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.retail-and-distribution .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.retail-and-distribution .dataRow {
padding: 14px 0;
}
.retail-and-distribution .statusPill {
font-size: 8px;
}
.retail-and-distribution .miniStats {
gap: 10px;
margin: 18px 0;
}
.retail-and-distribution .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.retail-and-distribution .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.retail-and-distribution .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.retail-and-distribution .contextNote {
font-size: 11px;
margin-top: 16px;
}
.retail-and-distribution .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.retail-and-distribution .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.retail-and-distribution .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.retail-and-distribution .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.retail-and-distribution .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.retail-and-distribution .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.retail-and-distribution .hierarchy strong {
color: var(--navy);
}
.retail-and-distribution .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.retail-and-distribution .conditionIllustration {
aspect-ratio: 484/201;
}
.retail-and-distribution .analyticsIllustration {
aspect-ratio: 484/206;
}
.retail-and-distribution .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.retail-and-distribution .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.retail-and-distribution .phoneDevice .rowCopy strong {
font-size: 10px;
}
.retail-and-distribution .phoneDevice .rowCopy small {
font-size: 9px;
}
.retail-and-distribution .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.retail-and-distribution .mobileAccount small {
font-size: 9px;
}
.retail-and-distribution .sideTile {
background: var(--sky-2);
padding: 14px;
}
.retail-and-distribution .sideTile strong {
font-size: 12px;
}
.retail-and-distribution .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.retail-and-distribution .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.retail-and-distribution .mobileAction {
font-size: 9px;
}
.retail-and-distribution .journeyRow strong {
font-size: 13px;
}
.retail-and-distribution .journeyRow small {
font-size: 11px;
}
.retail-and-distribution .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.retail-and-distribution .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.retail-and-distribution .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.retail-and-distribution .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.retail-and-distribution .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.retail-and-distribution .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.retail-and-distribution .utilityReadout small {
font-size: 12px;
}
.retail-and-distribution .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.retail-and-distribution .darkSection {
background: var(--black);
}
.retail-and-distribution .darkSection .panelHead {
background: var(--black-soft);
}
.retail-and-distribution .darkSection .productPanel {
background: var(--black-soft);
}
.retail-and-distribution .darkSection .copy .featureNote {
color: #CFCFCF;
}
.retail-and-distribution .darkSection .rowCopy strong {
color: #FFFFFF;
}
.retail-and-distribution .darkSection .rowCopy small {
color: #CFCFCF;
}
.retail-and-distribution .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.retail-and-distribution .assistantHead small {
font-size: 11px;
}
.retail-and-distribution .assistantNote {
font-size: 11px;
}
.retail-and-distribution .reportTags span {
font-size: 10px;
}
.retail-and-distribution .card p {
margin: 12px 0 0;
}
.retail-and-distribution .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.retail-and-distribution .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.retail-and-distribution .cards>.card {
display: flex;
flex-direction: column;
}
.retail-and-distribution .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.retail-and-distribution .cards>.card p {
padding-bottom: 22px;
}
.retail-and-distribution .benefitBand {
background: var(--black);
}
.retail-and-distribution .benefit {
background: var(--black-soft);
}
.retail-and-distribution .inlineCta h3 {
font-size: 20px;
}
.retail-and-distribution .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.retail-and-distribution .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.retail-and-distribution .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.retail-and-distribution .valueCtaSection {
padding: 32px 0;
}
.retail-and-distribution .proofCard p {
margin-top: 15px;
}
.retail-and-distribution .proofCard h3 {
font-size: 23px;
}
.retail-and-distribution .integrationNote {
margin-top: 23px;
}
.retail-and-distribution .ctaPanel {
background: var(--black);
}
.retail-and-distribution .ctaPanel p {
margin-top: 16px;
}
.retail-and-distribution .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.retail-and-distribution .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.retail-and-distribution a:hover {
text-decoration: none;
}
.retail-and-distribution .textCta:hover {
color: var(--navy);
}
.retail-and-distribution .darkSection .textCta:hover {
color: #FFFFFF;
}
.retail-and-distribution .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.retail-and-distribution .hero h1 {
font-size: 49px;
}
.retail-and-distribution .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.retail-and-distribution .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.retail-and-distribution .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.retail-and-distribution .hero h1 {
font-size: 58px;
}
.retail-and-distribution .heroVisual {
max-width: 548px;
}
.retail-and-distribution .hero .lead {
max-width: 700px;
}
.retail-and-distribution .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.retail-and-distribution .logoBox {
font-size: 18px;
border: 0 !important;
}
.retail-and-distribution .logoBox:last-child {
grid-column: auto;
}
.retail-and-distribution .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.retail-and-distribution .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.retail-and-distribution .inlineCtaActions .button {
flex: 1;
}
.retail-and-distribution .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.retail-and-distribution section {
padding: 55px 0;
}
.retail-and-distribution .hero {
padding: 28px 0 40px;
}
.retail-and-distribution .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.retail-and-distribution .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.retail-and-distribution .heroActions {
gap: 10px;
}
.retail-and-distribution .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.retail-and-distribution .breadcrumb {
margin-bottom: 21px;
}
.retail-and-distribution .hero .eyebrow {
font-size: 11px;
}
.retail-and-distribution .heroVisual {
max-width: 480px;
}
.retail-and-distribution .heroPills {
row-gap: 9px;
}
.retail-and-distribution .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.retail-and-distribution .heroPills span+span {
padding-left: 7px;
}
.retail-and-distribution .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.retail-and-distribution .logoBox:last-child {
grid-column: 1/-1;
}
.retail-and-distribution .clientBand {
padding: 25px 0;
}
.retail-and-distribution .copy h2 {
font-size: 33px;
}
.retail-and-distribution .panelBody {
padding: 16px;
}
.retail-and-distribution .panelHead {
padding: 15px;
}
.retail-and-distribution .panelHead>strong {
font-size: 12px;
}
.retail-and-distribution .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.retail-and-distribution .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.retail-and-distribution .docHeader strong {
font-size: 18px;
}
.retail-and-distribution .docHeader small {
font-size: 10px;
}
.retail-and-distribution .rowCopy strong {
font-size: 11px;
}
.retail-and-distribution .rowCopy small {
font-size: 10px;
}
.retail-and-distribution .miniStats {
gap: 7px;
}
.retail-and-distribution .miniStats strong {
font-size: 21px;
}
.retail-and-distribution .miniStats span {
font-size: 9px;
}
.retail-and-distribution .miniStats>div {
padding: 10px 8px;
}
.retail-and-distribution .plantFacts {
gap: 8px;
}
.retail-and-distribution .plantFacts>div {
padding: 10px;
}
.retail-and-distribution .plantFacts strong {
font-size: 11px;
}
.retail-and-distribution .contextNote {
font-size: 10px;
gap: 8px;
}
.retail-and-distribution .utilityReadout {
padding: 12px;
gap: 10px;
}
.retail-and-distribution .utilityReadout span {
font-size: 8px;
}
.retail-and-distribution .utilityReadout strong {
font-size: 24px;
}
.retail-and-distribution .utilityReadout .utilityScope {
font-size: 14px;
}
.retail-and-distribution .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.retail-and-distribution .comparisonTable {
font-size: 11px;
}
.retail-and-distribution .comparisonTable th,
.retail-and-distribution .comparisonTable td {
padding: 13px 9px;
}
.retail-and-distribution .contextSection {
padding: 0 0 22px;
}
.retail-and-distribution .valueCtaSection {
padding: 25px 0;
}
.retail-and-distribution .inlineCtaActions {
flex-direction: column;
}
.retail-and-distribution .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.retail-and-distribution .mobileWorkspace {
grid-template-columns: 1fr;
}
.retail-and-distribution .phoneDevice {
width: 222px;
}
.retail-and-distribution .phoneDevice .rowIcon {
display: grid;
}
.retail-and-distribution .mobileSide {
grid-template-columns: 1fr;
}
.retail-and-distribution .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.retail-and-distribution .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
.retail-and-distribution .sideTile p {
margin: 0;
}
.retail-and-distribution .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.retail-and-distribution .dataRow {
gap: 8px;
}
.retail-and-distribution .statusPill {
font-size: 7px;
padding: 5px;
}
.retail-and-distribution .miniStats strong {
font-size: 19px;
}
.retail-and-distribution .heroActions {
flex-direction: column;
align-items: stretch;
}
.retail-and-distribution .heroActions .button {
width: 100%;
}
.retail-and-distribution .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.retail-and-distribution .aiFlow {
grid-template-columns: 1fr;
}
.retail-and-distribution .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.retail-and-distribution .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.retail-and-distribution .aiStep strong {
margin: 0;
font-size: 15px;
}
.retail-and-distribution .aiStep span {
font-size: 13px;
}
.retail-and-distribution .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.retail-and-distribution .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.retail-and-distribution .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.retail-and-distribution .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.retail-and-distribution .navlinks {
gap: 20px;
font-size: 12px;
}
.retail-and-distribution .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.retail-and-distribution .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.retail-and-distribution .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.retail-and-distribution .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.retail-and-distribution .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.retail-and-distribution .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.retail-and-distribution .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.retail-and-distribution .industryIntro {
padding: 78px 0 66px;
}
.retail-and-distribution .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.retail-and-distribution .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.retail-and-distribution .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.retail-and-distribution .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.retail-and-distribution .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.retail-and-distribution .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.retail-and-distribution .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.retail-and-distribution .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.retail-and-distribution .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.retail-and-distribution .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.retail-and-distribution .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.retail-and-distribution .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.retail-and-distribution .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.retail-and-distribution .industryPriority:hover {
border-color: var(--brand-dark);
}
.retail-and-distribution .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.retail-and-distribution .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.retail-and-distribution .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.retail-and-distribution .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.retail-and-distribution .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.retail-and-distribution .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.retail-and-distribution .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.retail-and-distribution .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.retail-and-distribution .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.retail-and-distribution .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.retail-and-distribution .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.retail-and-distribution .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.retail-and-distribution .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.retail-and-distribution .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.retail-and-distribution .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.retail-and-distribution .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.retail-and-distribution .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.retail-and-distribution .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.retail-and-distribution .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.retail-and-distribution .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.retail-and-distribution .vedaMessage.assistant>small {
color: var(--yellow);
}
.retail-and-distribution .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.retail-and-distribution .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.retail-and-distribution .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.retail-and-distribution .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.retail-and-distribution .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.retail-and-distribution .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.retail-and-distribution .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.retail-and-distribution .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.retail-and-distribution .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.retail-and-distribution .manufacturingSpotlight {
padding: 73px 0;
}
.retail-and-distribution .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.retail-and-distribution .rfidSpotlight {
background: #fff;
}
.retail-and-distribution .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.retail-and-distribution .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.retail-and-distribution .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.retail-and-distribution .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.retail-and-distribution .spotlightHead h2 span {
color: var(--brand-dark);
}
.retail-and-distribution .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.retail-and-distribution .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.retail-and-distribution .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.retail-and-distribution .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.retail-and-distribution .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.retail-and-distribution .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.retail-and-distribution .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.retail-and-distribution .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.retail-and-distribution .featureTab:hover {
border-color: var(--brand-dark);
}
.retail-and-distribution .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.retail-and-distribution .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.retail-and-distribution .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.retail-and-distribution .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.retail-and-distribution .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.retail-and-distribution .featurePanel {
display: none;
}
.retail-and-distribution .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.retail-and-distribution .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.retail-and-distribution .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.retail-and-distribution .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.retail-and-distribution .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.retail-and-distribution .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.retail-and-distribution .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.retail-and-distribution .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.retail-and-distribution .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.retail-and-distribution .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.retail-and-distribution .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.retail-and-distribution .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.retail-and-distribution .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.retail-and-distribution .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.retail-and-distribution .decisionSpotlight .textCta {
color: var(--yellow);
}
.retail-and-distribution .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.retail-and-distribution .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.retail-and-distribution .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.retail-and-distribution .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.retail-and-distribution .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.retail-and-distribution .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.retail-and-distribution .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.retail-and-distribution .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.retail-and-distribution .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.retail-and-distribution .rfidImageSurface {
background: #172029;
padding: 5px;
}
.retail-and-distribution .rfidImageSurface img {
width: 100%;
height: auto;
}
.retail-and-distribution .rfidMedia figcaption {
padding-top: 13px;
}
.retail-and-distribution .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.retail-and-distribution .aiReviewBody {
padding: 18px;
}
.retail-and-distribution .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.retail-and-distribution .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.retail-and-distribution .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.retail-and-distribution .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.retail-and-distribution .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.retail-and-distribution .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.retail-and-distribution .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.retail-and-distribution .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.retail-and-distribution .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.retail-and-distribution .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.retail-and-distribution .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.retail-and-distribution .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.retail-and-distribution .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.retail-and-distribution .aiReviewAction strong {
display: block;
font-size: 11px;
}
.retail-and-distribution .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.retail-and-distribution .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.retail-and-distribution .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.retail-and-distribution .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.retail-and-distribution .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.retail-and-distribution .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.retail-and-distribution .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.retail-and-distribution .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.retail-and-distribution .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.retail-and-distribution .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.retail-and-distribution .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.retail-and-distribution .workflowDetails summary::-webkit-details-marker {
display: none;
}
.retail-and-distribution .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.retail-and-distribution .workflowDetails[open] summary::after {
content: "−";
}
.retail-and-distribution .workflowDetails .featureList,
.retail-and-distribution .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.retail-and-distribution .workflowDetails .featureItem {
font-size: 11px;
}
.retail-and-distribution .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.retail-and-distribution .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.retail-and-distribution #retail-connected-tools {
background: #fff;
}
.retail-and-distribution #retail-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.retail-and-distribution .featureTab,
.retail-and-distribution .industryPriority,
.retail-and-distribution summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.retail-and-distribution .industryIntroHead {
gap: 30px;
}
.retail-and-distribution .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.retail-and-distribution .featureStage {
gap: 26px;
padding: 26px;
}
.retail-and-distribution .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.retail-and-distribution .factoryWorkflow {
padding: 22px;
}
.retail-and-distribution .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.retail-and-distribution .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.retail-and-distribution .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.retail-and-distribution .industryPriorityGrid {
gap: 14px;
}
.retail-and-distribution .industryPriority {
padding: 22px 19px;
}
.retail-and-distribution .industryPriority h3 {
font-size: 21px;
}
.retail-and-distribution .industryPriority p {
font-size: 12px;
}
.retail-and-distribution .priorityLink {
font-size: 10px;
}
.retail-and-distribution .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.retail-and-distribution .vedaIndustryCopy h2 {
font-size: 39px;
}
.retail-and-distribution .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.retail-and-distribution .vedaUseCases>div {
display: block;
}
.retail-and-distribution .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.retail-and-distribution .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.retail-and-distribution .featureTabs {
gap: 8px;
}
.retail-and-distribution .featureTab {
min-height: 108px;
}
.retail-and-distribution .featureStage,
.retail-and-distribution .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.retail-and-distribution .rfidSpotlight .spotlightMedia,
.retail-and-distribution .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.retail-and-distribution .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.retail-and-distribution .featurePanel {
min-height: 0;
}
.retail-and-distribution .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.retail-and-distribution .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.retail-and-distribution .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.retail-and-distribution .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.retail-and-distribution .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.retail-and-distribution .clientBand {
padding: 22px 0;
}
.retail-and-distribution .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.retail-and-distribution .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.retail-and-distribution .clientBand .logoBox.wide {
font-size: 10px;
}
.retail-and-distribution .clientBand .logoBox:last-child {
grid-column: auto;
}
.retail-and-distribution .industryIntro {
padding: 53px 0;
}
.retail-and-distribution .industryIntroHead h2 {
font-size: 32px;
}
.retail-and-distribution .industryIntroHead>p {
font-size: 14px;
}
.retail-and-distribution .industryPriorityGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .industryPriority {
padding: 23px;
}
.retail-and-distribution .industryPriority h3 {
font-size: 24px;
}
.retail-and-distribution .industryPriority>.icon {
margin: 5px 0 15px;
}
.retail-and-distribution .industryPriority p {
font-size: 13px;
}
.retail-and-distribution .priorityLink {
font-size: 11px;
}
.retail-and-distribution .vedaIndustry {
padding: 0 0 52px;
}
.retail-and-distribution .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.retail-and-distribution .vedaIndustryCopy h2 {
font-size: 32px;
}
.retail-and-distribution .vedaIndustryCopy>p {
font-size: 14px;
}
.retail-and-distribution .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.retail-and-distribution .vedaUseCases>div {
display: flex;
}
.retail-and-distribution .vedaConversationHead {
padding: 16px 13px;
}
.retail-and-distribution .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.retail-and-distribution .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.retail-and-distribution .vedaMessage.user {
margin-left: 25px;
}
.retail-and-distribution .vedaMessage.assistant {
margin-right: 14px;
}
.retail-and-distribution .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.retail-and-distribution .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.retail-and-distribution .manufacturingSpotlight {
padding: 54px 0;
}
.retail-and-distribution .spotlightHead h2 {
font-size: 32px;
}
.retail-and-distribution .spotlightHead>p {
font-size: 14px;
}
.retail-and-distribution .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.retail-and-distribution .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.retail-and-distribution .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.retail-and-distribution .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.retail-and-distribution .featurePanel h3 {
font-size: 24px;
}
.retail-and-distribution .featurePanel>p {
font-size: 13px;
}
.retail-and-distribution .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.retail-and-distribution .spotlightChecks>li {
font-size: 12px;
}
.retail-and-distribution .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.retail-and-distribution .spotlightActions .button {
width: 100%;
}
.retail-and-distribution .spotlightScope {
font-size: 10px;
}
.retail-and-distribution .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.retail-and-distribution .mediaTitle strong {
font-size: 11px;
}
.retail-and-distribution .mediaTitle div>span {
font-size: 8px;
}
.retail-and-distribution .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.retail-and-distribution .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.retail-and-distribution .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.retail-and-distribution .rfidMedia figcaption {
padding-top: 12px;
}
.retail-and-distribution .aiReviewBody {
padding: 13px;
}
.retail-and-distribution .aiIssue {
padding: 13px;
}
.retail-and-distribution .aiIssue strong {
font-size: 14px;
}
.retail-and-distribution .aiEvidence {
gap: 6px;
}
.retail-and-distribution .aiEvidence>div {
padding: 10px 7px;
}
.retail-and-distribution .aiEvidence strong {
font-size: 9px;
}
.retail-and-distribution .aiEvidence span {
font-size: 7px;
}
.retail-and-distribution .exampleLabel {
font-size: 6px;
}
.retail-and-distribution .factoryWorkflows {
padding: 55px 0;
}
.retail-and-distribution .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.retail-and-distribution .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.retail-and-distribution .industryRibbonGrid {
gap: 12px;
}
.retail-and-distribution .industryRibbonGrid>div {
font-size: 10px;
}
.retail-and-distribution .spotlightHead h2 {
font-size: 29px;
}
.retail-and-distribution .featureStage {
padding: 19px 13px;
}
.retail-and-distribution .mediaTitle>.icon {
display: none;
}
.retail-and-distribution .exampleLabel {
display: none;
}
.retail-and-distribution .vedaBrand {
font-size: 27px;
}
}
@media print {
.retail-and-distribution .featureTabs {
display: none;
}
.retail-and-distribution .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.retail-and-distribution .featureStage {
display: block;
}
.retail-and-distribution .featurePanel {
color: #000;
}
}
.retail-and-distribution #retail-sales-features-1:checked~.featureTabs label[for="retail-sales-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-sales-features-1:focus-visible~.featureTabs label[for="retail-sales-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-sales-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.retail-and-distribution #retail-sales-features-2:checked~.featureTabs label[for="retail-sales-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-sales-features-2:focus-visible~.featureTabs label[for="retail-sales-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-sales-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.retail-and-distribution #retail-sales-features-3:checked~.featureTabs label[for="retail-sales-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-sales-features-3:focus-visible~.featureTabs label[for="retail-sales-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-sales-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.retail-and-distribution #retail-sales-features-4:checked~.featureTabs label[for="retail-sales-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-sales-features-4:focus-visible~.featureTabs label[for="retail-sales-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-sales-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.retail-and-distribution #retail-sales-features-5:checked~.featureTabs label[for="retail-sales-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-sales-features-5:focus-visible~.featureTabs label[for="retail-sales-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-sales-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.retail-and-distribution #retail-rfid-features-1:checked~.featureTabs label[for="retail-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-rfid-features-1:focus-visible~.featureTabs label[for="retail-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.retail-and-distribution #retail-rfid-features-2:checked~.featureTabs label[for="retail-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-rfid-features-2:focus-visible~.featureTabs label[for="retail-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.retail-and-distribution #retail-rfid-features-3:checked~.featureTabs label[for="retail-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-rfid-features-3:focus-visible~.featureTabs label[for="retail-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.retail-and-distribution #retail-rfid-features-4:checked~.featureTabs label[for="retail-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-rfid-features-4:focus-visible~.featureTabs label[for="retail-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.retail-and-distribution #retail-rfid-features-5:checked~.featureTabs label[for="retail-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-rfid-features-5:focus-visible~.featureTabs label[for="retail-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-1:checked~.featureTabs label[for="retail-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-ai-decisions-features-1:focus-visible~.featureTabs label[for="retail-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-2:checked~.featureTabs label[for="retail-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-ai-decisions-features-2:focus-visible~.featureTabs label[for="retail-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-3:checked~.featureTabs label[for="retail-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-ai-decisions-features-3:focus-visible~.featureTabs label[for="retail-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-4:checked~.featureTabs label[for="retail-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-ai-decisions-features-4:focus-visible~.featureTabs label[for="retail-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-5:checked~.featureTabs label[for="retail-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.retail-and-distribution #retail-ai-decisions-features-5:focus-visible~.featureTabs label[for="retail-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.retail-and-distribution #retail-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.retail-and-distribution .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .featureMediaPanels {
min-width: 0;
}
.retail-and-distribution .featureMediaPanels .miniChart {
height: 178px;
}
.retail-and-distribution .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.retail-and-distribution .featureMediaPanels .windowTop strong,
.retail-and-distribution .featureMediaPanels .windowTop small {
display: block;
}
.retail-and-distribution .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.retail-and-distribution .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.retail-and-distribution .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.retail-and-distribution .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.retail-and-distribution .featureMediaPanels .windowBody>*,
.retail-and-distribution .featureMediaPanels .spectrumGrid>*,
.retail-and-distribution .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.retail-and-distribution .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.retail-and-distribution .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.retail-and-distribution .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.retail-and-distribution .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.retail-and-distribution .featureMediaPanels .graphNodes {
min-height: 258px;
}
.retail-and-distribution .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.retail-and-distribution .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.retail-and-distribution .featureMediaPanels .mapPin {
box-shadow: none;
}
.retail-and-distribution .pin2 {
top: 88px;
right: 88px;
}
.retail-and-distribution .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.retail-and-distribution .featureMediaPanels .mediaShell {
padding: 10px;
}
.retail-and-distribution .featureMediaPanels .windowBody {
padding: 10px;
}
.retail-and-distribution .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .featureMediaPanels .alertBadge {
justify-self: start;
}
.retail-and-distribution .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.retail-and-distribution .featureMediaPanels .graphNodes .node.n1,
.retail-and-distribution .featureMediaPanels .graphNodes .node.n2,
.retail-and-distribution .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.retail-and-distribution .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.retail-and-distribution .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.retail-and-distribution .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.retail-and-distribution .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.retail-and-distribution .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.retail-and-distribution .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.retail-and-distribution .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.retail-and-distribution .freshGraphic * {
box-sizing: border-box;
}
.retail-and-distribution .rfPanel,
.retail-and-distribution .aiInsightCard,
.retail-and-distribution .forecastVisualCard,
.retail-and-distribution .forecastSuggestion,
.retail-and-distribution .knowledgeTile,
.retail-and-distribution .chatConversation,
.retail-and-distribution .trainingSummary,
.retail-and-distribution .moduleCard,
.retail-and-distribution .qualityHeatCard,
.retail-and-distribution .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.retail-and-distribution .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.retail-and-distribution .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.retail-and-distribution .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.retail-and-distribution .statusPill,
.retail-and-distribution .cardTag,
.retail-and-distribution .forecastSuggestion b,
.retail-and-distribution .moduleCard b,
.retail-and-distribution .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.retail-and-distribution .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.retail-and-distribution .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.retail-and-distribution .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.retail-and-distribution .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.retail-and-distribution .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.retail-and-distribution .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.retail-and-distribution .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.retail-and-distribution .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.retail-and-distribution .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.retail-and-distribution .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.retail-and-distribution .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.retail-and-distribution .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.retail-and-distribution .dot.good {
background: #298EEC;
}
.retail-and-distribution .dot.warn {
background: #F4A62A;
}
.retail-and-distribution .dot.bad {
background: #EB6B53;
}
.retail-and-distribution .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.retail-and-distribution .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.retail-and-distribution .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.retail-and-distribution .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.retail-and-distribution .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.retail-and-distribution .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.retail-and-distribution .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.retail-and-distribution .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.retail-and-distribution .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.retail-and-distribution .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.retail-and-distribution .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.retail-and-distribution .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.retail-and-distribution .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.retail-and-distribution .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.retail-and-distribution .moveRow b {
color: #298EEC;
font-size: 9px;
}
.retail-and-distribution .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.retail-and-distribution .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.retail-and-distribution .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.retail-and-distribution .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.retail-and-distribution .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.retail-and-distribution .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.retail-and-distribution .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.retail-and-distribution .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.retail-and-distribution .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.retail-and-distribution .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.retail-and-distribution .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.retail-and-distribution .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.retail-and-distribution .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.retail-and-distribution .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.retail-and-distribution .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.retail-and-distribution .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.retail-and-distribution .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.retail-and-distribution .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.retail-and-distribution .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.retail-and-distribution .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.retail-and-distribution .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.retail-and-distribution .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.retail-and-distribution .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.retail-and-distribution .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.retail-and-distribution .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.retail-and-distribution .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.retail-and-distribution .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.retail-and-distribution .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.retail-and-distribution .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.retail-and-distribution .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.retail-and-distribution .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.retail-and-distribution .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.retail-and-distribution .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.retail-and-distribution .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.retail-and-distribution .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.retail-and-distribution .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.retail-and-distribution .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.retail-and-distribution .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.retail-and-distribution .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.retail-and-distribution .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.retail-and-distribution .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.retail-and-distribution .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.retail-and-distribution .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.retail-and-distribution .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.retail-and-distribution .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.retail-and-distribution .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.retail-and-distribution .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.retail-and-distribution .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.retail-and-distribution .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.retail-and-distribution .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.retail-and-distribution .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.retail-and-distribution .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.retail-and-distribution .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.retail-and-distribution .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.retail-and-distribution .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.retail-and-distribution .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.retail-and-distribution .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.retail-and-distribution .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.retail-and-distribution .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.retail-and-distribution .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.retail-and-distribution .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.retail-and-distribution .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.retail-and-distribution .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.retail-and-distribution .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.retail-and-distribution .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.retail-and-distribution .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.retail-and-distribution .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.retail-and-distribution .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.retail-and-distribution .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.retail-and-distribution .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.retail-and-distribution .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.retail-and-distribution .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.retail-and-distribution .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.retail-and-distribution .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.retail-and-distribution .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.retail-and-distribution .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.retail-and-distribution .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.retail-and-distribution .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.retail-and-distribution .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.retail-and-distribution .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.retail-and-distribution .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.retail-and-distribution .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.retail-and-distribution .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.retail-and-distribution .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.retail-and-distribution .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.retail-and-distribution .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.retail-and-distribution .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.retail-and-distribution .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.retail-and-distribution .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.retail-and-distribution .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.retail-and-distribution .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.retail-and-distribution .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.retail-and-distribution .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.retail-and-distribution .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.retail-and-distribution .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.retail-and-distribution .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.retail-and-distribution .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.retail-and-distribution .chartLegend .sw.blue {
background: #298EEC;
}
.retail-and-distribution .chartLegend .sw.amber {
background: #F4A62A;
}
.retail-and-distribution .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.retail-and-distribution .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.retail-and-distribution .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.retail-and-distribution .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.retail-and-distribution .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.retail-and-distribution .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.retail-and-distribution .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.retail-and-distribution .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.retail-and-distribution .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.retail-and-distribution .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.retail-and-distribution .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.retail-and-distribution .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.retail-and-distribution .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.retail-and-distribution .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.retail-and-distribution .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.retail-and-distribution .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.retail-and-distribution .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.retail-and-distribution .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.retail-and-distribution .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.retail-and-distribution .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.retail-and-distribution .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.retail-and-distribution .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.retail-and-distribution .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.retail-and-distribution .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.retail-and-distribution .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.retail-and-distribution .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.retail-and-distribution .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.retail-and-distribution .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.retail-and-distribution .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.retail-and-distribution .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.retail-and-distribution .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.retail-and-distribution .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.retail-and-distribution .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.retail-and-distribution .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.retail-and-distribution .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.retail-and-distribution .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.retail-and-distribution .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.retail-and-distribution .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.retail-and-distribution .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.retail-and-distribution .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.retail-and-distribution .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.retail-and-distribution .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.retail-and-distribution .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.retail-and-distribution .freshGraphic {
height: auto;
min-height: 420px;
}
.retail-and-distribution .rfTrackLayout,
.retail-and-distribution .rfFlowLayout,
.retail-and-distribution .rfAlertGrid,
.retail-and-distribution .rfCycleLayout,
.retail-and-distribution .rfSitesLayout,
.retail-and-distribution .aiRootLayout,
.retail-and-distribution .aiForecastLayout,
.retail-and-distribution .aiChatLayout,
.retail-and-distribution .aiTrainingLayout,
.retail-and-distribution .aiQualityLayout,
.retail-and-distribution .trainingModuleGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.retail-and-distribution .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.retail-and-distribution .rfAlertGrid {
grid-template-columns: 1fr;
}
.retail-and-distribution .qualityHeatGrid span {
min-height: 40px;
}
.retail-and-distribution .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.retail-and-distribution .aiLink {
display: none;
}
}
.retail-and-distribution .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.retail-and-distribution .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.retail-and-distribution .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.retail-and-distribution .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.retail-and-distribution .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.retail-and-distribution .mfgHeroBreadcrumb a {
color: inherit;
}
.retail-and-distribution .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.retail-and-distribution .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.retail-and-distribution .mfgHero h1 {
color: #fff;
}
.retail-and-distribution .mfgHero h1>span {
display: block;
}
.retail-and-distribution .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.retail-and-distribution .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.retail-and-distribution .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.retail-and-distribution .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.retail-and-distribution .mfgHeroActions .outline:hover {
background: #172029;
}
.retail-and-distribution .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.retail-and-distribution .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.retail-and-distribution .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.retail-and-distribution .mfgHeroContent {
min-height: 610px;
}
.retail-and-distribution .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.retail-and-distribution .mfgHeroLead {
font-size: 16px;
}
.retail-and-distribution .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.retail-and-distribution .mfgHero {
display: flex;
flex-direction: column;
}
.retail-and-distribution .mfgHeroContent {
order: 0;
min-height: 0;
}
.retail-and-distribution .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.retail-and-distribution .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.retail-and-distribution .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.retail-and-distribution .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.retail-and-distribution .mfgHeroCopy {
padding: 25px 0 20px;
}
.retail-and-distribution .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.retail-and-distribution .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.retail-and-distribution .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.retail-and-distribution .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.retail-and-distribution .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.retail-and-distribution .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.retail-and-distribution .mfgHeroScene {
height: 280px;
}
}
@media print {
.retail-and-distribution .mfgHero {
background: #fff;
color: #000;
}
.retail-and-distribution .mfgHeroScene,
.retail-and-distribution .mfgHeroActions {
display: none;
}
.retail-and-distribution .mfgHeroContent {
min-height: 0;
}
.retail-and-distribution .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
.retail-and-distribution #retail-rfid .featureStage,
.retail-and-distribution #retail-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.retail-and-distribution .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.retail-and-distribution .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.retail-and-distribution .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.retail-and-distribution .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.retail-and-distribution .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.retail-and-distribution .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.retail-and-distribution .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.retail-and-distribution .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.retail-and-distribution .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.retail-and-distribution .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.retail-and-distribution .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.retail-and-distribution .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.retail-and-distribution .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.retail-and-distribution .mfgGallery .rfPanel {
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.retail-and-distribution .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.retail-and-distribution .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.retail-and-distribution .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.retail-and-distribution .mfgGallery .shelf span {
font-size: 11px;
}
.retail-and-distribution .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.retail-and-distribution .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.retail-and-distribution .mfgGallery .rfKpiGrid {
gap: 8px;
}
.retail-and-distribution .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.retail-and-distribution .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.retail-and-distribution .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.retail-and-distribution .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.retail-and-distribution .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.retail-and-distribution .mfgGallery .rfScanCard span {
font-size: 9px;
}
.retail-and-distribution .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.retail-and-distribution .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.retail-and-distribution .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.retail-and-distribution .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.retail-and-distribution .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.retail-and-distribution .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.retail-and-distribution .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.retail-and-distribution .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.retail-and-distribution .mfgGallery .flowArrow {
display: none;
}
.retail-and-distribution .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .railItem {
padding: 9px 7px;
}
.retail-and-distribution .mfgGallery .railItem b {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.retail-and-distribution .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.retail-and-distribution .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.retail-and-distribution .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.retail-and-distribution .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.retail-and-distribution .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .reorderCard strong {
font-size: 13px;
}
.retail-and-distribution .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.retail-and-distribution .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.retail-and-distribution .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.retail-and-distribution .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.retail-and-distribution .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.retail-and-distribution .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.retail-and-distribution .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.retail-and-distribution .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.retail-and-distribution .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.retail-and-distribution .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.retail-and-distribution .mfgGallery .varianceCard {
padding: 12px;
}
.retail-and-distribution .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.retail-and-distribution .mfgGallery .varianceCard small {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.retail-and-distribution .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.retail-and-distribution .mfgGallery .deviceTop {
font-size: 11px;
}
.retail-and-distribution .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.retail-and-distribution .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.retail-and-distribution .mfgGallery .deviceMetric {
padding: 9px;
}
.retail-and-distribution .mfgGallery .deviceMetric span {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .deviceMetric b {
font-size: 12px;
}
.retail-and-distribution .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.retail-and-distribution .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.retail-and-distribution .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.retail-and-distribution .mfgGallery .siteNode.north {
top: 6px;
}
.retail-and-distribution .mfgGallery .siteNode.south {
bottom: 6px;
}
.retail-and-distribution .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.retail-and-distribution .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.retail-and-distribution .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.retail-and-distribution .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.retail-and-distribution .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.retail-and-distribution .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.retail-and-distribution .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.retail-and-distribution .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.retail-and-distribution .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.retail-and-distribution .mfgGallery .siteSummary strong {
font-size: 12px;
}
.retail-and-distribution .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.retail-and-distribution .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.retail-and-distribution .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.retail-and-distribution .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.retail-and-distribution .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.retail-and-distribution .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.retail-and-distribution .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.retail-and-distribution .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.retail-and-distribution .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.retail-and-distribution .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.retail-and-distribution .mfgGallery .insightMeta {
gap: 6px;
}
.retail-and-distribution .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.retail-and-distribution .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .chartHeader span {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .chartHeader b {
font-size: 11px;
}
.retail-and-distribution .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.retail-and-distribution .mfgGallery .chartLegend {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.retail-and-distribution .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.retail-and-distribution .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.retail-and-distribution .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.retail-and-distribution .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.retail-and-distribution .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.retail-and-distribution .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.retail-and-distribution .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.retail-and-distribution .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.retail-and-distribution .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.retail-and-distribution .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.retail-and-distribution .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.retail-and-distribution .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.retail-and-distribution .mfgGallery .progressCenter strong {
font-size: 25px;
}
.retail-and-distribution .mfgGallery .trainingStatList {
gap: 9px;
}
.retail-and-distribution .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.retail-and-distribution .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.retail-and-distribution .mfgGallery .trainingStatList span {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.retail-and-distribution .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.retail-and-distribution .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.retail-and-distribution .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.retail-and-distribution .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.retail-and-distribution .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.retail-and-distribution .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.retail-and-distribution .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.retail-and-distribution .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.retail-and-distribution .mfgGallery .qualityCaption span {
font-size: 10px;
}
.retail-and-distribution .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.retail-and-distribution .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.retail-and-distribution .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.retail-and-distribution .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.retail-and-distribution .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.retail-and-distribution #retail-rfid .featureStage,
.retail-and-distribution #retail-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.retail-and-distribution #retail-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.retail-and-distribution .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.retail-and-distribution #retail-rfid .featureStage,
.retail-and-distribution #retail-ai-decisions .featureStage {
padding: 16px;
}
.retail-and-distribution .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.retail-and-distribution .mfgGallery .freshWindow {
height: auto;
}
.retail-and-distribution .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.retail-and-distribution .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .freshTop strong {
font-size: 13px;
}
.retail-and-distribution .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.retail-and-distribution .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.retail-and-distribution .mfgGallery .rfShelfPanel {
padding: 10px;
}
.retail-and-distribution .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.retail-and-distribution .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.retail-and-distribution .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.retail-and-distribution .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.retail-and-distribution .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.retail-and-distribution .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.retail-and-distribution .mfgGallery .flowNum {
grid-row: 1/3;
}
.retail-and-distribution .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.retail-and-distribution .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.retail-and-distribution .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.retail-and-distribution .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.retail-and-distribution .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.retail-and-distribution .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.retail-and-distribution .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.retail-and-distribution .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.retail-and-distribution .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.retail-and-distribution .mfgGallery .rfActionStrip {
height: auto;
}
.retail-and-distribution .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .countPanel {
gap: 14px;
}
.retail-and-distribution .mfgGallery .handheldPanel {
padding: 15px;
}
.retail-and-distribution .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.retail-and-distribution .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.retail-and-distribution .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.retail-and-distribution .mfgGallery .siteNode.east {
right: 3%;
}
.retail-and-distribution .mfgGallery .siteNode.west {
left: 3%;
}
.retail-and-distribution .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.retail-and-distribution .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.retail-and-distribution .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.retail-and-distribution .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.retail-and-distribution .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.retail-and-distribution .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.retail-and-distribution .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.retail-and-distribution .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.retail-and-distribution .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.retail-and-distribution .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.retail-and-distribution .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.retail-and-distribution .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.retail-and-distribution .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.retail-and-distribution .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.retail-and-distribution .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.retail-and-distribution .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.retail-and-distribution .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.retail-and-distribution .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.retail-and-distribution .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.retail-and-distribution .mfgGallery .moduleCard {
padding: 10px;
}
.retail-and-distribution .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.retail-and-distribution .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.retail-and-distribution .mfgGallery .qualityAction strong {
font-size: 12px;
}
.retail-and-distribution .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.retail-and-distribution .mfgGallery .shelf i::after {
bottom: 0;
}
.retail-and-distribution .retailVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.retail-and-distribution .retailGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.retail-and-distribution .retailIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.retail-and-distribution .retailStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.retail-and-distribution .retailVisualGallery>.retailGraphic {
display: none;
}
.retail-and-distribution #retail-sales .featureStage,
.retail-and-distribution #retail-rfid .featureStage,
.retail-and-distribution #retail-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.retail-and-distribution #retail-rfid .retailVisualGallery {
grid-column: 1;
grid-row: 1;
}
.retail-and-distribution #retail-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.retail-and-distribution .factoryWorkflow {
display: flex;
flex-direction: column;
}
.retail-and-distribution .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.retail-and-distribution .factoryWorkflow>p {
margin-bottom: 22px;
}
.retail-and-distribution .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.retail-and-distribution #retail-sales .featureStage,
.retail-and-distribution #retail-rfid .featureStage,
.retail-and-distribution #retail-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.retail-and-distribution #retail-rfid .retailVisualGallery,
.retail-and-distribution #retail-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.retail-and-distribution .mfgHeroScene {
height: 290px;
}
.retail-and-distribution #retail-sales .featureStage,
.retail-and-distribution #retail-rfid .featureStage,
.retail-and-distribution #retail-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.retail-and-distribution .retailVisualGallery {
width: 100%;
}
}
@media print {
.retail-and-distribution .retailVisualGallery>.retailGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.retail-and-distribution #retail-sales-features-1:checked~.featureStage .retailVisualGallery> :nth-child(1) {
display: block;
}
.retail-and-distribution #retail-sales-features-2:checked~.featureStage .retailVisualGallery> :nth-child(2) {
display: block;
}
.retail-and-distribution #retail-sales-features-3:checked~.featureStage .retailVisualGallery> :nth-child(3) {
display: block;
}
.retail-and-distribution #retail-sales-features-4:checked~.featureStage .retailVisualGallery> :nth-child(4) {
display: block;
}
.retail-and-distribution #retail-sales-features-5:checked~.featureStage .retailVisualGallery> :nth-child(5) {
display: block;
}
.retail-and-distribution #retail-rfid-features-1:checked~.featureStage .retailVisualGallery> :nth-child(1) {
display: block;
}
.retail-and-distribution #retail-rfid-features-2:checked~.featureStage .retailVisualGallery> :nth-child(2) {
display: block;
}
.retail-and-distribution #retail-rfid-features-3:checked~.featureStage .retailVisualGallery> :nth-child(3) {
display: block;
}
.retail-and-distribution #retail-rfid-features-4:checked~.featureStage .retailVisualGallery> :nth-child(4) {
display: block;
}
.retail-and-distribution #retail-rfid-features-5:checked~.featureStage .retailVisualGallery> :nth-child(5) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-1:checked~.featureStage .retailVisualGallery> :nth-child(1) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-2:checked~.featureStage .retailVisualGallery> :nth-child(2) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-3:checked~.featureStage .retailVisualGallery> :nth-child(3) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-4:checked~.featureStage .retailVisualGallery> :nth-child(4) {
display: block;
}
.retail-and-distribution #retail-ai-decisions-features-5:checked~.featureStage .retailVisualGallery> :nth-child(5) {
display: block;
}
.retail-and-distribution .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.retail-and-distribution .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.retail-and-distribution .retailIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.retail-and-distribution .retailGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.retail-and-distribution .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.mfgHeroScene img {
object-position: 70% 50%;
}
.mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.mfgHeroScene img {
object-position: 78% 50%;
}
.mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.retail-and-distribution .mfgHeroScene img {
object-position: 72% 50%;
}
.retail-and-distribution .retailIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
.retail-and-distribution .retailGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
.retail-and-distribution .retailVisualGallery {
min-height: 0;
}
.retail-and-distribution .retailIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
.mfgHeroScene img {
object-position: 90% 50%;
}
}
.retail-and-distribution .retailIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
.retail-and-distribution .retailGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
.retail-and-distribution .retailVisualGallery {
min-height: 0;
}
.retail-and-distribution .mfgHeroScene img {
object-position: 72% 50%;
}
.retail-and-distribution .retailIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.retail-and-distribution .retailGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
.retail-and-distribution .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
.retail-and-distribution .mfgHeroScene img {
object-position: 80% 50%;
}
}
.retail-and-distribution .mfgHeroContent {
background: transparent;
}
.retail-and-distribution .mfgHeroScene img {
object-position: 74% 50%;
}
.retail-and-distribution .retailIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.retail-and-distribution .retailGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.mfgHeroScene img {
object-position: 83% 50%;
}
}
.retail-and-distribution .mfgHeroContent {
background: transparent;
}
.retail-and-distribution .mfgHeroScene img {
object-position: 74% 50%;
}
.retail-and-distribution .retailIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.retail-and-distribution .retailGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.mfgHeroScene img {
object-position: 86% 50%;
}
}
.retail-and-distribution .mfgHeroContent {
background: transparent;
}
.retail-and-distribution .mfgHeroScene img {
object-position: 76% 50%;
}
.retail-and-distribution .retailIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.retail-and-distribution .retailGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
.mfgHeroScene img {
object-position: 87% 50%;
}
} .retail-and-distribution .mfgHeroContent {
background: transparent;
}
.retail-and-distribution .mfgHeroScene img {
object-position: 76% 50%;
}
.retail-and-distribution .retailIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.retail-and-distribution .retailGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.retail-and-distribution #retail-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.mfgHeroScene img {
object-position: 88% 50%;
}
}  #dreamz-repair .industryIntroHead.compact,
#dreamz-repair .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-repair .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-repair .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-repair .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-repair .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-repair .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-repair .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-repair .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-repair .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-repair .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-repair .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-repair .windowDots {
display: flex;
gap: 5px;
}
#dreamz-repair .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-repair .windowBody {
padding: 16px;
}
#dreamz-repair .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-repair .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-repair .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-repair .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-repair .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-repair .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-repair .chartGridLine.l1 {
top: 34px;
}
#dreamz-repair .chartGridLine.l2 {
top: 65px;
}
#dreamz-repair .chartGridLine.l3 {
top: 96px;
}
#dreamz-repair .chartGridLine.l4 {
top: 127px;
}
#dreamz-repair .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-repair .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-repair .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-repair .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-repair .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-repair .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-repair .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-repair .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-repair .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-repair .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-repair .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-repair .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-repair .noteCard p,
#dreamz-repair .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-repair .alertStack {
display: grid;
gap: 10px;
}
#dreamz-repair .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-repair .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-repair .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-repair .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-repair .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-repair .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-repair .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-repair .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-repair .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-repair .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-repair .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-repair .scheduleBoard h4,
#dreamz-repair .todoBoard h4,
#dreamz-repair .siteBoard h4,
#dreamz-repair .chatPanel h4,
#dreamz-repair .lessonPanel h4,
#dreamz-repair .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-repair .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-repair .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-repair .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-repair .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-repair .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-repair .taskRow:last-child {
border-bottom: 0;
}
#dreamz-repair .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-repair .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-repair .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-repair .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-repair .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-repair .inventoryTable th,
#dreamz-repair .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-repair .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-repair .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-repair .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-repair .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-repair .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-repair .phoneBody {
padding: 12px;
}
#dreamz-repair .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-repair .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-repair .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-repair .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-repair .progressList {
display: grid;
gap: 10px;
}
#dreamz-repair .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-repair .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-repair .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-repair .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-repair .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-repair .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-repair .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-repair .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-repair .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-repair .pin1 {
top: 56px;
left: 58px;
}
#dreamz-repair .pin2 {
top: 88px;
right: 88px;
}
#dreamz-repair .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-repair .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-repair .siteRow:last-child {
border-bottom: 0;
}
#dreamz-repair .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-repair .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-repair .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-repair .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-repair .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-repair .graphNodes:before,
#dreamz-repair .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-repair .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-repair .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-repair .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-repair .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-repair .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-repair .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-repair .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-repair .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-repair .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-repair .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-repair .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-repair .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-repair .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-repair .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-repair .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-repair .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-repair .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-repair .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-repair .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-repair .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-repair .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-repair .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-repair .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-repair .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-repair .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-repair .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-repair .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-repair .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-repair .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-repair .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-repair .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-repair .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-repair .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-repair #repair-operations-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-repair #repair-operations-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-repair #repair-operations-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-repair #repair-operations-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-repair #repair-operations-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-repair #repair-commercial-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-repair #repair-commercial-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-repair #repair-commercial-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-repair #repair-commercial-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-repair #repair-commercial-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-repair #repair-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-repair #repair-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-repair #repair-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-repair #repair-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-repair #repair-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-repair #repair-operations-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-repair #repair-operations-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-repair #repair-operations-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-repair #repair-operations-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-repair #repair-operations-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-repair #repair-commercial-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-repair #repair-commercial-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-repair #repair-commercial-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-repair #repair-commercial-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-repair #repair-commercial-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-repair #repair-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-repair #repair-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-repair #repair-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-repair #repair-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-repair #repair-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-repair .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-repair .featureMediaPanels {
min-height: 0;
}
#dreamz-repair .inventorySplit,
#dreamz-repair .forecastGrid,
#dreamz-repair .siteGrid,
#dreamz-repair .spectrumGrid,
#dreamz-repair .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-repair .metricGrid,
#dreamz-repair .lessonCards,
#dreamz-repair .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-repair .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-repair {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-repair * {
box-sizing: border-box;
}
#dreamz-repair {
scroll-behavior: smooth;
}
#dreamz-repair {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-repair a {
color: inherit;
text-decoration: none;
}
#dreamz-repair .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-repair .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-repair .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-repair .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-repair .brand span {
color: var(--brand);
}
#dreamz-repair .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-repair .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-repair .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-repair .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-repair .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-repair .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-repair .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-repair .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-repair h1,
#dreamz-repair h2,
#dreamz-repair h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
#dreamz-repair h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
#dreamz-repair h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
}
#dreamz-repair h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-repair .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-repair .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-repair .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-repair .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-repair .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-repair .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-repair .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-repair .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-repair .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-repair .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-repair .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-repair .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-repair .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-repair .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-repair .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-repair .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-repair .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-repair .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-repair .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-repair .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-repair .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-repair .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-repair .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-repair .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-repair .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-repair .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-repair .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-repair .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
#dreamz-repair .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-repair .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-repair .aiJourney h2 {
color: #fff;
}
#dreamz-repair .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-repair .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-repair .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-repair .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-repair .aiStep:last-child::after {
display: none;
}
#dreamz-repair .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-repair .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-repair .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-repair .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-repair .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-repair .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-repair .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-repair .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-repair .capability {
background: #fff;
}
#dreamz-repair .capability.alt {
background: var(--sky-2);
}
#dreamz-repair .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-repair .twoCol.reverse .visual {
order: 2;
}
#dreamz-repair .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-repair .visual .placeholder {
min-height: 355px;
}
#dreamz-repair .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-repair .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-repair details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-repair details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-repair details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-repair details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-repair details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-repair details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-repair .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-repair .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-repair .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-repair .darkSection h2,
#dreamz-repair .darkSection h3 {
color: #fff;
}
#dreamz-repair .darkSection .sectionHead p,
#dreamz-repair .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-repair .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-repair .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-repair .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-repair .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-repair .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-repair .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-repair .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-repair .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-repair .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-repair .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-repair .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-repair .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-repair .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-repair .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-repair .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-repair .benefitBand h2 {
color: #fff;
}
#dreamz-repair .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-repair .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-repair .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-repair .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-repair .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-repair .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-repair .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-repair .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-repair .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-repair .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-repair .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-repair .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-repair .faq {
max-width: 900px;
}
#dreamz-repair .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-repair .ctaPanel h2 {
color: #fff;
}
#dreamz-repair .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-repair .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-repair .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-repair .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-repair .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-repair .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-repair .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-repair .inlineCta.dark h3 {
color: #fff;
}
#dreamz-repair .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-repair .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-repair .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-repair .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-repair .button.yellow:hover {
background: #FFD84D;
}
#dreamz-repair .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-repair .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-repair .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-repair .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-repair footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-repair .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-repair .heroGrid,
#dreamz-repair .twoCol,
#dreamz-repair .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-repair .twoCol.reverse .visual {
order: initial;
}
#dreamz-repair .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-repair .ratingGrid,
#dreamz-repair .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-repair .ratingLead,
#dreamz-repair .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-repair .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-repair .aiStep:nth-child(3)::after,
#dreamz-repair .aiStep:last-child::after {
display: none;
}
#dreamz-repair .outcomeGrid,
#dreamz-repair .challengeGrid,
#dreamz-repair .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-repair .cards,
#dreamz-repair .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-repair .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-repair .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-repair .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-repair .hero {
padding: 58px 0 52px;
}
#dreamz-repair h1 {
font-size: 44px;
}
#dreamz-repair .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-repair .aiStep::after {
display: none;
}
#dreamz-repair .logoRow,
#dreamz-repair .ratingGrid,
#dreamz-repair .awardGrid,
#dreamz-repair .outcomeGrid,
#dreamz-repair .challengeGrid,
#dreamz-repair .benefitGrid,
#dreamz-repair .cards,
#dreamz-repair .proofCards,
#dreamz-repair .integrationGrid,
#dreamz-repair .featureList {
grid-template-columns: 1fr;
}
#dreamz-repair .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-repair .ctaPanel {
padding: 34px 24px;
}
#dreamz-repair .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-repair .inlineCtaActions {
width: 100%;
}
#dreamz-repair .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-repair {
--muted: #526A7C;
--shadow: none;
}
#dreamz-repair {
background: var(--sky-2);
}
#dreamz-repair p {
margin-bottom: 0;
}
#dreamz-repair [id] {
scroll-margin-top: 94px;
}
#dreamz-repair svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-repair .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: none;
}
#dreamz-repair h1,
#dreamz-repair h2,
#dreamz-repair h3 {
color: var(--black);
}
#dreamz-repair .darkSection h2,
#dreamz-repair .darkSection h3,
#dreamz-repair .aiJourney h2,
#dreamz-repair .benefitBand h2,
#dreamz-repair .ctaPanel h2,
#dreamz-repair .inlineCta.dark h3 {
color: #fff;
}
#dreamz-repair .wrap>*,
#dreamz-repair .heroGrid>*,
#dreamz-repair .twoCol>*,
#dreamz-repair .ctaPanel>* {
min-width: 0;
}
#dreamz-repair .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-repair .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-repair .skipLink:focus {
transform: none;
}
#dreamz-repair a:focus-visible,
#dreamz-repair summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-repair .darkSection a:focus-visible,
#dreamz-repair .darkSection summary:focus-visible,
#dreamz-repair .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-repair .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-repair .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-repair .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-repair .brandName>span {
color: var(--brand-dark);
}
#dreamz-repair .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-repair .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-repair .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-repair .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-repair .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
#dreamz-repair .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-repair .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-repair .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-repair .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-repair .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-repair .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-repair .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-repair .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-repair .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-repair .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-repair .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-repair .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-repair .clientBand {
padding: 27px 0;
}
#dreamz-repair .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-repair .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-repair .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-repair .logoBox.wide {
font-size: 12px;
}
#dreamz-repair .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-repair h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-repair .sectionHead {
margin-bottom: 36px;
}
#dreamz-repair .eyebrow {
line-height: 1.5;
}
#dreamz-repair .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-repair .aiStep {
min-height: 162px;
}
#dreamz-repair .aiStep strong {
line-height: 1.35;
}
#dreamz-repair .aiStep span {
line-height: 1.65;
}
#dreamz-repair .aiCallout {
margin-top: 24px;
}
#dreamz-repair .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-repair .outcome>.icon {
color: var(--navy);
}
#dreamz-repair .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-repair .awardItem>.icon {
color: var(--navy);
}
#dreamz-repair .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-repair .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-repair .twoCol.reverse .visual {
order: -1;
}
#dreamz-repair .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-repair .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-repair .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-repair .featureList {
gap: 13px 18px;
}
#dreamz-repair .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-repair .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-repair .check .icon {
width: 14px;
height: 14px;
}
#dreamz-repair details.capabilityMore {
margin-bottom: 0;
}
#dreamz-repair .capabilityMore summary {
min-height: 34px;
}
#dreamz-repair .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-repair .textCta {
font-size: 14px;
}
#dreamz-repair .visual {
min-width: 0;
}
#dreamz-repair .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-repair .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-repair .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-repair .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-repair .panelBody {
padding: 20px;
}
#dreamz-repair .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-repair .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-repair .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-repair .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-repair .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-repair .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-repair .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-repair .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-repair .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-repair .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-repair .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-repair .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-repair .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-repair .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-repair .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-repair .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-repair .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-repair .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-repair .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-repair .dataRow:last-child {
border-bottom: 0;
}
#dreamz-repair .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-repair .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-repair .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-repair .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-repair .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-repair .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-repair .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-repair .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-repair .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-repair .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-repair .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-repair .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-repair .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-repair .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-repair .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-repair .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-repair .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-repair .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-repair .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-repair .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-repair .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-repair .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-repair .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-repair .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-repair .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-repair .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-repair .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-repair .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-repair .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-repair .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-repair .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-repair .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-repair .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-repair .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-repair .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-repair .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-repair .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-repair .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-repair .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-repair .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-repair .promptList {
display: grid;
gap: 10px;
}
#dreamz-repair .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-repair .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-repair .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-repair .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-repair .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-repair .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-repair .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-repair .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-repair .quoteTable th,
#dreamz-repair .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-repair .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-repair .quoteTable td:first-child {
width: 64%;
}
#dreamz-repair .quoteTable th:last-child,
#dreamz-repair .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-repair .quoteTable strong {
font-size: 11px;
}
#dreamz-repair .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-repair .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-repair .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-repair .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-repair .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-repair .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-repair .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-repair .orderJourney {
margin: 20px 0;
}
#dreamz-repair .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-repair .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-repair .journeyRow:last-child:before {
display: none;
}
#dreamz-repair .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-repair .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-repair .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-repair .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-repair .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-repair .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-repair .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-repair .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-repair .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-repair .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-repair .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-repair .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-repair .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-repair .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-repair .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-repair .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-repair .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-repair .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-repair .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-repair .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-repair .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-repair .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-repair .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-repair .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-repair .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-repair .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-repair .customerTimeline strong {
color: #fff;
}
#dreamz-repair .customerTimeline small {
color: #BFBFBF;
}
#dreamz-repair .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-repair .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-repair .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-repair .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-repair .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-repair .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-repair .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-repair .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-repair .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-repair .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-repair .chartTitle strong {
font-size: 12px;
}
#dreamz-repair .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-repair .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-repair .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-repair .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-repair .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-repair .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-repair .inlineCtaActions {
max-width: 42%;
}
#dreamz-repair .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-repair .inlineCta h3 {
line-height: 1.35;
}
#dreamz-repair .card {
box-shadow: none;
}
#dreamz-repair .cardIcon {
box-shadow: none;
}
#dreamz-repair .card h3 {
font-size: 22px;
}
#dreamz-repair .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-repair .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-repair .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-repair .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-repair .ratingBand {
padding: 34px 0;
}
#dreamz-repair .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-repair .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-repair .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-repair .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-repair .ratingItem:first-child {
border-left: 0;
}
#dreamz-repair .proofCard h3 {
font-size: 23px;
}
#dreamz-repair .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-repair .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-repair .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-repair .integration {
min-height: 98px;
}
#dreamz-repair .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-repair .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-repair .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-repair .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-repair .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-repair .finalActions {
display: grid;
gap: 11px;
}
#dreamz-repair .finalActions .button {
white-space: nowrap;
}
#dreamz-repair .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-repair .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-repair .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-repair .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-repair .heroGrid {
gap: 30px;
}
#dreamz-repair .twoCol {
gap: 32px;
}
#dreamz-repair .panelBody {
padding: 16px;
}
#dreamz-repair .panelHead {
padding: 16px;
}
#dreamz-repair .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-repair .pipelineColumns {
gap: 7px;
}
#dreamz-repair .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-repair .heroGrid,
#dreamz-repair .twoCol,
#dreamz-repair .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .heroGrid {
gap: 36px;
}
#dreamz-repair .hero h1 {
max-width: 730px;
}
#dreamz-repair .hero .lead {
max-width: 690px;
}
#dreamz-repair .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-repair .twoCol {
gap: 34px;
}
#dreamz-repair .twoCol.reverse .visual {
order: initial;
}
#dreamz-repair .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-repair .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-repair .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-repair .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-repair .ratingSectionGrid {
gap: 20px;
}
#dreamz-repair .inlineCta {
align-items: flex-start;
}
#dreamz-repair .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-repair .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-repair .card {
padding: 22px;
}
#dreamz-repair .card h3 {
font-size: 21px;
}
#dreamz-repair .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-repair .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-repair .cards,
#dreamz-repair .proofCards {
grid-template-columns: 1fr;
}
#dreamz-repair .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-repair .inlineCta {
flex-direction: column;
}
#dreamz-repair .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-repair .inlineCtaActions .button {
flex: 1;
}
#dreamz-repair .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-repair .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-repair .wrap {
width: calc(100% - 32px);
}
#dreamz-repair [id] {
scroll-margin-top: 82px;
}
#dreamz-repair .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-repair .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-repair .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-repair .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
#dreamz-repair .hero {
padding: 51px 0 48px;
}
#dreamz-repair .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-repair .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-repair .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-repair .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-repair .hero .microcopy {
font-size: 11px;
}
#dreamz-repair .heroPills span {
font-size: 9px;
}
#dreamz-repair .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-repair .sectionHead p {
font-size: 16px;
}
#dreamz-repair .copy h2 {
font-size: 34px;
}
#dreamz-repair .copy p {
font-size: 15px;
}
#dreamz-repair .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-repair .logoBox {
min-height: 53px;
}
#dreamz-repair .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-repair .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-repair .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-repair .aiStep strong {
font-size: 13px;
}
#dreamz-repair .aiStep span {
font-size: 11px;
}
#dreamz-repair .aiStep::after {
display: none;
}
#dreamz-repair .outcomeGrid,
#dreamz-repair .challengeGrid,
#dreamz-repair .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .outcome {
padding: 24px;
}
#dreamz-repair .outcome strong {
font-size: 22px;
}
#dreamz-repair .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-repair .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-repair .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-repair .featureList,
#dreamz-repair .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .featureItem {
font-size: 13px;
}
#dreamz-repair .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-repair .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-repair .panelHead {
padding: 15px 13px;
}
#dreamz-repair .panelHead>strong {
font-size: 12px;
}
#dreamz-repair .panelBody {
padding: 14px;
}
#dreamz-repair .productPanel {
border-radius: 16px;
}
#dreamz-repair .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-repair .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-repair .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-repair .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-repair .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-repair .deal strong {
font-size: 10px;
}
#dreamz-repair .deal small {
font-size: 9px;
}
#dreamz-repair .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-repair .mobileWorkspace {
gap: 12px;
}
#dreamz-repair .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-repair .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-repair .sideTile {
padding: 10px;
}
#dreamz-repair .sideTile strong {
font-size: 10px;
}
#dreamz-repair .sideTile p {
font-size: 9px;
}
#dreamz-repair .mobileHeader strong {
font-size: 15px;
}
#dreamz-repair .mobileAccount strong {
font-size: 10px;
}
#dreamz-repair .mobileAccount small {
font-size: 7px;
}
#dreamz-repair .phoneDevice .rowIcon {
display: none;
}
#dreamz-repair .quoteTable th,
#dreamz-repair .quoteTable td {
padding: 12px 4px;
}
#dreamz-repair .quoteTable strong {
font-size: 10px;
}
#dreamz-repair .quoteTable small {
font-size: 8px;
}
#dreamz-repair .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-repair .docHeader strong {
font-size: 17px;
}
#dreamz-repair .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-repair .miniFlow span {
padding: 6px;
}
#dreamz-repair .rowCopy strong {
font-size: 10px;
}
#dreamz-repair .rowCopy small {
font-size: 8px;
}
#dreamz-repair .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-repair .miniStats {
gap: 7px;
}
#dreamz-repair .miniStats>div {
padding: 9px;
}
#dreamz-repair .miniStats strong {
font-size: 18px;
}
#dreamz-repair .miniStats span {
font-size: 8px;
}
#dreamz-repair .collectionStats>div {
padding: 13px;
}
#dreamz-repair .collectionStats strong {
font-size: 24px;
}
#dreamz-repair .customerHeader strong {
font-size: 17px;
}
#dreamz-repair .customerFacts>div {
padding: 10px;
}
#dreamz-repair .customerFacts strong {
font-size: 12px;
}
#dreamz-repair .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-repair .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-repair .ratingItem:last-child {
grid-column: 1/-1;
}
#dreamz-repair .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-repair .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-repair .integration small {
font-size: 9px;
}
#dreamz-repair .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-repair .ctaPanel p {
font-size: 15px;
}
#dreamz-repair .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-repair .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-repair .contextSection {
padding: 0 0 24px;
}
#dreamz-repair .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-repair .wrap {
width: calc(100% - 24px);
}
#dreamz-repair .brand {
font-size: 18px;
}
#dreamz-repair .brandMark {
width: 25px;
height: 25px;
}
#dreamz-repair .nav>.button {
font-size: 10px;
padding: 0 10px;
}
#dreamz-repair .hero h1 {
font-size: 38px;
}
#dreamz-repair .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-repair .copy h2 {
font-size: 31px;
}
#dreamz-repair .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-repair .phoneDevice {
width: 210px;
}
#dreamz-repair .phoneDevice .rowIcon {
display: grid;
}
#dreamz-repair .mobileSide {
gap: 8px;
}
#dreamz-repair .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-repair .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-repair .sideTile p {
margin: 0;
}
#dreamz-repair .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-repair .collectionStats strong {
font-size: 21px;
}
#dreamz-repair .inventoryIntro strong {
font-size: 14px;
}
#dreamz-repair .dataRow {
gap: 7px;
}
#dreamz-repair .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-repair .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-repair {
scroll-behavior: auto;
}
#dreamz-repair *,
#dreamz-repair *::before,
#dreamz-repair *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-repair {
background: var(--sky-2);
}
#dreamz-repair .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-repair .hero .eyebrow {
max-width: 100%;
}
#dreamz-repair .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-repair .ganttIllustration,
#dreamz-repair .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-repair .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-repair .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-repair .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-repair .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-repair .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-repair .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-repair .comparisonTable th,
#dreamz-repair .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-repair .comparisonTable th:first-child {
width: 23%;
}
#dreamz-repair .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-repair .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-repair .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-repair .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-repair .card,
#dreamz-repair .proofCard,
#dreamz-repair .productPanel,
#dreamz-repair .outcome,
#dreamz-repair .benefit {
box-shadow: none;
}
#dreamz-repair .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-repair .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-repair .hero .eyebrow {
font-size: 10px;
}
#dreamz-repair .comparisonTable {
font-size: 11px;
}
#dreamz-repair .comparisonTable th,
#dreamz-repair .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-repair .comparisonTable th:first-child {
width: 24%;
}
#dreamz-repair .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-repair .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-repair .hero h1 {
font-size: 38px;
}
}
#dreamz-repair .scheduleIllustration,
#dreamz-repair .analyticsIllustration,
#dreamz-repair .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-repair .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-repair .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-repair .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-repair .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-repair .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-repair .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-repair .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-repair .darkSection .textCta {
color: var(--yellow);
}
#dreamz-repair .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-repair .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-repair .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-repair .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-repair .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-repair .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-repair .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-repair .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-repair .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-repair .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-repair .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-repair .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-repair .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-repair .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-repair .phoneDevice {
max-width: 100%;
}
#dreamz-repair .heroPills {
line-height: 1.55;
}
#dreamz-repair .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-repair .plantFacts {
gap: 7px;
}
#dreamz-repair .plantFacts>div {
padding: 9px;
}
#dreamz-repair .plantFacts strong {
font-size: 11px;
}
#dreamz-repair .scanSummary {
padding: 12px;
}
#dreamz-repair .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-repair .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-repair .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-repair .phoneDevice .rowIcon {
display: grid;
}
#dreamz-repair .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-repair .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-repair .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-repair .sideTile strong {
font-size: 12px;
}
#dreamz-repair .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-repair .topbar,
#dreamz-repair .heroActions,
#dreamz-repair .finalActions,
#dreamz-repair .contextSection,
#dreamz-repair .valueCtaSection {
display: none;
}
#dreamz-repair section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-repair .hero {
padding-top: 20px;
}
}
#dreamz-repair {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-repair h1,
#dreamz-repair h2,
#dreamz-repair h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
#dreamz-repair p {
margin: 0;
}
#dreamz-repair main {
display: block;
}
#dreamz-repair .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-repair .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-repair .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-repair .heroAccent {
color: var(--black);
}
#dreamz-repair .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-repair .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-repair .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-repair .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-repair .microcopy {
margin-top: 14px;
}
#dreamz-repair .heroPills {
margin-top: 13px;
}
#dreamz-repair .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-repair .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-repair .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-repair .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-repair .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-repair .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-repair .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-repair .clientBand {
padding: 24px 0;
}
#dreamz-repair .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-repair .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-repair .logoBox.wide {
font-size: 15px;
}
#dreamz-repair .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-repair .sectionHead p {
margin: 17px 0 0;
}
#dreamz-repair .copy p {
margin: 16px 0 0;
}
#dreamz-repair .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-repair .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-repair .aiJourney {
background: var(--black);
}
#dreamz-repair .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-repair .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-repair .productPanel {
border-radius: 18px;
}
#dreamz-repair .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-repair .panelHead>strong {
font-size: 13px;
}
#dreamz-repair .sampleTag {
font-size: 9px;
}
#dreamz-repair .panelBody {
padding: 21px;
}
#dreamz-repair .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-repair .docHeader {
padding-bottom: 16px;
}
#dreamz-repair .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-repair .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-repair .smallLabel {
font-size: 9px;
}
#dreamz-repair .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-repair .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-repair .dataRow {
padding: 14px 0;
}
#dreamz-repair .statusPill {
font-size: 8px;
}
#dreamz-repair .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-repair .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-repair .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-repair .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-repair .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-repair .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-repair .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-repair .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-repair .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-repair .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-repair .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-repair .hierarchy strong {
color: var(--navy);
}
#dreamz-repair .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-repair .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-repair .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-repair .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-repair .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-repair .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-repair .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-repair .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-repair .mobileAccount small {
font-size: 9px;
}
#dreamz-repair .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-repair .sideTile strong {
font-size: 12px;
}
#dreamz-repair .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-repair .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-repair .mobileAction {
font-size: 9px;
}
#dreamz-repair .journeyRow strong {
font-size: 13px;
}
#dreamz-repair .journeyRow small {
font-size: 11px;
}
#dreamz-repair .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-repair .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-repair .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-repair .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-repair .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-repair .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-repair .utilityReadout small {
font-size: 12px;
}
#dreamz-repair .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-repair .darkSection {
background: var(--black);
}
#dreamz-repair .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-repair .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-repair .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-repair .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-repair .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-repair .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-repair .assistantHead small {
font-size: 11px;
}
#dreamz-repair .assistantNote {
font-size: 11px;
}
#dreamz-repair .reportTags span {
font-size: 10px;
}
#dreamz-repair .card p {
margin: 12px 0 0;
}
#dreamz-repair .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-repair .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-repair .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-repair .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-repair .cards>.card p {
padding-bottom: 22px;
}
#dreamz-repair .benefitBand {
background: var(--black);
}
#dreamz-repair .benefit {
background: var(--black-soft);
}
#dreamz-repair .inlineCta h3 {
font-size: 20px;
}
#dreamz-repair .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-repair .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-repair .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-repair .valueCtaSection {
padding: 32px 0;
}
#dreamz-repair .proofCard p {
margin-top: 15px;
}
#dreamz-repair .proofCard h3 {
font-size: 23px;
}
#dreamz-repair .integrationNote {
margin-top: 23px;
}
#dreamz-repair .ctaPanel {
background: var(--black);
}
#dreamz-repair .ctaPanel p {
margin-top: 16px;
}
#dreamz-repair .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-repair .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-repair a:hover {
text-decoration: none;
}
#dreamz-repair .textCta:hover {
color: var(--navy);
}
#dreamz-repair .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-repair .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-repair .hero h1 {
font-size: 49px;
}
#dreamz-repair .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-repair .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-repair .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-repair .hero h1 {
font-size: 58px;
}
#dreamz-repair .heroVisual {
max-width: 548px;
}
#dreamz-repair .hero .lead {
max-width: 700px;
}
#dreamz-repair .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-repair .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-repair .logoBox:last-child {
grid-column: auto;
}
#dreamz-repair .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-repair .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-repair .inlineCtaActions .button {
flex: 1;
}
#dreamz-repair .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-repair .hero {
padding: 28px 0 40px;
}
#dreamz-repair .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-repair .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-repair .heroActions {
gap: 10px;
}
#dreamz-repair .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-repair .breadcrumb {
margin-bottom: 21px;
}
#dreamz-repair .hero .eyebrow {
font-size: 11px;
}
#dreamz-repair .heroVisual {
max-width: 480px;
}
#dreamz-repair .heroPills {
row-gap: 9px;
}
#dreamz-repair .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-repair .heroPills span+span {
padding-left: 7px;
}
#dreamz-repair .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-repair .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-repair .clientBand {
padding: 25px 0;
}
#dreamz-repair .copy h2 {
font-size: 33px;
}
#dreamz-repair .panelBody {
padding: 16px;
}
#dreamz-repair .panelHead {
padding: 15px;
}
#dreamz-repair .panelHead>strong {
font-size: 12px;
}
#dreamz-repair .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-repair .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-repair .docHeader strong {
font-size: 18px;
}
#dreamz-repair .docHeader small {
font-size: 10px;
}
#dreamz-repair .rowCopy strong {
font-size: 11px;
}
#dreamz-repair .rowCopy small {
font-size: 10px;
}
#dreamz-repair .miniStats {
gap: 7px;
}
#dreamz-repair .miniStats strong {
font-size: 21px;
}
#dreamz-repair .miniStats span {
font-size: 9px;
}
#dreamz-repair .miniStats>div {
padding: 10px 8px;
}
#dreamz-repair .plantFacts {
gap: 8px;
}
#dreamz-repair .plantFacts>div {
padding: 10px;
}
#dreamz-repair .plantFacts strong {
font-size: 11px;
}
#dreamz-repair .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-repair .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-repair .utilityReadout span {
font-size: 8px;
}
#dreamz-repair .utilityReadout strong {
font-size: 24px;
}
#dreamz-repair .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-repair .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-repair .comparisonTable {
font-size: 11px;
}
#dreamz-repair .comparisonTable th,
#dreamz-repair .comparisonTable td {
padding: 13px 9px;
}
#dreamz-repair .contextSection {
padding: 0 0 22px;
}
#dreamz-repair .valueCtaSection {
padding: 25px 0;
}
#dreamz-repair .inlineCtaActions {
flex-direction: column;
}
#dreamz-repair .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-repair .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-repair .phoneDevice {
width: 222px;
}
#dreamz-repair .phoneDevice .rowIcon {
display: grid;
}
#dreamz-repair .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-repair .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-repair .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-repair .sideTile p {
margin: 0;
}
#dreamz-repair .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-repair .dataRow {
gap: 8px;
}
#dreamz-repair .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-repair .miniStats strong {
font-size: 19px;
}
#dreamz-repair .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-repair .heroActions .button {
width: 100%;
}
#dreamz-repair .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-repair .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-repair .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-repair .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-repair .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-repair .aiStep span {
font-size: 13px;
}
#dreamz-repair .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-repair {
background: var(--white);
}
#dreamz-repair img {
display: block;
max-width: 100%;
}
#dreamz-repair h1,
#dreamz-repair h2,
#dreamz-repair h3 {
text-wrap: balance;
}
#dreamz-repair .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-repair .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-repair .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-repair .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-repair .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-repair .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-repair .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-repair .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-repair .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-repair .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-repair .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-repair .industryIntro {
padding: 78px 0 66px;
}
#dreamz-repair .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-repair .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-repair .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-repair .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-repair .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-repair .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-repair .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-repair .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-repair .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-repair .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-repair .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-repair .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-repair .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-repair .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-repair .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-repair .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-repair .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-repair .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-repair .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-repair .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-repair .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-repair .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-repair .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-repair .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-repair .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-repair .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-repair .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-repair .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-repair .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-repair .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-repair .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-repair .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-repair .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-repair .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-repair .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-repair .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-repair .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-repair .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-repair .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-repair .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-repair .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-repair .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-repair .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-repair .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-repair .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-repair .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-repair .rfidSpotlight {
background: #fff;
}
#dreamz-repair .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-repair .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-repair .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-repair .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-repair .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-repair .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-repair .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-repair .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-repair .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-repair .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-repair .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-repair .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-repair .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-repair .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-repair .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-repair .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-repair .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-repair .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-repair .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-repair .featurePanel {
display: none;
}
#dreamz-repair .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-repair .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-repair .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-repair .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-repair .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-repair .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-repair .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-repair .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-repair .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-repair .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-repair .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-repair .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-repair .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-repair .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-repair .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-repair .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-repair .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-repair .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-repair .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-repair .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-repair .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-repair .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-repair .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-repair .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-repair .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-repair .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-repair .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-repair .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-repair .aiReviewBody {
padding: 18px;
}
#dreamz-repair .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-repair .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-repair .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-repair .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-repair .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-repair .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-repair .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-repair .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-repair .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-repair .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-repair .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-repair .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-repair .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-repair .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-repair .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-repair .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-repair .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-repair .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-repair .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-repair .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-repair .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-repair .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-repair .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-repair .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-repair .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-repair .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-repair .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-repair .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-repair .workflowDetails .featureList,
#dreamz-repair .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-repair .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-repair .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-repair .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-repair #repair-connected-tools {
background: #fff;
}
#dreamz-repair #repair-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-repair .featureTab,
#dreamz-repair .industryPriority,
#dreamz-repair summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-repair .industryIntroHead {
gap: 30px;
}
#dreamz-repair .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-repair .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-repair .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-repair .factoryWorkflow {
padding: 22px;
}
#dreamz-repair .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-repair .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-repair .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-repair .industryPriorityGrid {
gap: 14px;
}
#dreamz-repair .industryPriority {
padding: 22px 19px;
}
#dreamz-repair .industryPriority h3 {
font-size: 21px;
}
#dreamz-repair .industryPriority p {
font-size: 12px;
}
#dreamz-repair .priorityLink {
font-size: 10px;
}
#dreamz-repair .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-repair .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-repair .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-repair .vedaUseCases>div {
display: block;
}
#dreamz-repair .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-repair .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-repair .featureTabs {
gap: 8px;
}
#dreamz-repair .featureTab {
min-height: 108px;
}
#dreamz-repair .featureStage,
#dreamz-repair .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-repair .rfidSpotlight .spotlightMedia,
#dreamz-repair .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-repair .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-repair .featurePanel {
min-height: 0;
}
#dreamz-repair .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-repair .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-repair .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-repair .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-repair .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-repair .clientBand {
padding: 22px 0;
}
#dreamz-repair .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-repair .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-repair .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-repair .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-repair .industryIntro {
padding: 53px 0;
}
#dreamz-repair .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-repair .industryIntroHead>p {
font-size: 14px;
}
#dreamz-repair .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .industryPriority {
padding: 23px;
}
#dreamz-repair .industryPriority h3 {
font-size: 24px;
}
#dreamz-repair .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-repair .industryPriority p {
font-size: 13px;
}
#dreamz-repair .priorityLink {
font-size: 11px;
}
#dreamz-repair .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-repair .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-repair .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-repair .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-repair .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-repair .vedaUseCases>div {
display: flex;
}
#dreamz-repair .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-repair .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-repair .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-repair .vedaMessage.user {
margin-left: 25px;
}
#dreamz-repair .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-repair .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-repair .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-repair .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-repair .spotlightHead h2 {
font-size: 32px;
}
#dreamz-repair .spotlightHead>p {
font-size: 14px;
}
#dreamz-repair .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-repair .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-repair .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-repair .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-repair .featurePanel h3 {
font-size: 24px;
}
#dreamz-repair .featurePanel>p {
font-size: 13px;
}
#dreamz-repair .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-repair .spotlightChecks>li {
font-size: 12px;
}
#dreamz-repair .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-repair .spotlightActions .button {
width: 100%;
}
#dreamz-repair .spotlightScope {
font-size: 10px;
}
#dreamz-repair .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-repair .mediaTitle strong {
font-size: 11px;
}
#dreamz-repair .mediaTitle div>span {
font-size: 8px;
}
#dreamz-repair .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-repair .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-repair .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-repair .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-repair .aiReviewBody {
padding: 13px;
}
#dreamz-repair .aiIssue {
padding: 13px;
}
#dreamz-repair .aiIssue strong {
font-size: 14px;
}
#dreamz-repair .aiEvidence {
gap: 6px;
}
#dreamz-repair .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-repair .aiEvidence strong {
font-size: 9px;
}
#dreamz-repair .aiEvidence span {
font-size: 7px;
}
#dreamz-repair .exampleLabel {
font-size: 6px;
}
#dreamz-repair .factoryWorkflows {
padding: 55px 0;
}
#dreamz-repair .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-repair .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-repair .industryRibbonGrid {
gap: 12px;
}
#dreamz-repair .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-repair .spotlightHead h2 {
font-size: 29px;
}
#dreamz-repair .featureStage {
padding: 19px 13px;
}
#dreamz-repair .mediaTitle>.icon {
display: none;
}
#dreamz-repair .exampleLabel {
display: none;
}
#dreamz-repair .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-repair .featureTabs {
display: none;
}
#dreamz-repair .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-repair .featureStage {
display: block;
}
#dreamz-repair .featurePanel {
color: #000;
}
}
#dreamz-repair #repair-operations-features-1:checked~.featureTabs label[for="repair-operations-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-operations-features-1:focus-visible~.featureTabs label[for="repair-operations-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-operations-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-repair #repair-operations-features-2:checked~.featureTabs label[for="repair-operations-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-operations-features-2:focus-visible~.featureTabs label[for="repair-operations-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-operations-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-repair #repair-operations-features-3:checked~.featureTabs label[for="repair-operations-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-operations-features-3:focus-visible~.featureTabs label[for="repair-operations-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-operations-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-repair #repair-operations-features-4:checked~.featureTabs label[for="repair-operations-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-operations-features-4:focus-visible~.featureTabs label[for="repair-operations-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-operations-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-repair #repair-operations-features-5:checked~.featureTabs label[for="repair-operations-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-operations-features-5:focus-visible~.featureTabs label[for="repair-operations-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-operations-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-repair #repair-commercial-features-1:checked~.featureTabs label[for="repair-commercial-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-commercial-features-1:focus-visible~.featureTabs label[for="repair-commercial-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-commercial-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-repair #repair-commercial-features-2:checked~.featureTabs label[for="repair-commercial-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-commercial-features-2:focus-visible~.featureTabs label[for="repair-commercial-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-commercial-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-repair #repair-commercial-features-3:checked~.featureTabs label[for="repair-commercial-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-commercial-features-3:focus-visible~.featureTabs label[for="repair-commercial-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-commercial-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-repair #repair-commercial-features-4:checked~.featureTabs label[for="repair-commercial-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-commercial-features-4:focus-visible~.featureTabs label[for="repair-commercial-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-commercial-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-repair #repair-commercial-features-5:checked~.featureTabs label[for="repair-commercial-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-commercial-features-5:focus-visible~.featureTabs label[for="repair-commercial-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-commercial-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-1:checked~.featureTabs label[for="repair-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-ai-decisions-features-1:focus-visible~.featureTabs label[for="repair-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-2:checked~.featureTabs label[for="repair-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-ai-decisions-features-2:focus-visible~.featureTabs label[for="repair-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-3:checked~.featureTabs label[for="repair-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-ai-decisions-features-3:focus-visible~.featureTabs label[for="repair-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-4:checked~.featureTabs label[for="repair-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-ai-decisions-features-4:focus-visible~.featureTabs label[for="repair-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-5:checked~.featureTabs label[for="repair-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-repair #repair-ai-decisions-features-5:focus-visible~.featureTabs label[for="repair-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-repair #repair-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-repair .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .featureMediaPanels {
min-width: 0;
}
#dreamz-repair .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-repair .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-repair .featureMediaPanels .windowTop strong,
#dreamz-repair .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-repair .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-repair .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-repair .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-repair .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-repair .featureMediaPanels .windowBody>*,
#dreamz-repair .featureMediaPanels .spectrumGrid>*,
#dreamz-repair .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-repair .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-repair .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-repair .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-repair .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-repair .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-repair .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-repair .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-repair .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-repair .pin2 {
top: 88px;
right: 88px;
}
#dreamz-repair .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-repair .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-repair .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-repair .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-repair .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-repair .featureMediaPanels .graphNodes .node.n1,
#dreamz-repair .featureMediaPanels .graphNodes .node.n2,
#dreamz-repair .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-repair .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-repair .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-repair .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-repair .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-repair .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-repair .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-repair .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-repair .freshGraphic * {
box-sizing: border-box;
}
#dreamz-repair .rfPanel,
#dreamz-repair .aiInsightCard,
#dreamz-repair .forecastVisualCard,
#dreamz-repair .forecastSuggestion,
#dreamz-repair .knowledgeTile,
#dreamz-repair .chatConversation,
#dreamz-repair .trainingSummary,
#dreamz-repair .moduleCard,
#dreamz-repair .qualityHeatCard,
#dreamz-repair .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-repair .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-repair .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-repair .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-repair .statusPill,
#dreamz-repair .cardTag,
#dreamz-repair .forecastSuggestion b,
#dreamz-repair .moduleCard b,
#dreamz-repair .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-repair .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-repair .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-repair .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-repair .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-repair .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-repair .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-repair .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-repair .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-repair .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-repair .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-repair .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-repair .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-repair .dot.good {
background: #298EEC;
}
#dreamz-repair .dot.warn {
background: #F4A62A;
}
#dreamz-repair .dot.bad {
background: #EB6B53;
}
#dreamz-repair .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-repair .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-repair .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-repair .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-repair .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-repair .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-repair .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-repair .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-repair .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-repair .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-repair .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-repair .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-repair .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-repair .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-repair .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-repair .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-repair .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-repair .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-repair .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-repair .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-repair .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-repair .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-repair .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-repair .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-repair .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-repair .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-repair .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-repair .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-repair .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-repair .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-repair .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-repair .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-repair .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-repair .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-repair .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-repair .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-repair .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-repair .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-repair .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-repair .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-repair .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-repair .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-repair .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-repair .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-repair .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-repair .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-repair .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-repair .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-repair .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-repair .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-repair .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-repair .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-repair .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-repair .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-repair .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-repair .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-repair .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-repair .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-repair .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-repair .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-repair .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-repair .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-repair .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-repair .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-repair .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-repair .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-repair .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-repair .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-repair .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-repair .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-repair .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-repair .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-repair .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-repair .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-repair .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-repair .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-repair .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-repair .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-repair .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-repair .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-repair .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-repair .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-repair .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-repair .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-repair .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-repair .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-repair .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-repair .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-repair .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-repair .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-repair .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-repair .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-repair .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-repair .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-repair .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-repair .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-repair .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-repair .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-repair .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-repair .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-repair .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-repair .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-repair .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-repair .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-repair .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-repair .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-repair .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-repair .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-repair .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-repair .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-repair .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-repair .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-repair .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-repair .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-repair .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-repair .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-repair .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-repair .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-repair .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-repair .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-repair .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-repair .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-repair .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-repair .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-repair .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-repair .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-repair .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-repair .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-repair .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-repair .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-repair .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-repair .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-repair .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-repair .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-repair .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-repair .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-repair .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-repair .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-repair .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-repair .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-repair .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-repair .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-repair .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-repair .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-repair .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-repair .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-repair .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-repair .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-repair .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-repair .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-repair .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-repair .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-repair .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-repair .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-repair .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-repair .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-repair .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-repair .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-repair .rfTrackLayout,
#dreamz-repair .rfFlowLayout,
#dreamz-repair .rfAlertGrid,
#dreamz-repair .rfCycleLayout,
#dreamz-repair .rfSitesLayout,
#dreamz-repair .aiRootLayout,
#dreamz-repair .aiForecastLayout,
#dreamz-repair .aiChatLayout,
#dreamz-repair .aiTrainingLayout,
#dreamz-repair .aiQualityLayout,
#dreamz-repair .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-repair .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-repair .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-repair .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-repair .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-repair .aiLink {
display: none;
}
}
#dreamz-repair .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-repair .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-repair .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-repair .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-repair .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-repair .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-repair .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-repair .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-repair .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-repair .mfgHero h1>span {
display: block;
}
#dreamz-repair .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-repair .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-repair .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-repair .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-repair .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-repair .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-repair .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-repair .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-repair .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-repair .mfgHeroContent {
min-height: 610px;
}
#dreamz-repair .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-repair .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-repair .mfgHeroLead {
font-size: 16px;
}
#dreamz-repair .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-repair .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-repair .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-repair .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-repair .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-repair .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-repair .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-repair .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-repair .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-repair .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-repair .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-repair .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-repair .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-repair .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-repair .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-repair .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-repair .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-repair .mfgHero {
background: #fff;
color: #000;
}
#dreamz-repair .mfgHeroScene,
#dreamz-repair .mfgHeroActions {
display: none;
}
#dreamz-repair .mfgHeroContent {
min-height: 0;
}
#dreamz-repair .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-repair .mfgHero h1,
#dreamz-repair .mfgHero h1 .mfgHeroAccent,
#dreamz-repair .mfgHero p {
color: #000;
}
}
#dreamz-repair #repair-commercial .featureStage,
#dreamz-repair #repair-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-repair .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-repair .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-repair .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-repair .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-repair .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-repair .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-repair .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-repair .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-repair .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-repair .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-repair .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-repair .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-repair .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-repair .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-repair .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-repair .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-repair .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-repair .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-repair .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-repair .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-repair .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-repair .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-repair .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-repair .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-repair .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-repair .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-repair .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-repair .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-repair .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-repair .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-repair .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-repair .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-repair .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-repair .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-repair .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-repair .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-repair .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-repair .mfgGallery .flowArrow {
display: none;
}
#dreamz-repair .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-repair .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-repair .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-repair .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-repair .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-repair .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-repair .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-repair .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-repair .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-repair .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-repair .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-repair .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-repair .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-repair .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-repair .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-repair .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-repair .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-repair .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-repair .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-repair .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-repair .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-repair .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-repair .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-repair .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-repair .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-repair .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-repair .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-repair .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-repair .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-repair .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-repair .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-repair .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-repair .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-repair .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-repair .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-repair .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-repair .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-repair .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-repair .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-repair .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-repair .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-repair .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-repair .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-repair .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-repair .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-repair .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-repair .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-repair .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-repair .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-repair .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-repair .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-repair .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-repair .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-repair .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-repair .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-repair .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-repair .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-repair .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-repair .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-repair .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-repair .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-repair .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-repair .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-repair .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-repair .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-repair .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-repair .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-repair .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-repair .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-repair .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-repair .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-repair .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-repair .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-repair .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-repair .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-repair .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-repair .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-repair .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-repair .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-repair .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-repair .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-repair .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-repair .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-repair .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-repair .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-repair .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-repair .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-repair .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-repair .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-repair .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-repair .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-repair .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-repair .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-repair .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-repair #repair-commercial .featureStage,
#dreamz-repair #repair-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-repair #repair-commercial .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-repair .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-repair #repair-commercial .featureStage,
#dreamz-repair #repair-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-repair .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-repair .mfgGallery .freshWindow {
height: auto;
}
#dreamz-repair .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-repair .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-repair .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-repair .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-repair .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-repair .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-repair .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-repair .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-repair .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-repair .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-repair .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-repair .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-repair .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-repair .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-repair .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-repair .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-repair .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-repair .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-repair .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-repair .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-repair .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-repair .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-repair .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-repair .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-repair .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-repair .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-repair .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-repair .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-repair .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-repair .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-repair .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-repair .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-repair .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-repair .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-repair .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-repair .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-repair .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-repair .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-repair .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-repair .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-repair .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-repair .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-repair .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-repair .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-repair .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-repair .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-repair .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-repair .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-repair .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-repair .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-repair .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-repair .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-repair .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-repair .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-repair .repairVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-repair .repairGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-repair .repairIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-repair .repairStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-repair .repairVisualGallery>.repairGraphic {
display: none;
}
#dreamz-repair #repair-operations .featureStage,
#dreamz-repair #repair-commercial .featureStage,
#dreamz-repair #repair-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-repair #repair-commercial .repairVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-repair #repair-commercial .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-repair .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-repair .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-repair .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-repair .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-repair .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-repair #repair-operations .featureStage,
#dreamz-repair #repair-commercial .featureStage,
#dreamz-repair #repair-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-repair #repair-commercial .repairVisualGallery,
#dreamz-repair #repair-commercial .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-repair .mfgHeroScene {
height: 290px;
}
#dreamz-repair #repair-operations .featureStage,
#dreamz-repair #repair-commercial .featureStage,
#dreamz-repair #repair-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-repair .repairVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-repair .repairVisualGallery>.repairGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-repair #repair-operations-features-1:checked~.featureStage .repairVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-repair #repair-operations-features-2:checked~.featureStage .repairVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-repair #repair-operations-features-3:checked~.featureStage .repairVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-repair #repair-operations-features-4:checked~.featureStage .repairVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-repair #repair-operations-features-5:checked~.featureStage .repairVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-repair #repair-commercial-features-1:checked~.featureStage .repairVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-repair #repair-commercial-features-2:checked~.featureStage .repairVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-repair #repair-commercial-features-3:checked~.featureStage .repairVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-repair #repair-commercial-features-4:checked~.featureStage .repairVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-repair #repair-commercial-features-5:checked~.featureStage .repairVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-1:checked~.featureStage .repairVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-2:checked~.featureStage .repairVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-3:checked~.featureStage .repairVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-4:checked~.featureStage .repairVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-repair #repair-ai-decisions-features-5:checked~.featureStage .repairVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-repair .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-repair .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-repair .repairIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-repair .repairGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-repair .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-repair .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-repair .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-repair .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-repair .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
#dreamz-repair .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-repair .repairIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
#dreamz-repair .repairGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
#dreamz-repair .repairVisualGallery {
min-height: 0;
}
#dreamz-repair .repairIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
#dreamz-repair .mfgHeroScene img {
object-position: 90% 50%;
}
}
#dreamz-repair .repairIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
#dreamz-repair .repairGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
#dreamz-repair .repairVisualGallery {
min-height: 0;
}
#dreamz-repair .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-repair .repairIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-repair .repairGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
#dreamz-repair .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
#dreamz-repair .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-repair .mfgHeroContent {
background: transparent;
}
#dreamz-repair .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-repair .repairIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-repair .repairGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-repair .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-repair .mfgHeroScene img {
object-position: 83% 50%;
}
}
#dreamz-repair .mfgHeroContent {
background: transparent;
}
#dreamz-repair .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-repair .repairIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-repair .repairGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-repair .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-repair .mfgHeroScene img {
object-position: 86% 50%;
}
} #dreamz-repair .mfgHeroContent {
background: transparent;
}
#dreamz-repair .mfgHeroScene img {
object-position: 76% 50%;
}
#dreamz-repair .repairIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-repair .repairGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-repair .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
#dreamz-repair .mfgHeroScene img {
object-position: 87% 50%;
}
}  .advertising-agency .industryIntroHead.compact,
.advertising-agency .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.advertising-agency .featureMediaPanels {
position: relative;
min-height: 430px;
}
.advertising-agency .featureMediaPanels>.mediaPanel {
display: none;
}
.advertising-agency .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.advertising-agency .featureMediaPanels .spotlightMedia {
height: 100%;
}
.advertising-agency .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.advertising-agency .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.advertising-agency .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.advertising-agency .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.advertising-agency .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.advertising-agency .windowTop small {
font-size: 10px;
color: var(--muted);
}
.advertising-agency .windowDots {
display: flex;
gap: 5px;
}
.advertising-agency .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.advertising-agency .windowBody {
padding: 16px;
}
.advertising-agency .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.advertising-agency .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.advertising-agency .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.advertising-agency .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.advertising-agency .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.advertising-agency .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.advertising-agency .chartGridLine.l1 {
top: 34px;
}
.advertising-agency .chartGridLine.l2 {
top: 65px;
}
.advertising-agency .chartGridLine.l3 {
top: 96px;
}
.advertising-agency .chartGridLine.l4 {
top: 127px;
}
.advertising-agency .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.advertising-agency .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.advertising-agency .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.advertising-agency .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.advertising-agency .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.advertising-agency .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.advertising-agency .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.advertising-agency .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.advertising-agency .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.advertising-agency .spectrumNotes {
display: grid;
gap: 10px;
}
.advertising-agency .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.advertising-agency .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.advertising-agency .noteCard p,
.advertising-agency .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.advertising-agency .alertStack {
display: grid;
gap: 10px;
}
.advertising-agency .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.advertising-agency .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.advertising-agency .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.advertising-agency .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.advertising-agency .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.advertising-agency .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.advertising-agency .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.advertising-agency .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.advertising-agency .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.advertising-agency .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.advertising-agency .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.advertising-agency .scheduleBoard h4,
.advertising-agency .todoBoard h4,
.advertising-agency .siteBoard h4,
.advertising-agency .chatPanel h4,
.advertising-agency .lessonPanel h4,
.advertising-agency .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.advertising-agency .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.advertising-agency .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.advertising-agency .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.advertising-agency .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.advertising-agency .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.advertising-agency .taskRow:last-child {
border-bottom: 0;
}
.advertising-agency .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.advertising-agency .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.advertising-agency .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.advertising-agency .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.advertising-agency .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.advertising-agency .inventoryTable th,
.advertising-agency .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.advertising-agency .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.advertising-agency .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.advertising-agency .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.advertising-agency .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.advertising-agency .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.advertising-agency .phoneBody {
padding: 12px;
}
.advertising-agency .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.advertising-agency .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.advertising-agency .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.advertising-agency .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.advertising-agency .progressList {
display: grid;
gap: 10px;
}
.advertising-agency .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.advertising-agency .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.advertising-agency .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.advertising-agency .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.advertising-agency .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.advertising-agency .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.advertising-agency .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.advertising-agency .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.advertising-agency .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.advertising-agency .pin1 {
top: 56px;
left: 58px;
}
.advertising-agency .pin2 {
top: 88px;
right: 88px;
}
.advertising-agency .pin3 {
bottom: 54px;
right: 72px;
}
.advertising-agency .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.advertising-agency .siteRow:last-child {
border-bottom: 0;
}
.advertising-agency .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.advertising-agency .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.advertising-agency .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.advertising-agency .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.advertising-agency .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.advertising-agency .graphNodes:before,
.advertising-agency .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.advertising-agency .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.advertising-agency .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.advertising-agency .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.advertising-agency .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.advertising-agency .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.advertising-agency .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.advertising-agency .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.advertising-agency .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.advertising-agency .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.advertising-agency .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.advertising-agency .forecastList .taskRow strong {
font-size: 11px;
}
.advertising-agency .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.advertising-agency .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.advertising-agency .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.advertising-agency .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.advertising-agency .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.advertising-agency .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.advertising-agency .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.advertising-agency .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.advertising-agency .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.advertising-agency .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.advertising-agency .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.advertising-agency .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.advertising-agency .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.advertising-agency .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.advertising-agency .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.advertising-agency .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.advertising-agency .qualityRows {
display: grid;
gap: 10px;
}
.advertising-agency .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.advertising-agency .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.advertising-agency .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.advertising-agency .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.advertising-agency .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.advertising-agency #agency-sales-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.advertising-agency #agency-sales-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.advertising-agency #agency-sales-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.advertising-agency #agency-sales-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.advertising-agency #agency-sales-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.advertising-agency #agency-materials-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.advertising-agency #agency-materials-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.advertising-agency #agency-materials-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.advertising-agency #agency-materials-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.advertising-agency #agency-materials-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.advertising-agency #agency-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.advertising-agency #agency-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.advertising-agency #agency-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.advertising-agency #agency-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.advertising-agency #agency-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.advertising-agency #agency-sales-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.advertising-agency #agency-sales-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.advertising-agency #agency-sales-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.advertising-agency #agency-sales-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.advertising-agency #agency-sales-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.advertising-agency #agency-materials-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.advertising-agency #agency-materials-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.advertising-agency #agency-materials-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.advertising-agency #agency-materials-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.advertising-agency #agency-materials-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.advertising-agency #agency-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.advertising-agency #agency-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.advertising-agency #agency-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.advertising-agency #agency-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.advertising-agency #agency-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.advertising-agency .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.advertising-agency .featureMediaPanels {
min-height: 0;
}
.advertising-agency .inventorySplit,
.advertising-agency .forecastGrid,
.advertising-agency .siteGrid,
.advertising-agency .spectrumGrid,
.advertising-agency .scheduleGrid {
grid-template-columns: 1fr;
}
.advertising-agency .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.advertising-agency .metricGrid,
.advertising-agency .lessonCards,
.advertising-agency .gaugeGrid {
grid-template-columns: 1fr;
}
.advertising-agency .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.advertising-agency .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.advertising-agency {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
.advertising-agency * {
box-sizing: border-box;
}
.advertising-agency {
scroll-behavior: smooth;
}
.advertising-agency {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
.advertising-agency a {
color: inherit;
text-decoration: none;
}
.advertising-agency .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
.advertising-agency .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.advertising-agency .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.advertising-agency .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.advertising-agency .brand span {
color: var(--brand);
}
.advertising-agency .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.advertising-agency .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.advertising-agency .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.advertising-agency .button.primary:hover {
background: var(--brand-dark);
}
.advertising-agency .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.advertising-agency .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.advertising-agency .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.advertising-agency .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.advertising-agency h1,
.advertising-agency h2,
.advertising-agency h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
.advertising-agency .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.advertising-agency .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.advertising-agency .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.advertising-agency .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.advertising-agency .hero .button.primary:hover {
background: var(--black-soft);
}
.advertising-agency .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.advertising-agency .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.advertising-agency .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.advertising-agency .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.advertising-agency .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.advertising-agency .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.advertising-agency .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.advertising-agency .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.advertising-agency .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.advertising-agency .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.advertising-agency .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.advertising-agency .ratingLead strong {
display: block;
font-size: 20px;
}
.advertising-agency .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.advertising-agency .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.advertising-agency .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.advertising-agency .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.advertising-agency .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.advertising-agency section {
padding: 88px 0;
}
.advertising-agency .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.advertising-agency .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.advertising-agency .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.advertising-agency .aiJourney h2 {
color: #fff;
}
.advertising-agency .aiJourney .sectionHead p {
color: #D7D7D7;
}
.advertising-agency .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.advertising-agency .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.advertising-agency .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.advertising-agency .aiStep:last-child::after {
display: none;
}
.advertising-agency .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.advertising-agency .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.advertising-agency .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.advertising-agency .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.advertising-agency .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.advertising-agency .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.advertising-agency .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.advertising-agency .outcome span {
color: var(--muted);
font-size: 14px;
}
.advertising-agency .capability {
background: #fff;
}
.advertising-agency .capability.alt {
background: var(--sky-2);
}
.advertising-agency .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.advertising-agency .twoCol.reverse .visual {
order: 2;
}
.advertising-agency .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.advertising-agency .visual .placeholder {
min-height: 355px;
}
.advertising-agency .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.advertising-agency .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.advertising-agency details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.advertising-agency details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.advertising-agency details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.advertising-agency details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.advertising-agency details.capabilityMore[open] summary::after {
content: "−";
}
.advertising-agency details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.advertising-agency .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.advertising-agency .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.advertising-agency .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.advertising-agency .darkSection h2,
.advertising-agency .darkSection h3 {
color: #fff;
}
.advertising-agency .darkSection .sectionHead p,
.advertising-agency .darkSection .copy p {
color: #D7D7D7;
}
.advertising-agency .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.advertising-agency .darkSection .featureItem {
color: #F7F7F7;
}
.advertising-agency .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.advertising-agency .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.advertising-agency .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.advertising-agency .darkSection .placeholder small {
color: #D0D0D0;
}
.advertising-agency .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.advertising-agency .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.advertising-agency .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.advertising-agency .card p {
color: var(--muted);
margin: 12px 0 0;
}
.advertising-agency .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.advertising-agency .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.advertising-agency .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.advertising-agency .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.advertising-agency .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.advertising-agency .benefitBand h2 {
color: #fff;
}
.advertising-agency .benefitBand .sectionHead p {
color: #D5D5D5;
}
.advertising-agency .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.advertising-agency .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.advertising-agency .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.advertising-agency .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.advertising-agency .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.advertising-agency .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.advertising-agency .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.advertising-agency .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.advertising-agency .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.advertising-agency .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.advertising-agency .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.advertising-agency .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.advertising-agency .ctaPanel h2 {
color: #fff;
}
.advertising-agency .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.advertising-agency .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.advertising-agency .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.advertising-agency .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.advertising-agency .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.advertising-agency .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.advertising-agency .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.advertising-agency .inlineCta.dark h3 {
color: #fff;
}
.advertising-agency .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.advertising-agency .inlineCta.dark p {
color: #D8D8D8;
}
.advertising-agency .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.advertising-agency .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.advertising-agency .button.yellow:hover {
background: #FFD84D;
}
.advertising-agency .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.advertising-agency .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.advertising-agency .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.advertising-agency .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.advertising-agency footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.advertising-agency .ratingSectionGrid {
grid-template-columns: 1fr;
}
.advertising-agency .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.advertising-agency .heroGrid,
.advertising-agency .twoCol,
.advertising-agency .ctaPanel {
grid-template-columns: 1fr;
}
.advertising-agency .twoCol.reverse .visual {
order: initial;
}
.advertising-agency .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.advertising-agency .ratingGrid,
.advertising-agency .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.advertising-agency .ratingLead,
.advertising-agency .awardLead {
grid-column: 1/-1;
text-align: center;
}
.advertising-agency .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.advertising-agency .aiStep:nth-child(3)::after,
.advertising-agency .aiStep:last-child::after {
display: none;
}
.advertising-agency .outcomeGrid,
.advertising-agency .challengeGrid,
.advertising-agency .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.advertising-agency .cards,
.advertising-agency .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.advertising-agency .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.advertising-agency .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.advertising-agency .awardProofGrid {
grid-template-columns: 1fr;
}
.advertising-agency .wrap {
width: min(var(--max), calc(100% - 24px));
}
.advertising-agency .hero {
padding: 58px 0 52px;
}
.advertising-agency section {
padding: 64px 0;
}
.advertising-agency h1 {
font-size: 44px;
}
.advertising-agency .aiFlow {
grid-template-columns: 1fr;
}
.advertising-agency .aiStep::after {
display: none;
}
.advertising-agency .logoRow,
.advertising-agency .ratingGrid,
.advertising-agency .awardGrid,
.advertising-agency .outcomeGrid,
.advertising-agency .challengeGrid,
.advertising-agency .benefitGrid,
.advertising-agency .cards,
.advertising-agency .proofCards,
.advertising-agency .integrationGrid,
.advertising-agency .featureList {
grid-template-columns: 1fr;
}
.advertising-agency .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.advertising-agency .ctaPanel {
padding: 34px 24px;
}
.advertising-agency .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.advertising-agency .inlineCtaActions {
width: 100%;
}
.advertising-agency .inlineCtaActions .button {
flex: 1;
}
}
.advertising-agency {
--muted: #526A7C;
--shadow: none;
}
.advertising-agency {
background: var(--sky-2);
}
.advertising-agency p {
margin-bottom: 0;
}
.advertising-agency [id] {
scroll-margin-top: 94px;
}
.advertising-agency svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.advertising-agency .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.advertising-agency h1,
.advertising-agency h2,
.advertising-agency h3 {
color: var(--black);
}
.advertising-agency .darkSection h2,
.advertising-agency .darkSection h3,
.advertising-agency .aiJourney h2,
.advertising-agency .benefitBand h2,
.advertising-agency .ctaPanel h2,
.advertising-agency .inlineCta.dark h3 {
color: #fff;
}
.advertising-agency .wrap>*,
.advertising-agency .heroGrid>*,
.advertising-agency .twoCol>*,
.advertising-agency .ctaPanel>* {
min-width: 0;
}
.advertising-agency .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.advertising-agency .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.advertising-agency .skipLink:focus {
transform: none;
}
.advertising-agency a:focus-visible,
.advertising-agency summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.advertising-agency .darkSection a:focus-visible,
.advertising-agency .darkSection summary:focus-visible,
.advertising-agency .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.advertising-agency .topbar {
background: #fff;
backdrop-filter: none;
}
.advertising-agency .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.advertising-agency .brandName {
display: inline;
color: var(--navy) !important;
}
.advertising-agency .brandName>span {
color: var(--brand-dark);
}
.advertising-agency .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.advertising-agency .brandMark .icon {
width: 21px;
height: 21px;
}
.advertising-agency .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.advertising-agency .navlinks a:hover {
color: var(--brand-dark);
}
.advertising-agency .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.advertising-agency .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.advertising-agency .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.advertising-agency .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.advertising-agency .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.advertising-agency .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.advertising-agency .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.advertising-agency .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.advertising-agency .heroVisual {
width: 100%;
min-width: 0;
}
.advertising-agency .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.advertising-agency .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.advertising-agency .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.advertising-agency .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.advertising-agency .clientBand {
padding: 27px 0;
}
.advertising-agency .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.advertising-agency .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.advertising-agency .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.advertising-agency .logoBox.wide {
font-size: 12px;
}
.advertising-agency .logoBox small {
display: block;
font-size: 10px;
}
.advertising-agency section {
padding: 80px 0;
}
.advertising-agency h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.advertising-agency .sectionHead {
margin-bottom: 36px;
}
.advertising-agency .eyebrow {
line-height: 1.5;
}
.advertising-agency .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.advertising-agency .aiStep {
min-height: 162px;
}
.advertising-agency .aiStep strong {
line-height: 1.35;
}
.advertising-agency .aiStep span {
line-height: 1.65;
}
.advertising-agency .aiCallout {
margin-top: 24px;
}
.advertising-agency .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.advertising-agency .outcome>.icon {
color: var(--navy);
}
.advertising-agency .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.advertising-agency .twoCol.reverse .visual {
order: -1;
}
.advertising-agency .copy .eyebrow {
margin-bottom: 17px;
}
.advertising-agency .copy p {
font-size: 16px;
line-height: 1.85;
}
.advertising-agency .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.advertising-agency .featureList {
gap: 13px 18px;
}
.advertising-agency .featureItem {
font-size: 13px;
line-height: 1.6;
}
.advertising-agency .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.advertising-agency .check .icon {
width: 14px;
height: 14px;
}
.advertising-agency details.capabilityMore {
margin-bottom: 0;
}
.advertising-agency .capabilityMore summary {
min-height: 34px;
}
.advertising-agency .capabilityMore .moreGrid {
gap: 13px 18px;
}
.advertising-agency .textCta {
font-size: 14px;
}
.advertising-agency .visual {
min-width: 0;
}
.advertising-agency .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.advertising-agency .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.advertising-agency .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.advertising-agency .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.advertising-agency .panelBody {
padding: 20px;
}
.advertising-agency .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.advertising-agency .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.advertising-agency .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.advertising-agency .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.advertising-agency .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.advertising-agency .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.advertising-agency .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.advertising-agency .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.advertising-agency .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.advertising-agency .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.advertising-agency .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.advertising-agency .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.advertising-agency .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.advertising-agency .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.advertising-agency .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.advertising-agency .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.advertising-agency .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.advertising-agency .miniStats span {
font-size: 9px;
color: var(--muted);
}
.advertising-agency .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.advertising-agency .dataRow:last-child {
border-bottom: 0;
}
.advertising-agency .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.advertising-agency .rowIcon .icon {
width: 19px;
height: 19px;
}
.advertising-agency .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.advertising-agency .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.advertising-agency .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.advertising-agency .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.advertising-agency .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.advertising-agency .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.advertising-agency .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.advertising-agency .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.advertising-agency .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.advertising-agency .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.advertising-agency .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.advertising-agency .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.advertising-agency .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.advertising-agency .mobileAccount {
text-align: center;
padding: 13px 0;
}
.advertising-agency .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.advertising-agency .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.advertising-agency .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.advertising-agency .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.advertising-agency .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.advertising-agency .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.advertising-agency .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
.advertising-agency .phoneDevice .rowCopy strong {
font-size: 9px;
}
.advertising-agency .phoneDevice .rowCopy small {
font-size: 7px;
}
.advertising-agency .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.advertising-agency .mobileSide {
display: grid;
gap: 10px;
}
.advertising-agency .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.advertising-agency .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.advertising-agency .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.advertising-agency .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.advertising-agency .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.advertising-agency .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.advertising-agency .darkSection .panelHead>strong {
color: #fff;
}
.advertising-agency .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.advertising-agency .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.advertising-agency .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.advertising-agency .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.advertising-agency .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.advertising-agency .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.advertising-agency .promptList {
display: grid;
gap: 10px;
}
.advertising-agency .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.advertising-agency .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.advertising-agency .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.advertising-agency .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.advertising-agency .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.advertising-agency .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.advertising-agency .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.advertising-agency .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.advertising-agency .quoteTable th,
.advertising-agency .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.advertising-agency .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.advertising-agency .quoteTable td:first-child {
width: 64%;
}
.advertising-agency .quoteTable th:last-child,
.advertising-agency .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.advertising-agency .quoteTable strong {
font-size: 11px;
}
.advertising-agency .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.advertising-agency .quoteTable tfoot {
background: #F5FBFF;
}
.advertising-agency .quoteTable tfoot th {
font-size: 10px;
}
.advertising-agency .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.advertising-agency .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.advertising-agency .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.advertising-agency .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.advertising-agency .orderJourney {
margin: 20px 0;
}
.advertising-agency .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.advertising-agency .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.advertising-agency .journeyRow:last-child:before {
display: none;
}
.advertising-agency .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.advertising-agency .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.advertising-agency .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.advertising-agency .journeyRow strong {
font-size: 12px;
display: block;
}
.advertising-agency .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.advertising-agency .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.advertising-agency .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.advertising-agency .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.advertising-agency .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.advertising-agency .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.advertising-agency .inventoryIntro strong {
display: block;
font-size: 16px;
}
.advertising-agency .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.advertising-agency .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.advertising-agency .availabilityCard span {
font-size: 9px;
display: block;
}
.advertising-agency .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.advertising-agency .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.advertising-agency .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.advertising-agency .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.advertising-agency .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.advertising-agency .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.advertising-agency .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.advertising-agency .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.advertising-agency .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.advertising-agency .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.advertising-agency .customerTimeline .dataRow {
border-color: #353535;
}
.advertising-agency .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.advertising-agency .customerTimeline strong {
color: #fff;
}
.advertising-agency .customerTimeline small {
color: #BFBFBF;
}
.advertising-agency .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.advertising-agency .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.advertising-agency .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.advertising-agency .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.advertising-agency .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.advertising-agency .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.advertising-agency .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.advertising-agency .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.advertising-agency .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.advertising-agency .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.advertising-agency .chartTitle strong {
font-size: 12px;
}
.advertising-agency .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.advertising-agency .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.advertising-agency .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.advertising-agency .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.advertising-agency .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.advertising-agency .inlineCta {
margin-top: 0;
box-shadow: none;
}
.advertising-agency .inlineCtaActions {
max-width: 42%;
}
.advertising-agency .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.advertising-agency .inlineCta h3 {
line-height: 1.35;
}
.advertising-agency .card {
box-shadow: none;
}
.advertising-agency .cardIcon {
box-shadow: none;
}
.advertising-agency .card h3 {
font-size: 22px;
}
.advertising-agency .card p {
font-size: 14px;
line-height: 1.8;
}
.advertising-agency .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.advertising-agency .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.advertising-agency .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.advertising-agency .ratingBand {
padding: 34px 0;
}
.advertising-agency .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.advertising-agency .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.advertising-agency .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.advertising-agency .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
.advertising-agency .ratingItem:first-child {
border-left: 0;
}
.advertising-agency .proofCard h3 {
font-size: 23px;
}
.advertising-agency .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.advertising-agency .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.advertising-agency .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.advertising-agency .integration {
min-height: 98px;
}
.advertising-agency .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.advertising-agency .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.advertising-agency .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.advertising-agency .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.advertising-agency .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.advertising-agency .finalActions {
display: grid;
gap: 11px;
}
.advertising-agency .finalActions .button {
white-space: nowrap;
}
.advertising-agency .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.advertising-agency .footerInner p {
margin: 0;
font-size: 12px;
}
.advertising-agency .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.advertising-agency .navlinks {
gap: 15px;
font-size: 12px;
}
.advertising-agency .heroGrid {
gap: 30px;
}
.advertising-agency .twoCol {
gap: 32px;
}
.advertising-agency .panelBody {
padding: 16px;
}
.advertising-agency .panelHead {
padding: 16px;
}
.advertising-agency .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.advertising-agency .pipelineColumns {
gap: 7px;
}
.advertising-agency .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.advertising-agency .heroGrid,
.advertising-agency .twoCol,
.advertising-agency .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .heroGrid {
gap: 36px;
}
.advertising-agency .hero h1 {
max-width: 730px;
}
.advertising-agency .hero .lead {
max-width: 690px;
}
.advertising-agency .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.advertising-agency .twoCol {
gap: 34px;
}
.advertising-agency .twoCol.reverse .visual {
order: initial;
}
.advertising-agency .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.advertising-agency .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.advertising-agency .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.advertising-agency .awardItem {
font-size: 12px;
padding: 13px;
}
.advertising-agency .ratingSectionGrid {
gap: 20px;
}
.advertising-agency .inlineCta {
align-items: flex-start;
}
.advertising-agency .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.advertising-agency .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.advertising-agency .card {
padding: 22px;
}
.advertising-agency .card h3 {
font-size: 21px;
}
.advertising-agency .finalActions {
display: flex;
flex-wrap: wrap;
}
.advertising-agency .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.advertising-agency .cards,
.advertising-agency .proofCards {
grid-template-columns: 1fr;
}
.advertising-agency .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.advertising-agency .inlineCta {
flex-direction: column;
}
.advertising-agency .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.advertising-agency .inlineCtaActions .button {
flex: 1;
}
.advertising-agency .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.advertising-agency .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.advertising-agency .wrap {
width: calc(100% - 32px);
}
.advertising-agency [id] {
scroll-margin-top: 82px;
}
.advertising-agency .brand {
font-size: 20px;
gap: 7px;
}
.advertising-agency .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.advertising-agency .brandMark .icon {
width: 18px;
height: 18px;
}
.advertising-agency .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.advertising-agency section {
padding: 60px 0;
}
.advertising-agency .hero {
padding: 51px 0 48px;
}
.advertising-agency .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.advertising-agency .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.advertising-agency .heroActions {
gap: 10px;
margin-top: 25px;
}
.advertising-agency .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.advertising-agency .hero .microcopy {
font-size: 11px;
}
.advertising-agency .heroPills span {
font-size: 9px;
}
.advertising-agency .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.advertising-agency .sectionHead p {
font-size: 16px;
}
.advertising-agency .copy h2 {
font-size: 34px;
}
.advertising-agency .copy p {
font-size: 15px;
}
.advertising-agency .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.advertising-agency .logoBox {
min-height: 53px;
}
.advertising-agency .logoBox:last-child {
grid-column: 1/-1;
}
.advertising-agency .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advertising-agency .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.advertising-agency .aiStep strong {
font-size: 13px;
}
.advertising-agency .aiStep span {
font-size: 11px;
}
.advertising-agency .aiStep::after {
display: none;
}
.advertising-agency .outcomeGrid,
.advertising-agency .challengeGrid,
.advertising-agency .benefitGrid {
grid-template-columns: 1fr;
}
.advertising-agency .outcome {
padding: 24px;
}
.advertising-agency .outcome strong {
font-size: 22px;
}
.advertising-agency .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advertising-agency .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.advertising-agency .awardItem:last-child {
grid-column: 1/-1;
}
.advertising-agency .featureList,
.advertising-agency .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.advertising-agency .featureItem {
font-size: 13px;
}
.advertising-agency .inlineCta {
padding: 22px;
gap: 19px;
}
.advertising-agency .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.advertising-agency .panelHead {
padding: 15px 13px;
}
.advertising-agency .panelHead>strong {
font-size: 12px;
}
.advertising-agency .panelBody {
padding: 14px;
}
.advertising-agency .productPanel {
border-radius: 16px;
}
.advertising-agency .productPanel figcaption {
padding: 0 14px 13px;
}
.advertising-agency .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.advertising-agency .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.advertising-agency .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.advertising-agency .deal {
margin-top: 0;
padding: 10px;
}
.advertising-agency .deal strong {
font-size: 10px;
}
.advertising-agency .deal small {
font-size: 9px;
}
.advertising-agency .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.advertising-agency .mobileWorkspace {
gap: 12px;
}
.advertising-agency .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.advertising-agency .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.advertising-agency .sideTile {
padding: 10px;
}
.advertising-agency .sideTile strong {
font-size: 10px;
}
.advertising-agency .sideTile p {
font-size: 9px;
}
.advertising-agency .mobileHeader strong {
font-size: 15px;
}
.advertising-agency .mobileAccount strong {
font-size: 10px;
}
.advertising-agency .mobileAccount small {
font-size: 7px;
}
.advertising-agency .phoneDevice .rowIcon {
display: none;
}
.advertising-agency .quoteTable th,
.advertising-agency .quoteTable td {
padding: 12px 4px;
}
.advertising-agency .quoteTable strong {
font-size: 10px;
}
.advertising-agency .quoteTable small {
font-size: 8px;
}
.advertising-agency .quoteTable tfoot th {
font-size: 9px;
}
.advertising-agency .docHeader strong {
font-size: 17px;
}
.advertising-agency .miniFlow {
gap: 5px;
font-size: 9px;
}
.advertising-agency .miniFlow span {
padding: 6px;
}
.advertising-agency .rowCopy strong {
font-size: 10px;
}
.advertising-agency .rowCopy small {
font-size: 8px;
}
.advertising-agency .statusPill {
font-size: 7px;
padding: 5px;
}
.advertising-agency .miniStats {
gap: 7px;
}
.advertising-agency .miniStats>div {
padding: 9px;
}
.advertising-agency .miniStats strong {
font-size: 18px;
}
.advertising-agency .miniStats span {
font-size: 8px;
}
.advertising-agency .collectionStats>div {
padding: 13px;
}
.advertising-agency .collectionStats strong {
font-size: 24px;
}
.advertising-agency .customerHeader strong {
font-size: 17px;
}
.advertising-agency .customerFacts>div {
padding: 10px;
}
.advertising-agency .customerFacts strong {
font-size: 12px;
}
.advertising-agency .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advertising-agency .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.advertising-agency .ratingItem:last-child {
grid-column: 1/-1;
}
.advertising-agency .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advertising-agency .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.advertising-agency .integration small {
font-size: 9px;
}
.advertising-agency .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.advertising-agency .ctaPanel p {
font-size: 15px;
}
.advertising-agency .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.advertising-agency .footerInner {
align-items: flex-start;
flex-direction: column;
}
.advertising-agency .contextSection {
padding: 0 0 24px;
}
.advertising-agency .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.advertising-agency .wrap {
width: calc(100% - 24px);
}
.advertising-agency .brand {
font-size: 18px;
}
.advertising-agency .brandMark {
width: 25px;
height: 25px;
}
.advertising-agency .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.advertising-agency .hero h1 {
font-size: 38px;
}
.advertising-agency .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.advertising-agency .copy h2 {
font-size: 31px;
}
.advertising-agency .mobileWorkspace {
grid-template-columns: 1fr;
}
.advertising-agency .phoneDevice {
width: 210px;
}
.advertising-agency .phoneDevice .rowIcon {
display: grid;
}
.advertising-agency .mobileSide {
gap: 8px;
}
.advertising-agency .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.advertising-agency .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.advertising-agency .sideTile p {
margin: 0;
}
.advertising-agency .miniFlow span {
padding: 5px;
font-size: 8px;
}
.advertising-agency .collectionStats strong {
font-size: 21px;
}
.advertising-agency .inventoryIntro strong {
font-size: 14px;
}
.advertising-agency .dataRow {
gap: 7px;
}
.advertising-agency .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.advertising-agency .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
.advertising-agency {
scroll-behavior: auto;
}
.advertising-agency *,
.advertising-agency *::before,
.advertising-agency *::after {
transition: none !important;
animation: none !important;
}
}
.advertising-agency {
background: var(--sky-2);
}
.advertising-agency .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
.advertising-agency .hero .eyebrow {
max-width: 100%;
}
.advertising-agency .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.advertising-agency .ganttIllustration,
.advertising-agency .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.advertising-agency .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.advertising-agency .costIllustration {
aspect-ratio: 484/226;
}
.advertising-agency .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.advertising-agency .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.advertising-agency .comparisonTable thead {
background: var(--black);
color: #fff;
}
.advertising-agency .comparisonTable thead th:last-child {
color: var(--yellow);
}
.advertising-agency .comparisonTable th,
.advertising-agency .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.advertising-agency .comparisonTable th:first-child {
width: 23%;
}
.advertising-agency .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.advertising-agency .comparisonTable tbody td {
color: var(--muted);
}
.advertising-agency .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.advertising-agency .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.advertising-agency .card,
.advertising-agency .proofCard,
.advertising-agency .productPanel,
.advertising-agency .outcome,
.advertising-agency .benefit {
box-shadow: none;
}
.advertising-agency .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.advertising-agency .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.advertising-agency .hero .eyebrow {
font-size: 10px;
}
.advertising-agency .comparisonTable {
font-size: 11px;
}
.advertising-agency .comparisonTable th,
.advertising-agency .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.advertising-agency .comparisonTable th:first-child {
width: 24%;
}
.advertising-agency .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.advertising-agency .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.advertising-agency .hero h1 {
font-size: 38px;
}
}
.advertising-agency .scheduleIllustration,
.advertising-agency .analyticsIllustration,
.advertising-agency .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.advertising-agency .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.advertising-agency .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.advertising-agency .conditionIllustration {
aspect-ratio: 484 / 178;
}
.advertising-agency .miniStats strong {
font-variant-numeric: tabular-nums;
}
.advertising-agency .quoteTable td:last-child {
white-space: nowrap;
}
.advertising-agency .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.advertising-agency .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.advertising-agency .darkSection .textCta {
color: var(--yellow);
}
.advertising-agency .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.advertising-agency .secondaryLinks .textCta {
font-size: 12px;
}
.advertising-agency .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.advertising-agency .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.advertising-agency .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.advertising-agency .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.advertising-agency .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.advertising-agency .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
.advertising-agency .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.advertising-agency .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.advertising-agency .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.advertising-agency .returnFlag .icon {
flex: 0 0 24px;
}
.advertising-agency .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.advertising-agency .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.advertising-agency .phoneDevice {
max-width: 100%;
}
.advertising-agency .heroPills {
line-height: 1.55;
}
.advertising-agency .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.advertising-agency .plantFacts {
gap: 7px;
}
.advertising-agency .plantFacts>div {
padding: 9px;
}
.advertising-agency .plantFacts strong {
font-size: 11px;
}
.advertising-agency .scanSummary {
padding: 12px;
}
.advertising-agency .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.advertising-agency .mobileWorkspace {
grid-template-columns: 1fr;
}
.advertising-agency .phoneDevice {
width: 224px;
margin: auto;
}
.advertising-agency .phoneDevice .rowIcon {
display: grid;
}
.advertising-agency .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.advertising-agency .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.advertising-agency .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.advertising-agency .sideTile strong {
font-size: 12px;
}
.advertising-agency .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.advertising-agency .topbar,
.advertising-agency .heroActions,
.advertising-agency .finalActions,
.advertising-agency .contextSection,
.advertising-agency .valueCtaSection {
display: none;
}
.advertising-agency section {
break-inside: avoid;
padding: 28px 0;
}
.advertising-agency .hero {
padding-top: 20px;
}
}
.advertising-agency {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
.advertising-agency p {
margin: 0;
}
.advertising-agency main {
display: block;
}
.advertising-agency section {
padding: 74px 0;
}
.advertising-agency .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.advertising-agency .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.advertising-agency .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.advertising-agency .heroAccent {
color: var(--black);
}
.advertising-agency .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.advertising-agency .heroActions {
gap: 10px;
margin-top: 24px;
}
.advertising-agency .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.advertising-agency .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.advertising-agency .microcopy {
margin-top: 14px;
}
.advertising-agency .heroPills {
margin-top: 13px;
}
.advertising-agency .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.advertising-agency .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.advertising-agency .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.advertising-agency .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.advertising-agency .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.advertising-agency .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.advertising-agency .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.advertising-agency .clientBand {
padding: 24px 0;
}
.advertising-agency .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.advertising-agency .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.advertising-agency .logoBox.wide {
font-size: 15px;
}
.advertising-agency .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.advertising-agency .sectionHead p {
margin: 17px 0 0;
}
.advertising-agency .copy p {
margin: 16px 0 0;
}
.advertising-agency .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.advertising-agency .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.advertising-agency .aiJourney {
background: var(--black);
}
.advertising-agency .aiStep {
min-height: 157px;
border-color: #353535;
}
.advertising-agency .productPanel {
border-radius: 18px;
}
.advertising-agency .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.advertising-agency .panelHead>strong {
font-size: 13px;
}
.advertising-agency .sampleTag {
font-size: 9px;
}
.advertising-agency .panelBody {
padding: 21px;
}
.advertising-agency .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.advertising-agency .docHeader {
padding-bottom: 16px;
}
.advertising-agency .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.advertising-agency .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.advertising-agency .smallLabel {
font-size: 9px;
}
.advertising-agency .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.advertising-agency .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.advertising-agency .dataRow {
padding: 14px 0;
}
.advertising-agency .statusPill {
font-size: 8px;
}
.advertising-agency .miniStats {
gap: 10px;
margin: 18px 0;
}
.advertising-agency .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.advertising-agency .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.advertising-agency .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.advertising-agency .contextNote {
font-size: 11px;
margin-top: 16px;
}
.advertising-agency .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.advertising-agency .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.advertising-agency .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.advertising-agency .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.advertising-agency .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.advertising-agency .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.advertising-agency .hierarchy strong {
color: var(--navy);
}
.advertising-agency .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.advertising-agency .conditionIllustration {
aspect-ratio: 484/201;
}
.advertising-agency .analyticsIllustration {
aspect-ratio: 484/206;
}
.advertising-agency .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.advertising-agency .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.advertising-agency .phoneDevice .rowCopy strong {
font-size: 10px;
}
.advertising-agency .phoneDevice .rowCopy small {
font-size: 9px;
}
.advertising-agency .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.advertising-agency .mobileAccount small {
font-size: 9px;
}
.advertising-agency .sideTile {
background: var(--sky-2);
padding: 14px;
}
.advertising-agency .sideTile strong {
font-size: 12px;
}
.advertising-agency .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.advertising-agency .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.advertising-agency .mobileAction {
font-size: 9px;
}
.advertising-agency .journeyRow strong {
font-size: 13px;
}
.advertising-agency .journeyRow small {
font-size: 11px;
}
.advertising-agency .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.advertising-agency .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.advertising-agency .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.advertising-agency .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.advertising-agency .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.advertising-agency .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.advertising-agency .utilityReadout small {
font-size: 12px;
}
.advertising-agency .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.advertising-agency .darkSection {
background: var(--black);
}
.advertising-agency .darkSection .panelHead {
background: var(--black-soft);
}
.advertising-agency .darkSection .productPanel {
background: var(--black-soft);
}
.advertising-agency .darkSection .copy .featureNote {
color: #CFCFCF;
}
.advertising-agency .darkSection .rowCopy strong {
color: #FFFFFF;
}
.advertising-agency .darkSection .rowCopy small {
color: #CFCFCF;
}
.advertising-agency .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.advertising-agency .assistantHead small {
font-size: 11px;
}
.advertising-agency .assistantNote {
font-size: 11px;
}
.advertising-agency .reportTags span {
font-size: 10px;
}
.advertising-agency .card p {
margin: 12px 0 0;
}
.advertising-agency .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.advertising-agency .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.advertising-agency .cards>.card {
display: flex;
flex-direction: column;
}
.advertising-agency .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.advertising-agency .cards>.card p {
padding-bottom: 22px;
}
.advertising-agency .benefitBand {
background: var(--black);
}
.advertising-agency .benefit {
background: var(--black-soft);
}
.advertising-agency .inlineCta h3 {
font-size: 20px;
}
.advertising-agency .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.advertising-agency .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.advertising-agency .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.advertising-agency .valueCtaSection {
padding: 32px 0;
}
.advertising-agency .proofCard p {
margin-top: 15px;
}
.advertising-agency .proofCard h3 {
font-size: 23px;
}
.advertising-agency .integrationNote {
margin-top: 23px;
}
.advertising-agency .ctaPanel {
background: var(--black);
}
.advertising-agency .ctaPanel p {
margin-top: 16px;
}
.advertising-agency .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.advertising-agency .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.advertising-agency a:hover {
text-decoration: none;
}
.advertising-agency .textCta:hover {
color: var(--navy);
}
.advertising-agency .darkSection .textCta:hover {
color: #FFFFFF;
}
.advertising-agency .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.advertising-agency .hero h1 {
font-size: 49px;
}
.advertising-agency .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.advertising-agency .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.advertising-agency .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.advertising-agency .hero h1 {
font-size: 58px;
}
.advertising-agency .heroVisual {
max-width: 548px;
}
.advertising-agency .hero .lead {
max-width: 700px;
}
.advertising-agency .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.advertising-agency .logoBox {
font-size: 18px;
border: 0 !important;
}
.advertising-agency .logoBox:last-child {
grid-column: auto;
}
.advertising-agency .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.advertising-agency .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.advertising-agency .inlineCtaActions .button {
flex: 1;
}
.advertising-agency .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.advertising-agency section {
padding: 55px 0;
}
.advertising-agency .hero {
padding: 28px 0 40px;
}
.advertising-agency .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.advertising-agency .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.advertising-agency .heroActions {
gap: 10px;
}
.advertising-agency .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.advertising-agency .breadcrumb {
margin-bottom: 21px;
}
.advertising-agency .hero .eyebrow {
font-size: 11px;
}
.advertising-agency .heroVisual {
max-width: 480px;
}
.advertising-agency .heroPills {
row-gap: 9px;
}
.advertising-agency .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.advertising-agency .heroPills span+span {
padding-left: 7px;
}
.advertising-agency .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.advertising-agency .logoBox:last-child {
grid-column: 1/-1;
}
.advertising-agency .clientBand {
padding: 25px 0;
}
.advertising-agency .copy h2 {
font-size: 33px;
}
.advertising-agency .panelBody {
padding: 16px;
}
.advertising-agency .panelHead {
padding: 15px;
}
.advertising-agency .panelHead>strong {
font-size: 12px;
}
.advertising-agency .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.advertising-agency .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.advertising-agency .docHeader strong {
font-size: 18px;
}
.advertising-agency .docHeader small {
font-size: 10px;
}
.advertising-agency .rowCopy strong {
font-size: 11px;
}
.advertising-agency .rowCopy small {
font-size: 10px;
}
.advertising-agency .miniStats {
gap: 7px;
}
.advertising-agency .miniStats strong {
font-size: 21px;
}
.advertising-agency .miniStats span {
font-size: 9px;
}
.advertising-agency .miniStats>div {
padding: 10px 8px;
}
.advertising-agency .plantFacts {
gap: 8px;
}
.advertising-agency .plantFacts>div {
padding: 10px;
}
.advertising-agency .plantFacts strong {
font-size: 11px;
}
.advertising-agency .contextNote {
font-size: 10px;
gap: 8px;
}
.advertising-agency .utilityReadout {
padding: 12px;
gap: 10px;
}
.advertising-agency .utilityReadout span {
font-size: 8px;
}
.advertising-agency .utilityReadout strong {
font-size: 24px;
}
.advertising-agency .utilityReadout .utilityScope {
font-size: 14px;
}
.advertising-agency .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.advertising-agency .comparisonTable {
font-size: 11px;
}
.advertising-agency .comparisonTable th,
.advertising-agency .comparisonTable td {
padding: 13px 9px;
}
.advertising-agency .contextSection {
padding: 0 0 22px;
}
.advertising-agency .valueCtaSection {
padding: 25px 0;
}
.advertising-agency .inlineCtaActions {
flex-direction: column;
}
.advertising-agency .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.advertising-agency .mobileWorkspace {
grid-template-columns: 1fr;
}
.advertising-agency .phoneDevice {
width: 222px;
}
.advertising-agency .phoneDevice .rowIcon {
display: grid;
}
.advertising-agency .mobileSide {
grid-template-columns: 1fr;
}
.advertising-agency .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.advertising-agency .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
.advertising-agency .sideTile p {
margin: 0;
}
.advertising-agency .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.advertising-agency .dataRow {
gap: 8px;
}
.advertising-agency .statusPill {
font-size: 7px;
padding: 5px;
}
.advertising-agency .miniStats strong {
font-size: 19px;
}
.advertising-agency .heroActions {
flex-direction: column;
align-items: stretch;
}
.advertising-agency .heroActions .button {
width: 100%;
}
.advertising-agency .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.advertising-agency .aiFlow {
grid-template-columns: 1fr;
}
.advertising-agency .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.advertising-agency .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.advertising-agency .aiStep strong {
margin: 0;
font-size: 15px;
}
.advertising-agency .aiStep span {
font-size: 13px;
}
.advertising-agency .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.advertising-agency {
background: var(--white);
}
.advertising-agency img {
display: block;
max-width: 100%;
}
.advertising-agency h1,
.advertising-agency h2,
.advertising-agency h3 {
text-wrap: balance;
}
.advertising-agency .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.advertising-agency .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.advertising-agency .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.advertising-agency .navlinks {
gap: 20px;
font-size: 12px;
}
.advertising-agency .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.advertising-agency .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.advertising-agency .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.advertising-agency .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.advertising-agency .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.advertising-agency .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.advertising-agency .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.advertising-agency .industryIntro {
padding: 78px 0 66px;
}
.advertising-agency .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.advertising-agency .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.advertising-agency .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.advertising-agency .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.advertising-agency .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.advertising-agency .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.advertising-agency .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.advertising-agency .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.advertising-agency .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.advertising-agency .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.advertising-agency .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.advertising-agency .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.advertising-agency .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.advertising-agency .industryPriority:hover {
border-color: var(--brand-dark);
}
.advertising-agency .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.advertising-agency .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.advertising-agency .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.advertising-agency .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.advertising-agency .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.advertising-agency .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.advertising-agency .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.advertising-agency .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.advertising-agency .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.advertising-agency .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.advertising-agency .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.advertising-agency .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.advertising-agency .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.advertising-agency .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.advertising-agency .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.advertising-agency .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.advertising-agency .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.advertising-agency .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.advertising-agency .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.advertising-agency .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.advertising-agency .vedaMessage.assistant>small {
color: var(--yellow);
}
.advertising-agency .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.advertising-agency .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.advertising-agency .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.advertising-agency .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.advertising-agency .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.advertising-agency .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.advertising-agency .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.advertising-agency .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.advertising-agency .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.advertising-agency .manufacturingSpotlight {
padding: 73px 0;
}
.advertising-agency .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.advertising-agency .rfidSpotlight {
background: #fff;
}
.advertising-agency .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.advertising-agency .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.advertising-agency .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.advertising-agency .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.advertising-agency .spotlightHead h2 span {
color: var(--brand-dark);
}
.advertising-agency .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.advertising-agency .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.advertising-agency .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.advertising-agency .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.advertising-agency .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.advertising-agency .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.advertising-agency .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.advertising-agency .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.advertising-agency .featureTab:hover {
border-color: var(--brand-dark);
}
.advertising-agency .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.advertising-agency .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.advertising-agency .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.advertising-agency .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.advertising-agency .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.advertising-agency .featurePanel {
display: none;
}
.advertising-agency .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.advertising-agency .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.advertising-agency .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.advertising-agency .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.advertising-agency .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.advertising-agency .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.advertising-agency .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.advertising-agency .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.advertising-agency .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.advertising-agency .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.advertising-agency .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.advertising-agency .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.advertising-agency .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
.advertising-agency .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.advertising-agency .decisionSpotlight .textCta {
color: var(--yellow);
}
.advertising-agency .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.advertising-agency .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.advertising-agency .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.advertising-agency .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.advertising-agency .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.advertising-agency .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.advertising-agency .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.advertising-agency .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.advertising-agency .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.advertising-agency .rfidImageSurface {
background: #172029;
padding: 5px;
}
.advertising-agency .rfidImageSurface img {
width: 100%;
height: auto;
}
.advertising-agency .rfidMedia figcaption {
padding-top: 13px;
}
.advertising-agency .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.advertising-agency .aiReviewBody {
padding: 18px;
}
.advertising-agency .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.advertising-agency .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.advertising-agency .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.advertising-agency .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.advertising-agency .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.advertising-agency .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.advertising-agency .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.advertising-agency .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.advertising-agency .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.advertising-agency .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.advertising-agency .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.advertising-agency .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.advertising-agency .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.advertising-agency .aiReviewAction strong {
display: block;
font-size: 11px;
}
.advertising-agency .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.advertising-agency .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.advertising-agency .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.advertising-agency .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.advertising-agency .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.advertising-agency .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.advertising-agency .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.advertising-agency .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.advertising-agency .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.advertising-agency .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.advertising-agency .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.advertising-agency .workflowDetails summary::-webkit-details-marker {
display: none;
}
.advertising-agency .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.advertising-agency .workflowDetails[open] summary::after {
content: "−";
}
.advertising-agency .workflowDetails .featureList,
.advertising-agency .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.advertising-agency .workflowDetails .featureItem {
font-size: 11px;
}
.advertising-agency .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.advertising-agency .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.advertising-agency #agency-connected-tools {
background: #fff;
}
.advertising-agency #agency-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.advertising-agency .featureTab,
.advertising-agency .industryPriority,
.advertising-agency summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.advertising-agency .industryIntroHead {
gap: 30px;
}
.advertising-agency .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.advertising-agency .featureStage {
gap: 26px;
padding: 26px;
}
.advertising-agency .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.advertising-agency .factoryWorkflow {
padding: 22px;
}
.advertising-agency .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.advertising-agency .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advertising-agency .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.advertising-agency .industryPriorityGrid {
gap: 14px;
}
.advertising-agency .industryPriority {
padding: 22px 19px;
}
.advertising-agency .industryPriority h3 {
font-size: 21px;
}
.advertising-agency .industryPriority p {
font-size: 12px;
}
.advertising-agency .priorityLink {
font-size: 10px;
}
.advertising-agency .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.advertising-agency .vedaIndustryCopy h2 {
font-size: 39px;
}
.advertising-agency .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.advertising-agency .vedaUseCases>div {
display: block;
}
.advertising-agency .vedaUseCases .icon {
margin: 0 0 10px;
}
.advertising-agency .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.advertising-agency .featureTabs {
gap: 8px;
}
.advertising-agency .featureTab {
min-height: 108px;
}
.advertising-agency .featureStage,
.advertising-agency .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.advertising-agency .rfidSpotlight .spotlightMedia,
.advertising-agency .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.advertising-agency .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.advertising-agency .featurePanel {
min-height: 0;
}
.advertising-agency .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.advertising-agency .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.advertising-agency .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.advertising-agency .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.advertising-agency .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.advertising-agency .clientBand {
padding: 22px 0;
}
.advertising-agency .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.advertising-agency .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.advertising-agency .clientBand .logoBox.wide {
font-size: 10px;
}
.advertising-agency .clientBand .logoBox:last-child {
grid-column: auto;
}
.advertising-agency .industryIntro {
padding: 53px 0;
}
.advertising-agency .industryIntroHead h2 {
font-size: 32px;
}
.advertising-agency .industryIntroHead>p {
font-size: 14px;
}
.advertising-agency .industryPriorityGrid {
grid-template-columns: 1fr;
}
.advertising-agency .industryPriority {
padding: 23px;
}
.advertising-agency .industryPriority h3 {
font-size: 24px;
}
.advertising-agency .industryPriority>.icon {
margin: 5px 0 15px;
}
.advertising-agency .industryPriority p {
font-size: 13px;
}
.advertising-agency .priorityLink {
font-size: 11px;
}
.advertising-agency .vedaIndustry {
padding: 0 0 52px;
}
.advertising-agency .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.advertising-agency .vedaIndustryCopy h2 {
font-size: 32px;
}
.advertising-agency .vedaIndustryCopy>p {
font-size: 14px;
}
.advertising-agency .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.advertising-agency .vedaUseCases>div {
display: flex;
}
.advertising-agency .vedaConversationHead {
padding: 16px 13px;
}
.advertising-agency .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.advertising-agency .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.advertising-agency .vedaMessage.user {
margin-left: 25px;
}
.advertising-agency .vedaMessage.assistant {
margin-right: 14px;
}
.advertising-agency .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.advertising-agency .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.advertising-agency .manufacturingSpotlight {
padding: 54px 0;
}
.advertising-agency .spotlightHead h2 {
font-size: 32px;
}
.advertising-agency .spotlightHead>p {
font-size: 14px;
}
.advertising-agency .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.advertising-agency .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.advertising-agency .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.advertising-agency .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.advertising-agency .featurePanel h3 {
font-size: 24px;
}
.advertising-agency .featurePanel>p {
font-size: 13px;
}
.advertising-agency .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.advertising-agency .spotlightChecks>li {
font-size: 12px;
}
.advertising-agency .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.advertising-agency .spotlightActions .button {
width: 100%;
}
.advertising-agency .spotlightScope {
font-size: 10px;
}
.advertising-agency .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.advertising-agency .mediaTitle strong {
font-size: 11px;
}
.advertising-agency .mediaTitle div>span {
font-size: 8px;
}
.advertising-agency .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.advertising-agency .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.advertising-agency .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.advertising-agency .rfidMedia figcaption {
padding-top: 12px;
}
.advertising-agency .aiReviewBody {
padding: 13px;
}
.advertising-agency .aiIssue {
padding: 13px;
}
.advertising-agency .aiIssue strong {
font-size: 14px;
}
.advertising-agency .aiEvidence {
gap: 6px;
}
.advertising-agency .aiEvidence>div {
padding: 10px 7px;
}
.advertising-agency .aiEvidence strong {
font-size: 9px;
}
.advertising-agency .aiEvidence span {
font-size: 7px;
}
.advertising-agency .exampleLabel {
font-size: 6px;
}
.advertising-agency .factoryWorkflows {
padding: 55px 0;
}
.advertising-agency .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.advertising-agency .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.advertising-agency .industryRibbonGrid {
gap: 12px;
}
.advertising-agency .industryRibbonGrid>div {
font-size: 10px;
}
.advertising-agency .spotlightHead h2 {
font-size: 29px;
}
.advertising-agency .featureStage {
padding: 19px 13px;
}
.advertising-agency .mediaTitle>.icon {
display: none;
}
.advertising-agency .exampleLabel {
display: none;
}
.advertising-agency .vedaBrand {
font-size: 27px;
}
}
@media print {
.advertising-agency .featureTabs {
display: none;
}
.advertising-agency .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.advertising-agency .featureStage {
display: block;
}
.advertising-agency .featurePanel {
color: #000;
}
}
.advertising-agency #agency-sales-features-1:checked~.featureTabs label[for="agency-sales-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-sales-features-1:focus-visible~.featureTabs label[for="agency-sales-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-sales-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.advertising-agency #agency-sales-features-2:checked~.featureTabs label[for="agency-sales-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-sales-features-2:focus-visible~.featureTabs label[for="agency-sales-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-sales-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.advertising-agency #agency-sales-features-3:checked~.featureTabs label[for="agency-sales-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-sales-features-3:focus-visible~.featureTabs label[for="agency-sales-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-sales-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.advertising-agency #agency-sales-features-4:checked~.featureTabs label[for="agency-sales-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-sales-features-4:focus-visible~.featureTabs label[for="agency-sales-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-sales-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.advertising-agency #agency-sales-features-5:checked~.featureTabs label[for="agency-sales-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-sales-features-5:focus-visible~.featureTabs label[for="agency-sales-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-sales-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.advertising-agency #agency-materials-features-1:checked~.featureTabs label[for="agency-materials-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-materials-features-1:focus-visible~.featureTabs label[for="agency-materials-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-materials-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.advertising-agency #agency-materials-features-2:checked~.featureTabs label[for="agency-materials-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-materials-features-2:focus-visible~.featureTabs label[for="agency-materials-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-materials-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.advertising-agency #agency-materials-features-3:checked~.featureTabs label[for="agency-materials-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-materials-features-3:focus-visible~.featureTabs label[for="agency-materials-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-materials-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.advertising-agency #agency-materials-features-4:checked~.featureTabs label[for="agency-materials-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-materials-features-4:focus-visible~.featureTabs label[for="agency-materials-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-materials-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.advertising-agency #agency-materials-features-5:checked~.featureTabs label[for="agency-materials-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-materials-features-5:focus-visible~.featureTabs label[for="agency-materials-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-materials-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-1:checked~.featureTabs label[for="agency-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-ai-decisions-features-1:focus-visible~.featureTabs label[for="agency-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-2:checked~.featureTabs label[for="agency-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-ai-decisions-features-2:focus-visible~.featureTabs label[for="agency-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-3:checked~.featureTabs label[for="agency-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-ai-decisions-features-3:focus-visible~.featureTabs label[for="agency-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-4:checked~.featureTabs label[for="agency-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-ai-decisions-features-4:focus-visible~.featureTabs label[for="agency-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-5:checked~.featureTabs label[for="agency-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.advertising-agency #agency-ai-decisions-features-5:focus-visible~.featureTabs label[for="agency-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.advertising-agency #agency-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.advertising-agency .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .featureMediaPanels {
min-width: 0;
}
.advertising-agency .featureMediaPanels .miniChart {
height: 178px;
}
.advertising-agency .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.advertising-agency .featureMediaPanels .windowTop strong,
.advertising-agency .featureMediaPanels .windowTop small {
display: block;
}
.advertising-agency .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.advertising-agency .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advertising-agency .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.advertising-agency .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.advertising-agency .featureMediaPanels .windowBody>*,
.advertising-agency .featureMediaPanels .spectrumGrid>*,
.advertising-agency .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.advertising-agency .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.advertising-agency .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.advertising-agency .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.advertising-agency .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.advertising-agency .featureMediaPanels .graphNodes {
min-height: 258px;
}
.advertising-agency .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.advertising-agency .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.advertising-agency .featureMediaPanels .mapPin {
box-shadow: none;
}
.advertising-agency .pin2 {
top: 88px;
right: 88px;
}
.advertising-agency .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.advertising-agency .featureMediaPanels .mediaShell {
padding: 10px;
}
.advertising-agency .featureMediaPanels .windowBody {
padding: 10px;
}
.advertising-agency .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .featureMediaPanels .alertBadge {
justify-self: start;
}
.advertising-agency .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.advertising-agency .featureMediaPanels .graphNodes .node.n1,
.advertising-agency .featureMediaPanels .graphNodes .node.n2,
.advertising-agency .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.advertising-agency .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.advertising-agency .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.advertising-agency .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.advertising-agency .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.advertising-agency .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.advertising-agency .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.advertising-agency .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.advertising-agency .freshGraphic * {
box-sizing: border-box;
}
.advertising-agency .rfPanel,
.advertising-agency .aiInsightCard,
.advertising-agency .forecastVisualCard,
.advertising-agency .forecastSuggestion,
.advertising-agency .knowledgeTile,
.advertising-agency .chatConversation,
.advertising-agency .trainingSummary,
.advertising-agency .moduleCard,
.advertising-agency .qualityHeatCard,
.advertising-agency .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.advertising-agency .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.advertising-agency .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.advertising-agency .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.advertising-agency .statusPill,
.advertising-agency .cardTag,
.advertising-agency .forecastSuggestion b,
.advertising-agency .moduleCard b,
.advertising-agency .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.advertising-agency .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.advertising-agency .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.advertising-agency .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.advertising-agency .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.advertising-agency .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.advertising-agency .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.advertising-agency .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.advertising-agency .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.advertising-agency .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.advertising-agency .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.advertising-agency .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.advertising-agency .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.advertising-agency .dot.good {
background: #298EEC;
}
.advertising-agency .dot.warn {
background: #F4A62A;
}
.advertising-agency .dot.bad {
background: #EB6B53;
}
.advertising-agency .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.advertising-agency .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.advertising-agency .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.advertising-agency .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.advertising-agency .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.advertising-agency .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.advertising-agency .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.advertising-agency .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.advertising-agency .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.advertising-agency .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.advertising-agency .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.advertising-agency .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.advertising-agency .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.advertising-agency .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.advertising-agency .moveRow b {
color: #298EEC;
font-size: 9px;
}
.advertising-agency .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.advertising-agency .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.advertising-agency .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.advertising-agency .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.advertising-agency .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.advertising-agency .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.advertising-agency .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.advertising-agency .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.advertising-agency .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.advertising-agency .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.advertising-agency .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.advertising-agency .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.advertising-agency .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.advertising-agency .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.advertising-agency .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.advertising-agency .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.advertising-agency .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.advertising-agency .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.advertising-agency .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.advertising-agency .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.advertising-agency .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.advertising-agency .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.advertising-agency .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.advertising-agency .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.advertising-agency .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.advertising-agency .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.advertising-agency .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.advertising-agency .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.advertising-agency .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.advertising-agency .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.advertising-agency .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.advertising-agency .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.advertising-agency .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.advertising-agency .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.advertising-agency .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.advertising-agency .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.advertising-agency .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.advertising-agency .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.advertising-agency .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.advertising-agency .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.advertising-agency .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.advertising-agency .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.advertising-agency .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.advertising-agency .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.advertising-agency .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.advertising-agency .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.advertising-agency .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.advertising-agency .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.advertising-agency .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.advertising-agency .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.advertising-agency .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.advertising-agency .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.advertising-agency .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.advertising-agency .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.advertising-agency .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.advertising-agency .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.advertising-agency .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.advertising-agency .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.advertising-agency .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.advertising-agency .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.advertising-agency .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.advertising-agency .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.advertising-agency .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.advertising-agency .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.advertising-agency .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.advertising-agency .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.advertising-agency .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.advertising-agency .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.advertising-agency .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.advertising-agency .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.advertising-agency .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.advertising-agency .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.advertising-agency .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.advertising-agency .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.advertising-agency .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.advertising-agency .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.advertising-agency .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.advertising-agency .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.advertising-agency .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.advertising-agency .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.advertising-agency .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.advertising-agency .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.advertising-agency .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.advertising-agency .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.advertising-agency .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.advertising-agency .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.advertising-agency .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.advertising-agency .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.advertising-agency .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.advertising-agency .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.advertising-agency .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.advertising-agency .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.advertising-agency .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.advertising-agency .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.advertising-agency .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.advertising-agency .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.advertising-agency .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.advertising-agency .chartLegend .sw.blue {
background: #298EEC;
}
.advertising-agency .chartLegend .sw.amber {
background: #F4A62A;
}
.advertising-agency .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.advertising-agency .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.advertising-agency .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.advertising-agency .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.advertising-agency .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.advertising-agency .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.advertising-agency .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.advertising-agency .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.advertising-agency .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.advertising-agency .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.advertising-agency .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.advertising-agency .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.advertising-agency .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.advertising-agency .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.advertising-agency .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.advertising-agency .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.advertising-agency .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.advertising-agency .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.advertising-agency .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.advertising-agency .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.advertising-agency .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.advertising-agency .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.advertising-agency .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.advertising-agency .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.advertising-agency .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.advertising-agency .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.advertising-agency .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.advertising-agency .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.advertising-agency .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.advertising-agency .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.advertising-agency .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.advertising-agency .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.advertising-agency .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.advertising-agency .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.advertising-agency .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.advertising-agency .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.advertising-agency .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.advertising-agency .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.advertising-agency .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.advertising-agency .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.advertising-agency .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.advertising-agency .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.advertising-agency .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.advertising-agency .freshGraphic {
height: auto;
min-height: 420px;
}
.advertising-agency .rfTrackLayout,
.advertising-agency .rfFlowLayout,
.advertising-agency .rfAlertGrid,
.advertising-agency .rfCycleLayout,
.advertising-agency .rfSitesLayout,
.advertising-agency .aiRootLayout,
.advertising-agency .aiForecastLayout,
.advertising-agency .aiChatLayout,
.advertising-agency .aiTrainingLayout,
.advertising-agency .aiQualityLayout,
.advertising-agency .trainingModuleGrid {
grid-template-columns: 1fr;
}
.advertising-agency .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.advertising-agency .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.advertising-agency .rfAlertGrid {
grid-template-columns: 1fr;
}
.advertising-agency .qualityHeatGrid span {
min-height: 40px;
}
.advertising-agency .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.advertising-agency .aiLink {
display: none;
}
}
.advertising-agency .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.advertising-agency .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.advertising-agency .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.advertising-agency .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.advertising-agency .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.advertising-agency .mfgHeroBreadcrumb a {
color: inherit;
}
.advertising-agency .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.advertising-agency .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.advertising-agency .mfgHero h1 {
color: #fff;
}
.advertising-agency .mfgHero h1>span {
display: block;
}
.advertising-agency .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.advertising-agency .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.advertising-agency .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.advertising-agency .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.advertising-agency .mfgHeroActions .outline:hover {
background: #172029;
}
.advertising-agency .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.advertising-agency .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.advertising-agency .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.advertising-agency .mfgHeroContent {
min-height: 610px;
}
.advertising-agency .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.advertising-agency .mfgHeroLead {
font-size: 16px;
}
.advertising-agency .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.advertising-agency .mfgHero {
display: flex;
flex-direction: column;
}
.advertising-agency .mfgHeroContent {
order: 0;
min-height: 0;
}
.advertising-agency .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.advertising-agency .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.advertising-agency .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.advertising-agency .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.advertising-agency .mfgHeroCopy {
padding: 25px 0 20px;
}
.advertising-agency .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.advertising-agency .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.advertising-agency .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.advertising-agency .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.advertising-agency .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.advertising-agency .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.advertising-agency .mfgHeroScene {
height: 280px;
}
}
@media print {
.advertising-agency .mfgHero {
background: #fff;
color: #000;
}
.advertising-agency .mfgHeroScene,
.advertising-agency .mfgHeroActions {
display: none;
}
.advertising-agency .mfgHeroContent {
min-height: 0;
}
.advertising-agency .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
.advertising-agency #agency-materials .featureStage,
.advertising-agency #agency-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.advertising-agency .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.advertising-agency .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.advertising-agency .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.advertising-agency .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.advertising-agency .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.advertising-agency .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.advertising-agency .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.advertising-agency .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.advertising-agency .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.advertising-agency .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.advertising-agency .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.advertising-agency .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.advertising-agency .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.advertising-agency .mfgGallery .rfPanel {
border-radius: 12px;
}
.advertising-agency .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.advertising-agency .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.advertising-agency .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.advertising-agency .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.advertising-agency .mfgGallery .shelf span {
font-size: 11px;
}
.advertising-agency .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.advertising-agency .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.advertising-agency .mfgGallery .rfKpiGrid {
gap: 8px;
}
.advertising-agency .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.advertising-agency .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.advertising-agency .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.advertising-agency .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.advertising-agency .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.advertising-agency .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.advertising-agency .mfgGallery .rfScanCard span {
font-size: 9px;
}
.advertising-agency .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.advertising-agency .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.advertising-agency .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.advertising-agency .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.advertising-agency .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.advertising-agency .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.advertising-agency .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.advertising-agency .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.advertising-agency .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.advertising-agency .mfgGallery .flowArrow {
display: none;
}
.advertising-agency .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.advertising-agency .mfgGallery .railItem {
padding: 9px 7px;
}
.advertising-agency .mfgGallery .railItem b {
font-size: 10px;
}
.advertising-agency .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.advertising-agency .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.advertising-agency .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.advertising-agency .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.advertising-agency .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.advertising-agency .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.advertising-agency .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.advertising-agency .mfgGallery .reorderCard strong {
font-size: 13px;
}
.advertising-agency .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.advertising-agency .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.advertising-agency .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.advertising-agency .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.advertising-agency .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.advertising-agency .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.advertising-agency .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.advertising-agency .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.advertising-agency .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.advertising-agency .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.advertising-agency .mfgGallery .varianceCard {
padding: 12px;
}
.advertising-agency .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.advertising-agency .mfgGallery .varianceCard small {
font-size: 10px;
}
.advertising-agency .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.advertising-agency .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.advertising-agency .mfgGallery .deviceTop {
font-size: 11px;
}
.advertising-agency .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.advertising-agency .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.advertising-agency .mfgGallery .deviceMetric {
padding: 9px;
}
.advertising-agency .mfgGallery .deviceMetric span {
font-size: 10px;
}
.advertising-agency .mfgGallery .deviceMetric b {
font-size: 12px;
}
.advertising-agency .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.advertising-agency .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.advertising-agency .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.advertising-agency .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.advertising-agency .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.advertising-agency .mfgGallery .siteNode.north {
top: 6px;
}
.advertising-agency .mfgGallery .siteNode.south {
bottom: 6px;
}
.advertising-agency .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.advertising-agency .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.advertising-agency .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.advertising-agency .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.advertising-agency .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.advertising-agency .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.advertising-agency .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.advertising-agency .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.advertising-agency .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.advertising-agency .mfgGallery .siteSummary strong {
font-size: 12px;
}
.advertising-agency .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.advertising-agency .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.advertising-agency .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.advertising-agency .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.advertising-agency .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.advertising-agency .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.advertising-agency .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.advertising-agency .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.advertising-agency .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.advertising-agency .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.advertising-agency .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.advertising-agency .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.advertising-agency .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.advertising-agency .mfgGallery .insightMeta {
gap: 6px;
}
.advertising-agency .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.advertising-agency .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.advertising-agency .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.advertising-agency .mfgGallery .chartHeader span {
font-size: 10px;
}
.advertising-agency .mfgGallery .chartHeader b {
font-size: 11px;
}
.advertising-agency .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.advertising-agency .mfgGallery .chartLegend {
font-size: 10px;
}
.advertising-agency .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.advertising-agency .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.advertising-agency .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.advertising-agency .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.advertising-agency .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.advertising-agency .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.advertising-agency .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.advertising-agency .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.advertising-agency .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.advertising-agency .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.advertising-agency .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.advertising-agency .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.advertising-agency .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.advertising-agency .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.advertising-agency .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.advertising-agency .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.advertising-agency .mfgGallery .progressCenter strong {
font-size: 25px;
}
.advertising-agency .mfgGallery .trainingStatList {
gap: 9px;
}
.advertising-agency .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.advertising-agency .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.advertising-agency .mfgGallery .trainingStatList span {
font-size: 10px;
}
.advertising-agency .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.advertising-agency .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.advertising-agency .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.advertising-agency .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.advertising-agency .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.advertising-agency .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.advertising-agency .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.advertising-agency .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.advertising-agency .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.advertising-agency .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.advertising-agency .mfgGallery .qualityCaption span {
font-size: 10px;
}
.advertising-agency .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.advertising-agency .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.advertising-agency .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.advertising-agency .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.advertising-agency .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.advertising-agency #agency-materials .featureStage,
.advertising-agency #agency-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.advertising-agency #agency-materials .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.advertising-agency .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.advertising-agency #agency-materials .featureStage,
.advertising-agency #agency-ai-decisions .featureStage {
padding: 16px;
}
.advertising-agency .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.advertising-agency .mfgGallery .freshWindow {
height: auto;
}
.advertising-agency .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.advertising-agency .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .mfgGallery .freshTop strong {
font-size: 13px;
}
.advertising-agency .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.advertising-agency .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.advertising-agency .mfgGallery .rfShelfPanel {
padding: 10px;
}
.advertising-agency .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.advertising-agency .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.advertising-agency .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.advertising-agency .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.advertising-agency .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.advertising-agency .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.advertising-agency .mfgGallery .flowNum {
grid-row: 1/3;
}
.advertising-agency .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.advertising-agency .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.advertising-agency .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advertising-agency .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.advertising-agency .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.advertising-agency .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.advertising-agency .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.advertising-agency .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.advertising-agency .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.advertising-agency .mfgGallery .rfActionStrip {
height: auto;
}
.advertising-agency .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .mfgGallery .countPanel {
gap: 14px;
}
.advertising-agency .mfgGallery .handheldPanel {
padding: 15px;
}
.advertising-agency .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.advertising-agency .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.advertising-agency .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.advertising-agency .mfgGallery .siteNode.east {
right: 3%;
}
.advertising-agency .mfgGallery .siteNode.west {
left: 3%;
}
.advertising-agency .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.advertising-agency .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.advertising-agency .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.advertising-agency .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.advertising-agency .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.advertising-agency .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.advertising-agency .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.advertising-agency .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.advertising-agency .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.advertising-agency .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.advertising-agency .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.advertising-agency .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.advertising-agency .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.advertising-agency .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.advertising-agency .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.advertising-agency .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.advertising-agency .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.advertising-agency .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.advertising-agency .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.advertising-agency .mfgGallery .moduleCard {
padding: 10px;
}
.advertising-agency .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.advertising-agency .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.advertising-agency .mfgGallery .qualityAction strong {
font-size: 12px;
}
.advertising-agency .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.advertising-agency .mfgGallery .shelf i::after {
bottom: 0;
}
.advertising-agency .agencyVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.advertising-agency .agencyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.advertising-agency .agencyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.advertising-agency .agencyStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.advertising-agency .agencyVisualGallery>.agencyGraphic {
display: none;
}
.advertising-agency #agency-sales .featureStage,
.advertising-agency #agency-materials .featureStage,
.advertising-agency #agency-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.advertising-agency #agency-materials .agencyVisualGallery {
grid-column: 1;
grid-row: 1;
}
.advertising-agency #agency-materials .featureContent {
grid-column: 2;
grid-row: 1;
}
.advertising-agency .factoryWorkflow {
display: flex;
flex-direction: column;
}
.advertising-agency .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.advertising-agency .factoryWorkflow>p {
margin-bottom: 22px;
}
.advertising-agency .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.advertising-agency #agency-sales .featureStage,
.advertising-agency #agency-materials .featureStage,
.advertising-agency #agency-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.advertising-agency #agency-materials .agencyVisualGallery,
.advertising-agency #agency-materials .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.advertising-agency .mfgHeroScene {
height: 290px;
}
.advertising-agency #agency-sales .featureStage,
.advertising-agency #agency-materials .featureStage,
.advertising-agency #agency-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.advertising-agency .agencyVisualGallery {
width: 100%;
}
}
@media print {
.advertising-agency .agencyVisualGallery>.agencyGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.advertising-agency #agency-sales-features-1:checked~.featureStage .agencyVisualGallery> :nth-child(1) {
display: block;
}
.advertising-agency #agency-sales-features-2:checked~.featureStage .agencyVisualGallery> :nth-child(2) {
display: block;
}
.advertising-agency #agency-sales-features-3:checked~.featureStage .agencyVisualGallery> :nth-child(3) {
display: block;
}
.advertising-agency #agency-sales-features-4:checked~.featureStage .agencyVisualGallery> :nth-child(4) {
display: block;
}
.advertising-agency #agency-sales-features-5:checked~.featureStage .agencyVisualGallery> :nth-child(5) {
display: block;
}
.advertising-agency #agency-materials-features-1:checked~.featureStage .agencyVisualGallery> :nth-child(1) {
display: block;
}
.advertising-agency #agency-materials-features-2:checked~.featureStage .agencyVisualGallery> :nth-child(2) {
display: block;
}
.advertising-agency #agency-materials-features-3:checked~.featureStage .agencyVisualGallery> :nth-child(3) {
display: block;
}
.advertising-agency #agency-materials-features-4:checked~.featureStage .agencyVisualGallery> :nth-child(4) {
display: block;
}
.advertising-agency #agency-materials-features-5:checked~.featureStage .agencyVisualGallery> :nth-child(5) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-1:checked~.featureStage .agencyVisualGallery> :nth-child(1) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-2:checked~.featureStage .agencyVisualGallery> :nth-child(2) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-3:checked~.featureStage .agencyVisualGallery> :nth-child(3) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-4:checked~.featureStage .agencyVisualGallery> :nth-child(4) {
display: block;
}
.advertising-agency #agency-ai-decisions-features-5:checked~.featureStage .agencyVisualGallery> :nth-child(5) {
display: block;
}
.advertising-agency .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.advertising-agency .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.advertising-agency .agencyIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.advertising-agency .agencyGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.advertising-agency .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.advertising-agency .mfgHeroScene img {
object-position: 70% 50%;
}
.advertising-agency .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.advertising-agency .mfgHeroScene img {
object-position: 78% 50%;
}
.advertising-agency .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.advertising-agency .mfgHeroScene img {
object-position: 72% 50%;
}
.advertising-agency .agencyIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
.advertising-agency .agencyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
.advertising-agency .agencyVisualGallery {
min-height: 0;
}
.advertising-agency .agencyIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
.advertising-agency .mfgHeroScene img {
object-position: 90% 50%;
}
}
.advertising-agency .agencyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
.advertising-agency .agencyGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
.advertising-agency .agencyVisualGallery {
min-height: 0;
}
.advertising-agency .mfgHeroScene img {
object-position: 72% 50%;
}
.advertising-agency .agencyIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.advertising-agency .agencyGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
.advertising-agency .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
.advertising-agency .mfgHeroScene img {
object-position: 80% 50%;
}
}
.advertising-agency .mfgHeroContent {
background: transparent;
}
.advertising-agency .mfgHeroScene img {
object-position: 74% 50%;
}
.advertising-agency .agencyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.advertising-agency .agencyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.advertising-agency .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.advertising-agency .mfgHeroScene img {
object-position: 83% 50%;
}
}
.advertising-agency .mfgHeroContent {
background: transparent;
}
.advertising-agency .mfgHeroScene img {
object-position: 74% 50%;
}
.advertising-agency .agencyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.advertising-agency .agencyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.advertising-agency .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.advertising-agency .mfgHeroScene img {
object-position: 86% 50%;
}
}
.advertising-agency .mfgHeroContent {
background: transparent;
}
.advertising-agency .mfgHeroScene img {
object-position: 76% 50%;
}
.advertising-agency .agencyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.advertising-agency .agencyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.advertising-agency .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
.advertising-agency .mfgHeroScene img {
object-position: 87% 50%;
}
}
.advertising-agency .mfgHeroContent {
background: transparent;
}
.advertising-agency .mfgHeroScene img {
object-position: 76% 50%;
}
.advertising-agency .agencyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.advertising-agency .agencyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.advertising-agency #agency-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.advertising-agency .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.advertising-agency .mfgHeroScene img {
object-position: 88% 50%;
}
} .advertising-agency .mfgHeroContent {
background: transparent;
}
.advertising-agency .mfgHeroScene img {
object-position: 77% 50%;
}
.advertising-agency .agencyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.advertising-agency .agencyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.advertising-agency #agency-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.advertising-agency .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.advertising-agency .mfgHeroScene img {
object-position: 85% 50%;
}
}  .medicine-and-pharmacy .industryIntroHead.compact,
.medicine-and-pharmacy .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.medicine-and-pharmacy .featureMediaPanels {
position: relative;
min-height: 430px;
}
.medicine-and-pharmacy .featureMediaPanels>.mediaPanel {
display: none;
}
.medicine-and-pharmacy .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.medicine-and-pharmacy .featureMediaPanels .spotlightMedia {
height: 100%;
}
.medicine-and-pharmacy .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.medicine-and-pharmacy .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.medicine-and-pharmacy .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.medicine-and-pharmacy .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.medicine-and-pharmacy .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.medicine-and-pharmacy .windowTop small {
font-size: 10px;
color: var(--muted);
}
.medicine-and-pharmacy .windowDots {
display: flex;
gap: 5px;
}
.medicine-and-pharmacy .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.medicine-and-pharmacy .windowBody {
padding: 16px;
}
.medicine-and-pharmacy .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.medicine-and-pharmacy .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.medicine-and-pharmacy .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.medicine-and-pharmacy .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.medicine-and-pharmacy .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.medicine-and-pharmacy .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.medicine-and-pharmacy .chartGridLine.l1 {
top: 34px;
}
.medicine-and-pharmacy .chartGridLine.l2 {
top: 65px;
}
.medicine-and-pharmacy .chartGridLine.l3 {
top: 96px;
}
.medicine-and-pharmacy .chartGridLine.l4 {
top: 127px;
}
.medicine-and-pharmacy .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.medicine-and-pharmacy .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.medicine-and-pharmacy .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.medicine-and-pharmacy .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.medicine-and-pharmacy .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.medicine-and-pharmacy .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.medicine-and-pharmacy .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.medicine-and-pharmacy .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.medicine-and-pharmacy .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.medicine-and-pharmacy .spectrumNotes {
display: grid;
gap: 10px;
}
.medicine-and-pharmacy .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.medicine-and-pharmacy .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.medicine-and-pharmacy .noteCard p,
.medicine-and-pharmacy .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.medicine-and-pharmacy .alertStack {
display: grid;
gap: 10px;
}
.medicine-and-pharmacy .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.medicine-and-pharmacy .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.medicine-and-pharmacy .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.medicine-and-pharmacy .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.medicine-and-pharmacy .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.medicine-and-pharmacy .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.medicine-and-pharmacy .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.medicine-and-pharmacy .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.medicine-and-pharmacy .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.medicine-and-pharmacy .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.medicine-and-pharmacy .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.medicine-and-pharmacy .scheduleBoard h4,
.medicine-and-pharmacy .todoBoard h4,
.medicine-and-pharmacy .siteBoard h4,
.medicine-and-pharmacy .chatPanel h4,
.medicine-and-pharmacy .lessonPanel h4,
.medicine-and-pharmacy .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.medicine-and-pharmacy .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.medicine-and-pharmacy .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.medicine-and-pharmacy .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.medicine-and-pharmacy .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.medicine-and-pharmacy .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.medicine-and-pharmacy .taskRow:last-child {
border-bottom: 0;
}
.medicine-and-pharmacy .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.medicine-and-pharmacy .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.medicine-and-pharmacy .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.medicine-and-pharmacy .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.medicine-and-pharmacy .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.medicine-and-pharmacy .inventoryTable th,
.medicine-and-pharmacy .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.medicine-and-pharmacy .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.medicine-and-pharmacy .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.medicine-and-pharmacy .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.medicine-and-pharmacy .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.medicine-and-pharmacy .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.medicine-and-pharmacy .phoneBody {
padding: 12px;
}
.medicine-and-pharmacy .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.medicine-and-pharmacy .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.medicine-and-pharmacy .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.medicine-and-pharmacy .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.medicine-and-pharmacy .progressList {
display: grid;
gap: 10px;
}
.medicine-and-pharmacy .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.medicine-and-pharmacy .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.medicine-and-pharmacy .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.medicine-and-pharmacy .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.medicine-and-pharmacy .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.medicine-and-pharmacy .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.medicine-and-pharmacy .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.medicine-and-pharmacy .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.medicine-and-pharmacy .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.medicine-and-pharmacy .pin1 {
top: 56px;
left: 58px;
}
.medicine-and-pharmacy .pin2 {
top: 88px;
right: 88px;
}
.medicine-and-pharmacy .pin3 {
bottom: 54px;
right: 72px;
}
.medicine-and-pharmacy .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.medicine-and-pharmacy .siteRow:last-child {
border-bottom: 0;
}
.medicine-and-pharmacy .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.medicine-and-pharmacy .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.medicine-and-pharmacy .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.medicine-and-pharmacy .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.medicine-and-pharmacy .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.medicine-and-pharmacy .graphNodes:before,
.medicine-and-pharmacy .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.medicine-and-pharmacy .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.medicine-and-pharmacy .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.medicine-and-pharmacy .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.medicine-and-pharmacy .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.medicine-and-pharmacy .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.medicine-and-pharmacy .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.medicine-and-pharmacy .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.medicine-and-pharmacy .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.medicine-and-pharmacy .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.medicine-and-pharmacy .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.medicine-and-pharmacy .forecastList .taskRow strong {
font-size: 11px;
}
.medicine-and-pharmacy .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.medicine-and-pharmacy .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.medicine-and-pharmacy .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.medicine-and-pharmacy .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.medicine-and-pharmacy .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.medicine-and-pharmacy .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.medicine-and-pharmacy .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.medicine-and-pharmacy .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.medicine-and-pharmacy .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.medicine-and-pharmacy .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.medicine-and-pharmacy .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.medicine-and-pharmacy .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.medicine-and-pharmacy .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.medicine-and-pharmacy .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.medicine-and-pharmacy .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.medicine-and-pharmacy .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.medicine-and-pharmacy .qualityRows {
display: grid;
gap: 10px;
}
.medicine-and-pharmacy .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.medicine-and-pharmacy .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.medicine-and-pharmacy .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.medicine-and-pharmacy .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.medicine-and-pharmacy .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.medicine-and-pharmacy #pharmacy-sales-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.medicine-and-pharmacy #pharmacy-sales-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.medicine-and-pharmacy #pharmacy-sales-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.medicine-and-pharmacy #pharmacy-sales-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.medicine-and-pharmacy #pharmacy-sales-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.medicine-and-pharmacy #pharmacy-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.medicine-and-pharmacy #pharmacy-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.medicine-and-pharmacy #pharmacy-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.medicine-and-pharmacy #pharmacy-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.medicine-and-pharmacy #pharmacy-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.medicine-and-pharmacy #pharmacy-sales-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.medicine-and-pharmacy #pharmacy-sales-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.medicine-and-pharmacy #pharmacy-sales-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.medicine-and-pharmacy #pharmacy-sales-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.medicine-and-pharmacy #pharmacy-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.medicine-and-pharmacy #pharmacy-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.medicine-and-pharmacy #pharmacy-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.medicine-and-pharmacy #pharmacy-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.medicine-and-pharmacy #pharmacy-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.medicine-and-pharmacy #pharmacy-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.medicine-and-pharmacy .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.medicine-and-pharmacy .featureMediaPanels {
min-height: 0;
}
.medicine-and-pharmacy .inventorySplit,
.medicine-and-pharmacy .forecastGrid,
.medicine-and-pharmacy .siteGrid,
.medicine-and-pharmacy .spectrumGrid,
.medicine-and-pharmacy .scheduleGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.medicine-and-pharmacy .metricGrid,
.medicine-and-pharmacy .lessonCards,
.medicine-and-pharmacy .gaugeGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.medicine-and-pharmacy .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.medicine-and-pharmacy {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
.medicine-and-pharmacy * {
box-sizing: border-box;
}
.medicine-and-pharmacy {
scroll-behavior: smooth;
}
.medicine-and-pharmacy {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
.medicine-and-pharmacy a {
color: inherit;
text-decoration: none;
}
.medicine-and-pharmacy .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
.medicine-and-pharmacy .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.medicine-and-pharmacy .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.medicine-and-pharmacy .brand span {
color: var(--brand);
}
.medicine-and-pharmacy .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.medicine-and-pharmacy .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.medicine-and-pharmacy .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.medicine-and-pharmacy .button.primary:hover {
background: var(--brand-dark);
}
.medicine-and-pharmacy .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.medicine-and-pharmacy .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.medicine-and-pharmacy .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.medicine-and-pharmacy .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.medicine-and-pharmacy h1,
.medicine-and-pharmacy h2,
.medicine-and-pharmacy h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
.medicine-and-pharmacy .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.medicine-and-pharmacy .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.medicine-and-pharmacy .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.medicine-and-pharmacy .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.medicine-and-pharmacy .hero .button.primary:hover {
background: var(--black-soft);
}
.medicine-and-pharmacy .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.medicine-and-pharmacy .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.medicine-and-pharmacy .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.medicine-and-pharmacy .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.medicine-and-pharmacy .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.medicine-and-pharmacy .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.medicine-and-pharmacy .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.medicine-and-pharmacy .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.medicine-and-pharmacy .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.medicine-and-pharmacy .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.medicine-and-pharmacy .ratingLead strong {
display: block;
font-size: 20px;
}
.medicine-and-pharmacy .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.medicine-and-pharmacy .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.medicine-and-pharmacy .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.medicine-and-pharmacy .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.medicine-and-pharmacy .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.medicine-and-pharmacy section {
padding: 88px 0;
}
.medicine-and-pharmacy .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.medicine-and-pharmacy .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.medicine-and-pharmacy .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.medicine-and-pharmacy .aiJourney h2 {
color: #fff;
}
.medicine-and-pharmacy .aiJourney .sectionHead p {
color: #D7D7D7;
}
.medicine-and-pharmacy .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.medicine-and-pharmacy .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.medicine-and-pharmacy .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.medicine-and-pharmacy .aiStep:last-child::after {
display: none;
}
.medicine-and-pharmacy .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.medicine-and-pharmacy .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.medicine-and-pharmacy .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.medicine-and-pharmacy .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.medicine-and-pharmacy .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.medicine-and-pharmacy .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.medicine-and-pharmacy .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.medicine-and-pharmacy .outcome span {
color: var(--muted);
font-size: 14px;
}
.medicine-and-pharmacy .capability {
background: #fff;
}
.medicine-and-pharmacy .capability.alt {
background: var(--sky-2);
}
.medicine-and-pharmacy .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.medicine-and-pharmacy .twoCol.reverse .visual {
order: 2;
}
.medicine-and-pharmacy .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.medicine-and-pharmacy .visual .placeholder {
min-height: 355px;
}
.medicine-and-pharmacy .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.medicine-and-pharmacy .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.medicine-and-pharmacy details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.medicine-and-pharmacy details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.medicine-and-pharmacy details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.medicine-and-pharmacy details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.medicine-and-pharmacy details.capabilityMore[open] summary::after {
content: "−";
}
.medicine-and-pharmacy details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.medicine-and-pharmacy .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.medicine-and-pharmacy .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.medicine-and-pharmacy .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.medicine-and-pharmacy .darkSection h2,
.medicine-and-pharmacy .darkSection h3 {
color: #fff;
}
.medicine-and-pharmacy .darkSection .sectionHead p,
.medicine-and-pharmacy .darkSection .copy p {
color: #D7D7D7;
}
.medicine-and-pharmacy .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy .darkSection .featureItem {
color: #F7F7F7;
}
.medicine-and-pharmacy .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.medicine-and-pharmacy .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.medicine-and-pharmacy .darkSection .placeholder small {
color: #D0D0D0;
}
.medicine-and-pharmacy .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.medicine-and-pharmacy .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.medicine-and-pharmacy .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.medicine-and-pharmacy .card p {
color: var(--muted);
margin: 12px 0 0;
}
.medicine-and-pharmacy .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.medicine-and-pharmacy .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.medicine-and-pharmacy .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.medicine-and-pharmacy .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.medicine-and-pharmacy .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.medicine-and-pharmacy .benefitBand h2 {
color: #fff;
}
.medicine-and-pharmacy .benefitBand .sectionHead p {
color: #D5D5D5;
}
.medicine-and-pharmacy .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.medicine-and-pharmacy .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.medicine-and-pharmacy .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.medicine-and-pharmacy .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.medicine-and-pharmacy .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.medicine-and-pharmacy .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.medicine-and-pharmacy .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.medicine-and-pharmacy .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.medicine-and-pharmacy .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.medicine-and-pharmacy .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.medicine-and-pharmacy .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.medicine-and-pharmacy .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.medicine-and-pharmacy .ctaPanel h2 {
color: #fff;
}
.medicine-and-pharmacy .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.medicine-and-pharmacy .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.medicine-and-pharmacy .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.medicine-and-pharmacy .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.medicine-and-pharmacy .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.medicine-and-pharmacy .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.medicine-and-pharmacy .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.medicine-and-pharmacy .inlineCta.dark h3 {
color: #fff;
}
.medicine-and-pharmacy .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.medicine-and-pharmacy .inlineCta.dark p {
color: #D8D8D8;
}
.medicine-and-pharmacy .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.medicine-and-pharmacy .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.medicine-and-pharmacy .button.yellow:hover {
background: #FFD84D;
}
.medicine-and-pharmacy .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.medicine-and-pharmacy .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.medicine-and-pharmacy .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.medicine-and-pharmacy .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.medicine-and-pharmacy footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.medicine-and-pharmacy .ratingSectionGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.medicine-and-pharmacy .heroGrid,
.medicine-and-pharmacy .twoCol,
.medicine-and-pharmacy .ctaPanel {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .twoCol.reverse .visual {
order: initial;
}
.medicine-and-pharmacy .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.medicine-and-pharmacy .ratingGrid,
.medicine-and-pharmacy .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.medicine-and-pharmacy .ratingLead,
.medicine-and-pharmacy .awardLead {
grid-column: 1/-1;
text-align: center;
}
.medicine-and-pharmacy .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.medicine-and-pharmacy .aiStep:nth-child(3)::after,
.medicine-and-pharmacy .aiStep:last-child::after {
display: none;
}
.medicine-and-pharmacy .outcomeGrid,
.medicine-and-pharmacy .challengeGrid,
.medicine-and-pharmacy .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.medicine-and-pharmacy .cards,
.medicine-and-pharmacy .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.medicine-and-pharmacy .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.medicine-and-pharmacy .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.medicine-and-pharmacy .awardProofGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .wrap {
width: min(var(--max), calc(100% - 24px));
}
.medicine-and-pharmacy .hero {
padding: 58px 0 52px;
}
.medicine-and-pharmacy section {
padding: 64px 0;
}
.medicine-and-pharmacy h1 {
font-size: 44px;
}
.medicine-and-pharmacy .aiFlow {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .aiStep::after {
display: none;
}
.medicine-and-pharmacy .logoRow,
.medicine-and-pharmacy .ratingGrid,
.medicine-and-pharmacy .awardGrid,
.medicine-and-pharmacy .outcomeGrid,
.medicine-and-pharmacy .challengeGrid,
.medicine-and-pharmacy .benefitGrid,
.medicine-and-pharmacy .cards,
.medicine-and-pharmacy .proofCards,
.medicine-and-pharmacy .integrationGrid,
.medicine-and-pharmacy .featureList {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.medicine-and-pharmacy .ctaPanel {
padding: 34px 24px;
}
.medicine-and-pharmacy .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.medicine-and-pharmacy .inlineCtaActions {
width: 100%;
}
.medicine-and-pharmacy .inlineCtaActions .button {
flex: 1;
}
}
.medicine-and-pharmacy {
--muted: #526A7C;
--shadow: none;
}
.medicine-and-pharmacy {
background: var(--sky-2);
}
.medicine-and-pharmacy p {
margin-bottom: 0;
}
.medicine-and-pharmacy [id] {
scroll-margin-top: 94px;
}
.medicine-and-pharmacy svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.medicine-and-pharmacy .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.medicine-and-pharmacy h1,
.medicine-and-pharmacy h2,
.medicine-and-pharmacy h3 {
color: var(--black);
}
.medicine-and-pharmacy .darkSection h2,
.medicine-and-pharmacy .darkSection h3,
.medicine-and-pharmacy .aiJourney h2,
.medicine-and-pharmacy .benefitBand h2,
.medicine-and-pharmacy .ctaPanel h2,
.medicine-and-pharmacy .inlineCta.dark h3 {
color: #fff;
}
.medicine-and-pharmacy .wrap>*,
.medicine-and-pharmacy .heroGrid>*,
.medicine-and-pharmacy .twoCol>*,
.medicine-and-pharmacy .ctaPanel>* {
min-width: 0;
}
.medicine-and-pharmacy .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.medicine-and-pharmacy .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.medicine-and-pharmacy .skipLink:focus {
transform: none;
}
.medicine-and-pharmacy a:focus-visible,
.medicine-and-pharmacy summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.medicine-and-pharmacy .darkSection a:focus-visible,
.medicine-and-pharmacy .darkSection summary:focus-visible,
.medicine-and-pharmacy .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.medicine-and-pharmacy .topbar {
background: #fff;
backdrop-filter: none;
}
.medicine-and-pharmacy .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.medicine-and-pharmacy .brandName {
display: inline;
color: var(--navy) !important;
}
.medicine-and-pharmacy .brandName>span {
color: var(--brand-dark);
}
.medicine-and-pharmacy .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.medicine-and-pharmacy .brandMark .icon2 {
width: 21px;
height: 21px;
}
.medicine-and-pharmacy .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.medicine-and-pharmacy .navlinks a:hover {
color: var(--brand-dark);
}
.medicine-and-pharmacy .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.medicine-and-pharmacy .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.medicine-and-pharmacy .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.medicine-and-pharmacy .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.medicine-and-pharmacy .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.medicine-and-pharmacy .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.medicine-and-pharmacy .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.medicine-and-pharmacy .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.medicine-and-pharmacy .heroVisual {
width: 100%;
min-width: 0;
}
.medicine-and-pharmacy .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.medicine-and-pharmacy .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.medicine-and-pharmacy .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.medicine-and-pharmacy .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.medicine-and-pharmacy .clientBand {
padding: 27px 0;
}
.medicine-and-pharmacy .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.medicine-and-pharmacy .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.medicine-and-pharmacy .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.medicine-and-pharmacy .logoBox.wide {
font-size: 12px;
}
.medicine-and-pharmacy .logoBox small {
display: block;
font-size: 10px;
}
.medicine-and-pharmacy section {
padding: 80px 0;
}
.medicine-and-pharmacy h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.medicine-and-pharmacy .sectionHead {
margin-bottom: 36px;
}
.medicine-and-pharmacy .eyebrow {
line-height: 1.5;
}
.medicine-and-pharmacy .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.medicine-and-pharmacy .aiStep {
min-height: 162px;
}
.medicine-and-pharmacy .aiStep strong {
line-height: 1.35;
}
.medicine-and-pharmacy .aiStep span {
line-height: 1.65;
}
.medicine-and-pharmacy .aiCallout {
margin-top: 24px;
}
.medicine-and-pharmacy .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.medicine-and-pharmacy .outcome>.icon2 {
color: var(--navy);
}
.medicine-and-pharmacy .awardItem>.icon2 {
color: var(--navy);
}
.medicine-and-pharmacy .awardItem:hover {
border-color: var(--brand-dark);
}
.medicine-and-pharmacy .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.medicine-and-pharmacy .twoCol.reverse .visual {
order: -1;
}
.medicine-and-pharmacy .copy .eyebrow {
margin-bottom: 17px;
}
.medicine-and-pharmacy .copy p {
font-size: 16px;
line-height: 1.85;
}
.medicine-and-pharmacy .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.medicine-and-pharmacy .featureList {
gap: 13px 18px;
}
.medicine-and-pharmacy .featureItem {
font-size: 13px;
line-height: 1.6;
}
.medicine-and-pharmacy .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.medicine-and-pharmacy .check .icon2 {
width: 14px;
height: 14px;
}
.medicine-and-pharmacy details.capabilityMore {
margin-bottom: 0;
}
.medicine-and-pharmacy .capabilityMore summary {
min-height: 34px;
}
.medicine-and-pharmacy .capabilityMore .moreGrid {
gap: 13px 18px;
}
.medicine-and-pharmacy .textCta {
font-size: 14px;
}
.medicine-and-pharmacy .visual {
min-width: 0;
}
.medicine-and-pharmacy .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.medicine-and-pharmacy .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.medicine-and-pharmacy .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.medicine-and-pharmacy .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.medicine-and-pharmacy .panelBody {
padding: 20px;
}
.medicine-and-pharmacy .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.medicine-and-pharmacy .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.medicine-and-pharmacy .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.medicine-and-pharmacy .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.medicine-and-pharmacy .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.medicine-and-pharmacy .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.medicine-and-pharmacy .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.medicine-and-pharmacy .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.medicine-and-pharmacy .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.medicine-and-pharmacy .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.medicine-and-pharmacy .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.medicine-and-pharmacy .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.medicine-and-pharmacy .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.medicine-and-pharmacy .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.medicine-and-pharmacy .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.medicine-and-pharmacy .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.medicine-and-pharmacy .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.medicine-and-pharmacy .miniStats span {
font-size: 9px;
color: var(--muted);
}
.medicine-and-pharmacy .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.medicine-and-pharmacy .dataRow:last-child {
border-bottom: 0;
}
.medicine-and-pharmacy .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.medicine-and-pharmacy .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.medicine-and-pharmacy .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.medicine-and-pharmacy .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.medicine-and-pharmacy .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.medicine-and-pharmacy .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.medicine-and-pharmacy .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.medicine-and-pharmacy .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.medicine-and-pharmacy .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.medicine-and-pharmacy .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.medicine-and-pharmacy .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.medicine-and-pharmacy .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.medicine-and-pharmacy .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.medicine-and-pharmacy .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.medicine-and-pharmacy .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.medicine-and-pharmacy .mobileAccount {
text-align: center;
padding: 13px 0;
}
.medicine-and-pharmacy .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.medicine-and-pharmacy .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.medicine-and-pharmacy .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.medicine-and-pharmacy .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.medicine-and-pharmacy .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.medicine-and-pharmacy .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.medicine-and-pharmacy .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.medicine-and-pharmacy .phoneDevice .rowCopy strong {
font-size: 9px;
}
.medicine-and-pharmacy .phoneDevice .rowCopy small {
font-size: 7px;
}
.medicine-and-pharmacy .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.medicine-and-pharmacy .mobileSide {
display: grid;
gap: 10px;
}
.medicine-and-pharmacy .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.medicine-and-pharmacy .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.medicine-and-pharmacy .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.medicine-and-pharmacy .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.medicine-and-pharmacy .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.medicine-and-pharmacy .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.medicine-and-pharmacy .darkSection .panelHead>strong {
color: #fff;
}
.medicine-and-pharmacy .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.medicine-and-pharmacy .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.medicine-and-pharmacy .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.medicine-and-pharmacy .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.medicine-and-pharmacy .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.medicine-and-pharmacy .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.medicine-and-pharmacy .promptList {
display: grid;
gap: 10px;
}
.medicine-and-pharmacy .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.medicine-and-pharmacy .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.medicine-and-pharmacy .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.medicine-and-pharmacy .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.medicine-and-pharmacy .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.medicine-and-pharmacy .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.medicine-and-pharmacy .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.medicine-and-pharmacy .quoteTable th,
.medicine-and-pharmacy .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.medicine-and-pharmacy .quoteTable td:first-child {
width: 64%;
}
.medicine-and-pharmacy .quoteTable th:last-child,
.medicine-and-pharmacy .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.medicine-and-pharmacy .quoteTable strong {
font-size: 11px;
}
.medicine-and-pharmacy .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.medicine-and-pharmacy .quoteTable tfoot {
background: #F5FBFF;
}
.medicine-and-pharmacy .quoteTable tfoot th {
font-size: 10px;
}
.medicine-and-pharmacy .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.medicine-and-pharmacy .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.medicine-and-pharmacy .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.medicine-and-pharmacy .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.medicine-and-pharmacy .orderJourney {
margin: 20px 0;
}
.medicine-and-pharmacy .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.medicine-and-pharmacy .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.medicine-and-pharmacy .journeyRow:last-child:before {
display: none;
}
.medicine-and-pharmacy .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.medicine-and-pharmacy .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.medicine-and-pharmacy .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.medicine-and-pharmacy .journeyRow strong {
font-size: 12px;
display: block;
}
.medicine-and-pharmacy .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.medicine-and-pharmacy .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.medicine-and-pharmacy .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.medicine-and-pharmacy .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.medicine-and-pharmacy .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.medicine-and-pharmacy .inventoryIntro strong {
display: block;
font-size: 16px;
}
.medicine-and-pharmacy .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.medicine-and-pharmacy .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.medicine-and-pharmacy .availabilityCard span {
font-size: 9px;
display: block;
}
.medicine-and-pharmacy .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.medicine-and-pharmacy .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.medicine-and-pharmacy .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.medicine-and-pharmacy .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.medicine-and-pharmacy .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.medicine-and-pharmacy .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.medicine-and-pharmacy .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.medicine-and-pharmacy .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.medicine-and-pharmacy .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.medicine-and-pharmacy .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.medicine-and-pharmacy .customerTimeline .dataRow {
border-color: #353535;
}
.medicine-and-pharmacy .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.medicine-and-pharmacy .customerTimeline strong {
color: #fff;
}
.medicine-and-pharmacy .customerTimeline small {
color: #BFBFBF;
}
.medicine-and-pharmacy .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.medicine-and-pharmacy .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.medicine-and-pharmacy .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.medicine-and-pharmacy .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.medicine-and-pharmacy .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.medicine-and-pharmacy .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.medicine-and-pharmacy .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.medicine-and-pharmacy .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.medicine-and-pharmacy .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.medicine-and-pharmacy .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.medicine-and-pharmacy .chartTitle strong {
font-size: 12px;
}
.medicine-and-pharmacy .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.medicine-and-pharmacy .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.medicine-and-pharmacy .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.medicine-and-pharmacy .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.medicine-and-pharmacy .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.medicine-and-pharmacy .inlineCta {
margin-top: 0;
box-shadow: none;
}
.medicine-and-pharmacy .inlineCtaActions {
max-width: 42%;
}
.medicine-and-pharmacy .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.medicine-and-pharmacy .inlineCta h3 {
line-height: 1.35;
}
.medicine-and-pharmacy .card {
box-shadow: none;
}
.medicine-and-pharmacy .cardIcon {
box-shadow: none;
}
.medicine-and-pharmacy .card h3 {
font-size: 22px;
}
.medicine-and-pharmacy .card p {
font-size: 14px;
line-height: 1.8;
}
.medicine-and-pharmacy .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.medicine-and-pharmacy .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.medicine-and-pharmacy .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.medicine-and-pharmacy .ratingBand {
padding: 34px 0;
}
.medicine-and-pharmacy .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.medicine-and-pharmacy .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.medicine-and-pharmacy .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.medicine-and-pharmacy .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.medicine-and-pharmacy .ratingItem:first-child {
border-left: 0;
}
.medicine-and-pharmacy .proofCard h3 {
font-size: 23px;
}
.medicine-and-pharmacy .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.medicine-and-pharmacy .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.medicine-and-pharmacy .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.medicine-and-pharmacy .integration {
min-height: 98px;
}
.medicine-and-pharmacy .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.medicine-and-pharmacy .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.medicine-and-pharmacy .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.medicine-and-pharmacy .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.medicine-and-pharmacy .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.medicine-and-pharmacy .finalActions {
display: grid;
gap: 11px;
}
.medicine-and-pharmacy .finalActions .button {
white-space: nowrap;
}
.medicine-and-pharmacy .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.medicine-and-pharmacy .footerInner p {
margin: 0;
font-size: 12px;
}
.medicine-and-pharmacy .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.medicine-and-pharmacy .navlinks {
gap: 15px;
font-size: 12px;
}
.medicine-and-pharmacy .heroGrid {
gap: 30px;
}
.medicine-and-pharmacy .twoCol {
gap: 32px;
}
.medicine-and-pharmacy .panelBody {
padding: 16px;
}
.medicine-and-pharmacy .panelHead {
padding: 16px;
}
.medicine-and-pharmacy .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.medicine-and-pharmacy .pipelineColumns {
gap: 7px;
}
.medicine-and-pharmacy .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.medicine-and-pharmacy .heroGrid,
.medicine-and-pharmacy .twoCol,
.medicine-and-pharmacy .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .heroGrid {
gap: 36px;
}
.medicine-and-pharmacy .hero h1 {
max-width: 730px;
}
.medicine-and-pharmacy .hero .lead {
max-width: 690px;
}
.medicine-and-pharmacy .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.medicine-and-pharmacy .twoCol {
gap: 34px;
}
.medicine-and-pharmacy .twoCol.reverse .visual {
order: initial;
}
.medicine-and-pharmacy .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.medicine-and-pharmacy .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.medicine-and-pharmacy .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.medicine-and-pharmacy .awardItem {
font-size: 12px;
padding: 13px;
}
.medicine-and-pharmacy .ratingSectionGrid {
gap: 20px;
}
.medicine-and-pharmacy .inlineCta {
align-items: flex-start;
}
.medicine-and-pharmacy .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.medicine-and-pharmacy .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.medicine-and-pharmacy .card {
padding: 22px;
}
.medicine-and-pharmacy .card h3 {
font-size: 21px;
}
.medicine-and-pharmacy .finalActions {
display: flex;
flex-wrap: wrap;
}
.medicine-and-pharmacy .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.medicine-and-pharmacy .cards,
.medicine-and-pharmacy .proofCards {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.medicine-and-pharmacy .inlineCta {
flex-direction: column;
}
.medicine-and-pharmacy .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.medicine-and-pharmacy .inlineCtaActions .button {
flex: 1;
}
.medicine-and-pharmacy .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.medicine-and-pharmacy .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.medicine-and-pharmacy .wrap {
width: calc(100% - 32px);
}
.medicine-and-pharmacy [id] {
scroll-margin-top: 82px;
}
.medicine-and-pharmacy .brand {
font-size: 20px;
gap: 7px;
}
.medicine-and-pharmacy .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.medicine-and-pharmacy .brandMark .icon2 {
width: 18px;
height: 18px;
}
.medicine-and-pharmacy .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.medicine-and-pharmacy section {
padding: 60px 0;
}
.medicine-and-pharmacy .hero {
padding: 51px 0 48px;
}
.medicine-and-pharmacy .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.medicine-and-pharmacy .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.medicine-and-pharmacy .heroActions {
gap: 10px;
margin-top: 25px;
}
.medicine-and-pharmacy .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.medicine-and-pharmacy .hero .microcopy {
font-size: 11px;
}
.medicine-and-pharmacy .heroPills span {
font-size: 9px;
}
.medicine-and-pharmacy .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.medicine-and-pharmacy .sectionHead p {
font-size: 16px;
}
.medicine-and-pharmacy .copy h2 {
font-size: 34px;
}
.medicine-and-pharmacy .copy p {
font-size: 15px;
}
.medicine-and-pharmacy .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.medicine-and-pharmacy .logoBox {
min-height: 53px;
}
.medicine-and-pharmacy .logoBox:last-child {
grid-column: 1/-1;
}
.medicine-and-pharmacy .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medicine-and-pharmacy .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.medicine-and-pharmacy .aiStep strong {
font-size: 13px;
}
.medicine-and-pharmacy .aiStep span {
font-size: 11px;
}
.medicine-and-pharmacy .aiStep::after {
display: none;
}
.medicine-and-pharmacy .outcomeGrid,
.medicine-and-pharmacy .challengeGrid,
.medicine-and-pharmacy .benefitGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .outcome {
padding: 24px;
}
.medicine-and-pharmacy .outcome strong {
font-size: 22px;
}
.medicine-and-pharmacy .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medicine-and-pharmacy .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.medicine-and-pharmacy .awardItem:last-child {
grid-column: 1/-1;
}
.medicine-and-pharmacy .featureList,
.medicine-and-pharmacy .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .featureItem {
font-size: 13px;
}
.medicine-and-pharmacy .inlineCta {
padding: 22px;
gap: 19px;
}
.medicine-and-pharmacy .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.medicine-and-pharmacy .panelHead {
padding: 15px 13px;
}
.medicine-and-pharmacy .panelHead>strong {
font-size: 12px;
}
.medicine-and-pharmacy .panelBody {
padding: 14px;
}
.medicine-and-pharmacy .productPanel {
border-radius: 16px;
}
.medicine-and-pharmacy .productPanel figcaption {
padding: 0 14px 13px;
}
.medicine-and-pharmacy .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.medicine-and-pharmacy .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.medicine-and-pharmacy .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.medicine-and-pharmacy .deal {
margin-top: 0;
padding: 10px;
}
.medicine-and-pharmacy .deal strong {
font-size: 10px;
}
.medicine-and-pharmacy .deal small {
font-size: 9px;
}
.medicine-and-pharmacy .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.medicine-and-pharmacy .mobileWorkspace {
gap: 12px;
}
.medicine-and-pharmacy .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.medicine-and-pharmacy .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.medicine-and-pharmacy .sideTile {
padding: 10px;
}
.medicine-and-pharmacy .sideTile strong {
font-size: 10px;
}
.medicine-and-pharmacy .sideTile p {
font-size: 9px;
}
.medicine-and-pharmacy .mobileHeader strong {
font-size: 15px;
}
.medicine-and-pharmacy .mobileAccount strong {
font-size: 10px;
}
.medicine-and-pharmacy .mobileAccount small {
font-size: 7px;
}
.medicine-and-pharmacy .phoneDevice .rowIcon {
display: none;
}
.medicine-and-pharmacy .quoteTable th,
.medicine-and-pharmacy .quoteTable td {
padding: 12px 4px;
}
.medicine-and-pharmacy .quoteTable strong {
font-size: 10px;
}
.medicine-and-pharmacy .quoteTable small {
font-size: 8px;
}
.medicine-and-pharmacy .quoteTable tfoot th {
font-size: 9px;
}
.medicine-and-pharmacy .docHeader strong {
font-size: 17px;
}
.medicine-and-pharmacy .miniFlow {
gap: 5px;
font-size: 9px;
}
.medicine-and-pharmacy .miniFlow span {
padding: 6px;
}
.medicine-and-pharmacy .rowCopy strong {
font-size: 10px;
}
.medicine-and-pharmacy .rowCopy small {
font-size: 8px;
}
.medicine-and-pharmacy .statusPill {
font-size: 7px;
padding: 5px;
}
.medicine-and-pharmacy .miniStats {
gap: 7px;
}
.medicine-and-pharmacy .miniStats>div {
padding: 9px;
}
.medicine-and-pharmacy .miniStats strong {
font-size: 18px;
}
.medicine-and-pharmacy .miniStats span {
font-size: 8px;
}
.medicine-and-pharmacy .collectionStats>div {
padding: 13px;
}
.medicine-and-pharmacy .collectionStats strong {
font-size: 24px;
}
.medicine-and-pharmacy .customerHeader strong {
font-size: 17px;
}
.medicine-and-pharmacy .customerFacts>div {
padding: 10px;
}
.medicine-and-pharmacy .customerFacts strong {
font-size: 12px;
}
.medicine-and-pharmacy .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medicine-and-pharmacy .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.medicine-and-pharmacy .ratingItem:last-child {
grid-column: 1/-1;
}
.medicine-and-pharmacy .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medicine-and-pharmacy .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.medicine-and-pharmacy .integration small {
font-size: 9px;
}
.medicine-and-pharmacy .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.medicine-and-pharmacy .ctaPanel p {
font-size: 15px;
}
.medicine-and-pharmacy .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .footerInner {
align-items: flex-start;
flex-direction: column;
}
.medicine-and-pharmacy .contextSection {
padding: 0 0 24px;
}
.medicine-and-pharmacy .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.medicine-and-pharmacy .wrap {
width: calc(100% - 24px);
}
.medicine-and-pharmacy .brand {
font-size: 18px;
}
.medicine-and-pharmacy .brandMark {
width: 25px;
height: 25px;
}
.medicine-and-pharmacy .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.medicine-and-pharmacy .hero h1 {
font-size: 38px;
}
.medicine-and-pharmacy .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.medicine-and-pharmacy .copy h2 {
font-size: 31px;
}
.medicine-and-pharmacy .mobileWorkspace {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .phoneDevice {
width: 210px;
}
.medicine-and-pharmacy .phoneDevice .rowIcon {
display: grid;
}
.medicine-and-pharmacy .mobileSide {
gap: 8px;
}
.medicine-and-pharmacy .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.medicine-and-pharmacy .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.medicine-and-pharmacy .sideTile p {
margin: 0;
}
.medicine-and-pharmacy .miniFlow span {
padding: 5px;
font-size: 8px;
}
.medicine-and-pharmacy .collectionStats strong {
font-size: 21px;
}
.medicine-and-pharmacy .inventoryIntro strong {
font-size: 14px;
}
.medicine-and-pharmacy .dataRow {
gap: 7px;
}
.medicine-and-pharmacy .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.medicine-and-pharmacy .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
.medicine-and-pharmacy {
scroll-behavior: auto;
}
.medicine-and-pharmacy *,
.medicine-and-pharmacy *::before,
.medicine-and-pharmacy *::after {
transition: none !important;
animation: none !important;
}
}
.medicine-and-pharmacy {
background: var(--sky-2);
}
.medicine-and-pharmacy .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
.medicine-and-pharmacy .hero .eyebrow {
max-width: 100%;
}
.medicine-and-pharmacy .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.medicine-and-pharmacy .ganttIllustration,
.medicine-and-pharmacy .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.medicine-and-pharmacy .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.medicine-and-pharmacy .costIllustration {
aspect-ratio: 484/226;
}
.medicine-and-pharmacy .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.medicine-and-pharmacy .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.medicine-and-pharmacy .comparisonTable thead {
background: var(--black);
color: #fff;
}
.medicine-and-pharmacy .comparisonTable thead th:last-child {
color: var(--yellow);
}
.medicine-and-pharmacy .comparisonTable th,
.medicine-and-pharmacy .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .comparisonTable th:first-child {
width: 23%;
}
.medicine-and-pharmacy .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.medicine-and-pharmacy .comparisonTable tbody td {
color: var(--muted);
}
.medicine-and-pharmacy .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.medicine-and-pharmacy .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.medicine-and-pharmacy .card,
.medicine-and-pharmacy .proofCard,
.medicine-and-pharmacy .productPanel,
.medicine-and-pharmacy .outcome,
.medicine-and-pharmacy .benefit {
box-shadow: none;
}
.medicine-and-pharmacy .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.medicine-and-pharmacy .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.medicine-and-pharmacy .hero .eyebrow {
font-size: 10px;
}
.medicine-and-pharmacy .comparisonTable {
font-size: 11px;
}
.medicine-and-pharmacy .comparisonTable th,
.medicine-and-pharmacy .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.medicine-and-pharmacy .comparisonTable th:first-child {
width: 24%;
}
.medicine-and-pharmacy .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.medicine-and-pharmacy .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.medicine-and-pharmacy .hero h1 {
font-size: 38px;
}
}
.medicine-and-pharmacy .scheduleIllustration,
.medicine-and-pharmacy .analyticsIllustration,
.medicine-and-pharmacy .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.medicine-and-pharmacy .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.medicine-and-pharmacy .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.medicine-and-pharmacy .conditionIllustration {
aspect-ratio: 484 / 178;
}
.medicine-and-pharmacy .miniStats strong {
font-variant-numeric: tabular-nums;
}
.medicine-and-pharmacy .quoteTable td:last-child {
white-space: nowrap;
}
.medicine-and-pharmacy .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.medicine-and-pharmacy .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.medicine-and-pharmacy .darkSection .textCta {
color: var(--yellow);
}
.medicine-and-pharmacy .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.medicine-and-pharmacy .secondaryLinks .textCta {
font-size: 12px;
}
.medicine-and-pharmacy .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.medicine-and-pharmacy .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.medicine-and-pharmacy .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.medicine-and-pharmacy .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.medicine-and-pharmacy .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.medicine-and-pharmacy .scanSummary>.icon2 {
color: var(--yellow);
flex: 0 0 24px;
}
.medicine-and-pharmacy .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.medicine-and-pharmacy .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.medicine-and-pharmacy .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.medicine-and-pharmacy .returnFlag .icon2 {
flex: 0 0 24px;
}
.medicine-and-pharmacy .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.medicine-and-pharmacy .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.medicine-and-pharmacy .phoneDevice {
max-width: 100%;
}
.medicine-and-pharmacy .heroPills {
line-height: 1.55;
}
.medicine-and-pharmacy .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.medicine-and-pharmacy .plantFacts {
gap: 7px;
}
.medicine-and-pharmacy .plantFacts>div {
padding: 9px;
}
.medicine-and-pharmacy .plantFacts strong {
font-size: 11px;
}
.medicine-and-pharmacy .scanSummary {
padding: 12px;
}
.medicine-and-pharmacy .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.medicine-and-pharmacy .mobileWorkspace {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .phoneDevice {
width: 224px;
margin: auto;
}
.medicine-and-pharmacy .phoneDevice .rowIcon {
display: grid;
}
.medicine-and-pharmacy .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.medicine-and-pharmacy .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.medicine-and-pharmacy .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.medicine-and-pharmacy .sideTile strong {
font-size: 12px;
}
.medicine-and-pharmacy .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.medicine-and-pharmacy .topbar,
.medicine-and-pharmacy .heroActions,
.medicine-and-pharmacy .finalActions,
.medicine-and-pharmacy .contextSection,
.medicine-and-pharmacy .valueCtaSection {
display: none;
}
.medicine-and-pharmacy section {
break-inside: avoid;
padding: 28px 0;
}
.medicine-and-pharmacy .hero {
padding-top: 20px;
}
}
.medicine-and-pharmacy {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
.medicine-and-pharmacy p {
margin: 0;
}
.medicine-and-pharmacy main {
display: block;
}
.medicine-and-pharmacy section {
padding: 74px 0;
}
.medicine-and-pharmacy .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.medicine-and-pharmacy .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.medicine-and-pharmacy .heroAccent {
color: var(--black);
}
.medicine-and-pharmacy .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.medicine-and-pharmacy .heroActions {
gap: 10px;
margin-top: 24px;
}
.medicine-and-pharmacy .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.medicine-and-pharmacy .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.medicine-and-pharmacy .microcopy {
margin-top: 14px;
}
.medicine-and-pharmacy .heroPills {
margin-top: 13px;
}
.medicine-and-pharmacy .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.medicine-and-pharmacy .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.medicine-and-pharmacy .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.medicine-and-pharmacy .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.medicine-and-pharmacy .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.medicine-and-pharmacy .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.medicine-and-pharmacy .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.medicine-and-pharmacy .clientBand {
padding: 24px 0;
}
.medicine-and-pharmacy .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.medicine-and-pharmacy .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.medicine-and-pharmacy .logoBox.wide {
font-size: 15px;
}
.medicine-and-pharmacy .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.medicine-and-pharmacy .sectionHead p {
margin: 17px 0 0;
}
.medicine-and-pharmacy .copy p {
margin: 16px 0 0;
}
.medicine-and-pharmacy .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.medicine-and-pharmacy .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.medicine-and-pharmacy .aiJourney {
background: var(--black);
}
.medicine-and-pharmacy .aiStep {
min-height: 157px;
border-color: #353535;
}
.medicine-and-pharmacy .productPanel {
border-radius: 18px;
}
.medicine-and-pharmacy .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.medicine-and-pharmacy .panelHead>strong {
font-size: 13px;
}
.medicine-and-pharmacy .sampleTag {
font-size: 9px;
}
.medicine-and-pharmacy .panelBody {
padding: 21px;
}
.medicine-and-pharmacy .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.medicine-and-pharmacy .docHeader {
padding-bottom: 16px;
}
.medicine-and-pharmacy .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.medicine-and-pharmacy .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.medicine-and-pharmacy .smallLabel {
font-size: 9px;
}
.medicine-and-pharmacy .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.medicine-and-pharmacy .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.medicine-and-pharmacy .dataRow {
padding: 14px 0;
}
.medicine-and-pharmacy .statusPill {
font-size: 8px;
}
.medicine-and-pharmacy .miniStats {
gap: 10px;
margin: 18px 0;
}
.medicine-and-pharmacy .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.medicine-and-pharmacy .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.medicine-and-pharmacy .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.medicine-and-pharmacy .contextNote {
font-size: 11px;
margin-top: 16px;
}
.medicine-and-pharmacy .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.medicine-and-pharmacy .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.medicine-and-pharmacy .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.medicine-and-pharmacy .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.medicine-and-pharmacy .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.medicine-and-pharmacy .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.medicine-and-pharmacy .hierarchy strong {
color: var(--navy);
}
.medicine-and-pharmacy .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.medicine-and-pharmacy .conditionIllustration {
aspect-ratio: 484/201;
}
.medicine-and-pharmacy .analyticsIllustration {
aspect-ratio: 484/206;
}
.medicine-and-pharmacy .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.medicine-and-pharmacy .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.medicine-and-pharmacy .phoneDevice .rowCopy strong {
font-size: 10px;
}
.medicine-and-pharmacy .phoneDevice .rowCopy small {
font-size: 9px;
}
.medicine-and-pharmacy .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.medicine-and-pharmacy .mobileAccount small {
font-size: 9px;
}
.medicine-and-pharmacy .sideTile {
background: var(--sky-2);
padding: 14px;
}
.medicine-and-pharmacy .sideTile strong {
font-size: 12px;
}
.medicine-and-pharmacy .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.medicine-and-pharmacy .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.medicine-and-pharmacy .mobileAction {
font-size: 9px;
}
.medicine-and-pharmacy .journeyRow strong {
font-size: 13px;
}
.medicine-and-pharmacy .journeyRow small {
font-size: 11px;
}
.medicine-and-pharmacy .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.medicine-and-pharmacy .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.medicine-and-pharmacy .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.medicine-and-pharmacy .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.medicine-and-pharmacy .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.medicine-and-pharmacy .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.medicine-and-pharmacy .utilityReadout small {
font-size: 12px;
}
.medicine-and-pharmacy .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.medicine-and-pharmacy .darkSection {
background: var(--black);
}
.medicine-and-pharmacy .darkSection .panelHead {
background: var(--black-soft);
}
.medicine-and-pharmacy .darkSection .productPanel {
background: var(--black-soft);
}
.medicine-and-pharmacy .darkSection .copy .featureNote {
color: #CFCFCF;
}
.medicine-and-pharmacy .darkSection .rowCopy strong {
color: #FFFFFF;
}
.medicine-and-pharmacy .darkSection .rowCopy small {
color: #CFCFCF;
}
.medicine-and-pharmacy .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.medicine-and-pharmacy .assistantHead small {
font-size: 11px;
}
.medicine-and-pharmacy .assistantNote {
font-size: 11px;
}
.medicine-and-pharmacy .reportTags span {
font-size: 10px;
}
.medicine-and-pharmacy .card p {
margin: 12px 0 0;
}
.medicine-and-pharmacy .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.medicine-and-pharmacy .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.medicine-and-pharmacy .cards>.card {
display: flex;
flex-direction: column;
}
.medicine-and-pharmacy .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.medicine-and-pharmacy .cards>.card p {
padding-bottom: 22px;
}
.medicine-and-pharmacy .benefitBand {
background: var(--black);
}
.medicine-and-pharmacy .benefit {
background: var(--black-soft);
}
.medicine-and-pharmacy .inlineCta h3 {
font-size: 20px;
}
.medicine-and-pharmacy .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.medicine-and-pharmacy .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.medicine-and-pharmacy .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.medicine-and-pharmacy .valueCtaSection {
padding: 32px 0;
}
.medicine-and-pharmacy .proofCard p {
margin-top: 15px;
}
.medicine-and-pharmacy .proofCard h3 {
font-size: 23px;
}
.medicine-and-pharmacy .integrationNote {
margin-top: 23px;
}
.medicine-and-pharmacy .ctaPanel {
background: var(--black);
}
.medicine-and-pharmacy .ctaPanel p {
margin-top: 16px;
}
.medicine-and-pharmacy .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.medicine-and-pharmacy .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.medicine-and-pharmacy a:hover {
text-decoration: none;
}
.medicine-and-pharmacy .textCta:hover {
color: var(--navy);
}
.medicine-and-pharmacy .darkSection .textCta:hover {
color: #FFFFFF;
}
.medicine-and-pharmacy .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.medicine-and-pharmacy .hero h1 {
font-size: 49px;
}
.medicine-and-pharmacy .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.medicine-and-pharmacy .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.medicine-and-pharmacy .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.medicine-and-pharmacy .hero h1 {
font-size: 58px;
}
.medicine-and-pharmacy .heroVisual {
max-width: 548px;
}
.medicine-and-pharmacy .hero .lead {
max-width: 700px;
}
.medicine-and-pharmacy .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.medicine-and-pharmacy .logoBox {
font-size: 18px;
border: 0 !important;
}
.medicine-and-pharmacy .logoBox:last-child {
grid-column: auto;
}
.medicine-and-pharmacy .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.medicine-and-pharmacy .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.medicine-and-pharmacy .inlineCtaActions .button {
flex: 1;
}
.medicine-and-pharmacy .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.medicine-and-pharmacy section {
padding: 55px 0;
}
.medicine-and-pharmacy .hero {
padding: 28px 0 40px;
}
.medicine-and-pharmacy .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.medicine-and-pharmacy .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.medicine-and-pharmacy .heroActions {
gap: 10px;
}
.medicine-and-pharmacy .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.medicine-and-pharmacy .breadcrumb {
margin-bottom: 21px;
}
.medicine-and-pharmacy .hero .eyebrow {
font-size: 11px;
}
.medicine-and-pharmacy .heroVisual {
max-width: 480px;
}
.medicine-and-pharmacy .heroPills {
row-gap: 9px;
}
.medicine-and-pharmacy .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.medicine-and-pharmacy .heroPills span+span {
padding-left: 7px;
}
.medicine-and-pharmacy .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.medicine-and-pharmacy .logoBox:last-child {
grid-column: 1/-1;
}
.medicine-and-pharmacy .clientBand {
padding: 25px 0;
}
.medicine-and-pharmacy .copy h2 {
font-size: 33px;
}
.medicine-and-pharmacy .panelBody {
padding: 16px;
}
.medicine-and-pharmacy .panelHead {
padding: 15px;
}
.medicine-and-pharmacy .panelHead>strong {
font-size: 12px;
}
.medicine-and-pharmacy .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.medicine-and-pharmacy .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.medicine-and-pharmacy .docHeader strong {
font-size: 18px;
}
.medicine-and-pharmacy .docHeader small {
font-size: 10px;
}
.medicine-and-pharmacy .rowCopy strong {
font-size: 11px;
}
.medicine-and-pharmacy .rowCopy small {
font-size: 10px;
}
.medicine-and-pharmacy .miniStats {
gap: 7px;
}
.medicine-and-pharmacy .miniStats strong {
font-size: 21px;
}
.medicine-and-pharmacy .miniStats span {
font-size: 9px;
}
.medicine-and-pharmacy .miniStats>div {
padding: 10px 8px;
}
.medicine-and-pharmacy .plantFacts {
gap: 8px;
}
.medicine-and-pharmacy .plantFacts>div {
padding: 10px;
}
.medicine-and-pharmacy .plantFacts strong {
font-size: 11px;
}
.medicine-and-pharmacy .contextNote {
font-size: 10px;
gap: 8px;
}
.medicine-and-pharmacy .utilityReadout {
padding: 12px;
gap: 10px;
}
.medicine-and-pharmacy .utilityReadout span {
font-size: 8px;
}
.medicine-and-pharmacy .utilityReadout strong {
font-size: 24px;
}
.medicine-and-pharmacy .utilityReadout .utilityScope {
font-size: 14px;
}
.medicine-and-pharmacy .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.medicine-and-pharmacy .comparisonTable {
font-size: 11px;
}
.medicine-and-pharmacy .comparisonTable th,
.medicine-and-pharmacy .comparisonTable td {
padding: 13px 9px;
}
.medicine-and-pharmacy .contextSection {
padding: 0 0 22px;
}
.medicine-and-pharmacy .valueCtaSection {
padding: 25px 0;
}
.medicine-and-pharmacy .inlineCtaActions {
flex-direction: column;
}
.medicine-and-pharmacy .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.medicine-and-pharmacy .mobileWorkspace {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .phoneDevice {
width: 222px;
}
.medicine-and-pharmacy .phoneDevice .rowIcon {
display: grid;
}
.medicine-and-pharmacy .mobileSide {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.medicine-and-pharmacy .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0 0;
}
.medicine-and-pharmacy .sideTile p {
margin: 0;
}
.medicine-and-pharmacy .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.medicine-and-pharmacy .dataRow {
gap: 8px;
}
.medicine-and-pharmacy .statusPill {
font-size: 7px;
padding: 5px;
}
.medicine-and-pharmacy .miniStats strong {
font-size: 19px;
}
.medicine-and-pharmacy .heroActions {
flex-direction: column;
align-items: stretch;
}
.medicine-and-pharmacy .heroActions .button {
width: 100%;
}
.medicine-and-pharmacy .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.medicine-and-pharmacy .aiFlow {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.medicine-and-pharmacy .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.medicine-and-pharmacy .aiStep strong {
margin: 0;
font-size: 15px;
}
.medicine-and-pharmacy .aiStep span {
font-size: 13px;
}
.medicine-and-pharmacy .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.medicine-and-pharmacy {
background: var(--white);
}
.medicine-and-pharmacy img {
display: block;
max-width: 100%;
}
.medicine-and-pharmacy h1,
.medicine-and-pharmacy h2,
.medicine-and-pharmacy h3 {
text-wrap: balance;
}
.medicine-and-pharmacy .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.medicine-and-pharmacy .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.medicine-and-pharmacy .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.medicine-and-pharmacy .navlinks {
gap: 20px;
font-size: 12px;
}
.medicine-and-pharmacy .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.medicine-and-pharmacy .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.medicine-and-pharmacy .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.medicine-and-pharmacy .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.medicine-and-pharmacy .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.medicine-and-pharmacy .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.medicine-and-pharmacy .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.medicine-and-pharmacy .industryIntro {
padding: 78px 0 66px;
}
.medicine-and-pharmacy .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.medicine-and-pharmacy .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.medicine-and-pharmacy .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.medicine-and-pharmacy .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.medicine-and-pharmacy .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.medicine-and-pharmacy .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.medicine-and-pharmacy .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.medicine-and-pharmacy .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.medicine-and-pharmacy .industryPriority>.icon2 {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.medicine-and-pharmacy .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.medicine-and-pharmacy .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.medicine-and-pharmacy .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.medicine-and-pharmacy .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.medicine-and-pharmacy .industryPriority:hover {
border-color: var(--brand-dark);
}
.medicine-and-pharmacy .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.medicine-and-pharmacy .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.medicine-and-pharmacy .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.medicine-and-pharmacy .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.medicine-and-pharmacy .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.medicine-and-pharmacy .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.medicine-and-pharmacy .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.medicine-and-pharmacy .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.medicine-and-pharmacy .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.medicine-and-pharmacy .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.medicine-and-pharmacy .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.medicine-and-pharmacy .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.medicine-and-pharmacy .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.medicine-and-pharmacy .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.medicine-and-pharmacy .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.medicine-and-pharmacy .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.medicine-and-pharmacy .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.medicine-and-pharmacy .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.medicine-and-pharmacy .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.medicine-and-pharmacy .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.medicine-and-pharmacy .vedaMessage.assistant>small {
color: var(--yellow);
}
.medicine-and-pharmacy .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.medicine-and-pharmacy .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.medicine-and-pharmacy .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.medicine-and-pharmacy .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.medicine-and-pharmacy .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.medicine-and-pharmacy .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.medicine-and-pharmacy .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.medicine-and-pharmacy .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.medicine-and-pharmacy .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.medicine-and-pharmacy .manufacturingSpotlight {
padding: 73px 0;
}
.medicine-and-pharmacy .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .rfidSpotlight {
background: #fff;
}
.medicine-and-pharmacy .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.medicine-and-pharmacy .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.medicine-and-pharmacy .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.medicine-and-pharmacy .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.medicine-and-pharmacy .spotlightHead h2 span {
color: var(--brand-dark);
}
.medicine-and-pharmacy .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.medicine-and-pharmacy .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.medicine-and-pharmacy .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.medicine-and-pharmacy .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.medicine-and-pharmacy .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.medicine-and-pharmacy .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.medicine-and-pharmacy .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.medicine-and-pharmacy .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.medicine-and-pharmacy .featureTab:hover {
border-color: var(--brand-dark);
}
.medicine-and-pharmacy .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.medicine-and-pharmacy .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.medicine-and-pharmacy .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.medicine-and-pharmacy .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.medicine-and-pharmacy .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.medicine-and-pharmacy .featurePanel {
display: none;
}
.medicine-and-pharmacy .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.medicine-and-pharmacy .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.medicine-and-pharmacy .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.medicine-and-pharmacy .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.medicine-and-pharmacy .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.medicine-and-pharmacy .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.medicine-and-pharmacy .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.medicine-and-pharmacy .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.medicine-and-pharmacy .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.medicine-and-pharmacy .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.medicine-and-pharmacy .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.medicine-and-pharmacy .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.medicine-and-pharmacy .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.medicine-and-pharmacy .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.medicine-and-pharmacy .decisionSpotlight .textCta {
color: var(--yellow);
}
.medicine-and-pharmacy .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.medicine-and-pharmacy .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .mediaTitle>.icon2 {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.medicine-and-pharmacy .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.medicine-and-pharmacy .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.medicine-and-pharmacy .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.medicine-and-pharmacy .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.medicine-and-pharmacy .signalFlow>.icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.medicine-and-pharmacy .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.medicine-and-pharmacy .rfidImageSurface {
background: #172029;
padding: 5px;
}
.medicine-and-pharmacy .rfidImageSurface img {
width: 100%;
height: auto;
}
.medicine-and-pharmacy .rfidMedia figcaption {
padding-top: 13px;
}
.medicine-and-pharmacy .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.medicine-and-pharmacy .aiReviewBody {
padding: 18px;
}
.medicine-and-pharmacy .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.medicine-and-pharmacy .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.medicine-and-pharmacy .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.medicine-and-pharmacy .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.medicine-and-pharmacy .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.medicine-and-pharmacy .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.medicine-and-pharmacy .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.medicine-and-pharmacy .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.medicine-and-pharmacy .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.medicine-and-pharmacy .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.medicine-and-pharmacy .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.medicine-and-pharmacy .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.medicine-and-pharmacy .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.medicine-and-pharmacy .aiReviewAction strong {
display: block;
font-size: 11px;
}
.medicine-and-pharmacy .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.medicine-and-pharmacy .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.medicine-and-pharmacy .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.medicine-and-pharmacy .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.medicine-and-pharmacy .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.medicine-and-pharmacy .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.medicine-and-pharmacy .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.medicine-and-pharmacy .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.medicine-and-pharmacy .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.medicine-and-pharmacy .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.medicine-and-pharmacy .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.medicine-and-pharmacy .workflowDetails summary::-webkit-details-marker {
display: none;
}
.medicine-and-pharmacy .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.medicine-and-pharmacy .workflowDetails[open] summary::after {
content: "−";
}
.medicine-and-pharmacy .workflowDetails .featureList,
.medicine-and-pharmacy .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.medicine-and-pharmacy .workflowDetails .featureItem {
font-size: 11px;
}
.medicine-and-pharmacy .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.medicine-and-pharmacy .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.medicine-and-pharmacy #pharmacy-connected-tools {
background: #fff;
}
.medicine-and-pharmacy #pharmacy-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.medicine-and-pharmacy .featureTab,
.medicine-and-pharmacy .industryPriority,
.medicine-and-pharmacy summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.medicine-and-pharmacy .industryIntroHead {
gap: 30px;
}
.medicine-and-pharmacy .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.medicine-and-pharmacy .featureStage {
gap: 26px;
padding: 26px;
}
.medicine-and-pharmacy .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.medicine-and-pharmacy .factoryWorkflow {
padding: 22px;
}
.medicine-and-pharmacy .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.medicine-and-pharmacy .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medicine-and-pharmacy .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.medicine-and-pharmacy .industryPriorityGrid {
gap: 14px;
}
.medicine-and-pharmacy .industryPriority {
padding: 22px 19px;
}
.medicine-and-pharmacy .industryPriority h3 {
font-size: 21px;
}
.medicine-and-pharmacy .industryPriority p {
font-size: 12px;
}
.medicine-and-pharmacy .priorityLink {
font-size: 10px;
}
.medicine-and-pharmacy .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.medicine-and-pharmacy .vedaIndustryCopy h2 {
font-size: 39px;
}
.medicine-and-pharmacy .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.medicine-and-pharmacy .vedaUseCases>div {
display: block;
}
.medicine-and-pharmacy .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.medicine-and-pharmacy .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.medicine-and-pharmacy .featureTabs {
gap: 8px;
}
.medicine-and-pharmacy .featureTab {
min-height: 108px;
}
.medicine-and-pharmacy .featureStage,
.medicine-and-pharmacy .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.medicine-and-pharmacy .rfidSpotlight .spotlightMedia,
.medicine-and-pharmacy .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.medicine-and-pharmacy .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.medicine-and-pharmacy .featurePanel {
min-height: 0;
}
.medicine-and-pharmacy .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.medicine-and-pharmacy .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.medicine-and-pharmacy .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.medicine-and-pharmacy .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.medicine-and-pharmacy .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.medicine-and-pharmacy .clientBand {
padding: 22px 0;
}
.medicine-and-pharmacy .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.medicine-and-pharmacy .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.medicine-and-pharmacy .clientBand .logoBox.wide {
font-size: 10px;
}
.medicine-and-pharmacy .clientBand .logoBox:last-child {
grid-column: auto;
}
.medicine-and-pharmacy .industryIntro {
padding: 53px 0;
}
.medicine-and-pharmacy .industryIntroHead h2 {
font-size: 32px;
}
.medicine-and-pharmacy .industryIntroHead>p {
font-size: 14px;
}
.medicine-and-pharmacy .industryPriorityGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .industryPriority {
padding: 23px;
}
.medicine-and-pharmacy .industryPriority h3 {
font-size: 24px;
}
.medicine-and-pharmacy .industryPriority>.icon2 {
margin: 5px 0 15px;
}
.medicine-and-pharmacy .industryPriority p {
font-size: 13px;
}
.medicine-and-pharmacy .priorityLink {
font-size: 11px;
}
.medicine-and-pharmacy .vedaIndustry {
padding: 0 0 52px;
}
.medicine-and-pharmacy .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.medicine-and-pharmacy .vedaIndustryCopy h2 {
font-size: 32px;
}
.medicine-and-pharmacy .vedaIndustryCopy>p {
font-size: 14px;
}
.medicine-and-pharmacy .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.medicine-and-pharmacy .vedaUseCases>div {
display: flex;
}
.medicine-and-pharmacy .vedaConversationHead {
padding: 16px 13px;
}
.medicine-and-pharmacy .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.medicine-and-pharmacy .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.medicine-and-pharmacy .vedaMessage.user {
margin-left: 25px;
}
.medicine-and-pharmacy .vedaMessage.assistant {
margin-right: 14px;
}
.medicine-and-pharmacy .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.medicine-and-pharmacy .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.medicine-and-pharmacy .manufacturingSpotlight {
padding: 54px 0;
}
.medicine-and-pharmacy .spotlightHead h2 {
font-size: 32px;
}
.medicine-and-pharmacy .spotlightHead>p {
font-size: 14px;
}
.medicine-and-pharmacy .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.medicine-and-pharmacy .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.medicine-and-pharmacy .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.medicine-and-pharmacy .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.medicine-and-pharmacy .featurePanel h3 {
font-size: 24px;
}
.medicine-and-pharmacy .featurePanel>p {
font-size: 13px;
}
.medicine-and-pharmacy .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.medicine-and-pharmacy .spotlightChecks>li {
font-size: 12px;
}
.medicine-and-pharmacy .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.medicine-and-pharmacy .spotlightActions .button {
width: 100%;
}
.medicine-and-pharmacy .spotlightScope {
font-size: 10px;
}
.medicine-and-pharmacy .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.medicine-and-pharmacy .mediaTitle strong {
font-size: 11px;
}
.medicine-and-pharmacy .mediaTitle div>span {
font-size: 8px;
}
.medicine-and-pharmacy .mediaTitle>.icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.medicine-and-pharmacy .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.medicine-and-pharmacy .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.medicine-and-pharmacy .rfidMedia figcaption {
padding-top: 12px;
}
.medicine-and-pharmacy .aiReviewBody {
padding: 13px;
}
.medicine-and-pharmacy .aiIssue {
padding: 13px;
}
.medicine-and-pharmacy .aiIssue strong {
font-size: 14px;
}
.medicine-and-pharmacy .aiEvidence {
gap: 6px;
}
.medicine-and-pharmacy .aiEvidence>div {
padding: 10px 7px;
}
.medicine-and-pharmacy .aiEvidence strong {
font-size: 9px;
}
.medicine-and-pharmacy .aiEvidence span {
font-size: 7px;
}
.medicine-and-pharmacy .exampleLabel {
font-size: 6px;
}
.medicine-and-pharmacy .factoryWorkflows {
padding: 55px 0;
}
.medicine-and-pharmacy .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.medicine-and-pharmacy .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.medicine-and-pharmacy .industryRibbonGrid {
gap: 12px;
}
.medicine-and-pharmacy .industryRibbonGrid>div {
font-size: 10px;
}
.medicine-and-pharmacy .spotlightHead h2 {
font-size: 29px;
}
.medicine-and-pharmacy .featureStage {
padding: 19px 13px;
}
.medicine-and-pharmacy .mediaTitle>.icon2 {
display: none;
}
.medicine-and-pharmacy .exampleLabel {
display: none;
}
.medicine-and-pharmacy .vedaBrand {
font-size: 27px;
}
}
@media print {
.medicine-and-pharmacy .featureTabs {
display: none;
}
.medicine-and-pharmacy .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.medicine-and-pharmacy .featureStage {
display: block;
}
.medicine-and-pharmacy .featurePanel {
color: #000;
}
}
.medicine-and-pharmacy #pharmacy-sales-features-1:checked~.featureTabs label[for="pharmacy-sales-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-sales-features-1:focus-visible~.featureTabs label[for="pharmacy-sales-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-sales-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-2:checked~.featureTabs label[for="pharmacy-sales-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-sales-features-2:focus-visible~.featureTabs label[for="pharmacy-sales-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-sales-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-3:checked~.featureTabs label[for="pharmacy-sales-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-sales-features-3:focus-visible~.featureTabs label[for="pharmacy-sales-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-sales-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-4:checked~.featureTabs label[for="pharmacy-sales-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-sales-features-4:focus-visible~.featureTabs label[for="pharmacy-sales-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-sales-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-5:checked~.featureTabs label[for="pharmacy-sales-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-sales-features-5:focus-visible~.featureTabs label[for="pharmacy-sales-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-sales-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-1:checked~.featureTabs label[for="pharmacy-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-rfid-features-1:focus-visible~.featureTabs label[for="pharmacy-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-2:checked~.featureTabs label[for="pharmacy-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-rfid-features-2:focus-visible~.featureTabs label[for="pharmacy-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-3:checked~.featureTabs label[for="pharmacy-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-rfid-features-3:focus-visible~.featureTabs label[for="pharmacy-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-4:checked~.featureTabs label[for="pharmacy-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-rfid-features-4:focus-visible~.featureTabs label[for="pharmacy-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-5:checked~.featureTabs label[for="pharmacy-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-rfid-features-5:focus-visible~.featureTabs label[for="pharmacy-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-1:checked~.featureTabs label[for="pharmacy-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-1:focus-visible~.featureTabs label[for="pharmacy-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-2:checked~.featureTabs label[for="pharmacy-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-2:focus-visible~.featureTabs label[for="pharmacy-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-3:checked~.featureTabs label[for="pharmacy-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-3:focus-visible~.featureTabs label[for="pharmacy-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-4:checked~.featureTabs label[for="pharmacy-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-4:focus-visible~.featureTabs label[for="pharmacy-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-5:checked~.featureTabs label[for="pharmacy-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-5:focus-visible~.featureTabs label[for="pharmacy-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.medicine-and-pharmacy .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .featureMediaPanels {
min-width: 0;
}
.medicine-and-pharmacy .featureMediaPanels .miniChart {
height: 178px;
}
.medicine-and-pharmacy .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.medicine-and-pharmacy .featureMediaPanels .windowTop strong,
.medicine-and-pharmacy .featureMediaPanels .windowTop small {
display: block;
}
.medicine-and-pharmacy .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.medicine-and-pharmacy .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medicine-and-pharmacy .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.medicine-and-pharmacy .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.medicine-and-pharmacy .featureMediaPanels .windowBody>*,
.medicine-and-pharmacy .featureMediaPanels .spectrumGrid>*,
.medicine-and-pharmacy .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes {
min-height: 258px;
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.medicine-and-pharmacy .featureMediaPanels .mapPin {
box-shadow: none;
}
.medicine-and-pharmacy .pin2 {
top: 88px;
right: 88px;
}
.medicine-and-pharmacy .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.medicine-and-pharmacy .featureMediaPanels .mediaShell {
padding: 10px;
}
.medicine-and-pharmacy .featureMediaPanels .windowBody {
padding: 10px;
}
.medicine-and-pharmacy .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .featureMediaPanels .alertBadge {
justify-self: start;
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.medicine-and-pharmacy .featureMediaPanels .graphNodes .node.n1,
.medicine-and-pharmacy .featureMediaPanels .graphNodes .node.n2,
.medicine-and-pharmacy .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.medicine-and-pharmacy .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.medicine-and-pharmacy .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.medicine-and-pharmacy .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.medicine-and-pharmacy .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.medicine-and-pharmacy .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.medicine-and-pharmacy .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.medicine-and-pharmacy .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.medicine-and-pharmacy .freshGraphic * {
box-sizing: border-box;
}
.medicine-and-pharmacy .rfPanel,
.medicine-and-pharmacy .aiInsightCard,
.medicine-and-pharmacy .forecastVisualCard,
.medicine-and-pharmacy .forecastSuggestion,
.medicine-and-pharmacy .knowledgeTile,
.medicine-and-pharmacy .chatConversation,
.medicine-and-pharmacy .trainingSummary,
.medicine-and-pharmacy .moduleCard,
.medicine-and-pharmacy .qualityHeatCard,
.medicine-and-pharmacy .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.medicine-and-pharmacy .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.medicine-and-pharmacy .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.medicine-and-pharmacy .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.medicine-and-pharmacy .statusPill,
.medicine-and-pharmacy .cardTag,
.medicine-and-pharmacy .forecastSuggestion b,
.medicine-and-pharmacy .moduleCard b,
.medicine-and-pharmacy .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.medicine-and-pharmacy .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.medicine-and-pharmacy .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.medicine-and-pharmacy .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.medicine-and-pharmacy .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.medicine-and-pharmacy .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.medicine-and-pharmacy .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.medicine-and-pharmacy .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.medicine-and-pharmacy .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.medicine-and-pharmacy .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.medicine-and-pharmacy .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.medicine-and-pharmacy .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.medicine-and-pharmacy .dot.good {
background: #298EEC;
}
.medicine-and-pharmacy .dot.warn {
background: #F4A62A;
}
.medicine-and-pharmacy .dot.bad {
background: #EB6B53;
}
.medicine-and-pharmacy .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.medicine-and-pharmacy .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.medicine-and-pharmacy .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.medicine-and-pharmacy .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.medicine-and-pharmacy .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.medicine-and-pharmacy .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.medicine-and-pharmacy .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.medicine-and-pharmacy .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.medicine-and-pharmacy .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.medicine-and-pharmacy .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.medicine-and-pharmacy .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.medicine-and-pharmacy .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.medicine-and-pharmacy .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.medicine-and-pharmacy .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.medicine-and-pharmacy .moveRow b {
color: #298EEC;
font-size: 9px;
}
.medicine-and-pharmacy .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.medicine-and-pharmacy .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.medicine-and-pharmacy .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.medicine-and-pharmacy .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.medicine-and-pharmacy .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.medicine-and-pharmacy .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.medicine-and-pharmacy .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.medicine-and-pharmacy .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.medicine-and-pharmacy .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.medicine-and-pharmacy .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.medicine-and-pharmacy .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.medicine-and-pharmacy .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.medicine-and-pharmacy .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.medicine-and-pharmacy .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.medicine-and-pharmacy .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.medicine-and-pharmacy .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.medicine-and-pharmacy .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.medicine-and-pharmacy .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.medicine-and-pharmacy .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.medicine-and-pharmacy .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.medicine-and-pharmacy .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.medicine-and-pharmacy .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.medicine-and-pharmacy .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.medicine-and-pharmacy .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.medicine-and-pharmacy .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.medicine-and-pharmacy .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.medicine-and-pharmacy .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.medicine-and-pharmacy .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.medicine-and-pharmacy .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.medicine-and-pharmacy .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.medicine-and-pharmacy .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.medicine-and-pharmacy .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.medicine-and-pharmacy .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.medicine-and-pharmacy .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.medicine-and-pharmacy .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.medicine-and-pharmacy .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.medicine-and-pharmacy .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.medicine-and-pharmacy .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.medicine-and-pharmacy .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.medicine-and-pharmacy .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.medicine-and-pharmacy .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.medicine-and-pharmacy .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.medicine-and-pharmacy .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.medicine-and-pharmacy .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.medicine-and-pharmacy .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.medicine-and-pharmacy .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.medicine-and-pharmacy .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.medicine-and-pharmacy .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.medicine-and-pharmacy .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.medicine-and-pharmacy .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.medicine-and-pharmacy .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.medicine-and-pharmacy .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.medicine-and-pharmacy .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.medicine-and-pharmacy .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.medicine-and-pharmacy .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.medicine-and-pharmacy .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.medicine-and-pharmacy .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.medicine-and-pharmacy .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.medicine-and-pharmacy .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.medicine-and-pharmacy .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.medicine-and-pharmacy .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.medicine-and-pharmacy .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.medicine-and-pharmacy .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.medicine-and-pharmacy .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.medicine-and-pharmacy .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.medicine-and-pharmacy .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.medicine-and-pharmacy .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.medicine-and-pharmacy .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.medicine-and-pharmacy .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.medicine-and-pharmacy .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.medicine-and-pharmacy .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.medicine-and-pharmacy .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.medicine-and-pharmacy .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.medicine-and-pharmacy .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.medicine-and-pharmacy .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.medicine-and-pharmacy .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.medicine-and-pharmacy .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.medicine-and-pharmacy .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.medicine-and-pharmacy .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.medicine-and-pharmacy .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.medicine-and-pharmacy .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.medicine-and-pharmacy .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.medicine-and-pharmacy .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.medicine-and-pharmacy .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.medicine-and-pharmacy .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.medicine-and-pharmacy .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.medicine-and-pharmacy .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.medicine-and-pharmacy .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.medicine-and-pharmacy .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.medicine-and-pharmacy .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.medicine-and-pharmacy .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.medicine-and-pharmacy .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.medicine-and-pharmacy .chartLegend .sw.blue {
background: #298EEC;
}
.medicine-and-pharmacy .chartLegend .sw.amber {
background: #F4A62A;
}
.medicine-and-pharmacy .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.medicine-and-pharmacy .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.medicine-and-pharmacy .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.medicine-and-pharmacy .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.medicine-and-pharmacy .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.medicine-and-pharmacy .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.medicine-and-pharmacy .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.medicine-and-pharmacy .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.medicine-and-pharmacy .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.medicine-and-pharmacy .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.medicine-and-pharmacy .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.medicine-and-pharmacy .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.medicine-and-pharmacy .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.medicine-and-pharmacy .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.medicine-and-pharmacy .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.medicine-and-pharmacy .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.medicine-and-pharmacy .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.medicine-and-pharmacy .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.medicine-and-pharmacy .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.medicine-and-pharmacy .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.medicine-and-pharmacy .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.medicine-and-pharmacy .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.medicine-and-pharmacy .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.medicine-and-pharmacy .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.medicine-and-pharmacy .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.medicine-and-pharmacy .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.medicine-and-pharmacy .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.medicine-and-pharmacy .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.medicine-and-pharmacy .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.medicine-and-pharmacy .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.medicine-and-pharmacy .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.medicine-and-pharmacy .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.medicine-and-pharmacy .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.medicine-and-pharmacy .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.medicine-and-pharmacy .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.medicine-and-pharmacy .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.medicine-and-pharmacy .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.medicine-and-pharmacy .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.medicine-and-pharmacy .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.medicine-and-pharmacy .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.medicine-and-pharmacy .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.medicine-and-pharmacy .freshGraphic {
height: auto;
min-height: 420px;
}
.medicine-and-pharmacy .rfTrackLayout,
.medicine-and-pharmacy .rfFlowLayout,
.medicine-and-pharmacy .rfAlertGrid,
.medicine-and-pharmacy .rfCycleLayout,
.medicine-and-pharmacy .rfSitesLayout,
.medicine-and-pharmacy .aiRootLayout,
.medicine-and-pharmacy .aiForecastLayout,
.medicine-and-pharmacy .aiChatLayout,
.medicine-and-pharmacy .aiTrainingLayout,
.medicine-and-pharmacy .aiQualityLayout,
.medicine-and-pharmacy .trainingModuleGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.medicine-and-pharmacy .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.medicine-and-pharmacy .rfAlertGrid {
grid-template-columns: 1fr;
}
.medicine-and-pharmacy .qualityHeatGrid span {
min-height: 40px;
}
.medicine-and-pharmacy .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.medicine-and-pharmacy .aiLink {
display: none;
}
}
.medicine-and-pharmacy .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.medicine-and-pharmacy .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.medicine-and-pharmacy .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.medicine-and-pharmacy .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.medicine-and-pharmacy .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.medicine-and-pharmacy .mfgHeroBreadcrumb a {
color: inherit;
}
.medicine-and-pharmacy .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.medicine-and-pharmacy .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.medicine-and-pharmacy .mfgHero h1 {
color: #fff;
}
.medicine-and-pharmacy .mfgHero h1>span {
display: block;
}
.medicine-and-pharmacy .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.medicine-and-pharmacy .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.medicine-and-pharmacy .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.medicine-and-pharmacy .mfgHeroActions .outline:hover {
background: #172029;
}
.medicine-and-pharmacy .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.medicine-and-pharmacy .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.medicine-and-pharmacy .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.medicine-and-pharmacy .mfgHeroContent {
min-height: 610px;
}
.medicine-and-pharmacy .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.medicine-and-pharmacy .mfgHeroLead {
font-size: 16px;
}
.medicine-and-pharmacy .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.medicine-and-pharmacy .mfgHero {
display: flex;
flex-direction: column;
}
.medicine-and-pharmacy .mfgHeroContent {
order: 0;
min-height: 0;
}
.medicine-and-pharmacy .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.medicine-and-pharmacy .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.medicine-and-pharmacy .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.medicine-and-pharmacy .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.medicine-and-pharmacy .mfgHeroCopy {
padding: 25px 0 20px;
}
.medicine-and-pharmacy .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.medicine-and-pharmacy .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.medicine-and-pharmacy .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.medicine-and-pharmacy .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.medicine-and-pharmacy .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.medicine-and-pharmacy .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.medicine-and-pharmacy .mfgHeroScene {
height: 280px;
}
}
@media print {
.medicine-and-pharmacy .mfgHero {
background: #fff;
color: #000;
}
.medicine-and-pharmacy .mfgHeroScene,
.medicine-and-pharmacy .mfgHeroActions {
display: none;
}
.medicine-and-pharmacy .mfgHeroContent {
min-height: 0;
}
.medicine-and-pharmacy .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
.medicine-and-pharmacy #pharmacy-rfid .featureStage,
.medicine-and-pharmacy #pharmacy-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.medicine-and-pharmacy .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.medicine-and-pharmacy .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.medicine-and-pharmacy .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.medicine-and-pharmacy .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.medicine-and-pharmacy .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.medicine-and-pharmacy .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.medicine-and-pharmacy .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.medicine-and-pharmacy .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.medicine-and-pharmacy .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.medicine-and-pharmacy .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.medicine-and-pharmacy .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.medicine-and-pharmacy .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.medicine-and-pharmacy .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.medicine-and-pharmacy .mfgGallery .rfPanel {
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.medicine-and-pharmacy .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.medicine-and-pharmacy .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.medicine-and-pharmacy .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .shelf span {
font-size: 11px;
}
.medicine-and-pharmacy .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.medicine-and-pharmacy .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.medicine-and-pharmacy .mfgGallery .rfKpiGrid {
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.medicine-and-pharmacy .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.medicine-and-pharmacy .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.medicine-and-pharmacy .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.medicine-and-pharmacy .mfgGallery .rfScanCard span {
font-size: 9px;
}
.medicine-and-pharmacy .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.medicine-and-pharmacy .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.medicine-and-pharmacy .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.medicine-and-pharmacy .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.medicine-and-pharmacy .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.medicine-and-pharmacy .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.medicine-and-pharmacy .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.medicine-and-pharmacy .mfgGallery .flowArrow {
display: none;
}
.medicine-and-pharmacy .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .railItem {
padding: 9px 7px;
}
.medicine-and-pharmacy .mfgGallery .railItem b {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.medicine-and-pharmacy .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.medicine-and-pharmacy .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.medicine-and-pharmacy .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.medicine-and-pharmacy .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .reorderCard strong {
font-size: 13px;
}
.medicine-and-pharmacy .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.medicine-and-pharmacy .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.medicine-and-pharmacy .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.medicine-and-pharmacy .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.medicine-and-pharmacy .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.medicine-and-pharmacy .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.medicine-and-pharmacy .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.medicine-and-pharmacy .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.medicine-and-pharmacy .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.medicine-and-pharmacy .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.medicine-and-pharmacy .mfgGallery .varianceCard {
padding: 12px;
}
.medicine-and-pharmacy .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.medicine-and-pharmacy .mfgGallery .varianceCard small {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.medicine-and-pharmacy .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.medicine-and-pharmacy .mfgGallery .deviceTop {
font-size: 11px;
}
.medicine-and-pharmacy .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.medicine-and-pharmacy .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.medicine-and-pharmacy .mfgGallery .deviceMetric {
padding: 9px;
}
.medicine-and-pharmacy .mfgGallery .deviceMetric span {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .deviceMetric b {
font-size: 12px;
}
.medicine-and-pharmacy .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.medicine-and-pharmacy .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.medicine-and-pharmacy .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.medicine-and-pharmacy .mfgGallery .siteNode.north {
top: 6px;
}
.medicine-and-pharmacy .mfgGallery .siteNode.south {
bottom: 6px;
}
.medicine-and-pharmacy .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.medicine-and-pharmacy .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.medicine-and-pharmacy .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.medicine-and-pharmacy .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.medicine-and-pharmacy .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.medicine-and-pharmacy .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.medicine-and-pharmacy .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.medicine-and-pharmacy .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.medicine-and-pharmacy .mfgGallery .siteSummary strong {
font-size: 12px;
}
.medicine-and-pharmacy .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.medicine-and-pharmacy .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.medicine-and-pharmacy .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.medicine-and-pharmacy .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.medicine-and-pharmacy .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.medicine-and-pharmacy .mfgGallery .insightMeta {
gap: 6px;
}
.medicine-and-pharmacy .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.medicine-and-pharmacy .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .chartHeader span {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .chartHeader b {
font-size: 11px;
}
.medicine-and-pharmacy .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.medicine-and-pharmacy .mfgGallery .chartLegend {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.medicine-and-pharmacy .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.medicine-and-pharmacy .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.medicine-and-pharmacy .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.medicine-and-pharmacy .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.medicine-and-pharmacy .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.medicine-and-pharmacy .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.medicine-and-pharmacy .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.medicine-and-pharmacy .mfgGallery .progressCenter strong {
font-size: 25px;
}
.medicine-and-pharmacy .mfgGallery .trainingStatList {
gap: 9px;
}
.medicine-and-pharmacy .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.medicine-and-pharmacy .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.medicine-and-pharmacy .mfgGallery .trainingStatList span {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.medicine-and-pharmacy .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.medicine-and-pharmacy .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.medicine-and-pharmacy .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.medicine-and-pharmacy .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.medicine-and-pharmacy .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.medicine-and-pharmacy .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.medicine-and-pharmacy .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.medicine-and-pharmacy .mfgGallery .qualityCaption span {
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.medicine-and-pharmacy .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.medicine-and-pharmacy .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.medicine-and-pharmacy .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.medicine-and-pharmacy .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.medicine-and-pharmacy #pharmacy-rfid .featureStage,
.medicine-and-pharmacy #pharmacy-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.medicine-and-pharmacy #pharmacy-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.medicine-and-pharmacy .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.medicine-and-pharmacy #pharmacy-rfid .featureStage,
.medicine-and-pharmacy #pharmacy-ai-decisions .featureStage {
padding: 16px;
}
.medicine-and-pharmacy .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.medicine-and-pharmacy .mfgGallery .freshWindow {
height: auto;
}
.medicine-and-pharmacy .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.medicine-and-pharmacy .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .freshTop strong {
font-size: 13px;
}
.medicine-and-pharmacy .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.medicine-and-pharmacy .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.medicine-and-pharmacy .mfgGallery .rfShelfPanel {
padding: 10px;
}
.medicine-and-pharmacy .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.medicine-and-pharmacy .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.medicine-and-pharmacy .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.medicine-and-pharmacy .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.medicine-and-pharmacy .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.medicine-and-pharmacy .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.medicine-and-pharmacy .mfgGallery .flowNum {
grid-row: 1/3;
}
.medicine-and-pharmacy .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.medicine-and-pharmacy .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.medicine-and-pharmacy .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medicine-and-pharmacy .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.medicine-and-pharmacy .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.medicine-and-pharmacy .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.medicine-and-pharmacy .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.medicine-and-pharmacy .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.medicine-and-pharmacy .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.medicine-and-pharmacy .mfgGallery .rfActionStrip {
height: auto;
}
.medicine-and-pharmacy .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .countPanel {
gap: 14px;
}
.medicine-and-pharmacy .mfgGallery .handheldPanel {
padding: 15px;
}
.medicine-and-pharmacy .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.medicine-and-pharmacy .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.medicine-and-pharmacy .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.medicine-and-pharmacy .mfgGallery .siteNode.east {
right: 3%;
}
.medicine-and-pharmacy .mfgGallery .siteNode.west {
left: 3%;
}
.medicine-and-pharmacy .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.medicine-and-pharmacy .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.medicine-and-pharmacy .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.medicine-and-pharmacy .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.medicine-and-pharmacy .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.medicine-and-pharmacy .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.medicine-and-pharmacy .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.medicine-and-pharmacy .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.medicine-and-pharmacy .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.medicine-and-pharmacy .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.medicine-and-pharmacy .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.medicine-and-pharmacy .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.medicine-and-pharmacy .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.medicine-and-pharmacy .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.medicine-and-pharmacy .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.medicine-and-pharmacy .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.medicine-and-pharmacy .mfgGallery .moduleCard {
padding: 10px;
}
.medicine-and-pharmacy .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.medicine-and-pharmacy .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.medicine-and-pharmacy .mfgGallery .qualityAction strong {
font-size: 12px;
}
.medicine-and-pharmacy .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.medicine-and-pharmacy .mfgGallery .shelf i::after {
bottom: 0;
}
.medicine-and-pharmacy .pharmacyVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.medicine-and-pharmacy .pharmacyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.medicine-and-pharmacy .pharmacyVisualGallery>.pharmacyGraphic {
display: none;
}
.medicine-and-pharmacy #pharmacy-sales .featureStage,
.medicine-and-pharmacy #pharmacy-rfid .featureStage,
.medicine-and-pharmacy #pharmacy-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.medicine-and-pharmacy #pharmacy-rfid .pharmacyVisualGallery {
grid-column: 1;
grid-row: 1;
}
.medicine-and-pharmacy #pharmacy-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.medicine-and-pharmacy .factoryWorkflow {
display: flex;
flex-direction: column;
}
.medicine-and-pharmacy .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.medicine-and-pharmacy .factoryWorkflow>p {
margin-bottom: 22px;
}
.medicine-and-pharmacy .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.medicine-and-pharmacy #pharmacy-sales .featureStage,
.medicine-and-pharmacy #pharmacy-rfid .featureStage,
.medicine-and-pharmacy #pharmacy-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.medicine-and-pharmacy #pharmacy-rfid .pharmacyVisualGallery,
.medicine-and-pharmacy #pharmacy-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.medicine-and-pharmacy .mfgHeroScene {
height: 290px;
}
.medicine-and-pharmacy #pharmacy-sales .featureStage,
.medicine-and-pharmacy #pharmacy-rfid .featureStage,
.medicine-and-pharmacy #pharmacy-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.medicine-and-pharmacy .pharmacyVisualGallery {
width: 100%;
}
}
@media print {
.medicine-and-pharmacy .pharmacyVisualGallery>.pharmacyGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.medicine-and-pharmacy #pharmacy-sales-features-1:checked~.featureStage .pharmacyVisualGallery> :nth-child(1) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-2:checked~.featureStage .pharmacyVisualGallery> :nth-child(2) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-3:checked~.featureStage .pharmacyVisualGallery> :nth-child(3) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-4:checked~.featureStage .pharmacyVisualGallery> :nth-child(4) {
display: block;
}
.medicine-and-pharmacy #pharmacy-sales-features-5:checked~.featureStage .pharmacyVisualGallery> :nth-child(5) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-1:checked~.featureStage .pharmacyVisualGallery> :nth-child(1) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-2:checked~.featureStage .pharmacyVisualGallery> :nth-child(2) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-3:checked~.featureStage .pharmacyVisualGallery> :nth-child(3) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-4:checked~.featureStage .pharmacyVisualGallery> :nth-child(4) {
display: block;
}
.medicine-and-pharmacy #pharmacy-rfid-features-5:checked~.featureStage .pharmacyVisualGallery> :nth-child(5) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-1:checked~.featureStage .pharmacyVisualGallery> :nth-child(1) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-2:checked~.featureStage .pharmacyVisualGallery> :nth-child(2) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-3:checked~.featureStage .pharmacyVisualGallery> :nth-child(3) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-4:checked~.featureStage .pharmacyVisualGallery> :nth-child(4) {
display: block;
}
.medicine-and-pharmacy #pharmacy-ai-decisions-features-5:checked~.featureStage .pharmacyVisualGallery> :nth-child(5) {
display: block;
}
.medicine-and-pharmacy .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.medicine-and-pharmacy .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.medicine-and-pharmacy .pharmacyIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.medicine-and-pharmacy .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 70% 50%;
}
.medicine-and-pharmacy .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 78% 50%;
}
.medicine-and-pharmacy .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 72% 50%;
}
.medicine-and-pharmacy .pharmacyIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyVisualGallery {
min-height: 0;
}
.medicine-and-pharmacy .pharmacyIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 90% 50%;
}
}
.medicine-and-pharmacy .pharmacyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyVisualGallery {
min-height: 0;
}
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 72% 50%;
}
.medicine-and-pharmacy .pharmacyIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.medicine-and-pharmacy .pharmacyGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 80% 50%;
}
}
.medicine-and-pharmacy .mfgHeroContent {
background: transparent;
}
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 74% 50%;
}
.medicine-and-pharmacy .pharmacyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 83% 50%;
}
}
.medicine-and-pharmacy .mfgHeroContent {
background: transparent;
}
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 74% 50%;
}
.medicine-and-pharmacy .pharmacyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 86% 50%;
}
}
.medicine-and-pharmacy .mfgHeroContent {
background: transparent;
}
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 76% 50%;
}
.medicine-and-pharmacy .pharmacyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 87% 50%;
}
}
.medicine-and-pharmacy .mfgHeroContent {
background: transparent;
}
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 76% 50%;
}
.medicine-and-pharmacy .pharmacyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.medicine-and-pharmacy #pharmacy-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 88% 50%;
}
}
.medicine-and-pharmacy .mfgHeroContent {
background: transparent;
}
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 77% 50%;
}
.medicine-and-pharmacy .pharmacyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.medicine-and-pharmacy #pharmacy-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 85% 50%;
}
} .medicine-and-pharmacy .mfgHeroContent {
background: transparent;
}
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 78% 50%;
}
.medicine-and-pharmacy .pharmacyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.medicine-and-pharmacy .pharmacyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.medicine-and-pharmacy #pharmacy-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
.medicine-and-pharmacy .mfgHeroScene img {
object-position: 80% 50%;
}
}  #dreamz-banking .industryIntroHead.compact,
#dreamz-banking .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-banking .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-banking .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-banking .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-banking .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-banking .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-banking .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-banking .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-banking .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-banking .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-banking .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-banking .windowDots {
display: flex;
gap: 5px;
}
#dreamz-banking .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-banking .windowBody {
padding: 16px;
}
#dreamz-banking .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-banking .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-banking .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-banking .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-banking .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-banking .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-banking .chartGridLine.l1 {
top: 34px;
}
#dreamz-banking .chartGridLine.l2 {
top: 65px;
}
#dreamz-banking .chartGridLine.l3 {
top: 96px;
}
#dreamz-banking .chartGridLine.l4 {
top: 127px;
}
#dreamz-banking .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-banking .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-banking .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-banking .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-banking .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-banking .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-banking .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-banking .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-banking .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-banking .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-banking .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-banking .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-banking .noteCard p,
#dreamz-banking .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-banking .alertStack {
display: grid;
gap: 10px;
}
#dreamz-banking .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-banking .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-banking .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-banking .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-banking .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-banking .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-banking .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-banking .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-banking .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-banking .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-banking .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-banking .scheduleBoard h4,
#dreamz-banking .todoBoard h4,
#dreamz-banking .siteBoard h4,
#dreamz-banking .chatPanel h4,
#dreamz-banking .lessonPanel h4,
#dreamz-banking .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-banking .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-banking .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-banking .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-banking .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-banking .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-banking .taskRow:last-child {
border-bottom: 0;
}
#dreamz-banking .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-banking .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-banking .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-banking .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-banking .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-banking .inventoryTable th,
#dreamz-banking .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-banking .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-banking .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-banking .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-banking .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-banking .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-banking .phoneBody {
padding: 12px;
}
#dreamz-banking .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-banking .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-banking .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-banking .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-banking .progressList {
display: grid;
gap: 10px;
}
#dreamz-banking .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-banking .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-banking .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-banking .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-banking .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-banking .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-banking .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-banking .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-banking .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-banking .pin1 {
top: 56px;
left: 58px;
}
#dreamz-banking .pin2 {
top: 88px;
right: 88px;
}
#dreamz-banking .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-banking .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-banking .siteRow:last-child {
border-bottom: 0;
}
#dreamz-banking .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-banking .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-banking .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-banking .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-banking .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-banking .graphNodes:before,
#dreamz-banking .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-banking .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-banking .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-banking .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-banking .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-banking .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-banking .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-banking .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-banking .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-banking .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-banking .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-banking .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-banking .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-banking .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-banking .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-banking .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-banking .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-banking .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-banking .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-banking .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-banking .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-banking .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-banking .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-banking .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-banking .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-banking .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-banking .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-banking .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-banking .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-banking .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-banking .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-banking .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-banking .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-banking .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-banking #banking-sales-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-banking #banking-sales-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-banking #banking-sales-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-banking #banking-sales-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-banking #banking-sales-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-banking #banking-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-banking #banking-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-banking #banking-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-banking #banking-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-banking #banking-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-banking #banking-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-banking #banking-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-banking #banking-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-banking #banking-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-banking #banking-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-banking #banking-sales-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-banking #banking-sales-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-banking #banking-sales-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-banking #banking-sales-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-banking #banking-sales-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-banking #banking-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-banking #banking-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-banking #banking-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-banking #banking-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-banking #banking-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-banking #banking-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-banking #banking-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-banking #banking-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-banking #banking-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-banking #banking-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-banking .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-banking .featureMediaPanels {
min-height: 0;
}
#dreamz-banking .inventorySplit,
#dreamz-banking .forecastGrid,
#dreamz-banking .siteGrid,
#dreamz-banking .spectrumGrid,
#dreamz-banking .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-banking .metricGrid,
#dreamz-banking .lessonCards,
#dreamz-banking .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-banking .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-banking {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-banking * {
box-sizing: border-box;
}
#dreamz-banking {
scroll-behavior: smooth;
}
#dreamz-banking {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-banking a {
color: inherit;
text-decoration: none;
}
#dreamz-banking .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-banking .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-banking .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-banking .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-banking .brand span {
color: var(--brand);
}
#dreamz-banking .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-banking .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-banking .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-banking .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-banking .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-banking .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-banking .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-banking .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-banking h1,
#dreamz-banking h2,
#dreamz-banking h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
#dreamz-banking h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
#dreamz-banking h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
}
#dreamz-banking h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-banking .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-banking .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-banking .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-banking .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-banking .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-banking .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-banking .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-banking .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-banking .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-banking .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-banking .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-banking .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-banking .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-banking .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-banking .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-banking .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-banking .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-banking .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-banking .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-banking .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-banking .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-banking .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-banking .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-banking .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-banking .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-banking .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-banking .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-banking .sectionHead { margin-bottom: 44px;
}
#dreamz-banking .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-banking .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-banking .aiJourney h2 {
color: #fff;
}
#dreamz-banking .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-banking .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-banking .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-banking .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-banking .aiStep:last-child::after {
display: none;
}
#dreamz-banking .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-banking .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-banking .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-banking .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-banking .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-banking .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-banking .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-banking .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-banking .capability {
background: #fff;
}
#dreamz-banking .capability.alt {
background: var(--sky-2);
}
#dreamz-banking .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-banking .twoCol.reverse .visual {
order: 2;
}
#dreamz-banking .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-banking .visual .placeholder {
min-height: 355px;
}
#dreamz-banking .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-banking .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-banking details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-banking details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-banking details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-banking details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-banking details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-banking details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-banking .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-banking .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-banking .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-banking .darkSection h2,
#dreamz-banking .darkSection h3 {
color: #fff;
}
#dreamz-banking .darkSection .sectionHead p,
#dreamz-banking .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-banking .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-banking .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-banking .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-banking .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-banking .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-banking .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-banking .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-banking .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-banking .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-banking .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-banking .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-banking .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-banking .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-banking .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-banking .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-banking .benefitBand h2 {
color: #fff;
}
#dreamz-banking .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-banking .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-banking .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-banking .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-banking .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-banking .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-banking .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-banking .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-banking .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-banking .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-banking .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-banking .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-banking .faq {
max-width: 900px;
}
#dreamz-banking .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-banking .ctaPanel h2 {
color: #fff;
}
#dreamz-banking .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-banking .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-banking .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-banking .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-banking .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-banking .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-banking .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-banking .inlineCta.dark h3 {
color: #fff;
}
#dreamz-banking .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-banking .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-banking .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-banking .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-banking .button.yellow:hover {
background: #FFD84D;
}
#dreamz-banking .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-banking .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-banking .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-banking .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-banking footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-banking .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-banking .heroGrid,
#dreamz-banking .twoCol,
#dreamz-banking .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-banking .twoCol.reverse .visual {
order: initial;
}
#dreamz-banking .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-banking .ratingGrid,
#dreamz-banking .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-banking .ratingLead,
#dreamz-banking .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-banking .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-banking .aiStep:nth-child(3)::after,
#dreamz-banking .aiStep:last-child::after {
display: none;
}
#dreamz-banking .outcomeGrid,
#dreamz-banking .challengeGrid,
#dreamz-banking .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-banking .cards,
#dreamz-banking .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-banking .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-banking .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-banking .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-banking .hero {
padding: 58px 0 52px;
}
#dreamz-banking h1 {
font-size: 44px;
}
#dreamz-banking .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-banking .aiStep::after {
display: none;
}
#dreamz-banking .logoRow,
#dreamz-banking .ratingGrid,
#dreamz-banking .awardGrid,
#dreamz-banking .outcomeGrid,
#dreamz-banking .challengeGrid,
#dreamz-banking .benefitGrid,
#dreamz-banking .cards,
#dreamz-banking .proofCards,
#dreamz-banking .integrationGrid,
#dreamz-banking .featureList {
grid-template-columns: 1fr;
}
#dreamz-banking .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-banking .ctaPanel {
padding: 34px 24px;
}
#dreamz-banking .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-banking .inlineCtaActions {
width: 100%;
}
#dreamz-banking .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-banking {
--muted: #526A7C;
--shadow: none;
}
#dreamz-banking {
background: var(--sky-2);
}
#dreamz-banking p {
margin-bottom: 0;
}
#dreamz-banking [id] {
scroll-margin-top: 94px;
}
#dreamz-banking svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-banking .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: none;
}
#dreamz-banking h1,
#dreamz-banking h2,
#dreamz-banking h3 {
color: var(--black);
}
#dreamz-banking .darkSection h2,
#dreamz-banking .darkSection h3,
#dreamz-banking .aiJourney h2,
#dreamz-banking .benefitBand h2,
#dreamz-banking .ctaPanel h2,
#dreamz-banking .inlineCta.dark h3 {
color: #fff;
}
#dreamz-banking .wrap>*,
#dreamz-banking .heroGrid>*,
#dreamz-banking .twoCol>*,
#dreamz-banking .ctaPanel>* {
min-width: 0;
}
#dreamz-banking .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-banking .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-banking .skipLink:focus {
transform: none;
}
#dreamz-banking a:focus-visible,
#dreamz-banking summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-banking .darkSection a:focus-visible,
#dreamz-banking .darkSection summary:focus-visible,
#dreamz-banking .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-banking .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-banking .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-banking .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-banking .brandName>span {
color: var(--brand-dark);
}
#dreamz-banking .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-banking .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-banking .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-banking .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-banking .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
#dreamz-banking .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-banking .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-banking .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-banking .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-banking .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-banking .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-banking .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-banking .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-banking .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-banking .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-banking .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-banking .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-banking .clientBand {
padding: 27px 0;
}
#dreamz-banking .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-banking .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-banking .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-banking .logoBox.wide {
font-size: 12px;
}
#dreamz-banking .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-banking h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-banking .sectionHead {
margin-bottom: 36px;
}
#dreamz-banking .eyebrow {
line-height: 1.5;
}
#dreamz-banking .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-banking .aiStep {
min-height: 162px;
}
#dreamz-banking .aiStep strong {
line-height: 1.35;
}
#dreamz-banking .aiStep span {
line-height: 1.65;
}
#dreamz-banking .aiCallout {
margin-top: 24px;
}
#dreamz-banking .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-banking .outcome>.icon {
color: var(--navy);
}
#dreamz-banking .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-banking .awardItem>.icon {
color: var(--navy);
}
#dreamz-banking .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-banking .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-banking .twoCol.reverse .visual {
order: -1;
}
#dreamz-banking .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-banking .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-banking .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-banking .featureList {
gap: 13px 18px;
}
#dreamz-banking .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-banking .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-banking .check .icon {
width: 14px;
height: 14px;
}
#dreamz-banking details.capabilityMore {
margin-bottom: 0;
}
#dreamz-banking .capabilityMore summary {
min-height: 34px;
}
#dreamz-banking .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-banking .textCta {
font-size: 14px;
}
#dreamz-banking .visual {
min-width: 0;
}
#dreamz-banking .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-banking .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-banking .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-banking .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-banking .panelBody {
padding: 20px;
}
#dreamz-banking .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-banking .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-banking .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-banking .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-banking .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-banking .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-banking .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-banking .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-banking .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-banking .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-banking .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-banking .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-banking .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-banking .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-banking .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-banking .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-banking .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-banking .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-banking .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-banking .dataRow:last-child {
border-bottom: 0;
}
#dreamz-banking .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-banking .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-banking .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-banking .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-banking .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-banking .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-banking .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-banking .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-banking .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-banking .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-banking .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-banking .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-banking .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-banking .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-banking .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-banking .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-banking .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-banking .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-banking .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-banking .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-banking .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-banking .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-banking .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-banking .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-banking .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-banking .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-banking .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-banking .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-banking .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-banking .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-banking .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-banking .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-banking .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-banking .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-banking .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-banking .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-banking .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-banking .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-banking .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-banking .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-banking .promptList {
display: grid;
gap: 10px;
}
#dreamz-banking .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-banking .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-banking .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-banking .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-banking .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-banking .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-banking .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-banking .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-banking .quoteTable th,
#dreamz-banking .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-banking .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-banking .quoteTable td:first-child {
width: 64%;
}
#dreamz-banking .quoteTable th:last-child,
#dreamz-banking .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-banking .quoteTable strong {
font-size: 11px;
}
#dreamz-banking .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-banking .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-banking .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-banking .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-banking .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-banking .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-banking .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-banking .orderJourney {
margin: 20px 0;
}
#dreamz-banking .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-banking .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-banking .journeyRow:last-child:before {
display: none;
}
#dreamz-banking .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-banking .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-banking .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-banking .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-banking .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-banking .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-banking .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-banking .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-banking .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-banking .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-banking .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-banking .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-banking .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-banking .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-banking .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-banking .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-banking .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-banking .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-banking .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-banking .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-banking .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-banking .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-banking .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-banking .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-banking .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-banking .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-banking .customerTimeline strong {
color: #fff;
}
#dreamz-banking .customerTimeline small {
color: #BFBFBF;
}
#dreamz-banking .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-banking .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-banking .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-banking .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-banking .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-banking .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-banking .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-banking .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-banking .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-banking .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-banking .chartTitle strong {
font-size: 12px;
}
#dreamz-banking .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-banking .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-banking .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-banking .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-banking .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-banking .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-banking .inlineCtaActions {
max-width: 42%;
}
#dreamz-banking .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-banking .inlineCta h3 {
line-height: 1.35;
}
#dreamz-banking .card {
box-shadow: none;
}
#dreamz-banking .cardIcon {
box-shadow: none;
}
#dreamz-banking .card h3 {
font-size: 22px;
}
#dreamz-banking .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-banking .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-banking .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-banking .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-banking .ratingBand {
padding: 34px 0;
}
#dreamz-banking .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-banking .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-banking .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-banking .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-banking .ratingItem:first-child {
border-left: 0;
}
#dreamz-banking .proofCard h3 {
font-size: 23px;
}
#dreamz-banking .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-banking .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-banking .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-banking .integration {
min-height: 98px;
}
#dreamz-banking .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-banking .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-banking .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-banking .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-banking .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-banking .finalActions {
display: grid;
gap: 11px;
}
#dreamz-banking .finalActions .button {
white-space: nowrap;
}
#dreamz-banking .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-banking .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-banking .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-banking .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-banking .heroGrid {
gap: 30px;
}
#dreamz-banking .twoCol {
gap: 32px;
}
#dreamz-banking .panelBody {
padding: 16px;
}
#dreamz-banking .panelHead {
padding: 16px;
}
#dreamz-banking .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-banking .pipelineColumns {
gap: 7px;
}
#dreamz-banking .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-banking .heroGrid,
#dreamz-banking .twoCol,
#dreamz-banking .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .heroGrid {
gap: 36px;
}
#dreamz-banking .hero h1 {
max-width: 730px;
}
#dreamz-banking .hero .lead {
max-width: 690px;
}
#dreamz-banking .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-banking .twoCol {
gap: 34px;
}
#dreamz-banking .twoCol.reverse .visual {
order: initial;
}
#dreamz-banking .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-banking .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-banking .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-banking .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-banking .ratingSectionGrid {
gap: 20px;
}
#dreamz-banking .inlineCta {
align-items: flex-start;
}
#dreamz-banking .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-banking .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-banking .card {
padding: 22px;
}
#dreamz-banking .card h3 {
font-size: 21px;
}
#dreamz-banking .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-banking .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-banking .cards,
#dreamz-banking .proofCards {
grid-template-columns: 1fr;
}
#dreamz-banking .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-banking .inlineCta {
flex-direction: column;
}
#dreamz-banking .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-banking .inlineCtaActions .button {
flex: 1;
}
#dreamz-banking .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-banking .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-banking .wrap {
width: calc(100% - 32px);
}
#dreamz-banking [id] {
scroll-margin-top: 82px;
}
#dreamz-banking .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-banking .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-banking .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-banking .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
#dreamz-banking .hero {
padding: 51px 0 48px;
}
#dreamz-banking .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-banking .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-banking .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-banking .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-banking .hero .microcopy {
font-size: 11px;
}
#dreamz-banking .heroPills span {
font-size: 9px;
}
#dreamz-banking .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-banking .sectionHead p {
font-size: 16px;
}
#dreamz-banking .copy h2 {
font-size: 34px;
}
#dreamz-banking .copy p {
font-size: 15px;
}
#dreamz-banking .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-banking .logoBox {
min-height: 53px;
}
#dreamz-banking .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-banking .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-banking .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-banking .aiStep strong {
font-size: 13px;
}
#dreamz-banking .aiStep span {
font-size: 11px;
}
#dreamz-banking .aiStep::after {
display: none;
}
#dreamz-banking .outcomeGrid,
#dreamz-banking .challengeGrid,
#dreamz-banking .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .outcome {
padding: 24px;
}
#dreamz-banking .outcome strong {
font-size: 22px;
}
#dreamz-banking .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-banking .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-banking .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-banking .featureList,
#dreamz-banking .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .featureItem {
font-size: 13px;
}
#dreamz-banking .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-banking .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-banking .panelHead {
padding: 15px 13px;
}
#dreamz-banking .panelHead>strong {
font-size: 12px;
}
#dreamz-banking .panelBody {
padding: 14px;
}
#dreamz-banking .productPanel {
border-radius: 16px;
}
#dreamz-banking .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-banking .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-banking .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-banking .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-banking .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-banking .deal strong {
font-size: 10px;
}
#dreamz-banking .deal small {
font-size: 9px;
}
#dreamz-banking .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-banking .mobileWorkspace {
gap: 12px;
}
#dreamz-banking .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-banking .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-banking .sideTile {
padding: 10px;
}
#dreamz-banking .sideTile strong {
font-size: 10px;
}
#dreamz-banking .sideTile p {
font-size: 9px;
}
#dreamz-banking .mobileHeader strong {
font-size: 15px;
}
#dreamz-banking .mobileAccount strong {
font-size: 10px;
}
#dreamz-banking .mobileAccount small {
font-size: 7px;
}
#dreamz-banking .phoneDevice .rowIcon {
display: none;
}
#dreamz-banking .quoteTable th,
#dreamz-banking .quoteTable td {
padding: 12px 4px;
}
#dreamz-banking .quoteTable strong {
font-size: 10px;
}
#dreamz-banking .quoteTable small {
font-size: 8px;
}
#dreamz-banking .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-banking .docHeader strong {
font-size: 17px;
}
#dreamz-banking .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-banking .miniFlow span {
padding: 6px;
}
#dreamz-banking .rowCopy strong {
font-size: 10px;
}
#dreamz-banking .rowCopy small {
font-size: 8px;
}
#dreamz-banking .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-banking .miniStats {
gap: 7px;
}
#dreamz-banking .miniStats>div {
padding: 9px;
}
#dreamz-banking .miniStats strong {
font-size: 18px;
}
#dreamz-banking .miniStats span {
font-size: 8px;
}
#dreamz-banking .collectionStats>div {
padding: 13px;
}
#dreamz-banking .collectionStats strong {
font-size: 24px;
}
#dreamz-banking .customerHeader strong {
font-size: 17px;
}
#dreamz-banking .customerFacts>div {
padding: 10px;
}
#dreamz-banking .customerFacts strong {
font-size: 12px;
}
#dreamz-banking .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-banking .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-banking .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-banking .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-banking .integration small {
font-size: 9px;
}
#dreamz-banking .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-banking .ctaPanel p {
font-size: 15px;
}
#dreamz-banking .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-banking .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-banking .contextSection {
padding: 0 0 24px;
}
#dreamz-banking .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-banking .wrap {
width: calc(100% - 24px);
}
#dreamz-banking .brand {
font-size: 18px;
}
#dreamz-banking .brandMark {
width: 25px;
height: 25px;
}
#dreamz-banking .nav>.button {
font-size: 10px;
padding: 0 10px;
}
#dreamz-banking .hero h1 {
font-size: 38px;
}
#dreamz-banking .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-banking .copy h2 {
font-size: 31px;
}
#dreamz-banking .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-banking .phoneDevice {
width: 210px;
}
#dreamz-banking .phoneDevice .rowIcon {
display: grid;
}
#dreamz-banking .mobileSide {
gap: 8px;
}
#dreamz-banking .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-banking .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-banking .sideTile p {
margin: 0;
}
#dreamz-banking .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-banking .collectionStats strong {
font-size: 21px;
}
#dreamz-banking .inventoryIntro strong {
font-size: 14px;
}
#dreamz-banking .dataRow {
gap: 7px;
}
#dreamz-banking .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-banking .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-banking {
scroll-behavior: auto;
}
#dreamz-banking *,
#dreamz-banking *::before,
#dreamz-banking *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-banking {
background: var(--sky-2);
}
#dreamz-banking .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-banking .hero .eyebrow {
max-width: 100%;
}
#dreamz-banking .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-banking .ganttIllustration,
#dreamz-banking .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-banking .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-banking .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-banking .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-banking .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-banking .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-banking .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-banking .comparisonTable th,
#dreamz-banking .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-banking .comparisonTable th:first-child {
width: 23%;
}
#dreamz-banking .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-banking .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-banking .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-banking .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-banking .card,
#dreamz-banking .proofCard,
#dreamz-banking .productPanel,
#dreamz-banking .outcome,
#dreamz-banking .benefit {
box-shadow: none;
}
#dreamz-banking .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-banking .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-banking .hero .eyebrow {
font-size: 10px;
}
#dreamz-banking .comparisonTable {
font-size: 11px;
}
#dreamz-banking .comparisonTable th,
#dreamz-banking .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-banking .comparisonTable th:first-child {
width: 24%;
}
#dreamz-banking .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-banking .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-banking .hero h1 {
font-size: 38px;
}
}
#dreamz-banking .scheduleIllustration,
#dreamz-banking .analyticsIllustration,
#dreamz-banking .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-banking .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-banking .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-banking .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-banking .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-banking .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-banking .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-banking .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-banking .darkSection .textCta {
color: var(--yellow);
}
#dreamz-banking .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-banking .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-banking .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-banking .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-banking .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-banking .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-banking .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-banking .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-banking .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-banking .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-banking .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-banking .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-banking .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-banking .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-banking .phoneDevice {
max-width: 100%;
}
#dreamz-banking .heroPills {
line-height: 1.55;
}
#dreamz-banking .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-banking .plantFacts {
gap: 7px;
}
#dreamz-banking .plantFacts>div {
padding: 9px;
}
#dreamz-banking .plantFacts strong {
font-size: 11px;
}
#dreamz-banking .scanSummary {
padding: 12px;
}
#dreamz-banking .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-banking .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-banking .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-banking .phoneDevice .rowIcon {
display: grid;
}
#dreamz-banking .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-banking .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-banking .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-banking .sideTile strong {
font-size: 12px;
}
#dreamz-banking .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-banking .topbar,
#dreamz-banking .heroActions,
#dreamz-banking .finalActions,
#dreamz-banking .contextSection,
#dreamz-banking .valueCtaSection {
display: none;
}
#dreamz-banking section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-banking .hero {
padding-top: 20px;
}
}
#dreamz-banking {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-banking h1,
#dreamz-banking h2,
#dreamz-banking h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
#dreamz-banking p {
margin: 0;
}
#dreamz-banking main {
display: block;
}
#dreamz-banking .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-banking .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-banking .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-banking .heroAccent {
color: var(--black);
}
#dreamz-banking .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-banking .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-banking .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-banking .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-banking .microcopy {
margin-top: 14px;
}
#dreamz-banking .heroPills {
margin-top: 13px;
}
#dreamz-banking .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-banking .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-banking .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-banking .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-banking .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-banking .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-banking .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-banking .clientBand {
padding: 24px 0;
}
#dreamz-banking .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-banking .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-banking .logoBox.wide {
font-size: 15px;
}
#dreamz-banking .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-banking .sectionHead p {
margin: 17px 0 0;
}
#dreamz-banking .copy p {
margin: 16px 0 0;
}
#dreamz-banking .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-banking .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-banking .aiJourney {
background: var(--black);
}
#dreamz-banking .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-banking .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-banking .productPanel {
border-radius: 18px;
}
#dreamz-banking .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-banking .panelHead>strong {
font-size: 13px;
}
#dreamz-banking .sampleTag {
font-size: 9px;
}
#dreamz-banking .panelBody {
padding: 21px;
}
#dreamz-banking .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-banking .docHeader {
padding-bottom: 16px;
}
#dreamz-banking .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-banking .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-banking .smallLabel {
font-size: 9px;
}
#dreamz-banking .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-banking .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-banking .dataRow {
padding: 14px 0;
}
#dreamz-banking .statusPill {
font-size: 8px;
}
#dreamz-banking .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-banking .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-banking .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-banking .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-banking .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-banking .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-banking .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-banking .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-banking .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-banking .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-banking .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-banking .hierarchy strong {
color: var(--navy);
}
#dreamz-banking .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-banking .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-banking .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-banking .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-banking .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-banking .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-banking .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-banking .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-banking .mobileAccount small {
font-size: 9px;
}
#dreamz-banking .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-banking .sideTile strong {
font-size: 12px;
}
#dreamz-banking .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-banking .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-banking .mobileAction {
font-size: 9px;
}
#dreamz-banking .journeyRow strong {
font-size: 13px;
}
#dreamz-banking .journeyRow small {
font-size: 11px;
}
#dreamz-banking .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-banking .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-banking .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-banking .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-banking .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-banking .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-banking .utilityReadout small {
font-size: 12px;
}
#dreamz-banking .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-banking .darkSection {
background: var(--black);
}
#dreamz-banking .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-banking .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-banking .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-banking .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-banking .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-banking .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-banking .assistantHead small {
font-size: 11px;
}
#dreamz-banking .assistantNote {
font-size: 11px;
}
#dreamz-banking .reportTags span {
font-size: 10px;
}
#dreamz-banking .card p {
margin: 12px 0 0;
}
#dreamz-banking .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-banking .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-banking .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-banking .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-banking .cards>.card p {
padding-bottom: 22px;
}
#dreamz-banking .benefitBand {
background: var(--black);
}
#dreamz-banking .benefit {
background: var(--black-soft);
}
#dreamz-banking .inlineCta h3 {
font-size: 20px;
}
#dreamz-banking .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-banking .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-banking .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-banking .valueCtaSection {
padding: 32px 0;
}
#dreamz-banking .proofCard p {
margin-top: 15px;
}
#dreamz-banking .proofCard h3 {
font-size: 23px;
}
#dreamz-banking .integrationNote {
margin-top: 23px;
}
#dreamz-banking .ctaPanel {
background: var(--black);
}
#dreamz-banking .ctaPanel p {
margin-top: 16px;
}
#dreamz-banking .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-banking .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-banking a:hover {
text-decoration: none;
}
#dreamz-banking .textCta:hover {
color: var(--navy);
}
#dreamz-banking .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-banking .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-banking .hero h1 {
font-size: 49px;
}
#dreamz-banking .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-banking .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-banking .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-banking .hero h1 {
font-size: 58px;
}
#dreamz-banking .heroVisual {
max-width: 548px;
}
#dreamz-banking .hero .lead {
max-width: 700px;
}
#dreamz-banking .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-banking .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-banking .logoBox:last-child {
grid-column: auto;
}
#dreamz-banking .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-banking .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-banking .inlineCtaActions .button {
flex: 1;
}
#dreamz-banking .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-banking .hero {
padding: 28px 0 40px;
}
#dreamz-banking .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-banking .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-banking .heroActions {
gap: 10px;
}
#dreamz-banking .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-banking .breadcrumb {
margin-bottom: 21px;
}
#dreamz-banking .hero .eyebrow {
font-size: 11px;
}
#dreamz-banking .heroVisual {
max-width: 480px;
}
#dreamz-banking .heroPills {
row-gap: 9px;
}
#dreamz-banking .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-banking .heroPills span+span {
padding-left: 7px;
}
#dreamz-banking .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-banking .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-banking .clientBand {
padding: 25px 0;
}
#dreamz-banking .copy h2 {
font-size: 33px;
}
#dreamz-banking .panelBody {
padding: 16px;
}
#dreamz-banking .panelHead {
padding: 15px;
}
#dreamz-banking .panelHead>strong {
font-size: 12px;
}
#dreamz-banking .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-banking .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-banking .docHeader strong {
font-size: 18px;
}
#dreamz-banking .docHeader small {
font-size: 10px;
}
#dreamz-banking .rowCopy strong {
font-size: 11px;
}
#dreamz-banking .rowCopy small {
font-size: 10px;
}
#dreamz-banking .miniStats {
gap: 7px;
}
#dreamz-banking .miniStats strong {
font-size: 21px;
}
#dreamz-banking .miniStats span {
font-size: 9px;
}
#dreamz-banking .miniStats>div {
padding: 10px 8px;
}
#dreamz-banking .plantFacts {
gap: 8px;
}
#dreamz-banking .plantFacts>div {
padding: 10px;
}
#dreamz-banking .plantFacts strong {
font-size: 11px;
}
#dreamz-banking .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-banking .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-banking .utilityReadout span {
font-size: 8px;
}
#dreamz-banking .utilityReadout strong {
font-size: 24px;
}
#dreamz-banking .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-banking .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-banking .comparisonTable {
font-size: 11px;
}
#dreamz-banking .comparisonTable th,
#dreamz-banking .comparisonTable td {
padding: 13px 9px;
}
#dreamz-banking .contextSection {
padding: 0 0 22px;
}
#dreamz-banking .valueCtaSection {
padding: 25px 0;
}
#dreamz-banking .inlineCtaActions {
flex-direction: column;
}
#dreamz-banking .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-banking .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-banking .phoneDevice {
width: 222px;
}
#dreamz-banking .phoneDevice .rowIcon {
display: grid;
}
#dreamz-banking .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-banking .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-banking .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-banking .sideTile p {
margin: 0;
}
#dreamz-banking .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-banking .dataRow {
gap: 8px;
}
#dreamz-banking .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-banking .miniStats strong {
font-size: 19px;
}
#dreamz-banking .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-banking .heroActions .button {
width: 100%;
}
#dreamz-banking .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-banking .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-banking .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-banking .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-banking .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-banking .aiStep span {
font-size: 13px;
}
#dreamz-banking .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-banking {
background: var(--white);
}
#dreamz-banking img {
display: block;
max-width: 100%;
}
#dreamz-banking h1,
#dreamz-banking h2,
#dreamz-banking h3 {
text-wrap: balance;
}
#dreamz-banking .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-banking .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-banking .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-banking .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-banking .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-banking .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-banking .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-banking .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-banking .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-banking .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-banking .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-banking .industryIntro {
padding: 78px 0 66px;
}
#dreamz-banking .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-banking .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-banking .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-banking .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-banking .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-banking .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-banking .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-banking .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-banking .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-banking .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-banking .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-banking .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-banking .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-banking .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-banking .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-banking .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-banking .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-banking .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-banking .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-banking .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-banking .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-banking .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-banking .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-banking .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-banking .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-banking .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-banking .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-banking .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-banking .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-banking .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-banking .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-banking .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-banking .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-banking .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-banking .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-banking .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-banking .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-banking .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-banking .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-banking .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-banking .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-banking .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-banking .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-banking .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-banking .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-banking .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-banking .rfidSpotlight {
background: #fff;
}
#dreamz-banking .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-banking .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-banking .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-banking .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-banking .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-banking .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-banking .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-banking .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-banking .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-banking .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-banking .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-banking .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-banking .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-banking .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-banking .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-banking .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-banking .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-banking .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-banking .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-banking .featurePanel {
display: none;
}
#dreamz-banking .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-banking .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-banking .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-banking .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-banking .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-banking .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-banking .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-banking .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-banking .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-banking .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-banking .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-banking .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-banking .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-banking .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-banking .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-banking .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-banking .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-banking .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-banking .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-banking .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-banking .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-banking .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-banking .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-banking .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-banking .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-banking .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-banking .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-banking .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-banking .aiReviewBody {
padding: 18px;
}
#dreamz-banking .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-banking .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-banking .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-banking .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-banking .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-banking .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-banking .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-banking .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-banking .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-banking .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-banking .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-banking .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-banking .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-banking .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-banking .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-banking .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-banking .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-banking .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-banking .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-banking .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-banking .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-banking .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-banking .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-banking .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-banking .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-banking .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-banking .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-banking .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-banking .workflowDetails .featureList,
#dreamz-banking .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-banking .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-banking .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-banking .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-banking #banking-connected-tools {
background: #fff;
}
#dreamz-banking #banking-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-banking .featureTab,
#dreamz-banking .industryPriority,
#dreamz-banking summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-banking .industryIntroHead {
gap: 30px;
}
#dreamz-banking .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-banking .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-banking .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-banking .factoryWorkflow {
padding: 22px;
}
#dreamz-banking .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-banking .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-banking .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-banking .industryPriorityGrid {
gap: 14px;
}
#dreamz-banking .industryPriority {
padding: 22px 19px;
}
#dreamz-banking .industryPriority h3 {
font-size: 21px;
}
#dreamz-banking .industryPriority p {
font-size: 12px;
}
#dreamz-banking .priorityLink {
font-size: 10px;
}
#dreamz-banking .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-banking .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-banking .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-banking .vedaUseCases>div {
display: block;
}
#dreamz-banking .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-banking .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-banking .featureTabs {
gap: 8px;
}
#dreamz-banking .featureTab {
min-height: 108px;
}
#dreamz-banking .featureStage,
#dreamz-banking .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-banking .rfidSpotlight .spotlightMedia,
#dreamz-banking .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-banking .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-banking .featurePanel {
min-height: 0;
}
#dreamz-banking .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-banking .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-banking .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-banking .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-banking .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-banking .clientBand {
padding: 22px 0;
}
#dreamz-banking .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-banking .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-banking .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-banking .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-banking .industryIntro {
padding: 53px 0;
}
#dreamz-banking .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-banking .industryIntroHead>p {
font-size: 14px;
}
#dreamz-banking .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .industryPriority {
padding: 23px;
}
#dreamz-banking .industryPriority h3 {
font-size: 24px;
}
#dreamz-banking .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-banking .industryPriority p {
font-size: 13px;
}
#dreamz-banking .priorityLink {
font-size: 11px;
}
#dreamz-banking .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-banking .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-banking .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-banking .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-banking .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-banking .vedaUseCases>div {
display: flex;
}
#dreamz-banking .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-banking .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-banking .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-banking .vedaMessage.user {
margin-left: 25px;
}
#dreamz-banking .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-banking .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-banking .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-banking .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-banking .spotlightHead h2 {
font-size: 32px;
}
#dreamz-banking .spotlightHead>p {
font-size: 14px;
}
#dreamz-banking .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-banking .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-banking .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-banking .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-banking .featurePanel h3 {
font-size: 24px;
}
#dreamz-banking .featurePanel>p {
font-size: 13px;
}
#dreamz-banking .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-banking .spotlightChecks>li {
font-size: 12px;
}
#dreamz-banking .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-banking .spotlightActions .button {
width: 100%;
}
#dreamz-banking .spotlightScope {
font-size: 10px;
}
#dreamz-banking .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-banking .mediaTitle strong {
font-size: 11px;
}
#dreamz-banking .mediaTitle div>span {
font-size: 8px;
}
#dreamz-banking .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-banking .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-banking .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-banking .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-banking .aiReviewBody {
padding: 13px;
}
#dreamz-banking .aiIssue {
padding: 13px;
}
#dreamz-banking .aiIssue strong {
font-size: 14px;
}
#dreamz-banking .aiEvidence {
gap: 6px;
}
#dreamz-banking .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-banking .aiEvidence strong {
font-size: 9px;
}
#dreamz-banking .aiEvidence span {
font-size: 7px;
}
#dreamz-banking .exampleLabel {
font-size: 6px;
}
#dreamz-banking .factoryWorkflows {
padding: 55px 0;
}
#dreamz-banking .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-banking .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-banking .industryRibbonGrid {
gap: 12px;
}
#dreamz-banking .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-banking .spotlightHead h2 {
font-size: 29px;
}
#dreamz-banking .featureStage {
padding: 19px 13px;
}
#dreamz-banking .mediaTitle>.icon {
display: none;
}
#dreamz-banking .exampleLabel {
display: none;
}
#dreamz-banking .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-banking .featureTabs {
display: none;
}
#dreamz-banking .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-banking .featureStage {
display: block;
}
#dreamz-banking .featurePanel {
color: #000;
}
}
#dreamz-banking #banking-sales-features-1:checked~.featureTabs label[for="banking-sales-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-sales-features-1:focus-visible~.featureTabs label[for="banking-sales-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-sales-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-banking #banking-sales-features-2:checked~.featureTabs label[for="banking-sales-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-sales-features-2:focus-visible~.featureTabs label[for="banking-sales-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-sales-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-banking #banking-sales-features-3:checked~.featureTabs label[for="banking-sales-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-sales-features-3:focus-visible~.featureTabs label[for="banking-sales-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-sales-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-banking #banking-sales-features-4:checked~.featureTabs label[for="banking-sales-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-sales-features-4:focus-visible~.featureTabs label[for="banking-sales-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-sales-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-banking #banking-sales-features-5:checked~.featureTabs label[for="banking-sales-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-sales-features-5:focus-visible~.featureTabs label[for="banking-sales-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-sales-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-banking #banking-rfid-features-1:checked~.featureTabs label[for="banking-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-rfid-features-1:focus-visible~.featureTabs label[for="banking-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-banking #banking-rfid-features-2:checked~.featureTabs label[for="banking-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-rfid-features-2:focus-visible~.featureTabs label[for="banking-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-banking #banking-rfid-features-3:checked~.featureTabs label[for="banking-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-rfid-features-3:focus-visible~.featureTabs label[for="banking-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-banking #banking-rfid-features-4:checked~.featureTabs label[for="banking-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-rfid-features-4:focus-visible~.featureTabs label[for="banking-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-banking #banking-rfid-features-5:checked~.featureTabs label[for="banking-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-rfid-features-5:focus-visible~.featureTabs label[for="banking-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-1:checked~.featureTabs label[for="banking-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-ai-decisions-features-1:focus-visible~.featureTabs label[for="banking-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-2:checked~.featureTabs label[for="banking-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-ai-decisions-features-2:focus-visible~.featureTabs label[for="banking-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-3:checked~.featureTabs label[for="banking-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-ai-decisions-features-3:focus-visible~.featureTabs label[for="banking-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-4:checked~.featureTabs label[for="banking-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-ai-decisions-features-4:focus-visible~.featureTabs label[for="banking-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-5:checked~.featureTabs label[for="banking-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-banking #banking-ai-decisions-features-5:focus-visible~.featureTabs label[for="banking-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-banking #banking-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-banking .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .featureMediaPanels {
min-width: 0;
}
#dreamz-banking .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-banking .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-banking .featureMediaPanels .windowTop strong,
#dreamz-banking .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-banking .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-banking .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-banking .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-banking .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-banking .featureMediaPanels .windowBody>*,
#dreamz-banking .featureMediaPanels .spectrumGrid>*,
#dreamz-banking .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-banking .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-banking .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-banking .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-banking .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-banking .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-banking .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-banking .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-banking .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-banking .pin2 {
top: 88px;
right: 88px;
}
#dreamz-banking .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-banking .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-banking .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-banking .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-banking .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-banking .featureMediaPanels .graphNodes .node.n1,
#dreamz-banking .featureMediaPanels .graphNodes .node.n2,
#dreamz-banking .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-banking .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-banking .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-banking .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-banking .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-banking .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-banking .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-banking .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-banking .freshGraphic * {
box-sizing: border-box;
}
#dreamz-banking .rfPanel,
#dreamz-banking .aiInsightCard,
#dreamz-banking .forecastVisualCard,
#dreamz-banking .forecastSuggestion,
#dreamz-banking .knowledgeTile,
#dreamz-banking .chatConversation,
#dreamz-banking .trainingSummary,
#dreamz-banking .moduleCard,
#dreamz-banking .qualityHeatCard,
#dreamz-banking .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-banking .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-banking .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-banking .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-banking .statusPill,
#dreamz-banking .cardTag,
#dreamz-banking .forecastSuggestion b,
#dreamz-banking .moduleCard b,
#dreamz-banking .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-banking .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-banking .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-banking .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-banking .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-banking .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-banking .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-banking .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-banking .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-banking .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-banking .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-banking .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-banking .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-banking .dot.good {
background: #298EEC;
}
#dreamz-banking .dot.warn {
background: #F4A62A;
}
#dreamz-banking .dot.bad {
background: #EB6B53;
}
#dreamz-banking .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-banking .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-banking .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-banking .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-banking .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-banking .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-banking .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-banking .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-banking .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-banking .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-banking .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-banking .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-banking .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-banking .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-banking .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-banking .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-banking .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-banking .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-banking .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-banking .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-banking .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-banking .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-banking .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-banking .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-banking .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-banking .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-banking .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-banking .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-banking .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-banking .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-banking .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-banking .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-banking .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-banking .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-banking .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-banking .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-banking .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-banking .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-banking .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-banking .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-banking .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-banking .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-banking .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-banking .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-banking .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-banking .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-banking .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-banking .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-banking .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-banking .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-banking .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-banking .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-banking .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-banking .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-banking .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-banking .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-banking .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-banking .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-banking .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-banking .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-banking .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-banking .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-banking .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-banking .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-banking .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-banking .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-banking .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-banking .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-banking .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-banking .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-banking .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-banking .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-banking .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-banking .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-banking .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-banking .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-banking .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-banking .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-banking .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-banking .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-banking .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-banking .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-banking .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-banking .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-banking .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-banking .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-banking .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-banking .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-banking .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-banking .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-banking .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-banking .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-banking .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-banking .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-banking .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-banking .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-banking .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-banking .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-banking .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-banking .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-banking .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-banking .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-banking .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-banking .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-banking .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-banking .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-banking .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-banking .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-banking .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-banking .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-banking .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-banking .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-banking .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-banking .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-banking .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-banking .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-banking .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-banking .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-banking .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-banking .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-banking .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-banking .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-banking .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-banking .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-banking .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-banking .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-banking .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-banking .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-banking .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-banking .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-banking .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-banking .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-banking .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-banking .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-banking .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-banking .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-banking .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-banking .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-banking .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-banking .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-banking .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-banking .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-banking .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-banking .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-banking .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-banking .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-banking .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-banking .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-banking .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-banking .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-banking .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-banking .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-banking .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-banking .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-banking .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-banking .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-banking .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-banking .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-banking .rfTrackLayout,
#dreamz-banking .rfFlowLayout,
#dreamz-banking .rfAlertGrid,
#dreamz-banking .rfCycleLayout,
#dreamz-banking .rfSitesLayout,
#dreamz-banking .aiRootLayout,
#dreamz-banking .aiForecastLayout,
#dreamz-banking .aiChatLayout,
#dreamz-banking .aiTrainingLayout,
#dreamz-banking .aiQualityLayout,
#dreamz-banking .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-banking .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-banking .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-banking .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-banking .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-banking .aiLink {
display: none;
}
}
#dreamz-banking .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-banking .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-banking .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-banking .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-banking .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-banking .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-banking .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-banking .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-banking .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-banking .mfgHero h1>span {
display: block;
}
#dreamz-banking .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-banking .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-banking .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-banking .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-banking .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-banking .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-banking .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-banking .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-banking .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-banking .mfgHeroContent {
min-height: 610px;
}
#dreamz-banking .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-banking .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-banking .mfgHeroLead {
font-size: 16px;
}
#dreamz-banking .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-banking .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-banking .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-banking .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-banking .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-banking .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-banking .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-banking .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-banking .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-banking .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-banking .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-banking .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-banking .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-banking .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-banking .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-banking .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-banking .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-banking .mfgHero {
background: #fff;
color: #000;
}
#dreamz-banking .mfgHeroScene,
#dreamz-banking .mfgHeroActions {
display: none;
}
#dreamz-banking .mfgHeroContent {
min-height: 0;
}
#dreamz-banking .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-banking .mfgHero h1,
#dreamz-banking .mfgHero h1 .mfgHeroAccent,
#dreamz-banking .mfgHero p {
color: #000;
}
}
#dreamz-banking #banking-rfid .featureStage,
#dreamz-banking #banking-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-banking .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-banking .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-banking .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-banking .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-banking .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-banking .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-banking .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-banking .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-banking .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-banking .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-banking .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-banking .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-banking .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-banking .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-banking .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-banking .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-banking .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-banking .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-banking .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-banking .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-banking .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-banking .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-banking .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-banking .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-banking .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-banking .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-banking .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-banking .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-banking .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-banking .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-banking .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-banking .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-banking .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-banking .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-banking .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-banking .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-banking .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-banking .mfgGallery .flowArrow {
display: none;
}
#dreamz-banking .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-banking .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-banking .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-banking .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-banking .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-banking .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-banking .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-banking .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-banking .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-banking .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-banking .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-banking .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-banking .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-banking .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-banking .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-banking .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-banking .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-banking .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-banking .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-banking .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-banking .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-banking .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-banking .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-banking .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-banking .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-banking .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-banking .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-banking .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-banking .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-banking .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-banking .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-banking .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-banking .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-banking .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-banking .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-banking .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-banking .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-banking .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-banking .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-banking .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-banking .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-banking .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-banking .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-banking .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-banking .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-banking .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-banking .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-banking .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-banking .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-banking .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-banking .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-banking .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-banking .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-banking .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-banking .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-banking .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-banking .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-banking .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-banking .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-banking .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-banking .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-banking .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-banking .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-banking .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-banking .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-banking .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-banking .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-banking .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-banking .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-banking .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-banking .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-banking .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-banking .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-banking .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-banking .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-banking .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-banking .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-banking .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-banking .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-banking .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-banking .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-banking .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-banking .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-banking .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-banking .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-banking .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-banking .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-banking .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-banking .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-banking .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-banking .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-banking .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-banking .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-banking .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-banking #banking-rfid .featureStage,
#dreamz-banking #banking-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-banking #banking-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-banking .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-banking #banking-rfid .featureStage,
#dreamz-banking #banking-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-banking .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-banking .mfgGallery .freshWindow {
height: auto;
}
#dreamz-banking .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-banking .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-banking .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-banking .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-banking .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-banking .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-banking .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-banking .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-banking .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-banking .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-banking .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-banking .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-banking .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-banking .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-banking .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-banking .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-banking .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-banking .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-banking .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-banking .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-banking .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-banking .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-banking .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-banking .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-banking .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-banking .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-banking .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-banking .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-banking .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-banking .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-banking .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-banking .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-banking .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-banking .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-banking .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-banking .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-banking .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-banking .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-banking .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-banking .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-banking .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-banking .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-banking .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-banking .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-banking .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-banking .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-banking .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-banking .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-banking .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-banking .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-banking .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-banking .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-banking .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-banking .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-banking .bankingVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-banking .bankingGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-banking .bankingStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-banking .bankingVisualGallery>.bankingGraphic {
display: none;
}
#dreamz-banking #banking-sales .featureStage,
#dreamz-banking #banking-rfid .featureStage,
#dreamz-banking #banking-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-banking #banking-rfid .bankingVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-banking #banking-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-banking .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-banking .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-banking .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-banking .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-banking .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-banking #banking-sales .featureStage,
#dreamz-banking #banking-rfid .featureStage,
#dreamz-banking #banking-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-banking #banking-rfid .bankingVisualGallery,
#dreamz-banking #banking-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-banking .mfgHeroScene {
height: 290px;
}
#dreamz-banking #banking-sales .featureStage,
#dreamz-banking #banking-rfid .featureStage,
#dreamz-banking #banking-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-banking .bankingVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-banking .bankingVisualGallery>.bankingGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-banking #banking-sales-features-1:checked~.featureStage .bankingVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-banking #banking-sales-features-2:checked~.featureStage .bankingVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-banking #banking-sales-features-3:checked~.featureStage .bankingVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-banking #banking-sales-features-4:checked~.featureStage .bankingVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-banking #banking-sales-features-5:checked~.featureStage .bankingVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-banking #banking-rfid-features-1:checked~.featureStage .bankingVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-banking #banking-rfid-features-2:checked~.featureStage .bankingVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-banking #banking-rfid-features-3:checked~.featureStage .bankingVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-banking #banking-rfid-features-4:checked~.featureStage .bankingVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-banking #banking-rfid-features-5:checked~.featureStage .bankingVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-1:checked~.featureStage .bankingVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-2:checked~.featureStage .bankingVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-3:checked~.featureStage .bankingVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-4:checked~.featureStage .bankingVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-banking #banking-ai-decisions-features-5:checked~.featureStage .bankingVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-banking .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-banking .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-banking .bankingIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-banking .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-banking .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-banking .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-banking .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
#dreamz-banking .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-banking .bankingIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
#dreamz-banking .bankingVisualGallery {
min-height: 0;
}
#dreamz-banking .bankingIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 90% 50%;
}
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
#dreamz-banking .bankingVisualGallery {
min-height: 0;
}
#dreamz-banking .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-banking .bankingIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-banking .bankingGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
#dreamz-banking .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-banking .mfgHeroContent {
background: transparent;
}
#dreamz-banking .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-banking .mfgHeroScene img {
object-position: 83% 50%;
}
}
#dreamz-banking .mfgHeroContent {
background: transparent;
}
#dreamz-banking .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-banking .mfgHeroScene img {
object-position: 86% 50%;
}
}
#dreamz-banking .mfgHeroContent {
background: transparent;
}
#dreamz-banking .mfgHeroScene img {
object-position: 76% 50%;
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
#dreamz-banking .mfgHeroScene img {
object-position: 87% 50%;
}
}
#dreamz-banking .mfgHeroContent {
background: transparent;
}
#dreamz-banking .mfgHeroScene img {
object-position: 76% 50%;
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-banking #banking-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-banking .mfgHeroScene img {
object-position: 88% 50%;
}
}
#dreamz-banking .mfgHeroContent {
background: transparent;
}
#dreamz-banking .mfgHeroScene img {
object-position: 77% 50%;
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-banking #banking-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-banking .mfgHeroScene img {
object-position: 85% 50%;
}
}
#dreamz-banking .mfgHeroContent {
background: transparent;
}
#dreamz-banking .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-banking #banking-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
#dreamz-banking .mfgHeroScene img {
object-position: 80% 50%;
}
} #dreamz-banking .mfgHeroContent {
background: transparent;
}
#dreamz-banking .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-banking .bankingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-banking .bankingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-banking #banking-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-banking .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
#dreamz-banking .mfgHeroScene img {
object-position: 80% 50%;
}
}
@media (max-width: 767px) {
#dreamz-banking .mfgHeroScene {
display: none;
}
}  .remodeling-management .industryIntroHead.compact,
.remodeling-management .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.remodeling-management .featureMediaPanels {
position: relative;
min-height: 430px;
}
.remodeling-management .featureMediaPanels>.mediaPanel {
display: none;
}
.remodeling-management .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.remodeling-management .featureMediaPanels .spotlightMedia {
height: 100%;
}
.remodeling-management .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.remodeling-management .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.remodeling-management .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.remodeling-management .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.remodeling-management .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.remodeling-management .windowTop small {
font-size: 10px;
color: var(--muted);
}
.remodeling-management .windowDots {
display: flex;
gap: 5px;
}
.remodeling-management .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.remodeling-management .windowBody {
padding: 16px;
}
.remodeling-management .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.remodeling-management .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.remodeling-management .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.remodeling-management .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.remodeling-management .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.remodeling-management .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.remodeling-management .chartGridLine.l1 {
top: 34px;
}
.remodeling-management .chartGridLine.l2 {
top: 65px;
}
.remodeling-management .chartGridLine.l3 {
top: 96px;
}
.remodeling-management .chartGridLine.l4 {
top: 127px;
}
.remodeling-management .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.remodeling-management .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.remodeling-management .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.remodeling-management .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.remodeling-management .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.remodeling-management .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.remodeling-management .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.remodeling-management .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.remodeling-management .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.remodeling-management .spectrumNotes {
display: grid;
gap: 10px;
}
.remodeling-management .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.remodeling-management .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.remodeling-management .noteCard p,
.remodeling-management .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.remodeling-management .alertStack {
display: grid;
gap: 10px;
}
.remodeling-management .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.remodeling-management .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.remodeling-management .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.remodeling-management .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.remodeling-management .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.remodeling-management .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.remodeling-management .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.remodeling-management .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.remodeling-management .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.remodeling-management .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.remodeling-management .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.remodeling-management .scheduleBoard h4,
.remodeling-management .todoBoard h4,
.remodeling-management .siteBoard h4,
.remodeling-management .chatPanel h4,
.remodeling-management .lessonPanel h4,
.remodeling-management .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.remodeling-management .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.remodeling-management .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.remodeling-management .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.remodeling-management .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.remodeling-management .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.remodeling-management .taskRow:last-child {
border-bottom: 0;
}
.remodeling-management .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.remodeling-management .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.remodeling-management .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.remodeling-management .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.remodeling-management .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.remodeling-management .inventoryTable th,
.remodeling-management .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.remodeling-management .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.remodeling-management .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.remodeling-management .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.remodeling-management .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.remodeling-management .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.remodeling-management .phoneBody {
padding: 12px;
}
.remodeling-management .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.remodeling-management .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.remodeling-management .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.remodeling-management .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.remodeling-management .progressList {
display: grid;
gap: 10px;
}
.remodeling-management .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.remodeling-management .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.remodeling-management .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.remodeling-management .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.remodeling-management .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.remodeling-management .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.remodeling-management .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.remodeling-management .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.remodeling-management .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.remodeling-management .pin1 {
top: 56px;
left: 58px;
}
.remodeling-management .pin2 {
top: 88px;
right: 88px;
}
.remodeling-management .pin3 {
bottom: 54px;
right: 72px;
}
.remodeling-management .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.remodeling-management .siteRow:last-child {
border-bottom: 0;
}
.remodeling-management .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.remodeling-management .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.remodeling-management .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.remodeling-management .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.remodeling-management .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.remodeling-management .graphNodes:before,
.remodeling-management .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.remodeling-management .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.remodeling-management .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.remodeling-management .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.remodeling-management .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.remodeling-management .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.remodeling-management .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.remodeling-management .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.remodeling-management .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.remodeling-management .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.remodeling-management .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.remodeling-management .forecastList .taskRow strong {
font-size: 11px;
}
.remodeling-management .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.remodeling-management .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.remodeling-management .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.remodeling-management .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.remodeling-management .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.remodeling-management .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.remodeling-management .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.remodeling-management .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.remodeling-management .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.remodeling-management .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.remodeling-management .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.remodeling-management .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.remodeling-management .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.remodeling-management .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.remodeling-management .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.remodeling-management .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.remodeling-management .qualityRows {
display: grid;
gap: 10px;
}
.remodeling-management .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.remodeling-management .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.remodeling-management .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.remodeling-management .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.remodeling-management .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.remodeling-management #remodeling-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.remodeling-management #remodeling-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.remodeling-management #remodeling-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.remodeling-management #remodeling-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.remodeling-management #remodeling-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.remodeling-management #remodeling-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.remodeling-management #remodeling-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.remodeling-management #remodeling-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.remodeling-management #remodeling-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.remodeling-management #remodeling-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.remodeling-management #remodeling-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.remodeling-management #remodeling-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.remodeling-management #remodeling-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.remodeling-management #remodeling-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.remodeling-management #remodeling-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.remodeling-management #remodeling-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.remodeling-management #remodeling-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.remodeling-management #remodeling-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.remodeling-management #remodeling-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.remodeling-management #remodeling-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.remodeling-management #remodeling-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.remodeling-management #remodeling-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.remodeling-management #remodeling-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.remodeling-management #remodeling-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.remodeling-management #remodeling-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.remodeling-management #remodeling-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.remodeling-management #remodeling-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.remodeling-management #remodeling-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.remodeling-management #remodeling-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.remodeling-management #remodeling-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.remodeling-management .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.remodeling-management .featureMediaPanels {
min-height: 0;
}
.remodeling-management .inventorySplit,
.remodeling-management .forecastGrid,
.remodeling-management .siteGrid,
.remodeling-management .spectrumGrid,
.remodeling-management .scheduleGrid {
grid-template-columns: 1fr;
}
.remodeling-management .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.remodeling-management .metricGrid,
.remodeling-management .lessonCards,
.remodeling-management .gaugeGrid {
grid-template-columns: 1fr;
}
.remodeling-management .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.remodeling-management .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.remodeling-management {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
.remodeling-management * {
box-sizing: border-box;
}
.remodeling-management {
scroll-behavior: smooth;
}
.remodeling-management {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
.remodeling-management a {
color: inherit;
text-decoration: none;
}
.remodeling-management .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
.remodeling-management .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.remodeling-management .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.remodeling-management .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.remodeling-management .brand span {
color: var(--brand);
}
.remodeling-management .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.remodeling-management .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.remodeling-management .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.remodeling-management .button.primary:hover {
background: var(--brand-dark);
}
.remodeling-management .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.remodeling-management .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.remodeling-management .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.remodeling-management .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.remodeling-management h1,
.remodeling-management h2,
.remodeling-management h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
.remodeling-management .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.remodeling-management .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.remodeling-management .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.remodeling-management .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.remodeling-management .hero .button.primary:hover {
background: var(--black-soft);
}
.remodeling-management .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.remodeling-management .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.remodeling-management .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.remodeling-management .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.remodeling-management .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.remodeling-management .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.remodeling-management .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.remodeling-management .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.remodeling-management .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.remodeling-management .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.remodeling-management .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.remodeling-management .ratingLead strong {
display: block;
font-size: 20px;
}
.remodeling-management .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.remodeling-management .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.remodeling-management .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.remodeling-management .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.remodeling-management .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.remodeling-management section {
padding: 88px 0;
}
.remodeling-management .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.remodeling-management .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.remodeling-management .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.remodeling-management .aiJourney h2 {
color: #fff;
}
.remodeling-management .aiJourney .sectionHead p {
color: #D7D7D7;
}
.remodeling-management .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.remodeling-management .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.remodeling-management .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.remodeling-management .aiStep:last-child::after {
display: none;
}
.remodeling-management .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.remodeling-management .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.remodeling-management .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.remodeling-management .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.remodeling-management .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.remodeling-management .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.remodeling-management .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.remodeling-management .outcome span {
color: var(--muted);
font-size: 14px;
}
.remodeling-management .capability {
background: #fff;
}
.remodeling-management .capability.alt {
background: var(--sky-2);
}
.remodeling-management .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.remodeling-management .twoCol.reverse .visual {
order: 2;
}
.remodeling-management .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.remodeling-management .visual .placeholder {
min-height: 355px;
}
.remodeling-management .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.remodeling-management .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.remodeling-management details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.remodeling-management details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.remodeling-management details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.remodeling-management details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.remodeling-management details.capabilityMore[open] summary::after {
content: "−";
}
.remodeling-management details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.remodeling-management .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.remodeling-management .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.remodeling-management .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.remodeling-management .darkSection h2,
.remodeling-management .darkSection h3 {
color: #fff;
}
.remodeling-management .darkSection .sectionHead p,
.remodeling-management .darkSection .copy p {
color: #D7D7D7;
}
.remodeling-management .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.remodeling-management .darkSection .featureItem {
color: #F7F7F7;
}
.remodeling-management .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.remodeling-management .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.remodeling-management .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.remodeling-management .darkSection .placeholder small {
color: #D0D0D0;
}
.remodeling-management .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.remodeling-management .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.remodeling-management .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.remodeling-management .card p {
color: var(--muted);
margin: 12px 0 0;
}
.remodeling-management .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.remodeling-management .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.remodeling-management .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.remodeling-management .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.remodeling-management .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.remodeling-management .benefitBand h2 {
color: #fff;
}
.remodeling-management .benefitBand .sectionHead p {
color: #D5D5D5;
}
.remodeling-management .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.remodeling-management .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.remodeling-management .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.remodeling-management .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.remodeling-management .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.remodeling-management .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.remodeling-management .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.remodeling-management .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.remodeling-management .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.remodeling-management .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.remodeling-management .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.remodeling-management .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.remodeling-management .ctaPanel h2 {
color: #fff;
}
.remodeling-management .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.remodeling-management .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.remodeling-management .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.remodeling-management .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.remodeling-management .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.remodeling-management .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.remodeling-management .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.remodeling-management .inlineCta.dark h3 {
color: #fff;
}
.remodeling-management .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.remodeling-management .inlineCta.dark p {
color: #D8D8D8;
}
.remodeling-management .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.remodeling-management .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.remodeling-management .button.yellow:hover {
background: #FFD84D;
}
.remodeling-management .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.remodeling-management .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.remodeling-management .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.remodeling-management .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.remodeling-management footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.remodeling-management .ratingSectionGrid {
grid-template-columns: 1fr;
}
.remodeling-management .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.remodeling-management .heroGrid,
.remodeling-management .twoCol,
.remodeling-management .ctaPanel {
grid-template-columns: 1fr;
}
.remodeling-management .twoCol.reverse .visual {
order: initial;
}
.remodeling-management .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.remodeling-management .ratingGrid,
.remodeling-management .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.remodeling-management .ratingLead,
.remodeling-management .awardLead {
grid-column: 1/-1;
text-align: center;
}
.remodeling-management .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.remodeling-management .aiStep:nth-child(3)::after,
.remodeling-management .aiStep:last-child::after {
display: none;
}
.remodeling-management .outcomeGrid,
.remodeling-management .challengeGrid,
.remodeling-management .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.remodeling-management .cards,
.remodeling-management .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.remodeling-management .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.remodeling-management .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.remodeling-management .awardProofGrid {
grid-template-columns: 1fr;
}
.remodeling-management .wrap {
width: min(var(--max), calc(100% - 24px));
}
.remodeling-management .hero {
padding: 58px 0 52px;
}
.remodeling-management section {
padding: 64px 0;
}
.remodeling-management .aiFlow {
grid-template-columns: 1fr;
}
.remodeling-management .aiStep::after {
display: none;
}
.remodeling-management .logoRow,
.remodeling-management .ratingGrid,
.remodeling-management .awardGrid,
.remodeling-management .outcomeGrid,
.remodeling-management .challengeGrid,
.remodeling-management .benefitGrid,
.remodeling-management .cards,
.remodeling-management .proofCards,
.remodeling-management .integrationGrid,
.remodeling-management .featureList {
grid-template-columns: 1fr;
}
.remodeling-management .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.remodeling-management .ctaPanel {
padding: 34px 24px;
}
.remodeling-management .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.remodeling-management .inlineCtaActions {
width: 100%;
}
.remodeling-management .inlineCtaActions .button {
flex: 1;
}
}
.remodeling-management {
--muted: #526A7C;
--shadow: none;
}
.remodeling-management {
background: var(--sky-2);
}
.remodeling-management p {
margin-bottom: 0;
}
.remodeling-management [id] {
scroll-margin-top: 94px;
}
.remodeling-management svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.remodeling-management .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.remodeling-management .darkSection h2,
.remodeling-management .darkSection h3,
.remodeling-management .aiJourney h2,
.remodeling-management .benefitBand h2,
.remodeling-management .ctaPanel h2,
.remodeling-management .inlineCta.dark h3 {
color: #fff;
}
.remodeling-management .wrap>*,
.remodeling-management .heroGrid>*,
.remodeling-management .twoCol>*,
.remodeling-management .ctaPanel>* {
min-width: 0;
}
.remodeling-management .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.remodeling-management .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.remodeling-management .skipLink:focus {
transform: none;
}
.remodeling-management a:focus-visible,
.remodeling-management summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.remodeling-management .darkSection a:focus-visible,
.remodeling-management .darkSection summary:focus-visible,
.remodeling-management .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.remodeling-management .topbar {
background: #fff;
backdrop-filter: none;
}
.remodeling-management .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.remodeling-management .brandName {
display: inline;
color: var(--navy) !important;
}
.remodeling-management .brandName>span {
color: var(--brand-dark);
}
.remodeling-management .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.remodeling-management .brandMark .icon2 {
width: 21px;
height: 21px;
}
.remodeling-management .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.remodeling-management .navlinks a:hover {
color: var(--brand-dark);
}
.remodeling-management .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.remodeling-management .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.remodeling-management .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.remodeling-management .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.remodeling-management .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.remodeling-management .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.remodeling-management .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.remodeling-management .heroVisual {
width: 100%;
min-width: 0;
}
.remodeling-management .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.remodeling-management .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.remodeling-management .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.remodeling-management .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.remodeling-management .clientBand {
padding: 27px 0;
}
.remodeling-management .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.remodeling-management .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.remodeling-management .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.remodeling-management .logoBox.wide {
font-size: 12px;
}
.remodeling-management .logoBox small {
display: block;
font-size: 10px;
}
.remodeling-management section {
padding: 80px 0;
}
.remodeling-management h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.remodeling-management .sectionHead {
margin-bottom: 36px;
}
.remodeling-management .eyebrow {
line-height: 1.5;
}
.remodeling-management .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.remodeling-management .aiStep {
min-height: 162px;
}
.remodeling-management .aiStep strong {
line-height: 1.35;
}
.remodeling-management .aiStep span {
line-height: 1.65;
}
.remodeling-management .aiCallout {
margin-top: 24px;
}
.remodeling-management .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.remodeling-management .outcome>.icon2 {
color: var(--navy);
}
.remodeling-management .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.remodeling-management .twoCol.reverse .visual {
order: -1;
}
.remodeling-management .copy .eyebrow {
margin-bottom: 17px;
}
.remodeling-management .copy p {
font-size: 16px;
line-height: 1.85;
}
.remodeling-management .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.remodeling-management .featureList {
gap: 13px 18px;
}
.remodeling-management .featureItem {
font-size: 13px;
line-height: 1.6;
}
.remodeling-management .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.remodeling-management .check .icon2 {
width: 14px;
height: 14px;
}
.remodeling-management details.capabilityMore {
margin-bottom: 0;
}
.remodeling-management .capabilityMore summary {
min-height: 34px;
}
.remodeling-management .capabilityMore .moreGrid {
gap: 13px 18px;
}
.remodeling-management .textCta {
font-size: 14px;
}
.remodeling-management .visual {
min-width: 0;
}
.remodeling-management .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.remodeling-management .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.remodeling-management .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.remodeling-management .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.remodeling-management .panelBody {
padding: 20px;
}
.remodeling-management .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.remodeling-management .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.remodeling-management .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.remodeling-management .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.remodeling-management .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.remodeling-management .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.remodeling-management .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.remodeling-management .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.remodeling-management .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.remodeling-management .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.remodeling-management .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.remodeling-management .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.remodeling-management .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.remodeling-management .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.remodeling-management .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.remodeling-management .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.remodeling-management .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.remodeling-management .miniStats span {
font-size: 9px;
color: var(--muted);
}
.remodeling-management .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.remodeling-management .dataRow:last-child {
border-bottom: 0;
}
.remodeling-management .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.remodeling-management .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.remodeling-management .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.remodeling-management .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.remodeling-management .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.remodeling-management .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.remodeling-management .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.remodeling-management .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.remodeling-management .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.remodeling-management .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.remodeling-management .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.remodeling-management .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.remodeling-management .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.remodeling-management .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.remodeling-management .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.remodeling-management .mobileAccount {
text-align: center;
padding: 13px 0;
}
.remodeling-management .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.remodeling-management .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.remodeling-management .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.remodeling-management .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.remodeling-management .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.remodeling-management .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.remodeling-management .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.remodeling-management .phoneDevice .rowCopy strong {
font-size: 9px;
}
.remodeling-management .phoneDevice .rowCopy small {
font-size: 7px;
}
.remodeling-management .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.remodeling-management .mobileSide {
display: grid;
gap: 10px;
}
.remodeling-management .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.remodeling-management .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.remodeling-management .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.remodeling-management .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.remodeling-management .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.remodeling-management .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.remodeling-management .darkSection .panelHead>strong {
color: #fff;
}
.remodeling-management .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.remodeling-management .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.remodeling-management .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.remodeling-management .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.remodeling-management .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.remodeling-management .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.remodeling-management .promptList {
display: grid;
gap: 10px;
}
.remodeling-management .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.remodeling-management .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.remodeling-management .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.remodeling-management .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.remodeling-management .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.remodeling-management .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.remodeling-management .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.remodeling-management .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.remodeling-management .quoteTable th,
.remodeling-management .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.remodeling-management .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.remodeling-management .quoteTable td:first-child {
width: 64%;
}
.remodeling-management .quoteTable th:last-child,
.remodeling-management .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.remodeling-management .quoteTable strong {
font-size: 11px;
}
.remodeling-management .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.remodeling-management .quoteTable tfoot {
background: #F5FBFF;
}
.remodeling-management .quoteTable tfoot th {
font-size: 10px;
}
.remodeling-management .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.remodeling-management .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.remodeling-management .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.remodeling-management .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.remodeling-management .orderJourney {
margin: 20px 0;
}
.remodeling-management .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.remodeling-management .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.remodeling-management .journeyRow:last-child:before {
display: none;
}
.remodeling-management .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.remodeling-management .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.remodeling-management .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.remodeling-management .journeyRow strong {
font-size: 12px;
display: block;
}
.remodeling-management .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.remodeling-management .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.remodeling-management .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.remodeling-management .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.remodeling-management .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.remodeling-management .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.remodeling-management .inventoryIntro strong {
display: block;
font-size: 16px;
}
.remodeling-management .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.remodeling-management .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.remodeling-management .availabilityCard span {
font-size: 9px;
display: block;
}
.remodeling-management .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.remodeling-management .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.remodeling-management .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.remodeling-management .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.remodeling-management .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.remodeling-management .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.remodeling-management .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.remodeling-management .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.remodeling-management .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.remodeling-management .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.remodeling-management .customerTimeline .dataRow {
border-color: #353535;
}
.remodeling-management .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.remodeling-management .customerTimeline strong {
color: #fff;
}
.remodeling-management .customerTimeline small {
color: #BFBFBF;
}
.remodeling-management .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.remodeling-management .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.remodeling-management .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.remodeling-management .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.remodeling-management .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.remodeling-management .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.remodeling-management .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.remodeling-management .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.remodeling-management .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.remodeling-management .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.remodeling-management .chartTitle strong {
font-size: 12px;
}
.remodeling-management .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.remodeling-management .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.remodeling-management .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.remodeling-management .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.remodeling-management .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.remodeling-management .inlineCta {
margin-top: 0;
box-shadow: none;
}
.remodeling-management .inlineCtaActions {
max-width: 42%;
}
.remodeling-management .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.remodeling-management .inlineCta h3 {
line-height: 1.35;
}
.remodeling-management .card {
box-shadow: none;
}
.remodeling-management .cardIcon {
box-shadow: none;
}
.remodeling-management .card h3 {
font-size: 22px;
}
.remodeling-management .card p {
font-size: 14px;
line-height: 1.8;
}
.remodeling-management .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.remodeling-management .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.remodeling-management .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.remodeling-management .ratingBand {
padding: 34px 0;
}
.remodeling-management .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.remodeling-management .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.remodeling-management .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.remodeling-management .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.remodeling-management .ratingItem:first-child {
border-left: 0;
}
.remodeling-management .proofCard h3 {
font-size: 23px;
}
.remodeling-management .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.remodeling-management .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.remodeling-management .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.remodeling-management .integration {
min-height: 98px;
}
.remodeling-management .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.remodeling-management .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.remodeling-management .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.remodeling-management .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.remodeling-management .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.remodeling-management .finalActions {
display: grid;
gap: 11px;
}
.remodeling-management .finalActions .button {
white-space: nowrap;
}
.remodeling-management .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.remodeling-management .footerInner p {
margin: 0;
font-size: 12px;
}
.remodeling-management .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.remodeling-management .navlinks {
gap: 15px;
font-size: 12px;
}
.remodeling-management .heroGrid {
gap: 30px;
}
.remodeling-management .twoCol {
gap: 32px;
}
.remodeling-management .panelBody {
padding: 16px;
}
.remodeling-management .panelHead {
padding: 16px;
}
.remodeling-management .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.remodeling-management .pipelineColumns {
gap: 7px;
}
.remodeling-management .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.remodeling-management .heroGrid,
.remodeling-management .twoCol,
.remodeling-management .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .heroGrid {
gap: 36px;
}
.remodeling-management .hero h1 {
max-width: 730px;
}
.remodeling-management .hero .lead {
max-width: 690px;
}
.remodeling-management .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.remodeling-management .twoCol {
gap: 34px;
}
.remodeling-management .twoCol.reverse .visual {
order: initial;
}
.remodeling-management .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.remodeling-management .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.remodeling-management .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.remodeling-management .awardItem {
font-size: 12px;
padding: 13px;
}
.remodeling-management .ratingSectionGrid {
gap: 20px;
}
.remodeling-management .inlineCta {
align-items: flex-start;
}
.remodeling-management .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.remodeling-management .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.remodeling-management .card {
padding: 22px;
}
.remodeling-management .card h3 {
font-size: 21px;
}
.remodeling-management .finalActions {
display: flex;
flex-wrap: wrap;
}
.remodeling-management .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.remodeling-management .cards,
.remodeling-management .proofCards {
grid-template-columns: 1fr;
}
.remodeling-management .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.remodeling-management .inlineCta {
flex-direction: column;
}
.remodeling-management .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.remodeling-management .inlineCtaActions .button {
flex: 1;
}
.remodeling-management .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.remodeling-management .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.remodeling-management .wrap {
width: calc(100% - 32px);
}
.remodeling-management [id] {
scroll-margin-top: 82px;
}
.remodeling-management .brand {
font-size: 20px;
gap: 7px;
}
.remodeling-management .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.remodeling-management .brandMark .icon2 {
width: 18px;
height: 18px;
}
.remodeling-management .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.remodeling-management section {
padding: 60px 0;
}
.remodeling-management .hero {
padding: 51px 0 48px;
}
.remodeling-management .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.remodeling-management .heroActions {
gap: 10px;
margin-top: 25px;
}
.remodeling-management .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.remodeling-management .hero .microcopy {
font-size: 11px;
}
.remodeling-management .heroPills span {
font-size: 9px;
}
.remodeling-management .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.remodeling-management .sectionHead p {
font-size: 16px;
}
.remodeling-management .copy h2 {
font-size: 34px;
}
.remodeling-management .copy p {
font-size: 15px;
}
.remodeling-management .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.remodeling-management .logoBox {
min-height: 53px;
}
.remodeling-management .logoBox:last-child {
grid-column: 1/-1;
}
.remodeling-management .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.remodeling-management .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.remodeling-management .aiStep strong {
font-size: 13px;
}
.remodeling-management .aiStep span {
font-size: 11px;
}
.remodeling-management .aiStep::after {
display: none;
}
.remodeling-management .outcomeGrid,
.remodeling-management .challengeGrid,
.remodeling-management .benefitGrid {
grid-template-columns: 1fr;
}
.remodeling-management .outcome {
padding: 24px;
}
.remodeling-management .outcome strong {
font-size: 22px;
}
.remodeling-management .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.remodeling-management .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.remodeling-management .awardItem:last-child {
grid-column: 1/-1;
}
.remodeling-management .featureList,
.remodeling-management .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.remodeling-management .featureItem {
font-size: 13px;
}
.remodeling-management .inlineCta {
padding: 22px;
gap: 19px;
}
.remodeling-management .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.remodeling-management .panelHead {
padding: 15px 13px;
}
.remodeling-management .panelHead>strong {
font-size: 12px;
}
.remodeling-management .panelBody {
padding: 14px;
}
.remodeling-management .productPanel {
border-radius: 16px;
}
.remodeling-management .productPanel figcaption {
padding: 0 14px 13px;
}
.remodeling-management .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.remodeling-management .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.remodeling-management .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.remodeling-management .deal {
margin-top: 0;
padding: 10px;
}
.remodeling-management .deal strong {
font-size: 10px;
}
.remodeling-management .deal small {
font-size: 9px;
}
.remodeling-management .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.remodeling-management .mobileWorkspace {
gap: 12px;
}
.remodeling-management .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.remodeling-management .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.remodeling-management .sideTile {
padding: 10px;
}
.remodeling-management .sideTile strong {
font-size: 10px;
}
.remodeling-management .sideTile p {
font-size: 9px;
}
.remodeling-management .mobileHeader strong {
font-size: 15px;
}
.remodeling-management .mobileAccount strong {
font-size: 10px;
}
.remodeling-management .mobileAccount small {
font-size: 7px;
}
.remodeling-management .phoneDevice .rowIcon {
display: none;
}
.remodeling-management .quoteTable th,
.remodeling-management .quoteTable td {
padding: 12px 4px;
}
.remodeling-management .quoteTable strong {
font-size: 10px;
}
.remodeling-management .quoteTable small {
font-size: 8px;
}
.remodeling-management .quoteTable tfoot th {
font-size: 9px;
}
.remodeling-management .docHeader strong {
font-size: 17px;
}
.remodeling-management .miniFlow {
gap: 5px;
font-size: 9px;
}
.remodeling-management .miniFlow span {
padding: 6px;
}
.remodeling-management .rowCopy strong {
font-size: 10px;
}
.remodeling-management .rowCopy small {
font-size: 8px;
}
.remodeling-management .statusPill {
font-size: 7px;
padding: 5px;
}
.remodeling-management .miniStats {
gap: 7px;
}
.remodeling-management .miniStats>div {
padding: 9px;
}
.remodeling-management .miniStats strong {
font-size: 18px;
}
.remodeling-management .miniStats span {
font-size: 8px;
}
.remodeling-management .collectionStats>div {
padding: 13px;
}
.remodeling-management .collectionStats strong {
font-size: 24px;
}
.remodeling-management .customerHeader strong {
font-size: 17px;
}
.remodeling-management .customerFacts>div {
padding: 10px;
}
.remodeling-management .customerFacts strong {
font-size: 12px;
}
.remodeling-management .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.remodeling-management .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.remodeling-management .ratingItem:last-child {
grid-column: 1/-1;
}
.remodeling-management .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.remodeling-management .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.remodeling-management .integration small {
font-size: 9px;
}
.remodeling-management .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.remodeling-management .ctaPanel p {
font-size: 15px;
}
.remodeling-management .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.remodeling-management .footerInner {
align-items: flex-start;
flex-direction: column;
}
.remodeling-management .contextSection {
padding: 0 0 24px;
}
.remodeling-management .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.remodeling-management .wrap {
width: calc(100% - 24px);
}
.remodeling-management .brand {
font-size: 18px;
}
.remodeling-management .brandMark {
width: 25px;
height: 25px;
}
.remodeling-management .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.remodeling-management .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.remodeling-management .copy h2 {
font-size: 31px;
}
.remodeling-management .mobileWorkspace {
grid-template-columns: 1fr;
}
.remodeling-management .phoneDevice {
width: 210px;
}
.remodeling-management .phoneDevice .rowIcon {
display: grid;
}
.remodeling-management .mobileSide {
gap: 8px;
}
.remodeling-management .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.remodeling-management .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.remodeling-management .sideTile p {
margin: 0;
}
.remodeling-management .miniFlow span {
padding: 5px;
font-size: 8px;
}
.remodeling-management .collectionStats strong {
font-size: 21px;
}
.remodeling-management .inventoryIntro strong {
font-size: 14px;
}
.remodeling-management .dataRow {
gap: 7px;
}
.remodeling-management .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.remodeling-management .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
.remodeling-management {
scroll-behavior: auto;
}
.remodeling-management *,
.remodeling-management *::before,
.remodeling-management *::after {
transition: none !important;
animation: none !important;
}
}
.remodeling-management {
background: var(--sky-2);
}
.remodeling-management .hero .eyebrow {
max-width: 100%;
}
.remodeling-management .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.remodeling-management .ganttIllustration,
.remodeling-management .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.remodeling-management .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.remodeling-management .costIllustration {
aspect-ratio: 484/226;
}
.remodeling-management .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.remodeling-management .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.remodeling-management .comparisonTable thead {
background: var(--black);
color: #fff;
}
.remodeling-management .comparisonTable thead th:last-child {
color: var(--yellow);
}
.remodeling-management .comparisonTable th,
.remodeling-management .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.remodeling-management .comparisonTable th:first-child {
width: 23%;
}
.remodeling-management .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.remodeling-management .comparisonTable tbody td {
color: var(--muted);
}
.remodeling-management .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.remodeling-management .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.remodeling-management .card,
.remodeling-management .proofCard,
.remodeling-management .productPanel,
.remodeling-management .outcome,
.remodeling-management .benefit {
box-shadow: none;
}
.remodeling-management .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.remodeling-management .hero .eyebrow {
font-size: 10px;
}
.remodeling-management .comparisonTable {
font-size: 11px;
}
.remodeling-management .comparisonTable th,
.remodeling-management .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.remodeling-management .comparisonTable th:first-child {
width: 24%;
}
.remodeling-management .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.remodeling-management .summaryTotal strong {
font-size: 22px;
}
}
.remodeling-management .scheduleIllustration,
.remodeling-management .analyticsIllustration,
.remodeling-management .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.remodeling-management .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.remodeling-management .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.remodeling-management .conditionIllustration {
aspect-ratio: 484 / 178;
}
.remodeling-management .miniStats strong {
font-variant-numeric: tabular-nums;
}
.remodeling-management .quoteTable td:last-child {
white-space: nowrap;
}
.remodeling-management .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.remodeling-management .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.remodeling-management .darkSection .textCta {
color: var(--yellow);
}
.remodeling-management .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.remodeling-management .secondaryLinks .textCta {
font-size: 12px;
}
.remodeling-management .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.remodeling-management .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.remodeling-management .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.remodeling-management .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.remodeling-management .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.remodeling-management .scanSummary>.icon2 {
color: var(--yellow);
flex: 0 0 24px;
}
.remodeling-management .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.remodeling-management .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.remodeling-management .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.remodeling-management .returnFlag .icon2 {
flex: 0 0 24px;
}
.remodeling-management .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.remodeling-management .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.remodeling-management .phoneDevice {
max-width: 100%;
}
.remodeling-management .heroPills {
line-height: 1.55;
}
.remodeling-management .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.remodeling-management .plantFacts {
gap: 7px;
}
.remodeling-management .plantFacts>div {
padding: 9px;
}
.remodeling-management .plantFacts strong {
font-size: 11px;
}
.remodeling-management .scanSummary {
padding: 12px;
}
.remodeling-management .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.remodeling-management .mobileWorkspace {
grid-template-columns: 1fr;
}
.remodeling-management .phoneDevice {
width: 224px;
margin: auto;
}
.remodeling-management .phoneDevice .rowIcon {
display: grid;
}
.remodeling-management .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.remodeling-management .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.remodeling-management .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.remodeling-management .sideTile strong {
font-size: 12px;
}
.remodeling-management .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.remodeling-management .topbar,
.remodeling-management .heroActions,
.remodeling-management .finalActions,
.remodeling-management .contextSection,
.remodeling-management .valueCtaSection {
display: none;
}
.remodeling-management section {
break-inside: avoid;
padding: 28px 0;
}
.remodeling-management .hero {
padding-top: 20px;
}
}
.remodeling-management {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
.remodeling-management p {
margin: 0;
}
.remodeling-management main {
display: block;
}
.remodeling-management section {
padding: 74px 0;
}
.remodeling-management .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.remodeling-management .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.remodeling-management .heroAccent {
color: var(--black);
}
.remodeling-management .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.remodeling-management .heroActions {
gap: 10px;
margin-top: 24px;
}
.remodeling-management .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.remodeling-management .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.remodeling-management .microcopy {
margin-top: 14px;
}
.remodeling-management .heroPills {
margin-top: 13px;
}
.remodeling-management .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.remodeling-management .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.remodeling-management .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.remodeling-management .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.remodeling-management .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.remodeling-management .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.remodeling-management .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.remodeling-management .clientBand {
padding: 24px 0;
}
.remodeling-management .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.remodeling-management .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.remodeling-management .logoBox.wide {
font-size: 15px;
}
.remodeling-management .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.remodeling-management .sectionHead p {
margin: 17px 0 0;
}
.remodeling-management .copy p {
margin: 16px 0 0;
}
.remodeling-management .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.remodeling-management .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.remodeling-management .aiJourney {
background: var(--black);
}
.remodeling-management .aiStep {
min-height: 157px;
border-color: #353535;
}
.remodeling-management .productPanel {
border-radius: 18px;
}
.remodeling-management .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.remodeling-management .panelHead>strong {
font-size: 13px;
}
.remodeling-management .sampleTag {
font-size: 9px;
}
.remodeling-management .panelBody {
padding: 21px;
}
.remodeling-management .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.remodeling-management .docHeader {
padding-bottom: 16px;
}
.remodeling-management .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.remodeling-management .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.remodeling-management .smallLabel {
font-size: 9px;
}
.remodeling-management .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.remodeling-management .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.remodeling-management .dataRow {
padding: 14px 0;
}
.remodeling-management .statusPill {
font-size: 8px;
}
.remodeling-management .miniStats {
gap: 10px;
margin: 18px 0;
}
.remodeling-management .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.remodeling-management .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.remodeling-management .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.remodeling-management .contextNote {
font-size: 11px;
margin-top: 16px;
}
.remodeling-management .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.remodeling-management .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.remodeling-management .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.remodeling-management .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.remodeling-management .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.remodeling-management .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.remodeling-management .hierarchy strong {
color: var(--navy);
}
.remodeling-management .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.remodeling-management .conditionIllustration {
aspect-ratio: 484/201;
}
.remodeling-management .analyticsIllustration {
aspect-ratio: 484/206;
}
.remodeling-management .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.remodeling-management .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.remodeling-management .phoneDevice .rowCopy strong {
font-size: 10px;
}
.remodeling-management .phoneDevice .rowCopy small {
font-size: 9px;
}
.remodeling-management .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.remodeling-management .mobileAccount small {
font-size: 9px;
}
.remodeling-management .sideTile {
background: var(--sky-2);
padding: 14px;
}
.remodeling-management .sideTile strong {
font-size: 12px;
}
.remodeling-management .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.remodeling-management .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.remodeling-management .mobileAction {
font-size: 9px;
}
.remodeling-management .journeyRow strong {
font-size: 13px;
}
.remodeling-management .journeyRow small {
font-size: 11px;
}
.remodeling-management .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.remodeling-management .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.remodeling-management .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.remodeling-management .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.remodeling-management .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.remodeling-management .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.remodeling-management .utilityReadout small {
font-size: 12px;
}
.remodeling-management .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.remodeling-management .darkSection {
background: var(--black);
}
.remodeling-management .darkSection .panelHead {
background: var(--black-soft);
}
.remodeling-management .darkSection .productPanel {
background: var(--black-soft);
}
.remodeling-management .darkSection .copy .featureNote {
color: #CFCFCF;
}
.remodeling-management .darkSection .rowCopy strong {
color: #FFFFFF;
}
.remodeling-management .darkSection .rowCopy small {
color: #CFCFCF;
}
.remodeling-management .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.remodeling-management .assistantHead small {
font-size: 11px;
}
.remodeling-management .assistantNote {
font-size: 11px;
}
.remodeling-management .reportTags span {
font-size: 10px;
}
.remodeling-management .card p {
margin: 12px 0 0;
}
.remodeling-management .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.remodeling-management .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.remodeling-management .cards>.card {
display: flex;
flex-direction: column;
}
.remodeling-management .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.remodeling-management .cards>.card p {
padding-bottom: 22px;
}
.remodeling-management .benefitBand {
background: var(--black);
}
.remodeling-management .benefit {
background: var(--black-soft);
}
.remodeling-management .inlineCta h3 {
font-size: 20px;
}
.remodeling-management .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.remodeling-management .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.remodeling-management .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.remodeling-management .valueCtaSection {
padding: 32px 0;
}
.remodeling-management .proofCard p {
margin-top: 15px;
}
.remodeling-management .proofCard h3 {
font-size: 23px;
}
.remodeling-management .integrationNote {
margin-top: 23px;
}
.remodeling-management .ctaPanel {
background: var(--black);
}
.remodeling-management .ctaPanel p {
margin-top: 16px;
}
.remodeling-management .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.remodeling-management .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.remodeling-management a:hover {
text-decoration: none;
}
.remodeling-management .textCta:hover {
color: var(--navy);
}
.remodeling-management .darkSection .textCta:hover {
color: #FFFFFF;
}
.remodeling-management .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.remodeling-management .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.remodeling-management .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.remodeling-management .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.remodeling-management .heroVisual {
max-width: 548px;
}
.remodeling-management .hero .lead {
max-width: 700px;
}
.remodeling-management .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.remodeling-management .logoBox {
font-size: 18px;
border: 0 !important;
}
.remodeling-management .logoBox:last-child {
grid-column: auto;
}
.remodeling-management .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.remodeling-management .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.remodeling-management .inlineCtaActions .button {
flex: 1;
}
.remodeling-management .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.remodeling-management section {
padding: 55px 0;
}
.remodeling-management .hero {
padding: 28px 0 40px;
}
.remodeling-management .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.remodeling-management .heroActions {
gap: 10px;
}
.remodeling-management .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.remodeling-management .breadcrumb {
margin-bottom: 21px;
}
.remodeling-management .hero .eyebrow {
font-size: 11px;
}
.remodeling-management .heroVisual {
max-width: 480px;
}
.remodeling-management .heroPills {
row-gap: 9px;
}
.remodeling-management .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.remodeling-management .heroPills span+span {
padding-left: 7px;
}
.remodeling-management .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.remodeling-management .logoBox:last-child {
grid-column: 1/-1;
}
.remodeling-management .clientBand {
padding: 25px 0;
}
.remodeling-management .copy h2 {
font-size: 33px;
}
.remodeling-management .panelBody {
padding: 16px;
}
.remodeling-management .panelHead {
padding: 15px;
}
.remodeling-management .panelHead>strong {
font-size: 12px;
}
.remodeling-management .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.remodeling-management .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.remodeling-management .docHeader strong {
font-size: 18px;
}
.remodeling-management .docHeader small {
font-size: 10px;
}
.remodeling-management .rowCopy strong {
font-size: 11px;
}
.remodeling-management .rowCopy small {
font-size: 10px;
}
.remodeling-management .miniStats {
gap: 7px;
}
.remodeling-management .miniStats strong {
font-size: 21px;
}
.remodeling-management .miniStats span {
font-size: 9px;
}
.remodeling-management .miniStats>div {
padding: 10px 8px;
}
.remodeling-management .plantFacts {
gap: 8px;
}
.remodeling-management .plantFacts>div {
padding: 10px;
}
.remodeling-management .plantFacts strong {
font-size: 11px;
}
.remodeling-management .contextNote {
font-size: 10px;
gap: 8px;
}
.remodeling-management .utilityReadout {
padding: 12px;
gap: 10px;
}
.remodeling-management .utilityReadout span {
font-size: 8px;
}
.remodeling-management .utilityReadout strong {
font-size: 24px;
}
.remodeling-management .utilityReadout .utilityScope {
font-size: 14px;
}
.remodeling-management .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.remodeling-management .comparisonTable {
font-size: 11px;
}
.remodeling-management .comparisonTable th,
.remodeling-management .comparisonTable td {
padding: 13px 9px;
}
.remodeling-management .contextSection {
padding: 0 0 22px;
}
.remodeling-management .valueCtaSection {
padding: 25px 0;
}
.remodeling-management .inlineCtaActions {
flex-direction: column;
}
.remodeling-management .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.remodeling-management .mobileWorkspace {
grid-template-columns: 1fr;
}
.remodeling-management .phoneDevice {
width: 222px;
}
.remodeling-management .phoneDevice .rowIcon {
display: grid;
}
.remodeling-management .mobileSide {
grid-template-columns: 1fr;
}
.remodeling-management .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.remodeling-management .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0 0;
}
.remodeling-management .sideTile p {
margin: 0;
}
.remodeling-management .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.remodeling-management .dataRow {
gap: 8px;
}
.remodeling-management .statusPill {
font-size: 7px;
padding: 5px;
}
.remodeling-management .miniStats strong {
font-size: 19px;
}
.remodeling-management .heroActions {
flex-direction: column;
align-items: stretch;
}
.remodeling-management .heroActions .button {
width: 100%;
}
.remodeling-management .aiFlow {
grid-template-columns: 1fr;
}
.remodeling-management .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.remodeling-management .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.remodeling-management .aiStep strong {
margin: 0;
font-size: 15px;
}
.remodeling-management .aiStep span {
font-size: 13px;
}
.remodeling-management .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.remodeling-management {
background: var(--white);
}
.remodeling-management img {
display: block;
max-width: 100%;
}
.remodeling-management h1,
.remodeling-management h2,
.remodeling-management h3 {
text-wrap: balance;
}
.remodeling-management .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.remodeling-management .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.remodeling-management .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.remodeling-management .navlinks {
gap: 20px;
font-size: 12px;
}
.remodeling-management .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.remodeling-management .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.remodeling-management .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.remodeling-management .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.remodeling-management .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.remodeling-management .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.remodeling-management .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.remodeling-management .industryIntro {
padding: 78px 0 66px;
}
.remodeling-management .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.remodeling-management .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.remodeling-management .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.remodeling-management .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.remodeling-management .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.remodeling-management .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.remodeling-management .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.remodeling-management .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.remodeling-management .industryPriority>.icon2 {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.remodeling-management .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.remodeling-management .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.remodeling-management .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.remodeling-management .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.remodeling-management .industryPriority:hover {
border-color: var(--brand-dark);
}
.remodeling-management .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.remodeling-management .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.remodeling-management .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.remodeling-management .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.remodeling-management .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.remodeling-management .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.remodeling-management .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.remodeling-management .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.remodeling-management .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.remodeling-management .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.remodeling-management .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.remodeling-management .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.remodeling-management .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.remodeling-management .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.remodeling-management .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.remodeling-management .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.remodeling-management .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.remodeling-management .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.remodeling-management .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.remodeling-management .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.remodeling-management .vedaMessage.assistant>small {
color: var(--yellow);
}
.remodeling-management .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.remodeling-management .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.remodeling-management .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.remodeling-management .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.remodeling-management .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.remodeling-management .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.remodeling-management .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.remodeling-management .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.remodeling-management .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.remodeling-management .manufacturingSpotlight {
padding: 73px 0;
}
.remodeling-management .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.remodeling-management .rfidSpotlight {
background: #fff;
}
.remodeling-management .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.remodeling-management .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.remodeling-management .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.remodeling-management .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.remodeling-management .spotlightHead h2 span {
color: var(--brand-dark);
}
.remodeling-management .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.remodeling-management .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.remodeling-management .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.remodeling-management .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.remodeling-management .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.remodeling-management .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.remodeling-management .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.remodeling-management .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.remodeling-management .featureTab:hover {
border-color: var(--brand-dark);
}
.remodeling-management .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.remodeling-management .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.remodeling-management .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.remodeling-management .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.remodeling-management .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.remodeling-management .featurePanel {
display: none;
}
.remodeling-management .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.remodeling-management .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.remodeling-management .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.remodeling-management .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.remodeling-management .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.remodeling-management .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.remodeling-management .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.remodeling-management .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.remodeling-management .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.remodeling-management .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.remodeling-management .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.remodeling-management .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.remodeling-management .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.remodeling-management .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.remodeling-management .decisionSpotlight .textCta {
color: var(--yellow);
}
.remodeling-management .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.remodeling-management .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.remodeling-management .mediaTitle>.icon2 {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.remodeling-management .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.remodeling-management .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.remodeling-management .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.remodeling-management .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.remodeling-management .signalFlow>.icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.remodeling-management .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.remodeling-management .rfidImageSurface {
background: #172029;
padding: 5px;
}
.remodeling-management .rfidImageSurface img {
width: 100%;
height: auto;
}
.remodeling-management .rfidMedia figcaption {
padding-top: 13px;
}
.remodeling-management .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.remodeling-management .aiReviewBody {
padding: 18px;
}
.remodeling-management .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.remodeling-management .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.remodeling-management .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.remodeling-management .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.remodeling-management .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.remodeling-management .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.remodeling-management .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.remodeling-management .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.remodeling-management .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.remodeling-management .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.remodeling-management .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.remodeling-management .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.remodeling-management .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.remodeling-management .aiReviewAction strong {
display: block;
font-size: 11px;
}
.remodeling-management .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.remodeling-management .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.remodeling-management .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.remodeling-management .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.remodeling-management .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.remodeling-management .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.remodeling-management .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.remodeling-management .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.remodeling-management .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.remodeling-management .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.remodeling-management .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.remodeling-management .workflowDetails summary::-webkit-details-marker {
display: none;
}
.remodeling-management .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.remodeling-management .workflowDetails[open] summary::after {
content: "−";
}
.remodeling-management .workflowDetails .featureList,
.remodeling-management .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.remodeling-management .workflowDetails .featureItem {
font-size: 11px;
}
.remodeling-management .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.remodeling-management .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.remodeling-management #remodeling-connected-tools {
background: #fff;
}
.remodeling-management #remodeling-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.remodeling-management .featureTab,
.remodeling-management .industryPriority,
.remodeling-management summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.remodeling-management .industryIntroHead {
gap: 30px;
}
.remodeling-management .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.remodeling-management .featureStage {
gap: 26px;
padding: 26px;
}
.remodeling-management .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.remodeling-management .factoryWorkflow {
padding: 22px;
}
.remodeling-management .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.remodeling-management .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.remodeling-management .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.remodeling-management .industryPriorityGrid {
gap: 14px;
}
.remodeling-management .industryPriority {
padding: 22px 19px;
}
.remodeling-management .industryPriority h3 {
font-size: 21px;
}
.remodeling-management .industryPriority p {
font-size: 12px;
}
.remodeling-management .priorityLink {
font-size: 10px;
}
.remodeling-management .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.remodeling-management .vedaIndustryCopy h2 {
font-size: 39px;
}
.remodeling-management .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.remodeling-management .vedaUseCases>div {
display: block;
}
.remodeling-management .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.remodeling-management .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.remodeling-management .featureTabs {
gap: 8px;
}
.remodeling-management .featureTab {
min-height: 108px;
}
.remodeling-management .featureStage,
.remodeling-management .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.remodeling-management .rfidSpotlight .spotlightMedia,
.remodeling-management .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.remodeling-management .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.remodeling-management .featurePanel {
min-height: 0;
}
.remodeling-management .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.remodeling-management .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.remodeling-management .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.remodeling-management .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.remodeling-management .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.remodeling-management .clientBand {
padding: 22px 0;
}
.remodeling-management .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.remodeling-management .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.remodeling-management .clientBand .logoBox.wide {
font-size: 10px;
}
.remodeling-management .clientBand .logoBox:last-child {
grid-column: auto;
}
.remodeling-management .industryIntro {
padding: 53px 0;
}
.remodeling-management .industryIntroHead h2 {
font-size: 32px;
}
.remodeling-management .industryIntroHead>p {
font-size: 14px;
}
.remodeling-management .industryPriorityGrid {
grid-template-columns: 1fr;
}
.remodeling-management .industryPriority {
padding: 23px;
}
.remodeling-management .industryPriority h3 {
font-size: 24px;
}
.remodeling-management .industryPriority>.icon2 {
margin: 5px 0 15px;
}
.remodeling-management .industryPriority p {
font-size: 13px;
}
.remodeling-management .priorityLink {
font-size: 11px;
}
.remodeling-management .vedaIndustry {
padding: 0 0 52px;
}
.remodeling-management .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.remodeling-management .vedaIndustryCopy h2 {
font-size: 32px;
}
.remodeling-management .vedaIndustryCopy>p {
font-size: 14px;
}
.remodeling-management .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.remodeling-management .vedaUseCases>div {
display: flex;
}
.remodeling-management .vedaConversationHead {
padding: 16px 13px;
}
.remodeling-management .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.remodeling-management .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.remodeling-management .vedaMessage.user {
margin-left: 25px;
}
.remodeling-management .vedaMessage.assistant {
margin-right: 14px;
}
.remodeling-management .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.remodeling-management .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.remodeling-management .manufacturingSpotlight {
padding: 54px 0;
}
.remodeling-management .spotlightHead h2 {
font-size: 32px;
}
.remodeling-management .spotlightHead>p {
font-size: 14px;
}
.remodeling-management .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.remodeling-management .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.remodeling-management .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.remodeling-management .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.remodeling-management .featurePanel h3 {
font-size: 24px;
}
.remodeling-management .featurePanel>p {
font-size: 13px;
}
.remodeling-management .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.remodeling-management .spotlightChecks>li {
font-size: 12px;
}
.remodeling-management .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.remodeling-management .spotlightActions .button {
width: 100%;
}
.remodeling-management .spotlightScope {
font-size: 10px;
}
.remodeling-management .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.remodeling-management .mediaTitle strong {
font-size: 11px;
}
.remodeling-management .mediaTitle div>span {
font-size: 8px;
}
.remodeling-management .mediaTitle>.icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.remodeling-management .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.remodeling-management .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.remodeling-management .rfidMedia figcaption {
padding-top: 12px;
}
.remodeling-management .aiReviewBody {
padding: 13px;
}
.remodeling-management .aiIssue {
padding: 13px;
}
.remodeling-management .aiIssue strong {
font-size: 14px;
}
.remodeling-management .aiEvidence {
gap: 6px;
}
.remodeling-management .aiEvidence>div {
padding: 10px 7px;
}
.remodeling-management .aiEvidence strong {
font-size: 9px;
}
.remodeling-management .aiEvidence span {
font-size: 7px;
}
.remodeling-management .exampleLabel {
font-size: 6px;
}
.remodeling-management .factoryWorkflows {
padding: 55px 0;
}
.remodeling-management .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.remodeling-management .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.remodeling-management .industryRibbonGrid {
gap: 12px;
}
.remodeling-management .industryRibbonGrid>div {
font-size: 10px;
}
.remodeling-management .spotlightHead h2 {
font-size: 29px;
}
.remodeling-management .featureStage {
padding: 19px 13px;
}
.remodeling-management .mediaTitle>.icon2 {
display: none;
}
.remodeling-management .exampleLabel {
display: none;
}
.remodeling-management .vedaBrand {
font-size: 27px;
}
}
@media print {
.remodeling-management .featureTabs {
display: none;
}
.remodeling-management .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.remodeling-management .featureStage {
display: block;
}
.remodeling-management .featurePanel {
color: #000;
}
}
.remodeling-management #remodeling-delivery-features-1:checked~.featureTabs label[for="remodeling-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-delivery-features-1:focus-visible~.featureTabs label[for="remodeling-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.remodeling-management #remodeling-delivery-features-2:checked~.featureTabs label[for="remodeling-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-delivery-features-2:focus-visible~.featureTabs label[for="remodeling-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.remodeling-management #remodeling-delivery-features-3:checked~.featureTabs label[for="remodeling-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-delivery-features-3:focus-visible~.featureTabs label[for="remodeling-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.remodeling-management #remodeling-delivery-features-4:checked~.featureTabs label[for="remodeling-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-delivery-features-4:focus-visible~.featureTabs label[for="remodeling-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.remodeling-management #remodeling-delivery-features-5:checked~.featureTabs label[for="remodeling-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-delivery-features-5:focus-visible~.featureTabs label[for="remodeling-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.remodeling-management #remodeling-rfid-features-1:checked~.featureTabs label[for="remodeling-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-rfid-features-1:focus-visible~.featureTabs label[for="remodeling-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.remodeling-management #remodeling-rfid-features-2:checked~.featureTabs label[for="remodeling-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-rfid-features-2:focus-visible~.featureTabs label[for="remodeling-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.remodeling-management #remodeling-rfid-features-3:checked~.featureTabs label[for="remodeling-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-rfid-features-3:focus-visible~.featureTabs label[for="remodeling-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.remodeling-management #remodeling-rfid-features-4:checked~.featureTabs label[for="remodeling-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-rfid-features-4:focus-visible~.featureTabs label[for="remodeling-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.remodeling-management #remodeling-rfid-features-5:checked~.featureTabs label[for="remodeling-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-rfid-features-5:focus-visible~.featureTabs label[for="remodeling-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-1:checked~.featureTabs label[for="remodeling-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-ai-decisions-features-1:focus-visible~.featureTabs label[for="remodeling-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-2:checked~.featureTabs label[for="remodeling-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-ai-decisions-features-2:focus-visible~.featureTabs label[for="remodeling-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-3:checked~.featureTabs label[for="remodeling-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-ai-decisions-features-3:focus-visible~.featureTabs label[for="remodeling-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-4:checked~.featureTabs label[for="remodeling-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-ai-decisions-features-4:focus-visible~.featureTabs label[for="remodeling-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-5:checked~.featureTabs label[for="remodeling-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.remodeling-management #remodeling-ai-decisions-features-5:focus-visible~.featureTabs label[for="remodeling-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.remodeling-management #remodeling-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.remodeling-management .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .featureMediaPanels {
min-width: 0;
}
.remodeling-management .featureMediaPanels .miniChart {
height: 178px;
}
.remodeling-management .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.remodeling-management .featureMediaPanels .windowTop strong,
.remodeling-management .featureMediaPanels .windowTop small {
display: block;
}
.remodeling-management .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.remodeling-management .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.remodeling-management .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.remodeling-management .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.remodeling-management .featureMediaPanels .windowBody>*,
.remodeling-management .featureMediaPanels .spectrumGrid>*,
.remodeling-management .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.remodeling-management .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.remodeling-management .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.remodeling-management .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.remodeling-management .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.remodeling-management .featureMediaPanels .graphNodes {
min-height: 258px;
}
.remodeling-management .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.remodeling-management .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.remodeling-management .featureMediaPanels .mapPin {
box-shadow: none;
}
.remodeling-management .pin2 {
top: 88px;
right: 88px;
}
.remodeling-management .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.remodeling-management .featureMediaPanels .mediaShell {
padding: 10px;
}
.remodeling-management .featureMediaPanels .windowBody {
padding: 10px;
}
.remodeling-management .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .featureMediaPanels .alertBadge {
justify-self: start;
}
.remodeling-management .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.remodeling-management .featureMediaPanels .graphNodes .node.n1,
.remodeling-management .featureMediaPanels .graphNodes .node.n2,
.remodeling-management .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.remodeling-management .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.remodeling-management .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.remodeling-management .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.remodeling-management .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.remodeling-management .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.remodeling-management .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.remodeling-management .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.remodeling-management .freshGraphic * {
box-sizing: border-box;
}
.remodeling-management .rfPanel,
.remodeling-management .aiInsightCard,
.remodeling-management .forecastVisualCard,
.remodeling-management .forecastSuggestion,
.remodeling-management .knowledgeTile,
.remodeling-management .chatConversation,
.remodeling-management .trainingSummary,
.remodeling-management .moduleCard,
.remodeling-management .qualityHeatCard,
.remodeling-management .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.remodeling-management .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.remodeling-management .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.remodeling-management .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.remodeling-management .statusPill,
.remodeling-management .cardTag,
.remodeling-management .forecastSuggestion b,
.remodeling-management .moduleCard b,
.remodeling-management .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.remodeling-management .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.remodeling-management .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.remodeling-management .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.remodeling-management .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.remodeling-management .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.remodeling-management .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.remodeling-management .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.remodeling-management .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.remodeling-management .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.remodeling-management .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.remodeling-management .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.remodeling-management .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.remodeling-management .dot.good {
background: #298EEC;
}
.remodeling-management .dot.warn {
background: #F4A62A;
}
.remodeling-management .dot.bad {
background: #EB6B53;
}
.remodeling-management .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.remodeling-management .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.remodeling-management .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.remodeling-management .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.remodeling-management .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.remodeling-management .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.remodeling-management .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.remodeling-management .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.remodeling-management .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.remodeling-management .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.remodeling-management .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.remodeling-management .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.remodeling-management .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.remodeling-management .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.remodeling-management .moveRow b {
color: #298EEC;
font-size: 9px;
}
.remodeling-management .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.remodeling-management .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.remodeling-management .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.remodeling-management .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.remodeling-management .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.remodeling-management .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.remodeling-management .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.remodeling-management .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.remodeling-management .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.remodeling-management .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.remodeling-management .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.remodeling-management .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.remodeling-management .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.remodeling-management .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.remodeling-management .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.remodeling-management .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.remodeling-management .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.remodeling-management .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.remodeling-management .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.remodeling-management .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.remodeling-management .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.remodeling-management .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.remodeling-management .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.remodeling-management .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.remodeling-management .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.remodeling-management .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.remodeling-management .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.remodeling-management .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.remodeling-management .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.remodeling-management .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.remodeling-management .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.remodeling-management .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.remodeling-management .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.remodeling-management .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.remodeling-management .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.remodeling-management .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.remodeling-management .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.remodeling-management .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.remodeling-management .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.remodeling-management .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.remodeling-management .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.remodeling-management .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.remodeling-management .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.remodeling-management .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.remodeling-management .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.remodeling-management .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.remodeling-management .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.remodeling-management .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.remodeling-management .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.remodeling-management .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.remodeling-management .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.remodeling-management .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.remodeling-management .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.remodeling-management .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.remodeling-management .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.remodeling-management .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.remodeling-management .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.remodeling-management .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.remodeling-management .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.remodeling-management .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.remodeling-management .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.remodeling-management .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.remodeling-management .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.remodeling-management .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.remodeling-management .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.remodeling-management .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.remodeling-management .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.remodeling-management .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.remodeling-management .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.remodeling-management .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.remodeling-management .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.remodeling-management .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.remodeling-management .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.remodeling-management .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.remodeling-management .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.remodeling-management .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.remodeling-management .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.remodeling-management .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.remodeling-management .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.remodeling-management .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.remodeling-management .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.remodeling-management .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.remodeling-management .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.remodeling-management .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.remodeling-management .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.remodeling-management .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.remodeling-management .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.remodeling-management .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.remodeling-management .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.remodeling-management .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.remodeling-management .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.remodeling-management .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.remodeling-management .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.remodeling-management .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.remodeling-management .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.remodeling-management .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.remodeling-management .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.remodeling-management .chartLegend .sw.blue {
background: #298EEC;
}
.remodeling-management .chartLegend .sw.amber {
background: #F4A62A;
}
.remodeling-management .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.remodeling-management .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.remodeling-management .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.remodeling-management .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.remodeling-management .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.remodeling-management .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.remodeling-management .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.remodeling-management .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.remodeling-management .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.remodeling-management .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.remodeling-management .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.remodeling-management .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.remodeling-management .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.remodeling-management .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.remodeling-management .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.remodeling-management .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.remodeling-management .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.remodeling-management .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.remodeling-management .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.remodeling-management .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.remodeling-management .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.remodeling-management .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.remodeling-management .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.remodeling-management .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.remodeling-management .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.remodeling-management .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.remodeling-management .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.remodeling-management .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.remodeling-management .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.remodeling-management .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.remodeling-management .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.remodeling-management .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.remodeling-management .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.remodeling-management .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.remodeling-management .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.remodeling-management .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.remodeling-management .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.remodeling-management .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.remodeling-management .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.remodeling-management .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.remodeling-management .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.remodeling-management .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.remodeling-management .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.remodeling-management .freshGraphic {
height: auto;
min-height: 420px;
}
.remodeling-management .rfTrackLayout,
.remodeling-management .rfFlowLayout,
.remodeling-management .rfAlertGrid,
.remodeling-management .rfCycleLayout,
.remodeling-management .rfSitesLayout,
.remodeling-management .aiRootLayout,
.remodeling-management .aiForecastLayout,
.remodeling-management .aiChatLayout,
.remodeling-management .aiTrainingLayout,
.remodeling-management .aiQualityLayout,
.remodeling-management .trainingModuleGrid {
grid-template-columns: 1fr;
}
.remodeling-management .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.remodeling-management .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.remodeling-management .rfAlertGrid {
grid-template-columns: 1fr;
}
.remodeling-management .qualityHeatGrid span {
min-height: 40px;
}
.remodeling-management .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.remodeling-management .aiLink {
display: none;
}
}
.remodeling-management .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.remodeling-management .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.remodeling-management .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.remodeling-management .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.remodeling-management .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.remodeling-management .mfgHeroBreadcrumb a {
color: inherit;
}
.remodeling-management .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.remodeling-management .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.remodeling-management .mfgHero h1 {
color: #fff;
}
.remodeling-management .mfgHero h1>span {
display: block;
}
.remodeling-management .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.remodeling-management .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.remodeling-management .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.remodeling-management .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.remodeling-management .mfgHeroActions .outline:hover {
background: #172029;
}
.remodeling-management .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.remodeling-management .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.remodeling-management .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.remodeling-management .mfgHeroContent {
min-height: 610px;
}
.remodeling-management .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.remodeling-management .mfgHeroLead {
font-size: 16px;
}
.remodeling-management .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.remodeling-management .mfgHero {
display: flex;
flex-direction: column;
}
.remodeling-management .mfgHeroContent {
order: 0;
min-height: 0;
}
.remodeling-management .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.remodeling-management .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.remodeling-management .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.remodeling-management .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.remodeling-management .mfgHeroCopy {
padding: 25px 0 20px;
}
.remodeling-management .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.remodeling-management .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.remodeling-management .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.remodeling-management .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.remodeling-management .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.remodeling-management .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.remodeling-management .mfgHeroScene {
height: 280px;
}
}
@media print {
.remodeling-management .mfgHero {
background: #fff;
color: #000;
}
.remodeling-management .mfgHeroScene,
.remodeling-management .mfgHeroActions {
display: none;
}
.remodeling-management .mfgHeroContent {
min-height: 0;
}
.remodeling-management .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
.remodeling-management #remodeling-rfid .featureStage,
.remodeling-management #remodeling-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.remodeling-management .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.remodeling-management .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.remodeling-management .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.remodeling-management .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.remodeling-management .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.remodeling-management .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.remodeling-management .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.remodeling-management .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.remodeling-management .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.remodeling-management .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.remodeling-management .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.remodeling-management .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.remodeling-management .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.remodeling-management .mfgGallery .rfPanel {
border-radius: 12px;
}
.remodeling-management .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.remodeling-management .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.remodeling-management .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.remodeling-management .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.remodeling-management .mfgGallery .shelf span {
font-size: 11px;
}
.remodeling-management .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.remodeling-management .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.remodeling-management .mfgGallery .rfKpiGrid {
gap: 8px;
}
.remodeling-management .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.remodeling-management .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.remodeling-management .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.remodeling-management .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.remodeling-management .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.remodeling-management .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.remodeling-management .mfgGallery .rfScanCard span {
font-size: 9px;
}
.remodeling-management .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.remodeling-management .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.remodeling-management .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.remodeling-management .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.remodeling-management .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.remodeling-management .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.remodeling-management .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.remodeling-management .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.remodeling-management .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.remodeling-management .mfgGallery .flowArrow {
display: none;
}
.remodeling-management .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.remodeling-management .mfgGallery .railItem {
padding: 9px 7px;
}
.remodeling-management .mfgGallery .railItem b {
font-size: 10px;
}
.remodeling-management .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.remodeling-management .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.remodeling-management .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.remodeling-management .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.remodeling-management .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.remodeling-management .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.remodeling-management .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.remodeling-management .mfgGallery .reorderCard strong {
font-size: 13px;
}
.remodeling-management .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.remodeling-management .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.remodeling-management .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.remodeling-management .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.remodeling-management .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.remodeling-management .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.remodeling-management .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.remodeling-management .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.remodeling-management .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.remodeling-management .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.remodeling-management .mfgGallery .varianceCard {
padding: 12px;
}
.remodeling-management .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.remodeling-management .mfgGallery .varianceCard small {
font-size: 10px;
}
.remodeling-management .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.remodeling-management .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.remodeling-management .mfgGallery .deviceTop {
font-size: 11px;
}
.remodeling-management .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.remodeling-management .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.remodeling-management .mfgGallery .deviceMetric {
padding: 9px;
}
.remodeling-management .mfgGallery .deviceMetric span {
font-size: 10px;
}
.remodeling-management .mfgGallery .deviceMetric b {
font-size: 12px;
}
.remodeling-management .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.remodeling-management .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.remodeling-management .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.remodeling-management .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.remodeling-management .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.remodeling-management .mfgGallery .siteNode.north {
top: 6px;
}
.remodeling-management .mfgGallery .siteNode.south {
bottom: 6px;
}
.remodeling-management .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.remodeling-management .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.remodeling-management .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.remodeling-management .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.remodeling-management .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.remodeling-management .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.remodeling-management .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.remodeling-management .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.remodeling-management .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.remodeling-management .mfgGallery .siteSummary strong {
font-size: 12px;
}
.remodeling-management .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.remodeling-management .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.remodeling-management .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.remodeling-management .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.remodeling-management .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.remodeling-management .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.remodeling-management .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.remodeling-management .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.remodeling-management .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.remodeling-management .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.remodeling-management .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.remodeling-management .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.remodeling-management .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.remodeling-management .mfgGallery .insightMeta {
gap: 6px;
}
.remodeling-management .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.remodeling-management .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.remodeling-management .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.remodeling-management .mfgGallery .chartHeader span {
font-size: 10px;
}
.remodeling-management .mfgGallery .chartHeader b {
font-size: 11px;
}
.remodeling-management .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.remodeling-management .mfgGallery .chartLegend {
font-size: 10px;
}
.remodeling-management .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.remodeling-management .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.remodeling-management .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.remodeling-management .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.remodeling-management .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.remodeling-management .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.remodeling-management .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.remodeling-management .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.remodeling-management .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.remodeling-management .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.remodeling-management .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.remodeling-management .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.remodeling-management .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.remodeling-management .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.remodeling-management .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.remodeling-management .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.remodeling-management .mfgGallery .progressCenter strong {
font-size: 25px;
}
.remodeling-management .mfgGallery .trainingStatList {
gap: 9px;
}
.remodeling-management .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.remodeling-management .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.remodeling-management .mfgGallery .trainingStatList span {
font-size: 10px;
}
.remodeling-management .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.remodeling-management .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.remodeling-management .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.remodeling-management .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.remodeling-management .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.remodeling-management .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.remodeling-management .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.remodeling-management .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.remodeling-management .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.remodeling-management .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.remodeling-management .mfgGallery .qualityCaption span {
font-size: 10px;
}
.remodeling-management .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.remodeling-management .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.remodeling-management .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.remodeling-management .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.remodeling-management .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.remodeling-management #remodeling-rfid .featureStage,
.remodeling-management #remodeling-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.remodeling-management #remodeling-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.remodeling-management .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.remodeling-management #remodeling-rfid .featureStage,
.remodeling-management #remodeling-ai-decisions .featureStage {
padding: 16px;
}
.remodeling-management .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.remodeling-management .mfgGallery .freshWindow {
height: auto;
}
.remodeling-management .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.remodeling-management .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .mfgGallery .freshTop strong {
font-size: 13px;
}
.remodeling-management .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.remodeling-management .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.remodeling-management .mfgGallery .rfShelfPanel {
padding: 10px;
}
.remodeling-management .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.remodeling-management .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.remodeling-management .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.remodeling-management .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.remodeling-management .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.remodeling-management .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.remodeling-management .mfgGallery .flowNum {
grid-row: 1/3;
}
.remodeling-management .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.remodeling-management .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.remodeling-management .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.remodeling-management .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.remodeling-management .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.remodeling-management .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.remodeling-management .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.remodeling-management .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.remodeling-management .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.remodeling-management .mfgGallery .rfActionStrip {
height: auto;
}
.remodeling-management .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .mfgGallery .countPanel {
gap: 14px;
}
.remodeling-management .mfgGallery .handheldPanel {
padding: 15px;
}
.remodeling-management .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.remodeling-management .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.remodeling-management .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.remodeling-management .mfgGallery .siteNode.east {
right: 3%;
}
.remodeling-management .mfgGallery .siteNode.west {
left: 3%;
}
.remodeling-management .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.remodeling-management .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.remodeling-management .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.remodeling-management .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.remodeling-management .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.remodeling-management .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.remodeling-management .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.remodeling-management .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.remodeling-management .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.remodeling-management .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.remodeling-management .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.remodeling-management .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.remodeling-management .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.remodeling-management .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.remodeling-management .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.remodeling-management .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.remodeling-management .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.remodeling-management .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.remodeling-management .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.remodeling-management .mfgGallery .moduleCard {
padding: 10px;
}
.remodeling-management .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.remodeling-management .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.remodeling-management .mfgGallery .qualityAction strong {
font-size: 12px;
}
.remodeling-management .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.remodeling-management .mfgGallery .shelf i::after {
bottom: 0;
}
.remodeling-management .remodelingVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.remodeling-management .remodelingGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.remodeling-management .remodelingVisualGallery>.remodelingGraphic {
display: none;
}
.remodeling-management #remodeling-delivery .featureStage,
.remodeling-management #remodeling-rfid .featureStage,
.remodeling-management #remodeling-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.remodeling-management #remodeling-rfid .remodelingVisualGallery {
grid-column: 1;
grid-row: 1;
}
.remodeling-management #remodeling-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.remodeling-management .factoryWorkflow {
display: flex;
flex-direction: column;
}
.remodeling-management .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.remodeling-management .factoryWorkflow>p {
margin-bottom: 22px;
}
.remodeling-management .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.remodeling-management #remodeling-delivery .featureStage,
.remodeling-management #remodeling-rfid .featureStage,
.remodeling-management #remodeling-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.remodeling-management #remodeling-rfid .remodelingVisualGallery,
.remodeling-management #remodeling-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.remodeling-management .mfgHeroScene {
height: 290px;
}
.remodeling-management #remodeling-delivery .featureStage,
.remodeling-management #remodeling-rfid .featureStage,
.remodeling-management #remodeling-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.remodeling-management .remodelingVisualGallery {
width: 100%;
}
}
@media print {
.remodeling-management .remodelingVisualGallery>.remodelingGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.remodeling-management #remodeling-delivery-features-1:checked~.featureStage .remodelingVisualGallery> :nth-child(1) {
display: block;
}
.remodeling-management #remodeling-delivery-features-2:checked~.featureStage .remodelingVisualGallery> :nth-child(2) {
display: block;
}
.remodeling-management #remodeling-delivery-features-3:checked~.featureStage .remodelingVisualGallery> :nth-child(3) {
display: block;
}
.remodeling-management #remodeling-delivery-features-4:checked~.featureStage .remodelingVisualGallery> :nth-child(4) {
display: block;
}
.remodeling-management #remodeling-delivery-features-5:checked~.featureStage .remodelingVisualGallery> :nth-child(5) {
display: block;
}
.remodeling-management #remodeling-rfid-features-1:checked~.featureStage .remodelingVisualGallery> :nth-child(1) {
display: block;
}
.remodeling-management #remodeling-rfid-features-2:checked~.featureStage .remodelingVisualGallery> :nth-child(2) {
display: block;
}
.remodeling-management #remodeling-rfid-features-3:checked~.featureStage .remodelingVisualGallery> :nth-child(3) {
display: block;
}
.remodeling-management #remodeling-rfid-features-4:checked~.featureStage .remodelingVisualGallery> :nth-child(4) {
display: block;
}
.remodeling-management #remodeling-rfid-features-5:checked~.featureStage .remodelingVisualGallery> :nth-child(5) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-1:checked~.featureStage .remodelingVisualGallery> :nth-child(1) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-2:checked~.featureStage .remodelingVisualGallery> :nth-child(2) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-3:checked~.featureStage .remodelingVisualGallery> :nth-child(3) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-4:checked~.featureStage .remodelingVisualGallery> :nth-child(4) {
display: block;
}
.remodeling-management #remodeling-ai-decisions-features-5:checked~.featureStage .remodelingVisualGallery> :nth-child(5) {
display: block;
}
.remodeling-management .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.remodeling-management .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.remodeling-management .remodelingIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.remodeling-management .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 70% 50%;
}
.remodeling-management .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.remodeling-management .mfgHeroScene img {
object-position: 78% 50%;
}
.remodeling-management .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.remodeling-management .mfgHeroScene img {
object-position: 72% 50%;
}
.remodeling-management .remodelingIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
.remodeling-management .remodelingVisualGallery {
min-height: 0;
}
.remodeling-management .remodelingIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 90% 50%;
}
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
.remodeling-management .remodelingVisualGallery {
min-height: 0;
}
.remodeling-management .mfgHeroScene img {
object-position: 72% 50%;
}
.remodeling-management .remodelingIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.remodeling-management .remodelingGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 80% 50%;
}
}
.remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 74% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 83% 50%;
}
}
.remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 74% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 86% 50%;
}
}
.remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 76% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 87% 50%;
}
}
.remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 76% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.remodeling-management #remodeling-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 88% 50%;
}
}
.remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 77% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.remodeling-management #remodeling-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 85% 50%;
}
}
.remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 78% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.remodeling-management #remodeling-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 80% 50%;
}
}
.remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 78% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.remodeling-management #remodeling-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 80% 50%;
}
}
.remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 74% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 80% 50%;
}
} .remodeling-management .mfgHeroContent {
background: transparent;
}
.remodeling-management .mfgHeroScene img {
object-position: 74% 50%;
}
.remodeling-management .remodelingIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.remodeling-management .remodelingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.remodeling-management .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.remodeling-management .mfgHeroScene img {
object-position: 80% 50%;
}
}  #dreamz-homebuilder .industryIntroHead.compact,
#dreamz-homebuilder .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-homebuilder .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-homebuilder .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-homebuilder .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-homebuilder .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-homebuilder .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-homebuilder .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-homebuilder .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-homebuilder .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-homebuilder .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-homebuilder .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-homebuilder .windowDots {
display: flex;
gap: 5px;
}
#dreamz-homebuilder .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-homebuilder .windowBody {
padding: 16px;
}
#dreamz-homebuilder .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-homebuilder .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-homebuilder .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-homebuilder .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-homebuilder .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-homebuilder .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-homebuilder .chartGridLine.l1 {
top: 34px;
}
#dreamz-homebuilder .chartGridLine.l2 {
top: 65px;
}
#dreamz-homebuilder .chartGridLine.l3 {
top: 96px;
}
#dreamz-homebuilder .chartGridLine.l4 {
top: 127px;
}
#dreamz-homebuilder .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-homebuilder .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-homebuilder .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-homebuilder .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-homebuilder .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-homebuilder .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-homebuilder .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-homebuilder .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-homebuilder .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-homebuilder .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-homebuilder .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-homebuilder .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-homebuilder .noteCard p,
#dreamz-homebuilder .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-homebuilder .alertStack {
display: grid;
gap: 10px;
}
#dreamz-homebuilder .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-homebuilder .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-homebuilder .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-homebuilder .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-homebuilder .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-homebuilder .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-homebuilder .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-homebuilder .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-homebuilder .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-homebuilder .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-homebuilder .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-homebuilder .scheduleBoard h4,
#dreamz-homebuilder .todoBoard h4,
#dreamz-homebuilder .siteBoard h4,
#dreamz-homebuilder .chatPanel h4,
#dreamz-homebuilder .lessonPanel h4,
#dreamz-homebuilder .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-homebuilder .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-homebuilder .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-homebuilder .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-homebuilder .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-homebuilder .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-homebuilder .taskRow:last-child {
border-bottom: 0;
}
#dreamz-homebuilder .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-homebuilder .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-homebuilder .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-homebuilder .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-homebuilder .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-homebuilder .inventoryTable th,
#dreamz-homebuilder .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-homebuilder .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-homebuilder .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-homebuilder .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-homebuilder .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-homebuilder .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-homebuilder .phoneBody {
padding: 12px;
}
#dreamz-homebuilder .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-homebuilder .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-homebuilder .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-homebuilder .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-homebuilder .progressList {
display: grid;
gap: 10px;
}
#dreamz-homebuilder .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-homebuilder .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-homebuilder .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-homebuilder .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-homebuilder .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-homebuilder .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-homebuilder .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-homebuilder .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-homebuilder .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-homebuilder .pin1 {
top: 56px;
left: 58px;
}
#dreamz-homebuilder .pin2 {
top: 88px;
right: 88px;
}
#dreamz-homebuilder .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-homebuilder .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-homebuilder .siteRow:last-child {
border-bottom: 0;
}
#dreamz-homebuilder .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-homebuilder .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-homebuilder .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-homebuilder .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-homebuilder .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-homebuilder .graphNodes:before,
#dreamz-homebuilder .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-homebuilder .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-homebuilder .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-homebuilder .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-homebuilder .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-homebuilder .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-homebuilder .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-homebuilder .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-homebuilder .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-homebuilder .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-homebuilder .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-homebuilder .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-homebuilder .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-homebuilder .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-homebuilder .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-homebuilder .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-homebuilder .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-homebuilder .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-homebuilder .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-homebuilder .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-homebuilder .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-homebuilder .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-homebuilder .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-homebuilder .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-homebuilder .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-homebuilder .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-homebuilder .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-homebuilder .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-homebuilder .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-homebuilder .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-homebuilder .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-homebuilder .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-homebuilder .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-homebuilder .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-homebuilder #homebuilder-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-homebuilder #homebuilder-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-homebuilder #homebuilder-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-homebuilder #homebuilder-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-homebuilder #homebuilder-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-homebuilder #homebuilder-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-homebuilder #homebuilder-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-homebuilder #homebuilder-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-homebuilder #homebuilder-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-homebuilder #homebuilder-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-homebuilder #homebuilder-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-homebuilder #homebuilder-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-homebuilder #homebuilder-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-homebuilder #homebuilder-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-homebuilder #homebuilder-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-homebuilder #homebuilder-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-homebuilder #homebuilder-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-homebuilder #homebuilder-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-homebuilder #homebuilder-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-homebuilder #homebuilder-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-homebuilder #homebuilder-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-homebuilder #homebuilder-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-homebuilder #homebuilder-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-homebuilder #homebuilder-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-homebuilder #homebuilder-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-homebuilder #homebuilder-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-homebuilder #homebuilder-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-homebuilder #homebuilder-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-homebuilder #homebuilder-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-homebuilder .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-homebuilder .featureMediaPanels {
min-height: 0;
}
#dreamz-homebuilder .inventorySplit,
#dreamz-homebuilder .forecastGrid,
#dreamz-homebuilder .siteGrid,
#dreamz-homebuilder .spectrumGrid,
#dreamz-homebuilder .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-homebuilder .metricGrid,
#dreamz-homebuilder .lessonCards,
#dreamz-homebuilder .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-homebuilder .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-homebuilder {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-homebuilder * {
box-sizing: border-box;
}
#dreamz-homebuilder {
scroll-behavior: smooth;
}
#dreamz-homebuilder {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-homebuilder a {
color: inherit;
text-decoration: none;
}
#dreamz-homebuilder .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-homebuilder .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-homebuilder .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-homebuilder .brand span {
color: var(--brand);
}
#dreamz-homebuilder .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-homebuilder .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-homebuilder .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-homebuilder .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-homebuilder .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-homebuilder .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-homebuilder .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-homebuilder .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-homebuilder h1,
#dreamz-homebuilder h2,
#dreamz-homebuilder h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
#dreamz-homebuilder h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
#dreamz-homebuilder h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
}
#dreamz-homebuilder h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-homebuilder .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-homebuilder .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-homebuilder .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-homebuilder .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-homebuilder .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-homebuilder .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-homebuilder .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-homebuilder .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-homebuilder .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-homebuilder .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-homebuilder .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-homebuilder .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-homebuilder .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-homebuilder .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-homebuilder .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-homebuilder .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-homebuilder .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-homebuilder .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-homebuilder .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-homebuilder .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-homebuilder .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-homebuilder .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-homebuilder .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-homebuilder .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-homebuilder .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-homebuilder .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-homebuilder .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
#dreamz-homebuilder .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-homebuilder .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-homebuilder .aiJourney h2 {
color: #fff;
}
#dreamz-homebuilder .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-homebuilder .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-homebuilder .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-homebuilder .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-homebuilder .aiStep:last-child::after {
display: none;
}
#dreamz-homebuilder .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-homebuilder .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-homebuilder .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-homebuilder .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-homebuilder .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-homebuilder .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-homebuilder .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-homebuilder .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-homebuilder .capability {
background: #fff;
}
#dreamz-homebuilder .capability.alt {
background: var(--sky-2);
}
#dreamz-homebuilder .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-homebuilder .twoCol.reverse .visual {
order: 2;
}
#dreamz-homebuilder .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-homebuilder .visual .placeholder {
min-height: 355px;
}
#dreamz-homebuilder .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-homebuilder .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-homebuilder details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-homebuilder details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-homebuilder details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-homebuilder details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-homebuilder details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-homebuilder details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-homebuilder .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-homebuilder .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-homebuilder .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-homebuilder .darkSection h2,
#dreamz-homebuilder .darkSection h3 {
color: #fff;
}
#dreamz-homebuilder .darkSection .sectionHead p,
#dreamz-homebuilder .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-homebuilder .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-homebuilder .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-homebuilder .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-homebuilder .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-homebuilder .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-homebuilder .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-homebuilder .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-homebuilder .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-homebuilder .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-homebuilder .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-homebuilder .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-homebuilder .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-homebuilder .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-homebuilder .benefitBand h2 {
color: #fff;
}
#dreamz-homebuilder .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-homebuilder .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-homebuilder .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-homebuilder .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-homebuilder .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-homebuilder .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-homebuilder .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-homebuilder .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-homebuilder .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-homebuilder .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-homebuilder .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-homebuilder .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-homebuilder .faq {
max-width: 900px;
}
#dreamz-homebuilder .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-homebuilder .ctaPanel h2 {
color: #fff;
}
#dreamz-homebuilder .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-homebuilder .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-homebuilder .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-homebuilder .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-homebuilder .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-homebuilder .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-homebuilder .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-homebuilder .inlineCta.dark h3 {
color: #fff;
}
#dreamz-homebuilder .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-homebuilder .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-homebuilder .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-homebuilder .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-homebuilder .button.yellow:hover {
background: #FFD84D;
}
#dreamz-homebuilder .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-homebuilder .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-homebuilder .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-homebuilder .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-homebuilder footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-homebuilder .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-homebuilder .heroGrid,
#dreamz-homebuilder .twoCol,
#dreamz-homebuilder .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .twoCol.reverse .visual {
order: initial;
}
#dreamz-homebuilder .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-homebuilder .ratingGrid,
#dreamz-homebuilder .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-homebuilder .ratingLead,
#dreamz-homebuilder .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-homebuilder .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-homebuilder .aiStep:nth-child(3)::after,
#dreamz-homebuilder .aiStep:last-child::after {
display: none;
}
#dreamz-homebuilder .outcomeGrid,
#dreamz-homebuilder .challengeGrid,
#dreamz-homebuilder .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-homebuilder .cards,
#dreamz-homebuilder .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-homebuilder .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-homebuilder .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-homebuilder .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-homebuilder .hero {
padding: 58px 0 52px;
}
#dreamz-homebuilder h1 {
font-size: 44px;
}
#dreamz-homebuilder .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .aiStep::after {
display: none;
}
#dreamz-homebuilder .logoRow,
#dreamz-homebuilder .ratingGrid,
#dreamz-homebuilder .awardGrid,
#dreamz-homebuilder .outcomeGrid,
#dreamz-homebuilder .challengeGrid,
#dreamz-homebuilder .benefitGrid,
#dreamz-homebuilder .cards,
#dreamz-homebuilder .proofCards,
#dreamz-homebuilder .integrationGrid,
#dreamz-homebuilder .featureList {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-homebuilder .ctaPanel {
padding: 34px 24px;
}
#dreamz-homebuilder .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-homebuilder .inlineCtaActions {
width: 100%;
}
#dreamz-homebuilder .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-homebuilder {
--muted: #526A7C;
--shadow: none;
}
#dreamz-homebuilder {
background: var(--sky-2);
}
#dreamz-homebuilder p {
margin-bottom: 0;
}
#dreamz-homebuilder [id] {
scroll-margin-top: 94px;
}
#dreamz-homebuilder svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-homebuilder .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: none;
}
#dreamz-homebuilder .darkSection h2,
#dreamz-homebuilder .darkSection h3,
#dreamz-homebuilder .aiJourney h2,
#dreamz-homebuilder .benefitBand h2,
#dreamz-homebuilder .ctaPanel h2,
#dreamz-homebuilder .inlineCta.dark h3 {
color: #fff;
}
#dreamz-homebuilder .wrap>*,
#dreamz-homebuilder .heroGrid>*,
#dreamz-homebuilder .twoCol>*,
#dreamz-homebuilder .ctaPanel>* {
min-width: 0;
}
#dreamz-homebuilder .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-homebuilder .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-homebuilder .skipLink:focus {
transform: none;
}
#dreamz-homebuilder a:focus-visible,
#dreamz-homebuilder summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-homebuilder .darkSection a:focus-visible,
#dreamz-homebuilder .darkSection summary:focus-visible,
#dreamz-homebuilder .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-homebuilder .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-homebuilder .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-homebuilder .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-homebuilder .brandName>span {
color: var(--brand-dark);
}
#dreamz-homebuilder .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-homebuilder .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-homebuilder .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-homebuilder .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-homebuilder .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-homebuilder .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-homebuilder .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-homebuilder .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-homebuilder .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-homebuilder .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-homebuilder .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-homebuilder .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-homebuilder .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-homebuilder .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-homebuilder .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-homebuilder .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-homebuilder .clientBand {
padding: 27px 0;
}
#dreamz-homebuilder .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-homebuilder .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-homebuilder .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-homebuilder .logoBox.wide {
font-size: 12px;
}
#dreamz-homebuilder .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-homebuilder h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-homebuilder .sectionHead {
margin-bottom: 36px;
}
#dreamz-homebuilder .eyebrow {
line-height: 1.5;
}
#dreamz-homebuilder .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-homebuilder .aiStep {
min-height: 162px;
}
#dreamz-homebuilder .aiStep strong {
line-height: 1.35;
}
#dreamz-homebuilder .aiStep span {
line-height: 1.65;
}
#dreamz-homebuilder .aiCallout {
margin-top: 24px;
}
#dreamz-homebuilder .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-homebuilder .outcome>.icon {
color: var(--navy);
}
#dreamz-homebuilder .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-homebuilder .awardItem>.icon {
color: var(--navy);
}
#dreamz-homebuilder .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-homebuilder .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-homebuilder .twoCol.reverse .visual {
order: -1;
}
#dreamz-homebuilder .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-homebuilder .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-homebuilder .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-homebuilder .featureList {
gap: 13px 18px;
}
#dreamz-homebuilder .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-homebuilder .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-homebuilder .check .icon {
width: 14px;
height: 14px;
}
#dreamz-homebuilder details.capabilityMore {
margin-bottom: 0;
}
#dreamz-homebuilder .capabilityMore summary {
min-height: 34px;
}
#dreamz-homebuilder .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-homebuilder .textCta {
font-size: 14px;
}
#dreamz-homebuilder .visual {
min-width: 0;
}
#dreamz-homebuilder .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-homebuilder .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-homebuilder .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-homebuilder .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-homebuilder .panelBody {
padding: 20px;
}
#dreamz-homebuilder .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-homebuilder .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-homebuilder .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-homebuilder .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-homebuilder .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-homebuilder .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-homebuilder .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-homebuilder .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-homebuilder .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-homebuilder .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-homebuilder .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-homebuilder .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-homebuilder .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-homebuilder .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-homebuilder .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-homebuilder .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-homebuilder .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-homebuilder .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-homebuilder .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-homebuilder .dataRow:last-child {
border-bottom: 0;
}
#dreamz-homebuilder .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-homebuilder .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-homebuilder .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-homebuilder .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-homebuilder .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-homebuilder .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-homebuilder .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-homebuilder .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-homebuilder .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-homebuilder .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-homebuilder .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-homebuilder .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-homebuilder .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-homebuilder .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-homebuilder .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-homebuilder .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-homebuilder .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-homebuilder .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-homebuilder .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-homebuilder .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-homebuilder .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-homebuilder .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-homebuilder .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-homebuilder .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-homebuilder .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-homebuilder .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-homebuilder .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-homebuilder .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-homebuilder .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-homebuilder .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-homebuilder .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-homebuilder .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-homebuilder .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-homebuilder .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-homebuilder .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-homebuilder .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-homebuilder .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-homebuilder .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-homebuilder .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-homebuilder .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-homebuilder .promptList {
display: grid;
gap: 10px;
}
#dreamz-homebuilder .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-homebuilder .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-homebuilder .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-homebuilder .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-homebuilder .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-homebuilder .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-homebuilder .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-homebuilder .quoteTable th,
#dreamz-homebuilder .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-homebuilder .quoteTable td:first-child {
width: 64%;
}
#dreamz-homebuilder .quoteTable th:last-child,
#dreamz-homebuilder .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-homebuilder .quoteTable strong {
font-size: 11px;
}
#dreamz-homebuilder .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-homebuilder .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-homebuilder .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-homebuilder .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-homebuilder .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-homebuilder .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-homebuilder .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-homebuilder .orderJourney {
margin: 20px 0;
}
#dreamz-homebuilder .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-homebuilder .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-homebuilder .journeyRow:last-child:before {
display: none;
}
#dreamz-homebuilder .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-homebuilder .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-homebuilder .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-homebuilder .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-homebuilder .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-homebuilder .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-homebuilder .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-homebuilder .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-homebuilder .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-homebuilder .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-homebuilder .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-homebuilder .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-homebuilder .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-homebuilder .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-homebuilder .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-homebuilder .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-homebuilder .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-homebuilder .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-homebuilder .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-homebuilder .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-homebuilder .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-homebuilder .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-homebuilder .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-homebuilder .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-homebuilder .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-homebuilder .customerTimeline strong {
color: #fff;
}
#dreamz-homebuilder .customerTimeline small {
color: #BFBFBF;
}
#dreamz-homebuilder .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-homebuilder .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-homebuilder .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-homebuilder .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-homebuilder .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-homebuilder .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-homebuilder .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-homebuilder .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-homebuilder .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-homebuilder .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-homebuilder .chartTitle strong {
font-size: 12px;
}
#dreamz-homebuilder .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-homebuilder .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-homebuilder .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-homebuilder .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-homebuilder .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-homebuilder .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-homebuilder .inlineCtaActions {
max-width: 42%;
}
#dreamz-homebuilder .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-homebuilder .inlineCta h3 {
line-height: 1.35;
}
#dreamz-homebuilder .card {
box-shadow: none;
}
#dreamz-homebuilder .cardIcon {
box-shadow: none;
}
#dreamz-homebuilder .card h3 {
font-size: 22px;
}
#dreamz-homebuilder .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-homebuilder .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-homebuilder .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-homebuilder .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-homebuilder .ratingBand {
padding: 34px 0;
}
#dreamz-homebuilder .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-homebuilder .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-homebuilder .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-homebuilder .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-homebuilder .ratingItem:first-child {
border-left: 0;
}
#dreamz-homebuilder .proofCard h3 {
font-size: 23px;
}
#dreamz-homebuilder .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-homebuilder .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-homebuilder .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-homebuilder .integration {
min-height: 98px;
}
#dreamz-homebuilder .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-homebuilder .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-homebuilder .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-homebuilder .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-homebuilder .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-homebuilder .finalActions {
display: grid;
gap: 11px;
}
#dreamz-homebuilder .finalActions .button {
white-space: nowrap;
}
#dreamz-homebuilder .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-homebuilder .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-homebuilder .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-homebuilder .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-homebuilder .heroGrid {
gap: 30px;
}
#dreamz-homebuilder .twoCol {
gap: 32px;
}
#dreamz-homebuilder .panelBody {
padding: 16px;
}
#dreamz-homebuilder .panelHead {
padding: 16px;
}
#dreamz-homebuilder .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-homebuilder .pipelineColumns {
gap: 7px;
}
#dreamz-homebuilder .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-homebuilder .heroGrid,
#dreamz-homebuilder .twoCol,
#dreamz-homebuilder .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .heroGrid {
gap: 36px;
}
#dreamz-homebuilder .hero h1 {
max-width: 730px;
}
#dreamz-homebuilder .hero .lead {
max-width: 690px;
}
#dreamz-homebuilder .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-homebuilder .twoCol {
gap: 34px;
}
#dreamz-homebuilder .twoCol.reverse .visual {
order: initial;
}
#dreamz-homebuilder .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-homebuilder .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-homebuilder .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-homebuilder .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-homebuilder .ratingSectionGrid {
gap: 20px;
}
#dreamz-homebuilder .inlineCta {
align-items: flex-start;
}
#dreamz-homebuilder .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-homebuilder .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-homebuilder .card {
padding: 22px;
}
#dreamz-homebuilder .card h3 {
font-size: 21px;
}
#dreamz-homebuilder .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-homebuilder .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-homebuilder .cards,
#dreamz-homebuilder .proofCards {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-homebuilder .inlineCta {
flex-direction: column;
}
#dreamz-homebuilder .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-homebuilder .inlineCtaActions .button {
flex: 1;
}
#dreamz-homebuilder .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-homebuilder .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-homebuilder .wrap {
width: calc(100% - 32px);
}
#dreamz-homebuilder [id] {
scroll-margin-top: 82px;
}
#dreamz-homebuilder .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-homebuilder .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-homebuilder .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-homebuilder .hero {
padding: 51px 0 48px;
}
#dreamz-homebuilder .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-homebuilder .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-homebuilder .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-homebuilder .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-homebuilder .hero .microcopy {
font-size: 11px;
}
#dreamz-homebuilder .heroPills span {
font-size: 9px;
}
#dreamz-homebuilder .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-homebuilder .sectionHead p {
font-size: 16px;
}
#dreamz-homebuilder .copy h2 {
font-size: 34px;
}
#dreamz-homebuilder .copy p {
font-size: 15px;
}
#dreamz-homebuilder .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-homebuilder .logoBox {
min-height: 53px;
}
#dreamz-homebuilder .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-homebuilder .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-homebuilder .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-homebuilder .aiStep strong {
font-size: 13px;
}
#dreamz-homebuilder .aiStep span {
font-size: 11px;
}
#dreamz-homebuilder .aiStep::after {
display: none;
}
#dreamz-homebuilder .outcomeGrid,
#dreamz-homebuilder .challengeGrid,
#dreamz-homebuilder .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .outcome {
padding: 24px;
}
#dreamz-homebuilder .outcome strong {
font-size: 22px;
}
#dreamz-homebuilder .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-homebuilder .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-homebuilder .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-homebuilder .featureList,
#dreamz-homebuilder .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .featureItem {
font-size: 13px;
}
#dreamz-homebuilder .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-homebuilder .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-homebuilder .panelHead {
padding: 15px 13px;
}
#dreamz-homebuilder .panelHead>strong {
font-size: 12px;
}
#dreamz-homebuilder .panelBody {
padding: 14px;
}
#dreamz-homebuilder .productPanel {
border-radius: 16px;
}
#dreamz-homebuilder .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-homebuilder .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-homebuilder .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-homebuilder .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-homebuilder .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-homebuilder .deal strong {
font-size: 10px;
}
#dreamz-homebuilder .deal small {
font-size: 9px;
}
#dreamz-homebuilder .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-homebuilder .mobileWorkspace {
gap: 12px;
}
#dreamz-homebuilder .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-homebuilder .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-homebuilder .sideTile {
padding: 10px;
}
#dreamz-homebuilder .sideTile strong {
font-size: 10px;
}
#dreamz-homebuilder .sideTile p {
font-size: 9px;
}
#dreamz-homebuilder .mobileHeader strong {
font-size: 15px;
}
#dreamz-homebuilder .mobileAccount strong {
font-size: 10px;
}
#dreamz-homebuilder .mobileAccount small {
font-size: 7px;
}
#dreamz-homebuilder .phoneDevice .rowIcon {
display: none;
}
#dreamz-homebuilder .quoteTable th,
#dreamz-homebuilder .quoteTable td {
padding: 12px 4px;
}
#dreamz-homebuilder .quoteTable strong {
font-size: 10px;
}
#dreamz-homebuilder .quoteTable small {
font-size: 8px;
}
#dreamz-homebuilder .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-homebuilder .docHeader strong {
font-size: 17px;
}
#dreamz-homebuilder .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-homebuilder .miniFlow span {
padding: 6px;
}
#dreamz-homebuilder .rowCopy strong {
font-size: 10px;
}
#dreamz-homebuilder .rowCopy small {
font-size: 8px;
}
#dreamz-homebuilder .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-homebuilder .miniStats {
gap: 7px;
}
#dreamz-homebuilder .miniStats>div {
padding: 9px;
}
#dreamz-homebuilder .miniStats strong {
font-size: 18px;
}
#dreamz-homebuilder .miniStats span {
font-size: 8px;
}
#dreamz-homebuilder .collectionStats>div {
padding: 13px;
}
#dreamz-homebuilder .collectionStats strong {
font-size: 24px;
}
#dreamz-homebuilder .customerHeader strong {
font-size: 17px;
}
#dreamz-homebuilder .customerFacts>div {
padding: 10px;
}
#dreamz-homebuilder .customerFacts strong {
font-size: 12px;
}
#dreamz-homebuilder .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-homebuilder .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-homebuilder .ratingItem:last-child {
grid-column: 1/-1;
}
#dreamz-homebuilder .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-homebuilder .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-homebuilder .integration small {
font-size: 9px;
}
#dreamz-homebuilder .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-homebuilder .ctaPanel p {
font-size: 15px;
}
#dreamz-homebuilder .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-homebuilder .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-homebuilder .contextSection {
padding: 0 0 24px;
}
#dreamz-homebuilder .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-homebuilder .wrap {
width: calc(100% - 24px);
}
#dreamz-homebuilder .brand {
font-size: 18px;
}
#dreamz-homebuilder .brandMark {
width: 25px;
height: 25px;
}
#dreamz-homebuilder .hero h1 {
font-size: 38px;
}
#dreamz-homebuilder .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-homebuilder .copy h2 {
font-size: 31px;
}
#dreamz-homebuilder .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .phoneDevice {
width: 210px;
}
#dreamz-homebuilder .phoneDevice .rowIcon {
display: grid;
}
#dreamz-homebuilder .mobileSide {
gap: 8px;
}
#dreamz-homebuilder .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-homebuilder .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-homebuilder .sideTile p {
margin: 0;
}
#dreamz-homebuilder .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-homebuilder .collectionStats strong {
font-size: 21px;
}
#dreamz-homebuilder .inventoryIntro strong {
font-size: 14px;
}
#dreamz-homebuilder .dataRow {
gap: 7px;
}
#dreamz-homebuilder .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-homebuilder .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-homebuilder {
scroll-behavior: auto;
}
#dreamz-homebuilder *,
#dreamz-homebuilder *::before,
#dreamz-homebuilder *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-homebuilder {
background: var(--sky-2);
}
#dreamz-homebuilder .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-homebuilder .hero .eyebrow {
max-width: 100%;
}
#dreamz-homebuilder .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-homebuilder .ganttIllustration,
#dreamz-homebuilder .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-homebuilder .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-homebuilder .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-homebuilder .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-homebuilder .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-homebuilder .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-homebuilder .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-homebuilder .comparisonTable th,
#dreamz-homebuilder .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .comparisonTable th:first-child {
width: 23%;
}
#dreamz-homebuilder .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-homebuilder .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-homebuilder .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-homebuilder .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-homebuilder .card,
#dreamz-homebuilder .proofCard,
#dreamz-homebuilder .productPanel,
#dreamz-homebuilder .outcome,
#dreamz-homebuilder .benefit {
box-shadow: none;
}
#dreamz-homebuilder .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-homebuilder .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-homebuilder .hero .eyebrow {
font-size: 10px;
}
#dreamz-homebuilder .comparisonTable {
font-size: 11px;
}
#dreamz-homebuilder .comparisonTable th,
#dreamz-homebuilder .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-homebuilder .comparisonTable th:first-child {
width: 24%;
}
#dreamz-homebuilder .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-homebuilder .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-homebuilder .hero h1 {
font-size: 38px;
}
}
#dreamz-homebuilder .scheduleIllustration,
#dreamz-homebuilder .analyticsIllustration,
#dreamz-homebuilder .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-homebuilder .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-homebuilder .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-homebuilder .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-homebuilder .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-homebuilder .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-homebuilder .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-homebuilder .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-homebuilder .darkSection .textCta {
color: var(--yellow);
}
#dreamz-homebuilder .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-homebuilder .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-homebuilder .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-homebuilder .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-homebuilder .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-homebuilder .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-homebuilder .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-homebuilder .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-homebuilder .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-homebuilder .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-homebuilder .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-homebuilder .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-homebuilder .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-homebuilder .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-homebuilder .phoneDevice {
max-width: 100%;
}
#dreamz-homebuilder .heroPills {
line-height: 1.55;
}
#dreamz-homebuilder .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-homebuilder .plantFacts {
gap: 7px;
}
#dreamz-homebuilder .plantFacts>div {
padding: 9px;
}
#dreamz-homebuilder .plantFacts strong {
font-size: 11px;
}
#dreamz-homebuilder .scanSummary {
padding: 12px;
}
#dreamz-homebuilder .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-homebuilder .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-homebuilder .phoneDevice .rowIcon {
display: grid;
}
#dreamz-homebuilder .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-homebuilder .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-homebuilder .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-homebuilder .sideTile strong {
font-size: 12px;
}
#dreamz-homebuilder .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-homebuilder .topbar,
#dreamz-homebuilder .heroActions,
#dreamz-homebuilder .finalActions,
#dreamz-homebuilder .contextSection,
#dreamz-homebuilder .valueCtaSection {
display: none;
}
#dreamz-homebuilder section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-homebuilder .hero {
padding-top: 20px;
}
}
#dreamz-homebuilder {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-homebuilder h1,
#dreamz-homebuilder h2,
#dreamz-homebuilder h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
#dreamz-homebuilder p {
margin: 0;
}
#dreamz-homebuilder main {
display: block;
}
#dreamz-homebuilder .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-homebuilder .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-homebuilder .heroAccent {
color: var(--black);
}
#dreamz-homebuilder .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-homebuilder .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-homebuilder .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-homebuilder .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-homebuilder .microcopy {
margin-top: 14px;
}
#dreamz-homebuilder .heroPills {
margin-top: 13px;
}
#dreamz-homebuilder .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-homebuilder .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-homebuilder .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-homebuilder .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-homebuilder .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-homebuilder .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-homebuilder .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-homebuilder .clientBand {
padding: 24px 0;
}
#dreamz-homebuilder .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-homebuilder .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-homebuilder .logoBox.wide {
font-size: 15px;
}
#dreamz-homebuilder .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-homebuilder .sectionHead p {
margin: 17px 0 0;
}
#dreamz-homebuilder .copy p {
margin: 16px 0 0;
}
#dreamz-homebuilder .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-homebuilder .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-homebuilder .aiJourney {
background: var(--black);
}
#dreamz-homebuilder .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-homebuilder .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-homebuilder .productPanel {
border-radius: 18px;
}
#dreamz-homebuilder .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-homebuilder .panelHead>strong {
font-size: 13px;
}
#dreamz-homebuilder .sampleTag {
font-size: 9px;
}
#dreamz-homebuilder .panelBody {
padding: 21px;
}
#dreamz-homebuilder .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-homebuilder .docHeader {
padding-bottom: 16px;
}
#dreamz-homebuilder .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-homebuilder .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-homebuilder .smallLabel {
font-size: 9px;
}
#dreamz-homebuilder .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-homebuilder .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-homebuilder .dataRow {
padding: 14px 0;
}
#dreamz-homebuilder .statusPill {
font-size: 8px;
}
#dreamz-homebuilder .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-homebuilder .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-homebuilder .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-homebuilder .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-homebuilder .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-homebuilder .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-homebuilder .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-homebuilder .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-homebuilder .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-homebuilder .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-homebuilder .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-homebuilder .hierarchy strong {
color: var(--navy);
}
#dreamz-homebuilder .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-homebuilder .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-homebuilder .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-homebuilder .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-homebuilder .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-homebuilder .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-homebuilder .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-homebuilder .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-homebuilder .mobileAccount small {
font-size: 9px;
}
#dreamz-homebuilder .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-homebuilder .sideTile strong {
font-size: 12px;
}
#dreamz-homebuilder .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-homebuilder .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-homebuilder .mobileAction {
font-size: 9px;
}
#dreamz-homebuilder .journeyRow strong {
font-size: 13px;
}
#dreamz-homebuilder .journeyRow small {
font-size: 11px;
}
#dreamz-homebuilder .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-homebuilder .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-homebuilder .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-homebuilder .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-homebuilder .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-homebuilder .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-homebuilder .utilityReadout small {
font-size: 12px;
}
#dreamz-homebuilder .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-homebuilder .darkSection {
background: var(--black);
}
#dreamz-homebuilder .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-homebuilder .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-homebuilder .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-homebuilder .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-homebuilder .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-homebuilder .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-homebuilder .assistantHead small {
font-size: 11px;
}
#dreamz-homebuilder .assistantNote {
font-size: 11px;
}
#dreamz-homebuilder .reportTags span {
font-size: 10px;
}
#dreamz-homebuilder .card p {
margin: 12px 0 0;
}
#dreamz-homebuilder .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-homebuilder .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-homebuilder .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-homebuilder .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-homebuilder .cards>.card p {
padding-bottom: 22px;
}
#dreamz-homebuilder .benefitBand {
background: var(--black);
}
#dreamz-homebuilder .benefit {
background: var(--black-soft);
}
#dreamz-homebuilder .inlineCta h3 {
font-size: 20px;
}
#dreamz-homebuilder .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-homebuilder .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-homebuilder .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-homebuilder .valueCtaSection {
padding: 32px 0;
}
#dreamz-homebuilder .proofCard p {
margin-top: 15px;
}
#dreamz-homebuilder .proofCard h3 {
font-size: 23px;
}
#dreamz-homebuilder .integrationNote {
margin-top: 23px;
}
#dreamz-homebuilder .ctaPanel {
background: var(--black);
}
#dreamz-homebuilder .ctaPanel p {
margin-top: 16px;
}
#dreamz-homebuilder .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-homebuilder .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-homebuilder a:hover {
text-decoration: none;
}
#dreamz-homebuilder .textCta:hover {
color: var(--navy);
}
#dreamz-homebuilder .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-homebuilder .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-homebuilder .hero h1 {
font-size: 49px;
}
#dreamz-homebuilder .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-homebuilder .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-homebuilder .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-homebuilder .hero h1 {
font-size: 58px;
}
#dreamz-homebuilder .heroVisual {
max-width: 548px;
}
#dreamz-homebuilder .hero .lead {
max-width: 700px;
}
#dreamz-homebuilder .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-homebuilder .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-homebuilder .logoBox:last-child {
grid-column: auto;
}
#dreamz-homebuilder .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-homebuilder .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-homebuilder .inlineCtaActions .button {
flex: 1;
}
#dreamz-homebuilder .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-homebuilder .hero {
padding: 28px 0 40px;
}
#dreamz-homebuilder .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-homebuilder .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-homebuilder .heroActions {
gap: 10px;
}
#dreamz-homebuilder .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-homebuilder .breadcrumb {
margin-bottom: 21px;
}
#dreamz-homebuilder .hero .eyebrow {
font-size: 11px;
}
#dreamz-homebuilder .heroVisual {
max-width: 480px;
}
#dreamz-homebuilder .heroPills {
row-gap: 9px;
}
#dreamz-homebuilder .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-homebuilder .heroPills span+span {
padding-left: 7px;
}
#dreamz-homebuilder .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-homebuilder .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-homebuilder .clientBand {
padding: 25px 0;
}
#dreamz-homebuilder .copy h2 {
font-size: 33px;
}
#dreamz-homebuilder .panelBody {
padding: 16px;
}
#dreamz-homebuilder .panelHead {
padding: 15px;
}
#dreamz-homebuilder .panelHead>strong {
font-size: 12px;
}
#dreamz-homebuilder .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-homebuilder .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-homebuilder .docHeader strong {
font-size: 18px;
}
#dreamz-homebuilder .docHeader small {
font-size: 10px;
}
#dreamz-homebuilder .rowCopy strong {
font-size: 11px;
}
#dreamz-homebuilder .rowCopy small {
font-size: 10px;
}
#dreamz-homebuilder .miniStats {
gap: 7px;
}
#dreamz-homebuilder .miniStats strong {
font-size: 21px;
}
#dreamz-homebuilder .miniStats span {
font-size: 9px;
}
#dreamz-homebuilder .miniStats>div {
padding: 10px 8px;
}
#dreamz-homebuilder .plantFacts {
gap: 8px;
}
#dreamz-homebuilder .plantFacts>div {
padding: 10px;
}
#dreamz-homebuilder .plantFacts strong {
font-size: 11px;
}
#dreamz-homebuilder .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-homebuilder .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-homebuilder .utilityReadout span {
font-size: 8px;
}
#dreamz-homebuilder .utilityReadout strong {
font-size: 24px;
}
#dreamz-homebuilder .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-homebuilder .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-homebuilder .comparisonTable {
font-size: 11px;
}
#dreamz-homebuilder .comparisonTable th,
#dreamz-homebuilder .comparisonTable td {
padding: 13px 9px;
}
#dreamz-homebuilder .contextSection {
padding: 0 0 22px;
}
#dreamz-homebuilder .valueCtaSection {
padding: 25px 0;
}
#dreamz-homebuilder .inlineCtaActions {
flex-direction: column;
}
#dreamz-homebuilder .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-homebuilder .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .phoneDevice {
width: 222px;
}
#dreamz-homebuilder .phoneDevice .rowIcon {
display: grid;
}
#dreamz-homebuilder .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-homebuilder .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-homebuilder .sideTile p {
margin: 0;
}
#dreamz-homebuilder .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-homebuilder .dataRow {
gap: 8px;
}
#dreamz-homebuilder .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-homebuilder .miniStats strong {
font-size: 19px;
}
#dreamz-homebuilder .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-homebuilder .heroActions .button {
width: 100%;
}
#dreamz-homebuilder .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-homebuilder .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-homebuilder .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-homebuilder .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-homebuilder .aiStep span {
font-size: 13px;
}
#dreamz-homebuilder .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-homebuilder {
background: var(--white);
}
#dreamz-homebuilder img {
display: block;
max-width: 100%;
}
#dreamz-homebuilder h1,
#dreamz-homebuilder h2,
#dreamz-homebuilder h3 {
text-wrap: balance;
}
#dreamz-homebuilder .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-homebuilder .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-homebuilder .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-homebuilder .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-homebuilder .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-homebuilder .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-homebuilder .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-homebuilder .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-homebuilder .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-homebuilder .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-homebuilder .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-homebuilder .industryIntro {
padding: 78px 0 66px;
}
#dreamz-homebuilder .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-homebuilder .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-homebuilder .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-homebuilder .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-homebuilder .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-homebuilder .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-homebuilder .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-homebuilder .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-homebuilder .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-homebuilder .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-homebuilder .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-homebuilder .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-homebuilder .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-homebuilder .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-homebuilder .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-homebuilder .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-homebuilder .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-homebuilder .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-homebuilder .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-homebuilder .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-homebuilder .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-homebuilder .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-homebuilder .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-homebuilder .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-homebuilder .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-homebuilder .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-homebuilder .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-homebuilder .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-homebuilder .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-homebuilder .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-homebuilder .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-homebuilder .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-homebuilder .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-homebuilder .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-homebuilder .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-homebuilder .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-homebuilder .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-homebuilder .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-homebuilder .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-homebuilder .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-homebuilder .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-homebuilder .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-homebuilder .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-homebuilder .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-homebuilder .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-homebuilder .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .rfidSpotlight {
background: #fff;
}
#dreamz-homebuilder .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-homebuilder .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-homebuilder .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-homebuilder .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-homebuilder .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-homebuilder .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-homebuilder .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-homebuilder .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-homebuilder .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-homebuilder .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-homebuilder .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-homebuilder .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-homebuilder .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-homebuilder .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-homebuilder .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-homebuilder .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-homebuilder .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-homebuilder .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-homebuilder .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-homebuilder .featurePanel {
display: none;
}
#dreamz-homebuilder .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-homebuilder .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-homebuilder .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-homebuilder .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-homebuilder .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-homebuilder .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-homebuilder .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-homebuilder .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-homebuilder .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-homebuilder .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-homebuilder .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-homebuilder .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-homebuilder .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-homebuilder .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-homebuilder .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-homebuilder .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-homebuilder .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-homebuilder .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-homebuilder .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-homebuilder .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-homebuilder .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-homebuilder .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-homebuilder .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-homebuilder .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-homebuilder .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-homebuilder .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-homebuilder .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-homebuilder .aiReviewBody {
padding: 18px;
}
#dreamz-homebuilder .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-homebuilder .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-homebuilder .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-homebuilder .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-homebuilder .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-homebuilder .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-homebuilder .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-homebuilder .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-homebuilder .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-homebuilder .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-homebuilder .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-homebuilder .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-homebuilder .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-homebuilder .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-homebuilder .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-homebuilder .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-homebuilder .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-homebuilder .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-homebuilder .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-homebuilder .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-homebuilder .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-homebuilder .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-homebuilder .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-homebuilder .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-homebuilder .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-homebuilder .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-homebuilder .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-homebuilder .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-homebuilder .workflowDetails .featureList,
#dreamz-homebuilder .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-homebuilder .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-homebuilder .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-homebuilder .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-homebuilder #homebuilder-connected-tools {
background: #fff;
}
#dreamz-homebuilder #homebuilder-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-homebuilder .featureTab,
#dreamz-homebuilder .industryPriority,
#dreamz-homebuilder summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-homebuilder .industryIntroHead {
gap: 30px;
}
#dreamz-homebuilder .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-homebuilder .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-homebuilder .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-homebuilder .factoryWorkflow {
padding: 22px;
}
#dreamz-homebuilder .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-homebuilder .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-homebuilder .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-homebuilder .industryPriorityGrid {
gap: 14px;
}
#dreamz-homebuilder .industryPriority {
padding: 22px 19px;
}
#dreamz-homebuilder .industryPriority h3 {
font-size: 21px;
}
#dreamz-homebuilder .industryPriority p {
font-size: 12px;
}
#dreamz-homebuilder .priorityLink {
font-size: 10px;
}
#dreamz-homebuilder .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-homebuilder .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-homebuilder .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-homebuilder .vedaUseCases>div {
display: block;
}
#dreamz-homebuilder .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-homebuilder .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-homebuilder .featureTabs {
gap: 8px;
}
#dreamz-homebuilder .featureTab {
min-height: 108px;
}
#dreamz-homebuilder .featureStage,
#dreamz-homebuilder .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-homebuilder .rfidSpotlight .spotlightMedia,
#dreamz-homebuilder .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-homebuilder .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-homebuilder .featurePanel {
min-height: 0;
}
#dreamz-homebuilder .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-homebuilder .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-homebuilder .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-homebuilder .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-homebuilder .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-homebuilder .clientBand {
padding: 22px 0;
}
#dreamz-homebuilder .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-homebuilder .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-homebuilder .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-homebuilder .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-homebuilder .industryIntro {
padding: 53px 0;
}
#dreamz-homebuilder .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-homebuilder .industryIntroHead>p {
font-size: 14px;
}
#dreamz-homebuilder .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .industryPriority {
padding: 23px;
}
#dreamz-homebuilder .industryPriority h3 {
font-size: 24px;
}
#dreamz-homebuilder .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-homebuilder .industryPriority p {
font-size: 13px;
}
#dreamz-homebuilder .priorityLink {
font-size: 11px;
}
#dreamz-homebuilder .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-homebuilder .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-homebuilder .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-homebuilder .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-homebuilder .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-homebuilder .vedaUseCases>div {
display: flex;
}
#dreamz-homebuilder .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-homebuilder .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-homebuilder .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-homebuilder .vedaMessage.user {
margin-left: 25px;
}
#dreamz-homebuilder .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-homebuilder .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-homebuilder .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-homebuilder .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-homebuilder .spotlightHead h2 {
font-size: 32px;
}
#dreamz-homebuilder .spotlightHead>p {
font-size: 14px;
}
#dreamz-homebuilder .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-homebuilder .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-homebuilder .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-homebuilder .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-homebuilder .featurePanel h3 {
font-size: 24px;
}
#dreamz-homebuilder .featurePanel>p {
font-size: 13px;
}
#dreamz-homebuilder .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-homebuilder .spotlightChecks>li {
font-size: 12px;
}
#dreamz-homebuilder .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-homebuilder .spotlightActions .button {
width: 100%;
}
#dreamz-homebuilder .spotlightScope {
font-size: 10px;
}
#dreamz-homebuilder .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-homebuilder .mediaTitle strong {
font-size: 11px;
}
#dreamz-homebuilder .mediaTitle div>span {
font-size: 8px;
}
#dreamz-homebuilder .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-homebuilder .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-homebuilder .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-homebuilder .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-homebuilder .aiReviewBody {
padding: 13px;
}
#dreamz-homebuilder .aiIssue {
padding: 13px;
}
#dreamz-homebuilder .aiIssue strong {
font-size: 14px;
}
#dreamz-homebuilder .aiEvidence {
gap: 6px;
}
#dreamz-homebuilder .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-homebuilder .aiEvidence strong {
font-size: 9px;
}
#dreamz-homebuilder .aiEvidence span {
font-size: 7px;
}
#dreamz-homebuilder .exampleLabel {
font-size: 6px;
}
#dreamz-homebuilder .factoryWorkflows {
padding: 55px 0;
}
#dreamz-homebuilder .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-homebuilder .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-homebuilder .industryRibbonGrid {
gap: 12px;
}
#dreamz-homebuilder .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-homebuilder .spotlightHead h2 {
font-size: 29px;
}
#dreamz-homebuilder .featureStage {
padding: 19px 13px;
}
#dreamz-homebuilder .mediaTitle>.icon {
display: none;
}
#dreamz-homebuilder .exampleLabel {
display: none;
}
#dreamz-homebuilder .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-homebuilder .featureTabs {
display: none;
}
#dreamz-homebuilder .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-homebuilder .featureStage {
display: block;
}
#dreamz-homebuilder .featurePanel {
color: #000;
}
}
#dreamz-homebuilder #homebuilder-delivery-features-1:checked~.featureTabs label[for="homebuilder-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-delivery-features-1:focus-visible~.featureTabs label[for="homebuilder-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-2:checked~.featureTabs label[for="homebuilder-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-delivery-features-2:focus-visible~.featureTabs label[for="homebuilder-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-3:checked~.featureTabs label[for="homebuilder-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-delivery-features-3:focus-visible~.featureTabs label[for="homebuilder-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-4:checked~.featureTabs label[for="homebuilder-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-delivery-features-4:focus-visible~.featureTabs label[for="homebuilder-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-5:checked~.featureTabs label[for="homebuilder-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-delivery-features-5:focus-visible~.featureTabs label[for="homebuilder-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-1:checked~.featureTabs label[for="homebuilder-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-rfid-features-1:focus-visible~.featureTabs label[for="homebuilder-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-2:checked~.featureTabs label[for="homebuilder-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-rfid-features-2:focus-visible~.featureTabs label[for="homebuilder-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-3:checked~.featureTabs label[for="homebuilder-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-rfid-features-3:focus-visible~.featureTabs label[for="homebuilder-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-4:checked~.featureTabs label[for="homebuilder-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-rfid-features-4:focus-visible~.featureTabs label[for="homebuilder-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-5:checked~.featureTabs label[for="homebuilder-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-rfid-features-5:focus-visible~.featureTabs label[for="homebuilder-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-1:checked~.featureTabs label[for="homebuilder-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-1:focus-visible~.featureTabs label[for="homebuilder-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-2:checked~.featureTabs label[for="homebuilder-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-2:focus-visible~.featureTabs label[for="homebuilder-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-3:checked~.featureTabs label[for="homebuilder-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-3:focus-visible~.featureTabs label[for="homebuilder-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-4:checked~.featureTabs label[for="homebuilder-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-4:focus-visible~.featureTabs label[for="homebuilder-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-5:checked~.featureTabs label[for="homebuilder-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-5:focus-visible~.featureTabs label[for="homebuilder-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-homebuilder .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .featureMediaPanels {
min-width: 0;
}
#dreamz-homebuilder .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-homebuilder .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-homebuilder .featureMediaPanels .windowTop strong,
#dreamz-homebuilder .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-homebuilder .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-homebuilder .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-homebuilder .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-homebuilder .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-homebuilder .featureMediaPanels .windowBody>*,
#dreamz-homebuilder .featureMediaPanels .spectrumGrid>*,
#dreamz-homebuilder .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-homebuilder .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-homebuilder .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-homebuilder .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-homebuilder .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-homebuilder .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-homebuilder .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-homebuilder .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-homebuilder .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-homebuilder .pin2 {
top: 88px;
right: 88px;
}
#dreamz-homebuilder .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-homebuilder .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-homebuilder .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-homebuilder .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-homebuilder .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-homebuilder .featureMediaPanels .graphNodes .node.n1,
#dreamz-homebuilder .featureMediaPanels .graphNodes .node.n2,
#dreamz-homebuilder .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-homebuilder .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-homebuilder .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-homebuilder .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-homebuilder .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-homebuilder .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-homebuilder .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-homebuilder .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-homebuilder .freshGraphic * {
box-sizing: border-box;
}
#dreamz-homebuilder .rfPanel,
#dreamz-homebuilder .aiInsightCard,
#dreamz-homebuilder .forecastVisualCard,
#dreamz-homebuilder .forecastSuggestion,
#dreamz-homebuilder .knowledgeTile,
#dreamz-homebuilder .chatConversation,
#dreamz-homebuilder .trainingSummary,
#dreamz-homebuilder .moduleCard,
#dreamz-homebuilder .qualityHeatCard,
#dreamz-homebuilder .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-homebuilder .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-homebuilder .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-homebuilder .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-homebuilder .statusPill,
#dreamz-homebuilder .cardTag,
#dreamz-homebuilder .forecastSuggestion b,
#dreamz-homebuilder .moduleCard b,
#dreamz-homebuilder .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-homebuilder .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-homebuilder .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-homebuilder .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-homebuilder .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-homebuilder .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-homebuilder .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-homebuilder .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-homebuilder .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-homebuilder .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-homebuilder .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-homebuilder .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-homebuilder .dot.good {
background: #298EEC;
}
#dreamz-homebuilder .dot.warn {
background: #F4A62A;
}
#dreamz-homebuilder .dot.bad {
background: #EB6B53;
}
#dreamz-homebuilder .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-homebuilder .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-homebuilder .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-homebuilder .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-homebuilder .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-homebuilder .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-homebuilder .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-homebuilder .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-homebuilder .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-homebuilder .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-homebuilder .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-homebuilder .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-homebuilder .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-homebuilder .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-homebuilder .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-homebuilder .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-homebuilder .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-homebuilder .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-homebuilder .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-homebuilder .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-homebuilder .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-homebuilder .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-homebuilder .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-homebuilder .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-homebuilder .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-homebuilder .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-homebuilder .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-homebuilder .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-homebuilder .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-homebuilder .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-homebuilder .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-homebuilder .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-homebuilder .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-homebuilder .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-homebuilder .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-homebuilder .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-homebuilder .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-homebuilder .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-homebuilder .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-homebuilder .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-homebuilder .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-homebuilder .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-homebuilder .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-homebuilder .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-homebuilder .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-homebuilder .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-homebuilder .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-homebuilder .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-homebuilder .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-homebuilder .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-homebuilder .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-homebuilder .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-homebuilder .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-homebuilder .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-homebuilder .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-homebuilder .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-homebuilder .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-homebuilder .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-homebuilder .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-homebuilder .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-homebuilder .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-homebuilder .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-homebuilder .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-homebuilder .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-homebuilder .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-homebuilder .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-homebuilder .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-homebuilder .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-homebuilder .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-homebuilder .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-homebuilder .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-homebuilder .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-homebuilder .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-homebuilder .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-homebuilder .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-homebuilder .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-homebuilder .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-homebuilder .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-homebuilder .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-homebuilder .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-homebuilder .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-homebuilder .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-homebuilder .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-homebuilder .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-homebuilder .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-homebuilder .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-homebuilder .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-homebuilder .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-homebuilder .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-homebuilder .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-homebuilder .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-homebuilder .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-homebuilder .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-homebuilder .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-homebuilder .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-homebuilder .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-homebuilder .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-homebuilder .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-homebuilder .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-homebuilder .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-homebuilder .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-homebuilder .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-homebuilder .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-homebuilder .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-homebuilder .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-homebuilder .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-homebuilder .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-homebuilder .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-homebuilder .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-homebuilder .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-homebuilder .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-homebuilder .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-homebuilder .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-homebuilder .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-homebuilder .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-homebuilder .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-homebuilder .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-homebuilder .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-homebuilder .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-homebuilder .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-homebuilder .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-homebuilder .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-homebuilder .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-homebuilder .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-homebuilder .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-homebuilder .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-homebuilder .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-homebuilder .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-homebuilder .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-homebuilder .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-homebuilder .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-homebuilder .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-homebuilder .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-homebuilder .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-homebuilder .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-homebuilder .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-homebuilder .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-homebuilder .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-homebuilder .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-homebuilder .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-homebuilder .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-homebuilder .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-homebuilder .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-homebuilder .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-homebuilder .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-homebuilder .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-homebuilder .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-homebuilder .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-homebuilder .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-homebuilder .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-homebuilder .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-homebuilder .rfTrackLayout,
#dreamz-homebuilder .rfFlowLayout,
#dreamz-homebuilder .rfAlertGrid,
#dreamz-homebuilder .rfCycleLayout,
#dreamz-homebuilder .rfSitesLayout,
#dreamz-homebuilder .aiRootLayout,
#dreamz-homebuilder .aiForecastLayout,
#dreamz-homebuilder .aiChatLayout,
#dreamz-homebuilder .aiTrainingLayout,
#dreamz-homebuilder .aiQualityLayout,
#dreamz-homebuilder .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-homebuilder .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-homebuilder .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-homebuilder .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-homebuilder .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-homebuilder .aiLink {
display: none;
}
}
#dreamz-homebuilder .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-homebuilder .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-homebuilder .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-homebuilder .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-homebuilder .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-homebuilder .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-homebuilder .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-homebuilder .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-homebuilder .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-homebuilder .mfgHero h1>span {
display: block;
}
#dreamz-homebuilder .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-homebuilder .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-homebuilder .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-homebuilder .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-homebuilder .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-homebuilder .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-homebuilder .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-homebuilder .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-homebuilder .mfgHeroContent {
min-height: 610px;
}
#dreamz-homebuilder .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-homebuilder .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-homebuilder .mfgHeroLead {
font-size: 16px;
}
#dreamz-homebuilder .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-homebuilder .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-homebuilder .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-homebuilder .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-homebuilder .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-homebuilder .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-homebuilder .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-homebuilder .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-homebuilder .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-homebuilder .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-homebuilder .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-homebuilder .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-homebuilder .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-homebuilder .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-homebuilder .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-homebuilder .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-homebuilder .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-homebuilder .mfgHero {
background: #fff;
color: #000;
}
#dreamz-homebuilder .mfgHeroScene,
#dreamz-homebuilder .mfgHeroActions {
display: none;
}
#dreamz-homebuilder .mfgHeroContent {
min-height: 0;
}
#dreamz-homebuilder .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-homebuilder .mfgHero h1,
#dreamz-homebuilder .mfgHero h1 .mfgHeroAccent,
#dreamz-homebuilder .mfgHero p {
color: #000;
}
}
#dreamz-homebuilder #homebuilder-rfid .featureStage,
#dreamz-homebuilder #homebuilder-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-homebuilder .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-homebuilder .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-homebuilder .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-homebuilder .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-homebuilder .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-homebuilder .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-homebuilder .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-homebuilder .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-homebuilder .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-homebuilder .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-homebuilder .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-homebuilder .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-homebuilder .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-homebuilder .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-homebuilder .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-homebuilder .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-homebuilder .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-homebuilder .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-homebuilder .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-homebuilder .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-homebuilder .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-homebuilder .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-homebuilder .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-homebuilder .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-homebuilder .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-homebuilder .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-homebuilder .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-homebuilder .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-homebuilder .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-homebuilder .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-homebuilder .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-homebuilder .mfgGallery .flowArrow {
display: none;
}
#dreamz-homebuilder .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-homebuilder .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-homebuilder .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-homebuilder .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-homebuilder .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-homebuilder .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-homebuilder .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-homebuilder .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-homebuilder .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-homebuilder .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-homebuilder .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-homebuilder .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-homebuilder .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-homebuilder .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-homebuilder .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-homebuilder .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-homebuilder .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-homebuilder .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-homebuilder .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-homebuilder .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-homebuilder .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-homebuilder .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-homebuilder .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-homebuilder .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-homebuilder .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-homebuilder .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-homebuilder .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-homebuilder .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-homebuilder .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-homebuilder .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-homebuilder .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-homebuilder .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-homebuilder .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-homebuilder .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-homebuilder .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-homebuilder .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-homebuilder .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-homebuilder .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-homebuilder .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-homebuilder .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-homebuilder .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-homebuilder .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-homebuilder .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-homebuilder .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-homebuilder .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-homebuilder .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-homebuilder .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-homebuilder .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-homebuilder .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-homebuilder .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-homebuilder .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-homebuilder .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-homebuilder .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-homebuilder .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-homebuilder .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-homebuilder .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-homebuilder .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-homebuilder .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-homebuilder .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-homebuilder .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-homebuilder .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-homebuilder .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-homebuilder .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-homebuilder .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-homebuilder .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-homebuilder .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-homebuilder .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-homebuilder .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-homebuilder .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-homebuilder .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-homebuilder .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-homebuilder .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-homebuilder .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-homebuilder .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-homebuilder .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-homebuilder .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-homebuilder .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-homebuilder .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-homebuilder .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-homebuilder .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-homebuilder .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-homebuilder #homebuilder-rfid .featureStage,
#dreamz-homebuilder #homebuilder-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-homebuilder #homebuilder-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-homebuilder .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-homebuilder #homebuilder-rfid .featureStage,
#dreamz-homebuilder #homebuilder-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-homebuilder .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-homebuilder .mfgGallery .freshWindow {
height: auto;
}
#dreamz-homebuilder .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-homebuilder .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-homebuilder .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-homebuilder .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-homebuilder .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-homebuilder .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-homebuilder .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-homebuilder .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-homebuilder .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-homebuilder .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-homebuilder .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-homebuilder .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-homebuilder .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-homebuilder .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-homebuilder .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-homebuilder .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-homebuilder .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-homebuilder .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-homebuilder .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-homebuilder .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-homebuilder .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-homebuilder .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-homebuilder .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-homebuilder .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-homebuilder .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-homebuilder .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-homebuilder .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-homebuilder .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-homebuilder .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-homebuilder .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-homebuilder .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-homebuilder .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-homebuilder .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-homebuilder .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-homebuilder .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-homebuilder .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-homebuilder .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-homebuilder .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-homebuilder .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-homebuilder .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-homebuilder .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-homebuilder .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-homebuilder .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-homebuilder .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-homebuilder .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-homebuilder .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-homebuilder .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-homebuilder .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-homebuilder .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-homebuilder .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-homebuilder .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-homebuilder .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-homebuilder .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-homebuilder .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-homebuilder .homebuilderVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-homebuilder .homebuilderGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-homebuilder .homebuilderVisualGallery>.homebuilderGraphic {
display: none;
}
#dreamz-homebuilder #homebuilder-delivery .featureStage,
#dreamz-homebuilder #homebuilder-rfid .featureStage,
#dreamz-homebuilder #homebuilder-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-homebuilder #homebuilder-rfid .homebuilderVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-homebuilder #homebuilder-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-homebuilder .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-homebuilder .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-homebuilder .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-homebuilder .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-homebuilder .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-homebuilder #homebuilder-delivery .featureStage,
#dreamz-homebuilder #homebuilder-rfid .featureStage,
#dreamz-homebuilder #homebuilder-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-homebuilder #homebuilder-rfid .homebuilderVisualGallery,
#dreamz-homebuilder #homebuilder-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-homebuilder .mfgHeroScene {
height: 290px;
}
#dreamz-homebuilder #homebuilder-delivery .featureStage,
#dreamz-homebuilder #homebuilder-rfid .featureStage,
#dreamz-homebuilder #homebuilder-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-homebuilder .homebuilderVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-homebuilder .homebuilderVisualGallery>.homebuilderGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-homebuilder #homebuilder-delivery-features-1:checked~.featureStage .homebuilderVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-2:checked~.featureStage .homebuilderVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-3:checked~.featureStage .homebuilderVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-4:checked~.featureStage .homebuilderVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-homebuilder #homebuilder-delivery-features-5:checked~.featureStage .homebuilderVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-1:checked~.featureStage .homebuilderVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-2:checked~.featureStage .homebuilderVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-3:checked~.featureStage .homebuilderVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-4:checked~.featureStage .homebuilderVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-homebuilder #homebuilder-rfid-features-5:checked~.featureStage .homebuilderVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-1:checked~.featureStage .homebuilderVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-2:checked~.featureStage .homebuilderVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-3:checked~.featureStage .homebuilderVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-4:checked~.featureStage .homebuilderVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-homebuilder #homebuilder-ai-decisions-features-5:checked~.featureStage .homebuilderVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-homebuilder .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-homebuilder .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-homebuilder .homebuilderIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-homebuilder .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-homebuilder .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-homebuilder .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
#dreamz-homebuilder .homebuilderVisualGallery {
min-height: 0;
}
#dreamz-homebuilder .homebuilderIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 90% 50%;
}
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
#dreamz-homebuilder .homebuilderVisualGallery {
min-height: 0;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-homebuilder .homebuilderIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-homebuilder .homebuilderGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-homebuilder .mfgHeroContent {
background: transparent;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 83% 50%;
}
}
#dreamz-homebuilder .mfgHeroContent {
background: transparent;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 86% 50%;
}
}
#dreamz-homebuilder .mfgHeroContent {
background: transparent;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 76% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 87% 50%;
}
}
#dreamz-homebuilder .mfgHeroContent {
background: transparent;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 76% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-homebuilder #homebuilder-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 88% 50%;
}
}
#dreamz-homebuilder .mfgHeroContent {
background: transparent;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 77% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-homebuilder #homebuilder-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 85% 50%;
}
}
#dreamz-homebuilder .mfgHeroContent {
background: transparent;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-homebuilder #homebuilder-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-homebuilder .mfgHeroContent {
background: transparent;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-homebuilder #homebuilder-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 80% 50%;
}
} #dreamz-homebuilder .mfgHeroContent {
background: transparent;
}
#dreamz-homebuilder .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-homebuilder .homebuilderIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-homebuilder .homebuilderGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
#dreamz-homebuilder .mfgHeroScene img {
object-position: 80% 50%;
}
}  .specialty-contractor .industryIntroHead.compact,
.specialty-contractor .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.specialty-contractor .featureMediaPanels {
position: relative;
min-height: 430px;
}
.specialty-contractor .featureMediaPanels>.mediaPanel {
display: none;
}
.specialty-contractor .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.specialty-contractor .featureMediaPanels .spotlightMedia {
height: 100%;
}
.specialty-contractor .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.specialty-contractor .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.specialty-contractor .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.specialty-contractor .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.specialty-contractor .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.specialty-contractor .windowTop small {
font-size: 10px;
color: var(--muted);
}
.specialty-contractor .windowDots {
display: flex;
gap: 5px;
}
.specialty-contractor .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.specialty-contractor .windowBody {
padding: 16px;
}
.specialty-contractor .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.specialty-contractor .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.specialty-contractor .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.specialty-contractor .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.specialty-contractor .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.specialty-contractor .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.specialty-contractor .chartGridLine.l1 {
top: 34px;
}
.specialty-contractor .chartGridLine.l2 {
top: 65px;
}
.specialty-contractor .chartGridLine.l3 {
top: 96px;
}
.specialty-contractor .chartGridLine.l4 {
top: 127px;
}
.specialty-contractor .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.specialty-contractor .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.specialty-contractor .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.specialty-contractor .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.specialty-contractor .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.specialty-contractor .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.specialty-contractor .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.specialty-contractor .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.specialty-contractor .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.specialty-contractor .spectrumNotes {
display: grid;
gap: 10px;
}
.specialty-contractor .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.specialty-contractor .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.specialty-contractor .noteCard p,
.specialty-contractor .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.specialty-contractor .alertStack {
display: grid;
gap: 10px;
}
.specialty-contractor .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.specialty-contractor .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.specialty-contractor .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.specialty-contractor .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.specialty-contractor .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.specialty-contractor .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.specialty-contractor .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.specialty-contractor .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.specialty-contractor .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.specialty-contractor .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.specialty-contractor .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.specialty-contractor .scheduleBoard h4,
.specialty-contractor .todoBoard h4,
.specialty-contractor .siteBoard h4,
.specialty-contractor .chatPanel h4,
.specialty-contractor .lessonPanel h4,
.specialty-contractor .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.specialty-contractor .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.specialty-contractor .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.specialty-contractor .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.specialty-contractor .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.specialty-contractor .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.specialty-contractor .taskRow:last-child {
border-bottom: 0;
}
.specialty-contractor .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.specialty-contractor .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.specialty-contractor .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.specialty-contractor .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.specialty-contractor .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.specialty-contractor .inventoryTable th,
.specialty-contractor .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.specialty-contractor .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.specialty-contractor .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.specialty-contractor .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.specialty-contractor .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.specialty-contractor .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.specialty-contractor .phoneBody {
padding: 12px;
}
.specialty-contractor .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.specialty-contractor .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.specialty-contractor .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.specialty-contractor .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.specialty-contractor .progressList {
display: grid;
gap: 10px;
}
.specialty-contractor .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.specialty-contractor .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.specialty-contractor .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.specialty-contractor .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.specialty-contractor .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.specialty-contractor .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.specialty-contractor .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.specialty-contractor .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.specialty-contractor .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.specialty-contractor .pin1 {
top: 56px;
left: 58px;
}
.specialty-contractor .pin2 {
top: 88px;
right: 88px;
}
.specialty-contractor .pin3 {
bottom: 54px;
right: 72px;
}
.specialty-contractor .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.specialty-contractor .siteRow:last-child {
border-bottom: 0;
}
.specialty-contractor .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.specialty-contractor .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.specialty-contractor .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.specialty-contractor .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.specialty-contractor .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.specialty-contractor .graphNodes:before,
.specialty-contractor .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.specialty-contractor .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.specialty-contractor .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.specialty-contractor .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.specialty-contractor .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.specialty-contractor .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.specialty-contractor .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.specialty-contractor .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.specialty-contractor .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.specialty-contractor .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.specialty-contractor .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.specialty-contractor .forecastList .taskRow strong {
font-size: 11px;
}
.specialty-contractor .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.specialty-contractor .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.specialty-contractor .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.specialty-contractor .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.specialty-contractor .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.specialty-contractor .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.specialty-contractor .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.specialty-contractor .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.specialty-contractor .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.specialty-contractor .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.specialty-contractor .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.specialty-contractor .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.specialty-contractor .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.specialty-contractor .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.specialty-contractor .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.specialty-contractor .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.specialty-contractor .qualityRows {
display: grid;
gap: 10px;
}
.specialty-contractor .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.specialty-contractor .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.specialty-contractor .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.specialty-contractor .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.specialty-contractor .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.specialty-contractor #specialty-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.specialty-contractor #specialty-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.specialty-contractor #specialty-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.specialty-contractor #specialty-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.specialty-contractor #specialty-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.specialty-contractor #specialty-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.specialty-contractor #specialty-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.specialty-contractor #specialty-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.specialty-contractor #specialty-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.specialty-contractor #specialty-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.specialty-contractor #specialty-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.specialty-contractor #specialty-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.specialty-contractor #specialty-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.specialty-contractor #specialty-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.specialty-contractor #specialty-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.specialty-contractor #specialty-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.specialty-contractor #specialty-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.specialty-contractor #specialty-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.specialty-contractor #specialty-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.specialty-contractor #specialty-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.specialty-contractor #specialty-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.specialty-contractor #specialty-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.specialty-contractor #specialty-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.specialty-contractor #specialty-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.specialty-contractor #specialty-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.specialty-contractor #specialty-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.specialty-contractor #specialty-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.specialty-contractor #specialty-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.specialty-contractor #specialty-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.specialty-contractor #specialty-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.specialty-contractor .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.specialty-contractor .featureMediaPanels {
min-height: 0;
}
.specialty-contractor .inventorySplit,
.specialty-contractor .forecastGrid,
.specialty-contractor .siteGrid,
.specialty-contractor .spectrumGrid,
.specialty-contractor .scheduleGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.specialty-contractor .metricGrid,
.specialty-contractor .lessonCards,
.specialty-contractor .gaugeGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.specialty-contractor .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.specialty-contractor {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
}
.specialty-contractor * {
box-sizing: border-box;
}
.specialty-contractor {
scroll-behavior: smooth;
}
.specialty-contractor {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
.specialty-contractor a {
color: inherit;
text-decoration: none;
}
.specialty-contractor .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
.specialty-contractor .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.specialty-contractor .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.specialty-contractor .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.specialty-contractor .brand span {
color: var(--brand);
}
.specialty-contractor .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.specialty-contractor .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.specialty-contractor .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.specialty-contractor .button.primary:hover {
background: var(--brand-dark);
}
.specialty-contractor .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.specialty-contractor .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.specialty-contractor .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.specialty-contractor .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.specialty-contractor .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.specialty-contractor .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.specialty-contractor .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.specialty-contractor .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.specialty-contractor .hero .button.primary:hover {
background: var(--black-soft);
}
.specialty-contractor .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.specialty-contractor .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.specialty-contractor .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.specialty-contractor .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.specialty-contractor .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.specialty-contractor .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.specialty-contractor .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.specialty-contractor .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.specialty-contractor .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.specialty-contractor .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.specialty-contractor .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.specialty-contractor .ratingLead strong {
display: block;
font-size: 20px;
}
.specialty-contractor .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.specialty-contractor .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.specialty-contractor .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.specialty-contractor .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.specialty-contractor .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.specialty-contractor .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.specialty-contractor .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.specialty-contractor .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.specialty-contractor .awardLead span {
color: var(--muted);
font-size: 13px;
}
.specialty-contractor .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
.specialty-contractor section {
padding: 88px 0;
}
.specialty-contractor .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.specialty-contractor .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.specialty-contractor .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.specialty-contractor .aiJourney h2 {
color: #fff;
}
.specialty-contractor .aiJourney .sectionHead p {
color: #D7D7D7;
}
.specialty-contractor .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.specialty-contractor .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.specialty-contractor .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.specialty-contractor .aiStep:last-child::after {
display: none;
}
.specialty-contractor .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.specialty-contractor .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.specialty-contractor .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.specialty-contractor .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.specialty-contractor .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.specialty-contractor .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.specialty-contractor .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.specialty-contractor .outcome span {
color: var(--muted);
font-size: 14px;
}
.specialty-contractor .capability {
background: #fff;
}
.specialty-contractor .capability.alt {
background: var(--sky-2);
}
.specialty-contractor .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.specialty-contractor .twoCol.reverse .visual {
order: 2;
}
.specialty-contractor .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.specialty-contractor .visual .placeholder {
min-height: 355px;
}
.specialty-contractor .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.specialty-contractor .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.specialty-contractor details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.specialty-contractor details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.specialty-contractor details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.specialty-contractor details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.specialty-contractor details.capabilityMore[open] summary::after {
content: "−";
}
.specialty-contractor details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.specialty-contractor .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.specialty-contractor .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.specialty-contractor .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.specialty-contractor .darkSection h2,
.specialty-contractor .darkSection h3 {
color: #fff;
}
.specialty-contractor .darkSection .sectionHead p,
.specialty-contractor .darkSection .copy p {
color: #D7D7D7;
}
.specialty-contractor .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.specialty-contractor .darkSection .featureItem {
color: #F7F7F7;
}
.specialty-contractor .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.specialty-contractor .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.specialty-contractor .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.specialty-contractor .darkSection .placeholder small {
color: #D0D0D0;
}
.specialty-contractor .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.specialty-contractor .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.specialty-contractor .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.specialty-contractor .card p {
color: var(--muted);
margin: 12px 0 0;
}
.specialty-contractor .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.specialty-contractor .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.specialty-contractor .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.specialty-contractor .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.specialty-contractor .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.specialty-contractor .benefitBand h2 {
color: #fff;
}
.specialty-contractor .benefitBand .sectionHead p {
color: #D5D5D5;
}
.specialty-contractor .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.specialty-contractor .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.specialty-contractor .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.specialty-contractor .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.specialty-contractor .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.specialty-contractor .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.specialty-contractor .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.specialty-contractor .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.specialty-contractor .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.specialty-contractor .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.specialty-contractor .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.specialty-contractor details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.specialty-contractor summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
.specialty-contractor details p {
color: var(--muted);
margin: 12px 0 0;
}
.specialty-contractor .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.specialty-contractor .ctaPanel h2 {
color: #fff;
}
.specialty-contractor .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.specialty-contractor .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.specialty-contractor .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.specialty-contractor .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.specialty-contractor .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.specialty-contractor .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.specialty-contractor .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.specialty-contractor .inlineCta.dark h3 {
color: #fff;
}
.specialty-contractor .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.specialty-contractor .inlineCta.dark p {
color: #D8D8D8;
}
.specialty-contractor .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.specialty-contractor .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.specialty-contractor .button.yellow:hover {
background: #FFD84D;
}
.specialty-contractor .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.specialty-contractor .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.specialty-contractor .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.specialty-contractor .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.specialty-contractor footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.specialty-contractor .ratingSectionGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.specialty-contractor .heroGrid,
.specialty-contractor .twoCol,
.specialty-contractor .ctaPanel {
grid-template-columns: 1fr;
}
.specialty-contractor .twoCol.reverse .visual {
order: initial;
}
.specialty-contractor .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.specialty-contractor .ratingGrid,
.specialty-contractor .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.specialty-contractor .ratingLead,
.specialty-contractor .awardLead {
grid-column: 1/-1;
text-align: center;
}
.specialty-contractor .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.specialty-contractor .aiStep:nth-child(3)::after,
.specialty-contractor .aiStep:last-child::after {
display: none;
}
.specialty-contractor .outcomeGrid,
.specialty-contractor .challengeGrid,
.specialty-contractor .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.specialty-contractor .cards,
.specialty-contractor .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.specialty-contractor .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.specialty-contractor .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.specialty-contractor .awardProofGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .wrap {
width: min(var(--max), calc(100% - 24px));
}
.specialty-contractor .hero {
padding: 58px 0 52px;
}
.specialty-contractor section {
padding: 64px 0;
}
.specialty-contractor .aiFlow {
grid-template-columns: 1fr;
}
.specialty-contractor .aiStep::after {
display: none;
}
.specialty-contractor .logoRow,
.specialty-contractor .ratingGrid,
.specialty-contractor .awardGrid,
.specialty-contractor .outcomeGrid,
.specialty-contractor .challengeGrid,
.specialty-contractor .benefitGrid,
.specialty-contractor .cards,
.specialty-contractor .proofCards,
.specialty-contractor .integrationGrid,
.specialty-contractor .featureList {
grid-template-columns: 1fr;
}
.specialty-contractor .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.specialty-contractor .ctaPanel {
padding: 34px 24px;
}
.specialty-contractor .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.specialty-contractor .inlineCtaActions {
width: 100%;
}
.specialty-contractor .inlineCtaActions .button {
flex: 1;
}
}
.specialty-contractor {
--muted: #526A7C;
--shadow: none;
}
.specialty-contractor {
background: var(--sky-2);
}
.specialty-contractor p {
margin-bottom: 0;
}
.specialty-contractor svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.specialty-contractor .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.specialty-contractor h1,
.specialty-contractor h2,
.specialty-contractor h3 {
color: var(--black);
}
.specialty-contractor .darkSection h2,
.specialty-contractor .darkSection h3,
.specialty-contractor .aiJourney h2,
.specialty-contractor .benefitBand h2,
.specialty-contractor .ctaPanel h2,
.specialty-contractor .inlineCta.dark h3 {
color: #fff;
}
.specialty-contractor .wrap>*,
.specialty-contractor .heroGrid>*,
.specialty-contractor .twoCol>*,
.specialty-contractor .ctaPanel>* {
min-width: 0;
}
.specialty-contractor .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.specialty-contractor .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.specialty-contractor .skipLink:focus {
transform: none;
}
.specialty-contractor a:focus-visible,
.specialty-contractor summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.specialty-contractor .darkSection a:focus-visible,
.specialty-contractor .darkSection summary:focus-visible,
.specialty-contractor .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.specialty-contractor .topbar {
background: #fff;
backdrop-filter: none;
}
.specialty-contractor .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.specialty-contractor .brandName {
display: inline;
color: var(--navy) !important;
}
.specialty-contractor .brandName>span {
color: var(--brand-dark);
}
.specialty-contractor .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.specialty-contractor .brandMark .icon2 {
width: 21px;
height: 21px;
}
.specialty-contractor .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.specialty-contractor .navlinks a:hover {
color: var(--brand-dark);
}
.specialty-contractor .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.specialty-contractor .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.specialty-contractor .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.specialty-contractor .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.specialty-contractor .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.specialty-contractor .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.specialty-contractor .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.specialty-contractor .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.specialty-contractor .heroVisual {
width: 100%;
min-width: 0;
}
.specialty-contractor .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.specialty-contractor .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.specialty-contractor .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.specialty-contractor .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.specialty-contractor .clientBand {
padding: 27px 0;
}
.specialty-contractor .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.specialty-contractor .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.specialty-contractor .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.specialty-contractor .logoBox.wide {
font-size: 12px;
}
.specialty-contractor .logoBox small {
display: block;
font-size: 10px;
}
.specialty-contractor section {
padding: 80px 0;
}
.specialty-contractor h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.specialty-contractor .sectionHead {
margin-bottom: 36px;
}
.specialty-contractor .eyebrow {
line-height: 1.5;
}
.specialty-contractor .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.specialty-contractor .aiStep {
min-height: 162px;
}
.specialty-contractor .aiStep strong {
line-height: 1.35;
}
.specialty-contractor .aiStep span {
line-height: 1.65;
}
.specialty-contractor .aiCallout {
margin-top: 24px;
}
.specialty-contractor .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.specialty-contractor .outcome>.icon2 {
color: var(--navy);
}
.specialty-contractor .awardItem:hover {
border-color: var(--brand-dark);
}
.specialty-contractor .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.specialty-contractor .twoCol.reverse .visual {
order: -1;
}
.specialty-contractor .copy .eyebrow {
margin-bottom: 17px;
}
.specialty-contractor .copy p {
font-size: 16px;
line-height: 1.85;
}
.specialty-contractor .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.specialty-contractor .featureList {
gap: 13px 18px;
}
.specialty-contractor .featureItem {
font-size: 13px;
line-height: 1.6;
}
.specialty-contractor .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.specialty-contractor .check .icon2 {
width: 14px;
height: 14px;
}
.specialty-contractor details.capabilityMore {
margin-bottom: 0;
}
.specialty-contractor .capabilityMore summary {
min-height: 34px;
}
.specialty-contractor .capabilityMore .moreGrid {
gap: 13px 18px;
}
.specialty-contractor .textCta {
font-size: 14px;
}
.specialty-contractor .visual {
min-width: 0;
}
.specialty-contractor .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.specialty-contractor .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.specialty-contractor .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.specialty-contractor .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.specialty-contractor .panelBody {
padding: 20px;
}
.specialty-contractor .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.specialty-contractor .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.specialty-contractor .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.specialty-contractor .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.specialty-contractor .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.specialty-contractor .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.specialty-contractor .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.specialty-contractor .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.specialty-contractor .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.specialty-contractor .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.specialty-contractor .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.specialty-contractor .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.specialty-contractor .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.specialty-contractor .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.specialty-contractor .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.specialty-contractor .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.specialty-contractor .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.specialty-contractor .miniStats span {
font-size: 9px;
color: var(--muted);
}
.specialty-contractor .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.specialty-contractor .dataRow:last-child {
border-bottom: 0;
}
.specialty-contractor .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.specialty-contractor .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.specialty-contractor .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.specialty-contractor .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.specialty-contractor .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.specialty-contractor .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.specialty-contractor .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.specialty-contractor .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.specialty-contractor .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.specialty-contractor .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.specialty-contractor .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.specialty-contractor .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.specialty-contractor .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.specialty-contractor .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.specialty-contractor .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.specialty-contractor .mobileAccount {
text-align: center;
padding: 13px 0;
}
.specialty-contractor .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.specialty-contractor .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.specialty-contractor .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.specialty-contractor .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.specialty-contractor .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.specialty-contractor .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.specialty-contractor .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.specialty-contractor .phoneDevice .rowCopy strong {
font-size: 9px;
}
.specialty-contractor .phoneDevice .rowCopy small {
font-size: 7px;
}
.specialty-contractor .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.specialty-contractor .mobileSide {
display: grid;
gap: 10px;
}
.specialty-contractor .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.specialty-contractor .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.specialty-contractor .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.specialty-contractor .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.specialty-contractor .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.specialty-contractor .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.specialty-contractor .darkSection .panelHead>strong {
color: #fff;
}
.specialty-contractor .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.specialty-contractor .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.specialty-contractor .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.specialty-contractor .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.specialty-contractor .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.specialty-contractor .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.specialty-contractor .promptList {
display: grid;
gap: 10px;
}
.specialty-contractor .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.specialty-contractor .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.specialty-contractor .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.specialty-contractor .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.specialty-contractor .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.specialty-contractor .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.specialty-contractor .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.specialty-contractor .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.specialty-contractor .quoteTable th,
.specialty-contractor .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.specialty-contractor .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.specialty-contractor .quoteTable td:first-child {
width: 64%;
}
.specialty-contractor .quoteTable th:last-child,
.specialty-contractor .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.specialty-contractor .quoteTable strong {
font-size: 11px;
}
.specialty-contractor .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.specialty-contractor .quoteTable tfoot {
background: #F5FBFF;
}
.specialty-contractor .quoteTable tfoot th {
font-size: 10px;
}
.specialty-contractor .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.specialty-contractor .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.specialty-contractor .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.specialty-contractor .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.specialty-contractor .orderJourney {
margin: 20px 0;
}
.specialty-contractor .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.specialty-contractor .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.specialty-contractor .journeyRow:last-child:before {
display: none;
}
.specialty-contractor .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.specialty-contractor .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.specialty-contractor .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.specialty-contractor .journeyRow strong {
font-size: 12px;
display: block;
}
.specialty-contractor .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.specialty-contractor .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.specialty-contractor .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.specialty-contractor .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.specialty-contractor .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.specialty-contractor .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.specialty-contractor .inventoryIntro strong {
display: block;
font-size: 16px;
}
.specialty-contractor .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.specialty-contractor .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.specialty-contractor .availabilityCard span {
font-size: 9px;
display: block;
}
.specialty-contractor .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.specialty-contractor .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.specialty-contractor .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.specialty-contractor .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.specialty-contractor .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.specialty-contractor .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.specialty-contractor .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.specialty-contractor .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.specialty-contractor .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.specialty-contractor .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.specialty-contractor .customerTimeline .dataRow {
border-color: #353535;
}
.specialty-contractor .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.specialty-contractor .customerTimeline strong {
color: #fff;
}
.specialty-contractor .customerTimeline small {
color: #BFBFBF;
}
.specialty-contractor .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.specialty-contractor .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.specialty-contractor .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.specialty-contractor .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.specialty-contractor .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.specialty-contractor .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.specialty-contractor .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.specialty-contractor .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.specialty-contractor .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.specialty-contractor .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.specialty-contractor .chartTitle strong {
font-size: 12px;
}
.specialty-contractor .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.specialty-contractor .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.specialty-contractor .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.specialty-contractor .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.specialty-contractor .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.specialty-contractor .inlineCta {
margin-top: 0;
box-shadow: none;
}
.specialty-contractor .inlineCtaActions {
max-width: 42%;
}
.specialty-contractor .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.specialty-contractor .inlineCta h3 {
line-height: 1.35;
}
.specialty-contractor .card {
box-shadow: none;
}
.specialty-contractor .cardIcon {
box-shadow: none;
}
.specialty-contractor .card h3 {
font-size: 22px;
}
.specialty-contractor .card p {
font-size: 14px;
line-height: 1.8;
}
.specialty-contractor .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.specialty-contractor .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.specialty-contractor .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.specialty-contractor .ratingBand {
padding: 34px 0;
}
.specialty-contractor .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.specialty-contractor .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.specialty-contractor .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.specialty-contractor .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.specialty-contractor .ratingItem:first-child {
border-left: 0;
}
.specialty-contractor .proofCard h3 {
font-size: 23px;
}
.specialty-contractor .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.specialty-contractor .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.specialty-contractor .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.specialty-contractor .integration {
min-height: 98px;
}
.specialty-contractor .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.specialty-contractor .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.specialty-contractor .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.specialty-contractor .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.specialty-contractor .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.specialty-contractor .finalActions {
display: grid;
gap: 11px;
}
.specialty-contractor .finalActions .button {
white-space: nowrap;
}
.specialty-contractor .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.specialty-contractor .footerInner p {
margin: 0;
font-size: 12px;
}
.specialty-contractor .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.specialty-contractor .navlinks {
gap: 15px;
font-size: 12px;
}
.specialty-contractor .heroGrid {
gap: 30px;
}
.specialty-contractor .twoCol {
gap: 32px;
}
.specialty-contractor .panelBody {
padding: 16px;
}
.specialty-contractor .panelHead {
padding: 16px;
}
.specialty-contractor .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.specialty-contractor .pipelineColumns {
gap: 7px;
}
.specialty-contractor .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.specialty-contractor .heroGrid,
.specialty-contractor .twoCol,
.specialty-contractor .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .heroGrid {
gap: 36px;
}
.specialty-contractor .hero h1 {
max-width: 730px;
}
.specialty-contractor .hero .lead {
max-width: 690px;
}
.specialty-contractor .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.specialty-contractor .twoCol {
gap: 34px;
}
.specialty-contractor .twoCol.reverse .visual {
order: initial;
}
.specialty-contractor .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.specialty-contractor .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.specialty-contractor .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.specialty-contractor .awardItem {
font-size: 12px;
padding: 13px;
}
.specialty-contractor .ratingSectionGrid {
gap: 20px;
}
.specialty-contractor .inlineCta {
align-items: flex-start;
}
.specialty-contractor .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.specialty-contractor .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.specialty-contractor .card {
padding: 22px;
}
.specialty-contractor .card h3 {
font-size: 21px;
}
.specialty-contractor .finalActions {
display: flex;
flex-wrap: wrap;
}
.specialty-contractor .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.specialty-contractor .cards,
.specialty-contractor .proofCards {
grid-template-columns: 1fr;
}
.specialty-contractor .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.specialty-contractor .inlineCta {
flex-direction: column;
}
.specialty-contractor .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.specialty-contractor .inlineCtaActions .button {
flex: 1;
}
.specialty-contractor .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.specialty-contractor .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.specialty-contractor .wrap {
width: calc(100% - 32px);
}
.specialty-contractor .brand {
font-size: 20px;
gap: 7px;
}
.specialty-contractor .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.specialty-contractor .brandMark .icon2 {
width: 18px;
height: 18px;
}
.specialty-contractor .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.specialty-contractor section {
padding: 60px 0;
}
.specialty-contractor .hero {
padding: 51px 0 48px;
}
.specialty-contractor .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.specialty-contractor .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.specialty-contractor .heroActions {
gap: 10px;
margin-top: 25px;
}
.specialty-contractor .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.specialty-contractor .hero .microcopy {
font-size: 11px;
}
.specialty-contractor .heroPills span {
font-size: 9px;
}
.specialty-contractor .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.specialty-contractor .sectionHead p {
font-size: 16px;
}
.specialty-contractor .copy h2 {
font-size: 34px;
}
.specialty-contractor .copy p {
font-size: 15px;
}
.specialty-contractor .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.specialty-contractor .logoBox {
min-height: 53px;
}
.specialty-contractor .logoBox:last-child {
grid-column: 1/-1;
}
.specialty-contractor .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.specialty-contractor .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.specialty-contractor .aiStep strong {
font-size: 13px;
}
.specialty-contractor .aiStep span {
font-size: 11px;
}
.specialty-contractor .aiStep::after {
display: none;
}
.specialty-contractor .outcomeGrid,
.specialty-contractor .challengeGrid,
.specialty-contractor .benefitGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .outcome {
padding: 24px;
}
.specialty-contractor .outcome strong {
font-size: 22px;
}
.specialty-contractor .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.specialty-contractor .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.specialty-contractor .awardItem:last-child {
grid-column: 1/-1;
}
.specialty-contractor .featureList,
.specialty-contractor .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .featureItem {
font-size: 13px;
}
.specialty-contractor .inlineCta {
padding: 22px;
gap: 19px;
}
.specialty-contractor .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.specialty-contractor .panelHead {
padding: 15px 13px;
}
.specialty-contractor .panelHead>strong {
font-size: 12px;
}
.specialty-contractor .panelBody {
padding: 14px;
}
.specialty-contractor .productPanel {
border-radius: 16px;
}
.specialty-contractor .productPanel figcaption {
padding: 0 14px 13px;
}
.specialty-contractor .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.specialty-contractor .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.specialty-contractor .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.specialty-contractor .deal {
margin-top: 0;
padding: 10px;
}
.specialty-contractor .deal strong {
font-size: 10px;
}
.specialty-contractor .deal small {
font-size: 9px;
}
.specialty-contractor .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.specialty-contractor .mobileWorkspace {
gap: 12px;
}
.specialty-contractor .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.specialty-contractor .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.specialty-contractor .sideTile {
padding: 10px;
}
.specialty-contractor .sideTile strong {
font-size: 10px;
}
.specialty-contractor .sideTile p {
font-size: 9px;
}
.specialty-contractor .mobileHeader strong {
font-size: 15px;
}
.specialty-contractor .mobileAccount strong {
font-size: 10px;
}
.specialty-contractor .mobileAccount small {
font-size: 7px;
}
.specialty-contractor .phoneDevice .rowIcon {
display: none;
}
.specialty-contractor .quoteTable th,
.specialty-contractor .quoteTable td {
padding: 12px 4px;
}
.specialty-contractor .quoteTable strong {
font-size: 10px;
}
.specialty-contractor .quoteTable small {
font-size: 8px;
}
.specialty-contractor .quoteTable tfoot th {
font-size: 9px;
}
.specialty-contractor .docHeader strong {
font-size: 17px;
}
.specialty-contractor .miniFlow {
gap: 5px;
font-size: 9px;
}
.specialty-contractor .miniFlow span {
padding: 6px;
}
.specialty-contractor .rowCopy strong {
font-size: 10px;
}
.specialty-contractor .rowCopy small {
font-size: 8px;
}
.specialty-contractor .statusPill {
font-size: 7px;
padding: 5px;
}
.specialty-contractor .miniStats {
gap: 7px;
}
.specialty-contractor .miniStats>div {
padding: 9px;
}
.specialty-contractor .miniStats strong {
font-size: 18px;
}
.specialty-contractor .miniStats span {
font-size: 8px;
}
.specialty-contractor .collectionStats>div {
padding: 13px;
}
.specialty-contractor .collectionStats strong {
font-size: 24px;
}
.specialty-contractor .customerHeader strong {
font-size: 17px;
}
.specialty-contractor .customerFacts>div {
padding: 10px;
}
.specialty-contractor .customerFacts strong {
font-size: 12px;
}
.specialty-contractor .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.specialty-contractor .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.specialty-contractor .ratingItem:last-child {
grid-column: 1/-1;
}
.specialty-contractor .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.specialty-contractor .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.specialty-contractor .integration small {
font-size: 9px;
}
.specialty-contractor .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.specialty-contractor .ctaPanel p {
font-size: 15px;
}
.specialty-contractor .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.specialty-contractor .footerInner {
align-items: flex-start;
flex-direction: column;
}
.specialty-contractor .contextSection {
padding: 0 0 24px;
}
.specialty-contractor .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.specialty-contractor .wrap {
width: calc(100% - 24px);
}
.specialty-contractor .brand {
font-size: 18px;
}
.specialty-contractor .brandMark {
width: 25px;
height: 25px;
}
.specialty-contractor .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.specialty-contractor .hero h1 {
font-size: 38px;
}
.specialty-contractor .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.specialty-contractor .copy h2 {
font-size: 31px;
}
.specialty-contractor .mobileWorkspace {
grid-template-columns: 1fr;
}
.specialty-contractor .phoneDevice {
width: 210px;
}
.specialty-contractor .phoneDevice .rowIcon {
display: grid;
}
.specialty-contractor .mobileSide {
gap: 8px;
}
.specialty-contractor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.specialty-contractor .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.specialty-contractor .sideTile p {
margin: 0;
}
.specialty-contractor .miniFlow span {
padding: 5px;
font-size: 8px;
}
.specialty-contractor .collectionStats strong {
font-size: 21px;
}
.specialty-contractor .inventoryIntro strong {
font-size: 14px;
}
.specialty-contractor .dataRow {
gap: 7px;
}
.specialty-contractor .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.specialty-contractor .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
.specialty-contractor {
scroll-behavior: auto;
}
.specialty-contractor *,
.specialty-contractor *::before,
.specialty-contractor *::after {
transition: none !important;
animation: none !important;
}
}
.specialty-contractor {
background: var(--sky-2);
}
.specialty-contractor .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
.specialty-contractor .hero .eyebrow {
max-width: 100%;
}
.specialty-contractor .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.specialty-contractor .ganttIllustration,
.specialty-contractor .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.specialty-contractor .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.specialty-contractor .costIllustration {
aspect-ratio: 484/226;
}
.specialty-contractor .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.specialty-contractor .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.specialty-contractor .comparisonTable thead {
background: var(--black);
color: #fff;
}
.specialty-contractor .comparisonTable thead th:last-child {
color: var(--yellow);
}
.specialty-contractor .comparisonTable th,
.specialty-contractor .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.specialty-contractor .comparisonTable th:first-child {
width: 23%;
}
.specialty-contractor .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.specialty-contractor .comparisonTable tbody td {
color: var(--muted);
}
.specialty-contractor .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.specialty-contractor .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.specialty-contractor .card,
.specialty-contractor .proofCard,
.specialty-contractor .productPanel,
.specialty-contractor .outcome,
.specialty-contractor .benefit {
box-shadow: none;
}
.specialty-contractor .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.specialty-contractor .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.specialty-contractor .hero .eyebrow {
font-size: 10px;
}
.specialty-contractor .comparisonTable {
font-size: 11px;
}
.specialty-contractor .comparisonTable th,
.specialty-contractor .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.specialty-contractor .comparisonTable th:first-child {
width: 24%;
}
.specialty-contractor .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.specialty-contractor .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.specialty-contractor .hero h1 {
font-size: 38px;
}
}
.specialty-contractor .scheduleIllustration,
.specialty-contractor .analyticsIllustration,
.specialty-contractor .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.specialty-contractor .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.specialty-contractor .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.specialty-contractor .conditionIllustration {
aspect-ratio: 484 / 178;
}
.specialty-contractor .miniStats strong {
font-variant-numeric: tabular-nums;
}
.specialty-contractor .quoteTable td:last-child {
white-space: nowrap;
}
.specialty-contractor .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.specialty-contractor .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.specialty-contractor .darkSection .textCta {
color: var(--yellow);
}
.specialty-contractor .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.specialty-contractor .secondaryLinks .textCta {
font-size: 12px;
}
.specialty-contractor .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.specialty-contractor .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.specialty-contractor .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.specialty-contractor .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.specialty-contractor .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.specialty-contractor .scanSummary>.icon2 {
color: var(--yellow);
flex: 0 0 24px;
}
.specialty-contractor .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.specialty-contractor .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.specialty-contractor .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.specialty-contractor .returnFlag .icon2 {
flex: 0 0 24px;
}
.specialty-contractor .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.specialty-contractor .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.specialty-contractor .phoneDevice {
max-width: 100%;
}
.specialty-contractor .heroPills {
line-height: 1.55;
}
.specialty-contractor .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.specialty-contractor .plantFacts {
gap: 7px;
}
.specialty-contractor .plantFacts>div {
padding: 9px;
}
.specialty-contractor .plantFacts strong {
font-size: 11px;
}
.specialty-contractor .scanSummary {
padding: 12px;
}
.specialty-contractor .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.specialty-contractor .mobileWorkspace {
grid-template-columns: 1fr;
}
.specialty-contractor .phoneDevice {
width: 224px;
margin: auto;
}
.specialty-contractor .phoneDevice .rowIcon {
display: grid;
}
.specialty-contractor .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.specialty-contractor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.specialty-contractor .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.specialty-contractor .sideTile strong {
font-size: 12px;
}
.specialty-contractor .sideTile p {
margin: 0;
font-size: 11px;
}
}
.specialty-contractor {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
.specialty-contractor p {
margin: 0;
}
.specialty-contractor main {
display: block;
}
.specialty-contractor section {
padding: 74px 0;
}
.specialty-contractor .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.specialty-contractor .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.specialty-contractor .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.specialty-contractor .heroAccent {
color: var(--black);
}
.specialty-contractor .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.specialty-contractor .heroActions {
gap: 10px;
margin-top: 24px;
}
.specialty-contractor .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.specialty-contractor .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.specialty-contractor .microcopy {
margin-top: 14px;
}
.specialty-contractor .heroPills {
margin-top: 13px;
}
.specialty-contractor .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.specialty-contractor .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.specialty-contractor .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.specialty-contractor .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.specialty-contractor .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.specialty-contractor .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.specialty-contractor .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.specialty-contractor .clientBand {
padding: 24px 0;
}
.specialty-contractor .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.specialty-contractor .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.specialty-contractor .logoBox.wide {
font-size: 15px;
}
.specialty-contractor .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.specialty-contractor .sectionHead p {
margin: 17px 0 0;
}
.specialty-contractor .copy p {
margin: 16px 0 0;
}
.specialty-contractor .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.specialty-contractor .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.specialty-contractor .aiJourney {
background: var(--black);
}
.specialty-contractor .aiStep {
min-height: 157px;
border-color: #353535;
}
.specialty-contractor .productPanel {
border-radius: 18px;
}
.specialty-contractor .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.specialty-contractor .panelHead>strong {
font-size: 13px;
}
.specialty-contractor .sampleTag {
font-size: 9px;
}
.specialty-contractor .panelBody {
padding: 21px;
}
.specialty-contractor .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.specialty-contractor .docHeader {
padding-bottom: 16px;
}
.specialty-contractor .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.specialty-contractor .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.specialty-contractor .smallLabel {
font-size: 9px;
}
.specialty-contractor .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.specialty-contractor .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.specialty-contractor .dataRow {
padding: 14px 0;
}
.specialty-contractor .statusPill {
font-size: 8px;
}
.specialty-contractor .miniStats {
gap: 10px;
margin: 18px 0;
}
.specialty-contractor .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.specialty-contractor .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.specialty-contractor .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.specialty-contractor .contextNote {
font-size: 11px;
margin-top: 16px;
}
.specialty-contractor .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.specialty-contractor .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.specialty-contractor .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.specialty-contractor .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.specialty-contractor .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.specialty-contractor .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.specialty-contractor .hierarchy strong {
color: var(--navy);
}
.specialty-contractor .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.specialty-contractor .conditionIllustration {
aspect-ratio: 484/201;
}
.specialty-contractor .analyticsIllustration {
aspect-ratio: 484/206;
}
.specialty-contractor .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.specialty-contractor .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.specialty-contractor .phoneDevice .rowCopy strong {
font-size: 10px;
}
.specialty-contractor .phoneDevice .rowCopy small {
font-size: 9px;
}
.specialty-contractor .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.specialty-contractor .mobileAccount small {
font-size: 9px;
}
.specialty-contractor .sideTile {
background: var(--sky-2);
padding: 14px;
}
.specialty-contractor .sideTile strong {
font-size: 12px;
}
.specialty-contractor .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.specialty-contractor .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.specialty-contractor .mobileAction {
font-size: 9px;
}
.specialty-contractor .journeyRow strong {
font-size: 13px;
}
.specialty-contractor .journeyRow small {
font-size: 11px;
}
.specialty-contractor .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.specialty-contractor .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.specialty-contractor .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.specialty-contractor .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.specialty-contractor .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.specialty-contractor .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.specialty-contractor .utilityReadout small {
font-size: 12px;
}
.specialty-contractor .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.specialty-contractor .darkSection {
background: var(--black);
}
.specialty-contractor .darkSection .panelHead {
background: var(--black-soft);
}
.specialty-contractor .darkSection .productPanel {
background: var(--black-soft);
}
.specialty-contractor .darkSection .copy .featureNote {
color: #CFCFCF;
}
.specialty-contractor .darkSection .rowCopy strong {
color: #FFFFFF;
}
.specialty-contractor .darkSection .rowCopy small {
color: #CFCFCF;
}
.specialty-contractor .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.specialty-contractor .assistantHead small {
font-size: 11px;
}
.specialty-contractor .assistantNote {
font-size: 11px;
}
.specialty-contractor .reportTags span {
font-size: 10px;
}
.specialty-contractor .card p {
margin: 12px 0 0;
}
.specialty-contractor .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.specialty-contractor .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.specialty-contractor .cards>.card {
display: flex;
flex-direction: column;
}
.specialty-contractor .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.specialty-contractor .cards>.card p {
padding-bottom: 22px;
}
.specialty-contractor .benefitBand {
background: var(--black);
}
.specialty-contractor .benefit {
background: var(--black-soft);
}
.specialty-contractor .inlineCta h3 {
font-size: 20px;
}
.specialty-contractor .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.specialty-contractor .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.specialty-contractor .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.specialty-contractor .valueCtaSection {
padding: 32px 0;
}
.specialty-contractor .proofCard p {
margin-top: 15px;
}
.specialty-contractor .proofCard h3 {
font-size: 23px;
}
.specialty-contractor .integrationNote {
margin-top: 23px;
}
.specialty-contractor .ctaPanel {
background: var(--black);
}
.specialty-contractor .ctaPanel p {
margin-top: 16px;
}
.specialty-contractor .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.specialty-contractor .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.specialty-contractor a:hover {
text-decoration: none;
}
.specialty-contractor .textCta:hover {
color: var(--navy);
}
.specialty-contractor .darkSection .textCta:hover {
color: #FFFFFF;
}
.specialty-contractor .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.specialty-contractor .hero h1 {
font-size: 49px;
}
.specialty-contractor .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.specialty-contractor .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.specialty-contractor .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.specialty-contractor .hero h1 {
font-size: 58px;
}
.specialty-contractor .heroVisual {
max-width: 548px;
}
.specialty-contractor .hero .lead {
max-width: 700px;
}
.specialty-contractor .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.specialty-contractor .logoBox {
font-size: 18px;
border: 0 !important;
}
.specialty-contractor .logoBox:last-child {
grid-column: auto;
}
.specialty-contractor .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.specialty-contractor .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.specialty-contractor .inlineCtaActions .button {
flex: 1;
}
.specialty-contractor .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.specialty-contractor section {
padding: 55px 0;
}
.specialty-contractor .hero {
padding: 28px 0 40px;
}
.specialty-contractor .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.specialty-contractor .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.specialty-contractor .heroActions {
gap: 10px;
}
.specialty-contractor .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.specialty-contractor .breadcrumb {
margin-bottom: 21px;
}
.specialty-contractor .hero .eyebrow {
font-size: 11px;
}
.specialty-contractor .heroVisual {
max-width: 480px;
}
.specialty-contractor .heroPills {
row-gap: 9px;
}
.specialty-contractor .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.specialty-contractor .heroPills span+span {
padding-left: 7px;
}
.specialty-contractor .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.specialty-contractor .logoBox:last-child {
grid-column: 1/-1;
}
.specialty-contractor .clientBand {
padding: 25px 0;
}
.specialty-contractor .copy h2 {
font-size: 33px;
}
.specialty-contractor .panelBody {
padding: 16px;
}
.specialty-contractor .panelHead {
padding: 15px;
}
.specialty-contractor .panelHead>strong {
font-size: 12px;
}
.specialty-contractor .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.specialty-contractor .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.specialty-contractor .docHeader strong {
font-size: 18px;
}
.specialty-contractor .docHeader small {
font-size: 10px;
}
.specialty-contractor .rowCopy strong {
font-size: 11px;
}
.specialty-contractor .rowCopy small {
font-size: 10px;
}
.specialty-contractor .miniStats {
gap: 7px;
}
.specialty-contractor .miniStats strong {
font-size: 21px;
}
.specialty-contractor .miniStats span {
font-size: 9px;
}
.specialty-contractor .miniStats>div {
padding: 10px 8px;
}
.specialty-contractor .plantFacts {
gap: 8px;
}
.specialty-contractor .plantFacts>div {
padding: 10px;
}
.specialty-contractor .plantFacts strong {
font-size: 11px;
}
.specialty-contractor .contextNote {
font-size: 10px;
gap: 8px;
}
.specialty-contractor .utilityReadout {
padding: 12px;
gap: 10px;
}
.specialty-contractor .utilityReadout span {
font-size: 8px;
}
.specialty-contractor .utilityReadout strong {
font-size: 24px;
}
.specialty-contractor .utilityReadout .utilityScope {
font-size: 14px;
}
.specialty-contractor .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.specialty-contractor .comparisonTable {
font-size: 11px;
}
.specialty-contractor .comparisonTable th,
.specialty-contractor .comparisonTable td {
padding: 13px 9px;
}
.specialty-contractor .contextSection {
padding: 0 0 22px;
}
.specialty-contractor .valueCtaSection {
padding: 25px 0;
}
.specialty-contractor .inlineCtaActions {
flex-direction: column;
}
.specialty-contractor .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.specialty-contractor .mobileWorkspace {
grid-template-columns: 1fr;
}
.specialty-contractor .phoneDevice {
width: 222px;
}
.specialty-contractor .phoneDevice .rowIcon {
display: grid;
}
.specialty-contractor .mobileSide {
grid-template-columns: 1fr;
}
.specialty-contractor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.specialty-contractor .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0 0;
}
.specialty-contractor .sideTile p {
margin: 0;
}
.specialty-contractor .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.specialty-contractor .dataRow {
gap: 8px;
}
.specialty-contractor .statusPill {
font-size: 7px;
padding: 5px;
}
.specialty-contractor .miniStats strong {
font-size: 19px;
}
.specialty-contractor .heroActions {
flex-direction: column;
align-items: stretch;
}
.specialty-contractor .heroActions .button {
width: 100%;
}
.specialty-contractor .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.specialty-contractor .aiFlow {
grid-template-columns: 1fr;
}
.specialty-contractor .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.specialty-contractor .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.specialty-contractor .aiStep strong {
margin: 0;
font-size: 15px;
}
.specialty-contractor .aiStep span {
font-size: 13px;
}
.specialty-contractor .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.specialty-contractor {
background: var(--white);
}
.specialty-contractor img {
display: block;
max-width: 100%;
}
.specialty-contractor h1,
.specialty-contractor h2,
.specialty-contractor h3 {
text-wrap: balance;
}
.specialty-contractor .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.specialty-contractor .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.specialty-contractor .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.specialty-contractor .navlinks {
gap: 20px;
font-size: 12px;
}
.specialty-contractor .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.specialty-contractor .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.specialty-contractor .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.specialty-contractor .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.specialty-contractor .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.specialty-contractor .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.specialty-contractor .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.specialty-contractor .industryIntro {
padding: 78px 0 66px;
}
.specialty-contractor .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.specialty-contractor .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.specialty-contractor .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.specialty-contractor .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.specialty-contractor .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.specialty-contractor .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.specialty-contractor .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.specialty-contractor .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.specialty-contractor .industryPriority>.icon2 {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.specialty-contractor .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.specialty-contractor .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.specialty-contractor .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.specialty-contractor .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.specialty-contractor .industryPriority:hover {
border-color: var(--brand-dark);
}
.specialty-contractor .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.specialty-contractor .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.specialty-contractor .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.specialty-contractor .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.specialty-contractor .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.specialty-contractor .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.specialty-contractor .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.specialty-contractor .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.specialty-contractor .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.specialty-contractor .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.specialty-contractor .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.specialty-contractor .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.specialty-contractor .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.specialty-contractor .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.specialty-contractor .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.specialty-contractor .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.specialty-contractor .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.specialty-contractor .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.specialty-contractor .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.specialty-contractor .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.specialty-contractor .vedaMessage.assistant>small {
color: var(--yellow);
}
.specialty-contractor .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.specialty-contractor .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.specialty-contractor .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.specialty-contractor .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.specialty-contractor .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.specialty-contractor .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.specialty-contractor .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.specialty-contractor .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.specialty-contractor .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.specialty-contractor .manufacturingSpotlight {
padding: 73px 0;
}
.specialty-contractor .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.specialty-contractor .rfidSpotlight {
background: #fff;
}
.specialty-contractor .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.specialty-contractor .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.specialty-contractor .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.specialty-contractor .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.specialty-contractor .spotlightHead h2 span {
color: var(--brand-dark);
}
.specialty-contractor .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.specialty-contractor .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.specialty-contractor .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.specialty-contractor .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.specialty-contractor .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.specialty-contractor .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.specialty-contractor .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.specialty-contractor .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.specialty-contractor .featureTab:hover {
border-color: var(--brand-dark);
}
.specialty-contractor .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.specialty-contractor .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.specialty-contractor .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.specialty-contractor .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.specialty-contractor .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.specialty-contractor .featurePanel {
display: none;
}
.specialty-contractor .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.specialty-contractor .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.specialty-contractor .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.specialty-contractor .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.specialty-contractor .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.specialty-contractor .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.specialty-contractor .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.specialty-contractor .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.specialty-contractor .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.specialty-contractor .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.specialty-contractor .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.specialty-contractor .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.specialty-contractor .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.specialty-contractor .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.specialty-contractor .decisionSpotlight .textCta {
color: var(--yellow);
}
.specialty-contractor .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.specialty-contractor .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.specialty-contractor .mediaTitle>.icon2 {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.specialty-contractor .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.specialty-contractor .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.specialty-contractor .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.specialty-contractor .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.specialty-contractor .signalFlow>.icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.specialty-contractor .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.specialty-contractor .rfidImageSurface {
background: #172029;
padding: 5px;
}
.specialty-contractor .rfidImageSurface img {
width: 100%;
height: auto;
}
.specialty-contractor .rfidMedia figcaption {
padding-top: 13px;
}
.specialty-contractor .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.specialty-contractor .aiReviewBody {
padding: 18px;
}
.specialty-contractor .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.specialty-contractor .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.specialty-contractor .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.specialty-contractor .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.specialty-contractor .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.specialty-contractor .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.specialty-contractor .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.specialty-contractor .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.specialty-contractor .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.specialty-contractor .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.specialty-contractor .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.specialty-contractor .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.specialty-contractor .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.specialty-contractor .aiReviewAction strong {
display: block;
font-size: 11px;
}
.specialty-contractor .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.specialty-contractor .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.specialty-contractor .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.specialty-contractor .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.specialty-contractor .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.specialty-contractor .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.specialty-contractor .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.specialty-contractor .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.specialty-contractor .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.specialty-contractor .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.specialty-contractor .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.specialty-contractor .workflowDetails summary::-webkit-details-marker {
display: none;
}
.specialty-contractor .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.specialty-contractor .workflowDetails[open] summary::after {
content: "−";
}
.specialty-contractor .workflowDetails .featureList,
.specialty-contractor .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.specialty-contractor .workflowDetails .featureItem {
font-size: 11px;
}
.specialty-contractor .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.specialty-contractor .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.specialty-contractor #specialty-connected-tools {
background: #fff;
}
.specialty-contractor #specialty-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.specialty-contractor .featureTab,
.specialty-contractor .industryPriority,
.specialty-contractor summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.specialty-contractor .industryIntroHead {
gap: 30px;
}
.specialty-contractor .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.specialty-contractor .featureStage {
gap: 26px;
padding: 26px;
}
.specialty-contractor .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.specialty-contractor .factoryWorkflow {
padding: 22px;
}
.specialty-contractor .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.specialty-contractor .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.specialty-contractor .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.specialty-contractor .industryPriorityGrid {
gap: 14px;
}
.specialty-contractor .industryPriority {
padding: 22px 19px;
}
.specialty-contractor .industryPriority h3 {
font-size: 21px;
}
.specialty-contractor .industryPriority p {
font-size: 12px;
}
.specialty-contractor .priorityLink {
font-size: 10px;
}
.specialty-contractor .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.specialty-contractor .vedaIndustryCopy h2 {
font-size: 39px;
}
.specialty-contractor .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.specialty-contractor .vedaUseCases>div {
display: block;
}
.specialty-contractor .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.specialty-contractor .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.specialty-contractor .featureTabs {
gap: 8px;
}
.specialty-contractor .featureTab {
min-height: 108px;
}
.specialty-contractor .featureStage,
.specialty-contractor .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.specialty-contractor .rfidSpotlight .spotlightMedia,
.specialty-contractor .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.specialty-contractor .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.specialty-contractor .featurePanel {
min-height: 0;
}
.specialty-contractor .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.specialty-contractor .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.specialty-contractor .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.specialty-contractor .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.specialty-contractor .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.specialty-contractor .clientBand {
padding: 22px 0;
}
.specialty-contractor .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.specialty-contractor .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.specialty-contractor .clientBand .logoBox.wide {
font-size: 10px;
}
.specialty-contractor .clientBand .logoBox:last-child {
grid-column: auto;
}
.specialty-contractor .industryIntro {
padding: 53px 0;
}
.specialty-contractor .industryIntroHead h2 {
font-size: 32px;
}
.specialty-contractor .industryIntroHead>p {
font-size: 14px;
}
.specialty-contractor .industryPriorityGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .industryPriority {
padding: 23px;
}
.specialty-contractor .industryPriority h3 {
font-size: 24px;
}
.specialty-contractor .industryPriority>.icon2 {
margin: 5px 0 15px;
}
.specialty-contractor .industryPriority p {
font-size: 13px;
}
.specialty-contractor .priorityLink {
font-size: 11px;
}
.specialty-contractor .vedaIndustry {
padding: 0 0 52px;
}
.specialty-contractor .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.specialty-contractor .vedaIndustryCopy h2 {
font-size: 32px;
}
.specialty-contractor .vedaIndustryCopy>p {
font-size: 14px;
}
.specialty-contractor .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.specialty-contractor .vedaUseCases>div {
display: flex;
}
.specialty-contractor .vedaConversationHead {
padding: 16px 13px;
}
.specialty-contractor .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.specialty-contractor .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.specialty-contractor .vedaMessage.user {
margin-left: 25px;
}
.specialty-contractor .vedaMessage.assistant {
margin-right: 14px;
}
.specialty-contractor .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.specialty-contractor .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.specialty-contractor .manufacturingSpotlight {
padding: 54px 0;
}
.specialty-contractor .spotlightHead h2 {
font-size: 32px;
}
.specialty-contractor .spotlightHead>p {
font-size: 14px;
}
.specialty-contractor .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.specialty-contractor .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.specialty-contractor .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.specialty-contractor .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.specialty-contractor .featurePanel h3 {
font-size: 24px;
}
.specialty-contractor .featurePanel>p {
font-size: 13px;
}
.specialty-contractor .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.specialty-contractor .spotlightChecks>li {
font-size: 12px;
}
.specialty-contractor .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.specialty-contractor .spotlightActions .button {
width: 100%;
}
.specialty-contractor .spotlightScope {
font-size: 10px;
}
.specialty-contractor .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.specialty-contractor .mediaTitle strong {
font-size: 11px;
}
.specialty-contractor .mediaTitle div>span {
font-size: 8px;
}
.specialty-contractor .mediaTitle>.icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.specialty-contractor .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.specialty-contractor .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.specialty-contractor .rfidMedia figcaption {
padding-top: 12px;
}
.specialty-contractor .aiReviewBody {
padding: 13px;
}
.specialty-contractor .aiIssue {
padding: 13px;
}
.specialty-contractor .aiIssue strong {
font-size: 14px;
}
.specialty-contractor .aiEvidence {
gap: 6px;
}
.specialty-contractor .aiEvidence>div {
padding: 10px 7px;
}
.specialty-contractor .aiEvidence strong {
font-size: 9px;
}
.specialty-contractor .aiEvidence span {
font-size: 7px;
}
.specialty-contractor .exampleLabel {
font-size: 6px;
}
.specialty-contractor .factoryWorkflows {
padding: 55px 0;
}
.specialty-contractor .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.specialty-contractor .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.specialty-contractor .industryRibbonGrid {
gap: 12px;
}
.specialty-contractor .industryRibbonGrid>div {
font-size: 10px;
}
.specialty-contractor .spotlightHead h2 {
font-size: 29px;
}
.specialty-contractor .featureStage {
padding: 19px 13px;
}
.specialty-contractor .mediaTitle>.icon2 {
display: none;
}
.specialty-contractor .exampleLabel {
display: none;
}
.specialty-contractor .vedaBrand {
font-size: 27px;
}
}
@media print {
.specialty-contractor .featureTabs {
display: none;
}
.specialty-contractor .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.specialty-contractor .featureStage {
display: block;
}
.specialty-contractor .featurePanel {
color: #000;
}
}
.specialty-contractor #specialty-delivery-features-1:checked~.featureTabs label[for="specialty-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-delivery-features-1:focus-visible~.featureTabs label[for="specialty-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.specialty-contractor #specialty-delivery-features-2:checked~.featureTabs label[for="specialty-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-delivery-features-2:focus-visible~.featureTabs label[for="specialty-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.specialty-contractor #specialty-delivery-features-3:checked~.featureTabs label[for="specialty-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-delivery-features-3:focus-visible~.featureTabs label[for="specialty-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.specialty-contractor #specialty-delivery-features-4:checked~.featureTabs label[for="specialty-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-delivery-features-4:focus-visible~.featureTabs label[for="specialty-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.specialty-contractor #specialty-delivery-features-5:checked~.featureTabs label[for="specialty-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-delivery-features-5:focus-visible~.featureTabs label[for="specialty-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.specialty-contractor #specialty-rfid-features-1:checked~.featureTabs label[for="specialty-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-rfid-features-1:focus-visible~.featureTabs label[for="specialty-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.specialty-contractor #specialty-rfid-features-2:checked~.featureTabs label[for="specialty-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-rfid-features-2:focus-visible~.featureTabs label[for="specialty-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.specialty-contractor #specialty-rfid-features-3:checked~.featureTabs label[for="specialty-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-rfid-features-3:focus-visible~.featureTabs label[for="specialty-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.specialty-contractor #specialty-rfid-features-4:checked~.featureTabs label[for="specialty-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-rfid-features-4:focus-visible~.featureTabs label[for="specialty-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.specialty-contractor #specialty-rfid-features-5:checked~.featureTabs label[for="specialty-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-rfid-features-5:focus-visible~.featureTabs label[for="specialty-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-1:checked~.featureTabs label[for="specialty-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-ai-decisions-features-1:focus-visible~.featureTabs label[for="specialty-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-2:checked~.featureTabs label[for="specialty-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-ai-decisions-features-2:focus-visible~.featureTabs label[for="specialty-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-3:checked~.featureTabs label[for="specialty-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-ai-decisions-features-3:focus-visible~.featureTabs label[for="specialty-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-4:checked~.featureTabs label[for="specialty-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-ai-decisions-features-4:focus-visible~.featureTabs label[for="specialty-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-5:checked~.featureTabs label[for="specialty-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.specialty-contractor #specialty-ai-decisions-features-5:focus-visible~.featureTabs label[for="specialty-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.specialty-contractor #specialty-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.specialty-contractor .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .featureMediaPanels {
min-width: 0;
}
.specialty-contractor .featureMediaPanels .miniChart {
height: 178px;
}
.specialty-contractor .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.specialty-contractor .featureMediaPanels .windowTop strong,
.specialty-contractor .featureMediaPanels .windowTop small {
display: block;
}
.specialty-contractor .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.specialty-contractor .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.specialty-contractor .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.specialty-contractor .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.specialty-contractor .featureMediaPanels .windowBody>*,
.specialty-contractor .featureMediaPanels .spectrumGrid>*,
.specialty-contractor .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.specialty-contractor .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.specialty-contractor .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.specialty-contractor .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.specialty-contractor .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.specialty-contractor .featureMediaPanels .graphNodes {
min-height: 258px;
}
.specialty-contractor .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.specialty-contractor .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.specialty-contractor .featureMediaPanels .mapPin {
box-shadow: none;
}
.specialty-contractor .pin2 {
top: 88px;
right: 88px;
}
.specialty-contractor .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.specialty-contractor .featureMediaPanels .mediaShell {
padding: 10px;
}
.specialty-contractor .featureMediaPanels .windowBody {
padding: 10px;
}
.specialty-contractor .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .featureMediaPanels .alertBadge {
justify-self: start;
}
.specialty-contractor .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.specialty-contractor .featureMediaPanels .graphNodes .node.n1,
.specialty-contractor .featureMediaPanels .graphNodes .node.n2,
.specialty-contractor .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.specialty-contractor .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.specialty-contractor .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.specialty-contractor .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.specialty-contractor .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.specialty-contractor .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.specialty-contractor .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.specialty-contractor .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.specialty-contractor .freshGraphic * {
box-sizing: border-box;
}
.specialty-contractor .rfPanel,
.specialty-contractor .aiInsightCard,
.specialty-contractor .forecastVisualCard,
.specialty-contractor .forecastSuggestion,
.specialty-contractor .knowledgeTile,
.specialty-contractor .chatConversation,
.specialty-contractor .trainingSummary,
.specialty-contractor .moduleCard,
.specialty-contractor .qualityHeatCard,
.specialty-contractor .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.specialty-contractor .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.specialty-contractor .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.specialty-contractor .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.specialty-contractor .statusPill,
.specialty-contractor .cardTag,
.specialty-contractor .forecastSuggestion b,
.specialty-contractor .moduleCard b,
.specialty-contractor .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.specialty-contractor .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.specialty-contractor .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.specialty-contractor .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.specialty-contractor .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.specialty-contractor .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.specialty-contractor .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.specialty-contractor .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.specialty-contractor .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.specialty-contractor .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.specialty-contractor .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.specialty-contractor .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.specialty-contractor .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.specialty-contractor .dot.good {
background: #298EEC;
}
.specialty-contractor .dot.warn {
background: #F4A62A;
}
.specialty-contractor .dot.bad {
background: #EB6B53;
}
.specialty-contractor .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.specialty-contractor .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.specialty-contractor .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.specialty-contractor .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.specialty-contractor .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.specialty-contractor .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.specialty-contractor .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.specialty-contractor .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.specialty-contractor .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.specialty-contractor .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.specialty-contractor .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.specialty-contractor .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.specialty-contractor .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.specialty-contractor .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.specialty-contractor .moveRow b {
color: #298EEC;
font-size: 9px;
}
.specialty-contractor .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.specialty-contractor .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.specialty-contractor .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.specialty-contractor .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.specialty-contractor .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.specialty-contractor .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.specialty-contractor .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.specialty-contractor .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.specialty-contractor .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.specialty-contractor .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.specialty-contractor .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.specialty-contractor .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.specialty-contractor .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.specialty-contractor .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.specialty-contractor .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.specialty-contractor .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.specialty-contractor .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.specialty-contractor .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.specialty-contractor .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.specialty-contractor .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.specialty-contractor .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.specialty-contractor .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.specialty-contractor .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.specialty-contractor .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.specialty-contractor .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.specialty-contractor .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.specialty-contractor .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.specialty-contractor .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.specialty-contractor .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.specialty-contractor .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.specialty-contractor .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.specialty-contractor .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.specialty-contractor .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.specialty-contractor .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.specialty-contractor .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.specialty-contractor .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.specialty-contractor .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.specialty-contractor .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.specialty-contractor .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.specialty-contractor .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.specialty-contractor .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.specialty-contractor .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.specialty-contractor .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.specialty-contractor .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.specialty-contractor .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.specialty-contractor .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.specialty-contractor .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.specialty-contractor .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.specialty-contractor .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.specialty-contractor .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.specialty-contractor .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.specialty-contractor .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.specialty-contractor .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.specialty-contractor .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.specialty-contractor .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.specialty-contractor .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.specialty-contractor .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.specialty-contractor .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.specialty-contractor .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.specialty-contractor .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.specialty-contractor .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.specialty-contractor .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.specialty-contractor .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.specialty-contractor .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.specialty-contractor .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.specialty-contractor .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.specialty-contractor .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.specialty-contractor .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.specialty-contractor .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.specialty-contractor .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.specialty-contractor .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.specialty-contractor .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.specialty-contractor .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.specialty-contractor .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.specialty-contractor .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.specialty-contractor .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.specialty-contractor .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.specialty-contractor .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.specialty-contractor .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.specialty-contractor .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.specialty-contractor .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.specialty-contractor .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.specialty-contractor .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.specialty-contractor .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.specialty-contractor .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.specialty-contractor .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.specialty-contractor .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.specialty-contractor .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.specialty-contractor .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.specialty-contractor .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.specialty-contractor .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.specialty-contractor .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.specialty-contractor .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.specialty-contractor .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.specialty-contractor .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.specialty-contractor .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.specialty-contractor .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.specialty-contractor .chartLegend .sw.blue {
background: #298EEC;
}
.specialty-contractor .chartLegend .sw.amber {
background: #F4A62A;
}
.specialty-contractor .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.specialty-contractor .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.specialty-contractor .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.specialty-contractor .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.specialty-contractor .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.specialty-contractor .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.specialty-contractor .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.specialty-contractor .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.specialty-contractor .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.specialty-contractor .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.specialty-contractor .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.specialty-contractor .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.specialty-contractor .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.specialty-contractor .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.specialty-contractor .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.specialty-contractor .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.specialty-contractor .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.specialty-contractor .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.specialty-contractor .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.specialty-contractor .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.specialty-contractor .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.specialty-contractor .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.specialty-contractor .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.specialty-contractor .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.specialty-contractor .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.specialty-contractor .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.specialty-contractor .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.specialty-contractor .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.specialty-contractor .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.specialty-contractor .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.specialty-contractor .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.specialty-contractor .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.specialty-contractor .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.specialty-contractor .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.specialty-contractor .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.specialty-contractor .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.specialty-contractor .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.specialty-contractor .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.specialty-contractor .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.specialty-contractor .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.specialty-contractor .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.specialty-contractor .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.specialty-contractor .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.specialty-contractor .freshGraphic {
height: auto;
min-height: 420px;
}
.specialty-contractor .rfTrackLayout,
.specialty-contractor .rfFlowLayout,
.specialty-contractor .rfAlertGrid,
.specialty-contractor .rfCycleLayout,
.specialty-contractor .rfSitesLayout,
.specialty-contractor .aiRootLayout,
.specialty-contractor .aiForecastLayout,
.specialty-contractor .aiChatLayout,
.specialty-contractor .aiTrainingLayout,
.specialty-contractor .aiQualityLayout,
.specialty-contractor .trainingModuleGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.specialty-contractor .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.specialty-contractor .rfAlertGrid {
grid-template-columns: 1fr;
}
.specialty-contractor .qualityHeatGrid span {
min-height: 40px;
}
.specialty-contractor .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.specialty-contractor .aiLink {
display: none;
}
}
.specialty-contractor .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.specialty-contractor .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.specialty-contractor .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.specialty-contractor .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.specialty-contractor .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.specialty-contractor .mfgHeroBreadcrumb a {
color: inherit;
}
.specialty-contractor .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.specialty-contractor .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.specialty-contractor .mfgHero h1 {
color: #fff;
}
.specialty-contractor .mfgHero h1>span {
display: block;
}
.specialty-contractor .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.specialty-contractor .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.specialty-contractor .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.specialty-contractor .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.specialty-contractor .mfgHeroActions .outline:hover {
background: #172029;
}
.specialty-contractor .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.specialty-contractor .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.specialty-contractor .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.specialty-contractor .mfgHeroContent {
min-height: 610px;
}
.specialty-contractor .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.specialty-contractor .mfgHeroLead {
font-size: 16px;
}
.specialty-contractor .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.specialty-contractor .mfgHero {
display: flex;
flex-direction: column;
}
.specialty-contractor .mfgHeroContent {
order: 0;
min-height: 0;
}
.specialty-contractor .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.specialty-contractor .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.specialty-contractor .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.specialty-contractor .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.specialty-contractor .mfgHeroCopy {
padding: 25px 0 20px;
}
.specialty-contractor .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.specialty-contractor .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.specialty-contractor .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.specialty-contractor .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.specialty-contractor .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.specialty-contractor .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.specialty-contractor .mfgHeroScene {
height: 280px;
}
}
@media print {
.specialty-contractor .mfgHero {
background: #fff;
color: #000;
}
.specialty-contractor .mfgHeroScene,
.specialty-contractor .mfgHeroActions {
display: none;
}
.specialty-contractor .mfgHeroContent {
min-height: 0;
}
.specialty-contractor .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
.specialty-contractor #specialty-rfid .featureStage,
.specialty-contractor #specialty-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.specialty-contractor .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.specialty-contractor .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.specialty-contractor .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.specialty-contractor .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.specialty-contractor .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.specialty-contractor .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.specialty-contractor .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.specialty-contractor .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.specialty-contractor .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.specialty-contractor .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.specialty-contractor .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.specialty-contractor .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.specialty-contractor .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.specialty-contractor .mfgGallery .rfPanel {
border-radius: 12px;
}
.specialty-contractor .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.specialty-contractor .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.specialty-contractor .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.specialty-contractor .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.specialty-contractor .mfgGallery .shelf span {
font-size: 11px;
}
.specialty-contractor .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.specialty-contractor .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.specialty-contractor .mfgGallery .rfKpiGrid {
gap: 8px;
}
.specialty-contractor .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.specialty-contractor .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.specialty-contractor .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.specialty-contractor .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.specialty-contractor .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.specialty-contractor .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.specialty-contractor .mfgGallery .rfScanCard span {
font-size: 9px;
}
.specialty-contractor .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.specialty-contractor .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.specialty-contractor .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.specialty-contractor .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.specialty-contractor .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.specialty-contractor .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.specialty-contractor .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.specialty-contractor .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.specialty-contractor .mfgGallery .flowArrow {
display: none;
}
.specialty-contractor .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .railItem {
padding: 9px 7px;
}
.specialty-contractor .mfgGallery .railItem b {
font-size: 10px;
}
.specialty-contractor .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.specialty-contractor .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.specialty-contractor .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.specialty-contractor .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.specialty-contractor .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.specialty-contractor .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.specialty-contractor .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .reorderCard strong {
font-size: 13px;
}
.specialty-contractor .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.specialty-contractor .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.specialty-contractor .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.specialty-contractor .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.specialty-contractor .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.specialty-contractor .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.specialty-contractor .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.specialty-contractor .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.specialty-contractor .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.specialty-contractor .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.specialty-contractor .mfgGallery .varianceCard {
padding: 12px;
}
.specialty-contractor .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.specialty-contractor .mfgGallery .varianceCard small {
font-size: 10px;
}
.specialty-contractor .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.specialty-contractor .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.specialty-contractor .mfgGallery .deviceTop {
font-size: 11px;
}
.specialty-contractor .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.specialty-contractor .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.specialty-contractor .mfgGallery .deviceMetric {
padding: 9px;
}
.specialty-contractor .mfgGallery .deviceMetric span {
font-size: 10px;
}
.specialty-contractor .mfgGallery .deviceMetric b {
font-size: 12px;
}
.specialty-contractor .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.specialty-contractor .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.specialty-contractor .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.specialty-contractor .mfgGallery .siteNode.north {
top: 6px;
}
.specialty-contractor .mfgGallery .siteNode.south {
bottom: 6px;
}
.specialty-contractor .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.specialty-contractor .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.specialty-contractor .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.specialty-contractor .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.specialty-contractor .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.specialty-contractor .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.specialty-contractor .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.specialty-contractor .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.specialty-contractor .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.specialty-contractor .mfgGallery .siteSummary strong {
font-size: 12px;
}
.specialty-contractor .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.specialty-contractor .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.specialty-contractor .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.specialty-contractor .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.specialty-contractor .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.specialty-contractor .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.specialty-contractor .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.specialty-contractor .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.specialty-contractor .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.specialty-contractor .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.specialty-contractor .mfgGallery .insightMeta {
gap: 6px;
}
.specialty-contractor .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.specialty-contractor .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .chartHeader span {
font-size: 10px;
}
.specialty-contractor .mfgGallery .chartHeader b {
font-size: 11px;
}
.specialty-contractor .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.specialty-contractor .mfgGallery .chartLegend {
font-size: 10px;
}
.specialty-contractor .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.specialty-contractor .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.specialty-contractor .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.specialty-contractor .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.specialty-contractor .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.specialty-contractor .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.specialty-contractor .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.specialty-contractor .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.specialty-contractor .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.specialty-contractor .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.specialty-contractor .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.specialty-contractor .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.specialty-contractor .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.specialty-contractor .mfgGallery .progressCenter strong {
font-size: 25px;
}
.specialty-contractor .mfgGallery .trainingStatList {
gap: 9px;
}
.specialty-contractor .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.specialty-contractor .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.specialty-contractor .mfgGallery .trainingStatList span {
font-size: 10px;
}
.specialty-contractor .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.specialty-contractor .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.specialty-contractor .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.specialty-contractor .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.specialty-contractor .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.specialty-contractor .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.specialty-contractor .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.specialty-contractor .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.specialty-contractor .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.specialty-contractor .mfgGallery .qualityCaption span {
font-size: 10px;
}
.specialty-contractor .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.specialty-contractor .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.specialty-contractor .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.specialty-contractor .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.specialty-contractor .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.specialty-contractor #specialty-rfid .featureStage,
.specialty-contractor #specialty-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.specialty-contractor #specialty-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.specialty-contractor .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.specialty-contractor #specialty-rfid .featureStage,
.specialty-contractor #specialty-ai-decisions .featureStage {
padding: 16px;
}
.specialty-contractor .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.specialty-contractor .mfgGallery .freshWindow {
height: auto;
}
.specialty-contractor .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.specialty-contractor .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .freshTop strong {
font-size: 13px;
}
.specialty-contractor .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.specialty-contractor .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.specialty-contractor .mfgGallery .rfShelfPanel {
padding: 10px;
}
.specialty-contractor .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.specialty-contractor .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.specialty-contractor .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.specialty-contractor .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.specialty-contractor .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.specialty-contractor .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.specialty-contractor .mfgGallery .flowNum {
grid-row: 1/3;
}
.specialty-contractor .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.specialty-contractor .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.specialty-contractor .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.specialty-contractor .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.specialty-contractor .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.specialty-contractor .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.specialty-contractor .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.specialty-contractor .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.specialty-contractor .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.specialty-contractor .mfgGallery .rfActionStrip {
height: auto;
}
.specialty-contractor .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .countPanel {
gap: 14px;
}
.specialty-contractor .mfgGallery .handheldPanel {
padding: 15px;
}
.specialty-contractor .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.specialty-contractor .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.specialty-contractor .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.specialty-contractor .mfgGallery .siteNode.east {
right: 3%;
}
.specialty-contractor .mfgGallery .siteNode.west {
left: 3%;
}
.specialty-contractor .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.specialty-contractor .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.specialty-contractor .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.specialty-contractor .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.specialty-contractor .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.specialty-contractor .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.specialty-contractor .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.specialty-contractor .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.specialty-contractor .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.specialty-contractor .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.specialty-contractor .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.specialty-contractor .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.specialty-contractor .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.specialty-contractor .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.specialty-contractor .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.specialty-contractor .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.specialty-contractor .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.specialty-contractor .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.specialty-contractor .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.specialty-contractor .mfgGallery .moduleCard {
padding: 10px;
}
.specialty-contractor .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.specialty-contractor .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.specialty-contractor .mfgGallery .qualityAction strong {
font-size: 12px;
}
.specialty-contractor .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.specialty-contractor .mfgGallery .shelf i::after {
bottom: 0;
}
.specialty-contractor .specialtyVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.specialty-contractor .specialtyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.specialty-contractor .specialtyVisualGallery>.specialtyGraphic {
display: none;
}
.specialty-contractor #specialty-delivery .featureStage,
.specialty-contractor #specialty-rfid .featureStage,
.specialty-contractor #specialty-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.specialty-contractor #specialty-rfid .specialtyVisualGallery {
grid-column: 1;
grid-row: 1;
}
.specialty-contractor #specialty-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.specialty-contractor .factoryWorkflow {
display: flex;
flex-direction: column;
}
.specialty-contractor .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.specialty-contractor .factoryWorkflow>p {
margin-bottom: 22px;
}
.specialty-contractor .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.specialty-contractor #specialty-delivery .featureStage,
.specialty-contractor #specialty-rfid .featureStage,
.specialty-contractor #specialty-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.specialty-contractor #specialty-rfid .specialtyVisualGallery,
.specialty-contractor #specialty-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.specialty-contractor .mfgHeroScene {
height: 290px;
}
.specialty-contractor #specialty-delivery .featureStage,
.specialty-contractor #specialty-rfid .featureStage,
.specialty-contractor #specialty-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.specialty-contractor .specialtyVisualGallery {
width: 100%;
}
}
@media print {
.specialty-contractor .specialtyVisualGallery>.specialtyGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.specialty-contractor #specialty-delivery-features-1:checked~.featureStage .specialtyVisualGallery> :nth-child(1) {
display: block;
}
.specialty-contractor #specialty-delivery-features-2:checked~.featureStage .specialtyVisualGallery> :nth-child(2) {
display: block;
}
.specialty-contractor #specialty-delivery-features-3:checked~.featureStage .specialtyVisualGallery> :nth-child(3) {
display: block;
}
.specialty-contractor #specialty-delivery-features-4:checked~.featureStage .specialtyVisualGallery> :nth-child(4) {
display: block;
}
.specialty-contractor #specialty-delivery-features-5:checked~.featureStage .specialtyVisualGallery> :nth-child(5) {
display: block;
}
.specialty-contractor #specialty-rfid-features-1:checked~.featureStage .specialtyVisualGallery> :nth-child(1) {
display: block;
}
.specialty-contractor #specialty-rfid-features-2:checked~.featureStage .specialtyVisualGallery> :nth-child(2) {
display: block;
}
.specialty-contractor #specialty-rfid-features-3:checked~.featureStage .specialtyVisualGallery> :nth-child(3) {
display: block;
}
.specialty-contractor #specialty-rfid-features-4:checked~.featureStage .specialtyVisualGallery> :nth-child(4) {
display: block;
}
.specialty-contractor #specialty-rfid-features-5:checked~.featureStage .specialtyVisualGallery> :nth-child(5) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-1:checked~.featureStage .specialtyVisualGallery> :nth-child(1) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-2:checked~.featureStage .specialtyVisualGallery> :nth-child(2) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-3:checked~.featureStage .specialtyVisualGallery> :nth-child(3) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-4:checked~.featureStage .specialtyVisualGallery> :nth-child(4) {
display: block;
}
.specialty-contractor #specialty-ai-decisions-features-5:checked~.featureStage .specialtyVisualGallery> :nth-child(5) {
display: block;
}
.specialty-contractor .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.specialty-contractor .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.specialty-contractor .specialtyIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.specialty-contractor .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 70% 50%;
}
.specialty-contractor .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.specialty-contractor .mfgHeroScene img {
object-position: 78% 50%;
}
.specialty-contractor .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.specialty-contractor .mfgHeroScene img {
object-position: 72% 50%;
}
.specialty-contractor .specialtyIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
.specialty-contractor .specialtyVisualGallery {
min-height: 0;
}
.specialty-contractor .specialtyIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 90% 50%;
}
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
.specialty-contractor .specialtyVisualGallery {
min-height: 0;
}
.specialty-contractor .mfgHeroScene img {
object-position: 72% 50%;
}
.specialty-contractor .specialtyIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.specialty-contractor .specialtyGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 83% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 76% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 87% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 76% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.specialty-contractor #specialty-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 88% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 77% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.specialty-contractor #specialty-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 85% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 78% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.specialty-contractor #specialty-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 78% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.specialty-contractor #specialty-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
} .specialty-contractor .mfgHeroContent {
background: transparent;
}
.specialty-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.specialty-contractor .specialtyIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.specialty-contractor .specialtyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.specialty-contractor .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.specialty-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}  .commercial-contractor .industryIntroHead.compact,
.commercial-contractor .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.commercial-contractor .featureMediaPanels {
position: relative;
min-height: 430px;
}
.commercial-contractor .featureMediaPanels>.mediaPanel {
display: none;
}
.commercial-contractor .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.commercial-contractor .featureMediaPanels .spotlightMedia {
height: 100%;
}
.commercial-contractor .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.commercial-contractor .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.commercial-contractor .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.commercial-contractor .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.commercial-contractor .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.commercial-contractor .windowTop small {
font-size: 10px;
color: var(--muted);
}
.commercial-contractor .windowDots {
display: flex;
gap: 5px;
}
.commercial-contractor .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.commercial-contractor .windowBody {
padding: 16px;
}
.commercial-contractor .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.commercial-contractor .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.commercial-contractor .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.commercial-contractor .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.commercial-contractor .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.commercial-contractor .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.commercial-contractor .chartGridLine.l1 {
top: 34px;
}
.commercial-contractor .chartGridLine.l2 {
top: 65px;
}
.commercial-contractor .chartGridLine.l3 {
top: 96px;
}
.commercial-contractor .chartGridLine.l4 {
top: 127px;
}
.commercial-contractor .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.commercial-contractor .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.commercial-contractor .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.commercial-contractor .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.commercial-contractor .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.commercial-contractor .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.commercial-contractor .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.commercial-contractor .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.commercial-contractor .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.commercial-contractor .spectrumNotes {
display: grid;
gap: 10px;
}
.commercial-contractor .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.commercial-contractor .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.commercial-contractor .noteCard p,
.commercial-contractor .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.commercial-contractor .alertStack {
display: grid;
gap: 10px;
}
.commercial-contractor .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.commercial-contractor .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.commercial-contractor .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.commercial-contractor .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.commercial-contractor .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.commercial-contractor .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.commercial-contractor .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.commercial-contractor .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.commercial-contractor .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.commercial-contractor .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.commercial-contractor .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.commercial-contractor .scheduleBoard h4,
.commercial-contractor .todoBoard h4,
.commercial-contractor .siteBoard h4,
.commercial-contractor .chatPanel h4,
.commercial-contractor .lessonPanel h4,
.commercial-contractor .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.commercial-contractor .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.commercial-contractor .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.commercial-contractor .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.commercial-contractor .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.commercial-contractor .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.commercial-contractor .taskRow:last-child {
border-bottom: 0;
}
.commercial-contractor .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.commercial-contractor .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.commercial-contractor .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.commercial-contractor .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.commercial-contractor .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.commercial-contractor .inventoryTable th,
.commercial-contractor .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.commercial-contractor .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.commercial-contractor .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.commercial-contractor .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.commercial-contractor .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.commercial-contractor .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.commercial-contractor .phoneBody {
padding: 12px;
}
.commercial-contractor .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.commercial-contractor .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.commercial-contractor .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.commercial-contractor .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.commercial-contractor .progressList {
display: grid;
gap: 10px;
}
.commercial-contractor .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.commercial-contractor .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.commercial-contractor .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.commercial-contractor .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.commercial-contractor .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.commercial-contractor .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.commercial-contractor .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.commercial-contractor .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.commercial-contractor .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.commercial-contractor .pin1 {
top: 56px;
left: 58px;
}
.commercial-contractor .pin2 {
top: 88px;
right: 88px;
}
.commercial-contractor .pin3 {
bottom: 54px;
right: 72px;
}
.commercial-contractor .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.commercial-contractor .siteRow:last-child {
border-bottom: 0;
}
.commercial-contractor .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.commercial-contractor .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.commercial-contractor .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.commercial-contractor .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.commercial-contractor .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.commercial-contractor .graphNodes:before,
.commercial-contractor .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.commercial-contractor .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.commercial-contractor .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.commercial-contractor .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.commercial-contractor .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.commercial-contractor .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.commercial-contractor .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.commercial-contractor .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.commercial-contractor .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.commercial-contractor .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.commercial-contractor .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.commercial-contractor .forecastList .taskRow strong {
font-size: 11px;
}
.commercial-contractor .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.commercial-contractor .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.commercial-contractor .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.commercial-contractor .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.commercial-contractor .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.commercial-contractor .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.commercial-contractor .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.commercial-contractor .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.commercial-contractor .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.commercial-contractor .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.commercial-contractor .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.commercial-contractor .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.commercial-contractor .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.commercial-contractor .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.commercial-contractor .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.commercial-contractor .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.commercial-contractor .qualityRows {
display: grid;
gap: 10px;
}
.commercial-contractor .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.commercial-contractor .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.commercial-contractor .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.commercial-contractor .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.commercial-contractor .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.commercial-contractor #commercial-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.commercial-contractor #commercial-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.commercial-contractor #commercial-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.commercial-contractor #commercial-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.commercial-contractor #commercial-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.commercial-contractor #commercial-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.commercial-contractor #commercial-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.commercial-contractor #commercial-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.commercial-contractor #commercial-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.commercial-contractor #commercial-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.commercial-contractor #commercial-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.commercial-contractor #commercial-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.commercial-contractor #commercial-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.commercial-contractor #commercial-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.commercial-contractor #commercial-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.commercial-contractor #commercial-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.commercial-contractor #commercial-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.commercial-contractor #commercial-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.commercial-contractor #commercial-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.commercial-contractor #commercial-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.commercial-contractor #commercial-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.commercial-contractor #commercial-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.commercial-contractor #commercial-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.commercial-contractor #commercial-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.commercial-contractor #commercial-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.commercial-contractor #commercial-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.commercial-contractor #commercial-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.commercial-contractor #commercial-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.commercial-contractor #commercial-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.commercial-contractor #commercial-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.commercial-contractor .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.commercial-contractor .featureMediaPanels {
min-height: 0;
}
.commercial-contractor .inventorySplit,
.commercial-contractor .forecastGrid,
.commercial-contractor .siteGrid,
.commercial-contractor .spectrumGrid,
.commercial-contractor .scheduleGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.commercial-contractor .metricGrid,
.commercial-contractor .lessonCards,
.commercial-contractor .gaugeGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.commercial-contractor .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.commercial-contractor {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
}
.commercial-contractor * {
box-sizing: border-box;
}
.commercial-contractor {
scroll-behavior: smooth;
}
.commercial-contractor {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
.commercial-contractor a {
color: inherit;
text-decoration: none;
}
.commercial-contractor .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
.commercial-contractor .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.commercial-contractor .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.commercial-contractor .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.commercial-contractor .brand span {
color: var(--brand);
}
.commercial-contractor .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.commercial-contractor .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.commercial-contractor .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.commercial-contractor .button.primary:hover {
background: var(--brand-dark);
}
.commercial-contractor .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.commercial-contractor .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.commercial-contractor .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.commercial-contractor .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.commercial-contractor .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.commercial-contractor .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.commercial-contractor .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.commercial-contractor .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.commercial-contractor .hero .button.primary:hover {
background: var(--black-soft);
}
.commercial-contractor .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.commercial-contractor .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.commercial-contractor .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.commercial-contractor .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.commercial-contractor .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.commercial-contractor .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.commercial-contractor .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.commercial-contractor .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.commercial-contractor .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.commercial-contractor .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.commercial-contractor .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.commercial-contractor .ratingLead strong {
display: block;
font-size: 20px;
}
.commercial-contractor .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.commercial-contractor .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.commercial-contractor .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.commercial-contractor .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.commercial-contractor .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.commercial-contractor .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.commercial-contractor .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.commercial-contractor .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.commercial-contractor .awardLead span {
color: var(--muted);
font-size: 13px;
}
.commercial-contractor .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
.commercial-contractor section {
padding: 88px 0;
}
.commercial-contractor .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.commercial-contractor .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.commercial-contractor .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.commercial-contractor .aiJourney h2 {
color: #fff;
}
.commercial-contractor .aiJourney .sectionHead p {
color: #D7D7D7;
}
.commercial-contractor .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.commercial-contractor .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.commercial-contractor .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.commercial-contractor .aiStep:last-child::after {
display: none;
}
.commercial-contractor .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.commercial-contractor .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.commercial-contractor .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.commercial-contractor .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.commercial-contractor .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.commercial-contractor .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.commercial-contractor .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.commercial-contractor .outcome span {
color: var(--muted);
font-size: 14px;
}
.commercial-contractor .capability {
background: #fff;
}
.commercial-contractor .capability.alt {
background: var(--sky-2);
}
.commercial-contractor .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.commercial-contractor .twoCol.reverse .visual {
order: 2;
}
.commercial-contractor .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.commercial-contractor .visual .placeholder {
min-height: 355px;
}
.commercial-contractor .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.commercial-contractor .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.commercial-contractor details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.commercial-contractor details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.commercial-contractor details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.commercial-contractor details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.commercial-contractor details.capabilityMore[open] summary::after {
content: "−";
}
.commercial-contractor details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.commercial-contractor .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.commercial-contractor .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.commercial-contractor .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.commercial-contractor .darkSection h2,
.commercial-contractor .darkSection h3 {
color: #fff;
}
.commercial-contractor .darkSection .sectionHead p,
.commercial-contractor .darkSection .copy p {
color: #D7D7D7;
}
.commercial-contractor .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.commercial-contractor .darkSection .featureItem {
color: #F7F7F7;
}
.commercial-contractor .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.commercial-contractor .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.commercial-contractor .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.commercial-contractor .darkSection .placeholder small {
color: #D0D0D0;
}
.commercial-contractor .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.commercial-contractor .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.commercial-contractor .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.commercial-contractor .card p {
color: var(--muted);
margin: 12px 0 0;
}
.commercial-contractor .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.commercial-contractor .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.commercial-contractor .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.commercial-contractor .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.commercial-contractor .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.commercial-contractor .benefitBand h2 {
color: #fff;
}
.commercial-contractor .benefitBand .sectionHead p {
color: #D5D5D5;
}
.commercial-contractor .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.commercial-contractor .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.commercial-contractor .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.commercial-contractor .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.commercial-contractor .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.commercial-contractor .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.commercial-contractor .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.commercial-contractor .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.commercial-contractor .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.commercial-contractor .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.commercial-contractor .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.commercial-contractor details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
.commercial-contractor summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
.commercial-contractor details p {
color: var(--muted);
margin: 12px 0 0;
}
.commercial-contractor .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.commercial-contractor .ctaPanel h2 {
color: #fff;
}
.commercial-contractor .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.commercial-contractor .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.commercial-contractor .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.commercial-contractor .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.commercial-contractor .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.commercial-contractor .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.commercial-contractor .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.commercial-contractor .inlineCta.dark h3 {
color: #fff;
}
.commercial-contractor .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.commercial-contractor .inlineCta.dark p {
color: #D8D8D8;
}
.commercial-contractor .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.commercial-contractor .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.commercial-contractor .button.yellow:hover {
background: #FFD84D;
}
.commercial-contractor .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.commercial-contractor .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.commercial-contractor .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.commercial-contractor .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.commercial-contractor footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.commercial-contractor .ratingSectionGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.commercial-contractor .heroGrid,
.commercial-contractor .twoCol,
.commercial-contractor .ctaPanel {
grid-template-columns: 1fr;
}
.commercial-contractor .twoCol.reverse .visual {
order: initial;
}
.commercial-contractor .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.commercial-contractor .ratingGrid,
.commercial-contractor .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.commercial-contractor .ratingLead,
.commercial-contractor .awardLead {
grid-column: 1/-1;
text-align: center;
}
.commercial-contractor .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.commercial-contractor .aiStep:nth-child(3)::after,
.commercial-contractor .aiStep:last-child::after {
display: none;
}
.commercial-contractor .outcomeGrid,
.commercial-contractor .challengeGrid,
.commercial-contractor .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.commercial-contractor .cards,
.commercial-contractor .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.commercial-contractor .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.commercial-contractor .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.commercial-contractor .awardProofGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .wrap {
width: min(var(--max), calc(100% - 24px));
}
.commercial-contractor .hero {
padding: 58px 0 52px;
}
.commercial-contractor section {
padding: 64px 0;
}
.commercial-contractor h1 {
font-size: 44px;
}
.commercial-contractor .aiFlow {
grid-template-columns: 1fr;
}
.commercial-contractor .aiStep::after {
display: none;
}
.commercial-contractor .logoRow,
.commercial-contractor .ratingGrid,
.commercial-contractor .awardGrid,
.commercial-contractor .outcomeGrid,
.commercial-contractor .challengeGrid,
.commercial-contractor .benefitGrid,
.commercial-contractor .cards,
.commercial-contractor .proofCards,
.commercial-contractor .integrationGrid,
.commercial-contractor .featureList {
grid-template-columns: 1fr;
}
.commercial-contractor .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.commercial-contractor .ctaPanel {
padding: 34px 24px;
}
.commercial-contractor .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.commercial-contractor .inlineCtaActions {
width: 100%;
}
.commercial-contractor .inlineCtaActions .button {
flex: 1;
}
}
.commercial-contractor {
--muted: #526A7C;
--shadow: none;
}
.commercial-contractor {
background: var(--sky-2);
}
.commercial-contractor p {
margin-bottom: 0;
}
.commercial-contractor svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.commercial-contractor .icon2 {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
}
.commercial-contractor h1,
.commercial-contractor h2,
.commercial-contractor h3 {
color: var(--black);
}
.commercial-contractor .darkSection h2,
.commercial-contractor .darkSection h3,
.commercial-contractor .aiJourney h2,
.commercial-contractor .benefitBand h2,
.commercial-contractor .ctaPanel h2,
.commercial-contractor .inlineCta.dark h3 {
color: #fff;
}
.commercial-contractor .wrap>*,
.commercial-contractor .heroGrid>*,
.commercial-contractor .twoCol>*,
.commercial-contractor .ctaPanel>* {
min-width: 0;
}
.commercial-contractor .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.commercial-contractor .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.commercial-contractor .skipLink:focus {
transform: none;
}
.commercial-contractor a:focus-visible,
.commercial-contractor summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.commercial-contractor .darkSection a:focus-visible,
.commercial-contractor .darkSection summary:focus-visible,
.commercial-contractor .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.commercial-contractor .topbar {
background: #fff;
backdrop-filter: none;
}
.commercial-contractor .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.commercial-contractor .brandName {
display: inline;
color: var(--navy) !important;
}
.commercial-contractor .brandName>span {
color: var(--brand-dark);
}
.commercial-contractor .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.commercial-contractor .brandMark .icon2 {
width: 21px;
height: 21px;
}
.commercial-contractor .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.commercial-contractor .navlinks a:hover {
color: var(--brand-dark);
}
.commercial-contractor .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.commercial-contractor .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.commercial-contractor .button .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.commercial-contractor .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.commercial-contractor .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.commercial-contractor .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.commercial-contractor .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.commercial-contractor .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.commercial-contractor .heroVisual {
width: 100%;
min-width: 0;
}
.commercial-contractor .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.commercial-contractor .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.commercial-contractor .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.commercial-contractor .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.commercial-contractor .clientBand {
padding: 27px 0;
}
.commercial-contractor .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.commercial-contractor .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.commercial-contractor .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.commercial-contractor .logoBox.wide {
font-size: 12px;
}
.commercial-contractor .logoBox small {
display: block;
font-size: 10px;
}
.commercial-contractor section {
padding: 80px 0;
}
.commercial-contractor h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.commercial-contractor .sectionHead {
margin-bottom: 36px;
}
.commercial-contractor .eyebrow {
line-height: 1.5;
}
.commercial-contractor .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.commercial-contractor .aiStep {
min-height: 162px;
}
.commercial-contractor .aiStep strong {
line-height: 1.35;
}
.commercial-contractor .aiStep span {
line-height: 1.65;
}
.commercial-contractor .aiCallout {
margin-top: 24px;
}
.commercial-contractor .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.commercial-contractor .outcome>.icon2 {
color: var(--navy);
}
.commercial-contractor .awardItem:hover {
border-color: var(--brand-dark);
}
.commercial-contractor .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.commercial-contractor .twoCol.reverse .visual {
order: -1;
}
.commercial-contractor .copy .eyebrow {
margin-bottom: 17px;
}
.commercial-contractor .copy p {
font-size: 16px;
line-height: 1.85;
}
.commercial-contractor .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.commercial-contractor .featureList {
gap: 13px 18px;
}
.commercial-contractor .featureItem {
font-size: 13px;
line-height: 1.6;
}
.commercial-contractor .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.commercial-contractor .check .icon2 {
width: 14px;
height: 14px;
}
.commercial-contractor details.capabilityMore {
margin-bottom: 0;
}
.commercial-contractor .capabilityMore summary {
min-height: 34px;
}
.commercial-contractor .capabilityMore .moreGrid {
gap: 13px 18px;
}
.commercial-contractor .textCta {
font-size: 14px;
}
.commercial-contractor .visual {
min-width: 0;
}
.commercial-contractor .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.commercial-contractor .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.commercial-contractor .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.commercial-contractor .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.commercial-contractor .panelBody {
padding: 20px;
}
.commercial-contractor .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.commercial-contractor .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.commercial-contractor .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.commercial-contractor .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.commercial-contractor .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.commercial-contractor .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.commercial-contractor .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.commercial-contractor .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.commercial-contractor .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.commercial-contractor .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.commercial-contractor .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.commercial-contractor .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.commercial-contractor .contextNote .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.commercial-contractor .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.commercial-contractor .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.commercial-contractor .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.commercial-contractor .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.commercial-contractor .miniStats span {
font-size: 9px;
color: var(--muted);
}
.commercial-contractor .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.commercial-contractor .dataRow:last-child {
border-bottom: 0;
}
.commercial-contractor .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.commercial-contractor .rowIcon .icon2 {
width: 19px;
height: 19px;
}
.commercial-contractor .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.commercial-contractor .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.commercial-contractor .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.commercial-contractor .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.commercial-contractor .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.commercial-contractor .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.commercial-contractor .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.commercial-contractor .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.commercial-contractor .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.commercial-contractor .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.commercial-contractor .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.commercial-contractor .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.commercial-contractor .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.commercial-contractor .mobileAccount {
text-align: center;
padding: 13px 0;
}
.commercial-contractor .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.commercial-contractor .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.commercial-contractor .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.commercial-contractor .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.commercial-contractor .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.commercial-contractor .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.commercial-contractor .phoneDevice .rowIcon .icon2 {
width: 15px;
height: 15px;
}
.commercial-contractor .phoneDevice .rowCopy strong {
font-size: 9px;
}
.commercial-contractor .phoneDevice .rowCopy small {
font-size: 7px;
}
.commercial-contractor .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.commercial-contractor .mobileSide {
display: grid;
gap: 10px;
}
.commercial-contractor .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.commercial-contractor .sideTile>.icon2 {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.commercial-contractor .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.commercial-contractor .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.commercial-contractor .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.commercial-contractor .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.commercial-contractor .darkSection .panelHead>strong {
color: #fff;
}
.commercial-contractor .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.commercial-contractor .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.commercial-contractor .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.commercial-contractor .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.commercial-contractor .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.commercial-contractor .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.commercial-contractor .promptList {
display: grid;
gap: 10px;
}
.commercial-contractor .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.commercial-contractor .promptItem .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.commercial-contractor .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.commercial-contractor .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.commercial-contractor .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.commercial-contractor .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.commercial-contractor .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.commercial-contractor .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.commercial-contractor .quoteTable th,
.commercial-contractor .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.commercial-contractor .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.commercial-contractor .quoteTable td:first-child {
width: 64%;
}
.commercial-contractor .quoteTable th:last-child,
.commercial-contractor .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.commercial-contractor .quoteTable strong {
font-size: 11px;
}
.commercial-contractor .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.commercial-contractor .quoteTable tfoot {
background: #F5FBFF;
}
.commercial-contractor .quoteTable tfoot th {
font-size: 10px;
}
.commercial-contractor .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.commercial-contractor .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.commercial-contractor .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.commercial-contractor .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.commercial-contractor .orderJourney {
margin: 20px 0;
}
.commercial-contractor .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.commercial-contractor .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.commercial-contractor .journeyRow:last-child:before {
display: none;
}
.commercial-contractor .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.commercial-contractor .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.commercial-contractor .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.commercial-contractor .journeyRow strong {
font-size: 12px;
display: block;
}
.commercial-contractor .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.commercial-contractor .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.commercial-contractor .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.commercial-contractor .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.commercial-contractor .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.commercial-contractor .inventoryIntro>.icon2 {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.commercial-contractor .inventoryIntro strong {
display: block;
font-size: 16px;
}
.commercial-contractor .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.commercial-contractor .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.commercial-contractor .availabilityCard span {
font-size: 9px;
display: block;
}
.commercial-contractor .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.commercial-contractor .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.commercial-contractor .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.commercial-contractor .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.commercial-contractor .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.commercial-contractor .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.commercial-contractor .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.commercial-contractor .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.commercial-contractor .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.commercial-contractor .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.commercial-contractor .customerTimeline .dataRow {
border-color: #353535;
}
.commercial-contractor .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.commercial-contractor .customerTimeline strong {
color: #fff;
}
.commercial-contractor .customerTimeline small {
color: #BFBFBF;
}
.commercial-contractor .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.commercial-contractor .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.commercial-contractor .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.commercial-contractor .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.commercial-contractor .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.commercial-contractor .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.commercial-contractor .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.commercial-contractor .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.commercial-contractor .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.commercial-contractor .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.commercial-contractor .chartTitle strong {
font-size: 12px;
}
.commercial-contractor .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.commercial-contractor .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.commercial-contractor .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.commercial-contractor .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.commercial-contractor .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.commercial-contractor .inlineCta {
margin-top: 0;
box-shadow: none;
}
.commercial-contractor .inlineCtaActions {
max-width: 42%;
}
.commercial-contractor .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.commercial-contractor .inlineCta h3 {
line-height: 1.35;
}
.commercial-contractor .card {
box-shadow: none;
}
.commercial-contractor .cardIcon {
box-shadow: none;
}
.commercial-contractor .card h3 {
font-size: 22px;
}
.commercial-contractor .card p {
font-size: 14px;
line-height: 1.8;
}
.commercial-contractor .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.commercial-contractor .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.commercial-contractor .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.commercial-contractor .ratingBand {
padding: 34px 0;
}
.commercial-contractor .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.commercial-contractor .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.commercial-contractor .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.commercial-contractor .ratingItem .icon2 {
color: var(--yellow);
margin: 0 auto 6px;
}
.commercial-contractor .ratingItem:first-child {
border-left: 0;
}
.commercial-contractor .proofCard h3 {
font-size: 23px;
}
.commercial-contractor .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.commercial-contractor .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.commercial-contractor .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.commercial-contractor .integration {
min-height: 98px;
}
.commercial-contractor .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.commercial-contractor .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.commercial-contractor .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.commercial-contractor .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.commercial-contractor .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.commercial-contractor .finalActions {
display: grid;
gap: 11px;
}
.commercial-contractor .finalActions .button {
white-space: nowrap;
}
.commercial-contractor .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.commercial-contractor .footerInner p {
margin: 0;
font-size: 12px;
}
.commercial-contractor .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.commercial-contractor .navlinks {
gap: 15px;
font-size: 12px;
}
.commercial-contractor .heroGrid {
gap: 30px;
}
.commercial-contractor .twoCol {
gap: 32px;
}
.commercial-contractor .panelBody {
padding: 16px;
}
.commercial-contractor .panelHead {
padding: 16px;
}
.commercial-contractor .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.commercial-contractor .pipelineColumns {
gap: 7px;
}
.commercial-contractor .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.commercial-contractor .heroGrid,
.commercial-contractor .twoCol,
.commercial-contractor .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .heroGrid {
gap: 36px;
}
.commercial-contractor .hero h1 {
max-width: 730px;
}
.commercial-contractor .hero .lead {
max-width: 690px;
}
.commercial-contractor .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.commercial-contractor .twoCol {
gap: 34px;
}
.commercial-contractor .twoCol.reverse .visual {
order: initial;
}
.commercial-contractor .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.commercial-contractor .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.commercial-contractor .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.commercial-contractor .awardItem {
font-size: 12px;
padding: 13px;
}
.commercial-contractor .ratingSectionGrid {
gap: 20px;
}
.commercial-contractor .inlineCta {
align-items: flex-start;
}
.commercial-contractor .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.commercial-contractor .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.commercial-contractor .card {
padding: 22px;
}
.commercial-contractor .card h3 {
font-size: 21px;
}
.commercial-contractor .finalActions {
display: flex;
flex-wrap: wrap;
}
.commercial-contractor .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.commercial-contractor .cards,
.commercial-contractor .proofCards {
grid-template-columns: 1fr;
}
.commercial-contractor .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.commercial-contractor .inlineCta {
flex-direction: column;
}
.commercial-contractor .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.commercial-contractor .inlineCtaActions .button {
flex: 1;
}
.commercial-contractor .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.commercial-contractor .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.commercial-contractor .wrap {
width: calc(100% - 32px);
}
.commercial-contractor .brand {
font-size: 20px;
gap: 7px;
}
.commercial-contractor .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.commercial-contractor .brandMark .icon2 {
width: 18px;
height: 18px;
}
.commercial-contractor .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.commercial-contractor section {
padding: 60px 0;
}
.commercial-contractor .hero {
padding: 51px 0 48px;
}
.commercial-contractor .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.commercial-contractor .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.commercial-contractor .heroActions {
gap: 10px;
margin-top: 25px;
}
.commercial-contractor .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.commercial-contractor .hero .microcopy {
font-size: 11px;
}
.commercial-contractor .heroPills span {
font-size: 9px;
}
.commercial-contractor .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.commercial-contractor .sectionHead p {
font-size: 16px;
}
.commercial-contractor .copy h2 {
font-size: 34px;
}
.commercial-contractor .copy p {
font-size: 15px;
}
.commercial-contractor .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.commercial-contractor .logoBox {
min-height: 53px;
}
.commercial-contractor .logoBox:last-child {
grid-column: 1/-1;
}
.commercial-contractor .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commercial-contractor .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.commercial-contractor .aiStep strong {
font-size: 13px;
}
.commercial-contractor .aiStep span {
font-size: 11px;
}
.commercial-contractor .aiStep::after {
display: none;
}
.commercial-contractor .outcomeGrid,
.commercial-contractor .challengeGrid,
.commercial-contractor .benefitGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .outcome {
padding: 24px;
}
.commercial-contractor .outcome strong {
font-size: 22px;
}
.commercial-contractor .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commercial-contractor .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.commercial-contractor .awardItem:last-child {
grid-column: 1/-1;
}
.commercial-contractor .featureList,
.commercial-contractor .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .featureItem {
font-size: 13px;
}
.commercial-contractor .inlineCta {
padding: 22px;
gap: 19px;
}
.commercial-contractor .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.commercial-contractor .panelHead {
padding: 15px 13px;
}
.commercial-contractor .panelHead>strong {
font-size: 12px;
}
.commercial-contractor .panelBody {
padding: 14px;
}
.commercial-contractor .productPanel {
border-radius: 16px;
}
.commercial-contractor .productPanel figcaption {
padding: 0 14px 13px;
}
.commercial-contractor .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.commercial-contractor .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.commercial-contractor .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.commercial-contractor .deal {
margin-top: 0;
padding: 10px;
}
.commercial-contractor .deal strong {
font-size: 10px;
}
.commercial-contractor .deal small {
font-size: 9px;
}
.commercial-contractor .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.commercial-contractor .mobileWorkspace {
gap: 12px;
}
.commercial-contractor .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.commercial-contractor .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.commercial-contractor .sideTile {
padding: 10px;
}
.commercial-contractor .sideTile strong {
font-size: 10px;
}
.commercial-contractor .sideTile p {
font-size: 9px;
}
.commercial-contractor .mobileHeader strong {
font-size: 15px;
}
.commercial-contractor .mobileAccount strong {
font-size: 10px;
}
.commercial-contractor .mobileAccount small {
font-size: 7px;
}
.commercial-contractor .phoneDevice .rowIcon {
display: none;
}
.commercial-contractor .quoteTable th,
.commercial-contractor .quoteTable td {
padding: 12px 4px;
}
.commercial-contractor .quoteTable strong {
font-size: 10px;
}
.commercial-contractor .quoteTable small {
font-size: 8px;
}
.commercial-contractor .quoteTable tfoot th {
font-size: 9px;
}
.commercial-contractor .docHeader strong {
font-size: 17px;
}
.commercial-contractor .miniFlow {
gap: 5px;
font-size: 9px;
}
.commercial-contractor .miniFlow span {
padding: 6px;
}
.commercial-contractor .rowCopy strong {
font-size: 10px;
}
.commercial-contractor .rowCopy small {
font-size: 8px;
}
.commercial-contractor .statusPill {
font-size: 7px;
padding: 5px;
}
.commercial-contractor .miniStats {
gap: 7px;
}
.commercial-contractor .miniStats>div {
padding: 9px;
}
.commercial-contractor .miniStats strong {
font-size: 18px;
}
.commercial-contractor .miniStats span {
font-size: 8px;
}
.commercial-contractor .collectionStats>div {
padding: 13px;
}
.commercial-contractor .collectionStats strong {
font-size: 24px;
}
.commercial-contractor .customerHeader strong {
font-size: 17px;
}
.commercial-contractor .customerFacts>div {
padding: 10px;
}
.commercial-contractor .customerFacts strong {
font-size: 12px;
}
.commercial-contractor .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commercial-contractor .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.commercial-contractor .ratingItem:last-child {
grid-column: 1/-1;
}
.commercial-contractor .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commercial-contractor .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.commercial-contractor .integration small {
font-size: 9px;
}
.commercial-contractor .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.commercial-contractor .ctaPanel p {
font-size: 15px;
}
.commercial-contractor .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.commercial-contractor .footerInner {
align-items: flex-start;
flex-direction: column;
}
.commercial-contractor .contextSection {
padding: 0 0 24px;
}
.commercial-contractor .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.commercial-contractor .wrap {
width: calc(100% - 24px);
}
.commercial-contractor .brand {
font-size: 18px;
}
.commercial-contractor .brandMark {
width: 25px;
height: 25px;
}
.commercial-contractor .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.commercial-contractor .hero h1 {
font-size: 38px;
}
.commercial-contractor .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.commercial-contractor .copy h2 {
font-size: 31px;
}
.commercial-contractor .mobileWorkspace {
grid-template-columns: 1fr;
}
.commercial-contractor .phoneDevice {
width: 210px;
}
.commercial-contractor .phoneDevice .rowIcon {
display: grid;
}
.commercial-contractor .mobileSide {
gap: 8px;
}
.commercial-contractor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.commercial-contractor .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.commercial-contractor .sideTile p {
margin: 0;
}
.commercial-contractor .miniFlow span {
padding: 5px;
font-size: 8px;
}
.commercial-contractor .collectionStats strong {
font-size: 21px;
}
.commercial-contractor .inventoryIntro strong {
font-size: 14px;
}
.commercial-contractor .dataRow {
gap: 7px;
}
.commercial-contractor .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.commercial-contractor .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
.commercial-contractor {
scroll-behavior: auto;
}
.commercial-contractor *,
.commercial-contractor *::before,
.commercial-contractor *::after {
transition: none !important;
animation: none !important;
}
}
.commercial-contractor {
background: var(--sky-2);
}
.commercial-contractor .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
.commercial-contractor .hero .eyebrow {
max-width: 100%;
}
.commercial-contractor .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.commercial-contractor .ganttIllustration,
.commercial-contractor .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.commercial-contractor .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.commercial-contractor .costIllustration {
aspect-ratio: 484/226;
}
.commercial-contractor .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.commercial-contractor .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.commercial-contractor .comparisonTable thead {
background: var(--black);
color: #fff;
}
.commercial-contractor .comparisonTable thead th:last-child {
color: var(--yellow);
}
.commercial-contractor .comparisonTable th,
.commercial-contractor .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.commercial-contractor .comparisonTable th:first-child {
width: 23%;
}
.commercial-contractor .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.commercial-contractor .comparisonTable tbody td {
color: var(--muted);
}
.commercial-contractor .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.commercial-contractor .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.commercial-contractor .card,
.commercial-contractor .proofCard,
.commercial-contractor .productPanel,
.commercial-contractor .outcome,
.commercial-contractor .benefit {
box-shadow: none;
}
.commercial-contractor .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.commercial-contractor .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.commercial-contractor .hero .eyebrow {
font-size: 10px;
}
.commercial-contractor .comparisonTable {
font-size: 11px;
}
.commercial-contractor .comparisonTable th,
.commercial-contractor .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.commercial-contractor .comparisonTable th:first-child {
width: 24%;
}
.commercial-contractor .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.commercial-contractor .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.commercial-contractor .hero h1 {
font-size: 38px;
}
}
.commercial-contractor .scheduleIllustration,
.commercial-contractor .analyticsIllustration,
.commercial-contractor .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.commercial-contractor .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.commercial-contractor .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.commercial-contractor .conditionIllustration {
aspect-ratio: 484 / 178;
}
.commercial-contractor .miniStats strong {
font-variant-numeric: tabular-nums;
}
.commercial-contractor .quoteTable td:last-child {
white-space: nowrap;
}
.commercial-contractor .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.commercial-contractor .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.commercial-contractor .darkSection .textCta {
color: var(--yellow);
}
.commercial-contractor .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.commercial-contractor .secondaryLinks .textCta {
font-size: 12px;
}
.commercial-contractor .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.commercial-contractor .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.commercial-contractor .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.commercial-contractor .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.commercial-contractor .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.commercial-contractor .scanSummary>.icon2 {
color: var(--yellow);
flex: 0 0 24px;
}
.commercial-contractor .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.commercial-contractor .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.commercial-contractor .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.commercial-contractor .returnFlag .icon2 {
flex: 0 0 24px;
}
.commercial-contractor .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.commercial-contractor .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.commercial-contractor .phoneDevice {
max-width: 100%;
}
.commercial-contractor .heroPills {
line-height: 1.55;
}
.commercial-contractor .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.commercial-contractor .plantFacts {
gap: 7px;
}
.commercial-contractor .plantFacts>div {
padding: 9px;
}
.commercial-contractor .plantFacts strong {
font-size: 11px;
}
.commercial-contractor .scanSummary {
padding: 12px;
}
.commercial-contractor .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.commercial-contractor .mobileWorkspace {
grid-template-columns: 1fr;
}
.commercial-contractor .phoneDevice {
width: 224px;
margin: auto;
}
.commercial-contractor .phoneDevice .rowIcon {
display: grid;
}
.commercial-contractor .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.commercial-contractor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.commercial-contractor .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0;
}
.commercial-contractor .sideTile strong {
font-size: 12px;
}
.commercial-contractor .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.commercial-contractor .topbar,
.commercial-contractor .heroActions,
.commercial-contractor .finalActions,
.commercial-contractor .contextSection,
.commercial-contractor .valueCtaSection {
display: none;
}
.commercial-contractor section {
break-inside: avoid;
padding: 28px 0;
}
.commercial-contractor .hero {
padding-top: 20px;
}
}
.commercial-contractor {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
.commercial-contractor p {
margin: 0;
}
.commercial-contractor main {
display: block;
}
.commercial-contractor section {
padding: 74px 0;
}
.commercial-contractor .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.commercial-contractor .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.commercial-contractor .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.commercial-contractor .heroAccent {
color: var(--black);
}
.commercial-contractor .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.commercial-contractor .heroActions {
gap: 10px;
margin-top: 24px;
}
.commercial-contractor .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.commercial-contractor .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.commercial-contractor .microcopy {
margin-top: 14px;
}
.commercial-contractor .heroPills {
margin-top: 13px;
}
.commercial-contractor .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.commercial-contractor .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.commercial-contractor .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.commercial-contractor .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.commercial-contractor .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.commercial-contractor .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.commercial-contractor .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.commercial-contractor .clientBand {
padding: 24px 0;
}
.commercial-contractor .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.commercial-contractor .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.commercial-contractor .logoBox.wide {
font-size: 15px;
}
.commercial-contractor .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.commercial-contractor .sectionHead p {
margin: 17px 0 0;
}
.commercial-contractor .copy p {
margin: 16px 0 0;
}
.commercial-contractor .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.commercial-contractor .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.commercial-contractor .aiJourney {
background: var(--black);
}
.commercial-contractor .aiStep {
min-height: 157px;
border-color: #353535;
}
.commercial-contractor .productPanel {
border-radius: 18px;
}
.commercial-contractor .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.commercial-contractor .panelHead>strong {
font-size: 13px;
}
.commercial-contractor .sampleTag {
font-size: 9px;
}
.commercial-contractor .panelBody {
padding: 21px;
}
.commercial-contractor .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.commercial-contractor .docHeader {
padding-bottom: 16px;
}
.commercial-contractor .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.commercial-contractor .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.commercial-contractor .smallLabel {
font-size: 9px;
}
.commercial-contractor .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.commercial-contractor .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.commercial-contractor .dataRow {
padding: 14px 0;
}
.commercial-contractor .statusPill {
font-size: 8px;
}
.commercial-contractor .miniStats {
gap: 10px;
margin: 18px 0;
}
.commercial-contractor .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.commercial-contractor .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.commercial-contractor .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.commercial-contractor .contextNote {
font-size: 11px;
margin-top: 16px;
}
.commercial-contractor .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.commercial-contractor .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.commercial-contractor .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.commercial-contractor .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.commercial-contractor .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.commercial-contractor .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.commercial-contractor .hierarchy strong {
color: var(--navy);
}
.commercial-contractor .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.commercial-contractor .conditionIllustration {
aspect-ratio: 484/201;
}
.commercial-contractor .analyticsIllustration {
aspect-ratio: 484/206;
}
.commercial-contractor .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.commercial-contractor .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.commercial-contractor .phoneDevice .rowCopy strong {
font-size: 10px;
}
.commercial-contractor .phoneDevice .rowCopy small {
font-size: 9px;
}
.commercial-contractor .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.commercial-contractor .mobileAccount small {
font-size: 9px;
}
.commercial-contractor .sideTile {
background: var(--sky-2);
padding: 14px;
}
.commercial-contractor .sideTile strong {
font-size: 12px;
}
.commercial-contractor .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.commercial-contractor .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.commercial-contractor .mobileAction {
font-size: 9px;
}
.commercial-contractor .journeyRow strong {
font-size: 13px;
}
.commercial-contractor .journeyRow small {
font-size: 11px;
}
.commercial-contractor .commercialRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.commercial-contractor .commercialRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.commercial-contractor .commercialRecord p {
color: var(--muted);
font-size: 11px;
}
.commercial-contractor .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.commercial-contractor .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.commercial-contractor .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.commercial-contractor .utilityReadout small {
font-size: 12px;
}
.commercial-contractor .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.commercial-contractor .darkSection {
background: var(--black);
}
.commercial-contractor .darkSection .panelHead {
background: var(--black-soft);
}
.commercial-contractor .darkSection .productPanel {
background: var(--black-soft);
}
.commercial-contractor .darkSection .copy .featureNote {
color: #CFCFCF;
}
.commercial-contractor .darkSection .rowCopy strong {
color: #FFFFFF;
}
.commercial-contractor .darkSection .rowCopy small {
color: #CFCFCF;
}
.commercial-contractor .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.commercial-contractor .assistantHead small {
font-size: 11px;
}
.commercial-contractor .assistantNote {
font-size: 11px;
}
.commercial-contractor .reportTags span {
font-size: 10px;
}
.commercial-contractor .card p {
margin: 12px 0 0;
}
.commercial-contractor .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.commercial-contractor .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.commercial-contractor .cards>.card {
display: flex;
flex-direction: column;
}
.commercial-contractor .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.commercial-contractor .cards>.card p {
padding-bottom: 22px;
}
.commercial-contractor .benefitBand {
background: var(--black);
}
.commercial-contractor .benefit {
background: var(--black-soft);
}
.commercial-contractor .inlineCta h3 {
font-size: 20px;
}
.commercial-contractor .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.commercial-contractor .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.commercial-contractor .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.commercial-contractor .valueCtaSection {
padding: 32px 0;
}
.commercial-contractor .proofCard p {
margin-top: 15px;
}
.commercial-contractor .proofCard h3 {
font-size: 23px;
}
.commercial-contractor .integrationNote {
margin-top: 23px;
}
.commercial-contractor .ctaPanel {
background: var(--black);
}
.commercial-contractor .ctaPanel p {
margin-top: 16px;
}
.commercial-contractor .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.commercial-contractor .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.commercial-contractor a:hover {
text-decoration: none;
}
.commercial-contractor .textCta:hover {
color: var(--navy);
}
.commercial-contractor .darkSection .textCta:hover {
color: #FFFFFF;
}
.commercial-contractor .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.commercial-contractor .hero h1 {
font-size: 49px;
}
.commercial-contractor .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.commercial-contractor .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.commercial-contractor .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.commercial-contractor .hero h1 {
font-size: 58px;
}
.commercial-contractor .heroVisual {
max-width: 548px;
}
.commercial-contractor .hero .lead {
max-width: 700px;
}
.commercial-contractor .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.commercial-contractor .logoBox {
font-size: 18px;
border: 0 !important;
}
.commercial-contractor .logoBox:last-child {
grid-column: auto;
}
.commercial-contractor .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.commercial-contractor .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.commercial-contractor .inlineCtaActions .button {
flex: 1;
}
.commercial-contractor .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.commercial-contractor section {
padding: 55px 0;
}
.commercial-contractor .hero {
padding: 28px 0 40px;
}
.commercial-contractor .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.commercial-contractor .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.commercial-contractor .heroActions {
gap: 10px;
}
.commercial-contractor .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.commercial-contractor .breadcrumb {
margin-bottom: 21px;
}
.commercial-contractor .hero .eyebrow {
font-size: 11px;
}
.commercial-contractor .heroVisual {
max-width: 480px;
}
.commercial-contractor .heroPills {
row-gap: 9px;
}
.commercial-contractor .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.commercial-contractor .heroPills span+span {
padding-left: 7px;
}
.commercial-contractor .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.commercial-contractor .logoBox:last-child {
grid-column: 1/-1;
}
.commercial-contractor .clientBand {
padding: 25px 0;
}
.commercial-contractor .copy h2 {
font-size: 33px;
}
.commercial-contractor .panelBody {
padding: 16px;
}
.commercial-contractor .panelHead {
padding: 15px;
}
.commercial-contractor .panelHead>strong {
font-size: 12px;
}
.commercial-contractor .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.commercial-contractor .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.commercial-contractor .docHeader strong {
font-size: 18px;
}
.commercial-contractor .docHeader small {
font-size: 10px;
}
.commercial-contractor .rowCopy strong {
font-size: 11px;
}
.commercial-contractor .rowCopy small {
font-size: 10px;
}
.commercial-contractor .miniStats {
gap: 7px;
}
.commercial-contractor .miniStats strong {
font-size: 21px;
}
.commercial-contractor .miniStats span {
font-size: 9px;
}
.commercial-contractor .miniStats>div {
padding: 10px 8px;
}
.commercial-contractor .plantFacts {
gap: 8px;
}
.commercial-contractor .plantFacts>div {
padding: 10px;
}
.commercial-contractor .plantFacts strong {
font-size: 11px;
}
.commercial-contractor .contextNote {
font-size: 10px;
gap: 8px;
}
.commercial-contractor .utilityReadout {
padding: 12px;
gap: 10px;
}
.commercial-contractor .utilityReadout span {
font-size: 8px;
}
.commercial-contractor .utilityReadout strong {
font-size: 24px;
}
.commercial-contractor .utilityReadout .utilityScope {
font-size: 14px;
}
.commercial-contractor .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.commercial-contractor .comparisonTable {
font-size: 11px;
}
.commercial-contractor .comparisonTable th,
.commercial-contractor .comparisonTable td {
padding: 13px 9px;
}
.commercial-contractor .contextSection {
padding: 0 0 22px;
}
.commercial-contractor .valueCtaSection {
padding: 25px 0;
}
.commercial-contractor .inlineCtaActions {
flex-direction: column;
}
.commercial-contractor .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.commercial-contractor .mobileWorkspace {
grid-template-columns: 1fr;
}
.commercial-contractor .phoneDevice {
width: 222px;
}
.commercial-contractor .phoneDevice .rowIcon {
display: grid;
}
.commercial-contractor .mobileSide {
grid-template-columns: 1fr;
}
.commercial-contractor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.commercial-contractor .sideTile>.icon2 {
grid-row: 1/3;
margin: 2px 0 0;
}
.commercial-contractor .sideTile p {
margin: 0;
}
.commercial-contractor .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.commercial-contractor .dataRow {
gap: 8px;
}
.commercial-contractor .statusPill {
font-size: 7px;
padding: 5px;
}
.commercial-contractor .miniStats strong {
font-size: 19px;
}
.commercial-contractor .heroActions {
flex-direction: column;
align-items: stretch;
}
.commercial-contractor .heroActions .button {
width: 100%;
}
.commercial-contractor .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.commercial-contractor .aiFlow {
grid-template-columns: 1fr;
}
.commercial-contractor .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.commercial-contractor .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.commercial-contractor .aiStep strong {
margin: 0;
font-size: 15px;
}
.commercial-contractor .aiStep span {
font-size: 13px;
}
.commercial-contractor .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.commercial-contractor {
background: var(--white);
}
.commercial-contractor img {
display: block;
max-width: 100%;
}
.commercial-contractor h1,
.commercial-contractor h2,
.commercial-contractor h3 {
text-wrap: balance;
}
.commercial-contractor .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.commercial-contractor .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.commercial-contractor .textCta .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.commercial-contractor .navlinks {
gap: 20px;
font-size: 12px;
}
.commercial-contractor .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.commercial-contractor .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.commercial-contractor .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.commercial-contractor .industryRibbonGrid .icon2 {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.commercial-contractor .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.commercial-contractor .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.commercial-contractor .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.commercial-contractor .industryIntro {
padding: 78px 0 66px;
}
.commercial-contractor .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.commercial-contractor .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.commercial-contractor .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.commercial-contractor .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.commercial-contractor .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.commercial-contractor .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.commercial-contractor .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.commercial-contractor .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.commercial-contractor .industryPriority>.icon2 {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.commercial-contractor .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.commercial-contractor .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.commercial-contractor .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.commercial-contractor .priorityLink .icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.commercial-contractor .industryPriority:hover {
border-color: var(--brand-dark);
}
.commercial-contractor .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.commercial-contractor .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.commercial-contractor .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.commercial-contractor .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.commercial-contractor .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.commercial-contractor .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.commercial-contractor .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.commercial-contractor .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.commercial-contractor .vedaUseCases .icon2 {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.commercial-contractor .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.commercial-contractor .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.commercial-contractor .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.commercial-contractor .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.commercial-contractor .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.commercial-contractor .vedaConversationHead .icon2 {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.commercial-contractor .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.commercial-contractor .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.commercial-contractor .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.commercial-contractor .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.commercial-contractor .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.commercial-contractor .vedaMessage.assistant>small {
color: var(--yellow);
}
.commercial-contractor .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.commercial-contractor .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.commercial-contractor .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.commercial-contractor .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.commercial-contractor .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.commercial-contractor .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.commercial-contractor .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.commercial-contractor .vedaPromptFooter .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.commercial-contractor .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.commercial-contractor .manufacturingSpotlight {
padding: 73px 0;
}
.commercial-contractor .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.commercial-contractor .rfidSpotlight {
background: #fff;
}
.commercial-contractor .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.commercial-contractor .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.commercial-contractor .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.commercial-contractor .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.commercial-contractor .spotlightHead h2 span {
color: var(--brand-dark);
}
.commercial-contractor .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.commercial-contractor .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.commercial-contractor .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.commercial-contractor .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.commercial-contractor .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.commercial-contractor .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.commercial-contractor .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.commercial-contractor .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.commercial-contractor .featureTab:hover {
border-color: var(--brand-dark);
}
.commercial-contractor .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.commercial-contractor .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.commercial-contractor .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.commercial-contractor .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.commercial-contractor .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.commercial-contractor .featurePanel {
display: none;
}
.commercial-contractor .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.commercial-contractor .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.commercial-contractor .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.commercial-contractor .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.commercial-contractor .spotlightChecks .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.commercial-contractor .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.commercial-contractor .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.commercial-contractor .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.commercial-contractor .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.commercial-contractor .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.commercial-contractor .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.commercial-contractor .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.commercial-contractor .decisionSpotlight .spotlightChecks .icon2 {
color: var(--yellow);
}
.commercial-contractor .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.commercial-contractor .decisionSpotlight .textCta {
color: var(--yellow);
}
.commercial-contractor .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.commercial-contractor .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.commercial-contractor .mediaTitle>.icon2 {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.commercial-contractor .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.commercial-contractor .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.commercial-contractor .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.commercial-contractor .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.commercial-contractor .signalFlow>.icon2 {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.commercial-contractor .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.commercial-contractor .rfidImageSurface {
background: #172029;
padding: 5px;
}
.commercial-contractor .rfidImageSurface img {
width: 100%;
height: auto;
}
.commercial-contractor .rfidMedia figcaption {
padding-top: 13px;
}
.commercial-contractor .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.commercial-contractor .aiReviewBody {
padding: 18px;
}
.commercial-contractor .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.commercial-contractor .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.commercial-contractor .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.commercial-contractor .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.commercial-contractor .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.commercial-contractor .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.commercial-contractor .aiEvidence .icon2 {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.commercial-contractor .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.commercial-contractor .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.commercial-contractor .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.commercial-contractor .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.commercial-contractor .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.commercial-contractor .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.commercial-contractor .aiReviewAction strong {
display: block;
font-size: 11px;
}
.commercial-contractor .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.commercial-contractor .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.commercial-contractor .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.commercial-contractor .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.commercial-contractor .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.commercial-contractor .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.commercial-contractor .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.commercial-contractor .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.commercial-contractor .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.commercial-contractor .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.commercial-contractor .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.commercial-contractor .workflowDetails summary::-webkit-details-marker {
display: none;
}
.commercial-contractor .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.commercial-contractor .workflowDetails[open] summary::after {
content: "−";
}
.commercial-contractor .workflowDetails .featureList,
.commercial-contractor .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.commercial-contractor .workflowDetails .featureItem {
font-size: 11px;
}
.commercial-contractor .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.commercial-contractor .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.commercial-contractor #commercial-connected-tools {
background: #fff;
}
.commercial-contractor #commercial-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.commercial-contractor .featureTab,
.commercial-contractor .industryPriority,
.commercial-contractor summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.commercial-contractor .industryIntroHead {
gap: 30px;
}
.commercial-contractor .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.commercial-contractor .featureStage {
gap: 26px;
padding: 26px;
}
.commercial-contractor .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.commercial-contractor .factoryWorkflow {
padding: 22px;
}
.commercial-contractor .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.commercial-contractor .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commercial-contractor .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.commercial-contractor .industryPriorityGrid {
gap: 14px;
}
.commercial-contractor .industryPriority {
padding: 22px 19px;
}
.commercial-contractor .industryPriority h3 {
font-size: 21px;
}
.commercial-contractor .industryPriority p {
font-size: 12px;
}
.commercial-contractor .priorityLink {
font-size: 10px;
}
.commercial-contractor .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.commercial-contractor .vedaIndustryCopy h2 {
font-size: 39px;
}
.commercial-contractor .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.commercial-contractor .vedaUseCases>div {
display: block;
}
.commercial-contractor .vedaUseCases .icon2 {
margin: 0 0 10px;
}
.commercial-contractor .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.commercial-contractor .featureTabs {
gap: 8px;
}
.commercial-contractor .featureTab {
min-height: 108px;
}
.commercial-contractor .featureStage,
.commercial-contractor .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.commercial-contractor .rfidSpotlight .spotlightMedia,
.commercial-contractor .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.commercial-contractor .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.commercial-contractor .featurePanel {
min-height: 0;
}
.commercial-contractor .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.commercial-contractor .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.commercial-contractor .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.commercial-contractor .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.commercial-contractor .industryRibbonGrid .icon2 {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.commercial-contractor .clientBand {
padding: 22px 0;
}
.commercial-contractor .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.commercial-contractor .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.commercial-contractor .clientBand .logoBox.wide {
font-size: 10px;
}
.commercial-contractor .clientBand .logoBox:last-child {
grid-column: auto;
}
.commercial-contractor .industryIntro {
padding: 53px 0;
}
.commercial-contractor .industryIntroHead h2 {
font-size: 32px;
}
.commercial-contractor .industryIntroHead>p {
font-size: 14px;
}
.commercial-contractor .industryPriorityGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .industryPriority {
padding: 23px;
}
.commercial-contractor .industryPriority h3 {
font-size: 24px;
}
.commercial-contractor .industryPriority>.icon2 {
margin: 5px 0 15px;
}
.commercial-contractor .industryPriority p {
font-size: 13px;
}
.commercial-contractor .priorityLink {
font-size: 11px;
}
.commercial-contractor .vedaIndustry {
padding: 0 0 52px;
}
.commercial-contractor .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.commercial-contractor .vedaIndustryCopy h2 {
font-size: 32px;
}
.commercial-contractor .vedaIndustryCopy>p {
font-size: 14px;
}
.commercial-contractor .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.commercial-contractor .vedaUseCases>div {
display: flex;
}
.commercial-contractor .vedaConversationHead {
padding: 16px 13px;
}
.commercial-contractor .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.commercial-contractor .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.commercial-contractor .vedaMessage.user {
margin-left: 25px;
}
.commercial-contractor .vedaMessage.assistant {
margin-right: 14px;
}
.commercial-contractor .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.commercial-contractor .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.commercial-contractor .manufacturingSpotlight {
padding: 54px 0;
}
.commercial-contractor .spotlightHead h2 {
font-size: 32px;
}
.commercial-contractor .spotlightHead>p {
font-size: 14px;
}
.commercial-contractor .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.commercial-contractor .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.commercial-contractor .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.commercial-contractor .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.commercial-contractor .featurePanel h3 {
font-size: 24px;
}
.commercial-contractor .featurePanel>p {
font-size: 13px;
}
.commercial-contractor .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.commercial-contractor .spotlightChecks>li {
font-size: 12px;
}
.commercial-contractor .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.commercial-contractor .spotlightActions .button {
width: 100%;
}
.commercial-contractor .spotlightScope {
font-size: 10px;
}
.commercial-contractor .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.commercial-contractor .mediaTitle strong {
font-size: 11px;
}
.commercial-contractor .mediaTitle div>span {
font-size: 8px;
}
.commercial-contractor .mediaTitle>.icon2 {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.commercial-contractor .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.commercial-contractor .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.commercial-contractor .rfidMedia figcaption {
padding-top: 12px;
}
.commercial-contractor .aiReviewBody {
padding: 13px;
}
.commercial-contractor .aiIssue {
padding: 13px;
}
.commercial-contractor .aiIssue strong {
font-size: 14px;
}
.commercial-contractor .aiEvidence {
gap: 6px;
}
.commercial-contractor .aiEvidence>div {
padding: 10px 7px;
}
.commercial-contractor .aiEvidence strong {
font-size: 9px;
}
.commercial-contractor .aiEvidence span {
font-size: 7px;
}
.commercial-contractor .exampleLabel {
font-size: 6px;
}
.commercial-contractor .factoryWorkflows {
padding: 55px 0;
}
.commercial-contractor .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.commercial-contractor .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.commercial-contractor .industryRibbonGrid {
gap: 12px;
}
.commercial-contractor .industryRibbonGrid>div {
font-size: 10px;
}
.commercial-contractor .spotlightHead h2 {
font-size: 29px;
}
.commercial-contractor .featureStage {
padding: 19px 13px;
}
.commercial-contractor .mediaTitle>.icon2 {
display: none;
}
.commercial-contractor .exampleLabel {
display: none;
}
.commercial-contractor .vedaBrand {
font-size: 27px;
}
}
@media print {
.commercial-contractor .featureTabs {
display: none;
}
.commercial-contractor .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.commercial-contractor .featureStage {
display: block;
}
.commercial-contractor .featurePanel {
color: #000;
}
}
.commercial-contractor #commercial-delivery-features-1:checked~.featureTabs label[for="commercial-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-delivery-features-1:focus-visible~.featureTabs label[for="commercial-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.commercial-contractor #commercial-delivery-features-2:checked~.featureTabs label[for="commercial-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-delivery-features-2:focus-visible~.featureTabs label[for="commercial-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.commercial-contractor #commercial-delivery-features-3:checked~.featureTabs label[for="commercial-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-delivery-features-3:focus-visible~.featureTabs label[for="commercial-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.commercial-contractor #commercial-delivery-features-4:checked~.featureTabs label[for="commercial-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-delivery-features-4:focus-visible~.featureTabs label[for="commercial-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.commercial-contractor #commercial-delivery-features-5:checked~.featureTabs label[for="commercial-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-delivery-features-5:focus-visible~.featureTabs label[for="commercial-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.commercial-contractor #commercial-rfid-features-1:checked~.featureTabs label[for="commercial-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-rfid-features-1:focus-visible~.featureTabs label[for="commercial-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.commercial-contractor #commercial-rfid-features-2:checked~.featureTabs label[for="commercial-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-rfid-features-2:focus-visible~.featureTabs label[for="commercial-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.commercial-contractor #commercial-rfid-features-3:checked~.featureTabs label[for="commercial-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-rfid-features-3:focus-visible~.featureTabs label[for="commercial-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.commercial-contractor #commercial-rfid-features-4:checked~.featureTabs label[for="commercial-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-rfid-features-4:focus-visible~.featureTabs label[for="commercial-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.commercial-contractor #commercial-rfid-features-5:checked~.featureTabs label[for="commercial-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-rfid-features-5:focus-visible~.featureTabs label[for="commercial-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-1:checked~.featureTabs label[for="commercial-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-ai-decisions-features-1:focus-visible~.featureTabs label[for="commercial-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-2:checked~.featureTabs label[for="commercial-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-ai-decisions-features-2:focus-visible~.featureTabs label[for="commercial-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-3:checked~.featureTabs label[for="commercial-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-ai-decisions-features-3:focus-visible~.featureTabs label[for="commercial-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-4:checked~.featureTabs label[for="commercial-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-ai-decisions-features-4:focus-visible~.featureTabs label[for="commercial-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-5:checked~.featureTabs label[for="commercial-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.commercial-contractor #commercial-ai-decisions-features-5:focus-visible~.featureTabs label[for="commercial-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.commercial-contractor #commercial-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.commercial-contractor .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .featureMediaPanels {
min-width: 0;
}
.commercial-contractor .featureMediaPanels .miniChart {
height: 178px;
}
.commercial-contractor .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.commercial-contractor .featureMediaPanels .windowTop strong,
.commercial-contractor .featureMediaPanels .windowTop small {
display: block;
}
.commercial-contractor .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.commercial-contractor .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commercial-contractor .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.commercial-contractor .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.commercial-contractor .featureMediaPanels .windowBody>*,
.commercial-contractor .featureMediaPanels .spectrumGrid>*,
.commercial-contractor .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.commercial-contractor .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.commercial-contractor .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.commercial-contractor .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.commercial-contractor .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.commercial-contractor .featureMediaPanels .graphNodes {
min-height: 258px;
}
.commercial-contractor .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.commercial-contractor .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.commercial-contractor .featureMediaPanels .mapPin {
box-shadow: none;
}
.commercial-contractor .pin2 {
top: 88px;
right: 88px;
}
.commercial-contractor .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.commercial-contractor .featureMediaPanels .mediaShell {
padding: 10px;
}
.commercial-contractor .featureMediaPanels .windowBody {
padding: 10px;
}
.commercial-contractor .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .featureMediaPanels .alertBadge {
justify-self: start;
}
.commercial-contractor .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.commercial-contractor .featureMediaPanels .graphNodes .node.n1,
.commercial-contractor .featureMediaPanels .graphNodes .node.n2,
.commercial-contractor .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.commercial-contractor .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.commercial-contractor .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.commercial-contractor .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.commercial-contractor .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.commercial-contractor .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.commercial-contractor .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.commercial-contractor .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.commercial-contractor .freshGraphic * {
box-sizing: border-box;
}
.commercial-contractor .rfPanel,
.commercial-contractor .aiInsightCard,
.commercial-contractor .forecastVisualCard,
.commercial-contractor .forecastSuggestion,
.commercial-contractor .knowledgeTile,
.commercial-contractor .chatConversation,
.commercial-contractor .trainingSummary,
.commercial-contractor .moduleCard,
.commercial-contractor .qualityHeatCard,
.commercial-contractor .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.commercial-contractor .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.commercial-contractor .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.commercial-contractor .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.commercial-contractor .statusPill,
.commercial-contractor .cardTag,
.commercial-contractor .forecastSuggestion b,
.commercial-contractor .moduleCard b,
.commercial-contractor .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.commercial-contractor .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.commercial-contractor .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.commercial-contractor .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.commercial-contractor .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.commercial-contractor .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.commercial-contractor .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.commercial-contractor .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.commercial-contractor .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.commercial-contractor .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.commercial-contractor .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.commercial-contractor .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.commercial-contractor .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.commercial-contractor .dot.good {
background: #298EEC;
}
.commercial-contractor .dot.warn {
background: #F4A62A;
}
.commercial-contractor .dot.bad {
background: #EB6B53;
}
.commercial-contractor .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.commercial-contractor .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.commercial-contractor .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.commercial-contractor .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.commercial-contractor .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.commercial-contractor .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.commercial-contractor .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.commercial-contractor .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.commercial-contractor .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.commercial-contractor .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.commercial-contractor .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.commercial-contractor .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.commercial-contractor .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.commercial-contractor .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.commercial-contractor .moveRow b {
color: #298EEC;
font-size: 9px;
}
.commercial-contractor .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.commercial-contractor .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.commercial-contractor .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.commercial-contractor .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.commercial-contractor .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.commercial-contractor .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.commercial-contractor .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.commercial-contractor .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.commercial-contractor .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.commercial-contractor .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.commercial-contractor .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.commercial-contractor .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.commercial-contractor .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.commercial-contractor .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.commercial-contractor .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.commercial-contractor .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.commercial-contractor .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.commercial-contractor .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.commercial-contractor .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.commercial-contractor .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.commercial-contractor .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.commercial-contractor .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.commercial-contractor .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.commercial-contractor .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.commercial-contractor .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.commercial-contractor .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.commercial-contractor .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.commercial-contractor .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.commercial-contractor .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.commercial-contractor .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.commercial-contractor .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.commercial-contractor .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.commercial-contractor .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.commercial-contractor .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.commercial-contractor .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.commercial-contractor .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.commercial-contractor .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.commercial-contractor .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.commercial-contractor .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.commercial-contractor .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.commercial-contractor .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.commercial-contractor .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.commercial-contractor .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.commercial-contractor .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.commercial-contractor .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.commercial-contractor .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.commercial-contractor .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.commercial-contractor .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.commercial-contractor .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.commercial-contractor .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.commercial-contractor .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.commercial-contractor .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.commercial-contractor .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.commercial-contractor .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.commercial-contractor .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.commercial-contractor .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.commercial-contractor .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.commercial-contractor .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.commercial-contractor .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.commercial-contractor .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.commercial-contractor .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.commercial-contractor .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.commercial-contractor .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.commercial-contractor .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.commercial-contractor .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.commercial-contractor .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.commercial-contractor .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.commercial-contractor .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.commercial-contractor .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.commercial-contractor .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.commercial-contractor .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.commercial-contractor .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.commercial-contractor .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.commercial-contractor .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.commercial-contractor .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.commercial-contractor .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.commercial-contractor .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.commercial-contractor .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.commercial-contractor .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.commercial-contractor .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.commercial-contractor .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.commercial-contractor .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.commercial-contractor .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.commercial-contractor .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.commercial-contractor .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.commercial-contractor .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.commercial-contractor .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.commercial-contractor .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.commercial-contractor .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.commercial-contractor .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.commercial-contractor .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.commercial-contractor .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.commercial-contractor .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.commercial-contractor .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.commercial-contractor .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.commercial-contractor .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.commercial-contractor .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.commercial-contractor .chartLegend .sw.blue {
background: #298EEC;
}
.commercial-contractor .chartLegend .sw.amber {
background: #F4A62A;
}
.commercial-contractor .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.commercial-contractor .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.commercial-contractor .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.commercial-contractor .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.commercial-contractor .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.commercial-contractor .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.commercial-contractor .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.commercial-contractor .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.commercial-contractor .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.commercial-contractor .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.commercial-contractor .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.commercial-contractor .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.commercial-contractor .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.commercial-contractor .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.commercial-contractor .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.commercial-contractor .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.commercial-contractor .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.commercial-contractor .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.commercial-contractor .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.commercial-contractor .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.commercial-contractor .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.commercial-contractor .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.commercial-contractor .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.commercial-contractor .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.commercial-contractor .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.commercial-contractor .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.commercial-contractor .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.commercial-contractor .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.commercial-contractor .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.commercial-contractor .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.commercial-contractor .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.commercial-contractor .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.commercial-contractor .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.commercial-contractor .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.commercial-contractor .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.commercial-contractor .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.commercial-contractor .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.commercial-contractor .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.commercial-contractor .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.commercial-contractor .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.commercial-contractor .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.commercial-contractor .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.commercial-contractor .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.commercial-contractor .freshGraphic {
height: auto;
min-height: 420px;
}
.commercial-contractor .rfTrackLayout,
.commercial-contractor .rfFlowLayout,
.commercial-contractor .rfAlertGrid,
.commercial-contractor .rfCycleLayout,
.commercial-contractor .rfSitesLayout,
.commercial-contractor .aiRootLayout,
.commercial-contractor .aiForecastLayout,
.commercial-contractor .aiChatLayout,
.commercial-contractor .aiTrainingLayout,
.commercial-contractor .aiQualityLayout,
.commercial-contractor .trainingModuleGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.commercial-contractor .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.commercial-contractor .rfAlertGrid {
grid-template-columns: 1fr;
}
.commercial-contractor .qualityHeatGrid span {
min-height: 40px;
}
.commercial-contractor .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.commercial-contractor .aiLink {
display: none;
}
}
.commercial-contractor .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.commercial-contractor .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.commercial-contractor .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.commercial-contractor .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.commercial-contractor .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.commercial-contractor .mfgHeroBreadcrumb a {
color: inherit;
}
.commercial-contractor .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black); padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.commercial-contractor .mfgHero .eyebrow .icon2 {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.commercial-contractor .mfgHero h1 {
color: #fff;
}
.commercial-contractor .mfgHero h1>span {
display: block;
}
.commercial-contractor .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.commercial-contractor .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.commercial-contractor .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.commercial-contractor .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.commercial-contractor .mfgHeroActions .outline:hover {
background: #172029;
}
.commercial-contractor .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.commercial-contractor .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.commercial-contractor .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.commercial-contractor .mfgHeroContent {
min-height: 610px;
}
.commercial-contractor .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.commercial-contractor .mfgHeroLead {
font-size: 16px;
}
.commercial-contractor .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.commercial-contractor .mfgHero {
display: flex;
flex-direction: column;
}
.commercial-contractor .mfgHeroContent {
order: 0;
min-height: 0;
}
.commercial-contractor .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.commercial-contractor .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.commercial-contractor .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.commercial-contractor .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.commercial-contractor .mfgHeroCopy {
padding: 25px 0 20px;
}
.commercial-contractor .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.commercial-contractor .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.commercial-contractor .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.commercial-contractor .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.commercial-contractor .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.commercial-contractor .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.commercial-contractor .mfgHeroScene {
height: 280px;
}
}
@media print {
.commercial-contractor .mfgHero {
background: #fff;
color: #000;
}
.commercial-contractor .mfgHeroScene,
.commercial-contractor .mfgHeroActions {
display: none;
}
.commercial-contractor .mfgHeroContent {
min-height: 0;
}
.commercial-contractor .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
.commercial-contractor #commercial-rfid .featureStage,
.commercial-contractor #commercial-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.commercial-contractor .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.commercial-contractor .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.commercial-contractor .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.commercial-contractor .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.commercial-contractor .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.commercial-contractor .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.commercial-contractor .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.commercial-contractor .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.commercial-contractor .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.commercial-contractor .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.commercial-contractor .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.commercial-contractor .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.commercial-contractor .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.commercial-contractor .mfgGallery .rfPanel {
border-radius: 12px;
}
.commercial-contractor .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.commercial-contractor .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.commercial-contractor .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.commercial-contractor .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.commercial-contractor .mfgGallery .shelf span {
font-size: 11px;
}
.commercial-contractor .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.commercial-contractor .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.commercial-contractor .mfgGallery .rfKpiGrid {
gap: 8px;
}
.commercial-contractor .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.commercial-contractor .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.commercial-contractor .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.commercial-contractor .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.commercial-contractor .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.commercial-contractor .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.commercial-contractor .mfgGallery .rfScanCard span {
font-size: 9px;
}
.commercial-contractor .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.commercial-contractor .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.commercial-contractor .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.commercial-contractor .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.commercial-contractor .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.commercial-contractor .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.commercial-contractor .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.commercial-contractor .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.commercial-contractor .mfgGallery .flowArrow {
display: none;
}
.commercial-contractor .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .railItem {
padding: 9px 7px;
}
.commercial-contractor .mfgGallery .railItem b {
font-size: 10px;
}
.commercial-contractor .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.commercial-contractor .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.commercial-contractor .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.commercial-contractor .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.commercial-contractor .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.commercial-contractor .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.commercial-contractor .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .reorderCard strong {
font-size: 13px;
}
.commercial-contractor .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.commercial-contractor .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.commercial-contractor .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.commercial-contractor .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.commercial-contractor .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.commercial-contractor .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.commercial-contractor .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.commercial-contractor .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.commercial-contractor .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.commercial-contractor .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.commercial-contractor .mfgGallery .varianceCard {
padding: 12px;
}
.commercial-contractor .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.commercial-contractor .mfgGallery .varianceCard small {
font-size: 10px;
}
.commercial-contractor .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.commercial-contractor .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.commercial-contractor .mfgGallery .deviceTop {
font-size: 11px;
}
.commercial-contractor .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.commercial-contractor .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.commercial-contractor .mfgGallery .deviceMetric {
padding: 9px;
}
.commercial-contractor .mfgGallery .deviceMetric span {
font-size: 10px;
}
.commercial-contractor .mfgGallery .deviceMetric b {
font-size: 12px;
}
.commercial-contractor .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.commercial-contractor .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.commercial-contractor .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.commercial-contractor .mfgGallery .siteNode.north {
top: 6px;
}
.commercial-contractor .mfgGallery .siteNode.south {
bottom: 6px;
}
.commercial-contractor .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.commercial-contractor .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.commercial-contractor .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.commercial-contractor .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.commercial-contractor .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.commercial-contractor .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.commercial-contractor .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.commercial-contractor .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.commercial-contractor .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.commercial-contractor .mfgGallery .siteSummary strong {
font-size: 12px;
}
.commercial-contractor .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.commercial-contractor .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.commercial-contractor .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.commercial-contractor .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.commercial-contractor .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.commercial-contractor .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.commercial-contractor .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.commercial-contractor .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.commercial-contractor .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.commercial-contractor .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.commercial-contractor .mfgGallery .insightMeta {
gap: 6px;
}
.commercial-contractor .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.commercial-contractor .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .chartHeader span {
font-size: 10px;
}
.commercial-contractor .mfgGallery .chartHeader b {
font-size: 11px;
}
.commercial-contractor .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.commercial-contractor .mfgGallery .chartLegend {
font-size: 10px;
}
.commercial-contractor .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.commercial-contractor .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.commercial-contractor .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.commercial-contractor .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.commercial-contractor .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.commercial-contractor .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.commercial-contractor .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.commercial-contractor .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.commercial-contractor .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.commercial-contractor .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.commercial-contractor .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.commercial-contractor .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.commercial-contractor .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.commercial-contractor .mfgGallery .progressCenter strong {
font-size: 25px;
}
.commercial-contractor .mfgGallery .trainingStatList {
gap: 9px;
}
.commercial-contractor .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.commercial-contractor .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.commercial-contractor .mfgGallery .trainingStatList span {
font-size: 10px;
}
.commercial-contractor .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.commercial-contractor .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.commercial-contractor .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.commercial-contractor .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.commercial-contractor .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.commercial-contractor .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.commercial-contractor .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.commercial-contractor .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.commercial-contractor .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.commercial-contractor .mfgGallery .qualityCaption span {
font-size: 10px;
}
.commercial-contractor .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.commercial-contractor .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.commercial-contractor .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.commercial-contractor .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.commercial-contractor .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.commercial-contractor #commercial-rfid .featureStage,
.commercial-contractor #commercial-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.commercial-contractor #commercial-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.commercial-contractor .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.commercial-contractor #commercial-rfid .featureStage,
.commercial-contractor #commercial-ai-decisions .featureStage {
padding: 16px;
}
.commercial-contractor .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.commercial-contractor .mfgGallery .freshWindow {
height: auto;
}
.commercial-contractor .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.commercial-contractor .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .freshTop strong {
font-size: 13px;
}
.commercial-contractor .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.commercial-contractor .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.commercial-contractor .mfgGallery .rfShelfPanel {
padding: 10px;
}
.commercial-contractor .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.commercial-contractor .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.commercial-contractor .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.commercial-contractor .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.commercial-contractor .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.commercial-contractor .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.commercial-contractor .mfgGallery .flowNum {
grid-row: 1/3;
}
.commercial-contractor .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.commercial-contractor .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.commercial-contractor .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commercial-contractor .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.commercial-contractor .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.commercial-contractor .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.commercial-contractor .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.commercial-contractor .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.commercial-contractor .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.commercial-contractor .mfgGallery .rfActionStrip {
height: auto;
}
.commercial-contractor .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .countPanel {
gap: 14px;
}
.commercial-contractor .mfgGallery .handheldPanel {
padding: 15px;
}
.commercial-contractor .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.commercial-contractor .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.commercial-contractor .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.commercial-contractor .mfgGallery .siteNode.east {
right: 3%;
}
.commercial-contractor .mfgGallery .siteNode.west {
left: 3%;
}
.commercial-contractor .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.commercial-contractor .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.commercial-contractor .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.commercial-contractor .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.commercial-contractor .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.commercial-contractor .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.commercial-contractor .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.commercial-contractor .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.commercial-contractor .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.commercial-contractor .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.commercial-contractor .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.commercial-contractor .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.commercial-contractor .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.commercial-contractor .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.commercial-contractor .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.commercial-contractor .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.commercial-contractor .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.commercial-contractor .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.commercial-contractor .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.commercial-contractor .mfgGallery .moduleCard {
padding: 10px;
}
.commercial-contractor .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.commercial-contractor .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.commercial-contractor .mfgGallery .qualityAction strong {
font-size: 12px;
}
.commercial-contractor .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.commercial-contractor .mfgGallery .shelf i::after {
bottom: 0;
}
.commercial-contractor .commercialVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.commercial-contractor .commercialGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.commercial-contractor .commercialVisualGallery>.commercialGraphic {
display: none;
}
.commercial-contractor #commercial-delivery .featureStage,
.commercial-contractor #commercial-rfid .featureStage,
.commercial-contractor #commercial-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.commercial-contractor #commercial-rfid .commercialVisualGallery {
grid-column: 1;
grid-row: 1;
}
.commercial-contractor #commercial-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.commercial-contractor .factoryWorkflow {
display: flex;
flex-direction: column;
}
.commercial-contractor .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.commercial-contractor .factoryWorkflow>p {
margin-bottom: 22px;
}
.commercial-contractor .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
.commercial-contractor #commercial-delivery .featureStage,
.commercial-contractor #commercial-rfid .featureStage,
.commercial-contractor #commercial-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.commercial-contractor #commercial-rfid .commercialVisualGallery,
.commercial-contractor #commercial-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.commercial-contractor .mfgHeroScene {
height: 290px;
}
.commercial-contractor #commercial-delivery .featureStage,
.commercial-contractor #commercial-rfid .featureStage,
.commercial-contractor #commercial-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.commercial-contractor .commercialVisualGallery {
width: 100%;
}
}
@media print {
.commercial-contractor .commercialVisualGallery>.commercialGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.commercial-contractor #commercial-delivery-features-1:checked~.featureStage .commercialVisualGallery> :nth-child(1) {
display: block;
}
.commercial-contractor #commercial-delivery-features-2:checked~.featureStage .commercialVisualGallery> :nth-child(2) {
display: block;
}
.commercial-contractor #commercial-delivery-features-3:checked~.featureStage .commercialVisualGallery> :nth-child(3) {
display: block;
}
.commercial-contractor #commercial-delivery-features-4:checked~.featureStage .commercialVisualGallery> :nth-child(4) {
display: block;
}
.commercial-contractor #commercial-delivery-features-5:checked~.featureStage .commercialVisualGallery> :nth-child(5) {
display: block;
}
.commercial-contractor #commercial-rfid-features-1:checked~.featureStage .commercialVisualGallery> :nth-child(1) {
display: block;
}
.commercial-contractor #commercial-rfid-features-2:checked~.featureStage .commercialVisualGallery> :nth-child(2) {
display: block;
}
.commercial-contractor #commercial-rfid-features-3:checked~.featureStage .commercialVisualGallery> :nth-child(3) {
display: block;
}
.commercial-contractor #commercial-rfid-features-4:checked~.featureStage .commercialVisualGallery> :nth-child(4) {
display: block;
}
.commercial-contractor #commercial-rfid-features-5:checked~.featureStage .commercialVisualGallery> :nth-child(5) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-1:checked~.featureStage .commercialVisualGallery> :nth-child(1) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-2:checked~.featureStage .commercialVisualGallery> :nth-child(2) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-3:checked~.featureStage .commercialVisualGallery> :nth-child(3) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-4:checked~.featureStage .commercialVisualGallery> :nth-child(4) {
display: block;
}
.commercial-contractor #commercial-ai-decisions-features-5:checked~.featureStage .commercialVisualGallery> :nth-child(5) {
display: block;
}
.commercial-contractor .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.commercial-contractor .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.commercial-contractor .commercialIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.commercial-contractor .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 70% 50%;
}
.commercial-contractor .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.commercial-contractor .mfgHeroScene img {
object-position: 78% 50%;
}
.commercial-contractor .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
.commercial-contractor .mfgHeroScene img {
object-position: 72% 50%;
}
.commercial-contractor .commercialIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
.commercial-contractor .commercialVisualGallery {
min-height: 0;
}
.commercial-contractor .commercialIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 90% 50%;
}
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
.commercial-contractor .commercialVisualGallery {
min-height: 0;
}
.commercial-contractor .mfgHeroScene img {
object-position: 72% 50%;
}
.commercial-contractor .commercialIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.commercial-contractor .commercialGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 83% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 76% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 87% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 76% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.commercial-contractor #commercial-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 88% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 77% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.commercial-contractor #commercial-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 85% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 78% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.commercial-contractor #commercial-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 78% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.commercial-contractor #commercial-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}
.commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
} .commercial-contractor .mfgHeroContent {
background: transparent;
}
.commercial-contractor .mfgHeroScene img {
object-position: 74% 50%;
}
.commercial-contractor .commercialIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
.commercial-contractor .commercialGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
.commercial-contractor .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
.commercial-contractor .mfgHeroScene img {
object-position: 80% 50%;
}
}  #dreamz-pool .industryIntroHead.compact,
#dreamz-pool .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-pool .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-pool .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-pool .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-pool .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-pool .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-pool .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-pool .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-pool .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-pool .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-pool .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-pool .windowDots {
display: flex;
gap: 5px;
}
#dreamz-pool .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-pool .windowBody {
padding: 16px;
}
#dreamz-pool .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-pool .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-pool .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-pool .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-pool .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-pool .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-pool .chartGridLine.l1 {
top: 34px;
}
#dreamz-pool .chartGridLine.l2 {
top: 65px;
}
#dreamz-pool .chartGridLine.l3 {
top: 96px;
}
#dreamz-pool .chartGridLine.l4 {
top: 127px;
}
#dreamz-pool .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-pool .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-pool .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-pool .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-pool .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-pool .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-pool .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-pool .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-pool .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-pool .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-pool .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-pool .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-pool .noteCard p,
#dreamz-pool .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-pool .alertStack {
display: grid;
gap: 10px;
}
#dreamz-pool .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-pool .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-pool .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-pool .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-pool .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-pool .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-pool .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-pool .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-pool .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-pool .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-pool .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-pool .scheduleBoard h4,
#dreamz-pool .todoBoard h4,
#dreamz-pool .siteBoard h4,
#dreamz-pool .chatPanel h4,
#dreamz-pool .lessonPanel h4,
#dreamz-pool .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-pool .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-pool .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-pool .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-pool .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-pool .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-pool .taskRow:last-child {
border-bottom: 0;
}
#dreamz-pool .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-pool .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-pool .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-pool .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-pool .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-pool .inventoryTable th,
#dreamz-pool .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-pool .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-pool .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-pool .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-pool .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-pool .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-pool .phoneBody {
padding: 12px;
}
#dreamz-pool .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-pool .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-pool .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-pool .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-pool .progressList {
display: grid;
gap: 10px;
}
#dreamz-pool .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-pool .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-pool .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-pool .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-pool .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-pool .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-pool .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-pool .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-pool .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-pool .pin1 {
top: 56px;
left: 58px;
}
#dreamz-pool .pin2 {
top: 88px;
right: 88px;
}
#dreamz-pool .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-pool .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-pool .siteRow:last-child {
border-bottom: 0;
}
#dreamz-pool .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-pool .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-pool .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-pool .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-pool .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-pool .graphNodes:before,
#dreamz-pool .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-pool .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-pool .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-pool .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-pool .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-pool .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-pool .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-pool .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-pool .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-pool .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-pool .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-pool .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-pool .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-pool .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-pool .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-pool .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-pool .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-pool .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-pool .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-pool .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-pool .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-pool .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-pool .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-pool .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-pool .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-pool .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-pool .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-pool .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-pool .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-pool .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-pool .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-pool .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-pool .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-pool .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-pool #pool-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-pool #pool-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-pool #pool-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-pool #pool-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-pool #pool-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-pool #pool-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-pool #pool-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-pool #pool-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-pool #pool-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-pool #pool-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-pool #pool-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-pool #pool-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-pool #pool-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-pool #pool-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-pool #pool-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-pool #pool-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-pool #pool-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-pool #pool-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-pool #pool-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-pool #pool-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-pool #pool-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-pool #pool-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-pool #pool-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-pool #pool-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-pool #pool-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-pool #pool-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-pool #pool-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-pool #pool-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-pool #pool-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-pool #pool-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-pool .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-pool .featureMediaPanels {
min-height: 0;
}
#dreamz-pool .inventorySplit,
#dreamz-pool .forecastGrid,
#dreamz-pool .siteGrid,
#dreamz-pool .spectrumGrid,
#dreamz-pool .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-pool .metricGrid,
#dreamz-pool .lessonCards,
#dreamz-pool .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-pool .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-pool {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-pool * {
box-sizing: border-box;
}
#dreamz-pool {
scroll-behavior: smooth;
}
#dreamz-pool {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-pool a {
color: inherit;
text-decoration: none;
}
#dreamz-pool .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-pool .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-pool .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-pool .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-pool .brand span {
color: var(--brand);
}
#dreamz-pool .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-pool .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-pool .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-pool .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-pool .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-pool .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-pool .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-pool .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-pool h1 {
color: var(--black);
}
#dreamz-pool h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-pool .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-pool .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-pool .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-pool .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-pool .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-pool .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-pool .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-pool .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-pool .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-pool .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-pool .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-pool .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-pool .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-pool .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-pool .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-pool .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-pool .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-pool .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-pool .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-pool .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-pool .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-pool .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-pool .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-pool .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-pool .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-pool .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-pool .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-pool .sectionHead { margin-bottom: 44px;
}
#dreamz-pool .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-pool .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-pool .aiJourney h2 {
color: #fff;
}
#dreamz-pool .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-pool .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-pool .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-pool .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-pool .aiStep:last-child::after {
display: none;
}
#dreamz-pool .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-pool .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-pool .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-pool .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-pool .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-pool .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-pool .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-pool .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-pool .capability {
background: #fff;
}
#dreamz-pool .capability.alt {
background: var(--sky-2);
}
#dreamz-pool .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-pool .twoCol.reverse .visual {
order: 2;
}
#dreamz-pool .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-pool .visual .placeholder {
min-height: 355px;
}
#dreamz-pool .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-pool .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-pool details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-pool details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-pool details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-pool details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-pool details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-pool details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-pool .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-pool .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-pool .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-pool .darkSection h2,
#dreamz-pool .darkSection h3 {
color: #fff;
}
#dreamz-pool .darkSection .sectionHead p,
#dreamz-pool .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-pool .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-pool .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-pool .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-pool .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-pool .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-pool .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-pool .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-pool .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-pool .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-pool .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-pool .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-pool .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-pool .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-pool .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-pool .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-pool .benefitBand h2 {
color: #fff;
}
#dreamz-pool .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-pool .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-pool .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-pool .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-pool .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-pool .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-pool .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-pool .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-pool .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-pool .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-pool .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-pool .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-pool .faq {
max-width: 900px;
}
#dreamz-pool .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-pool .ctaPanel h2 {
color: #fff;
}
#dreamz-pool .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-pool .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-pool .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-pool .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-pool .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-pool .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-pool .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-pool .inlineCta.dark h3 {
color: #fff;
}
#dreamz-pool .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-pool .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-pool .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-pool .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-pool .button.yellow:hover {
background: #FFD84D;
}
#dreamz-pool .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-pool .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-pool .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-pool .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-pool footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-pool .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-pool .heroGrid,
#dreamz-pool .twoCol,
#dreamz-pool .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-pool .twoCol.reverse .visual {
order: initial;
}
#dreamz-pool .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-pool .ratingGrid,
#dreamz-pool .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-pool .ratingLead,
#dreamz-pool .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-pool .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-pool .aiStep:nth-child(3)::after,
#dreamz-pool .aiStep:last-child::after {
display: none;
}
#dreamz-pool .outcomeGrid,
#dreamz-pool .challengeGrid,
#dreamz-pool .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-pool .cards,
#dreamz-pool .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-pool .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-pool .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-pool .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-pool .hero {
padding: 58px 0 52px;
}
#dreamz-pool .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-pool .aiStep::after {
display: none;
}
#dreamz-pool .logoRow,
#dreamz-pool .ratingGrid,
#dreamz-pool .awardGrid,
#dreamz-pool .outcomeGrid,
#dreamz-pool .challengeGrid,
#dreamz-pool .benefitGrid,
#dreamz-pool .cards,
#dreamz-pool .proofCards,
#dreamz-pool .integrationGrid,
#dreamz-pool .featureList {
grid-template-columns: 1fr;
}
#dreamz-pool .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-pool .ctaPanel {
padding: 34px 24px;
}
#dreamz-pool .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-pool .inlineCtaActions {
width: 100%;
}
#dreamz-pool .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-pool {
--muted: #526A7C;
--shadow: none;
}
#dreamz-pool {
background: var(--sky-2);
}
#dreamz-pool p {
margin-bottom: 0;
}
#dreamz-pool [id] {
scroll-margin-top: 94px;
}
#dreamz-pool svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-pool .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: none;
}
#dreamz-pool .wrap>*,
#dreamz-pool .heroGrid>*,
#dreamz-pool .twoCol>*,
#dreamz-pool .ctaPanel>* {
min-width: 0;
}
#dreamz-pool .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-pool .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-pool .skipLink:focus {
transform: none;
}
#dreamz-pool a:focus-visible,
#dreamz-pool summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-pool .darkSection a:focus-visible,
#dreamz-pool .darkSection summary:focus-visible,
#dreamz-pool .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-pool .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-pool .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-pool .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-pool .brandName>span {
color: var(--brand-dark);
}
#dreamz-pool .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-pool .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-pool .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-pool .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-pool .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-pool .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-pool .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-pool .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-pool .hero h1 {
line-height: 1.06;
}
#dreamz-pool .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-pool .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-pool .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-pool .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-pool .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-pool .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-pool .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-pool .clientBand {
padding: 27px 0;
}
#dreamz-pool .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-pool .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-pool .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-pool .logoBox.wide {
font-size: 12px;
}
#dreamz-pool .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-pool .sectionHead {
margin-bottom: 36px;
}
#dreamz-pool .eyebrow {
line-height: 1.5;
}
#dreamz-pool .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-pool .aiStep {
min-height: 162px;
}
#dreamz-pool .aiStep strong {
line-height: 1.35;
}
#dreamz-pool .aiStep span {
line-height: 1.65;
}
#dreamz-pool .aiCallout {
margin-top: 24px;
}
#dreamz-pool .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-pool .outcome>.icon {
color: var(--navy);
}
#dreamz-pool .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-pool .awardItem>.icon {
color: var(--navy);
}
#dreamz-pool .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-pool .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-pool .twoCol.reverse .visual {
order: -1;
}
#dreamz-pool .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-pool .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-pool .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-pool .featureList {
gap: 13px 18px;
}
#dreamz-pool .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-pool .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-pool .check .icon {
width: 14px;
height: 14px;
}
#dreamz-pool details.capabilityMore {
margin-bottom: 0;
}
#dreamz-pool .capabilityMore summary {
min-height: 34px;
}
#dreamz-pool .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-pool .textCta {
font-size: 14px;
}
#dreamz-pool .visual {
min-width: 0;
}
#dreamz-pool .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-pool .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-pool .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-pool .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-pool .panelBody {
padding: 20px;
}
#dreamz-pool .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-pool .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-pool .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-pool .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-pool .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-pool .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-pool .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-pool .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-pool .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-pool .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-pool .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-pool .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-pool .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-pool .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-pool .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-pool .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-pool .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-pool .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-pool .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-pool .dataRow:last-child {
border-bottom: 0;
}
#dreamz-pool .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-pool .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-pool .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-pool .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-pool .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-pool .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-pool .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-pool .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-pool .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-pool .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-pool .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-pool .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-pool .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-pool .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-pool .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-pool .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-pool .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-pool .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-pool .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-pool .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-pool .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-pool .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-pool .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-pool .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-pool .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-pool .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-pool .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-pool .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-pool .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-pool .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-pool .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-pool .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-pool .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-pool .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-pool .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-pool .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-pool .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-pool .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-pool .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-pool .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-pool .promptList {
display: grid;
gap: 10px;
}
#dreamz-pool .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-pool .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-pool .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-pool .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-pool .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-pool .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-pool .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-pool .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-pool .quoteTable th,
#dreamz-pool .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-pool .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-pool .quoteTable td:first-child {
width: 64%;
}
#dreamz-pool .quoteTable th:last-child,
#dreamz-pool .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-pool .quoteTable strong {
font-size: 11px;
}
#dreamz-pool .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-pool .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-pool .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-pool .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-pool .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-pool .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-pool .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-pool .orderJourney {
margin: 20px 0;
}
#dreamz-pool .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-pool .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-pool .journeyRow:last-child:before {
display: none;
}
#dreamz-pool .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-pool .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-pool .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-pool .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-pool .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-pool .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-pool .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-pool .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-pool .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-pool .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-pool .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-pool .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-pool .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-pool .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-pool .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-pool .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-pool .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-pool .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-pool .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-pool .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-pool .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-pool .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-pool .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-pool .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-pool .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-pool .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-pool .customerTimeline strong {
color: #fff;
}
#dreamz-pool .customerTimeline small {
color: #BFBFBF;
}
#dreamz-pool .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-pool .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-pool .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-pool .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-pool .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-pool .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-pool .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-pool .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-pool .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-pool .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-pool .chartTitle strong {
font-size: 12px;
}
#dreamz-pool .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-pool .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-pool .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-pool .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-pool .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-pool .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-pool .inlineCtaActions {
max-width: 42%;
}
#dreamz-pool .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-pool .inlineCta h3 {
line-height: 1.35;
}
#dreamz-pool .card {
box-shadow: none;
}
#dreamz-pool .cardIcon {
box-shadow: none;
}
#dreamz-pool .card h3 {
font-size: 22px;
}
#dreamz-pool .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-pool .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-pool .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-pool .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-pool .ratingBand {
padding: 34px 0;
}
#dreamz-pool .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-pool .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-pool .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-pool .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-pool .ratingItem:first-child {
border-left: 0;
}
#dreamz-pool .proofCard h3 {
font-size: 23px;
}
#dreamz-pool .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-pool .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-pool .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-pool .integration {
min-height: 98px;
}
#dreamz-pool .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-pool .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-pool .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-pool .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-pool .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-pool .finalActions {
display: grid;
gap: 11px;
}
#dreamz-pool .finalActions .button {
white-space: nowrap;
}
#dreamz-pool .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-pool .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-pool .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-pool .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-pool .heroGrid {
gap: 30px;
}
#dreamz-pool .twoCol {
gap: 32px;
}
#dreamz-pool .panelBody {
padding: 16px;
}
#dreamz-pool .panelHead {
padding: 16px;
}
#dreamz-pool .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-pool .pipelineColumns {
gap: 7px;
}
#dreamz-pool .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-pool .heroGrid,
#dreamz-pool .twoCol,
#dreamz-pool .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .heroGrid {
gap: 36px;
}
#dreamz-pool .hero h1 {
max-width: 730px;
}
#dreamz-pool .hero .lead {
max-width: 690px;
}
#dreamz-pool .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-pool .twoCol {
gap: 34px;
}
#dreamz-pool .twoCol.reverse .visual {
order: initial;
}
#dreamz-pool .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-pool .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-pool .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-pool .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-pool .ratingSectionGrid {
gap: 20px;
}
#dreamz-pool .inlineCta {
align-items: flex-start;
}
#dreamz-pool .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-pool .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-pool .card {
padding: 22px;
}
#dreamz-pool .card h3 {
font-size: 21px;
}
#dreamz-pool .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-pool .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-pool .cards,
#dreamz-pool .proofCards {
grid-template-columns: 1fr;
}
#dreamz-pool .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-pool .inlineCta {
flex-direction: column;
}
#dreamz-pool .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-pool .inlineCtaActions .button {
flex: 1;
}
#dreamz-pool .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-pool .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-pool .wrap {
width: calc(100% - 32px);
}
#dreamz-pool [id] {
scroll-margin-top: 82px;
}
#dreamz-pool .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-pool .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-pool .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-pool .hero {
padding: 51px 0 48px;
}
#dreamz-pool .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-pool .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-pool .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-pool .hero .microcopy {
font-size: 11px;
}
#dreamz-pool .heroPills span {
font-size: 9px;
}
#dreamz-pool .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-pool .sectionHead p {
font-size: 16px;
}
#dreamz-pool .copy h2 {
font-size: 34px;
}
#dreamz-pool .copy p {
font-size: 15px;
}
#dreamz-pool .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-pool .logoBox {
min-height: 53px;
}
#dreamz-pool .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-pool .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-pool .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-pool .aiStep strong {
font-size: 13px;
}
#dreamz-pool .aiStep span {
font-size: 11px;
}
#dreamz-pool .aiStep::after {
display: none;
}
#dreamz-pool .outcomeGrid,
#dreamz-pool .challengeGrid,
#dreamz-pool .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .outcome {
padding: 24px;
}
#dreamz-pool .outcome strong {
font-size: 22px;
}
#dreamz-pool .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-pool .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-pool .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-pool .featureList,
#dreamz-pool .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .featureItem {
font-size: 13px;
}
#dreamz-pool .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-pool .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-pool .panelHead {
padding: 15px 13px;
}
#dreamz-pool .panelHead>strong {
font-size: 12px;
}
#dreamz-pool .panelBody {
padding: 14px;
}
#dreamz-pool .productPanel {
border-radius: 16px;
}
#dreamz-pool .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-pool .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-pool .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-pool .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-pool .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-pool .deal strong {
font-size: 10px;
}
#dreamz-pool .deal small {
font-size: 9px;
}
#dreamz-pool .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-pool .mobileWorkspace {
gap: 12px;
}
#dreamz-pool .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-pool .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-pool .sideTile {
padding: 10px;
}
#dreamz-pool .sideTile strong {
font-size: 10px;
}
#dreamz-pool .sideTile p {
font-size: 9px;
}
#dreamz-pool .mobileHeader strong {
font-size: 15px;
}
#dreamz-pool .mobileAccount strong {
font-size: 10px;
}
#dreamz-pool .mobileAccount small {
font-size: 7px;
}
#dreamz-pool .phoneDevice .rowIcon {
display: none;
}
#dreamz-pool .quoteTable th,
#dreamz-pool .quoteTable td {
padding: 12px 4px;
}
#dreamz-pool .quoteTable strong {
font-size: 10px;
}
#dreamz-pool .quoteTable small {
font-size: 8px;
}
#dreamz-pool .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-pool .docHeader strong {
font-size: 17px;
}
#dreamz-pool .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-pool .miniFlow span {
padding: 6px;
}
#dreamz-pool .rowCopy strong {
font-size: 10px;
}
#dreamz-pool .rowCopy small {
font-size: 8px;
}
#dreamz-pool .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-pool .miniStats {
gap: 7px;
}
#dreamz-pool .miniStats>div {
padding: 9px;
}
#dreamz-pool .miniStats strong {
font-size: 18px;
}
#dreamz-pool .miniStats span {
font-size: 8px;
}
#dreamz-pool .collectionStats>div {
padding: 13px;
}
#dreamz-pool .collectionStats strong {
font-size: 24px;
}
#dreamz-pool .customerHeader strong {
font-size: 17px;
}
#dreamz-pool .customerFacts>div {
padding: 10px;
}
#dreamz-pool .customerFacts strong {
font-size: 12px;
}
#dreamz-pool .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-pool .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-pool .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-pool .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-pool .integration small {
font-size: 9px;
}
#dreamz-pool .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-pool .ctaPanel p {
font-size: 15px;
}
#dreamz-pool .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-pool .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-pool .contextSection {
padding: 0 0 24px;
}
#dreamz-pool .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-pool .wrap {
width: calc(100% - 24px);
}
#dreamz-pool .brand {
font-size: 18px;
}
#dreamz-pool .brandMark {
width: 25px;
height: 25px;
}
#dreamz-pool .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-pool .copy h2 {
font-size: 31px;
}
#dreamz-pool .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-pool .phoneDevice {
width: 210px;
}
#dreamz-pool .phoneDevice .rowIcon {
display: grid;
}
#dreamz-pool .mobileSide {
gap: 8px;
}
#dreamz-pool .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-pool .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-pool .sideTile p {
margin: 0;
}
#dreamz-pool .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-pool .collectionStats strong {
font-size: 21px;
}
#dreamz-pool .inventoryIntro strong {
font-size: 14px;
}
#dreamz-pool .dataRow {
gap: 7px;
}
#dreamz-pool .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-pool .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-pool {
scroll-behavior: auto;
}
#dreamz-pool *,
#dreamz-pool *::before,
#dreamz-pool *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-pool {
background: var(--sky-2);
}
#dreamz-pool .hero .eyebrow {
max-width: 100%;
}
#dreamz-pool .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-pool .ganttIllustration,
#dreamz-pool .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-pool .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-pool .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-pool .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-pool .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-pool .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-pool .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-pool .comparisonTable th,
#dreamz-pool .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-pool .comparisonTable th:first-child {
width: 23%;
}
#dreamz-pool .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-pool .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-pool .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-pool .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-pool .card,
#dreamz-pool .proofCard,
#dreamz-pool .productPanel,
#dreamz-pool .outcome,
#dreamz-pool .benefit {
box-shadow: none;
}
#dreamz-pool .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-pool .hero .eyebrow {
font-size: 10px;
}
#dreamz-pool .comparisonTable {
font-size: 11px;
}
#dreamz-pool .comparisonTable th,
#dreamz-pool .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-pool .comparisonTable th:first-child {
width: 24%;
}
#dreamz-pool .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-pool .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
}
#dreamz-pool .scheduleIllustration,
#dreamz-pool .analyticsIllustration,
#dreamz-pool .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-pool .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-pool .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-pool .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-pool .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-pool .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-pool .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-pool .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-pool .darkSection .textCta {
color: var(--yellow);
}
#dreamz-pool .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-pool .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-pool .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-pool .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-pool .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-pool .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-pool .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-pool .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-pool .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-pool .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-pool .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-pool .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-pool .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-pool .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-pool .phoneDevice {
max-width: 100%;
}
#dreamz-pool .heroPills {
line-height: 1.55;
}
#dreamz-pool .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-pool .plantFacts {
gap: 7px;
}
#dreamz-pool .plantFacts>div {
padding: 9px;
}
#dreamz-pool .plantFacts strong {
font-size: 11px;
}
#dreamz-pool .scanSummary {
padding: 12px;
}
#dreamz-pool .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-pool .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-pool .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-pool .phoneDevice .rowIcon {
display: grid;
}
#dreamz-pool .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-pool .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-pool .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-pool .sideTile strong {
font-size: 12px;
}
#dreamz-pool .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-pool .topbar,
#dreamz-pool .heroActions,
#dreamz-pool .finalActions,
#dreamz-pool .contextSection,
#dreamz-pool .valueCtaSection {
display: none;
}
#dreamz-pool section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-pool .hero {
padding-top: 20px;
}
}
#dreamz-pool {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-pool p {
margin: 0;
}
#dreamz-pool main {
display: block;
}
#dreamz-pool .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-pool .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-pool .hero h1 {
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-pool .heroAccent {
color: var(--black);
}
#dreamz-pool .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-pool .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-pool .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-pool .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-pool .microcopy {
margin-top: 14px;
}
#dreamz-pool .heroPills {
margin-top: 13px;
}
#dreamz-pool .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-pool .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-pool .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-pool .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-pool .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-pool .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-pool .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-pool .clientBand {
padding: 24px 0;
}
#dreamz-pool .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-pool .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-pool .logoBox.wide {
font-size: 15px;
}
#dreamz-pool .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-pool .sectionHead p {
margin: 17px 0 0;
}
#dreamz-pool .copy p {
margin: 16px 0 0;
}
#dreamz-pool .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-pool .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-pool .aiJourney {
background: var(--black);
}
#dreamz-pool .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-pool .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-pool .productPanel {
border-radius: 18px;
}
#dreamz-pool .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-pool .panelHead>strong {
font-size: 13px;
}
#dreamz-pool .sampleTag {
font-size: 9px;
}
#dreamz-pool .panelBody {
padding: 21px;
}
#dreamz-pool .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-pool .docHeader {
padding-bottom: 16px;
}
#dreamz-pool .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-pool .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-pool .smallLabel {
font-size: 9px;
}
#dreamz-pool .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-pool .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-pool .dataRow {
padding: 14px 0;
}
#dreamz-pool .statusPill {
font-size: 8px;
}
#dreamz-pool .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-pool .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-pool .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-pool .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-pool .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-pool .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-pool .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-pool .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-pool .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-pool .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-pool .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-pool .hierarchy strong {
color: var(--navy);
}
#dreamz-pool .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-pool .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-pool .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-pool .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-pool .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-pool .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-pool .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-pool .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-pool .mobileAccount small {
font-size: 9px;
}
#dreamz-pool .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-pool .sideTile strong {
font-size: 12px;
}
#dreamz-pool .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-pool .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-pool .mobileAction {
font-size: 9px;
}
#dreamz-pool .journeyRow strong {
font-size: 13px;
}
#dreamz-pool .journeyRow small {
font-size: 11px;
}
#dreamz-pool .poolRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-pool .poolRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-pool .poolRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-pool .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-pool .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-pool .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-pool .utilityReadout small {
font-size: 12px;
}
#dreamz-pool .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-pool .darkSection {
background: var(--black);
}
#dreamz-pool .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-pool .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-pool .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-pool .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-pool .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-pool .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-pool .assistantHead small {
font-size: 11px;
}
#dreamz-pool .assistantNote {
font-size: 11px;
}
#dreamz-pool .reportTags span {
font-size: 10px;
}
#dreamz-pool .card p {
margin: 12px 0 0;
}
#dreamz-pool .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-pool .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-pool .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-pool .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-pool .cards>.card p {
padding-bottom: 22px;
}
#dreamz-pool .benefitBand {
background: var(--black);
}
#dreamz-pool .benefit {
background: var(--black-soft);
}
#dreamz-pool .inlineCta h3 {
font-size: 20px;
}
#dreamz-pool .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-pool .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-pool .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-pool .valueCtaSection {
padding: 32px 0;
}
#dreamz-pool .proofCard p {
margin-top: 15px;
}
#dreamz-pool .proofCard h3 {
font-size: 23px;
}
#dreamz-pool .integrationNote {
margin-top: 23px;
}
#dreamz-pool .ctaPanel {
background: var(--black);
}
#dreamz-pool .ctaPanel p {
margin-top: 16px;
}
#dreamz-pool .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-pool .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-pool a:hover {
text-decoration: none;
}
#dreamz-pool .textCta:hover {
color: var(--navy);
}
#dreamz-pool .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-pool .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-pool .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-pool .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-pool .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-pool .heroVisual {
max-width: 548px;
}
#dreamz-pool .hero .lead {
max-width: 700px;
}
#dreamz-pool .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-pool .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-pool .logoBox:last-child {
grid-column: auto;
}
#dreamz-pool .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-pool .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-pool .inlineCtaActions .button {
flex: 1;
}
#dreamz-pool .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-pool .hero {
padding: 28px 0 40px;
}
#dreamz-pool .hero h1 {
line-height: 1.08;
}
#dreamz-pool .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-pool .heroActions {
gap: 10px;
}
#dreamz-pool .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-pool .breadcrumb {
margin-bottom: 21px;
}
#dreamz-pool .hero .eyebrow {
font-size: 11px;
}
#dreamz-pool .heroVisual {
max-width: 480px;
}
#dreamz-pool .heroPills {
row-gap: 9px;
}
#dreamz-pool .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-pool .heroPills span+span {
padding-left: 7px;
}
#dreamz-pool .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-pool .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-pool .clientBand {
padding: 25px 0;
}
#dreamz-pool .copy h2 {
font-size: 33px;
}
#dreamz-pool .panelBody {
padding: 16px;
}
#dreamz-pool .panelHead {
padding: 15px;
}
#dreamz-pool .panelHead>strong {
font-size: 12px;
}
#dreamz-pool .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-pool .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-pool .docHeader strong {
font-size: 18px;
}
#dreamz-pool .docHeader small {
font-size: 10px;
}
#dreamz-pool .rowCopy strong {
font-size: 11px;
}
#dreamz-pool .rowCopy small {
font-size: 10px;
}
#dreamz-pool .miniStats {
gap: 7px;
}
#dreamz-pool .miniStats strong {
font-size: 21px;
}
#dreamz-pool .miniStats span {
font-size: 9px;
}
#dreamz-pool .miniStats>div {
padding: 10px 8px;
}
#dreamz-pool .plantFacts {
gap: 8px;
}
#dreamz-pool .plantFacts>div {
padding: 10px;
}
#dreamz-pool .plantFacts strong {
font-size: 11px;
}
#dreamz-pool .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-pool .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-pool .utilityReadout span {
font-size: 8px;
}
#dreamz-pool .utilityReadout strong {
font-size: 24px;
}
#dreamz-pool .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-pool .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-pool .comparisonTable {
font-size: 11px;
}
#dreamz-pool .comparisonTable th,
#dreamz-pool .comparisonTable td {
padding: 13px 9px;
}
#dreamz-pool .contextSection {
padding: 0 0 22px;
}
#dreamz-pool .valueCtaSection {
padding: 25px 0;
}
#dreamz-pool .inlineCtaActions {
flex-direction: column;
}
#dreamz-pool .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-pool .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-pool .phoneDevice {
width: 222px;
}
#dreamz-pool .phoneDevice .rowIcon {
display: grid;
}
#dreamz-pool .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-pool .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-pool .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-pool .sideTile p {
margin: 0;
}
#dreamz-pool .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-pool .dataRow {
gap: 8px;
}
#dreamz-pool .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-pool .miniStats strong {
font-size: 19px;
}
#dreamz-pool .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-pool .heroActions .button {
width: 100%;
}
#dreamz-pool .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-pool .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-pool .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-pool .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-pool .aiStep span {
font-size: 13px;
}
#dreamz-pool .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-pool {
background: var(--white);
}
#dreamz-pool img {
display: block;
max-width: 100%;
}
#dreamz-pool h1,
#dreamz-pool h2,
#dreamz-pool h3 {
text-wrap: balance;
}
#dreamz-pool .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-pool .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-pool .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-pool .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-pool .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-pool .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-pool .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-pool .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-pool .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-pool .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-pool .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-pool .industryIntro {
padding: 78px 0 66px;
}
#dreamz-pool .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-pool .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-pool .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-pool .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-pool .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-pool .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-pool .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-pool .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-pool .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-pool .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-pool .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-pool .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-pool .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-pool .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-pool .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-pool .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-pool .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-pool .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-pool .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-pool .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-pool .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-pool .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-pool .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-pool .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-pool .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-pool .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-pool .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-pool .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-pool .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-pool .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-pool .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-pool .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-pool .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-pool .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-pool .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-pool .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-pool .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-pool .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-pool .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-pool .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-pool .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-pool .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-pool .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-pool .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-pool .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-pool .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-pool .rfidSpotlight {
background: #fff;
}
#dreamz-pool .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-pool .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-pool .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-pool .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-pool .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-pool .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-pool .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-pool .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-pool .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-pool .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-pool .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-pool .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-pool .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-pool .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-pool .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-pool .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-pool .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-pool .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-pool .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-pool .featurePanel {
display: none;
}
#dreamz-pool .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-pool .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-pool .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-pool .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-pool .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-pool .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-pool .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-pool .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-pool .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-pool .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-pool .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-pool .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-pool .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-pool .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-pool .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-pool .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-pool .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-pool .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-pool .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-pool .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-pool .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-pool .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-pool .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-pool .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-pool .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-pool .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-pool .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-pool .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-pool .aiReviewBody {
padding: 18px;
}
#dreamz-pool .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-pool .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-pool .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-pool .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-pool .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-pool .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-pool .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-pool .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-pool .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-pool .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-pool .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-pool .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-pool .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-pool .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-pool .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-pool .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-pool .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-pool .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-pool .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-pool .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-pool .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-pool .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-pool .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-pool .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-pool .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-pool .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-pool .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-pool .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-pool .workflowDetails .featureList,
#dreamz-pool .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-pool .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-pool .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-pool .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-pool #pool-connected-tools {
background: #fff;
}
#dreamz-pool #pool-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-pool .featureTab,
#dreamz-pool .industryPriority,
#dreamz-pool summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-pool .industryIntroHead {
gap: 30px;
}
#dreamz-pool .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-pool .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-pool .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-pool .factoryWorkflow {
padding: 22px;
}
#dreamz-pool .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-pool .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-pool .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-pool .industryPriorityGrid {
gap: 14px;
}
#dreamz-pool .industryPriority {
padding: 22px 19px;
}
#dreamz-pool .industryPriority h3 {
font-size: 21px;
}
#dreamz-pool .industryPriority p {
font-size: 12px;
}
#dreamz-pool .priorityLink {
font-size: 10px;
}
#dreamz-pool .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-pool .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-pool .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-pool .vedaUseCases>div {
display: block;
}
#dreamz-pool .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-pool .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-pool .featureTabs {
gap: 8px;
}
#dreamz-pool .featureTab {
min-height: 108px;
}
#dreamz-pool .featureStage,
#dreamz-pool .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-pool .rfidSpotlight .spotlightMedia,
#dreamz-pool .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-pool .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-pool .featurePanel {
min-height: 0;
}
#dreamz-pool .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-pool .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-pool .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-pool .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-pool .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-pool .clientBand {
padding: 22px 0;
}
#dreamz-pool .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-pool .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-pool .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-pool .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-pool .industryIntro {
padding: 53px 0;
}
#dreamz-pool .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-pool .industryIntroHead>p {
font-size: 14px;
}
#dreamz-pool .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .industryPriority {
padding: 23px;
}
#dreamz-pool .industryPriority h3 {
font-size: 24px;
}
#dreamz-pool .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-pool .industryPriority p {
font-size: 13px;
}
#dreamz-pool .priorityLink {
font-size: 11px;
}
#dreamz-pool .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-pool .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-pool .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-pool .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-pool .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-pool .vedaUseCases>div {
display: flex;
}
#dreamz-pool .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-pool .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-pool .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-pool .vedaMessage.user {
margin-left: 25px;
}
#dreamz-pool .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-pool .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-pool .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-pool .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-pool .spotlightHead h2 {
font-size: 32px;
}
#dreamz-pool .spotlightHead>p {
font-size: 14px;
}
#dreamz-pool .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-pool .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-pool .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-pool .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-pool .featurePanel h3 {
font-size: 24px;
}
#dreamz-pool .featurePanel>p {
font-size: 13px;
}
#dreamz-pool .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-pool .spotlightChecks>li {
font-size: 12px;
}
#dreamz-pool .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-pool .spotlightActions .button {
width: 100%;
}
#dreamz-pool .spotlightScope {
font-size: 10px;
}
#dreamz-pool .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-pool .mediaTitle strong {
font-size: 11px;
}
#dreamz-pool .mediaTitle div>span {
font-size: 8px;
}
#dreamz-pool .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-pool .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-pool .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-pool .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-pool .aiReviewBody {
padding: 13px;
}
#dreamz-pool .aiIssue {
padding: 13px;
}
#dreamz-pool .aiIssue strong {
font-size: 14px;
}
#dreamz-pool .aiEvidence {
gap: 6px;
}
#dreamz-pool .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-pool .aiEvidence strong {
font-size: 9px;
}
#dreamz-pool .aiEvidence span {
font-size: 7px;
}
#dreamz-pool .exampleLabel {
font-size: 6px;
}
#dreamz-pool .factoryWorkflows {
padding: 55px 0;
}
#dreamz-pool .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-pool .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-pool .industryRibbonGrid {
gap: 12px;
}
#dreamz-pool .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-pool .spotlightHead h2 {
font-size: 29px;
}
#dreamz-pool .featureStage {
padding: 19px 13px;
}
#dreamz-pool .mediaTitle>.icon {
display: none;
}
#dreamz-pool .exampleLabel {
display: none;
}
#dreamz-pool .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-pool .featureTabs {
display: none;
}
#dreamz-pool .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-pool .featureStage {
display: block;
}
#dreamz-pool .featurePanel {
color: #000;
}
}
#dreamz-pool #pool-delivery-features-1:checked~.featureTabs label[for="pool-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-delivery-features-1:focus-visible~.featureTabs label[for="pool-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-pool #pool-delivery-features-2:checked~.featureTabs label[for="pool-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-delivery-features-2:focus-visible~.featureTabs label[for="pool-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-pool #pool-delivery-features-3:checked~.featureTabs label[for="pool-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-delivery-features-3:focus-visible~.featureTabs label[for="pool-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-pool #pool-delivery-features-4:checked~.featureTabs label[for="pool-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-delivery-features-4:focus-visible~.featureTabs label[for="pool-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-pool #pool-delivery-features-5:checked~.featureTabs label[for="pool-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-delivery-features-5:focus-visible~.featureTabs label[for="pool-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-pool #pool-rfid-features-1:checked~.featureTabs label[for="pool-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-rfid-features-1:focus-visible~.featureTabs label[for="pool-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-pool #pool-rfid-features-2:checked~.featureTabs label[for="pool-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-rfid-features-2:focus-visible~.featureTabs label[for="pool-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-pool #pool-rfid-features-3:checked~.featureTabs label[for="pool-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-rfid-features-3:focus-visible~.featureTabs label[for="pool-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-pool #pool-rfid-features-4:checked~.featureTabs label[for="pool-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-rfid-features-4:focus-visible~.featureTabs label[for="pool-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-pool #pool-rfid-features-5:checked~.featureTabs label[for="pool-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-rfid-features-5:focus-visible~.featureTabs label[for="pool-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-1:checked~.featureTabs label[for="pool-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-ai-decisions-features-1:focus-visible~.featureTabs label[for="pool-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-2:checked~.featureTabs label[for="pool-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-ai-decisions-features-2:focus-visible~.featureTabs label[for="pool-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-3:checked~.featureTabs label[for="pool-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-ai-decisions-features-3:focus-visible~.featureTabs label[for="pool-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-4:checked~.featureTabs label[for="pool-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-ai-decisions-features-4:focus-visible~.featureTabs label[for="pool-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-5:checked~.featureTabs label[for="pool-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-pool #pool-ai-decisions-features-5:focus-visible~.featureTabs label[for="pool-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-pool #pool-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-pool .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .featureMediaPanels {
min-width: 0;
}
#dreamz-pool .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-pool .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-pool .featureMediaPanels .windowTop strong,
#dreamz-pool .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-pool .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-pool .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-pool .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-pool .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-pool .featureMediaPanels .windowBody>*,
#dreamz-pool .featureMediaPanels .spectrumGrid>*,
#dreamz-pool .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-pool .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-pool .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-pool .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-pool .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-pool .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-pool .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-pool .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-pool .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-pool .pin2 {
top: 88px;
right: 88px;
}
#dreamz-pool .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-pool .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-pool .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-pool .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-pool .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-pool .featureMediaPanels .graphNodes .node.n1,
#dreamz-pool .featureMediaPanels .graphNodes .node.n2,
#dreamz-pool .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-pool .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-pool .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-pool .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-pool .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-pool .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-pool .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-pool .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-pool .freshGraphic * {
box-sizing: border-box;
}
#dreamz-pool .rfPanel,
#dreamz-pool .aiInsightCard,
#dreamz-pool .forecastVisualCard,
#dreamz-pool .forecastSuggestion,
#dreamz-pool .knowledgeTile,
#dreamz-pool .chatConversation,
#dreamz-pool .trainingSummary,
#dreamz-pool .moduleCard,
#dreamz-pool .qualityHeatCard,
#dreamz-pool .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-pool .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-pool .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-pool .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-pool .statusPill,
#dreamz-pool .cardTag,
#dreamz-pool .forecastSuggestion b,
#dreamz-pool .moduleCard b,
#dreamz-pool .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-pool .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-pool .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-pool .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-pool .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-pool .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-pool .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-pool .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-pool .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-pool .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-pool .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-pool .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-pool .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-pool .dot.good {
background: #298EEC;
}
#dreamz-pool .dot.warn {
background: #F4A62A;
}
#dreamz-pool .dot.bad {
background: #EB6B53;
}
#dreamz-pool .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-pool .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-pool .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-pool .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-pool .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-pool .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-pool .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-pool .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-pool .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-pool .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-pool .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-pool .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-pool .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-pool .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-pool .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-pool .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-pool .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-pool .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-pool .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-pool .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-pool .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-pool .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-pool .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-pool .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-pool .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-pool .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-pool .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-pool .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-pool .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-pool .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-pool .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-pool .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-pool .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-pool .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-pool .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-pool .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-pool .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-pool .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-pool .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-pool .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-pool .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-pool .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-pool .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-pool .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-pool .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-pool .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-pool .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-pool .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-pool .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-pool .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-pool .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-pool .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-pool .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-pool .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-pool .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-pool .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-pool .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-pool .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-pool .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-pool .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-pool .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-pool .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-pool .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-pool .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-pool .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-pool .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-pool .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-pool .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-pool .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-pool .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-pool .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-pool .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-pool .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-pool .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-pool .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-pool .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-pool .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-pool .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-pool .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-pool .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-pool .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-pool .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-pool .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-pool .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-pool .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-pool .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-pool .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-pool .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-pool .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-pool .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-pool .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-pool .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-pool .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-pool .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-pool .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-pool .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-pool .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-pool .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-pool .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-pool .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-pool .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-pool .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-pool .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-pool .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-pool .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-pool .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-pool .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-pool .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-pool .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-pool .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-pool .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-pool .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-pool .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-pool .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-pool .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-pool .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-pool .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-pool .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-pool .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-pool .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-pool .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-pool .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-pool .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-pool .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-pool .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-pool .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-pool .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-pool .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-pool .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-pool .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-pool .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-pool .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-pool .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-pool .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-pool .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-pool .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-pool .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-pool .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-pool .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-pool .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-pool .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-pool .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-pool .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-pool .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-pool .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-pool .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-pool .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-pool .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-pool .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-pool .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-pool .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-pool .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-pool .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-pool .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-pool .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-pool .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-pool .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-pool .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-pool .rfTrackLayout,
#dreamz-pool .rfFlowLayout,
#dreamz-pool .rfAlertGrid,
#dreamz-pool .rfCycleLayout,
#dreamz-pool .rfSitesLayout,
#dreamz-pool .aiRootLayout,
#dreamz-pool .aiForecastLayout,
#dreamz-pool .aiChatLayout,
#dreamz-pool .aiTrainingLayout,
#dreamz-pool .aiQualityLayout,
#dreamz-pool .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-pool .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-pool .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-pool .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-pool .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-pool .aiLink {
display: none;
}
}
#dreamz-pool .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-pool .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-pool .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-pool .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-pool .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-pool .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-pool .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-pool .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-pool .mfgHero h1 {
color: #fff;
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-pool .mfgHero h1>span {
display: block;
}
#dreamz-pool .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-pool .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-pool .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-pool .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-pool .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-pool .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-pool .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-pool .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-pool .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-pool .mfgHeroContent {
min-height: 610px;
}
#dreamz-pool .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-pool .mfgHeroLead {
font-size: 16px;
}
#dreamz-pool .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-pool .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-pool .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-pool .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-pool .mfgHero h1 {
max-width: 620px;
}
#dreamz-pool .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-pool .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-pool .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-pool .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-pool .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-pool .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-pool .mfgHero h1 {
line-height: 1.12;
}
#dreamz-pool .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-pool .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-pool .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-pool .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-pool .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-pool .mfgHero {
background: #fff;
color: #000;
}
#dreamz-pool .mfgHeroScene,
#dreamz-pool .mfgHeroActions {
display: none;
}
#dreamz-pool .mfgHeroContent {
min-height: 0;
}
#dreamz-pool .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-pool .mfgHero h1,
#dreamz-pool .mfgHero h1 .mfgHeroAccent,
#dreamz-pool .mfgHero p {
color: #000;
}
}
#dreamz-pool #pool-rfid .featureStage,
#dreamz-pool #pool-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-pool .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-pool .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-pool .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-pool .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-pool .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-pool .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-pool .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-pool .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-pool .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-pool .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-pool .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-pool .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-pool .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-pool .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-pool .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-pool .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-pool .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-pool .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-pool .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-pool .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-pool .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-pool .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-pool .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-pool .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-pool .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-pool .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-pool .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-pool .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-pool .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-pool .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-pool .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-pool .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-pool .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-pool .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-pool .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-pool .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-pool .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-pool .mfgGallery .flowArrow {
display: none;
}
#dreamz-pool .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-pool .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-pool .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-pool .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-pool .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-pool .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-pool .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-pool .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-pool .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-pool .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-pool .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-pool .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-pool .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-pool .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-pool .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-pool .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-pool .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-pool .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-pool .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-pool .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-pool .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-pool .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-pool .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-pool .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-pool .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-pool .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-pool .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-pool .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-pool .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-pool .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-pool .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-pool .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-pool .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-pool .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-pool .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-pool .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-pool .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-pool .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-pool .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-pool .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-pool .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-pool .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-pool .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-pool .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-pool .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-pool .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-pool .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-pool .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-pool .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-pool .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-pool .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-pool .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-pool .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-pool .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-pool .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-pool .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-pool .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-pool .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-pool .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-pool .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-pool .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-pool .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-pool .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-pool .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-pool .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-pool .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-pool .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-pool .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-pool .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-pool .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-pool .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-pool .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-pool .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-pool .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-pool .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-pool .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-pool .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-pool .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-pool .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-pool .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-pool .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-pool .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-pool .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-pool .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-pool .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-pool .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-pool .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-pool .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-pool .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-pool .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-pool .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-pool .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-pool .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-pool .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-pool #pool-rfid .featureStage,
#dreamz-pool #pool-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-pool #pool-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-pool .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-pool #pool-rfid .featureStage,
#dreamz-pool #pool-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-pool .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-pool .mfgGallery .freshWindow {
height: auto;
}
#dreamz-pool .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-pool .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-pool .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-pool .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-pool .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-pool .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-pool .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-pool .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-pool .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-pool .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-pool .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-pool .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-pool .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-pool .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-pool .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-pool .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-pool .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-pool .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-pool .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-pool .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-pool .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-pool .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-pool .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-pool .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-pool .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-pool .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-pool .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-pool .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-pool .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-pool .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-pool .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-pool .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-pool .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-pool .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-pool .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-pool .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-pool .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-pool .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-pool .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-pool .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-pool .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-pool .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-pool .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-pool .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-pool .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-pool .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-pool .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-pool .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-pool .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-pool .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-pool .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-pool .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-pool .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-pool .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-pool .poolVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-pool .poolGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-pool .poolVisualGallery>.poolGraphic {
display: none;
}
#dreamz-pool #pool-delivery .featureStage,
#dreamz-pool #pool-rfid .featureStage,
#dreamz-pool #pool-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-pool #pool-rfid .poolVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-pool #pool-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-pool .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-pool .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-pool .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-pool .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
}
@media (max-width:1100px) {
#dreamz-pool #pool-delivery .featureStage,
#dreamz-pool #pool-rfid .featureStage,
#dreamz-pool #pool-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-pool #pool-rfid .poolVisualGallery,
#dreamz-pool #pool-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-pool .mfgHeroScene {
height: 290px;
}
#dreamz-pool #pool-delivery .featureStage,
#dreamz-pool #pool-rfid .featureStage,
#dreamz-pool #pool-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-pool .poolVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-pool .poolVisualGallery>.poolGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-pool #pool-delivery-features-1:checked~.featureStage .poolVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-pool #pool-delivery-features-2:checked~.featureStage .poolVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-pool #pool-delivery-features-3:checked~.featureStage .poolVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-pool #pool-delivery-features-4:checked~.featureStage .poolVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-pool #pool-delivery-features-5:checked~.featureStage .poolVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-pool #pool-rfid-features-1:checked~.featureStage .poolVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-pool #pool-rfid-features-2:checked~.featureStage .poolVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-pool #pool-rfid-features-3:checked~.featureStage .poolVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-pool #pool-rfid-features-4:checked~.featureStage .poolVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-pool #pool-rfid-features-5:checked~.featureStage .poolVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-1:checked~.featureStage .poolVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-2:checked~.featureStage .poolVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-3:checked~.featureStage .poolVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-4:checked~.featureStage .poolVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-pool #pool-ai-decisions-features-5:checked~.featureStage .poolVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-pool .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-pool .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-pool .poolIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-pool .poolGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-pool .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-pool .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-pool .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-pool .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
}
#dreamz-pool .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-pool .poolIllustration {
width: 100%;
height: auto;
aspect-ratio: 620 / 460;
display: block;
overflow: visible;
}
#dreamz-pool .poolGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
height: auto;
overflow: visible;
}
#dreamz-pool .poolVisualGallery {
min-height: 0;
}
#dreamz-pool .poolIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 90% 50%;
}
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620 / 460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
margin: 0;
padding: 0;
border: 0;
min-height: 0;
height: auto;
background: transparent;
overflow: visible;
}
#dreamz-pool .poolVisualGallery {
min-height: 0;
}
#dreamz-pool .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-pool .poolIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-pool .poolGraphic svg {
box-shadow: none;
}
@media (max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media (max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 83% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 86% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 76% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 87% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 87% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 76% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-pool #pool-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 88% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 77% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-pool #pool-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 86% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 85% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-pool #pool-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-pool #pool-billing .featureNote {
font-size: 12px;
line-height: 1.7;
margin-top: 20px;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 84% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
}
#dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 82% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
} #dreamz-pool .mfgHeroContent {
background: transparent;
}
#dreamz-pool .mfgHeroScene img {
object-position: 76% 50%;
}
#dreamz-pool .poolIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-pool .poolGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
@media(max-width:1180px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
}
@media(max-width:600px) {
#dreamz-pool .mfgHeroScene img {
object-position: 80% 50%;
}
}
@media (max-width: 767px) {
#dreamz-pool .mfgHeroScene {
display: none;
}
}  #dreamz-outdoor .industryIntroHead.compact,
#dreamz-outdoor .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-outdoor .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-outdoor .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-outdoor .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-outdoor .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-outdoor .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-outdoor .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-outdoor .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-outdoor .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-outdoor .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-outdoor .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-outdoor .windowDots {
display: flex;
gap: 5px;
}
#dreamz-outdoor .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-outdoor .windowBody {
padding: 16px;
}
#dreamz-outdoor .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-outdoor .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-outdoor .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-outdoor .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-outdoor .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-outdoor .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-outdoor .chartGridLine.l1 {
top: 34px;
}
#dreamz-outdoor .chartGridLine.l2 {
top: 65px;
}
#dreamz-outdoor .chartGridLine.l3 {
top: 96px;
}
#dreamz-outdoor .chartGridLine.l4 {
top: 127px;
}
#dreamz-outdoor .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-outdoor .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-outdoor .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-outdoor .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-outdoor .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-outdoor .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-outdoor .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-outdoor .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-outdoor .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-outdoor .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-outdoor .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-outdoor .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-outdoor .noteCard p,
#dreamz-outdoor .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-outdoor .alertStack {
display: grid;
gap: 10px;
}
#dreamz-outdoor .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-outdoor .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-outdoor .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-outdoor .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-outdoor .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-outdoor .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-outdoor .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-outdoor .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-outdoor .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-outdoor .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-outdoor .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-outdoor .scheduleBoard h4,
#dreamz-outdoor .todoBoard h4,
#dreamz-outdoor .siteBoard h4,
#dreamz-outdoor .chatPanel h4,
#dreamz-outdoor .lessonPanel h4,
#dreamz-outdoor .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-outdoor .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-outdoor .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-outdoor .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-outdoor .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-outdoor .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-outdoor .taskRow:last-child {
border-bottom: 0;
}
#dreamz-outdoor .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-outdoor .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-outdoor .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-outdoor .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-outdoor .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-outdoor .inventoryTable th,
#dreamz-outdoor .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-outdoor .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-outdoor .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-outdoor .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-outdoor .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-outdoor .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-outdoor .phoneBody {
padding: 12px;
}
#dreamz-outdoor .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-outdoor .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-outdoor .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-outdoor .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-outdoor .progressList {
display: grid;
gap: 10px;
}
#dreamz-outdoor .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-outdoor .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-outdoor .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-outdoor .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-outdoor .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-outdoor .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-outdoor .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-outdoor .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-outdoor .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-outdoor .pin1 {
top: 56px;
left: 58px;
}
#dreamz-outdoor .pin2 {
top: 88px;
right: 88px;
}
#dreamz-outdoor .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-outdoor .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-outdoor .siteRow:last-child {
border-bottom: 0;
}
#dreamz-outdoor .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-outdoor .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-outdoor .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-outdoor .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-outdoor .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-outdoor .graphNodes:before,
#dreamz-outdoor .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-outdoor .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-outdoor .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-outdoor .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-outdoor .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-outdoor .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-outdoor .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-outdoor .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-outdoor .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-outdoor .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-outdoor .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-outdoor .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-outdoor .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-outdoor .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-outdoor .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-outdoor .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-outdoor .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-outdoor .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-outdoor .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-outdoor .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-outdoor .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-outdoor .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-outdoor .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-outdoor .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-outdoor .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-outdoor .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-outdoor .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-outdoor .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-outdoor .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-outdoor .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-outdoor .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-outdoor .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-outdoor .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-outdoor .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-outdoor #outdoor-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-outdoor #outdoor-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-outdoor #outdoor-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-outdoor #outdoor-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-outdoor #outdoor-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-outdoor #outdoor-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-outdoor #outdoor-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-outdoor #outdoor-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-outdoor #outdoor-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-outdoor #outdoor-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-outdoor #outdoor-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-outdoor #outdoor-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-outdoor #outdoor-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-outdoor #outdoor-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-outdoor #outdoor-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-outdoor #outdoor-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-outdoor #outdoor-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-outdoor #outdoor-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-outdoor #outdoor-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-outdoor #outdoor-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-outdoor #outdoor-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-outdoor #outdoor-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-outdoor #outdoor-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-outdoor #outdoor-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-outdoor #outdoor-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-outdoor #outdoor-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-outdoor #outdoor-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-outdoor #outdoor-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-outdoor #outdoor-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-outdoor .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-outdoor .featureMediaPanels {
min-height: 0;
}
#dreamz-outdoor .inventorySplit,
#dreamz-outdoor .forecastGrid,
#dreamz-outdoor .siteGrid,
#dreamz-outdoor .spectrumGrid,
#dreamz-outdoor .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-outdoor .metricGrid,
#dreamz-outdoor .lessonCards,
#dreamz-outdoor .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-outdoor .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-outdoor {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-outdoor * {
box-sizing: border-box;
}
#dreamz-outdoor {
scroll-behavior: smooth;
}
#dreamz-outdoor {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-outdoor a {
color: inherit;
text-decoration: none;
}
#dreamz-outdoor .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-outdoor .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-outdoor .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-outdoor .brand span {
color: var(--brand);
}
#dreamz-outdoor .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-outdoor .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-outdoor .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-outdoor .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-outdoor .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-outdoor .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-outdoor .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-outdoor .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-outdoor h1,
#dreamz-outdoor h2,
#dreamz-outdoor h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -.035em;
}
#dreamz-outdoor h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
#dreamz-outdoor h2 {
font-size: clamp(32px, 4.3vw, 50px);
}
#dreamz-outdoor h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-outdoor .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-outdoor .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-outdoor .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-outdoor .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-outdoor .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-outdoor .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-outdoor .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-outdoor .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-outdoor .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-outdoor .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-outdoor .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-outdoor .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-outdoor .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-outdoor .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-outdoor .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-outdoor .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-outdoor .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-outdoor .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-outdoor .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-outdoor .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-outdoor .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-outdoor .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-outdoor .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-outdoor .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-outdoor .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-outdoor .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-outdoor .sectionHead {
margin-bottom: 44px;
}
#dreamz-outdoor .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-outdoor .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-outdoor .aiJourney h2 {
color: #fff;
}
#dreamz-outdoor .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-outdoor .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-outdoor .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-outdoor .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-outdoor .aiStep:last-child::after {
display: none;
}
#dreamz-outdoor .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-outdoor .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-outdoor .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-outdoor .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-outdoor .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-outdoor .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-outdoor .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-outdoor .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-outdoor .capability {
background: #fff;
}
#dreamz-outdoor .capability.alt {
background: var(--sky-2);
}
#dreamz-outdoor .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-outdoor .twoCol.reverse .visual {
order: 2;
}
#dreamz-outdoor .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-outdoor .visual .placeholder {
min-height: 355px;
}
#dreamz-outdoor .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-outdoor .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-outdoor details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-outdoor details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-outdoor details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-outdoor details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-outdoor details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-outdoor details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-outdoor .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-outdoor .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-outdoor .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-outdoor .darkSection h2,
#dreamz-outdoor .darkSection h3 {
color: #fff;
}
#dreamz-outdoor .darkSection .sectionHead p,
#dreamz-outdoor .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-outdoor .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-outdoor .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-outdoor .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-outdoor .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-outdoor .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-outdoor .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-outdoor .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-outdoor .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-outdoor .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-outdoor .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-outdoor .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-outdoor .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-outdoor .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-outdoor .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-outdoor .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-outdoor .benefitBand h2 {
color: #fff;
}
#dreamz-outdoor .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-outdoor .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-outdoor .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-outdoor .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-outdoor .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-outdoor .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-outdoor .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-outdoor .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-outdoor .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-outdoor .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-outdoor .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-outdoor .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-outdoor .faq {
max-width: 900px;
}
#dreamz-outdoor .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-outdoor .ctaPanel h2 {
color: #fff;
}
#dreamz-outdoor .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-outdoor .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-outdoor .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-outdoor .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-outdoor .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-outdoor .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-outdoor .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-outdoor .inlineCta.dark h3 {
color: #fff;
}
#dreamz-outdoor .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-outdoor .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-outdoor .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-outdoor .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-outdoor .button.yellow:hover {
background: #FFD84D;
}
#dreamz-outdoor .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-outdoor .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-outdoor .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-outdoor .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-outdoor footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-outdoor .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-outdoor .heroGrid,
#dreamz-outdoor .twoCol,
#dreamz-outdoor .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-outdoor .twoCol.reverse .visual {
order: initial;
}
#dreamz-outdoor .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-outdoor .ratingGrid,
#dreamz-outdoor .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-outdoor .ratingLead,
#dreamz-outdoor .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-outdoor .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-outdoor .aiStep:nth-child(3)::after,
#dreamz-outdoor .aiStep:last-child::after {
display: none;
}
#dreamz-outdoor .outcomeGrid,
#dreamz-outdoor .challengeGrid,
#dreamz-outdoor .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-outdoor .cards,
#dreamz-outdoor .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-outdoor .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-outdoor .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-outdoor .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-outdoor .hero {
padding: 58px 0 52px;
}
#dreamz-outdoor h1 {
font-size: 44px;
}
#dreamz-outdoor .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-outdoor .aiStep::after {
display: none;
}
#dreamz-outdoor .logoRow,
#dreamz-outdoor .ratingGrid,
#dreamz-outdoor .awardGrid,
#dreamz-outdoor .outcomeGrid,
#dreamz-outdoor .challengeGrid,
#dreamz-outdoor .benefitGrid,
#dreamz-outdoor .cards,
#dreamz-outdoor .proofCards,
#dreamz-outdoor .integrationGrid,
#dreamz-outdoor .featureList {
grid-template-columns: 1fr;
}
#dreamz-outdoor .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-outdoor .ctaPanel {
padding: 34px 24px;
}
#dreamz-outdoor .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-outdoor .inlineCtaActions {
width: 100%;
}
#dreamz-outdoor .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-outdoor {
--muted: #526A7C;
--shadow: none;
}
#dreamz-outdoor {
background: var(--sky-2);
}
#dreamz-outdoor p {
margin-bottom: 0;
}
#dreamz-outdoor [id] {
scroll-margin-top: 94px;
}
#dreamz-outdoor svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-outdoor .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: none;
}
#dreamz-outdoor .darkSection h2,
#dreamz-outdoor .darkSection h3,
#dreamz-outdoor .aiJourney h2,
#dreamz-outdoor .benefitBand h2,
#dreamz-outdoor .ctaPanel h2,
#dreamz-outdoor .inlineCta.dark h3 {
color: #fff;
}
#dreamz-outdoor .wrap>*,
#dreamz-outdoor .heroGrid>*,
#dreamz-outdoor .twoCol>*,
#dreamz-outdoor .ctaPanel>* {
min-width: 0;
}
#dreamz-outdoor .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-outdoor .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-outdoor .skipLink:focus {
transform: none;
}
#dreamz-outdoor a:focus-visible,
#dreamz-outdoor summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-outdoor .darkSection a:focus-visible,
#dreamz-outdoor .darkSection summary:focus-visible,
#dreamz-outdoor .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-outdoor .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-outdoor .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-outdoor .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-outdoor .brandName>span {
color: var(--brand-dark);
}
#dreamz-outdoor .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-outdoor .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-outdoor .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-outdoor .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-outdoor .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-outdoor .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-outdoor .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-outdoor .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-outdoor .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-outdoor .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-outdoor .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-outdoor .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-outdoor .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-outdoor .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-outdoor .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-outdoor .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-outdoor .clientBand {
padding: 27px 0;
}
#dreamz-outdoor .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-outdoor .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-outdoor .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-outdoor .logoBox.wide {
font-size: 12px;
}
#dreamz-outdoor .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-outdoor h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-outdoor .sectionHead {
margin-bottom: 36px;
}
#dreamz-outdoor .eyebrow {
line-height: 1.5;
}
#dreamz-outdoor .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-outdoor .aiStep {
min-height: 162px;
}
#dreamz-outdoor .aiStep strong {
line-height: 1.35;
}
#dreamz-outdoor .aiStep span {
line-height: 1.65;
}
#dreamz-outdoor .aiCallout {
margin-top: 24px;
}
#dreamz-outdoor .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-outdoor .outcome>.icon {
color: var(--navy);
}
#dreamz-outdoor .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-outdoor .awardItem>.icon {
color: var(--navy);
}
#dreamz-outdoor .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-outdoor .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-outdoor .twoCol.reverse .visual {
order: -1;
}
#dreamz-outdoor .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-outdoor .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-outdoor .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-outdoor .featureList {
gap: 13px 18px;
}
#dreamz-outdoor .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-outdoor .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-outdoor .check .icon {
width: 14px;
height: 14px;
}
#dreamz-outdoor details.capabilityMore {
margin-bottom: 0;
}
#dreamz-outdoor .capabilityMore summary {
min-height: 34px;
}
#dreamz-outdoor .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-outdoor .textCta {
font-size: 14px;
}
#dreamz-outdoor .visual {
min-width: 0;
}
#dreamz-outdoor .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-outdoor .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-outdoor .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-outdoor .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-outdoor .panelBody {
padding: 20px;
}
#dreamz-outdoor .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-outdoor .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-outdoor .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-outdoor .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-outdoor .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-outdoor .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-outdoor .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-outdoor .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-outdoor .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-outdoor .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-outdoor .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-outdoor .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-outdoor .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-outdoor .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-outdoor .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-outdoor .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-outdoor .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-outdoor .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-outdoor .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-outdoor .dataRow:last-child {
border-bottom: 0;
}
#dreamz-outdoor .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-outdoor .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-outdoor .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-outdoor .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-outdoor .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-outdoor .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-outdoor .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-outdoor .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-outdoor .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-outdoor .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-outdoor .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-outdoor .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-outdoor .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-outdoor .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-outdoor .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-outdoor .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-outdoor .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-outdoor .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-outdoor .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-outdoor .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-outdoor .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-outdoor .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-outdoor .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-outdoor .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-outdoor .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-outdoor .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-outdoor .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-outdoor .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-outdoor .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-outdoor .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-outdoor .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-outdoor .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-outdoor .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-outdoor .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-outdoor .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-outdoor .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-outdoor .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-outdoor .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-outdoor .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-outdoor .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-outdoor .promptList {
display: grid;
gap: 10px;
}
#dreamz-outdoor .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-outdoor .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-outdoor .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-outdoor .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-outdoor .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-outdoor .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-outdoor .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-outdoor .quoteTable th,
#dreamz-outdoor .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-outdoor .quoteTable td:first-child {
width: 64%;
}
#dreamz-outdoor .quoteTable th:last-child,
#dreamz-outdoor .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-outdoor .quoteTable strong {
font-size: 11px;
}
#dreamz-outdoor .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-outdoor .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-outdoor .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-outdoor .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-outdoor .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-outdoor .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-outdoor .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-outdoor .orderJourney {
margin: 20px 0;
}
#dreamz-outdoor .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-outdoor .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-outdoor .journeyRow:last-child:before {
display: none;
}
#dreamz-outdoor .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-outdoor .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-outdoor .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-outdoor .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-outdoor .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-outdoor .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-outdoor .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-outdoor .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-outdoor .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-outdoor .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-outdoor .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-outdoor .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-outdoor .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-outdoor .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-outdoor .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-outdoor .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-outdoor .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-outdoor .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-outdoor .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-outdoor .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-outdoor .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-outdoor .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-outdoor .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-outdoor .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-outdoor .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-outdoor .customerTimeline strong {
color: #fff;
}
#dreamz-outdoor .customerTimeline small {
color: #BFBFBF;
}
#dreamz-outdoor .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-outdoor .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-outdoor .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-outdoor .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-outdoor .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-outdoor .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-outdoor .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-outdoor .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-outdoor .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-outdoor .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-outdoor .chartTitle strong {
font-size: 12px;
}
#dreamz-outdoor .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-outdoor .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-outdoor .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-outdoor .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-outdoor .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-outdoor .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-outdoor .inlineCtaActions {
max-width: 42%;
}
#dreamz-outdoor .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-outdoor .inlineCta h3 {
line-height: 1.35;
}
#dreamz-outdoor .card {
box-shadow: none;
}
#dreamz-outdoor .cardIcon {
box-shadow: none;
}
#dreamz-outdoor .card h3 {
font-size: 22px;
}
#dreamz-outdoor .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-outdoor .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-outdoor .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-outdoor .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-outdoor .ratingBand {
padding: 34px 0;
}
#dreamz-outdoor .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-outdoor .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-outdoor .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-outdoor .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-outdoor .ratingItem:first-child {
border-left: 0;
}
#dreamz-outdoor .proofCard h3 {
font-size: 23px;
}
#dreamz-outdoor .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-outdoor .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-outdoor .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-outdoor .integration {
min-height: 98px;
}
#dreamz-outdoor .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-outdoor .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-outdoor .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-outdoor .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-outdoor .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-outdoor .finalActions {
display: grid;
gap: 11px;
}
#dreamz-outdoor .finalActions .button {
white-space: nowrap;
}
#dreamz-outdoor .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-outdoor .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-outdoor .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-outdoor .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-outdoor .heroGrid {
gap: 30px;
}
#dreamz-outdoor .twoCol {
gap: 32px;
}
#dreamz-outdoor .panelBody {
padding: 16px;
}
#dreamz-outdoor .panelHead {
padding: 16px;
}
#dreamz-outdoor .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-outdoor .pipelineColumns {
gap: 7px;
}
#dreamz-outdoor .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-outdoor .heroGrid,
#dreamz-outdoor .twoCol,
#dreamz-outdoor .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .heroGrid {
gap: 36px;
}
#dreamz-outdoor .hero h1 {
max-width: 730px;
}
#dreamz-outdoor .hero .lead {
max-width: 690px;
}
#dreamz-outdoor .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-outdoor .twoCol {
gap: 34px;
}
#dreamz-outdoor .twoCol.reverse .visual {
order: initial;
}
#dreamz-outdoor .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-outdoor .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-outdoor .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-outdoor .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-outdoor .ratingSectionGrid {
gap: 20px;
}
#dreamz-outdoor .inlineCta {
align-items: flex-start;
}
#dreamz-outdoor .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-outdoor .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-outdoor .card {
padding: 22px;
}
#dreamz-outdoor .card h3 {
font-size: 21px;
}
#dreamz-outdoor .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-outdoor .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-outdoor .cards,
#dreamz-outdoor .proofCards {
grid-template-columns: 1fr;
}
#dreamz-outdoor .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-outdoor .inlineCta {
flex-direction: column;
}
#dreamz-outdoor .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-outdoor .inlineCtaActions .button {
flex: 1;
}
#dreamz-outdoor .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-outdoor .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-outdoor .wrap {
width: calc(100% - 32px);
}
#dreamz-outdoor [id] {
scroll-margin-top: 82px;
}
#dreamz-outdoor .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-outdoor .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-outdoor .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-outdoor .hero {
padding: 51px 0 48px;
}
#dreamz-outdoor .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-outdoor .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-outdoor .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-outdoor .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-outdoor .hero .microcopy {
font-size: 11px;
}
#dreamz-outdoor .heroPills span {
font-size: 9px;
}
#dreamz-outdoor .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-outdoor .sectionHead p {
font-size: 16px;
}
#dreamz-outdoor .copy h2 {
font-size: 34px;
}
#dreamz-outdoor .copy p {
font-size: 15px;
}
#dreamz-outdoor .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-outdoor .logoBox {
min-height: 53px;
}
#dreamz-outdoor .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-outdoor .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-outdoor .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-outdoor .aiStep strong {
font-size: 13px;
}
#dreamz-outdoor .aiStep span {
font-size: 11px;
}
#dreamz-outdoor .aiStep::after {
display: none;
}
#dreamz-outdoor .outcomeGrid,
#dreamz-outdoor .challengeGrid,
#dreamz-outdoor .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .outcome {
padding: 24px;
}
#dreamz-outdoor .outcome strong {
font-size: 22px;
}
#dreamz-outdoor .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-outdoor .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-outdoor .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-outdoor .featureList,
#dreamz-outdoor .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .featureItem {
font-size: 13px;
}
#dreamz-outdoor .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-outdoor .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-outdoor .panelHead {
padding: 15px 13px;
}
#dreamz-outdoor .panelHead>strong {
font-size: 12px;
}
#dreamz-outdoor .panelBody {
padding: 14px;
}
#dreamz-outdoor .productPanel {
border-radius: 16px;
}
#dreamz-outdoor .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-outdoor .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-outdoor .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-outdoor .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-outdoor .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-outdoor .deal strong {
font-size: 10px;
}
#dreamz-outdoor .deal small {
font-size: 9px;
}
#dreamz-outdoor .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-outdoor .mobileWorkspace {
gap: 12px;
}
#dreamz-outdoor .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-outdoor .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-outdoor .sideTile {
padding: 10px;
}
#dreamz-outdoor .sideTile strong {
font-size: 10px;
}
#dreamz-outdoor .sideTile p {
font-size: 9px;
}
#dreamz-outdoor .mobileHeader strong {
font-size: 15px;
}
#dreamz-outdoor .mobileAccount strong {
font-size: 10px;
}
#dreamz-outdoor .mobileAccount small {
font-size: 7px;
}
#dreamz-outdoor .phoneDevice .rowIcon {
display: none;
}
#dreamz-outdoor .quoteTable th,
#dreamz-outdoor .quoteTable td {
padding: 12px 4px;
}
#dreamz-outdoor .quoteTable strong {
font-size: 10px;
}
#dreamz-outdoor .quoteTable small {
font-size: 8px;
}
#dreamz-outdoor .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-outdoor .docHeader strong {
font-size: 17px;
}
#dreamz-outdoor .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-outdoor .miniFlow span {
padding: 6px;
}
#dreamz-outdoor .rowCopy strong {
font-size: 10px;
}
#dreamz-outdoor .rowCopy small {
font-size: 8px;
}
#dreamz-outdoor .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-outdoor .miniStats {
gap: 7px;
}
#dreamz-outdoor .miniStats>div {
padding: 9px;
}
#dreamz-outdoor .miniStats strong {
font-size: 18px;
}
#dreamz-outdoor .miniStats span {
font-size: 8px;
}
#dreamz-outdoor .collectionStats>div {
padding: 13px;
}
#dreamz-outdoor .collectionStats strong {
font-size: 24px;
}
#dreamz-outdoor .customerHeader strong {
font-size: 17px;
}
#dreamz-outdoor .customerFacts>div {
padding: 10px;
}
#dreamz-outdoor .customerFacts strong {
font-size: 12px;
}
#dreamz-outdoor .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-outdoor .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-outdoor .ratingItem:last-child {
grid-column: 1/-1;
}
#dreamz-outdoor .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-outdoor .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-outdoor .integration small {
font-size: 9px;
}
#dreamz-outdoor .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-outdoor .ctaPanel p {
font-size: 15px;
}
#dreamz-outdoor .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-outdoor .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-outdoor .contextSection {
padding: 0 0 24px;
}
#dreamz-outdoor .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-outdoor .wrap {
width: calc(100% - 24px);
}
#dreamz-outdoor .brand {
font-size: 18px;
}
#dreamz-outdoor .brandMark {
width: 25px;
height: 25px;
}
#dreamz-outdoor .hero h1 {
font-size: 38px;
}
#dreamz-outdoor .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-outdoor .copy h2 {
font-size: 31px;
}
#dreamz-outdoor .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-outdoor .phoneDevice {
width: 210px;
}
#dreamz-outdoor .phoneDevice .rowIcon {
display: grid;
}
#dreamz-outdoor .mobileSide {
gap: 8px;
}
#dreamz-outdoor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-outdoor .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-outdoor .sideTile p {
margin: 0;
}
#dreamz-outdoor .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-outdoor .collectionStats strong {
font-size: 21px;
}
#dreamz-outdoor .inventoryIntro strong {
font-size: 14px;
}
#dreamz-outdoor .dataRow {
gap: 7px;
}
#dreamz-outdoor .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-outdoor .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-outdoor {
scroll-behavior: auto;
}
#dreamz-outdoor *,
#dreamz-outdoor *::before,
#dreamz-outdoor *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-outdoor {
background: var(--sky-2);
}
#dreamz-outdoor .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-outdoor .hero .eyebrow {
max-width: 100%;
}
#dreamz-outdoor .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-outdoor .ganttIllustration,
#dreamz-outdoor .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-outdoor .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-outdoor .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-outdoor .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-outdoor .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-outdoor .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-outdoor .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-outdoor .comparisonTable th,
#dreamz-outdoor .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .comparisonTable th:first-child {
width: 23%;
}
#dreamz-outdoor .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-outdoor .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-outdoor .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-outdoor .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-outdoor .card,
#dreamz-outdoor .proofCard,
#dreamz-outdoor .productPanel,
#dreamz-outdoor .outcome,
#dreamz-outdoor .benefit {
box-shadow: none;
}
#dreamz-outdoor .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-outdoor .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-outdoor .hero .eyebrow {
font-size: 10px;
}
#dreamz-outdoor .comparisonTable {
font-size: 11px;
}
#dreamz-outdoor .comparisonTable th,
#dreamz-outdoor .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-outdoor .comparisonTable th:first-child {
width: 24%;
}
#dreamz-outdoor .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-outdoor .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-outdoor .hero h1 {
font-size: 38px;
}
}
#dreamz-outdoor .scheduleIllustration,
#dreamz-outdoor .analyticsIllustration,
#dreamz-outdoor .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-outdoor .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-outdoor .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-outdoor .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-outdoor .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-outdoor .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-outdoor .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-outdoor .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-outdoor .darkSection .textCta {
color: var(--yellow);
}
#dreamz-outdoor .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-outdoor .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-outdoor .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-outdoor .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-outdoor .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-outdoor .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-outdoor .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-outdoor .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-outdoor .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-outdoor .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-outdoor .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-outdoor .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-outdoor .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-outdoor .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-outdoor .phoneDevice {
max-width: 100%;
}
#dreamz-outdoor .heroPills {
line-height: 1.55;
}
#dreamz-outdoor .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-outdoor .plantFacts {
gap: 7px;
}
#dreamz-outdoor .plantFacts>div {
padding: 9px;
}
#dreamz-outdoor .plantFacts strong {
font-size: 11px;
}
#dreamz-outdoor .scanSummary {
padding: 12px;
}
#dreamz-outdoor .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-outdoor .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-outdoor .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-outdoor .phoneDevice .rowIcon {
display: grid;
}
#dreamz-outdoor .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-outdoor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-outdoor .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-outdoor .sideTile strong {
font-size: 12px;
}
#dreamz-outdoor .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-outdoor .topbar,
#dreamz-outdoor .heroActions,
#dreamz-outdoor .finalActions,
#dreamz-outdoor .contextSection,
#dreamz-outdoor .valueCtaSection {
display: none;
}
#dreamz-outdoor section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-outdoor .hero {
padding-top: 20px;
}
}
#dreamz-outdoor {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-outdoor h1,
#dreamz-outdoor h2,
#dreamz-outdoor h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
#dreamz-outdoor p {
margin: 0;
}
#dreamz-outdoor main {
display: block;
}
#dreamz-outdoor .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-outdoor .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-outdoor .heroAccent {
color: var(--black);
}
#dreamz-outdoor .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-outdoor .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-outdoor .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-outdoor .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-outdoor .microcopy {
margin-top: 14px;
}
#dreamz-outdoor .heroPills {
margin-top: 13px;
}
#dreamz-outdoor .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-outdoor .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-outdoor .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-outdoor .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-outdoor .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-outdoor .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-outdoor .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-outdoor .clientBand {
padding: 24px 0;
}
#dreamz-outdoor .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-outdoor .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-outdoor .logoBox.wide {
font-size: 15px;
}
#dreamz-outdoor .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-outdoor .sectionHead p {
margin: 17px 0 0;
}
#dreamz-outdoor .copy p {
margin: 16px 0 0;
}
#dreamz-outdoor .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-outdoor .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-outdoor .aiJourney {
background: var(--black);
}
#dreamz-outdoor .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-outdoor .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-outdoor .productPanel {
border-radius: 18px;
}
#dreamz-outdoor .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-outdoor .panelHead>strong {
font-size: 13px;
}
#dreamz-outdoor .sampleTag {
font-size: 9px;
}
#dreamz-outdoor .panelBody {
padding: 21px;
}
#dreamz-outdoor .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-outdoor .docHeader {
padding-bottom: 16px;
}
#dreamz-outdoor .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-outdoor .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-outdoor .smallLabel {
font-size: 9px;
}
#dreamz-outdoor .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-outdoor .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-outdoor .dataRow {
padding: 14px 0;
}
#dreamz-outdoor .statusPill {
font-size: 8px;
}
#dreamz-outdoor .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-outdoor .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-outdoor .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-outdoor .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-outdoor .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-outdoor .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-outdoor .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-outdoor .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-outdoor .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-outdoor .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-outdoor .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-outdoor .hierarchy strong {
color: var(--navy);
}
#dreamz-outdoor .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-outdoor .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-outdoor .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-outdoor .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-outdoor .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-outdoor .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-outdoor .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-outdoor .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-outdoor .mobileAccount small {
font-size: 9px;
}
#dreamz-outdoor .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-outdoor .sideTile strong {
font-size: 12px;
}
#dreamz-outdoor .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-outdoor .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-outdoor .mobileAction {
font-size: 9px;
}
#dreamz-outdoor .journeyRow strong {
font-size: 13px;
}
#dreamz-outdoor .journeyRow small {
font-size: 11px;
}
#dreamz-outdoor .outdoorRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-outdoor .outdoorRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-outdoor .outdoorRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-outdoor .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-outdoor .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-outdoor .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-outdoor .utilityReadout small {
font-size: 12px;
}
#dreamz-outdoor .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-outdoor .darkSection {
background: var(--black);
}
#dreamz-outdoor .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-outdoor .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-outdoor .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-outdoor .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-outdoor .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-outdoor .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-outdoor .assistantHead small {
font-size: 11px;
}
#dreamz-outdoor .assistantNote {
font-size: 11px;
}
#dreamz-outdoor .reportTags span {
font-size: 10px;
}
#dreamz-outdoor .card p {
margin: 12px 0 0;
}
#dreamz-outdoor .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-outdoor .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-outdoor .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-outdoor .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-outdoor .cards>.card p {
padding-bottom: 22px;
}
#dreamz-outdoor .benefitBand {
background: var(--black);
}
#dreamz-outdoor .benefit {
background: var(--black-soft);
}
#dreamz-outdoor .inlineCta h3 {
font-size: 20px;
}
#dreamz-outdoor .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-outdoor .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-outdoor .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-outdoor .valueCtaSection {
padding: 32px 0;
}
#dreamz-outdoor .proofCard p {
margin-top: 15px;
}
#dreamz-outdoor .proofCard h3 {
font-size: 23px;
}
#dreamz-outdoor .integrationNote {
margin-top: 23px;
}
#dreamz-outdoor .ctaPanel {
background: var(--black);
}
#dreamz-outdoor .ctaPanel p {
margin-top: 16px;
}
#dreamz-outdoor .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-outdoor .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-outdoor a:hover {
text-decoration: none;
}
#dreamz-outdoor .textCta:hover {
color: var(--navy);
}
#dreamz-outdoor .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-outdoor .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-outdoor .hero h1 {
font-size: 49px;
}
#dreamz-outdoor .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-outdoor .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-outdoor .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-outdoor .hero h1 {
font-size: 58px;
}
#dreamz-outdoor .heroVisual {
max-width: 548px;
}
#dreamz-outdoor .hero .lead {
max-width: 700px;
}
#dreamz-outdoor .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-outdoor .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-outdoor .logoBox:last-child {
grid-column: auto;
}
#dreamz-outdoor .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-outdoor .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-outdoor .inlineCtaActions .button {
flex: 1;
}
#dreamz-outdoor .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-outdoor .hero {
padding: 28px 0 40px;
}
#dreamz-outdoor .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-outdoor .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-outdoor .heroActions {
gap: 10px;
}
#dreamz-outdoor .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-outdoor .breadcrumb {
margin-bottom: 21px;
}
#dreamz-outdoor .hero .eyebrow {
font-size: 11px;
}
#dreamz-outdoor .heroVisual {
max-width: 480px;
}
#dreamz-outdoor .heroPills {
row-gap: 9px;
}
#dreamz-outdoor .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-outdoor .heroPills span+span {
padding-left: 7px;
}
#dreamz-outdoor .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-outdoor .clientBand {
padding: 25px 0;
}
#dreamz-outdoor .copy h2 {
font-size: 33px;
}
#dreamz-outdoor .panelBody {
padding: 16px;
}
#dreamz-outdoor .panelHead {
padding: 15px;
}
#dreamz-outdoor .panelHead>strong {
font-size: 12px;
}
#dreamz-outdoor .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-outdoor .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-outdoor .docHeader strong {
font-size: 18px;
}
#dreamz-outdoor .docHeader small {
font-size: 10px;
}
#dreamz-outdoor .rowCopy strong {
font-size: 11px;
}
#dreamz-outdoor .rowCopy small {
font-size: 10px;
}
#dreamz-outdoor .miniStats {
gap: 7px;
}
#dreamz-outdoor .miniStats strong {
font-size: 21px;
}
#dreamz-outdoor .miniStats span {
font-size: 9px;
}
#dreamz-outdoor .miniStats>div {
padding: 10px 8px;
}
#dreamz-outdoor .plantFacts {
gap: 8px;
}
#dreamz-outdoor .plantFacts>div {
padding: 10px;
}
#dreamz-outdoor .plantFacts strong {
font-size: 11px;
}
#dreamz-outdoor .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-outdoor .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-outdoor .utilityReadout span {
font-size: 8px;
}
#dreamz-outdoor .utilityReadout strong {
font-size: 24px;
}
#dreamz-outdoor .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-outdoor .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-outdoor .comparisonTable {
font-size: 11px;
}
#dreamz-outdoor .comparisonTable th,
#dreamz-outdoor .comparisonTable td {
padding: 13px 9px;
}
#dreamz-outdoor .contextSection {
padding: 0 0 22px;
}
#dreamz-outdoor .valueCtaSection {
padding: 25px 0;
}
#dreamz-outdoor .inlineCtaActions {
flex-direction: column;
}
#dreamz-outdoor .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-outdoor .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-outdoor .phoneDevice {
width: 222px;
}
#dreamz-outdoor .phoneDevice .rowIcon {
display: grid;
}
#dreamz-outdoor .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-outdoor .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-outdoor .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-outdoor .sideTile p {
margin: 0;
}
#dreamz-outdoor .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-outdoor .dataRow {
gap: 8px;
}
#dreamz-outdoor .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-outdoor .miniStats strong {
font-size: 19px;
}
#dreamz-outdoor .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-outdoor .heroActions .button {
width: 100%;
}
#dreamz-outdoor .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-outdoor .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-outdoor .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-outdoor .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-outdoor .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-outdoor .aiStep span {
font-size: 13px;
}
#dreamz-outdoor .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-outdoor {
background: var(--white);
}
#dreamz-outdoor img {
display: block;
max-width: 100%;
}
#dreamz-outdoor h1,
#dreamz-outdoor h2,
#dreamz-outdoor h3 {
text-wrap: balance;
}
#dreamz-outdoor .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-outdoor .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-outdoor .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-outdoor .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-outdoor .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-outdoor .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-outdoor .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-outdoor .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-outdoor .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-outdoor .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-outdoor .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-outdoor .industryIntro {
padding: 78px 0 66px;
}
#dreamz-outdoor .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-outdoor .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-outdoor .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-outdoor .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-outdoor .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-outdoor .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-outdoor .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-outdoor .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-outdoor .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-outdoor .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-outdoor .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-outdoor .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-outdoor .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-outdoor .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-outdoor .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-outdoor .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-outdoor .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-outdoor .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-outdoor .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-outdoor .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-outdoor .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-outdoor .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-outdoor .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-outdoor .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-outdoor .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-outdoor .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-outdoor .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-outdoor .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-outdoor .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-outdoor .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-outdoor .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-outdoor .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-outdoor .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-outdoor .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-outdoor .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-outdoor .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-outdoor .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-outdoor .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-outdoor .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-outdoor .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-outdoor .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-outdoor .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-outdoor .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-outdoor .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-outdoor .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-outdoor .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .rfidSpotlight {
background: #fff;
}
#dreamz-outdoor .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-outdoor .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-outdoor .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-outdoor .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-outdoor .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-outdoor .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-outdoor .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-outdoor .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-outdoor .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-outdoor .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-outdoor .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-outdoor .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-outdoor .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-outdoor .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-outdoor .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-outdoor .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-outdoor .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-outdoor .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-outdoor .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-outdoor .featurePanel {
display: none;
}
#dreamz-outdoor .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-outdoor .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-outdoor .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-outdoor .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-outdoor .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-outdoor .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-outdoor .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-outdoor .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-outdoor .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-outdoor .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-outdoor .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-outdoor .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-outdoor .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-outdoor .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-outdoor .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-outdoor .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-outdoor .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-outdoor .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-outdoor .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-outdoor .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-outdoor .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-outdoor .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-outdoor .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-outdoor .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-outdoor .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-outdoor .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-outdoor .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-outdoor .aiReviewBody {
padding: 18px;
}
#dreamz-outdoor .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-outdoor .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-outdoor .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-outdoor .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-outdoor .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-outdoor .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-outdoor .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-outdoor .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-outdoor .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-outdoor .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-outdoor .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-outdoor .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-outdoor .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-outdoor .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-outdoor .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-outdoor .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-outdoor .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-outdoor .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-outdoor .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-outdoor .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-outdoor .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-outdoor .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-outdoor .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-outdoor .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-outdoor .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-outdoor .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-outdoor .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-outdoor .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-outdoor .workflowDetails .featureList,
#dreamz-outdoor .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-outdoor .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-outdoor .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-outdoor .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-outdoor #outdoor-connected-tools {
background: #fff;
}
#dreamz-outdoor #outdoor-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-outdoor .featureTab,
#dreamz-outdoor .industryPriority,
#dreamz-outdoor summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-outdoor .industryIntroHead {
gap: 30px;
}
#dreamz-outdoor .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-outdoor .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-outdoor .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-outdoor .factoryWorkflow {
padding: 22px;
}
#dreamz-outdoor .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-outdoor .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-outdoor .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-outdoor .industryPriorityGrid {
gap: 14px;
}
#dreamz-outdoor .industryPriority {
padding: 22px 19px;
}
#dreamz-outdoor .industryPriority h3 {
font-size: 21px;
}
#dreamz-outdoor .industryPriority p {
font-size: 12px;
}
#dreamz-outdoor .priorityLink {
font-size: 10px;
}
#dreamz-outdoor .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-outdoor .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-outdoor .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-outdoor .vedaUseCases>div {
display: block;
}
#dreamz-outdoor .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-outdoor .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-outdoor .featureTabs {
gap: 8px;
}
#dreamz-outdoor .featureTab {
min-height: 108px;
}
#dreamz-outdoor .featureStage,
#dreamz-outdoor .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-outdoor .rfidSpotlight .spotlightMedia,
#dreamz-outdoor .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-outdoor .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-outdoor .featurePanel {
min-height: 0;
}
#dreamz-outdoor .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-outdoor .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-outdoor .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-outdoor .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-outdoor .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-outdoor .clientBand {
padding: 22px 0;
}
#dreamz-outdoor .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-outdoor .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-outdoor .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-outdoor .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-outdoor .industryIntro {
padding: 53px 0;
}
#dreamz-outdoor .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-outdoor .industryIntroHead>p {
font-size: 14px;
}
#dreamz-outdoor .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .industryPriority {
padding: 23px;
}
#dreamz-outdoor .industryPriority h3 {
font-size: 24px;
}
#dreamz-outdoor .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-outdoor .industryPriority p {
font-size: 13px;
}
#dreamz-outdoor .priorityLink {
font-size: 11px;
}
#dreamz-outdoor .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-outdoor .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-outdoor .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-outdoor .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-outdoor .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-outdoor .vedaUseCases>div {
display: flex;
}
#dreamz-outdoor .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-outdoor .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-outdoor .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-outdoor .vedaMessage.user {
margin-left: 25px;
}
#dreamz-outdoor .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-outdoor .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-outdoor .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-outdoor .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-outdoor .spotlightHead h2 {
font-size: 32px;
}
#dreamz-outdoor .spotlightHead>p {
font-size: 14px;
}
#dreamz-outdoor .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-outdoor .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-outdoor .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-outdoor .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-outdoor .featurePanel h3 {
font-size: 24px;
}
#dreamz-outdoor .featurePanel>p {
font-size: 13px;
}
#dreamz-outdoor .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-outdoor .spotlightChecks>li {
font-size: 12px;
}
#dreamz-outdoor .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-outdoor .spotlightActions .button {
width: 100%;
}
#dreamz-outdoor .spotlightScope {
font-size: 10px;
}
#dreamz-outdoor .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-outdoor .mediaTitle strong {
font-size: 11px;
}
#dreamz-outdoor .mediaTitle div>span {
font-size: 8px;
}
#dreamz-outdoor .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-outdoor .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-outdoor .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-outdoor .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-outdoor .aiReviewBody {
padding: 13px;
}
#dreamz-outdoor .aiIssue {
padding: 13px;
}
#dreamz-outdoor .aiIssue strong {
font-size: 14px;
}
#dreamz-outdoor .aiEvidence {
gap: 6px;
}
#dreamz-outdoor .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-outdoor .aiEvidence strong {
font-size: 9px;
}
#dreamz-outdoor .aiEvidence span {
font-size: 7px;
}
#dreamz-outdoor .exampleLabel {
font-size: 6px;
}
#dreamz-outdoor .factoryWorkflows {
padding: 55px 0;
}
#dreamz-outdoor .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-outdoor .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-outdoor .industryRibbonGrid {
gap: 12px;
}
#dreamz-outdoor .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-outdoor .spotlightHead h2 {
font-size: 29px;
}
#dreamz-outdoor .featureStage {
padding: 19px 13px;
}
#dreamz-outdoor .mediaTitle>.icon {
display: none;
}
#dreamz-outdoor .exampleLabel {
display: none;
}
#dreamz-outdoor .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-outdoor .featureTabs {
display: none;
}
#dreamz-outdoor .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-outdoor .featureStage {
display: block;
}
#dreamz-outdoor .featurePanel {
color: #000;
}
}
#dreamz-outdoor #outdoor-delivery-features-1:checked~.featureTabs label[for="outdoor-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-delivery-features-1:focus-visible~.featureTabs label[for="outdoor-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-2:checked~.featureTabs label[for="outdoor-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-delivery-features-2:focus-visible~.featureTabs label[for="outdoor-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-3:checked~.featureTabs label[for="outdoor-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-delivery-features-3:focus-visible~.featureTabs label[for="outdoor-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-4:checked~.featureTabs label[for="outdoor-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-delivery-features-4:focus-visible~.featureTabs label[for="outdoor-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-5:checked~.featureTabs label[for="outdoor-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-delivery-features-5:focus-visible~.featureTabs label[for="outdoor-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-1:checked~.featureTabs label[for="outdoor-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-rfid-features-1:focus-visible~.featureTabs label[for="outdoor-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-2:checked~.featureTabs label[for="outdoor-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-rfid-features-2:focus-visible~.featureTabs label[for="outdoor-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-3:checked~.featureTabs label[for="outdoor-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-rfid-features-3:focus-visible~.featureTabs label[for="outdoor-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-4:checked~.featureTabs label[for="outdoor-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-rfid-features-4:focus-visible~.featureTabs label[for="outdoor-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-5:checked~.featureTabs label[for="outdoor-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-rfid-features-5:focus-visible~.featureTabs label[for="outdoor-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-1:checked~.featureTabs label[for="outdoor-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-ai-decisions-features-1:focus-visible~.featureTabs label[for="outdoor-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-2:checked~.featureTabs label[for="outdoor-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-ai-decisions-features-2:focus-visible~.featureTabs label[for="outdoor-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-3:checked~.featureTabs label[for="outdoor-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-ai-decisions-features-3:focus-visible~.featureTabs label[for="outdoor-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-4:checked~.featureTabs label[for="outdoor-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-ai-decisions-features-4:focus-visible~.featureTabs label[for="outdoor-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-5:checked~.featureTabs label[for="outdoor-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-outdoor #outdoor-ai-decisions-features-5:focus-visible~.featureTabs label[for="outdoor-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-outdoor #outdoor-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-outdoor .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .featureMediaPanels {
min-width: 0;
}
#dreamz-outdoor .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-outdoor .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-outdoor .featureMediaPanels .windowTop strong,
#dreamz-outdoor .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-outdoor .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-outdoor .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-outdoor .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-outdoor .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-outdoor .featureMediaPanels .windowBody>*,
#dreamz-outdoor .featureMediaPanels .spectrumGrid>*,
#dreamz-outdoor .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-outdoor .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-outdoor .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-outdoor .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-outdoor .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-outdoor .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-outdoor .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-outdoor .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-outdoor .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-outdoor .pin2 {
top: 88px;
right: 88px;
}
#dreamz-outdoor .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-outdoor .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-outdoor .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-outdoor .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-outdoor .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-outdoor .featureMediaPanels .graphNodes .node.n1,
#dreamz-outdoor .featureMediaPanels .graphNodes .node.n2,
#dreamz-outdoor .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-outdoor .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-outdoor .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-outdoor .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-outdoor .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-outdoor .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-outdoor .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-outdoor .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-outdoor .freshGraphic * {
box-sizing: border-box;
}
#dreamz-outdoor .rfPanel,
#dreamz-outdoor .aiInsightCard,
#dreamz-outdoor .forecastVisualCard,
#dreamz-outdoor .forecastSuggestion,
#dreamz-outdoor .knowledgeTile,
#dreamz-outdoor .chatConversation,
#dreamz-outdoor .trainingSummary,
#dreamz-outdoor .moduleCard,
#dreamz-outdoor .qualityHeatCard,
#dreamz-outdoor .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-outdoor .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-outdoor .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-outdoor .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-outdoor .statusPill,
#dreamz-outdoor .cardTag,
#dreamz-outdoor .forecastSuggestion b,
#dreamz-outdoor .moduleCard b,
#dreamz-outdoor .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-outdoor .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-outdoor .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-outdoor .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-outdoor .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-outdoor .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-outdoor .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-outdoor .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-outdoor .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-outdoor .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-outdoor .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-outdoor .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-outdoor .dot.good {
background: #298EEC;
}
#dreamz-outdoor .dot.warn {
background: #F4A62A;
}
#dreamz-outdoor .dot.bad {
background: #EB6B53;
}
#dreamz-outdoor .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-outdoor .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-outdoor .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-outdoor .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-outdoor .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-outdoor .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-outdoor .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-outdoor .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-outdoor .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-outdoor .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-outdoor .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-outdoor .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-outdoor .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-outdoor .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-outdoor .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-outdoor .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-outdoor .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-outdoor .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-outdoor .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-outdoor .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-outdoor .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-outdoor .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-outdoor .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-outdoor .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-outdoor .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-outdoor .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-outdoor .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-outdoor .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-outdoor .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-outdoor .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-outdoor .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-outdoor .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-outdoor .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-outdoor .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-outdoor .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-outdoor .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-outdoor .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-outdoor .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-outdoor .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-outdoor .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-outdoor .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-outdoor .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-outdoor .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-outdoor .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-outdoor .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-outdoor .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-outdoor .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-outdoor .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-outdoor .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-outdoor .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-outdoor .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-outdoor .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-outdoor .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-outdoor .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-outdoor .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-outdoor .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-outdoor .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-outdoor .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-outdoor .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-outdoor .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-outdoor .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-outdoor .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-outdoor .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-outdoor .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-outdoor .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-outdoor .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-outdoor .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-outdoor .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-outdoor .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-outdoor .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-outdoor .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-outdoor .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-outdoor .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-outdoor .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-outdoor .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-outdoor .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-outdoor .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-outdoor .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-outdoor .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-outdoor .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-outdoor .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-outdoor .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-outdoor .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-outdoor .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-outdoor .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-outdoor .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-outdoor .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-outdoor .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-outdoor .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-outdoor .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-outdoor .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-outdoor .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-outdoor .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-outdoor .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-outdoor .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-outdoor .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-outdoor .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-outdoor .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-outdoor .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-outdoor .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-outdoor .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-outdoor .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-outdoor .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-outdoor .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-outdoor .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-outdoor .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-outdoor .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-outdoor .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-outdoor .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-outdoor .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-outdoor .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-outdoor .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-outdoor .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-outdoor .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-outdoor .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-outdoor .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-outdoor .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-outdoor .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-outdoor .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-outdoor .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-outdoor .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-outdoor .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-outdoor .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-outdoor .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-outdoor .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-outdoor .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-outdoor .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-outdoor .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-outdoor .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-outdoor .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-outdoor .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-outdoor .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-outdoor .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-outdoor .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-outdoor .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-outdoor .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-outdoor .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-outdoor .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-outdoor .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-outdoor .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-outdoor .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-outdoor .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-outdoor .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-outdoor .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-outdoor .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-outdoor .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-outdoor .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-outdoor .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-outdoor .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-outdoor .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-outdoor .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-outdoor .rfTrackLayout,
#dreamz-outdoor .rfFlowLayout,
#dreamz-outdoor .rfAlertGrid,
#dreamz-outdoor .rfCycleLayout,
#dreamz-outdoor .rfSitesLayout,
#dreamz-outdoor .aiRootLayout,
#dreamz-outdoor .aiForecastLayout,
#dreamz-outdoor .aiChatLayout,
#dreamz-outdoor .aiTrainingLayout,
#dreamz-outdoor .aiQualityLayout,
#dreamz-outdoor .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-outdoor .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-outdoor .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-outdoor .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-outdoor .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-outdoor .aiLink {
display: none;
}
}
#dreamz-outdoor .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-outdoor .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-outdoor .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-outdoor .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-outdoor .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-outdoor .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-outdoor .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-outdoor .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-outdoor .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-outdoor .mfgHero h1>span {
display: block;
}
#dreamz-outdoor .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-outdoor .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-outdoor .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-outdoor .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-outdoor .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-outdoor .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-outdoor .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-outdoor .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-outdoor .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-outdoor .mfgHeroContent {
min-height: 610px;
}
#dreamz-outdoor .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-outdoor .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-outdoor .mfgHeroLead {
font-size: 16px;
}
#dreamz-outdoor .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-outdoor .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-outdoor .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-outdoor .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-outdoor .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-outdoor .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-outdoor .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-outdoor .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-outdoor .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-outdoor .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-outdoor .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-outdoor .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-outdoor .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-outdoor .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-outdoor .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-outdoor .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-outdoor .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-outdoor .mfgHero {
background: #fff;
color: #000;
}
#dreamz-outdoor .mfgHeroScene,
#dreamz-outdoor .mfgHeroActions {
display: none;
}
#dreamz-outdoor .mfgHeroContent {
min-height: 0;
}
#dreamz-outdoor .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-outdoor .mfgHero h1,
#dreamz-outdoor .mfgHero h1 .mfgHeroAccent,
#dreamz-outdoor .mfgHero p {
color: #000;
}
}
#dreamz-outdoor #outdoor-rfid .featureStage,
#dreamz-outdoor #outdoor-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-outdoor .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-outdoor .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-outdoor .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-outdoor .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-outdoor .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-outdoor .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-outdoor .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-outdoor .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-outdoor .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-outdoor .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-outdoor .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-outdoor .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-outdoor .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-outdoor .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-outdoor .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-outdoor .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-outdoor .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-outdoor .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-outdoor .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-outdoor .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-outdoor .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-outdoor .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-outdoor .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-outdoor .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-outdoor .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-outdoor .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-outdoor .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-outdoor .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-outdoor .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-outdoor .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-outdoor .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-outdoor .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-outdoor .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-outdoor .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-outdoor .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-outdoor .mfgGallery .flowArrow {
display: none;
}
#dreamz-outdoor .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-outdoor .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-outdoor .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-outdoor .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-outdoor .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-outdoor .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-outdoor .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-outdoor .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-outdoor .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-outdoor .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-outdoor .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-outdoor .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-outdoor .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-outdoor .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-outdoor .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-outdoor .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-outdoor .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-outdoor .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-outdoor .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-outdoor .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-outdoor .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-outdoor .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-outdoor .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-outdoor .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-outdoor .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-outdoor .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-outdoor .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-outdoor .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-outdoor .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-outdoor .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-outdoor .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-outdoor .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-outdoor .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-outdoor .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-outdoor .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-outdoor .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-outdoor .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-outdoor .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-outdoor .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-outdoor .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-outdoor .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-outdoor .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-outdoor .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-outdoor .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-outdoor .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-outdoor .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-outdoor .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-outdoor .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-outdoor .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-outdoor .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-outdoor .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-outdoor .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-outdoor .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-outdoor .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-outdoor .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-outdoor .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-outdoor .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-outdoor .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-outdoor .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-outdoor .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-outdoor .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-outdoor .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-outdoor .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-outdoor .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-outdoor .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-outdoor .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-outdoor .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-outdoor .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-outdoor .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-outdoor .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-outdoor .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-outdoor .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-outdoor .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-outdoor .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-outdoor .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-outdoor .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-outdoor .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-outdoor .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-outdoor .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-outdoor .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-outdoor .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-outdoor .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-outdoor .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-outdoor .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-outdoor .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-outdoor .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-outdoor #outdoor-rfid .featureStage,
#dreamz-outdoor #outdoor-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-outdoor #outdoor-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-outdoor .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-outdoor #outdoor-rfid .featureStage,
#dreamz-outdoor #outdoor-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-outdoor .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-outdoor .mfgGallery .freshWindow {
height: auto;
}
#dreamz-outdoor .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-outdoor .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-outdoor .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-outdoor .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-outdoor .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-outdoor .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-outdoor .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-outdoor .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-outdoor .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-outdoor .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-outdoor .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-outdoor .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-outdoor .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-outdoor .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-outdoor .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-outdoor .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-outdoor .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-outdoor .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-outdoor .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-outdoor .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-outdoor .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-outdoor .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-outdoor .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-outdoor .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-outdoor .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-outdoor .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-outdoor .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-outdoor .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-outdoor .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-outdoor .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-outdoor .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-outdoor .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-outdoor .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-outdoor .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-outdoor .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-outdoor .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-outdoor .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-outdoor .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-outdoor .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-outdoor .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-outdoor .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-outdoor .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-outdoor .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-outdoor .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-outdoor .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-outdoor .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-outdoor .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-outdoor .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-outdoor .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-outdoor .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-outdoor .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-outdoor .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-outdoor .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-outdoor .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-outdoor .outdoorVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-outdoor .outdoorGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-outdoor .outdoorIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-outdoor .outdoorStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-outdoor .outdoorVisualGallery>.outdoorGraphic {
display: none;
}
#dreamz-outdoor #outdoor-delivery .featureStage,
#dreamz-outdoor #outdoor-rfid .featureStage,
#dreamz-outdoor #outdoor-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-outdoor #outdoor-rfid .outdoorVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-outdoor #outdoor-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-outdoor .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-outdoor .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-outdoor .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-outdoor .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-outdoor .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-outdoor #outdoor-delivery .featureStage,
#dreamz-outdoor #outdoor-rfid .featureStage,
#dreamz-outdoor #outdoor-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-outdoor #outdoor-rfid .outdoorVisualGallery,
#dreamz-outdoor #outdoor-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-outdoor .mfgHeroScene {
height: 290px;
}
#dreamz-outdoor #outdoor-delivery .featureStage,
#dreamz-outdoor #outdoor-rfid .featureStage,
#dreamz-outdoor #outdoor-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-outdoor .outdoorVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-outdoor .outdoorVisualGallery>.outdoorGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-outdoor #outdoor-delivery-features-1:checked~.featureStage .outdoorVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-2:checked~.featureStage .outdoorVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-3:checked~.featureStage .outdoorVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-4:checked~.featureStage .outdoorVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-outdoor #outdoor-delivery-features-5:checked~.featureStage .outdoorVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-1:checked~.featureStage .outdoorVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-2:checked~.featureStage .outdoorVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-3:checked~.featureStage .outdoorVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-4:checked~.featureStage .outdoorVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-outdoor #outdoor-rfid-features-5:checked~.featureStage .outdoorVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-1:checked~.featureStage .outdoorVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-2:checked~.featureStage .outdoorVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-3:checked~.featureStage .outdoorVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-4:checked~.featureStage .outdoorVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-outdoor #outdoor-ai-decisions-features-5:checked~.featureStage .outdoorVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-outdoor .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-outdoor .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-outdoor .outdoorIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-outdoor .outdoorGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-outdoor .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-outdoor .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-outdoor .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-outdoor .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-outdoor .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-outdoor .mfgHeroContent {
background: transparent;
}
#dreamz-outdoor .mfgHeroScene img {
object-position: 74% 50%;
}
#dreamz-outdoor .outdoorIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-outdoor .outdoorIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-outdoor .outdoorGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-outdoor .outdoorVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-outdoor .mfgHeroScene img {
object-position: 80% 50%;
}
}
@media(max-width:600px) {
#dreamz-outdoor .mfgHeroScene img {
object-position: 82% 50%;
}
}  #dreamz-av .industryIntroHead.compact,
#dreamz-av .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-av .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-av .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-av .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-av .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-av .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-av .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-av .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-av .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-av .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-av .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-av .windowDots {
display: flex;
gap: 5px;
}
#dreamz-av .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-av .windowBody {
padding: 16px;
}
#dreamz-av .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-av .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-av .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-av .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-av .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-av .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-av .chartGridLine.l1 {
top: 34px;
}
#dreamz-av .chartGridLine.l2 {
top: 65px;
}
#dreamz-av .chartGridLine.l3 {
top: 96px;
}
#dreamz-av .chartGridLine.l4 {
top: 127px;
}
#dreamz-av .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-av .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-av .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-av .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-av .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-av .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-av .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-av .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-av .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-av .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-av .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-av .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-av .noteCard p,
#dreamz-av .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-av .alertStack {
display: grid;
gap: 10px;
}
#dreamz-av .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-av .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-av .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-av .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-av .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-av .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-av .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-av .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-av .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-av .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-av .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-av .scheduleBoard h4,
#dreamz-av .todoBoard h4,
#dreamz-av .siteBoard h4,
#dreamz-av .chatPanel h4,
#dreamz-av .lessonPanel h4,
#dreamz-av .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-av .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-av .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-av .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-av .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-av .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-av .taskRow:last-child {
border-bottom: 0;
}
#dreamz-av .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-av .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-av .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-av .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-av .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-av .inventoryTable th,
#dreamz-av .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-av .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-av .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-av .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-av .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-av .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-av .phoneBody {
padding: 12px;
}
#dreamz-av .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-av .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-av .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-av .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-av .progressList {
display: grid;
gap: 10px;
}
#dreamz-av .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-av .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-av .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-av .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-av .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-av .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-av .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-av .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-av .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-av .pin1 {
top: 56px;
left: 58px;
}
#dreamz-av .pin2 {
top: 88px;
right: 88px;
}
#dreamz-av .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-av .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-av .siteRow:last-child {
border-bottom: 0;
}
#dreamz-av .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-av .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-av .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-av .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-av .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-av .graphNodes:before,
#dreamz-av .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-av .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-av .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-av .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-av .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-av .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-av .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-av .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-av .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-av .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-av .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-av .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-av .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-av .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-av .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-av .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-av .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-av .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-av .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-av .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-av .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-av .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-av .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-av .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-av .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-av .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-av .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-av .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-av .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-av .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-av .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-av .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-av .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-av .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-av #av-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-av #av-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-av #av-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-av #av-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-av #av-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-av #av-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-av #av-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-av #av-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-av #av-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-av #av-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-av #av-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-av #av-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-av #av-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-av #av-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-av #av-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-av #av-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-av #av-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-av #av-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-av #av-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-av #av-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-av #av-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-av #av-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-av #av-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-av #av-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-av #av-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-av #av-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-av #av-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-av #av-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-av #av-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-av #av-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-av .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-av .featureMediaPanels {
min-height: 0;
}
#dreamz-av .inventorySplit,
#dreamz-av .forecastGrid,
#dreamz-av .siteGrid,
#dreamz-av .spectrumGrid,
#dreamz-av .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-av .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-av .metricGrid,
#dreamz-av .lessonCards,
#dreamz-av .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-av .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-av .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-av {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-av * {
box-sizing: border-box;
}
#dreamz-av {
scroll-behavior: smooth;
}
#dreamz-av {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-av a {
color: inherit;
text-decoration: none;
}
#dreamz-av .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-av .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-av .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-av .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-av .brand span {
color: var(--brand);
}
#dreamz-av .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-av .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-av .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-av .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-av .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-av .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-av .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-av .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-av h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-av .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-av .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-av .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-av .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-av .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-av .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-av .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-av .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-av .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-av .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-av .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-av .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-av .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-av .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-av .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-av .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-av .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-av .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-av .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-av .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-av .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-av .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-av .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-av .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-av .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-av .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-av .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-av .sectionHead {
margin-bottom: 44px;
}
#dreamz-av .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-av .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-av .aiJourney h2 {
color: #fff;
}
#dreamz-av .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-av .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-av .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-av .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-av .aiStep:last-child::after {
display: none;
}
#dreamz-av .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-av .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-av .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-av .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-av .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-av .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-av .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-av .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-av .capability {
background: #fff;
}
#dreamz-av .capability.alt {
background: var(--sky-2);
}
#dreamz-av .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-av .twoCol.reverse .visual {
order: 2;
}
#dreamz-av .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-av .visual .placeholder {
min-height: 355px;
}
#dreamz-av .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-av .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-av details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-av details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-av details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-av details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-av details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-av details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-av .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-av .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-av .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-av .darkSection h2,
#dreamz-av .darkSection h3 {
color: #fff;
}
#dreamz-av .darkSection .sectionHead p,
#dreamz-av .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-av .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-av .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-av .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-av .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-av .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-av .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-av .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-av .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-av .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-av .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-av .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-av .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-av .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-av .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-av .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-av .benefitBand h2 {
color: #fff;
}
#dreamz-av .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-av .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-av .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-av .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-av .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-av .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-av .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-av .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-av .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-av .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-av .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-av .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-av .faq {
max-width: 900px;
}
#dreamz-av details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
#dreamz-av summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
#dreamz-av details p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-av .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-av .ctaPanel h2 {
color: #fff;
}
#dreamz-av .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-av .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-av .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-av .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-av .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-av .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-av .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-av .inlineCta.dark h3 {
color: #fff;
}
#dreamz-av .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-av .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-av .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-av .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-av .button.yellow:hover {
background: #FFD84D;
}
#dreamz-av .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-av .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-av .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-av .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-av footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-av .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-av .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-av .heroGrid,
#dreamz-av .twoCol,
#dreamz-av .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-av .twoCol.reverse .visual {
order: initial;
}
#dreamz-av .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-av .ratingGrid,
#dreamz-av .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-av .ratingLead,
#dreamz-av .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-av .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-av .aiStep:nth-child(3)::after,
#dreamz-av .aiStep:last-child::after {
display: none;
}
#dreamz-av .outcomeGrid,
#dreamz-av .challengeGrid,
#dreamz-av .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-av .cards,
#dreamz-av .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-av .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-av .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-av .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-av .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-av .hero {
padding: 58px 0 52px;
}
#dreamz-av .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-av .aiStep::after {
display: none;
}
#dreamz-av .logoRow,
#dreamz-av .ratingGrid,
#dreamz-av .awardGrid,
#dreamz-av .outcomeGrid,
#dreamz-av .challengeGrid,
#dreamz-av .benefitGrid,
#dreamz-av .cards,
#dreamz-av .proofCards,
#dreamz-av .integrationGrid,
#dreamz-av .featureList {
grid-template-columns: 1fr;
}
#dreamz-av .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-av .ctaPanel {
padding: 34px 24px;
}
#dreamz-av .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-av .inlineCtaActions {
width: 100%;
}
#dreamz-av .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-av {
--muted: #526A7C;
--shadow: none;
}
#dreamz-av {
background: var(--sky-2);
}
#dreamz-av p {
margin-bottom: 0;
}
#dreamz-av [id] {
scroll-margin-top: 94px;
}
#dreamz-av svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-av .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: none;
}
#dreamz-av .darkSection h2,
#dreamz-av .darkSection h3,
#dreamz-av .aiJourney h2,
#dreamz-av .benefitBand h2,
#dreamz-av .ctaPanel h2,
#dreamz-av .inlineCta.dark h3 {
color: #fff;
}
#dreamz-av .wrap>*,
#dreamz-av .heroGrid>*,
#dreamz-av .twoCol>*,
#dreamz-av .ctaPanel>* {
min-width: 0;
}
#dreamz-av .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-av .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-av .skipLink:focus {
transform: none;
}
#dreamz-av a:focus-visible,
#dreamz-av summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-av .darkSection a:focus-visible,
#dreamz-av .darkSection summary:focus-visible,
#dreamz-av .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-av .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-av .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-av .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-av .brandName>span {
color: var(--brand-dark);
}
#dreamz-av .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-av .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-av .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-av .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-av .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-av .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-av .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-av .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-av .hero h1 {
line-height: 1.06;
}
#dreamz-av .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-av .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-av .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-av .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-av .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-av .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-av .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-av .clientBand {
padding: 27px 0;
}
#dreamz-av .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-av .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-av .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-av .logoBox.wide {
font-size: 12px;
}
#dreamz-av .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-av h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-av .sectionHead {
margin-bottom: 36px;
}
#dreamz-av .eyebrow {
line-height: 1.5;
}
#dreamz-av .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-av .aiStep {
min-height: 162px;
}
#dreamz-av .aiStep strong {
line-height: 1.35;
}
#dreamz-av .aiStep span {
line-height: 1.65;
}
#dreamz-av .aiCallout {
margin-top: 24px;
}
#dreamz-av .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-av .outcome>.icon {
color: var(--navy);
}
#dreamz-av .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-av .awardItem>.icon {
color: var(--navy);
}
#dreamz-av .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-av .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-av .twoCol.reverse .visual {
order: -1;
}
#dreamz-av .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-av .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-av .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-av .featureList {
gap: 13px 18px;
}
#dreamz-av .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-av .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-av .check .icon {
width: 14px;
height: 14px;
}
#dreamz-av details.capabilityMore {
margin-bottom: 0;
}
#dreamz-av .capabilityMore summary {
min-height: 34px;
}
#dreamz-av .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-av .textCta {
font-size: 14px;
}
#dreamz-av .visual {
min-width: 0;
}
#dreamz-av .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-av .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-av .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-av .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-av .panelBody {
padding: 20px;
}
#dreamz-av .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-av .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-av .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-av .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-av .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-av .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-av .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-av .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-av .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-av .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-av .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-av .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-av .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-av .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-av .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-av .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-av .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-av .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-av .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-av .dataRow:last-child {
border-bottom: 0;
}
#dreamz-av .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-av .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-av .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-av .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-av .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-av .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-av .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-av .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-av .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-av .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-av .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-av .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-av .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-av .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-av .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-av .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-av .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-av .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-av .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-av .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-av .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-av .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-av .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-av .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-av .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-av .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-av .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-av .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-av .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-av .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-av .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-av .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-av .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-av .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-av .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-av .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-av .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-av .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-av .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-av .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-av .promptList {
display: grid;
gap: 10px;
}
#dreamz-av .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-av .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-av .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-av .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-av .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-av .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-av .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-av .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-av .quoteTable th,
#dreamz-av .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-av .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-av .quoteTable td:first-child {
width: 64%;
}
#dreamz-av .quoteTable th:last-child,
#dreamz-av .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-av .quoteTable strong {
font-size: 11px;
}
#dreamz-av .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-av .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-av .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-av .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-av .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-av .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-av .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-av .orderJourney {
margin: 20px 0;
}
#dreamz-av .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-av .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-av .journeyRow:last-child:before {
display: none;
}
#dreamz-av .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-av .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-av .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-av .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-av .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-av .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-av .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-av .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-av .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-av .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-av .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-av .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-av .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-av .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-av .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-av .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-av .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-av .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-av .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-av .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-av .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-av .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-av .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-av .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-av .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-av .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-av .customerTimeline strong {
color: #fff;
}
#dreamz-av .customerTimeline small {
color: #BFBFBF;
}
#dreamz-av .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-av .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-av .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-av .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-av .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-av .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-av .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-av .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-av .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-av .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-av .chartTitle strong {
font-size: 12px;
}
#dreamz-av .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-av .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-av .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-av .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-av .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-av .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-av .inlineCtaActions {
max-width: 42%;
}
#dreamz-av .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-av .inlineCta h3 {
line-height: 1.35;
}
#dreamz-av .card {
box-shadow: none;
}
#dreamz-av .cardIcon {
box-shadow: none;
}
#dreamz-av .card h3 {
font-size: 22px;
}
#dreamz-av .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-av .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-av .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-av .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-av .ratingBand {
padding: 34px 0;
}
#dreamz-av .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-av .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-av .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-av .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-av .ratingItem:first-child {
border-left: 0;
}
#dreamz-av .proofCard h3 {
font-size: 23px;
}
#dreamz-av .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-av .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-av .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-av .integration {
min-height: 98px;
}
#dreamz-av .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-av .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-av .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-av .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-av .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-av .finalActions {
display: grid;
gap: 11px;
}
#dreamz-av .finalActions .button {
white-space: nowrap;
}
#dreamz-av .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-av .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-av .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-av .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-av .heroGrid {
gap: 30px;
}
#dreamz-av .twoCol {
gap: 32px;
}
#dreamz-av .panelBody {
padding: 16px;
}
#dreamz-av .panelHead {
padding: 16px;
}
#dreamz-av .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-av .pipelineColumns {
gap: 7px;
}
#dreamz-av .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-av .heroGrid,
#dreamz-av .twoCol,
#dreamz-av .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .heroGrid {
gap: 36px;
}
#dreamz-av .hero h1 {
max-width: 730px;
}
#dreamz-av .hero .lead {
max-width: 690px;
}
#dreamz-av .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-av .twoCol {
gap: 34px;
}
#dreamz-av .twoCol.reverse .visual {
order: initial;
}
#dreamz-av .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-av .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-av .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-av .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-av .ratingSectionGrid {
gap: 20px;
}
#dreamz-av .inlineCta {
align-items: flex-start;
}
#dreamz-av .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-av .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-av .card {
padding: 22px;
}
#dreamz-av .card h3 {
font-size: 21px;
}
#dreamz-av .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-av .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-av .cards,
#dreamz-av .proofCards {
grid-template-columns: 1fr;
}
#dreamz-av .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-av .inlineCta {
flex-direction: column;
}
#dreamz-av .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-av .inlineCtaActions .button {
flex: 1;
}
#dreamz-av .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-av .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-av .wrap {
width: calc(100% - 32px);
}
#dreamz-av [id] {
scroll-margin-top: 82px;
}
#dreamz-av .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-av .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-av .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-av .hero {
padding: 51px 0 48px;
}
#dreamz-av .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-av .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-av .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-av .hero .microcopy {
font-size: 11px;
}
#dreamz-av .heroPills span {
font-size: 9px;
}
#dreamz-av .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-av .sectionHead p {
font-size: 16px;
}
#dreamz-av .copy h2 {
font-size: 34px;
}
#dreamz-av .copy p {
font-size: 15px;
}
#dreamz-av .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-av .logoBox {
min-height: 53px;
}
#dreamz-av .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-av .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-av .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-av .aiStep strong {
font-size: 13px;
}
#dreamz-av .aiStep span {
font-size: 11px;
}
#dreamz-av .aiStep::after {
display: none;
}
#dreamz-av .outcomeGrid,
#dreamz-av .challengeGrid,
#dreamz-av .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-av .outcome {
padding: 24px;
}
#dreamz-av .outcome strong {
font-size: 22px;
}
#dreamz-av .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-av .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-av .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-av .featureList,
#dreamz-av .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-av .featureItem {
font-size: 13px;
}
#dreamz-av .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-av .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-av .panelHead {
padding: 15px 13px;
}
#dreamz-av .panelHead>strong {
font-size: 12px;
}
#dreamz-av .panelBody {
padding: 14px;
}
#dreamz-av .productPanel {
border-radius: 16px;
}
#dreamz-av .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-av .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-av .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-av .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-av .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-av .deal strong {
font-size: 10px;
}
#dreamz-av .deal small {
font-size: 9px;
}
#dreamz-av .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-av .mobileWorkspace {
gap: 12px;
}
#dreamz-av .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-av .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-av .sideTile {
padding: 10px;
}
#dreamz-av .sideTile strong {
font-size: 10px;
}
#dreamz-av .sideTile p {
font-size: 9px;
}
#dreamz-av .mobileHeader strong {
font-size: 15px;
}
#dreamz-av .mobileAccount strong {
font-size: 10px;
}
#dreamz-av .mobileAccount small {
font-size: 7px;
}
#dreamz-av .phoneDevice .rowIcon {
display: none;
}
#dreamz-av .quoteTable th,
#dreamz-av .quoteTable td {
padding: 12px 4px;
}
#dreamz-av .quoteTable strong {
font-size: 10px;
}
#dreamz-av .quoteTable small {
font-size: 8px;
}
#dreamz-av .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-av .docHeader strong {
font-size: 17px;
}
#dreamz-av .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-av .miniFlow span {
padding: 6px;
}
#dreamz-av .rowCopy strong {
font-size: 10px;
}
#dreamz-av .rowCopy small {
font-size: 8px;
}
#dreamz-av .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-av .miniStats {
gap: 7px;
}
#dreamz-av .miniStats>div {
padding: 9px;
}
#dreamz-av .miniStats strong {
font-size: 18px;
}
#dreamz-av .miniStats span {
font-size: 8px;
}
#dreamz-av .collectionStats>div {
padding: 13px;
}
#dreamz-av .collectionStats strong {
font-size: 24px;
}
#dreamz-av .customerHeader strong {
font-size: 17px;
}
#dreamz-av .customerFacts>div {
padding: 10px;
}
#dreamz-av .customerFacts strong {
font-size: 12px;
}
#dreamz-av .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-av .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-av .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-av .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-av .integration small {
font-size: 9px;
}
#dreamz-av .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-av .ctaPanel p {
font-size: 15px;
}
#dreamz-av .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-av .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-av .contextSection {
padding: 0 0 24px;
}
#dreamz-av .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-av .wrap {
width: calc(100% - 24px);
}
#dreamz-av .brand {
font-size: 18px;
}
#dreamz-av .brandMark {
width: 25px;
height: 25px;
}
#dreamz-av .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-av .copy h2 {
font-size: 31px;
}
#dreamz-av .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-av .phoneDevice {
width: 210px;
}
#dreamz-av .phoneDevice .rowIcon {
display: grid;
}
#dreamz-av .mobileSide {
gap: 8px;
}
#dreamz-av .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-av .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-av .sideTile p {
margin: 0;
}
#dreamz-av .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-av .collectionStats strong {
font-size: 21px;
}
#dreamz-av .inventoryIntro strong {
font-size: 14px;
}
#dreamz-av .dataRow {
gap: 7px;
}
#dreamz-av .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-av .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-av {
scroll-behavior: auto;
}
#dreamz-av *,
#dreamz-av *::before,
#dreamz-av *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-av {
background: var(--sky-2);
}
#dreamz-av .hero .eyebrow {
max-width: 100%;
}
#dreamz-av .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-av .ganttIllustration,
#dreamz-av .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-av .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-av .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-av .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-av .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-av .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-av .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-av .comparisonTable th,
#dreamz-av .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-av .comparisonTable th:first-child {
width: 23%;
}
#dreamz-av .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-av .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-av .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-av .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-av .card,
#dreamz-av .proofCard,
#dreamz-av .productPanel,
#dreamz-av .outcome,
#dreamz-av .benefit {
box-shadow: none;
}
#dreamz-av .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-av .hero .eyebrow {
font-size: 10px;
}
#dreamz-av .comparisonTable {
font-size: 11px;
}
#dreamz-av .comparisonTable th,
#dreamz-av .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-av .comparisonTable th:first-child {
width: 24%;
}
#dreamz-av .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-av .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
}
#dreamz-av .scheduleIllustration,
#dreamz-av .analyticsIllustration,
#dreamz-av .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-av .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-av .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-av .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-av .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-av .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-av .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-av .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-av .darkSection .textCta {
color: var(--yellow);
}
#dreamz-av .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-av .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-av .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-av .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-av .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-av .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-av .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-av .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-av .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-av .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-av .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-av .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-av .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-av .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-av .phoneDevice {
max-width: 100%;
}
#dreamz-av .heroPills {
line-height: 1.55;
}
#dreamz-av .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-av .plantFacts {
gap: 7px;
}
#dreamz-av .plantFacts>div {
padding: 9px;
}
#dreamz-av .plantFacts strong {
font-size: 11px;
}
#dreamz-av .scanSummary {
padding: 12px;
}
#dreamz-av .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-av .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-av .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-av .phoneDevice .rowIcon {
display: grid;
}
#dreamz-av .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-av .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-av .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-av .sideTile strong {
font-size: 12px;
}
#dreamz-av .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-av .topbar,
#dreamz-av .heroActions,
#dreamz-av .finalActions,
#dreamz-av .contextSection,
#dreamz-av .valueCtaSection {
display: none;
}
#dreamz-av section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-av .hero {
padding-top: 20px;
}
}
#dreamz-av {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-av p {
margin: 0;
}
#dreamz-av main {
display: block;
}
#dreamz-av .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-av .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-av .heroAccent {
color: var(--black);
}
#dreamz-av .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-av .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-av .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-av .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-av .microcopy {
margin-top: 14px;
}
#dreamz-av .heroPills {
margin-top: 13px;
}
#dreamz-av .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-av .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-av .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-av .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-av .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-av .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-av .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-av .clientBand {
padding: 24px 0;
}
#dreamz-av .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-av .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-av .logoBox.wide {
font-size: 15px;
}
#dreamz-av .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-av .sectionHead p {
margin: 17px 0 0;
}
#dreamz-av .copy p {
margin: 16px 0 0;
}
#dreamz-av .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-av .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-av .aiJourney {
background: var(--black);
}
#dreamz-av .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-av .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-av .productPanel {
border-radius: 18px;
}
#dreamz-av .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-av .panelHead>strong {
font-size: 13px;
}
#dreamz-av .sampleTag {
font-size: 9px;
}
#dreamz-av .panelBody {
padding: 21px;
}
#dreamz-av .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-av .docHeader {
padding-bottom: 16px;
}
#dreamz-av .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-av .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-av .smallLabel {
font-size: 9px;
}
#dreamz-av .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-av .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-av .dataRow {
padding: 14px 0;
}
#dreamz-av .statusPill {
font-size: 8px;
}
#dreamz-av .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-av .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-av .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-av .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-av .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-av .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-av .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-av .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-av .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-av .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-av .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-av .hierarchy strong {
color: var(--navy);
}
#dreamz-av .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-av .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-av .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-av .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-av .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-av .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-av .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-av .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-av .mobileAccount small {
font-size: 9px;
}
#dreamz-av .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-av .sideTile strong {
font-size: 12px;
}
#dreamz-av .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-av .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-av .mobileAction {
font-size: 9px;
}
#dreamz-av .journeyRow strong {
font-size: 13px;
}
#dreamz-av .journeyRow small {
font-size: 11px;
}
#dreamz-av .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-av .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-av .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-av .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-av .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-av .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-av .utilityReadout small {
font-size: 12px;
}
#dreamz-av .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-av .darkSection {
background: var(--black);
}
#dreamz-av .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-av .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-av .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-av .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-av .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-av .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-av .assistantHead small {
font-size: 11px;
}
#dreamz-av .assistantNote {
font-size: 11px;
}
#dreamz-av .reportTags span {
font-size: 10px;
}
#dreamz-av .card p {
margin: 12px 0 0;
}
#dreamz-av .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-av .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-av .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-av .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-av .cards>.card p {
padding-bottom: 22px;
}
#dreamz-av .benefitBand {
background: var(--black);
}
#dreamz-av .benefit {
background: var(--black-soft);
}
#dreamz-av .inlineCta h3 {
font-size: 20px;
}
#dreamz-av .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-av .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-av .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-av .valueCtaSection {
padding: 32px 0;
}
#dreamz-av .proofCard p {
margin-top: 15px;
}
#dreamz-av .proofCard h3 {
font-size: 23px;
}
#dreamz-av .integrationNote {
margin-top: 23px;
}
#dreamz-av .ctaPanel {
background: var(--black);
}
#dreamz-av .ctaPanel p {
margin-top: 16px;
}
#dreamz-av .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-av .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-av a:hover {
text-decoration: none;
}
#dreamz-av .textCta:hover {
color: var(--navy);
}
#dreamz-av .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-av .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-av .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-av .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-av .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-av .heroVisual {
max-width: 548px;
}
#dreamz-av .hero .lead {
max-width: 700px;
}
#dreamz-av .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-av .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-av .logoBox:last-child {
grid-column: auto;
}
#dreamz-av .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-av .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-av .inlineCtaActions .button {
flex: 1;
}
#dreamz-av .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-av .hero {
padding: 28px 0 40px;
}
#dreamz-av .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-av .heroActions {
gap: 10px;
}
#dreamz-av .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-av .breadcrumb {
margin-bottom: 21px;
}
#dreamz-av .hero .eyebrow {
font-size: 11px;
}
#dreamz-av .heroVisual {
max-width: 480px;
}
#dreamz-av .heroPills {
row-gap: 9px;
}
#dreamz-av .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-av .heroPills span+span {
padding-left: 7px;
}
#dreamz-av .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-av .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-av .clientBand {
padding: 25px 0;
}
#dreamz-av .copy h2 {
font-size: 33px;
}
#dreamz-av .panelBody {
padding: 16px;
}
#dreamz-av .panelHead {
padding: 15px;
}
#dreamz-av .panelHead>strong {
font-size: 12px;
}
#dreamz-av .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-av .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-av .docHeader strong {
font-size: 18px;
}
#dreamz-av .docHeader small {
font-size: 10px;
}
#dreamz-av .rowCopy strong {
font-size: 11px;
}
#dreamz-av .rowCopy small {
font-size: 10px;
}
#dreamz-av .miniStats {
gap: 7px;
}
#dreamz-av .miniStats strong {
font-size: 21px;
}
#dreamz-av .miniStats span {
font-size: 9px;
}
#dreamz-av .miniStats>div {
padding: 10px 8px;
}
#dreamz-av .plantFacts {
gap: 8px;
}
#dreamz-av .plantFacts>div {
padding: 10px;
}
#dreamz-av .plantFacts strong {
font-size: 11px;
}
#dreamz-av .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-av .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-av .utilityReadout span {
font-size: 8px;
}
#dreamz-av .utilityReadout strong {
font-size: 24px;
}
#dreamz-av .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-av .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-av .comparisonTable {
font-size: 11px;
}
#dreamz-av .comparisonTable th,
#dreamz-av .comparisonTable td {
padding: 13px 9px;
}
#dreamz-av .contextSection {
padding: 0 0 22px;
}
#dreamz-av .valueCtaSection {
padding: 25px 0;
}
#dreamz-av .inlineCtaActions {
flex-direction: column;
}
#dreamz-av .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-av .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-av .phoneDevice {
width: 222px;
}
#dreamz-av .phoneDevice .rowIcon {
display: grid;
}
#dreamz-av .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-av .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-av .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-av .sideTile p {
margin: 0;
}
#dreamz-av .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-av .dataRow {
gap: 8px;
}
#dreamz-av .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-av .miniStats strong {
font-size: 19px;
}
#dreamz-av .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-av .heroActions .button {
width: 100%;
}
#dreamz-av .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-av .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-av .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-av .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-av .aiStep span {
font-size: 13px;
}
#dreamz-av .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-av {
background: var(--white);
}
#dreamz-av img {
display: block;
max-width: 100%;
}
#dreamz-av h1,
#dreamz-av h2,
#dreamz-av h3 {
text-wrap: balance;
}
#dreamz-av .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-av .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-av .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-av .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-av .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-av .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-av .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-av .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-av .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-av .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-av .industryIntro {
padding: 78px 0 66px;
}
#dreamz-av .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-av .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-av .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-av .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-av .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-av .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-av .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-av .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-av .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-av .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-av .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-av .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-av .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-av .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-av .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-av .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-av .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-av .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-av .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-av .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-av .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-av .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-av .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-av .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-av .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-av .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-av .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-av .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-av .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-av .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-av .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-av .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-av .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-av .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-av .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-av .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-av .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-av .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-av .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-av .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-av .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-av .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-av .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-av .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-av .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-av .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-av .rfidSpotlight {
background: #fff;
}
#dreamz-av .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-av .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-av .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-av .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-av .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-av .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-av .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-av .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-av .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-av .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-av .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-av .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-av .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-av .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-av .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-av .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-av .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-av .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-av .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-av .featurePanel {
display: none;
}
#dreamz-av .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-av .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-av .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-av .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-av .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-av .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-av .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-av .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-av .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-av .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-av .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-av .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-av .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-av .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-av .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-av .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-av .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-av .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-av .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-av .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-av .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-av .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-av .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-av .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-av .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-av .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-av .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-av .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-av .aiReviewBody {
padding: 18px;
}
#dreamz-av .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-av .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-av .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-av .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-av .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-av .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-av .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-av .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-av .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-av .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-av .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-av .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-av .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-av .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-av .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-av .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-av .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-av .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-av .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-av .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-av .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-av .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-av .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-av .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-av .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-av .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-av .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-av .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-av .workflowDetails .featureList,
#dreamz-av .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-av .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-av .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-av .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-av #av-connected-tools {
background: #fff;
}
#dreamz-av #av-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-av .featureTab,
#dreamz-av .industryPriority,
#dreamz-av summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-av .industryIntroHead {
gap: 30px;
}
#dreamz-av .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-av .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-av .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-av .factoryWorkflow {
padding: 22px;
}
#dreamz-av .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-av .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-av .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-av .industryPriorityGrid {
gap: 14px;
}
#dreamz-av .industryPriority {
padding: 22px 19px;
}
#dreamz-av .industryPriority h3 {
font-size: 21px;
}
#dreamz-av .industryPriority p {
font-size: 12px;
}
#dreamz-av .priorityLink {
font-size: 10px;
}
#dreamz-av .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-av .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-av .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-av .vedaUseCases>div {
display: block;
}
#dreamz-av .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-av .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-av .featureTabs {
gap: 8px;
}
#dreamz-av .featureTab {
min-height: 108px;
}
#dreamz-av .featureStage,
#dreamz-av .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-av .rfidSpotlight .spotlightMedia,
#dreamz-av .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-av .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-av .featurePanel {
min-height: 0;
}
#dreamz-av .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-av .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-av .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-av .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-av .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-av .clientBand {
padding: 22px 0;
}
#dreamz-av .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-av .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-av .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-av .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-av .industryIntro {
padding: 53px 0;
}
#dreamz-av .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-av .industryIntroHead>p {
font-size: 14px;
}
#dreamz-av .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-av .industryPriority {
padding: 23px;
}
#dreamz-av .industryPriority h3 {
font-size: 24px;
}
#dreamz-av .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-av .industryPriority p {
font-size: 13px;
}
#dreamz-av .priorityLink {
font-size: 11px;
}
#dreamz-av .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-av .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-av .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-av .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-av .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-av .vedaUseCases>div {
display: flex;
}
#dreamz-av .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-av .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-av .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-av .vedaMessage.user {
margin-left: 25px;
}
#dreamz-av .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-av .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-av .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-av .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-av .spotlightHead h2 {
font-size: 32px;
}
#dreamz-av .spotlightHead>p {
font-size: 14px;
}
#dreamz-av .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-av .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-av .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-av .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-av .featurePanel h3 {
font-size: 24px;
}
#dreamz-av .featurePanel>p {
font-size: 13px;
}
#dreamz-av .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-av .spotlightChecks>li {
font-size: 12px;
}
#dreamz-av .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-av .spotlightActions .button {
width: 100%;
}
#dreamz-av .spotlightScope {
font-size: 10px;
}
#dreamz-av .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-av .mediaTitle strong {
font-size: 11px;
}
#dreamz-av .mediaTitle div>span {
font-size: 8px;
}
#dreamz-av .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-av .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-av .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-av .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-av .aiReviewBody {
padding: 13px;
}
#dreamz-av .aiIssue {
padding: 13px;
}
#dreamz-av .aiIssue strong {
font-size: 14px;
}
#dreamz-av .aiEvidence {
gap: 6px;
}
#dreamz-av .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-av .aiEvidence strong {
font-size: 9px;
}
#dreamz-av .aiEvidence span {
font-size: 7px;
}
#dreamz-av .exampleLabel {
font-size: 6px;
}
#dreamz-av .factoryWorkflows {
padding: 55px 0;
}
#dreamz-av .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-av .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-av .industryRibbonGrid {
gap: 12px;
}
#dreamz-av .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-av .spotlightHead h2 {
font-size: 29px;
}
#dreamz-av .featureStage {
padding: 19px 13px;
}
#dreamz-av .mediaTitle>.icon {
display: none;
}
#dreamz-av .exampleLabel {
display: none;
}
#dreamz-av .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-av .featureTabs {
display: none;
}
#dreamz-av .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-av .featureStage {
display: block;
}
#dreamz-av .featurePanel {
color: #000;
}
}
#dreamz-av #av-delivery-features-1:checked~.featureTabs label[for="av-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-delivery-features-1:focus-visible~.featureTabs label[for="av-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-av #av-delivery-features-2:checked~.featureTabs label[for="av-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-delivery-features-2:focus-visible~.featureTabs label[for="av-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-av #av-delivery-features-3:checked~.featureTabs label[for="av-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-delivery-features-3:focus-visible~.featureTabs label[for="av-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-av #av-delivery-features-4:checked~.featureTabs label[for="av-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-delivery-features-4:focus-visible~.featureTabs label[for="av-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-av #av-delivery-features-5:checked~.featureTabs label[for="av-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-delivery-features-5:focus-visible~.featureTabs label[for="av-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-av #av-rfid-features-1:checked~.featureTabs label[for="av-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-rfid-features-1:focus-visible~.featureTabs label[for="av-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-av #av-rfid-features-2:checked~.featureTabs label[for="av-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-rfid-features-2:focus-visible~.featureTabs label[for="av-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-av #av-rfid-features-3:checked~.featureTabs label[for="av-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-rfid-features-3:focus-visible~.featureTabs label[for="av-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-av #av-rfid-features-4:checked~.featureTabs label[for="av-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-rfid-features-4:focus-visible~.featureTabs label[for="av-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-av #av-rfid-features-5:checked~.featureTabs label[for="av-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-rfid-features-5:focus-visible~.featureTabs label[for="av-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-av #av-ai-decisions-features-1:checked~.featureTabs label[for="av-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-ai-decisions-features-1:focus-visible~.featureTabs label[for="av-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-av #av-ai-decisions-features-2:checked~.featureTabs label[for="av-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-ai-decisions-features-2:focus-visible~.featureTabs label[for="av-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-av #av-ai-decisions-features-3:checked~.featureTabs label[for="av-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-ai-decisions-features-3:focus-visible~.featureTabs label[for="av-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-av #av-ai-decisions-features-4:checked~.featureTabs label[for="av-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-ai-decisions-features-4:focus-visible~.featureTabs label[for="av-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-av #av-ai-decisions-features-5:checked~.featureTabs label[for="av-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-av #av-ai-decisions-features-5:focus-visible~.featureTabs label[for="av-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-av #av-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-av .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .featureMediaPanels {
min-width: 0;
}
#dreamz-av .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-av .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-av .featureMediaPanels .windowTop strong,
#dreamz-av .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-av .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-av .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-av .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-av .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-av .featureMediaPanels .windowBody>*,
#dreamz-av .featureMediaPanels .spectrumGrid>*,
#dreamz-av .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-av .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-av .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-av .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-av .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-av .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-av .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-av .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-av .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-av .pin2 {
top: 88px;
right: 88px;
}
#dreamz-av .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-av .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-av .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-av .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-av .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-av .featureMediaPanels .graphNodes .node.n1,
#dreamz-av .featureMediaPanels .graphNodes .node.n2,
#dreamz-av .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-av .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-av .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-av .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-av .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-av .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-av .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-av .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-av .freshGraphic * {
box-sizing: border-box;
}
#dreamz-av .rfPanel,
#dreamz-av .aiInsightCard,
#dreamz-av .forecastVisualCard,
#dreamz-av .forecastSuggestion,
#dreamz-av .knowledgeTile,
#dreamz-av .chatConversation,
#dreamz-av .trainingSummary,
#dreamz-av .moduleCard,
#dreamz-av .qualityHeatCard,
#dreamz-av .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-av .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-av .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-av .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-av .statusPill,
#dreamz-av .cardTag,
#dreamz-av .forecastSuggestion b,
#dreamz-av .moduleCard b,
#dreamz-av .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-av .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-av .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-av .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-av .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-av .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-av .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-av .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-av .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-av .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-av .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-av .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-av .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-av .dot.good {
background: #298EEC;
}
#dreamz-av .dot.warn {
background: #F4A62A;
}
#dreamz-av .dot.bad {
background: #EB6B53;
}
#dreamz-av .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-av .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-av .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-av .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-av .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-av .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-av .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-av .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-av .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-av .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-av .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-av .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-av .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-av .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-av .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-av .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-av .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-av .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-av .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-av .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-av .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-av .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-av .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-av .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-av .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-av .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-av .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-av .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-av .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-av .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-av .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-av .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-av .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-av .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-av .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-av .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-av .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-av .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-av .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-av .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-av .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-av .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-av .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-av .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-av .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-av .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-av .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-av .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-av .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-av .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-av .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-av .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-av .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-av .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-av .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-av .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-av .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-av .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-av .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-av .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-av .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-av .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-av .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-av .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-av .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-av .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-av .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-av .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-av .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-av .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-av .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-av .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-av .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-av .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-av .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-av .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-av .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-av .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-av .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-av .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-av .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-av .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-av .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-av .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-av .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-av .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-av .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-av .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-av .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-av .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-av .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-av .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-av .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-av .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-av .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-av .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-av .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-av .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-av .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-av .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-av .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-av .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-av .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-av .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-av .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-av .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-av .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-av .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-av .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-av .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-av .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-av .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-av .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-av .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-av .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-av .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-av .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-av .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-av .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-av .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-av .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-av .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-av .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-av .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-av .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-av .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-av .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-av .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-av .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-av .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-av .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-av .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-av .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-av .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-av .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-av .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-av .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-av .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-av .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-av .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-av .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-av .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-av .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-av .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-av .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-av .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-av .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-av .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-av .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-av .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-av .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-av .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-av .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-av .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-av .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-av .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-av .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-av .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-av .rfTrackLayout,
#dreamz-av .rfFlowLayout,
#dreamz-av .rfAlertGrid,
#dreamz-av .rfCycleLayout,
#dreamz-av .rfSitesLayout,
#dreamz-av .aiRootLayout,
#dreamz-av .aiForecastLayout,
#dreamz-av .aiChatLayout,
#dreamz-av .aiTrainingLayout,
#dreamz-av .aiQualityLayout,
#dreamz-av .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-av .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-av .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-av .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-av .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-av .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-av .aiLink {
display: none;
}
}
#dreamz-av .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-av .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-av .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-av .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-av .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-av .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-av .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-av .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-av .mfgHero h1>span {
display: block;
}
#dreamz-av .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-av .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-av .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-av .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-av .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-av .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-av .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-av .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-av .mfgHeroContent {
min-height: 610px;
}
#dreamz-av .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-av .mfgHeroLead {
font-size: 16px;
}
#dreamz-av .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-av .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-av .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-av .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-av .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-av .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-av .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-av .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-av .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-av .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-av .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-av .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-av .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-av .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-av .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-av .mfgHero {
background: #fff;
color: #000;
}
#dreamz-av .mfgHeroScene,
#dreamz-av .mfgHeroActions {
display: none;
}
#dreamz-av .mfgHeroContent {
min-height: 0;
}
#dreamz-av .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
#dreamz-av #av-rfid .featureStage,
#dreamz-av #av-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-av .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-av .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-av .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-av .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-av .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-av .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-av .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-av .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-av .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-av .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-av .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-av .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-av .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-av .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-av .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-av .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-av .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-av .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-av .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-av .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-av .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-av .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-av .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-av .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-av .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-av .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-av .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-av .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-av .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-av .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-av .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-av .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-av .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-av .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-av .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-av .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-av .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-av .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-av .mfgGallery .flowArrow {
display: none;
}
#dreamz-av .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-av .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-av .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-av .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-av .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-av .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-av .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-av .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-av .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-av .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-av .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-av .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-av .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-av .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-av .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-av .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-av .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-av .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-av .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-av .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-av .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-av .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-av .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-av .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-av .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-av .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-av .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-av .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-av .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-av .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-av .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-av .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-av .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-av .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-av .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-av .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-av .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-av .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-av .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-av .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-av .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-av .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-av .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-av .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-av .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-av .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-av .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-av .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-av .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-av .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-av .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-av .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-av .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-av .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-av .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-av .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-av .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-av .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-av .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-av .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-av .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-av .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-av .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-av .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-av .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-av .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-av .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-av .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-av .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-av .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-av .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-av .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-av .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-av .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-av .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-av .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-av .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-av .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-av .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-av .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-av .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-av .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-av .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-av .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-av .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-av .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-av .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-av .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-av .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-av .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-av .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-av .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-av .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-av .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-av .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-av .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-av .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-av .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-av .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-av .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-av .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-av .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-av .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-av .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-av .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-av .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-av .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-av #av-rfid .featureStage,
#dreamz-av #av-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-av #av-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-av .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-av #av-rfid .featureStage,
#dreamz-av #av-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-av .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-av .mfgGallery .freshWindow {
height: auto;
}
#dreamz-av .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-av .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-av .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-av .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-av .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-av .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-av .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-av .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-av .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-av .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-av .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-av .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-av .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-av .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-av .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-av .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-av .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-av .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-av .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-av .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-av .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-av .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-av .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-av .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-av .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-av .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-av .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-av .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-av .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-av .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-av .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-av .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-av .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-av .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-av .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-av .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-av .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-av .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-av .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-av .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-av .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-av .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-av .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-av .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-av .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-av .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-av .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-av .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-av .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-av .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-av .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-av .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-av .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-av .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-av .avVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-av .avGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-av .avIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-av .avStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-av .avVisualGallery>.avGraphic {
display: none;
}
#dreamz-av #av-delivery .featureStage,
#dreamz-av #av-rfid .featureStage,
#dreamz-av #av-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-av #av-rfid .avVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-av #av-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-av .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-av .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-av .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-av .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
}
@media (max-width:1100px) {
#dreamz-av #av-delivery .featureStage,
#dreamz-av #av-rfid .featureStage,
#dreamz-av #av-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-av #av-rfid .avVisualGallery,
#dreamz-av #av-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-av .mfgHeroScene {
height: 290px;
}
#dreamz-av #av-delivery .featureStage,
#dreamz-av #av-rfid .featureStage,
#dreamz-av #av-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-av .avVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-av .avVisualGallery>.avGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-av #av-delivery-features-1:checked~.featureStage .avVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-av #av-delivery-features-2:checked~.featureStage .avVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-av #av-delivery-features-3:checked~.featureStage .avVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-av #av-delivery-features-4:checked~.featureStage .avVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-av #av-delivery-features-5:checked~.featureStage .avVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-av #av-rfid-features-1:checked~.featureStage .avVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-av #av-rfid-features-2:checked~.featureStage .avVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-av #av-rfid-features-3:checked~.featureStage .avVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-av #av-rfid-features-4:checked~.featureStage .avVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-av #av-rfid-features-5:checked~.featureStage .avVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-av #av-ai-decisions-features-1:checked~.featureStage .avVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-av #av-ai-decisions-features-2:checked~.featureStage .avVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-av #av-ai-decisions-features-3:checked~.featureStage .avVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-av #av-ai-decisions-features-4:checked~.featureStage .avVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-av #av-ai-decisions-features-5:checked~.featureStage .avVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-av .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-av .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-av .avIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-av .avGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-av .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-av .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-av .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-av .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-av .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-av .mfgHeroContent {
background: transparent;
}
#dreamz-av .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-av .avIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-av .avIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-av .avGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-av .avVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-av .mfgHeroScene img {
object-position: 78% 50%;
}
}
@media(max-width:600px) {
#dreamz-av .mfgHeroScene img {
object-position: 80% 50%;
}
}
@media(max-width:767px) {
.new-theme-design .mfgHeroScene {
display: none;
}
.new-theme-design  .featureContent{
order: 2;
}
.new-theme-design .avVisualGallery{
order: 0;
}
}  #dreamz-eqr .industryIntroHead.compact,
#dreamz-eqr .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-eqr .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-eqr .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-eqr .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-eqr .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-eqr .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-eqr .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-eqr .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-eqr .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-eqr .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-eqr .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-eqr .windowDots {
display: flex;
gap: 5px;
}
#dreamz-eqr .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-eqr .windowBody {
padding: 16px;
}
#dreamz-eqr .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-eqr .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-eqr .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-eqr .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-eqr .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-eqr .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-eqr .chartGridLine.l1 {
top: 34px;
}
#dreamz-eqr .chartGridLine.l2 {
top: 65px;
}
#dreamz-eqr .chartGridLine.l3 {
top: 96px;
}
#dreamz-eqr .chartGridLine.l4 {
top: 127px;
}
#dreamz-eqr .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-eqr .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-eqr .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-eqr .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-eqr .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-eqr .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-eqr .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-eqr .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-eqr .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-eqr .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-eqr .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-eqr .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-eqr .noteCard p,
#dreamz-eqr .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-eqr .alertStack {
display: grid;
gap: 10px;
}
#dreamz-eqr .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-eqr .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-eqr .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-eqr .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-eqr .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-eqr .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-eqr .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-eqr .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-eqr .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-eqr .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-eqr .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-eqr .scheduleBoard h4,
#dreamz-eqr .todoBoard h4,
#dreamz-eqr .siteBoard h4,
#dreamz-eqr .chatPanel h4,
#dreamz-eqr .lessonPanel h4,
#dreamz-eqr .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-eqr .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-eqr .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-eqr .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-eqr .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-eqr .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-eqr .taskRow:last-child {
border-bottom: 0;
}
#dreamz-eqr .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-eqr .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-eqr .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-eqr .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-eqr .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-eqr .inventoryTable th,
#dreamz-eqr .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-eqr .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-eqr .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-eqr .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-eqr .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-eqr .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-eqr .phoneBody {
padding: 12px;
}
#dreamz-eqr .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-eqr .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-eqr .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-eqr .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-eqr .progressList {
display: grid;
gap: 10px;
}
#dreamz-eqr .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-eqr .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-eqr .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-eqr .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-eqr .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-eqr .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-eqr .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-eqr .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-eqr .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-eqr .pin1 {
top: 56px;
left: 58px;
}
#dreamz-eqr .pin2 {
top: 88px;
right: 88px;
}
#dreamz-eqr .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-eqr .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-eqr .siteRow:last-child {
border-bottom: 0;
}
#dreamz-eqr .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-eqr .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-eqr .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-eqr .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-eqr .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-eqr .graphNodes:before,
#dreamz-eqr .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-eqr .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-eqr .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-eqr .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-eqr .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-eqr .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-eqr .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-eqr .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-eqr .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-eqr .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-eqr .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-eqr .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-eqr .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-eqr .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-eqr .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-eqr .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-eqr .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-eqr .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-eqr .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-eqr .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-eqr .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-eqr .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-eqr .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-eqr .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-eqr .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-eqr .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-eqr .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-eqr .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-eqr .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-eqr .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-eqr .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-eqr .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-eqr .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-eqr .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-eqr #eqr-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-eqr #eqr-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-eqr #eqr-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-eqr #eqr-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-eqr #eqr-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-eqr #eqr-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-eqr #eqr-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-eqr #eqr-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-eqr #eqr-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-eqr #eqr-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-eqr #eqr-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-eqr #eqr-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-eqr #eqr-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-eqr #eqr-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-eqr #eqr-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-eqr #eqr-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-eqr #eqr-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-eqr #eqr-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-eqr #eqr-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-eqr #eqr-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-eqr #eqr-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-eqr #eqr-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-eqr #eqr-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-eqr #eqr-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-eqr #eqr-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-eqr #eqr-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-eqr #eqr-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-eqr #eqr-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-eqr #eqr-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-eqr .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-eqr .featureMediaPanels {
min-height: 0;
}
#dreamz-eqr .inventorySplit,
#dreamz-eqr .forecastGrid,
#dreamz-eqr .siteGrid,
#dreamz-eqr .spectrumGrid,
#dreamz-eqr .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-eqr .metricGrid,
#dreamz-eqr .lessonCards,
#dreamz-eqr .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-eqr .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-eqr {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-eqr * {
box-sizing: border-box;
}
#dreamz-eqr {
scroll-behavior: smooth;
}
#dreamz-eqr {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-eqr a {
color: inherit;
text-decoration: none;
}
#dreamz-eqr .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-eqr .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-eqr .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-eqr .brand span {
color: var(--brand);
}
#dreamz-eqr .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-eqr .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-eqr .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-eqr .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-eqr .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-eqr .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-eqr .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-eqr .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-eqr h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-eqr .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-eqr .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-eqr .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-eqr .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-eqr .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-eqr .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-eqr .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-eqr .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-eqr .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-eqr .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-eqr .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-eqr .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-eqr .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-eqr .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-eqr .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-eqr .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-eqr .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-eqr .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-eqr .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-eqr .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-eqr .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-eqr .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-eqr .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-eqr .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-eqr .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-eqr .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-eqr .sectionHead {
margin-bottom: 44px;
}
#dreamz-eqr .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-eqr .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-eqr .aiJourney h2 {
color: #fff;
}
#dreamz-eqr .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-eqr .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-eqr .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-eqr .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-eqr .aiStep:last-child::after {
display: none;
}
#dreamz-eqr .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-eqr .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-eqr .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-eqr .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-eqr .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-eqr .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-eqr .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-eqr .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-eqr .capability {
background: #fff;
}
#dreamz-eqr .capability.alt {
background: var(--sky-2);
}
#dreamz-eqr .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-eqr .twoCol.reverse .visual {
order: 2;
}
#dreamz-eqr .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-eqr .visual .placeholder {
min-height: 355px;
}
#dreamz-eqr .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-eqr .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-eqr details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-eqr details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-eqr details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-eqr details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-eqr details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-eqr details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-eqr .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-eqr .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-eqr .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-eqr .darkSection h2,
#dreamz-eqr .darkSection h3 {
color: #fff;
}
#dreamz-eqr .darkSection .sectionHead p,
#dreamz-eqr .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-eqr .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-eqr .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-eqr .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-eqr .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-eqr .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-eqr .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-eqr .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-eqr .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-eqr .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-eqr .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-eqr .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-eqr .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-eqr .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-eqr .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-eqr .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-eqr .benefitBand h2 {
color: #fff;
}
#dreamz-eqr .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-eqr .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-eqr .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-eqr .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-eqr .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-eqr .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-eqr .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-eqr .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-eqr .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-eqr .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-eqr .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-eqr .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-eqr .faq {
max-width: 900px;
}
#dreamz-eqr .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-eqr .ctaPanel h2 {
color: #fff;
}
#dreamz-eqr .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-eqr .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-eqr .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-eqr .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-eqr .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-eqr .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-eqr .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-eqr .inlineCta.dark h3 {
color: #fff;
}
#dreamz-eqr .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-eqr .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-eqr .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-eqr .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-eqr .button.yellow:hover {
background: #FFD84D;
}
#dreamz-eqr .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-eqr .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-eqr .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-eqr .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-eqr footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-eqr .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-eqr .heroGrid,
#dreamz-eqr .twoCol,
#dreamz-eqr .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-eqr .twoCol.reverse .visual {
order: initial;
}
#dreamz-eqr .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-eqr .ratingGrid,
#dreamz-eqr .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-eqr .ratingLead,
#dreamz-eqr .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-eqr .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-eqr .aiStep:nth-child(3)::after,
#dreamz-eqr .aiStep:last-child::after {
display: none;
}
#dreamz-eqr .outcomeGrid,
#dreamz-eqr .challengeGrid,
#dreamz-eqr .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-eqr .cards,
#dreamz-eqr .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-eqr .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-eqr .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-eqr .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-eqr .hero {
padding: 58px 0 52px;
}
#dreamz-eqr .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-eqr .aiStep::after {
display: none;
}
#dreamz-eqr .logoRow,
#dreamz-eqr .ratingGrid,
#dreamz-eqr .awardGrid,
#dreamz-eqr .outcomeGrid,
#dreamz-eqr .challengeGrid,
#dreamz-eqr .benefitGrid,
#dreamz-eqr .cards,
#dreamz-eqr .proofCards,
#dreamz-eqr .integrationGrid,
#dreamz-eqr .featureList {
grid-template-columns: 1fr;
}
#dreamz-eqr .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-eqr .ctaPanel {
padding: 34px 24px;
}
#dreamz-eqr .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-eqr .inlineCtaActions {
width: 100%;
}
#dreamz-eqr .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-eqr {
--muted: #526A7C;
--shadow: none;
}
#dreamz-eqr {
background: var(--sky-2);
}
#dreamz-eqr p {
margin-bottom: 0;
}
#dreamz-eqr [id] {
scroll-margin-top: 94px;
}
#dreamz-eqr svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-eqr .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-eqr .darkSection h2,
#dreamz-eqr .darkSection h3,
#dreamz-eqr .aiJourney h2,
#dreamz-eqr .benefitBand h2,
#dreamz-eqr .ctaPanel h2,
#dreamz-eqr .inlineCta.dark h3 {
color: #fff;
}
#dreamz-eqr .wrap>*,
#dreamz-eqr .heroGrid>*,
#dreamz-eqr .twoCol>*,
#dreamz-eqr .ctaPanel>* {
min-width: 0;
}
#dreamz-eqr .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-eqr .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-eqr .skipLink:focus {
transform: none;
}
#dreamz-eqr a:focus-visible,
#dreamz-eqr summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-eqr .darkSection a:focus-visible,
#dreamz-eqr .darkSection summary:focus-visible,
#dreamz-eqr .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-eqr .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-eqr .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-eqr .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-eqr .brandName>span {
color: var(--brand-dark);
}
#dreamz-eqr .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-eqr .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-eqr .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-eqr .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-eqr .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-eqr .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-eqr .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-eqr .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-eqr .hero h1 {
line-height: 1.06;
}
#dreamz-eqr .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-eqr .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-eqr .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-eqr .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-eqr .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-eqr .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-eqr .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-eqr .clientBand {
padding: 27px 0;
}
#dreamz-eqr .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-eqr .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-eqr .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-eqr .logoBox.wide {
font-size: 12px;
}
#dreamz-eqr .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-eqr h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-eqr .sectionHead {
margin-bottom: 36px;
}
#dreamz-eqr .eyebrow {
line-height: 1.5;
}
#dreamz-eqr .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-eqr .aiStep {
min-height: 162px;
}
#dreamz-eqr .aiStep strong {
line-height: 1.35;
}
#dreamz-eqr .aiStep span {
line-height: 1.65;
}
#dreamz-eqr .aiCallout {
margin-top: 24px;
}
#dreamz-eqr .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-eqr .outcome>.icon {
color: var(--navy);
}
#dreamz-eqr .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-eqr .awardItem>.icon {
color: var(--navy);
}
#dreamz-eqr .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-eqr .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-eqr .twoCol.reverse .visual {
order: -1;
}
#dreamz-eqr .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-eqr .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-eqr .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-eqr .featureList {
gap: 13px 18px;
}
#dreamz-eqr .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-eqr .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-eqr .check .icon {
width: 14px;
height: 14px;
}
#dreamz-eqr details.capabilityMore {
margin-bottom: 0;
}
#dreamz-eqr .capabilityMore summary {
min-height: 34px;
}
#dreamz-eqr .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-eqr .textCta {
font-size: 14px;
}
#dreamz-eqr .visual {
min-width: 0;
}
#dreamz-eqr .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-eqr .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-eqr .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-eqr .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-eqr .panelBody {
padding: 20px;
}
#dreamz-eqr .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-eqr .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-eqr .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-eqr .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-eqr .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-eqr .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-eqr .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-eqr .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-eqr .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-eqr .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-eqr .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-eqr .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-eqr .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-eqr .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-eqr .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-eqr .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-eqr .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-eqr .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-eqr .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-eqr .dataRow:last-child {
border-bottom: 0;
}
#dreamz-eqr .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-eqr .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-eqr .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-eqr .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-eqr .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-eqr .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-eqr .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-eqr .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-eqr .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-eqr .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-eqr .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-eqr .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-eqr .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-eqr .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-eqr .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-eqr .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-eqr .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-eqr .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-eqr .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-eqr .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-eqr .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-eqr .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-eqr .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-eqr .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-eqr .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-eqr .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-eqr .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-eqr .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-eqr .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-eqr .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-eqr .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-eqr .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-eqr .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-eqr .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-eqr .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-eqr .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-eqr .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-eqr .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-eqr .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-eqr .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-eqr .promptList {
display: grid;
gap: 10px;
}
#dreamz-eqr .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-eqr .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-eqr .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-eqr .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-eqr .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-eqr .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-eqr .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-eqr .quoteTable th,
#dreamz-eqr .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-eqr .quoteTable td:first-child {
width: 64%;
}
#dreamz-eqr .quoteTable th:last-child,
#dreamz-eqr .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-eqr .quoteTable strong {
font-size: 11px;
}
#dreamz-eqr .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-eqr .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-eqr .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-eqr .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-eqr .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-eqr .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-eqr .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-eqr .orderJourney {
margin: 20px 0;
}
#dreamz-eqr .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-eqr .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-eqr .journeyRow:last-child:before {
display: none;
}
#dreamz-eqr .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-eqr .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-eqr .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-eqr .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-eqr .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-eqr .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-eqr .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-eqr .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-eqr .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-eqr .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-eqr .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-eqr .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-eqr .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-eqr .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-eqr .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-eqr .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-eqr .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-eqr .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-eqr .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-eqr .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-eqr .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-eqr .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-eqr .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-eqr .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-eqr .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-eqr .customerTimeline strong {
color: #fff;
}
#dreamz-eqr .customerTimeline small {
color: #BFBFBF;
}
#dreamz-eqr .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-eqr .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-eqr .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-eqr .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-eqr .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-eqr .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-eqr .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-eqr .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-eqr .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-eqr .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-eqr .chartTitle strong {
font-size: 12px;
}
#dreamz-eqr .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-eqr .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-eqr .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-eqr .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-eqr .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-eqr .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-eqr .inlineCtaActions {
max-width: 42%;
}
#dreamz-eqr .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-eqr .inlineCta h3 {
line-height: 1.35;
}
#dreamz-eqr .card {
box-shadow: none;
}
#dreamz-eqr .cardIcon {
box-shadow: none;
}
#dreamz-eqr .card h3 {
font-size: 22px;
}
#dreamz-eqr .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-eqr .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-eqr .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-eqr .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-eqr .ratingBand {
padding: 34px 0;
}
#dreamz-eqr .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-eqr .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-eqr .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-eqr .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-eqr .ratingItem:first-child {
border-left: 0;
}
#dreamz-eqr .proofCard h3 {
font-size: 23px;
}
#dreamz-eqr .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-eqr .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-eqr .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-eqr .integration {
min-height: 98px;
}
#dreamz-eqr .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-eqr .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-eqr .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-eqr .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-eqr .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-eqr .finalActions {
display: grid;
gap: 11px;
}
#dreamz-eqr .finalActions .button {
white-space: nowrap;
}
#dreamz-eqr .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-eqr .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-eqr .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-eqr .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-eqr .heroGrid {
gap: 30px;
}
#dreamz-eqr .twoCol {
gap: 32px;
}
#dreamz-eqr .panelBody {
padding: 16px;
}
#dreamz-eqr .panelHead {
padding: 16px;
}
#dreamz-eqr .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-eqr .pipelineColumns {
gap: 7px;
}
#dreamz-eqr .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-eqr .heroGrid,
#dreamz-eqr .twoCol,
#dreamz-eqr .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .heroGrid {
gap: 36px;
}
#dreamz-eqr .hero h1 {
max-width: 730px;
}
#dreamz-eqr .hero .lead {
max-width: 690px;
}
#dreamz-eqr .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-eqr .twoCol {
gap: 34px;
}
#dreamz-eqr .twoCol.reverse .visual {
order: initial;
}
#dreamz-eqr .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-eqr .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-eqr .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-eqr .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-eqr .ratingSectionGrid {
gap: 20px;
}
#dreamz-eqr .inlineCta {
align-items: flex-start;
}
#dreamz-eqr .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-eqr .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-eqr .card {
padding: 22px;
}
#dreamz-eqr .card h3 {
font-size: 21px;
}
#dreamz-eqr .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-eqr .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-eqr .cards,
#dreamz-eqr .proofCards {
grid-template-columns: 1fr;
}
#dreamz-eqr .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-eqr .inlineCta {
flex-direction: column;
}
#dreamz-eqr .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-eqr .inlineCtaActions .button {
flex: 1;
}
#dreamz-eqr .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-eqr .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-eqr .wrap {
width: calc(100% - 32px);
}
#dreamz-eqr [id] {
scroll-margin-top: 82px;
}
#dreamz-eqr .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-eqr .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-eqr .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-eqr .hero {
padding: 51px 0 48px;
}
#dreamz-eqr .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-eqr .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-eqr .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-eqr .hero .microcopy {
font-size: 11px;
}
#dreamz-eqr .heroPills span {
font-size: 9px;
}
#dreamz-eqr .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-eqr .sectionHead p {
font-size: 16px;
}
#dreamz-eqr .copy h2 {
font-size: 34px;
}
#dreamz-eqr .copy p {
font-size: 15px;
}
#dreamz-eqr .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-eqr .logoBox {
min-height: 53px;
}
#dreamz-eqr .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-eqr .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-eqr .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-eqr .aiStep strong {
font-size: 13px;
}
#dreamz-eqr .aiStep span {
font-size: 11px;
}
#dreamz-eqr .aiStep::after {
display: none;
}
#dreamz-eqr .outcomeGrid,
#dreamz-eqr .challengeGrid,
#dreamz-eqr .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .outcome {
padding: 24px;
}
#dreamz-eqr .outcome strong {
font-size: 22px;
}
#dreamz-eqr .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-eqr .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-eqr .featureList,
#dreamz-eqr .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .featureItem {
font-size: 13px;
}
#dreamz-eqr .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-eqr .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-eqr .panelHead {
padding: 15px 13px;
}
#dreamz-eqr .panelHead>strong {
font-size: 12px;
}
#dreamz-eqr .panelBody {
padding: 14px;
}
#dreamz-eqr .productPanel {
border-radius: 16px;
}
#dreamz-eqr .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-eqr .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-eqr .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-eqr .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-eqr .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-eqr .deal strong {
font-size: 10px;
}
#dreamz-eqr .deal small {
font-size: 9px;
}
#dreamz-eqr .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-eqr .mobileWorkspace {
gap: 12px;
}
#dreamz-eqr .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-eqr .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-eqr .sideTile {
padding: 10px;
}
#dreamz-eqr .sideTile strong {
font-size: 10px;
}
#dreamz-eqr .sideTile p {
font-size: 9px;
}
#dreamz-eqr .mobileHeader strong {
font-size: 15px;
}
#dreamz-eqr .mobileAccount strong {
font-size: 10px;
}
#dreamz-eqr .mobileAccount small {
font-size: 7px;
}
#dreamz-eqr .phoneDevice .rowIcon {
display: none;
}
#dreamz-eqr .quoteTable th,
#dreamz-eqr .quoteTable td {
padding: 12px 4px;
}
#dreamz-eqr .quoteTable strong {
font-size: 10px;
}
#dreamz-eqr .quoteTable small {
font-size: 8px;
}
#dreamz-eqr .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-eqr .docHeader strong {
font-size: 17px;
}
#dreamz-eqr .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-eqr .miniFlow span {
padding: 6px;
}
#dreamz-eqr .rowCopy strong {
font-size: 10px;
}
#dreamz-eqr .rowCopy small {
font-size: 8px;
}
#dreamz-eqr .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-eqr .miniStats {
gap: 7px;
}
#dreamz-eqr .miniStats>div {
padding: 9px;
}
#dreamz-eqr .miniStats strong {
font-size: 18px;
}
#dreamz-eqr .miniStats span {
font-size: 8px;
}
#dreamz-eqr .collectionStats>div {
padding: 13px;
}
#dreamz-eqr .collectionStats strong {
font-size: 24px;
}
#dreamz-eqr .customerHeader strong {
font-size: 17px;
}
#dreamz-eqr .customerFacts>div {
padding: 10px;
}
#dreamz-eqr .customerFacts strong {
font-size: 12px;
}
#dreamz-eqr .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-eqr .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-eqr .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-eqr .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-eqr .integration small {
font-size: 9px;
}
#dreamz-eqr .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-eqr .ctaPanel p {
font-size: 15px;
}
#dreamz-eqr .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-eqr .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-eqr .contextSection {
padding: 0 0 24px;
}
#dreamz-eqr .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-eqr .wrap {
width: calc(100% - 24px);
}
#dreamz-eqr .brand {
font-size: 18px;
}
#dreamz-eqr .brandMark {
width: 25px;
height: 25px;
}
#dreamz-eqr .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-eqr .copy h2 {
font-size: 31px;
}
#dreamz-eqr .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-eqr .phoneDevice {
width: 210px;
}
#dreamz-eqr .phoneDevice .rowIcon {
display: grid;
}
#dreamz-eqr .mobileSide {
gap: 8px;
}
#dreamz-eqr .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-eqr .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-eqr .sideTile p {
margin: 0;
}
#dreamz-eqr .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-eqr .collectionStats strong {
font-size: 21px;
}
#dreamz-eqr .inventoryIntro strong {
font-size: 14px;
}
#dreamz-eqr .dataRow {
gap: 7px;
}
#dreamz-eqr .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-eqr .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-eqr {
scroll-behavior: auto;
}
#dreamz-eqr *,
#dreamz-eqr *::before,
#dreamz-eqr *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-eqr {
background: var(--sky-2);
}
#dreamz-eqr .hero .eyebrow {
max-width: 100%;
}
#dreamz-eqr .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-eqr .ganttIllustration,
#dreamz-eqr .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-eqr .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-eqr .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-eqr .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-eqr .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-eqr .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-eqr .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-eqr .comparisonTable th,
#dreamz-eqr .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .comparisonTable th:first-child {
width: 23%;
}
#dreamz-eqr .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-eqr .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-eqr .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-eqr .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-eqr .card,
#dreamz-eqr .proofCard,
#dreamz-eqr .productPanel,
#dreamz-eqr .outcome,
#dreamz-eqr .benefit {
box-shadow: none;
}
#dreamz-eqr .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-eqr .hero .eyebrow {
font-size: 10px;
}
#dreamz-eqr .comparisonTable {
font-size: 11px;
}
#dreamz-eqr .comparisonTable th,
#dreamz-eqr .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-eqr .comparisonTable th:first-child {
width: 24%;
}
#dreamz-eqr .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-eqr .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
}
#dreamz-eqr .scheduleIllustration,
#dreamz-eqr .analyticsIllustration,
#dreamz-eqr .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-eqr .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-eqr .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-eqr .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-eqr .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-eqr .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-eqr .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-eqr .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-eqr .darkSection .textCta {
color: var(--yellow);
}
#dreamz-eqr .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-eqr .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-eqr .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-eqr .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-eqr .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-eqr .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-eqr .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-eqr .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-eqr .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-eqr .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-eqr .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-eqr .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-eqr .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-eqr .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-eqr .phoneDevice {
max-width: 100%;
}
#dreamz-eqr .heroPills {
line-height: 1.55;
}
#dreamz-eqr .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-eqr .plantFacts {
gap: 7px;
}
#dreamz-eqr .plantFacts>div {
padding: 9px;
}
#dreamz-eqr .plantFacts strong {
font-size: 11px;
}
#dreamz-eqr .scanSummary {
padding: 12px;
}
#dreamz-eqr .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-eqr .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-eqr .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-eqr .phoneDevice .rowIcon {
display: grid;
}
#dreamz-eqr .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-eqr .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-eqr .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-eqr .sideTile strong {
font-size: 12px;
}
#dreamz-eqr .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-eqr .topbar,
#dreamz-eqr .heroActions,
#dreamz-eqr .finalActions,
#dreamz-eqr .contextSection,
#dreamz-eqr .valueCtaSection {
display: none;
}
#dreamz-eqr section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-eqr .hero {
padding-top: 20px;
}
}
#dreamz-eqr {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-eqr p {
margin: 0;
}
#dreamz-eqr main {
display: block;
}
#dreamz-eqr .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-eqr .hero h1 {
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-eqr .heroAccent {
color: var(--black);
}
#dreamz-eqr .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-eqr .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-eqr .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-eqr .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-eqr .microcopy {
margin-top: 14px;
}
#dreamz-eqr .heroPills {
margin-top: 13px;
}
#dreamz-eqr .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-eqr .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-eqr .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-eqr .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-eqr .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-eqr .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-eqr .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-eqr .clientBand {
padding: 24px 0;
}
#dreamz-eqr .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-eqr .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-eqr .logoBox.wide {
font-size: 15px;
}
#dreamz-eqr .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-eqr .sectionHead p {
margin: 17px 0 0;
}
#dreamz-eqr .copy p {
margin: 16px 0 0;
}
#dreamz-eqr .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-eqr .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-eqr .aiJourney {
background: var(--black);
}
#dreamz-eqr .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-eqr .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-eqr .productPanel {
border-radius: 18px;
}
#dreamz-eqr .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-eqr .panelHead>strong {
font-size: 13px;
}
#dreamz-eqr .sampleTag {
font-size: 9px;
}
#dreamz-eqr .panelBody {
padding: 21px;
}
#dreamz-eqr .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-eqr .docHeader {
padding-bottom: 16px;
}
#dreamz-eqr .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-eqr .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-eqr .smallLabel {
font-size: 9px;
}
#dreamz-eqr .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-eqr .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-eqr .dataRow {
padding: 14px 0;
}
#dreamz-eqr .statusPill {
font-size: 8px;
}
#dreamz-eqr .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-eqr .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-eqr .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-eqr .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-eqr .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-eqr .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-eqr .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-eqr .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-eqr .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-eqr .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-eqr .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-eqr .hierarchy strong {
color: var(--navy);
}
#dreamz-eqr .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-eqr .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-eqr .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-eqr .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-eqr .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-eqr .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-eqr .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-eqr .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-eqr .mobileAccount small {
font-size: 9px;
}
#dreamz-eqr .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-eqr .sideTile strong {
font-size: 12px;
}
#dreamz-eqr .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-eqr .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-eqr .mobileAction {
font-size: 9px;
}
#dreamz-eqr .journeyRow strong {
font-size: 13px;
}
#dreamz-eqr .journeyRow small {
font-size: 11px;
}
#dreamz-eqr .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-eqr .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-eqr .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-eqr .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-eqr .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-eqr .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-eqr .utilityReadout small {
font-size: 12px;
}
#dreamz-eqr .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-eqr .darkSection {
background: var(--black);
}
#dreamz-eqr .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-eqr .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-eqr .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-eqr .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-eqr .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-eqr .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-eqr .assistantHead small {
font-size: 11px;
}
#dreamz-eqr .assistantNote {
font-size: 11px;
}
#dreamz-eqr .reportTags span {
font-size: 10px;
}
#dreamz-eqr .card p {
margin: 12px 0 0;
}
#dreamz-eqr .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-eqr .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-eqr .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-eqr .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-eqr .cards>.card p {
padding-bottom: 22px;
}
#dreamz-eqr .benefitBand {
background: var(--black);
}
#dreamz-eqr .benefit {
background: var(--black-soft);
}
#dreamz-eqr .inlineCta h3 {
font-size: 20px;
}
#dreamz-eqr .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-eqr .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-eqr .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-eqr .valueCtaSection {
padding: 32px 0;
}
#dreamz-eqr .proofCard p {
margin-top: 15px;
}
#dreamz-eqr .proofCard h3 {
font-size: 23px;
}
#dreamz-eqr .integrationNote {
margin-top: 23px;
}
#dreamz-eqr .ctaPanel {
background: var(--black);
}
#dreamz-eqr .ctaPanel p {
margin-top: 16px;
}
#dreamz-eqr .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-eqr .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-eqr a:hover {
text-decoration: none;
}
#dreamz-eqr .textCta:hover {
color: var(--navy);
}
#dreamz-eqr .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-eqr .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-eqr .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-eqr .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-eqr .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-eqr .heroVisual {
max-width: 548px;
}
#dreamz-eqr .hero .lead {
max-width: 700px;
}
#dreamz-eqr .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-eqr .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-eqr .logoBox:last-child {
grid-column: auto;
}
#dreamz-eqr .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-eqr .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-eqr .inlineCtaActions .button {
flex: 1;
}
#dreamz-eqr .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-eqr .hero {
padding: 28px 0 40px;
}
#dreamz-eqr .hero h1 {
line-height: 1.08;
}
#dreamz-eqr .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-eqr .heroActions {
gap: 10px;
}
#dreamz-eqr .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-eqr .breadcrumb {
margin-bottom: 21px;
}
#dreamz-eqr .hero .eyebrow {
font-size: 11px;
}
#dreamz-eqr .heroVisual {
max-width: 480px;
}
#dreamz-eqr .heroPills {
row-gap: 9px;
}
#dreamz-eqr .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-eqr .heroPills span+span {
padding-left: 7px;
}
#dreamz-eqr .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-eqr .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-eqr .clientBand {
padding: 25px 0;
}
#dreamz-eqr .copy h2 {
font-size: 33px;
}
#dreamz-eqr .panelBody {
padding: 16px;
}
#dreamz-eqr .panelHead {
padding: 15px;
}
#dreamz-eqr .panelHead>strong {
font-size: 12px;
}
#dreamz-eqr .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-eqr .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-eqr .docHeader strong {
font-size: 18px;
}
#dreamz-eqr .docHeader small {
font-size: 10px;
}
#dreamz-eqr .rowCopy strong {
font-size: 11px;
}
#dreamz-eqr .rowCopy small {
font-size: 10px;
}
#dreamz-eqr .miniStats {
gap: 7px;
}
#dreamz-eqr .miniStats strong {
font-size: 21px;
}
#dreamz-eqr .miniStats span {
font-size: 9px;
}
#dreamz-eqr .miniStats>div {
padding: 10px 8px;
}
#dreamz-eqr .plantFacts {
gap: 8px;
}
#dreamz-eqr .plantFacts>div {
padding: 10px;
}
#dreamz-eqr .plantFacts strong {
font-size: 11px;
}
#dreamz-eqr .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-eqr .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-eqr .utilityReadout span {
font-size: 8px;
}
#dreamz-eqr .utilityReadout strong {
font-size: 24px;
}
#dreamz-eqr .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-eqr .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-eqr .comparisonTable {
font-size: 11px;
}
#dreamz-eqr .comparisonTable th,
#dreamz-eqr .comparisonTable td {
padding: 13px 9px;
}
#dreamz-eqr .contextSection {
padding: 0 0 22px;
}
#dreamz-eqr .valueCtaSection {
padding: 25px 0;
}
#dreamz-eqr .inlineCtaActions {
flex-direction: column;
}
#dreamz-eqr .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-eqr .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-eqr .phoneDevice {
width: 222px;
}
#dreamz-eqr .phoneDevice .rowIcon {
display: grid;
}
#dreamz-eqr .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-eqr .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-eqr .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-eqr .sideTile p {
margin: 0;
}
#dreamz-eqr .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-eqr .dataRow {
gap: 8px;
}
#dreamz-eqr .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-eqr .miniStats strong {
font-size: 19px;
}
#dreamz-eqr .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-eqr .heroActions .button {
width: 100%;
}
#dreamz-eqr .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-eqr .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-eqr .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-eqr .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-eqr .aiStep span {
font-size: 13px;
}
#dreamz-eqr .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-eqr {
background: var(--white);
}
#dreamz-eqr img {
display: block;
max-width: 100%;
}
#dreamz-eqr h1,
#dreamz-eqr h2,
#dreamz-eqr h3 {
text-wrap: balance;
}
#dreamz-eqr .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-eqr .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-eqr .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-eqr .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-eqr .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-eqr .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-eqr .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-eqr .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-eqr .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-eqr .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-eqr .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-eqr .industryIntro {
padding: 78px 0 66px;
}
#dreamz-eqr .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-eqr .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-eqr .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-eqr .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-eqr .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-eqr .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-eqr .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-eqr .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-eqr .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-eqr .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-eqr .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-eqr .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-eqr .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-eqr .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-eqr .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-eqr .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-eqr .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-eqr .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-eqr .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-eqr .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-eqr .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-eqr .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-eqr .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-eqr .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-eqr .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-eqr .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-eqr .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-eqr .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-eqr .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-eqr .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-eqr .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-eqr .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-eqr .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-eqr .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-eqr .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-eqr .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-eqr .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-eqr .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-eqr .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-eqr .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-eqr .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-eqr .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-eqr .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-eqr .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-eqr .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-eqr .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .rfidSpotlight {
background: #fff;
}
#dreamz-eqr .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-eqr .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-eqr .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-eqr .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-eqr .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-eqr .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-eqr .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-eqr .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-eqr .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-eqr .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-eqr .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-eqr .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-eqr .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-eqr .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-eqr .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-eqr .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-eqr .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-eqr .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-eqr .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-eqr .featurePanel {
display: none;
}
#dreamz-eqr .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-eqr .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-eqr .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-eqr .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-eqr .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-eqr .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-eqr .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-eqr .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-eqr .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-eqr .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-eqr .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-eqr .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-eqr .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-eqr .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-eqr .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-eqr .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-eqr .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-eqr .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-eqr .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-eqr .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-eqr .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-eqr .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-eqr .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-eqr .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-eqr .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-eqr .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-eqr .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-eqr .aiReviewBody {
padding: 18px;
}
#dreamz-eqr .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-eqr .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-eqr .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-eqr .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-eqr .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-eqr .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-eqr .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-eqr .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-eqr .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-eqr .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-eqr .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-eqr .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-eqr .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-eqr .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-eqr .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-eqr .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-eqr .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-eqr .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-eqr .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-eqr .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-eqr .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-eqr .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-eqr .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-eqr .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-eqr .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-eqr .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-eqr .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-eqr .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-eqr .workflowDetails .featureList,
#dreamz-eqr .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-eqr .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-eqr .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-eqr .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-eqr #eqr-connected-tools {
background: #fff;
}
#dreamz-eqr #eqr-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-eqr .featureTab,
#dreamz-eqr .industryPriority,
#dreamz-eqr summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-eqr .industryIntroHead {
gap: 30px;
}
#dreamz-eqr .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-eqr .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-eqr .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-eqr .factoryWorkflow {
padding: 22px;
}
#dreamz-eqr .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-eqr .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-eqr .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-eqr .industryPriorityGrid {
gap: 14px;
}
#dreamz-eqr .industryPriority {
padding: 22px 19px;
}
#dreamz-eqr .industryPriority h3 {
font-size: 21px;
}
#dreamz-eqr .industryPriority p {
font-size: 12px;
}
#dreamz-eqr .priorityLink {
font-size: 10px;
}
#dreamz-eqr .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-eqr .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-eqr .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-eqr .vedaUseCases>div {
display: block;
}
#dreamz-eqr .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-eqr .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-eqr .featureTabs {
gap: 8px;
}
#dreamz-eqr .featureTab {
min-height: 108px;
}
#dreamz-eqr .featureStage,
#dreamz-eqr .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-eqr .rfidSpotlight .spotlightMedia,
#dreamz-eqr .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-eqr .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-eqr .featurePanel {
min-height: 0;
}
#dreamz-eqr .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-eqr .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-eqr .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-eqr .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-eqr .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-eqr .clientBand {
padding: 22px 0;
}
#dreamz-eqr .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-eqr .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-eqr .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-eqr .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-eqr .industryIntro {
padding: 53px 0;
}
#dreamz-eqr .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-eqr .industryIntroHead>p {
font-size: 14px;
}
#dreamz-eqr .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .industryPriority {
padding: 23px;
}
#dreamz-eqr .industryPriority h3 {
font-size: 24px;
}
#dreamz-eqr .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-eqr .industryPriority p {
font-size: 13px;
}
#dreamz-eqr .priorityLink {
font-size: 11px;
}
#dreamz-eqr .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-eqr .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-eqr .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-eqr .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-eqr .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-eqr .vedaUseCases>div {
display: flex;
}
#dreamz-eqr .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-eqr .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-eqr .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-eqr .vedaMessage.user {
margin-left: 25px;
}
#dreamz-eqr .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-eqr .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-eqr .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-eqr .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-eqr .spotlightHead h2 {
font-size: 32px;
}
#dreamz-eqr .spotlightHead>p {
font-size: 14px;
}
#dreamz-eqr .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-eqr .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-eqr .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-eqr .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-eqr .featurePanel h3 {
font-size: 24px;
}
#dreamz-eqr .featurePanel>p {
font-size: 13px;
}
#dreamz-eqr .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-eqr .spotlightChecks>li {
font-size: 12px;
}
#dreamz-eqr .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-eqr .spotlightActions .button {
width: 100%;
}
#dreamz-eqr .spotlightScope {
font-size: 10px;
}
#dreamz-eqr .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-eqr .mediaTitle strong {
font-size: 11px;
}
#dreamz-eqr .mediaTitle div>span {
font-size: 8px;
}
#dreamz-eqr .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-eqr .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-eqr .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-eqr .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-eqr .aiReviewBody {
padding: 13px;
}
#dreamz-eqr .aiIssue {
padding: 13px;
}
#dreamz-eqr .aiIssue strong {
font-size: 14px;
}
#dreamz-eqr .aiEvidence {
gap: 6px;
}
#dreamz-eqr .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-eqr .aiEvidence strong {
font-size: 9px;
}
#dreamz-eqr .aiEvidence span {
font-size: 7px;
}
#dreamz-eqr .exampleLabel {
font-size: 6px;
}
#dreamz-eqr .factoryWorkflows {
padding: 55px 0;
}
#dreamz-eqr .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-eqr .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-eqr .industryRibbonGrid {
gap: 12px;
}
#dreamz-eqr .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-eqr .spotlightHead h2 {
font-size: 29px;
}
#dreamz-eqr .featureStage {
padding: 19px 13px;
}
#dreamz-eqr .mediaTitle>.icon {
display: none;
}
#dreamz-eqr .exampleLabel {
display: none;
}
#dreamz-eqr .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-eqr .featureTabs {
display: none;
}
#dreamz-eqr .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-eqr .featureStage {
display: block;
}
#dreamz-eqr .featurePanel {
color: #000;
}
}
#dreamz-eqr #eqr-delivery-features-1:checked~.featureTabs label[for="eqr-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-delivery-features-1:focus-visible~.featureTabs label[for="eqr-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-2:checked~.featureTabs label[for="eqr-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-delivery-features-2:focus-visible~.featureTabs label[for="eqr-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-3:checked~.featureTabs label[for="eqr-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-delivery-features-3:focus-visible~.featureTabs label[for="eqr-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-4:checked~.featureTabs label[for="eqr-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-delivery-features-4:focus-visible~.featureTabs label[for="eqr-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-5:checked~.featureTabs label[for="eqr-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-delivery-features-5:focus-visible~.featureTabs label[for="eqr-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-1:checked~.featureTabs label[for="eqr-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-rfid-features-1:focus-visible~.featureTabs label[for="eqr-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-2:checked~.featureTabs label[for="eqr-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-rfid-features-2:focus-visible~.featureTabs label[for="eqr-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-3:checked~.featureTabs label[for="eqr-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-rfid-features-3:focus-visible~.featureTabs label[for="eqr-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-4:checked~.featureTabs label[for="eqr-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-rfid-features-4:focus-visible~.featureTabs label[for="eqr-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-5:checked~.featureTabs label[for="eqr-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-rfid-features-5:focus-visible~.featureTabs label[for="eqr-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-1:checked~.featureTabs label[for="eqr-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-ai-decisions-features-1:focus-visible~.featureTabs label[for="eqr-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-2:checked~.featureTabs label[for="eqr-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-ai-decisions-features-2:focus-visible~.featureTabs label[for="eqr-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-3:checked~.featureTabs label[for="eqr-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-ai-decisions-features-3:focus-visible~.featureTabs label[for="eqr-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-4:checked~.featureTabs label[for="eqr-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-ai-decisions-features-4:focus-visible~.featureTabs label[for="eqr-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-5:checked~.featureTabs label[for="eqr-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-eqr #eqr-ai-decisions-features-5:focus-visible~.featureTabs label[for="eqr-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-eqr #eqr-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-eqr .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .featureMediaPanels {
min-width: 0;
}
#dreamz-eqr .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-eqr .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-eqr .featureMediaPanels .windowTop strong,
#dreamz-eqr .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-eqr .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-eqr .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-eqr .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-eqr .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-eqr .featureMediaPanels .windowBody>*,
#dreamz-eqr .featureMediaPanels .spectrumGrid>*,
#dreamz-eqr .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-eqr .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-eqr .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-eqr .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-eqr .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-eqr .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-eqr .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-eqr .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-eqr .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-eqr .pin2 {
top: 88px;
right: 88px;
}
#dreamz-eqr .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-eqr .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-eqr .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-eqr .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-eqr .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-eqr .featureMediaPanels .graphNodes .node.n1,
#dreamz-eqr .featureMediaPanels .graphNodes .node.n2,
#dreamz-eqr .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-eqr .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-eqr .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-eqr .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-eqr .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-eqr .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-eqr .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-eqr .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-eqr .freshGraphic * {
box-sizing: border-box;
}
#dreamz-eqr .rfPanel,
#dreamz-eqr .aiInsightCard,
#dreamz-eqr .forecastVisualCard,
#dreamz-eqr .forecastSuggestion,
#dreamz-eqr .knowledgeTile,
#dreamz-eqr .chatConversation,
#dreamz-eqr .trainingSummary,
#dreamz-eqr .moduleCard,
#dreamz-eqr .qualityHeatCard,
#dreamz-eqr .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-eqr .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-eqr .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-eqr .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-eqr .statusPill,
#dreamz-eqr .cardTag,
#dreamz-eqr .forecastSuggestion b,
#dreamz-eqr .moduleCard b,
#dreamz-eqr .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-eqr .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-eqr .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-eqr .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-eqr .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-eqr .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-eqr .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-eqr .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-eqr .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-eqr .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-eqr .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-eqr .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-eqr .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-eqr .dot.good {
background: #298EEC;
}
#dreamz-eqr .dot.warn {
background: #F4A62A;
}
#dreamz-eqr .dot.bad {
background: #EB6B53;
}
#dreamz-eqr .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-eqr .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-eqr .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-eqr .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-eqr .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-eqr .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-eqr .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-eqr .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-eqr .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-eqr .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-eqr .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-eqr .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-eqr .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-eqr .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-eqr .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-eqr .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-eqr .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-eqr .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-eqr .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-eqr .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-eqr .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-eqr .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-eqr .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-eqr .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-eqr .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-eqr .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-eqr .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-eqr .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-eqr .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-eqr .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-eqr .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-eqr .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-eqr .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-eqr .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-eqr .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-eqr .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-eqr .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-eqr .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-eqr .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-eqr .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-eqr .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-eqr .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-eqr .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-eqr .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-eqr .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-eqr .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-eqr .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-eqr .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-eqr .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-eqr .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-eqr .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-eqr .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-eqr .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-eqr .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-eqr .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-eqr .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-eqr .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-eqr .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-eqr .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-eqr .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-eqr .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-eqr .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-eqr .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-eqr .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-eqr .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-eqr .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-eqr .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-eqr .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-eqr .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-eqr .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-eqr .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-eqr .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-eqr .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-eqr .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-eqr .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-eqr .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-eqr .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-eqr .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-eqr .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-eqr .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-eqr .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-eqr .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-eqr .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-eqr .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-eqr .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-eqr .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-eqr .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-eqr .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-eqr .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-eqr .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-eqr .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-eqr .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-eqr .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-eqr .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-eqr .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-eqr .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-eqr .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-eqr .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-eqr .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-eqr .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-eqr .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-eqr .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-eqr .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-eqr .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-eqr .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-eqr .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-eqr .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-eqr .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-eqr .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-eqr .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-eqr .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-eqr .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-eqr .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-eqr .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-eqr .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-eqr .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-eqr .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-eqr .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-eqr .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-eqr .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-eqr .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-eqr .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-eqr .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-eqr .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-eqr .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-eqr .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-eqr .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-eqr .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-eqr .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-eqr .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-eqr .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-eqr .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-eqr .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-eqr .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-eqr .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-eqr .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-eqr .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-eqr .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-eqr .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-eqr .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-eqr .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-eqr .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-eqr .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-eqr .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-eqr .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-eqr .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-eqr .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-eqr .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-eqr .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-eqr .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-eqr .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-eqr .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-eqr .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-eqr .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-eqr .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-eqr .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-eqr .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-eqr .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-eqr .rfTrackLayout,
#dreamz-eqr .rfFlowLayout,
#dreamz-eqr .rfAlertGrid,
#dreamz-eqr .rfCycleLayout,
#dreamz-eqr .rfSitesLayout,
#dreamz-eqr .aiRootLayout,
#dreamz-eqr .aiForecastLayout,
#dreamz-eqr .aiChatLayout,
#dreamz-eqr .aiTrainingLayout,
#dreamz-eqr .aiQualityLayout,
#dreamz-eqr .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-eqr .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-eqr .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-eqr .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-eqr .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-eqr .aiLink {
display: none;
}
}
#dreamz-eqr .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-eqr .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-eqr .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-eqr .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-eqr .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-eqr .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-eqr .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-eqr .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-eqr .mfgHero h1 {
color: #fff;
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
#dreamz-eqr .mfgHero h1>span {
display: block;
}
#dreamz-eqr .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-eqr .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-eqr .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-eqr .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-eqr .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-eqr .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-eqr .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-eqr .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-eqr .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-eqr .mfgHeroContent {
min-height: 610px;
}
#dreamz-eqr .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-eqr .mfgHeroLead {
font-size: 16px;
}
#dreamz-eqr .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-eqr .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-eqr .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-eqr .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-eqr .mfgHero h1 {
max-width: 620px;
}
#dreamz-eqr .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-eqr .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-eqr .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-eqr .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-eqr .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-eqr .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-eqr .mfgHero h1 {
line-height: 1.12;
}
#dreamz-eqr .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-eqr .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-eqr .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-eqr .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-eqr .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-eqr .mfgHero {
background: #fff;
color: #000;
}
#dreamz-eqr .mfgHeroScene,
#dreamz-eqr .mfgHeroActions {
display: none;
}
#dreamz-eqr .mfgHeroContent {
min-height: 0;
}
#dreamz-eqr .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
#dreamz-eqr #eqr-rfid .featureStage,
#dreamz-eqr #eqr-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-eqr .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-eqr .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-eqr .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-eqr .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-eqr .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-eqr .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-eqr .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-eqr .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-eqr .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-eqr .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-eqr .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-eqr .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-eqr .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-eqr .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-eqr .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-eqr .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-eqr .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-eqr .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-eqr .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-eqr .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-eqr .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-eqr .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-eqr .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-eqr .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-eqr .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-eqr .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-eqr .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-eqr .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-eqr .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-eqr .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-eqr .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-eqr .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-eqr .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-eqr .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-eqr .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-eqr .mfgGallery .flowArrow {
display: none;
}
#dreamz-eqr .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-eqr .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-eqr .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-eqr .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-eqr .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-eqr .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-eqr .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-eqr .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-eqr .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-eqr .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-eqr .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-eqr .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-eqr .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-eqr .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-eqr .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-eqr .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-eqr .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-eqr .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-eqr .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-eqr .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-eqr .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-eqr .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-eqr .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-eqr .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-eqr .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-eqr .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-eqr .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-eqr .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-eqr .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-eqr .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-eqr .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-eqr .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-eqr .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-eqr .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-eqr .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-eqr .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-eqr .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-eqr .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-eqr .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-eqr .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-eqr .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-eqr .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-eqr .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-eqr .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-eqr .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-eqr .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-eqr .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-eqr .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-eqr .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-eqr .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-eqr .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-eqr .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-eqr .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-eqr .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-eqr .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-eqr .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-eqr .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-eqr .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-eqr .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-eqr .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-eqr .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-eqr .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-eqr .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-eqr .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-eqr .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-eqr .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-eqr .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-eqr .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-eqr .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-eqr .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-eqr .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-eqr .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-eqr .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-eqr .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-eqr .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-eqr .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-eqr .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-eqr .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-eqr .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-eqr .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-eqr .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-eqr .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-eqr .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-eqr .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-eqr .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-eqr .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-eqr .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-eqr #eqr-rfid .featureStage,
#dreamz-eqr #eqr-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-eqr #eqr-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-eqr .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-eqr #eqr-rfid .featureStage,
#dreamz-eqr #eqr-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-eqr .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-eqr .mfgGallery .freshWindow {
height: auto;
}
#dreamz-eqr .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-eqr .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-eqr .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-eqr .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-eqr .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-eqr .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-eqr .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-eqr .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-eqr .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-eqr .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-eqr .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-eqr .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-eqr .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-eqr .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-eqr .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-eqr .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-eqr .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-eqr .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-eqr .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-eqr .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-eqr .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-eqr .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-eqr .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-eqr .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-eqr .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-eqr .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-eqr .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-eqr .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-eqr .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-eqr .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-eqr .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-eqr .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-eqr .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-eqr .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-eqr .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-eqr .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-eqr .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-eqr .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-eqr .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-eqr .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-eqr .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-eqr .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-eqr .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-eqr .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-eqr .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-eqr .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-eqr .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-eqr .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-eqr .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-eqr .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-eqr .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-eqr .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-eqr .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-eqr .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-eqr .eqrVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-eqr .eqrGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-eqr .eqrIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-eqr .eqrStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-eqr .eqrVisualGallery>.eqrGraphic {
display: none;
}
#dreamz-eqr #eqr-delivery .featureStage,
#dreamz-eqr #eqr-rfid .featureStage,
#dreamz-eqr #eqr-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-eqr #eqr-rfid .eqrVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-eqr #eqr-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-eqr .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-eqr .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-eqr .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-eqr .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
}
@media (max-width:1100px) {
#dreamz-eqr #eqr-delivery .featureStage,
#dreamz-eqr #eqr-rfid .featureStage,
#dreamz-eqr #eqr-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-eqr #eqr-rfid .eqrVisualGallery,
#dreamz-eqr #eqr-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-eqr .mfgHeroScene {
height: 290px;
}
#dreamz-eqr #eqr-delivery .featureStage,
#dreamz-eqr #eqr-rfid .featureStage,
#dreamz-eqr #eqr-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-eqr .eqrVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-eqr .eqrVisualGallery>.eqrGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-eqr #eqr-delivery-features-1:checked~.featureStage .eqrVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-2:checked~.featureStage .eqrVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-3:checked~.featureStage .eqrVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-4:checked~.featureStage .eqrVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-eqr #eqr-delivery-features-5:checked~.featureStage .eqrVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-1:checked~.featureStage .eqrVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-2:checked~.featureStage .eqrVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-3:checked~.featureStage .eqrVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-4:checked~.featureStage .eqrVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-eqr #eqr-rfid-features-5:checked~.featureStage .eqrVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-1:checked~.featureStage .eqrVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-2:checked~.featureStage .eqrVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-3:checked~.featureStage .eqrVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-4:checked~.featureStage .eqrVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-eqr #eqr-ai-decisions-features-5:checked~.featureStage .eqrVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-eqr .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-eqr .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-eqr .eqrIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-eqr .eqrGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-eqr .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-eqr .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-eqr .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-eqr .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-eqr .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-eqr .mfgHeroContent {
background: transparent;
}
#dreamz-eqr .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-eqr .eqrIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-eqr .eqrIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-eqr .eqrGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-eqr .eqrVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-eqr .mfgHeroScene img {
object-position: 76% 50%;
}
}
@media(max-width:600px) {
#dreamz-eqr .mfgHeroScene img {
object-position: 80% 50%;
}
}  #dreamz-party .industryIntroHead.compact,
#dreamz-party .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-party .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-party .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-party .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-party .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-party .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-party .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-party .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-party .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-party .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-party .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-party .windowDots {
display: flex;
gap: 5px;
}
#dreamz-party .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-party .windowBody {
padding: 16px;
}
#dreamz-party .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-party .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-party .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-party .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-party .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-party .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-party .chartGridLine.l1 {
top: 34px;
}
#dreamz-party .chartGridLine.l2 {
top: 65px;
}
#dreamz-party .chartGridLine.l3 {
top: 96px;
}
#dreamz-party .chartGridLine.l4 {
top: 127px;
}
#dreamz-party .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-party .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-party .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-party .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-party .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-party .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-party .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-party .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-party .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-party .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-party .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-party .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-party .noteCard p,
#dreamz-party .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-party .alertStack {
display: grid;
gap: 10px;
}
#dreamz-party .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-party .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-party .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-party .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-party .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-party .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-party .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-party .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-party .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-party .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-party .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-party .scheduleBoard h4,
#dreamz-party .todoBoard h4,
#dreamz-party .siteBoard h4,
#dreamz-party .chatPanel h4,
#dreamz-party .lessonPanel h4,
#dreamz-party .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-party .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-party .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-party .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-party .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-party .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-party .taskRow:last-child {
border-bottom: 0;
}
#dreamz-party .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-party .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-party .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-party .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-party .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-party .inventoryTable th,
#dreamz-party .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-party .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-party .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-party .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-party .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-party .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-party .phoneBody {
padding: 12px;
}
#dreamz-party .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-party .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-party .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-party .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-party .progressList {
display: grid;
gap: 10px;
}
#dreamz-party .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-party .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-party .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-party .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-party .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-party .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-party .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-party .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-party .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-party .pin1 {
top: 56px;
left: 58px;
}
#dreamz-party .pin2 {
top: 88px;
right: 88px;
}
#dreamz-party .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-party .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-party .siteRow:last-child {
border-bottom: 0;
}
#dreamz-party .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-party .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-party .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-party .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-party .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-party .graphNodes:before,
#dreamz-party .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-party .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-party .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-party .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-party .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-party .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-party .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-party .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-party .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-party .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-party .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-party .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-party .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-party .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-party .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-party .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-party .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-party .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-party .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-party .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-party .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-party .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-party .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-party .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-party .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-party .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-party .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-party .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-party .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-party .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-party .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-party .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-party .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-party .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-party #party-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-party #party-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-party #party-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-party #party-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-party #party-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-party #party-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-party #party-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-party #party-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-party #party-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-party #party-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-party #party-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-party #party-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-party #party-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-party #party-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-party #party-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-party #party-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-party #party-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-party #party-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-party #party-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-party #party-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-party #party-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-party #party-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-party #party-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-party #party-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-party #party-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-party #party-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-party #party-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-party #party-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-party #party-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-party #party-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-party .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-party .featureMediaPanels {
min-height: 0;
}
#dreamz-party .inventorySplit,
#dreamz-party .forecastGrid,
#dreamz-party .siteGrid,
#dreamz-party .spectrumGrid,
#dreamz-party .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-party .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-party .metricGrid,
#dreamz-party .lessonCards,
#dreamz-party .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-party .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-party .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-party {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-party * {
box-sizing: border-box;
}
#dreamz-party {
scroll-behavior: smooth;
}
#dreamz-party {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-party a {
color: inherit;
text-decoration: none;
}
#dreamz-party .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-party .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-party .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-party .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-party .brand span {
color: var(--brand);
}
#dreamz-party .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-party .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-party .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-party .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-party .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-party .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-party .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-party .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-party h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-party .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-party .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-party .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-party .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-party .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-party .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-party .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-party .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-party .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-party .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-party .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-party .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-party .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-party .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-party .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-party .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-party .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-party .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-party .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-party .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-party .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-party .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-party .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-party .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-party .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-party .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-party .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-party .sectionHead {
margin-bottom: 44px;
}
#dreamz-party .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-party .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-party .aiJourney h2 {
color: #fff;
}
#dreamz-party .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-party .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-party .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-party .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-party .aiStep:last-child::after {
display: none;
}
#dreamz-party .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-party .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-party .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-party .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-party .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-party .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-party .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-party .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-party .capability {
background: #fff;
}
#dreamz-party .capability.alt {
background: var(--sky-2);
}
#dreamz-party .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-party .twoCol.reverse .visual {
order: 2;
}
#dreamz-party .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-party .visual .placeholder {
min-height: 355px;
}
#dreamz-party .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-party .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-party details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-party details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-party details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-party details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-party details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-party details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-party .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-party .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-party .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-party .darkSection h2,
#dreamz-party .darkSection h3 {
color: #fff;
}
#dreamz-party .darkSection .sectionHead p,
#dreamz-party .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-party .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-party .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-party .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-party .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-party .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-party .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-party .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-party .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-party .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-party .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-party .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-party .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-party .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-party .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-party .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-party .benefitBand h2 {
color: #fff;
}
#dreamz-party .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-party .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-party .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-party .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-party .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-party .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-party .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-party .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-party .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-party .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-party .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-party .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-party .faq {
max-width: 900px;
}
#dreamz-party .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-party .ctaPanel h2 {
color: #fff;
}
#dreamz-party .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-party .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-party .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-party .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-party .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-party .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-party .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-party .inlineCta.dark h3 {
color: #fff;
}
#dreamz-party .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-party .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-party .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-party .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-party .button.yellow:hover {
background: #FFD84D;
}
#dreamz-party .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-party .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-party .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-party .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-party footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-party .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-party .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-party .heroGrid,
#dreamz-party .twoCol,
#dreamz-party .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-party .twoCol.reverse .visual {
order: initial;
}
#dreamz-party .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-party .ratingGrid,
#dreamz-party .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-party .ratingLead,
#dreamz-party .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-party .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-party .aiStep:nth-child(3)::after,
#dreamz-party .aiStep:last-child::after {
display: none;
}
#dreamz-party .outcomeGrid,
#dreamz-party .challengeGrid,
#dreamz-party .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-party .cards,
#dreamz-party .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-party .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-party .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-party .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-party .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-party .hero {
padding: 58px 0 52px;
}
#dreamz-party .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-party .aiStep::after {
display: none;
}
#dreamz-party .logoRow,
#dreamz-party .ratingGrid,
#dreamz-party .awardGrid,
#dreamz-party .outcomeGrid,
#dreamz-party .challengeGrid,
#dreamz-party .benefitGrid,
#dreamz-party .cards,
#dreamz-party .proofCards,
#dreamz-party .integrationGrid,
#dreamz-party .featureList {
grid-template-columns: 1fr;
}
#dreamz-party .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-party .ctaPanel {
padding: 34px 24px;
}
#dreamz-party .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-party .inlineCtaActions {
width: 100%;
}
#dreamz-party .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-party {
--muted: #526A7C;
--shadow: none;
}
#dreamz-party {
background: var(--sky-2);
}
#dreamz-party p {
margin-bottom: 0;
}
#dreamz-party [id] {
scroll-margin-top: 94px;
}
#dreamz-party svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-party .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: none
}
#dreamz-party .darkSection h2,
#dreamz-party .darkSection h3,
#dreamz-party .aiJourney h2,
#dreamz-party .benefitBand h2,
#dreamz-party .ctaPanel h2,
#dreamz-party .inlineCta.dark h3 {
color: #fff;
}
#dreamz-party .wrap>*,
#dreamz-party .heroGrid>*,
#dreamz-party .twoCol>*,
#dreamz-party .ctaPanel>* {
min-width: 0;
}
#dreamz-party .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-party .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-party .skipLink:focus {
transform: none;
}
#dreamz-party a:focus-visible,
#dreamz-party summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-party .darkSection a:focus-visible,
#dreamz-party .darkSection summary:focus-visible,
#dreamz-party .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-party .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-party .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-party .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-party .brandName>span {
color: var(--brand-dark);
}
#dreamz-party .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-party .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-party .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-party .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-party .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-party .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-party .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-party .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-party .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-party .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-party .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-party .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-party .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-party .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-party .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-party .clientBand {
padding: 27px 0;
}
#dreamz-party .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-party .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-party .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-party .logoBox.wide {
font-size: 12px;
}
#dreamz-party .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-party .sectionHead {
margin-bottom: 36px;
}
#dreamz-party .eyebrow {
line-height: 1.5;
}
#dreamz-party .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-party .aiStep {
min-height: 162px;
}
#dreamz-party .aiStep strong {
line-height: 1.35;
}
#dreamz-party .aiStep span {
line-height: 1.65;
}
#dreamz-party .aiCallout {
margin-top: 24px;
}
#dreamz-party .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-party .outcome>.icon {
color: var(--navy);
}
#dreamz-party .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-party .awardItem>.icon {
color: var(--navy);
}
#dreamz-party .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-party .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-party .twoCol.reverse .visual {
order: -1;
}
#dreamz-party .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-party .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-party .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-party .featureList {
gap: 13px 18px;
}
#dreamz-party .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-party .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-party .check .icon {
width: 14px;
height: 14px;
}
#dreamz-party details.capabilityMore {
margin-bottom: 0;
}
#dreamz-party .capabilityMore summary {
min-height: 34px;
}
#dreamz-party .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-party .textCta {
font-size: 14px;
}
#dreamz-party .visual {
min-width: 0;
}
#dreamz-party .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-party .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-party .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-party .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-party .panelBody {
padding: 20px;
}
#dreamz-party .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-party .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-party .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-party .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-party .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-party .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-party .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-party .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-party .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-party .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-party .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-party .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-party .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-party .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-party .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-party .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-party .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-party .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-party .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-party .dataRow:last-child {
border-bottom: 0;
}
#dreamz-party .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-party .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-party .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-party .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-party .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-party .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-party .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-party .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-party .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-party .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-party .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-party .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-party .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-party .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-party .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-party .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-party .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-party .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-party .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-party .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-party .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-party .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-party .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-party .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-party .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-party .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-party .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-party .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-party .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-party .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-party .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-party .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-party .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-party .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-party .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-party .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-party .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-party .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-party .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-party .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-party .promptList {
display: grid;
gap: 10px;
}
#dreamz-party .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-party .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-party .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-party .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-party .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-party .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-party .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-party .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-party .quoteTable th,
#dreamz-party .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-party .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-party .quoteTable td:first-child {
width: 64%;
}
#dreamz-party .quoteTable th:last-child,
#dreamz-party .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-party .quoteTable strong {
font-size: 11px;
}
#dreamz-party .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-party .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-party .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-party .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-party .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-party .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-party .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-party .orderJourney {
margin: 20px 0;
}
#dreamz-party .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-party .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-party .journeyRow:last-child:before {
display: none;
}
#dreamz-party .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-party .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-party .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-party .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-party .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-party .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-party .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-party .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-party .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-party .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-party .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-party .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-party .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-party .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-party .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-party .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-party .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-party .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-party .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-party .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-party .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-party .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-party .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-party .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-party .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-party .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-party .customerTimeline strong {
color: #fff;
}
#dreamz-party .customerTimeline small {
color: #BFBFBF;
}
#dreamz-party .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-party .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-party .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-party .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-party .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-party .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-party .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-party .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-party .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-party .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-party .chartTitle strong {
font-size: 12px;
}
#dreamz-party .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-party .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-party .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-party .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-party .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-party .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-party .inlineCtaActions {
max-width: 42%;
}
#dreamz-party .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-party .inlineCta h3 {
line-height: 1.35;
}
#dreamz-party .card {
box-shadow: none;
}
#dreamz-party .cardIcon {
box-shadow: none;
}
#dreamz-party .card h3 {
font-size: 22px;
}
#dreamz-party .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-party .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-party .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-party .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-party .ratingBand {
padding: 34px 0;
}
#dreamz-party .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-party .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-party .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-party .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-party .ratingItem:first-child {
border-left: 0;
}
#dreamz-party .proofCard h3 {
font-size: 23px;
}
#dreamz-party .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-party .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-party .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-party .integration {
min-height: 98px;
}
#dreamz-party .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-party .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-party .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-party .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-party .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-party .finalActions {
display: grid;
gap: 11px;
}
#dreamz-party .finalActions .button {
white-space: nowrap;
}
#dreamz-party .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-party .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-party .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-party .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-party .heroGrid {
gap: 30px;
}
#dreamz-party .twoCol {
gap: 32px;
}
#dreamz-party .panelBody {
padding: 16px;
}
#dreamz-party .panelHead {
padding: 16px;
}
#dreamz-party .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-party .pipelineColumns {
gap: 7px;
}
#dreamz-party .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-party .heroGrid,
#dreamz-party .twoCol,
#dreamz-party .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .heroGrid {
gap: 36px;
}
#dreamz-party .hero h1 {
max-width: 730px;
}
#dreamz-party .hero .lead {
max-width: 690px;
}
#dreamz-party .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-party .twoCol {
gap: 34px;
}
#dreamz-party .twoCol.reverse .visual {
order: initial;
}
#dreamz-party .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-party .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-party .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-party .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-party .ratingSectionGrid {
gap: 20px;
}
#dreamz-party .inlineCta {
align-items: flex-start;
}
#dreamz-party .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-party .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-party .card {
padding: 22px;
}
#dreamz-party .card h3 {
font-size: 21px;
}
#dreamz-party .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-party .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-party .cards,
#dreamz-party .proofCards {
grid-template-columns: 1fr;
}
#dreamz-party .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-party .inlineCta {
flex-direction: column;
}
#dreamz-party .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-party .inlineCtaActions .button {
flex: 1;
}
#dreamz-party .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-party .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-party .wrap {
width: calc(100% - 32px);
}
#dreamz-party [id] {
scroll-margin-top: 82px;
}
#dreamz-party .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-party .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-party .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-party .hero {
padding: 51px 0 48px;
}
#dreamz-party .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-party .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-party .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-party .hero .microcopy {
font-size: 11px;
}
#dreamz-party .heroPills span {
font-size: 9px;
}
#dreamz-party .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-party .sectionHead p {
font-size: 16px;
}
#dreamz-party .copy h2 {
font-size: 34px;
}
#dreamz-party .copy p {
font-size: 15px;
}
#dreamz-party .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-party .logoBox {
min-height: 53px;
}
#dreamz-party .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-party .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-party .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-party .aiStep strong {
font-size: 13px;
}
#dreamz-party .aiStep span {
font-size: 11px;
}
#dreamz-party .aiStep::after {
display: none;
}
#dreamz-party .outcomeGrid,
#dreamz-party .challengeGrid,
#dreamz-party .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-party .outcome {
padding: 24px;
}
#dreamz-party .outcome strong {
font-size: 22px;
}
#dreamz-party .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-party .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-party .featureList,
#dreamz-party .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-party .featureItem {
font-size: 13px;
}
#dreamz-party .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-party .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-party .panelHead {
padding: 15px 13px;
}
#dreamz-party .panelHead>strong {
font-size: 12px;
}
#dreamz-party .panelBody {
padding: 14px;
}
#dreamz-party .productPanel {
border-radius: 16px;
}
#dreamz-party .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-party .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-party .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-party .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-party .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-party .deal strong {
font-size: 10px;
}
#dreamz-party .deal small {
font-size: 9px;
}
#dreamz-party .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-party .mobileWorkspace {
gap: 12px;
}
#dreamz-party .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-party .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-party .sideTile {
padding: 10px;
}
#dreamz-party .sideTile strong {
font-size: 10px;
}
#dreamz-party .sideTile p {
font-size: 9px;
}
#dreamz-party .mobileHeader strong {
font-size: 15px;
}
#dreamz-party .mobileAccount strong {
font-size: 10px;
}
#dreamz-party .mobileAccount small {
font-size: 7px;
}
#dreamz-party .phoneDevice .rowIcon {
display: none;
}
#dreamz-party .quoteTable th,
#dreamz-party .quoteTable td {
padding: 12px 4px;
}
#dreamz-party .quoteTable strong {
font-size: 10px;
}
#dreamz-party .quoteTable small {
font-size: 8px;
}
#dreamz-party .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-party .docHeader strong {
font-size: 17px;
}
#dreamz-party .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-party .miniFlow span {
padding: 6px;
}
#dreamz-party .rowCopy strong {
font-size: 10px;
}
#dreamz-party .rowCopy small {
font-size: 8px;
}
#dreamz-party .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-party .miniStats {
gap: 7px;
}
#dreamz-party .miniStats>div {
padding: 9px;
}
#dreamz-party .miniStats strong {
font-size: 18px;
}
#dreamz-party .miniStats span {
font-size: 8px;
}
#dreamz-party .collectionStats>div {
padding: 13px;
}
#dreamz-party .collectionStats strong {
font-size: 24px;
}
#dreamz-party .customerHeader strong {
font-size: 17px;
}
#dreamz-party .customerFacts>div {
padding: 10px;
}
#dreamz-party .customerFacts strong {
font-size: 12px;
}
#dreamz-party .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-party .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-party .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-party .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-party .integration small {
font-size: 9px;
}
#dreamz-party .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-party .ctaPanel p {
font-size: 15px;
}
#dreamz-party .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-party .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-party .contextSection {
padding: 0 0 24px;
}
#dreamz-party .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-party .wrap {
width: calc(100% - 24px);
}
#dreamz-party .brand {
font-size: 18px;
}
#dreamz-party .brandMark {
width: 25px;
height: 25px;
}
#dreamz-party .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-party .copy h2 {
font-size: 31px;
}
#dreamz-party .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-party .phoneDevice {
width: 210px;
}
#dreamz-party .phoneDevice .rowIcon {
display: grid;
}
#dreamz-party .mobileSide {
gap: 8px;
}
#dreamz-party .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-party .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-party .sideTile p {
margin: 0;
}
#dreamz-party .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-party .collectionStats strong {
font-size: 21px;
}
#dreamz-party .inventoryIntro strong {
font-size: 14px;
}
#dreamz-party .dataRow {
gap: 7px;
}
#dreamz-party .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-party .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-party {
scroll-behavior: auto;
}
#dreamz-party *,
#dreamz-party *::before,
#dreamz-party *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-party {
background: var(--sky-2);
}
#dreamz-party .hero .eyebrow {
max-width: 100%;
}
#dreamz-party .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-party .ganttIllustration,
#dreamz-party .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-party .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-party .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-party .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-party .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-party .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-party .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-party .comparisonTable th,
#dreamz-party .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-party .comparisonTable th:first-child {
width: 23%;
}
#dreamz-party .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-party .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-party .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-party .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-party .card,
#dreamz-party .proofCard,
#dreamz-party .productPanel,
#dreamz-party .outcome,
#dreamz-party .benefit {
box-shadow: none;
}
#dreamz-party .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-party .hero .eyebrow {
font-size: 10px;
}
#dreamz-party .comparisonTable {
font-size: 11px;
}
#dreamz-party .comparisonTable th,
#dreamz-party .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-party .comparisonTable th:first-child {
width: 24%;
}
#dreamz-party .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-party .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
}
#dreamz-party .scheduleIllustration,
#dreamz-party .analyticsIllustration,
#dreamz-party .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-party .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-party .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-party .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-party .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-party .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-party .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-party .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-party .darkSection .textCta {
color: var(--yellow);
}
#dreamz-party .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-party .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-party .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-party .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-party .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-party .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-party .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-party .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-party .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-party .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-party .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-party .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-party .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-party .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-party .phoneDevice {
max-width: 100%;
}
#dreamz-party .heroPills {
line-height: 1.55;
}
#dreamz-party .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-party .plantFacts {
gap: 7px;
}
#dreamz-party .plantFacts>div {
padding: 9px;
}
#dreamz-party .plantFacts strong {
font-size: 11px;
}
#dreamz-party .scanSummary {
padding: 12px;
}
#dreamz-party .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-party .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-party .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-party .phoneDevice .rowIcon {
display: grid;
}
#dreamz-party .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-party .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-party .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-party .sideTile strong {
font-size: 12px;
}
#dreamz-party .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-party .topbar,
#dreamz-party .heroActions,
#dreamz-party .finalActions,
#dreamz-party .contextSection,
#dreamz-party .valueCtaSection {
display: none;
}
#dreamz-party section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-party .hero {
padding-top: 20px;
}
}
#dreamz-party {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-party p {
margin: 0;
}
#dreamz-party main {
display: block;
}
#dreamz-party .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-party .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-party .heroAccent {
color: var(--black);
}
#dreamz-party .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-party .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-party .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-party .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-party .microcopy {
margin-top: 14px;
}
#dreamz-party .heroPills {
margin-top: 13px;
}
#dreamz-party .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-party .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-party .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-party .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-party .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-party .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-party .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-party .clientBand {
padding: 24px 0;
}
#dreamz-party .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-party .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-party .logoBox.wide {
font-size: 15px;
}
#dreamz-party .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-party .sectionHead p {
margin: 17px 0 0;
}
#dreamz-party .copy p {
margin: 16px 0 0;
}
#dreamz-party .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-party .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-party .aiJourney {
background: var(--black);
}
#dreamz-party .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-party .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-party .productPanel {
border-radius: 18px;
}
#dreamz-party .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-party .panelHead>strong {
font-size: 13px;
}
#dreamz-party .sampleTag {
font-size: 9px;
}
#dreamz-party .panelBody {
padding: 21px;
}
#dreamz-party .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-party .docHeader {
padding-bottom: 16px;
}
#dreamz-party .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-party .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-party .smallLabel {
font-size: 9px;
}
#dreamz-party .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-party .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-party .dataRow {
padding: 14px 0;
}
#dreamz-party .statusPill {
font-size: 8px;
}
#dreamz-party .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-party .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-party .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-party .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-party .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-party .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-party .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-party .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-party .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-party .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-party .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-party .hierarchy strong {
color: var(--navy);
}
#dreamz-party .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-party .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-party .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-party .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-party .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-party .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-party .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-party .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-party .mobileAccount small {
font-size: 9px;
}
#dreamz-party .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-party .sideTile strong {
font-size: 12px;
}
#dreamz-party .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-party .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-party .mobileAction {
font-size: 9px;
}
#dreamz-party .journeyRow strong {
font-size: 13px;
}
#dreamz-party .journeyRow small {
font-size: 11px;
}
#dreamz-party .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-party .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-party .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-party .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-party .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-party .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-party .utilityReadout small {
font-size: 12px;
}
#dreamz-party .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-party .darkSection {
background: var(--black);
}
#dreamz-party .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-party .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-party .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-party .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-party .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-party .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-party .assistantHead small {
font-size: 11px;
}
#dreamz-party .assistantNote {
font-size: 11px;
}
#dreamz-party .reportTags span {
font-size: 10px;
}
#dreamz-party .card p {
margin: 12px 0 0;
}
#dreamz-party .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-party .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-party .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-party .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-party .cards>.card p {
padding-bottom: 22px;
}
#dreamz-party .benefitBand {
background: var(--black);
}
#dreamz-party .benefit {
background: var(--black-soft);
}
#dreamz-party .inlineCta h3 {
font-size: 20px;
}
#dreamz-party .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-party .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-party .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-party .valueCtaSection {
padding: 32px 0;
}
#dreamz-party .proofCard p {
margin-top: 15px;
}
#dreamz-party .proofCard h3 {
font-size: 23px;
}
#dreamz-party .integrationNote {
margin-top: 23px;
}
#dreamz-party .ctaPanel {
background: var(--black);
}
#dreamz-party .ctaPanel p {
margin-top: 16px;
}
#dreamz-party .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-party .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-party a:hover {
text-decoration: none;
}
#dreamz-party .textCta:hover {
color: var(--navy);
}
#dreamz-party .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-party .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-party .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-party .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-party .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-party .heroVisual {
max-width: 548px;
}
#dreamz-party .hero .lead {
max-width: 700px;
}
#dreamz-party .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-party .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-party .logoBox:last-child {
grid-column: auto;
}
#dreamz-party .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-party .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-party .inlineCtaActions .button {
flex: 1;
}
#dreamz-party .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-party .hero {
padding: 28px 0 40px;
}
#dreamz-party .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-party .heroActions {
gap: 10px;
}
#dreamz-party .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-party .breadcrumb {
margin-bottom: 21px;
}
#dreamz-party .hero .eyebrow {
font-size: 11px;
}
#dreamz-party .heroVisual {
max-width: 480px;
}
#dreamz-party .heroPills {
row-gap: 9px;
}
#dreamz-party .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-party .heroPills span+span {
padding-left: 7px;
}
#dreamz-party .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-party .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-party .clientBand {
padding: 25px 0;
}
#dreamz-party .copy h2 {
font-size: 33px;
}
#dreamz-party .panelBody {
padding: 16px;
}
#dreamz-party .panelHead {
padding: 15px;
}
#dreamz-party .panelHead>strong {
font-size: 12px;
}
#dreamz-party .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-party .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-party .docHeader strong {
font-size: 18px;
}
#dreamz-party .docHeader small {
font-size: 10px;
}
#dreamz-party .rowCopy strong {
font-size: 11px;
}
#dreamz-party .rowCopy small {
font-size: 10px;
}
#dreamz-party .miniStats {
gap: 7px;
}
#dreamz-party .miniStats strong {
font-size: 21px;
}
#dreamz-party .miniStats span {
font-size: 9px;
}
#dreamz-party .miniStats>div {
padding: 10px 8px;
}
#dreamz-party .plantFacts {
gap: 8px;
}
#dreamz-party .plantFacts>div {
padding: 10px;
}
#dreamz-party .plantFacts strong {
font-size: 11px;
}
#dreamz-party .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-party .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-party .utilityReadout span {
font-size: 8px;
}
#dreamz-party .utilityReadout strong {
font-size: 24px;
}
#dreamz-party .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-party .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-party .comparisonTable {
font-size: 11px;
}
#dreamz-party .comparisonTable th,
#dreamz-party .comparisonTable td {
padding: 13px 9px;
}
#dreamz-party .contextSection {
padding: 0 0 22px;
}
#dreamz-party .valueCtaSection {
padding: 25px 0;
}
#dreamz-party .inlineCtaActions {
flex-direction: column;
}
#dreamz-party .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-party .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-party .phoneDevice {
width: 222px;
}
#dreamz-party .phoneDevice .rowIcon {
display: grid;
}
#dreamz-party .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-party .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-party .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-party .sideTile p {
margin: 0;
}
#dreamz-party .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-party .dataRow {
gap: 8px;
}
#dreamz-party .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-party .miniStats strong {
font-size: 19px;
}
#dreamz-party .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-party .heroActions .button {
width: 100%;
}
#dreamz-party .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-party .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-party .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-party .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-party .aiStep span {
font-size: 13px;
}
#dreamz-party .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-party {
background: var(--white);
}
#dreamz-party img {
display: block;
max-width: 100%;
}
#dreamz-party h1,
#dreamz-party h2,
#dreamz-party h3 {
text-wrap: balance;
}
#dreamz-party .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-party .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-party .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-party .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-party .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-party .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-party .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-party .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-party .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-party .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-party .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-party .industryIntro {
padding: 78px 0 66px;
}
#dreamz-party .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-party .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-party .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-party .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-party .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-party .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-party .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-party .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-party .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-party .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-party .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-party .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-party .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-party .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-party .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-party .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-party .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-party .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-party .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-party .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-party .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-party .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-party .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-party .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-party .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-party .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-party .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-party .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-party .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-party .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-party .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-party .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-party .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-party .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-party .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-party .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-party .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-party .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-party .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-party .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-party .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-party .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-party .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-party .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-party .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-party .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-party .rfidSpotlight {
background: #fff;
}
#dreamz-party .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-party .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-party .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-party .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-party .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-party .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-party .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-party .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-party .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-party .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-party .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-party .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-party .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-party .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-party .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-party .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-party .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-party .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-party .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-party .featurePanel {
display: none;
}
#dreamz-party .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-party .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-party .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-party .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-party .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-party .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-party .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-party .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-party .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-party .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-party .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-party .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-party .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-party .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-party .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-party .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-party .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-party .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-party .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-party .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-party .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-party .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-party .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-party .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-party .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-party .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-party .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-party .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-party .aiReviewBody {
padding: 18px;
}
#dreamz-party .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-party .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-party .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-party .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-party .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-party .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-party .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-party .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-party .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-party .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-party .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-party .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-party .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-party .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-party .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-party .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-party .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-party .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-party .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-party .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-party .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-party .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-party .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-party .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-party .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-party .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-party .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-party .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-party .workflowDetails .featureList,
#dreamz-party .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-party .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-party .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-party .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-party #party-connected-tools {
background: #fff;
}
#dreamz-party #party-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-party .featureTab,
#dreamz-party .industryPriority,
#dreamz-party summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-party .industryIntroHead {
gap: 30px;
}
#dreamz-party .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-party .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-party .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-party .factoryWorkflow {
padding: 22px;
}
#dreamz-party .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-party .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-party .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-party .industryPriorityGrid {
gap: 14px;
}
#dreamz-party .industryPriority {
padding: 22px 19px;
}
#dreamz-party .industryPriority h3 {
font-size: 21px;
}
#dreamz-party .industryPriority p {
font-size: 12px;
}
#dreamz-party .priorityLink {
font-size: 10px;
}
#dreamz-party .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-party .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-party .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-party .vedaUseCases>div {
display: block;
}
#dreamz-party .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-party .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-party .featureTabs {
gap: 8px;
}
#dreamz-party .featureTab {
min-height: 108px;
}
#dreamz-party .featureStage,
#dreamz-party .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-party .rfidSpotlight .spotlightMedia,
#dreamz-party .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-party .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-party .featurePanel {
min-height: 0;
}
#dreamz-party .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-party .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-party .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-party .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-party .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-party .clientBand {
padding: 22px 0;
}
#dreamz-party .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-party .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-party .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-party .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-party .industryIntro {
padding: 53px 0;
}
#dreamz-party .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-party .industryIntroHead>p {
font-size: 14px;
}
#dreamz-party .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-party .industryPriority {
padding: 23px;
}
#dreamz-party .industryPriority h3 {
font-size: 24px;
}
#dreamz-party .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-party .industryPriority p {
font-size: 13px;
}
#dreamz-party .priorityLink {
font-size: 11px;
}
#dreamz-party .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-party .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-party .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-party .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-party .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-party .vedaUseCases>div {
display: flex;
}
#dreamz-party .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-party .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-party .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-party .vedaMessage.user {
margin-left: 25px;
}
#dreamz-party .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-party .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-party .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-party .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-party .spotlightHead h2 {
font-size: 32px;
}
#dreamz-party .spotlightHead>p {
font-size: 14px;
}
#dreamz-party .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-party .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-party .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-party .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-party .featurePanel h3 {
font-size: 24px;
}
#dreamz-party .featurePanel>p {
font-size: 13px;
}
#dreamz-party .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-party .spotlightChecks>li {
font-size: 12px;
}
#dreamz-party .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-party .spotlightActions .button {
width: 100%;
}
#dreamz-party .spotlightScope {
font-size: 10px;
}
#dreamz-party .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-party .mediaTitle strong {
font-size: 11px;
}
#dreamz-party .mediaTitle div>span {
font-size: 8px;
}
#dreamz-party .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-party .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-party .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-party .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-party .aiReviewBody {
padding: 13px;
}
#dreamz-party .aiIssue {
padding: 13px;
}
#dreamz-party .aiIssue strong {
font-size: 14px;
}
#dreamz-party .aiEvidence {
gap: 6px;
}
#dreamz-party .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-party .aiEvidence strong {
font-size: 9px;
}
#dreamz-party .aiEvidence span {
font-size: 7px;
}
#dreamz-party .exampleLabel {
font-size: 6px;
}
#dreamz-party .factoryWorkflows {
padding: 55px 0;
}
#dreamz-party .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-party .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-party .industryRibbonGrid {
gap: 12px;
}
#dreamz-party .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-party .spotlightHead h2 {
font-size: 29px;
}
#dreamz-party .featureStage {
padding: 19px 13px;
}
#dreamz-party .mediaTitle>.icon {
display: none;
}
#dreamz-party .exampleLabel {
display: none;
}
#dreamz-party .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-party .featureTabs {
display: none;
}
#dreamz-party .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-party .featureStage {
display: block;
}
#dreamz-party .featurePanel {
color: #000;
}
}
#dreamz-party #party-delivery-features-1:checked~.featureTabs label[for="party-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-delivery-features-1:focus-visible~.featureTabs label[for="party-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-party #party-delivery-features-2:checked~.featureTabs label[for="party-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-delivery-features-2:focus-visible~.featureTabs label[for="party-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-party #party-delivery-features-3:checked~.featureTabs label[for="party-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-delivery-features-3:focus-visible~.featureTabs label[for="party-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-party #party-delivery-features-4:checked~.featureTabs label[for="party-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-delivery-features-4:focus-visible~.featureTabs label[for="party-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-party #party-delivery-features-5:checked~.featureTabs label[for="party-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-delivery-features-5:focus-visible~.featureTabs label[for="party-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-party #party-rfid-features-1:checked~.featureTabs label[for="party-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-rfid-features-1:focus-visible~.featureTabs label[for="party-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-party #party-rfid-features-2:checked~.featureTabs label[for="party-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-rfid-features-2:focus-visible~.featureTabs label[for="party-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-party #party-rfid-features-3:checked~.featureTabs label[for="party-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-rfid-features-3:focus-visible~.featureTabs label[for="party-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-party #party-rfid-features-4:checked~.featureTabs label[for="party-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-rfid-features-4:focus-visible~.featureTabs label[for="party-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-party #party-rfid-features-5:checked~.featureTabs label[for="party-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-rfid-features-5:focus-visible~.featureTabs label[for="party-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-party #party-ai-decisions-features-1:checked~.featureTabs label[for="party-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-ai-decisions-features-1:focus-visible~.featureTabs label[for="party-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-party #party-ai-decisions-features-2:checked~.featureTabs label[for="party-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-ai-decisions-features-2:focus-visible~.featureTabs label[for="party-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-party #party-ai-decisions-features-3:checked~.featureTabs label[for="party-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-ai-decisions-features-3:focus-visible~.featureTabs label[for="party-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-party #party-ai-decisions-features-4:checked~.featureTabs label[for="party-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-ai-decisions-features-4:focus-visible~.featureTabs label[for="party-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-party #party-ai-decisions-features-5:checked~.featureTabs label[for="party-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-party #party-ai-decisions-features-5:focus-visible~.featureTabs label[for="party-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-party #party-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-party .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .featureMediaPanels {
min-width: 0;
}
#dreamz-party .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-party .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-party .featureMediaPanels .windowTop strong,
#dreamz-party .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-party .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-party .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-party .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-party .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-party .featureMediaPanels .windowBody>*,
#dreamz-party .featureMediaPanels .spectrumGrid>*,
#dreamz-party .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-party .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-party .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-party .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-party .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-party .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-party .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-party .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-party .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-party .pin2 {
top: 88px;
right: 88px;
}
#dreamz-party .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-party .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-party .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-party .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-party .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-party .featureMediaPanels .graphNodes .node.n1,
#dreamz-party .featureMediaPanels .graphNodes .node.n2,
#dreamz-party .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-party .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-party .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-party .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-party .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-party .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-party .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-party .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-party .freshGraphic * {
box-sizing: border-box;
}
#dreamz-party .rfPanel,
#dreamz-party .aiInsightCard,
#dreamz-party .forecastVisualCard,
#dreamz-party .forecastSuggestion,
#dreamz-party .knowledgeTile,
#dreamz-party .chatConversation,
#dreamz-party .trainingSummary,
#dreamz-party .moduleCard,
#dreamz-party .qualityHeatCard,
#dreamz-party .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-party .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-party .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-party .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-party .statusPill,
#dreamz-party .cardTag,
#dreamz-party .forecastSuggestion b,
#dreamz-party .moduleCard b,
#dreamz-party .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-party .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-party .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-party .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-party .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-party .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-party .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-party .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-party .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-party .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-party .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-party .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-party .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-party .dot.good {
background: #298EEC;
}
#dreamz-party .dot.warn {
background: #F4A62A;
}
#dreamz-party .dot.bad {
background: #EB6B53;
}
#dreamz-party .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-party .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-party .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-party .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-party .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-party .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-party .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-party .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-party .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-party .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-party .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-party .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-party .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-party .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-party .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-party .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-party .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-party .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-party .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-party .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-party .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-party .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-party .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-party .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-party .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-party .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-party .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-party .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-party .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-party .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-party .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-party .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-party .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-party .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-party .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-party .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-party .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-party .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-party .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-party .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-party .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-party .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-party .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-party .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-party .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-party .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-party .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-party .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-party .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-party .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-party .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-party .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-party .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-party .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-party .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-party .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-party .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-party .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-party .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-party .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-party .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-party .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-party .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-party .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-party .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-party .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-party .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-party .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-party .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-party .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-party .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-party .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-party .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-party .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-party .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-party .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-party .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-party .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-party .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-party .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-party .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-party .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-party .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-party .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-party .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-party .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-party .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-party .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-party .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-party .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-party .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-party .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-party .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-party .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-party .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-party .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-party .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-party .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-party .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-party .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-party .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-party .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-party .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-party .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-party .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-party .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-party .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-party .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-party .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-party .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-party .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-party .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-party .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-party .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-party .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-party .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-party .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-party .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-party .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-party .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-party .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-party .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-party .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-party .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-party .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-party .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-party .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-party .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-party .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-party .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-party .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-party .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-party .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-party .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-party .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-party .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-party .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-party .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-party .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-party .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-party .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-party .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-party .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-party .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-party .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-party .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-party .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-party .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-party .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-party .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-party .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-party .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-party .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-party .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-party .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-party .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-party .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-party .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-party .rfTrackLayout,
#dreamz-party .rfFlowLayout,
#dreamz-party .rfAlertGrid,
#dreamz-party .rfCycleLayout,
#dreamz-party .rfSitesLayout,
#dreamz-party .aiRootLayout,
#dreamz-party .aiForecastLayout,
#dreamz-party .aiChatLayout,
#dreamz-party .aiTrainingLayout,
#dreamz-party .aiQualityLayout,
#dreamz-party .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-party .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-party .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-party .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-party .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-party .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-party .aiLink {
display: none;
}
}
#dreamz-party .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-party .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-party .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-party .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-party .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-party .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-party .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-party .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-party .mfgHero h1>span {
display: block;
}
#dreamz-party .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-party .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-party .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-party .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-party .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-party .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-party .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-party .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-party .mfgHeroContent {
min-height: 610px;
}
#dreamz-party .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-party .mfgHeroLead {
font-size: 16px;
}
#dreamz-party .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-party .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-party .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-party .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-party .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-party .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-party .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-party .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-party .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-party .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-party .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-party .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-party .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-party .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-party .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-party .mfgHero {
background: #fff;
color: #000;
}
#dreamz-party .mfgHeroScene,
#dreamz-party .mfgHeroActions {
display: none;
}
#dreamz-party .mfgHeroContent {
min-height: 0;
}
#dreamz-party .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
#dreamz-party #party-rfid .featureStage,
#dreamz-party #party-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-party .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-party .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-party .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-party .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-party .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-party .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-party .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-party .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-party .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-party .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-party .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-party .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-party .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-party .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-party .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-party .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-party .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-party .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-party .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-party .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-party .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-party .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-party .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-party .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-party .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-party .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-party .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-party .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-party .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-party .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-party .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-party .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-party .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-party .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-party .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-party .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-party .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-party .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-party .mfgGallery .flowArrow {
display: none;
}
#dreamz-party .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-party .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-party .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-party .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-party .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-party .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-party .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-party .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-party .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-party .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-party .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-party .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-party .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-party .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-party .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-party .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-party .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-party .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-party .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-party .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-party .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-party .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-party .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-party .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-party .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-party .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-party .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-party .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-party .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-party .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-party .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-party .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-party .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-party .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-party .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-party .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-party .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-party .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-party .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-party .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-party .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-party .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-party .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-party .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-party .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-party .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-party .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-party .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-party .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-party .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-party .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-party .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-party .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-party .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-party .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-party .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-party .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-party .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-party .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-party .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-party .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-party .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-party .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-party .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-party .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-party .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-party .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-party .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-party .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-party .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-party .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-party .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-party .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-party .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-party .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-party .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-party .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-party .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-party .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-party .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-party .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-party .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-party .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-party .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-party .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-party .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-party .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-party .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-party .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-party .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-party .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-party .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-party .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-party .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-party .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-party .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-party .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-party .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-party .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-party .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-party .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-party .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-party .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-party .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-party .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-party .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-party .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-party #party-rfid .featureStage,
#dreamz-party #party-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-party #party-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-party .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-party #party-rfid .featureStage,
#dreamz-party #party-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-party .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-party .mfgGallery .freshWindow {
height: auto;
}
#dreamz-party .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-party .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-party .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-party .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-party .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-party .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-party .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-party .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-party .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-party .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-party .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-party .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-party .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-party .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-party .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-party .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-party .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-party .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-party .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-party .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-party .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-party .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-party .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-party .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-party .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-party .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-party .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-party .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-party .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-party .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-party .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-party .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-party .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-party .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-party .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-party .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-party .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-party .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-party .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-party .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-party .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-party .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-party .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-party .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-party .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-party .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-party .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-party .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-party .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-party .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-party .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-party .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-party .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-party .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-party .partyVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-party .partyGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-party .partyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-party .partyStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-party .partyVisualGallery>.partyGraphic {
display: none;
}
#dreamz-party #party-delivery .featureStage,
#dreamz-party #party-rfid .featureStage,
#dreamz-party #party-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-party #party-rfid .partyVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-party #party-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-party .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-party .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-party .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-party .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
}
@media (max-width:1100px) {
#dreamz-party #party-delivery .featureStage,
#dreamz-party #party-rfid .featureStage,
#dreamz-party #party-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-party #party-rfid .partyVisualGallery,
#dreamz-party #party-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-party .mfgHeroScene {
height: 290px;
}
#dreamz-party #party-delivery .featureStage,
#dreamz-party #party-rfid .featureStage,
#dreamz-party #party-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-party .partyVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-party .partyVisualGallery>.partyGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-party #party-delivery-features-1:checked~.featureStage .partyVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-party #party-delivery-features-2:checked~.featureStage .partyVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-party #party-delivery-features-3:checked~.featureStage .partyVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-party #party-delivery-features-4:checked~.featureStage .partyVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-party #party-delivery-features-5:checked~.featureStage .partyVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-party #party-rfid-features-1:checked~.featureStage .partyVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-party #party-rfid-features-2:checked~.featureStage .partyVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-party #party-rfid-features-3:checked~.featureStage .partyVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-party #party-rfid-features-4:checked~.featureStage .partyVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-party #party-rfid-features-5:checked~.featureStage .partyVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-party #party-ai-decisions-features-1:checked~.featureStage .partyVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-party #party-ai-decisions-features-2:checked~.featureStage .partyVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-party #party-ai-decisions-features-3:checked~.featureStage .partyVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-party #party-ai-decisions-features-4:checked~.featureStage .partyVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-party #party-ai-decisions-features-5:checked~.featureStage .partyVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-party .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-party .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-party .partyIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-party .partyGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-party .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-party .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-party .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-party .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-party .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-party .mfgHeroContent {
background: transparent;
}
#dreamz-party .mfgHeroScene img {
object-position: 72% 50%;
}
#dreamz-party .partyIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-party .partyIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-party .partyGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-party .partyVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-party .mfgHeroScene img {
object-position: 76% 50%;
}
}
@media(max-width:600px) {
#dreamz-party .mfgHeroScene img {
object-position: 80% 50%;
}
}  #dreamz-media .industryIntroHead.compact,
#dreamz-media .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-media .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-media .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-media .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-media .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-media .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-media .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-media .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-media .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-media .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-media .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-media .windowDots {
display: flex;
gap: 5px;
}
#dreamz-media .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-media .windowBody {
padding: 16px;
}
#dreamz-media .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-media .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-media .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-media .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-media .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-media .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-media .chartGridLine.l1 {
top: 34px;
}
#dreamz-media .chartGridLine.l2 {
top: 65px;
}
#dreamz-media .chartGridLine.l3 {
top: 96px;
}
#dreamz-media .chartGridLine.l4 {
top: 127px;
}
#dreamz-media .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-media .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-media .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-media .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-media .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-media .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-media .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-media .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-media .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-media .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-media .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-media .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-media .noteCard p,
#dreamz-media .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-media .alertStack {
display: grid;
gap: 10px;
}
#dreamz-media .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-media .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-media .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-media .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-media .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-media .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-media .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-media .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-media .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-media .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-media .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-media .scheduleBoard h4,
#dreamz-media .todoBoard h4,
#dreamz-media .siteBoard h4,
#dreamz-media .chatPanel h4,
#dreamz-media .lessonPanel h4,
#dreamz-media .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-media .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-media .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-media .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-media .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-media .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-media .taskRow:last-child {
border-bottom: 0;
}
#dreamz-media .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-media .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-media .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-media .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-media .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-media .inventoryTable th,
#dreamz-media .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-media .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-media .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-media .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-media .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-media .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-media .phoneBody {
padding: 12px;
}
#dreamz-media .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-media .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-media .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-media .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-media .progressList {
display: grid;
gap: 10px;
}
#dreamz-media .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-media .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-media .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-media .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-media .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-media .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-media .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-media .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-media .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-media .pin1 {
top: 56px;
left: 58px;
}
#dreamz-media .pin2 {
top: 88px;
right: 88px;
}
#dreamz-media .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-media .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-media .siteRow:last-child {
border-bottom: 0;
}
#dreamz-media .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-media .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-media .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-media .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-media .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-media .graphNodes:before,
#dreamz-media .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-media .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-media .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-media .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-media .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-media .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-media .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-media .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-media .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-media .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-media .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-media .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-media .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-media .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-media .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-media .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-media .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-media .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-media .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-media .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-media .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-media .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-media .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-media .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-media .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-media .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-media .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-media .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-media .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-media .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-media .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-media .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-media .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-media .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-media #media-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-media #media-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-media #media-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-media #media-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-media #media-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-media #media-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-media #media-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-media #media-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-media #media-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-media #media-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-media #media-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-media #media-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-media #media-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-media #media-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-media #media-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-media #media-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-media #media-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-media #media-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-media #media-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-media #media-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-media #media-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-media #media-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-media #media-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-media #media-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-media #media-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-media #media-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-media #media-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-media #media-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-media #media-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-media #media-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-media .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-media .featureMediaPanels {
min-height: 0;
}
#dreamz-media .inventorySplit,
#dreamz-media .forecastGrid,
#dreamz-media .siteGrid,
#dreamz-media .spectrumGrid,
#dreamz-media .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-media .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-media .metricGrid,
#dreamz-media .lessonCards,
#dreamz-media .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-media .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-media .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-media {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-media * {
box-sizing: border-box;
}
#dreamz-media {
scroll-behavior: smooth;
}
#dreamz-media {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-media a {
color: inherit;
text-decoration: none;
}
#dreamz-media .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-media .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-media .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-media .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-media .brand span {
color: var(--brand);
}
#dreamz-media .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-media .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-media .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-media .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-media .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-media .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-media .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-media .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-media h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-media .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-media .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-media .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-media .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-media .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-media .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-media .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-media .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-media .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-media .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-media .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-media .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-media .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-media .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-media .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-media .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-media .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-media .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-media .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-media .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-media .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-media .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-media .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-media .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-media .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-media .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-media .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-media .sectionHead {
margin-bottom: 44px;
}
#dreamz-media .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-media .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-media .aiJourney h2 {
color: #fff;
}
#dreamz-media .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-media .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-media .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-media .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-media .aiStep:last-child::after {
display: none;
}
#dreamz-media .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-media .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-media .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-media .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-media .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-media .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-media .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-media .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-media .capability {
background: #fff;
}
#dreamz-media .capability.alt {
background: var(--sky-2);
}
#dreamz-media .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-media .twoCol.reverse .visual {
order: 2;
}
#dreamz-media .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-media .visual .placeholder {
min-height: 355px;
}
#dreamz-media .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-media .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-media details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-media details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-media details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-media details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-media details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-media details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-media .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-media .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-media .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-media .darkSection h2,
#dreamz-media .darkSection h3 {
color: #fff;
}
#dreamz-media .darkSection .sectionHead p,
#dreamz-media .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-media .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-media .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-media .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-media .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-media .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-media .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-media .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-media .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-media .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-media .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-media .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-media .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-media .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-media .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-media .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-media .benefitBand h2 {
color: #fff;
}
#dreamz-media .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-media .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-media .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-media .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-media .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-media .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-media .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-media .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-media .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-media .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-media .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-media .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-media .faq {
max-width: 900px;
}
#dreamz-media .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-media .ctaPanel h2 {
color: #fff;
}
#dreamz-media .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-media .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-media .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-media .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-media .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-media .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-media .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-media .inlineCta.dark h3 {
color: #fff;
}
#dreamz-media .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-media .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-media .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-media .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-media .button.yellow:hover {
background: #FFD84D;
}
#dreamz-media .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-media .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-media .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-media .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-media footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-media .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-media .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-media .heroGrid,
#dreamz-media .twoCol,
#dreamz-media .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-media .twoCol.reverse .visual {
order: initial;
}
#dreamz-media .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-media .ratingGrid,
#dreamz-media .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-media .ratingLead,
#dreamz-media .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-media .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-media .aiStep:nth-child(3)::after,
#dreamz-media .aiStep:last-child::after {
display: none;
}
#dreamz-media .outcomeGrid,
#dreamz-media .challengeGrid,
#dreamz-media .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-media .cards,
#dreamz-media .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-media .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-media .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-media .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-media .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-media .hero {
padding: 58px 0 52px;
}
#dreamz-media .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-media .aiStep::after {
display: none;
}
#dreamz-media .logoRow,
#dreamz-media .ratingGrid,
#dreamz-media .awardGrid,
#dreamz-media .outcomeGrid,
#dreamz-media .challengeGrid,
#dreamz-media .benefitGrid,
#dreamz-media .cards,
#dreamz-media .proofCards,
#dreamz-media .integrationGrid,
#dreamz-media .featureList {
grid-template-columns: 1fr;
}
#dreamz-media .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-media .ctaPanel {
padding: 34px 24px;
}
#dreamz-media .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-media .inlineCtaActions {
width: 100%;
}
#dreamz-media .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-media {
--muted: #526A7C;
--shadow: none;
}
#dreamz-media {
background: var(--sky-2);
}
#dreamz-media p {
margin-bottom: 0;
}
#dreamz-media [id] {
scroll-margin-top: 94px;
}
#dreamz-media svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-media .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-media .darkSection h2,
#dreamz-media .darkSection h3,
#dreamz-media .aiJourney h2,
#dreamz-media .benefitBand h2,
#dreamz-media .ctaPanel h2,
#dreamz-media .inlineCta.dark h3 {
color: #fff;
}
#dreamz-media .wrap>*,
#dreamz-media .heroGrid>*,
#dreamz-media .twoCol>*,
#dreamz-media .ctaPanel>* {
min-width: 0;
}
#dreamz-media .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-media .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-media .skipLink:focus {
transform: none;
}
#dreamz-media a:focus-visible,
#dreamz-media summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-media .darkSection a:focus-visible,
#dreamz-media .darkSection summary:focus-visible,
#dreamz-media .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-media .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-media .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-media .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-media .brandName>span {
color: var(--brand-dark);
}
#dreamz-media .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-media .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-media .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-media .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-media .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-media .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-media .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-media .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-media .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-media .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-media .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-media .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-media .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-media .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-media .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-media .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-media .clientBand {
padding: 27px 0;
}
#dreamz-media .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-media .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-media .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-media .logoBox.wide {
font-size: 12px;
}
#dreamz-media .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-media .sectionHead {
margin-bottom: 36px;
}
#dreamz-media .eyebrow {
line-height: 1.5;
}
#dreamz-media .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-media .aiStep {
min-height: 162px;
}
#dreamz-media .aiStep strong {
line-height: 1.35;
}
#dreamz-media .aiStep span {
line-height: 1.65;
}
#dreamz-media .aiCallout {
margin-top: 24px;
}
#dreamz-media .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-media .outcome>.icon {
color: var(--navy);
}
#dreamz-media .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-media .awardItem>.icon {
color: var(--navy);
}
#dreamz-media .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-media .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-media .twoCol.reverse .visual {
order: -1;
}
#dreamz-media .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-media .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-media .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-media .featureList {
gap: 13px 18px;
}
#dreamz-media .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-media .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-media .check .icon {
width: 14px;
height: 14px;
}
#dreamz-media details.capabilityMore {
margin-bottom: 0;
}
#dreamz-media .capabilityMore summary {
min-height: 34px;
}
#dreamz-media .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-media .textCta {
font-size: 14px;
}
#dreamz-media .visual {
min-width: 0;
}
#dreamz-media .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-media .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-media .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-media .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-media .panelBody {
padding: 20px;
}
#dreamz-media .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-media .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-media .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-media .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-media .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-media .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-media .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-media .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-media .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-media .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-media .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-media .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-media .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-media .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-media .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-media .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-media .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-media .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-media .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-media .dataRow:last-child {
border-bottom: 0;
}
#dreamz-media .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-media .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-media .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-media .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-media .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-media .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-media .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-media .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-media .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-media .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-media .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-media .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-media .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-media .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-media .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-media .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-media .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-media .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-media .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-media .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-media .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-media .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-media .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-media .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-media .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-media .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-media .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-media .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-media .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-media .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-media .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-media .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-media .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-media .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-media .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-media .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-media .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-media .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-media .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-media .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-media .promptList {
display: grid;
gap: 10px;
}
#dreamz-media .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-media .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-media .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-media .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-media .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-media .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-media .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-media .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-media .quoteTable th,
#dreamz-media .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-media .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-media .quoteTable td:first-child {
width: 64%;
}
#dreamz-media .quoteTable th:last-child,
#dreamz-media .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-media .quoteTable strong {
font-size: 11px;
}
#dreamz-media .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-media .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-media .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-media .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-media .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-media .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-media .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-media .orderJourney {
margin: 20px 0;
}
#dreamz-media .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-media .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-media .journeyRow:last-child:before {
display: none;
}
#dreamz-media .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-media .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-media .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-media .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-media .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-media .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-media .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-media .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-media .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-media .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-media .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-media .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-media .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-media .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-media .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-media .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-media .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-media .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-media .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-media .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-media .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-media .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-media .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-media .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-media .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-media .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-media .customerTimeline strong {
color: #fff;
}
#dreamz-media .customerTimeline small {
color: #BFBFBF;
}
#dreamz-media .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-media .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-media .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-media .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-media .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-media .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-media .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-media .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-media .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-media .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-media .chartTitle strong {
font-size: 12px;
}
#dreamz-media .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-media .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-media .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-media .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-media .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-media .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-media .inlineCtaActions {
max-width: 42%;
}
#dreamz-media .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-media .inlineCta h3 {
line-height: 1.35;
}
#dreamz-media .card {
box-shadow: none;
}
#dreamz-media .cardIcon {
box-shadow: none;
}
#dreamz-media .card h3 {
font-size: 22px;
}
#dreamz-media .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-media .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-media .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-media .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-media .ratingBand {
padding: 34px 0;
}
#dreamz-media .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-media .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-media .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-media .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-media .ratingItem:first-child {
border-left: 0;
}
#dreamz-media .proofCard h3 {
font-size: 23px;
}
#dreamz-media .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-media .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-media .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-media .integration {
min-height: 98px;
}
#dreamz-media .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-media .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-media .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-media .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-media .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-media .finalActions {
display: grid;
gap: 11px;
}
#dreamz-media .finalActions .button {
white-space: nowrap;
}
#dreamz-media .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-media .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-media .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-media .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-media .heroGrid {
gap: 30px;
}
#dreamz-media .twoCol {
gap: 32px;
}
#dreamz-media .panelBody {
padding: 16px;
}
#dreamz-media .panelHead {
padding: 16px;
}
#dreamz-media .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-media .pipelineColumns {
gap: 7px;
}
#dreamz-media .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-media .heroGrid,
#dreamz-media .twoCol,
#dreamz-media .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .heroGrid {
gap: 36px;
}
#dreamz-media .hero h1 {
max-width: 730px;
}
#dreamz-media .hero .lead {
max-width: 690px;
}
#dreamz-media .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-media .twoCol {
gap: 34px;
}
#dreamz-media .twoCol.reverse .visual {
order: initial;
}
#dreamz-media .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-media .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-media .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-media .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-media .ratingSectionGrid {
gap: 20px;
}
#dreamz-media .inlineCta {
align-items: flex-start;
}
#dreamz-media .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-media .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-media .card {
padding: 22px;
}
#dreamz-media .card h3 {
font-size: 21px;
}
#dreamz-media .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-media .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-media .cards,
#dreamz-media .proofCards {
grid-template-columns: 1fr;
}
#dreamz-media .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-media .inlineCta {
flex-direction: column;
}
#dreamz-media .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-media .inlineCtaActions .button {
flex: 1;
}
#dreamz-media .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-media .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-media .wrap {
width: calc(100% - 32px);
}
#dreamz-media [id] {
scroll-margin-top: 82px;
}
#dreamz-media .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-media .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-media .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-media .hero {
padding: 51px 0 48px;
}
#dreamz-media .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-media .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-media .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-media .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-media .hero .microcopy {
font-size: 11px;
}
#dreamz-media .heroPills span {
font-size: 9px;
}
#dreamz-media .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-media .sectionHead p {
font-size: 16px;
}
#dreamz-media .copy h2 {
font-size: 34px;
}
#dreamz-media .copy p {
font-size: 15px;
}
#dreamz-media .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-media .logoBox {
min-height: 53px;
}
#dreamz-media .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-media .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-media .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-media .aiStep strong {
font-size: 13px;
}
#dreamz-media .aiStep span {
font-size: 11px;
}
#dreamz-media .aiStep::after {
display: none;
}
#dreamz-media .outcomeGrid,
#dreamz-media .challengeGrid,
#dreamz-media .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-media .outcome {
padding: 24px;
}
#dreamz-media .outcome strong {
font-size: 22px;
}
#dreamz-media .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-media .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-media .featureList,
#dreamz-media .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-media .featureItem {
font-size: 13px;
}
#dreamz-media .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-media .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-media .panelHead {
padding: 15px 13px;
}
#dreamz-media .panelHead>strong {
font-size: 12px;
}
#dreamz-media .panelBody {
padding: 14px;
}
#dreamz-media .productPanel {
border-radius: 16px;
}
#dreamz-media .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-media .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-media .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-media .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-media .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-media .deal strong {
font-size: 10px;
}
#dreamz-media .deal small {
font-size: 9px;
}
#dreamz-media .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-media .mobileWorkspace {
gap: 12px;
}
#dreamz-media .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-media .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-media .sideTile {
padding: 10px;
}
#dreamz-media .sideTile strong {
font-size: 10px;
}
#dreamz-media .sideTile p {
font-size: 9px;
}
#dreamz-media .mobileHeader strong {
font-size: 15px;
}
#dreamz-media .mobileAccount strong {
font-size: 10px;
}
#dreamz-media .mobileAccount small {
font-size: 7px;
}
#dreamz-media .phoneDevice .rowIcon {
display: none;
}
#dreamz-media .quoteTable th,
#dreamz-media .quoteTable td {
padding: 12px 4px;
}
#dreamz-media .quoteTable strong {
font-size: 10px;
}
#dreamz-media .quoteTable small {
font-size: 8px;
}
#dreamz-media .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-media .docHeader strong {
font-size: 17px;
}
#dreamz-media .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-media .miniFlow span {
padding: 6px;
}
#dreamz-media .rowCopy strong {
font-size: 10px;
}
#dreamz-media .rowCopy small {
font-size: 8px;
}
#dreamz-media .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-media .miniStats {
gap: 7px;
}
#dreamz-media .miniStats>div {
padding: 9px;
}
#dreamz-media .miniStats strong {
font-size: 18px;
}
#dreamz-media .miniStats span {
font-size: 8px;
}
#dreamz-media .collectionStats>div {
padding: 13px;
}
#dreamz-media .collectionStats strong {
font-size: 24px;
}
#dreamz-media .customerHeader strong {
font-size: 17px;
}
#dreamz-media .customerFacts>div {
padding: 10px;
}
#dreamz-media .customerFacts strong {
font-size: 12px;
}
#dreamz-media .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-media .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-media .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-media .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-media .integration small {
font-size: 9px;
}
#dreamz-media .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-media .ctaPanel p {
font-size: 15px;
}
#dreamz-media .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-media .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-media .contextSection {
padding: 0 0 24px;
}
#dreamz-media .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-media .wrap {
width: calc(100% - 24px);
}
#dreamz-media .brand {
font-size: 18px;
}
#dreamz-media .brandMark {
width: 25px;
height: 25px;
}
#dreamz-media .hero h1 {
font-size: 38px;
}
#dreamz-media .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-media .copy h2 {
font-size: 31px;
}
#dreamz-media .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-media .phoneDevice {
width: 210px;
}
#dreamz-media .phoneDevice .rowIcon {
display: grid;
}
#dreamz-media .mobileSide {
gap: 8px;
}
#dreamz-media .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-media .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-media .sideTile p {
margin: 0;
}
#dreamz-media .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-media .collectionStats strong {
font-size: 21px;
}
#dreamz-media .inventoryIntro strong {
font-size: 14px;
}
#dreamz-media .dataRow {
gap: 7px;
}
#dreamz-media .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-media .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-media {
scroll-behavior: auto;
}
#dreamz-media *,
#dreamz-media *::before,
#dreamz-media *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-media {
background: var(--sky-2);
}
#dreamz-media .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-media .hero .eyebrow {
max-width: 100%;
}
#dreamz-media .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-media .ganttIllustration,
#dreamz-media .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-media .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-media .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-media .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-media .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-media .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-media .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-media .comparisonTable th,
#dreamz-media .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-media .comparisonTable th:first-child {
width: 23%;
}
#dreamz-media .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-media .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-media .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-media .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-media .card,
#dreamz-media .proofCard,
#dreamz-media .productPanel,
#dreamz-media .outcome,
#dreamz-media .benefit {
box-shadow: none;
}
#dreamz-media .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-media .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-media .hero .eyebrow {
font-size: 10px;
}
#dreamz-media .comparisonTable {
font-size: 11px;
}
#dreamz-media .comparisonTable th,
#dreamz-media .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-media .comparisonTable th:first-child {
width: 24%;
}
#dreamz-media .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-media .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-media .hero h1 {
font-size: 38px;
}
}
#dreamz-media .scheduleIllustration,
#dreamz-media .analyticsIllustration,
#dreamz-media .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-media .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-media .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-media .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-media .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-media .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-media .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-media .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-media .darkSection .textCta {
color: var(--yellow);
}
#dreamz-media .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-media .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-media .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-media .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-media .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-media .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-media .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-media .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-media .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-media .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-media .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-media .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-media .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-media .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-media .phoneDevice {
max-width: 100%;
}
#dreamz-media .heroPills {
line-height: 1.55;
}
#dreamz-media .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-media .plantFacts {
gap: 7px;
}
#dreamz-media .plantFacts>div {
padding: 9px;
}
#dreamz-media .plantFacts strong {
font-size: 11px;
}
#dreamz-media .scanSummary {
padding: 12px;
}
#dreamz-media .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-media .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-media .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-media .phoneDevice .rowIcon {
display: grid;
}
#dreamz-media .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-media .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-media .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-media .sideTile strong {
font-size: 12px;
}
#dreamz-media .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-media .topbar,
#dreamz-media .heroActions,
#dreamz-media .finalActions,
#dreamz-media .contextSection,
#dreamz-media .valueCtaSection {
display: none;
}
#dreamz-media section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-media .hero {
padding-top: 20px;
}
}
#dreamz-media {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-media p {
margin: 0;
}
#dreamz-media main {
display: block;
}
#dreamz-media .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-media .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-media .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-media .heroAccent {
color: var(--black);
}
#dreamz-media .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-media .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-media .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-media .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-media .microcopy {
margin-top: 14px;
}
#dreamz-media .heroPills {
margin-top: 13px;
}
#dreamz-media .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-media .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-media .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-media .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-media .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-media .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-media .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-media .clientBand {
padding: 24px 0;
}
#dreamz-media .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-media .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-media .logoBox.wide {
font-size: 15px;
}
#dreamz-media .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-media .sectionHead p {
margin: 17px 0 0;
}
#dreamz-media .copy p {
margin: 16px 0 0;
}
#dreamz-media .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-media .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-media .aiJourney {
background: var(--black);
}
#dreamz-media .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-media .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-media .productPanel {
border-radius: 18px;
}
#dreamz-media .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-media .panelHead>strong {
font-size: 13px;
}
#dreamz-media .sampleTag {
font-size: 9px;
}
#dreamz-media .panelBody {
padding: 21px;
}
#dreamz-media .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-media .docHeader {
padding-bottom: 16px;
}
#dreamz-media .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-media .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-media .smallLabel {
font-size: 9px;
}
#dreamz-media .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-media .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-media .dataRow {
padding: 14px 0;
}
#dreamz-media .statusPill {
font-size: 8px;
}
#dreamz-media .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-media .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-media .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-media .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-media .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-media .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-media .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-media .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-media .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-media .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-media .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-media .hierarchy strong {
color: var(--navy);
}
#dreamz-media .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-media .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-media .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-media .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-media .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-media .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-media .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-media .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-media .mobileAccount small {
font-size: 9px;
}
#dreamz-media .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-media .sideTile strong {
font-size: 12px;
}
#dreamz-media .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-media .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-media .mobileAction {
font-size: 9px;
}
#dreamz-media .journeyRow strong {
font-size: 13px;
}
#dreamz-media .journeyRow small {
font-size: 11px;
}
#dreamz-media .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-media .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-media .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-media .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-media .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-media .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-media .utilityReadout small {
font-size: 12px;
}
#dreamz-media .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-media .darkSection {
background: var(--black);
}
#dreamz-media .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-media .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-media .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-media .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-media .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-media .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-media .assistantHead small {
font-size: 11px;
}
#dreamz-media .assistantNote {
font-size: 11px;
}
#dreamz-media .reportTags span {
font-size: 10px;
}
#dreamz-media .card p {
margin: 12px 0 0;
}
#dreamz-media .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-media .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-media .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-media .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-media .cards>.card p {
padding-bottom: 22px;
}
#dreamz-media .benefitBand {
background: var(--black);
}
#dreamz-media .benefit {
background: var(--black-soft);
}
#dreamz-media .inlineCta h3 {
font-size: 20px;
}
#dreamz-media .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-media .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-media .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-media .valueCtaSection {
padding: 32px 0;
}
#dreamz-media .proofCard p {
margin-top: 15px;
}
#dreamz-media .proofCard h3 {
font-size: 23px;
}
#dreamz-media .integrationNote {
margin-top: 23px;
}
#dreamz-media .ctaPanel {
background: var(--black);
}
#dreamz-media .ctaPanel p {
margin-top: 16px;
}
#dreamz-media .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-media .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-media a:hover {
text-decoration: none;
}
#dreamz-media .textCta:hover {
color: var(--navy);
}
#dreamz-media .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-media .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-media .hero h1 {
font-size: 49px;
}
#dreamz-media .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-media .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-media .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-media .hero h1 {
font-size: 58px;
}
#dreamz-media .heroVisual {
max-width: 548px;
}
#dreamz-media .hero .lead {
max-width: 700px;
}
#dreamz-media .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-media .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-media .logoBox:last-child {
grid-column: auto;
}
#dreamz-media .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-media .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-media .inlineCtaActions .button {
flex: 1;
}
#dreamz-media .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-media .hero {
padding: 28px 0 40px;
}
#dreamz-media .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-media .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-media .heroActions {
gap: 10px;
}
#dreamz-media .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-media .breadcrumb {
margin-bottom: 21px;
}
#dreamz-media .hero .eyebrow {
font-size: 11px;
}
#dreamz-media .heroVisual {
max-width: 480px;
}
#dreamz-media .heroPills {
row-gap: 9px;
}
#dreamz-media .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-media .heroPills span+span {
padding-left: 7px;
}
#dreamz-media .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-media .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-media .clientBand {
padding: 25px 0;
}
#dreamz-media .copy h2 {
font-size: 33px;
}
#dreamz-media .panelBody {
padding: 16px;
}
#dreamz-media .panelHead {
padding: 15px;
}
#dreamz-media .panelHead>strong {
font-size: 12px;
}
#dreamz-media .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-media .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-media .docHeader strong {
font-size: 18px;
}
#dreamz-media .docHeader small {
font-size: 10px;
}
#dreamz-media .rowCopy strong {
font-size: 11px;
}
#dreamz-media .rowCopy small {
font-size: 10px;
}
#dreamz-media .miniStats {
gap: 7px;
}
#dreamz-media .miniStats strong {
font-size: 21px;
}
#dreamz-media .miniStats span {
font-size: 9px;
}
#dreamz-media .miniStats>div {
padding: 10px 8px;
}
#dreamz-media .plantFacts {
gap: 8px;
}
#dreamz-media .plantFacts>div {
padding: 10px;
}
#dreamz-media .plantFacts strong {
font-size: 11px;
}
#dreamz-media .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-media .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-media .utilityReadout span {
font-size: 8px;
}
#dreamz-media .utilityReadout strong {
font-size: 24px;
}
#dreamz-media .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-media .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-media .comparisonTable {
font-size: 11px;
}
#dreamz-media .comparisonTable th,
#dreamz-media .comparisonTable td {
padding: 13px 9px;
}
#dreamz-media .contextSection {
padding: 0 0 22px;
}
#dreamz-media .valueCtaSection {
padding: 25px 0;
}
#dreamz-media .inlineCtaActions {
flex-direction: column;
}
#dreamz-media .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-media .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-media .phoneDevice {
width: 222px;
}
#dreamz-media .phoneDevice .rowIcon {
display: grid;
}
#dreamz-media .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-media .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-media .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-media .sideTile p {
margin: 0;
}
#dreamz-media .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-media .dataRow {
gap: 8px;
}
#dreamz-media .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-media .miniStats strong {
font-size: 19px;
}
#dreamz-media .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-media .heroActions .button {
width: 100%;
}
#dreamz-media .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-media .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-media .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-media .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-media .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-media .aiStep span {
font-size: 13px;
}
#dreamz-media .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-media {
background: var(--white);
}
#dreamz-media img {
display: block;
max-width: 100%;
}
#dreamz-media h1,
#dreamz-media h2,
#dreamz-media h3 {
text-wrap: balance;
}
#dreamz-media .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-media .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-media .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-media .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-media .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-media .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-media .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-media .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-media .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-media .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-media .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-media .industryIntro {
padding: 78px 0 66px;
}
#dreamz-media .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-media .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-media .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-media .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-media .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-media .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-media .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-media .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-media .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-media .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-media .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-media .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-media .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-media .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-media .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-media .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-media .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-media .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-media .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-media .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-media .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-media .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-media .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-media .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-media .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-media .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-media .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-media .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-media .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-media .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-media .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-media .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-media .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-media .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-media .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-media .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-media .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-media .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-media .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-media .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-media .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-media .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-media .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-media .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-media .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-media .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-media .rfidSpotlight {
background: #fff;
}
#dreamz-media .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-media .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-media .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-media .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-media .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-media .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-media .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-media .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-media .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-media .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-media .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-media .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-media .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-media .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-media .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-media .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-media .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-media .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-media .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-media .featurePanel {
display: none;
}
#dreamz-media .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-media .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-media .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-media .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-media .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-media .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-media .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-media .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-media .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-media .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-media .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-media .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-media .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-media .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-media .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-media .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-media .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-media .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-media .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-media .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-media .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-media .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-media .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-media .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-media .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-media .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-media .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-media .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-media .aiReviewBody {
padding: 18px;
}
#dreamz-media .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-media .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-media .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-media .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-media .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-media .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-media .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-media .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-media .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-media .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-media .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-media .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-media .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-media .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-media .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-media .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-media .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-media .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-media .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-media .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-media .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-media .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-media .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-media .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-media .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-media .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-media .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-media .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-media .workflowDetails .featureList,
#dreamz-media .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-media .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-media .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-media .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-media #media-connected-tools {
background: #fff;
}
#dreamz-media #media-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-media .featureTab,
#dreamz-media .industryPriority,
#dreamz-media summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-media .industryIntroHead {
gap: 30px;
}
#dreamz-media .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-media .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-media .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-media .factoryWorkflow {
padding: 22px;
}
#dreamz-media .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-media .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-media .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-media .industryPriorityGrid {
gap: 14px;
}
#dreamz-media .industryPriority {
padding: 22px 19px;
}
#dreamz-media .industryPriority h3 {
font-size: 21px;
}
#dreamz-media .industryPriority p {
font-size: 12px;
}
#dreamz-media .priorityLink {
font-size: 10px;
}
#dreamz-media .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-media .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-media .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-media .vedaUseCases>div {
display: block;
}
#dreamz-media .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-media .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-media .featureTabs {
gap: 8px;
}
#dreamz-media .featureTab {
min-height: 108px;
}
#dreamz-media .featureStage,
#dreamz-media .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-media .rfidSpotlight .spotlightMedia,
#dreamz-media .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-media .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-media .featurePanel {
min-height: 0;
}
#dreamz-media .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-media .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-media .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-media .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-media .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-media .clientBand {
padding: 22px 0;
}
#dreamz-media .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-media .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-media .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-media .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-media .industryIntro {
padding: 53px 0;
}
#dreamz-media .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-media .industryIntroHead>p {
font-size: 14px;
}
#dreamz-media .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-media .industryPriority {
padding: 23px;
}
#dreamz-media .industryPriority h3 {
font-size: 24px;
}
#dreamz-media .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-media .industryPriority p {
font-size: 13px;
}
#dreamz-media .priorityLink {
font-size: 11px;
}
#dreamz-media .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-media .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-media .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-media .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-media .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-media .vedaUseCases>div {
display: flex;
}
#dreamz-media .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-media .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-media .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-media .vedaMessage.user {
margin-left: 25px;
}
#dreamz-media .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-media .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-media .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-media .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-media .spotlightHead h2 {
font-size: 32px;
}
#dreamz-media .spotlightHead>p {
font-size: 14px;
}
#dreamz-media .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-media .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-media .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-media .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-media .featurePanel h3 {
font-size: 24px;
}
#dreamz-media .featurePanel>p {
font-size: 13px;
}
#dreamz-media .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-media .spotlightChecks>li {
font-size: 12px;
}
#dreamz-media .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-media .spotlightActions .button {
width: 100%;
}
#dreamz-media .spotlightScope {
font-size: 10px;
}
#dreamz-media .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-media .mediaTitle strong {
font-size: 11px;
}
#dreamz-media .mediaTitle div>span {
font-size: 8px;
}
#dreamz-media .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-media .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-media .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-media .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-media .aiReviewBody {
padding: 13px;
}
#dreamz-media .aiIssue {
padding: 13px;
}
#dreamz-media .aiIssue strong {
font-size: 14px;
}
#dreamz-media .aiEvidence {
gap: 6px;
}
#dreamz-media .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-media .aiEvidence strong {
font-size: 9px;
}
#dreamz-media .aiEvidence span {
font-size: 7px;
}
#dreamz-media .exampleLabel {
font-size: 6px;
}
#dreamz-media .factoryWorkflows {
padding: 55px 0;
}
#dreamz-media .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-media .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-media .industryRibbonGrid {
gap: 12px;
}
#dreamz-media .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-media .spotlightHead h2 {
font-size: 29px;
}
#dreamz-media .featureStage {
padding: 19px 13px;
}
#dreamz-media .mediaTitle>.icon {
display: none;
}
#dreamz-media .exampleLabel {
display: none;
}
#dreamz-media .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-media .featureTabs {
display: none;
}
#dreamz-media .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-media .featureStage {
display: block;
}
#dreamz-media .featurePanel {
color: #000;
}
}
#dreamz-media #media-delivery-features-1:checked~.featureTabs label[for="media-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-delivery-features-1:focus-visible~.featureTabs label[for="media-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-media #media-delivery-features-2:checked~.featureTabs label[for="media-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-delivery-features-2:focus-visible~.featureTabs label[for="media-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-media #media-delivery-features-3:checked~.featureTabs label[for="media-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-delivery-features-3:focus-visible~.featureTabs label[for="media-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-media #media-delivery-features-4:checked~.featureTabs label[for="media-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-delivery-features-4:focus-visible~.featureTabs label[for="media-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-media #media-delivery-features-5:checked~.featureTabs label[for="media-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-delivery-features-5:focus-visible~.featureTabs label[for="media-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-media #media-rfid-features-1:checked~.featureTabs label[for="media-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-rfid-features-1:focus-visible~.featureTabs label[for="media-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-media #media-rfid-features-2:checked~.featureTabs label[for="media-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-rfid-features-2:focus-visible~.featureTabs label[for="media-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-media #media-rfid-features-3:checked~.featureTabs label[for="media-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-rfid-features-3:focus-visible~.featureTabs label[for="media-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-media #media-rfid-features-4:checked~.featureTabs label[for="media-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-rfid-features-4:focus-visible~.featureTabs label[for="media-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-media #media-rfid-features-5:checked~.featureTabs label[for="media-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-rfid-features-5:focus-visible~.featureTabs label[for="media-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-media #media-ai-decisions-features-1:checked~.featureTabs label[for="media-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-ai-decisions-features-1:focus-visible~.featureTabs label[for="media-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-media #media-ai-decisions-features-2:checked~.featureTabs label[for="media-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-ai-decisions-features-2:focus-visible~.featureTabs label[for="media-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-media #media-ai-decisions-features-3:checked~.featureTabs label[for="media-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-ai-decisions-features-3:focus-visible~.featureTabs label[for="media-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-media #media-ai-decisions-features-4:checked~.featureTabs label[for="media-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-ai-decisions-features-4:focus-visible~.featureTabs label[for="media-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-media #media-ai-decisions-features-5:checked~.featureTabs label[for="media-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-media #media-ai-decisions-features-5:focus-visible~.featureTabs label[for="media-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-media #media-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-media .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .featureMediaPanels {
min-width: 0;
}
#dreamz-media .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-media .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-media .featureMediaPanels .windowTop strong,
#dreamz-media .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-media .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-media .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-media .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-media .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-media .featureMediaPanels .windowBody>*,
#dreamz-media .featureMediaPanels .spectrumGrid>*,
#dreamz-media .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-media .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-media .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-media .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-media .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-media .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-media .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-media .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-media .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-media .pin2 {
top: 88px;
right: 88px;
}
#dreamz-media .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-media .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-media .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-media .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-media .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-media .featureMediaPanels .graphNodes .node.n1,
#dreamz-media .featureMediaPanels .graphNodes .node.n2,
#dreamz-media .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-media .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-media .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-media .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-media .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-media .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-media .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-media .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-media .freshGraphic * {
box-sizing: border-box;
}
#dreamz-media .rfPanel,
#dreamz-media .aiInsightCard,
#dreamz-media .forecastVisualCard,
#dreamz-media .forecastSuggestion,
#dreamz-media .knowledgeTile,
#dreamz-media .chatConversation,
#dreamz-media .trainingSummary,
#dreamz-media .moduleCard,
#dreamz-media .qualityHeatCard,
#dreamz-media .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-media .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-media .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-media .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-media .statusPill,
#dreamz-media .cardTag,
#dreamz-media .forecastSuggestion b,
#dreamz-media .moduleCard b,
#dreamz-media .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-media .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-media .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-media .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-media .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-media .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-media .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-media .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-media .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-media .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-media .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-media .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-media .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-media .dot.good {
background: #298EEC;
}
#dreamz-media .dot.warn {
background: #F4A62A;
}
#dreamz-media .dot.bad {
background: #EB6B53;
}
#dreamz-media .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-media .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-media .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-media .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-media .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-media .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-media .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-media .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-media .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-media .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-media .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-media .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-media .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-media .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-media .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-media .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-media .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-media .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-media .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-media .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-media .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-media .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-media .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-media .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-media .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-media .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-media .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-media .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-media .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-media .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-media .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-media .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-media .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-media .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-media .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-media .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-media .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-media .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-media .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-media .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-media .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-media .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-media .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-media .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-media .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-media .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-media .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-media .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-media .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-media .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-media .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-media .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-media .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-media .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-media .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-media .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-media .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-media .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-media .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-media .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-media .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-media .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-media .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-media .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-media .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-media .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-media .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-media .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-media .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-media .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-media .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-media .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-media .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-media .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-media .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-media .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-media .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-media .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-media .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-media .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-media .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-media .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-media .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-media .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-media .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-media .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-media .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-media .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-media .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-media .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-media .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-media .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-media .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-media .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-media .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-media .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-media .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-media .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-media .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-media .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-media .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-media .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-media .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-media .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-media .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-media .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-media .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-media .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-media .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-media .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-media .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-media .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-media .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-media .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-media .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-media .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-media .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-media .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-media .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-media .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-media .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-media .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-media .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-media .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-media .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-media .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-media .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-media .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-media .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-media .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-media .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-media .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-media .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-media .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-media .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-media .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-media .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-media .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-media .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-media .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-media .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-media .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-media .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-media .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-media .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-media .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-media .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-media .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-media .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-media .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-media .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-media .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-media .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-media .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-media .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-media .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-media .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-media .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-media .rfTrackLayout,
#dreamz-media .rfFlowLayout,
#dreamz-media .rfAlertGrid,
#dreamz-media .rfCycleLayout,
#dreamz-media .rfSitesLayout,
#dreamz-media .aiRootLayout,
#dreamz-media .aiForecastLayout,
#dreamz-media .aiChatLayout,
#dreamz-media .aiTrainingLayout,
#dreamz-media .aiQualityLayout,
#dreamz-media .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-media .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-media .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-media .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-media .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-media .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-media .aiLink {
display: none;
}
}
#dreamz-media .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-media .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-media .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-media .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-media .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-media .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-media .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-media .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-media .mfgHero h1>span {
display: block;
}
#dreamz-media .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-media .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-media .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-media .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-media .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-media .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-media .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-media .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-media .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-media .mfgHeroContent {
min-height: 610px;
}
#dreamz-media .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-media .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
#dreamz-media .mfgHeroLead {
font-size: 16px;
}
#dreamz-media .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-media .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-media .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-media .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-media .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
#dreamz-media .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-media .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-media .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-media .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-media .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-media .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-media .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
#dreamz-media .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-media .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-media .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-media .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-media .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-media .mfgHero {
background: #fff;
color: #000;
}
#dreamz-media .mfgHeroScene,
#dreamz-media .mfgHeroActions {
display: none;
}
#dreamz-media .mfgHeroContent {
min-height: 0;
}
#dreamz-media .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-media .mfgHero h1,
#dreamz-media .mfgHero h1 .mfgHeroAccent,
#dreamz-media .mfgHero p {
color: #000;
}
}
#dreamz-media #media-rfid .featureStage,
#dreamz-media #media-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-media .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-media .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-media .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-media .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-media .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-media .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-media .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-media .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-media .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-media .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-media .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-media .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-media .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-media .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-media .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-media .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-media .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-media .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-media .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-media .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-media .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-media .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-media .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-media .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-media .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-media .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-media .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-media .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-media .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-media .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-media .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-media .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-media .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-media .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-media .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-media .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-media .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-media .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-media .mfgGallery .flowArrow {
display: none;
}
#dreamz-media .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-media .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-media .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-media .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-media .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-media .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-media .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-media .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-media .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-media .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-media .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-media .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-media .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-media .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-media .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-media .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-media .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-media .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-media .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-media .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-media .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-media .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-media .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-media .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-media .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-media .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-media .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-media .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-media .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-media .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-media .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-media .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-media .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-media .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-media .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-media .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-media .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-media .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-media .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-media .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-media .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-media .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-media .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-media .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-media .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-media .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-media .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-media .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-media .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-media .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-media .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-media .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-media .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-media .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-media .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-media .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-media .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-media .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-media .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-media .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-media .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-media .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-media .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-media .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-media .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-media .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-media .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-media .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-media .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-media .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-media .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-media .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-media .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-media .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-media .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-media .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-media .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-media .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-media .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-media .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-media .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-media .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-media .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-media .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-media .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-media .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-media .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-media .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-media .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-media .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-media .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-media .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-media .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-media .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-media .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-media .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-media .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-media .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-media .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-media .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-media .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-media .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-media .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-media .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-media .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-media .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-media .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-media #media-rfid .featureStage,
#dreamz-media #media-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-media #media-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-media .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-media #media-rfid .featureStage,
#dreamz-media #media-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-media .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-media .mfgGallery .freshWindow {
height: auto;
}
#dreamz-media .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-media .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-media .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-media .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-media .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-media .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-media .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-media .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-media .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-media .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-media .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-media .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-media .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-media .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-media .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-media .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-media .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-media .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-media .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-media .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-media .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-media .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-media .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-media .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-media .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-media .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-media .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-media .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-media .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-media .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-media .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-media .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-media .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-media .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-media .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-media .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-media .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-media .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-media .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-media .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-media .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-media .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-media .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-media .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-media .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-media .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-media .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-media .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-media .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-media .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-media .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-media .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-media .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-media .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-media .mediaVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-media .mediaGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-media .mediaIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-media .mediaStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-media .mediaVisualGallery>.mediaGraphic {
display: none;
}
#dreamz-media #media-delivery .featureStage,
#dreamz-media #media-rfid .featureStage,
#dreamz-media #media-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-media #media-rfid .mediaVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-media #media-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-media .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-media .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-media .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-media .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-media .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
#dreamz-media #media-delivery .featureStage,
#dreamz-media #media-rfid .featureStage,
#dreamz-media #media-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-media #media-rfid .mediaVisualGallery,
#dreamz-media #media-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-media .mfgHeroScene {
height: 290px;
}
#dreamz-media #media-delivery .featureStage,
#dreamz-media #media-rfid .featureStage,
#dreamz-media #media-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-media .mediaVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-media .mediaVisualGallery>.mediaGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-media #media-delivery-features-1:checked~.featureStage .mediaVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-media #media-delivery-features-2:checked~.featureStage .mediaVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-media #media-delivery-features-3:checked~.featureStage .mediaVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-media #media-delivery-features-4:checked~.featureStage .mediaVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-media #media-delivery-features-5:checked~.featureStage .mediaVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-media #media-rfid-features-1:checked~.featureStage .mediaVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-media #media-rfid-features-2:checked~.featureStage .mediaVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-media #media-rfid-features-3:checked~.featureStage .mediaVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-media #media-rfid-features-4:checked~.featureStage .mediaVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-media #media-rfid-features-5:checked~.featureStage .mediaVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-media #media-ai-decisions-features-1:checked~.featureStage .mediaVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-media #media-ai-decisions-features-2:checked~.featureStage .mediaVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-media #media-ai-decisions-features-3:checked~.featureStage .mediaVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-media #media-ai-decisions-features-4:checked~.featureStage .mediaVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-media #media-ai-decisions-features-5:checked~.featureStage .mediaVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-media .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-media .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-media .mediaIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-media .mediaGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-media .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-media .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-media .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-media .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-media .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-media .mfgHeroContent {
background: transparent;
}
#dreamz-media .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-media .mediaIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-media .mediaIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-media .mediaGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-media .mediaVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-media .mfgHeroScene img {
object-position: 72% 50%;
}
}
@media(max-width:600px) {
#dreamz-media .mfgHeroScene img {
object-position: 75% 50%;
}
}  #dreamz-sports .industryIntroHead.compact,
#dreamz-sports .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-sports .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-sports .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-sports .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-sports .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-sports .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-sports .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-sports .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-sports .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-sports .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-sports .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-sports .windowDots {
display: flex;
gap: 5px;
}
#dreamz-sports .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-sports .windowBody {
padding: 16px;
}
#dreamz-sports .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-sports .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-sports .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-sports .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-sports .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-sports .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-sports .chartGridLine.l1 {
top: 34px;
}
#dreamz-sports .chartGridLine.l2 {
top: 65px;
}
#dreamz-sports .chartGridLine.l3 {
top: 96px;
}
#dreamz-sports .chartGridLine.l4 {
top: 127px;
}
#dreamz-sports .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-sports .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-sports .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-sports .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-sports .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-sports .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-sports .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-sports .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-sports .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-sports .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-sports .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-sports .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-sports .noteCard p,
#dreamz-sports .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-sports .alertStack {
display: grid;
gap: 10px;
}
#dreamz-sports .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-sports .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-sports .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-sports .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-sports .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-sports .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-sports .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-sports .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-sports .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-sports .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-sports .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-sports .scheduleBoard h4,
#dreamz-sports .todoBoard h4,
#dreamz-sports .siteBoard h4,
#dreamz-sports .chatPanel h4,
#dreamz-sports .lessonPanel h4,
#dreamz-sports .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-sports .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-sports .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-sports .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-sports .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-sports .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-sports .taskRow:last-child {
border-bottom: 0;
}
#dreamz-sports .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-sports .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-sports .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-sports .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-sports .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-sports .inventoryTable th,
#dreamz-sports .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-sports .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-sports .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-sports .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-sports .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-sports .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-sports .phoneBody {
padding: 12px;
}
#dreamz-sports .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-sports .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-sports .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-sports .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-sports .progressList {
display: grid;
gap: 10px;
}
#dreamz-sports .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-sports .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-sports .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-sports .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-sports .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-sports .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-sports .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-sports .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-sports .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-sports .pin1 {
top: 56px;
left: 58px;
}
#dreamz-sports .pin2 {
top: 88px;
right: 88px;
}
#dreamz-sports .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-sports .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-sports .siteRow:last-child {
border-bottom: 0;
}
#dreamz-sports .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-sports .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-sports .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-sports .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-sports .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-sports .graphNodes:before,
#dreamz-sports .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-sports .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-sports .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-sports .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-sports .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-sports .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-sports .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-sports .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-sports .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-sports .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-sports .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-sports .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-sports .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-sports .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-sports .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-sports .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-sports .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-sports .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-sports .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-sports .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-sports .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-sports .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-sports .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-sports .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-sports .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-sports .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-sports .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-sports .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-sports .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-sports .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-sports .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-sports .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-sports .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-sports .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-sports #sports-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-sports #sports-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-sports #sports-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-sports #sports-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-sports #sports-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-sports #sports-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-sports #sports-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-sports #sports-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-sports #sports-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-sports #sports-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-sports #sports-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-sports #sports-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-sports #sports-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-sports #sports-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-sports #sports-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-sports #sports-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-sports #sports-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-sports #sports-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-sports #sports-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-sports #sports-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-sports #sports-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-sports #sports-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-sports #sports-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-sports #sports-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-sports #sports-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-sports #sports-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-sports #sports-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-sports #sports-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-sports #sports-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-sports #sports-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-sports .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-sports .featureMediaPanels {
min-height: 0;
}
#dreamz-sports .inventorySplit,
#dreamz-sports .forecastGrid,
#dreamz-sports .siteGrid,
#dreamz-sports .spectrumGrid,
#dreamz-sports .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-sports .metricGrid,
#dreamz-sports .lessonCards,
#dreamz-sports .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-sports .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-sports {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-sports * {
box-sizing: border-box;
}
#dreamz-sports {
scroll-behavior: smooth;
}
#dreamz-sports {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-sports a {
color: inherit;
text-decoration: none;
}
#dreamz-sports .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-sports .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-sports .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-sports .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-sports .brand span {
color: var(--brand);
}
#dreamz-sports .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-sports .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-sports .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-sports .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-sports .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-sports .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-sports .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-sports .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-sports h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-sports .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-sports .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-sports .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-sports .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-sports .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-sports .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-sports .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-sports .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-sports .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-sports .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-sports .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-sports .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-sports .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-sports .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-sports .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-sports .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-sports .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-sports .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-sports .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-sports .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-sports .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-sports .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-sports .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-sports .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-sports .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-sports .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-sports .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-sports .sectionHead {
margin-bottom: 44px;
}
#dreamz-sports .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-sports .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-sports .aiJourney h2 {
color: #fff;
}
#dreamz-sports .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-sports .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-sports .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-sports .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-sports .aiStep:last-child::after {
display: none;
}
#dreamz-sports .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-sports .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-sports .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-sports .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-sports .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-sports .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-sports .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-sports .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-sports .capability {
background: #fff;
}
#dreamz-sports .capability.alt {
background: var(--sky-2);
}
#dreamz-sports .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-sports .twoCol.reverse .visual {
order: 2;
}
#dreamz-sports .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-sports .visual .placeholder {
min-height: 355px;
}
#dreamz-sports .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-sports .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-sports details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-sports details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-sports details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-sports details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-sports details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-sports details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-sports .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-sports .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-sports .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-sports .darkSection h2,
#dreamz-sports .darkSection h3 {
color: #fff;
}
#dreamz-sports .darkSection .sectionHead p,
#dreamz-sports .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-sports .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-sports .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-sports .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-sports .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-sports .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-sports .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-sports .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-sports .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-sports .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-sports .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-sports .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-sports .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-sports .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-sports .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-sports .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-sports .benefitBand h2 {
color: #fff;
}
#dreamz-sports .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-sports .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-sports .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-sports .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-sports .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-sports .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-sports .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-sports .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-sports .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-sports .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-sports .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-sports .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-sports .faq {
max-width: 900px;
}
#dreamz-sports .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-sports .ctaPanel h2 {
color: #fff;
}
#dreamz-sports .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-sports .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-sports .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-sports .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-sports .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-sports .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-sports .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-sports .inlineCta.dark h3 {
color: #fff;
}
#dreamz-sports .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-sports .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-sports .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-sports .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-sports .button.yellow:hover {
background: #FFD84D;
}
#dreamz-sports .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-sports .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-sports .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-sports .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-sports footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-sports .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-sports .heroGrid,
#dreamz-sports .twoCol,
#dreamz-sports .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-sports .twoCol.reverse .visual {
order: initial;
}
#dreamz-sports .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-sports .ratingGrid,
#dreamz-sports .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-sports .ratingLead,
#dreamz-sports .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-sports .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-sports .aiStep:nth-child(3)::after,
#dreamz-sports .aiStep:last-child::after {
display: none;
}
#dreamz-sports .outcomeGrid,
#dreamz-sports .challengeGrid,
#dreamz-sports .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-sports .cards,
#dreamz-sports .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-sports .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-sports .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-sports .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-sports .hero {
padding: 58px 0 52px;
}
#dreamz-sports .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-sports .aiStep::after {
display: none;
}
#dreamz-sports .logoRow,
#dreamz-sports .ratingGrid,
#dreamz-sports .awardGrid,
#dreamz-sports .outcomeGrid,
#dreamz-sports .challengeGrid,
#dreamz-sports .benefitGrid,
#dreamz-sports .cards,
#dreamz-sports .proofCards,
#dreamz-sports .integrationGrid,
#dreamz-sports .featureList {
grid-template-columns: 1fr;
}
#dreamz-sports .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-sports .ctaPanel {
padding: 34px 24px;
}
#dreamz-sports .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-sports .inlineCtaActions {
width: 100%;
}
#dreamz-sports .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-sports {
--muted: #526A7C;
--shadow: none;
}
#dreamz-sports {
background: var(--sky-2);
}
#dreamz-sports p {
margin-bottom: 0;
}
#dreamz-sports [id] {
scroll-margin-top: 94px;
}
#dreamz-sports svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-sports .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-sports .darkSection h2,
#dreamz-sports .darkSection h3,
#dreamz-sports .aiJourney h2,
#dreamz-sports .benefitBand h2,
#dreamz-sports .ctaPanel h2,
#dreamz-sports .inlineCta.dark h3 {
color: #fff;
}
#dreamz-sports .wrap>*,
#dreamz-sports .heroGrid>*,
#dreamz-sports .twoCol>*,
#dreamz-sports .ctaPanel>* {
min-width: 0;
}
#dreamz-sports .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-sports .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-sports .skipLink:focus {
transform: none;
}
#dreamz-sports a:focus-visible,
#dreamz-sports summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-sports .darkSection a:focus-visible,
#dreamz-sports .darkSection summary:focus-visible,
#dreamz-sports .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-sports .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-sports .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-sports .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-sports .brandName>span {
color: var(--brand-dark);
}
#dreamz-sports .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-sports .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-sports .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-sports .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-sports .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-sports .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-sports .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-sports .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-sports .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-sports .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-sports .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-sports .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-sports .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-sports .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-sports .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-sports .clientBand {
padding: 27px 0;
}
#dreamz-sports .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-sports .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-sports .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-sports .logoBox.wide {
font-size: 12px;
}
#dreamz-sports .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-sports h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-sports .sectionHead {
margin-bottom: 36px;
}
#dreamz-sports .eyebrow {
line-height: 1.5;
}
#dreamz-sports .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-sports .aiStep {
min-height: 162px;
}
#dreamz-sports .aiStep strong {
line-height: 1.35;
}
#dreamz-sports .aiStep span {
line-height: 1.65;
}
#dreamz-sports .aiCallout {
margin-top: 24px;
}
#dreamz-sports .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-sports .outcome>.icon {
color: var(--navy);
}
#dreamz-sports .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-sports .awardItem>.icon {
color: var(--navy);
}
#dreamz-sports .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-sports .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-sports .twoCol.reverse .visual {
order: -1;
}
#dreamz-sports .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-sports .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-sports .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-sports .featureList {
gap: 13px 18px;
}
#dreamz-sports .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-sports .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-sports .check .icon {
width: 14px;
height: 14px;
}
#dreamz-sports details.capabilityMore {
margin-bottom: 0;
}
#dreamz-sports .capabilityMore summary {
min-height: 34px;
}
#dreamz-sports .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-sports .textCta {
font-size: 14px;
}
#dreamz-sports .visual {
min-width: 0;
}
#dreamz-sports .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-sports .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-sports .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-sports .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-sports .panelBody {
padding: 20px;
}
#dreamz-sports .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-sports .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-sports .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-sports .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-sports .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-sports .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-sports .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-sports .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-sports .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-sports .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-sports .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-sports .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-sports .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-sports .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-sports .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-sports .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-sports .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-sports .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-sports .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-sports .dataRow:last-child {
border-bottom: 0;
}
#dreamz-sports .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-sports .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-sports .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-sports .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-sports .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-sports .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-sports .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-sports .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-sports .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-sports .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-sports .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-sports .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-sports .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-sports .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-sports .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-sports .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-sports .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-sports .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-sports .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-sports .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-sports .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-sports .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-sports .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-sports .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-sports .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-sports .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-sports .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-sports .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-sports .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-sports .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-sports .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-sports .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-sports .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-sports .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-sports .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-sports .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-sports .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-sports .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-sports .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-sports .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-sports .promptList {
display: grid;
gap: 10px;
}
#dreamz-sports .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-sports .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-sports .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-sports .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-sports .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-sports .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-sports .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-sports .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-sports .quoteTable th,
#dreamz-sports .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-sports .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-sports .quoteTable td:first-child {
width: 64%;
}
#dreamz-sports .quoteTable th:last-child,
#dreamz-sports .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-sports .quoteTable strong {
font-size: 11px;
}
#dreamz-sports .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-sports .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-sports .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-sports .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-sports .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-sports .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-sports .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-sports .orderJourney {
margin: 20px 0;
}
#dreamz-sports .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-sports .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-sports .journeyRow:last-child:before {
display: none;
}
#dreamz-sports .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-sports .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-sports .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-sports .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-sports .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-sports .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-sports .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-sports .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-sports .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-sports .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-sports .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-sports .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-sports .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-sports .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-sports .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-sports .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-sports .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-sports .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-sports .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-sports .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-sports .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-sports .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-sports .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-sports .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-sports .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-sports .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-sports .customerTimeline strong {
color: #fff;
}
#dreamz-sports .customerTimeline small {
color: #BFBFBF;
}
#dreamz-sports .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-sports .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-sports .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-sports .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-sports .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-sports .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-sports .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-sports .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-sports .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-sports .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-sports .chartTitle strong {
font-size: 12px;
}
#dreamz-sports .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-sports .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-sports .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-sports .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-sports .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-sports .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-sports .inlineCtaActions {
max-width: 42%;
}
#dreamz-sports .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-sports .inlineCta h3 {
line-height: 1.35;
}
#dreamz-sports .card {
box-shadow: none;
}
#dreamz-sports .cardIcon {
box-shadow: none;
}
#dreamz-sports .card h3 {
font-size: 22px;
}
#dreamz-sports .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-sports .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-sports .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-sports .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-sports .ratingBand {
padding: 34px 0;
}
#dreamz-sports .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-sports .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-sports .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-sports .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-sports .ratingItem:first-child {
border-left: 0;
}
#dreamz-sports .proofCard h3 {
font-size: 23px;
}
#dreamz-sports .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-sports .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-sports .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-sports .integration {
min-height: 98px;
}
#dreamz-sports .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-sports .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-sports .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-sports .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-sports .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-sports .finalActions {
display: grid;
gap: 11px;
}
#dreamz-sports .finalActions .button {
white-space: nowrap;
}
#dreamz-sports .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-sports .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-sports .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-sports .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-sports .heroGrid {
gap: 30px;
}
#dreamz-sports .twoCol {
gap: 32px;
}
#dreamz-sports .panelBody {
padding: 16px;
}
#dreamz-sports .panelHead {
padding: 16px;
}
#dreamz-sports .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-sports .pipelineColumns {
gap: 7px;
}
#dreamz-sports .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-sports .heroGrid,
#dreamz-sports .twoCol,
#dreamz-sports .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .heroGrid {
gap: 36px;
}
#dreamz-sports .hero h1 {
max-width: 730px;
}
#dreamz-sports .hero .lead {
max-width: 690px;
}
#dreamz-sports .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-sports .twoCol {
gap: 34px;
}
#dreamz-sports .twoCol.reverse .visual {
order: initial;
}
#dreamz-sports .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-sports .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-sports .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-sports .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-sports .ratingSectionGrid {
gap: 20px;
}
#dreamz-sports .inlineCta {
align-items: flex-start;
}
#dreamz-sports .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-sports .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-sports .card {
padding: 22px;
}
#dreamz-sports .card h3 {
font-size: 21px;
}
#dreamz-sports .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-sports .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-sports .cards,
#dreamz-sports .proofCards {
grid-template-columns: 1fr;
}
#dreamz-sports .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-sports .inlineCta {
flex-direction: column;
}
#dreamz-sports .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-sports .inlineCtaActions .button {
flex: 1;
}
#dreamz-sports .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-sports .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-sports .wrap {
width: calc(100% - 32px);
}
#dreamz-sports [id] {
scroll-margin-top: 82px;
}
#dreamz-sports .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-sports .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-sports .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-sports .hero {
padding: 51px 0 48px;
}
#dreamz-sports .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-sports .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-sports .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-sports .hero .microcopy {
font-size: 11px;
}
#dreamz-sports .heroPills span {
font-size: 9px;
}
#dreamz-sports .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-sports .sectionHead p {
font-size: 16px;
}
#dreamz-sports .copy h2 {
font-size: 34px;
}
#dreamz-sports .copy p {
font-size: 15px;
}
#dreamz-sports .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-sports .logoBox {
min-height: 53px;
}
#dreamz-sports .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-sports .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-sports .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-sports .aiStep strong {
font-size: 13px;
}
#dreamz-sports .aiStep span {
font-size: 11px;
}
#dreamz-sports .aiStep::after {
display: none;
}
#dreamz-sports .outcomeGrid,
#dreamz-sports .challengeGrid,
#dreamz-sports .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .outcome {
padding: 24px;
}
#dreamz-sports .outcome strong {
font-size: 22px;
}
#dreamz-sports .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-sports .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-sports .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-sports .featureList,
#dreamz-sports .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .featureItem {
font-size: 13px;
}
#dreamz-sports .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-sports .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-sports .panelHead {
padding: 15px 13px;
}
#dreamz-sports .panelHead>strong {
font-size: 12px;
}
#dreamz-sports .panelBody {
padding: 14px;
}
#dreamz-sports .productPanel {
border-radius: 16px;
}
#dreamz-sports .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-sports .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-sports .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-sports .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-sports .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-sports .deal strong {
font-size: 10px;
}
#dreamz-sports .deal small {
font-size: 9px;
}
#dreamz-sports .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-sports .mobileWorkspace {
gap: 12px;
}
#dreamz-sports .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-sports .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-sports .sideTile {
padding: 10px;
}
#dreamz-sports .sideTile strong {
font-size: 10px;
}
#dreamz-sports .sideTile p {
font-size: 9px;
}
#dreamz-sports .mobileHeader strong {
font-size: 15px;
}
#dreamz-sports .mobileAccount strong {
font-size: 10px;
}
#dreamz-sports .mobileAccount small {
font-size: 7px;
}
#dreamz-sports .phoneDevice .rowIcon {
display: none;
}
#dreamz-sports .quoteTable th,
#dreamz-sports .quoteTable td {
padding: 12px 4px;
}
#dreamz-sports .quoteTable strong {
font-size: 10px;
}
#dreamz-sports .quoteTable small {
font-size: 8px;
}
#dreamz-sports .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-sports .docHeader strong {
font-size: 17px;
}
#dreamz-sports .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-sports .miniFlow span {
padding: 6px;
}
#dreamz-sports .rowCopy strong {
font-size: 10px;
}
#dreamz-sports .rowCopy small {
font-size: 8px;
}
#dreamz-sports .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-sports .miniStats {
gap: 7px;
}
#dreamz-sports .miniStats>div {
padding: 9px;
}
#dreamz-sports .miniStats strong {
font-size: 18px;
}
#dreamz-sports .miniStats span {
font-size: 8px;
}
#dreamz-sports .collectionStats>div {
padding: 13px;
}
#dreamz-sports .collectionStats strong {
font-size: 24px;
}
#dreamz-sports .customerHeader strong {
font-size: 17px;
}
#dreamz-sports .customerFacts>div {
padding: 10px;
}
#dreamz-sports .customerFacts strong {
font-size: 12px;
}
#dreamz-sports .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-sports .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-sports .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-sports .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-sports .integration small {
font-size: 9px;
}
#dreamz-sports .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-sports .ctaPanel p {
font-size: 15px;
}
#dreamz-sports .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-sports .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-sports .contextSection {
padding: 0 0 24px;
}
#dreamz-sports .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-sports .wrap {
width: calc(100% - 24px);
}
#dreamz-sports .brand {
font-size: 18px;
}
#dreamz-sports .brandMark {
width: 25px;
height: 25px;
}
#dreamz-sports .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-sports .copy h2 {
font-size: 31px;
}
#dreamz-sports .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-sports .phoneDevice {
width: 210px;
}
#dreamz-sports .phoneDevice .rowIcon {
display: grid;
}
#dreamz-sports .mobileSide {
gap: 8px;
}
#dreamz-sports .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-sports .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-sports .sideTile p {
margin: 0;
}
#dreamz-sports .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-sports .collectionStats strong {
font-size: 21px;
}
#dreamz-sports .inventoryIntro strong {
font-size: 14px;
}
#dreamz-sports .dataRow {
gap: 7px;
}
#dreamz-sports .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-sports .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-sports {
scroll-behavior: auto;
}
#dreamz-sports *,
#dreamz-sports *::before,
#dreamz-sports *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-sports {
background: var(--sky-2);
}
#dreamz-sports .hero .eyebrow {
max-width: 100%;
}
#dreamz-sports .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-sports .ganttIllustration,
#dreamz-sports .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-sports .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-sports .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-sports .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-sports .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-sports .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-sports .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-sports .comparisonTable th,
#dreamz-sports .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-sports .comparisonTable th:first-child {
width: 23%;
}
#dreamz-sports .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-sports .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-sports .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-sports .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-sports .card,
#dreamz-sports .proofCard,
#dreamz-sports .productPanel,
#dreamz-sports .outcome,
#dreamz-sports .benefit {
box-shadow: none;
}
#dreamz-sports .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-sports .hero .eyebrow {
font-size: 10px;
}
#dreamz-sports .comparisonTable {
font-size: 11px;
}
#dreamz-sports .comparisonTable th,
#dreamz-sports .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-sports .comparisonTable th:first-child {
width: 24%;
}
#dreamz-sports .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-sports .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
}
#dreamz-sports .scheduleIllustration,
#dreamz-sports .analyticsIllustration,
#dreamz-sports .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-sports .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-sports .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-sports .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-sports .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-sports .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-sports .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-sports .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-sports .darkSection .textCta {
color: var(--yellow);
}
#dreamz-sports .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-sports .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-sports .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-sports .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-sports .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-sports .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-sports .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-sports .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-sports .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-sports .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-sports .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-sports .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-sports .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-sports .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-sports .phoneDevice {
max-width: 100%;
}
#dreamz-sports .heroPills {
line-height: 1.55;
}
#dreamz-sports .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-sports .plantFacts {
gap: 7px;
}
#dreamz-sports .plantFacts>div {
padding: 9px;
}
#dreamz-sports .plantFacts strong {
font-size: 11px;
}
#dreamz-sports .scanSummary {
padding: 12px;
}
#dreamz-sports .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-sports .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-sports .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-sports .phoneDevice .rowIcon {
display: grid;
}
#dreamz-sports .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-sports .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-sports .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-sports .sideTile strong {
font-size: 12px;
}
#dreamz-sports .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-sports .topbar,
#dreamz-sports .heroActions,
#dreamz-sports .finalActions,
#dreamz-sports .contextSection,
#dreamz-sports .valueCtaSection {
display: none;
}
#dreamz-sports section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-sports .hero {
padding-top: 20px;
}
}
#dreamz-sports {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-sports p {
margin: 0;
}
#dreamz-sports main {
display: block;
}
#dreamz-sports .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-sports .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-sports .heroAccent {
color: var(--black);
}
#dreamz-sports .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-sports .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-sports .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-sports .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-sports .microcopy {
margin-top: 14px;
}
#dreamz-sports .heroPills {
margin-top: 13px;
}
#dreamz-sports .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-sports .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-sports .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-sports .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-sports .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-sports .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-sports .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-sports .clientBand {
padding: 24px 0;
}
#dreamz-sports .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-sports .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-sports .logoBox.wide {
font-size: 15px;
}
#dreamz-sports .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-sports .sectionHead p {
margin: 17px 0 0;
}
#dreamz-sports .copy p {
margin: 16px 0 0;
}
#dreamz-sports .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-sports .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-sports .aiJourney {
background: var(--black);
}
#dreamz-sports .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-sports .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-sports .productPanel {
border-radius: 18px;
}
#dreamz-sports .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-sports .panelHead>strong {
font-size: 13px;
}
#dreamz-sports .sampleTag {
font-size: 9px;
}
#dreamz-sports .panelBody {
padding: 21px;
}
#dreamz-sports .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-sports .docHeader {
padding-bottom: 16px;
}
#dreamz-sports .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-sports .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-sports .smallLabel {
font-size: 9px;
}
#dreamz-sports .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-sports .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-sports .dataRow {
padding: 14px 0;
}
#dreamz-sports .statusPill {
font-size: 8px;
}
#dreamz-sports .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-sports .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-sports .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-sports .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-sports .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-sports .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-sports .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-sports .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-sports .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-sports .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-sports .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-sports .hierarchy strong {
color: var(--navy);
}
#dreamz-sports .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-sports .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-sports .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-sports .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-sports .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-sports .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-sports .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-sports .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-sports .mobileAccount small {
font-size: 9px;
}
#dreamz-sports .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-sports .sideTile strong {
font-size: 12px;
}
#dreamz-sports .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-sports .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-sports .mobileAction {
font-size: 9px;
}
#dreamz-sports .journeyRow strong {
font-size: 13px;
}
#dreamz-sports .journeyRow small {
font-size: 11px;
}
#dreamz-sports .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-sports .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-sports .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-sports .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-sports .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-sports .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-sports .utilityReadout small {
font-size: 12px;
}
#dreamz-sports .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-sports .darkSection {
background: var(--black);
}
#dreamz-sports .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-sports .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-sports .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-sports .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-sports .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-sports .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-sports .assistantHead small {
font-size: 11px;
}
#dreamz-sports .assistantNote {
font-size: 11px;
}
#dreamz-sports .reportTags span {
font-size: 10px;
}
#dreamz-sports .card p {
margin: 12px 0 0;
}
#dreamz-sports .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-sports .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-sports .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-sports .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-sports .cards>.card p {
padding-bottom: 22px;
}
#dreamz-sports .benefitBand {
background: var(--black);
}
#dreamz-sports .benefit {
background: var(--black-soft);
}
#dreamz-sports .inlineCta h3 {
font-size: 20px;
}
#dreamz-sports .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-sports .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-sports .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-sports .valueCtaSection {
padding: 32px 0;
}
#dreamz-sports .proofCard p {
margin-top: 15px;
}
#dreamz-sports .proofCard h3 {
font-size: 23px;
}
#dreamz-sports .integrationNote {
margin-top: 23px;
}
#dreamz-sports .ctaPanel {
background: var(--black);
}
#dreamz-sports .ctaPanel p {
margin-top: 16px;
}
#dreamz-sports .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-sports .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-sports a:hover {
text-decoration: none;
}
#dreamz-sports .textCta:hover {
color: var(--navy);
}
#dreamz-sports .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-sports .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-sports .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-sports .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-sports .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-sports .heroVisual {
max-width: 548px;
}
#dreamz-sports .hero .lead {
max-width: 700px;
}
#dreamz-sports .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-sports .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-sports .logoBox:last-child {
grid-column: auto;
}
#dreamz-sports .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-sports .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-sports .inlineCtaActions .button {
flex: 1;
}
#dreamz-sports .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-sports .hero {
padding: 28px 0 40px;
}
#dreamz-sports .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-sports .heroActions {
gap: 10px;
}
#dreamz-sports .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-sports .breadcrumb {
margin-bottom: 21px;
}
#dreamz-sports .hero .eyebrow {
font-size: 11px;
}
#dreamz-sports .heroVisual {
max-width: 480px;
}
#dreamz-sports .heroPills {
row-gap: 9px;
}
#dreamz-sports .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-sports .heroPills span+span {
padding-left: 7px;
}
#dreamz-sports .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-sports .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-sports .clientBand {
padding: 25px 0;
}
#dreamz-sports .copy h2 {
font-size: 33px;
}
#dreamz-sports .panelBody {
padding: 16px;
}
#dreamz-sports .panelHead {
padding: 15px;
}
#dreamz-sports .panelHead>strong {
font-size: 12px;
}
#dreamz-sports .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-sports .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-sports .docHeader strong {
font-size: 18px;
}
#dreamz-sports .docHeader small {
font-size: 10px;
}
#dreamz-sports .rowCopy strong {
font-size: 11px;
}
#dreamz-sports .rowCopy small {
font-size: 10px;
}
#dreamz-sports .miniStats {
gap: 7px;
}
#dreamz-sports .miniStats strong {
font-size: 21px;
}
#dreamz-sports .miniStats span {
font-size: 9px;
}
#dreamz-sports .miniStats>div {
padding: 10px 8px;
}
#dreamz-sports .plantFacts {
gap: 8px;
}
#dreamz-sports .plantFacts>div {
padding: 10px;
}
#dreamz-sports .plantFacts strong {
font-size: 11px;
}
#dreamz-sports .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-sports .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-sports .utilityReadout span {
font-size: 8px;
}
#dreamz-sports .utilityReadout strong {
font-size: 24px;
}
#dreamz-sports .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-sports .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-sports .comparisonTable {
font-size: 11px;
}
#dreamz-sports .comparisonTable th,
#dreamz-sports .comparisonTable td {
padding: 13px 9px;
}
#dreamz-sports .contextSection {
padding: 0 0 22px;
}
#dreamz-sports .valueCtaSection {
padding: 25px 0;
}
#dreamz-sports .inlineCtaActions {
flex-direction: column;
}
#dreamz-sports .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-sports .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-sports .phoneDevice {
width: 222px;
}
#dreamz-sports .phoneDevice .rowIcon {
display: grid;
}
#dreamz-sports .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-sports .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-sports .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-sports .sideTile p {
margin: 0;
}
#dreamz-sports .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-sports .dataRow {
gap: 8px;
}
#dreamz-sports .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-sports .miniStats strong {
font-size: 19px;
}
#dreamz-sports .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-sports .heroActions .button {
width: 100%;
}
#dreamz-sports .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-sports .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-sports .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-sports .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-sports .aiStep span {
font-size: 13px;
}
#dreamz-sports .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-sports {
background: var(--white);
}
#dreamz-sports img {
display: block;
max-width: 100%;
}
#dreamz-sports h1,
#dreamz-sports h2,
#dreamz-sports h3 {
text-wrap: balance;
}
#dreamz-sports .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-sports .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-sports .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-sports .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-sports .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-sports .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-sports .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-sports .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-sports .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-sports .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-sports .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-sports .industryIntro {
padding: 78px 0 66px;
}
#dreamz-sports .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-sports .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-sports .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-sports .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-sports .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-sports .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-sports .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-sports .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-sports .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-sports .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-sports .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-sports .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-sports .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-sports .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-sports .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-sports .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-sports .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-sports .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-sports .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-sports .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-sports .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-sports .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-sports .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-sports .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-sports .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-sports .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-sports .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-sports .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-sports .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-sports .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-sports .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-sports .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-sports .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-sports .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-sports .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-sports .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-sports .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-sports .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-sports .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-sports .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-sports .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-sports .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-sports .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-sports .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-sports .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-sports .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-sports .rfidSpotlight {
background: #fff;
}
#dreamz-sports .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-sports .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-sports .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-sports .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-sports .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-sports .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-sports .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-sports .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-sports .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-sports .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-sports .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-sports .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-sports .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-sports .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-sports .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-sports .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-sports .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-sports .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-sports .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-sports .featurePanel {
display: none;
}
#dreamz-sports .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-sports .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-sports .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-sports .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-sports .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-sports .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-sports .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-sports .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-sports .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-sports .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-sports .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-sports .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-sports .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-sports .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-sports .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-sports .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-sports .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-sports .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-sports .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-sports .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-sports .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-sports .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-sports .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-sports .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-sports .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-sports .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-sports .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-sports .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-sports .aiReviewBody {
padding: 18px;
}
#dreamz-sports .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-sports .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-sports .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-sports .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-sports .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-sports .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-sports .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-sports .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-sports .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-sports .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-sports .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-sports .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-sports .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-sports .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-sports .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-sports .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-sports .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-sports .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-sports .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-sports .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-sports .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-sports .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-sports .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-sports .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-sports .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-sports .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-sports .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-sports .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-sports .workflowDetails .featureList,
#dreamz-sports .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-sports .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-sports .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-sports .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-sports #sports-connected-tools {
background: #fff;
}
#dreamz-sports #sports-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-sports .featureTab,
#dreamz-sports .industryPriority,
#dreamz-sports summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-sports .industryIntroHead {
gap: 30px;
}
#dreamz-sports .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-sports .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-sports .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-sports .factoryWorkflow {
padding: 22px;
}
#dreamz-sports .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-sports .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-sports .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-sports .industryPriorityGrid {
gap: 14px;
}
#dreamz-sports .industryPriority {
padding: 22px 19px;
}
#dreamz-sports .industryPriority h3 {
font-size: 21px;
}
#dreamz-sports .industryPriority p {
font-size: 12px;
}
#dreamz-sports .priorityLink {
font-size: 10px;
}
#dreamz-sports .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-sports .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-sports .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-sports .vedaUseCases>div {
display: block;
}
#dreamz-sports .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-sports .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-sports .featureTabs {
gap: 8px;
}
#dreamz-sports .featureTab {
min-height: 108px;
}
#dreamz-sports .featureStage,
#dreamz-sports .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-sports .rfidSpotlight .spotlightMedia,
#dreamz-sports .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-sports .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-sports .featurePanel {
min-height: 0;
}
#dreamz-sports .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-sports .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-sports .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-sports .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-sports .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-sports .clientBand {
padding: 22px 0;
}
#dreamz-sports .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-sports .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-sports .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-sports .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-sports .industryIntro {
padding: 53px 0;
}
#dreamz-sports .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-sports .industryIntroHead>p {
font-size: 14px;
}
#dreamz-sports .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .industryPriority {
padding: 23px;
}
#dreamz-sports .industryPriority h3 {
font-size: 24px;
}
#dreamz-sports .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-sports .industryPriority p {
font-size: 13px;
}
#dreamz-sports .priorityLink {
font-size: 11px;
}
#dreamz-sports .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-sports .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-sports .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-sports .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-sports .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-sports .vedaUseCases>div {
display: flex;
}
#dreamz-sports .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-sports .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-sports .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-sports .vedaMessage.user {
margin-left: 25px;
}
#dreamz-sports .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-sports .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-sports .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-sports .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-sports .spotlightHead h2 {
font-size: 32px;
}
#dreamz-sports .spotlightHead>p {
font-size: 14px;
}
#dreamz-sports .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-sports .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-sports .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-sports .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-sports .featurePanel h3 {
font-size: 24px;
}
#dreamz-sports .featurePanel>p {
font-size: 13px;
}
#dreamz-sports .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-sports .spotlightChecks>li {
font-size: 12px;
}
#dreamz-sports .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-sports .spotlightActions .button {
width: 100%;
}
#dreamz-sports .spotlightScope {
font-size: 10px;
}
#dreamz-sports .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-sports .mediaTitle strong {
font-size: 11px;
}
#dreamz-sports .mediaTitle div>span {
font-size: 8px;
}
#dreamz-sports .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-sports .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-sports .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-sports .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-sports .aiReviewBody {
padding: 13px;
}
#dreamz-sports .aiIssue {
padding: 13px;
}
#dreamz-sports .aiIssue strong {
font-size: 14px;
}
#dreamz-sports .aiEvidence {
gap: 6px;
}
#dreamz-sports .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-sports .aiEvidence strong {
font-size: 9px;
}
#dreamz-sports .aiEvidence span {
font-size: 7px;
}
#dreamz-sports .exampleLabel {
font-size: 6px;
}
#dreamz-sports .factoryWorkflows {
padding: 55px 0;
}
#dreamz-sports .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-sports .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-sports .industryRibbonGrid {
gap: 12px;
}
#dreamz-sports .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-sports .spotlightHead h2 {
font-size: 29px;
}
#dreamz-sports .featureStage {
padding: 19px 13px;
}
#dreamz-sports .mediaTitle>.icon {
display: none;
}
#dreamz-sports .exampleLabel {
display: none;
}
#dreamz-sports .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-sports .featureTabs {
display: none;
}
#dreamz-sports .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-sports .featureStage {
display: block;
}
#dreamz-sports .featurePanel {
color: #000;
}
}
#dreamz-sports #sports-delivery-features-1:checked~.featureTabs label[for="sports-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-delivery-features-1:focus-visible~.featureTabs label[for="sports-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-sports #sports-delivery-features-2:checked~.featureTabs label[for="sports-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-delivery-features-2:focus-visible~.featureTabs label[for="sports-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-sports #sports-delivery-features-3:checked~.featureTabs label[for="sports-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-delivery-features-3:focus-visible~.featureTabs label[for="sports-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-sports #sports-delivery-features-4:checked~.featureTabs label[for="sports-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-delivery-features-4:focus-visible~.featureTabs label[for="sports-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-sports #sports-delivery-features-5:checked~.featureTabs label[for="sports-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-delivery-features-5:focus-visible~.featureTabs label[for="sports-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-sports #sports-rfid-features-1:checked~.featureTabs label[for="sports-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-rfid-features-1:focus-visible~.featureTabs label[for="sports-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-sports #sports-rfid-features-2:checked~.featureTabs label[for="sports-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-rfid-features-2:focus-visible~.featureTabs label[for="sports-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-sports #sports-rfid-features-3:checked~.featureTabs label[for="sports-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-rfid-features-3:focus-visible~.featureTabs label[for="sports-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-sports #sports-rfid-features-4:checked~.featureTabs label[for="sports-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-rfid-features-4:focus-visible~.featureTabs label[for="sports-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-sports #sports-rfid-features-5:checked~.featureTabs label[for="sports-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-rfid-features-5:focus-visible~.featureTabs label[for="sports-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-1:checked~.featureTabs label[for="sports-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-ai-decisions-features-1:focus-visible~.featureTabs label[for="sports-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-2:checked~.featureTabs label[for="sports-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-ai-decisions-features-2:focus-visible~.featureTabs label[for="sports-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-3:checked~.featureTabs label[for="sports-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-ai-decisions-features-3:focus-visible~.featureTabs label[for="sports-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-4:checked~.featureTabs label[for="sports-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-ai-decisions-features-4:focus-visible~.featureTabs label[for="sports-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-5:checked~.featureTabs label[for="sports-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-sports #sports-ai-decisions-features-5:focus-visible~.featureTabs label[for="sports-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-sports #sports-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-sports .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .featureMediaPanels {
min-width: 0;
}
#dreamz-sports .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-sports .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-sports .featureMediaPanels .windowTop strong,
#dreamz-sports .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-sports .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-sports .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-sports .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-sports .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-sports .featureMediaPanels .windowBody>*,
#dreamz-sports .featureMediaPanels .spectrumGrid>*,
#dreamz-sports .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-sports .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-sports .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-sports .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-sports .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-sports .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-sports .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-sports .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-sports .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-sports .pin2 {
top: 88px;
right: 88px;
}
#dreamz-sports .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-sports .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-sports .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-sports .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-sports .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-sports .featureMediaPanels .graphNodes .node.n1,
#dreamz-sports .featureMediaPanels .graphNodes .node.n2,
#dreamz-sports .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-sports .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-sports .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-sports .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-sports .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-sports .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-sports .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-sports .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-sports .freshGraphic * {
box-sizing: border-box;
}
#dreamz-sports .rfPanel,
#dreamz-sports .aiInsightCard,
#dreamz-sports .forecastVisualCard,
#dreamz-sports .forecastSuggestion,
#dreamz-sports .knowledgeTile,
#dreamz-sports .chatConversation,
#dreamz-sports .trainingSummary,
#dreamz-sports .moduleCard,
#dreamz-sports .qualityHeatCard,
#dreamz-sports .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-sports .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-sports .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-sports .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-sports .statusPill,
#dreamz-sports .cardTag,
#dreamz-sports .forecastSuggestion b,
#dreamz-sports .moduleCard b,
#dreamz-sports .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-sports .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-sports .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-sports .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-sports .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-sports .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-sports .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-sports .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-sports .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-sports .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-sports .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-sports .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-sports .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-sports .dot.good {
background: #298EEC;
}
#dreamz-sports .dot.warn {
background: #F4A62A;
}
#dreamz-sports .dot.bad {
background: #EB6B53;
}
#dreamz-sports .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-sports .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-sports .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-sports .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-sports .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-sports .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-sports .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-sports .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-sports .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-sports .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-sports .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-sports .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-sports .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-sports .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-sports .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-sports .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-sports .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-sports .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-sports .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-sports .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-sports .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-sports .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-sports .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-sports .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-sports .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-sports .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-sports .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-sports .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-sports .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-sports .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-sports .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-sports .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-sports .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-sports .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-sports .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-sports .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-sports .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-sports .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-sports .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-sports .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-sports .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-sports .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-sports .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-sports .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-sports .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-sports .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-sports .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-sports .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-sports .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-sports .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-sports .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-sports .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-sports .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-sports .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-sports .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-sports .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-sports .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-sports .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-sports .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-sports .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-sports .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-sports .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-sports .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-sports .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-sports .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-sports .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-sports .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-sports .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-sports .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-sports .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-sports .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-sports .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-sports .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-sports .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-sports .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-sports .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-sports .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-sports .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-sports .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-sports .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-sports .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-sports .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-sports .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-sports .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-sports .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-sports .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-sports .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-sports .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-sports .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-sports .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-sports .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-sports .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-sports .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-sports .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-sports .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-sports .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-sports .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-sports .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-sports .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-sports .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-sports .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-sports .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-sports .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-sports .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-sports .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-sports .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-sports .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-sports .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-sports .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-sports .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-sports .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-sports .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-sports .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-sports .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-sports .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-sports .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-sports .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-sports .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-sports .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-sports .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-sports .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-sports .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-sports .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-sports .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-sports .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-sports .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-sports .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-sports .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-sports .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-sports .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-sports .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-sports .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-sports .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-sports .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-sports .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-sports .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-sports .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-sports .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-sports .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-sports .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-sports .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-sports .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-sports .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-sports .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-sports .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-sports .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-sports .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-sports .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-sports .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-sports .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-sports .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-sports .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-sports .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-sports .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-sports .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-sports .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-sports .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-sports .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-sports .rfTrackLayout,
#dreamz-sports .rfFlowLayout,
#dreamz-sports .rfAlertGrid,
#dreamz-sports .rfCycleLayout,
#dreamz-sports .rfSitesLayout,
#dreamz-sports .aiRootLayout,
#dreamz-sports .aiForecastLayout,
#dreamz-sports .aiChatLayout,
#dreamz-sports .aiTrainingLayout,
#dreamz-sports .aiQualityLayout,
#dreamz-sports .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-sports .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-sports .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-sports .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-sports .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-sports .aiLink {
display: none;
}
}
#dreamz-sports .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-sports .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-sports .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-sports .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-sports .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-sports .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-sports .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-sports .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-sports .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-sports .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-sports .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-sports .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-sports .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-sports .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-sports .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-sports .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-sports .mfgHeroContent {
min-height: 610px;
}
#dreamz-sports .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-sports .mfgHeroLead {
font-size: 16px;
}
#dreamz-sports .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-sports .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-sports .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-sports .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-sports .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-sports .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-sports .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-sports .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-sports .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-sports .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-sports .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-sports .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-sports .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-sports .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-sports .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-sports .mfgHero {
background: #fff;
color: #000;
}
#dreamz-sports .mfgHeroScene,
#dreamz-sports .mfgHeroActions {
display: none;
}
#dreamz-sports .mfgHeroContent {
min-height: 0;
}
#dreamz-sports .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
#dreamz-sports #sports-rfid .featureStage,
#dreamz-sports #sports-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-sports .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-sports .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-sports .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-sports .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-sports .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-sports .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-sports .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-sports .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-sports .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-sports .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-sports .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-sports .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-sports .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-sports .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-sports .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-sports .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-sports .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-sports .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-sports .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-sports .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-sports .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-sports .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-sports .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-sports .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-sports .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-sports .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-sports .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-sports .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-sports .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-sports .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-sports .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-sports .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-sports .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-sports .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-sports .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-sports .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-sports .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-sports .mfgGallery .flowArrow {
display: none;
}
#dreamz-sports .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-sports .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-sports .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-sports .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-sports .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-sports .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-sports .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-sports .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-sports .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-sports .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-sports .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-sports .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-sports .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-sports .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-sports .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-sports .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-sports .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-sports .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-sports .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-sports .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-sports .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-sports .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-sports .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-sports .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-sports .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-sports .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-sports .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-sports .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-sports .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-sports .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-sports .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-sports .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-sports .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-sports .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-sports .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-sports .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-sports .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-sports .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-sports .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-sports .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-sports .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-sports .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-sports .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-sports .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-sports .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-sports .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-sports .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-sports .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-sports .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-sports .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-sports .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-sports .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-sports .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-sports .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-sports .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-sports .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-sports .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-sports .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-sports .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-sports .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-sports .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-sports .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-sports .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-sports .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-sports .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-sports .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-sports .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-sports .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-sports .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-sports .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-sports .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-sports .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-sports .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-sports .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-sports .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-sports .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-sports .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-sports .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-sports .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-sports .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-sports .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-sports .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-sports .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-sports .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-sports .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-sports .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-sports .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-sports .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-sports .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-sports .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-sports .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-sports .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-sports .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-sports .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-sports #sports-rfid .featureStage,
#dreamz-sports #sports-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-sports #sports-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-sports .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-sports #sports-rfid .featureStage,
#dreamz-sports #sports-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-sports .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-sports .mfgGallery .freshWindow {
height: auto;
}
#dreamz-sports .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-sports .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-sports .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-sports .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-sports .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-sports .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-sports .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-sports .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-sports .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-sports .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-sports .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-sports .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-sports .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-sports .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-sports .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-sports .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-sports .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-sports .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-sports .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-sports .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-sports .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-sports .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-sports .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-sports .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-sports .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-sports .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-sports .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-sports .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-sports .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-sports .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-sports .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-sports .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-sports .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-sports .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-sports .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-sports .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-sports .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-sports .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-sports .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-sports .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-sports .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-sports .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-sports .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-sports .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-sports .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-sports .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-sports .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-sports .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-sports .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-sports .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-sports .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-sports .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-sports .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-sports .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-sports .sportsVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-sports .sportsGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-sports .sportsIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-sports .sportsStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-sports .sportsVisualGallery>.sportsGraphic {
display: none;
}
#dreamz-sports #sports-delivery .featureStage,
#dreamz-sports #sports-rfid .featureStage,
#dreamz-sports #sports-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-sports #sports-rfid .sportsVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-sports #sports-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-sports .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-sports .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-sports .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-sports .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
}
@media (max-width:1100px) {
#dreamz-sports #sports-delivery .featureStage,
#dreamz-sports #sports-rfid .featureStage,
#dreamz-sports #sports-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-sports #sports-rfid .sportsVisualGallery,
#dreamz-sports #sports-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-sports .mfgHeroScene {
height: 290px;
}
#dreamz-sports #sports-delivery .featureStage,
#dreamz-sports #sports-rfid .featureStage,
#dreamz-sports #sports-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-sports .sportsVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-sports .sportsVisualGallery>.sportsGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-sports #sports-delivery-features-1:checked~.featureStage .sportsVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-sports #sports-delivery-features-2:checked~.featureStage .sportsVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-sports #sports-delivery-features-3:checked~.featureStage .sportsVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-sports #sports-delivery-features-4:checked~.featureStage .sportsVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-sports #sports-delivery-features-5:checked~.featureStage .sportsVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-sports #sports-rfid-features-1:checked~.featureStage .sportsVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-sports #sports-rfid-features-2:checked~.featureStage .sportsVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-sports #sports-rfid-features-3:checked~.featureStage .sportsVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-sports #sports-rfid-features-4:checked~.featureStage .sportsVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-sports #sports-rfid-features-5:checked~.featureStage .sportsVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-1:checked~.featureStage .sportsVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-2:checked~.featureStage .sportsVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-3:checked~.featureStage .sportsVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-4:checked~.featureStage .sportsVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-sports #sports-ai-decisions-features-5:checked~.featureStage .sportsVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-sports .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-sports .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-sports .sportsIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-sports .sportsGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-sports .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-sports .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-sports .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-sports .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-sports .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-sports .mfgHeroContent {
background: transparent;
}
#dreamz-sports .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-sports .sportsIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-sports .sportsIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-sports .sportsGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-sports .sportsVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-sports .mfgHeroScene img {
object-position: 72% 50%;
}
}
@media(max-width:600px) {
#dreamz-sports .mfgHeroScene img {
object-position: 82% 50%;
}
}  .propertyPage-theme .industryIntroHead.compact,
.propertyPage-theme .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.propertyPage-theme .featureMediaPanels {
position: relative;
min-height: 430px;
}
.propertyPage-theme .featureMediaPanels>.mediaPanel {
display: none;
}
.propertyPage-theme .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
.propertyPage-theme .featureMediaPanels .spotlightMedia {
height: 100%;
}
.propertyPage-theme .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
.propertyPage-theme .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
.propertyPage-theme .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
.propertyPage-theme .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
.propertyPage-theme .windowTop strong {
font-size: 13px;
color: var(--navy);
}
.propertyPage-theme .windowTop small {
font-size: 10px;
color: var(--muted);
}
.propertyPage-theme .windowDots {
display: flex;
gap: 5px;
}
.propertyPage-theme .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
.propertyPage-theme .windowBody {
padding: 16px;
}
.propertyPage-theme .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.propertyPage-theme .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
.propertyPage-theme .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
.propertyPage-theme .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
.propertyPage-theme .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
.propertyPage-theme .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
.propertyPage-theme .chartGridLine.l1 {
top: 34px;
}
.propertyPage-theme .chartGridLine.l2 {
top: 65px;
}
.propertyPage-theme .chartGridLine.l3 {
top: 96px;
}
.propertyPage-theme .chartGridLine.l4 {
top: 127px;
}
.propertyPage-theme .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
.propertyPage-theme .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
.propertyPage-theme .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.propertyPage-theme .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.propertyPage-theme .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
.propertyPage-theme .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
.propertyPage-theme .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
.propertyPage-theme .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
.propertyPage-theme .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
.propertyPage-theme .spectrumNotes {
display: grid;
gap: 10px;
}
.propertyPage-theme .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
.propertyPage-theme .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
.propertyPage-theme .noteCard p,
.propertyPage-theme .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
.propertyPage-theme .alertStack {
display: grid;
gap: 10px;
}
.propertyPage-theme .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
.propertyPage-theme .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
.propertyPage-theme .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
.propertyPage-theme .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
.propertyPage-theme .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
.propertyPage-theme .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
.propertyPage-theme .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.propertyPage-theme .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.propertyPage-theme .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
.propertyPage-theme .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.propertyPage-theme .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.propertyPage-theme .scheduleBoard h4,
.propertyPage-theme .todoBoard h4,
.propertyPage-theme .siteBoard h4,
.propertyPage-theme .chatPanel h4,
.propertyPage-theme .lessonPanel h4,
.propertyPage-theme .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
.propertyPage-theme .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
.propertyPage-theme .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
.propertyPage-theme .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
.propertyPage-theme .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
.propertyPage-theme .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
.propertyPage-theme .taskRow:last-child {
border-bottom: 0;
}
.propertyPage-theme .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.propertyPage-theme .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.propertyPage-theme .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
.propertyPage-theme .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.propertyPage-theme .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.propertyPage-theme .inventoryTable th,
.propertyPage-theme .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
.propertyPage-theme .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
.propertyPage-theme .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
.propertyPage-theme .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
.propertyPage-theme .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.propertyPage-theme .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
.propertyPage-theme .phoneBody {
padding: 12px;
}
.propertyPage-theme .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
.propertyPage-theme .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
.propertyPage-theme .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
.propertyPage-theme .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.propertyPage-theme .progressList {
display: grid;
gap: 10px;
}
.propertyPage-theme .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.propertyPage-theme .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.propertyPage-theme .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
.propertyPage-theme .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
.propertyPage-theme .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.propertyPage-theme .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.propertyPage-theme .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
.propertyPage-theme .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
.propertyPage-theme .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
.propertyPage-theme .pin1 {
top: 56px;
left: 58px;
}
.propertyPage-theme .pin2 {
top: 88px;
right: 88px;
}
.propertyPage-theme .pin3 {
bottom: 54px;
right: 72px;
}
.propertyPage-theme .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
.propertyPage-theme .siteRow:last-child {
border-bottom: 0;
}
.propertyPage-theme .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
.propertyPage-theme .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
.propertyPage-theme .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
.propertyPage-theme .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.propertyPage-theme .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
.propertyPage-theme .graphNodes:before,
.propertyPage-theme .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
.propertyPage-theme .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
.propertyPage-theme .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
.propertyPage-theme .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
.propertyPage-theme .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
.propertyPage-theme .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
.propertyPage-theme .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
.propertyPage-theme .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
.propertyPage-theme .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
.propertyPage-theme .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
.propertyPage-theme .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.propertyPage-theme .forecastList .taskRow strong {
font-size: 11px;
}
.propertyPage-theme .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.propertyPage-theme .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
.propertyPage-theme .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
.propertyPage-theme .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
.propertyPage-theme .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
.propertyPage-theme .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.propertyPage-theme .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.propertyPage-theme .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
.propertyPage-theme .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
.propertyPage-theme .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
.propertyPage-theme .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
.propertyPage-theme .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.propertyPage-theme .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.propertyPage-theme .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
.propertyPage-theme .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
.propertyPage-theme .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
.propertyPage-theme .qualityRows {
display: grid;
gap: 10px;
}
.propertyPage-theme .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
.propertyPage-theme .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
.propertyPage-theme .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
.propertyPage-theme .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.propertyPage-theme .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.propertyPage-theme #furniture-delivery-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.propertyPage-theme #furniture-delivery-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.propertyPage-theme #furniture-delivery-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.propertyPage-theme #furniture-delivery-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.propertyPage-theme #furniture-delivery-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.propertyPage-theme #furniture-rfid-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.propertyPage-theme #furniture-rfid-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.propertyPage-theme #furniture-rfid-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.propertyPage-theme #furniture-rfid-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.propertyPage-theme #furniture-rfid-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
.propertyPage-theme #furniture-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
.propertyPage-theme #furniture-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
.propertyPage-theme #furniture-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
.propertyPage-theme #furniture-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
.propertyPage-theme #furniture-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.propertyPage-theme #furniture-delivery-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.propertyPage-theme #furniture-delivery-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.propertyPage-theme #furniture-delivery-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.propertyPage-theme #furniture-delivery-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.propertyPage-theme #furniture-rfid-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.propertyPage-theme #furniture-rfid-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.propertyPage-theme #furniture-rfid-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.propertyPage-theme #furniture-rfid-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.propertyPage-theme #furniture-rfid-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
.propertyPage-theme #furniture-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
.propertyPage-theme #furniture-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
.propertyPage-theme #furniture-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
.propertyPage-theme #furniture-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
.propertyPage-theme #furniture-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
.propertyPage-theme .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
.propertyPage-theme .featureMediaPanels {
min-height: 0;
}
.propertyPage-theme .inventorySplit,
.propertyPage-theme .forecastGrid,
.propertyPage-theme .siteGrid,
.propertyPage-theme .spectrumGrid,
.propertyPage-theme .scheduleGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
.propertyPage-theme .metricGrid,
.propertyPage-theme .lessonCards,
.propertyPage-theme .gaugeGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .heatmap {
grid-template-columns: repeat(3, 1fr);
}
.propertyPage-theme .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
.propertyPage-theme {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
.propertyPage-theme * {
box-sizing: border-box;
}
.propertyPage-theme {
scroll-behavior: smooth;
}
.propertyPage-theme {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
.propertyPage-theme a {
color: inherit;
text-decoration: none;
}
.propertyPage-theme .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
.propertyPage-theme .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
.propertyPage-theme .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
.propertyPage-theme .brand span {
color: var(--brand);
}
.propertyPage-theme .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
.propertyPage-theme .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
.propertyPage-theme .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
.propertyPage-theme .button.primary:hover {
background: var(--brand-dark);
}
.propertyPage-theme .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
.propertyPage-theme .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
.propertyPage-theme .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
.propertyPage-theme .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
.propertyPage-theme h1 {
font-size: clamp(43px, 6vw, 72px);
color: var(--black);
}
.propertyPage-theme h2 {
font-size: clamp(32px, 4.3vw, 50px);
color: var(--black);
}
.propertyPage-theme h3 {
font-size: 23px;
color: var(--black);
}
.propertyPage-theme .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
.propertyPage-theme .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.propertyPage-theme .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
.propertyPage-theme .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
.propertyPage-theme .hero .button.primary:hover {
background: var(--black-soft);
}
.propertyPage-theme .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
.propertyPage-theme .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
.propertyPage-theme .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
.propertyPage-theme .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
.propertyPage-theme .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.propertyPage-theme .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
.propertyPage-theme .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
.propertyPage-theme .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
.propertyPage-theme .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
.propertyPage-theme .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.propertyPage-theme .ratingLead strong {
display: block;
font-size: 20px;
}
.propertyPage-theme .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
.propertyPage-theme .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.propertyPage-theme .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
.propertyPage-theme .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
.propertyPage-theme .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
.propertyPage-theme .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.propertyPage-theme .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
.propertyPage-theme .awardLead strong {
color: var(--navy);
font-size: 20px;
}
.propertyPage-theme .awardLead span {
color: var(--muted);
font-size: 13px;
}
.propertyPage-theme .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
.propertyPage-theme .sectionHead {
max-width: 790px;
margin-bottom: 44px;
}
.propertyPage-theme .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
.propertyPage-theme .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
.propertyPage-theme .aiJourney h2 {
color: #fff;
}
.propertyPage-theme .aiJourney .sectionHead p {
color: #D7D7D7;
}
.propertyPage-theme .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.propertyPage-theme .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
.propertyPage-theme .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
.propertyPage-theme .aiStep:last-child::after {
display: none;
}
.propertyPage-theme .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
.propertyPage-theme .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
.propertyPage-theme .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
.propertyPage-theme .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
.propertyPage-theme .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.propertyPage-theme .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
.propertyPage-theme .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
.propertyPage-theme .outcome span {
color: var(--muted);
font-size: 14px;
}
.propertyPage-theme .capability {
background: #fff;
}
.propertyPage-theme .capability.alt {
background: var(--sky-2);
}
.propertyPage-theme .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.propertyPage-theme .twoCol.reverse .visual {
order: 2;
}
.propertyPage-theme .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
.propertyPage-theme .visual .placeholder {
min-height: 355px;
}
.propertyPage-theme .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
.propertyPage-theme .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
.propertyPage-theme details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
.propertyPage-theme details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
.propertyPage-theme details.capabilityMore summary::-webkit-details-marker {
display: none;
}
.propertyPage-theme details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
.propertyPage-theme details.capabilityMore[open] summary::after {
content: "−";
}
.propertyPage-theme details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
.propertyPage-theme .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
.propertyPage-theme .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
.propertyPage-theme .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
.propertyPage-theme .darkSection h2,
.propertyPage-theme .darkSection h3 {
color: #fff;
}
.propertyPage-theme .darkSection .sectionHead p,
.propertyPage-theme .darkSection .copy p {
color: #D7D7D7;
}
.propertyPage-theme .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
.propertyPage-theme .darkSection .featureItem {
color: #F7F7F7;
}
.propertyPage-theme .darkSection .check {
background: var(--yellow);
color: var(--black);
}
.propertyPage-theme .darkSection details.capabilityMore summary {
color: var(--yellow);
}
.propertyPage-theme .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
.propertyPage-theme .darkSection .placeholder small {
color: #D0D0D0;
}
.propertyPage-theme .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.propertyPage-theme .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
.propertyPage-theme .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
.propertyPage-theme .card p {
color: var(--muted);
margin: 12px 0 0;
}
.propertyPage-theme .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.propertyPage-theme .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
.propertyPage-theme .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
.propertyPage-theme .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.propertyPage-theme .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
.propertyPage-theme .benefitBand h2 {
color: #fff;
}
.propertyPage-theme .benefitBand .sectionHead p {
color: #D5D5D5;
}
.propertyPage-theme .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
.propertyPage-theme .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.propertyPage-theme .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
.propertyPage-theme .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
.propertyPage-theme .benefit span {
color: #E1E1E1;
font-size: 14px;
}
.propertyPage-theme .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
.propertyPage-theme .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
.propertyPage-theme .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.propertyPage-theme .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
.propertyPage-theme .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
.propertyPage-theme .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
.propertyPage-theme .faq {
max-width: 900px;
}
.propertyPage-theme .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
.propertyPage-theme .ctaPanel h2 {
color: #fff;
}
.propertyPage-theme .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
.propertyPage-theme .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
.propertyPage-theme .ctaPanel .button.primary:hover {
background: #FFD84D;
}
.propertyPage-theme .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.propertyPage-theme .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
.propertyPage-theme .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
.propertyPage-theme .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
.propertyPage-theme .inlineCta.dark h3 {
color: #fff;
}
.propertyPage-theme .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
.propertyPage-theme .inlineCta.dark p {
color: #D8D8D8;
}
.propertyPage-theme .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.propertyPage-theme .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
.propertyPage-theme .button.yellow:hover {
background: #FFD84D;
}
.propertyPage-theme .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
.propertyPage-theme .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
.propertyPage-theme .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
.propertyPage-theme .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
.propertyPage-theme footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
.propertyPage-theme .ratingSectionGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
.propertyPage-theme .heroGrid,
.propertyPage-theme .twoCol,
.propertyPage-theme .ctaPanel {
grid-template-columns: 1fr;
}
.propertyPage-theme .twoCol.reverse .visual {
order: initial;
}
.propertyPage-theme .logoRow {
grid-template-columns: repeat(4, 1fr);
}
.propertyPage-theme .ratingGrid,
.propertyPage-theme .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
.propertyPage-theme .ratingLead,
.propertyPage-theme .awardLead {
grid-column: 1/-1;
text-align: center;
}
.propertyPage-theme .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
.propertyPage-theme .aiStep:nth-child(3)::after,
.propertyPage-theme .aiStep:last-child::after {
display: none;
}
.propertyPage-theme .outcomeGrid,
.propertyPage-theme .challengeGrid,
.propertyPage-theme .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
.propertyPage-theme .cards,
.propertyPage-theme .proofCards {
grid-template-columns: repeat(2, 1fr);
}
.propertyPage-theme .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
.propertyPage-theme .navlinks {
display: none;
}
}
@media (max-width: 640px) {
.propertyPage-theme .awardProofGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .wrap {
width: min(var(--max), calc(100% - 24px));
}
.propertyPage-theme .hero {
padding: 58px 0 52px;
}
.propertyPage-theme h1 {
font-size: 44px;
}
.propertyPage-theme .aiFlow {
grid-template-columns: 1fr;
}
.propertyPage-theme .aiStep::after {
display: none;
}
.propertyPage-theme .logoRow,
.propertyPage-theme .ratingGrid,
.propertyPage-theme .awardGrid,
.propertyPage-theme .outcomeGrid,
.propertyPage-theme .challengeGrid,
.propertyPage-theme .benefitGrid,
.propertyPage-theme .cards,
.propertyPage-theme .proofCards,
.propertyPage-theme .integrationGrid,
.propertyPage-theme .featureList {
grid-template-columns: 1fr;
}
.propertyPage-theme .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.propertyPage-theme .ctaPanel {
padding: 34px 24px;
}
.propertyPage-theme .inlineCta {
flex-direction: column;
align-items: flex-start;
}
.propertyPage-theme .inlineCtaActions {
width: 100%;
}
.propertyPage-theme .inlineCtaActions .button {
flex: 1;
}
}
.propertyPage-theme {
--muted: #526A7C;
--shadow: none;
}
.propertyPage-theme {
background: var(--sky-2);
}
.propertyPage-theme p {
margin-bottom: 0;
}
.propertyPage-theme [id] {
scroll-margin-top: 94px;
}
.propertyPage-theme svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.propertyPage-theme .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
.propertyPage-theme .darkSection h2,
.propertyPage-theme .darkSection h3,
.propertyPage-theme .aiJourney h2,
.propertyPage-theme .benefitBand h2,
.propertyPage-theme .ctaPanel h2,
.propertyPage-theme .inlineCta.dark h3 {
color: #fff;
}
.propertyPage-theme .wrap>*,
.propertyPage-theme .heroGrid>*,
.propertyPage-theme .twoCol>*,
.propertyPage-theme .ctaPanel>* {
min-width: 0;
}
.propertyPage-theme .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.propertyPage-theme .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
.propertyPage-theme .skipLink:focus {
transform: none;
}
.propertyPage-theme a:focus-visible,
.propertyPage-theme summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
.propertyPage-theme .darkSection a:focus-visible,
.propertyPage-theme .darkSection summary:focus-visible,
.propertyPage-theme .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
.propertyPage-theme .topbar {
background: #fff;
backdrop-filter: none;
}
.propertyPage-theme .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
.propertyPage-theme .brandName {
display: inline;
color: var(--navy) !important;
}
.propertyPage-theme .brandName>span {
color: var(--brand-dark);
}
.propertyPage-theme .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
.propertyPage-theme .brandMark .icon {
width: 21px;
height: 21px;
}
.propertyPage-theme .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
.propertyPage-theme .navlinks a:hover {
color: var(--brand-dark);
}
.propertyPage-theme .nav>.button {
min-height: 43px;
font-size: 13px;
padding: 0 18px;
}
.propertyPage-theme .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
.propertyPage-theme .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.propertyPage-theme .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
.propertyPage-theme .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
.propertyPage-theme .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
.propertyPage-theme .hero .lead {
font-size: 18px;
line-height: 1.8;
}
.propertyPage-theme .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
.propertyPage-theme .heroVisual {
width: 100%;
min-width: 0;
}
.propertyPage-theme .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
.propertyPage-theme .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
.propertyPage-theme .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.propertyPage-theme .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
.propertyPage-theme .clientBand {
padding: 27px 0;
}
.propertyPage-theme .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.propertyPage-theme .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.propertyPage-theme .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
.propertyPage-theme .logoBox.wide {
font-size: 12px;
}
.propertyPage-theme .logoBox small {
display: block;
font-size: 10px;
}
.propertyPage-theme h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
.propertyPage-theme .sectionHead {
margin-bottom: 36px;
}
.propertyPage-theme .eyebrow {
line-height: 1.5;
}
.propertyPage-theme .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
.propertyPage-theme .aiStep {
min-height: 162px;
}
.propertyPage-theme .aiStep strong {
line-height: 1.35;
}
.propertyPage-theme .aiStep span {
line-height: 1.65;
}
.propertyPage-theme .aiCallout {
margin-top: 24px;
}
.propertyPage-theme .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
.propertyPage-theme .outcome>.icon {
color: var(--navy);
}
.propertyPage-theme .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
.propertyPage-theme .awardItem>.icon {
color: var(--navy);
}
.propertyPage-theme .awardItem:hover {
border-color: var(--brand-dark);
}
.propertyPage-theme .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.propertyPage-theme .twoCol.reverse .visual {
order: -1;
}
.propertyPage-theme .copy .eyebrow {
margin-bottom: 17px;
}
.propertyPage-theme .copy p {
font-size: 16px;
line-height: 1.85;
}
.propertyPage-theme .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
.propertyPage-theme .featureList {
gap: 13px 18px;
}
.propertyPage-theme .featureItem {
font-size: 13px;
line-height: 1.6;
}
.propertyPage-theme .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
.propertyPage-theme .check .icon {
width: 14px;
height: 14px;
}
.propertyPage-theme details.capabilityMore {
margin-bottom: 0;
}
.propertyPage-theme .capabilityMore summary {
min-height: 34px;
}
.propertyPage-theme .capabilityMore .moreGrid {
gap: 13px 18px;
}
.propertyPage-theme .textCta {
font-size: 14px;
}
.propertyPage-theme .visual {
min-width: 0;
}
.propertyPage-theme .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
.propertyPage-theme .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
.propertyPage-theme .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
.propertyPage-theme .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
.propertyPage-theme .panelBody {
padding: 20px;
}
.propertyPage-theme .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
.propertyPage-theme .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
.propertyPage-theme .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
.propertyPage-theme .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
.propertyPage-theme .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
.propertyPage-theme .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
.propertyPage-theme .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
.propertyPage-theme .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
.propertyPage-theme .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
.propertyPage-theme .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
.propertyPage-theme .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
.propertyPage-theme .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
.propertyPage-theme .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
.propertyPage-theme .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
.propertyPage-theme .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
.propertyPage-theme .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
.propertyPage-theme .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
.propertyPage-theme .miniStats span {
font-size: 9px;
color: var(--muted);
}
.propertyPage-theme .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
.propertyPage-theme .dataRow:last-child {
border-bottom: 0;
}
.propertyPage-theme .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
.propertyPage-theme .rowIcon .icon {
width: 19px;
height: 19px;
}
.propertyPage-theme .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
.propertyPage-theme .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
.propertyPage-theme .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
.propertyPage-theme .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
.propertyPage-theme .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
.propertyPage-theme .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
.propertyPage-theme .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
.propertyPage-theme .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
.propertyPage-theme .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
.propertyPage-theme .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
.propertyPage-theme .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
.propertyPage-theme .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
.propertyPage-theme .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
.propertyPage-theme .mobileAccount {
text-align: center;
padding: 13px 0;
}
.propertyPage-theme .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
.propertyPage-theme .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
.propertyPage-theme .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
.propertyPage-theme .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
.propertyPage-theme .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
.propertyPage-theme .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
.propertyPage-theme .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
.propertyPage-theme .phoneDevice .rowCopy strong {
font-size: 9px;
}
.propertyPage-theme .phoneDevice .rowCopy small {
font-size: 7px;
}
.propertyPage-theme .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
.propertyPage-theme .mobileSide {
display: grid;
gap: 10px;
}
.propertyPage-theme .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
.propertyPage-theme .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
.propertyPage-theme .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
.propertyPage-theme .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
.propertyPage-theme .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
.propertyPage-theme .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
.propertyPage-theme .darkSection .panelHead>strong {
color: #fff;
}
.propertyPage-theme .darkSection .productPanel figcaption {
color: #BFBFBF;
}
.propertyPage-theme .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
.propertyPage-theme .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.propertyPage-theme .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
.propertyPage-theme .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
.propertyPage-theme .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
.propertyPage-theme .promptList {
display: grid;
gap: 10px;
}
.propertyPage-theme .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
.propertyPage-theme .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
.propertyPage-theme .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
.propertyPage-theme .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
.propertyPage-theme .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
.propertyPage-theme .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
.propertyPage-theme .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
.propertyPage-theme .quoteTable th,
.propertyPage-theme .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.propertyPage-theme .quoteTable td:first-child {
width: 64%;
}
.propertyPage-theme .quoteTable th:last-child,
.propertyPage-theme .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
.propertyPage-theme .quoteTable strong {
font-size: 11px;
}
.propertyPage-theme .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
.propertyPage-theme .quoteTable tfoot {
background: #F5FBFF;
}
.propertyPage-theme .quoteTable tfoot th {
font-size: 10px;
}
.propertyPage-theme .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
.propertyPage-theme .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
.propertyPage-theme .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
.propertyPage-theme .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
.propertyPage-theme .orderJourney {
margin: 20px 0;
}
.propertyPage-theme .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
.propertyPage-theme .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
.propertyPage-theme .journeyRow:last-child:before {
display: none;
}
.propertyPage-theme .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
.propertyPage-theme .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
.propertyPage-theme .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
.propertyPage-theme .journeyRow strong {
font-size: 12px;
display: block;
}
.propertyPage-theme .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
.propertyPage-theme .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
.propertyPage-theme .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
.propertyPage-theme .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
.propertyPage-theme .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
.propertyPage-theme .inventoryIntro strong {
display: block;
font-size: 16px;
}
.propertyPage-theme .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
.propertyPage-theme .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
.propertyPage-theme .availabilityCard span {
font-size: 9px;
display: block;
}
.propertyPage-theme .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
.propertyPage-theme .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.propertyPage-theme .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
.propertyPage-theme .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
.propertyPage-theme .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
.propertyPage-theme .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
.propertyPage-theme .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
.propertyPage-theme .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
.propertyPage-theme .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
.propertyPage-theme .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
.propertyPage-theme .customerTimeline .dataRow {
border-color: #353535;
}
.propertyPage-theme .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
.propertyPage-theme .customerTimeline strong {
color: #fff;
}
.propertyPage-theme .customerTimeline small {
color: #BFBFBF;
}
.propertyPage-theme .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.propertyPage-theme .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
.propertyPage-theme .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
.propertyPage-theme .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
.propertyPage-theme .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
.propertyPage-theme .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
.propertyPage-theme .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
.propertyPage-theme .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
.propertyPage-theme .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
.propertyPage-theme .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
.propertyPage-theme .chartTitle strong {
font-size: 12px;
}
.propertyPage-theme .chartTitle span {
font-size: 9px;
color: var(--muted);
}
.propertyPage-theme .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
.propertyPage-theme .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
.propertyPage-theme .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
.propertyPage-theme .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
.propertyPage-theme .inlineCta {
margin-top: 0;
box-shadow: none;
}
.propertyPage-theme .inlineCtaActions {
max-width: 42%;
}
.propertyPage-theme .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
.propertyPage-theme .inlineCta h3 {
line-height: 1.35;
}
.propertyPage-theme .card {
box-shadow: none;
}
.propertyPage-theme .cardIcon {
box-shadow: none;
}
.propertyPage-theme .card h3 {
font-size: 22px;
}
.propertyPage-theme .card p {
font-size: 14px;
line-height: 1.8;
}
.propertyPage-theme .challenge strong {
font-size: 16px;
line-height: 1.4;
}
.propertyPage-theme .benefit strong {
font-size: 23px;
line-height: 1.25;
}
.propertyPage-theme .valueCtaSection {
padding: 34px 0;
background: #fff;
}
.propertyPage-theme .ratingBand {
padding: 34px 0;
}
.propertyPage-theme .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.propertyPage-theme .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
.propertyPage-theme .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
.propertyPage-theme .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
.propertyPage-theme .ratingItem:first-child {
border-left: 0;
}
.propertyPage-theme .proofCard h3 {
font-size: 23px;
}
.propertyPage-theme .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
.propertyPage-theme .proofCard p {
font-size: 14px;
line-height: 1.8;
}
.propertyPage-theme .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
.propertyPage-theme .integration {
min-height: 98px;
}
.propertyPage-theme .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
.propertyPage-theme .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
.propertyPage-theme .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
.propertyPage-theme .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
.propertyPage-theme .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
.propertyPage-theme .finalActions {
display: grid;
gap: 11px;
}
.propertyPage-theme .finalActions .button {
white-space: nowrap;
}
.propertyPage-theme .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.propertyPage-theme .footerInner p {
margin: 0;
font-size: 12px;
}
.propertyPage-theme .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
.propertyPage-theme .navlinks {
gap: 15px;
font-size: 12px;
}
.propertyPage-theme .heroGrid {
gap: 30px;
}
.propertyPage-theme .twoCol {
gap: 32px;
}
.propertyPage-theme .panelBody {
padding: 16px;
}
.propertyPage-theme .panelHead {
padding: 16px;
}
.propertyPage-theme .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.propertyPage-theme .pipelineColumns {
gap: 7px;
}
.propertyPage-theme .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
.propertyPage-theme .heroGrid,
.propertyPage-theme .twoCol,
.propertyPage-theme .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .heroGrid {
gap: 36px;
}
.propertyPage-theme .hero h1 {
max-width: 730px;
}
.propertyPage-theme .hero .lead {
max-width: 690px;
}
.propertyPage-theme .heroVisual {
max-width: 620px;
margin: 0 auto;
}
.propertyPage-theme .twoCol {
gap: 34px;
}
.propertyPage-theme .twoCol.reverse .visual {
order: initial;
}
.propertyPage-theme .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
.propertyPage-theme .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.propertyPage-theme .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.propertyPage-theme .awardItem {
font-size: 12px;
padding: 13px;
}
.propertyPage-theme .ratingSectionGrid {
gap: 20px;
}
.propertyPage-theme .inlineCta {
align-items: flex-start;
}
.propertyPage-theme .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
.propertyPage-theme .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.propertyPage-theme .card {
padding: 22px;
}
.propertyPage-theme .card h3 {
font-size: 21px;
}
.propertyPage-theme .finalActions {
display: flex;
flex-wrap: wrap;
}
.propertyPage-theme .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
.propertyPage-theme .cards,
.propertyPage-theme .proofCards {
grid-template-columns: 1fr;
}
.propertyPage-theme .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.propertyPage-theme .inlineCta {
flex-direction: column;
}
.propertyPage-theme .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
.propertyPage-theme .inlineCtaActions .button {
flex: 1;
}
.propertyPage-theme .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.propertyPage-theme .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
.propertyPage-theme .wrap {
width: calc(100% - 32px);
}
.propertyPage-theme [id] {
scroll-margin-top: 82px;
}
.propertyPage-theme .brand {
font-size: 20px;
gap: 7px;
}
.propertyPage-theme .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
.propertyPage-theme .brandMark .icon {
width: 18px;
height: 18px;
}
.propertyPage-theme .nav>.button {
font-size: 11px;
min-height: 38px;
padding: 0 12px;
}
.propertyPage-theme .hero {
padding: 51px 0 48px;
}
.propertyPage-theme .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
.propertyPage-theme .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
.propertyPage-theme .heroActions {
gap: 10px;
margin-top: 25px;
}
.propertyPage-theme .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
.propertyPage-theme .hero .microcopy {
font-size: 11px;
}
.propertyPage-theme .heroPills span {
font-size: 9px;
}
.propertyPage-theme .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
.propertyPage-theme .sectionHead p {
font-size: 16px;
}
.propertyPage-theme .copy h2 {
font-size: 34px;
}
.propertyPage-theme .copy p {
font-size: 15px;
}
.propertyPage-theme .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.propertyPage-theme .logoBox {
min-height: 53px;
}
.propertyPage-theme .logoBox:last-child {
grid-column: 1/-1;
}
.propertyPage-theme .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.propertyPage-theme .aiStep {
min-height: 166px;
padding: 17px 13px;
}
.propertyPage-theme .aiStep strong {
font-size: 13px;
}
.propertyPage-theme .aiStep span {
font-size: 11px;
}
.propertyPage-theme .aiStep::after {
display: none;
}
.propertyPage-theme .outcomeGrid,
.propertyPage-theme .challengeGrid,
.propertyPage-theme .benefitGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .outcome {
padding: 24px;
}
.propertyPage-theme .outcome strong {
font-size: 22px;
}
.propertyPage-theme .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.propertyPage-theme .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
.propertyPage-theme .awardItem:last-child {
grid-column: 1/-1;
}
.propertyPage-theme .featureList,
.propertyPage-theme .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .featureItem {
font-size: 13px;
}
.propertyPage-theme .inlineCta {
padding: 22px;
gap: 19px;
}
.propertyPage-theme .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
.propertyPage-theme .panelHead {
padding: 15px 13px;
}
.propertyPage-theme .panelHead>strong {
font-size: 12px;
}
.propertyPage-theme .panelBody {
padding: 14px;
}
.propertyPage-theme .productPanel {
border-radius: 16px;
}
.propertyPage-theme .productPanel figcaption {
padding: 0 14px 13px;
}
.propertyPage-theme .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
.propertyPage-theme .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
.propertyPage-theme .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
.propertyPage-theme .deal {
margin-top: 0;
padding: 10px;
}
.propertyPage-theme .deal strong {
font-size: 10px;
}
.propertyPage-theme .deal small {
font-size: 9px;
}
.propertyPage-theme .pipelineColumn.green .deal {
grid-column: 1/-1;
}
.propertyPage-theme .mobileWorkspace {
gap: 12px;
}
.propertyPage-theme .phoneDevice {
border-radius: 24px;
padding: 6px;
}
.propertyPage-theme .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
.propertyPage-theme .sideTile {
padding: 10px;
}
.propertyPage-theme .sideTile strong {
font-size: 10px;
}
.propertyPage-theme .sideTile p {
font-size: 9px;
}
.propertyPage-theme .mobileHeader strong {
font-size: 15px;
}
.propertyPage-theme .mobileAccount strong {
font-size: 10px;
}
.propertyPage-theme .mobileAccount small {
font-size: 7px;
}
.propertyPage-theme .phoneDevice .rowIcon {
display: none;
}
.propertyPage-theme .quoteTable th,
.propertyPage-theme .quoteTable td {
padding: 12px 4px;
}
.propertyPage-theme .quoteTable strong {
font-size: 10px;
}
.propertyPage-theme .quoteTable small {
font-size: 8px;
}
.propertyPage-theme .quoteTable tfoot th {
font-size: 9px;
}
.propertyPage-theme .docHeader strong {
font-size: 17px;
}
.propertyPage-theme .miniFlow {
gap: 5px;
font-size: 9px;
}
.propertyPage-theme .miniFlow span {
padding: 6px;
}
.propertyPage-theme .rowCopy strong {
font-size: 10px;
}
.propertyPage-theme .rowCopy small {
font-size: 8px;
}
.propertyPage-theme .statusPill {
font-size: 7px;
padding: 5px;
}
.propertyPage-theme .miniStats {
gap: 7px;
}
.propertyPage-theme .miniStats>div {
padding: 9px;
}
.propertyPage-theme .miniStats strong {
font-size: 18px;
}
.propertyPage-theme .miniStats span {
font-size: 8px;
}
.propertyPage-theme .collectionStats>div {
padding: 13px;
}
.propertyPage-theme .collectionStats strong {
font-size: 24px;
}
.propertyPage-theme .customerHeader strong {
font-size: 17px;
}
.propertyPage-theme .customerFacts>div {
padding: 10px;
}
.propertyPage-theme .customerFacts strong {
font-size: 12px;
}
.propertyPage-theme .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.propertyPage-theme .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
.propertyPage-theme .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.propertyPage-theme .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
.propertyPage-theme .integration small {
font-size: 9px;
}
.propertyPage-theme .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
.propertyPage-theme .ctaPanel p {
font-size: 15px;
}
.propertyPage-theme .finalActions {
display: grid;
grid-template-columns: 1fr;
}
.propertyPage-theme .footerInner {
align-items: flex-start;
flex-direction: column;
}
.propertyPage-theme .contextSection {
padding: 0 0 24px;
}
.propertyPage-theme .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
.propertyPage-theme .wrap {
width: calc(100% - 24px);
}
.propertyPage-theme .brand {
font-size: 18px;
}
.propertyPage-theme .brandMark {
width: 25px;
height: 25px;
}
.propertyPage-theme .nav>.button {
font-size: 10px;
padding: 0 10px;
}
.propertyPage-theme .hero h1 {
font-size: 38px;
}
.propertyPage-theme .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.propertyPage-theme .copy h2 {
font-size: 31px;
}
.propertyPage-theme .mobileWorkspace {
grid-template-columns: 1fr;
}
.propertyPage-theme .phoneDevice {
width: 210px;
}
.propertyPage-theme .phoneDevice .rowIcon {
display: grid;
}
.propertyPage-theme .mobileSide {
gap: 8px;
}
.propertyPage-theme .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
.propertyPage-theme .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.propertyPage-theme .sideTile p {
margin: 0;
}
.propertyPage-theme .miniFlow span {
padding: 5px;
font-size: 8px;
}
.propertyPage-theme .collectionStats strong {
font-size: 21px;
}
.propertyPage-theme .inventoryIntro strong {
font-size: 14px;
}
.propertyPage-theme .dataRow {
gap: 7px;
}
.propertyPage-theme .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.propertyPage-theme .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
.propertyPage-theme {
scroll-behavior: auto;
}
.propertyPage-theme *,
.propertyPage-theme *::before,
.propertyPage-theme *::after {
transition: none !important;
animation: none !important;
}
}
.propertyPage-theme {
background: var(--sky-2);
}
.propertyPage-theme .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
.propertyPage-theme .hero .eyebrow {
max-width: 100%;
}
.propertyPage-theme .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
.propertyPage-theme .ganttIllustration,
.propertyPage-theme .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.propertyPage-theme .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
.propertyPage-theme .costIllustration {
aspect-ratio: 484/226;
}
.propertyPage-theme .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.propertyPage-theme .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
.propertyPage-theme .comparisonTable thead {
background: var(--black);
color: #fff;
}
.propertyPage-theme .comparisonTable thead th:last-child {
color: var(--yellow);
}
.propertyPage-theme .comparisonTable th,
.propertyPage-theme .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .comparisonTable th:first-child {
width: 23%;
}
.propertyPage-theme .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
.propertyPage-theme .comparisonTable tbody td {
color: var(--muted);
}
.propertyPage-theme .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
.propertyPage-theme .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
.propertyPage-theme .card,
.propertyPage-theme .proofCard,
.propertyPage-theme .productPanel,
.propertyPage-theme .outcome,
.propertyPage-theme .benefit {
box-shadow: none;
}
.propertyPage-theme .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
.propertyPage-theme .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
.propertyPage-theme .hero .eyebrow {
font-size: 10px;
}
.propertyPage-theme .comparisonTable {
font-size: 11px;
}
.propertyPage-theme .comparisonTable th,
.propertyPage-theme .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
.propertyPage-theme .comparisonTable th:first-child {
width: 24%;
}
.propertyPage-theme .aiCallout {
font-size: 11px;
line-height: 1.6;
}
.propertyPage-theme .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
.propertyPage-theme .hero h1 {
font-size: 38px;
}
}
.propertyPage-theme .scheduleIllustration,
.propertyPage-theme .analyticsIllustration,
.propertyPage-theme .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.propertyPage-theme .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
.propertyPage-theme .analyticsIllustration {
aspect-ratio: 484 / 202;
}
.propertyPage-theme .conditionIllustration {
aspect-ratio: 484 / 178;
}
.propertyPage-theme .miniStats strong {
font-variant-numeric: tabular-nums;
}
.propertyPage-theme .quoteTable td:last-child {
white-space: nowrap;
}
.propertyPage-theme .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
.propertyPage-theme .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
.propertyPage-theme .darkSection .textCta {
color: var(--yellow);
}
.propertyPage-theme .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.propertyPage-theme .secondaryLinks .textCta {
font-size: 12px;
}
.propertyPage-theme .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.propertyPage-theme .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
.propertyPage-theme .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.propertyPage-theme .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
.propertyPage-theme .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
.propertyPage-theme .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
.propertyPage-theme .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
.propertyPage-theme .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
.propertyPage-theme .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
.propertyPage-theme .returnFlag .icon {
flex: 0 0 24px;
}
.propertyPage-theme .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.propertyPage-theme .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
.propertyPage-theme .phoneDevice {
max-width: 100%;
}
.propertyPage-theme .heroPills {
line-height: 1.55;
}
.propertyPage-theme .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
.propertyPage-theme .plantFacts {
gap: 7px;
}
.propertyPage-theme .plantFacts>div {
padding: 9px;
}
.propertyPage-theme .plantFacts strong {
font-size: 11px;
}
.propertyPage-theme .scanSummary {
padding: 12px;
}
.propertyPage-theme .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
.propertyPage-theme .mobileWorkspace {
grid-template-columns: 1fr;
}
.propertyPage-theme .phoneDevice {
width: 224px;
margin: auto;
}
.propertyPage-theme .phoneDevice .rowIcon {
display: grid;
}
.propertyPage-theme .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.propertyPage-theme .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
.propertyPage-theme .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
.propertyPage-theme .sideTile strong {
font-size: 12px;
}
.propertyPage-theme .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
.propertyPage-theme .topbar,
.propertyPage-theme .heroActions,
.propertyPage-theme .finalActions,
.propertyPage-theme .contextSection,
.propertyPage-theme .valueCtaSection {
display: none;
}
.propertyPage-theme section {
break-inside: avoid;
padding: 28px 0;
}
.propertyPage-theme .hero {
padding-top: 20px;
}
}
.propertyPage-theme {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
.propertyPage-theme h1,
.propertyPage-theme h2,
.propertyPage-theme h3 {
font-family: inherit;
font-weight: 750;
text-transform: none;
padding: 0;
}
.propertyPage-theme p {
margin: 0;
}
.propertyPage-theme main {
display: block;
}
.propertyPage-theme .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.propertyPage-theme .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
.propertyPage-theme .heroAccent {
color: var(--black);
}
.propertyPage-theme .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
.propertyPage-theme .heroActions {
gap: 10px;
margin-top: 24px;
}
.propertyPage-theme .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.propertyPage-theme .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
.propertyPage-theme .microcopy {
margin-top: 14px;
}
.propertyPage-theme .heroPills {
margin-top: 13px;
}
.propertyPage-theme .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
.propertyPage-theme .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
.propertyPage-theme .heroVisual {
max-width: 548px;
margin-inline: auto;
}
.propertyPage-theme .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
.propertyPage-theme .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
.propertyPage-theme .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
.propertyPage-theme .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.propertyPage-theme .clientBand {
padding: 24px 0;
}
.propertyPage-theme .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
.propertyPage-theme .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
.propertyPage-theme .logoBox.wide {
font-size: 15px;
}
.propertyPage-theme .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
.propertyPage-theme .sectionHead p {
margin: 17px 0 0;
}
.propertyPage-theme .copy p {
margin: 16px 0 0;
}
.propertyPage-theme .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
.propertyPage-theme .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
.propertyPage-theme .aiJourney {
background: var(--black);
}
.propertyPage-theme .aiStep {
min-height: 157px;
border-color: #353535;
}
.propertyPage-theme .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
.propertyPage-theme .productPanel {
border-radius: 18px;
}
.propertyPage-theme .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
.propertyPage-theme .panelHead>strong {
font-size: 13px;
}
.propertyPage-theme .sampleTag {
font-size: 9px;
}
.propertyPage-theme .panelBody {
padding: 21px;
}
.propertyPage-theme .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
.propertyPage-theme .docHeader {
padding-bottom: 16px;
}
.propertyPage-theme .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
.propertyPage-theme .docHeader small {
font-size: 11px;
line-height: 1.6;
}
.propertyPage-theme .smallLabel {
font-size: 9px;
}
.propertyPage-theme .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
.propertyPage-theme .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
.propertyPage-theme .dataRow {
padding: 14px 0;
}
.propertyPage-theme .statusPill {
font-size: 8px;
}
.propertyPage-theme .miniStats {
gap: 10px;
margin: 18px 0;
}
.propertyPage-theme .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
.propertyPage-theme .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
.propertyPage-theme .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
.propertyPage-theme .contextNote {
font-size: 11px;
margin-top: 16px;
}
.propertyPage-theme .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
.propertyPage-theme .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
.propertyPage-theme .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
.propertyPage-theme .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
.propertyPage-theme .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
.propertyPage-theme .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
.propertyPage-theme .hierarchy strong {
color: var(--navy);
}
.propertyPage-theme .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
.propertyPage-theme .conditionIllustration {
aspect-ratio: 484/201;
}
.propertyPage-theme .analyticsIllustration {
aspect-ratio: 484/206;
}
.propertyPage-theme .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
.propertyPage-theme .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
.propertyPage-theme .phoneDevice .rowCopy strong {
font-size: 10px;
}
.propertyPage-theme .phoneDevice .rowCopy small {
font-size: 9px;
}
.propertyPage-theme .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
.propertyPage-theme .mobileAccount small {
font-size: 9px;
}
.propertyPage-theme .sideTile {
background: var(--sky-2);
padding: 14px;
}
.propertyPage-theme .sideTile strong {
font-size: 12px;
}
.propertyPage-theme .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
.propertyPage-theme .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
.propertyPage-theme .mobileAction {
font-size: 9px;
}
.propertyPage-theme .journeyRow strong {
font-size: 13px;
}
.propertyPage-theme .journeyRow small {
font-size: 11px;
}
.propertyPage-theme .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
.propertyPage-theme .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
.propertyPage-theme .avRecord p {
color: var(--muted);
font-size: 11px;
}
.propertyPage-theme .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
.propertyPage-theme .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
.propertyPage-theme .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
.propertyPage-theme .utilityReadout small {
font-size: 12px;
}
.propertyPage-theme .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
.propertyPage-theme .darkSection {
background: var(--black);
}
.propertyPage-theme .darkSection .panelHead {
background: var(--black-soft);
}
.propertyPage-theme .darkSection .productPanel {
background: var(--black-soft);
}
.propertyPage-theme .darkSection .copy .featureNote {
color: #CFCFCF;
}
.propertyPage-theme .darkSection .rowCopy strong {
color: #FFFFFF;
}
.propertyPage-theme .darkSection .rowCopy small {
color: #CFCFCF;
}
.propertyPage-theme .promptItem {
padding: 17px 14px;
font-size: 13px;
}
.propertyPage-theme .assistantHead small {
font-size: 11px;
}
.propertyPage-theme .assistantNote {
font-size: 11px;
}
.propertyPage-theme .reportTags span {
font-size: 10px;
}
.propertyPage-theme .card p {
margin: 12px 0 0;
}
.propertyPage-theme .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.propertyPage-theme .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
.propertyPage-theme .cards>.card {
display: flex;
flex-direction: column;
}
.propertyPage-theme .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
.propertyPage-theme .cards>.card p {
padding-bottom: 22px;
}
.propertyPage-theme .benefitBand {
background: var(--black);
}
.propertyPage-theme .benefit {
background: var(--black-soft);
}
.propertyPage-theme .inlineCta h3 {
font-size: 20px;
}
.propertyPage-theme .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
.propertyPage-theme .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
.propertyPage-theme .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
.propertyPage-theme .valueCtaSection {
padding: 32px 0;
}
.propertyPage-theme .proofCard p {
margin-top: 15px;
}
.propertyPage-theme .proofCard h3 {
font-size: 23px;
}
.propertyPage-theme .integrationNote {
margin-top: 23px;
}
.propertyPage-theme .ctaPanel {
background: var(--black);
}
.propertyPage-theme .ctaPanel p {
margin-top: 16px;
}
.propertyPage-theme .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
.propertyPage-theme .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.propertyPage-theme a:hover {
text-decoration: none;
}
.propertyPage-theme .textCta:hover {
color: var(--navy);
}
.propertyPage-theme .darkSection .textCta:hover {
color: #FFFFFF;
}
.propertyPage-theme .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
.propertyPage-theme .hero h1 {
font-size: 49px;
}
.propertyPage-theme .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
.propertyPage-theme .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
.propertyPage-theme .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.propertyPage-theme .hero h1 {
font-size: 58px;
}
.propertyPage-theme .heroVisual {
max-width: 548px;
}
.propertyPage-theme .hero .lead {
max-width: 700px;
}
.propertyPage-theme .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.propertyPage-theme .logoBox {
font-size: 18px;
border: 0 !important;
}
.propertyPage-theme .logoBox:last-child {
grid-column: auto;
}
.propertyPage-theme .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
.propertyPage-theme .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
.propertyPage-theme .inlineCtaActions .button {
flex: 1;
}
.propertyPage-theme .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
.propertyPage-theme .hero {
padding: 28px 0 40px;
}
.propertyPage-theme .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
.propertyPage-theme .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
.propertyPage-theme .heroActions {
gap: 10px;
}
.propertyPage-theme .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
.propertyPage-theme .breadcrumb {
margin-bottom: 21px;
}
.propertyPage-theme .hero .eyebrow {
font-size: 11px;
}
.propertyPage-theme .heroVisual {
max-width: 480px;
}
.propertyPage-theme .heroPills {
row-gap: 9px;
}
.propertyPage-theme .heroPills span {
padding-right: 7px;
font-size: 9px;
}
.propertyPage-theme .heroPills span+span {
padding-left: 7px;
}
.propertyPage-theme .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.propertyPage-theme .logoBox:last-child {
grid-column: 1/-1;
}
.propertyPage-theme .clientBand {
padding: 25px 0;
}
.propertyPage-theme .copy h2 {
font-size: 33px;
}
.propertyPage-theme .panelBody {
padding: 16px;
}
.propertyPage-theme .panelHead {
padding: 15px;
}
.propertyPage-theme .panelHead>strong {
font-size: 12px;
}
.propertyPage-theme .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
.propertyPage-theme .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
.propertyPage-theme .docHeader strong {
font-size: 18px;
}
.propertyPage-theme .docHeader small {
font-size: 10px;
}
.propertyPage-theme .rowCopy strong {
font-size: 11px;
}
.propertyPage-theme .rowCopy small {
font-size: 10px;
}
.propertyPage-theme .miniStats {
gap: 7px;
}
.propertyPage-theme .miniStats strong {
font-size: 21px;
}
.propertyPage-theme .miniStats span {
font-size: 9px;
}
.propertyPage-theme .miniStats>div {
padding: 10px 8px;
}
.propertyPage-theme .plantFacts {
gap: 8px;
}
.propertyPage-theme .plantFacts>div {
padding: 10px;
}
.propertyPage-theme .plantFacts strong {
font-size: 11px;
}
.propertyPage-theme .contextNote {
font-size: 10px;
gap: 8px;
}
.propertyPage-theme .utilityReadout {
padding: 12px;
gap: 10px;
}
.propertyPage-theme .utilityReadout span {
font-size: 8px;
}
.propertyPage-theme .utilityReadout strong {
font-size: 24px;
}
.propertyPage-theme .utilityReadout .utilityScope {
font-size: 14px;
}
.propertyPage-theme .promptItem {
font-size: 12px;
padding: 15px 12px;
}
.propertyPage-theme .comparisonTable {
font-size: 11px;
}
.propertyPage-theme .comparisonTable th,
.propertyPage-theme .comparisonTable td {
padding: 13px 9px;
}
.propertyPage-theme .contextSection {
padding: 0 0 22px;
}
.propertyPage-theme .valueCtaSection {
padding: 25px 0;
}
.propertyPage-theme .inlineCtaActions {
flex-direction: column;
}
.propertyPage-theme .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
.propertyPage-theme .mobileWorkspace {
grid-template-columns: 1fr;
}
.propertyPage-theme .phoneDevice {
width: 222px;
}
.propertyPage-theme .phoneDevice .rowIcon {
display: grid;
}
.propertyPage-theme .mobileSide {
grid-template-columns: 1fr;
}
.propertyPage-theme .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
.propertyPage-theme .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
.propertyPage-theme .sideTile p {
margin: 0;
}
.propertyPage-theme .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
.propertyPage-theme .dataRow {
gap: 8px;
}
.propertyPage-theme .statusPill {
font-size: 7px;
padding: 5px;
}
.propertyPage-theme .miniStats strong {
font-size: 19px;
}
.propertyPage-theme .heroActions {
flex-direction: column;
align-items: stretch;
}
.propertyPage-theme .heroActions .button {
width: 100%;
}
.propertyPage-theme .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
.propertyPage-theme .aiFlow {
grid-template-columns: 1fr;
}
.propertyPage-theme .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
.propertyPage-theme .aiStepNum {
grid-row: 1/3;
margin: 0;
}
.propertyPage-theme .aiStep strong {
margin: 0;
font-size: 15px;
}
.propertyPage-theme .aiStep span {
font-size: 13px;
}
.propertyPage-theme .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
.propertyPage-theme {
background: var(--white);
}
.propertyPage-theme img {
display: block;
max-width: 100%;
}
.propertyPage-theme h1,
.propertyPage-theme h2,
.propertyPage-theme h3 {
text-wrap: balance;
}
.propertyPage-theme .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
.propertyPage-theme .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.propertyPage-theme .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.propertyPage-theme .navlinks {
gap: 20px;
font-size: 12px;
}
.propertyPage-theme .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
.propertyPage-theme .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
.propertyPage-theme .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
.propertyPage-theme .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
.propertyPage-theme .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
.propertyPage-theme .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
.propertyPage-theme .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
.propertyPage-theme .industryIntro {
padding: 78px 0 66px;
}
.propertyPage-theme .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
.propertyPage-theme .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
.propertyPage-theme .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.propertyPage-theme .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.propertyPage-theme .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
.propertyPage-theme .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
.propertyPage-theme .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
.propertyPage-theme .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
.propertyPage-theme .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
.propertyPage-theme .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
.propertyPage-theme .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
.propertyPage-theme .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
.propertyPage-theme .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.propertyPage-theme .industryPriority:hover {
border-color: var(--brand-dark);
}
.propertyPage-theme .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
.propertyPage-theme .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
.propertyPage-theme .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
.propertyPage-theme .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
.propertyPage-theme .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
.propertyPage-theme .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
.propertyPage-theme .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
.propertyPage-theme .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.propertyPage-theme .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
.propertyPage-theme .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
.propertyPage-theme .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
.propertyPage-theme .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
.propertyPage-theme .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
.propertyPage-theme .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
.propertyPage-theme .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
.propertyPage-theme .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
.propertyPage-theme .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
.propertyPage-theme .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
.propertyPage-theme .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
.propertyPage-theme .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
.propertyPage-theme .vedaMessage.assistant>small {
color: var(--yellow);
}
.propertyPage-theme .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.propertyPage-theme .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.propertyPage-theme .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
.propertyPage-theme .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
.propertyPage-theme .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
.propertyPage-theme .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
.propertyPage-theme .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
.propertyPage-theme .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
.propertyPage-theme .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
.propertyPage-theme .manufacturingSpotlight {
padding: 73px 0;
}
.propertyPage-theme .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .rfidSpotlight {
background: #fff;
}
.propertyPage-theme .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
.propertyPage-theme .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
.propertyPage-theme .spotlightHead .eyebrow {
margin-bottom: 17px;
}
.propertyPage-theme .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
.propertyPage-theme .spotlightHead h2 span {
color: var(--brand-dark);
}
.propertyPage-theme .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
.propertyPage-theme .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
.propertyPage-theme .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
.propertyPage-theme .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.propertyPage-theme .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.propertyPage-theme .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
.propertyPage-theme .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.propertyPage-theme .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
.propertyPage-theme .featureTab:hover {
border-color: var(--brand-dark);
}
.propertyPage-theme .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
.propertyPage-theme .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
.propertyPage-theme .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
.propertyPage-theme .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
.propertyPage-theme .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
.propertyPage-theme .featurePanel {
display: none;
}
.propertyPage-theme .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
.propertyPage-theme .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
.propertyPage-theme .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
.propertyPage-theme .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
.propertyPage-theme .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
.propertyPage-theme .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.propertyPage-theme .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
.propertyPage-theme .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
.propertyPage-theme .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.propertyPage-theme .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
.propertyPage-theme .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
.propertyPage-theme .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
.propertyPage-theme .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
.propertyPage-theme .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
.propertyPage-theme .decisionSpotlight .textCta {
color: var(--yellow);
}
.propertyPage-theme .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
.propertyPage-theme .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.propertyPage-theme .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
.propertyPage-theme .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
.propertyPage-theme .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
.propertyPage-theme .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
.propertyPage-theme .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
.propertyPage-theme .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
.propertyPage-theme .rfidImageSurface {
background: #172029;
padding: 5px;
}
.propertyPage-theme .rfidImageSurface img {
width: 100%;
height: auto;
}
.propertyPage-theme .rfidMedia figcaption {
padding-top: 13px;
}
.propertyPage-theme .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
.propertyPage-theme .aiReviewBody {
padding: 18px;
}
.propertyPage-theme .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
.propertyPage-theme .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
.propertyPage-theme .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
.propertyPage-theme .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
.propertyPage-theme .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.propertyPage-theme .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.propertyPage-theme .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
.propertyPage-theme .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
.propertyPage-theme .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
.propertyPage-theme .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
.propertyPage-theme .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
.propertyPage-theme .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
.propertyPage-theme .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
.propertyPage-theme .aiReviewAction strong {
display: block;
font-size: 11px;
}
.propertyPage-theme .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
.propertyPage-theme .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
.propertyPage-theme .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
.propertyPage-theme .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.propertyPage-theme .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
.propertyPage-theme .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
.propertyPage-theme .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
.propertyPage-theme .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
.propertyPage-theme .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
.propertyPage-theme .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
.propertyPage-theme .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
.propertyPage-theme .workflowDetails summary::-webkit-details-marker {
display: none;
}
.propertyPage-theme .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
.propertyPage-theme .workflowDetails[open] summary::after {
content: "−";
}
.propertyPage-theme .workflowDetails .featureList,
.propertyPage-theme .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
.propertyPage-theme .workflowDetails .featureItem {
font-size: 11px;
}
.propertyPage-theme .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
.propertyPage-theme .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
.propertyPage-theme #furniture-connected-tools {
background: #fff;
}
.propertyPage-theme #furniture-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.propertyPage-theme .featureTab,
.propertyPage-theme .industryPriority,
.propertyPage-theme summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
.propertyPage-theme .industryIntroHead {
gap: 30px;
}
.propertyPage-theme .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
.propertyPage-theme .featureStage {
gap: 26px;
padding: 26px;
}
.propertyPage-theme .featureTab {
font-size: 11px;
padding: 14px 11px;
}
.propertyPage-theme .factoryWorkflow {
padding: 22px;
}
.propertyPage-theme .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
.propertyPage-theme .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.propertyPage-theme .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
.propertyPage-theme .industryPriorityGrid {
gap: 14px;
}
.propertyPage-theme .industryPriority {
padding: 22px 19px;
}
.propertyPage-theme .industryPriority h3 {
font-size: 21px;
}
.propertyPage-theme .industryPriority p {
font-size: 12px;
}
.propertyPage-theme .priorityLink {
font-size: 10px;
}
.propertyPage-theme .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
.propertyPage-theme .vedaIndustryCopy h2 {
font-size: 39px;
}
.propertyPage-theme .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.propertyPage-theme .vedaUseCases>div {
display: block;
}
.propertyPage-theme .vedaUseCases .icon {
margin: 0 0 10px;
}
.propertyPage-theme .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
.propertyPage-theme .featureTabs {
gap: 8px;
}
.propertyPage-theme .featureTab {
min-height: 108px;
}
.propertyPage-theme .featureStage,
.propertyPage-theme .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
.propertyPage-theme .rfidSpotlight .spotlightMedia,
.propertyPage-theme .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
.propertyPage-theme .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.propertyPage-theme .featurePanel {
min-height: 0;
}
.propertyPage-theme .spotlightActions {
gap: 18px;
margin-top: 23px;
}
.propertyPage-theme .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
.propertyPage-theme .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
.propertyPage-theme .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
.propertyPage-theme .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
.propertyPage-theme .clientBand {
padding: 22px 0;
}
.propertyPage-theme .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.propertyPage-theme .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
.propertyPage-theme .clientBand .logoBox.wide {
font-size: 10px;
}
.propertyPage-theme .clientBand .logoBox:last-child {
grid-column: auto;
}
.propertyPage-theme .industryIntro {
padding: 53px 0;
}
.propertyPage-theme .industryIntroHead h2 {
font-size: 32px;
}
.propertyPage-theme .industryIntroHead>p {
font-size: 14px;
}
.propertyPage-theme .industryPriorityGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .industryPriority {
padding: 23px;
}
.propertyPage-theme .industryPriority h3 {
font-size: 24px;
}
.propertyPage-theme .industryPriority>.icon {
margin: 5px 0 15px;
}
.propertyPage-theme .industryPriority p {
font-size: 13px;
}
.propertyPage-theme .priorityLink {
font-size: 11px;
}
.propertyPage-theme .vedaIndustry {
padding: 0 0 52px;
}
.propertyPage-theme .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
.propertyPage-theme .vedaIndustryCopy h2 {
font-size: 32px;
}
.propertyPage-theme .vedaIndustryCopy>p {
font-size: 14px;
}
.propertyPage-theme .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
.propertyPage-theme .vedaUseCases>div {
display: flex;
}
.propertyPage-theme .vedaConversationHead {
padding: 16px 13px;
}
.propertyPage-theme .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
.propertyPage-theme .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
.propertyPage-theme .vedaMessage.user {
margin-left: 25px;
}
.propertyPage-theme .vedaMessage.assistant {
margin-right: 14px;
}
.propertyPage-theme .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
.propertyPage-theme .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
.propertyPage-theme .manufacturingSpotlight {
padding: 54px 0;
}
.propertyPage-theme .spotlightHead h2 {
font-size: 32px;
}
.propertyPage-theme .spotlightHead>p {
font-size: 14px;
}
.propertyPage-theme .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.propertyPage-theme .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
.propertyPage-theme .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.propertyPage-theme .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
.propertyPage-theme .featurePanel h3 {
font-size: 24px;
}
.propertyPage-theme .featurePanel>p {
font-size: 13px;
}
.propertyPage-theme .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
.propertyPage-theme .spotlightChecks>li {
font-size: 12px;
}
.propertyPage-theme .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
.propertyPage-theme .spotlightActions .button {
width: 100%;
}
.propertyPage-theme .spotlightScope {
font-size: 10px;
}
.propertyPage-theme .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
.propertyPage-theme .mediaTitle strong {
font-size: 11px;
}
.propertyPage-theme .mediaTitle div>span {
font-size: 8px;
}
.propertyPage-theme .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.propertyPage-theme .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
.propertyPage-theme .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
.propertyPage-theme .rfidMedia figcaption {
padding-top: 12px;
}
.propertyPage-theme .aiReviewBody {
padding: 13px;
}
.propertyPage-theme .aiIssue {
padding: 13px;
}
.propertyPage-theme .aiIssue strong {
font-size: 14px;
}
.propertyPage-theme .aiEvidence {
gap: 6px;
}
.propertyPage-theme .aiEvidence>div {
padding: 10px 7px;
}
.propertyPage-theme .aiEvidence strong {
font-size: 9px;
}
.propertyPage-theme .aiEvidence span {
font-size: 7px;
}
.propertyPage-theme .exampleLabel {
font-size: 6px;
}
.propertyPage-theme .factoryWorkflows {
padding: 55px 0;
}
.propertyPage-theme .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.propertyPage-theme .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
.propertyPage-theme .industryRibbonGrid {
gap: 12px;
}
.propertyPage-theme .industryRibbonGrid>div {
font-size: 10px;
}
.propertyPage-theme .spotlightHead h2 {
font-size: 29px;
}
.propertyPage-theme .featureStage {
padding: 19px 13px;
}
.propertyPage-theme .mediaTitle>.icon {
display: none;
}
.propertyPage-theme .exampleLabel {
display: none;
}
.propertyPage-theme .vedaBrand {
font-size: 27px;
}
}
@media print {
.propertyPage-theme .featureTabs {
display: none;
}
.propertyPage-theme .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
.propertyPage-theme .featureStage {
display: block;
}
.propertyPage-theme .featurePanel {
color: #000;
}
}
.propertyPage-theme #furniture-delivery-features-1:checked~.featureTabs label[for="furniture-delivery-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-delivery-features-1:focus-visible~.featureTabs label[for="furniture-delivery-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-delivery-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-2:checked~.featureTabs label[for="furniture-delivery-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-delivery-features-2:focus-visible~.featureTabs label[for="furniture-delivery-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-delivery-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-3:checked~.featureTabs label[for="furniture-delivery-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-delivery-features-3:focus-visible~.featureTabs label[for="furniture-delivery-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-delivery-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-4:checked~.featureTabs label[for="furniture-delivery-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-delivery-features-4:focus-visible~.featureTabs label[for="furniture-delivery-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-delivery-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-5:checked~.featureTabs label[for="furniture-delivery-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-delivery-features-5:focus-visible~.featureTabs label[for="furniture-delivery-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-delivery-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-1:checked~.featureTabs label[for="furniture-rfid-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-rfid-features-1:focus-visible~.featureTabs label[for="furniture-rfid-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-rfid-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-2:checked~.featureTabs label[for="furniture-rfid-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-rfid-features-2:focus-visible~.featureTabs label[for="furniture-rfid-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-rfid-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-3:checked~.featureTabs label[for="furniture-rfid-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-rfid-features-3:focus-visible~.featureTabs label[for="furniture-rfid-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-rfid-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-4:checked~.featureTabs label[for="furniture-rfid-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-rfid-features-4:focus-visible~.featureTabs label[for="furniture-rfid-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-rfid-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-5:checked~.featureTabs label[for="furniture-rfid-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-rfid-features-5:focus-visible~.featureTabs label[for="furniture-rfid-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-rfid-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-1:checked~.featureTabs label[for="furniture-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-ai-decisions-features-1:focus-visible~.featureTabs label[for="furniture-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-2:checked~.featureTabs label[for="furniture-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-ai-decisions-features-2:focus-visible~.featureTabs label[for="furniture-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-3:checked~.featureTabs label[for="furniture-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-ai-decisions-features-3:focus-visible~.featureTabs label[for="furniture-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-4:checked~.featureTabs label[for="furniture-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-ai-decisions-features-4:focus-visible~.featureTabs label[for="furniture-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-5:checked~.featureTabs label[for="furniture-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.propertyPage-theme #furniture-ai-decisions-features-5:focus-visible~.featureTabs label[for="furniture-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
.propertyPage-theme #furniture-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
.propertyPage-theme .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .featureMediaPanels {
min-width: 0;
}
.propertyPage-theme .featureMediaPanels .miniChart {
height: 178px;
}
.propertyPage-theme .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
.propertyPage-theme .featureMediaPanels .windowTop strong,
.propertyPage-theme .featureMediaPanels .windowTop small {
display: block;
}
.propertyPage-theme .featureMediaPanels .windowTop small {
margin-top: 3px;
}
.propertyPage-theme .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.propertyPage-theme .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
.propertyPage-theme .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
.propertyPage-theme .featureMediaPanels .windowBody>*,
.propertyPage-theme .featureMediaPanels .spectrumGrid>*,
.propertyPage-theme .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
.propertyPage-theme .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
.propertyPage-theme .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
.propertyPage-theme .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
.propertyPage-theme .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
.propertyPage-theme .featureMediaPanels .graphNodes {
min-height: 258px;
}
.propertyPage-theme .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
.propertyPage-theme .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
.propertyPage-theme .featureMediaPanels .mapPin {
box-shadow: none;
}
.propertyPage-theme .pin2 {
top: 88px;
right: 88px;
}
.propertyPage-theme .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
.propertyPage-theme .featureMediaPanels .mediaShell {
padding: 10px;
}
.propertyPage-theme .featureMediaPanels .windowBody {
padding: 10px;
}
.propertyPage-theme .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .featureMediaPanels .alertBadge {
justify-self: start;
}
.propertyPage-theme .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
.propertyPage-theme .featureMediaPanels .graphNodes .node.n1,
.propertyPage-theme .featureMediaPanels .graphNodes .node.n2,
.propertyPage-theme .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
.propertyPage-theme .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
.propertyPage-theme .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
.propertyPage-theme .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
.propertyPage-theme .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
.propertyPage-theme .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
.propertyPage-theme .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
.propertyPage-theme .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
.propertyPage-theme .freshGraphic * {
box-sizing: border-box;
}
.propertyPage-theme .rfPanel,
.propertyPage-theme .aiInsightCard,
.propertyPage-theme .forecastVisualCard,
.propertyPage-theme .forecastSuggestion,
.propertyPage-theme .knowledgeTile,
.propertyPage-theme .chatConversation,
.propertyPage-theme .trainingSummary,
.propertyPage-theme .moduleCard,
.propertyPage-theme .qualityHeatCard,
.propertyPage-theme .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
.propertyPage-theme .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.propertyPage-theme .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.propertyPage-theme .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
.propertyPage-theme .statusPill,
.propertyPage-theme .cardTag,
.propertyPage-theme .forecastSuggestion b,
.propertyPage-theme .moduleCard b,
.propertyPage-theme .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
.propertyPage-theme .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.propertyPage-theme .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.propertyPage-theme .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
.propertyPage-theme .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
.propertyPage-theme .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
.propertyPage-theme .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
.propertyPage-theme .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
.propertyPage-theme .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
.propertyPage-theme .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
.propertyPage-theme .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
.propertyPage-theme .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
.propertyPage-theme .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.propertyPage-theme .dot.good {
background: #298EEC;
}
.propertyPage-theme .dot.warn {
background: #F4A62A;
}
.propertyPage-theme .dot.bad {
background: #EB6B53;
}
.propertyPage-theme .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.propertyPage-theme .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.propertyPage-theme .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.propertyPage-theme .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
.propertyPage-theme .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
.propertyPage-theme .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
.propertyPage-theme .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
.propertyPage-theme .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.propertyPage-theme .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
.propertyPage-theme .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
.propertyPage-theme .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
.propertyPage-theme .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
.propertyPage-theme .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
.propertyPage-theme .moveRow span {
color: #0a1e42;
font-weight: 600;
}
.propertyPage-theme .moveRow b {
color: #298EEC;
font-size: 9px;
}
.propertyPage-theme .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
.propertyPage-theme .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
.propertyPage-theme .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
.propertyPage-theme .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
.propertyPage-theme .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
.propertyPage-theme .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
.propertyPage-theme .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.propertyPage-theme .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
.propertyPage-theme .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
.propertyPage-theme .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
.propertyPage-theme .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
.propertyPage-theme .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
.propertyPage-theme .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.propertyPage-theme .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
.propertyPage-theme .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
.propertyPage-theme .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
.propertyPage-theme .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.propertyPage-theme .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
.propertyPage-theme .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
.propertyPage-theme .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
.propertyPage-theme .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.propertyPage-theme .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
.propertyPage-theme .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
.propertyPage-theme .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
.propertyPage-theme .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.propertyPage-theme .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
.propertyPage-theme .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
.propertyPage-theme .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
.propertyPage-theme .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
.propertyPage-theme .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
.propertyPage-theme .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
.propertyPage-theme .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
.propertyPage-theme .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.propertyPage-theme .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
.propertyPage-theme .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
.propertyPage-theme .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
.propertyPage-theme .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.propertyPage-theme .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
.propertyPage-theme .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
.propertyPage-theme .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
.propertyPage-theme .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
.propertyPage-theme .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
.propertyPage-theme .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.propertyPage-theme .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
.propertyPage-theme .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
.propertyPage-theme .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
.propertyPage-theme .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.propertyPage-theme .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
.propertyPage-theme .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
.propertyPage-theme .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
.propertyPage-theme .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
.propertyPage-theme .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
.propertyPage-theme .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
.propertyPage-theme .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
.propertyPage-theme .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.propertyPage-theme .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
.propertyPage-theme .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
.propertyPage-theme .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
.propertyPage-theme .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
.propertyPage-theme .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.propertyPage-theme .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
.propertyPage-theme .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
.propertyPage-theme .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
.propertyPage-theme .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.propertyPage-theme .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
.propertyPage-theme .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
.propertyPage-theme .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
.propertyPage-theme .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
.propertyPage-theme .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
.propertyPage-theme .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
.propertyPage-theme .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
.propertyPage-theme .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
.propertyPage-theme .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
.propertyPage-theme .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
.propertyPage-theme .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.propertyPage-theme .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
.propertyPage-theme .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
.propertyPage-theme .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
.propertyPage-theme .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
.propertyPage-theme .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
.propertyPage-theme .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
.propertyPage-theme .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
.propertyPage-theme .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
.propertyPage-theme .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
.propertyPage-theme .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
.propertyPage-theme .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.propertyPage-theme .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
.propertyPage-theme .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.propertyPage-theme .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
.propertyPage-theme .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
.propertyPage-theme .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.propertyPage-theme .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.propertyPage-theme .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
.propertyPage-theme .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
.propertyPage-theme .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
.propertyPage-theme .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
.propertyPage-theme .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
.propertyPage-theme .chartLegend .sw.blue {
background: #298EEC;
}
.propertyPage-theme .chartLegend .sw.amber {
background: #F4A62A;
}
.propertyPage-theme .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.propertyPage-theme .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.propertyPage-theme .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
.propertyPage-theme .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.propertyPage-theme .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.propertyPage-theme .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
.propertyPage-theme .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
.propertyPage-theme .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.propertyPage-theme .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
.propertyPage-theme .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
.propertyPage-theme .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
.propertyPage-theme .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
.propertyPage-theme .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.propertyPage-theme .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.propertyPage-theme .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
.propertyPage-theme .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
.propertyPage-theme .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.propertyPage-theme .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.propertyPage-theme .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.propertyPage-theme .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
.propertyPage-theme .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
.propertyPage-theme .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.propertyPage-theme .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
.propertyPage-theme .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
.propertyPage-theme .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
.propertyPage-theme .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.propertyPage-theme .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
.propertyPage-theme .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.propertyPage-theme .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
.propertyPage-theme .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
.propertyPage-theme .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
.propertyPage-theme .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.propertyPage-theme .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
.propertyPage-theme .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
.propertyPage-theme .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
.propertyPage-theme .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
.propertyPage-theme .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
.propertyPage-theme .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
.propertyPage-theme .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
.propertyPage-theme .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.propertyPage-theme .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
.propertyPage-theme .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
.propertyPage-theme .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
.propertyPage-theme .freshGraphic {
height: auto;
min-height: 420px;
}
.propertyPage-theme .rfTrackLayout,
.propertyPage-theme .rfFlowLayout,
.propertyPage-theme .rfAlertGrid,
.propertyPage-theme .rfCycleLayout,
.propertyPage-theme .rfSitesLayout,
.propertyPage-theme .aiRootLayout,
.propertyPage-theme .aiForecastLayout,
.propertyPage-theme .aiChatLayout,
.propertyPage-theme .aiTrainingLayout,
.propertyPage-theme .aiQualityLayout,
.propertyPage-theme .trainingModuleGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
.propertyPage-theme .rfEventRail {
grid-template-columns: 1fr 1fr;
}
.propertyPage-theme .rfAlertGrid {
grid-template-columns: 1fr;
}
.propertyPage-theme .qualityHeatGrid span {
min-height: 40px;
}
.propertyPage-theme .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
.propertyPage-theme .aiLink {
display: none;
}
}
.propertyPage-theme .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
.propertyPage-theme .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.propertyPage-theme .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
.propertyPage-theme .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
.propertyPage-theme .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
.propertyPage-theme .mfgHeroBreadcrumb a {
color: inherit;
}
.propertyPage-theme .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
.propertyPage-theme .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.propertyPage-theme .mfgHero h1 {
color: #fff;
font-size: clamp(40px, 4.02vw, 58px);
font-weight: 700;
line-height: 1.075;
letter-spacing: -.04em;
text-wrap: initial;
margin: 0;
}
.propertyPage-theme .mfgHero h1>span {
display: block;
}
.propertyPage-theme .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
.propertyPage-theme .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
.propertyPage-theme .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
.propertyPage-theme .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
.propertyPage-theme .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
.propertyPage-theme .mfgHeroActions .outline:hover {
background: #172029;
}
.propertyPage-theme .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
.propertyPage-theme .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
.propertyPage-theme .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
.propertyPage-theme .mfgHeroContent {
min-height: 610px;
}
.propertyPage-theme .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
.propertyPage-theme .mfgHero h1 {
font-size: clamp(40px, 4.5vw, 51px);
}
.propertyPage-theme .mfgHeroLead {
font-size: 16px;
}
.propertyPage-theme .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
.propertyPage-theme .mfgHero {
display: flex;
flex-direction: column;
}
.propertyPage-theme .mfgHeroContent {
order: 0;
min-height: 0;
}
.propertyPage-theme .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
.propertyPage-theme .mfgHero h1 {
font-size: clamp(36px, 6.7vw, 53px);
max-width: 620px;
}
.propertyPage-theme .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
.propertyPage-theme .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
.propertyPage-theme .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
.propertyPage-theme .mfgHeroCopy {
padding: 25px 0 20px;
}
.propertyPage-theme .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
.propertyPage-theme .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
.propertyPage-theme .mfgHero h1 {
font-size: clamp(34px, 8.8vw, 48px);
line-height: 1.12;
}
.propertyPage-theme .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
.propertyPage-theme .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
.propertyPage-theme .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
.propertyPage-theme .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
.propertyPage-theme .mfgHeroScene {
height: 280px;
}
}
@media print {
.propertyPage-theme .mfgHero {
background: #fff;
color: #000;
}
.propertyPage-theme .mfgHeroScene,
.propertyPage-theme .mfgHeroActions {
display: none;
}
.propertyPage-theme .mfgHeroContent {
min-height: 0;
}
.propertyPage-theme .mfgHeroCopy {
width: 100%;
max-width: none;
}
.propertyPage-theme .mfgHero h1,
.propertyPage-theme .mfgHero h1 .mfgHeroAccent,
.propertyPage-theme .mfgHero p {
color: #000;
}
}
.propertyPage-theme #furniture-rfid .featureStage,
.propertyPage-theme #furniture-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
.propertyPage-theme .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
.propertyPage-theme .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
.propertyPage-theme .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.propertyPage-theme .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
.propertyPage-theme .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
.propertyPage-theme .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
.propertyPage-theme .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
.propertyPage-theme .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
.propertyPage-theme .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
.propertyPage-theme .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
.propertyPage-theme .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.propertyPage-theme .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
.propertyPage-theme .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
.propertyPage-theme .mfgGallery .rfPanel {
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.propertyPage-theme .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
.propertyPage-theme .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
.propertyPage-theme .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
.propertyPage-theme .mfgGallery .shelf span {
font-size: 11px;
}
.propertyPage-theme .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
.propertyPage-theme .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
.propertyPage-theme .mfgGallery .rfKpiGrid {
gap: 8px;
}
.propertyPage-theme .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
.propertyPage-theme .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
.propertyPage-theme .mfgGallery .rfKpiCard span {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
.propertyPage-theme .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
.propertyPage-theme .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
.propertyPage-theme .mfgGallery .rfScanCard span {
font-size: 9px;
}
.propertyPage-theme .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
.propertyPage-theme .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
.propertyPage-theme .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
.propertyPage-theme .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
.propertyPage-theme .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
.propertyPage-theme .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
.propertyPage-theme .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
.propertyPage-theme .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
.propertyPage-theme .mfgGallery .flowArrow {
display: none;
}
.propertyPage-theme .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .railItem {
padding: 9px 7px;
}
.propertyPage-theme .mfgGallery .railItem b {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
.propertyPage-theme .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
.propertyPage-theme .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
.propertyPage-theme .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
.propertyPage-theme .mfgGallery .alertHeroCard small {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.propertyPage-theme .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .reorderCard strong {
font-size: 13px;
}
.propertyPage-theme .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
.propertyPage-theme .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
.propertyPage-theme .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
.propertyPage-theme .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
.propertyPage-theme .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
.propertyPage-theme .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
.propertyPage-theme .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
.propertyPage-theme .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
.propertyPage-theme .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
.propertyPage-theme .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
.propertyPage-theme .mfgGallery .varianceCard {
padding: 12px;
}
.propertyPage-theme .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
.propertyPage-theme .mfgGallery .varianceCard small {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
.propertyPage-theme .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
.propertyPage-theme .mfgGallery .deviceTop {
font-size: 11px;
}
.propertyPage-theme .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
.propertyPage-theme .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
.propertyPage-theme .mfgGallery .deviceMetric {
padding: 9px;
}
.propertyPage-theme .mfgGallery .deviceMetric span {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .deviceMetric b {
font-size: 12px;
}
.propertyPage-theme .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
.propertyPage-theme .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
.propertyPage-theme .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
.propertyPage-theme .mfgGallery .siteNode.north {
top: 6px;
}
.propertyPage-theme .mfgGallery .siteNode.south {
bottom: 6px;
}
.propertyPage-theme .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
.propertyPage-theme .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
.propertyPage-theme .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
.propertyPage-theme .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
.propertyPage-theme .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.propertyPage-theme .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
.propertyPage-theme .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
.propertyPage-theme .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.propertyPage-theme .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
.propertyPage-theme .mfgGallery .siteSummary strong {
font-size: 12px;
}
.propertyPage-theme .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
.propertyPage-theme .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
.propertyPage-theme .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
.propertyPage-theme .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
.propertyPage-theme .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
.propertyPage-theme .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
.propertyPage-theme .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
.propertyPage-theme .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.propertyPage-theme .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
.propertyPage-theme .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
.propertyPage-theme .mfgGallery .insightMeta {
gap: 6px;
}
.propertyPage-theme .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
.propertyPage-theme .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .chartHeader span {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .chartHeader b {
font-size: 11px;
}
.propertyPage-theme .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
.propertyPage-theme .mfgGallery .chartLegend {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.propertyPage-theme .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.propertyPage-theme .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
.propertyPage-theme .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
.propertyPage-theme .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
.propertyPage-theme .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.propertyPage-theme .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
.propertyPage-theme .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
.propertyPage-theme .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
.propertyPage-theme .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
.propertyPage-theme .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
.propertyPage-theme .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
.propertyPage-theme .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
.propertyPage-theme .mfgGallery .progressCenter strong {
font-size: 25px;
}
.propertyPage-theme .mfgGallery .trainingStatList {
gap: 9px;
}
.propertyPage-theme .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
.propertyPage-theme .mfgGallery .trainingStatList strong {
font-size: 20px;
}
.propertyPage-theme .mfgGallery .trainingStatList span {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.propertyPage-theme .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
.propertyPage-theme .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
.propertyPage-theme .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.propertyPage-theme .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
.propertyPage-theme .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
.propertyPage-theme .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
.propertyPage-theme .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
.propertyPage-theme .mfgGallery .qualityCaption strong {
font-size: 12px;
}
.propertyPage-theme .mfgGallery .qualityCaption span {
font-size: 10px;
}
.propertyPage-theme .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.propertyPage-theme .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
.propertyPage-theme .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
.propertyPage-theme .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
.propertyPage-theme .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
.propertyPage-theme #furniture-rfid .featureStage,
.propertyPage-theme #furniture-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
.propertyPage-theme #furniture-rfid .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
.propertyPage-theme .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
.propertyPage-theme #furniture-rfid .featureStage,
.propertyPage-theme #furniture-ai-decisions .featureStage {
padding: 16px;
}
.propertyPage-theme .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
.propertyPage-theme .mfgGallery .freshWindow {
height: auto;
}
.propertyPage-theme .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
.propertyPage-theme .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .freshTop strong {
font-size: 13px;
}
.propertyPage-theme .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
.propertyPage-theme .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
.propertyPage-theme .mfgGallery .rfShelfPanel {
padding: 10px;
}
.propertyPage-theme .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
.propertyPage-theme .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
.propertyPage-theme .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.propertyPage-theme .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
.propertyPage-theme .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.propertyPage-theme .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
.propertyPage-theme .mfgGallery .flowNum {
grid-row: 1/3;
}
.propertyPage-theme .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
.propertyPage-theme .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
.propertyPage-theme .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.propertyPage-theme .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
.propertyPage-theme .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.propertyPage-theme .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
.propertyPage-theme .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
.propertyPage-theme .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
.propertyPage-theme .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
.propertyPage-theme .mfgGallery .rfActionStrip {
height: auto;
}
.propertyPage-theme .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .countPanel {
gap: 14px;
}
.propertyPage-theme .mfgGallery .handheldPanel {
padding: 15px;
}
.propertyPage-theme .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
.propertyPage-theme .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
.propertyPage-theme .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.propertyPage-theme .mfgGallery .siteNode.east {
right: 3%;
}
.propertyPage-theme .mfgGallery .siteNode.west {
left: 3%;
}
.propertyPage-theme .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
.propertyPage-theme .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
.propertyPage-theme .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
.propertyPage-theme .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
.propertyPage-theme .mfgGallery .aiInsightCard p {
font-size: 12px;
}
.propertyPage-theme .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
.propertyPage-theme .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
.propertyPage-theme .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
.propertyPage-theme .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
.propertyPage-theme .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
.propertyPage-theme .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.propertyPage-theme .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
.propertyPage-theme .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
.propertyPage-theme .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
.propertyPage-theme .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
.propertyPage-theme .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
.propertyPage-theme .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
.propertyPage-theme .mfgGallery .trainingStatList strong {
font-size: 17px;
}
.propertyPage-theme .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
.propertyPage-theme .mfgGallery .moduleCard {
padding: 10px;
}
.propertyPage-theme .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
.propertyPage-theme .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
.propertyPage-theme .mfgGallery .qualityAction strong {
font-size: 12px;
}
.propertyPage-theme .mfgGallery .qualityAction span {
font-size: 11px;
}
}
.propertyPage-theme .mfgGallery .shelf i::after {
bottom: 0;
}
.propertyPage-theme .furnitureVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
.propertyPage-theme .furnitureGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
.propertyPage-theme .furnitureIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.propertyPage-theme .furnitureStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.propertyPage-theme .furnitureVisualGallery>.furnitureGraphic {
display: none;
}
.propertyPage-theme #furniture-delivery .featureStage,
.propertyPage-theme #furniture-rfid .featureStage,
.propertyPage-theme #furniture-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
.propertyPage-theme #furniture-rfid .furnitureVisualGallery {
grid-column: 1;
grid-row: 1;
}
.propertyPage-theme #furniture-rfid .featureContent {
grid-column: 2;
grid-row: 1;
}
.propertyPage-theme .factoryWorkflow {
display: flex;
flex-direction: column;
}
.propertyPage-theme .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
.propertyPage-theme .factoryWorkflow>p {
margin-bottom: 22px;
}
.propertyPage-theme .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
.propertyPage-theme .mfgHero h1 {
font-size: clamp(39px, 4.4vw, 51px);
}
}
@media (max-width:1100px) {
.propertyPage-theme #furniture-delivery .featureStage,
.propertyPage-theme #furniture-rfid .featureStage,
.propertyPage-theme #furniture-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.propertyPage-theme #furniture-rfid .furnitureVisualGallery,
.propertyPage-theme #furniture-rfid .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
.propertyPage-theme .mfgHeroScene {
height: 290px;
}
.propertyPage-theme #furniture-delivery .featureStage,
.propertyPage-theme #furniture-rfid .featureStage,
.propertyPage-theme #furniture-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
.propertyPage-theme .furnitureVisualGallery {
width: 100%;
}
}
@media print {
.propertyPage-theme .furnitureVisualGallery>.furnitureGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
.propertyPage-theme #furniture-delivery-features-1:checked~.featureStage .furnitureVisualGallery> :nth-child(1) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-2:checked~.featureStage .furnitureVisualGallery> :nth-child(2) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-3:checked~.featureStage .furnitureVisualGallery> :nth-child(3) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-4:checked~.featureStage .furnitureVisualGallery> :nth-child(4) {
display: block;
}
.propertyPage-theme #furniture-delivery-features-5:checked~.featureStage .furnitureVisualGallery> :nth-child(5) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-1:checked~.featureStage .furnitureVisualGallery> :nth-child(1) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-2:checked~.featureStage .furnitureVisualGallery> :nth-child(2) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-3:checked~.featureStage .furnitureVisualGallery> :nth-child(3) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-4:checked~.featureStage .furnitureVisualGallery> :nth-child(4) {
display: block;
}
.propertyPage-theme #furniture-rfid-features-5:checked~.featureStage .furnitureVisualGallery> :nth-child(5) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-1:checked~.featureStage .furnitureVisualGallery> :nth-child(1) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-2:checked~.featureStage .furnitureVisualGallery> :nth-child(2) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-3:checked~.featureStage .furnitureVisualGallery> :nth-child(3) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-4:checked~.featureStage .furnitureVisualGallery> :nth-child(4) {
display: block;
}
.propertyPage-theme #furniture-ai-decisions-features-5:checked~.featureStage .furnitureVisualGallery> :nth-child(5) {
display: block;
}
.propertyPage-theme .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
.propertyPage-theme .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
.propertyPage-theme .furnitureIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
.propertyPage-theme .furnitureGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.propertyPage-theme .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
.propertyPage-theme .mfgHeroScene img {
object-position: 70% 50%;
}
.propertyPage-theme .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
.propertyPage-theme .mfgHeroScene img {
object-position: 78% 50%;
}
.propertyPage-theme .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} .propertyPage-theme .mfgHeroContent {
background: transparent;
}
.propertyPage-theme .mfgHeroScene img {
object-position: 66% 50%;
}
.propertyPage-theme .furnitureIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
.propertyPage-theme .furnitureIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
.propertyPage-theme .furnitureGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
.propertyPage-theme .furnitureVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
.propertyPage-theme .mfgHeroScene img {
object-position: 69% 50%;
}
}
@media(max-width:600px) {
.propertyPage-theme .mfgHeroScene img {
object-position: 76% 50%;
}
}  #dreamz-hvac .industryIntroHead.compact,
#dreamz-hvac .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
.propertyPage-theme .awards__label{
color: #fff !important;
}
#dreamz-hvac .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-hvac .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-hvac .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-hvac .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-hvac .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-hvac .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-hvac .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-hvac .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-hvac .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-hvac .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-hvac .windowDots {
display: flex;
gap: 5px;
}
#dreamz-hvac .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-hvac .windowBody {
padding: 16px;
}
#dreamz-hvac .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-hvac .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-hvac .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-hvac .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-hvac .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-hvac .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-hvac .chartGridLine.l1 {
top: 34px;
}
#dreamz-hvac .chartGridLine.l2 {
top: 65px;
}
#dreamz-hvac .chartGridLine.l3 {
top: 96px;
}
#dreamz-hvac .chartGridLine.l4 {
top: 127px;
}
#dreamz-hvac .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-hvac .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-hvac .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-hvac .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-hvac .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-hvac .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-hvac .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-hvac .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-hvac .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-hvac .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-hvac .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-hvac .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-hvac .noteCard p,
#dreamz-hvac .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-hvac .alertStack {
display: grid;
gap: 10px;
}
#dreamz-hvac .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-hvac .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-hvac .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-hvac .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-hvac .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-hvac .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-hvac .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-hvac .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-hvac .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-hvac .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-hvac .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-hvac .scheduleBoard h4,
#dreamz-hvac .todoBoard h4,
#dreamz-hvac .siteBoard h4,
#dreamz-hvac .chatPanel h4,
#dreamz-hvac .lessonPanel h4,
#dreamz-hvac .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-hvac .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-hvac .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-hvac .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-hvac .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-hvac .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-hvac .taskRow:last-child {
border-bottom: 0;
}
#dreamz-hvac .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-hvac .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-hvac .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-hvac .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-hvac .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-hvac .inventoryTable th,
#dreamz-hvac .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-hvac .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-hvac .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-hvac .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-hvac .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-hvac .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-hvac .phoneBody {
padding: 12px;
}
#dreamz-hvac .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-hvac .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-hvac .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-hvac .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-hvac .progressList {
display: grid;
gap: 10px;
}
#dreamz-hvac .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-hvac .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-hvac .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-hvac .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-hvac .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-hvac .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-hvac .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-hvac .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-hvac .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-hvac .pin1 {
top: 56px;
left: 58px;
}
#dreamz-hvac .pin2 {
top: 88px;
right: 88px;
}
#dreamz-hvac .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-hvac .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-hvac .siteRow:last-child {
border-bottom: 0;
}
#dreamz-hvac .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-hvac .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-hvac .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-hvac .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-hvac .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-hvac .graphNodes:before,
#dreamz-hvac .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-hvac .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-hvac .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-hvac .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-hvac .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-hvac .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-hvac .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-hvac .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-hvac .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-hvac .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-hvac .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-hvac .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-hvac .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-hvac .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-hvac .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-hvac .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-hvac .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-hvac .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-hvac .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-hvac .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-hvac .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-hvac .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-hvac .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-hvac .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-hvac .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-hvac .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-hvac .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-hvac .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-hvac .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-hvac .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-hvac .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-hvac .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-hvac .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-hvac .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-hvac #hvac-service-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-hvac #hvac-service-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-hvac #hvac-service-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-hvac #hvac-service-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-hvac #hvac-service-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-hvac #hvac-commercial-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-hvac #hvac-commercial-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-hvac #hvac-commercial-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-hvac #hvac-commercial-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-hvac #hvac-commercial-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-hvac #hvac-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-hvac #hvac-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-hvac #hvac-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-hvac #hvac-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-hvac #hvac-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-hvac #hvac-service-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-hvac #hvac-service-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-hvac #hvac-service-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-hvac #hvac-service-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-hvac #hvac-service-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-hvac #hvac-commercial-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-hvac #hvac-commercial-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-hvac #hvac-commercial-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-hvac #hvac-commercial-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-hvac #hvac-commercial-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-hvac #hvac-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-hvac #hvac-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-hvac #hvac-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-hvac #hvac-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-hvac #hvac-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-hvac .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-hvac .featureMediaPanels {
min-height: 0;
}
#dreamz-hvac .inventorySplit,
#dreamz-hvac .forecastGrid,
#dreamz-hvac .siteGrid,
#dreamz-hvac .spectrumGrid,
#dreamz-hvac .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-hvac .metricGrid,
#dreamz-hvac .lessonCards,
#dreamz-hvac .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-hvac .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-hvac {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-hvac * {
box-sizing: border-box;
}
#dreamz-hvac {
scroll-behavior: smooth;
}
#dreamz-hvac {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-hvac a {
color: inherit;
text-decoration: none;
}
#dreamz-hvac .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-hvac .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-hvac .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-hvac .brand span {
color: var(--brand);
}
#dreamz-hvac .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-hvac .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-hvac .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-hvac .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-hvac .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-hvac .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-hvac .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-hvac .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
} #dreamz-hvac h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-hvac .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-hvac .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-hvac .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-hvac .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-hvac .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-hvac .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-hvac .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-hvac .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-hvac .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-hvac .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-hvac .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-hvac .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-hvac .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-hvac .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-hvac .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-hvac .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-hvac .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-hvac .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-hvac .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-hvac .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-hvac .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-hvac .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-hvac .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-hvac .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-hvac .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-hvac .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-hvac .sectionHead {
margin-bottom: 44px;
}
#dreamz-hvac .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-hvac .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-hvac .aiJourney h2 {
color: #fff;
}
#dreamz-hvac .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-hvac .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-hvac .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-hvac .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-hvac .aiStep:last-child::after {
display: none;
}
#dreamz-hvac .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-hvac .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-hvac .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-hvac .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-hvac .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-hvac .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-hvac .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-hvac .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-hvac .capability {
background: #fff;
}
#dreamz-hvac .capability.alt {
background: var(--sky-2);
}
#dreamz-hvac .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-hvac .twoCol.reverse .visual {
order: 2;
}
#dreamz-hvac .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-hvac .visual .placeholder {
min-height: 355px;
}
#dreamz-hvac .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-hvac .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-hvac details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-hvac details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-hvac details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-hvac details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-hvac details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-hvac details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-hvac .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-hvac .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-hvac .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-hvac .darkSection h2,
#dreamz-hvac .darkSection h3 {
color: #fff;
}
#dreamz-hvac .darkSection .sectionHead p,
#dreamz-hvac .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-hvac .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-hvac .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-hvac .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-hvac .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-hvac .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-hvac .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-hvac .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-hvac .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-hvac .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-hvac .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-hvac .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-hvac .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-hvac .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-hvac .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-hvac .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-hvac .benefitBand h2 {
color: #fff;
}
#dreamz-hvac .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-hvac .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-hvac .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-hvac .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-hvac .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-hvac .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-hvac .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-hvac .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-hvac .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-hvac .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-hvac .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-hvac .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-hvac .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-hvac .ctaPanel h2 {
color: #fff;
}
#dreamz-hvac .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-hvac .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-hvac .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-hvac .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-hvac .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-hvac .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-hvac .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-hvac .inlineCta.dark h3 {
color: #fff;
}
#dreamz-hvac .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-hvac .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-hvac .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-hvac .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-hvac .button.yellow:hover {
background: #FFD84D;
}
#dreamz-hvac .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-hvac .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-hvac .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-hvac .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-hvac footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-hvac .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-hvac .heroGrid,
#dreamz-hvac .twoCol,
#dreamz-hvac .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-hvac .twoCol.reverse .visual {
order: initial;
}
#dreamz-hvac .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-hvac .ratingGrid,
#dreamz-hvac .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-hvac .ratingLead,
#dreamz-hvac .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-hvac .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-hvac .aiStep:nth-child(3)::after,
#dreamz-hvac .aiStep:last-child::after {
display: none;
}
#dreamz-hvac .outcomeGrid,
#dreamz-hvac .challengeGrid,
#dreamz-hvac .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-hvac .cards,
#dreamz-hvac .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-hvac .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-hvac .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-hvac .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-hvac .hero {
padding: 58px 0 52px;
}
#dreamz-hvac .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-hvac .aiStep::after {
display: none;
}
#dreamz-hvac .logoRow,
#dreamz-hvac .ratingGrid,
#dreamz-hvac .awardGrid,
#dreamz-hvac .outcomeGrid,
#dreamz-hvac .challengeGrid,
#dreamz-hvac .benefitGrid,
#dreamz-hvac .cards,
#dreamz-hvac .proofCards,
#dreamz-hvac .integrationGrid,
#dreamz-hvac .featureList {
grid-template-columns: 1fr;
}
#dreamz-hvac .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-hvac .ctaPanel {
padding: 34px 24px;
}
#dreamz-hvac .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-hvac .inlineCtaActions {
width: 100%;
}
#dreamz-hvac .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-hvac {
--muted: #526A7C;
--shadow: none;
}
#dreamz-hvac {
background: var(--sky-2);
}
#dreamz-hvac p {
margin-bottom: 0;
}
#dreamz-hvac [id] {
scroll-margin-top: 94px;
}
#dreamz-hvac svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-hvac .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-hvac .darkSection h2,
#dreamz-hvac .darkSection h3,
#dreamz-hvac .aiJourney h2,
#dreamz-hvac .benefitBand h2,
#dreamz-hvac .ctaPanel h2,
#dreamz-hvac .inlineCta.dark h3 {
color: #fff;
}
#dreamz-hvac .wrap>*,
#dreamz-hvac .heroGrid>*,
#dreamz-hvac .twoCol>*,
#dreamz-hvac .ctaPanel>* {
min-width: 0;
}
#dreamz-hvac .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-hvac .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-hvac .skipLink:focus {
transform: none;
}
#dreamz-hvac a:focus-visible,
#dreamz-hvac summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-hvac .darkSection a:focus-visible,
#dreamz-hvac .darkSection summary:focus-visible,
#dreamz-hvac .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-hvac .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-hvac .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-hvac .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-hvac .brandName>span {
color: var(--brand-dark);
}
#dreamz-hvac .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-hvac .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-hvac .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-hvac .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-hvac .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-hvac .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-hvac .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-hvac .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-hvac .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-hvac .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-hvac .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-hvac .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-hvac .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-hvac .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-hvac .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-hvac .clientBand {
padding: 27px 0;
}
#dreamz-hvac .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-hvac .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-hvac .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-hvac .logoBox.wide {
font-size: 12px;
}
#dreamz-hvac .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-hvac h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-hvac .sectionHead {
margin-bottom: 36px;
}
#dreamz-hvac .eyebrow {
line-height: 1.5;
}
#dreamz-hvac .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-hvac .aiStep {
min-height: 162px;
}
#dreamz-hvac .aiStep strong {
line-height: 1.35;
}
#dreamz-hvac .aiStep span {
line-height: 1.65;
}
#dreamz-hvac .aiCallout {
margin-top: 24px;
}
#dreamz-hvac .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-hvac .outcome>.icon {
color: var(--navy);
}
#dreamz-hvac .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-hvac .awardItem>.icon {
color: var(--navy);
}
#dreamz-hvac .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-hvac .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-hvac .twoCol.reverse .visual {
order: -1;
}
#dreamz-hvac .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-hvac .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-hvac .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-hvac .featureList {
gap: 13px 18px;
}
#dreamz-hvac .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-hvac .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-hvac .check .icon {
width: 14px;
height: 14px;
}
#dreamz-hvac details.capabilityMore {
margin-bottom: 0;
}
#dreamz-hvac .capabilityMore summary {
min-height: 34px;
}
#dreamz-hvac .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-hvac .textCta {
font-size: 14px;
}
#dreamz-hvac .visual {
min-width: 0;
}
#dreamz-hvac .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-hvac .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-hvac .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-hvac .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-hvac .panelBody {
padding: 20px;
}
#dreamz-hvac .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-hvac .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-hvac .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-hvac .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-hvac .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-hvac .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-hvac .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-hvac .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-hvac .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-hvac .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-hvac .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-hvac .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-hvac .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-hvac .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-hvac .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-hvac .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-hvac .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-hvac .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-hvac .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-hvac .dataRow:last-child {
border-bottom: 0;
}
#dreamz-hvac .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-hvac .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-hvac .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-hvac .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-hvac .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-hvac .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-hvac .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-hvac .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-hvac .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-hvac .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-hvac .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-hvac .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-hvac .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-hvac .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-hvac .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-hvac .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-hvac .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-hvac .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-hvac .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-hvac .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-hvac .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-hvac .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-hvac .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-hvac .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-hvac .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-hvac .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-hvac .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-hvac .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-hvac .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-hvac .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-hvac .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-hvac .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-hvac .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-hvac .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-hvac .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-hvac .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-hvac .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-hvac .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-hvac .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-hvac .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-hvac .promptList {
display: grid;
gap: 10px;
}
#dreamz-hvac .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-hvac .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-hvac .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-hvac .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-hvac .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-hvac .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-hvac .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-hvac .quoteTable th,
#dreamz-hvac .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-hvac .quoteTable td:first-child {
width: 64%;
}
#dreamz-hvac .quoteTable th:last-child,
#dreamz-hvac .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-hvac .quoteTable strong {
font-size: 11px;
}
#dreamz-hvac .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-hvac .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-hvac .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-hvac .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-hvac .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-hvac .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-hvac .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-hvac .orderJourney {
margin: 20px 0;
}
#dreamz-hvac .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-hvac .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-hvac .journeyRow:last-child:before {
display: none;
}
#dreamz-hvac .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-hvac .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-hvac .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-hvac .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-hvac .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-hvac .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-hvac .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-hvac .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-hvac .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-hvac .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-hvac .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-hvac .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-hvac .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-hvac .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-hvac .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-hvac .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-hvac .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-hvac .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-hvac .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-hvac .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-hvac .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-hvac .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-hvac .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-hvac .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-hvac .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-hvac .customerTimeline strong {
color: #fff;
}
#dreamz-hvac .customerTimeline small {
color: #BFBFBF;
}
#dreamz-hvac .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-hvac .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-hvac .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-hvac .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-hvac .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-hvac .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-hvac .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-hvac .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-hvac .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-hvac .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-hvac .chartTitle strong {
font-size: 12px;
}
#dreamz-hvac .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-hvac .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-hvac .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-hvac .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-hvac .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-hvac .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-hvac .inlineCtaActions {
max-width: 42%;
}
#dreamz-hvac .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-hvac .inlineCta h3 {
line-height: 1.35;
}
#dreamz-hvac .card {
box-shadow: none;
}
#dreamz-hvac .cardIcon {
box-shadow: none;
}
#dreamz-hvac .card h3 {
font-size: 22px;
}
#dreamz-hvac .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-hvac .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-hvac .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-hvac .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-hvac .ratingBand {
padding: 34px 0;
}
#dreamz-hvac .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-hvac .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-hvac .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-hvac .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-hvac .ratingItem:first-child {
border-left: 0;
}
#dreamz-hvac .proofCard h3 {
font-size: 23px;
}
#dreamz-hvac .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-hvac .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-hvac .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-hvac .integration {
min-height: 98px;
}
#dreamz-hvac .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-hvac .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-hvac .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-hvac .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-hvac .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-hvac .finalActions {
display: grid;
gap: 11px;
}
#dreamz-hvac .finalActions .button {
white-space: nowrap;
}
#dreamz-hvac .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-hvac .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-hvac .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-hvac .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-hvac .heroGrid {
gap: 30px;
}
#dreamz-hvac .twoCol {
gap: 32px;
}
#dreamz-hvac .panelBody {
padding: 16px;
}
#dreamz-hvac .panelHead {
padding: 16px;
}
#dreamz-hvac .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-hvac .pipelineColumns {
gap: 7px;
}
#dreamz-hvac .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-hvac .heroGrid,
#dreamz-hvac .twoCol,
#dreamz-hvac .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .heroGrid {
gap: 36px;
}
#dreamz-hvac .hero h1 {
max-width: 730px;
}
#dreamz-hvac .hero .lead {
max-width: 690px;
}
#dreamz-hvac .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-hvac .twoCol {
gap: 34px;
}
#dreamz-hvac .twoCol.reverse .visual {
order: initial;
}
#dreamz-hvac .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-hvac .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-hvac .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-hvac .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-hvac .ratingSectionGrid {
gap: 20px;
}
#dreamz-hvac .inlineCta {
align-items: flex-start;
}
#dreamz-hvac .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-hvac .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-hvac .card {
padding: 22px;
}
#dreamz-hvac .card h3 {
font-size: 21px;
}
#dreamz-hvac .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-hvac .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-hvac .cards,
#dreamz-hvac .proofCards {
grid-template-columns: 1fr;
}
#dreamz-hvac .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-hvac .inlineCta {
flex-direction: column;
}
#dreamz-hvac .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-hvac .inlineCtaActions .button {
flex: 1;
}
#dreamz-hvac .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-hvac .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-hvac .wrap {
width: calc(100% - 32px);
}
#dreamz-hvac [id] {
scroll-margin-top: 82px;
}
#dreamz-hvac .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-hvac .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-hvac .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-hvac .hero {
padding: 51px 0 48px;
}
#dreamz-hvac .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-hvac .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-hvac .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-hvac .hero .microcopy {
font-size: 11px;
}
#dreamz-hvac .heroPills span {
font-size: 9px;
}
#dreamz-hvac .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-hvac .sectionHead p {
font-size: 16px;
}
#dreamz-hvac .copy h2 {
font-size: 34px;
}
#dreamz-hvac .copy p {
font-size: 15px;
}
#dreamz-hvac .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-hvac .logoBox {
min-height: 53px;
}
#dreamz-hvac .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-hvac .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-hvac .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-hvac .aiStep strong {
font-size: 13px;
}
#dreamz-hvac .aiStep span {
font-size: 11px;
}
#dreamz-hvac .aiStep::after {
display: none;
}
#dreamz-hvac .outcomeGrid,
#dreamz-hvac .challengeGrid,
#dreamz-hvac .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .outcome {
padding: 24px;
}
#dreamz-hvac .outcome strong {
font-size: 22px;
}
#dreamz-hvac .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-hvac .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-hvac .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-hvac .featureList,
#dreamz-hvac .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .featureItem {
font-size: 13px;
}
#dreamz-hvac .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-hvac .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-hvac .panelHead {
padding: 15px 13px;
}
#dreamz-hvac .panelHead>strong {
font-size: 12px;
}
#dreamz-hvac .panelBody {
padding: 14px;
}
#dreamz-hvac .productPanel {
border-radius: 16px;
}
#dreamz-hvac .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-hvac .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-hvac .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-hvac .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-hvac .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-hvac .deal strong {
font-size: 10px;
}
#dreamz-hvac .deal small {
font-size: 9px;
}
#dreamz-hvac .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-hvac .mobileWorkspace {
gap: 12px;
}
#dreamz-hvac .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-hvac .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-hvac .sideTile {
padding: 10px;
}
#dreamz-hvac .sideTile strong {
font-size: 10px;
}
#dreamz-hvac .sideTile p {
font-size: 9px;
}
#dreamz-hvac .mobileHeader strong {
font-size: 15px;
}
#dreamz-hvac .mobileAccount strong {
font-size: 10px;
}
#dreamz-hvac .mobileAccount small {
font-size: 7px;
}
#dreamz-hvac .phoneDevice .rowIcon {
display: none;
}
#dreamz-hvac .quoteTable th,
#dreamz-hvac .quoteTable td {
padding: 12px 4px;
}
#dreamz-hvac .quoteTable strong {
font-size: 10px;
}
#dreamz-hvac .quoteTable small {
font-size: 8px;
}
#dreamz-hvac .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-hvac .docHeader strong {
font-size: 17px;
}
#dreamz-hvac .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-hvac .miniFlow span {
padding: 6px;
}
#dreamz-hvac .rowCopy strong {
font-size: 10px;
}
#dreamz-hvac .rowCopy small {
font-size: 8px;
}
#dreamz-hvac .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-hvac .miniStats {
gap: 7px;
}
#dreamz-hvac .miniStats>div {
padding: 9px;
}
#dreamz-hvac .miniStats strong {
font-size: 18px;
}
#dreamz-hvac .miniStats span {
font-size: 8px;
}
#dreamz-hvac .collectionStats>div {
padding: 13px;
}
#dreamz-hvac .collectionStats strong {
font-size: 24px;
}
#dreamz-hvac .customerHeader strong {
font-size: 17px;
}
#dreamz-hvac .customerFacts>div {
padding: 10px;
}
#dreamz-hvac .customerFacts strong {
font-size: 12px;
}
#dreamz-hvac .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-hvac .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-hvac .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-hvac .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-hvac .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-hvac .ctaPanel p {
font-size: 15px;
}
#dreamz-hvac .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-hvac .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-hvac .contextSection {
padding: 0 0 24px;
}
#dreamz-hvac .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-hvac .wrap {
width: calc(100% - 24px);
}
#dreamz-hvac .brand {
font-size: 18px;
}
#dreamz-hvac .brandMark {
width: 25px;
height: 25px;
}
#dreamz-hvac .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-hvac .copy h2 {
font-size: 31px;
}
#dreamz-hvac .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-hvac .phoneDevice {
width: 210px;
}
#dreamz-hvac .phoneDevice .rowIcon {
display: grid;
}
#dreamz-hvac .mobileSide {
gap: 8px;
}
#dreamz-hvac .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-hvac .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-hvac .sideTile p {
margin: 0;
}
#dreamz-hvac .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-hvac .collectionStats strong {
font-size: 21px;
}
#dreamz-hvac .inventoryIntro strong {
font-size: 14px;
}
#dreamz-hvac .dataRow {
gap: 7px;
}
#dreamz-hvac .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-hvac .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-hvac {
scroll-behavior: auto;
}
#dreamz-hvac *,
#dreamz-hvac *::before,
#dreamz-hvac *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-hvac {
background: var(--sky-2);
}
#dreamz-hvac .hero .eyebrow {
max-width: 100%;
}
#dreamz-hvac .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-hvac .ganttIllustration,
#dreamz-hvac .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-hvac .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-hvac .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-hvac .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-hvac .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-hvac .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-hvac .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-hvac .comparisonTable th,
#dreamz-hvac .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .comparisonTable th:first-child {
width: 23%;
}
#dreamz-hvac .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-hvac .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-hvac .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-hvac .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-hvac .card,
#dreamz-hvac .proofCard,
#dreamz-hvac .productPanel,
#dreamz-hvac .outcome,
#dreamz-hvac .benefit {
box-shadow: none;
}
#dreamz-hvac .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-hvac .hero .eyebrow {
font-size: 10px;
}
#dreamz-hvac .comparisonTable {
font-size: 11px;
}
#dreamz-hvac .comparisonTable th,
#dreamz-hvac .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-hvac .comparisonTable th:first-child {
width: 24%;
}
#dreamz-hvac .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-hvac .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
}
#dreamz-hvac .scheduleIllustration,
#dreamz-hvac .analyticsIllustration,
#dreamz-hvac .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-hvac .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-hvac .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-hvac .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-hvac .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-hvac .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-hvac .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-hvac .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-hvac .darkSection .textCta {
color: var(--yellow);
}
#dreamz-hvac .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-hvac .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-hvac .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-hvac .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-hvac .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-hvac .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-hvac .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-hvac .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-hvac .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-hvac .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-hvac .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-hvac .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-hvac .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-hvac .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-hvac .phoneDevice {
max-width: 100%;
}
#dreamz-hvac .heroPills {
line-height: 1.55;
}
#dreamz-hvac .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-hvac .plantFacts {
gap: 7px;
}
#dreamz-hvac .plantFacts>div {
padding: 9px;
}
#dreamz-hvac .plantFacts strong {
font-size: 11px;
}
#dreamz-hvac .scanSummary {
padding: 12px;
}
#dreamz-hvac .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-hvac .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-hvac .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-hvac .phoneDevice .rowIcon {
display: grid;
}
#dreamz-hvac .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-hvac .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-hvac .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-hvac .sideTile strong {
font-size: 12px;
}
#dreamz-hvac .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-hvac .topbar,
#dreamz-hvac .heroActions,
#dreamz-hvac .finalActions,
#dreamz-hvac .contextSection,
#dreamz-hvac .valueCtaSection {
display: none;
}
#dreamz-hvac section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-hvac .hero {
padding-top: 20px;
}
}
#dreamz-hvac {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-hvac p {
margin: 0;
}
#dreamz-hvac main {
display: block;
}
#dreamz-hvac .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-hvac .heroAccent {
color: var(--black);
}
#dreamz-hvac .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-hvac .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-hvac .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-hvac .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-hvac .microcopy {
margin-top: 14px;
}
#dreamz-hvac .heroPills {
margin-top: 13px;
}
#dreamz-hvac .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-hvac .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-hvac .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-hvac .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-hvac .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-hvac .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-hvac .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-hvac .clientBand {
padding: 24px 0;
}
#dreamz-hvac .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-hvac .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-hvac .logoBox.wide {
font-size: 15px;
}
#dreamz-hvac .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-hvac .sectionHead p {
margin: 17px 0 0;
}
#dreamz-hvac .copy p {
margin: 16px 0 0;
}
#dreamz-hvac .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-hvac .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-hvac .aiJourney {
background: var(--black);
}
#dreamz-hvac .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-hvac .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-hvac .productPanel {
border-radius: 18px;
}
#dreamz-hvac .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-hvac .panelHead>strong {
font-size: 13px;
}
#dreamz-hvac .sampleTag {
font-size: 9px;
}
#dreamz-hvac .panelBody {
padding: 21px;
}
#dreamz-hvac .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-hvac .docHeader {
padding-bottom: 16px;
}
#dreamz-hvac .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-hvac .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-hvac .smallLabel {
font-size: 9px;
}
#dreamz-hvac .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-hvac .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-hvac .dataRow {
padding: 14px 0;
}
#dreamz-hvac .statusPill {
font-size: 8px;
}
#dreamz-hvac .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-hvac .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-hvac .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-hvac .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-hvac .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-hvac .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-hvac .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-hvac .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-hvac .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-hvac .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-hvac .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-hvac .hierarchy strong {
color: var(--navy);
}
#dreamz-hvac .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-hvac .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-hvac .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-hvac .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-hvac .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-hvac .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-hvac .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-hvac .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-hvac .mobileAccount small {
font-size: 9px;
}
#dreamz-hvac .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-hvac .sideTile strong {
font-size: 12px;
}
#dreamz-hvac .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-hvac .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-hvac .mobileAction {
font-size: 9px;
}
#dreamz-hvac .journeyRow strong {
font-size: 13px;
}
#dreamz-hvac .journeyRow small {
font-size: 11px;
}
#dreamz-hvac .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-hvac .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-hvac .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-hvac .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-hvac .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-hvac .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-hvac .utilityReadout small {
font-size: 12px;
}
#dreamz-hvac .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-hvac .darkSection {
background: var(--black);
}
#dreamz-hvac .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-hvac .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-hvac .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-hvac .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-hvac .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-hvac .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-hvac .assistantHead small {
font-size: 11px;
}
#dreamz-hvac .assistantNote {
font-size: 11px;
}
#dreamz-hvac .reportTags span {
font-size: 10px;
}
#dreamz-hvac .card p {
margin: 12px 0 0;
}
#dreamz-hvac .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-hvac .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-hvac .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-hvac .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-hvac .cards>.card p {
padding-bottom: 22px;
}
#dreamz-hvac .benefitBand {
background: var(--black);
}
#dreamz-hvac .benefit {
background: var(--black-soft);
}
#dreamz-hvac .inlineCta h3 {
font-size: 20px;
}
#dreamz-hvac .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-hvac .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-hvac .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-hvac .valueCtaSection {
padding: 32px 0;
}
#dreamz-hvac .proofCard p {
margin-top: 15px;
}
#dreamz-hvac .proofCard h3 {
font-size: 23px;
}
#dreamz-hvac .integrationNote {
margin-top: 23px;
}
#dreamz-hvac .ctaPanel {
background: var(--black);
}
#dreamz-hvac .ctaPanel p {
margin-top: 16px;
}
#dreamz-hvac .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-hvac .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-hvac a:hover {
text-decoration: none;
}
#dreamz-hvac .textCta:hover {
color: var(--navy);
}
#dreamz-hvac .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-hvac .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-hvac .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-hvac .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-hvac .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-hvac .heroVisual {
max-width: 548px;
}
#dreamz-hvac .hero .lead {
max-width: 700px;
}
#dreamz-hvac .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-hvac .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-hvac .logoBox:last-child {
grid-column: auto;
}
#dreamz-hvac .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-hvac .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-hvac .inlineCtaActions .button {
flex: 1;
}
#dreamz-hvac .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-hvac .hero {
padding: 28px 0 40px;
}
#dreamz-hvac .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-hvac .heroActions {
gap: 10px;
}
#dreamz-hvac .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-hvac .breadcrumb {
margin-bottom: 21px;
}
#dreamz-hvac .hero .eyebrow {
font-size: 11px;
}
#dreamz-hvac .heroVisual {
max-width: 480px;
}
#dreamz-hvac .heroPills {
row-gap: 9px;
}
#dreamz-hvac .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-hvac .heroPills span+span {
padding-left: 7px;
}
#dreamz-hvac .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-hvac .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-hvac .clientBand {
padding: 25px 0;
}
#dreamz-hvac .copy h2 {
font-size: 33px;
}
#dreamz-hvac .panelBody {
padding: 16px;
}
#dreamz-hvac .panelHead {
padding: 15px;
}
#dreamz-hvac .panelHead>strong {
font-size: 12px;
}
#dreamz-hvac .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-hvac .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-hvac .docHeader strong {
font-size: 18px;
}
#dreamz-hvac .docHeader small {
font-size: 10px;
}
#dreamz-hvac .rowCopy strong {
font-size: 11px;
}
#dreamz-hvac .rowCopy small {
font-size: 10px;
}
#dreamz-hvac .miniStats {
gap: 7px;
}
#dreamz-hvac .miniStats strong {
font-size: 21px;
}
#dreamz-hvac .miniStats span {
font-size: 9px;
}
#dreamz-hvac .miniStats>div {
padding: 10px 8px;
}
#dreamz-hvac .plantFacts {
gap: 8px;
}
#dreamz-hvac .plantFacts>div {
padding: 10px;
}
#dreamz-hvac .plantFacts strong {
font-size: 11px;
}
#dreamz-hvac .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-hvac .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-hvac .utilityReadout span {
font-size: 8px;
}
#dreamz-hvac .utilityReadout strong {
font-size: 24px;
}
#dreamz-hvac .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-hvac .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-hvac .comparisonTable {
font-size: 11px;
}
#dreamz-hvac .comparisonTable th,
#dreamz-hvac .comparisonTable td {
padding: 13px 9px;
}
#dreamz-hvac .contextSection {
padding: 0 0 22px;
}
#dreamz-hvac .valueCtaSection {
padding: 25px 0;
}
#dreamz-hvac .inlineCtaActions {
flex-direction: column;
}
#dreamz-hvac .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-hvac .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-hvac .phoneDevice {
width: 222px;
}
#dreamz-hvac .phoneDevice .rowIcon {
display: grid;
}
#dreamz-hvac .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-hvac .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-hvac .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-hvac .sideTile p {
margin: 0;
}
#dreamz-hvac .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-hvac .dataRow {
gap: 8px;
}
#dreamz-hvac .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-hvac .miniStats strong {
font-size: 19px;
}
#dreamz-hvac .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-hvac .heroActions .button {
width: 100%;
}
#dreamz-hvac .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-hvac .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-hvac .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-hvac .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-hvac .aiStep span {
font-size: 13px;
}
#dreamz-hvac .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-hvac {
background: var(--white);
}
#dreamz-hvac img {
display: block;
max-width: 100%;
}
#dreamz-hvac h1,
#dreamz-hvac h2,
#dreamz-hvac h3 {
text-wrap: balance;
}
#dreamz-hvac .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-hvac .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-hvac .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-hvac .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-hvac .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-hvac .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-hvac .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-hvac .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-hvac .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-hvac .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-hvac .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-hvac .industryIntro {
padding: 78px 0 66px;
}
#dreamz-hvac .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-hvac .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-hvac .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-hvac .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-hvac .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-hvac .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-hvac .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-hvac .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-hvac .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-hvac .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-hvac .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-hvac .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-hvac .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-hvac .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-hvac .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-hvac .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-hvac .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-hvac .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-hvac .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-hvac .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-hvac .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-hvac .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-hvac .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-hvac .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-hvac .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-hvac .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-hvac .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-hvac .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-hvac .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-hvac .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-hvac .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-hvac .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-hvac .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-hvac .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-hvac .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-hvac .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-hvac .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-hvac .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-hvac .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-hvac .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-hvac .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-hvac .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-hvac .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-hvac .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .rfidSpotlight {
background: #fff;
}
#dreamz-hvac .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-hvac .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-hvac .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-hvac .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-hvac .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-hvac .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-hvac .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-hvac .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-hvac .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-hvac .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-hvac .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-hvac .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-hvac .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-hvac .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-hvac .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-hvac .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-hvac .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-hvac .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-hvac .featurePanel {
display: none;
}
#dreamz-hvac .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-hvac .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-hvac .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-hvac .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-hvac .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-hvac .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-hvac .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-hvac .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-hvac .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-hvac .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-hvac .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-hvac .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-hvac .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-hvac .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-hvac .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-hvac .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-hvac .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-hvac .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-hvac .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-hvac .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-hvac .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-hvac .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-hvac .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-hvac .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-hvac .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-hvac .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-hvac .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-hvac .aiReviewBody {
padding: 18px;
}
#dreamz-hvac .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-hvac .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-hvac .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-hvac .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-hvac .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-hvac .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-hvac .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-hvac .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-hvac .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-hvac .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-hvac .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-hvac .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-hvac .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-hvac .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-hvac .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-hvac .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-hvac .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-hvac .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-hvac .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-hvac .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-hvac .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-hvac .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-hvac .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-hvac .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-hvac .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-hvac .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-hvac .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-hvac .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-hvac .workflowDetails .featureList,
#dreamz-hvac .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-hvac .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-hvac .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-hvac .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-hvac #hvac-connected-tools {
background: #fff;
}
#dreamz-hvac #hvac-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-hvac .featureTab,
#dreamz-hvac .industryPriority,
#dreamz-hvac summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-hvac .industryIntroHead {
gap: 30px;
}
#dreamz-hvac .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-hvac .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-hvac .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-hvac .factoryWorkflow {
padding: 22px;
}
#dreamz-hvac .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-hvac .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-hvac .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-hvac .industryPriorityGrid {
gap: 14px;
}
#dreamz-hvac .industryPriority {
padding: 22px 19px;
}
#dreamz-hvac .industryPriority h3 {
font-size: 21px;
}
#dreamz-hvac .industryPriority p {
font-size: 12px;
}
#dreamz-hvac .priorityLink {
font-size: 10px;
}
#dreamz-hvac .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-hvac .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-hvac .vedaUseCases>div {
display: block;
}
#dreamz-hvac .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-hvac .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-hvac .featureTabs {
gap: 8px;
}
#dreamz-hvac .featureTab {
min-height: 108px;
}
#dreamz-hvac .featureStage,
#dreamz-hvac .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-hvac .rfidSpotlight .spotlightMedia,
#dreamz-hvac .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-hvac .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-hvac .featurePanel {
min-height: 0;
}
#dreamz-hvac .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-hvac .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-hvac .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-hvac .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-hvac .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-hvac .clientBand {
padding: 22px 0;
}
#dreamz-hvac .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-hvac .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-hvac .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-hvac .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-hvac .industryIntro {
padding: 53px 0;
}
#dreamz-hvac .industryIntroHead>p {
font-size: 14px;
}
#dreamz-hvac .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .industryPriority {
padding: 23px;
}
#dreamz-hvac .industryPriority h3 {
font-size: 24px;
}
#dreamz-hvac .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-hvac .industryPriority p {
font-size: 13px;
}
#dreamz-hvac .priorityLink {
font-size: 11px;
}
#dreamz-hvac .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-hvac .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-hvac .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-hvac .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-hvac .vedaUseCases>div {
display: flex;
}
#dreamz-hvac .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-hvac .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-hvac .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-hvac .vedaMessage.user {
margin-left: 25px;
}
#dreamz-hvac .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-hvac .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-hvac .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-hvac .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-hvac .spotlightHead>p {
font-size: 14px;
}
#dreamz-hvac .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-hvac .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-hvac .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-hvac .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-hvac .featurePanel h3 {
font-size: 24px;
}
#dreamz-hvac .featurePanel>p {
font-size: 13px;
}
#dreamz-hvac .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-hvac .spotlightChecks>li {
font-size: 12px;
}
#dreamz-hvac .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-hvac .spotlightActions .button {
width: 100%;
}
#dreamz-hvac .spotlightScope {
font-size: 10px;
}
#dreamz-hvac .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-hvac .mediaTitle strong {
font-size: 11px;
}
#dreamz-hvac .mediaTitle div>span {
font-size: 8px;
}
#dreamz-hvac .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-hvac .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-hvac .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-hvac .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-hvac .aiReviewBody {
padding: 13px;
}
#dreamz-hvac .aiIssue {
padding: 13px;
}
#dreamz-hvac .aiIssue strong {
font-size: 14px;
}
#dreamz-hvac .aiEvidence {
gap: 6px;
}
#dreamz-hvac .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-hvac .aiEvidence strong {
font-size: 9px;
}
#dreamz-hvac .aiEvidence span {
font-size: 7px;
}
#dreamz-hvac .exampleLabel {
font-size: 6px;
}
#dreamz-hvac .factoryWorkflows {
padding: 55px 0;
}
#dreamz-hvac .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-hvac .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-hvac .industryRibbonGrid {
gap: 12px;
}
#dreamz-hvac .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-hvac .featureStage {
padding: 19px 13px;
}
#dreamz-hvac .mediaTitle>.icon {
display: none;
}
#dreamz-hvac .exampleLabel {
display: none;
}
#dreamz-hvac .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-hvac .featureTabs {
display: none;
}
#dreamz-hvac .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-hvac .featureStage {
display: block;
}
#dreamz-hvac .featurePanel {
color: #000;
}
}
#dreamz-hvac #hvac-service-features-1:checked~.featureTabs label[for="hvac-service-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-service-features-1:focus-visible~.featureTabs label[for="hvac-service-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-service-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-hvac #hvac-service-features-2:checked~.featureTabs label[for="hvac-service-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-service-features-2:focus-visible~.featureTabs label[for="hvac-service-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-service-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-hvac #hvac-service-features-3:checked~.featureTabs label[for="hvac-service-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-service-features-3:focus-visible~.featureTabs label[for="hvac-service-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-service-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-hvac #hvac-service-features-4:checked~.featureTabs label[for="hvac-service-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-service-features-4:focus-visible~.featureTabs label[for="hvac-service-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-service-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-hvac #hvac-service-features-5:checked~.featureTabs label[for="hvac-service-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-service-features-5:focus-visible~.featureTabs label[for="hvac-service-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-service-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-1:checked~.featureTabs label[for="hvac-commercial-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-commercial-features-1:focus-visible~.featureTabs label[for="hvac-commercial-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-commercial-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-2:checked~.featureTabs label[for="hvac-commercial-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-commercial-features-2:focus-visible~.featureTabs label[for="hvac-commercial-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-commercial-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-3:checked~.featureTabs label[for="hvac-commercial-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-commercial-features-3:focus-visible~.featureTabs label[for="hvac-commercial-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-commercial-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-4:checked~.featureTabs label[for="hvac-commercial-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-commercial-features-4:focus-visible~.featureTabs label[for="hvac-commercial-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-commercial-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-5:checked~.featureTabs label[for="hvac-commercial-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-commercial-features-5:focus-visible~.featureTabs label[for="hvac-commercial-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-commercial-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-1:checked~.featureTabs label[for="hvac-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-ai-decisions-features-1:focus-visible~.featureTabs label[for="hvac-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-2:checked~.featureTabs label[for="hvac-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-ai-decisions-features-2:focus-visible~.featureTabs label[for="hvac-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-3:checked~.featureTabs label[for="hvac-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-ai-decisions-features-3:focus-visible~.featureTabs label[for="hvac-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-4:checked~.featureTabs label[for="hvac-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-ai-decisions-features-4:focus-visible~.featureTabs label[for="hvac-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-5:checked~.featureTabs label[for="hvac-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-hvac #hvac-ai-decisions-features-5:focus-visible~.featureTabs label[for="hvac-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-hvac #hvac-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-hvac .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .featureMediaPanels {
min-width: 0;
}
#dreamz-hvac .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-hvac .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-hvac .featureMediaPanels .windowTop strong,
#dreamz-hvac .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-hvac .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-hvac .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-hvac .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-hvac .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-hvac .featureMediaPanels .windowBody>*,
#dreamz-hvac .featureMediaPanels .spectrumGrid>*,
#dreamz-hvac .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-hvac .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-hvac .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-hvac .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-hvac .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-hvac .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-hvac .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-hvac .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-hvac .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-hvac .pin2 {
top: 88px;
right: 88px;
}
#dreamz-hvac .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-hvac .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-hvac .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-hvac .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-hvac .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-hvac .featureMediaPanels .graphNodes .node.n1,
#dreamz-hvac .featureMediaPanels .graphNodes .node.n2,
#dreamz-hvac .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-hvac .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-hvac .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-hvac .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-hvac .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-hvac .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-hvac .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-hvac .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-hvac .freshGraphic * {
box-sizing: border-box;
}
#dreamz-hvac .rfPanel,
#dreamz-hvac .aiInsightCard,
#dreamz-hvac .forecastVisualCard,
#dreamz-hvac .forecastSuggestion,
#dreamz-hvac .knowledgeTile,
#dreamz-hvac .chatConversation,
#dreamz-hvac .trainingSummary,
#dreamz-hvac .moduleCard,
#dreamz-hvac .qualityHeatCard,
#dreamz-hvac .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-hvac .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-hvac .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-hvac .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-hvac .statusPill,
#dreamz-hvac .cardTag,
#dreamz-hvac .forecastSuggestion b,
#dreamz-hvac .moduleCard b,
#dreamz-hvac .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-hvac .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-hvac .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-hvac .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-hvac .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-hvac .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-hvac .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-hvac .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-hvac .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-hvac .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-hvac .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-hvac .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-hvac .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-hvac .dot.good {
background: #298EEC;
}
#dreamz-hvac .dot.warn {
background: #F4A62A;
}
#dreamz-hvac .dot.bad {
background: #EB6B53;
}
#dreamz-hvac .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-hvac .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-hvac .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-hvac .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-hvac .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-hvac .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-hvac .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-hvac .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-hvac .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-hvac .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-hvac .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-hvac .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-hvac .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-hvac .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-hvac .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-hvac .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-hvac .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-hvac .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-hvac .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-hvac .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-hvac .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-hvac .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-hvac .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-hvac .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-hvac .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-hvac .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-hvac .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-hvac .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-hvac .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-hvac .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-hvac .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-hvac .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-hvac .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-hvac .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-hvac .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-hvac .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-hvac .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-hvac .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-hvac .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-hvac .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-hvac .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-hvac .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-hvac .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-hvac .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-hvac .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-hvac .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-hvac .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-hvac .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-hvac .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-hvac .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-hvac .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-hvac .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-hvac .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-hvac .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-hvac .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-hvac .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-hvac .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-hvac .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-hvac .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-hvac .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-hvac .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-hvac .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-hvac .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-hvac .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-hvac .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-hvac .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-hvac .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-hvac .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-hvac .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-hvac .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-hvac .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-hvac .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-hvac .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-hvac .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-hvac .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-hvac .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-hvac .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-hvac .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-hvac .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-hvac .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-hvac .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-hvac .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-hvac .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-hvac .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-hvac .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-hvac .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-hvac .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-hvac .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-hvac .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-hvac .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-hvac .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-hvac .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-hvac .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-hvac .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-hvac .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-hvac .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-hvac .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-hvac .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-hvac .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-hvac .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-hvac .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-hvac .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-hvac .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-hvac .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-hvac .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-hvac .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-hvac .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-hvac .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-hvac .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-hvac .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-hvac .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-hvac .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-hvac .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-hvac .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-hvac .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-hvac .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-hvac .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-hvac .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-hvac .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-hvac .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-hvac .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-hvac .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-hvac .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-hvac .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-hvac .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-hvac .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-hvac .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-hvac .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-hvac .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-hvac .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-hvac .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-hvac .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-hvac .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-hvac .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-hvac .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-hvac .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-hvac .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-hvac .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-hvac .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-hvac .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-hvac .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-hvac .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-hvac .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-hvac .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-hvac .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-hvac .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-hvac .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-hvac .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-hvac .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-hvac .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-hvac .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-hvac .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-hvac .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-hvac .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-hvac .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-hvac .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-hvac .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-hvac .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-hvac .rfTrackLayout,
#dreamz-hvac .rfFlowLayout,
#dreamz-hvac .rfAlertGrid,
#dreamz-hvac .rfCycleLayout,
#dreamz-hvac .rfSitesLayout,
#dreamz-hvac .aiRootLayout,
#dreamz-hvac .aiForecastLayout,
#dreamz-hvac .aiChatLayout,
#dreamz-hvac .aiTrainingLayout,
#dreamz-hvac .aiQualityLayout,
#dreamz-hvac .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-hvac .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-hvac .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-hvac .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-hvac .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-hvac .aiLink {
display: none;
}
}
#dreamz-hvac .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-hvac .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-hvac .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-hvac .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-hvac .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-hvac .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-hvac .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-hvac .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-hvac .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-hvac .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-hvac .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-hvac .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-hvac .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-hvac .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-hvac .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-hvac .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-hvac .mfgHeroContent {
min-height: 610px;
}
#dreamz-hvac .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-hvac .mfgHeroLead {
font-size: 16px;
}
#dreamz-hvac .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-hvac .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-hvac .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-hvac .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-hvac .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-hvac .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-hvac .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-hvac .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-hvac .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-hvac .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-hvac .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-hvac .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-hvac .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-hvac .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-hvac .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-hvac .mfgHero {
background: #fff;
color: #000;
}
#dreamz-hvac .mfgHeroScene,
#dreamz-hvac .mfgHeroActions {
display: none;
}
#dreamz-hvac .mfgHeroContent {
min-height: 0;
}
#dreamz-hvac .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
#dreamz-hvac #hvac-commercial .featureStage,
#dreamz-hvac #hvac-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-hvac .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-hvac .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-hvac .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-hvac .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-hvac .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-hvac .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-hvac .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-hvac .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-hvac .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-hvac .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-hvac .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-hvac .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-hvac .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-hvac .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-hvac .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-hvac .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-hvac .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-hvac .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-hvac .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-hvac .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-hvac .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-hvac .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-hvac .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-hvac .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-hvac .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-hvac .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-hvac .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-hvac .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-hvac .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-hvac .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-hvac .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-hvac .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-hvac .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-hvac .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-hvac .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-hvac .mfgGallery .flowArrow {
display: none;
}
#dreamz-hvac .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-hvac .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-hvac .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-hvac .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-hvac .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-hvac .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-hvac .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-hvac .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-hvac .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-hvac .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-hvac .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-hvac .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-hvac .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-hvac .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-hvac .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-hvac .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-hvac .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-hvac .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-hvac .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-hvac .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-hvac .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-hvac .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-hvac .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-hvac .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-hvac .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-hvac .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-hvac .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-hvac .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-hvac .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-hvac .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-hvac .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-hvac .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-hvac .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-hvac .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-hvac .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-hvac .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-hvac .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-hvac .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-hvac .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-hvac .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-hvac .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-hvac .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-hvac .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-hvac .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-hvac .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-hvac .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-hvac .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-hvac .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-hvac .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-hvac .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-hvac .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-hvac .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-hvac .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-hvac .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-hvac .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-hvac .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-hvac .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-hvac .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-hvac .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-hvac .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-hvac .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-hvac .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-hvac .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-hvac .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-hvac .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-hvac .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-hvac .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-hvac .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-hvac .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-hvac .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-hvac .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-hvac .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-hvac .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-hvac .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-hvac .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-hvac .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-hvac .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-hvac .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-hvac .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-hvac .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-hvac .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-hvac .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-hvac .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-hvac .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-hvac .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-hvac .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-hvac .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-hvac #hvac-commercial .featureStage,
#dreamz-hvac #hvac-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-hvac #hvac-commercial .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-hvac .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-hvac #hvac-commercial .featureStage,
#dreamz-hvac #hvac-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-hvac .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-hvac .mfgGallery .freshWindow {
height: auto;
}
#dreamz-hvac .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-hvac .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-hvac .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-hvac .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-hvac .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-hvac .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-hvac .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-hvac .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-hvac .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-hvac .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-hvac .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-hvac .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-hvac .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-hvac .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-hvac .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-hvac .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-hvac .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-hvac .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-hvac .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-hvac .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-hvac .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-hvac .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-hvac .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-hvac .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-hvac .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-hvac .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-hvac .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-hvac .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-hvac .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-hvac .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-hvac .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-hvac .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-hvac .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-hvac .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-hvac .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-hvac .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-hvac .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-hvac .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-hvac .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-hvac .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-hvac .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-hvac .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-hvac .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-hvac .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-hvac .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-hvac .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-hvac .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-hvac .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-hvac .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-hvac .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-hvac .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-hvac .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-hvac .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-hvac .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-hvac .hvacVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-hvac .hvacGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-hvac .hvacIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-hvac .hvacStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-hvac .hvacVisualGallery>.hvacGraphic {
display: none;
}
#dreamz-hvac #hvac-service .featureStage,
#dreamz-hvac #hvac-commercial .featureStage,
#dreamz-hvac #hvac-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-hvac #hvac-commercial .hvacVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-hvac #hvac-commercial .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-hvac .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-hvac .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-hvac .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-hvac .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
}
@media (max-width:1100px) {
#dreamz-hvac #hvac-service .featureStage,
#dreamz-hvac #hvac-commercial .featureStage,
#dreamz-hvac #hvac-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-hvac #hvac-commercial .hvacVisualGallery,
#dreamz-hvac #hvac-commercial .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-hvac .mfgHeroScene {
height: 290px;
}
#dreamz-hvac #hvac-service .featureStage,
#dreamz-hvac #hvac-commercial .featureStage,
#dreamz-hvac #hvac-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-hvac .hvacVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-hvac .hvacVisualGallery>.hvacGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-hvac #hvac-service-features-1:checked~.featureStage .hvacVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-hvac #hvac-service-features-2:checked~.featureStage .hvacVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-hvac #hvac-service-features-3:checked~.featureStage .hvacVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-hvac #hvac-service-features-4:checked~.featureStage .hvacVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-hvac #hvac-service-features-5:checked~.featureStage .hvacVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-1:checked~.featureStage .hvacVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-2:checked~.featureStage .hvacVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-3:checked~.featureStage .hvacVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-4:checked~.featureStage .hvacVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-hvac #hvac-commercial-features-5:checked~.featureStage .hvacVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-1:checked~.featureStage .hvacVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-2:checked~.featureStage .hvacVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-3:checked~.featureStage .hvacVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-4:checked~.featureStage .hvacVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-hvac #hvac-ai-decisions-features-5:checked~.featureStage .hvacVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-hvac .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-hvac .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-hvac .hvacIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-hvac .hvacGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-hvac .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-hvac .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-hvac .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-hvac .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-hvac .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-hvac .mfgHeroContent {
background: transparent;
}
#dreamz-hvac .mfgHeroScene img {
object-position: 66% 50%;
}
#dreamz-hvac .hvacIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-hvac .hvacIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-hvac .hvacGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-hvac .hvacVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-hvac .mfgHeroScene img {
object-position: 69% 50%;
}
}
@media(max-width:600px) {
#dreamz-hvac .mfgHeroScene img {
object-position: 76% 50%;
}
}  #dreamz-plumbing .industryIntroHead.compact,
#dreamz-plumbing .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-plumbing .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-plumbing .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-plumbing .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-plumbing .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-plumbing .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-plumbing .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-plumbing .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-plumbing .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-plumbing .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-plumbing .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-plumbing .windowDots {
display: flex;
gap: 5px;
}
#dreamz-plumbing .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-plumbing .windowBody {
padding: 16px;
}
#dreamz-plumbing .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-plumbing .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-plumbing .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-plumbing .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-plumbing .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-plumbing .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-plumbing .chartGridLine.l1 {
top: 34px;
}
#dreamz-plumbing .chartGridLine.l2 {
top: 65px;
}
#dreamz-plumbing .chartGridLine.l3 {
top: 96px;
}
#dreamz-plumbing .chartGridLine.l4 {
top: 127px;
}
#dreamz-plumbing .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-plumbing .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-plumbing .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-plumbing .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-plumbing .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-plumbing .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-plumbing .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-plumbing .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-plumbing .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-plumbing .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-plumbing .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-plumbing .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-plumbing .noteCard p,
#dreamz-plumbing .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-plumbing .alertStack {
display: grid;
gap: 10px;
}
#dreamz-plumbing .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-plumbing .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-plumbing .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-plumbing .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-plumbing .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-plumbing .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-plumbing .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-plumbing .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-plumbing .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-plumbing .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-plumbing .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-plumbing .scheduleBoard h4,
#dreamz-plumbing .todoBoard h4,
#dreamz-plumbing .siteBoard h4,
#dreamz-plumbing .chatPanel h4,
#dreamz-plumbing .lessonPanel h4,
#dreamz-plumbing .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-plumbing .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-plumbing .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-plumbing .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-plumbing .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-plumbing .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-plumbing .taskRow:last-child {
border-bottom: 0;
}
#dreamz-plumbing .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-plumbing .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-plumbing .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-plumbing .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-plumbing .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-plumbing .inventoryTable th,
#dreamz-plumbing .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-plumbing .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-plumbing .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-plumbing .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-plumbing .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-plumbing .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-plumbing .phoneBody {
padding: 12px;
}
#dreamz-plumbing .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-plumbing .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-plumbing .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-plumbing .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-plumbing .progressList {
display: grid;
gap: 10px;
}
#dreamz-plumbing .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-plumbing .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-plumbing .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-plumbing .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-plumbing .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-plumbing .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-plumbing .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-plumbing .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-plumbing .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-plumbing .pin1 {
top: 56px;
left: 58px;
}
#dreamz-plumbing .pin2 {
top: 88px;
right: 88px;
}
#dreamz-plumbing .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-plumbing .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-plumbing .siteRow:last-child {
border-bottom: 0;
}
#dreamz-plumbing .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-plumbing .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-plumbing .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-plumbing .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-plumbing .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-plumbing .graphNodes:before,
#dreamz-plumbing .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-plumbing .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-plumbing .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-plumbing .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-plumbing .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-plumbing .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-plumbing .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-plumbing .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-plumbing .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-plumbing .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-plumbing .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-plumbing .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-plumbing .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-plumbing .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-plumbing .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-plumbing .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-plumbing .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-plumbing .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-plumbing .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-plumbing .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-plumbing .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-plumbing .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-plumbing .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-plumbing .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-plumbing .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-plumbing .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-plumbing .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-plumbing .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-plumbing .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-plumbing .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-plumbing .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-plumbing .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-plumbing .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-plumbing .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-plumbing #plumbing-service-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-plumbing #plumbing-service-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-plumbing #plumbing-service-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-plumbing #plumbing-service-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-plumbing #plumbing-service-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-plumbing #plumbing-commercial-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-plumbing #plumbing-commercial-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-plumbing #plumbing-commercial-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-plumbing #plumbing-commercial-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-plumbing #plumbing-commercial-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-plumbing #plumbing-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-plumbing #plumbing-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-plumbing #plumbing-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-plumbing #plumbing-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-plumbing #plumbing-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-plumbing #plumbing-service-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-plumbing #plumbing-service-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-plumbing #plumbing-service-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-plumbing #plumbing-service-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-plumbing #plumbing-commercial-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-plumbing #plumbing-commercial-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-plumbing #plumbing-commercial-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-plumbing #plumbing-commercial-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-plumbing #plumbing-commercial-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-plumbing #plumbing-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-plumbing #plumbing-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-plumbing #plumbing-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-plumbing #plumbing-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-plumbing #plumbing-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-plumbing .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-plumbing .featureMediaPanels {
min-height: 0;
}
#dreamz-plumbing .inventorySplit,
#dreamz-plumbing .forecastGrid,
#dreamz-plumbing .siteGrid,
#dreamz-plumbing .spectrumGrid,
#dreamz-plumbing .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-plumbing .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-plumbing .metricGrid,
#dreamz-plumbing .lessonCards,
#dreamz-plumbing .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-plumbing .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-plumbing .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-plumbing {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-plumbing * {
box-sizing: border-box;
}
#dreamz-plumbing {
scroll-behavior: smooth;
}
#dreamz-plumbing {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-plumbing a {
color: inherit;
text-decoration: none;
}
#dreamz-plumbing .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-plumbing .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-plumbing .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-plumbing .brand span {
color: var(--brand);
}
#dreamz-plumbing .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-plumbing .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-plumbing .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-plumbing .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-plumbing .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-plumbing .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-plumbing .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-plumbing .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-plumbing .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-plumbing .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-plumbing .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-plumbing .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-plumbing .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-plumbing .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-plumbing .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-plumbing .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-plumbing .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-plumbing .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-plumbing .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-plumbing .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-plumbing .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-plumbing .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-plumbing .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-plumbing .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-plumbing .sectionHead {
margin-bottom: 44px;
}
#dreamz-plumbing .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-plumbing .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-plumbing .aiJourney h2 {
color: #fff;
}
#dreamz-plumbing .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-plumbing .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-plumbing .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-plumbing .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-plumbing .aiStep:last-child::after {
display: none;
}
#dreamz-plumbing .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-plumbing .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-plumbing .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-plumbing .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-plumbing .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-plumbing .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-plumbing .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-plumbing .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-plumbing .capability {
background: #fff;
}
#dreamz-plumbing .capability.alt {
background: var(--sky-2);
}
#dreamz-plumbing .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-plumbing .twoCol.reverse .visual {
order: 2;
}
#dreamz-plumbing .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-plumbing .visual .placeholder {
min-height: 355px;
}
#dreamz-plumbing .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-plumbing .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-plumbing details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-plumbing details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-plumbing details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-plumbing details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-plumbing details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-plumbing details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-plumbing .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-plumbing .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-plumbing .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-plumbing .darkSection h2,
#dreamz-plumbing .darkSection h3 {
color: #fff;
}
#dreamz-plumbing .darkSection .sectionHead p,
#dreamz-plumbing .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-plumbing .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-plumbing .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-plumbing .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-plumbing .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-plumbing .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-plumbing .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-plumbing .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-plumbing .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-plumbing .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-plumbing .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-plumbing .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-plumbing .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-plumbing .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-plumbing .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-plumbing .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-plumbing .benefitBand h2 {
color: #fff;
}
#dreamz-plumbing .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-plumbing .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-plumbing .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-plumbing .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-plumbing .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-plumbing .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-plumbing .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-plumbing .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-plumbing .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-plumbing .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-plumbing .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-plumbing .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-plumbing .faq {
max-width: 900px;
}
#dreamz-plumbing details {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 12px;
}
#dreamz-plumbing summary {
cursor: pointer;
font-weight: 800;
color: var(--navy);
}
#dreamz-plumbing details p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-plumbing .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-plumbing .ctaPanel h2 {
color: #fff;
}
#dreamz-plumbing .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-plumbing .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-plumbing .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-plumbing .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-plumbing .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-plumbing .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-plumbing .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-plumbing .inlineCta.dark h3 {
color: #fff;
}
#dreamz-plumbing .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-plumbing .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-plumbing .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-plumbing .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-plumbing .button.yellow:hover {
background: #FFD84D;
}
#dreamz-plumbing .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-plumbing .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-plumbing .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-plumbing .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-plumbing footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-plumbing .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-plumbing .heroGrid,
#dreamz-plumbing .twoCol,
#dreamz-plumbing .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-plumbing .twoCol.reverse .visual {
order: initial;
}
#dreamz-plumbing .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-plumbing .ratingGrid,
#dreamz-plumbing .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-plumbing .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-plumbing .aiStep:nth-child(3)::after,
#dreamz-plumbing .aiStep:last-child::after {
display: none;
}
#dreamz-plumbing .outcomeGrid,
#dreamz-plumbing .challengeGrid,
#dreamz-plumbing .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-plumbing .cards,
#dreamz-plumbing .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-plumbing .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-plumbing .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-plumbing .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-plumbing .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-plumbing .hero {
padding: 58px 0 52px;
}
#dreamz-plumbing .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-plumbing .aiStep::after {
display: none;
}
#dreamz-plumbing .logoRow,
#dreamz-plumbing .ratingGrid,
#dreamz-plumbing .awardGrid,
#dreamz-plumbing .outcomeGrid,
#dreamz-plumbing .challengeGrid,
#dreamz-plumbing .benefitGrid,
#dreamz-plumbing .cards,
#dreamz-plumbing .proofCards,
#dreamz-plumbing .integrationGrid,
#dreamz-plumbing .featureList {
grid-template-columns: 1fr;
}
#dreamz-plumbing .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-plumbing .ctaPanel {
padding: 34px 24px;
}
#dreamz-plumbing .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-plumbing .inlineCtaActions {
width: 100%;
}
#dreamz-plumbing .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-plumbing {
--muted: #526A7C;
--shadow: none;
}
#dreamz-plumbing {
background: var(--sky-2);
}
#dreamz-plumbing p {
margin-bottom: 0;
}
#dreamz-plumbing [id] {
scroll-margin-top: 94px;
}
#dreamz-plumbing svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-plumbing .wrap>*,
#dreamz-plumbing .heroGrid>*,
#dreamz-plumbing .twoCol>*,
#dreamz-plumbing .ctaPanel>* {
min-width: 0;
}
#dreamz-plumbing .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-plumbing .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-plumbing .skipLink:focus {
transform: none;
}
#dreamz-plumbing a:focus-visible,
#dreamz-plumbing summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-plumbing .darkSection a:focus-visible,
#dreamz-plumbing .darkSection summary:focus-visible,
#dreamz-plumbing .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-plumbing .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-plumbing .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-plumbing .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-plumbing .brandName>span {
color: var(--brand-dark);
}
#dreamz-plumbing .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-plumbing .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-plumbing .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-plumbing .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-plumbing .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-plumbing .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-plumbing .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-plumbing .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-plumbing .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-plumbing .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-plumbing .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-plumbing .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-plumbing .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-plumbing .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-plumbing .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-plumbing .clientBand {
padding: 27px 0;
}
#dreamz-plumbing .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-plumbing .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-plumbing .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-plumbing .logoBox.wide {
font-size: 12px;
}
#dreamz-plumbing .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-plumbing h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-plumbing .sectionHead {
margin-bottom: 36px;
}
#dreamz-plumbing .eyebrow {
line-height: 1.5;
}
#dreamz-plumbing .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-plumbing .aiStep {
min-height: 162px;
}
#dreamz-plumbing .aiStep strong {
line-height: 1.35;
}
#dreamz-plumbing .aiStep span {
line-height: 1.65;
}
#dreamz-plumbing .aiCallout {
margin-top: 24px;
}
#dreamz-plumbing .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-plumbing .outcome>.icon {
color: var(--navy);
}
#dreamz-plumbing .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-plumbing .awardItem>.icon {
color: var(--navy);
}
#dreamz-plumbing .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-plumbing .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-plumbing .twoCol.reverse .visual {
order: -1;
}
#dreamz-plumbing .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-plumbing .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-plumbing .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-plumbing .featureList {
gap: 13px 18px;
}
#dreamz-plumbing .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-plumbing .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-plumbing .check .icon {
width: 14px;
height: 14px;
}
#dreamz-plumbing details.capabilityMore {
margin-bottom: 0;
}
#dreamz-plumbing .capabilityMore summary {
min-height: 34px;
}
#dreamz-plumbing .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-plumbing .textCta {
font-size: 14px;
}
#dreamz-plumbing .visual {
min-width: 0;
}
#dreamz-plumbing .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-plumbing .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-plumbing .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-plumbing .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-plumbing .panelBody {
padding: 20px;
}
#dreamz-plumbing .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-plumbing .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-plumbing .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-plumbing .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-plumbing .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-plumbing .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-plumbing .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-plumbing .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-plumbing .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-plumbing .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-plumbing .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-plumbing .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-plumbing .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-plumbing .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-plumbing .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-plumbing .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-plumbing .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-plumbing .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-plumbing .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-plumbing .dataRow:last-child {
border-bottom: 0;
}
#dreamz-plumbing .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-plumbing .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-plumbing .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-plumbing .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-plumbing .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-plumbing .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-plumbing .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-plumbing .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-plumbing .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-plumbing .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-plumbing .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-plumbing .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-plumbing .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-plumbing .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-plumbing .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-plumbing .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-plumbing .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-plumbing .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-plumbing .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-plumbing .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-plumbing .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-plumbing .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-plumbing .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-plumbing .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-plumbing .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-plumbing .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-plumbing .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-plumbing .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-plumbing .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-plumbing .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-plumbing .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-plumbing .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-plumbing .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-plumbing .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-plumbing .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-plumbing .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-plumbing .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-plumbing .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-plumbing .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-plumbing .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-plumbing .promptList {
display: grid;
gap: 10px;
}
#dreamz-plumbing .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-plumbing .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-plumbing .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-plumbing .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-plumbing .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-plumbing .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-plumbing .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-plumbing .quoteTable th,
#dreamz-plumbing .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-plumbing .quoteTable td:first-child {
width: 64%;
}
#dreamz-plumbing .quoteTable th:last-child,
#dreamz-plumbing .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-plumbing .quoteTable strong {
font-size: 11px;
}
#dreamz-plumbing .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-plumbing .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-plumbing .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-plumbing .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-plumbing .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-plumbing .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-plumbing .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-plumbing .orderJourney {
margin: 20px 0;
}
#dreamz-plumbing .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-plumbing .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-plumbing .journeyRow:last-child:before {
display: none;
}
#dreamz-plumbing .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-plumbing .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-plumbing .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-plumbing .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-plumbing .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-plumbing .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-plumbing .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-plumbing .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-plumbing .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-plumbing .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-plumbing .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-plumbing .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-plumbing .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-plumbing .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-plumbing .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-plumbing .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-plumbing .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-plumbing .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-plumbing .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-plumbing .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-plumbing .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-plumbing .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-plumbing .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-plumbing .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-plumbing .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-plumbing .customerTimeline strong {
color: #fff;
}
#dreamz-plumbing .customerTimeline small {
color: #BFBFBF;
}
#dreamz-plumbing .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-plumbing .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-plumbing .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-plumbing .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-plumbing .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-plumbing .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-plumbing .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-plumbing .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-plumbing .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-plumbing .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-plumbing .chartTitle strong {
font-size: 12px;
}
#dreamz-plumbing .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-plumbing .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-plumbing .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-plumbing .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-plumbing .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-plumbing .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-plumbing .inlineCtaActions {
max-width: 42%;
}
#dreamz-plumbing .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-plumbing .inlineCta h3 {
line-height: 1.35;
}
#dreamz-plumbing .card {
box-shadow: none;
}
#dreamz-plumbing .cardIcon {
box-shadow: none;
}
#dreamz-plumbing .card h3 {
font-size: 22px;
}
#dreamz-plumbing .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-plumbing .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-plumbing .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-plumbing .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-plumbing .ratingBand {
padding: 34px 0;
}
#dreamz-plumbing .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-plumbing .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-plumbing .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-plumbing .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-plumbing .ratingItem:first-child {
border-left: 0;
}
#dreamz-plumbing .proofCard h3 {
font-size: 23px;
}
#dreamz-plumbing .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-plumbing .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-plumbing .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-plumbing .integration {
min-height: 98px;
}
#dreamz-plumbing .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-plumbing .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-plumbing .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-plumbing .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-plumbing .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-plumbing .finalActions {
display: grid;
gap: 11px;
}
#dreamz-plumbing .finalActions .button {
white-space: nowrap;
}
#dreamz-plumbing .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
@media (max-width:1100px) {
#dreamz-plumbing .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-plumbing .heroGrid {
gap: 30px;
}
#dreamz-plumbing .twoCol {
gap: 32px;
}
#dreamz-plumbing .panelBody {
padding: 16px;
}
#dreamz-plumbing .panelHead {
padding: 16px;
}
#dreamz-plumbing .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-plumbing .pipelineColumns {
gap: 7px;
}
#dreamz-plumbing .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-plumbing .heroGrid,
#dreamz-plumbing .twoCol,
#dreamz-plumbing .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .heroGrid {
gap: 36px;
}
#dreamz-plumbing .hero .lead {
max-width: 690px;
}
#dreamz-plumbing .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-plumbing .twoCol {
gap: 34px;
}
#dreamz-plumbing .twoCol.reverse .visual {
order: initial;
}
#dreamz-plumbing .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-plumbing .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-plumbing .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-plumbing .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-plumbing .ratingSectionGrid {
gap: 20px;
}
#dreamz-plumbing .inlineCta {
align-items: flex-start;
}
#dreamz-plumbing .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-plumbing .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-plumbing .card {
padding: 22px;
}
#dreamz-plumbing .card h3 {
font-size: 21px;
}
#dreamz-plumbing .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-plumbing .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-plumbing .cards,
#dreamz-plumbing .proofCards {
grid-template-columns: 1fr;
}
#dreamz-plumbing .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-plumbing .inlineCta {
flex-direction: column;
}
#dreamz-plumbing .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-plumbing .inlineCtaActions .button {
flex: 1;
}
#dreamz-plumbing .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-plumbing .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-plumbing .wrap {
width: calc(100% - 32px);
}
#dreamz-plumbing [id] {
scroll-margin-top: 82px;
}
#dreamz-plumbing .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-plumbing .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-plumbing .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-plumbing .hero {
padding: 51px 0 48px;
}
#dreamz-plumbing .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-plumbing .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-plumbing .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-plumbing .hero .microcopy {
font-size: 11px;
}
#dreamz-plumbing .heroPills span {
font-size: 9px;
}
#dreamz-plumbing .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-plumbing .sectionHead p {
font-size: 16px;
}
#dreamz-plumbing .copy h2 {
font-size: 34px;
}
#dreamz-plumbing .copy p {
font-size: 15px;
}
#dreamz-plumbing .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-plumbing .logoBox {
min-height: 53px;
}
#dreamz-plumbing .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-plumbing .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-plumbing .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-plumbing .aiStep strong {
font-size: 13px;
}
#dreamz-plumbing .aiStep span {
font-size: 11px;
}
#dreamz-plumbing .aiStep::after {
display: none;
}
#dreamz-plumbing .outcomeGrid,
#dreamz-plumbing .challengeGrid,
#dreamz-plumbing .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-plumbing .outcome {
padding: 24px;
}
#dreamz-plumbing .outcome strong {
font-size: 22px;
}
#dreamz-plumbing .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-plumbing .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-plumbing .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-plumbing .featureList,
#dreamz-plumbing .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-plumbing .featureItem {
font-size: 13px;
}
#dreamz-plumbing .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-plumbing .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-plumbing .panelHead {
padding: 15px 13px;
}
#dreamz-plumbing .panelHead>strong {
font-size: 12px;
}
#dreamz-plumbing .panelBody {
padding: 14px;
}
#dreamz-plumbing .productPanel {
border-radius: 16px;
}
#dreamz-plumbing .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-plumbing .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-plumbing .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-plumbing .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-plumbing .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-plumbing .deal strong {
font-size: 10px;
}
#dreamz-plumbing .deal small {
font-size: 9px;
}
#dreamz-plumbing .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-plumbing .mobileWorkspace {
gap: 12px;
}
#dreamz-plumbing .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-plumbing .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-plumbing .sideTile {
padding: 10px;
}
#dreamz-plumbing .sideTile strong {
font-size: 10px;
}
#dreamz-plumbing .sideTile p {
font-size: 9px;
}
#dreamz-plumbing .mobileHeader strong {
font-size: 15px;
}
#dreamz-plumbing .mobileAccount strong {
font-size: 10px;
}
#dreamz-plumbing .mobileAccount small {
font-size: 7px;
}
#dreamz-plumbing .phoneDevice .rowIcon {
display: none;
}
#dreamz-plumbing .quoteTable th,
#dreamz-plumbing .quoteTable td {
padding: 12px 4px;
}
#dreamz-plumbing .quoteTable strong {
font-size: 10px;
}
#dreamz-plumbing .quoteTable small {
font-size: 8px;
}
#dreamz-plumbing .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-plumbing .docHeader strong {
font-size: 17px;
}
#dreamz-plumbing .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-plumbing .miniFlow span {
padding: 6px;
}
#dreamz-plumbing .rowCopy strong {
font-size: 10px;
}
#dreamz-plumbing .rowCopy small {
font-size: 8px;
}
#dreamz-plumbing .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-plumbing .miniStats {
gap: 7px;
}
#dreamz-plumbing .miniStats>div {
padding: 9px;
}
#dreamz-plumbing .miniStats strong {
font-size: 18px;
}
#dreamz-plumbing .miniStats span {
font-size: 8px;
}
#dreamz-plumbing .collectionStats>div {
padding: 13px;
}
#dreamz-plumbing .collectionStats strong {
font-size: 24px;
}
#dreamz-plumbing .customerHeader strong {
font-size: 17px;
}
#dreamz-plumbing .customerFacts>div {
padding: 10px;
}
#dreamz-plumbing .customerFacts strong {
font-size: 12px;
}
#dreamz-plumbing .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-plumbing .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-plumbing .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-plumbing .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-plumbing .integration small {
font-size: 9px;
}
#dreamz-plumbing .faq details {
padding: 17px;
}
#dreamz-plumbing .faq summary {
font-size: 14px;
gap: 14px;
}
#dreamz-plumbing .faq details p {
font-size: 13px;
}
#dreamz-plumbing .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-plumbing .ctaPanel p {
font-size: 15px;
}
#dreamz-plumbing .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-plumbing .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-plumbing .contextSection {
padding: 0 0 24px;
}
#dreamz-plumbing .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-plumbing .wrap {
width: calc(100% - 24px);
}
#dreamz-plumbing .brand {
font-size: 18px;
}
#dreamz-plumbing .brandMark {
width: 25px;
height: 25px;
}
#dreamz-plumbing .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-plumbing .copy h2 {
font-size: 31px;
}
#dreamz-plumbing .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-plumbing .phoneDevice {
width: 210px;
}
#dreamz-plumbing .phoneDevice .rowIcon {
display: grid;
}
#dreamz-plumbing .mobileSide {
gap: 8px;
}
#dreamz-plumbing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-plumbing .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-plumbing .sideTile p {
margin: 0;
}
#dreamz-plumbing .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-plumbing .collectionStats strong {
font-size: 21px;
}
#dreamz-plumbing .inventoryIntro strong {
font-size: 14px;
}
#dreamz-plumbing .dataRow {
gap: 7px;
}
#dreamz-plumbing .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-plumbing .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-plumbing {
scroll-behavior: auto;
}
}
#dreamz-plumbing {
background: var(--sky-2);
}
#dreamz-plumbing .hero .eyebrow {
max-width: 100%;
}
#dreamz-plumbing .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-plumbing .ganttIllustration,
#dreamz-plumbing .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-plumbing .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-plumbing .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-plumbing .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-plumbing .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-plumbing .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-plumbing .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-plumbing .comparisonTable th,
#dreamz-plumbing .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .comparisonTable th:first-child {
width: 23%;
}
#dreamz-plumbing .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-plumbing .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-plumbing .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-plumbing .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-plumbing .card,
#dreamz-plumbing .proofCard,
#dreamz-plumbing .productPanel,
#dreamz-plumbing .outcome,
#dreamz-plumbing .benefit {
box-shadow: none;
}
#dreamz-plumbing .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-plumbing .hero .eyebrow {
font-size: 10px;
}
#dreamz-plumbing .comparisonTable {
font-size: 11px;
}
#dreamz-plumbing .comparisonTable th,
#dreamz-plumbing .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-plumbing .comparisonTable th:first-child {
width: 24%;
}
#dreamz-plumbing .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-plumbing .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
}
#dreamz-plumbing .scheduleIllustration,
#dreamz-plumbing .analyticsIllustration,
#dreamz-plumbing .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-plumbing .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-plumbing .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-plumbing .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-plumbing .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-plumbing .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-plumbing .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-plumbing .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-plumbing .darkSection .textCta {
color: var(--yellow);
}
#dreamz-plumbing .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-plumbing .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-plumbing .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-plumbing .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-plumbing .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-plumbing .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-plumbing .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-plumbing .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-plumbing .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-plumbing .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-plumbing .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-plumbing .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-plumbing .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-plumbing .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-plumbing .phoneDevice {
max-width: 100%;
}
#dreamz-plumbing .heroPills {
line-height: 1.55;
}
#dreamz-plumbing .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-plumbing .plantFacts {
gap: 7px;
}
#dreamz-plumbing .plantFacts>div {
padding: 9px;
}
#dreamz-plumbing .plantFacts strong {
font-size: 11px;
}
#dreamz-plumbing .scanSummary {
padding: 12px;
}
#dreamz-plumbing .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-plumbing .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-plumbing .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-plumbing .phoneDevice .rowIcon {
display: grid;
}
#dreamz-plumbing .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-plumbing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-plumbing .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-plumbing .sideTile strong {
font-size: 12px;
}
#dreamz-plumbing .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-plumbing .topbar,
#dreamz-plumbing .heroActions,
#dreamz-plumbing .finalActions,
#dreamz-plumbing .contextSection,
#dreamz-plumbing .valueCtaSection {
display: none;
}
#dreamz-plumbing .hero {
padding-top: 20px;
}
}
#dreamz-plumbing {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-plumbing p {
margin: 0;
}
#dreamz-plumbing main {
display: block;
}
#dreamz-plumbing .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-plumbing .heroAccent {
color: var(--black);
}
#dreamz-plumbing .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-plumbing .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-plumbing .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-plumbing .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-plumbing .microcopy {
margin-top: 14px;
}
#dreamz-plumbing .heroPills {
margin-top: 13px;
}
#dreamz-plumbing .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-plumbing .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-plumbing .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-plumbing .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-plumbing .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-plumbing .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-plumbing .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-plumbing .clientBand {
padding: 24px 0;
}
#dreamz-plumbing .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-plumbing .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-plumbing .logoBox.wide {
font-size: 15px;
}
#dreamz-plumbing .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-plumbing .sectionHead p {
margin: 17px 0 0;
}
#dreamz-plumbing .copy p {
margin: 16px 0 0;
}
#dreamz-plumbing .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-plumbing .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-plumbing .aiJourney {
background: var(--black);
}
#dreamz-plumbing .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-plumbing .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-plumbing .productPanel {
border-radius: 18px;
}
#dreamz-plumbing .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-plumbing .panelHead>strong {
font-size: 13px;
}
#dreamz-plumbing .sampleTag {
font-size: 9px;
}
#dreamz-plumbing .panelBody {
padding: 21px;
}
#dreamz-plumbing .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-plumbing .docHeader {
padding-bottom: 16px;
}
#dreamz-plumbing .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-plumbing .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-plumbing .smallLabel {
font-size: 9px;
}
#dreamz-plumbing .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-plumbing .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-plumbing .dataRow {
padding: 14px 0;
}
#dreamz-plumbing .statusPill {
font-size: 8px;
}
#dreamz-plumbing .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-plumbing .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-plumbing .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-plumbing .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-plumbing .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-plumbing .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-plumbing .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-plumbing .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-plumbing .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-plumbing .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-plumbing .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-plumbing .hierarchy strong {
color: var(--navy);
}
#dreamz-plumbing .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-plumbing .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-plumbing .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-plumbing .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-plumbing .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-plumbing .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-plumbing .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-plumbing .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-plumbing .mobileAccount small {
font-size: 9px;
}
#dreamz-plumbing .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-plumbing .sideTile strong {
font-size: 12px;
}
#dreamz-plumbing .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-plumbing .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-plumbing .mobileAction {
font-size: 9px;
}
#dreamz-plumbing .journeyRow strong {
font-size: 13px;
}
#dreamz-plumbing .journeyRow small {
font-size: 11px;
}
#dreamz-plumbing .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-plumbing .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-plumbing .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-plumbing .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-plumbing .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-plumbing .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-plumbing .utilityReadout small {
font-size: 12px;
}
#dreamz-plumbing .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-plumbing .darkSection {
background: var(--black);
}
#dreamz-plumbing .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-plumbing .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-plumbing .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-plumbing .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-plumbing .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-plumbing .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-plumbing .assistantHead small {
font-size: 11px;
}
#dreamz-plumbing .assistantNote {
font-size: 11px;
}
#dreamz-plumbing .reportTags span {
font-size: 10px;
}
#dreamz-plumbing .card p {
margin: 12px 0 0;
}
#dreamz-plumbing .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-plumbing .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-plumbing .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-plumbing .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-plumbing .cards>.card p {
padding-bottom: 22px;
}
#dreamz-plumbing .benefitBand {
background: var(--black);
}
#dreamz-plumbing .benefit {
background: var(--black-soft);
}
#dreamz-plumbing .inlineCta h3 {
font-size: 20px;
}
#dreamz-plumbing .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-plumbing .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-plumbing .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-plumbing .valueCtaSection {
padding: 32px 0;
}
#dreamz-plumbing .proofCard p {
margin-top: 15px;
}
#dreamz-plumbing .proofCard h3 {
font-size: 23px;
}
#dreamz-plumbing .integrationNote {
margin-top: 23px;
}
#dreamz-plumbing .faq details {
padding: 21px 22px;
}
#dreamz-plumbing .faq details p {
margin-top: 12px;
}
#dreamz-plumbing .ctaPanel {
background: var(--black);
}
#dreamz-plumbing .ctaPanel p {
margin-top: 16px;
}
#dreamz-plumbing .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-plumbing .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-plumbing a:hover {
text-decoration: none;
}
#dreamz-plumbing .textCta:hover {
color: var(--navy);
}
#dreamz-plumbing .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-plumbing .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-plumbing .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-plumbing .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-plumbing .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-plumbing .heroVisual {
max-width: 548px;
}
#dreamz-plumbing .hero .lead {
max-width: 700px;
}
#dreamz-plumbing .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-plumbing .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-plumbing .logoBox:last-child {
grid-column: auto;
}
#dreamz-plumbing .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-plumbing .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-plumbing .inlineCtaActions .button {
flex: 1;
}
#dreamz-plumbing .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-plumbing .hero {
padding: 28px 0 40px;
}
#dreamz-plumbing .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-plumbing .heroActions {
gap: 10px;
}
#dreamz-plumbing .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-plumbing .breadcrumb {
margin-bottom: 21px;
}
#dreamz-plumbing .hero .eyebrow {
font-size: 11px;
}
#dreamz-plumbing .heroVisual {
max-width: 480px;
}
#dreamz-plumbing .heroPills {
row-gap: 9px;
}
#dreamz-plumbing .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-plumbing .heroPills span+span {
padding-left: 7px;
}
#dreamz-plumbing .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-plumbing .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-plumbing .clientBand {
padding: 25px 0;
}
#dreamz-plumbing .copy h2 {
font-size: 33px;
}
#dreamz-plumbing .panelBody {
padding: 16px;
}
#dreamz-plumbing .panelHead {
padding: 15px;
}
#dreamz-plumbing .panelHead>strong {
font-size: 12px;
}
#dreamz-plumbing .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-plumbing .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-plumbing .docHeader strong {
font-size: 18px;
}
#dreamz-plumbing .docHeader small {
font-size: 10px;
}
#dreamz-plumbing .rowCopy strong {
font-size: 11px;
}
#dreamz-plumbing .rowCopy small {
font-size: 10px;
}
#dreamz-plumbing .miniStats {
gap: 7px;
}
#dreamz-plumbing .miniStats strong {
font-size: 21px;
}
#dreamz-plumbing .miniStats span {
font-size: 9px;
}
#dreamz-plumbing .miniStats>div {
padding: 10px 8px;
}
#dreamz-plumbing .plantFacts {
gap: 8px;
}
#dreamz-plumbing .plantFacts>div {
padding: 10px;
}
#dreamz-plumbing .plantFacts strong {
font-size: 11px;
}
#dreamz-plumbing .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-plumbing .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-plumbing .utilityReadout span {
font-size: 8px;
}
#dreamz-plumbing .utilityReadout strong {
font-size: 24px;
}
#dreamz-plumbing .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-plumbing .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-plumbing .comparisonTable {
font-size: 11px;
}
#dreamz-plumbing .comparisonTable th,
#dreamz-plumbing .comparisonTable td {
padding: 13px 9px;
}
#dreamz-plumbing .contextSection {
padding: 0 0 22px;
}
#dreamz-plumbing .valueCtaSection {
padding: 25px 0;
}
#dreamz-plumbing .inlineCtaActions {
flex-direction: column;
}
#dreamz-plumbing .inlineCtaActions .button {
width: 100%;
}
#dreamz-plumbing .faq details {
padding: 18px;
}
#dreamz-plumbing .faq details p {
font-size: 14px;
}
}
@media (max-width:440px) {
#dreamz-plumbing .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-plumbing .phoneDevice {
width: 222px;
}
#dreamz-plumbing .phoneDevice .rowIcon {
display: grid;
}
#dreamz-plumbing .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-plumbing .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-plumbing .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-plumbing .sideTile p {
margin: 0;
}
#dreamz-plumbing .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-plumbing .dataRow {
gap: 8px;
}
#dreamz-plumbing .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-plumbing .miniStats strong {
font-size: 19px;
}
#dreamz-plumbing .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-plumbing .heroActions .button {
width: 100%;
}
#dreamz-plumbing .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-plumbing .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-plumbing .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-plumbing .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-plumbing .aiStep span {
font-size: 13px;
}
#dreamz-plumbing .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-plumbing {
background: var(--white);
}
#dreamz-plumbing img {
display: block;
max-width: 100%;
}
#dreamz-plumbing .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-plumbing .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-plumbing .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-plumbing .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-plumbing .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-plumbing .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-plumbing .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-plumbing .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-plumbing .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-plumbing .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-plumbing .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-plumbing .industryIntro {
padding: 78px 0 66px;
}
#dreamz-plumbing .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-plumbing .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-plumbing .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-plumbing .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-plumbing .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-plumbing .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-plumbing .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-plumbing .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-plumbing .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-plumbing .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-plumbing .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-plumbing .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-plumbing .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-plumbing .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-plumbing .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-plumbing .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-plumbing .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-plumbing .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-plumbing .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-plumbing .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-plumbing .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-plumbing .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-plumbing .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-plumbing .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-plumbing .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-plumbing .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-plumbing .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-plumbing .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-plumbing .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-plumbing .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-plumbing .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-plumbing .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-plumbing .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-plumbing .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-plumbing .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-plumbing .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-plumbing .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-plumbing .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-plumbing .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-plumbing .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-plumbing .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-plumbing .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-plumbing .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-plumbing .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-plumbing .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-plumbing .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .rfidSpotlight {
background: #fff;
}
#dreamz-plumbing .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-plumbing .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-plumbing .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-plumbing .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-plumbing .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-plumbing .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-plumbing .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-plumbing .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-plumbing .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-plumbing .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-plumbing .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-plumbing .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-plumbing .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-plumbing .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-plumbing .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-plumbing .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-plumbing .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-plumbing .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-plumbing .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-plumbing .featurePanel {
display: none;
}
#dreamz-plumbing .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-plumbing .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-plumbing .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-plumbing .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-plumbing .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-plumbing .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-plumbing .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-plumbing .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-plumbing .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-plumbing .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-plumbing .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-plumbing .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-plumbing .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-plumbing .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-plumbing .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-plumbing .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-plumbing .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-plumbing .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-plumbing .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-plumbing .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-plumbing .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-plumbing .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-plumbing .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-plumbing .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-plumbing .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-plumbing .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-plumbing .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-plumbing .aiReviewBody {
padding: 18px;
}
#dreamz-plumbing .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-plumbing .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-plumbing .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-plumbing .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-plumbing .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-plumbing .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-plumbing .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-plumbing .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-plumbing .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-plumbing .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-plumbing .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-plumbing .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-plumbing .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-plumbing .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-plumbing .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-plumbing .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-plumbing .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-plumbing .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-plumbing .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-plumbing .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-plumbing .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-plumbing .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-plumbing .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-plumbing .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-plumbing .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-plumbing .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-plumbing .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-plumbing .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-plumbing .workflowDetails .featureList,
#dreamz-plumbing .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-plumbing .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-plumbing .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-plumbing .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-plumbing #plumbing-connected-tools {
background: #fff;
}
#dreamz-plumbing #plumbing-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-plumbing .featureTab,
#dreamz-plumbing .industryPriority,
#dreamz-plumbing summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-plumbing .industryIntroHead {
gap: 30px;
}
#dreamz-plumbing .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-plumbing .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-plumbing .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-plumbing .factoryWorkflow {
padding: 22px;
}
#dreamz-plumbing .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-plumbing .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-plumbing .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-plumbing .industryPriorityGrid {
gap: 14px;
}
#dreamz-plumbing .industryPriority {
padding: 22px 19px;
}
#dreamz-plumbing .industryPriority h3 {
font-size: 21px;
}
#dreamz-plumbing .industryPriority p {
font-size: 12px;
}
#dreamz-plumbing .priorityLink {
font-size: 10px;
}
#dreamz-plumbing .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-plumbing .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-plumbing .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-plumbing .vedaUseCases>div {
display: block;
}
#dreamz-plumbing .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-plumbing .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-plumbing .featureTabs {
gap: 8px;
}
#dreamz-plumbing .featureTab {
min-height: 108px;
}
#dreamz-plumbing .featureStage,
#dreamz-plumbing .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-plumbing .rfidSpotlight .spotlightMedia,
#dreamz-plumbing .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-plumbing .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-plumbing .featurePanel {
min-height: 0;
}
#dreamz-plumbing .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-plumbing .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-plumbing .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-plumbing .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-plumbing .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-plumbing .clientBand {
padding: 22px 0;
}
#dreamz-plumbing .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-plumbing .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-plumbing .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-plumbing .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-plumbing .industryIntro {
padding: 53px 0;
}
#dreamz-plumbing .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-plumbing .industryIntroHead>p {
font-size: 14px;
}
#dreamz-plumbing .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-plumbing .industryPriority {
padding: 23px;
}
#dreamz-plumbing .industryPriority h3 {
font-size: 24px;
}
#dreamz-plumbing .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-plumbing .industryPriority p {
font-size: 13px;
}
#dreamz-plumbing .priorityLink {
font-size: 11px;
}
#dreamz-plumbing .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-plumbing .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-plumbing .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-plumbing .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-plumbing .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-plumbing .vedaUseCases>div {
display: flex;
}
#dreamz-plumbing .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-plumbing .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-plumbing .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-plumbing .vedaMessage.user {
margin-left: 25px;
}
#dreamz-plumbing .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-plumbing .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-plumbing .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-plumbing .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-plumbing .spotlightHead h2 {
font-size: 32px;
}
#dreamz-plumbing .spotlightHead>p {
font-size: 14px;
}
#dreamz-plumbing .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-plumbing .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-plumbing .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-plumbing .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-plumbing .featurePanel h3 {
font-size: 24px;
}
#dreamz-plumbing .featurePanel>p {
font-size: 13px;
}
#dreamz-plumbing .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-plumbing .spotlightChecks>li {
font-size: 12px;
}
#dreamz-plumbing .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-plumbing .spotlightActions .button {
width: 100%;
}
#dreamz-plumbing .spotlightScope {
font-size: 10px;
}
#dreamz-plumbing .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-plumbing .mediaTitle strong {
font-size: 11px;
}
#dreamz-plumbing .mediaTitle div>span {
font-size: 8px;
}
#dreamz-plumbing .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-plumbing .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-plumbing .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-plumbing .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-plumbing .aiReviewBody {
padding: 13px;
}
#dreamz-plumbing .aiIssue {
padding: 13px;
}
#dreamz-plumbing .aiIssue strong {
font-size: 14px;
}
#dreamz-plumbing .aiEvidence {
gap: 6px;
}
#dreamz-plumbing .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-plumbing .aiEvidence strong {
font-size: 9px;
}
#dreamz-plumbing .aiEvidence span {
font-size: 7px;
}
#dreamz-plumbing .exampleLabel {
font-size: 6px;
}
#dreamz-plumbing .factoryWorkflows {
padding: 55px 0;
}
#dreamz-plumbing .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-plumbing .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-plumbing .industryRibbonGrid {
gap: 12px;
}
#dreamz-plumbing .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-plumbing .spotlightHead h2 {
font-size: 29px;
}
#dreamz-plumbing .featureStage {
padding: 19px 13px;
}
#dreamz-plumbing .mediaTitle>.icon {
display: none;
}
#dreamz-plumbing .exampleLabel {
display: none;
}
#dreamz-plumbing .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-plumbing .featureTabs {
display: none;
}
#dreamz-plumbing .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-plumbing .featureStage {
display: block;
}
#dreamz-plumbing .featurePanel {
color: #000;
}
}
#dreamz-plumbing #plumbing-service-features-1:checked~.featureTabs label[for="plumbing-service-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-service-features-1:focus-visible~.featureTabs label[for="plumbing-service-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-service-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-2:checked~.featureTabs label[for="plumbing-service-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-service-features-2:focus-visible~.featureTabs label[for="plumbing-service-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-service-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-3:checked~.featureTabs label[for="plumbing-service-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-service-features-3:focus-visible~.featureTabs label[for="plumbing-service-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-service-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-4:checked~.featureTabs label[for="plumbing-service-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-service-features-4:focus-visible~.featureTabs label[for="plumbing-service-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-service-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-5:checked~.featureTabs label[for="plumbing-service-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-service-features-5:focus-visible~.featureTabs label[for="plumbing-service-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-service-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-1:checked~.featureTabs label[for="plumbing-commercial-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-commercial-features-1:focus-visible~.featureTabs label[for="plumbing-commercial-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-commercial-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-2:checked~.featureTabs label[for="plumbing-commercial-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-commercial-features-2:focus-visible~.featureTabs label[for="plumbing-commercial-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-commercial-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-3:checked~.featureTabs label[for="plumbing-commercial-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-commercial-features-3:focus-visible~.featureTabs label[for="plumbing-commercial-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-commercial-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-4:checked~.featureTabs label[for="plumbing-commercial-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-commercial-features-4:focus-visible~.featureTabs label[for="plumbing-commercial-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-commercial-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-5:checked~.featureTabs label[for="plumbing-commercial-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-commercial-features-5:focus-visible~.featureTabs label[for="plumbing-commercial-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-commercial-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-1:checked~.featureTabs label[for="plumbing-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-ai-decisions-features-1:focus-visible~.featureTabs label[for="plumbing-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-2:checked~.featureTabs label[for="plumbing-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-ai-decisions-features-2:focus-visible~.featureTabs label[for="plumbing-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-3:checked~.featureTabs label[for="plumbing-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-ai-decisions-features-3:focus-visible~.featureTabs label[for="plumbing-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-4:checked~.featureTabs label[for="plumbing-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-ai-decisions-features-4:focus-visible~.featureTabs label[for="plumbing-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-5:checked~.featureTabs label[for="plumbing-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-plumbing #plumbing-ai-decisions-features-5:focus-visible~.featureTabs label[for="plumbing-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-plumbing #plumbing-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-plumbing .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .featureMediaPanels {
min-width: 0;
}
#dreamz-plumbing .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-plumbing .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-plumbing .featureMediaPanels .windowTop strong,
#dreamz-plumbing .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-plumbing .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-plumbing .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-plumbing .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-plumbing .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-plumbing .featureMediaPanels .windowBody>*,
#dreamz-plumbing .featureMediaPanels .spectrumGrid>*,
#dreamz-plumbing .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-plumbing .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-plumbing .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-plumbing .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-plumbing .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-plumbing .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-plumbing .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-plumbing .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-plumbing .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-plumbing .pin2 {
top: 88px;
right: 88px;
}
#dreamz-plumbing .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-plumbing .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-plumbing .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-plumbing .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-plumbing .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-plumbing .featureMediaPanels .graphNodes .node.n1,
#dreamz-plumbing .featureMediaPanels .graphNodes .node.n2,
#dreamz-plumbing .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-plumbing .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-plumbing .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-plumbing .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-plumbing .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-plumbing .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-plumbing .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-plumbing .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-plumbing .freshGraphic * {
box-sizing: border-box;
}
#dreamz-plumbing .rfPanel,
#dreamz-plumbing .aiInsightCard,
#dreamz-plumbing .forecastVisualCard,
#dreamz-plumbing .forecastSuggestion,
#dreamz-plumbing .knowledgeTile,
#dreamz-plumbing .chatConversation,
#dreamz-plumbing .trainingSummary,
#dreamz-plumbing .moduleCard,
#dreamz-plumbing .qualityHeatCard,
#dreamz-plumbing .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-plumbing .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-plumbing .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-plumbing .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-plumbing .statusPill,
#dreamz-plumbing .cardTag,
#dreamz-plumbing .forecastSuggestion b,
#dreamz-plumbing .moduleCard b,
#dreamz-plumbing .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-plumbing .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-plumbing .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-plumbing .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-plumbing .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-plumbing .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-plumbing .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-plumbing .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-plumbing .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-plumbing .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-plumbing .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-plumbing .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-plumbing .dot.good {
background: #298EEC;
}
#dreamz-plumbing .dot.warn {
background: #F4A62A;
}
#dreamz-plumbing .dot.bad {
background: #EB6B53;
}
#dreamz-plumbing .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-plumbing .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-plumbing .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-plumbing .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-plumbing .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-plumbing .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-plumbing .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-plumbing .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-plumbing .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-plumbing .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-plumbing .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-plumbing .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-plumbing .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-plumbing .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-plumbing .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-plumbing .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-plumbing .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-plumbing .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-plumbing .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-plumbing .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-plumbing .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-plumbing .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-plumbing .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-plumbing .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-plumbing .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-plumbing .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-plumbing .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-plumbing .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-plumbing .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-plumbing .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-plumbing .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-plumbing .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-plumbing .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-plumbing .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-plumbing .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-plumbing .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-plumbing .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-plumbing .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-plumbing .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-plumbing .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-plumbing .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-plumbing .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-plumbing .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-plumbing .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-plumbing .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-plumbing .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-plumbing .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-plumbing .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-plumbing .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-plumbing .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-plumbing .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-plumbing .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-plumbing .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-plumbing .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-plumbing .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-plumbing .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-plumbing .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-plumbing .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-plumbing .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-plumbing .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-plumbing .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-plumbing .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-plumbing .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-plumbing .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-plumbing .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-plumbing .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-plumbing .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-plumbing .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-plumbing .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-plumbing .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-plumbing .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-plumbing .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-plumbing .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-plumbing .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-plumbing .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-plumbing .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-plumbing .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-plumbing .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-plumbing .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-plumbing .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-plumbing .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-plumbing .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-plumbing .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-plumbing .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-plumbing .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-plumbing .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-plumbing .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-plumbing .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-plumbing .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-plumbing .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-plumbing .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-plumbing .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-plumbing .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-plumbing .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-plumbing .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-plumbing .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-plumbing .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-plumbing .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-plumbing .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-plumbing .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-plumbing .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-plumbing .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-plumbing .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-plumbing .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-plumbing .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-plumbing .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-plumbing .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-plumbing .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-plumbing .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-plumbing .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-plumbing .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-plumbing .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-plumbing .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-plumbing .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-plumbing .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-plumbing .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-plumbing .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-plumbing .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-plumbing .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-plumbing .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-plumbing .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-plumbing .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-plumbing .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-plumbing .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-plumbing .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-plumbing .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-plumbing .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-plumbing .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-plumbing .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-plumbing .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-plumbing .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-plumbing .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-plumbing .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-plumbing .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-plumbing .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-plumbing .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-plumbing .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-plumbing .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-plumbing .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-plumbing .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-plumbing .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-plumbing .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-plumbing .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-plumbing .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-plumbing .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-plumbing .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-plumbing .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-plumbing .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-plumbing .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-plumbing .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-plumbing .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-plumbing .rfTrackLayout,
#dreamz-plumbing .rfFlowLayout,
#dreamz-plumbing .rfAlertGrid,
#dreamz-plumbing .rfCycleLayout,
#dreamz-plumbing .rfSitesLayout,
#dreamz-plumbing .aiRootLayout,
#dreamz-plumbing .aiForecastLayout,
#dreamz-plumbing .aiChatLayout,
#dreamz-plumbing .aiTrainingLayout,
#dreamz-plumbing .aiQualityLayout,
#dreamz-plumbing .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-plumbing .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-plumbing .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-plumbing .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-plumbing .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-plumbing .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-plumbing .aiLink {
display: none;
}
}
#dreamz-plumbing .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-plumbing .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-plumbing .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-plumbing .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-plumbing .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-plumbing .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-plumbing .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-plumbing .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-plumbing .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-plumbing .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-plumbing .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-plumbing .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-plumbing .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-plumbing .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-plumbing .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-plumbing .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-plumbing .mfgHeroContent {
min-height: 610px;
}
#dreamz-plumbing .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-plumbing .mfgHeroLead {
font-size: 16px;
}
#dreamz-plumbing .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-plumbing .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-plumbing .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-plumbing .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-plumbing .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-plumbing .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-plumbing .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-plumbing .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-plumbing .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-plumbing .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-plumbing .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-plumbing .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-plumbing .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-plumbing .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-plumbing .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-plumbing .mfgHero {
background: #fff;
color: #000;
}
#dreamz-plumbing .mfgHeroScene,
#dreamz-plumbing .mfgHeroActions {
display: none;
}
#dreamz-plumbing .mfgHeroContent {
min-height: 0;
}
#dreamz-plumbing .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
#dreamz-plumbing #plumbing-commercial .featureStage,
#dreamz-plumbing #plumbing-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-plumbing .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-plumbing .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-plumbing .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-plumbing .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-plumbing .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-plumbing .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-plumbing .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-plumbing .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-plumbing .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-plumbing .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-plumbing .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-plumbing .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-plumbing .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-plumbing .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-plumbing .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-plumbing .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-plumbing .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-plumbing .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-plumbing .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-plumbing .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-plumbing .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-plumbing .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-plumbing .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-plumbing .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-plumbing .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-plumbing .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-plumbing .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-plumbing .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-plumbing .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-plumbing .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-plumbing .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-plumbing .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-plumbing .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-plumbing .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-plumbing .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-plumbing .mfgGallery .flowArrow {
display: none;
}
#dreamz-plumbing .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-plumbing .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-plumbing .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-plumbing .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-plumbing .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-plumbing .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-plumbing .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-plumbing .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-plumbing .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-plumbing .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-plumbing .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-plumbing .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-plumbing .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-plumbing .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-plumbing .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-plumbing .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-plumbing .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-plumbing .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-plumbing .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-plumbing .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-plumbing .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-plumbing .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-plumbing .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-plumbing .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-plumbing .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-plumbing .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-plumbing .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-plumbing .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-plumbing .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-plumbing .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-plumbing .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-plumbing .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-plumbing .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-plumbing .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-plumbing .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-plumbing .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-plumbing .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-plumbing .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-plumbing .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-plumbing .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-plumbing .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-plumbing .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-plumbing .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-plumbing .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-plumbing .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-plumbing .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-plumbing .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-plumbing .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-plumbing .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-plumbing .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-plumbing .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-plumbing .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-plumbing .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-plumbing .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-plumbing .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-plumbing .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-plumbing .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-plumbing .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-plumbing .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-plumbing .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-plumbing .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-plumbing .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-plumbing .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-plumbing .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-plumbing .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-plumbing .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-plumbing .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-plumbing .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-plumbing .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-plumbing .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-plumbing .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-plumbing .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-plumbing .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-plumbing .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-plumbing .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-plumbing .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-plumbing .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-plumbing .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-plumbing .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-plumbing .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-plumbing .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-plumbing .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-plumbing .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-plumbing .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-plumbing .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-plumbing .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-plumbing #plumbing-commercial .featureStage,
#dreamz-plumbing #plumbing-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-plumbing #plumbing-commercial .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-plumbing .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-plumbing #plumbing-commercial .featureStage,
#dreamz-plumbing #plumbing-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-plumbing .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-plumbing .mfgGallery .freshWindow {
height: auto;
}
#dreamz-plumbing .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-plumbing .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-plumbing .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-plumbing .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-plumbing .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-plumbing .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-plumbing .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-plumbing .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-plumbing .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-plumbing .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-plumbing .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-plumbing .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-plumbing .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-plumbing .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-plumbing .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-plumbing .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-plumbing .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-plumbing .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-plumbing .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-plumbing .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-plumbing .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-plumbing .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-plumbing .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-plumbing .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-plumbing .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-plumbing .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-plumbing .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-plumbing .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-plumbing .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-plumbing .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-plumbing .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-plumbing .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-plumbing .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-plumbing .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-plumbing .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-plumbing .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-plumbing .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-plumbing .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-plumbing .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-plumbing .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-plumbing .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-plumbing .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-plumbing .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-plumbing .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-plumbing .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-plumbing .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-plumbing .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-plumbing .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-plumbing .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-plumbing .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-plumbing .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-plumbing .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-plumbing .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-plumbing .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-plumbing .plumbingVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-plumbing .plumbingGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-plumbing .plumbingIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-plumbing .plumbingStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-plumbing .plumbingVisualGallery>.plumbingGraphic {
display: none;
}
#dreamz-plumbing #plumbing-service .featureStage,
#dreamz-plumbing #plumbing-commercial .featureStage,
#dreamz-plumbing #plumbing-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-plumbing #plumbing-commercial .plumbingVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-plumbing #plumbing-commercial .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-plumbing .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-plumbing .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-plumbing .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-plumbing .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1100px) {
#dreamz-plumbing #plumbing-service .featureStage,
#dreamz-plumbing #plumbing-commercial .featureStage,
#dreamz-plumbing #plumbing-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-plumbing #plumbing-commercial .plumbingVisualGallery,
#dreamz-plumbing #plumbing-commercial .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-plumbing .mfgHeroScene {
height: 290px;
}
#dreamz-plumbing #plumbing-service .featureStage,
#dreamz-plumbing #plumbing-commercial .featureStage,
#dreamz-plumbing #plumbing-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-plumbing .plumbingVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-plumbing .plumbingVisualGallery>.plumbingGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-plumbing #plumbing-service-features-1:checked~.featureStage .plumbingVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-2:checked~.featureStage .plumbingVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-3:checked~.featureStage .plumbingVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-4:checked~.featureStage .plumbingVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-plumbing #plumbing-service-features-5:checked~.featureStage .plumbingVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-1:checked~.featureStage .plumbingVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-2:checked~.featureStage .plumbingVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-3:checked~.featureStage .plumbingVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-4:checked~.featureStage .plumbingVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-plumbing #plumbing-commercial-features-5:checked~.featureStage .plumbingVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-1:checked~.featureStage .plumbingVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-2:checked~.featureStage .plumbingVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-3:checked~.featureStage .plumbingVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-4:checked~.featureStage .plumbingVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-plumbing #plumbing-ai-decisions-features-5:checked~.featureStage .plumbingVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-plumbing .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-plumbing .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-plumbing .plumbingIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-plumbing .plumbingGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-plumbing .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-plumbing .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-plumbing .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-plumbing .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-plumbing .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-plumbing .mfgHeroContent {
background: transparent;
}
#dreamz-plumbing .mfgHeroScene img {
object-position: 66% 50%;
}
#dreamz-plumbing .plumbingIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-plumbing .plumbingIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-plumbing .plumbingGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-plumbing .plumbingVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-plumbing .mfgHeroScene img {
object-position: 69% 50%;
}
}
@media(max-width:600px) {
#dreamz-plumbing .mfgHeroScene img {
object-position: 76% 50%;
}
}  #dreamz-electrical .industryIntroHead.compact,
#dreamz-electrical .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-electrical .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-electrical .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-electrical .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-electrical .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-electrical .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-electrical .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-electrical .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-electrical .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-electrical .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-electrical .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-electrical .windowDots {
display: flex;
gap: 5px;
}
#dreamz-electrical .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-electrical .windowBody {
padding: 16px;
}
#dreamz-electrical .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-electrical .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-electrical .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-electrical .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-electrical .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-electrical .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-electrical .chartGridLine.l1 {
top: 34px;
}
#dreamz-electrical .chartGridLine.l2 {
top: 65px;
}
#dreamz-electrical .chartGridLine.l3 {
top: 96px;
}
#dreamz-electrical .chartGridLine.l4 {
top: 127px;
}
#dreamz-electrical .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-electrical .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-electrical .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-electrical .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-electrical .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-electrical .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-electrical .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-electrical .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-electrical .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-electrical .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-electrical .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-electrical .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-electrical .noteCard p,
#dreamz-electrical .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-electrical .alertStack {
display: grid;
gap: 10px;
}
#dreamz-electrical .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-electrical .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-electrical .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-electrical .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-electrical .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-electrical .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-electrical .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-electrical .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-electrical .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-electrical .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-electrical .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-electrical .scheduleBoard h4,
#dreamz-electrical .todoBoard h4,
#dreamz-electrical .siteBoard h4,
#dreamz-electrical .chatPanel h4,
#dreamz-electrical .lessonPanel h4,
#dreamz-electrical .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-electrical .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-electrical .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-electrical .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-electrical .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-electrical .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-electrical .taskRow:last-child {
border-bottom: 0;
}
#dreamz-electrical .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-electrical .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-electrical .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-electrical .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-electrical .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-electrical .inventoryTable th,
#dreamz-electrical .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-electrical .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-electrical .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-electrical .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-electrical .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-electrical .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-electrical .phoneBody {
padding: 12px;
}
#dreamz-electrical .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-electrical .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-electrical .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-electrical .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-electrical .progressList {
display: grid;
gap: 10px;
}
#dreamz-electrical .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-electrical .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-electrical .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-electrical .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-electrical .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-electrical .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-electrical .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-electrical .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-electrical .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-electrical .pin1 {
top: 56px;
left: 58px;
}
#dreamz-electrical .pin2 {
top: 88px;
right: 88px;
}
#dreamz-electrical .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-electrical .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-electrical .siteRow:last-child {
border-bottom: 0;
}
#dreamz-electrical .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-electrical .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-electrical .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-electrical .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-electrical .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-electrical .graphNodes:before,
#dreamz-electrical .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-electrical .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-electrical .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-electrical .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-electrical .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-electrical .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-electrical .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-electrical .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-electrical .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-electrical .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-electrical .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-electrical .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-electrical .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-electrical .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-electrical .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-electrical .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-electrical .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-electrical .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-electrical .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-electrical .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-electrical .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-electrical .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-electrical .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-electrical .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-electrical .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-electrical .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-electrical .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-electrical .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-electrical .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-electrical .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-electrical .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-electrical .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-electrical .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-electrical .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-electrical #electrical-service-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-electrical #electrical-service-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-electrical #electrical-service-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-electrical #electrical-service-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-electrical #electrical-service-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-electrical #electrical-commercial-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-electrical #electrical-commercial-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-electrical #electrical-commercial-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-electrical #electrical-commercial-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-electrical #electrical-commercial-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-electrical #electrical-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-electrical #electrical-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-electrical #electrical-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-electrical #electrical-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-electrical #electrical-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-electrical #electrical-service-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-electrical #electrical-service-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-electrical #electrical-service-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-electrical #electrical-service-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-electrical #electrical-service-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-electrical #electrical-commercial-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-electrical #electrical-commercial-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-electrical #electrical-commercial-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-electrical #electrical-commercial-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-electrical #electrical-commercial-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-electrical #electrical-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-electrical #electrical-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-electrical #electrical-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-electrical #electrical-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-electrical #electrical-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-electrical .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-electrical .featureMediaPanels {
min-height: 0;
}
#dreamz-electrical .inventorySplit,
#dreamz-electrical .forecastGrid,
#dreamz-electrical .siteGrid,
#dreamz-electrical .spectrumGrid,
#dreamz-electrical .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-electrical .metricGrid,
#dreamz-electrical .lessonCards,
#dreamz-electrical .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-electrical .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-electrical {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-electrical * {
box-sizing: border-box;
}
#dreamz-electrical {
scroll-behavior: smooth;
}
#dreamz-electrical {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-electrical a {
color: inherit;
text-decoration: none;
}
#dreamz-electrical .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-electrical .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-electrical .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-electrical .brand span {
color: var(--brand);
}
#dreamz-electrical .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-electrical .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-electrical .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-electrical .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-electrical .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-electrical .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-electrical .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-electrical .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-electrical .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-electrical .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-electrical .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-electrical .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-electrical .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-electrical .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-electrical .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-electrical .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-electrical .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-electrical .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-electrical .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-electrical .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-electrical .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-electrical .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-electrical .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-electrical .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-electrical .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-electrical .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-electrical .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-electrical .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-electrical .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-electrical .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-electrical .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-electrical .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-electrical .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-electrical .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-electrical .sectionHead {
margin-bottom: 44px;
}
#dreamz-electrical .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-electrical .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-electrical .aiJourney h2 {
color: #fff;
}
#dreamz-electrical .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-electrical .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-electrical .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-electrical .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-electrical .aiStep:last-child::after {
display: none;
}
#dreamz-electrical .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-electrical .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-electrical .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-electrical .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-electrical .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-electrical .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-electrical .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-electrical .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-electrical .capability {
background: #fff;
}
#dreamz-electrical .capability.alt {
background: var(--sky-2);
}
#dreamz-electrical .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-electrical .twoCol.reverse .visual {
order: 2;
}
#dreamz-electrical .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-electrical .visual .placeholder {
min-height: 355px;
}
#dreamz-electrical .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-electrical .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-electrical details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-electrical details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-electrical details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-electrical details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-electrical details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-electrical details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-electrical .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-electrical .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-electrical .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-electrical .darkSection h2,
#dreamz-electrical .darkSection h3 {
color: #fff;
}
#dreamz-electrical .darkSection .sectionHead p,
#dreamz-electrical .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-electrical .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-electrical .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-electrical .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-electrical .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-electrical .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-electrical .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-electrical .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-electrical .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-electrical .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-electrical .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-electrical .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-electrical .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-electrical .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-electrical .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-electrical .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-electrical .benefitBand h2 {
color: #fff;
}
#dreamz-electrical .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-electrical .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-electrical .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-electrical .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-electrical .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-electrical .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-electrical .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-electrical .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-electrical .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-electrical .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-electrical .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-electrical .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-electrical .faq {
max-width: 900px;
}
#dreamz-electrical .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-electrical .ctaPanel h2 {
color: #fff;
}
#dreamz-electrical .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-electrical .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-electrical .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-electrical .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-electrical .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-electrical .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-electrical .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-electrical .inlineCta.dark h3 {
color: #fff;
}
#dreamz-electrical .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-electrical .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-electrical .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-electrical .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-electrical .button.yellow:hover {
background: #FFD84D;
}
#dreamz-electrical .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-electrical .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-electrical .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-electrical .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-electrical footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-electrical .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-electrical .heroGrid,
#dreamz-electrical .twoCol,
#dreamz-electrical .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-electrical .twoCol.reverse .visual {
order: initial;
}
#dreamz-electrical .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-electrical .ratingGrid,
#dreamz-electrical .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-electrical .ratingLead,
#dreamz-electrical .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-electrical .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-electrical .aiStep:nth-child(3)::after,
#dreamz-electrical .aiStep:last-child::after {
display: none;
}
#dreamz-electrical .outcomeGrid,
#dreamz-electrical .challengeGrid,
#dreamz-electrical .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-electrical .cards,
#dreamz-electrical .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-electrical .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-electrical .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-electrical .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-electrical .hero {
padding: 58px 0 52px;
}
#dreamz-electrical .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-electrical .aiStep::after {
display: none;
}
#dreamz-electrical .logoRow,
#dreamz-electrical .ratingGrid,
#dreamz-electrical .awardGrid,
#dreamz-electrical .outcomeGrid,
#dreamz-electrical .challengeGrid,
#dreamz-electrical .benefitGrid,
#dreamz-electrical .cards,
#dreamz-electrical .proofCards,
#dreamz-electrical .integrationGrid,
#dreamz-electrical .featureList {
grid-template-columns: 1fr;
}
#dreamz-electrical .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-electrical .ctaPanel {
padding: 34px 24px;
}
#dreamz-electrical .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-electrical .inlineCtaActions {
width: 100%;
}
#dreamz-electrical .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-electrical {
--muted: #526A7C;
--shadow: none;
}
#dreamz-electrical {
background: var(--sky-2);
}
#dreamz-electrical p {
margin-bottom: 0;
}
#dreamz-electrical [id] {
scroll-margin-top: 94px;
}
#dreamz-electrical svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-electrical .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin:0;
background: transparent;
}
#dreamz-electrical .darkSection h2,
#dreamz-electrical .darkSection h3,
#dreamz-electrical .aiJourney h2,
#dreamz-electrical .benefitBand h2,
#dreamz-electrical .ctaPanel h2,
#dreamz-electrical .inlineCta.dark h3 {
color: #fff;
}
#dreamz-electrical .wrap>*,
#dreamz-electrical .heroGrid>*,
#dreamz-electrical .twoCol>*,
#dreamz-electrical .ctaPanel>* {
min-width: 0;
}
#dreamz-electrical .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-electrical .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-electrical .skipLink:focus {
transform: none;
}
#dreamz-electrical a:focus-visible,
#dreamz-electrical summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-electrical .darkSection a:focus-visible,
#dreamz-electrical .darkSection summary:focus-visible,
#dreamz-electrical .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-electrical .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-electrical .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-electrical .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-electrical .brandName>span {
color: var(--brand-dark);
}
#dreamz-electrical .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-electrical .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-electrical .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-electrical .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-electrical .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-electrical .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-electrical .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-electrical .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-electrical .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-electrical .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-electrical .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-electrical .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-electrical .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-electrical .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-electrical .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-electrical .clientBand {
padding: 27px 0;
}
#dreamz-electrical .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-electrical .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-electrical .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-electrical .logoBox.wide {
font-size: 12px;
}
#dreamz-electrical .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-electrical h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-electrical .sectionHead {
margin-bottom: 36px;
}
#dreamz-electrical .eyebrow {
line-height: 1.5;
}
#dreamz-electrical .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-electrical .aiStep {
min-height: 162px;
}
#dreamz-electrical .aiStep strong {
line-height: 1.35;
}
#dreamz-electrical .aiStep span {
line-height: 1.65;
}
#dreamz-electrical .aiCallout {
margin-top: 24px;
}
#dreamz-electrical .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-electrical .outcome>.icon {
color: var(--navy);
}
#dreamz-electrical .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-electrical .awardItem>.icon {
color: var(--navy);
}
#dreamz-electrical .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-electrical .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-electrical .twoCol.reverse .visual {
order: -1;
}
#dreamz-electrical .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-electrical .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-electrical .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-electrical .featureList {
gap: 13px 18px;
}
#dreamz-electrical .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-electrical .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-electrical .check .icon {
width: 14px;
height: 14px;
}
#dreamz-electrical details.capabilityMore {
margin-bottom: 0;
}
#dreamz-electrical .capabilityMore summary {
min-height: 34px;
}
#dreamz-electrical .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-electrical .textCta {
font-size: 14px;
}
#dreamz-electrical .visual {
min-width: 0;
}
#dreamz-electrical .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-electrical .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-electrical .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-electrical .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-electrical .panelBody {
padding: 20px;
}
#dreamz-electrical .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-electrical .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-electrical .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-electrical .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-electrical .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-electrical .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-electrical .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-electrical .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-electrical .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-electrical .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-electrical .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-electrical .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-electrical .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-electrical .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-electrical .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-electrical .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-electrical .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-electrical .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-electrical .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-electrical .dataRow:last-child {
border-bottom: 0;
}
#dreamz-electrical .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-electrical .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-electrical .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-electrical .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-electrical .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-electrical .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-electrical .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-electrical .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-electrical .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-electrical .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-electrical .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-electrical .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-electrical .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-electrical .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-electrical .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-electrical .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-electrical .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-electrical .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-electrical .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-electrical .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-electrical .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-electrical .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-electrical .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-electrical .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-electrical .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-electrical .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-electrical .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-electrical .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-electrical .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-electrical .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-electrical .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-electrical .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-electrical .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-electrical .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-electrical .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-electrical .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-electrical .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-electrical .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-electrical .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-electrical .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-electrical .promptList {
display: grid;
gap: 10px;
}
#dreamz-electrical .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-electrical .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-electrical .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-electrical .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-electrical .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-electrical .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-electrical .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-electrical .quoteTable th,
#dreamz-electrical .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-electrical .quoteTable td:first-child {
width: 64%;
}
#dreamz-electrical .quoteTable th:last-child,
#dreamz-electrical .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-electrical .quoteTable strong {
font-size: 11px;
}
#dreamz-electrical .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-electrical .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-electrical .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-electrical .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-electrical .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-electrical .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-electrical .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-electrical .orderJourney {
margin: 20px 0;
}
#dreamz-electrical .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-electrical .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-electrical .journeyRow:last-child:before {
display: none;
}
#dreamz-electrical .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-electrical .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-electrical .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-electrical .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-electrical .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-electrical .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-electrical .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-electrical .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-electrical .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-electrical .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-electrical .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-electrical .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-electrical .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-electrical .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-electrical .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-electrical .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-electrical .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-electrical .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-electrical .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-electrical .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-electrical .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-electrical .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-electrical .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-electrical .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-electrical .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-electrical .customerTimeline strong {
color: #fff;
}
#dreamz-electrical .customerTimeline small {
color: #BFBFBF;
}
#dreamz-electrical .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-electrical .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-electrical .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-electrical .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-electrical .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-electrical .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-electrical .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-electrical .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-electrical .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-electrical .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-electrical .chartTitle strong {
font-size: 12px;
}
#dreamz-electrical .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-electrical .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-electrical .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-electrical .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-electrical .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-electrical .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-electrical .inlineCtaActions {
max-width: 42%;
}
#dreamz-electrical .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-electrical .inlineCta h3 {
line-height: 1.35;
}
#dreamz-electrical .card {
box-shadow: none;
}
#dreamz-electrical .cardIcon {
box-shadow: none;
}
#dreamz-electrical .card h3 {
font-size: 22px;
}
#dreamz-electrical .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-electrical .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-electrical .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-electrical .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-electrical .ratingBand {
padding: 34px 0;
}
#dreamz-electrical .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-electrical .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-electrical .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-electrical .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-electrical .ratingItem:first-child {
border-left: 0;
}
#dreamz-electrical .proofCard h3 {
font-size: 23px;
}
#dreamz-electrical .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-electrical .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-electrical .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-electrical .integration {
min-height: 98px;
}
#dreamz-electrical .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-electrical .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-electrical .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-electrical .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-electrical .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-electrical .finalActions {
display: grid;
gap: 11px;
}
#dreamz-electrical .finalActions .button {
white-space: nowrap;
}
#dreamz-electrical .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-electrical .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-electrical .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-electrical .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-electrical .heroGrid {
gap: 30px;
}
#dreamz-electrical .twoCol {
gap: 32px;
}
#dreamz-electrical .panelBody {
padding: 16px;
}
#dreamz-electrical .panelHead {
padding: 16px;
}
#dreamz-electrical .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-electrical .pipelineColumns {
gap: 7px;
}
#dreamz-electrical .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-electrical .heroGrid,
#dreamz-electrical .twoCol,
#dreamz-electrical .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .heroGrid {
gap: 36px;
}
#dreamz-electrical .hero h1 {
max-width: 730px;
}
#dreamz-electrical .hero .lead {
max-width: 690px;
}
#dreamz-electrical .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-electrical .twoCol {
gap: 34px;
}
#dreamz-electrical .twoCol.reverse .visual {
order: initial;
}
#dreamz-electrical .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-electrical .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-electrical .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-electrical .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-electrical .ratingSectionGrid {
gap: 20px;
}
#dreamz-electrical .inlineCta {
align-items: flex-start;
}
#dreamz-electrical .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-electrical .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-electrical .card {
padding: 22px;
}
#dreamz-electrical .card h3 {
font-size: 21px;
}
#dreamz-electrical .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-electrical .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-electrical .cards,
#dreamz-electrical .proofCards {
grid-template-columns: 1fr;
}
#dreamz-electrical .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-electrical .inlineCta {
flex-direction: column;
}
#dreamz-electrical .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-electrical .inlineCtaActions .button {
flex: 1;
}
#dreamz-electrical .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-electrical .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-electrical .wrap {
width: calc(100% - 32px);
}
#dreamz-electrical [id] {
scroll-margin-top: 82px;
}
#dreamz-electrical .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-electrical .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-electrical .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-electrical .hero {
padding: 51px 0 48px;
}
#dreamz-electrical .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-electrical .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-electrical .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-electrical .hero .microcopy {
font-size: 11px;
}
#dreamz-electrical .heroPills span {
font-size: 9px;
}
#dreamz-electrical .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-electrical .sectionHead p {
font-size: 16px;
}
#dreamz-electrical .copy h2 {
font-size: 34px;
}
#dreamz-electrical .copy p {
font-size: 15px;
}
#dreamz-electrical .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-electrical .logoBox {
min-height: 53px;
}
#dreamz-electrical .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-electrical .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-electrical .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-electrical .aiStep strong {
font-size: 13px;
}
#dreamz-electrical .aiStep span {
font-size: 11px;
}
#dreamz-electrical .aiStep::after {
display: none;
}
#dreamz-electrical .outcomeGrid,
#dreamz-electrical .challengeGrid,
#dreamz-electrical .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .outcome {
padding: 24px;
}
#dreamz-electrical .outcome strong {
font-size: 22px;
}
#dreamz-electrical .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-electrical .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-electrical .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-electrical .featureList,
#dreamz-electrical .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .featureItem {
font-size: 13px;
}
#dreamz-electrical .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-electrical .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-electrical .panelHead {
padding: 15px 13px;
}
#dreamz-electrical .panelHead>strong {
font-size: 12px;
}
#dreamz-electrical .panelBody {
padding: 14px;
}
#dreamz-electrical .productPanel {
border-radius: 16px;
}
#dreamz-electrical .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-electrical .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-electrical .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-electrical .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-electrical .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-electrical .deal strong {
font-size: 10px;
}
#dreamz-electrical .deal small {
font-size: 9px;
}
#dreamz-electrical .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-electrical .mobileWorkspace {
gap: 12px;
}
#dreamz-electrical .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-electrical .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-electrical .sideTile {
padding: 10px;
}
#dreamz-electrical .sideTile strong {
font-size: 10px;
}
#dreamz-electrical .sideTile p {
font-size: 9px;
}
#dreamz-electrical .mobileHeader strong {
font-size: 15px;
}
#dreamz-electrical .mobileAccount strong {
font-size: 10px;
}
#dreamz-electrical .mobileAccount small {
font-size: 7px;
}
#dreamz-electrical .phoneDevice .rowIcon {
display: none;
}
#dreamz-electrical .quoteTable th,
#dreamz-electrical .quoteTable td {
padding: 12px 4px;
}
#dreamz-electrical .quoteTable strong {
font-size: 10px;
}
#dreamz-electrical .quoteTable small {
font-size: 8px;
}
#dreamz-electrical .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-electrical .docHeader strong {
font-size: 17px;
}
#dreamz-electrical .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-electrical .miniFlow span {
padding: 6px;
}
#dreamz-electrical .rowCopy strong {
font-size: 10px;
}
#dreamz-electrical .rowCopy small {
font-size: 8px;
}
#dreamz-electrical .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-electrical .miniStats {
gap: 7px;
}
#dreamz-electrical .miniStats>div {
padding: 9px;
}
#dreamz-electrical .miniStats strong {
font-size: 18px;
}
#dreamz-electrical .miniStats span {
font-size: 8px;
}
#dreamz-electrical .collectionStats>div {
padding: 13px;
}
#dreamz-electrical .collectionStats strong {
font-size: 24px;
}
#dreamz-electrical .customerHeader strong {
font-size: 17px;
}
#dreamz-electrical .customerFacts>div {
padding: 10px;
}
#dreamz-electrical .customerFacts strong {
font-size: 12px;
}
#dreamz-electrical .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-electrical .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-electrical .ratingItem:last-child {
grid-column: 1/-1;
}
#dreamz-electrical .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-electrical .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-electrical .integration small {
font-size: 9px;
}
#dreamz-electrical .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-electrical .ctaPanel p {
font-size: 15px;
}
#dreamz-electrical .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-electrical .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-electrical .contextSection {
padding: 0 0 24px;
}
#dreamz-electrical .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-electrical .wrap {
width: calc(100% - 24px);
}
#dreamz-electrical .brand {
font-size: 18px;
}
#dreamz-electrical .brandMark {
width: 25px;
height: 25px;
}
#dreamz-electrical .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-electrical .copy h2 {
font-size: 31px;
}
#dreamz-electrical .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-electrical .phoneDevice {
width: 210px;
}
#dreamz-electrical .phoneDevice .rowIcon {
display: grid;
}
#dreamz-electrical .mobileSide {
gap: 8px;
}
#dreamz-electrical .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-electrical .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-electrical .sideTile p {
margin: 0;
}
#dreamz-electrical .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-electrical .collectionStats strong {
font-size: 21px;
}
#dreamz-electrical .inventoryIntro strong {
font-size: 14px;
}
#dreamz-electrical .dataRow {
gap: 7px;
}
#dreamz-electrical .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-electrical .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-electrical {
scroll-behavior: auto;
}
#dreamz-electrical *,
#dreamz-electrical *::before,
#dreamz-electrical *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-electrical {
background: var(--sky-2);
}
#dreamz-electrical .hero .eyebrow {
max-width: 100%;
}
#dreamz-electrical .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-electrical .ganttIllustration,
#dreamz-electrical .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-electrical .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-electrical .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-electrical .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-electrical .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-electrical .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-electrical .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-electrical .comparisonTable th,
#dreamz-electrical .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .comparisonTable th:first-child {
width: 23%;
}
#dreamz-electrical .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-electrical .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-electrical .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-electrical .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-electrical .card,
#dreamz-electrical .proofCard,
#dreamz-electrical .productPanel,
#dreamz-electrical .outcome,
#dreamz-electrical .benefit {
box-shadow: none;
}
#dreamz-electrical .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-electrical .hero .eyebrow {
font-size: 10px;
}
#dreamz-electrical .comparisonTable {
font-size: 11px;
}
#dreamz-electrical .comparisonTable th,
#dreamz-electrical .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-electrical .comparisonTable th:first-child {
width: 24%;
}
#dreamz-electrical .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-electrical .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
}
#dreamz-electrical .scheduleIllustration,
#dreamz-electrical .analyticsIllustration,
#dreamz-electrical .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-electrical .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-electrical .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-electrical .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-electrical .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-electrical .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-electrical .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-electrical .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-electrical .darkSection .textCta {
color: var(--yellow);
}
#dreamz-electrical .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-electrical .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-electrical .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-electrical .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-electrical .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-electrical .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-electrical .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-electrical .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-electrical .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-electrical .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-electrical .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-electrical .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-electrical .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-electrical .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-electrical .phoneDevice {
max-width: 100%;
}
#dreamz-electrical .heroPills {
line-height: 1.55;
}
#dreamz-electrical .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-electrical .plantFacts {
gap: 7px;
}
#dreamz-electrical .plantFacts>div {
padding: 9px;
}
#dreamz-electrical .plantFacts strong {
font-size: 11px;
}
#dreamz-electrical .scanSummary {
padding: 12px;
}
#dreamz-electrical .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-electrical .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-electrical .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-electrical .phoneDevice .rowIcon {
display: grid;
}
#dreamz-electrical .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-electrical .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-electrical .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-electrical .sideTile strong {
font-size: 12px;
}
#dreamz-electrical .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-electrical .topbar,
#dreamz-electrical .heroActions,
#dreamz-electrical .finalActions,
#dreamz-electrical .contextSection,
#dreamz-electrical .valueCtaSection {
display: none;
}
#dreamz-electrical section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-electrical .hero {
padding-top: 20px;
}
}
#dreamz-electrical {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-electrical p {
margin: 0;
}
#dreamz-electrical main {
display: block;
}
#dreamz-electrical .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-electrical .heroAccent {
color: var(--black);
}
#dreamz-electrical .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-electrical .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-electrical .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-electrical .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-electrical .microcopy {
margin-top: 14px;
}
#dreamz-electrical .heroPills {
margin-top: 13px;
}
#dreamz-electrical .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-electrical .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-electrical .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-electrical .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-electrical .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-electrical .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-electrical .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-electrical .clientBand {
padding: 24px 0;
}
#dreamz-electrical .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-electrical .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-electrical .logoBox.wide {
font-size: 15px;
}
#dreamz-electrical .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-electrical .sectionHead p {
margin: 17px 0 0;
}
#dreamz-electrical .copy p {
margin: 16px 0 0;
}
#dreamz-electrical .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-electrical .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-electrical .aiJourney {
background: var(--black);
}
#dreamz-electrical .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-electrical .awardBand .sectionHead p {
font-size: 16px;
}
#dreamz-electrical .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-electrical .productPanel {
border-radius: 18px;
}
#dreamz-electrical .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-electrical .panelHead>strong {
font-size: 13px;
}
#dreamz-electrical .sampleTag {
font-size: 9px;
}
#dreamz-electrical .panelBody {
padding: 21px;
}
#dreamz-electrical .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-electrical .docHeader {
padding-bottom: 16px;
}
#dreamz-electrical .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-electrical .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-electrical .smallLabel {
font-size: 9px;
}
#dreamz-electrical .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-electrical .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-electrical .dataRow {
padding: 14px 0;
}
#dreamz-electrical .statusPill {
font-size: 8px;
}
#dreamz-electrical .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-electrical .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-electrical .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-electrical .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-electrical .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-electrical .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-electrical .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-electrical .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-electrical .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-electrical .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-electrical .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-electrical .hierarchy strong {
color: var(--navy);
}
#dreamz-electrical .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-electrical .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-electrical .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-electrical .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-electrical .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-electrical .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-electrical .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-electrical .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-electrical .mobileAccount small {
font-size: 9px;
}
#dreamz-electrical .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-electrical .sideTile strong {
font-size: 12px;
}
#dreamz-electrical .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-electrical .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-electrical .mobileAction {
font-size: 9px;
}
#dreamz-electrical .journeyRow strong {
font-size: 13px;
}
#dreamz-electrical .journeyRow small {
font-size: 11px;
}
#dreamz-electrical .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-electrical .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-electrical .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-electrical .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-electrical .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-electrical .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-electrical .utilityReadout small {
font-size: 12px;
}
#dreamz-electrical .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-electrical .darkSection {
background: var(--black);
}
#dreamz-electrical .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-electrical .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-electrical .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-electrical .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-electrical .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-electrical .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-electrical .assistantHead small {
font-size: 11px;
}
#dreamz-electrical .assistantNote {
font-size: 11px;
}
#dreamz-electrical .reportTags span {
font-size: 10px;
}
#dreamz-electrical .card p {
margin: 12px 0 0;
}
#dreamz-electrical .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-electrical .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-electrical .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-electrical .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-electrical .cards>.card p {
padding-bottom: 22px;
}
#dreamz-electrical .benefitBand {
background: var(--black);
}
#dreamz-electrical .benefit {
background: var(--black-soft);
}
#dreamz-electrical .inlineCta h3 {
font-size: 20px;
}
#dreamz-electrical .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-electrical .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-electrical .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-electrical .valueCtaSection {
padding: 32px 0;
}
#dreamz-electrical .proofCard p {
margin-top: 15px;
}
#dreamz-electrical .proofCard h3 {
font-size: 23px;
}
#dreamz-electrical .integrationNote {
margin-top: 23px;
}
#dreamz-electrical .ctaPanel {
background: var(--black);
}
#dreamz-electrical .ctaPanel p {
margin-top: 16px;
}
#dreamz-electrical .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-electrical .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-electrical a:hover {
text-decoration: none;
}
#dreamz-electrical .textCta:hover {
color: var(--navy);
}
#dreamz-electrical .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-electrical .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-electrical .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-electrical .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-electrical .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-electrical .heroVisual {
max-width: 548px;
}
#dreamz-electrical .hero .lead {
max-width: 700px;
}
#dreamz-electrical .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-electrical .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-electrical .logoBox:last-child {
grid-column: auto;
}
#dreamz-electrical .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-electrical .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-electrical .inlineCtaActions .button {
flex: 1;
}
#dreamz-electrical .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-electrical .hero {
padding: 28px 0 40px;
}
#dreamz-electrical .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-electrical .heroActions {
gap: 10px;
}
#dreamz-electrical .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-electrical .breadcrumb {
margin-bottom: 21px;
}
#dreamz-electrical .hero .eyebrow {
font-size: 11px;
}
#dreamz-electrical .heroVisual {
max-width: 480px;
}
#dreamz-electrical .heroPills {
row-gap: 9px;
}
#dreamz-electrical .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-electrical .heroPills span+span {
padding-left: 7px;
}
#dreamz-electrical .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-electrical .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-electrical .clientBand {
padding: 25px 0;
}
#dreamz-electrical .copy h2 {
font-size: 33px;
}
#dreamz-electrical .panelBody {
padding: 16px;
}
#dreamz-electrical .panelHead {
padding: 15px;
}
#dreamz-electrical .panelHead>strong {
font-size: 12px;
}
#dreamz-electrical .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-electrical .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-electrical .docHeader strong {
font-size: 18px;
}
#dreamz-electrical .docHeader small {
font-size: 10px;
}
#dreamz-electrical .rowCopy strong {
font-size: 11px;
}
#dreamz-electrical .rowCopy small {
font-size: 10px;
}
#dreamz-electrical .miniStats {
gap: 7px;
}
#dreamz-electrical .miniStats strong {
font-size: 21px;
}
#dreamz-electrical .miniStats span {
font-size: 9px;
}
#dreamz-electrical .miniStats>div {
padding: 10px 8px;
}
#dreamz-electrical .plantFacts {
gap: 8px;
}
#dreamz-electrical .plantFacts>div {
padding: 10px;
}
#dreamz-electrical .plantFacts strong {
font-size: 11px;
}
#dreamz-electrical .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-electrical .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-electrical .utilityReadout span {
font-size: 8px;
}
#dreamz-electrical .utilityReadout strong {
font-size: 24px;
}
#dreamz-electrical .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-electrical .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-electrical .comparisonTable {
font-size: 11px;
}
#dreamz-electrical .comparisonTable th,
#dreamz-electrical .comparisonTable td {
padding: 13px 9px;
}
#dreamz-electrical .contextSection {
padding: 0 0 22px;
}
#dreamz-electrical .valueCtaSection {
padding: 25px 0;
}
#dreamz-electrical .inlineCtaActions {
flex-direction: column;
}
#dreamz-electrical .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-electrical .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-electrical .phoneDevice {
width: 222px;
}
#dreamz-electrical .phoneDevice .rowIcon {
display: grid;
}
#dreamz-electrical .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-electrical .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-electrical .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-electrical .sideTile p {
margin: 0;
}
#dreamz-electrical .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-electrical .dataRow {
gap: 8px;
}
#dreamz-electrical .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-electrical .miniStats strong {
font-size: 19px;
}
#dreamz-electrical .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-electrical .heroActions .button {
width: 100%;
}
#dreamz-electrical .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-electrical .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-electrical .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-electrical .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-electrical .aiStep span {
font-size: 13px;
}
#dreamz-electrical .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-electrical {
background: var(--white);
}
#dreamz-electrical img {
display: block;
max-width: 100%;
}
#dreamz-electrical h1,
#dreamz-electrical h2,
#dreamz-electrical h3 {
text-wrap: balance;
}
#dreamz-electrical .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-electrical .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-electrical .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-electrical .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-electrical .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-electrical .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-electrical .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-electrical .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-electrical .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-electrical .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-electrical .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-electrical .industryIntro {
padding: 78px 0 66px;
}
#dreamz-electrical .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-electrical .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-electrical .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-electrical .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-electrical .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-electrical .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-electrical .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-electrical .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-electrical .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-electrical .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-electrical .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-electrical .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-electrical .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-electrical .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-electrical .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-electrical .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-electrical .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-electrical .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-electrical .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-electrical .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-electrical .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-electrical .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-electrical .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-electrical .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-electrical .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-electrical .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-electrical .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-electrical .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-electrical .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-electrical .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-electrical .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-electrical .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-electrical .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-electrical .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-electrical .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-electrical .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-electrical .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-electrical .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-electrical .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-electrical .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-electrical .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-electrical .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-electrical .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-electrical .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-electrical .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-electrical .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .rfidSpotlight {
background: #fff;
}
#dreamz-electrical .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-electrical .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-electrical .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-electrical .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-electrical .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-electrical .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-electrical .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-electrical .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-electrical .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-electrical .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-electrical .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-electrical .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-electrical .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-electrical .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-electrical .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-electrical .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-electrical .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-electrical .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-electrical .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-electrical .featurePanel {
display: none;
}
#dreamz-electrical .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-electrical .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-electrical .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-electrical .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-electrical .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-electrical .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-electrical .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-electrical .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-electrical .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-electrical .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-electrical .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-electrical .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-electrical .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-electrical .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-electrical .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-electrical .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-electrical .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-electrical .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-electrical .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-electrical .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-electrical .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-electrical .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-electrical .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-electrical .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-electrical .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-electrical .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-electrical .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-electrical .aiReviewBody {
padding: 18px;
}
#dreamz-electrical .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-electrical .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-electrical .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-electrical .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-electrical .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-electrical .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-electrical .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-electrical .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-electrical .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-electrical .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-electrical .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-electrical .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-electrical .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-electrical .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-electrical .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-electrical .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-electrical .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-electrical .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-electrical .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-electrical .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-electrical .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-electrical .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-electrical .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-electrical .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-electrical .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-electrical .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-electrical .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-electrical .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-electrical .workflowDetails .featureList,
#dreamz-electrical .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-electrical .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-electrical .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-electrical .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-electrical #electrical-connected-tools {
background: #fff;
}
#dreamz-electrical #electrical-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-electrical .featureTab,
#dreamz-electrical .industryPriority,
#dreamz-electrical summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-electrical .industryIntroHead {
gap: 30px;
}
#dreamz-electrical .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-electrical .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-electrical .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-electrical .factoryWorkflow {
padding: 22px;
}
#dreamz-electrical .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-electrical .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-electrical .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-electrical .industryPriorityGrid {
gap: 14px;
}
#dreamz-electrical .industryPriority {
padding: 22px 19px;
}
#dreamz-electrical .industryPriority h3 {
font-size: 21px;
}
#dreamz-electrical .industryPriority p {
font-size: 12px;
}
#dreamz-electrical .priorityLink {
font-size: 10px;
}
#dreamz-electrical .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-electrical .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-electrical .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-electrical .vedaUseCases>div {
display: block;
}
#dreamz-electrical .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-electrical .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-electrical .featureTabs {
gap: 8px;
}
#dreamz-electrical .featureTab {
min-height: 108px;
}
#dreamz-electrical .featureStage,
#dreamz-electrical .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-electrical .rfidSpotlight .spotlightMedia,
#dreamz-electrical .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-electrical .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-electrical .featurePanel {
min-height: 0;
}
#dreamz-electrical .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-electrical .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-electrical .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-electrical .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-electrical .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-electrical .clientBand {
padding: 22px 0;
}
#dreamz-electrical .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-electrical .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-electrical .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-electrical .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-electrical .industryIntro {
padding: 53px 0;
}
#dreamz-electrical .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-electrical .industryIntroHead>p {
font-size: 14px;
}
#dreamz-electrical .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .industryPriority {
padding: 23px;
}
#dreamz-electrical .industryPriority h3 {
font-size: 24px;
}
#dreamz-electrical .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-electrical .industryPriority p {
font-size: 13px;
}
#dreamz-electrical .priorityLink {
font-size: 11px;
}
#dreamz-electrical .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-electrical .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-electrical .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-electrical .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-electrical .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-electrical .vedaUseCases>div {
display: flex;
}
#dreamz-electrical .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-electrical .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-electrical .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-electrical .vedaMessage.user {
margin-left: 25px;
}
#dreamz-electrical .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-electrical .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-electrical .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-electrical .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-electrical .spotlightHead h2 {
font-size: 32px;
}
#dreamz-electrical .spotlightHead>p {
font-size: 14px;
}
#dreamz-electrical .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-electrical .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-electrical .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-electrical .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-electrical .featurePanel h3 {
font-size: 24px;
}
#dreamz-electrical .featurePanel>p {
font-size: 13px;
}
#dreamz-electrical .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-electrical .spotlightChecks>li {
font-size: 12px;
}
#dreamz-electrical .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-electrical .spotlightActions .button {
width: 100%;
}
#dreamz-electrical .spotlightScope {
font-size: 10px;
}
#dreamz-electrical .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-electrical .mediaTitle strong {
font-size: 11px;
}
#dreamz-electrical .mediaTitle div>span {
font-size: 8px;
}
#dreamz-electrical .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-electrical .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-electrical .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-electrical .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-electrical .aiReviewBody {
padding: 13px;
}
#dreamz-electrical .aiIssue {
padding: 13px;
}
#dreamz-electrical .aiIssue strong {
font-size: 14px;
}
#dreamz-electrical .aiEvidence {
gap: 6px;
}
#dreamz-electrical .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-electrical .aiEvidence strong {
font-size: 9px;
}
#dreamz-electrical .aiEvidence span {
font-size: 7px;
}
#dreamz-electrical .exampleLabel {
font-size: 6px;
}
#dreamz-electrical .factoryWorkflows {
padding: 55px 0;
}
#dreamz-electrical .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-electrical .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-electrical .industryRibbonGrid {
gap: 12px;
}
#dreamz-electrical .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-electrical .spotlightHead h2 {
font-size: 29px;
}
#dreamz-electrical .featureStage {
padding: 19px 13px;
}
#dreamz-electrical .mediaTitle>.icon {
display: none;
}
#dreamz-electrical .exampleLabel {
display: none;
}
#dreamz-electrical .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-electrical .featureTabs {
display: none;
}
#dreamz-electrical .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-electrical .featureStage {
display: block;
}
#dreamz-electrical .featurePanel {
color: #000;
}
}
#dreamz-electrical #electrical-service-features-1:checked~.featureTabs label[for="electrical-service-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-service-features-1:focus-visible~.featureTabs label[for="electrical-service-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-service-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-electrical #electrical-service-features-2:checked~.featureTabs label[for="electrical-service-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-service-features-2:focus-visible~.featureTabs label[for="electrical-service-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-service-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-electrical #electrical-service-features-3:checked~.featureTabs label[for="electrical-service-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-service-features-3:focus-visible~.featureTabs label[for="electrical-service-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-service-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-electrical #electrical-service-features-4:checked~.featureTabs label[for="electrical-service-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-service-features-4:focus-visible~.featureTabs label[for="electrical-service-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-service-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-electrical #electrical-service-features-5:checked~.featureTabs label[for="electrical-service-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-service-features-5:focus-visible~.featureTabs label[for="electrical-service-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-service-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-1:checked~.featureTabs label[for="electrical-commercial-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-commercial-features-1:focus-visible~.featureTabs label[for="electrical-commercial-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-commercial-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-2:checked~.featureTabs label[for="electrical-commercial-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-commercial-features-2:focus-visible~.featureTabs label[for="electrical-commercial-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-commercial-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-3:checked~.featureTabs label[for="electrical-commercial-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-commercial-features-3:focus-visible~.featureTabs label[for="electrical-commercial-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-commercial-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-4:checked~.featureTabs label[for="electrical-commercial-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-commercial-features-4:focus-visible~.featureTabs label[for="electrical-commercial-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-commercial-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-5:checked~.featureTabs label[for="electrical-commercial-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-commercial-features-5:focus-visible~.featureTabs label[for="electrical-commercial-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-commercial-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-1:checked~.featureTabs label[for="electrical-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-ai-decisions-features-1:focus-visible~.featureTabs label[for="electrical-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-2:checked~.featureTabs label[for="electrical-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-ai-decisions-features-2:focus-visible~.featureTabs label[for="electrical-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-3:checked~.featureTabs label[for="electrical-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-ai-decisions-features-3:focus-visible~.featureTabs label[for="electrical-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-4:checked~.featureTabs label[for="electrical-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-ai-decisions-features-4:focus-visible~.featureTabs label[for="electrical-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-5:checked~.featureTabs label[for="electrical-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-electrical #electrical-ai-decisions-features-5:focus-visible~.featureTabs label[for="electrical-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-electrical #electrical-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-electrical .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .featureMediaPanels {
min-width: 0;
}
#dreamz-electrical .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-electrical .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-electrical .featureMediaPanels .windowTop strong,
#dreamz-electrical .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-electrical .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-electrical .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-electrical .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-electrical .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-electrical .featureMediaPanels .windowBody>*,
#dreamz-electrical .featureMediaPanels .spectrumGrid>*,
#dreamz-electrical .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-electrical .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-electrical .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-electrical .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-electrical .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-electrical .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-electrical .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-electrical .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-electrical .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-electrical .pin2 {
top: 88px;
right: 88px;
}
#dreamz-electrical .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-electrical .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-electrical .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-electrical .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-electrical .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-electrical .featureMediaPanels .graphNodes .node.n1,
#dreamz-electrical .featureMediaPanels .graphNodes .node.n2,
#dreamz-electrical .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-electrical .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-electrical .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-electrical .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-electrical .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-electrical .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-electrical .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-electrical .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-electrical .freshGraphic * {
box-sizing: border-box;
}
#dreamz-electrical .rfPanel,
#dreamz-electrical .aiInsightCard,
#dreamz-electrical .forecastVisualCard,
#dreamz-electrical .forecastSuggestion,
#dreamz-electrical .knowledgeTile,
#dreamz-electrical .chatConversation,
#dreamz-electrical .trainingSummary,
#dreamz-electrical .moduleCard,
#dreamz-electrical .qualityHeatCard,
#dreamz-electrical .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-electrical .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-electrical .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-electrical .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-electrical .statusPill,
#dreamz-electrical .cardTag,
#dreamz-electrical .forecastSuggestion b,
#dreamz-electrical .moduleCard b,
#dreamz-electrical .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-electrical .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-electrical .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-electrical .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-electrical .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-electrical .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-electrical .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-electrical .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-electrical .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-electrical .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-electrical .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-electrical .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-electrical .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-electrical .dot.good {
background: #298EEC;
}
#dreamz-electrical .dot.warn {
background: #F4A62A;
}
#dreamz-electrical .dot.bad {
background: #EB6B53;
}
#dreamz-electrical .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-electrical .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-electrical .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-electrical .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-electrical .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-electrical .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-electrical .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-electrical .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-electrical .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-electrical .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-electrical .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-electrical .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-electrical .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-electrical .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-electrical .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-electrical .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-electrical .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-electrical .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-electrical .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-electrical .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-electrical .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-electrical .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-electrical .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-electrical .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-electrical .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-electrical .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-electrical .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-electrical .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-electrical .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-electrical .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-electrical .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-electrical .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-electrical .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-electrical .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-electrical .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-electrical .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-electrical .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-electrical .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-electrical .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-electrical .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-electrical .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-electrical .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-electrical .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-electrical .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-electrical .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-electrical .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-electrical .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-electrical .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-electrical .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-electrical .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-electrical .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-electrical .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-electrical .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-electrical .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-electrical .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-electrical .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-electrical .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-electrical .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-electrical .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-electrical .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-electrical .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-electrical .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-electrical .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-electrical .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-electrical .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-electrical .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-electrical .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-electrical .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-electrical .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-electrical .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-electrical .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-electrical .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-electrical .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-electrical .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-electrical .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-electrical .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-electrical .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-electrical .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-electrical .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-electrical .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-electrical .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-electrical .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-electrical .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-electrical .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-electrical .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-electrical .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-electrical .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-electrical .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-electrical .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-electrical .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-electrical .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-electrical .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-electrical .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-electrical .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-electrical .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-electrical .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-electrical .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-electrical .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-electrical .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-electrical .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-electrical .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-electrical .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-electrical .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-electrical .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-electrical .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-electrical .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-electrical .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-electrical .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-electrical .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-electrical .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-electrical .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-electrical .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-electrical .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-electrical .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-electrical .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-electrical .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-electrical .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-electrical .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-electrical .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-electrical .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-electrical .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-electrical .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-electrical .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-electrical .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-electrical .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-electrical .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-electrical .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-electrical .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-electrical .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-electrical .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-electrical .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-electrical .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-electrical .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-electrical .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-electrical .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-electrical .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-electrical .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-electrical .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-electrical .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-electrical .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-electrical .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-electrical .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-electrical .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-electrical .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-electrical .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-electrical .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-electrical .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-electrical .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-electrical .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-electrical .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-electrical .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-electrical .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-electrical .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-electrical .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-electrical .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-electrical .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-electrical .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-electrical .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-electrical .rfTrackLayout,
#dreamz-electrical .rfFlowLayout,
#dreamz-electrical .rfAlertGrid,
#dreamz-electrical .rfCycleLayout,
#dreamz-electrical .rfSitesLayout,
#dreamz-electrical .aiRootLayout,
#dreamz-electrical .aiForecastLayout,
#dreamz-electrical .aiChatLayout,
#dreamz-electrical .aiTrainingLayout,
#dreamz-electrical .aiQualityLayout,
#dreamz-electrical .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-electrical .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-electrical .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-electrical .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-electrical .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-electrical .aiLink {
display: none;
}
}
#dreamz-electrical .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-electrical .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-electrical .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-electrical .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-electrical .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-electrical .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-electrical .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-electrical .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-electrical .mfgHero h1>span {
display: block;
}
#dreamz-electrical .mfgHero h1 .mfgHeroAccent {
color: var(--yellow);
}
#dreamz-electrical .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-electrical .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-electrical .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-electrical .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-electrical .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-electrical .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-electrical .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-electrical .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-electrical .mfgHeroContent {
min-height: 610px;
}
#dreamz-electrical .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-electrical .mfgHeroLead {
font-size: 16px;
}
#dreamz-electrical .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-electrical .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-electrical .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-electrical .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-electrical .mfgHero h1 {
max-width: 620px;
}
#dreamz-electrical .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-electrical .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-electrical .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-electrical .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-electrical .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-electrical .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-electrical .mfgHero h1 {
line-height: 1.12;
}
#dreamz-electrical .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-electrical .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-electrical .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-electrical .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-electrical .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-electrical .mfgHero {
background: #fff;
color: #000;
}
#dreamz-electrical .mfgHeroScene,
#dreamz-electrical .mfgHeroActions {
display: none;
}
#dreamz-electrical .mfgHeroContent {
min-height: 0;
}
#dreamz-electrical .mfgHeroCopy {
width: 100%;
max-width: none;
}
}
#dreamz-electrical #electrical-commercial .featureStage,
#dreamz-electrical #electrical-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-electrical .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-electrical .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-electrical .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-electrical .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-electrical .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-electrical .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-electrical .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-electrical .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-electrical .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-electrical .mfgGallery .freshBody * {
box-shadow: none;
text-shadow: none;
}
#dreamz-electrical .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-electrical .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-electrical .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-electrical .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-electrical .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-electrical .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-electrical .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-electrical .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-electrical .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-electrical .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-electrical .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-electrical .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-electrical .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-electrical .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-electrical .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-electrical .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-electrical .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-electrical .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-electrical .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-electrical .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-electrical .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-electrical .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-electrical .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-electrical .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-electrical .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-electrical .mfgGallery .flowArrow {
display: none;
}
#dreamz-electrical .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-electrical .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-electrical .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-electrical .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-electrical .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-electrical .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-electrical .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-electrical .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-electrical .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-electrical .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-electrical .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-electrical .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-electrical .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-electrical .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-electrical .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-electrical .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-electrical .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-electrical .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-electrical .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-electrical .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-electrical .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-electrical .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-electrical .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-electrical .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-electrical .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-electrical .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-electrical .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-electrical .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-electrical .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-electrical .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-electrical .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-electrical .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-electrical .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-electrical .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-electrical .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-electrical .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-electrical .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-electrical .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-electrical .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-electrical .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-electrical .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-electrical .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-electrical .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-electrical .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-electrical .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-electrical .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-electrical .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-electrical .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-electrical .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-electrical .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-electrical .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-electrical .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-electrical .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-electrical .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-electrical .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-electrical .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-electrical .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-electrical .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-electrical .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-electrical .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-electrical .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-electrical .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-electrical .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-electrical .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-electrical .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-electrical .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-electrical .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-electrical .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-electrical .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-electrical .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-electrical .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-electrical .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-electrical .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-electrical .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-electrical .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-electrical .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-electrical .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-electrical .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-electrical .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-electrical .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-electrical .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-electrical .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-electrical .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-electrical .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-electrical .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-electrical .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-electrical .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-electrical #electrical-commercial .featureStage,
#dreamz-electrical #electrical-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-electrical #electrical-commercial .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-electrical .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-electrical #electrical-commercial .featureStage,
#dreamz-electrical #electrical-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-electrical .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-electrical .mfgGallery .freshWindow {
height: auto;
}
#dreamz-electrical .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-electrical .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-electrical .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-electrical .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-electrical .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-electrical .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-electrical .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-electrical .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-electrical .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-electrical .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-electrical .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-electrical .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-electrical .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-electrical .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-electrical .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-electrical .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-electrical .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-electrical .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-electrical .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-electrical .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-electrical .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-electrical .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-electrical .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-electrical .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-electrical .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-electrical .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-electrical .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-electrical .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-electrical .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-electrical .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-electrical .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-electrical .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-electrical .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-electrical .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-electrical .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-electrical .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-electrical .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-electrical .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-electrical .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-electrical .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-electrical .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-electrical .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-electrical .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-electrical .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-electrical .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-electrical .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-electrical .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-electrical .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-electrical .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-electrical .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-electrical .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-electrical .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-electrical .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-electrical .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-electrical .electricalVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-electrical .electricalGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-electrical .electricalIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-electrical .electricalStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-electrical .electricalVisualGallery>.electricalGraphic {
display: none;
}
#dreamz-electrical #electrical-service .featureStage,
#dreamz-electrical #electrical-commercial .featureStage,
#dreamz-electrical #electrical-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-electrical #electrical-commercial .electricalVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-electrical #electrical-commercial .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-electrical .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-electrical .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-electrical .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-electrical .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
}
@media (max-width:1100px) {
#dreamz-electrical #electrical-service .featureStage,
#dreamz-electrical #electrical-commercial .featureStage,
#dreamz-electrical #electrical-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-electrical #electrical-commercial .electricalVisualGallery,
#dreamz-electrical #electrical-commercial .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-electrical .mfgHeroScene {
height: 290px;
}
#dreamz-electrical #electrical-service .featureStage,
#dreamz-electrical #electrical-commercial .featureStage,
#dreamz-electrical #electrical-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-electrical .electricalVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-electrical .electricalVisualGallery>.electricalGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-electrical #electrical-service-features-1:checked~.featureStage .electricalVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-electrical #electrical-service-features-2:checked~.featureStage .electricalVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-electrical #electrical-service-features-3:checked~.featureStage .electricalVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-electrical #electrical-service-features-4:checked~.featureStage .electricalVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-electrical #electrical-service-features-5:checked~.featureStage .electricalVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-1:checked~.featureStage .electricalVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-2:checked~.featureStage .electricalVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-3:checked~.featureStage .electricalVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-4:checked~.featureStage .electricalVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-electrical #electrical-commercial-features-5:checked~.featureStage .electricalVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-1:checked~.featureStage .electricalVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-2:checked~.featureStage .electricalVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-3:checked~.featureStage .electricalVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-4:checked~.featureStage .electricalVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-electrical #electrical-ai-decisions-features-5:checked~.featureStage .electricalVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-electrical .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-electrical .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-electrical .electricalIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-electrical .electricalGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-electrical .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-electrical .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-electrical .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-electrical .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-electrical .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-electrical .mfgHeroContent {
background: transparent;
}
#dreamz-electrical .mfgHeroScene img {
object-position: 62% 50%;
}
#dreamz-electrical .electricalIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-electrical .electricalIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-electrical .electricalGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-electrical .electricalVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-electrical .mfgHeroScene img {
object-position: 68% 50%;
}
}
@media(max-width:600px) {
#dreamz-electrical .mfgHeroScene img {
object-position: 78% 50%;
}
}  #dreamz-windowcleaning .industryIntroHead.compact,
#dreamz-windowcleaning .industryIntroHead {
grid-template-columns: 1fr;
align-items: flex-start;
}
#dreamz-windowcleaning .featureMediaPanels {
position: relative;
min-height: 430px;
}
#dreamz-windowcleaning .featureMediaPanels>.mediaPanel {
display: none;
}
#dreamz-windowcleaning .featureMediaPanels>.mediaPanel:first-child {
display: block;
}
#dreamz-windowcleaning .featureMediaPanels .spotlightMedia {
height: 100%;
}
#dreamz-windowcleaning .mediaShell {
padding: 18px;
background: linear-gradient(180deg, #F7FBFE 0%, #EDF6FA 100%);
}
#dreamz-windowcleaning .decisionSpotlight .mediaShell {
background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFC 100%);
}
#dreamz-windowcleaning .mediaWindow {
background: #fff;
border: 1px solid #D8E7EF;
border-radius: 16px;
overflow: hidden;
box-shadow: none;
}
#dreamz-windowcleaning .windowTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #E1ECF2;
background: #FBFDFF;
}
#dreamz-windowcleaning .windowTop strong {
font-size: 13px;
color: var(--navy);
}
#dreamz-windowcleaning .windowTop small {
font-size: 10px;
color: var(--muted);
}
#dreamz-windowcleaning .windowDots {
display: flex;
gap: 5px;
}
#dreamz-windowcleaning .windowDots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D6E3EC;
display: block;
}
#dreamz-windowcleaning .windowBody {
padding: 16px;
}
#dreamz-windowcleaning .metricGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
}
#dreamz-windowcleaning .metricCard {
background: #F6FAFD;
border: 1px solid #DDEAF1;
border-radius: 12px;
padding: 10px;
}
#dreamz-windowcleaning .metricCard strong {
display: block;
font-size: 18px;
line-height: 1.2;
color: var(--navy);
}
#dreamz-windowcleaning .metricCard span {
display: block;
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin-top: 4px;
}
#dreamz-windowcleaning .miniChart {
height: 150px;
border: 1px solid #E2EDF2;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #F8FBFD 100%);
padding: 12px;
position: relative;
overflow: hidden;
}
#dreamz-windowcleaning .chartGridLine {
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background: #E7EEF3;
}
#dreamz-windowcleaning .chartGridLine.l1 {
top: 34px;
}
#dreamz-windowcleaning .chartGridLine.l2 {
top: 65px;
}
#dreamz-windowcleaning .chartGridLine.l3 {
top: 96px;
}
#dreamz-windowcleaning .chartGridLine.l4 {
top: 127px;
}
#dreamz-windowcleaning .chartSvg {
position: relative;
z-index: 1;
width: 100%;
height: 126px;
display: block;
}
#dreamz-windowcleaning .axisRow {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #7590A1;
margin-top: 8px;
padding: 0 2px;
}
#dreamz-windowcleaning .gaugeGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#dreamz-windowcleaning .gaugeCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-windowcleaning .gaugeCard label {
display: block;
font-size: 10px;
font-weight: 800;
color: #51697B;
margin-bottom: 8px;
}
#dreamz-windowcleaning .gaugeBar {
height: 10px;
border-radius: 999px;
background: #E8F0F5;
overflow: hidden;
}
#dreamz-windowcleaning .gaugeFill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #1FB1FF 0%, #2D78FF 62%, #F7B733 100%);
}
#dreamz-windowcleaning .gaugeMeta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--navy);
margin-top: 8px;
}
#dreamz-windowcleaning .spectrumGrid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 12px;
}
#dreamz-windowcleaning .spectrumNotes {
display: grid;
gap: 10px;
}
#dreamz-windowcleaning .noteCard {
border: 1px solid #DDEAF1;
background: #F7FBFE;
border-radius: 12px;
padding: 12px;
}
#dreamz-windowcleaning .noteCard strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-bottom: 5px;
}
#dreamz-windowcleaning .noteCard p,
#dreamz-windowcleaning .noteCard span {
font-size: 10px;
line-height: 1.6;
color: var(--muted);
display: block;
}
#dreamz-windowcleaning .alertStack {
display: grid;
gap: 10px;
}
#dreamz-windowcleaning .alertCard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #DDEAF1;
border-left: 4px solid var(--brand);
background: #fff;
border-radius: 14px;
padding: 12px;
}
#dreamz-windowcleaning .alertCard.warn {
border-left-color: #F4A62A;
background: #FFF9EC;
}
#dreamz-windowcleaning .alertCard.danger {
border-left-color: #E85C5C;
background: #FFF5F5;
}
#dreamz-windowcleaning .alertBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 26px;
border-radius: 999px;
background: #EAF8FF;
color: var(--brand-dark);
font-size: 10px;
font-weight: 850;
padding: 0 10px;
}
#dreamz-windowcleaning .alertCard.warn .alertBadge {
background: #FFF0C8;
color: #9A6500;
}
#dreamz-windowcleaning .alertCard.danger .alertBadge {
background: #FFDADA;
color: #B43232;
}
#dreamz-windowcleaning .alertText strong {
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-windowcleaning .alertText span {
display: block;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
#dreamz-windowcleaning .alertTime {
font-size: 10px;
color: #6C8798;
font-weight: 700;
}
#dreamz-windowcleaning .scheduleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-windowcleaning .scheduleBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-windowcleaning .scheduleBoard h4,
#dreamz-windowcleaning .todoBoard h4,
#dreamz-windowcleaning .siteBoard h4,
#dreamz-windowcleaning .chatPanel h4,
#dreamz-windowcleaning .lessonPanel h4,
#dreamz-windowcleaning .qualityPanel h4 {
font-size: 12px;
color: var(--navy);
margin: 0 0 10px;
}
#dreamz-windowcleaning .scheduleDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
font-size: 9px;
color: #6C8798;
}
#dreamz-windowcleaning .scheduleDays span {
display: grid;
place-items: center;
border-radius: 8px;
padding: 8px 0;
background: #F6FAFD;
border: 1px solid #E1ECF2;
}
#dreamz-windowcleaning .scheduleDays span.active {
background: #FFF4CB;
border-color: #F1D880;
color: #8C6800;
font-weight: 800;
}
#dreamz-windowcleaning .todoBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-windowcleaning .taskRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #E1ECF2;
}
#dreamz-windowcleaning .taskRow:last-child {
border-bottom: 0;
}
#dreamz-windowcleaning .taskRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-windowcleaning .taskRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-windowcleaning .taskPill {
display: inline-block;
font-size: 9px;
font-weight: 850;
border-radius: 999px;
padding: 5px 8px;
background: #EAF8FF;
color: var(--brand-dark);
}
#dreamz-windowcleaning .inventorySplit {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
#dreamz-windowcleaning .inventoryTable {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
#dreamz-windowcleaning .inventoryTable th,
#dreamz-windowcleaning .inventoryTable td {
padding: 8px 8px;
border-bottom: 1px solid #E4EDF2;
text-align: left;
}
#dreamz-windowcleaning .inventoryTable th {
font-size: 9px;
letter-spacing: .04em;
color: #688295;
text-transform: uppercase;
}
#dreamz-windowcleaning .inventoryTable td strong {
color: var(--navy);
font-size: 11px;
}
#dreamz-windowcleaning .phoneMock {
border: 1px solid #DCE8F1;
border-radius: 22px;
background: #111;
padding: 8px;
max-width: 190px;
margin-left: auto;
}
#dreamz-windowcleaning .phoneScreen {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#dreamz-windowcleaning .phoneHeader {
background: var(--brand);
color: #fff;
padding: 10px 12px;
font-size: 11px;
font-weight: 800;
}
#dreamz-windowcleaning .phoneBody {
padding: 12px;
}
#dreamz-windowcleaning .scanBox {
border: 1px dashed #BFD5E3;
border-radius: 14px;
padding: 16px 12px;
text-align: center;
background: #F8FBFD;
}
#dreamz-windowcleaning .barcode {
height: 46px;
margin: 0 auto 10px;
width: 90px;
background: repeating-linear-gradient(90deg, #223444 0 3px, #fff 3px 5px);
border-radius: 4px;
}
#dreamz-windowcleaning .scanBox strong {
display: block;
font-size: 12px;
color: var(--navy);
}
#dreamz-windowcleaning .scanBox span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-windowcleaning .progressList {
display: grid;
gap: 10px;
}
#dreamz-windowcleaning .progressRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#dreamz-windowcleaning .progressRow span {
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-windowcleaning .progressTrack {
height: 8px;
background: #EAF0F4;
border-radius: 999px;
overflow: hidden;
}
#dreamz-windowcleaning .progressTrack i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #52B7FF 100%);
border-radius: 999px;
}
#dreamz-windowcleaning .siteGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dreamz-windowcleaning .siteBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-windowcleaning .mapBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: linear-gradient(180deg, #F7FBFE 0%, #F1F7FB 100%);
position: relative;
min-height: 220px;
}
#dreamz-windowcleaning .mapBoard:before {
content: "";
position: absolute;
inset: 18px;
background: radial-gradient(circle at 20% 35%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), radial-gradient(circle at 65% 25%, rgba(244, 132, 30, .14) 0 24px, transparent 25px), radial-gradient(circle at 72% 72%, rgba(41, 142, 236, .14) 0 24px, transparent 25px), linear-gradient(120deg, transparent 0 15%, rgba(176, 205, 223, .35) 15% 17%, transparent 17% 36%, rgba(176, 205, 223, .35) 36% 38%, transparent 38% 100%);
border-radius: 14px;
}
#dreamz-windowcleaning .mapPin {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-dark);
border: 3px solid #fff;
box-shadow: 0 0 0 3px rgba(41, 142, 236, .18);
}
#dreamz-windowcleaning .pin1 {
top: 56px;
left: 58px;
}
#dreamz-windowcleaning .pin2 {
top: 88px;
right: 88px;
}
#dreamz-windowcleaning .pin3 {
bottom: 54px;
right: 72px;
}
#dreamz-windowcleaning .siteRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #E3EDF2;
}
#dreamz-windowcleaning .siteRow:last-child {
border-bottom: 0;
}
#dreamz-windowcleaning .siteRow strong {
font-size: 11px;
color: var(--navy);
display: block;
}
#dreamz-windowcleaning .siteRow span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-windowcleaning .siteDelta {
font-size: 10px;
font-weight: 800;
color: #09734F;
}
#dreamz-windowcleaning .graphBoard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 14px;
background: #fff;
}
#dreamz-windowcleaning .graphNodes {
position: relative;
min-height: 230px;
border: 1px solid #E5EDF2;
border-radius: 14px;
background: #FBFDFF;
overflow: hidden;
}
#dreamz-windowcleaning .graphNodes:before,
#dreamz-windowcleaning .graphNodes:after {
content: "";
position: absolute;
background: #C9D7E0;
height: 2px;
transform-origin: left center;
}
#dreamz-windowcleaning .graphNodes:before {
width: 150px;
left: 150px;
top: 96px;
transform: rotate(-10deg);
}
#dreamz-windowcleaning .graphNodes:after {
width: 145px;
left: 152px;
top: 114px;
transform: rotate(34deg);
}
#dreamz-windowcleaning .node {
position: absolute;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1.35;
padding: 10px;
}
#dreamz-windowcleaning .node.core {
width: 106px;
height: 106px;
background: #F59B23;
left: 115px;
top: 72px;
}
#dreamz-windowcleaning .node.n1 {
width: 78px;
height: 78px;
background: #6C5CF0;
right: 44px;
top: 42px;
}
#dreamz-windowcleaning .node.n2 {
width: 76px;
height: 76px;
background: #8B9CFB;
right: 55px;
top: 136px;
}
#dreamz-windowcleaning .node.n3 {
width: 66px;
height: 66px;
background: #C5BFFF;
color: #324354;
right: 136px;
bottom: 22px;
}
#dreamz-windowcleaning .graphFooter {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: #FFF9EC;
border: 1px solid #F1E2B0;
font-size: 10px;
color: #5F4F28;
}
#dreamz-windowcleaning .forecastGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 12px;
}
#dreamz-windowcleaning .forecastCard {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-windowcleaning .forecastList .taskRow strong {
font-size: 11px;
}
#dreamz-windowcleaning .chatPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-windowcleaning .chatBubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
font-size: 11px;
line-height: 1.65;
}
#dreamz-windowcleaning .chatBubble.user {
margin-left: auto;
background: #EAF8FF;
color: #23455C;
}
#dreamz-windowcleaning .chatBubble.bot {
background: #F6F8FB;
color: #334B5C;
}
#dreamz-windowcleaning .chatInput {
margin-top: 10px;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 14px;
font-size: 10px;
color: #7B92A2;
background: #FBFDFF;
}
#dreamz-windowcleaning .lessonPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-windowcleaning .lessonCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-windowcleaning .lessonCard {
border: 1px solid #E2ECF2;
border-radius: 12px;
padding: 12px;
background: #F8FBFD;
}
#dreamz-windowcleaning .lessonCard strong {
display: block;
font-size: 11px;
color: var(--navy);
line-height: 1.45;
}
#dreamz-windowcleaning .lessonCard span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.55;
margin-top: 6px;
}
#dreamz-windowcleaning .lessonTag {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: #8C6800;
background: #FFF4CB;
border-radius: 999px;
padding: 5px 8px;
margin-top: 8px;
}
#dreamz-windowcleaning .qualityPanel {
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
background: #fff;
}
#dreamz-windowcleaning .heatmap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 12px;
}
#dreamz-windowcleaning .heatmap span {
display: block;
padding-top: 100%;
border-radius: 10px;
background: #F1F6FA;
position: relative;
overflow: hidden;
}
#dreamz-windowcleaning .heatmap span.hot {
background: linear-gradient(180deg, #FFCC80 0%, #F59B23 100%);
}
#dreamz-windowcleaning .heatmap span.cool {
background: linear-gradient(180deg, #CFE8FF 0%, #6CB5FF 100%);
}
#dreamz-windowcleaning .qualityRows {
display: grid;
gap: 10px;
}
#dreamz-windowcleaning .qualityRows .taskRow {
padding: 10px 12px;
border: 1px solid #E2ECF2;
border-radius: 12px;
background: #F9FBFD;
border-bottom: 1px solid #E2ECF2;
}
#dreamz-windowcleaning .decisionSpotlight .qualityRows .taskPill {
background: #2A3140;
color: #fff;
}
#dreamz-windowcleaning .legendRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 9px;
color: #6C8798;
}
#dreamz-windowcleaning .legendRow span {
display: inline-flex;
align-items: center;
gap: 5px;
}
#dreamz-windowcleaning .legendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
#dreamz-windowcleaning #windowcleaning-service-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-windowcleaning #windowcleaning-service-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-windowcleaning #windowcleaning-service-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-windowcleaning #windowcleaning-service-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-windowcleaning #windowcleaning-service-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-windowcleaning #windowcleaning-commercial-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-windowcleaning #windowcleaning-commercial-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-windowcleaning #windowcleaning-commercial-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-windowcleaning #windowcleaning-commercial-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-windowcleaning #windowcleaning-commercial-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :nth-child(1),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :nth-child(2),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :nth-child(3),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :nth-child(4),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :nth-child(5) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-windowcleaning #windowcleaning-service-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-windowcleaning #windowcleaning-service-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-windowcleaning #windowcleaning-service-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-windowcleaning #windowcleaning-service-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-windowcleaning #windowcleaning-commercial-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-windowcleaning #windowcleaning-commercial-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-windowcleaning #windowcleaning-commercial-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-windowcleaning #windowcleaning-commercial-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-windowcleaning #windowcleaning-commercial-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-1:checked~.featureStage .featureMediaPanels> :not(:nth-child(1)),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-2:checked~.featureStage .featureMediaPanels> :not(:nth-child(2)),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-3:checked~.featureStage .featureMediaPanels> :not(:nth-child(3)),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-4:checked~.featureStage .featureMediaPanels> :not(:nth-child(4)),
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-5:checked~.featureStage .featureMediaPanels> :not(:nth-child(5)) {
display: none;
}
@media (max-width:980px) {
#dreamz-windowcleaning .metricGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-windowcleaning .featureMediaPanels {
min-height: 0;
}
#dreamz-windowcleaning .inventorySplit,
#dreamz-windowcleaning .forecastGrid,
#dreamz-windowcleaning .siteGrid,
#dreamz-windowcleaning .spectrumGrid,
#dreamz-windowcleaning .scheduleGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .phoneMock {
margin: 0 auto;
}
}
@media (max-width:640px) {
#dreamz-windowcleaning .metricGrid,
#dreamz-windowcleaning .lessonCards,
#dreamz-windowcleaning .gaugeGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .heatmap {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-windowcleaning .scheduleDays {
grid-template-columns: repeat(4, 1fr);
}
}
#dreamz-windowcleaning {
--brand: #00A8F8;
--brand-dark: #007FC5;
--navy: #063B5C;
--navy-2: #0B4F75;
--sky: #EAF8FF;
--sky-2: #F5FBFF;
--ink: #11283A;
--muted: #607487;
--line: #D9E8F1;
--white: #FFFFFF;
--success: #118A61;
--success-bg: #EAF8F3;
--gold: #F4C64E;
--black: #0B0B0B;
--black-soft: #171717;
--yellow: #FFC928;
--yellow-soft: #FFF7D6;
--yellow-dark: #B98300;
--shadow: none;
--radius: 20px;
--max: 1320px;
}
#dreamz-windowcleaning * {
box-sizing: border-box;
}
#dreamz-windowcleaning {
scroll-behavior: smooth;
}
#dreamz-windowcleaning {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--sky-2);
line-height: 1.65;
}
#dreamz-windowcleaning a {
color: inherit;
text-decoration: none;
}
#dreamz-windowcleaning .wrap {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
}
#dreamz-windowcleaning .topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-weight: 900;
font-size: 23px;
letter-spacing: -.03em;
}
#dreamz-windowcleaning .brandMark {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), #62CCFF);
box-shadow: none;
}
#dreamz-windowcleaning .brand span {
color: var(--brand);
}
#dreamz-windowcleaning .navlinks {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 14px;
}
#dreamz-windowcleaning .button {
display: inline-flex;
min-height: 48px;
padding: 0 22px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid transparent;
font-weight: 800;
transition: .2s ease;
}
#dreamz-windowcleaning .button.primary {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
#dreamz-windowcleaning .button.primary:hover {
background: var(--brand-dark);
}
#dreamz-windowcleaning .button.secondary {
background: var(--white);
color: var(--navy);
border-color: var(--line);
}
#dreamz-windowcleaning .hero {
position: relative;
overflow: hidden;
padding: 82px 0 72px;
background:
radial-gradient(circle at 85% 15%, rgba(0, 168, 248, .18), transparent 30%),
radial-gradient(circle at 15% 30%, rgba(0, 168, 248, .08), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #F3FBFF 100%);
}
#dreamz-windowcleaning .heroGrid {
display: grid;
grid-template-columns: 1.03fr .97fr;
gap: 58px;
align-items: center;
}
#dreamz-windowcleaning .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
background: var(--yellow-soft);
color: var(--black);
font-size: 13px;
font-weight: 850;
margin-bottom: 20px;
}
#dreamz-windowcleaning h3 {
font-size: 23px;
color: var(--black);
}
#dreamz-windowcleaning .lead {
color: var(--muted);
font-size: 20px;
margin: 24px 0 0;
max-width: 720px;
}
#dreamz-windowcleaning .heroActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#dreamz-windowcleaning .microcopy {
color: var(--muted);
font-size: 14px;
margin-top: 14px;
}
#dreamz-windowcleaning .hero .button.primary {
background: var(--black);
color: var(--white);
box-shadow: none;
}
#dreamz-windowcleaning .hero .button.primary:hover {
background: var(--black-soft);
}
#dreamz-windowcleaning .hero .button.secondary {
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-windowcleaning .placeholder {
min-height: 400px;
border-radius: var(--radius);
border: 2px dashed #9EDCF8;
background: linear-gradient(145deg, #FFFFFF 0%, #EAF8FF 100%);
box-shadow: none;
color: var(--navy-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-weight: 850;
}
#dreamz-windowcleaning .placeholder small {
display: block;
margin-top: 8px;
color: var(--muted);
font-weight: 500;
}
#dreamz-windowcleaning .clientBand {
background: var(--white);
padding: 30px 0;
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .trustLabel {
text-align: center;
color: var(--black);
font-weight: 800;
font-size: 14px;
margin-bottom: 18px;
}
#dreamz-windowcleaning .logoRow {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
#dreamz-windowcleaning .logoBox {
min-height: 66px;
border-radius: 12px;
border: 1px dashed #B8D7E7;
background: #fff;
display: grid;
place-items: center;
text-align: center;
padding: 10px;
color: #7B8E9E;
font-size: 12px;
font-weight: 750;
}
#dreamz-windowcleaning .ratingBand {
background: var(--black);
color: #fff;
padding: 22px 0;
border-top: 4px solid var(--yellow);
}
#dreamz-windowcleaning .ratingGrid {
display: grid;
grid-template-columns: 1.1fr repeat(5, 1fr);
gap: 14px;
align-items: center;
}
#dreamz-windowcleaning .ratingSectionGrid {
display: grid;
grid-template-columns: 1.2fr 2.8fr;
gap: 30px;
align-items: center;
}
#dreamz-windowcleaning .awardProofGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#dreamz-windowcleaning .ratingLead strong {
display: block;
font-size: 20px;
}
#dreamz-windowcleaning .ratingLead span {
color: #D6D6D6;
font-size: 13px;
}
#dreamz-windowcleaning .ratingItem {
text-align: center;
padding: 8px 10px;
border-left: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-windowcleaning .stars {
color: var(--yellow);
letter-spacing: 2px;
font-size: 15px;
}
#dreamz-windowcleaning .ratingItem strong {
display: block;
font-size: 13px;
margin-top: 3px;
}
#dreamz-windowcleaning .ratingItem span {
color: #CFCFCF;
font-size: 11px;
}
#dreamz-windowcleaning .awardGrid {
display: grid;
grid-template-columns: 1.05fr repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
#dreamz-windowcleaning .awardLead {
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-windowcleaning .awardLead strong {
color: var(--navy);
font-size: 20px;
}
#dreamz-windowcleaning .awardLead span {
color: var(--muted);
font-size: 13px;
}
#dreamz-windowcleaning .awardItem {
background: #fff;
border: 1px solid #E8D487;
border-top: 4px solid var(--yellow);
border-radius: 13px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
min-height: 72px;
color: var(--black);
font-size: 12px;
font-weight: 850;
box-shadow: none;
}
#dreamz-windowcleaning section {
padding: 88px 0;
}
#dreamz-windowcleaning .sectionHead {
margin-bottom: 44px;
}
#dreamz-windowcleaning .sectionHead p {
color: var(--muted);
margin: 16px 0 0;
font-size: 18px;
}
#dreamz-windowcleaning .aiJourney {
background: var(--black);
color: #fff;
border-top: 4px solid var(--yellow);
border-bottom: 1px solid #252525;
}
#dreamz-windowcleaning .aiJourney h2 {
color: #fff;
}
#dreamz-windowcleaning .aiJourney .sectionHead p {
color: #D7D7D7;
}
#dreamz-windowcleaning .aiFlow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#dreamz-windowcleaning .aiStep {
position: relative;
background: #151515;
border: 1px solid #2A2A2A;
border-radius: 16px;
padding: 20px 16px;
min-height: 155px;
}
#dreamz-windowcleaning .aiStep::after {
content: "→";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
color: var(--yellow);
font-weight: 900;
font-size: 20px;
z-index: 2;
}
#dreamz-windowcleaning .aiStep:last-child::after {
display: none;
}
#dreamz-windowcleaning .aiStepNum {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
font-size: 12px;
margin-bottom: 12px;
}
#dreamz-windowcleaning .aiStep strong {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 7px;
}
#dreamz-windowcleaning .aiStep span {
color: #CFCFCF;
font-size: 12px;
line-height: 1.5;
display: block;
}
#dreamz-windowcleaning .aiCallout {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow-soft);
color: var(--black);
border: 1px solid #F2D55C;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 800;
}
#dreamz-windowcleaning .outcomeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-windowcleaning .outcome {
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 16px;
padding: 24px;
}
#dreamz-windowcleaning .outcome strong {
display: block;
color: var(--black);
font-size: 24px;
margin-bottom: 8px;
}
#dreamz-windowcleaning .outcome span {
color: var(--muted);
font-size: 14px;
}
#dreamz-windowcleaning .capability {
background: #fff;
}
#dreamz-windowcleaning .capability.alt {
background: var(--sky-2);
}
#dreamz-windowcleaning .twoCol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
#dreamz-windowcleaning .twoCol.reverse .visual {
order: 2;
}
#dreamz-windowcleaning .copy p {
color: var(--muted);
font-size: 17px;
margin: 16px 0 0;
}
#dreamz-windowcleaning .visual .placeholder {
min-height: 355px;
}
#dreamz-windowcleaning .featureList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 25px;
}
#dreamz-windowcleaning .featureList.primaryOnly .featureItem:nth-child(n+5) {
display: none;
}
#dreamz-windowcleaning details.capabilityMore {
margin-top: 18px;
background: transparent;
border: 0;
padding: 0;
}
#dreamz-windowcleaning details.capabilityMore summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--brand-dark);
font-size: 14px;
font-weight: 850;
list-style: none;
}
#dreamz-windowcleaning details.capabilityMore summary::-webkit-details-marker {
display: none;
}
#dreamz-windowcleaning details.capabilityMore summary::after {
content: "+";
font-size: 18px;
line-height: 1;
}
#dreamz-windowcleaning details.capabilityMore[open] summary::after {
content: "−";
}
#dreamz-windowcleaning details.capabilityMore .moreGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
margin-top: 14px;
}
#dreamz-windowcleaning .featureItem {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ink);
font-size: 14px;
}
#dreamz-windowcleaning .check {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--success);
background: var(--success-bg);
font-size: 12px;
font-weight: 900;
margin-top: 1px;
}
#dreamz-windowcleaning .darkSection {
background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-windowcleaning .darkSection h2,
#dreamz-windowcleaning .darkSection h3 {
color: #fff;
}
#dreamz-windowcleaning .darkSection .sectionHead p,
#dreamz-windowcleaning .darkSection .copy p {
color: #D7D7D7;
}
#dreamz-windowcleaning .darkSection .eyebrow {
background: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning .darkSection .featureItem {
color: #F7F7F7;
}
#dreamz-windowcleaning .darkSection .check {
background: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning .darkSection details.capabilityMore summary {
color: var(--yellow);
}
#dreamz-windowcleaning .darkSection .placeholder {
background: linear-gradient(145deg, #111111, #202020);
border-color: var(--yellow);
box-shadow: none;
color: #fff;
}
#dreamz-windowcleaning .darkSection .placeholder small {
color: #D0D0D0;
}
#dreamz-windowcleaning .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-windowcleaning .card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 27px;
box-shadow: none;
}
#dreamz-windowcleaning .cardIcon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--yellow);
color: var(--black);
font-weight: 900;
margin-bottom: 17px;
box-shadow: none;
}
#dreamz-windowcleaning .card p {
color: var(--muted);
margin: 12px 0 0;
}
#dreamz-windowcleaning .challengeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
#dreamz-windowcleaning .challenge {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
}
#dreamz-windowcleaning .challenge strong {
display: block;
color: var(--black);
margin-bottom: 8px;
}
#dreamz-windowcleaning .challenge p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
#dreamz-windowcleaning .benefitBand {
background: linear-gradient(135deg, var(--black), #202020);
color: #fff;
border-top: 4px solid var(--yellow);
}
#dreamz-windowcleaning .benefitBand h2 {
color: #fff;
}
#dreamz-windowcleaning .benefitBand .sectionHead p {
color: #D5D5D5;
}
#dreamz-windowcleaning .benefitBand .eyebrow {
background: var(--yellow) !important;
color: var(--black) !important;
}
#dreamz-windowcleaning .benefitGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#dreamz-windowcleaning .benefit {
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
padding: 24px;
background: rgba(255, 255, 255, .06);
}
#dreamz-windowcleaning .benefit strong {
display: block;
font-size: 27px;
margin-bottom: 6px;
color: var(--yellow);
}
#dreamz-windowcleaning .benefit span {
color: #E1E1E1;
font-size: 14px;
}
#dreamz-windowcleaning .integrationGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 13px;
}
#dreamz-windowcleaning .integration {
min-height: 74px;
background: #fff;
border: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
border-radius: 13px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
color: var(--black);
font-weight: 800;
font-size: 13px;
}
#dreamz-windowcleaning .proofCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#dreamz-windowcleaning .proofCard {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
}
#dreamz-windowcleaning .metricPlaceholder {
color: var(--black);
font-size: 32px;
font-weight: 900;
margin-bottom: 8px;
display: inline-block;
background: var(--yellow);
padding: 2px 10px;
border-radius: 8px;
}
#dreamz-windowcleaning .proofCard p {
color: var(--muted);
margin: 8px 0 0;
}
#dreamz-windowcleaning .faq {
max-width: 900px;
}
#dreamz-windowcleaning .ctaPanel {
background: linear-gradient(135deg, var(--black), #202020);
border-radius: 28px;
padding: 54px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
box-shadow: none;
border-top: 5px solid var(--yellow);
}
#dreamz-windowcleaning .ctaPanel h2 {
color: #fff;
}
#dreamz-windowcleaning .ctaPanel p {
color: #E6E6E6;
font-size: 18px;
margin: 14px 0 0;
max-width: 720px;
}
#dreamz-windowcleaning .ctaPanel .button.primary {
background: var(--yellow);
color: var(--black);
box-shadow: none;
}
#dreamz-windowcleaning .ctaPanel .button.primary:hover {
background: #FFD84D;
}
#dreamz-windowcleaning .ctaPanel .button.secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#dreamz-windowcleaning .inlineCta {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 18px;
background: #fff;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: none;
}
#dreamz-windowcleaning .inlineCta.dark {
background: var(--black);
border-color: #262626;
border-left-color: var(--yellow);
color: #fff;
}
#dreamz-windowcleaning .inlineCta h3 {
font-size: 20px;
margin-bottom: 6px;
}
#dreamz-windowcleaning .inlineCta.dark h3 {
color: #fff;
}
#dreamz-windowcleaning .inlineCta p {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 680px;
}
#dreamz-windowcleaning .inlineCta.dark p {
color: #D8D8D8;
}
#dreamz-windowcleaning .inlineCtaActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
}
#dreamz-windowcleaning .button.yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
box-shadow: none;
}
#dreamz-windowcleaning .button.yellow:hover {
background: #FFD84D;
}
#dreamz-windowcleaning .button.black {
background: var(--black);
color: #fff;
border-color: var(--black);
box-shadow: none;
}
#dreamz-windowcleaning .inlineCta.dark .button.secondary {
background: transparent;
color: #fff;
border-color: #555;
}
#dreamz-windowcleaning .textCta {
display: inline-flex;
margin-top: 18px;
font-weight: 850;
color: var(--brand-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
}
#dreamz-windowcleaning .auditNote {
margin-top: 20px;
background: #ECF9FF;
border: 1px solid #BDE9FD;
color: #315D76;
padding: 16px 18px;
border-radius: 13px;
font-size: 13px;
}
#dreamz-windowcleaning footer {
padding: 36px 0 48px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 980px) {
#dreamz-windowcleaning .ratingSectionGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .awardProofGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-windowcleaning .heroGrid,
#dreamz-windowcleaning .twoCol,
#dreamz-windowcleaning .ctaPanel {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .twoCol.reverse .visual {
order: initial;
}
#dreamz-windowcleaning .logoRow {
grid-template-columns: repeat(4, 1fr);
}
#dreamz-windowcleaning .ratingGrid,
#dreamz-windowcleaning .awardGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-windowcleaning .ratingLead,
#dreamz-windowcleaning .awardLead {
grid-column: 1/-1;
text-align: center;
}
#dreamz-windowcleaning .aiFlow {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-windowcleaning .aiStep:nth-child(3)::after,
#dreamz-windowcleaning .aiStep:last-child::after {
display: none;
}
#dreamz-windowcleaning .outcomeGrid,
#dreamz-windowcleaning .challengeGrid,
#dreamz-windowcleaning .benefitGrid {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-windowcleaning .cards,
#dreamz-windowcleaning .proofCards {
grid-template-columns: repeat(2, 1fr);
}
#dreamz-windowcleaning .integrationGrid {
grid-template-columns: repeat(3, 1fr);
}
#dreamz-windowcleaning .navlinks {
display: none;
}
}
@media (max-width: 640px) {
#dreamz-windowcleaning .awardProofGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .wrap {
width: min(var(--max), calc(100% - 24px));
}
#dreamz-windowcleaning .hero {
padding: 58px 0 52px;
}
#dreamz-windowcleaning section {
padding: 64px 0;
}
#dreamz-windowcleaning .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .aiStep::after {
display: none;
}
#dreamz-windowcleaning .logoRow,
#dreamz-windowcleaning .ratingGrid,
#dreamz-windowcleaning .awardGrid,
#dreamz-windowcleaning .outcomeGrid,
#dreamz-windowcleaning .challengeGrid,
#dreamz-windowcleaning .benefitGrid,
#dreamz-windowcleaning .cards,
#dreamz-windowcleaning .proofCards,
#dreamz-windowcleaning .integrationGrid,
#dreamz-windowcleaning .featureList {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .ratingItem {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
#dreamz-windowcleaning .ctaPanel {
padding: 34px 24px;
}
#dreamz-windowcleaning .inlineCta {
flex-direction: column;
align-items: flex-start;
}
#dreamz-windowcleaning .inlineCtaActions {
width: 100%;
}
#dreamz-windowcleaning .inlineCtaActions .button {
flex: 1;
}
}
#dreamz-windowcleaning {
--muted: #526A7C;
--shadow: none;
}
#dreamz-windowcleaning {
background: var(--sky-2);
}
#dreamz-windowcleaning p {
margin-bottom: 0;
}
#dreamz-windowcleaning [id] {
scroll-margin-top: 94px;
}
#dreamz-windowcleaning svg text {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#dreamz-windowcleaning .icon {
width: 24px;
height: 24px;
display: block;
flex: 0 0 24px;
margin: 0;
background: transparent;
}
#dreamz-windowcleaning .darkSection h2,
#dreamz-windowcleaning .darkSection h3,
#dreamz-windowcleaning .aiJourney h2,
#dreamz-windowcleaning .benefitBand h2,
#dreamz-windowcleaning .ctaPanel h2,
#dreamz-windowcleaning .inlineCta.dark h3 {
color: #fff;
}
#dreamz-windowcleaning .wrap>*,
#dreamz-windowcleaning .heroGrid>*,
#dreamz-windowcleaning .twoCol>*,
#dreamz-windowcleaning .ctaPanel>* {
min-width: 0;
}
#dreamz-windowcleaning .srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dreamz-windowcleaning .skipLink {
position: fixed;
z-index: 100;
left: 16px;
top: 8px;
background: #fff;
padding: 10px 16px;
transform: translateY(-180%);
border: 2px solid var(--brand-dark);
border-radius: 8px;
}
#dreamz-windowcleaning .skipLink:focus {
transform: none;
}
#dreamz-windowcleaning a:focus-visible,
#dreamz-windowcleaning summary:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 5px;
}
#dreamz-windowcleaning .darkSection a:focus-visible,
#dreamz-windowcleaning .darkSection summary:focus-visible,
#dreamz-windowcleaning .ctaPanel a:focus-visible {
outline-color: var(--yellow);
}
#dreamz-windowcleaning .topbar {
background: #fff;
backdrop-filter: none;
}
#dreamz-windowcleaning .brand {
gap: 9px;
font-size: 23px;
flex: 0 0 auto;
}
#dreamz-windowcleaning .brandName {
display: inline;
color: var(--navy) !important;
}
#dreamz-windowcleaning .brandName>span {
color: var(--brand-dark);
}
#dreamz-windowcleaning .brandMark {
display: grid;
place-items: center;
background: var(--brand);
box-shadow: none;
color: #fff !important;
}
#dreamz-windowcleaning .brandMark .icon {
width: 21px;
height: 21px;
}
#dreamz-windowcleaning .navlinks {
font-size: 13px;
font-weight: 650;
gap: 22px;
}
#dreamz-windowcleaning .navlinks a:hover {
color: var(--brand-dark);
}
#dreamz-windowcleaning .button {
gap: 9px;
text-align: center;
box-shadow: none;
}
#dreamz-windowcleaning .button .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-windowcleaning .hero {
background: linear-gradient(180deg, #fff 0%, #F0FAFF 100%);
padding: 78px 0 70px;
}
#dreamz-windowcleaning .heroGrid {
grid-template-columns: 1.03fr 1fr;
gap: 46px;
}
#dreamz-windowcleaning .hero h1 {
font-size: clamp(44px, 5.15vw, 68px);
line-height: 1.06;
}
#dreamz-windowcleaning .hero .lead {
font-size: 18px;
line-height: 1.8;
}
#dreamz-windowcleaning .hero .microcopy {
font-size: 12px;
line-height: 1.8;
max-width: 525px;
}
#dreamz-windowcleaning .heroVisual {
width: 100%;
min-width: 0;
}
#dreamz-windowcleaning .heroIllustration {
width: 100%;
height: auto;
display: block;
max-width: 100%;
aspect-ratio: 620/530;
}
#dreamz-windowcleaning .graphicNote {
text-align: right;
font-size: 10px;
color: var(--muted);
margin: 10px 4px 0;
}
#dreamz-windowcleaning .heroPills {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
#dreamz-windowcleaning .heroPills span {
border: 1px solid #D4E9F4;
border-radius: 7px;
background: #fff;
padding: 5px 9px;
font-size: 10px;
font-weight: 750;
color: var(--navy);
}
#dreamz-windowcleaning .clientBand {
padding: 27px 0;
}
#dreamz-windowcleaning .trustLabel {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
#dreamz-windowcleaning .logoRow {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
#dreamz-windowcleaning .logoBox {
border: 1px solid #E5EDF2;
min-height: 62px;
color: #435466;
font-size: 16px;
letter-spacing: -.025em;
border-radius: 10px;
line-height: 1.25;
font-weight: 800;
}
#dreamz-windowcleaning .logoBox.wide {
font-size: 12px;
}
#dreamz-windowcleaning .logoBox small {
display: block;
font-size: 10px;
}
#dreamz-windowcleaning section {
padding: 80px 0;
}
#dreamz-windowcleaning h2 {
font-size: clamp(32px, 3.8vw, 48px);
}
#dreamz-windowcleaning .sectionHead {
margin-bottom: 36px;
}
#dreamz-windowcleaning .eyebrow {
line-height: 1.5;
}
#dreamz-windowcleaning .aiJourney .eyebrow {
color: var(--black);
background: var(--yellow);
}
#dreamz-windowcleaning .aiStep {
min-height: 162px;
}
#dreamz-windowcleaning .aiStep strong {
line-height: 1.35;
}
#dreamz-windowcleaning .aiStep span {
line-height: 1.65;
}
#dreamz-windowcleaning .aiCallout {
margin-top: 24px;
}
#dreamz-windowcleaning .outcome strong {
font-size: 21px;
line-height: 1.25;
margin: 16px 0 10px;
}
#dreamz-windowcleaning .outcome>.icon {
color: var(--navy);
}
#dreamz-windowcleaning .awardItem {
box-shadow: none;
min-height: 92px;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
font-size: 13px;
padding: 17px;
}
#dreamz-windowcleaning .awardItem>.icon {
color: var(--navy);
}
#dreamz-windowcleaning .awardItem:hover {
border-color: var(--brand-dark);
}
#dreamz-windowcleaning .twoCol {
gap: 52px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#dreamz-windowcleaning .twoCol.reverse .visual {
order: -1;
}
#dreamz-windowcleaning .copy .eyebrow {
margin-bottom: 17px;
}
#dreamz-windowcleaning .copy p {
font-size: 16px;
line-height: 1.85;
}
#dreamz-windowcleaning .copy h2 {
font-size: clamp(31px, 3.65vw, 46px);
line-height: 1.13;
}
#dreamz-windowcleaning .featureList {
gap: 13px 18px;
}
#dreamz-windowcleaning .featureItem {
font-size: 13px;
line-height: 1.6;
}
#dreamz-windowcleaning .check {
display: grid;
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-windowcleaning .check .icon {
width: 14px;
height: 14px;
}
#dreamz-windowcleaning details.capabilityMore {
margin-bottom: 0;
}
#dreamz-windowcleaning .capabilityMore summary {
min-height: 34px;
}
#dreamz-windowcleaning .capabilityMore .moreGrid {
gap: 13px 18px;
}
#dreamz-windowcleaning .textCta {
font-size: 14px;
}
#dreamz-windowcleaning .visual {
min-width: 0;
}
#dreamz-windowcleaning .productPanel {
margin: 0;
overflow: hidden;
border: 1px solid #D3E6F1;
border-radius: 20px;
background: #fff;
color: var(--ink);
}
#dreamz-windowcleaning .panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #DDEAF1;
background: #F5FBFF;
}
#dreamz-windowcleaning .panelHead>strong {
font-size: 13px;
line-height: 1.45;
color: var(--navy);
}
#dreamz-windowcleaning .sampleTag {
flex: 0 0 auto;
color: #72570B;
background: var(--yellow-soft);
font-size: 8px;
font-weight: 850;
letter-spacing: .07em;
border: 1px solid #F0E3AB;
border-radius: 5px;
padding: 3px 6px;
}
#dreamz-windowcleaning .panelBody {
padding: 20px;
}
#dreamz-windowcleaning .productPanel figcaption {
color: #607487;
font-size: 9px;
line-height: 1.7;
padding: 0 20px 15px;
}
#dreamz-windowcleaning .pipelineColumns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: start;
}
#dreamz-windowcleaning .pipelineColumn {
padding: 10px 8px;
border-radius: 9px;
background: #F3F8FC;
border-top: 3px solid var(--brand);
min-height: 226px;
}
#dreamz-windowcleaning .pipelineColumn.gold {
border-top-color: var(--yellow);
background: #FFFBEE;
}
#dreamz-windowcleaning .pipelineColumn.green {
border-top-color: var(--success);
background: #F2FAF7;
}
#dreamz-windowcleaning .stageLabel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
font-size: 10px;
font-weight: 800;
margin: 0 2px 10px;
color: var(--navy);
}
#dreamz-windowcleaning .stageLabel>span {
font-size: 9px;
color: var(--muted);
}
#dreamz-windowcleaning .deal {
padding: 11px 8px;
border: 1px solid #DDE7EF;
background: #fff;
border-radius: 8px;
margin-top: 9px;
}
#dreamz-windowcleaning .deal strong {
font-size: 10px;
display: block;
color: var(--ink);
line-height: 1.5;
}
#dreamz-windowcleaning .deal>span {
color: var(--brand-dark);
font-size: 12px;
font-weight: 800;
display: block;
margin: 5px 0;
}
#dreamz-windowcleaning .deal small {
font-size: 8px;
color: var(--muted);
line-height: 1.5;
display: block;
}
#dreamz-windowcleaning .contextNote {
margin-top: 16px;
border: 1px solid #DFEBF2;
border-radius: 9px;
background: #F5FBFF;
padding: 11px 12px;
display: flex;
align-items: center;
gap: 9px;
color: #345769;
font-size: 10px;
line-height: 1.6;
}
#dreamz-windowcleaning .contextNote .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
color: var(--brand-dark);
}
#dreamz-windowcleaning .mapIllustration {
display: block;
width: 100%;
height: auto;
aspect-ratio: 480/252;
border-radius: 12px;
}
#dreamz-windowcleaning .miniStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 14px 0;
}
#dreamz-windowcleaning .miniStats>div {
border: 1px solid #DDEAF1;
background: #fff;
border-radius: 9px;
padding: 10px;
}
#dreamz-windowcleaning .miniStats strong {
display: block;
color: var(--navy);
font-size: 19px;
line-height: 1.2;
}
#dreamz-windowcleaning .miniStats span {
font-size: 9px;
color: var(--muted);
}
#dreamz-windowcleaning .dataRow {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #E1EBF1;
}
#dreamz-windowcleaning .dataRow:last-child {
border-bottom: 0;
}
#dreamz-windowcleaning .rowIcon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #EAF8FF;
color: var(--brand-dark);
flex: 0 0 34px;
}
#dreamz-windowcleaning .rowIcon .icon {
width: 19px;
height: 19px;
}
#dreamz-windowcleaning .rowCopy {
min-width: 0;
flex: 1 1 auto;
}
#dreamz-windowcleaning .rowCopy strong {
display: block;
color: var(--ink);
font-size: 11px;
line-height: 1.5;
}
#dreamz-windowcleaning .rowCopy small {
display: block;
font-size: 9px;
color: var(--muted);
line-height: 1.6;
margin-top: 3px;
}
#dreamz-windowcleaning .statusPill {
flex: 0 0 auto;
display: inline-block;
font-size: 8px;
font-weight: 850;
padding: 5px 7px;
border-radius: 5px;
background: var(--sky);
color: var(--brand-dark);
}
#dreamz-windowcleaning .statusPill.green {
color: #08714E;
background: var(--success-bg);
}
#dreamz-windowcleaning .statusPill.gold {
color: #795806;
background: var(--yellow-soft);
}
#dreamz-windowcleaning .mobileWorkspace {
display: grid;
grid-template-columns: 1.04fr 1fr;
gap: 18px;
align-items: center;
}
#dreamz-windowcleaning .phoneDevice {
padding: 7px;
border: 1px solid #172833;
border-radius: 27px;
background: #101820;
max-width: 228px;
margin: auto;
}
#dreamz-windowcleaning .phoneScreen {
background: #fff;
border-radius: 20px;
padding: 9px 10px 12px;
overflow: hidden;
}
#dreamz-windowcleaning .phoneNotch {
width: 58px;
height: 6px;
border-radius: 99px;
margin: 0 auto 14px;
background: #101820;
}
#dreamz-windowcleaning .mobileHeader {
border-bottom: 1px solid var(--line);
padding-bottom: 9px;
}
#dreamz-windowcleaning .mobileHeader small {
font-size: 8px;
color: var(--muted);
display: block;
}
#dreamz-windowcleaning .mobileHeader strong {
font-size: 17px;
color: var(--navy);
display: block;
}
#dreamz-windowcleaning .mobileAccount {
text-align: center;
padding: 13px 0;
}
#dreamz-windowcleaning .avatar {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--yellow-soft);
color: #705400;
font-weight: 800;
font-size: 11px;
}
#dreamz-windowcleaning .avatar.large {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 15px;
}
#dreamz-windowcleaning .mobileAccount strong {
display: block;
font-size: 11px;
margin-top: 7px;
}
#dreamz-windowcleaning .mobileAccount small {
font-size: 8px;
color: var(--muted);
}
#dreamz-windowcleaning .phoneDevice .dataRow {
gap: 7px;
padding: 10px 0;
}
#dreamz-windowcleaning .phoneDevice .rowIcon {
flex-basis: 25px;
width: 25px;
height: 25px;
border-radius: 6px;
}
#dreamz-windowcleaning .phoneDevice .rowIcon .icon {
width: 15px;
height: 15px;
}
#dreamz-windowcleaning .phoneDevice .rowCopy strong {
font-size: 9px;
}
#dreamz-windowcleaning .phoneDevice .rowCopy small {
font-size: 7px;
}
#dreamz-windowcleaning .mobileAction {
margin-top: 13px;
padding: 8px 6px;
border-radius: 7px;
background: var(--yellow);
text-align: center;
font-size: 8px;
font-weight: 850;
color: var(--black);
}
#dreamz-windowcleaning .mobileSide {
display: grid;
gap: 10px;
}
#dreamz-windowcleaning .sideTile {
border: 1px solid #DDE9F0;
border-radius: 10px;
padding: 12px;
}
#dreamz-windowcleaning .sideTile>.icon {
width: 20px;
height: 20px;
color: var(--brand-dark);
margin-bottom: 7px;
}
#dreamz-windowcleaning .sideTile strong {
font-size: 11px;
line-height: 1.4;
display: block;
}
#dreamz-windowcleaning .sideTile p {
font-size: 9px;
line-height: 1.65;
color: var(--muted);
margin: 5px 0 0;
}
#dreamz-windowcleaning .darkSection .productPanel {
background: #151515;
border-color: #373737;
color: #fff;
}
#dreamz-windowcleaning .darkSection .panelHead {
background: #1A1A1A;
border-color: #353535;
}
#dreamz-windowcleaning .darkSection .panelHead>strong {
color: #fff;
}
#dreamz-windowcleaning .darkSection .productPanel figcaption {
color: #BFBFBF;
}
#dreamz-windowcleaning .darkSection .sampleTag {
background: #FFC928;
color: #0B0B0B;
border-color: #FFC928;
}
#dreamz-windowcleaning .assistantHead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
#dreamz-windowcleaning .assistantMark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
}
#dreamz-windowcleaning .assistantHead strong {
display: block;
font-size: 18px;
color: #fff;
}
#dreamz-windowcleaning .assistantHead small {
display: block;
font-size: 10px;
color: #BFBFBF;
}
#dreamz-windowcleaning .promptList {
display: grid;
gap: 10px;
}
#dreamz-windowcleaning .promptItem {
border: 1px solid #3A3A3A;
background: #1C1C1C;
color: #E6E6E6;
padding: 14px 12px;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.6;
}
#dreamz-windowcleaning .promptItem .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--yellow);
margin-top: 2px;
}
#dreamz-windowcleaning .assistantNote {
color: var(--yellow);
font-size: 10px;
padding-top: 18px;
}
#dreamz-windowcleaning .docHeader {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding-bottom: 17px;
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .docHeader strong {
display: block;
color: var(--navy);
font-size: 18px;
margin-top: 4px;
}
#dreamz-windowcleaning .docHeader small {
display: block;
font-size: 9px;
color: var(--muted);
margin-top: 4px;
}
#dreamz-windowcleaning .smallLabel {
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
color: var(--muted);
}
#dreamz-windowcleaning .quoteTable {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
text-align: left;
font-size: 11px;
table-layout: auto;
}
#dreamz-windowcleaning .quoteTable th,
#dreamz-windowcleaning .quoteTable td {
padding: 13px 6px;
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .quoteTable thead th {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
#dreamz-windowcleaning .quoteTable td:first-child {
width: 64%;
}
#dreamz-windowcleaning .quoteTable th:last-child,
#dreamz-windowcleaning .quoteTable td:last-child {
text-align: right;
white-space: nowrap;
}
#dreamz-windowcleaning .quoteTable strong {
font-size: 11px;
}
#dreamz-windowcleaning .quoteTable small {
display: block;
margin-top: 4px;
font-size: 9px;
color: var(--muted);
}
#dreamz-windowcleaning .quoteTable tfoot {
background: #F5FBFF;
}
#dreamz-windowcleaning .quoteTable tfoot th {
font-size: 10px;
}
#dreamz-windowcleaning .quoteTable tfoot td {
color: var(--navy);
font-size: 17px;
font-weight: 850;
}
#dreamz-windowcleaning .miniFlow {
display: flex;
gap: 9px;
align-items: center;
justify-content: space-between;
margin-top: 17px;
font-size: 10px;
color: var(--navy);
font-weight: 700;
}
#dreamz-windowcleaning .miniFlow span {
padding: 7px 9px;
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
}
#dreamz-windowcleaning .miniFlow i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-windowcleaning .orderJourney {
margin: 20px 0;
}
#dreamz-windowcleaning .journeyRow {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
position: relative;
}
#dreamz-windowcleaning .journeyRow:before {
content: "";
position: absolute;
top: 42px;
bottom: -10px;
left: 16px;
width: 1px;
background: var(--line);
}
#dreamz-windowcleaning .journeyRow:last-child:before {
display: none;
}
#dreamz-windowcleaning .journeyRow>span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
background: #F0F5F8;
color: var(--muted);
font-size: 11px;
font-weight: 850;
z-index: 1;
}
#dreamz-windowcleaning .journeyRow.done>span {
color: #08714E;
background: #EAF8F3;
}
#dreamz-windowcleaning .journeyRow.active>span {
background: var(--yellow);
color: #0B0B0B;
}
#dreamz-windowcleaning .journeyRow strong {
font-size: 12px;
display: block;
}
#dreamz-windowcleaning .journeyRow small {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 3px;
}
#dreamz-windowcleaning .summaryTotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
}
#dreamz-windowcleaning .summaryTotal span {
font-size: 10px;
color: var(--muted);
}
#dreamz-windowcleaning .summaryTotal strong {
color: var(--navy);
font-size: 23px;
}
#dreamz-windowcleaning .inventoryIntro {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 15px;
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .inventoryIntro>.icon {
width: 32px;
height: 32px;
flex-basis: 32px;
color: var(--brand-dark);
}
#dreamz-windowcleaning .inventoryIntro strong {
display: block;
font-size: 16px;
}
#dreamz-windowcleaning .inventoryIntro span {
font-size: 9px;
color: var(--muted);
}
#dreamz-windowcleaning .availabilityCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 17px;
padding: 13px;
background: #EAF8F3;
border-radius: 10px;
color: #0B6849;
}
#dreamz-windowcleaning .availabilityCard span {
font-size: 9px;
display: block;
}
#dreamz-windowcleaning .availabilityCard strong {
display: block;
margin-top: 5px;
font-size: 11px;
}
#dreamz-windowcleaning .customerHeader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
#dreamz-windowcleaning .customerHeader strong {
font-size: 19px;
color: #fff;
display: block;
}
#dreamz-windowcleaning .customerHeader small {
font-size: 10px;
color: #BFBFBF;
display: block;
margin-top: 4px;
}
#dreamz-windowcleaning .customerTabs {
display: flex;
gap: 22px;
padding: 7px 0 12px;
color: #C5C5C5;
font-size: 11px;
border-bottom: 1px solid #353535;
}
#dreamz-windowcleaning .customerTabs .selected {
color: var(--yellow);
font-weight: 800;
}
#dreamz-windowcleaning .customerFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 18px 0;
}
#dreamz-windowcleaning .customerFacts>div {
background: #202020;
border: 1px solid #353535;
padding: 13px;
border-radius: 9px;
}
#dreamz-windowcleaning .customerFacts span {
font-size: 9px;
color: #BFBFBF;
display: block;
}
#dreamz-windowcleaning .customerFacts strong {
font-size: 14px;
color: #fff;
display: block;
margin-top: 7px;
}
#dreamz-windowcleaning .customerTimeline .dataRow {
border-color: #353535;
}
#dreamz-windowcleaning .customerTimeline .rowIcon {
background: #2C291D;
color: var(--yellow);
}
#dreamz-windowcleaning .customerTimeline strong {
color: #fff;
}
#dreamz-windowcleaning .customerTimeline small {
color: #BFBFBF;
}
#dreamz-windowcleaning .collectionStats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
#dreamz-windowcleaning .collectionStats>div {
background: #F2FAFF;
padding: 15px;
border: 1px solid #DCEBF3;
border-radius: 11px;
}
#dreamz-windowcleaning .collectionStats>div:nth-child(2) {
background: #F2FAF6;
}
#dreamz-windowcleaning .collectionStats span {
font-size: 10px;
color: var(--muted);
display: block;
}
#dreamz-windowcleaning .collectionStats strong {
font-size: 25px;
color: var(--navy);
display: block;
margin-top: 7px;
letter-spacing: -.03em;
}
#dreamz-windowcleaning .paymentRecord {
border: 1px solid var(--line);
border-radius: 12px;
margin-top: 18px;
padding: 16px;
}
#dreamz-windowcleaning .paymentRecord>strong {
display: block;
font-size: 13px;
margin: 5px 0 12px;
}
#dreamz-windowcleaning .paymentRecord>div {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding: 7px 0;
}
#dreamz-windowcleaning .paymentRecord .remaining {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 11px;
color: var(--success);
}
#dreamz-windowcleaning .chartTitle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 22px 0 14px;
}
#dreamz-windowcleaning .chartTitle strong {
font-size: 12px;
}
#dreamz-windowcleaning .chartTitle span {
font-size: 9px;
color: var(--muted);
}
#dreamz-windowcleaning .chartIllustration {
width: 100%;
height: auto;
display: block;
aspect-ratio: 484/190;
}
#dreamz-windowcleaning .reportTags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}
#dreamz-windowcleaning .reportTags span {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 5px;
font-size: 9px;
color: var(--muted);
}
#dreamz-windowcleaning .contextSection {
padding: 0 0 24px;
background: var(--sky-2);
}
#dreamz-windowcleaning .inlineCta {
margin-top: 0;
box-shadow: none;
}
#dreamz-windowcleaning .inlineCtaActions {
max-width: 42%;
}
#dreamz-windowcleaning .inlineCtaActions .button {
font-size: 12px;
min-height: 44px;
padding: 0 15px;
}
#dreamz-windowcleaning .inlineCta h3 {
line-height: 1.35;
}
#dreamz-windowcleaning .card {
box-shadow: none;
}
#dreamz-windowcleaning .cardIcon {
box-shadow: none;
}
#dreamz-windowcleaning .card h3 {
font-size: 22px;
}
#dreamz-windowcleaning .card p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-windowcleaning .challenge strong {
font-size: 16px;
line-height: 1.4;
}
#dreamz-windowcleaning .benefit strong {
font-size: 23px;
line-height: 1.25;
}
#dreamz-windowcleaning .valueCtaSection {
padding: 34px 0;
background: #fff;
}
#dreamz-windowcleaning .ratingBand {
padding: 34px 0;
}
#dreamz-windowcleaning .ratingGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-windowcleaning .ratingLead strong {
font-size: 22px;
line-height: 1.3;
}
#dreamz-windowcleaning .ratingLead span {
display: block;
margin-top: 9px;
line-height: 1.6;
}
#dreamz-windowcleaning .ratingItem .icon {
color: var(--yellow);
margin: 0 auto 6px;
}
#dreamz-windowcleaning .ratingItem:first-child {
border-left: 0;
}
#dreamz-windowcleaning .proofCard h3 {
font-size: 23px;
}
#dreamz-windowcleaning .proofIcon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
background: var(--yellow);
color: var(--black);
border-radius: 12px;
margin-bottom: 22px;
}
#dreamz-windowcleaning .proofCard p {
font-size: 14px;
line-height: 1.8;
}
#dreamz-windowcleaning .roleNote {
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--navy);
font-weight: 750;
font-size: 12px;
}
#dreamz-windowcleaning .integration {
min-height: 98px;
}
#dreamz-windowcleaning .integration small {
display: block;
font-weight: 500;
color: var(--muted);
font-size: 10px;
margin-top: 6px;
}
#dreamz-windowcleaning .integrationNote {
font-size: 12px;
color: var(--muted);
margin-top: 23px;
max-width: 850px;
line-height: 1.8;
}
#dreamz-windowcleaning .ctaPanel {
padding: 49px;
grid-template-columns: 1fr minmax(170px, auto);
box-shadow: none;
}
#dreamz-windowcleaning .ctaPanel h2 {
font-size: clamp(31px, 3.2vw, 42px);
}
#dreamz-windowcleaning .ctaPanel p {
font-size: 16px;
line-height: 1.8;
}
#dreamz-windowcleaning .finalActions {
display: grid;
gap: 11px;
}
#dreamz-windowcleaning .finalActions .button {
white-space: nowrap;
}
#dreamz-windowcleaning .footerInner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 22px;
}
#dreamz-windowcleaning .footerInner p {
margin: 0;
font-size: 12px;
}
#dreamz-windowcleaning .footerInner a {
font-size: 12px;
font-weight: 750;
}
@media (max-width:1100px) {
#dreamz-windowcleaning .navlinks {
gap: 15px;
font-size: 12px;
}
#dreamz-windowcleaning .heroGrid {
gap: 30px;
}
#dreamz-windowcleaning .twoCol {
gap: 32px;
}
#dreamz-windowcleaning .panelBody {
padding: 16px;
}
#dreamz-windowcleaning .panelHead {
padding: 16px;
}
#dreamz-windowcleaning .awardItem {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
#dreamz-windowcleaning .pipelineColumns {
gap: 7px;
}
#dreamz-windowcleaning .deal {
padding: 9px 7px;
}
}
@media (max-width:980px) {
#dreamz-windowcleaning .heroGrid,
#dreamz-windowcleaning .twoCol,
#dreamz-windowcleaning .ctaPanel {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .heroGrid {
gap: 36px;
}
#dreamz-windowcleaning .hero h1 {
max-width: 730px;
}
#dreamz-windowcleaning .hero .lead {
max-width: 690px;
}
#dreamz-windowcleaning .heroVisual {
max-width: 620px;
margin: 0 auto;
}
#dreamz-windowcleaning .twoCol {
gap: 34px;
}
#dreamz-windowcleaning .twoCol.reverse .visual {
order: initial;
}
#dreamz-windowcleaning .visual {
width: 100%;
max-width: 660px;
margin: 0 auto;
}
#dreamz-windowcleaning .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-windowcleaning .awardProofGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#dreamz-windowcleaning .awardItem {
font-size: 12px;
padding: 13px;
}
#dreamz-windowcleaning .ratingSectionGrid {
gap: 20px;
}
#dreamz-windowcleaning .inlineCta {
align-items: flex-start;
}
#dreamz-windowcleaning .inlineCtaActions {
flex-direction: column;
max-width: 36%;
min-width: 180px;
}
#dreamz-windowcleaning .cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-windowcleaning .card {
padding: 22px;
}
#dreamz-windowcleaning .card h3 {
font-size: 21px;
}
#dreamz-windowcleaning .finalActions {
display: flex;
flex-wrap: wrap;
}
#dreamz-windowcleaning .ctaPanel {
gap: 27px;
}
}
@media (max-width:700px) {
#dreamz-windowcleaning .cards,
#dreamz-windowcleaning .proofCards {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .awardProofGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-windowcleaning .inlineCta {
flex-direction: column;
}
#dreamz-windowcleaning .inlineCtaActions {
flex-direction: row;
max-width: 100%;
width: 100%;
min-width: 0;
}
#dreamz-windowcleaning .inlineCtaActions .button {
flex: 1;
}
#dreamz-windowcleaning .ratingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dreamz-windowcleaning .ratingItem {
border-left: 0;
}
}
@media (max-width:640px) {
#dreamz-windowcleaning .wrap {
width: calc(100% - 32px);
}
#dreamz-windowcleaning [id] {
scroll-margin-top: 82px;
}
#dreamz-windowcleaning .brand {
font-size: 20px;
gap: 7px;
}
#dreamz-windowcleaning .brandMark {
width: 29px;
height: 29px;
border-radius: 8px;
}
#dreamz-windowcleaning .brandMark .icon {
width: 18px;
height: 18px;
}
#dreamz-windowcleaning section {
padding: 60px 0;
}
#dreamz-windowcleaning .hero {
padding: 51px 0 48px;
}
#dreamz-windowcleaning .hero h1 {
font-size: clamp(38px, 9.7vw, 56px);
}
#dreamz-windowcleaning .hero .lead {
font-size: 16px;
margin-top: 20px;
line-height: 1.8;
}
#dreamz-windowcleaning .heroActions {
gap: 10px;
margin-top: 25px;
}
#dreamz-windowcleaning .heroActions .button {
padding: 0 17px;
font-size: 14px;
}
#dreamz-windowcleaning .hero .microcopy {
font-size: 11px;
}
#dreamz-windowcleaning .heroPills span {
font-size: 9px;
}
#dreamz-windowcleaning .eyebrow {
font-size: 11px;
margin-bottom: 17px;
}
#dreamz-windowcleaning .sectionHead p {
font-size: 16px;
}
#dreamz-windowcleaning .copy h2 {
font-size: 34px;
}
#dreamz-windowcleaning .copy p {
font-size: 15px;
}
#dreamz-windowcleaning .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-windowcleaning .logoBox {
min-height: 53px;
}
#dreamz-windowcleaning .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-windowcleaning .aiFlow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-windowcleaning .aiStep {
min-height: 166px;
padding: 17px 13px;
}
#dreamz-windowcleaning .aiStep strong {
font-size: 13px;
}
#dreamz-windowcleaning .aiStep span {
font-size: 11px;
}
#dreamz-windowcleaning .aiStep::after {
display: none;
}
#dreamz-windowcleaning .outcomeGrid,
#dreamz-windowcleaning .challengeGrid,
#dreamz-windowcleaning .benefitGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .outcome {
padding: 24px;
}
#dreamz-windowcleaning .outcome strong {
font-size: 22px;
}
#dreamz-windowcleaning .awardProofGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-windowcleaning .awardItem {
flex-direction: row;
align-items: center;
font-size: 11px;
padding: 14px;
}
#dreamz-windowcleaning .awardItem:last-child {
grid-column: 1/-1;
}
#dreamz-windowcleaning .awardBand .sectionHead h2 {
font-size: 31px;
}
#dreamz-windowcleaning .featureList,
#dreamz-windowcleaning .capabilityMore .moreGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .featureItem {
font-size: 13px;
}
#dreamz-windowcleaning .inlineCta {
padding: 22px;
gap: 19px;
}
#dreamz-windowcleaning .inlineCtaActions .button {
font-size: 12px;
padding: 0 11px;
}
#dreamz-windowcleaning .panelHead {
padding: 15px 13px;
}
#dreamz-windowcleaning .panelHead>strong {
font-size: 12px;
}
#dreamz-windowcleaning .panelBody {
padding: 14px;
}
#dreamz-windowcleaning .productPanel {
border-radius: 16px;
}
#dreamz-windowcleaning .productPanel figcaption {
padding: 0 14px 13px;
}
#dreamz-windowcleaning .pipelineColumns {
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-windowcleaning .pipelineColumn {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
gap: 9px;
padding: 11px;
}
#dreamz-windowcleaning .stageLabel {
grid-column: 1/-1;
margin: 0 0 2px;
font-size: 12px;
}
#dreamz-windowcleaning .deal {
margin-top: 0;
padding: 10px;
}
#dreamz-windowcleaning .deal strong {
font-size: 10px;
}
#dreamz-windowcleaning .deal small {
font-size: 9px;
}
#dreamz-windowcleaning .pipelineColumn.green .deal {
grid-column: 1/-1;
}
#dreamz-windowcleaning .mobileWorkspace {
gap: 12px;
}
#dreamz-windowcleaning .phoneDevice {
border-radius: 24px;
padding: 6px;
}
#dreamz-windowcleaning .phoneScreen {
border-radius: 18px;
padding: 9px 8px 10px;
}
#dreamz-windowcleaning .sideTile {
padding: 10px;
}
#dreamz-windowcleaning .sideTile strong {
font-size: 10px;
}
#dreamz-windowcleaning .sideTile p {
font-size: 9px;
}
#dreamz-windowcleaning .mobileHeader strong {
font-size: 15px;
}
#dreamz-windowcleaning .mobileAccount strong {
font-size: 10px;
}
#dreamz-windowcleaning .mobileAccount small {
font-size: 7px;
}
#dreamz-windowcleaning .phoneDevice .rowIcon {
display: none;
}
#dreamz-windowcleaning .quoteTable th,
#dreamz-windowcleaning .quoteTable td {
padding: 12px 4px;
}
#dreamz-windowcleaning .quoteTable strong {
font-size: 10px;
}
#dreamz-windowcleaning .quoteTable small {
font-size: 8px;
}
#dreamz-windowcleaning .quoteTable tfoot th {
font-size: 9px;
}
#dreamz-windowcleaning .docHeader strong {
font-size: 17px;
}
#dreamz-windowcleaning .miniFlow {
gap: 5px;
font-size: 9px;
}
#dreamz-windowcleaning .miniFlow span {
padding: 6px;
}
#dreamz-windowcleaning .rowCopy strong {
font-size: 10px;
}
#dreamz-windowcleaning .rowCopy small {
font-size: 8px;
}
#dreamz-windowcleaning .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-windowcleaning .miniStats {
gap: 7px;
}
#dreamz-windowcleaning .miniStats>div {
padding: 9px;
}
#dreamz-windowcleaning .miniStats strong {
font-size: 18px;
}
#dreamz-windowcleaning .miniStats span {
font-size: 8px;
}
#dreamz-windowcleaning .collectionStats>div {
padding: 13px;
}
#dreamz-windowcleaning .collectionStats strong {
font-size: 24px;
}
#dreamz-windowcleaning .customerHeader strong {
font-size: 17px;
}
#dreamz-windowcleaning .customerFacts>div {
padding: 10px;
}
#dreamz-windowcleaning .customerFacts strong {
font-size: 12px;
}
#dreamz-windowcleaning .ratingGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-windowcleaning .ratingItem {
border-top: 1px solid #333;
padding: 16px 5px;
}
#dreamz-windowcleaning .ratingItem:last-child {
grid-column: 1/-1;
}
#dreamz-windowcleaning .integrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-windowcleaning .integration {
min-height: 93px;
padding: 11px;
font-size: 12px;
}
#dreamz-windowcleaning .integration small {
font-size: 9px;
}
#dreamz-windowcleaning .ctaPanel {
padding: 31px 24px;
border-radius: 20px;
}
#dreamz-windowcleaning .ctaPanel p {
font-size: 15px;
}
#dreamz-windowcleaning .finalActions {
display: grid;
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .footerInner {
align-items: flex-start;
flex-direction: column;
}
#dreamz-windowcleaning .contextSection {
padding: 0 0 24px;
}
#dreamz-windowcleaning .valueCtaSection {
padding: 28px 0;
}
}
@media (max-width:359px) {
#dreamz-windowcleaning .wrap {
width: calc(100% - 24px);
}
#dreamz-windowcleaning .brand {
font-size: 18px;
}
#dreamz-windowcleaning .brandMark {
width: 25px;
height: 25px;
}
#dreamz-windowcleaning .hero h1 {
font-size: 38px;
}
#dreamz-windowcleaning .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-windowcleaning .copy h2 {
font-size: 31px;
}
#dreamz-windowcleaning .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .phoneDevice {
width: 210px;
}
#dreamz-windowcleaning .phoneDevice .rowIcon {
display: grid;
}
#dreamz-windowcleaning .mobileSide {
gap: 8px;
}
#dreamz-windowcleaning .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 8px;
}
#dreamz-windowcleaning .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-windowcleaning .sideTile p {
margin: 0;
}
#dreamz-windowcleaning .miniFlow span {
padding: 5px;
font-size: 8px;
}
#dreamz-windowcleaning .collectionStats strong {
font-size: 21px;
}
#dreamz-windowcleaning .inventoryIntro strong {
font-size: 14px;
}
#dreamz-windowcleaning .dataRow {
gap: 7px;
}
#dreamz-windowcleaning .dataRow>.rowIcon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
#dreamz-windowcleaning .inlineCtaActions {
flex-direction: column;
}
}
@media (prefers-reduced-motion:reduce) {
#dreamz-windowcleaning {
scroll-behavior: auto;
}
#dreamz-windowcleaning *,
#dreamz-windowcleaning *::before,
#dreamz-windowcleaning *::after {
transition: none !important;
animation: none !important;
}
}
#dreamz-windowcleaning {
background: var(--sky-2);
}
#dreamz-windowcleaning .hero h1 {
font-size: clamp(44px, 5.05vw, 66px);
}
#dreamz-windowcleaning .hero .eyebrow {
max-width: 100%;
}
#dreamz-windowcleaning .featureNote {
font-size: 12px;
line-height: 1.75;
margin-top: 18px;
}
#dreamz-windowcleaning .ganttIllustration,
#dreamz-windowcleaning .costIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
#dreamz-windowcleaning .ganttIllustration {
aspect-ratio: 484/258;
margin-top: 18px;
}
#dreamz-windowcleaning .costIllustration {
aspect-ratio: 484/226;
}
#dreamz-windowcleaning .comparisonWrap {
margin-top: 32px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-windowcleaning .comparisonWrap:focus-visible {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning .comparisonTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
text-align: left;
}
#dreamz-windowcleaning .comparisonTable thead {
background: var(--black);
color: #fff;
}
#dreamz-windowcleaning .comparisonTable thead th:last-child {
color: var(--yellow);
}
#dreamz-windowcleaning .comparisonTable th,
#dreamz-windowcleaning .comparisonTable td {
padding: 17px 20px;
line-height: 1.65;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .comparisonTable th:first-child {
width: 23%;
}
#dreamz-windowcleaning .comparisonTable tbody th {
color: var(--navy);
font-weight: 750;
}
#dreamz-windowcleaning .comparisonTable tbody td {
color: var(--muted);
}
#dreamz-windowcleaning .comparisonTable tbody td:last-child {
background: #F5FBFF;
}
#dreamz-windowcleaning .comparisonTable tbody tr:last-child>* {
border-bottom: 0;
}
#dreamz-windowcleaning .card,
#dreamz-windowcleaning .proofCard,
#dreamz-windowcleaning .productPanel,
#dreamz-windowcleaning .outcome,
#dreamz-windowcleaning .benefit {
box-shadow: none;
}
#dreamz-windowcleaning .darkSection .featureNote {
color: #BABABA;
}
@media (max-width:640px) {
#dreamz-windowcleaning .hero h1 {
font-size: clamp(38px, 9.5vw, 56px);
}
#dreamz-windowcleaning .hero .eyebrow {
font-size: 10px;
}
#dreamz-windowcleaning .comparisonTable {
font-size: 11px;
}
#dreamz-windowcleaning .comparisonTable th,
#dreamz-windowcleaning .comparisonTable td {
padding: 12px 9px;
overflow-wrap: anywhere;
}
#dreamz-windowcleaning .comparisonTable th:first-child {
width: 24%;
}
#dreamz-windowcleaning .aiCallout {
font-size: 11px;
line-height: 1.6;
}
#dreamz-windowcleaning .summaryTotal strong {
font-size: 22px;
}
}
@media (max-width:359px) {
#dreamz-windowcleaning .hero h1 {
font-size: 38px;
}
}
#dreamz-windowcleaning .scheduleIllustration,
#dreamz-windowcleaning .analyticsIllustration,
#dreamz-windowcleaning .conditionIllustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#dreamz-windowcleaning .scheduleIllustration {
aspect-ratio: 484 / 268;
margin-top: 19px;
}
#dreamz-windowcleaning .analyticsIllustration {
aspect-ratio: 484 / 202;
}
#dreamz-windowcleaning .conditionIllustration {
aspect-ratio: 484 / 178;
}
#dreamz-windowcleaning .miniStats strong {
font-variant-numeric: tabular-nums;
}
#dreamz-windowcleaning .quoteTable td:last-child {
white-space: nowrap;
}
#dreamz-windowcleaning .panelBody .mutedNote {
color: var(--muted);
font-size: 10px;
line-height: 1.65;
margin: 12px 0 0;
}
#dreamz-windowcleaning .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
margin-top: 20px;
}
#dreamz-windowcleaning .darkSection .textCta {
color: var(--yellow);
}
#dreamz-windowcleaning .secondaryLinks {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
#dreamz-windowcleaning .secondaryLinks .textCta {
font-size: 12px;
}
#dreamz-windowcleaning .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-windowcleaning .plantFacts>div {
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 9px;
background: #F5FBFF;
}
#dreamz-windowcleaning .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-windowcleaning .plantFacts strong {
display: block;
font-size: 12px;
color: var(--navy);
margin-top: 4px;
}
#dreamz-windowcleaning .scanSummary {
display: flex;
gap: 13px;
align-items: center;
padding: 16px;
background: #242424;
border: 1px solid #3D3D3D;
border-radius: 12px;
margin: 18px 0;
}
#dreamz-windowcleaning .scanSummary>.icon {
color: var(--yellow);
flex: 0 0 24px;
}
#dreamz-windowcleaning .scanSummary strong {
display: block;
color: #fff;
font-size: 14px;
}
#dreamz-windowcleaning .scanSummary small {
display: block;
color: #C8C8C8;
font-size: 10px;
}
#dreamz-windowcleaning .returnFlag {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #584A27;
background: #302B1C;
border-radius: 10px;
margin-top: 18px;
color: #F4DF96;
font-size: 11px;
}
#dreamz-windowcleaning .returnFlag .icon {
flex: 0 0 24px;
}
#dreamz-windowcleaning .plantCardLinks {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#dreamz-windowcleaning .plantCardLinks .textCta {
margin-top: 0;
font-size: 13px;
}
#dreamz-windowcleaning .phoneDevice {
max-width: 100%;
}
#dreamz-windowcleaning .heroPills {
line-height: 1.55;
}
#dreamz-windowcleaning .productPanel [class*="Illustration"] {
overflow: visible;
}
@media (max-width:640px) {
#dreamz-windowcleaning .plantFacts {
gap: 7px;
}
#dreamz-windowcleaning .plantFacts>div {
padding: 9px;
}
#dreamz-windowcleaning .plantFacts strong {
font-size: 11px;
}
#dreamz-windowcleaning .scanSummary {
padding: 12px;
}
#dreamz-windowcleaning .hero .microcopy {
font-size: 11px;
}
}
@media (max-width:420px) {
#dreamz-windowcleaning .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .phoneDevice {
width: 224px;
margin: auto;
}
#dreamz-windowcleaning .phoneDevice .rowIcon {
display: grid;
}
#dreamz-windowcleaning .mobileSide {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
#dreamz-windowcleaning .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 3px 10px;
}
#dreamz-windowcleaning .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0;
}
#dreamz-windowcleaning .sideTile strong {
font-size: 12px;
}
#dreamz-windowcleaning .sideTile p {
margin: 0;
font-size: 11px;
}
}
@media print {
#dreamz-windowcleaning .topbar,
#dreamz-windowcleaning .heroActions,
#dreamz-windowcleaning .finalActions,
#dreamz-windowcleaning .contextSection,
#dreamz-windowcleaning .valueCtaSection {
display: none;
}
#dreamz-windowcleaning section {
break-inside: avoid;
padding: 28px 0;
}
#dreamz-windowcleaning .hero {
padding-top: 20px;
}
}
#dreamz-windowcleaning {
width: 100%;
font-size: 16px;
line-height: 1.65;
text-align: left;
isolation: isolate;
background: var(--white);
}
#dreamz-windowcleaning p {
margin: 0;
}
#dreamz-windowcleaning main {
display: block;
}
#dreamz-windowcleaning section {
padding: 74px 0;
}
#dreamz-windowcleaning .hero {
padding: 37px 0 51px;
background: var(--sky-2);
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .heroGrid {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
#dreamz-windowcleaning .hero h1 {
font-size: clamp(42px, 4.2vw, 58px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 780;
}
#dreamz-windowcleaning .heroAccent {
color: var(--black);
}
#dreamz-windowcleaning .hero .lead {
margin: 22px 0 0;
font-size: 17px;
line-height: 1.8;
max-width: 570px;
}
#dreamz-windowcleaning .heroActions {
gap: 10px;
margin-top: 24px;
}
#dreamz-windowcleaning .heroActions .button {
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
#dreamz-windowcleaning .hero .eyebrow {
margin-bottom: 17px;
font-size: 12px;
border-radius: 6px;
padding: 6px 10px;
}
#dreamz-windowcleaning .microcopy {
margin-top: 14px;
}
#dreamz-windowcleaning .heroPills {
margin-top: 13px;
}
#dreamz-windowcleaning .heroPills span {
background: transparent;
border: 0;
padding: 0 10px 0 0;
font-size: 10px;
}
#dreamz-windowcleaning .heroPills span+span {
border-left: 1px solid var(--line);
padding-left: 10px;
}
#dreamz-windowcleaning .heroVisual {
max-width: 548px;
margin-inline: auto;
}
#dreamz-windowcleaning .heroIllustration {
aspect-ratio: 620/500;
display: block;
width: 100%;
height: auto;
max-height: 442px;
}
#dreamz-windowcleaning .graphicNote {
font-size: 10px;
margin: 10px 3px 0;
}
#dreamz-windowcleaning .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
font-size: 11px;
color: var(--muted);
margin-bottom: 23px;
}
#dreamz-windowcleaning .breadcrumb a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
#dreamz-windowcleaning .clientBand {
padding: 24px 0;
}
#dreamz-windowcleaning .logoBox {
border: 0;
border-radius: 0;
min-height: 43px;
color: var(--navy);
font-size: 20px;
}
#dreamz-windowcleaning .logoBox+.logoBox {
border-left: 1px solid var(--line);
}
#dreamz-windowcleaning .logoBox.wide {
font-size: 15px;
}
#dreamz-windowcleaning .trustLabel {
margin-bottom: 16px;
font-size: 12px;
}
#dreamz-windowcleaning .sectionHead p {
margin: 17px 0 0;
}
#dreamz-windowcleaning .copy p {
margin: 16px 0 0;
}
#dreamz-windowcleaning .copy .featureNote {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.75;
}
#dreamz-windowcleaning .copy h2 {
font-size: clamp(31px, 3.2vw, 43px);
}
#dreamz-windowcleaning .aiJourney {
background: var(--black);
}
#dreamz-windowcleaning .aiStep {
min-height: 157px;
border-color: #353535;
}
#dreamz-windowcleaning .awardItem {
border-color: var(--line);
border-top-color: var(--yellow);
min-height: 89px;
border-radius: 12px;
}
#dreamz-windowcleaning .productPanel {
border-radius: 18px;
}
#dreamz-windowcleaning .panelHead {
background: var(--sky-2);
padding: 17px 19px;
}
#dreamz-windowcleaning .panelHead>strong {
font-size: 13px;
}
#dreamz-windowcleaning .sampleTag {
font-size: 9px;
}
#dreamz-windowcleaning .panelBody {
padding: 21px;
}
#dreamz-windowcleaning .productPanel figcaption {
font-size: 10px;
padding: 0 21px 16px;
}
#dreamz-windowcleaning .docHeader {
padding-bottom: 16px;
}
#dreamz-windowcleaning .docHeader strong {
font-size: 20px;
line-height: 1.4;
}
#dreamz-windowcleaning .docHeader small {
font-size: 11px;
line-height: 1.6;
}
#dreamz-windowcleaning .smallLabel {
font-size: 9px;
}
#dreamz-windowcleaning .rowCopy strong {
font-size: 12px;
line-height: 1.55;
}
#dreamz-windowcleaning .rowCopy small {
font-size: 10px;
line-height: 1.6;
}
#dreamz-windowcleaning .dataRow {
padding: 14px 0;
}
#dreamz-windowcleaning .statusPill {
font-size: 8px;
}
#dreamz-windowcleaning .miniStats {
gap: 10px;
margin: 18px 0;
}
#dreamz-windowcleaning .miniStats>div {
padding: 12px 10px;
background: var(--sky-2);
}
#dreamz-windowcleaning .miniStats strong {
font-size: 23px;
letter-spacing: -.045em;
}
#dreamz-windowcleaning .miniStats span {
font-size: 10px;
display: block;
margin-top: 5px;
line-height: 1.5;
}
#dreamz-windowcleaning .contextNote {
font-size: 11px;
margin-top: 16px;
}
#dreamz-windowcleaning .plantFacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 16px 0;
}
#dreamz-windowcleaning .plantFacts>div {
padding: 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--sky-2);
}
#dreamz-windowcleaning .plantFacts span {
display: block;
font-size: 9px;
color: var(--muted);
}
#dreamz-windowcleaning .plantFacts strong {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--navy);
margin-top: 5px;
}
#dreamz-windowcleaning .hierarchy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-top: 17px;
font-size: 11px;
color: var(--muted);
}
#dreamz-windowcleaning .hierarchy i {
font-style: normal;
color: var(--brand-dark);
}
#dreamz-windowcleaning .hierarchy strong {
color: var(--navy);
}
#dreamz-windowcleaning .scheduleIllustration {
aspect-ratio: 484/239;
margin-top: 18px;
}
#dreamz-windowcleaning .conditionIllustration {
aspect-ratio: 484/201;
}
#dreamz-windowcleaning .analyticsIllustration {
aspect-ratio: 484/206;
}
#dreamz-windowcleaning .phoneDevice {
width: 220px;
max-width: 100%;
background: var(--ink);
border-color: var(--ink);
}
#dreamz-windowcleaning .mobileWorkspace {
grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
gap: 18px;
}
#dreamz-windowcleaning .phoneDevice .rowCopy strong {
font-size: 10px;
}
#dreamz-windowcleaning .phoneDevice .rowCopy small {
font-size: 9px;
}
#dreamz-windowcleaning .phoneDevice .dataRow {
padding: 10px 0;
gap: 7px;
}
#dreamz-windowcleaning .mobileAccount small {
font-size: 9px;
}
#dreamz-windowcleaning .sideTile {
background: var(--sky-2);
padding: 14px;
}
#dreamz-windowcleaning .sideTile strong {
font-size: 12px;
}
#dreamz-windowcleaning .sideTile p {
font-size: 11px;
line-height: 1.7;
margin-top: 6px;
}
#dreamz-windowcleaning .offlineStatus {
background: var(--success-bg);
color: var(--success);
border-radius: 5px;
font-size: 9px;
padding: 7px;
margin-top: 13px;
text-align: center;
}
#dreamz-windowcleaning .mobileAction {
font-size: 9px;
}
#dreamz-windowcleaning .journeyRow strong {
font-size: 13px;
}
#dreamz-windowcleaning .journeyRow small {
font-size: 11px;
}
#dreamz-windowcleaning .avRecord {
padding: 15px;
border: 1px solid var(--line);
background: var(--sky-2);
border-radius: 10px;
}
#dreamz-windowcleaning .avRecord strong {
display: block;
color: var(--navy);
font-size: 14px;
margin: 7px 0 5px;
}
#dreamz-windowcleaning .avRecord p {
color: var(--muted);
font-size: 11px;
}
#dreamz-windowcleaning .utilityReadout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 12px;
background: var(--sky-2);
padding: 16px;
border-radius: 10px;
margin-top: 17px;
}
#dreamz-windowcleaning .utilityReadout span {
font-size: 9px;
color: var(--muted);
display: block;
}
#dreamz-windowcleaning .utilityReadout strong {
font-size: 27px;
color: var(--navy);
display: block;
line-height: 1.3;
margin-top: 7px;
}
#dreamz-windowcleaning .utilityReadout small {
font-size: 12px;
}
#dreamz-windowcleaning .utilityReadout .utilityScope {
font-size: 16px;
margin-top: 13px;
}
#dreamz-windowcleaning .darkSection {
background: var(--black);
}
#dreamz-windowcleaning .darkSection .panelHead {
background: var(--black-soft);
}
#dreamz-windowcleaning .darkSection .productPanel {
background: var(--black-soft);
}
#dreamz-windowcleaning .darkSection .copy .featureNote {
color: #CFCFCF;
}
#dreamz-windowcleaning .darkSection .rowCopy strong {
color: #FFFFFF;
}
#dreamz-windowcleaning .darkSection .rowCopy small {
color: #CFCFCF;
}
#dreamz-windowcleaning .promptItem {
padding: 17px 14px;
font-size: 13px;
}
#dreamz-windowcleaning .assistantHead small {
font-size: 11px;
}
#dreamz-windowcleaning .assistantNote {
font-size: 11px;
}
#dreamz-windowcleaning .reportTags span {
font-size: 10px;
}
#dreamz-windowcleaning .card p {
margin: 12px 0 0;
}
#dreamz-windowcleaning .plantCardLinks {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
#dreamz-windowcleaning .plantCardLinks .textCta {
margin: 0;
font-size: 12px;
}
#dreamz-windowcleaning .cards>.card {
display: flex;
flex-direction: column;
}
#dreamz-windowcleaning .cards>.card .plantCardLinks {
margin-top: auto;
padding-top: 16px;
}
#dreamz-windowcleaning .cards>.card p {
padding-bottom: 22px;
}
#dreamz-windowcleaning .benefitBand {
background: var(--black);
}
#dreamz-windowcleaning .benefit {
background: var(--black-soft);
}
#dreamz-windowcleaning .inlineCta h3 {
font-size: 20px;
}
#dreamz-windowcleaning .inlineCta p {
font-size: 13px;
margin-top: 7px;
}
#dreamz-windowcleaning .inlineCtaActions {
flex-direction: column;
max-width: 32%;
min-width: 225px;
}
#dreamz-windowcleaning .contextSection {
padding: 0 0 25px;
background: var(--sky-2);
}
#dreamz-windowcleaning .valueCtaSection {
padding: 32px 0;
}
#dreamz-windowcleaning .proofCard p {
margin-top: 15px;
}
#dreamz-windowcleaning .proofCard h3 {
font-size: 23px;
}
#dreamz-windowcleaning .integrationNote {
margin-top: 23px;
}
#dreamz-windowcleaning .ctaPanel {
background: var(--black);
}
#dreamz-windowcleaning .ctaPanel p {
margin-top: 16px;
}
#dreamz-windowcleaning .finalActions .button {
white-space: normal;
font-size: 13px;
padding: 13px 18px;
}
#dreamz-windowcleaning .textCta {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
#dreamz-windowcleaning a:hover {
text-decoration: none;
}
#dreamz-windowcleaning .textCta:hover {
color: var(--navy);
}
#dreamz-windowcleaning .darkSection .textCta:hover {
color: #FFFFFF;
}
#dreamz-windowcleaning .button.primary:not(.hero .button):not(.ctaPanel .button) {
background: var(--brand-dark);
}
@media (max-width:1100px) {
#dreamz-windowcleaning .hero h1 {
font-size: 49px;
}
#dreamz-windowcleaning .heroActions .button {
font-size: 12px;
padding: 0 13px;
}
#dreamz-windowcleaning .heroGrid {
gap: 25px;
}
}
@media (max-width:980px) {
#dreamz-windowcleaning .heroGrid {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
#dreamz-windowcleaning .hero h1 {
font-size: 58px;
}
#dreamz-windowcleaning .heroVisual {
max-width: 548px;
}
#dreamz-windowcleaning .hero .lead {
max-width: 700px;
}
#dreamz-windowcleaning .logoRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#dreamz-windowcleaning .logoBox {
font-size: 18px;
border: 0 !important;
}
#dreamz-windowcleaning .logoBox:last-child {
grid-column: auto;
}
#dreamz-windowcleaning .twoCol {
gap: 32px;
}
}
@media (max-width:700px) {
#dreamz-windowcleaning .inlineCtaActions {
min-width: 0;
max-width: 100%;
width: 100%;
flex-direction: row;
}
#dreamz-windowcleaning .inlineCtaActions .button {
flex: 1;
}
#dreamz-windowcleaning .cards>.card p {
padding-bottom: 18px;
}
}
@media (max-width:640px) {
#dreamz-windowcleaning section {
padding: 55px 0;
}
#dreamz-windowcleaning .hero {
padding: 28px 0 40px;
}
#dreamz-windowcleaning .hero h1 {
font-size: clamp(36px, 9.4vw, 52px);
line-height: 1.08;
}
#dreamz-windowcleaning .hero .lead {
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
}
#dreamz-windowcleaning .heroActions {
gap: 10px;
}
#dreamz-windowcleaning .heroActions .button {
font-size: 13px;
padding: 0 14px;
}
#dreamz-windowcleaning .breadcrumb {
margin-bottom: 21px;
}
#dreamz-windowcleaning .hero .eyebrow {
font-size: 11px;
}
#dreamz-windowcleaning .heroVisual {
max-width: 480px;
}
#dreamz-windowcleaning .heroPills {
row-gap: 9px;
}
#dreamz-windowcleaning .heroPills span {
padding-right: 7px;
font-size: 9px;
}
#dreamz-windowcleaning .heroPills span+span {
padding-left: 7px;
}
#dreamz-windowcleaning .logoRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#dreamz-windowcleaning .logoBox:last-child {
grid-column: 1/-1;
}
#dreamz-windowcleaning .clientBand {
padding: 25px 0;
}
#dreamz-windowcleaning .copy h2 {
font-size: 33px;
}
#dreamz-windowcleaning .panelBody {
padding: 16px;
}
#dreamz-windowcleaning .panelHead {
padding: 15px;
}
#dreamz-windowcleaning .panelHead>strong {
font-size: 12px;
}
#dreamz-windowcleaning .sampleTag {
font-size: 8px;
padding: 3px 5px;
}
#dreamz-windowcleaning .productPanel figcaption {
padding: 0 16px 15px;
font-size: 9px;
}
#dreamz-windowcleaning .docHeader strong {
font-size: 18px;
}
#dreamz-windowcleaning .docHeader small {
font-size: 10px;
}
#dreamz-windowcleaning .rowCopy strong {
font-size: 11px;
}
#dreamz-windowcleaning .rowCopy small {
font-size: 10px;
}
#dreamz-windowcleaning .miniStats {
gap: 7px;
}
#dreamz-windowcleaning .miniStats strong {
font-size: 21px;
}
#dreamz-windowcleaning .miniStats span {
font-size: 9px;
}
#dreamz-windowcleaning .miniStats>div {
padding: 10px 8px;
}
#dreamz-windowcleaning .plantFacts {
gap: 8px;
}
#dreamz-windowcleaning .plantFacts>div {
padding: 10px;
}
#dreamz-windowcleaning .plantFacts strong {
font-size: 11px;
}
#dreamz-windowcleaning .contextNote {
font-size: 10px;
gap: 8px;
}
#dreamz-windowcleaning .utilityReadout {
padding: 12px;
gap: 10px;
}
#dreamz-windowcleaning .utilityReadout span {
font-size: 8px;
}
#dreamz-windowcleaning .utilityReadout strong {
font-size: 24px;
}
#dreamz-windowcleaning .utilityReadout .utilityScope {
font-size: 14px;
}
#dreamz-windowcleaning .promptItem {
font-size: 12px;
padding: 15px 12px;
}
#dreamz-windowcleaning .comparisonTable {
font-size: 11px;
}
#dreamz-windowcleaning .comparisonTable th,
#dreamz-windowcleaning .comparisonTable td {
padding: 13px 9px;
}
#dreamz-windowcleaning .contextSection {
padding: 0 0 22px;
}
#dreamz-windowcleaning .valueCtaSection {
padding: 25px 0;
}
#dreamz-windowcleaning .inlineCtaActions {
flex-direction: column;
}
#dreamz-windowcleaning .inlineCtaActions .button {
width: 100%;
}
}
@media (max-width:440px) {
#dreamz-windowcleaning .mobileWorkspace {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .phoneDevice {
width: 222px;
}
#dreamz-windowcleaning .phoneDevice .rowIcon {
display: grid;
}
#dreamz-windowcleaning .mobileSide {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .sideTile {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px 10px;
}
#dreamz-windowcleaning .sideTile>.icon {
grid-row: 1/3;
margin: 2px 0 0;
}
#dreamz-windowcleaning .sideTile p {
margin: 0;
}
#dreamz-windowcleaning .rowIcon {
width: 29px;
height: 29px;
flex-basis: 29px;
}
#dreamz-windowcleaning .dataRow {
gap: 8px;
}
#dreamz-windowcleaning .statusPill {
font-size: 7px;
padding: 5px;
}
#dreamz-windowcleaning .miniStats strong {
font-size: 19px;
}
#dreamz-windowcleaning .heroActions {
flex-direction: column;
align-items: stretch;
}
#dreamz-windowcleaning .heroActions .button {
width: 100%;
}
#dreamz-windowcleaning .hero h1 {
font-size: clamp(36px, 9.4vw, 41px);
}
#dreamz-windowcleaning .aiFlow {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .aiStep {
min-height: 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 5px 13px;
}
#dreamz-windowcleaning .aiStepNum {
grid-row: 1/3;
margin: 0;
}
#dreamz-windowcleaning .aiStep strong {
margin: 0;
font-size: 15px;
}
#dreamz-windowcleaning .aiStep span {
font-size: 13px;
}
#dreamz-windowcleaning .aiCallout {
align-items: flex-start;
font-size: 12px;
}
}
#dreamz-windowcleaning {
background: var(--white);
}
#dreamz-windowcleaning img {
display: block;
max-width: 100%;
}
#dreamz-windowcleaning h1,
#dreamz-windowcleaning h2,
#dreamz-windowcleaning h3 {
text-wrap: balance;
}
#dreamz-windowcleaning .button {
font-size: 14px;
line-height: 1.4;
padding: 12px 20px;
}
#dreamz-windowcleaning .textCta {
display: inline-flex;
align-items: center;
gap: 8px;
}
#dreamz-windowcleaning .textCta .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-windowcleaning .navlinks {
gap: 20px;
font-size: 12px;
}
#dreamz-windowcleaning .industryRibbon {
background: var(--black);
border-top: 1px solid #333;
border-bottom: 4px solid var(--yellow);
color: #fff;
}
#dreamz-windowcleaning .industryRibbonGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 22px;
padding-bottom: 22px;
gap: 16px;
}
#dreamz-windowcleaning .industryRibbonGrid>div {
display: flex;
align-items: center;
gap: 11px;
font-size: 13px;
font-weight: 650;
}
#dreamz-windowcleaning .industryRibbonGrid .icon {
color: var(--yellow);
width: 20px;
height: 20px;
flex-basis: 20px;
}
#dreamz-windowcleaning .clientBand {
border-bottom: 1px solid var(--line);
padding: 26px 0;
background: #fff;
}
#dreamz-windowcleaning .clientBand .logoBox {
border: 0;
border-radius: 0;
background: transparent;
min-height: 38px;
}
#dreamz-windowcleaning .clientBand .trustLabel {
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 15px;
}
#dreamz-windowcleaning .industryIntro {
padding: 78px 0 66px;
}
#dreamz-windowcleaning .industryIntroHead {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 35px;
}
#dreamz-windowcleaning .industryIntroHead h2 {
font-size: clamp(31px, 3.3vw, 43px);
}
#dreamz-windowcleaning .industryIntroHead>p {
font-size: 16px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-windowcleaning .industryPriorityGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
#dreamz-windowcleaning .industryPriority {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: 16px;
background: var(--sky-2);
}
#dreamz-windowcleaning .industryPriority:nth-child(2) {
border-top-color: var(--yellow);
}
#dreamz-windowcleaning .industryPriority:nth-child(3) {
border-top-color: var(--black);
}
#dreamz-windowcleaning .priorityNumber {
color: var(--muted);
font-size: 9px;
letter-spacing: .06em;
font-weight: 750;
min-height: 28px;
}
#dreamz-windowcleaning .industryPriority>.icon {
color: var(--navy);
width: 28px;
height: 28px;
flex-basis: 28px;
margin: 9px 0 19px;
}
#dreamz-windowcleaning .industryPriority h3 {
font-size: 23px;
line-height: 1.25;
}
#dreamz-windowcleaning .industryPriority p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
margin-top: 14px;
margin-bottom: 23px;
}
#dreamz-windowcleaning .priorityLink {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 11px;
line-height: 1.5;
color: var(--navy);
font-weight: 750;
}
#dreamz-windowcleaning .priorityLink .icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-windowcleaning .industryPriority:hover {
border-color: var(--brand-dark);
}
#dreamz-windowcleaning .vedaIndustry {
padding: 0 0 72px;
background: #fff;
}
#dreamz-windowcleaning .vedaIndustryShell {
display: grid;
grid-template-columns: 1.03fr 1fr;
gap: 42px;
background: var(--yellow-soft);
border: 1px solid #E7DCA4;
border-radius: 22px;
padding: 38px;
align-items: center;
}
#dreamz-windowcleaning .vedaBrand {
display: flex;
align-items: center;
gap: 9px;
font-size: 29px;
letter-spacing: -.04em;
color: var(--black);
font-weight: 850;
margin-bottom: 21px;
}
#dreamz-windowcleaning .vedaBrand>span {
font-size: 9px;
letter-spacing: .06em;
color: #695513;
max-width: 100px;
line-height: 1.5;
margin-left: 4px;
}
#dreamz-windowcleaning .vedaIndustryCopy h2 {
font-size: clamp(30px, 3.15vw, 42px);
line-height: 1.14;
}
#dreamz-windowcleaning .vedaIndustryCopy>p {
font-size: 15px;
line-height: 1.85;
color: #566572;
margin: 20px 0;
}
#dreamz-windowcleaning .vedaUseCases {
display: grid;
gap: 17px;
margin: 23px 0;
}
#dreamz-windowcleaning .vedaUseCases>div {
display: flex;
align-items: flex-start;
gap: 12px;
}
#dreamz-windowcleaning .vedaUseCases .icon {
color: var(--navy);
width: 21px;
height: 21px;
flex-basis: 21px;
margin-top: 2px;
}
#dreamz-windowcleaning .vedaUseCases strong {
display: block;
font-size: 13px;
line-height: 1.5;
}
#dreamz-windowcleaning .vedaUseCases small {
display: block;
font-size: 11px;
line-height: 1.7;
color: #596A75;
margin-top: 3px;
}
#dreamz-windowcleaning .vedaConversation {
margin: 0;
background: var(--black);
border: 1px solid #333;
border-radius: 16px;
color: #fff;
overflow: hidden;
}
#dreamz-windowcleaning .vedaConversationHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid #363636;
}
#dreamz-windowcleaning .vedaConversationHead>span {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 750;
}
#dreamz-windowcleaning .vedaConversationHead .icon {
color: var(--yellow);
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-windowcleaning .vedaConversationHead small {
font-size: 7px;
letter-spacing: .06em;
color: #CFCFCF;
}
#dreamz-windowcleaning .vedaMessage {
margin: 19px 20px 0;
padding: 15px 17px;
border-radius: 12px;
}
#dreamz-windowcleaning .vedaMessage.user {
background: #282828;
border: 1px solid #414141;
margin-left: 42px;
}
#dreamz-windowcleaning .vedaMessage.assistant {
background: #161616;
border: 1px solid #373737;
margin-right: 30px;
}
#dreamz-windowcleaning .vedaMessage small {
color: #DFE8ED;
letter-spacing: .055em;
font-size: 8px;
}
#dreamz-windowcleaning .vedaMessage.assistant>small {
color: var(--yellow);
}
#dreamz-windowcleaning .vedaMessage p {
color: #F3F5F6;
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
#dreamz-windowcleaning .vedaSources {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
#dreamz-windowcleaning .vedaSources span {
border: 1px solid #4A4A4A;
padding: 3px 7px;
border-radius: 5px;
font-size: 8px;
color: #D6E6EF;
}
#dreamz-windowcleaning .vedaDraft {
margin-top: 15px;
border-left: 3px solid var(--yellow);
padding-left: 12px;
}
#dreamz-windowcleaning .vedaDraft strong {
font-size: 11px;
color: var(--yellow);
}
#dreamz-windowcleaning .vedaDraft p {
font-size: 11px;
color: #D7E0E6;
}
#dreamz-windowcleaning .vedaPromptFooter {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 13px;
padding: 11px 0;
border-top: 1px solid #3A3A3A;
color: #D7DDE1;
font-size: 10px;
}
#dreamz-windowcleaning .vedaPromptFooter .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
color: var(--yellow);
}
#dreamz-windowcleaning .vedaConversation figcaption {
font-size: 9px;
color: #BBC6CD;
line-height: 1.7;
padding: 0 20px 19px;
}
#dreamz-windowcleaning .manufacturingSpotlight {
padding: 73px 0;
}
#dreamz-windowcleaning .predictiveSpotlight {
background: var(--sky-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .rfidSpotlight {
background: #fff;
}
#dreamz-windowcleaning .decisionSpotlight {
background: var(--black);
border-top: 4px solid var(--yellow);
}
#dreamz-windowcleaning .spotlightHead {
max-width: 960px;
margin-bottom: 30px;
}
#dreamz-windowcleaning .spotlightHead .eyebrow {
margin-bottom: 17px;
}
#dreamz-windowcleaning .spotlightHead h2 {
font-size: clamp(32px, 3.65vw, 46px);
line-height: 1.16;
}
#dreamz-windowcleaning .spotlightHead h2 span {
color: var(--brand-dark);
}
#dreamz-windowcleaning .spotlightHead>p {
font-size: 16px;
color: var(--muted);
line-height: 1.85;
max-width: 940px;
margin: 18px 0 0;
}
#dreamz-windowcleaning .decisionSpotlight .spotlightHead h2 span {
color: var(--yellow);
}
#dreamz-windowcleaning .decisionSpotlight .spotlightHead>p {
color: #D5E0E6;
}
#dreamz-windowcleaning .featureExplorer {
position: relative;
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
#dreamz-windowcleaning .featureRadio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
#dreamz-windowcleaning .featureTabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 30px;
}
#dreamz-windowcleaning .featureTab {
border: 1px solid var(--line);
border-radius: 11px;
padding: 16px 15px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.5;
cursor: pointer;
min-height: 92px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
#dreamz-windowcleaning .tabIndex {
font-size: 8px;
letter-spacing: .05em;
opacity: .7;
}
#dreamz-windowcleaning .featureTab:hover {
border-color: var(--brand-dark);
}
#dreamz-windowcleaning .decisionSpotlight .featureTab {
background: #191919;
color: #E7EDF1;
border-color: #3C3C3C;
}
#dreamz-windowcleaning .featureStage {
display: grid;
grid-template-columns: 1.06fr 1fr;
align-items: center;
gap: 42px;
background: #fff;
border: 1px solid var(--line);
border-radius: 19px;
padding: 34px;
}
#dreamz-windowcleaning .rfidSpotlight .featureStage {
background: var(--sky-2);
grid-template-columns: 1.04fr 1fr;
}
#dreamz-windowcleaning .rfidSpotlight .spotlightMedia {
grid-column: 1;
grid-row: 1;
}
#dreamz-windowcleaning .rfidSpotlight .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-windowcleaning .featurePanel {
display: none;
}
#dreamz-windowcleaning .featurePanel h3 {
font-size: 25px;
line-height: 1.24;
}
#dreamz-windowcleaning .featurePanel>p {
font-size: 14px;
color: var(--muted);
line-height: 1.85;
margin: 17px 0 0;
}
#dreamz-windowcleaning .spotlightChecks {
list-style: none;
padding: 0;
margin: 23px 0 0;
display: grid;
gap: 12px;
}
#dreamz-windowcleaning .spotlightChecks>li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.75;
color: var(--ink);
}
#dreamz-windowcleaning .spotlightChecks .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
color: var(--brand-dark);
margin-top: 2px;
}
#dreamz-windowcleaning .spotlightActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
#dreamz-windowcleaning .spotlightActions .button {
font-size: 12px;
padding: 12px 16px;
min-height: 44px;
}
#dreamz-windowcleaning .spotlightActions .textCta {
font-size: 11px;
margin: 0;
}
#dreamz-windowcleaning .spotlightScope {
margin: 20px 2px 0;
max-width: 980px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
#dreamz-windowcleaning .decisionSpotlight .featureStage {
background: #171717;
border-color: #3D3D3D;
}
#dreamz-windowcleaning .decisionSpotlight .featurePanel>p {
color: #D0DDE5;
}
#dreamz-windowcleaning .decisionSpotlight .spotlightChecks>li {
color: #EAF0F4;
}
#dreamz-windowcleaning .decisionSpotlight .spotlightChecks .icon {
color: var(--yellow);
}
#dreamz-windowcleaning .decisionSpotlight .spotlightScope {
color: #BDCAD2;
}
#dreamz-windowcleaning .decisionSpotlight .textCta {
color: var(--yellow);
}
#dreamz-windowcleaning .spotlightMedia {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
min-width: 0;
}
#dreamz-windowcleaning .mediaTitle {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 16px;
background: var(--sky);
color: var(--navy);
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .mediaTitle>.icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
#dreamz-windowcleaning .mediaTitle strong {
font-size: 12px;
display: block;
line-height: 1.5;
}
#dreamz-windowcleaning .mediaTitle div>span {
display: block;
color: var(--muted);
font-size: 9px;
line-height: 1.7;
margin-top: 2px;
}
#dreamz-windowcleaning .monitoringMedia>img {
width: calc(100% - 22px);
height: auto;
margin: 20px 11px 14px;
}
#dreamz-windowcleaning .signalFlow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 12px 16px;
padding: 11px;
background: var(--sky-2);
border-radius: 8px;
color: var(--navy);
font-size: 10px;
font-weight: 750;
}
#dreamz-windowcleaning .signalFlow>.icon {
width: 15px;
height: 15px;
flex-basis: 15px;
color: var(--brand-dark);
}
#dreamz-windowcleaning .spotlightMedia figcaption {
font-size: 9px;
line-height: 1.7;
color: var(--muted);
padding: 0 16px 15px;
}
#dreamz-windowcleaning .rfidImageSurface {
background: #172029;
padding: 5px;
}
#dreamz-windowcleaning .rfidImageSurface img {
width: 100%;
height: auto;
}
#dreamz-windowcleaning .rfidMedia figcaption {
padding-top: 13px;
}
#dreamz-windowcleaning .exampleLabel {
margin-left: auto;
font-size: 7px;
letter-spacing: .05em;
background: var(--yellow);
border-radius: 5px;
padding: 4px 5px;
color: var(--black);
}
#dreamz-windowcleaning .aiReviewBody {
padding: 18px;
}
#dreamz-windowcleaning .aiIssue {
padding: 16px;
background: var(--yellow-soft);
border: 1px solid #F0E4AF;
border-radius: 11px;
}
#dreamz-windowcleaning .aiIssue small {
display: block;
font-size: 8px;
letter-spacing: .035em;
color: #79600C;
}
#dreamz-windowcleaning .aiIssue strong {
display: block;
font-size: 16px;
line-height: 1.5;
margin: 7px 0;
color: var(--black);
}
#dreamz-windowcleaning .aiIssue span {
display: block;
font-size: 10px;
color: var(--muted);
line-height: 1.7;
}
#dreamz-windowcleaning .aiEvidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
#dreamz-windowcleaning .aiEvidence>div {
padding: 13px 9px;
background: var(--sky-2);
border: 1px solid var(--line);
border-radius: 8px;
}
#dreamz-windowcleaning .aiEvidence .icon {
color: var(--brand-dark);
width: 19px;
height: 19px;
margin-bottom: 9px;
}
#dreamz-windowcleaning .aiEvidence strong {
display: block;
color: var(--ink);
font-size: 10px;
line-height: 1.5;
}
#dreamz-windowcleaning .aiEvidence span {
display: block;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
margin-top: 4px;
}
#dreamz-windowcleaning .aiReviewConclusion {
border-left: 3px solid var(--brand);
padding-left: 13px;
}
#dreamz-windowcleaning .aiReviewConclusion>span {
color: var(--brand-dark);
font-size: 8px;
font-weight: 800;
letter-spacing: .045em;
}
#dreamz-windowcleaning .aiReviewConclusion p {
color: var(--ink);
font-size: 11px;
line-height: 1.8;
margin: 6px 0 0;
}
#dreamz-windowcleaning .aiReviewAction {
margin-top: 18px;
display: flex;
align-items: center;
gap: 11px;
border-top: 1px solid var(--line);
padding-top: 14px;
color: var(--navy);
}
#dreamz-windowcleaning .aiReviewAction strong {
display: block;
font-size: 11px;
}
#dreamz-windowcleaning .aiReviewAction small {
display: block;
font-size: 9px;
line-height: 1.6;
color: var(--muted);
margin-top: 3px;
}
#dreamz-windowcleaning .decisionSpotlight .spotlightMedia h3 {
color: var(--black);
}
#dreamz-windowcleaning .factoryWorkflows {
padding: 75px 0;
background: #fff;
}
#dreamz-windowcleaning .factoryWorkflowGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
#dreamz-windowcleaning .factoryWorkflow {
padding: 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
}
#dreamz-windowcleaning .factoryWorkflowTitle {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 16px;
}
#dreamz-windowcleaning .factoryWorkflowTitle .cardIcon {
width: 39px;
height: 39px;
flex: 0 0 39px;
margin: 0;
border-radius: 10px;
}
#dreamz-windowcleaning .factoryWorkflowTitle h3 {
font-size: 20px;
line-height: 1.25;
}
#dreamz-windowcleaning .factoryWorkflow>p {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0;
}
#dreamz-windowcleaning .workflowDetails {
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
margin: 20px 0 0;
}
#dreamz-windowcleaning .workflowDetails summary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
color: var(--navy);
}
#dreamz-windowcleaning .workflowDetails summary::-webkit-details-marker {
display: none;
}
#dreamz-windowcleaning .workflowDetails summary::after {
content: "+";
font-size: 18px;
color: var(--brand-dark);
}
#dreamz-windowcleaning .workflowDetails[open] summary::after {
content: "−";
}
#dreamz-windowcleaning .workflowDetails .featureList,
#dreamz-windowcleaning .workflowDetails .moreGrid {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin: 15px 0 0;
}
#dreamz-windowcleaning .workflowDetails .featureItem {
font-size: 11px;
}
#dreamz-windowcleaning .factoryWorkflow>.textCta {
font-size: 11px;
margin-top: 18px;
}
#dreamz-windowcleaning .industryRoles {
background: var(--yellow-soft);
border-top: 1px solid #E7DCA4;
border-bottom: 1px solid #E7DCA4;
}
#dreamz-windowcleaning #windowcleaning-connected-tools {
background: #fff;
}
#dreamz-windowcleaning #windowcleaning-analytics {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#dreamz-windowcleaning .featureTab,
#dreamz-windowcleaning .industryPriority,
#dreamz-windowcleaning summary {
-webkit-tap-highlight-color: transparent;
}
@media (max-width:1100px) {
#dreamz-windowcleaning .industryIntroHead {
gap: 30px;
}
#dreamz-windowcleaning .vedaIndustryShell {
padding: 29px;
gap: 28px;
}
#dreamz-windowcleaning .featureStage {
gap: 26px;
padding: 26px;
}
#dreamz-windowcleaning .featureTab {
font-size: 11px;
padding: 14px 11px;
}
#dreamz-windowcleaning .factoryWorkflow {
padding: 22px;
}
#dreamz-windowcleaning .factoryWorkflowTitle {
align-items: flex-start;
}
}
@media (max-width:900px) {
#dreamz-windowcleaning .industryRibbonGrid {
gap: 16px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-windowcleaning .industryIntroHead {
grid-template-columns: 1fr;
gap: 24px;
}
#dreamz-windowcleaning .industryPriorityGrid {
gap: 14px;
}
#dreamz-windowcleaning .industryPriority {
padding: 22px 19px;
}
#dreamz-windowcleaning .industryPriority h3 {
font-size: 21px;
}
#dreamz-windowcleaning .industryPriority p {
font-size: 12px;
}
#dreamz-windowcleaning .priorityLink {
font-size: 10px;
}
#dreamz-windowcleaning .vedaIndustryShell {
grid-template-columns: 1fr;
gap: 30px;
}
#dreamz-windowcleaning .vedaIndustryCopy h2 {
font-size: 39px;
}
#dreamz-windowcleaning .vedaUseCases {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
#dreamz-windowcleaning .vedaUseCases>div {
display: block;
}
#dreamz-windowcleaning .vedaUseCases .icon {
margin: 0 0 10px;
}
#dreamz-windowcleaning .vedaConversation {
max-width: 610px;
width: 100%;
margin: 0 auto;
}
#dreamz-windowcleaning .featureTabs {
gap: 8px;
}
#dreamz-windowcleaning .featureTab {
min-height: 108px;
}
#dreamz-windowcleaning .featureStage,
#dreamz-windowcleaning .rfidSpotlight .featureStage {
grid-template-columns: 1fr;
gap: 28px;
}
#dreamz-windowcleaning .rfidSpotlight .spotlightMedia,
#dreamz-windowcleaning .rfidSpotlight .featureContent {
grid-column: auto;
grid-row: auto;
}
#dreamz-windowcleaning .spotlightMedia {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-windowcleaning .featurePanel {
min-height: 0;
}
#dreamz-windowcleaning .spotlightActions {
gap: 18px;
margin-top: 23px;
}
#dreamz-windowcleaning .factoryWorkflowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:640px) {
#dreamz-windowcleaning .industryRibbonGrid {
padding-top: 18px;
padding-bottom: 18px;
gap: 15px;
}
#dreamz-windowcleaning .industryRibbonGrid>div {
font-size: 11px;
gap: 8px;
line-height: 1.5;
}
#dreamz-windowcleaning .industryRibbonGrid .icon {
width: 17px;
height: 17px;
flex-basis: 17px;
}
#dreamz-windowcleaning .clientBand {
padding: 22px 0;
}
#dreamz-windowcleaning .clientBand .logoRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
#dreamz-windowcleaning .clientBand .logoBox {
min-height: 32px;
font-size: 12px;
}
#dreamz-windowcleaning .clientBand .logoBox.wide {
font-size: 10px;
}
#dreamz-windowcleaning .clientBand .logoBox:last-child {
grid-column: auto;
}
#dreamz-windowcleaning .industryIntro {
padding: 53px 0;
}
#dreamz-windowcleaning .industryIntroHead h2 {
font-size: 32px;
}
#dreamz-windowcleaning .industryIntroHead>p {
font-size: 14px;
}
#dreamz-windowcleaning .industryPriorityGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .industryPriority {
padding: 23px;
}
#dreamz-windowcleaning .industryPriority h3 {
font-size: 24px;
}
#dreamz-windowcleaning .industryPriority>.icon {
margin: 5px 0 15px;
}
#dreamz-windowcleaning .industryPriority p {
font-size: 13px;
}
#dreamz-windowcleaning .priorityLink {
font-size: 11px;
}
#dreamz-windowcleaning .vedaIndustry {
padding: 0 0 52px;
}
#dreamz-windowcleaning .vedaIndustryShell {
padding: 25px 18px;
border-radius: 17px;
}
#dreamz-windowcleaning .vedaIndustryCopy h2 {
font-size: 32px;
}
#dreamz-windowcleaning .vedaIndustryCopy>p {
font-size: 14px;
}
#dreamz-windowcleaning .vedaUseCases {
grid-template-columns: 1fr;
gap: 17px;
}
#dreamz-windowcleaning .vedaUseCases>div {
display: flex;
}
#dreamz-windowcleaning .vedaConversationHead {
padding: 16px 13px;
}
#dreamz-windowcleaning .vedaConversationHead small {
max-width: 90px;
font-size: 6px;
line-height: 1.7;
}
#dreamz-windowcleaning .vedaMessage {
margin: 15px 12px 0;
padding: 13px;
}
#dreamz-windowcleaning .vedaMessage.user {
margin-left: 25px;
}
#dreamz-windowcleaning .vedaMessage.assistant {
margin-right: 14px;
}
#dreamz-windowcleaning .vedaPromptFooter {
margin: 16px 13px 10px;
font-size: 9px;
}
#dreamz-windowcleaning .vedaConversation figcaption {
padding: 0 13px 15px;
font-size: 8px;
}
#dreamz-windowcleaning .manufacturingSpotlight {
padding: 54px 0;
}
#dreamz-windowcleaning .spotlightHead h2 {
font-size: 32px;
}
#dreamz-windowcleaning .spotlightHead>p {
font-size: 14px;
}
#dreamz-windowcleaning .featureTabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-bottom: 24px;
}
#dreamz-windowcleaning .featureTab {
min-height: 82px;
font-size: 11px;
padding: 12px;
gap: 6px;
}
#dreamz-windowcleaning .featureTab:last-child {
grid-column: 1/-1;
min-height: 62px;
flex-direction: row;
align-items: center;
gap: 10px;
}
#dreamz-windowcleaning .featureStage {
padding: 22px 17px;
border-radius: 14px;
}
#dreamz-windowcleaning .featurePanel h3 {
font-size: 24px;
}
#dreamz-windowcleaning .featurePanel>p {
font-size: 13px;
}
#dreamz-windowcleaning .spotlightChecks {
gap: 11px;
margin-top: 20px;
}
#dreamz-windowcleaning .spotlightChecks>li {
font-size: 12px;
}
#dreamz-windowcleaning .spotlightActions {
flex-direction: column;
align-items: flex-start;
}
#dreamz-windowcleaning .spotlightActions .button {
width: 100%;
}
#dreamz-windowcleaning .spotlightScope {
font-size: 10px;
}
#dreamz-windowcleaning .mediaTitle {
padding: 13px 11px;
gap: 8px;
}
#dreamz-windowcleaning .mediaTitle strong {
font-size: 11px;
}
#dreamz-windowcleaning .mediaTitle div>span {
font-size: 8px;
}
#dreamz-windowcleaning .mediaTitle>.icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
#dreamz-windowcleaning .signalFlow {
gap: 7px;
font-size: 8px;
margin: 0 8px 13px;
padding: 10px 8px;
}
#dreamz-windowcleaning .spotlightMedia figcaption {
font-size: 8px;
padding: 0 12px 13px;
}
#dreamz-windowcleaning .rfidMedia figcaption {
padding-top: 12px;
}
#dreamz-windowcleaning .aiReviewBody {
padding: 13px;
}
#dreamz-windowcleaning .aiIssue {
padding: 13px;
}
#dreamz-windowcleaning .aiIssue strong {
font-size: 14px;
}
#dreamz-windowcleaning .aiEvidence {
gap: 6px;
}
#dreamz-windowcleaning .aiEvidence>div {
padding: 10px 7px;
}
#dreamz-windowcleaning .aiEvidence strong {
font-size: 9px;
}
#dreamz-windowcleaning .aiEvidence span {
font-size: 7px;
}
#dreamz-windowcleaning .exampleLabel {
font-size: 6px;
}
#dreamz-windowcleaning .factoryWorkflows {
padding: 55px 0;
}
#dreamz-windowcleaning .factoryWorkflowGrid {
grid-template-columns: 1fr;
gap: 16px;
}
#dreamz-windowcleaning .factoryWorkflow {
padding: 23px;
}
}
@media (max-width:360px) {
#dreamz-windowcleaning .industryRibbonGrid {
gap: 12px;
}
#dreamz-windowcleaning .industryRibbonGrid>div {
font-size: 10px;
}
#dreamz-windowcleaning .spotlightHead h2 {
font-size: 29px;
}
#dreamz-windowcleaning .featureStage {
padding: 19px 13px;
}
#dreamz-windowcleaning .mediaTitle>.icon {
display: none;
}
#dreamz-windowcleaning .exampleLabel {
display: none;
}
#dreamz-windowcleaning .vedaBrand {
font-size: 27px;
}
}
@media print {
#dreamz-windowcleaning .featureTabs {
display: none;
}
#dreamz-windowcleaning .featurePanels .featurePanel {
display: block !important;
break-inside: avoid;
margin-bottom: 25px;
}
#dreamz-windowcleaning .featureStage {
display: block;
}
#dreamz-windowcleaning .featurePanel {
color: #000;
}
}
#dreamz-windowcleaning #windowcleaning-service-features-1:checked~.featureTabs label[for="windowcleaning-service-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-service-features-1:focus-visible~.featureTabs label[for="windowcleaning-service-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-service-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-2:checked~.featureTabs label[for="windowcleaning-service-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-service-features-2:focus-visible~.featureTabs label[for="windowcleaning-service-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-service-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-3:checked~.featureTabs label[for="windowcleaning-service-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-service-features-3:focus-visible~.featureTabs label[for="windowcleaning-service-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-service-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-4:checked~.featureTabs label[for="windowcleaning-service-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-service-features-4:focus-visible~.featureTabs label[for="windowcleaning-service-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-service-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-5:checked~.featureTabs label[for="windowcleaning-service-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-service-features-5:focus-visible~.featureTabs label[for="windowcleaning-service-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-service-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-1:checked~.featureTabs label[for="windowcleaning-commercial-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-commercial-features-1:focus-visible~.featureTabs label[for="windowcleaning-commercial-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-2:checked~.featureTabs label[for="windowcleaning-commercial-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-commercial-features-2:focus-visible~.featureTabs label[for="windowcleaning-commercial-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-3:checked~.featureTabs label[for="windowcleaning-commercial-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-commercial-features-3:focus-visible~.featureTabs label[for="windowcleaning-commercial-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-4:checked~.featureTabs label[for="windowcleaning-commercial-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-commercial-features-4:focus-visible~.featureTabs label[for="windowcleaning-commercial-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-5:checked~.featureTabs label[for="windowcleaning-commercial-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-commercial-features-5:focus-visible~.featureTabs label[for="windowcleaning-commercial-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-1:checked~.featureTabs label[for="windowcleaning-ai-decisions-features-1"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-1:focus-visible~.featureTabs label[for="windowcleaning-ai-decisions-features-1"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-1:checked~.featureStage .featurePanels> :nth-child(1) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-2:checked~.featureTabs label[for="windowcleaning-ai-decisions-features-2"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-2:focus-visible~.featureTabs label[for="windowcleaning-ai-decisions-features-2"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-2:checked~.featureStage .featurePanels> :nth-child(2) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-3:checked~.featureTabs label[for="windowcleaning-ai-decisions-features-3"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-3:focus-visible~.featureTabs label[for="windowcleaning-ai-decisions-features-3"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-3:checked~.featureStage .featurePanels> :nth-child(3) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-4:checked~.featureTabs label[for="windowcleaning-ai-decisions-features-4"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-4:focus-visible~.featureTabs label[for="windowcleaning-ai-decisions-features-4"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-4:checked~.featureStage .featurePanels> :nth-child(4) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-5:checked~.featureTabs label[for="windowcleaning-ai-decisions-features-5"] {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-5:focus-visible~.featureTabs label[for="windowcleaning-ai-decisions-features-5"] {
outline: 3px solid var(--brand-dark);
outline-offset: 4px;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-5:checked~.featureStage .featurePanels> :nth-child(5) {
display: block;
}
#dreamz-windowcleaning .industryIntroHead {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .featureMediaPanels {
min-width: 0;
}
#dreamz-windowcleaning .featureMediaPanels .miniChart {
height: 178px;
}
#dreamz-windowcleaning .featureMediaPanels .chartSvg {
width: 100%;
height: 126px;
}
#dreamz-windowcleaning .featureMediaPanels .windowTop strong,
#dreamz-windowcleaning .featureMediaPanels .windowTop small {
display: block;
}
#dreamz-windowcleaning .featureMediaPanels .windowTop small {
margin-top: 3px;
}
#dreamz-windowcleaning .featureMediaPanels .metricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-windowcleaning .featureMediaPanels .inventorySplit {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .featureMediaPanels .phoneMock {
width: 190px;
max-width: 100%;
margin: 14px auto 0;
}
#dreamz-windowcleaning .featureMediaPanels .inventoryTable {
table-layout: fixed;
overflow-wrap: anywhere;
}
#dreamz-windowcleaning .featureMediaPanels .windowBody>*,
#dreamz-windowcleaning .featureMediaPanels .spectrumGrid>*,
#dreamz-windowcleaning .featureMediaPanels .forecastGrid>* {
min-width: 0;
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes .node.core {
left: 5%;
top: 65px;
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes .node.n1 {
right: 7%;
top: 16px;
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes .node.n2 {
right: 7%;
top: 98px;
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes .node.n3 {
right: 8%;
bottom: 4px;
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes {
min-height: 258px;
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes:before {
left: 24%;
top: 104px;
width: 54%;
transform: rotate(-21deg);
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes:after {
left: 24%;
top: 119px;
width: 54%;
transform: rotate(30deg);
}
#dreamz-windowcleaning .featureMediaPanels .mapPin {
box-shadow: none;
}
#dreamz-windowcleaning .pin2 {
top: 88px;
right: 88px;
}
#dreamz-windowcleaning .pin3 {
bottom: 54px;
right: 72px;
}
@media (max-width:640px) {
#dreamz-windowcleaning .featureMediaPanels .mediaShell {
padding: 10px;
}
#dreamz-windowcleaning .featureMediaPanels .windowBody {
padding: 10px;
}
#dreamz-windowcleaning .featureMediaPanels .alertCard {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .featureMediaPanels .alertBadge {
justify-self: start;
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes .node.core {
width: 86px;
height: 86px;
}
#dreamz-windowcleaning .featureMediaPanels .graphNodes .node.n1,
#dreamz-windowcleaning .featureMediaPanels .graphNodes .node.n2,
#dreamz-windowcleaning .featureMediaPanels .graphNodes .node.n3 {
width: 64px;
height: 64px;
font-size: 9px;
}
#dreamz-windowcleaning .featureMediaPanels .graphFooter {
flex-direction: column;
}
}
#dreamz-windowcleaning .freshGraphic {
height: 480px;
border: 1px solid #D5E4ED;
border-radius: 22px;
background: linear-gradient(180deg, #F8FCFF 0%, #EFF6FB 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
overflow: hidden;
}
#dreamz-windowcleaning .freshWindow {
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-windowcleaning .freshTop {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-bottom: 1px solid #DDEAF1;
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 252, 255, .92) 100%);
}
#dreamz-windowcleaning .freshTop strong {
display: block;
font-size: 13px;
line-height: 1.35;
color: #0a1e42;
}
#dreamz-windowcleaning .freshTop span {
display: block;
font-size: 9px;
line-height: 1.45;
color: #5F7691;
margin-top: 3px;
max-width: 240px;
}
#dreamz-windowcleaning .freshBody {
flex: 1;
min-height: 0;
padding: 14px;
display: flex;
}
#dreamz-windowcleaning .freshGraphic * {
box-sizing: border-box;
}
#dreamz-windowcleaning .rfPanel,
#dreamz-windowcleaning .aiInsightCard,
#dreamz-windowcleaning .forecastVisualCard,
#dreamz-windowcleaning .forecastSuggestion,
#dreamz-windowcleaning .knowledgeTile,
#dreamz-windowcleaning .chatConversation,
#dreamz-windowcleaning .trainingSummary,
#dreamz-windowcleaning .moduleCard,
#dreamz-windowcleaning .qualityHeatCard,
#dreamz-windowcleaning .qualityAction {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(23, 32, 41, .04);
}
#dreamz-windowcleaning .rfSectionHead {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-windowcleaning .rfSectionHead span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-windowcleaning .rfSectionHead b {
font-size: 11px;
color: #0a1e42;
}
#dreamz-windowcleaning .statusPill,
#dreamz-windowcleaning .cardTag,
#dreamz-windowcleaning .forecastSuggestion b,
#dreamz-windowcleaning .moduleCard b,
#dreamz-windowcleaning .qualityAction b {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 8px;
font-weight: 700;
line-height: 1;
padding: 6px 8px;
white-space: nowrap;
}
#dreamz-windowcleaning .rfTrackLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .rfShelfPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-windowcleaning .rfShelfGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-windowcleaning .shelf {
background: linear-gradient(180deg, #F5FAFF 0%, #EDF5FB 100%);
border: 1px solid #DCEAF2;
border-radius: 14px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 78px;
}
#dreamz-windowcleaning .shelf i {
display: block;
height: 18px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #d8e8f4 0 14px, #f8fbfe 14px 22px);
position: relative;
}
#dreamz-windowcleaning .shelf i::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -5px;
height: 4px;
border-radius: 10px;
background: #C9D9E5;
}
#dreamz-windowcleaning .shelf span {
font-size: 10px;
font-weight: 700;
color: #0a1e42;
}
#dreamz-windowcleaning .shelf.active {
background: linear-gradient(180deg, #ECF8FF 0%, #E1F2FE 100%);
}
#dreamz-windowcleaning .shelf.warning {
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
}
#dreamz-windowcleaning .shelf.danger {
background: linear-gradient(180deg, #FFF1EE 0%, #FFE2DB 100%);
}
#dreamz-windowcleaning .rfMiniLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-windowcleaning .dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
#dreamz-windowcleaning .dot.good {
background: #298EEC;
}
#dreamz-windowcleaning .dot.warn {
background: #F4A62A;
}
#dreamz-windowcleaning .dot.bad {
background: #EB6B53;
}
#dreamz-windowcleaning .rfTrackRight {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
#dreamz-windowcleaning .rfKpiGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#dreamz-windowcleaning .rfKpiCard {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 14px;
padding: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
#dreamz-windowcleaning .rfKpiCard strong {
font-size: 18px;
line-height: 1;
color: #0a1e42;
margin-bottom: 5px;
}
#dreamz-windowcleaning .rfKpiCard span {
font-size: 9px;
color: #5F7691;
}
#dreamz-windowcleaning .rfScanCard {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 10px;
align-items: center;
background: #0A1E42;
color: #fff;
border-radius: 16px;
padding: 12px;
}
#dreamz-windowcleaning .scanTag {
height: 38px;
border-radius: 8px;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px), linear-gradient(180deg, #CCE8FF, #fff);
}
#dreamz-windowcleaning .rfScanCard strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
#dreamz-windowcleaning .rfScanCard span {
display: block;
font-size: 8.5px;
line-height: 1.45;
color: #D4E4F1;
margin-top: 3px;
}
#dreamz-windowcleaning .rfScanCard .statusPill {
background: #F4A62A;
color: #172029;
}
#dreamz-windowcleaning .rfMovementList {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
justify-content: center;
}
#dreamz-windowcleaning .moveRow {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
color: #5F7691;
padding-bottom: 7px;
border-bottom: 1px solid #EAF1F6;
}
#dreamz-windowcleaning .moveRow:last-child {
padding-bottom: 0;
border-bottom: none;
}
#dreamz-windowcleaning .moveRow span {
color: #0a1e42;
font-weight: 600;
}
#dreamz-windowcleaning .moveRow b {
color: #298EEC;
font-size: 9px;
}
#dreamz-windowcleaning .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
height: 100%;
align-items: stretch;
}
#dreamz-windowcleaning .flowColumn {
display: flex;
flex-direction: column;
height: 100%;
}
#dreamz-windowcleaning .flowCard {
flex: 1;
border-radius: 18px;
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 24px rgba(23, 32, 41, .06);
}
#dreamz-windowcleaning .flowCard.source {
background: linear-gradient(180deg, #E9F6FF 0%, #DDF0FF 100%);
}
#dreamz-windowcleaning .flowCard.process {
background: linear-gradient(180deg, #FFF5E5 0%, #FFF0D0 100%);
}
#dreamz-windowcleaning .flowCard.result {
background: linear-gradient(180deg, #EDF8F1 0%, #DFF3E7 100%);
}
#dreamz-windowcleaning .flowNum {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A1E42;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
#dreamz-windowcleaning .flowCard strong {
display: block;
margin-top: 12px;
font-size: 16px;
line-height: 1.2;
color: #0a1e42;
}
#dreamz-windowcleaning .flowCard small {
font-size: 10px;
line-height: 1.5;
color: #5F7691;
display: block;
}
#dreamz-windowcleaning .flowArrow {
height: 14px;
margin: 10px auto 0;
width: 85%;
position: relative;
}
#dreamz-windowcleaning .flowArrow::before {
content: "";
position: absolute;
left: 0;
right: 14px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, #298EEC, #F4A62A);
transform: translateY(-50%);
}
#dreamz-windowcleaning .flowArrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #F4A62A;
border-right: 2px solid #F4A62A;
transform: translateY(-50%) rotate(45deg);
}
#dreamz-windowcleaning .rfEventRail {
grid-column: 1/-1;
background: #0A1E42;
border-radius: 16px;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
#dreamz-windowcleaning .railItem {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 12px;
padding: 10px;
}
#dreamz-windowcleaning .railItem b {
display: block;
font-size: 9px;
color: #F4A62A;
margin-bottom: 5px;
}
#dreamz-windowcleaning .railItem span {
font-size: 9px;
line-height: 1.4;
color: #fff;
display: block;
}
#dreamz-windowcleaning .rfAlertsLayout {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .alertHeroCard {
display: grid;
grid-template-columns: 76px 1fr;
gap: 12px;
align-items: center;
background: linear-gradient(90deg, #0A1E42 0%, #143867 100%);
color: #fff;
border-radius: 18px;
padding: 14px;
}
#dreamz-windowcleaning .alertGauge {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-windowcleaning .gaugeRing {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(#F4A62A 0 210deg, rgba(255, 255, 255, .16) 210deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-windowcleaning .gaugeRing span {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0A1E42;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
}
#dreamz-windowcleaning .alertHeroCard strong {
display: block;
font-size: 14px;
line-height: 1.25;
margin-bottom: 4px;
}
#dreamz-windowcleaning .alertHeroCard small {
font-size: 9px;
line-height: 1.5;
color: #D4E4F1;
display: block;
}
#dreamz-windowcleaning .rfAlertGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
}
#dreamz-windowcleaning .reorderCard {
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-windowcleaning .reorderCard.urgent {
background: linear-gradient(180deg, #FFF0ED 0%, #FFE3DC 100%);
}
#dreamz-windowcleaning .reorderCard.warning {
background: linear-gradient(180deg, #FFF8E8 0%, #FFF0D1 100%);
}
#dreamz-windowcleaning .reorderCard.normal {
background: linear-gradient(180deg, #F3F9FF 0%, #EAF4FF 100%);
}
#dreamz-windowcleaning .cardTag {
background: rgba(10, 30, 66, .08);
color: #0A1E42;
align-self: flex-start;
margin-bottom: 10px;
}
#dreamz-windowcleaning .reorderCard strong {
font-size: 13px;
line-height: 1.3;
color: #0A1E42;
}
#dreamz-windowcleaning .reorderCard small {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
display: block;
margin: 6px 0 10px;
}
#dreamz-windowcleaning .reorderCard b {
background: #fff;
color: #172029;
align-self: flex-start;
}
#dreamz-windowcleaning .rfActionStrip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#dreamz-windowcleaning .rfActionStrip span {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 8px 10px;
font-size: 8.5px;
color: #0A1E42;
font-weight: 600;
}
#dreamz-windowcleaning .rfCycleLayout {
display: grid;
grid-template-columns: 1fr 142px;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .countPanel {
padding: 14px;
height: 100%;
display: flex;
flex-direction: column;
}
#dreamz-windowcleaning .countBar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
#dreamz-windowcleaning .countBar label {
font-size: 9.5px;
font-weight: 600;
color: #0A1E42;
}
#dreamz-windowcleaning .countBar div {
height: 10px;
border-radius: 999px;
background: #DCEAF5;
overflow: hidden;
}
#dreamz-windowcleaning .countBar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #298EEC, #4AB5FF);
}
#dreamz-windowcleaning .countBar b {
font-size: 9px;
color: #0A1E42;
text-align: right;
}
#dreamz-windowcleaning .varianceCard {
margin-top: auto;
background: linear-gradient(180deg, #FFF6E8 0%, #FFF2DA 100%);
border: 1px solid #F3D59E;
border-radius: 14px;
padding: 12px;
}
#dreamz-windowcleaning .varianceCard strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-windowcleaning .varianceCard small {
display: block;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
margin-top: 4px;
}
#dreamz-windowcleaning .handheldPanel {
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-windowcleaning .deviceMock {
width: 100%;
max-width: 132px;
background: #172029;
border-radius: 22px;
padding: 8px;
box-shadow: 0 16px 24px rgba(10, 30, 66, .18);
}
#dreamz-windowcleaning .deviceTop {
padding: 8px 10px;
border-radius: 14px 14px 0 0;
background: #29A3FF;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#dreamz-windowcleaning .deviceScreen {
background: #fff;
border-radius: 0 0 16px 16px;
padding: 12px;
min-height: 250px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-windowcleaning .deviceBadge {
background: #EDF5FF;
border: 1px dashed #BBD7F5;
border-radius: 12px;
padding: 18px 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
}
#dreamz-windowcleaning .deviceMetric {
background: #F7FAFD;
border-radius: 12px;
padding: 10px;
}
#dreamz-windowcleaning .deviceMetric span {
display: block;
font-size: 8.5px;
color: #5F7691;
margin-bottom: 4px;
}
#dreamz-windowcleaning .deviceMetric b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-windowcleaning .deviceButton {
margin-top: auto;
background: #7ACA19;
color: #fff;
text-align: center;
border-radius: 999px;
padding: 10px;
font-size: 9px;
font-weight: 700;
}
#dreamz-windowcleaning .rfSitesLayout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .networkStage {
position: relative;
background: radial-gradient(circle at 50% 50%, #F6FBFF 0%, #EAF3FA 62%, #DFECF6 100%);
border: 1px solid #DCEAF2;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-windowcleaning .siteNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #0A1E42;
background: #fff;
border: 1px solid #D5E4ED;
box-shadow: 0 12px 24px rgba(23, 32, 41, .06);
}
#dreamz-windowcleaning .siteNode.main {
width: 94px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #0A1E42;
color: #fff;
border: none;
}
#dreamz-windowcleaning .siteNode.north {
left: 50%;
top: 14%;
transform: translateX(-50%);
}
#dreamz-windowcleaning .siteNode.east {
right: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-windowcleaning .siteNode.south {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
#dreamz-windowcleaning .siteNode.west {
left: 10%;
top: 48%;
transform: translateY(-50%);
}
#dreamz-windowcleaning .siteLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #298EEC, #88C7FA);
transform-origin: left center;
}
#dreamz-windowcleaning .siteLink.l1 {
left: 50%;
top: 26%;
width: 2px;
height: 76px;
transform: translateX(-50%);
}
#dreamz-windowcleaning .siteLink.l2 {
left: 60%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-windowcleaning .siteLink.l3 {
left: 50%;
top: 63%;
width: 2px;
height: 74px;
transform: translateX(-50%);
}
#dreamz-windowcleaning .siteLink.l4 {
left: 18%;
top: 50%;
width: 112px;
transform: rotate(0deg);
}
#dreamz-windowcleaning .siteSummaryList {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-windowcleaning .siteSummary {
background: #fff;
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 8px;
align-items: center;
}
#dreamz-windowcleaning .siteSummary strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-windowcleaning .siteSummary span {
grid-column: 1/2;
font-size: 9px;
color: #5F7691;
}
#dreamz-windowcleaning .siteSummary b {
grid-column: 2/3;
grid-row: 1/3;
align-self: center;
background: #ECF8FF;
color: #298EEC;
border-radius: 999px;
padding: 7px 8px;
font-size: 8px;
}
#dreamz-windowcleaning .aiRootLayout {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .aiGraphStage {
position: relative;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 18px;
min-height: 100%;
overflow: hidden;
}
#dreamz-windowcleaning .aiNode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid #DDEAF1;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
color: #0A1E42;
box-shadow: 0 10px 22px rgba(23, 32, 41, .05);
}
#dreamz-windowcleaning .aiNode.core {
width: 118px;
height: 118px;
border-radius: 24px;
background: #0A1E42;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#dreamz-windowcleaning .aiNode.n1 {
width: 88px;
height: 88px;
right: 8%;
top: 13%;
}
#dreamz-windowcleaning .aiNode.n2 {
width: 92px;
height: 92px;
right: 7%;
bottom: 18%;
}
#dreamz-windowcleaning .aiNode.n3 {
width: 86px;
height: 86px;
left: 9%;
top: 16%;
}
#dreamz-windowcleaning .aiNode.n4 {
width: 82px;
height: 82px;
left: 10%;
bottom: 20%;
}
#dreamz-windowcleaning .aiLink {
position: absolute;
height: 2px;
background: linear-gradient(90deg, #D3E4F0, #6BB4F4);
transform-origin: left center;
}
#dreamz-windowcleaning .aiLink.a1 {
left: 40%;
top: 36%;
width: 142px;
transform: rotate(-23deg);
}
#dreamz-windowcleaning .aiLink.a2 {
left: 59%;
top: 60%;
width: 122px;
transform: rotate(18deg);
}
#dreamz-windowcleaning .aiLink.a3 {
left: 24%;
top: 37%;
width: 132px;
transform: rotate(25deg);
}
#dreamz-windowcleaning .aiLink.a4 {
left: 26%;
top: 62%;
width: 128px;
transform: rotate(-24deg);
}
#dreamz-windowcleaning .aiInsightCard {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, #0A1E42 0%, #143867 100%);
border: none;
color: #fff;
}
#dreamz-windowcleaning .aiInsightCard strong {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
#dreamz-windowcleaning .aiInsightCard p {
margin: 0;
font-size: 11px;
line-height: 1.7;
color: #D4E4F1;
}
#dreamz-windowcleaning .insightMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#dreamz-windowcleaning .insightMeta span {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
padding: 8px 10px;
border-radius: 999px;
font-size: 8.5px;
color: #fff;
}
#dreamz-windowcleaning .aiForecastLayout {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .forecastVisualCard {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-windowcleaning .chartHeader {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
#dreamz-windowcleaning .chartHeader span {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5F7691;
}
#dreamz-windowcleaning .chartHeader b {
font-size: 11px;
color: #0A1E42;
}
#dreamz-windowcleaning .forecastSvg {
width: 100%;
height: 200px;
background: linear-gradient(180deg, #F7FBFF 0%, #EEF6FC 100%);
border: 1px solid #DDEAF1;
border-radius: 16px;
padding: 12px;
}
#dreamz-windowcleaning .chartLegend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 8.5px;
color: #5F7691;
}
#dreamz-windowcleaning .chartLegend i {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
margin-right: 5px;
}
#dreamz-windowcleaning .chartLegend .sw.blue {
background: #298EEC;
}
#dreamz-windowcleaning .chartLegend .sw.amber {
background: #F4A62A;
}
#dreamz-windowcleaning .forecastSuggestionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-windowcleaning .forecastSuggestion {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-windowcleaning .forecastSuggestion strong {
font-size: 12px;
color: #0A1E42;
}
#dreamz-windowcleaning .forecastSuggestion span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-windowcleaning .forecastSuggestion b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-windowcleaning .aiChatLayout {
display: grid;
grid-template-columns: 138px 1fr;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .knowledgeRail {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-windowcleaning .knowledgeTile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
#dreamz-windowcleaning .knowledgeTile strong {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: #5F7691;
}
#dreamz-windowcleaning .knowledgeTile span {
font-size: 10px;
line-height: 1.5;
color: #0A1E42;
font-weight: 600;
}
#dreamz-windowcleaning .chatConversation {
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
background: linear-gradient(180deg, #fff 0%, #F8FBFF 100%);
}
#dreamz-windowcleaning .bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 14px;
font-size: 10px;
line-height: 1.55;
}
#dreamz-windowcleaning .bubble.user {
background: #E9F5FF;
color: #0A1E42;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
#dreamz-windowcleaning .bubble.bot {
background: #0A1E42;
color: #fff;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#dreamz-windowcleaning .chatPrompt {
margin-top: auto;
background: #F5F9FC;
border: 1px solid #DDEAF1;
border-radius: 999px;
padding: 10px 12px;
font-size: 9px;
color: #5F7691;
}
#dreamz-windowcleaning .aiTrainingLayout {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .trainingSummary {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
#dreamz-windowcleaning .progressDonut {
width: 132px;
height: 132px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(#298EEC 0 245deg, #E4EEF5 245deg 360deg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
#dreamz-windowcleaning .progressCenter {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#dreamz-windowcleaning .progressCenter strong {
font-size: 22px;
color: #0A1E42;
line-height: 1;
}
#dreamz-windowcleaning .progressCenter span {
font-size: 10px;
color: #5F7691;
margin-top: 4px;
}
#dreamz-windowcleaning .trainingStatList {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
#dreamz-windowcleaning .trainingStatList div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
background: #F7FBFF;
border: 1px solid #E2EDF5;
}
#dreamz-windowcleaning .trainingStatList strong {
font-size: 16px;
color: #0A1E42;
}
#dreamz-windowcleaning .trainingStatList span {
font-size: 9px;
color: #5F7691;
}
#dreamz-windowcleaning .trainingModuleGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#dreamz-windowcleaning .moduleCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 0;
}
#dreamz-windowcleaning .moduleCard strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-windowcleaning .moduleCard span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
margin: 8px 0 12px;
}
#dreamz-windowcleaning .moduleCard b {
background: #EDF6FF;
color: #298EEC;
align-self: flex-start;
}
#dreamz-windowcleaning .aiQualityLayout {
display: grid;
grid-template-columns: 1fr .98fr;
gap: 12px;
height: 100%;
}
#dreamz-windowcleaning .qualityHeatCard {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
#dreamz-windowcleaning .qualityHeatGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
flex: 1;
}
#dreamz-windowcleaning .qualityHeatGrid span {
display: block;
border-radius: 14px;
background: #E8F0F6;
min-height: 56px;
}
#dreamz-windowcleaning .qualityHeatGrid span.cool {
background: linear-gradient(180deg, #E4F5FF 0%, #D5EEFF 100%);
}
#dreamz-windowcleaning .qualityHeatGrid span.hot {
background: linear-gradient(180deg, #FFE7D6 0%, #FFD0B4 100%);
}
#dreamz-windowcleaning .qualityCaption strong {
display: block;
font-size: 12px;
color: #0A1E42;
}
#dreamz-windowcleaning .qualityCaption span {
display: block;
margin-top: 4px;
font-size: 9px;
color: #5F7691;
line-height: 1.5;
}
#dreamz-windowcleaning .qualityActionCol {
display: flex;
flex-direction: column;
gap: 10px;
}
#dreamz-windowcleaning .qualityAction {
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
#dreamz-windowcleaning .qualityAction strong {
font-size: 12px;
line-height: 1.35;
color: #0A1E42;
}
#dreamz-windowcleaning .qualityAction span {
font-size: 9px;
line-height: 1.5;
color: #5F7691;
}
#dreamz-windowcleaning .qualityAction b {
align-self: flex-start;
background: #FFF2DA;
color: #A96E00;
}
@media (max-width:980px) {
#dreamz-windowcleaning .freshGraphic {
height: auto;
min-height: 420px;
}
#dreamz-windowcleaning .rfTrackLayout,
#dreamz-windowcleaning .rfFlowLayout,
#dreamz-windowcleaning .rfAlertGrid,
#dreamz-windowcleaning .rfCycleLayout,
#dreamz-windowcleaning .rfSitesLayout,
#dreamz-windowcleaning .aiRootLayout,
#dreamz-windowcleaning .aiForecastLayout,
#dreamz-windowcleaning .aiChatLayout,
#dreamz-windowcleaning .aiTrainingLayout,
#dreamz-windowcleaning .aiQualityLayout,
#dreamz-windowcleaning .trainingModuleGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .rfFlowLayout {
grid-template-rows: auto auto auto auto;
}
#dreamz-windowcleaning .rfEventRail {
grid-template-columns: 1fr 1fr;
}
#dreamz-windowcleaning .rfAlertGrid {
grid-template-columns: 1fr;
}
#dreamz-windowcleaning .qualityHeatGrid span {
min-height: 40px;
}
#dreamz-windowcleaning .aiGraphStage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px;
}
#dreamz-windowcleaning .aiLink {
display: none;
}
}
#dreamz-windowcleaning .mfgHero {
position: relative;
isolation: isolate;
background: #0b0b0b;
padding: 0;
margin: 0;
border: 0;
color: #fff;
}
#dreamz-windowcleaning .mfgHeroScene {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
overflow: hidden;
}
#dreamz-windowcleaning .mfgHeroContent {
position: relative;
z-index: 1;
min-height: 650px;
display: flex;
align-items: center;
background: transparent;
}
#dreamz-windowcleaning .mfgHeroCopy {
width: 51%;
max-width: 600px;
min-width: 0;
padding: 34px 16px 46px 0;
}
#dreamz-windowcleaning .mfgHeroBreadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 30px;
color: #d8e4ec;
font-size: 12px;
line-height: 1.5;
}
#dreamz-windowcleaning .mfgHeroBreadcrumb a {
color: inherit;
}
#dreamz-windowcleaning .mfgHero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--yellow);
color: var(--black);
border-radius: 7px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
margin: 0 0 26px;
}
#dreamz-windowcleaning .mfgHero .eyebrow .icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#dreamz-windowcleaning .mfgHeroLead {
max-width: 540px;
margin: 26px 0 0;
color: #e0e8ed;
font-size: 17px;
line-height: 1.85;
}
#dreamz-windowcleaning .mfgHeroActions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 30px 0 0;
}
#dreamz-windowcleaning .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
padding: 13px 17px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgHeroActions .outline {
color: #fff;
background: rgba(11, 11, 11, .12);
border: 1px solid #90a1ad;
}
#dreamz-windowcleaning .mfgHeroActions .outline:hover {
background: #172029;
}
#dreamz-windowcleaning .mfgHeroFoot {
margin: 24px 0 0;
font-size: 11px;
color: #c8d7e1;
line-height: 1.7;
}
#dreamz-windowcleaning .mfgHero a:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
@media (min-width:1800px) {
#dreamz-windowcleaning .mfgHeroContent {
min-height: 700px;
}
}
@media (max-width:1180px) and (min-width:901px) {
#dreamz-windowcleaning .mfgHeroContent {
min-height: 610px;
}
#dreamz-windowcleaning .mfgHeroCopy {
width: 55%;
padding-right: 10px;
}
#dreamz-windowcleaning .mfgHeroLead {
font-size: 16px;
}
#dreamz-windowcleaning .mfgHeroActions .button {
font-size: 12px;
padding: 12px 14px;
}
}
@media (max-width:900px) {
#dreamz-windowcleaning .mfgHero {
display: flex;
flex-direction: column;
}
#dreamz-windowcleaning .mfgHeroContent {
order: 0;
min-height: 0;
}
#dreamz-windowcleaning .mfgHeroCopy {
width: 100%;
max-width: 660px;
padding: 30px 0 22px;
}
#dreamz-windowcleaning .mfgHeroScene {
position: relative;
inset: auto;
order: 1;
width: 100%;
height: 360px;
}
#dreamz-windowcleaning .mfgHeroBreadcrumb {
margin-bottom: 24px;
}
#dreamz-windowcleaning .mfgHeroLead {
max-width: 620px;
}
}
@media (max-width:600px) {
#dreamz-windowcleaning .mfgHeroCopy {
padding: 25px 0 20px;
}
#dreamz-windowcleaning .mfgHeroBreadcrumb {
gap: 10px;
font-size: 11px;
margin-bottom: 22px;
}
#dreamz-windowcleaning .mfgHero .eyebrow {
font-size: 11px;
margin-bottom: 23px;
}
#dreamz-windowcleaning .mfgHeroLead {
font-size: 15px;
line-height: 1.8;
margin-top: 21px;
}
#dreamz-windowcleaning .mfgHeroActions {
gap: 10px;
margin-top: 24px;
flex-direction: column;
align-items: stretch;
}
#dreamz-windowcleaning .mfgHeroActions .button {
font-size: 13px;
min-height: 48px;
width: 100%;
}
#dreamz-windowcleaning .mfgHeroFoot {
margin-top: 20px;
font-size: 10px;
}
#dreamz-windowcleaning .mfgHeroScene {
height: 280px;
}
}
@media print {
#dreamz-windowcleaning .mfgHero {
background: #fff;
color: #000;
}
#dreamz-windowcleaning .mfgHeroScene,
#dreamz-windowcleaning .mfgHeroActions {
display: none;
}
#dreamz-windowcleaning .mfgHeroContent {
min-height: 0;
}
#dreamz-windowcleaning .mfgHeroCopy {
width: 100%;
max-width: none;
}
#dreamz-windowcleaning .mfgHero h1,
#dreamz-windowcleaning .mfgHero h1 .mfgHeroAccent,
#dreamz-windowcleaning .mfgHero p {
color: #000;
}
}
#dreamz-windowcleaning #windowcleaning-commercial .featureStage,
#dreamz-windowcleaning #windowcleaning-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 28px;
gap: 32px;
}
#dreamz-windowcleaning .mfgGallery {
min-width: 0;
min-height: 0;
width: 100%;
}
#dreamz-windowcleaning .mfgGallery .freshGraphic {
height: 500px;
min-height: 0;
max-height: none;
max-width: none;
margin: 0;
overflow: visible;
border-radius: 18px;
background: #f5fbff;
border: 1px solid #d9e8f1;
}
#dreamz-windowcleaning .mfgGallery .freshWindow {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: inherit;
}
#dreamz-windowcleaning .mfgGallery .freshTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
flex: 0 0 auto;
padding: 13px 14px;
background: #fff;
border-radius: 17px 17px 0 0;
}
#dreamz-windowcleaning .mfgGallery .freshTop strong {
grid-column: 1;
font-size: 14px;
line-height: 1.3;
color: #063b5c;
}
#dreamz-windowcleaning .mfgGallery .freshTop>span {
grid-column: 1;
max-width: none;
font-size: 10px;
line-height: 1.5;
margin: 0;
color: #526a7c;
}
#dreamz-windowcleaning .mfgGallery .mfgSampleLabel {
grid-column: 2;
grid-row: 1/3;
align-self: start;
color: #526a7c;
background: #eaf8ff;
border: 1px solid #d9e8f1;
border-radius: 4px;
font-size: 8px;
font-weight: 750;
letter-spacing: .05em;
line-height: 1.5;
padding: 4px 6px;
white-space: nowrap;
}
#dreamz-windowcleaning .mfgGallery .freshBody {
height: auto;
min-height: 0;
flex: 1 1 auto;
padding: 14px;
gap: 12px;
}
#dreamz-windowcleaning .mfgGallery .freshBody>* {
min-width: 0;
min-height: 0;
}
#dreamz-windowcleaning .mfgGallery .rfSectionHead {
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
#dreamz-windowcleaning .mfgGallery .rfSectionHead span {
font-size: 10px;
line-height: 1.4;
}
#dreamz-windowcleaning .mfgGallery .rfSectionHead b {
font-size: 10px;
line-height: 1.4;
}
#dreamz-windowcleaning .mfgGallery .rfPanel {
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .rfTrackLayout {
display: grid;
grid-template-columns: .8fr 1.2fr;
}
#dreamz-windowcleaning .mfgGallery .rfShelfPanel {
padding: 12px;
height: auto;
}
#dreamz-windowcleaning .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
gap: 8px;
min-height: 0;
}
#dreamz-windowcleaning .mfgGallery .shelf {
min-height: 0;
padding: 9px;
border-radius: 8px;
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .shelf span {
font-size: 11px;
}
#dreamz-windowcleaning .mfgGallery .rfMiniLegend {
gap: 6px 9px;
font-size: 9px;
margin-top: 10px;
}
#dreamz-windowcleaning .mfgGallery .rfTrackRight {
padding: 0;
height: auto;
border: 0;
background: transparent;
gap: 9px;
}
#dreamz-windowcleaning .mfgGallery .rfKpiGrid {
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .rfKpiCard {
padding: 12px;
min-height: 72px;
border-radius: 10px;
}
#dreamz-windowcleaning .mfgGallery .rfKpiCard strong {
font-size: 22px;
}
#dreamz-windowcleaning .mfgGallery .rfKpiCard span {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .rfScanCard {
grid-template-columns: 36px minmax(0, 1fr);
padding: 12px;
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .scanTag {
width: 36px;
height: 40px;
}
#dreamz-windowcleaning .mfgGallery .rfScanCard strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-windowcleaning .mfgGallery .rfScanCard span {
font-size: 9px;
}
#dreamz-windowcleaning .mfgGallery .rfScanCard .statusPill {
grid-column: 2;
justify-self: start;
font-size: 9px;
font-style: normal;
}
#dreamz-windowcleaning .mfgGallery .rfMovementList {
padding: 11px;
gap: 10px;
}
#dreamz-windowcleaning .mfgGallery .moveRow {
font-size: 10px;
line-height: 1.5;
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .moveRow b {
font-size: 9px;
white-space: nowrap;
}
#dreamz-windowcleaning .mfgGallery .rfFlowLayout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) 115px;
}
#dreamz-windowcleaning .mfgGallery .flowColumn {
height: auto;
min-height: 0;
}
#dreamz-windowcleaning .mfgGallery .flowCard {
padding: 13px;
gap: 12px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .flowCard strong {
font-size: 17px;
line-height: 1.25;
}
#dreamz-windowcleaning .mfgGallery .flowCard small {
font-size: 11px;
line-height: 1.55;
}
#dreamz-windowcleaning .mfgGallery .flowArrow {
display: none;
}
#dreamz-windowcleaning .mfgGallery .rfEventRail {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 8px;
gap: 7px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .railItem {
padding: 9px 7px;
}
#dreamz-windowcleaning .mfgGallery .railItem b {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .railItem span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-windowcleaning .mfgGallery .rfAlertsLayout {
display: grid;
grid-template-rows: 91px minmax(0, 1fr) 60px;
}
#dreamz-windowcleaning .mfgGallery .alertHeroCard {
grid-template-columns: 60px minmax(0, 1fr);
padding: 12px;
gap: 10px;
}
#dreamz-windowcleaning .mfgGallery .alertHeroCard strong {
font-size: 15px;
}
#dreamz-windowcleaning .mfgGallery .alertHeroCard small {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .rfAlertGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .reorderCard {
padding: 12px;
gap: 6px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .reorderCard strong {
font-size: 13px;
}
#dreamz-windowcleaning .mfgGallery .reorderCard small {
font-size: 10px;
line-height: 1.5;
}
#dreamz-windowcleaning .mfgGallery .reorderCard b {
font-size: 10px;
line-height: 1.45;
white-space: normal;
padding: 6px;
border-radius: 5px;
}
#dreamz-windowcleaning .mfgGallery .rfActionStrip {
gap: 6px;
align-content: start;
}
#dreamz-windowcleaning .mfgGallery .rfActionStrip span {
font-size: 9px;
padding: 6px 8px;
}
#dreamz-windowcleaning .mfgGallery .rfCycleLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) 154px;
}
#dreamz-windowcleaning .mfgGallery .countPanel {
height: auto;
padding: 14px;
gap: 16px;
}
#dreamz-windowcleaning .mfgGallery .countBar {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
margin: 0;
}
#dreamz-windowcleaning .mfgGallery .countBar label {
font-size: 11px;
line-height: 1.4;
}
#dreamz-windowcleaning .mfgGallery .countBar>div {
grid-column: 1/3;
grid-row: 2;
height: 11px;
}
#dreamz-windowcleaning .mfgGallery .countBar>b {
grid-column: 2;
grid-row: 1;
font-size: 11px;
}
#dreamz-windowcleaning .mfgGallery .varianceCard {
padding: 12px;
}
#dreamz-windowcleaning .mfgGallery .varianceCard strong {
font-size: 13px;
line-height: 1.4;
}
#dreamz-windowcleaning .mfgGallery .varianceCard small {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .handheldPanel {
background: #eaf8ff;
border: 0;
}
#dreamz-windowcleaning .mfgGallery .deviceMock {
display: flex;
flex-direction: column;
width: 142px;
max-width: 100%;
height: 345px;
padding: 7px;
}
#dreamz-windowcleaning .mfgGallery .deviceTop {
font-size: 11px;
}
#dreamz-windowcleaning .mfgGallery .deviceScreen {
min-height: 0;
flex: 1;
padding: 10px;
gap: 10px;
}
#dreamz-windowcleaning .mfgGallery .deviceBadge {
padding: 16px 7px;
font-size: 12px;
}
#dreamz-windowcleaning .mfgGallery .deviceMetric {
padding: 9px;
}
#dreamz-windowcleaning .mfgGallery .deviceMetric span {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .deviceMetric b {
font-size: 12px;
}
#dreamz-windowcleaning .mfgGallery .deviceButton {
font-size: 10px;
line-height: 1.3;
padding: 10px 6px;
}
#dreamz-windowcleaning .mfgGallery .rfSitesLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 212px minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .networkStage {
min-height: 0;
height: 212px;
overflow: visible;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .siteNode {
z-index: 1;
width: 58px;
height: 58px;
font-size: 11px;
}
#dreamz-windowcleaning .mfgGallery .siteNode.main {
width: 80px;
height: 80px;
}
#dreamz-windowcleaning .mfgGallery .siteNode.north {
top: 6px;
}
#dreamz-windowcleaning .mfgGallery .siteNode.south {
bottom: 6px;
}
#dreamz-windowcleaning .mfgGallery .siteNode.east {
top: 50%;
right: 7%;
}
#dreamz-windowcleaning .mfgGallery .siteNode.west {
top: 50%;
left: 7%;
}
#dreamz-windowcleaning .mfgGallery .siteLink {
z-index: 0;
background: #91c9eb;
}
#dreamz-windowcleaning .mfgGallery .siteLink.l1 {
left: 50%;
top: 20%;
width: 2px;
height: 30%;
transform: none;
}
#dreamz-windowcleaning .mfgGallery .siteLink.l2 {
left: 50%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-windowcleaning .mfgGallery .siteLink.l3 {
left: 50%;
top: 50%;
width: 2px;
height: 35%;
transform: none;
}
#dreamz-windowcleaning .mfgGallery .siteLink.l4 {
left: 15%;
top: 50%;
width: 35%;
height: 2px;
transform: none;
}
#dreamz-windowcleaning .mfgGallery .siteSummaryList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .siteSummary {
padding: 10px;
gap: 4px 6px;
border-radius: 10px;
}
#dreamz-windowcleaning .mfgGallery .siteSummary strong {
font-size: 12px;
}
#dreamz-windowcleaning .mfgGallery .siteSummary span {
font-size: 9px;
line-height: 1.5;
}
#dreamz-windowcleaning .mfgGallery .aiRootLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 220px minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage {
position: relative;
display: block;
padding: 0;
height: 220px;
min-height: 0;
overflow: visible;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage .aiNode {
position: absolute;
width: 120px;
height: 56px;
padding: 9px;
margin: 0;
border-radius: 10px;
font-size: 11px;
line-height: 1.3;
z-index: 1;
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage .aiNode.core {
width: 138px;
height: 65px;
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
font-size: 13px;
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage .aiNode.n1 {
right: 4%;
top: 12px;
left: auto;
bottom: auto;
transform: none;
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage .aiNode.n2 {
right: 4%;
bottom: 12px;
left: auto;
top: auto;
transform: none;
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage .aiNode.n3 {
left: 4%;
top: 12px;
right: auto;
bottom: auto;
transform: none;
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage .aiNode.n4 {
left: 4%;
bottom: 12px;
right: auto;
top: auto;
transform: none;
}
#dreamz-windowcleaning .mfgGallery .mfgNetworkLines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#dreamz-windowcleaning .mfgGallery .aiInsightCard {
padding: 13px 15px;
gap: 8px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .aiInsightCard strong {
font-size: 14px;
}
#dreamz-windowcleaning .mfgGallery .aiInsightCard p {
font-size: 11px;
line-height: 1.55;
}
#dreamz-windowcleaning .mfgGallery .insightMeta {
gap: 6px;
}
#dreamz-windowcleaning .mfgGallery .insightMeta span {
font-size: 9px;
padding: 5px 7px;
}
#dreamz-windowcleaning .mfgGallery .aiForecastLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 225px minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .forecastVisualCard {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .chartHeader span {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .chartHeader b {
font-size: 11px;
}
#dreamz-windowcleaning .mfgGallery .forecastSvg {
flex: 1 1 auto;
min-height: 0;
height: 150px;
width: 100%;
padding: 8px;
}
#dreamz-windowcleaning .mfgGallery .chartLegend {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestion {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestion strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestion span {
font-size: 10px;
line-height: 1.55;
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestion b {
font-size: 9px;
}
#dreamz-windowcleaning .mfgGallery .aiChatLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 69px minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .knowledgeRail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .knowledgeTile {
padding: 8px 10px;
gap: 4px;
border-radius: 9px;
}
#dreamz-windowcleaning .mfgGallery .knowledgeTile strong {
font-size: 9px;
}
#dreamz-windowcleaning .mfgGallery .knowledgeTile span {
font-size: 10px;
line-height: 1.45;
}
#dreamz-windowcleaning .mfgGallery .chatConversation {
padding: 12px;
gap: 8px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .bubble {
font-size: 11px;
line-height: 1.5;
padding: 8px 10px;
max-width: 94%;
}
#dreamz-windowcleaning .mfgGallery .chatPrompt {
font-size: 10px;
padding: 8px 10px;
line-height: 1.4;
}
#dreamz-windowcleaning .mfgGallery .aiTrainingLayout {
display: grid;
grid-template-columns: .75fr 1.25fr;
}
#dreamz-windowcleaning .mfgGallery .trainingSummary {
padding: 12px;
gap: 15px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .progressDonut {
width: 118px;
height: 118px;
padding: 11px;
}
#dreamz-windowcleaning .mfgGallery .progressCenter strong {
font-size: 25px;
}
#dreamz-windowcleaning .mfgGallery .trainingStatList {
gap: 9px;
}
#dreamz-windowcleaning .mfgGallery .trainingStatList div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 8px 10px;
border-radius: 8px;
}
#dreamz-windowcleaning .mfgGallery .trainingStatList strong {
font-size: 20px;
}
#dreamz-windowcleaning .mfgGallery .trainingStatList span {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .trainingModuleGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .moduleCard {
padding: 12px;
gap: 8px;
border-radius: 10px;
}
#dreamz-windowcleaning .mfgGallery .moduleCard strong {
font-size: 12px;
line-height: 1.35;
}
#dreamz-windowcleaning .mfgGallery .moduleCard span {
font-size: 10px;
line-height: 1.5;
margin: 0;
}
#dreamz-windowcleaning .mfgGallery .moduleCard b {
white-space: normal;
font-size: 9px;
line-height: 1.3;
}
#dreamz-windowcleaning .mfgGallery .aiQualityLayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 210px minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .qualityHeatCard {
padding: 12px;
gap: 10px;
border-radius: 12px;
}
#dreamz-windowcleaning .mfgGallery .qualityHeatGrid {
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 0;
gap: 5px;
}
#dreamz-windowcleaning .mfgGallery .qualityHeatGrid span {
min-height: 0;
border-radius: 5px;
}
#dreamz-windowcleaning .mfgGallery .qualityCaption strong {
font-size: 12px;
}
#dreamz-windowcleaning .mfgGallery .qualityCaption span {
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .qualityActionCol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#dreamz-windowcleaning .mfgGallery .qualityAction {
padding: 11px;
gap: 8px;
border-radius: 10px;
}
#dreamz-windowcleaning .mfgGallery .qualityAction strong {
font-size: 11px;
line-height: 1.4;
}
#dreamz-windowcleaning .mfgGallery .qualityAction span {
font-size: 10px;
line-height: 1.5;
}
#dreamz-windowcleaning .mfgGallery .qualityAction b {
font-size: 9px;
line-height: 1.4;
white-space: normal;
padding: 6px;
}
@media (max-width:1100px) {
#dreamz-windowcleaning #windowcleaning-commercial .featureStage,
#dreamz-windowcleaning #windowcleaning-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
padding: 25px;
gap: 28px;
}
#dreamz-windowcleaning #windowcleaning-commercial .featureStage>.featureContent {
grid-column: 1;
grid-row: auto;
}
#dreamz-windowcleaning .mfgGallery {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
}
@media (max-width:600px) {
#dreamz-windowcleaning #windowcleaning-commercial .featureStage,
#dreamz-windowcleaning #windowcleaning-ai-decisions .featureStage {
padding: 16px;
}
#dreamz-windowcleaning .mfgGallery .freshGraphic {
height: auto;
min-height: 0;
}
#dreamz-windowcleaning .mfgGallery .freshWindow {
height: auto;
}
#dreamz-windowcleaning .mfgGallery .freshBody {
flex: none;
height: auto;
min-height: 0;
padding: 10px;
gap: 10px;
}
#dreamz-windowcleaning .mfgGallery .freshTop {
padding: 12px;
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .freshTop strong {
font-size: 13px;
}
#dreamz-windowcleaning .mfgGallery .mfgSampleLabel {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-top: 4px;
}
#dreamz-windowcleaning .mfgGallery .rfTrackLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .rfShelfGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 60px);
gap: 6px;
}
#dreamz-windowcleaning .mfgGallery .rfShelfPanel {
padding: 10px;
}
#dreamz-windowcleaning .mfgGallery .rfSectionHead {
margin-bottom: 8px;
}
#dreamz-windowcleaning .mfgGallery .rfKpiCard {
min-height: 60px;
padding: 10px;
}
#dreamz-windowcleaning .mfgGallery .rfScanCard {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
#dreamz-windowcleaning .mfgGallery .rfScanCard .statusPill {
grid-column: 3;
grid-row: 1;
}
#dreamz-windowcleaning .mfgGallery .rfFlowLayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#dreamz-windowcleaning .mfgGallery .flowCard {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 6px 10px;
padding: 12px;
}
#dreamz-windowcleaning .mfgGallery .flowNum {
grid-row: 1/3;
}
#dreamz-windowcleaning .mfgGallery .flowCard strong {
margin: 0;
font-size: 15px;
}
#dreamz-windowcleaning .mfgGallery .flowCard small {
grid-column: 2;
font-size: 11px;
}
#dreamz-windowcleaning .mfgGallery .rfEventRail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dreamz-windowcleaning .mfgGallery .rfAlertsLayout {
grid-template-rows: auto;
}
#dreamz-windowcleaning .mfgGallery .rfAlertGrid {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .reorderCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
#dreamz-windowcleaning .mfgGallery .reorderCard .cardTag {
grid-column: 2;
grid-row: 1;
margin: 0;
align-self: start;
}
#dreamz-windowcleaning .mfgGallery .reorderCard strong {
grid-column: 1;
grid-row: 1;
}
#dreamz-windowcleaning .mfgGallery .reorderCard small {
margin: 0;
grid-column: 1/3;
}
#dreamz-windowcleaning .mfgGallery .reorderCard b {
grid-column: 1/3;
justify-self: start;
}
#dreamz-windowcleaning .mfgGallery .rfActionStrip {
height: auto;
}
#dreamz-windowcleaning .mfgGallery .rfCycleLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .countPanel {
gap: 14px;
}
#dreamz-windowcleaning .mfgGallery .handheldPanel {
padding: 15px;
}
#dreamz-windowcleaning .mfgGallery .deviceMock {
width: 156px;
height: 320px;
}
#dreamz-windowcleaning .mfgGallery .rfSitesLayout {
grid-template-rows: 212px auto;
}
#dreamz-windowcleaning .mfgGallery .siteSummary {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .siteSummary b {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
#dreamz-windowcleaning .mfgGallery .siteNode.east {
right: 3%;
}
#dreamz-windowcleaning .mfgGallery .siteNode.west {
left: 3%;
}
#dreamz-windowcleaning .mfgGallery .siteNode.main {
width: 70px;
height: 70px;
}
#dreamz-windowcleaning .mfgGallery .aiRootLayout {
grid-template-rows: 220px auto;
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage .aiNode {
width: 101px;
height: 52px;
font-size: 10px;
}
#dreamz-windowcleaning .mfgGallery .aiGraphStage .aiNode.core {
width: 125px;
height: 62px;
font-size: 12px;
}
#dreamz-windowcleaning .mfgGallery .aiInsightCard p {
font-size: 12px;
}
#dreamz-windowcleaning .mfgGallery .aiForecastLayout {
grid-template-rows: 225px auto;
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestion span {
grid-column: 1;
}
#dreamz-windowcleaning .mfgGallery .forecastSuggestion b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
}
#dreamz-windowcleaning .mfgGallery .aiChatLayout {
grid-template-rows: auto auto;
}
#dreamz-windowcleaning .mfgGallery .knowledgeRail {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
#dreamz-windowcleaning .mfgGallery .knowledgeTile {
display: grid;
grid-template-columns: 75px minmax(0, 1fr);
padding: 8px;
}
#dreamz-windowcleaning .mfgGallery .bubble {
font-size: 12px;
line-height: 1.55;
}
#dreamz-windowcleaning .mfgGallery .aiTrainingLayout {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .trainingSummary {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px;
}
#dreamz-windowcleaning .mfgGallery .progressDonut {
flex: 0 0 108px;
width: 108px;
height: 108px;
margin: 0;
}
#dreamz-windowcleaning .mfgGallery .trainingStatList {
flex: 1;
gap: 5px;
}
#dreamz-windowcleaning .mfgGallery .trainingStatList div {
padding: 6px 8px;
}
#dreamz-windowcleaning .mfgGallery .trainingStatList strong {
font-size: 17px;
}
#dreamz-windowcleaning .mfgGallery .trainingModuleGrid {
grid-template-rows: repeat(2, 170px);
}
#dreamz-windowcleaning .mfgGallery .moduleCard {
padding: 10px;
}
#dreamz-windowcleaning .mfgGallery .aiQualityLayout {
grid-template-rows: 210px auto;
}
#dreamz-windowcleaning .mfgGallery .qualityActionCol {
grid-template-columns: minmax(0, 1fr);
}
#dreamz-windowcleaning .mfgGallery .qualityAction strong {
font-size: 12px;
}
#dreamz-windowcleaning .mfgGallery .qualityAction span {
font-size: 11px;
}
}
#dreamz-windowcleaning .mfgGallery .shelf i::after {
bottom: 0;
}
#dreamz-windowcleaning .windowcleaningVisualGallery {
width: 100%;
min-width: 0;
min-height: 0;
margin: 0 auto;
max-width: 650px;
align-self: center;
}
#dreamz-windowcleaning .windowcleaningGraphic {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
height: auto;
min-height: 0;
max-width: 100%;
overflow: visible;
}
#dreamz-windowcleaning .windowcleaningIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-windowcleaning .windowcleaningStandalone {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
#dreamz-windowcleaning .windowcleaningVisualGallery>.windowcleaningGraphic {
display: none;
}
#dreamz-windowcleaning #windowcleaning-service .featureStage,
#dreamz-windowcleaning #windowcleaning-commercial .featureStage,
#dreamz-windowcleaning #windowcleaning-ai-decisions .featureStage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 30px;
}
#dreamz-windowcleaning #windowcleaning-commercial .windowcleaningVisualGallery {
grid-column: 1;
grid-row: 1;
}
#dreamz-windowcleaning #windowcleaning-commercial .featureContent {
grid-column: 2;
grid-row: 1;
}
#dreamz-windowcleaning .factoryWorkflow {
display: flex;
flex-direction: column;
}
#dreamz-windowcleaning .factoryWorkflow>.textCta {
margin-top: auto;
align-self: flex-start;
}
#dreamz-windowcleaning .factoryWorkflow>p {
margin-bottom: 22px;
}
#dreamz-windowcleaning .factoryWorkflowTitle h3 {
line-height: 1.25;
}
@media (max-width:1180px) and (min-width:901px) {
}
@media (max-width:1100px) {
#dreamz-windowcleaning #windowcleaning-service .featureStage,
#dreamz-windowcleaning #windowcleaning-commercial .featureStage,
#dreamz-windowcleaning #windowcleaning-ai-decisions .featureStage {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
#dreamz-windowcleaning #windowcleaning-commercial .windowcleaningVisualGallery,
#dreamz-windowcleaning #windowcleaning-commercial .featureContent {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width:600px) {
#dreamz-windowcleaning .mfgHeroScene {
height: 290px;
}
#dreamz-windowcleaning #windowcleaning-service .featureStage,
#dreamz-windowcleaning #windowcleaning-commercial .featureStage,
#dreamz-windowcleaning #windowcleaning-ai-decisions .featureStage {
padding: 16px;
gap: 25px;
}
#dreamz-windowcleaning .windowcleaningVisualGallery {
width: 100%;
}
}
@media print {
#dreamz-windowcleaning .windowcleaningVisualGallery>.windowcleaningGraphic {
display: block !important;
break-inside: avoid;
margin-block: 18px;
}
}
#dreamz-windowcleaning #windowcleaning-service-features-1:checked~.featureStage .windowcleaningVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-2:checked~.featureStage .windowcleaningVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-3:checked~.featureStage .windowcleaningVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-4:checked~.featureStage .windowcleaningVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-service-features-5:checked~.featureStage .windowcleaningVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-1:checked~.featureStage .windowcleaningVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-2:checked~.featureStage .windowcleaningVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-3:checked~.featureStage .windowcleaningVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-4:checked~.featureStage .windowcleaningVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-commercial-features-5:checked~.featureStage .windowcleaningVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-1:checked~.featureStage .windowcleaningVisualGallery> :nth-child(1) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-2:checked~.featureStage .windowcleaningVisualGallery> :nth-child(2) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-3:checked~.featureStage .windowcleaningVisualGallery> :nth-child(3) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-4:checked~.featureStage .windowcleaningVisualGallery> :nth-child(4) {
display: block;
}
#dreamz-windowcleaning #windowcleaning-ai-decisions-features-5:checked~.featureStage .windowcleaningVisualGallery> :nth-child(5) {
display: block;
}
#dreamz-windowcleaning .mfgHeroScene img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 70% 50%;
}
#dreamz-windowcleaning .mfgHeroScene::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11, 11, 11, .98) 0%, rgba(11, 11, 11, .93) 22%, rgba(11, 11, 11, .79) 34%, rgba(11, 11, 11, .56) 43%, rgba(11, 11, 11, .24) 53%, rgba(11, 11, 11, .04) 65%, rgba(11, 11, 11, 0) 75%);
}
#dreamz-windowcleaning .windowcleaningIllustration {
aspect-ratio: 620/460;
width: 100%;
height: auto;
display: block;
max-width: 100%;
overflow: visible;
}
#dreamz-windowcleaning .windowcleaningGraphic {
margin: 0;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
#dreamz-windowcleaning .spotlightActions .button {
white-space: normal;
}
@media(min-width:901px) and (max-width:1180px) {
#dreamz-windowcleaning .mfgHeroScene img {
object-position: 70% 50%;
}
#dreamz-windowcleaning .mfgHeroScene::after {
background: linear-gradient(90deg, rgba(11, 11, 11, .99), rgba(11, 11, 11, .91) 30%, rgba(11, 11, 11, .75) 45%, rgba(11, 11, 11, .36) 59%, rgba(11, 11, 11, 0) 80%);
}
}
@media(max-width:900px) {
#dreamz-windowcleaning .mfgHeroScene img {
object-position: 78% 50%;
}
#dreamz-windowcleaning .mfgHeroScene::after {
background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, .7) 8%, rgba(11, 11, 11, .1) 28%, rgba(11, 11, 11, 0) 45%);
}
} #dreamz-windowcleaning .mfgHeroContent {
background: transparent;
}
#dreamz-windowcleaning .mfgHeroScene img {
object-position: 62% 50%;
}
#dreamz-windowcleaning .windowcleaningIllustration {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 620/460;
overflow: visible;
}
#dreamz-windowcleaning .windowcleaningIllustration text {
font-family: Arial, Helvetica, sans-serif;
}
#dreamz-windowcleaning .windowcleaningGraphic {
height: auto;
min-height: 0;
overflow: visible;
}
#dreamz-windowcleaning .windowcleaningVisualGallery {
min-height: 0;
}
@media(max-width:1180px) {
#dreamz-windowcleaning .mfgHeroScene img {
object-position: 68% 50%;
}
}
@media(max-width:600px) {
#dreamz-windowcleaning .mfgHeroScene img {
object-position: 78% 50%;
}
} .tabIndex{
display:none !important;
}
.featureTab{
font-size: 15px !important;
min-height: 0 !important;
}
.mfgHero .eyebrow{
border-radius: 50px !important;
}
#dreamz-homebuilder .mfgHero h1{
font-weight: 700 !important;
}
.spotlightChecks>li,
.featureItem{
font-size: 15px !important;
}